Restructure layout: all prompt selection left, analysis only right

- Left column groups every prompt-selection surface: t-SNE map, category
filter (with Select/Deselect all), dataset dropdown, custom prompt input.
- Right column is purely read-out: verdict, risk level, full prompt, stats.
- Plotly legend now uses itemclick='toggleothers' so a single click isolates
the chosen category and a second click restores all.
- New JS bridge captures plotly_legendclick / plotly_legenddoubleclick,
reads the resulting visible trace set, and pushes it to a hidden Gradio
input. The on_legend_sync callback then updates the checkbox filter and
rebuilds the figure, keeping legend and filter authoritative-in-sync.
- LABEL_TO_KEY mapping resolves display names back to category keys
server-side, so the JS stays agnostic of internal IDs.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

app.py

@@ -98,6 +98,7 @@ CATEGORY_LABELS = {
     "prompt_leaking": "Prompt Leaking",
     "unknown": "Unknown",
 }
+LABEL_TO_KEY = {v: k for k, v in CATEGORY_LABELS.items()}
 
 # ---------------------------------------------------------------------------
 # Lazy-loaded risk classifier (Llama Prompt Guard 2)
@@ -238,6 +239,8 @@ def build_tsne_figure(selected_categories=None):
             borderwidth=1,
             font=dict(color=AB["ink_800"], size=10),
             itemsizing="constant",
