Open DeepFashion demo as business-first results view

.hyperview/extensions/fashion-search-readout/panel.js

@@ -348,7 +348,7 @@ function SearchResultComparison({ item, models, loadingKey, onSelectResult }) {
       React.createElement(
         "div",
         { style: { color: colors.mutedText, fontSize: 10, marginTop: 3 } },
-        "Green card = exact product. Click any card to select it in the map.",
+        "Green card = exact product. Map context is optional and hidden by default.",
       ),
     ),
     models.map((model) =>
@@ -378,7 +378,7 @@ function ExactTargetActions({ item, models, loadingKey, onSelectQuery }) {
         const neighborLine =
           typeof summary.categoryHits === "number"
             ? `${summary.categoryHits}/${summary.total || 10} same-category image neighbors`
-            : "Open the map to inspect image neighbors";
+            : "Neighbor context available in HyperView";
         const choiceKey = `${item.queryId}:${model.key}`;
         return React.createElement(
           "button",
@@ -387,7 +387,7 @@ function ExactTargetActions({ item, models, loadingKey, onSelectQuery }) {
             type: "button",
             onClick: () => onSelectQuery(item, model),
             disabled: loadingKey === choiceKey,
-            title: `Select target item and inspect ${model.displayName} image neighbors`,
+            title: `Select target item for ${model.displayName}`,
             style: {
               border: `1px solid ${modelBorder(model)}`,
               borderRadius: 5,
@@ -437,6 +437,7 @@ export default function FashionSearchComparisonPanel() {
   const [panelError, setPanelError] = React.useState(null);
   const [loadingKey, setLoadingKey] = React.useState(null);
   const [selectedExampleId, setSelectedExampleId] = React.useState(null);
+  const didApplyDemoLayout = React.useRef(false);
 
   const models = React.useMemo(() => normalizeModels(panelProps.models), [panelProps.models]);
   const examples = Array.isArray(panelProps.examples) ? panelProps.examples : [];
@@ -458,6 +459,35 @@ export default function FashionSearchComparisonPanel() {
     { label: "Image-to-image mAP", hyper3: metrics.imageRetrievalMapHyper3, clip: metrics.imageRetrievalMapClip },
   ];
 
+  React.useEffect(() => {
+    if (didApplyDemoLayout.current) return;
+    didApplyDemoLayout.current = true;
+
+    const timer = window.setTimeout(() => {
+      [
+        "explorer",
+        "grid",
+        "scatter-euclidean",
+        "scatter-poincare",
+        "scatter-spherical",
+        "scatter-euclidean-3d",
+        "scatter-spherical-3d",
+        "scatter-default",
+        "fashion-map-clip",
+        "fashion-map-hyper3",
+      ].forEach((panelId) => {
+        try {
+          commands.closePanel?.(panelId);
+        } catch (_error) {
+          // Older HyperView builds may not have every panel id; ignore missing panes.
+        }
+      });
+      commands.focusPanel?.("fashion-text-search-readout");
+    }, 350);
+
+    return () => window.clearTimeout(timer);
+  }, [commands]);
+
   const clearSelection = async () => {
     if (commands.setLabelFilter) commands.setLabelFilter(null);
     setPanelError(null);
@@ -549,7 +579,7 @@ export default function FashionSearchComparisonPanel() {
         React.createElement(
           TextBlock,
           null,
-          "Choose a typed product search, then compare the ranked image results.",
+          "Choose a typed product search. The ranked cards are the demo; map context is secondary.",
         ),
         examples.length
           ? React.createElement(ExampleChooser, {
@@ -577,7 +607,7 @@ export default function FashionSearchComparisonPanel() {
         React.createElement(
           TextBlock,
           null,
-          `Select the same target product in the map: ${selectedExample?.targetTitle || "target product"}.`,
+          `Exact-target summary for: ${selectedExample?.targetTitle || "target product"}.`,
         ),
         selectedExample && models.length
           ? React.createElement(ExactTargetActions, {

Dockerfile

@@ -45,8 +45,8 @@ ENV HYPERVIEW_HOST=0.0.0.0 \
     HYPERVIEW_WORKSPACE_ID=fashion-deepfashion-text-search \
     HYPERVIEW_DATASETS_DIR=/home/user/app/demo_data/datasets \
     HYPERVIEW_MEDIA_DIR=/home/user/app/demo_data/media \
-    DEEPFASHION_SAMPLES_PER_CATEGORY=24 \
-    DEEPFASHION_MAX_SAMPLES=420 \
+    DEEPFASHION_SAMPLES_PER_CATEGORY=10 \
+    DEEPFASHION_MAX_SAMPLES=180 \
     HF_HUB_ETAG_TIMEOUT=30 \
     HF_HUB_DOWNLOAD_TIMEOUT=120
 

demo.py

@@ -405,11 +405,16 @@ def build_examples(dataset: hv.Dataset) -> list[dict[str, Any]]:
 def build_demo_view(dataset: hv.Dataset, layouts: dict[str, str]) -> hv.ui.View:
     readout_panel = hv.ui.ExtensionPanel(
         id="fashion-text-search-readout",
-        title="Shopper Text Search Proof",
+        title="Retail Search Results",
         extension="fashion-search-readout",
         panel="fashion-comparison",
         position="center",
         props={
+            "dockview": {
+                "closeSamplesPanel": True,
+                "hideExplorerPanel": True,
+                "minimumWidth": 620,
+            },
             "models": model_panel_props(layouts),
             "examples": build_examples(dataset),
             "warnings": RUNTIME_WARNINGS,
@@ -433,7 +438,36 @@ def build_demo_view(dataset: hv.Dataset, layouts: dict[str, str]) -> hv.ui.View:
             },
         },
     )
-    return hv.ui.View(readout_panel)
+
+    clip_spec = MODEL_SPECS[0]
+    candidate_spec = MODEL_SPECS[1]
+    map_dockview = {
+        "initialWidth": int(os.environ.get("FASHION_MAP_CONTEXT_WIDTH", "340")),
+        "minimumWidth": 260,
+    }
+    clip_map = hv.ui.Scatter(
+        id="fashion-map-clip",
+        title="Context Map: CLIP",
+        layout_key=layouts["clip"],
+        position="center",
+        reference_panel_id="fashion-text-search-readout",
+        direction="right",
+        geometry=clip_spec["geometry"],
+        layout_dimension=clip_spec["layout_dimension"],
+        props={"dockview": map_dockview},
+    )
+    candidate_map = hv.ui.Scatter(
+        id="fashion-map-hyper3",
+        title="Context Map: Hyper3",
+        layout_key=layouts["candidate"],
+        position="center",
+        reference_panel_id="fashion-map-clip",
+        direction="within",
+        geometry=candidate_spec["geometry"],
+        layout_dimension=candidate_spec["layout_dimension"],
+        props={"dockview": map_dockview},
+    )
+    return hv.ui.View(readout_panel, clip_map, candidate_map)
 
 
 def launch_demo(dataset: hv.Dataset, layouts: dict[str, str]) -> hv.Session: