feat: Add new Qwen and Gemini model data, implement entropy data processing, and introduce various visualization and data management scripts.

.gitignore

@@ -0,0 +1,3 @@
+probing/
+# reference_scripts/
+novelty_check/

charts.js

@@ -2,73 +2,148 @@
 // Using Plotly.js with animate for smooth transitions
 
 // Common Plotly layout settings for dark theme
+// Common Plotly layout settings for Apple Minimalist theme
 const darkLayout = {
-    paper_bgcolor: 'rgba(30, 41, 59, 0)',
-    plot_bgcolor: 'rgba(30, 41, 59, 0)',
+    paper_bgcolor: 'rgba(0,0,0,0)',
+    plot_bgcolor: 'rgba(0,0,0,0)',
     font: {
-        family: 'Inter, sans-serif',
-        color: '#e2e8f0',
-        size: 11
+        family: '-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif',
+        color: '#000000', // Pure black for max contrast
+        size: 12 // Base font size increased
     },
     xaxis: {
-        gridcolor: 'rgba(148, 163, 184, 0.12)',
-        linecolor: 'rgba(148, 163, 184, 0.2)',
-        tickfont: { color: '#94a3b8', size: 10 },
-        title: { font: { color: '#e2e8f0', size: 11 } }
+        gridcolor: '#d1d1d6', // Darker grid lines
+        linecolor: '#d1d1d6',
+        tickfont: { color: '#515154', size: 11 }, // Larger and darker ticks
+        title: { font: { color: '#000000', size: 12, weight: 600 } },
+        zerolinecolor: '#d1d1d6'
     },
     yaxis: {
-        gridcolor: 'rgba(148, 163, 184, 0.12)',
-        linecolor: 'rgba(148, 163, 184, 0.2)',
-        tickfont: { color: '#94a3b8', size: 10 },
-        title: { font: { color: '#e2e8f0', size: 11 } }
+        gridcolor: '#d1d1d6',
+        linecolor: '#d1d1d6',
+        tickfont: { color: '#515154', size: 11 },
+        title: { font: { color: '#000000', size: 12, weight: 600 } },
+        zerolinecolor: '#d1d1d6'
     },
     legend: {
-        bgcolor: 'rgba(30, 41, 59, 0.9)',
-        bordercolor: 'rgba(148, 163, 184, 0.2)',
-        borderwidth: 1,
-        font: { color: '#e2e8f0', size: 10 },
+        bgcolor: 'rgba(0,0,0,0)',
+        bordercolor: 'rgba(0,0,0,0)',
+        borderwidth: 0,
+        font: { color: '#000000', size: 11 },
         orientation: 'h',
-        y: -0.2,
+        y: 0.99,
         x: 0.5,
-        xanchor: 'center'
+        xanchor: 'center',
+        yanchor: 'top'
     },
     hoverlabel: {
-        bgcolor: '#1e293b',
-        bordercolor: '#6366f1',
-        font: { color: '#e2e8f0', size: 11 }
+        bgcolor: '#ffffff',
+        bordercolor: 'rgba(0,0,0,0.1)',
+        font: { color: '#000000', size: 12 },
+        namelength: -1
     },
-    margin: { t: 20, r: 15, b: 60, l: 50 }
+    hovermode: 'closest',  // Highlight closest point/element on hover
+    margin: { t: 30, r: 20, b: 60, l: 60 } // Increased margins
 };
 
 const plotlyConfig = {
-    displayModeBar: true,
+    displayModeBar: false, // Hide modebar completely
     responsive: true,
-    modeBarButtonsToRemove: ['lasso2d', 'select2d', 'autoScale2d'],
     displaylogo: false
 };
 
 // Animation settings for smooth transitions
 const animationSettings = {
     transition: {
-        duration: 500,
+        duration: 750,
         easing: 'cubic-in-out'
     },
     frame: {
-        duration: 500
+        duration: 750,
+        redraw: true
     }
 };
 
 // Current state
 let currentScalingDim = 'turn';
-let currentProbingMode = 'byTurn';
+let currentProbingMode = 'byProgress';
+let currentRankingMode = 'novelty';
 
 // ============================================================================
-// SCALING ANALYSIS - 3 Charts with animated dimension switching
+// PERFORMANCE OPTIMIZATION UTILITIES
 // ============================================================================
 
+// Track which charts have been initialized
+const initializedCharts = new Set();
+
+// Lazy loading observer - only render charts when they enter viewport
+const lazyLoadObserver = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            const section = entry.target;
+            const sectionId = section.id;
+
+            if (!initializedCharts.has(sectionId)) {
+                initializedCharts.add(sectionId);
+
+                // Use requestIdleCallback for non-blocking initialization
+                const initFn = () => {
+                    switch (sectionId) {
+                        case 'scaling': initScalingCharts(); break;
+                        case 'ranking': initRankingCharts(); break;
+                        case 'turn': initTurnCharts(); break;
+                        case 'entropy': initEntropyCharts(); break;
+                        case 'error': initErrorChart(); break;
+                        case 'probing': initProbingCharts(); break;
+                    }
+                };
+
+                if ('requestIdleCallback' in window) {
+                    requestIdleCallback(initFn, { timeout: 100 });
+                } else {
+                    setTimeout(initFn, 0);
+                }
+            }
+        }
+    });
+}, {
+    rootMargin: '100px 0px', // Start loading 100px before entering viewport
+    threshold: 0.01
+});
+
+// Debounce utility for hover effects
+function debounce(fn, delay) {
+    let timeoutId;
+    return function (...args) {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => fn.apply(this, args), delay);
+    };
+}
+
+// Throttle utility for frequent events
+function throttle(fn, limit) {
+    let inThrottle = false;
+    return function (...args) {
+        if (!inThrottle) {
+            fn.apply(this, args);
+            inThrottle = true;
+            setTimeout(() => inThrottle = false, limit);
+        }
+    };
+}
+
+// Batch DOM updates using requestAnimationFrame
+function batchUpdate(updateFn) {
+    return new Promise(resolve => {
+        requestAnimationFrame(() => {
+            updateFn();
+            resolve();
+        });
+    });
+}
 
 // ============================================================================
-// SCALING ANALYSIS - Normalized Coordinate System for Smooth Animation
+// SCALING ANALYSIS - 3 Charts with animated dimension switching
 // ============================================================================
 
 // Helper to normalize values to [0, 1]
@@ -135,7 +210,28 @@ const SCALING_Y_RANGES = {
     'globem': [0, 50]    // Python: y_min=0, y_max=50
 };
 
