Added metric bars and children links in the sidebar ; added up/down keyboard shortcuts in the list view

jvm123 · jvm123 · commit 0f07c8ca5a36 · 2025-06-09T12:46:14.000+02:00
diff --git a/scripts/static/js/graph.js b/scripts/static/js/graph.js
@@ -104,6 +104,8 @@ export function selectProgram(programId) {
         }
         nodeElem.classed("node-hovered", false);
     });
+    // Dispatch event for list view sync
+    window.dispatchEvent(new CustomEvent('node-selected', { detail: { id: programId } }));
 }
 
 let svg = null;
diff --git a/scripts/static/js/list.js b/scripts/static/js/list.js
@@ -55,6 +55,9 @@ export function renderNodeList(nodes) {
         <span class="summary-label">Average</span>
         <span class="summary-value">${avgScore.toFixed(4)}</span>
         ${renderMetricBar(avgScore, minScore, maxScore)}
+        <span style="margin-left:1.2em;font-size:0.98em;color:#888;vertical-align:middle;">
+          <span title="Total programs, generations, islands">📦</span> Total: ${nodes.length} programs, ${new Set(nodes.map(n => n.generation)).size} generations, ${new Set(nodes.map(n => n.island)).size} islands
+        </span>
       </div>
     `;
     container.innerHTML = '';
@@ -151,6 +154,12 @@ export function renderNodeList(nodes) {
         }, 0);
         container.appendChild(row);
     });
+    container.focus();
+    // Scroll to selected node if present
+    const selected = container.querySelector('.node-list-item.selected');
+    if (selected) {
+        selected.scrollIntoView({behavior: 'smooth', block: 'center'});
+    }
 }
 export function selectListNodeById(id) {
     setSelectedProgramId(id);
@@ -200,4 +209,53 @@ function showSidebarListView() {
     } else {
         showSidebar();
     }
-}
+}
+
+// Sync selection when switching to list tab
+const tabListBtn = document.getElementById('tab-list');
+if (tabListBtn) {
+    tabListBtn.addEventListener('click', () => {
+        renderNodeList(allNodeData);
+    });
+}
+
+// Keyboard navigation for up/down in list view
+const nodeListContainer = document.getElementById('node-list-container');
+if (nodeListContainer) {
+    nodeListContainer.tabIndex = 0;
+    nodeListContainer.addEventListener('keydown', function(e) {
+        if (!['ArrowUp', 'ArrowDown'].includes(e.key)) return;
+        e.preventDefault(); // Always prevent default to avoid browser scroll
+        const items = Array.from(nodeListContainer.querySelectorAll('.node-list-item'));
+        if (!items.length) return;
+        let idx = items.findIndex(item => item.classList.contains('selected'));
+        if (idx === -1) idx = 0;
+        if (e.key === 'ArrowUp' && idx > 0) idx--;
+        if (e.key === 'ArrowDown' && idx < items.length - 1) idx++;
+        const nextItem = items[idx];
+        if (nextItem) {
+            const nodeId = nextItem.getAttribute('data-node-id');
+            selectListNodeById(nodeId);
+            nextItem.focus();
+            nextItem.scrollIntoView({behavior: 'smooth', block: 'center'});
+            // Also scroll the page if needed
+            const rect = nextItem.getBoundingClientRect();
+            if (rect.top < 0 || rect.bottom > window.innerHeight) {
+                window.scrollTo({top: window.scrollY + rect.top - 100, behavior: 'smooth'});
+            }
+        }
+    });
+    // Focus container on click to enable keyboard nav
+    nodeListContainer.addEventListener('click', function() {
+        nodeListContainer.focus();
+    });
+}
+
+// Listen for node selection events from other views and sync selection in the list view
+window.addEventListener('node-selected', function(e) {
+    // e.detail should contain the selected node id
+    if (e.detail && e.detail.id) {
+        setSelectedProgramId(e.detail.id);
+        renderNodeList(allNodeData);
+    }
+});
diff --git a/scripts/static/js/main.js b/scripts/static/js/main.js
@@ -5,6 +5,7 @@ import { updateListSidebarLayout, renderNodeList } from './list.js';
 import { renderGraph, g, getNodeRadius, animateGraphNodeAttributes } from './graph.js';
 
 export let allNodeData = [];
+let metricMinMax = {};
 
 let archiveProgramIds = [];
 
@@ -13,15 +14,55 @@ const sidebarEl = document.getElementById('sidebar');
 let lastDataStr = null;
 let selectedProgramId = null;
 
+function computeMetricMinMax(nodes) {
+    metricMinMax = {};
+    if (!nodes) return;
+    nodes.forEach(n => {
+        if (n.metrics && typeof n.metrics === 'object') {
+            for (const [k, v] of Object.entries(n.metrics)) {
+                if (typeof v === 'number' && isFinite(v)) {
+                    if (!(k in metricMinMax)) {
+                        metricMinMax[k] = {min: v, max: v};
+                    } else {
+                        metricMinMax[k].min = Math.min(metricMinMax[k].min, v);
+                        metricMinMax[k].max = Math.max(metricMinMax[k].max, v);
+                    }
+                }
+            }
+        }
+    });
+    // Avoid min==max
+    for (const k in metricMinMax) {
+        if (metricMinMax[k].min === metricMinMax[k].max) {
+            metricMinMax[k].min = 0;
+            metricMinMax[k].max = 1;
+        }
+    }
+}
+
 function formatMetrics(metrics) {
-    return Object.entries(metrics).map(([k, v]) => `<b>${k}</b>: ${v}`).join('<br>');
+    if (!metrics || typeof metrics !== 'object') return '';
+    let rows = Object.entries(metrics).map(([k, v]) => {
+        let min = 0, max = 1;
+        if (metricMinMax[k]) {
+            min = metricMinMax[k].min;
+            max = metricMinMax[k].max;
+        }
+        let valStr = (typeof v === 'number' && isFinite(v)) ? v.toFixed(4) : v;
+        return `<tr><td style='padding-right:0.7em;'><b>${k}</b></td><td style='padding-right:0.7em;'>${valStr}</td><td style='min-width:90px;'>${typeof v === 'number' ? renderMetricBar(v, min, max) : ''}</td></tr>`;
+    }).join('');
+    return `<table class='metrics-table'><tbody>${rows}</tbody></table>`;
 }
 
 function renderMetricBar(value, min, max, opts={}) {
     let percent = 0;
-    if (typeof value === 'number' && isFinite(value) && max > min) {
-        percent = (value - min) / (max - min);
-        percent = Math.max(0, Math.min(1, percent));
+    if (typeof value === 'number' && isFinite(value)) {
+        if (max > min) {
+            percent = (value - min) / (max - min);
+            percent = Math.max(0, Math.min(1, percent));
+        } else if (max === min) {
+            percent = 1; // Show as filled if min==max
+        }
     }
     let minLabel = `<span class="metric-bar-min">${min.toFixed(2)}</span>`;
     let maxLabel = `<span class="metric-bar-max">${max.toFixed(2)}</span>`;
@@ -201,10 +242,11 @@ document.getElementById('tab-branching').addEventListener('click', function() {
 // Export all shared state and helpers for use in other modules
 export function setAllNodeData(nodes) {
     allNodeData = nodes;
+    computeMetricMinMax(nodes);
 }
 
 export function setSelectedProgramId(id) {
     selectedProgramId = id;
 }
 
-export { archiveProgramIds, lastDataStr, selectedProgramId, formatMetrics, renderMetricBar, getHighlightNodes, getSelectedMetric };
+export { archiveProgramIds, lastDataStr, selectedProgramId, formatMetrics, renderMetricBar, getHighlightNodes, getSelectedMetric, metricMinMax };
diff --git a/scripts/static/js/performance.js b/scripts/static/js/performance.js
@@ -172,6 +172,8 @@ import { selectListNodeById } from './list.js';
 export function selectPerformanceNodeById(id, opts = {}) {
     setSelectedProgramId(id);
     setSidebarSticky(true);
+    // Dispatch event for list view sync
+    window.dispatchEvent(new CustomEvent('node-selected', { detail: { id } }));
     if (typeof allNodeData !== 'undefined' && allNodeData.length) {
         updatePerformanceGraph(allNodeData, opts);
         const node = allNodeData.find(n => n.id == id);
diff --git a/scripts/static/js/sidebar.js b/scripts/static/js/sidebar.js
@@ -3,6 +3,7 @@ import { scrollAndSelectNodeById } from './graph.js';
 
 const sidebar = document.getElementById('sidebar');
 export let sidebarSticky = false;
+let lastSidebarTab = null;
 
 export function showSidebar() {
     sidebar.style.transform = 'translateX(0)';
@@ -24,7 +25,6 @@ export function showSidebarContent(d, fromHover = false) {
     if (archiveProgramIds && archiveProgramIds.includes(d.id)) {
         starHtml = '<span style="position:relative;top:0.05em;left:0.15em;font-size:1.6em;color:#FFD600;z-index:10;" title="MAP-elites member" aria-label="MAP-elites member">★</span>';
     }
-    // Locator icon button (left of close X)
     let locatorBtn = '<button id="sidebar-locator-btn" title="Locate selected node" aria-label="Locate selected node" style="position:absolute;top:0.05em;right:2.5em;font-size:1.5em;background:none;border:none;color:#FFD600;cursor:pointer;z-index:10;line-height:1;filter:drop-shadow(0 0 2px #FFD600);">⦿</button>';
     let closeBtn = '<button id="sidebar-close-btn" style="position:absolute;top:0.05em;right:0.15em;font-size:1.6em;background:none;border:none;color:#888;cursor:pointer;z-index:10;line-height:1;">&times;</button>';
     let openLink = '<div style="text-align:center;margin:-1em 0 1.2em 0;"><a href="/program/' + d.id + '" target="_blank" class="open-in-new" style="font-size:0.95em;">[open in new window]</a></div>';
@@ -33,17 +33,45 @@ export function showSidebarContent(d, fromHover = false) {
     let tabNames = [];
     if (d.code && typeof d.code === 'string' && d.code.trim() !== '') tabNames.push('Code');
     if (d.prompts && typeof d.prompts === 'object' && Object.keys(d.prompts).length > 0) tabNames.push('Prompts');
-    if (tabNames.length > 0) {
-        tabHtml = '<div id="sidebar-tab-bar" style="display:flex;gap:0.7em;margin-bottom:0.7em;">' +
-            tabNames.map((name, i) => `<span class="sidebar-tab${i===0?' active':''}" data-tab="${name}">${name}</span>`).join('') + '</div>';
-        tabContentHtml = '<div id="sidebar-tab-content">';
-        if (tabNames[0] === 'Code') tabContentHtml += `<pre class="sidebar-code-pre">${d.code}</pre>`;
-        if (tabNames[0] === 'Prompts') {
+    const children = allNodeData.filter(n => n.parent_id === d.id);
+    if (children.length > 0) tabNames.push('Children');
+    let activeTab = lastSidebarTab && tabNames.includes(lastSidebarTab) ? lastSidebarTab : tabNames[0];
+
+    // Helper to render tab content
+    function renderSidebarTabContent(tabName, d, children) {
+        if (tabName === 'Code') {
+            return `<pre class="sidebar-code-pre">${d.code}</pre>`;
+        }
+        if (tabName === 'Prompts') {
+            let html = '';
             for (const [k, v] of Object.entries(d.prompts)) {
-                tabContentHtml += `<div style="margin-bottom:0.7em;"><b>${k}:</b><pre class="sidebar-pre">${v}</pre></div>`;
+                html += `<div style="margin-bottom:0.7em;"><b>${k}:</b><pre class="sidebar-pre">${v}</pre></div>`;
             }
+            return html;
         }
-        tabContentHtml += '</div>';
+        if (tabName === 'Children') {
+            const metric = (document.getElementById('metric-select') && document.getElementById('metric-select').value) || 'combined_score';
+            let min = 0, max = 1;
+            const vals = children.map(child => (child.metrics && typeof child.metrics[metric] === 'number') ? child.metrics[metric] : null).filter(x => x !== null);
+            if (vals.length > 0) {
+                min = Math.min(...vals);
+                max = Math.max(...vals);
+            }
+            return `<div><ul style='margin:0.5em 0 0 1em;padding:0;'>` +
+                children.map(child => {
+                    let val = (child.metrics && typeof child.metrics[metric] === 'number') ? child.metrics[metric].toFixed(4) : '(no value)';
+                    let bar = (child.metrics && typeof child.metrics[metric] === 'number') ? renderMetricBar(child.metrics[metric], min, max) : '';
+                    return `<li style='margin-bottom:0.3em;'><a href="#" class="child-link" data-child="${child.id}">${child.id}</a><br /><br /> <span style='margin-left:0.5em;'>${val}</span> ${bar}</li>`;
+                }).join('') +
+                `</ul></div>`;
+        }
+        return '';
+    }
+
+    if (tabNames.length > 0) {
+        tabHtml = '<div id="sidebar-tab-bar" style="display:flex;gap:0.7em;margin-bottom:0.7em;">' +
+            tabNames.map((name) => `<span class="sidebar-tab${name===activeTab?' active':''}" data-tab="${name}">${name}</span>`).join('') + '</div>';
+        tabContentHtml = `<div id="sidebar-tab-content">${renderSidebarTabContent(activeTab, d, children)}</div>`;
     }
     let parentIslandHtml = '';
     if (d.parent_id && d.parent_id !== 'None') {
@@ -72,18 +100,55 @@ export function showSidebarContent(d, fromHover = false) {
                 Array.from(tabBar.children).forEach(e => e.classList.remove('active'));
                 tabEl.classList.add('active');
                 const tabName = tabEl.dataset.tab;
+                lastSidebarTab = tabName;
                 const tabContent = document.getElementById('sidebar-tab-content');
-                if (tabName === 'Code') tabContent.innerHTML = `<pre class="sidebar-code-pre">${d.code}</pre>`;
-                if (tabName === 'Prompts') {
-                    let html = '';
-                    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>`;
+                tabContent.innerHTML = renderSidebarTabContent(tabName, d, children);
+                setTimeout(() => {
+                    document.querySelectorAll('.child-link').forEach(link => {
+                        link.onclick = function(e) {
+                            e.preventDefault();
+                            const childNode = allNodeData.find(n => n.id == link.dataset.child);
+                            if (childNode) {
+                                window._lastSelectedNodeData = childNode;
+                                const perfTabBtn = document.getElementById('tab-performance');
+                                const perfTabView = document.getElementById('view-performance');
+                                if ((perfTabBtn && perfTabBtn.classList.contains('active')) || (perfTabView && perfTabView.classList.contains('active'))) {
+                                    import('./performance.js').then(mod => {
+                                        mod.selectPerformanceNodeById(childNode.id);
+                                        showSidebar();
+                                    });
+                                } else {
+                                    scrollAndSelectNodeById(childNode.id);
+                                }
+                            }
+                        };
+                    });
+                }, 0);
+            };
+        });
+    }
+    setTimeout(() => {
+        document.querySelectorAll('.child-link').forEach(link => {
+            link.onclick = function(e) {
+                e.preventDefault();
+                const childNode = allNodeData.find(n => n.id == link.dataset.child);
+                if (childNode) {
+                    window._lastSelectedNodeData = childNode;
+                    // Check if performance tab is active
+                    const perfTabBtn = document.getElementById('tab-performance');
+                    const perfTabView = document.getElementById('view-performance');
+                    if ((perfTabBtn && perfTabBtn.classList.contains('active')) || (perfTabView && perfTabView.classList.contains('active'))) {
+                        import('./performance.js').then(mod => {
+                            mod.selectPerformanceNodeById(childNode.id);
+                            showSidebar();
+                        });
+                    } else {
+                        scrollAndSelectNodeById(childNode.id);
                     }
-                    tabContent.innerHTML = html;
                 }
             };
         });
-    }
+    }, 0);
     const closeBtnEl = document.getElementById('sidebar-close-btn');
     if (closeBtnEl) closeBtnEl.onclick = function() {
         setSelectedProgramId(null);

Original file line number	Diff line number	Diff line change
`@@ -104,6 +104,8 @@ export function selectProgram(programId) {`
`104`	`104`	`}`
`105`	`105`	`nodeElem.classed("node-hovered", false);`
`106`	`106`	`});`
	`107`	`+ // Dispatch event for list view sync`
	`108`	`+ window.dispatchEvent(new CustomEvent('node-selected', { detail: { id: programId } }));`
`107`	`109`	`}`
`108`	`110`
`109`	`111`	`let svg = null;`