+            itemclick="toggleothers",
+            itemdoubleclick="toggle",
         ),
         xaxis=dict(
             title=dict(text="t-SNE 1", font=dict(color=AB["ink_500"], size=11)),
@@ -281,6 +284,23 @@ def deselect_all_categories():
     return gr.update(value=[]), build_tsne_figure([])
 
 
+def on_legend_sync(payload):
+    """Plotly legend click → sync the checkbox filter + rebuild the chart."""
+    if not payload or not payload.strip():
+        return gr.update(), gr.update()
+    try:
+        data = json.loads(payload)
+        visible_labels = data.get("visible", [])
+        visible_keys = [LABEL_TO_KEY.get(lbl, lbl) for lbl in visible_labels]
+        visible_keys = [k for k in visible_keys if k in UNIQUE_CATEGORIES]
+        if not visible_keys:
+            return gr.update(value=[]), build_tsne_figure([])
+        return gr.update(value=visible_keys), build_tsne_figure(visible_keys)
+    except Exception as e:
+        logger.error("legend sync error: %s", e)
+        return gr.update(), gr.update()
+
+
 def _dataset_meta_block(category, severity, ground_truth):
     return (
         f"\n\n<span class='ab-eyebrow'>Dataset metadata</span>\n"
@@ -495,45 +515,68 @@ def build_stats_html():
 # ---------------------------------------------------------------------------
 PLOTLY_CLICK_JS = """
 () => {
-    function setupClickHandler() {
-        const plotEl = document.querySelector('#tsne-chart .js-plotly-plot');
-        if (!plotEl) {
-            setTimeout(setupClickHandler, 500);
-            return;
-        }
-        function handleClick(data) {
+    function pushToHidden(selector, value) {
+        const el = document.querySelector(selector + ' textarea')
+                || document.querySelector(selector + ' input');
+        if (!el) return;
+        const proto = el.tagName === 'TEXTAREA'
+            ? window.HTMLTextAreaElement.prototype
+            : window.HTMLInputElement.prototype;
+        const setter = Object.getOwnPropertyDescriptor(proto, 'value').set;
+        setter.call(el, String(value));
+        el.dispatchEvent(new Event('input', { bubbles: true }));
+        setTimeout(() => el.dispatchEvent(new Event('change', { bubbles: true })), 40);
+    }
+
+    function attachHandlers(plotEl) {
+        if (!plotEl || plotEl._abHandlersAttached) return;
+        plotEl._abHandlersAttached = true;
+
+        // Point click → push index to #click-index-input
+        plotEl.on('plotly_click', function (data) {
             if (data && data.points && data.points.length > 0) {
                 const idx = data.points[0].customdata;
                 if (idx !== undefined && idx !== null) {
-                    const inputEl = document.querySelector('#click-index-input textarea')
-                        || document.querySelector('#click-index-input input');
-                    if (inputEl) {
-                        const proto = inputEl.tagName === 'TEXTAREA'
-                            ? window.HTMLTextAreaElement.prototype
-                            : window.HTMLInputElement.prototype;
-                        const nativeSetter = Object.getOwnPropertyDescriptor(proto, 'value').set;
-                        nativeSetter.call(inputEl, String(idx));
-                        inputEl.dispatchEvent(new Event('input', { bubbles: true }));
-                        setTimeout(() => {
-                            inputEl.dispatchEvent(new Event('change', { bubbles: true }));
-                        }, 50);
-                    }
+                    pushToHidden('#click-index-input', idx);
                 }
             }
-        }
-        plotEl.on('plotly_click', handleClick);
+        });
+
+        // Legend click → after toggleothers settles, read visible trace names
+        // and push them to #legend-sync-input as JSON {visible: [...]}.
+        plotEl.on('plotly_legendclick', function (ed) {
+            setTimeout(() => {
+                const visible = (plotEl.data || [])
+                    .filter(t => t.visible === undefined || t.visible === true)
+                    .map(t => t.name);
+                pushToHidden('#legend-sync-input', JSON.stringify({visible: visible}));
+            }, 60);
+            return true;  // allow Plotly to process its default toggleothers
+        });
+
+        plotEl.on('plotly_legenddoubleclick', function (ed) {
+            setTimeout(() => {
+                const visible = (plotEl.data || [])
+                    .filter(t => t.visible === undefined || t.visible === true)
+                    .map(t => t.name);
+                pushToHidden('#legend-sync-input', JSON.stringify({visible: visible}));
+            }, 60);
+            return true;
+        });
+    }
+
+    function setup() {
+        const plotEl = document.querySelector('#tsne-chart .js-plotly-plot');
+        if (!plotEl) { setTimeout(setup, 500); return; }
+        attachHandlers(plotEl);
+        const root = document.querySelector('#tsne-chart') || document.body;
         const observer = new MutationObserver(() => {
             const newPlot = document.querySelector('#tsne-chart .js-plotly-plot');
-            if (newPlot && !newPlot._hasClickHandler) {
-                newPlot._hasClickHandler = true;
-                newPlot.on('plotly_click', handleClick);
-            }
-        });
-        observer.observe(document.querySelector('#tsne-chart') || document.body, {
-            childList: true, subtree: true
+            if (newPlot) attachHandlers(newPlot);
         });
+        observer.observe(root, { childList: true, subtree: true });
     }
-    setTimeout(setupClickHandler, 1000);
+    setTimeout(setup, 1000);
 }
 """
 
@@ -932,8 +975,8 @@ ALEPH_BETH_CSS = """
     margin: 18px 0 !important;
 }
 
-/* Hidden index input (kept invisible) */
-#click-index-input {
+/* Hidden bridges from Plotly DOM → Gradio state */
+#click-index-input, #legend-sync-input {
     position: absolute !important;
     width: 1px !important;
     height: 1px !important;
@@ -1085,64 +1128,77 @@ with gr.Blocks(
     gr.HTML(HEADER_HTML)
     gr.HTML(HOW_TO_HTML)
 
+    # Hidden bridges from Plotly DOM → Gradio state
     click_index = gr.Textbox(value="", visible=True, elem_id="click-index-input")
+    legend_sync = gr.Textbox(value="", visible=True, elem_id="legend-sync-input")
 
     with gr.Row():
-        # ---- Left — t-SNE chart + filters ----
+        # ============================================================
+        # LEFT — every way to pick a prompt
+        # ============================================================
         with gr.Column(scale=3):
-            with gr.Row():
-                select_all_btn = gr.Button("Select all", size="sm", scale=1)
-                deselect_all_btn = gr.Button("Deselect all", size="sm", scale=1)
-
-            category_filter = gr.CheckboxGroup(
-                choices=UNIQUE_CATEGORIES,
-                value=UNIQUE_CATEGORIES,
-                label="Filter by category",
-                interactive=True,
-            )
+            gr.HTML("<div class='ab-eyebrow'>Map</div>"
+                    "<h3 class='ab-h3'>t-SNE — Prompt landscape</h3>")
             tsne_plot = gr.Plot(
                 value=build_tsne_figure(),
                 label="t-SNE space",
                 elem_id="tsne-chart",
+                show_label=False,
             )
             gr.Markdown(
-                "<span class='ab-caption'>Click a point to inspect it. "
-                "Hover to preview. Scroll to zoom, drag to pan.</span>"
+                "<span class='ab-caption'>Click a point to inspect. "
+                "Click a legend entry to isolate that category — click again to restore. "
+                "Double-click a legend entry to toggle just that trace.</span>"
             )
 
-        # ---- Right — Analysis + controls + stats ----
-        with gr.Column(scale=2):
-            gr.HTML("<div class='ab-eyebrow'>Analysis</div>"
-                    "<h3 class='ab-h3'>Verdict & confidence</h3>")
-            result_html = gr.HTML(value=empty_analysis_html())
-            risk_md = gr.Markdown(value="")
-            full_prompt = gr.Textbox(
-                label="Full prompt",
-                lines=3,
-                interactive=False,
-                visible=True,
+            gr.HTML("<div class='ab-eyebrow' style='margin-top:18px;'>Filter</div>"
+                    "<h3 class='ab-h3'>By category</h3>")
+            with gr.Row():
+                select_all_btn = gr.Button("Select all", size="sm", scale=1)
+                deselect_all_btn = gr.Button("Deselect all", size="sm", scale=1)
+            category_filter = gr.CheckboxGroup(
+                choices=UNIQUE_CATEGORIES,
+                value=UNIQUE_CATEGORIES,
+                label="Categories",
+                show_label=False,
+                interactive=True,
             )
 
-            gr.Markdown("---")
-
-            gr.HTML("<div class='ab-eyebrow'>Library</div>"
-                    "<h3 class='ab-h3'>Pick a prompt</h3>")
+            gr.HTML("<div class='ab-eyebrow' style='margin-top:18px;'>Library</div>"
+                    "<h3 class='ab-h3'>Pick a prompt from the dataset</h3>")
             prompt_dropdown = gr.Dropdown(
                 choices=DROPDOWN_CHOICES,
                 label="Search the dataset",
+                show_label=False,
                 filterable=True,
                 interactive=True,
             )
 
-            gr.HTML("<div class='ab-eyebrow' style='margin-top:14px;'>Custom</div>"
-                    "<h3 class='ab-h3'>Analyze your own</h3>")
+            gr.HTML("<div class='ab-eyebrow' style='margin-top:18px;'>Custom</div>"
+                    "<h3 class='ab-h3'>Analyze your own prompt</h3>")
             manual_input = gr.Textbox(
                 label="Prompt",
+                show_label=False,
                 placeholder="Type or paste a request to evaluate…",
-                lines=2,
+                lines=3,
             )
             analyze_btn = gr.Button("Inspect", variant="primary")
 
+        # ============================================================
+        # RIGHT — the analysis only
+        # ============================================================
+        with gr.Column(scale=2):
+            gr.HTML("<div class='ab-eyebrow'>Analysis</div>"
+                    "<h3 class='ab-h3'>Verdict & confidence</h3>")
+            result_html = gr.HTML(value=empty_analysis_html())
+            risk_md = gr.Markdown(value="")
+            full_prompt = gr.Textbox(
+                label="Full prompt",
+                lines=4,
+                interactive=False,
+                visible=True,
+            )
+
             gr.Markdown("---")
 
             gr.HTML(build_stats_html())
@@ -1151,6 +1207,8 @@ with gr.Blocks(
     category_filter.change(fn=on_filter_change, inputs=[category_filter], outputs=[tsne_plot])
     select_all_btn.click(fn=select_all_categories, inputs=[], outputs=[category_filter, tsne_plot])
     deselect_all_btn.click(fn=deselect_all_categories, inputs=[], outputs=[category_filter, tsne_plot])
+    legend_sync.change(fn=on_legend_sync, inputs=[legend_sync],
+                       outputs=[category_filter, tsne_plot])
     click_index.change(fn=on_index_input, inputs=[click_index],
                        outputs=[result_html, risk_md, full_prompt])
     prompt_dropdown.change(fn=on_dropdown_select, inputs=[prompt_dropdown],