Upgrade DeepFashion demo to HyperView 0.6.2

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

@@ -681,6 +681,18 @@ export default function FashionSearchComparisonPanel() {
     return () => observer.disconnect();
   }, [mode]);
 
+  const selectSimilarityAnchor = React.useCallback(
+    async (sampleId) => {
+      if (!sampleId || !commands.setSelection) return;
+      await commands.setSelection([sampleId], {
+        persist: false,
+        source: "panel",
+        clearLasso: false,
+      });
+    },
+    [commands],
+  );
+
   const showExampleEvidence = React.useCallback(
     async (item, model, source = "fashion-demo:query") => {
       if (!item || !model?.layoutKey) return;
@@ -695,12 +707,13 @@ export default function FashionSearchComparisonPanel() {
           focus: "samples",
           persist: false,
         });
+        await selectSimilarityAnchor(item.queryId);
       } catch (error) {
         const message = error instanceof Error ? error.message : String(error);
         setPanelError(`Could not load the sample evidence panel: ${message}`);
       }
     },
-    [commands],
+    [commands, selectSimilarityAnchor],
   );
 
   const chooseExample = React.useCallback(
@@ -784,6 +797,7 @@ export default function FashionSearchComparisonPanel() {
         focus: "samples",
         persist: false,
       });
+      await selectSimilarityAnchor(item.queryId);
     } catch (error) {
       const message = error instanceof Error ? error.message : String(error);
       setPanelError(`Could not select target item: ${message}`);
@@ -815,6 +829,7 @@ export default function FashionSearchComparisonPanel() {
         focus: "samples",
         persist: false,
       });
+      await selectSimilarityAnchor(result.sampleId);
     } catch (error) {
       const message = error instanceof Error ? error.message : String(error);
       setPanelError(`Could not select ranked result: ${message}`);

Dockerfile

@@ -20,7 +20,7 @@ WORKDIR $HOME/app
 
 RUN pip install --upgrade pip
 
-ARG HYPERVIEW_VERSION=0.6.1
+ARG HYPERVIEW_VERSION=0.6.2
 ARG HYPER_MODELS_VERSION=0.3.0
 
 # Install CPU-only PyTorch first so the Space does not pull the default CUDA bundle.

demo.py

@@ -309,6 +309,7 @@ def ensure_layouts(dataset: hv.Dataset) -> dict[str, str]:
                 )
                 print(warning, flush=True)
                 RUNTIME_WARNINGS.append(warning)
+                fallback_layout_key = layouts["clip"]
                 spec.update(
                     {
                         "display_name": "Hyper3-CLIP unavailable (CLIP fallback)",
@@ -317,21 +318,22 @@ def ensure_layouts(dataset: hv.Dataset) -> dict[str, str]:
                         "layout_dimension": MODEL_SPECS[0]["layout_dimension"],
                         "panel_title": "Hyper3-CLIP unavailable - showing CLIP fallback",
                         "fallback": True,
-                        "space_key": MODEL_SPECS[0].get("space_key"),
+                        "layout_key": fallback_layout_key,
                     }
                 )
-                layouts[spec["key"]] = layouts["clip"]
+                layouts[spec["key"]] = fallback_layout_key
                 continue
             raise
-        spec["space_key"] = space_key
         print(f"Ensuring {spec['display_name']} layout...", flush=True)
-        layouts[spec["key"]] = dataset.compute_visualization(
+        layout_key = dataset.compute_visualization(
             space_key=space_key,
             layout=spec["layout"],
             n_neighbors=20,
             min_dist=0.08,
             metric=spec["metric"],
         )
+        spec["layout_key"] = layout_key
+        layouts[spec["key"]] = layout_key
     return layouts
 
 
@@ -355,7 +357,6 @@ def model_panel_props(layouts: dict[str, str]) -> list[dict[str, Any]]:
                 "displayName": spec["display_name"],
                 "buttonLabel": spec["button_label"],
                 "layoutKey": layout_key,
-                "spaceKey": spec.get("space_key"),
             }
         )
     return props
