Function renderNodeList

scripts/static/js/list.js:6–174

(nodes)

import { selectPerformanceNodeById } from './performance.js';

export function renderNodeList(nodes) {
    setAllNodeData(nodes);
    const container = document.getElementById('node-list-container');
    if (!container) return;
    const search = document.getElementById('list-search').value.trim().toLowerCase();
    const sort = document.getElementById('list-sort').value;
    let filtered = nodes;
    if (search) {
        filtered = nodes.filter(n => (n.id + '').toLowerCase().includes(search));
    }
    const metric = getSelectedMetric();
    if (sort === 'id') {
        filtered = filtered.slice().sort((a, b) => (a.id + '').localeCompare(b.id + ''));
    } else if (sort === 'generation') {
        filtered = filtered.slice().sort((a, b) => (a.generation || 0) - (b.generation || 0));
    } else if (sort === 'island') {
        filtered = filtered.slice().sort((a, b) => (a.island || 0) - (b.island || 0));
    } else if (sort === 'score') {
        filtered = filtered.slice().sort((a, b) => {
            const aScore = a.metrics && typeof a.metrics[metric] === 'number' ? a.metrics[metric] : -Infinity;
            const bScore = b.metrics && typeof b.metrics[metric] === 'number' ? b.metrics[metric] : -Infinity;
            return bScore - aScore;
        });
    }
    const highlightFilter = document.getElementById('highlight-select').value;
    const highlightNodes = getHighlightNodes(nodes, highlightFilter, metric);
    const highlightIds = new Set(highlightNodes.map(n => n.id));
    const allScores = nodes.map(n => (n.metrics && typeof n.metrics[metric] === 'number') ? n.metrics[metric] : null).filter(x => x !== null && !isNaN(x));
    const minScore = allScores.length ? Math.min(...allScores) : 0;
    const maxScore = allScores.length ? Math.max(...allScores) : 1;
    const topScore = allScores.length ? Math.max(...allScores) : 0;
    const avgScore = allScores.length ? (allScores.reduce((a, b) => a + b, 0) / allScores.length) : 0;

    let summaryBar = document.getElementById('list-summary-bar');
    if (!summaryBar) {
        summaryBar = document.createElement('div');
        summaryBar.id = 'list-summary-bar';
        summaryBar.className = 'list-summary-bar';
        container.parentElement.insertBefore(summaryBar, container);
    }
    summaryBar.innerHTML = `
      <div class="summary-block">
        <span class="summary-icon">🏆</span>
        <span class="summary-label">Top score</span>
        <span class="summary-value">${topScore.toFixed(4)}</span>
        ${renderMetricBar(topScore, minScore, maxScore)}
      </div>
      <div class="summary-block">
        <span class="summary-icon">📊</span>
        <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 = '';