Compose DeepFashion search demo panels

.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. Ranked cards are the proof.",
+        "Green card = exact product. The context map is secondary.",
       ),
     ),
     models.map((model) =>
@@ -475,7 +475,7 @@ function MiniStat({ label, value, accent = false }) {
   );
 }
 
-function BusinessRail({ item, metrics }) {
+function BusinessRail({ item, metrics, fill = false }) {
   if (!item) return null;
   const clipSummary = getSummary(item, "clip");
   const candidateSummary = getSummary(item, "candidate");
@@ -484,9 +484,10 @@ function BusinessRail({ item, metrics }) {
     "aside",
     {
       style: {
-        flex: "0 1 280px",
-        minWidth: 240,
-        maxWidth: 300,
+        flex: fill ? "none" : "0 1 280px",
+        width: fill ? "100%" : undefined,
+        minWidth: fill ? 0 : 240,
+        maxWidth: fill ? "none" : 300,
         display: "flex",
         flexDirection: "column",
         gap: 10,
@@ -605,6 +606,7 @@ export default function FashionSearchComparisonPanel() {
   const [loadingKey, setLoadingKey] = React.useState(null);
   const [selectedExampleId, setSelectedExampleId] = React.useState(null);
   const didApplyDemoLayout = React.useRef(false);
+  const mode = panelProps.mode === "summary" ? "summary" : panelProps.mode === "results" ? "results" : "full";
 
   const models = React.useMemo(() => normalizeModels(panelProps.models), [panelProps.models]);
   const examples = Array.isArray(panelProps.examples) ? panelProps.examples : [];
@@ -627,6 +629,22 @@ export default function FashionSearchComparisonPanel() {
   ];
 
   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);
+  }, []);
+
+  const chooseExample = React.useCallback((exampleId) => {
+    setSelectedExampleId(exampleId);
+    window.dispatchEvent(new CustomEvent("fashion-search-example-change", { detail: exampleId }));
+  }, []);
+
+  React.useEffect(() => {
+    if (mode === "summary") return;
     if (didApplyDemoLayout.current) return;
     didApplyDemoLayout.current = true;
 
@@ -640,8 +658,6 @@ export default function FashionSearchComparisonPanel() {
         "scatter-euclidean-3d",
         "scatter-spherical-3d",
         "scatter-default",
-        "fashion-map-clip",
-        "fashion-map-hyper3",
       ].forEach((panelId) => {
         try {
           commands.closePanel?.(panelId);
@@ -649,11 +665,12 @@ export default function FashionSearchComparisonPanel() {
           // Older HyperView builds may not have every panel id; ignore missing panes.
         }
       });
-      commands.focusPanel?.("fashion-text-search-readout");
+      commands.focusPanel?.("fashion-buyer-readout");
+      commands.focusPanel?.("fashion-ranked-results");
     }, 350);
 
     return () => window.clearTimeout(timer);
-  }, [commands]);
+  }, [commands, mode]);
 
   const clearSelection = async () => {
     if (commands.setLabelFilter) commands.setLabelFilter(null);
@@ -681,6 +698,7 @@ export default function FashionSearchComparisonPanel() {
         focus: false,
         persist: false,
       });
+      commands.focusPanel?.(model.key === "candidate" ? "fashion-map-hyper3" : "fashion-map-clip");
     } catch (error) {
       const message = error instanceof Error ? error.message : String(error);
       setPanelError(`Could not select target item: ${message}`);
@@ -708,6 +726,7 @@ export default function FashionSearchComparisonPanel() {
         focus: false,
         persist: false,
       });
+      commands.focusPanel?.(model.key === "candidate" ? "fashion-map-hyper3" : "fashion-map-clip");
     } catch (error) {
       const message = error instanceof Error ? error.message : String(error);
       setPanelError(`Could not select ranked result: ${message}`);
@@ -716,130 +735,164 @@ export default function FashionSearchComparisonPanel() {
     }
   };
 