+// Populate shared legend for a section
+function populateSharedLegend(containerId, models, colorMap) {
+    const container = document.getElementById(containerId);
+    if (!container) return;
+
+    container.innerHTML = models.map(model => {
+        const color = (colorMap && colorMap[model]) || '#888';
+        return `<div class="legend-item">
+            <span class="legend-color" style="background: ${color}"></span>
+            <span>${model}</span>
+        </div>`;
+    }).join('');
+}
+
 function initScalingCharts() {
+    // Check if data is loaded
+    if (typeof DDR_DATA === 'undefined' || !DDR_DATA.scaling) {
+        console.warn('DDR_DATA not loaded yet, retrying...');
+        setTimeout(initScalingCharts, 100);
+        return;
+    }
+
     const scenarios = ['mimic', '10k', 'globem'];
 
     scenarios.forEach(scenario => {
@@ -161,7 +257,7 @@ function initScalingCharts() {
                 x: modelNormX,
                 y: data[model].accuracy,
                 mode: 'lines+markers',
-                name: model,
+                name: model,  // CRITICAL: Set model name for legend
                 line: { color: DDR_DATA.modelColors[model] || '#888', width: 2 },
                 marker: { size: 6, color: DDR_DATA.modelColors[model] || '#888' },
                 hovertemplate: `<b>${model}</b><br>Turn: %{customdata}<br>Accuracy: %{y:.2f}%<extra></extra>`,
@@ -175,7 +271,7 @@ function initScalingCharts() {
             ...darkLayout,
             xaxis: {
                 ...darkLayout.xaxis,
-                title: { text: 'Number of Interaction Turns', font: { size: 11, color: '#e2e8f0' } },
+                title: { text: 'Number of Interaction Turns', font: { size: 11, color: '#1d1d1f' } },
                 type: 'linear', // ALWAYS LINEAR
                 range: [-0.05, 1.05], // FIXED RANGE
                 tickmode: 'array',
@@ -185,26 +281,26 @@ function initScalingCharts() {
             },
             yaxis: {
                 ...darkLayout.yaxis,
-                title: { text: 'Accuracy (%)', font: { size: 11, color: '#e2e8f0' } },
+                title: { text: 'Accuracy (%)', font: { size: 11, color: '#1d1d1f' } },
                 dtick: 5,
                 range: yRange
             },
-            showlegend: true
+            showlegend: false  // Use shared legend instead
         };
 
         Plotly.newPlot(`scaling-${scenario}`, traces, layout, plotlyConfig);
     });
-}
 
-
-// Inject CSS for line drawing animation
-const style = document.createElement('style');
-style.textContent = `
-    .js-line path {
-        transition: stroke-dashoffset 1s ease-out;
+    // Populate shared legend with models from first scenario
+    const firstScenario = scenarios.find(s => DDR_DATA.scaling[s]);
+    if (firstScenario) {
+        const models = Object.keys(DDR_DATA.scaling[firstScenario]);
+        populateSharedLegend('scaling-legend', models, DDR_DATA.modelColors);
     }
-`;
-document.head.appendChild(style);
+
+    // Apply hover effects after charts are rendered
+    setTimeout(() => applyHoverEffectsForSection('scaling'), 100);
+}
 
 function updateScalingCharts(dimension) {
     const scenarios = ['mimic', '10k', 'globem'];
@@ -240,7 +336,6 @@ function updateScalingCharts(dimension) {
         let offset = 0;
 
         const hoverLabels = { 'turn': 'Turns', 'token': 'Tokens', 'cost': 'Cost' };
-        const hoverFormat = dimension === 'token' ? (v) => v.toLocaleString() : (dimension === 'cost' ? (v) => '$' + v.toFixed(4) : (v) => v);
 
         models.forEach((model, i) => {
             const len = data[model].turns.length;
@@ -259,13 +354,13 @@ function updateScalingCharts(dimension) {
                 x: modelNormX,
                 y: data[model].accuracy,
                 customdata: rawValues,
-                mode: 'lines+markers', // KEEP LINES - we'll hide them via CSS
+                name: model,  // CRITICAL: Preserve model name
+                mode: 'lines+markers',
                 hovertemplate: `<b>${model}</b><br>${hoverLabels[dimension]}: %{customdata}<br>Accuracy: %{y:.2f}%<extra></extra>`
             });
         });
 
-        // 4. Two-Phase Animation: Points Only -> Add Lines with Drawing Effect
-
+        // Two-Phase Animation: Points Only -> Add Lines with Drawing Effect
         const graphDiv = document.getElementById(`scaling-${scenario}`);
 
         // Phase 1: Update to markers-only mode and animate points
@@ -295,48 +390,55 @@ function updateScalingCharts(dimension) {
                 redraw: true
             }
         }).then(() => {
-            // Phase 2: Add lines back and animate them drawing
+            // Phase 2: Add lines back with drawing animation
+            // CRITICAL: Pre-hide lines BEFORE react renders them
             const linesAndMarkersTraces = newTraces.map(trace => ({
                 ...trace,
-                mode: 'lines+markers'
+                mode: 'lines+markers',
+                line: {
+                    ...trace.line,
+                    // Start with invisible line (will be animated in)
+                    width: 0
+                }
             }));
 
-            // Use Plotly.react and wait for it to complete
+            // First, add the lines with width 0 (invisible)
             Plotly.react(`scaling-${scenario}`, linesAndMarkersTraces, {
                 ...graphDiv.layout
             }, plotlyConfig).then(() => {
-                // Give browser time to render
-                requestAnimationFrame(() => {
+                // Now set line width back and prepare for stroke animation
+                const visibleTraces = newTraces.map(trace => ({
+                    ...trace,
+                    mode: 'lines+markers'
+                }));
+
+                // Immediately query paths and set them to hidden state BEFORE making visible
+                const paths = graphDiv.querySelectorAll('.scatterlayer .trace .lines path');
+
+                // Pre-set all paths to invisible using stroke-dashoffset
+                paths.forEach((path) => {
+                    const len = path.getTotalLength();
+                    if (len > 0) {
+                        path.style.transition = 'none';
+                        path.style.strokeDasharray = len + ' ' + len;
+                        path.style.strokeDashoffset = len;
+                    }
+                });
+
+                // Now make lines visible (they're hidden by dashoffset)
+                Plotly.restyle(`scaling-${scenario}`, {
+                    'line.width': models.map(() => 2)
+                }).then(() => {
+                    // Force reflow
+                    graphDiv.getBoundingClientRect();
+
+                    // Start the stroke animation after a short delay
                     requestAnimationFrame(() => {
-                        // Try multiple selectors to find the line paths
-                        let paths = graphDiv.querySelectorAll('.scatterlayer .js-line path');
-                        if (paths.length === 0) {
-                            paths = graphDiv.querySelectorAll('.js-line path');
-                        }
-                        if (paths.length === 0) {
-                            paths = graphDiv.querySelectorAll('path.js-line');
-                        }
-                        if (paths.length === 0) {
-                            paths = graphDiv.querySelectorAll('.scatter path');
-                        }
-
-                        paths.forEach((path, idx) => {
+                        paths.forEach((path) => {
                             const len = path.getTotalLength();
-
                             if (len > 0) {
-                                // Reset any previous animation
-                                path.style.transition = 'none';
-                                path.style.strokeDasharray = len + ' ' + len;
-                                path.style.strokeDashoffset = len;
-
-                                // Force reflow
-                                path.getBoundingClientRect();
-
-                                // Start animation after a tiny delay
-                                setTimeout(() => {
-                                    path.style.transition = 'stroke-dashoffset 0.8s ease-out';
-                                    path.style.strokeDashoffset = '0';
-                                }, 10);
+                                path.style.transition = 'stroke-dashoffset 0.8s ease-out';
+                                path.style.strokeDashoffset = '0';
                             }
                         });
                     });
@@ -346,18 +448,19 @@ function updateScalingCharts(dimension) {
     });
 }
 
-
-
-
-// Dimension toggle event listeners
-document.querySelectorAll('.dim-btn:not(.probing-dim)').forEach(btn => {
-    btn.addEventListener('click', () => {
-        document.querySelectorAll('.dim-btn:not(.probing-dim)').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-
-        const dimension = btn.dataset.dim;
-        currentScalingDim = dimension;
-        updateScalingCharts(dimension);
+// Dimension toggle event listeners for SCALING only
+document.addEventListener('DOMContentLoaded', () => {
+    const scalingButtons = document.querySelectorAll('#scaling .dim-btn');
+    scalingButtons.forEach(btn => {
+        btn.addEventListener('click', () => {
+            // Only update scaling buttons
+            scalingButtons.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+
+            const dimension = btn.dataset.dim;
+            currentScalingDim = dimension;
+            updateScalingCharts(dimension);
+        });
     });
 });
 
@@ -397,8 +500,6 @@ function getDisplayName(model) {
     return RANKING_DISPLAY_NAMES[model] || model;
 }
 
-let currentRankingMode = 'novelty';
-
 function renderRankingCharts(mode, animate = false) {
     const scenarios = [
         { key: 'MIMIC', id: 'mimic' },
@@ -410,69 +511,116 @@ function renderRankingCharts(mode, animate = false) {
         const rawData = DDR_DATA.ranking[key];
         if (!rawData) return;
 
-        // Sort by primary ranking based on mode
-        let sortedModels;
+        // 1. Establish Base Order (Always sorted by Novelty/BT Rank initially)
+        // This ensures traces maintain object identity for animation
+        const baseModels = [...rawData].sort((a, b) => a.bt_rank - b.bt_rank);
+        const topN = baseModels.length;
+
+        // 2. Calculate Target Y-Positions based on current mode
+        // We need to know where each model *should* be
+        let sortedIndices;
         if (mode === 'novelty') {
-            sortedModels = [...rawData].sort((a, b) => a.bt_rank - b.bt_rank);
+            // In novelty mode, order matches baseModels (0, 1, 2...)
+            sortedIndices = baseModels.map((_, i) => i);
         } else {
-            sortedModels = [...rawData].sort((a, b) => a.acc_rank - b.acc_rank);
+            // In accuracy mode, we need to find the rank index of each baseModel
+            // Sort a copy to find the target order
+            const accSorted = [...baseModels].map((m, i) => ({ model: m.model, acc_rank: m.acc_rank, originalIdx: i }))
+                .sort((a, b) => a.acc_rank - b.acc_rank);
+
+            // Map: originalIdx -> targetY
+            const indexMap = new Array(topN);
+            accSorted.forEach((item, targetY) => {
+                indexMap[item.originalIdx] = targetY;
+            });
+            sortedIndices = indexMap;
         }
 
-        const models = sortedModels;
-        const topN = models.length;
+        // 3. Prepare Data Arrays using Base Order
+        // Invert Y-values so Rank 1 (Best) is at the TOP
+        const yValues = sortedIndices.map(idx => topN - 1 - idx);
+        const xBt = baseModels.map(m => m.bt_rank);
+        const xAcc = baseModels.map(m => m.acc_rank);
+        const names = baseModels.map(m => getDisplayName(m.model));
+        const colors = baseModels.map(m => m.is_proprietary ? PROPRIETARY_COLOR : OPENSOURCE_COLOR);
+
         const traces = [];
 
-        // Connection lines (dashed)
-        models.forEach((m, i) => {
-            traces.push({
-                x: [m.bt_rank, m.acc_rank],
-                y: [i, i],
-                mode: 'lines',
-                line: {
-                    color: 'rgba(148, 163, 184, 0.4)',
-                    width: 1.5,
-                    dash: 'dash'
-                },
-                showlegend: false,
-                hoverinfo: 'skip'
-            });
+        // Trace 0: Connection Lines (Consolidated)
+        const lineX = [];
+        const lineY = [];
+        baseModels.forEach((_, i) => {
+            lineX.push(xBt[i], xAcc[i], null);
+            lineY.push(yValues[i], yValues[i], null);
         });
 
-        // Novelty rank points (filled circles)
         traces.push({
-            x: models.map(m => m.bt_rank),
-            y: models.map((_, i) => i),
+            x: lineX,
+            y: lineY,
+            mode: 'lines',
+            line: {
+                color: 'rgba(148, 163, 184, 0.4)',
+                width: 1.5,
+                dash: 'dash'
+            },
+            showlegend: false,
+            hoverinfo: 'skip'
+        });
+
+        // Trace 1: Novelty Rank Points
+        traces.push({
+            x: xBt,
+            y: yValues,
             mode: 'markers',
             name: 'Novelty Rank',
             marker: {
                 size: mode === 'novelty' ? 12 : 10,
                 symbol: 'circle',
-                color: models.map(m => m.is_proprietary ? PROPRIETARY_COLOR : OPENSOURCE_COLOR),
+                color: colors,
                 line: { color: '#fff', width: 1.5 }
             },
-            text: models.map(m => `<b>${getDisplayName(m.model)}</b><br>Novelty: #${m.bt_rank}<br>Win Rate: ${m.win_rate}%`),
+            text: baseModels.map(m => `<b>${getDisplayName(m.model)}</b><br>Novelty: #${m.bt_rank}<br>Win Rate: ${m.win_rate}%`),
             hovertemplate: '%{text}<extra></extra>'
         });
 
-        // Accuracy rank points (hollow diamonds)
+        // Trace 2: Accuracy Rank Points
         traces.push({
-            x: models.map(m => m.acc_rank),
-            y: models.map((_, i) => i),
+            x: xAcc,
+            y: yValues,
             mode: 'markers',
             name: 'Accuracy Rank',
             marker: {
                 size: mode === 'accuracy' ? 12 : 10,
                 symbol: 'diamond-open',
-                color: models.map(m => m.is_proprietary ? PROPRIETARY_COLOR : OPENSOURCE_COLOR),
+                color: colors,
                 line: { width: 2 }
             },
-            text: models.map(m => `<b>${getDisplayName(m.model)}</b><br>Accuracy: #${m.acc_rank}<br>${m.accuracy}%`),
+            text: baseModels.map(m => `<b>${getDisplayName(m.model)}</b><br>Accuracy: #${m.acc_rank}<br>${m.accuracy}%`),
             hovertemplate: '%{text}<extra></extra>'
         });
 
-        // Calculate correlation
-        const btRanks = models.map(m => m.bt_rank);
-        const accRanks = models.map(m => m.acc_rank);
+        // Trace 3: Animated Y-Axis Labels (Model Names)
+        // Place them to the left of the max rank. 
+        // X-axis is inverted (Max -> 1), so we place labels at Max + padding
+        // We want labels on the LEFT side.
+        // If range is [topN + 8, 0.5], then topN + 8 is on the LEFT.
+        // So we place labels at topN + 1.
+        const labelX = new Array(topN).fill(topN + 1);
+
+        traces.push({
+            x: labelX,
+            y: yValues,
+            mode: 'text',
+            text: names,
+            textposition: 'middle left',
+            textfont: { size: 10, color: '#515154', family: '-apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif' },
+            hoverinfo: 'skip',
+            showlegend: false
+        });
+
+        // Calculate correlation (same as before)
+        const btRanks = baseModels.map(m => m.bt_rank);
+        const accRanks = baseModels.map(m => m.acc_rank);
         const n = btRanks.length;
         const meanBt = btRanks.reduce((a, b) => a + b, 0) / n;
         const meanAcc = accRanks.reduce((a, b) => a + b, 0) / n;
@@ -490,19 +638,18 @@ function renderRankingCharts(mode, animate = false) {
             ...darkLayout,
             xaxis: {
                 ...darkLayout.xaxis,
-                title: { text: 'Rank', font: { size: 10, color: '#e2e8f0' } },
-                range: [topN + 0.5, 0.5],
-                dtick: 2,
-                tick0: 2
+                title: { text: 'Rank', font: { size: 10, color: '#1d1d1f' } },
+                range: [topN + 8, 0.5], // Revert padding
+                tickmode: 'array',      // Explicitly set ticks
+                tickvals: Array.from({ length: topN }, (_, i) => i + 1), // Only show ticks 1 to N
+                zeroline: false
             },
             yaxis: {
                 ...darkLayout.yaxis,
-                tickmode: 'array',
-                tickvals: models.map((_, i) => i),
-                ticktext: models.map(m => getDisplayName(m.model)),
-                tickfont: { size: 9, color: '#94a3b8' },
-                automargin: true,
-                range: [-0.5, models.length - 0.5]
+                showticklabels: false, // Hide native ticks
+                automargin: false,     // We handle margin manually
+                range: [-1, topN + 2], // Add vertical padding
+                zeroline: false
             },
             showlegend: false,
             annotations: [
@@ -513,8 +660,8 @@ function renderRankingCharts(mode, animate = false) {
                     yref: 'paper',
                     text: `ρ = ${rho.toFixed(2)}`,
                     showarrow: false,
-                    font: { size: 11, color: '#94a3b8', family: 'Inter' },
-                    bgcolor: 'rgba(30, 41, 59, 0.8)',
+                    font: { size: 11, color: '#515154', family: '-apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif' },
+                    bgcolor: 'rgba(255, 255, 255, 0.9)',
                     borderpad: 4
                 },
                 {
@@ -524,16 +671,21 @@ function renderRankingCharts(mode, animate = false) {
                     yref: 'paper',
                     text: sortLabel,
                     showarrow: false,
-                    font: { size: 10, color: mode === 'novelty' ? PROPRIETARY_COLOR : OPENSOURCE_COLOR, family: 'Inter' },
-                    bgcolor: 'rgba(30, 41, 59, 0.8)',
+                    font: { size: 10, color: mode === 'novelty' ? PROPRIETARY_COLOR : OPENSOURCE_COLOR, family: '-apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif' },
+                    bgcolor: 'rgba(255, 255, 255, 0.9)',
                     borderpad: 4
                 }
             ],
-            margin: { t: 15, r: 15, b: 40, l: 120 }
+            // Adjust margins: Left needs to be smaller since labels are now inside the plot area (but visually left)
+            // Actually, since we extended X-range, we can keep normal margins or reduce left
+            margin: { t: 15, r: 15, b: 40, l: 20 }
         };
 
         if (animate) {
-            Plotly.react(`ranking-${id}`, traces, layout, plotlyConfig);
+            Plotly.animate(`ranking-${id}`, {
+                data: traces,
+                layout: layout
+            }, animationSettings);
         } else {
             Plotly.newPlot(`ranking-${id}`, traces, layout, plotlyConfig);
         }
@@ -541,27 +693,35 @@ function renderRankingCharts(mode, animate = false) {
 }
 
 function initRankingCharts() {
+    // Check if data is loaded
+    if (typeof DDR_DATA === 'undefined' || !DDR_DATA.ranking) {
+        setTimeout(initRankingCharts, 100);
+        return;
+    }
     renderRankingCharts('novelty', false);
 }
 
 // Ranking mode toggle event listener
-document.querySelectorAll('.ranking-dim').forEach(btn => {
-    btn.addEventListener('click', () => {
-        const mode = btn.dataset.mode;
-        if (mode === currentRankingMode) return;
-
-        document.querySelectorAll('.ranking-dim').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-
-        currentRankingMode = mode;
-        renderRankingCharts(mode, true);
+document.addEventListener('DOMContentLoaded', () => {
+    const rankingButtons = document.querySelectorAll('#ranking .dim-btn');
+    rankingButtons.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const mode = btn.dataset.mode;
+            if (mode === currentRankingMode) return;
+
+            // Only update ranking buttons
+            rankingButtons.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+
+            currentRankingMode = mode;
+            renderRankingCharts(mode, true);
+        });
     });
 });
 
 // ============================================================================
 // TURN DISTRIBUTION - 3 Charts (Ridgeline style)
 // ============================================================================
-// Turn distribution display name mapping
 const TURN_DISPLAY_NAMES = {
     'run_api_deepseek_deepseek-chat': 'DeepSeek-V3.2',
     'qwen3-next-80b-a3b-instruct': 'Qwen3-Next-80BA3B',
@@ -598,17 +758,23 @@ function getTurnDisplayName(model) {
 }
 
 function initTurnCharts() {
+    // Check if data is loaded
+    if (typeof DDR_DATA === 'undefined' || !DDR_DATA.turn) {
+        setTimeout(initTurnCharts, 100);
+        return;
+    }
+
     const scenarios = ['mimic', '10k', 'globem'];
 
-    // Family colors
+    // Family colors matching the Python script
     const familyColors = {
-        'claude': '#FF6D00',
-        'gpt': '#00C853',
-        'gemini': '#2196F3',
-        'deepseek': '#E91E63',
-        'glm': '#9C27B0',
-        'kimi': '#FFA500',
-        'minimax': '#20B2AA',
+        'claude': '#D97706',
+        'gpt': '#10A37F',
+        'gemini': '#4285F4',
+        'deepseek': '#1E3A8A',
+        'glm': '#7C3AED',
+        'kimi': '#DC2626',
+        'minimax': '#EC4899',
         'qwen': '#0EA5E9',
         'llama': '#F59E0B'
     };
@@ -618,56 +784,65 @@ function initTurnCharts() {
         for (const [family, color] of Object.entries(familyColors)) {
             if (lower.includes(family)) return color;
         }
-        return '#888';
+        return '#666666';
     }
 
     scenarios.forEach(scenario => {
         const data = DDR_DATA.turn[scenario];
         if (!data) return;
 
-        // Sort by median descending (highest median at top)
+        // Sort by median descending to get top 15
         const sortedData = [...data].sort((a, b) => b.median - a.median);
 
-        // Limit to top 15 models for readability
-        const displayData = sortedData.slice(0, 15);
+        // Limit to top 15 models, then reverse so highest median is at top of chart
+        const displayData = sortedData.slice(0, 15).reverse();
 
         const traces = [];
-        const binLabels = ['0-10', '10-20', '20-30', '30-40', '40-50', '50-60', '60-70', '70-80', '80-90', '90-100'];
         const binCenters = [5, 15, 25, 35, 45, 55, 65, 75, 85, 95];
 
-        // Create ridgeline traces (area charts stacked vertically)
         displayData.forEach((model, idx) => {
             const color = getModelColor(model.model);
             const yOffset = idx;
             const displayName = getTurnDisplayName(model.model);
-
-            // Scale distribution to fit in the row (max height ~0.8)
             const maxDist = Math.max(...model.distribution) || 1;
-            const scaledDist = model.distribution.map(d => d / maxDist * 0.7);
 
-            // Create filled area trace
+            // Original bin centers and values
+            const binCenters = [5, 15, 25, 35, 45, 55, 65, 75, 85, 95];
+            const binValues = model.distribution.map(d => d / maxDist * 0.75);
+
+            // Interpolate more points for smoother curve (similar to KDE)
+            const xSmooth = [];
+            const ySmooth = [];
+
+            // Add start point at baseline
+            xSmooth.push(0);
+            ySmooth.push(yOffset);
+
+            // Interpolate between bin centers for smoothness
+            for (let i = 0; i < binCenters.length; i++) {
+                xSmooth.push(binCenters[i]);
+                ySmooth.push(yOffset + binValues[i]);
+            }
+
+            // Add end point at baseline
+            xSmooth.push(100);
+            ySmooth.push(yOffset);
+
+            // Create the curve trace with spline smoothing
             traces.push({
-                x: binCenters,
-                y: scaledDist.map(d => yOffset + d),
+                x: xSmooth,
+                y: ySmooth,
                 mode: 'lines',
+                line: {
+                    color: color,
+                    width: 2,
+                    shape: 'spline',  // Smooth spline interpolation
+                    smoothing: 1.3    // Smoothing factor
+                },
                 fill: 'toself',
-                fillcolor: color + '40', // 25% opacity
-                line: { color: color, width: 1.5 },
+                fillcolor: color + '60',
                 name: displayName,
-                text: model.distribution.map((d, i) =>
-                    `${displayName}<br>${binLabels[i]} turns: ${d.toFixed(1)}%<br>Median: ${model.median}`
-                ),
-                hovertemplate: '%{text}<extra></extra>',
-                showlegend: false
-            });
-
-            // Add baseline
-            traces.push({
-                x: [0, 100],
-                y: [yOffset, yOffset],
-                mode: 'lines',
-                line: { color: 'rgba(148, 163, 184, 0.2)', width: 0.5 },
-                hoverinfo: 'skip',
+                hovertemplate: `<b>${displayName}</b><br>Median: ${model.median}<extra></extra>`,
                 showlegend: false
             });
         });
@@ -676,17 +851,19 @@ function initTurnCharts() {
             ...darkLayout,
             xaxis: {
                 ...darkLayout.xaxis,
-                title: { text: 'Number of Turns', font: { size: 11, color: '#e2e8f0' } },
+                title: { text: 'Number of Turns', font: { size: 12, color: '#1d1d1f' } },
                 range: [0, 100],
                 dtick: 20
             },
             yaxis: {
                 ...darkLayout.yaxis,
                 tickmode: 'array',
-                tickvals: displayData.map((_, i) => i),
+                tickvals: displayData.map((_, i) => i + 0.35),
                 ticktext: displayData.map(m => getTurnDisplayName(m.model)),
                 automargin: true,
-                range: [-0.5, displayData.length]
+                range: [-0.5, displayData.length],
+                showgrid: false,
+                zeroline: false
             },
             margin: { ...darkLayout.margin, l: 140 },
             showlegend: false
@@ -700,7 +877,12 @@ function initTurnCharts() {
 // PROBING RESULTS - 3 Charts with animated mode switching
 // ============================================================================
 function initProbingCharts() {
-    renderProbingCharts('byTurn');
+    // Check if data is loaded
+    if (typeof DDR_DATA === 'undefined' || !DDR_DATA.probing) {
+        setTimeout(initProbingCharts, 100);
+        return;
+    }
+    renderProbingCharts('byProgress');
 }
 
 function renderProbingCharts(mode) {
@@ -708,31 +890,31 @@ function renderProbingCharts(mode) {
     const scenarioIds = { 'mimic': 'mimic', 'globem': 'globem', '10k': '10k' };
 
     scenarios.forEach(scenario => {
-        const data = DDR_DATA.probing[mode]?.[scenario];
+        const modeKey = mode === 'byTurn' ? 'byTurn' : 'byProgress';
+        const data = DDR_DATA.probing[modeKey]?.[scenario];
         if (!data) return;
 
         const traces = [];
-        const models = Object.keys(data);
+        const allModels = Object.keys(data);
+        // Filter out 7B and 14B models
+        const models = allModels.filter(m => !m.includes('7B') && !m.includes('14B'));
 
         models.forEach(model => {
             const modelData = data[model];
             const xKey = mode === 'byTurn' ? 'turns' : 'progress';
             const xLabel = mode === 'byTurn' ? 'Turn' : 'Progress (%)';
 
-            // Main line
+            // Main line - CONSISTENT STYLE
             traces.push({
                 x: modelData[xKey],
                 y: modelData.logprob,
-                mode: 'lines+markers',
+                mode: 'lines+markers',  // Show both lines and data points
                 name: model,
                 line: {
-                    color: DDR_DATA.probingColors[model] || '#888',
+                    color: (DDR_DATA.modelColors && DDR_DATA.modelColors[model]) || '#888',
                     width: 2
                 },
-                marker: {
-                    size: 4,
-                    color: DDR_DATA.probingColors[model] || '#888'
-                },
+                marker: { size: 6, color: (DDR_DATA.modelColors && DDR_DATA.modelColors[model]) || '#888' },
                 hovertemplate: `<b>${model}</b><br>${xLabel}: %{x}<br>Log Prob: %{y:.2f}<extra></extra>`
             });
 
@@ -745,7 +927,7 @@ function renderProbingCharts(mode) {
                     x: [...modelData[xKey], ...modelData[xKey].slice().reverse()],
                     y: [...upper, ...lower.slice().reverse()],
                     fill: 'toself',
-                    fillcolor: (DDR_DATA.probingColors[model] || '#888') + '25',
+                    fillcolor: ((DDR_DATA.modelColors && DDR_DATA.modelColors[model]) || '#888') + '25',
                     line: { width: 0 },
                     showlegend: false,
                     hoverinfo: 'skip'
@@ -753,50 +935,70 @@ function renderProbingCharts(mode) {
             }
         });
 
+        // Set different x-axis ranges based on mode
+        const xaxisConfig = mode === 'byTurn' ? {
+            title: { text: 'Turn', font: { size: 11, color: '#1d1d1f' } },
+            range: [0.5, 10.5],  // Turns from 1-10
+            dtick: 1
+        } : {
+            title: { text: 'Interaction Progress (%)', font: { size: 11, color: '#1d1d1f' } },
+            range: [0, 100],  // Progress from 0-100%
+            dtick: 10
+        };
+
         const layout = {
             ...darkLayout,
             xaxis: {
                 ...darkLayout.xaxis,
-                title: { text: mode === 'byTurn' ? 'Turn' : 'Interaction Progress (%)', font: { size: 11, color: '#e2e8f0' } }
+                ...xaxisConfig
             },
             yaxis: {
                 ...darkLayout.yaxis,
-                title: { text: 'Avg Log Probability', font: { size: 11, color: '#e2e8f0' } }
+                title: { text: 'Avg Log Probability', font: { size: 11, color: '#1d1d1f' } }
             },
-            showlegend: true
+            showlegend: false  // Use shared legend instead
         };
 
-        Plotly.newPlot(`probing-${scenarioIds[scenario]}`, traces, layout, plotlyConfig);
+        const chartId = `probing-${scenarioIds[scenario]}`;
+
+        // Check if chart exists
+        const chartDiv = document.getElementById(chartId);
+        if (chartDiv && chartDiv.data) {
+            // Use animate for smooth transition with layout update
+            Plotly.animate(chartId, {
+                data: traces,
+                layout: layout
+            }, animationSettings);
+        } else {
+            // Initial plot
+            Plotly.newPlot(chartId, traces, layout, plotlyConfig);
+        }
     });
-}
 
-// Probing dimension toggle
-document.querySelectorAll('.probing-dim').forEach(btn => {
-    btn.addEventListener('click', () => {
-        document.querySelectorAll('.probing-dim').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
+    // Populate shared legend with filtered models from first available scenario
+    const firstScenario = scenarios.find(s => DDR_DATA.probing[mode === 'byTurn' ? 'byTurn' : 'byProgress']?.[s]);
+    if (firstScenario) {
+        const allModels = Object.keys(DDR_DATA.probing[mode === 'byTurn' ? 'byTurn' : 'byProgress'][firstScenario]);
+        const filteredModels = allModels.filter(m => !m.includes('7B') && !m.includes('14B'));
+        populateSharedLegend('probing-legend', filteredModels, DDR_DATA.modelColors);
+    }
 
-        const mode = btn.dataset.mode;
-        currentProbingMode = mode;
+    // Apply hover effects after charts are rendered
+    setTimeout(() => applyHoverEffectsForSection('probing'), 100);
+}
 
-        // Add updating class for visual feedback
-        ['mimic', 'globem', '10k'].forEach(s => {
-            document.getElementById(`probing-${s}`).classList.add('chart-updating');
-        });
 
-        setTimeout(() => {
-            renderProbingCharts(mode);
-            ['mimic', 'globem', '10k'].forEach(s => {
-                document.getElementById(`probing-${s}`).classList.remove('chart-updating');
-            });
-        }, 150);
-    });
-});
 
 // ============================================================================
 // ERROR ANALYSIS - Hierarchical Bar Chart
 // ============================================================================
 function initErrorChart() {
+    // Check if data is loaded
+    if (typeof DDR_DATA === 'undefined') {
+        setTimeout(initErrorChart, 100);
+        return;
+    }
+
     const data = DDR_DATA.error;
     if (!data || data.length === 0) return;
 
@@ -820,7 +1022,7 @@ function initErrorChart() {
         },
         text: data.map(d => `${d.percentage}%`),
         textposition: 'outside',
-        textfont: { size: 11, color: '#e2e8f0' },
+        textfont: { size: 11, color: '#1d1d1f' },
         hovertemplate: '<b>%{x}</b><br>%{y:.1f}%<br>Count: %{customdata}<extra></extra>',
         customdata: data.map(d => d.count),
         showlegend: false
@@ -837,7 +1039,7 @@ function initErrorChart() {
             y: maxPct * 1.15,
             text: `<b>${catName}</b>`,
             showarrow: false,
-            font: { size: 10, color: '#e2e8f0' },
+            font: { size: 10, color: '#1d1d1f' },
             xanchor: 'center',
             yanchor: 'bottom'
         });
@@ -848,11 +1050,11 @@ function initErrorChart() {
         xaxis: {
             ...darkLayout.xaxis,
             tickangle: -30,
-            tickfont: { size: 10, color: '#94a3b8' }
+            tickfont: { size: 10, color: '#515154' }
         },
         yaxis: {
             ...darkLayout.yaxis,
-            title: { text: 'Percentage (%)', font: { size: 11, color: '#e2e8f0' } },
+            title: { text: 'Percentage (%)', font: { size: 11, color: '#1d1d1f' } },
             range: [0, maxPct * 1.25]
         },
         annotations: annotations,
@@ -863,29 +1065,356 @@ function initErrorChart() {
 }
 
 // ============================================================================
-// INITIALIZE ALL CHARTS
+// ENTROPY ANALYSIS - Scatter plots by model (Entropy vs Coverage, Opacity = Accuracy)
+// ============================================================================
+const ENTROPY_MODELS = [
+    'GPT-5.2',
+    'Claude-4.5-Sonnet',
+    'Gemini-3-Flash',
+    'GLM-4.6',
+    'Qwen3-Next-80B-A3B',
+    'DeepSeek-V3.2'
+];
+
+let currentEntropyScenario = '10k';
+
+function initEntropyCharts() {
+    if (typeof ENTROPY_DATA === 'undefined') {
+        // Retry if data not loaded yet
+        setTimeout(initEntropyCharts, 100);
+        return;
+    }
+
+    // Setup toggle buttons
+    document.querySelectorAll('[data-entropy-scenario]').forEach(btn => {
+        btn.addEventListener('click', () => {
+            document.querySelectorAll('[data-entropy-scenario]').forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            currentEntropyScenario = btn.dataset.entropyScenario;
+            renderEntropyCharts(currentEntropyScenario);
+        });
+    });
+
+    // Initial render
+    renderEntropyCharts('10k');
+}
+
+function renderEntropyCharts(scenario) {
+    const entropyData = ENTROPY_DATA;
+    const datasetInfo = entropyData.datasets[scenario];
+
+    if (!datasetInfo) {
+        console.error(`No entropy data for scenario: ${scenario}`);
+        return;
+    }
+
+    const points = datasetInfo.points;
+    const yMax = datasetInfo.y_max || 1;
+    const accMin = datasetInfo.acc_min || 0;
+    const accMax = datasetInfo.acc_max || 100;
+    const hasAccRange = accMax > accMin;
+    const colors = entropyData.modelColors;
+
+    // Group points by model
+    const modelGroups = {};
+    points.forEach(p => {
+        if (!modelGroups[p.model]) {
+            modelGroups[p.model] = [];
+        }
+        modelGroups[p.model].push(p);
+    });
+
+    // Render each model's subplot
+    ENTROPY_MODELS.forEach((model, idx) => {
+        const chartId = `entropy-model-${idx}`;
+        const titleId = `entropy-model-${idx}-title`;
+        const color = colors[model] || '#888888';
+        const pts = modelGroups[model] || [];
+
+        // Update title with sample count
+        const titleEl = document.getElementById(titleId);
+        if (titleEl) {
+            titleEl.textContent = `${model} (n=${pts.length})`;
+        }
+
+        if (pts.length === 0) {
+            // Show empty chart with message
+            const layout = {
+                ...darkLayout,
+                xaxis: { ...darkLayout.xaxis, range: [0.6, 1.05], title: { text: 'Entropy', font: { size: 10, color: '#1d1d1f' } } },
+                yaxis: { ...darkLayout.yaxis, range: [-0.05, yMax], title: { text: 'Coverage', font: { size: 10, color: '#1d1d1f' } } },
+                annotations: [{
+                    text: 'No data',
+                    xref: 'paper', yref: 'paper',
+                    x: 0.5, y: 0.5,
+                    showarrow: false,
+                    font: { size: 14, color: '#888' }
+                }]
+            };
+            Plotly.newPlot(chartId, [], layout, plotlyConfig);
+            return;
+        }
+
+        // Calculate alphas based on accuracy
+        const alphas = pts.map(p => {
+            if (hasAccRange) {
+                return 0.15 + (p.accuracy - accMin) / (accMax - accMin) * 0.85;
+            }
+            return 0.7;
+        });
+
+        const trace = {
+            x: pts.map(p => p.entropy),
+            y: pts.map(p => p.coverage),
+            mode: 'markers',
+            type: 'scatter',
+            marker: {
+                color: color,
+                size: 7,
+                opacity: alphas,
+                line: { color: '#333', width: 0.5 }
+            },
+            name: model,
+            text: pts.map(p => `Entropy: ${p.entropy.toFixed(3)}<br>Coverage: ${(p.coverage * 100).toFixed(1)}%<br>Accuracy: ${p.accuracy.toFixed(1)}%`),
+            hovertemplate: '<b>' + model + '</b><br>%{text}<extra></extra>',
+            showlegend: false
+        };
+
+        const layout = {
+            ...darkLayout,
+            xaxis: {
+                ...darkLayout.xaxis,
+                title: { text: 'Entropy', font: { size: 10, color: '#1d1d1f' } },
+                range: [0.6, 1.05],
+                dtick: 0.1
+            },
+            yaxis: {
+                ...darkLayout.yaxis,
+                title: { text: 'Coverage', font: { size: 10, color: '#1d1d1f' } },
+                range: [-0.05, yMax]
+            },
+            margin: { t: 20, r: 20, b: 50, l: 50 }
+        };
+
+        const chartDiv = document.getElementById(chartId);
+        if (chartDiv) {
+            // Apply CSS fade-out
+            chartDiv.style.transition = 'opacity 0.3s ease';
+            chartDiv.style.opacity = '0.3';
+
+            setTimeout(() => {
+                // Update chart with react (faster than newPlot)
+                Plotly.react(chartId, [trace], layout, plotlyConfig);
+
+                // Fade back in
+                chartDiv.style.opacity = '1';
+
+                // Re-apply hover effects after chart update
+                addHoverHighlight(chartId);
+            }, 150);
+        } else {
+            Plotly.newPlot(chartId, [trace], layout, plotlyConfig);
+            // Apply hover effects for new chart
+            setTimeout(() => addHoverHighlight(chartId), 50);
+        }
+    });
+}
+
+// ============================================================================
+// INITIALIZE ALL CHARTS - Using Lazy Loading for Performance
 // ============================================================================
 document.addEventListener('DOMContentLoaded', () => {
-    initScalingCharts();
-    initRankingCharts();
-    initTurnCharts();
-    initErrorChart();
-    initProbingCharts();
+    // Register all sections for lazy loading
+    const sections = document.querySelectorAll('section.section');
+    sections.forEach(section => {
+        lazyLoadObserver.observe(section);
+    });
+
+    // Immediately initialize the first visible section (scaling) for instant feedback
+    // Other sections will be lazy-loaded as user scrolls
+    if (document.getElementById('scaling')) {
+        initializedCharts.add('scaling');
+        // Use setTimeout to not block the main thread
+        setTimeout(() => initScalingCharts(), 0);
+    }
 });
 
-// Handle window resize
+// Handle window resize with longer debounce for better performance
 let resizeTimeout;
-window.addEventListener('resize', () => {
-    clearTimeout(resizeTimeout);
-    resizeTimeout = setTimeout(() => {
+const resizeHandler = throttle(() => {
+    // Only resize charts that have been initialized
+    if (initializedCharts.has('scaling')) {
+        ['mimic', '10k', 'globem'].forEach(s => {
+            const el = document.getElementById(`scaling-${s}`);
+            if (el && el.data) Plotly.Plots.resize(el);
+        });
+    }
+    if (initializedCharts.has('ranking')) {
         ['mimic', '10k', 'globem'].forEach(s => {
-            Plotly.Plots.resize(`scaling-${s}`);
-            Plotly.Plots.resize(`ranking-${s}`);
-            Plotly.Plots.resize(`turn-${s}`);
-            Plotly.Plots.resize(`probing-${s}`);
+            const el = document.getElementById(`ranking-${s}`);
+            if (el && el.data) Plotly.Plots.resize(el);
         });
-        if (document.getElementById('error-chart')) {
-            Plotly.Plots.resize('error-chart');
+    }
+    if (initializedCharts.has('turn')) {
+        ['mimic', '10k', 'globem'].forEach(s => {
+            const el = document.getElementById(`turn-${s}`);
+            if (el && el.data) Plotly.Plots.resize(el);
+        });
+    }
+    if (initializedCharts.has('probing')) {
+        ['mimic', '10k', 'globem'].forEach(s => {
+            const el = document.getElementById(`probing-${s}`);
+            if (el && el.data) Plotly.Plots.resize(el);
+        });
+    }
+    if (initializedCharts.has('entropy')) {
+        for (let i = 0; i < 6; i++) {
+            const el = document.getElementById(`entropy-model-${i}`);
+            if (el && el.data) Plotly.Plots.resize(el);
         }
-    }, 100);
+    }
+    if (initializedCharts.has('error')) {
+        const el = document.getElementById('error-chart');
+        if (el && el.data) Plotly.Plots.resize(el);
+    }
+}, 250);
+
+window.addEventListener('resize', () => {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(resizeHandler, 250);
 });
+
+// ============================================================================
+// HOVER HIGHLIGHT EFFECTS - Optimized with batched updates
+// ============================================================================
+function addHoverHighlight(chartId) {
+    const chart = document.getElementById(chartId);
+    if (!chart || !chart.on) return;
+
+    let lastHoveredTrace = null;
+    let lastHoveredPoint = null;
+    let isAnimating = false;
+
+    // Throttled hover handler to prevent excessive updates
+    const handleHover = throttle(function (data) {
+        if (!data || !data.points || !data.points[0]) return;
+
+        const point = data.points[0];
+        const traceIndex = point.curveNumber;
+        const pointIndex = point.pointNumber;
+
+        // Skip if same point or currently animating
+        if ((traceIndex === lastHoveredTrace && pointIndex === lastHoveredPoint) || isAnimating) return;
+
+        lastHoveredTrace = traceIndex;
+        lastHoveredPoint = pointIndex;
+        isAnimating = true;
+
+        // Build batch update arrays
+        const opacities = [];
+        const markerSizes = [];
+        const lineWidths = [];
+        const traceIndices = [];
+
+        const numTraces = chart.data?.length || 0;
+
+        for (let i = 0; i < numTraces; i++) {
+            const trace = chart.data[i];
+            if (!trace) continue;
+
+            // Skip fill traces (error bands)
+            if (trace.fill === 'toself') continue;
+
+            traceIndices.push(i);
+
+            if (i === traceIndex) {
+                opacities.push(1);
+                lineWidths.push(4);
+                const numPoints = trace.x?.length || 0;
+                const sizes = Array(numPoints).fill(6);
+                if (pointIndex < numPoints) sizes[pointIndex] = 12;
+                markerSizes.push(sizes);
+            } else {
+                opacities.push(0.4);
+                lineWidths.push(2);
+                const numPoints = trace.x?.length || 0;
+                markerSizes.push(Array(numPoints).fill(6));
+            }
+        }
+
+        // Single batched restyle call
+        requestAnimationFrame(() => {
+            if (traceIndices.length > 0) {
+                Plotly.restyle(chartId, {
+                    'opacity': opacities,
+                    'marker.size': markerSizes,
+                    'line.width': lineWidths
+                }, traceIndices).then(() => {
+                    isAnimating = false;
+                }).catch(() => {
+                    isAnimating = false;
+                });
+            } else {
+                isAnimating = false;
+            }
+        });
+    }, 50); // Throttle to max 20 updates per second
+
+    chart.on('plotly_hover', handleHover);
+
+    chart.on('plotly_unhover', function () {
+        lastHoveredTrace = null;
+        lastHoveredPoint = null;
+
+        const numTraces = chart.data?.length || 0;
+        if (numTraces === 0) return;
+
+        // Build reset arrays
+        const opacities = [];
+        const markerSizes = [];
+        const lineWidths = [];
+        const traceIndices = [];
+
+        for (let i = 0; i < numTraces; i++) {
+            const trace = chart.data[i];
+            if (!trace) continue;
+
+            // Skip fill traces
+            if (trace.fill === 'toself') continue;
+
+            traceIndices.push(i);
+            opacities.push(1);
+            lineWidths.push(2);
+            const numPoints = trace.x?.length || 0;
+            markerSizes.push(Array(numPoints).fill(6));
+        }
+
+        // Single batched reset call
+        if (traceIndices.length > 0) {
+            requestAnimationFrame(() => {
+                Plotly.restyle(chartId, {
+                    'opacity': opacities,
+                    'marker.size': markerSizes,
+                    'line.width': lineWidths
+                }, traceIndices);
+            });
+        }
+    });
+}
+
+// Apply hover effects when charts are initialized (called from init functions)
+function applyHoverEffectsForSection(sectionId) {
+    requestAnimationFrame(() => {
+        switch (sectionId) {
+            case 'scaling':
+                ['mimic', '10k', 'globem'].forEach(s => addHoverHighlight(`scaling-${s}`));
+                break;
+            case 'probing':
+                ['mimic', '10k', 'globem'].forEach(s => addHoverHighlight(`probing-${s}`));
+                break;
+            case 'entropy':
+                for (let i = 0; i < 6; i++) addHoverHighlight(`entropy-model-${i}`);
+                break;
+        }
+    });
+}

index.html

@@ -10,7 +10,38 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
+    <script src="data.js" defer></script>
+    <script src="entropy_data.js" defer></script>
+    <script src="charts.js" defer></script>
     <link rel="stylesheet" href="styles.css">
+    <style>
+        /* Inline critical CSS for chart loading states */
+        .chart-loading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 300px;
+            color: #86868b;
+            font-size: 14px;
+        }
+
+        .chart-loading::after {
+            content: 'Loading chart...';
+            animation: pulse 1.5s ease-in-out infinite;
+        }
+
+        @keyframes pulse {
+
+            0%,
+            100% {
+                opacity: 0.4;
+            }
+
+            50% {
+                opacity: 1;
+            }
+        }
+    </style>
 </head>
 
 <body>
@@ -55,6 +86,7 @@
                 <button class="dim-btn" data-dim="token">📊 Tokens</button>
                 <button class="dim-btn" data-dim="cost">💰 Cost</button>
             </div>
+            <div id="scaling-legend" class="shared-legend"></div>
             <div class="charts-grid three-col">
                 <div class="chart-card">
                     <h3>MIMIC</h3>
@@ -122,7 +154,46 @@
             </div>
         </section>
 
-        <!-- 4. Error Analysis Section -->
+        <!-- 4. Entropy Analysis Section -->
+        <section id="entropy" class="section visible">
+            <div class="section-header">
+                <h2>🔬 Entropy Analysis</h2>
+                <p>Scatter plot showing Access Entropy vs Coverage by model. Opacity represents accuracy. Higher entropy
+                    = more uniform access; Higher coverage = more fields explored.</p>
+            </div>
+            <div class="dimension-toggle">
+                <button class="toggle-btn active" data-entropy-scenario="10k">10-K</button>
+                <button class="toggle-btn" data-entropy-scenario="mimic">MIMIC</button>
+            </div>
+            <div class="charts-grid three-col">
+                <div class="chart-card">
+                    <h3 id="entropy-model-0-title">GPT-5.2</h3>
+                    <div id="entropy-model-0" class="chart-container-tall"></div>
+                </div>
+                <div class="chart-card">
+                    <h3 id="entropy-model-1-title">Claude-4.5-Sonnet</h3>
+                    <div id="entropy-model-1" class="chart-container-tall"></div>
+                </div>
+                <div class="chart-card">
+                    <h3 id="entropy-model-2-title">Gemini-3-Flash</h3>
+                    <div id="entropy-model-2" class="chart-container-tall"></div>
+                </div>
+                <div class="chart-card">
+                    <h3 id="entropy-model-3-title">GLM-4.6</h3>
+                    <div id="entropy-model-3" class="chart-container-tall"></div>
+                </div>
+                <div class="chart-card">
+                    <h3 id="entropy-model-4-title">Qwen3-Next-80B-A3B</h3>
+                    <div id="entropy-model-4" class="chart-container-tall"></div>
+                </div>
+                <div class="chart-card">
+                    <h3 id="entropy-model-5-title">DeepSeek-V3.2</h3>
+                    <div id="entropy-model-5" class="chart-container-tall"></div>
+                </div>
+            </div>
+        </section>
+
+        <!-- 5. Error Analysis Section -->
         <section id="error" class="section visible">
             <div class="section-header">
                 <h2>⚠️ Error Analysis</h2>
@@ -130,33 +201,30 @@
             </div>
             <div class="charts-grid single">
                 <div class="chart-card wide">
-                    <div id="error-chart" class="chart-container"></div>
+                    <div id="error-chart" class="chart-container-double"></div>
                 </div>
             </div>
         </section>
 
-        <!-- 5. Probing Results Section -->
+        <!-- 6. Probing Results Section -->
         <section id="probing" class="section visible">
             <div class="section-header">
                 <h2>🔍 Probing Results</h2>
                 <p>Analyze the average log probability of FINISH messages across conversation turns and progress.</p>
             </div>
-            <div class="dimension-toggle">
-                <button class="dim-btn probing-dim active" data-mode="byTurn">📊 By Turn</button>
-                <button class="dim-btn probing-dim" data-mode="byProgress">📈 By Progress (%)</button>
-            </div>
+            <div id="probing-legend" class="shared-legend"></div>
             <div class="charts-grid three-col">
                 <div class="chart-card">
                     <h3>MIMIC</h3>
-                    <div id="probing-mimic" class="chart-container"></div>
+                    <div id="probing-mimic" class="chart-container-tall"></div>
                 </div>
                 <div class="chart-card">
                     <h3>GLOBEM</h3>
-                    <div id="probing-globem" class="chart-container"></div>
+                    <div id="probing-globem" class="chart-container-tall"></div>
                 </div>
                 <div class="chart-card">
                     <h3>10-K</h3>
-                    <div id="probing-10k" class="chart-container"></div>
+                    <div id="probing-10k" class="chart-container-tall"></div>
                 </div>
             </div>
         </section>
@@ -167,8 +235,7 @@
         <p>DDR-Bench © 2026 | Deep Data Research Agent Benchmark</p>
     </footer>
 
-    <script src="data.js"></script>
-    <script src="charts.js"></script>
+    <!-- Scripts loaded via defer in head for better parallelization -->
 </body>
 
 </html>

styles.css

@@ -1,21 +1,22 @@
-/* Root Variables */
+/* Apple Style Minimalist Theme */
 :root {
-    --primary: #6366f1;
-    --primary-dark: #4f46e5;
-    --primary-light: #818cf8;
-    --secondary: #10b981;
-    --accent: #f59e0b;
-    --bg-dark: #0f172a;
-    --bg-card: #1e293b;
-    --bg-card-hover: #334155;
-    --text-primary: #f1f5f9;
-    --text-secondary: #94a3b8;
-    --text-muted: #64748b;
-    --border: #334155;
-    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
-    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
-    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-    --gradient-hero: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1a1f3c 100%);
+    --primary: #0071e3;
+    /* Apple Blue */
+    --primary-hover: #0077ed;
+    --bg-body: #f5f5f7;
+    /* Light grey background */
+    --bg-card: #ffffff;
+    --text-primary: #1d1d1f;
+    /* Apple Black */
+    --text-secondary: #515154;
+    /* Darker grey */
+    --border: #d2d2d7;
+    --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.08);
+    /* Stronger shadow */
+    --radius-card: 20px;
+    --radius-btn: 980px;
+    /* Capsule */
+    --font-stack: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 }
 
 /* Reset & Base */
@@ -27,90 +28,71 @@
     padding: 0;
 }
 
-html {
-    scroll-behavior: smooth;
-}
-
 body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    background-color: var(--bg-dark);
+    font-family: var(--font-stack);
+    background-color: var(--bg-body);
     color: var(--text-primary);
-    line-height: 1.6;
+    line-height: 1.47059;
+    letter-spacing: -0.022em;
     min-height: 100vh;
+    -webkit-font-smoothing: antialiased;
 }
 
 /* Hero Section */
 .hero {
-    background: var(--gradient-hero);
-    padding: 2rem 2rem 1.5rem;
+    padding: 4rem 2rem 2rem;
     text-align: center;
-    position: relative;
-    overflow: hidden;
-}
-
-.hero::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background:
-        radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
-        radial-gradient(circle at 80% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
-    pointer-events: none;
+    background: var(--bg-body);
 }
 
 .hero-content {
-    max-width: 900px;
+    max-width: 980px;
     margin: 0 auto;
-    position: relative;
-    z-index: 1;
 }
 
 .badge {
     display: inline-block;
-    background: rgba(99, 102, 241, 0.2);
-    color: var(--primary-light);
-    padding: 0.3rem 0.7rem;
-    border-radius: 2rem;
-    font-size: 0.75rem;
-    font-weight: 500;
-    margin-bottom: 0.5rem;
-    border: 1px solid rgba(99, 102, 241, 0.3);
+    color: var(--primary);
+    font-size: 12px;
+    font-weight: 600;
+    margin-bottom: 0.8rem;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
 }
 
 .hero h1 {
-    font-size: 2.5rem;
+    font-size: 48px;
+    line-height: 1.08349;
     font-weight: 700;
-    background: linear-gradient(135deg, #f1f5f9 0%, #818cf8 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    margin-bottom: 0.4rem;
-    letter-spacing: -0.02em;
+    letter-spacing: -0.003em;
+    margin-bottom: 0.5rem;
+    color: var(--text-primary);
 }
 
 .subtitle {
-    font-size: 1rem;
-    color: var(--text-secondary);
-    margin-bottom: 0.5rem;
+    font-size: 24px;
+    line-height: 1.16667;
     font-weight: 400;
+    letter-spacing: 0.009em;
+    color: var(--text-primary);
+    margin-bottom: 1rem;
 }
 
 .description {
-    font-size: 0.85rem;
-    color: var(--text-muted);
+    font-size: 17px;
+    line-height: 1.47059;
+    font-weight: 400;
+    letter-spacing: -0.022em;
+    color: var(--text-secondary);
     max-width: 700px;
-    margin: 0 auto 1rem;
-    line-height: 1.5;
+    margin: 0 auto 2rem;
 }
 
 .stats-row {
     display: flex;
     justify-content: center;
-    gap: 2rem;
-    margin-top: 1rem;
+    gap: 3rem;
+    margin-top: 2rem;
 }
 
 .stat-item {
@@ -119,90 +101,134 @@ body {
 
 .stat-value {
     display: block;
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--primary-light);
+    font-size: 28px;
+    font-weight: 600;
+    color: var(--text-primary);
 }
 
 .stat-label {
-    font-size: 0.7rem;
-    color: var(--text-muted);
+    font-size: 13px;
+    color: var(--text-secondary);
+    font-weight: 500;
 }
 
 /* Main Content */
 .content {
     max-width: 1800px;
+    /* Maximize width for charts */
     margin: 0 auto;
-    padding: 1rem 2rem;
+    padding: 2rem;
 }
 
-/* Sections - all visible */
+/* Sections */
 .section {
-    display: block;
-    margin-bottom: 2rem;
-    padding-bottom: 1rem;
-    border-bottom: 1px solid var(--border);
-}
-
-.section:last-child {
-    border-bottom: none;
-    margin-bottom: 0;
+    margin-bottom: 4rem;
 }
 
 .section-header {
-    margin-bottom: 1rem;
+    margin-bottom: 2rem;
     text-align: center;
 }
 
 .section-header h2 {
-    font-size: 1.25rem;
-    font-weight: 600;
-    color: var(--text-primary);
-    margin-bottom: 0.25rem;
+    font-size: 32px;
+    line-height: 1.125;
+    font-weight: 700;
+    letter-spacing: 0.004em;
+    margin-bottom: 0.5rem;
 }
 
 .section-header p {
-    color: var(--text-muted);
-    font-size: 0.8rem;
+    font-size: 17px;
+    color: var(--text-secondary);
 }
 
-/* Dimension Toggle Buttons */
+/* Toggle Buttons */
 .dimension-toggle {
     display: flex;
     justify-content: center;
-    gap: 0.4rem;
-    margin-bottom: 1rem;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
 }
 
 .dim-btn {
-    padding: 0.4rem 0.9rem;
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 2rem;
-    color: var(--text-secondary);
-    font-size: 0.75rem;
-    font-weight: 500;
+    padding: 8px 16px;
+    background: rgba(0, 0, 0, 0.05);
+    border: none;
+    border-radius: var(--radius-btn);
+    color: var(--text-primary);
+    font-size: 14px;
+    font-weight: 400;
     cursor: pointer;
     transition: all 0.2s ease;
     font-family: inherit;
 }
 
 .dim-btn:hover {
-    background: var(--bg-card-hover);
-    color: var(--text-primary);
+    background: rgba(0, 0, 0, 0.1);
 }
 
 .dim-btn.active {
-    background: var(--gradient-primary);
+    background: var(--text-primary);
+    /* Black active state like Apple */
+    color: white;
+}
+
+.toggle-btn {
+    padding: 10px 20px;
+    background: rgba(0, 0, 0, 0.05);
+    border: none;
+    border-radius: var(--radius-btn);
+    color: var(--text-primary);
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-family: inherit;
+}
+
+.toggle-btn:hover {
+    background: rgba(0, 0, 0, 0.12);
+}
+
+.toggle-btn.active {
+    background: var(--text-primary);
     color: white;
-    border-color: transparent;
-    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* Shared Legend for Scaling and Probing */
+.shared-legend {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    margin-bottom: 1.5rem;
+    padding: 1rem;
+    background: var(--bg-card);
+    border-radius: 12px;
+    box-shadow: var(--shadow-card);
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 13px;
+    color: var(--text-primary);
+}
+
+.legend-color {
+    width: 24px;
+    height: 3px;
+    border-radius: 2px;
 }
 
 /* Charts Grid */
 .charts-grid {
     display: grid;
-    gap: 1.25rem;
+    gap: 16px;
+    /* Tighter gap */
 }
 
 .charts-grid.three-col {
@@ -211,127 +237,98 @@ body {
 
 .charts-grid.single {
     grid-template-columns: 1fr;
-    max-width: 900px;
+    max-width: 1000px;
     margin: 0 auto;
 }
 
-@media (max-width: 1200px) {
-    .charts-grid.three-col {
-        grid-template-columns: repeat(2, 1fr);
-    }
-}
-
-@media (max-width: 768px) {
-    .charts-grid.three-col {
-        grid-template-columns: 1fr;
-    }
-}
-
 /* Chart Card */
 .chart-card {
     background: var(--bg-card);
-    border-radius: 0.5rem;
-    padding: 0.75rem;
-    border: 1px solid var(--border);
-    box-shadow: var(--shadow);
+    border-radius: var(--radius-card);
+    padding: 24px;
+    box-shadow: var(--shadow-card);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.chart-card:hover {
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
 }
 
 .chart-card h3 {
-    font-size: 0.85rem;
+    font-size: 14px;
     font-weight: 600;
-    color: var(--text-primary);
-    margin-bottom: 0.5rem;
+    color: var(--text-secondary);
+    margin-bottom: 1rem;
     text-align: center;
-    padding-bottom: 0.4rem;
-    border-bottom: 1px solid var(--border);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
 }
 
 .chart-card.wide {
-    padding: 1rem;
+    padding: 32px;
 }
 
-/* Chart Containers - Fixed heights */
+/* Chart Containers */
 .chart-container {
-    height: 350px;
+    height: 300px;
+    /* Reduced height */
     width: 100%;
-    min-height: 350px;
+    transition: opacity 0.3s ease;
 }
 
 .chart-container-tall {
-    height: 500px;
+    height: 450px;
+    /* Reduced height */
+    transition: opacity 0.3s ease;
+    width: 100%;
+}
+
+.chart-container-double {
+    height: 600px;
+    /* Double height for error analysis */
     width: 100%;
-    min-height: 500px;
 }
 
 /* Footer */
 .footer {
     text-align: center;
-    padding: 1rem;
-    color: var(--text-muted);
-    font-size: 0.75rem;
+    padding: 3rem 1rem;
+    color: var(--text-secondary);
+    font-size: 12px;
+    background: var(--bg-body);
     border-top: 1px solid var(--border);
-    margin-top: 1rem;
 }
 
 /* Responsive */
-@media (max-width: 768px) {
-    .hero {
-        padding: 1.5rem 1rem;
+@media (max-width: 1024px) {
+    .charts-grid.three-col {
+        grid-template-columns: repeat(2, 1fr);
     }
+}
 
+@media (max-width: 768px) {
     .hero h1 {
-        font-size: 1.75rem;
+        font-size: 36px;
     }
 
     .subtitle {
-        font-size: 0.9rem;
-    }
-
-    .stats-row {
-        gap: 1rem;
-    }
-
-    .stat-value {
-        font-size: 1.25rem;
-    }
-
-    .content {
-        padding: 0.75rem;
+        font-size: 20px;
     }
 
-    .dimension-toggle {
-        flex-wrap: wrap;
-    }
-
-    .dim-btn {
-        padding: 0.35rem 0.7rem;
-        font-size: 0.7rem;
+    .charts-grid.three-col {
+        grid-template-columns: 1fr;
     }
 
     .chart-container {
-        height: 250px;
+        height: 300px;
     }
 
     .chart-container-tall {
-        height: 320px;
+        height: 400px;
     }
 }
 
-/* Plotly overrides for dark theme */
+/* Plotly Overrides */
 .js-plotly-plot .plotly .modebar {
-    background: rgba(30, 41, 59, 0.9) !important;
-}
-
-.js-plotly-plot .plotly .modebar-btn path {
-    fill: var(--text-secondary) !important;
-}
-
-.js-plotly-plot .plotly .modebar-btn:hover path {
-    fill: var(--text-primary) !important;
-}
-
-/* Ensure Plotly charts don't overflow */
-.js-plotly-plot {
-    width: 100% !important;
-    height: 100% !important;
+    display: none !important;
 }