Fix DeepFashion demo sample panel flow

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

@@ -6,7 +6,6 @@ if (!sdk) throw new Error("HyperViewPanelSDK is not available on window.");
 const { React, components, hooks } = sdk;
 const { Panel, PanelToolbar, PanelToolbarButton } = components;
 const {
-  usePanelClient,
   usePanelSelection,
   usePanelSamples,
   usePanelCommands,
@@ -607,7 +606,6 @@ function BenchmarkDetails({ typedMetricRows, imageMetricRows }) {
 }
 
 export default function FashionSearchComparisonPanel() {
-  const client = usePanelClient();
   const selection = usePanelSelection();
   const samplesState = usePanelSamples();
   const commands = usePanelCommands();
@@ -619,8 +617,9 @@ export default function FashionSearchComparisonPanel() {
   );
   const [contentWidth, setContentWidth] = React.useState(0);
   const resultsContentRef = React.useRef(null);
-  const didApplyDemoLayout = React.useRef(false);
   const didPrimeEvidence = React.useRef(false);
+  const evidenceRequestSeq = React.useRef(0);
+  const latestEvidenceRequest = React.useRef(null);
   const mode = panelProps.mode === "summary" ? "summary" : panelProps.mode === "results" ? "results" : "full";
 
   const models = React.useMemo(() => normalizeModels(panelProps.models), [panelProps.models]);
@@ -646,16 +645,6 @@ export default function FashionSearchComparisonPanel() {
     { label: "Image-to-image mAP", hyper3: metrics.imageRetrievalMapHyper3, clip: metrics.imageRetrievalMapClip },
   ];
 
-  React.useEffect(() => {
-    const handleExampleChange = (event) => {
-      if (typeof event.detail === "string") {
-        setSelectedExampleId(event.detail);
-      }
-    };
-    window.addEventListener("fashion-search-example-change", handleExampleChange);
-    return () => window.removeEventListener("fashion-search-example-change", handleExampleChange);
-  }, []);
-
   React.useEffect(() => {
     const node = resultsContentRef.current;
     if (!node) return undefined;
@@ -693,13 +682,21 @@ export default function FashionSearchComparisonPanel() {
     [commands],
   );
 
-  const showExampleEvidence = React.useCallback(
-    async (item, model, source = "fashion-demo:query") => {
-      if (!item || !model?.layoutKey) return;
+  const loadEvidenceForSample = React.useCallback(
+    async ({ sampleId, model, source = "fashion-demo:evidence", errorPrefix = "Could not load the sample evidence panel" }) => {
+      if (!sampleId || !model?.layoutKey) return;
+      const requestKey = `${sampleId}:${model.layoutKey}:${model.spaceKey || ""}`;
+      const request = { sampleId, model, source, errorPrefix, requestKey };
+      latestEvidenceRequest.current = request;
+      const requestSeq = evidenceRequestSeq.current + 1;
+      evidenceRequestSeq.current = requestSeq;
+
       try {
         await commands.setActiveLayout(model.layoutKey, { persist: false });
+        if (requestSeq !== evidenceRequestSeq.current) return;
+
         await commands.showSimilar({
-          sampleId: item.queryId,
+          sampleId,
           layoutKey: model.layoutKey,
           spaceKey: model.spaceKey,
           k: 10,
@@ -707,19 +704,43 @@ export default function FashionSearchComparisonPanel() {
           focus: "samples",
           persist: false,
         });
-        await selectSimilarityAnchor(item.queryId);
+        if (requestSeq !== evidenceRequestSeq.current) {
+          const latest = latestEvidenceRequest.current;
+          if (latest && latest.requestKey !== requestKey) {
+            window.setTimeout(() => {
+              if (latestEvidenceRequest.current?.requestKey === latest.requestKey) {
+                void loadEvidenceForSample(latest);
+              }
+            }, 0);
+          }
+          return;
+        }
+
+        await selectSimilarityAnchor(sampleId);
       } catch (error) {
         const message = error instanceof Error ? error.message : String(error);
-        setPanelError(`Could not load the sample evidence panel: ${message}`);
+        setPanelError(`${errorPrefix}: ${message}`);
       }
     },
     [commands, selectSimilarityAnchor],
   );
 
+  const showExampleEvidence = React.useCallback(
+    async (item, model, source = "fashion-demo:query") => {
+      if (!item || !model?.layoutKey) return;
+      await loadEvidenceForSample({
+        sampleId: item.queryId,
+        model,
+        source,
+        errorPrefix: "Could not load the sample evidence panel",
+      });
+    },
+    [loadEvidenceForSample],
+  );
+
   const chooseExample = React.useCallback(
     (exampleId) => {
       setSelectedExampleId(exampleId);
-      window.dispatchEvent(new CustomEvent("fashion-search-example-change", { detail: exampleId }));
       const item = examples.find((entry) => entry.id === exampleId);
       const evidenceModel =
         models.find((model) => model.key === "clip" && model.layoutKey) ||
@@ -731,28 +752,6 @@ export default function FashionSearchComparisonPanel() {
     [examples, models, showExampleEvidence],
   );
 
-  React.useEffect(() => {
-    if (mode === "summary") return;
-    if (didApplyDemoLayout.current) return;
-    didApplyDemoLayout.current = true;
-
-    let attempts = 0;
-    const timer = window.setInterval(() => {
-      attempts += 1;
-      ["explorer", "labels"].forEach((panelId) => {
-        try {
-          commands.closePanel?.(panelId);
-        } catch (_error) {
-          // Older HyperView builds may not have every panel id; ignore missing panes.
-        }
-      });
-      commands.focusPanel?.("fashion-ranked-results");
-      if (attempts >= 8) window.clearInterval(timer);
-    }, 250);
-
-    return () => window.clearInterval(timer);
-  }, [commands, mode]);
-
   React.useEffect(() => {
     if (mode === "summary") return;
     if (didPrimeEvidence.current) return;
@@ -773,8 +772,7 @@ export default function FashionSearchComparisonPanel() {
   const clearSelection = async () => {
     if (commands.setLabelFilter) commands.setLabelFilter(null);
     setPanelError(null);
-    await client.clearSimilarityQuery();
-    await commands.clearSelection();
+    await commands.clearQueryContext({ persist: true });
   };
 
   const selectModelQuery = async (item, model) => {
@@ -787,17 +785,12 @@ export default function FashionSearchComparisonPanel() {
     }
     setLoadingKey(key);
     try {
-      await commands.setActiveLayout(model.layoutKey, { persist: false });
-      await commands.showSimilar({
+      await loadEvidenceForSample({
         sampleId: item.queryId,
-        layoutKey: model.layoutKey,
-        spaceKey: model.spaceKey,
-        k: 10,
+        model,
         source: `fashion-demo:${model.key}`,
-        focus: "samples",
-        persist: false,
+        errorPrefix: "Could not select target item",
       });
-      await selectSimilarityAnchor(item.queryId);
     } catch (error) {
       const message = error instanceof Error ? error.message : String(error);
       setPanelError(`Could not select target item: ${message}`);
@@ -819,17 +812,12 @@ export default function FashionSearchComparisonPanel() {
     }
     setLoadingKey(key);
     try {
-      await commands.setActiveLayout(model.layoutKey, { persist: false });
-      await commands.showSimilar({
+      await loadEvidenceForSample({
         sampleId: result.sampleId,
-        layoutKey: model.layoutKey,
-        spaceKey: model.spaceKey,
-        k: 10,
+        model,
         source: `fashion-ranked-result:${model.key}`,
-        focus: "samples",
-        persist: false,
+        errorPrefix: "Could not select ranked result",
       });
-      await selectSimilarityAnchor(result.sampleId);
     } catch (error) {
       const message = error instanceof Error ? error.message : String(error);
       setPanelError(`Could not select ranked result: ${message}`);
@@ -939,6 +927,24 @@ export default function FashionSearchComparisonPanel() {
                 { style: { color: colors.bodyText, fontSize: 12, lineHeight: 1.45 } },
                 "Demo examples are not configured.",
               ),
+          selectedExample && inspectableModels.length
+            ? React.createElement(
+                Section,
+                { title: "Inspect Exact Target" },
+                React.createElement(
+                  TextBlock,
+                  null,
+                  `Load the same target product in Samples: ${selectedExample?.targetTitle || "target product"}.`,
+                ),
+                React.createElement(ExactTargetActions, {
+                  item: selectedExample,
+                  models: inspectableModels,
+                  loadingKey,
+                  onSelectQuery: selectModelQuery,
+                  compact: compactLayout,
+                }),
+              )
+            : null,
           selectedExample && models.length
             ? React.createElement(SearchResultComparison, {
                 item: selectedExample,
@@ -950,24 +956,6 @@ export default function FashionSearchComparisonPanel() {
               })
             : null,
         ),
-        selectedExample && inspectableModels.length
-          ? React.createElement(
-              Section,
-              { title: "Inspect Exact Target" },
-              React.createElement(
-                TextBlock,
-                null,
-                `Exact-target summary for: ${selectedExample?.targetTitle || "target product"}.`,
-              ),
-              React.createElement(ExactTargetActions, {
-                item: selectedExample,
-                models: inspectableModels,
-                loadingKey,
-                onSelectQuery: selectModelQuery,
-                compact: compactLayout,
-              }),
-            )
-          : null,
         warnings.length
           ? React.createElement(
               "div",

Dockerfile

@@ -42,7 +42,7 @@ COPY --chown=user . .
 
 ENV HYPERVIEW_HOST=0.0.0.0 \
     HYPERVIEW_PORT=7860 \
-    HYPERVIEW_WORKSPACE_ID=fashion-retail-search-actual-scatter \
+    HYPERVIEW_WORKSPACE_ID=fashion-retail-search-v062-samples-visible \
     HYPERVIEW_DATASETS_DIR=/home/user/app/demo_data/datasets \
     HYPERVIEW_MEDIA_DIR=/home/user/app/demo_data/media \
     FASHION_ENABLE_CONTEXT_MAPS=1 \

demo.py

@@ -19,7 +19,7 @@ from hyperview.core.sample import Sample
 SPACE_DIR = Path(__file__).resolve().parent
 SPACE_HOST = os.environ.get("HYPERVIEW_HOST", "127.0.0.1")
 SPACE_PORT = int(os.environ.get("HYPERVIEW_PORT", "6262"))
-WORKSPACE_ID = os.environ.get("HYPERVIEW_WORKSPACE_ID", "fashion-retail-search-actual-scatter")
+WORKSPACE_ID = os.environ.get("HYPERVIEW_WORKSPACE_ID", "fashion-retail-search-v062-samples-visible")
 DATASET_NAME = os.environ.get("HYPERVIEW_DATASET_NAME", "deepfashion_text_search_clip_hyper3clip")
 EXTENSION_DIR = SPACE_DIR / ".hyperview" / "extensions" / "fashion-search-readout"
 
@@ -458,8 +458,8 @@ def build_demo_view(dataset: hv.Dataset, layouts: dict[str, str]) -> hv.ui.View:
         panel="fashion-comparison",
         position="center",
         layout=hv.ui.PanelLayout(
-            width=int(os.environ.get("FASHION_RESULTS_WIDTH", "760")),
-            min_width=560,
+            width=int(os.environ.get("FASHION_RESULTS_WIDTH", "620")),
+            min_width=500,
         ),
         props={
             **shared_props,
@@ -473,9 +473,9 @@ def build_demo_view(dataset: hv.Dataset, layouts: dict[str, str]) -> hv.ui.View:
         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,
+            width=int(os.environ.get("FASHION_SAMPLES_WIDTH", "660")),
+            min_width=420,
+            min_height=480,
         ),
     )
 
@@ -485,9 +485,9 @@ def build_demo_view(dataset: hv.Dataset, layouts: dict[str, str]) -> hv.ui.View:
     clip_spec = MODEL_SPECS[0]
     candidate_spec = MODEL_SPECS[1]
     map_layout = hv.ui.PanelLayout(
-        height=int(os.environ.get("FASHION_MAP_HEIGHT", "280")),
-        min_height=220,
-        min_width=260,
+        height=int(os.environ.get("FASHION_MAP_HEIGHT", "180")),
+        min_height=150,
+        min_width=220,
     )
     clip_map = hv.ui.Scatter(
         id="fashion-map-clip",