-  return React.createElement(
-    Panel,
-    { className: "h-full" },
-    React.createElement(PanelToolbar, {
-      items: [
-        { id: "dataset", label: "Data", value: "DeepFashion" },
-        { id: "samples", label: "Items", value: String(samplesState.totalSamples ?? "-") },
-        { id: "selected", label: "Selected", value: String(selection.selectedIds?.length ?? 0) },
-      ],
-      actions: React.createElement(PanelToolbarButton, { onClick: clearSelection }, "Reset"),
-    }),
+  const toolbar =
+    mode === "summary"
+      ? null
+      : React.createElement(PanelToolbar, {
+          items: [
+            { id: "dataset", label: "Data", value: "DeepFashion" },
+            { id: "samples", label: "Items", value: String(samplesState.totalSamples ?? "-") },
+            { id: "selected", label: "Selected", value: String(selection.selectedIds?.length ?? 0) },
+          ],
+          actions: React.createElement(PanelToolbarButton, { onClick: clearSelection }, "Reset"),
+        });
+
+  const summaryContent = React.createElement(
+    "div",
+    {
+      style: {
+        height: "100%",
+        overflow: "auto",
+        padding: 12,
+        background: colors.panelBg,
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+      },
+    },
+    React.createElement(
+      Section,
+      { title: "Buyer Decision View" },
+      React.createElement(
+        TextBlock,
+        null,
+        "Business readout for the selected shopper query. Map tabs are optional neighborhood context.",
+      ),
+      examples.length
+        ? React.createElement(ExampleChooser, {
+            examples,
+            selectedId: selectedExample?.id,
+            onSelect: chooseExample,
+          })
+        : null,
+    ),
+    React.createElement(BusinessRail, { item: selectedExample, metrics, fill: true }),
+  );
+
+  const resultsContent = React.createElement(
+    "div",
+    {
+      style: {
+        height: "100%",
+        overflow: "auto",
+        padding: 14,
+        background: colors.panelBg,
+      },
+    },
     React.createElement(
       "div",
       {
         style: {
-          height: "100%",
-          overflow: "auto",
-          padding: 14,
-          background: colors.panelBg,
+          width: "100%",
+          maxWidth: 1130,
+          margin: "0 auto",
+          display: "flex",
+          gap: 12,
+          alignItems: "flex-start",
+          justifyContent: "center",
+          flexWrap: "wrap",
         },
       },
       React.createElement(
-        "div",
+        "main",
         {
           style: {
-            width: "100%",
-            maxWidth: 1130,
-            margin: "0 auto",
+            flex: "1 1 680px",
+            maxWidth: 820,
+            minWidth: 0,
             display: "flex",
-            gap: 12,
-            alignItems: "flex-start",
-            justifyContent: "center",
-            flexWrap: "wrap",
+            flexDirection: "column",
+            gap: 14,
           },
         },
         React.createElement(
-          "main",
-          {
-            style: {
-              flex: "1 1 680px",
-              maxWidth: 820,
-              minWidth: 0,
-              display: "flex",
-              flexDirection: "column",
-              gap: 14,
-            },
-          },
-          React.createElement(
-            Section,
-            { title: "Pick A Shopper Query" },
-            React.createElement(
-              TextBlock,
-              null,
-              "Pick a typed product search and compare where each model ranks the exact item.",
-            ),
-            examples.length
-              ? React.createElement(ExampleChooser, {
-                  examples,
-                  selectedId: selectedExample?.id,
-                  onSelect: setSelectedExampleId,
-                })
-              : React.createElement(
-                  "div",
-                  { style: { color: colors.bodyText, fontSize: 12, lineHeight: 1.45 } },
-                  "Demo examples are not configured.",
-                ),
-            selectedExample && models.length
-              ? React.createElement(SearchResultComparison, {
-                  item: selectedExample,
-                  models,
-                  loadingKey,
-                  onSelectResult: selectRankedResult,
-                })
-              : null,
-          ),
+          Section,
+          { title: "Pick A Shopper Query" },
           React.createElement(
-            Section,
-            { title: "Inspect Exact Target" },
-            React.createElement(
-              TextBlock,
-              null,
-              `Exact-target summary for: ${selectedExample?.targetTitle || "target product"}.`,
-            ),
-            selectedExample && models.length
-              ? React.createElement(ExactTargetActions, {
-                  item: selectedExample,
-                  models,
-                  loadingKey,
-                  onSelectQuery: selectModelQuery,
-                })
-              : React.createElement(
-                  "div",
-                  { style: { color: colors.bodyText, fontSize: 12, lineHeight: 1.45 } },
-                  "Demo examples are not configured.",
-                ),
+            TextBlock,
+            null,
+            "Pick a typed product search and compare where each model ranks the exact item.",
           ),
-          warnings.length
-            ? React.createElement(
+          examples.length
+            ? React.createElement(ExampleChooser, {
+                examples,
+                selectedId: selectedExample?.id,
+                onSelect: chooseExample,
+              })
+            : React.createElement(
                 "div",
-                {
-                  style: {
-                    border: `1px solid ${colors.warningBorder}`,
-                    borderRadius: 4,
-                    background: colors.warningBg,
-                    color: colors.warningText,
-                    padding: 8,
-                    fontSize: 11,
-                    lineHeight: 1.35,
-                  },
-                },
-                warnings[0],
-              )
+                { style: { color: colors.bodyText, fontSize: 12, lineHeight: 1.45 } },
+                "Demo examples are not configured.",
+              ),
+          selectedExample && models.length
+            ? React.createElement(SearchResultComparison, {
+                item: selectedExample,
+                models,
+                loadingKey,
+                onSelectResult: selectRankedResult,
+              })
             : null,
-          React.createElement(BenchmarkDetails, { typedMetricRows, imageMetricRows }),
-          panelError
-            ? React.createElement(
+        ),
+        React.createElement(
+          Section,
+          { title: "Inspect Exact Target" },
+          React.createElement(
+            TextBlock,
+            null,
+            `Exact-target summary for: ${selectedExample?.targetTitle || "target product"}.`,
+          ),
+          selectedExample && models.length
+            ? React.createElement(ExactTargetActions, {
+                item: selectedExample,
+                models,
+                loadingKey,
+                onSelectQuery: selectModelQuery,
+              })
+            : React.createElement(
                 "div",
-                { style: { color: colors.error, fontSize: 11, lineHeight: 1.35 } },
-                panelError,
-              )
-            : null,
+                { style: { color: colors.bodyText, fontSize: 12, lineHeight: 1.45 } },
+                "Demo examples are not configured.",
+              ),
         ),
-        React.createElement(BusinessRail, { item: selectedExample, metrics }),
+        warnings.length
+          ? React.createElement(
+              "div",
+              {
+                style: {
+                  border: `1px solid ${colors.warningBorder}`,
+                  borderRadius: 4,
+                  background: colors.warningBg,
+                  color: colors.warningText,
+                  padding: 8,
+                  fontSize: 11,
+                  lineHeight: 1.35,
+                },
+              },
+              warnings[0],
+            )
+          : null,
+        React.createElement(BenchmarkDetails, { typedMetricRows, imageMetricRows }),
+        panelError
+          ? React.createElement(
+              "div",
+              { style: { color: colors.error, fontSize: 11, lineHeight: 1.35 } },
+              panelError,
+            )
+          : null,
       ),
+      mode === "full" ? React.createElement(BusinessRail, { item: selectedExample, metrics }) : null,
     ),
   );
+
+  return React.createElement(Panel, { className: "h-full" }, toolbar, mode === "summary" ? summaryContent : resultsContent);
 }

Dockerfile

@@ -42,7 +42,7 @@ COPY --chown=user . .
 
 ENV HYPERVIEW_HOST=0.0.0.0 \
     HYPERVIEW_PORT=7860 \
-    HYPERVIEW_WORKSPACE_ID=fashion-retail-search-demo \
+    HYPERVIEW_WORKSPACE_ID=fashion-retail-search-composition \
     HYPERVIEW_DATASETS_DIR=/home/user/app/demo_data/datasets \
     HYPERVIEW_MEDIA_DIR=/home/user/app/demo_data/media \
     DEEPFASHION_SAMPLES_PER_CATEGORY=10 \

demo.py

@@ -18,7 +18,7 @@ import hyperview as hv
 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-demo")
+WORKSPACE_ID = os.environ.get("HYPERVIEW_WORKSPACE_ID", "fashion-retail-search-composition")
 DATASET_NAME = os.environ.get("HYPERVIEW_DATASET_NAME", "deepfashion_text_search_clip_hyper3clip")
 EXTENSION_DIR = SPACE_DIR / ".hyperview" / "extensions" / "fashion-search-readout"
 
@@ -410,74 +410,90 @@ 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="Retail Search Results",
+    shared_props = {
+        "models": model_panel_props(layouts),
+        "examples": build_examples(dataset),
+        "warnings": RUNTIME_WARNINGS,
+        "metrics": {
+            "typedQueryCount": 180,
+            "typedCandidateImages": 1120,
+            "hit10Hyper3Only": 23,
+            "hit10ClipOnly": 19,
+            "strongHyper3Wins": 13,
+            "strongClipWins": 9,
+            "imageRetrievalMapHyper3": 0.407,
+            "imageRetrievalMapClip": 0.240,
+            "typedHit1Hyper3": 0.244,
+            "typedHit1Clip": 0.233,
+            "typedHit10Hyper3": 0.572,
+            "typedHit10Clip": 0.550,
+            "typedCategoryP10Hyper3": 0.594,
+            "typedCategoryP10Clip": 0.561,
+            "typedMrrHyper3": 0.358,
+            "typedMrrClip": 0.344,
+        },
+    }
+    results_panel = hv.ui.ExtensionPanel(
+        id="fashion-ranked-results",
+        title="Ranked Search Results",
         extension="fashion-search-readout",
         panel="fashion-comparison",
         position="center",
         props={
+            **shared_props,
+            "mode": "results",
             "dockview": {
                 "closeSamplesPanel": True,
                 "hideExplorerPanel": True,
-                "initialWidth": int(os.environ.get("FASHION_READOUT_WIDTH", "760")),
+                "initialWidth": int(os.environ.get("FASHION_RESULTS_WIDTH", "780")),
                 "minimumWidth": 620,
-                "maximumWidth": int(os.environ.get("FASHION_READOUT_MAX_WIDTH", "860")),
-            },
-            "models": model_panel_props(layouts),
-            "examples": build_examples(dataset),
-            "warnings": RUNTIME_WARNINGS,
-            "metrics": {
-                "typedQueryCount": 180,
-                "typedCandidateImages": 1120,
-                "hit10Hyper3Only": 23,
-                "hit10ClipOnly": 19,
-                "strongHyper3Wins": 13,
-                "strongClipWins": 9,
-                "imageRetrievalMapHyper3": 0.407,
-                "imageRetrievalMapClip": 0.240,
-                "typedHit1Hyper3": 0.244,
-                "typedHit1Clip": 0.233,
-                "typedHit10Hyper3": 0.572,
-                "typedHit10Clip": 0.550,
-                "typedCategoryP10Hyper3": 0.594,
-                "typedCategoryP10Clip": 0.561,
-                "typedMrrHyper3": 0.358,
-                "typedMrrClip": 0.344,
+                "maximumWidth": int(os.environ.get("FASHION_RESULTS_MAX_WIDTH", "920")),
             },
         },
     )
 
     clip_spec = MODEL_SPECS[0]
     candidate_spec = MODEL_SPECS[1]
-    map_dockview = {
-        "initialWidth": int(os.environ.get("FASHION_MAP_CONTEXT_WIDTH", "320")),
+    context_dockview = {
+        "initialWidth": int(os.environ.get("FASHION_CONTEXT_WIDTH", "360")),
         "minimumWidth": 260,
-        "maximumWidth": int(os.environ.get("FASHION_MAP_CONTEXT_MAX_WIDTH", "380")),
+        "maximumWidth": int(os.environ.get("FASHION_CONTEXT_MAX_WIDTH", "440")),
     }
+    summary_panel = hv.ui.ExtensionPanel(
+        id="fashion-buyer-readout",
+        title="Buyer Readout",
+        extension="fashion-search-readout",
+        panel="fashion-comparison",
+        position="right",
+        props={
+            **shared_props,
+            "mode": "summary",
+            "dockview": context_dockview,
+        },
+    )
     clip_map = hv.ui.Scatter(
         id="fashion-map-clip",
-        title="Optional Map: CLIP",
+        title="Context Map: CLIP",
         layout_key=layouts["clip"],
-        position="center",
-        reference_panel_id="fashion-text-search-readout",
-        direction="right",
+        position="right",
+        reference_panel_id="fashion-buyer-readout",
+        direction="within",
         geometry=clip_spec["geometry"],
         layout_dimension=clip_spec["layout_dimension"],
-        props={"dockview": map_dockview},
+        props={"dockview": context_dockview},
     )
     candidate_map = hv.ui.Scatter(
         id="fashion-map-hyper3",
-        title="Optional Map: Hyper3",
+        title="Context Map: Hyper3",
         layout_key=layouts["candidate"],
-        position="center",
+        position="right",
         reference_panel_id="fashion-map-clip",
         direction="within",
         geometry=candidate_spec["geometry"],
         layout_dimension=candidate_spec["layout_dimension"],
-        props={"dockview": map_dockview},
+        props={"dockview": context_dockview},
     )
-    return hv.ui.View(readout_panel, clip_map, candidate_map)
+    return hv.ui.View(results_panel, summary_panel, clip_map, candidate_map)
 
 
 def launch_demo(dataset: hv.Dataset, layouts: dict[str, str]) -> hv.Session:
@@ -496,7 +512,7 @@ def launch_demo(dataset: hv.Dataset, layouts: dict[str, str]) -> hv.Session:
     session.ui.set_active_layout(None, workspace_id=WORKSPACE_ID)
     session.ui.set_selection([], workspace_id=WORKSPACE_ID)
     print(f"\nHyperView DeepFashion text-search demo is running at {session.url}", flush=True)
-    print("   Ranked search results are primary; scatter maps are narrow optional context tabs.", flush=True)
+    print("   Ranked results are primary; buyer readout and scatter maps are secondary context tabs.", flush=True)
     return session