Show samples alongside DeepFashion search demo

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

@@ -60,17 +60,14 @@ function TextBlock({ children }) {
 
 function normalizeModels(value) {
   if (!Array.isArray(value)) return [];
-  return value
-    .map((model, index) => ({
-      key: String(model.key || `model-${index}`),
-      displayName: String(model.displayName || model.display_name || model.key || `Model ${index + 1}`),
-      buttonLabel: String(
-        model.buttonLabel || model.button_label || `${model.displayName || model.key || "Model"} query`,
-      ),
-      layoutKey: model.layoutKey || model.layout_key || null,
-      spaceKey: model.spaceKey || model.space_key || null,
-    }))
-    .filter((model) => model.layoutKey);
+  return value.map((model, index) => ({
+    key: String(model.key || `model-${index}`),
+    displayName: String(model.displayName || model.display_name || model.key || `Model ${index + 1}`),
+    buttonLabel: String(
+      model.buttonLabel || model.button_label || `${model.displayName || model.key || "Model"} query`,
+    ),
+    layoutKey: model.layoutKey || model.layout_key || null,
+  }));
 }
 
 function getSummary(item, modelKey) {
@@ -348,7 +345,7 @@ function SearchResultComparison({ item, models, loadingKey, onSelectResult }) {
       React.createElement(
         "div",
         { style: { color: colors.mutedText, fontSize: 10, marginTop: 3 } },
-        "Green card = exact product. The context map is secondary.",
+        "Green card = exact product. Click any card to select it in Samples.",
       ),
     ),
     models.map((model) =>
@@ -609,6 +606,7 @@ export default function FashionSearchComparisonPanel() {
   const mode = panelProps.mode === "summary" ? "summary" : panelProps.mode === "results" ? "results" : "full";
 
   const models = React.useMemo(() => normalizeModels(panelProps.models), [panelProps.models]);
+  const inspectableModels = React.useMemo(() => models.filter((model) => model.layoutKey), [models]);
   const examples = Array.isArray(panelProps.examples) ? panelProps.examples : [];
   const warnings = Array.isArray(panelProps.warnings) ? panelProps.warnings.filter(Boolean) : [];
   const metrics = panelProps.metrics || {};
@@ -651,7 +649,6 @@ export default function FashionSearchComparisonPanel() {
     const timer = window.setTimeout(() => {
       [
         "explorer",
-        "grid",
         "scatter-euclidean",
         "scatter-poincare",
         "scatter-spherical",
@@ -665,7 +662,6 @@ export default function FashionSearchComparisonPanel() {
           // Older HyperView builds may not have every panel id; ignore missing panes.
         }
       });
-      commands.focusPanel?.("fashion-buyer-readout");
       commands.focusPanel?.("fashion-ranked-results");
     }, 350);
 
@@ -683,7 +679,8 @@ export default function FashionSearchComparisonPanel() {
     const key = `${item.queryId}:${model.key}`;
     setPanelError(null);
     if (!model.layoutKey) {
-      setPanelError(`${model.displayName} layout is not ready yet. Try again in a moment.`);
+      await commands.setSelection?.([item.queryId], { persist: false, source: `fashion-target:${model.key}` });
+      commands.focusPanel?.("grid");
       return;
     }
     setLoadingKey(key);
@@ -692,7 +689,6 @@ export default function FashionSearchComparisonPanel() {
       await commands.showSimilar({
         sampleId: item.queryId,
         layoutKey: model.layoutKey,
-        spaceKey: model.spaceKey,
         k: 10,
         source: `fashion-demo:${model.key}`,
         focus: false,
@@ -711,7 +707,11 @@ export default function FashionSearchComparisonPanel() {
     const key = `${result.sampleId}:${model.key}:ranked-result`;
     setPanelError(null);
     if (!model.layoutKey) {
-      setPanelError(`${model.displayName} layout is not ready yet. Try again in a moment.`);
+      await commands.setSelection?.([result.sampleId], {
+        persist: false,
+        source: `fashion-ranked-result:${model.key}`,
+      });
+      commands.focusPanel?.("grid");
       return;
     }
     setLoadingKey(key);
@@ -720,7 +720,6 @@ export default function FashionSearchComparisonPanel() {
       await commands.showSimilar({
         sampleId: result.sampleId,
         layoutKey: model.layoutKey,
-        spaceKey: model.spaceKey,
         k: 10,
         source: `fashion-ranked-result:${model.key}`,
         focus: false,
@@ -766,7 +765,7 @@ export default function FashionSearchComparisonPanel() {
       React.createElement(
         TextBlock,
         null,
-        "Business readout for the selected shopper query. Map tabs are optional neighborhood context.",
+        "Business readout for the selected shopper query.",
       ),
       examples.length
         ? React.createElement(ExampleChooser, {
@@ -843,27 +842,23 @@ export default function FashionSearchComparisonPanel() {
               })
             : null,
         ),
-        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, {
+        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,
+                models: inspectableModels,
                 loadingKey,
                 onSelectQuery: selectModelQuery,
-              })
-            : React.createElement(
-                "div",
-                { style: { color: colors.bodyText, fontSize: 12, lineHeight: 1.45 } },
-                "Demo examples are not configured.",
-              ),
-        ),
+              }),
+            )
+          : 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-composition \
+    HYPERVIEW_WORKSPACE_ID=fashion-retail-search-samples \
     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-composition")
+WORKSPACE_ID = os.environ.get("HYPERVIEW_WORKSPACE_ID", "fashion-retail-search-samples")
 DATASET_NAME = os.environ.get("HYPERVIEW_DATASET_NAME", "deepfashion_text_search_clip_hyper3clip")
 EXTENSION_DIR = SPACE_DIR / ".hyperview" / "extensions" / "fashion-search-readout"
 
@@ -37,6 +37,11 @@ ALLOW_CANDIDATE_FALLBACK = os.environ.get("HYPERVIEW_ALLOW_CANDIDATE_FALLBACK",
     "true",
     "yes",
 }
+ENABLE_CONTEXT_MAPS = os.environ.get("FASHION_ENABLE_CONTEXT_MAPS", "").lower() in {
+    "1",
+    "true",
+    "yes",
+}
 EMBEDDING_MAX_ATTEMPTS = max(1, int(os.environ.get("HYPERVIEW_EMBEDDING_MAX_ATTEMPTS", "4")))
 EMBEDDING_RETRY_DELAY_SECONDS = float(os.environ.get("HYPERVIEW_EMBEDDING_RETRY_DELAY_SECONDS", "15"))
 RUNTIME_WARNINGS: list[str] = []
@@ -332,25 +337,20 @@ def ensure_layouts(dataset: hv.Dataset) -> dict[str, str]:
 def build_dataset() -> tuple[hv.Dataset, dict[str, str]]:
     dataset = hv.Dataset(DATASET_NAME)
     add_deepfashion_samples(dataset)
-    layouts = ensure_layouts(dataset)
+    layouts = ensure_layouts(dataset) if ENABLE_CONTEXT_MAPS else {}
     return dataset, layouts
 
 
-def space_key_from_layout(layout_key: str) -> str:
-    return layout_key.split("__euclidean_umap", 1)[0].split("__poincare_umap", 1)[0]
-
-
 def model_panel_props(layouts: dict[str, str]) -> list[dict[str, Any]]:
     props = []
     for spec in MODEL_SPECS:
-        layout_key = layouts[spec["key"]]
+        layout_key = layouts.get(spec["key"])
         props.append(
             {
                 "key": spec["key"],
                 "displayName": spec["display_name"],
                 "buttonLabel": spec["button_label"],
                 "layoutKey": layout_key,
-                "spaceKey": spec.get("space_key") or space_key_from_layout(layout_key),
             }
         )
     return props
@@ -438,12 +438,12 @@ def build_demo_view(dataset: hv.Dataset, layouts: dict[str, str]) -> hv.ui.View:
         title="Ranked Search Results",
         extension="fashion-search-readout",
         panel="fashion-comparison",
-        position="center",
+        position="right",
         props={
             **shared_props,
             "mode": "results",
             "dockview": {
-                "closeSamplesPanel": True,
+                "closeSamplesPanel": False,
                 "hideExplorerPanel": True,
                 "initialWidth": int(os.environ.get("FASHION_RESULTS_WIDTH", "780")),
                 "minimumWidth": 620,
@@ -452,6 +452,9 @@ def build_demo_view(dataset: hv.Dataset, layouts: dict[str, str]) -> hv.ui.View:
         },
     )
 
+    if not ENABLE_CONTEXT_MAPS:
+        return hv.ui.View(results_panel)
+
     clip_spec = MODEL_SPECS[0]
     candidate_spec = MODEL_SPECS[1]
     context_dockview = {
@@ -459,24 +462,12 @@ def build_demo_view(dataset: hv.Dataset, layouts: dict[str, str]) -> hv.ui.View:
         "minimumWidth": 260,
         "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="Context Map: CLIP",
         layout_key=layouts["clip"],
         position="right",
-        reference_panel_id="fashion-buyer-readout",
+        reference_panel_id="fashion-ranked-results",
         direction="within",
         geometry=clip_spec["geometry"],
         layout_dimension=clip_spec["layout_dimension"],
@@ -493,7 +484,7 @@ def build_demo_view(dataset: hv.Dataset, layouts: dict[str, str]) -> hv.ui.View:
         layout_dimension=candidate_spec["layout_dimension"],
         props={"dockview": context_dockview},
     )
-    return hv.ui.View(results_panel, summary_panel, clip_map, candidate_map)
+    return hv.ui.View(results_panel, clip_map, candidate_map)
 
 
 def launch_demo(dataset: hv.Dataset, layouts: dict[str, str]) -> hv.Session:
@@ -512,15 +503,21 @@ 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 results are primary; buyer readout and scatter maps are secondary context tabs.", flush=True)
+    if ENABLE_CONTEXT_MAPS:
+        print("   Samples stay visible; scatter maps are opt-in context tabs.", flush=True)
+    else:
+        print("   Samples stay visible; ranked text-search results are the main demo.", flush=True)
     return session
 
 
 def main() -> None:
     dataset, layouts = build_dataset()
-    print("Layouts:", flush=True)
-    for spec in MODEL_SPECS:
-        print(f"  {spec['display_name']}: {layouts[spec['key']]}", flush=True)
+    if layouts:
+        print("Layouts:", flush=True)
+        for spec in MODEL_SPECS:
+            print(f"  {spec['display_name']}: {layouts[spec['key']]}", flush=True)
+    else:
+        print("Context maps disabled; skipping embedding/layout startup.", flush=True)
     session = launch_demo(dataset, layouts)
     session.wait()