visualizer UI: Fixed handling of prompt dicts, added select box for picking the prompt of interest

Author: jvm123

scripts/static/js/main.js

@@ -83,8 +83,8 @@ function loadAndRenderData(data) {
     renderNodeList(data.nodes);
     document.getElementById('checkpoint-label').textContent =
         "Checkpoint: " + (data.checkpoint_dir || 'static export');
-    // Populate metric-select options
     const metricSelect = document.getElementById('metric-select');
+    const prevMetric = metricSelect.value || localStorage.getItem('selectedMetric') || null;
     metricSelect.innerHTML = '';
     const metrics = new Set();
     data.nodes.forEach(node => {
@@ -98,9 +98,14 @@ function loadAndRenderData(data) {
         option.textContent = metric;
         metricSelect.appendChild(option);
     });
-    if (metricSelect.options.length > 0) {
+    if (prevMetric && metrics.has(prevMetric)) {
+        metricSelect.value = prevMetric;
+    } else if (metricSelect.options.length > 0) {
         metricSelect.selectedIndex = 0;
     }
+    metricSelect.addEventListener('change', function() {
+        localStorage.setItem('selectedMetric', metricSelect.value);
+    });
 }
 
 if (window.STATIC_DATA) {

scripts/static/js/sidebar.js

@@ -43,11 +43,36 @@ export function showSidebarContent(d, fromHover = false) {
             return `<pre class="sidebar-code-pre">${d.code}</pre>`;
         }
         if (tabName === 'Prompts') {
-            let html = '';
+            // --- Prompt select logic ---
+            let promptOptions = [];
+            let promptMap = {};
             for (const [k, v] of Object.entries(d.prompts)) {
-                html += `<div style="margin-bottom:0.7em;"><b>${k}:</b><pre class="sidebar-pre">${v}</pre></div>`;
+                if (v && typeof v === 'object' && !Array.isArray(v)) {
+                    for (const [subKey, subVal] of Object.entries(v)) {
+                        const optLabel = `${k} - ${subKey}`;
+                        promptOptions.push(optLabel);
+                        promptMap[optLabel] = subVal;
+                    }
+                } else {
+                    const optLabel = `${k}`;
+                    promptOptions.push(optLabel);
+                    promptMap[optLabel] = v;
+                }
+            }
+            // Get last selected prompt from localStorage, or default to first
+            let lastPromptKey = localStorage.getItem('sidebarPromptSelect') || promptOptions[0] || '';
+            if (!promptMap[lastPromptKey]) lastPromptKey = promptOptions[0] || '';
+            // Build select box
+            let selectHtml = '';
+            if (promptOptions.length > 1) {
+                selectHtml = `<select id="sidebar-prompt-select" style="margin-bottom:0.7em;max-width:100%;font-size:1em;">
+                    ${promptOptions.map(opt => `<option value="${opt}"${opt===lastPromptKey?' selected':''}>${opt}</option>`).join('')}
+                </select>`;
             }
-            return html;
+            // Show only the selected prompt
+            let promptVal = promptMap[lastPromptKey];
+            let promptHtml = `<pre class="sidebar-pre">${promptVal ?? ''}</pre>`;
+            return selectHtml + promptHtml;
         }
         if (tabName === 'Children') {
             const metric = (document.getElementById('metric-select') && document.getElementById('metric-select').value) || 'combined_score';
@@ -103,6 +128,20 @@ export function showSidebarContent(d, fromHover = false) {
                 lastSidebarTab = tabName;
                 const tabContent = document.getElementById('sidebar-tab-content');
                 tabContent.innerHTML = renderSidebarTabContent(tabName, d, children);
+                // Add prompt select event if Prompts tab
+                if (tabName === 'Prompts') {
+                    const promptSelect = document.getElementById('sidebar-prompt-select');
+                    if (promptSelect) {
+                        promptSelect.onchange = function() {
+                            localStorage.setItem('sidebarPromptSelect', promptSelect.value);
+                            // Re-render Prompts tab with new selection
+                            tabContent.innerHTML = renderSidebarTabContent('Prompts', d, children);
+                            // Re-attach event
+                            const newPromptSelect = document.getElementById('sidebar-prompt-select');
+                            if (newPromptSelect) newPromptSelect.onchange = promptSelect.onchange;
+                        };
+                    }
+                }
                 setTimeout(() => {
                     document.querySelectorAll('.child-link').forEach(link => {
                         link.onclick = function(e) {
@@ -128,6 +167,18 @@ export function showSidebarContent(d, fromHover = false) {
         });
     }
     setTimeout(() => {
+        const promptSelect = document.getElementById('sidebar-prompt-select');
+        if (promptSelect) {
+            promptSelect.onchange = function() {
+                localStorage.setItem('sidebarPromptSelect', promptSelect.value);
+                // Re-render Prompts tab with new selection
+                const tabContent = document.getElementById('sidebar-tab-content');
+                tabContent.innerHTML = renderSidebarTabContent('Prompts', d, children);
+                // Re-attach event
+                const newPromptSelect = document.getElementById('sidebar-prompt-select');
+                if (newPromptSelect) newPromptSelect.onchange = promptSelect.onchange;
+            };
+        }
         document.querySelectorAll('.child-link').forEach(link => {
             link.onclick = function(e) {
                 e.preventDefault();