@@ -366,10 +367,10 @@ def neighbor_summary(dataset: hv.Dataset, sample_id: str, model_key: str) -> dic
     if spec is None:
         return {}
     query = dataset[sample_id]
-    space_key = spec.get("space_key")
-    if space_key is None:
+    layout_key = spec.get("layout_key")
+    if layout_key is None:
         return {}
-    neighbors = dataset.find_similar(sample_id, k=10, space_key=str(space_key))
+    neighbors = dataset.find_similar(sample_id, k=10, layout_key=str(layout_key))
     query_product = query.metadata.get("product_key")
     query_category = query.metadata.get("category")
     product_hits = sum(1 for sample, _distance in neighbors if sample.metadata.get("product_key") == query_product)
@@ -445,52 +446,67 @@ def build_demo_view(dataset: hv.Dataset, layouts: dict[str, str]) -> hv.ui.View:
         extension="fashion-search-readout",
         panel="fashion-comparison",
         position="center",
-        reference_panel_id="grid",
-        direction="left",
+        layout=hv.ui.PanelLayout(
+            width=int(os.environ.get("FASHION_RESULTS_WIDTH", "760")),
+            min_width=560,
+        ),
         props={
             **shared_props,
             "mode": "results",
-            "dockview": {
-                "closeSamplesPanel": False,
-                "hideExplorerPanel": True,
-                "initialWidth": int(os.environ.get("FASHION_RESULTS_WIDTH", "760")),
-                "minimumWidth": 620,
-            },
         },
     )
+    samples_panel = hv.ui.Samples(
+        id="grid",
+        title="Samples",
+        position="center",
+        reference_panel_id="fashion-ranked-results",
+        direction="right",
+        layout=hv.ui.PanelLayout(
+            width=int(os.environ.get("FASHION_SAMPLES_WIDTH", "900")),
+            min_width=480,
+            min_height=420,
+        ),
+    )
 
     if not ENABLE_CONTEXT_MAPS:
-        return hv.ui.View(results_panel)
+        return hv.ui.View(results_panel, samples_panel, active_panel="fashion-ranked-results")
 
     clip_spec = MODEL_SPECS[0]
     candidate_spec = MODEL_SPECS[1]
-    map_dockview = {
-        "initialHeight": int(os.environ.get("FASHION_MAP_HEIGHT", "280")),
-        "minimumHeight": 220,
-    }
+    map_layout = hv.ui.PanelLayout(
+        height=int(os.environ.get("FASHION_MAP_HEIGHT", "280")),
+        min_height=220,
+        min_width=260,
+    )
     clip_map = hv.ui.Scatter(
         id="fashion-map-clip",
         title="Context Map: CLIP",
         layout_key=layouts["clip"],
-        position="bottom",
+        position="center",
         reference_panel_id="grid",
         direction="below",
         geometry=clip_spec["geometry"],
         layout_dimension=clip_spec["layout_dimension"],
-        props={"dockview": map_dockview},
+        layout=map_layout,
     )
     candidate_map = hv.ui.Scatter(
         id="fashion-map-hyper3",
         title="Context Map: Hyper3",
         layout_key=layouts["candidate"],
-        position="bottom",
+        position="center",
         reference_panel_id="fashion-map-clip",
         direction="right",
         geometry=candidate_spec["geometry"],
         layout_dimension=candidate_spec["layout_dimension"],
-        props={"dockview": map_dockview},
+        layout=map_layout,
+    )
+    return hv.ui.View(
+        results_panel,
+        samples_panel,
+        clip_map,
+        candidate_map,
+        active_panel="fashion-ranked-results",
     )
-    return hv.ui.View(results_panel, clip_map, candidate_map)
 
 
 def initial_target_sample_id() -> str | None: