fix display

charts.js

@@ -81,6 +81,68 @@ document.querySelectorAll('.nav-tab').forEach(tab => {
 // SCALING ANALYSIS - 3 Charts with animated dimension switching
 // ============================================================================
 
+
+// ============================================================================
+// SCALING ANALYSIS - Normalized Coordinate System for Smooth Animation
+// ============================================================================
+
+// Helper to normalize values to [0, 1]
+function normalizeData(values, type) {
+    if (values.length === 0) return { normalized: [], min: 0, max: 1 };
+
+    let min, max;
+    let normalized;
+
+    if (type === 'log') {
+        // Filter positive values for log
+        const positiveValues = values.filter(v => v > 0);
+        min = Math.min(...positiveValues);
+        max = Math.max(...positiveValues);
+        const logMin = Math.log10(min);
+        const logMax = Math.log10(max);
+        const range = logMax - logMin || 1;
+
+        normalized = values.map(v => v > 0 ? (Math.log10(v) - logMin) / range : 0);
+    } else {
+        min = 0; // Always start linear scales at 0 for this use case
+        max = Math.max(...values);
+        const range = max - min || 1;
+
+        normalized = values.map(v => (v - min) / range);
+    }
+
+    return { normalized, min, max };
+}
+
+// Helper to generate pretty ticks for normalized scale [0, 1]
+function generateTicks(min, max, type) {
+    const tickVals = [0, 0.2, 0.4, 0.6, 0.8, 1.0];
+    let tickText;
+
+    if (type === 'log') {
+        const logMin = Math.log10(min);
+        const logMax = Math.log10(max);
+        const range = logMax - logMin;
+
+        tickText = tickVals.map(v => {
+            const val = Math.pow(10, logMin + (v * range));
+            if (val >= 1) return val.toFixed(1);
+            return val.toFixed(3); // More precision for small costs
+        });
+        // Format as currency
+        tickText = tickText.map(t => '$' + t);
+    } else {
+        const range = max - min;
+        tickText = tickVals.map(v => {
+            const val = min + (v * range);
+            if (val >= 1000) return (val / 1000).toFixed(0) + 'k';
+            return val.toFixed(0);
+        });
+    }
+
+    return { tickVals, tickText };
+}
+
 // Exact axis ranges from Python scripts
 const SCALING_Y_RANGES = {
     'mimic': [5, 40],    // Python: y_min=5, y_max=40
@@ -95,48 +157,52 @@ function initScalingCharts() {
         const data = DDR_DATA.scaling[scenario];
         if (!data) return;
 
-        const traces = [];
         const models = Object.keys(data);
+        const traces = [];
 
+        // Initial dimension is 'turn'
+        const allTurns = models.flatMap(m => data[m].turns);
+        const { normalized: normTurns, min: minTurn, max: maxTurn } = normalizeData(allTurns, 'linear');
+        const { tickVals, tickText } = generateTicks(minTurn, maxTurn, 'linear');
+
+        // We need to slice the normalized array back to per-model arrays
+        let offset = 0;
         models.forEach(model => {
-            const modelData = data[model];
+            const len = data[model].turns.length;
+            const modelNormX = normTurns.slice(offset, offset + len);
+            offset += len;
 
             traces.push({
-                x: modelData.turns,
-                y: modelData.accuracy,
+                x: modelNormX,
+                y: data[model].accuracy,
                 mode: 'lines+markers',
                 name: model,
-                line: {
-                    color: DDR_DATA.modelColors[model] || '#888',
-                    width: 2
-                },
-                marker: {
-                    size: 6,
-                    color: DDR_DATA.modelColors[model] || '#888'
-                },
-                hovertemplate: `<b>${model}</b><br>Turn: %{x}<br>Accuracy: %{y:.2f}%<extra></extra>`
+                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>`,
+                customdata: data[model].turns // Store real values for hover
             });
         });
 
-        // Use exact Y-axis range from Python
         const yRange = SCALING_Y_RANGES[scenario] || [0, 100];
-        const maxTurn = Math.max(...models.flatMap(m => data[m].turns));
 
         const layout = {
             ...darkLayout,
             xaxis: {
                 ...darkLayout.xaxis,
                 title: { text: 'Number of Interaction Turns', font: { size: 11, color: '#e2e8f0' } },
-                dtick: 10,  // 10 turn intervals (matching Python's auto)
-                range: [0, maxTurn + 5],
-                tick0: 0
+                type: 'linear', // ALWAYS LINEAR
+                range: [-0.05, 1.05], // FIXED RANGE
+                tickmode: 'array',
+                tickvals: tickVals,
+                ticktext: tickText,
+                zeroline: false
             },
             yaxis: {
                 ...darkLayout.yaxis,
                 title: { text: 'Accuracy (%)', font: { size: 11, color: '#e2e8f0' } },
-                dtick: 5,  // 5% intervals
-                range: yRange,
-                tick0: yRange[0]
+                dtick: 5,
+                range: yRange
             },
             showlegend: true
         };
@@ -145,7 +211,6 @@ function initScalingCharts() {
     });
 }
 
-
 function updateScalingCharts(dimension) {
     const scenarios = ['mimic', '10k', 'globem'];
     const xLabels = {
@@ -159,101 +224,68 @@ function updateScalingCharts(dimension) {
         if (!data) return;
 
         const models = Object.keys(data);
-        const yRange = SCALING_Y_RANGES[scenario] || [0, 100];
 
-        // Prepare new data
+        // 1. Collect all raw X values for normalization
+        const allRawX = [];
+        models.forEach(model => {
+            switch (dimension) {
+                case 'turn': allRawX.push(...data[model].turns); break;
+                case 'token': allRawX.push(...data[model].tokens); break;
+                case 'cost': allRawX.push(...data[model].costs); break;
+            }
+        });
+
+        // 2. Normalize data
+        const type = dimension === 'cost' ? 'log' : 'linear';
+        const { normalized: allNormX, min: minX, max: maxX } = normalizeData(allRawX, type);
+        const { tickVals, tickText } = generateTicks(minX, maxX, type);
+
+        // 3. Prepare update data
         const newTraces = [];
-        const allXValues = [];
+        let offset = 0;
 
         const hoverLabels = { 'turn': 'Turns', 'token': 'Tokens', 'cost': 'Cost' };
-        const hoverFormat = dimension === 'token' ? '%{x:,.0f}' : (dimension === 'cost' ? '$%{x:.4f}' : '%{x}');
+        const hoverFormat = dimension === 'token' ? (v) => v.toLocaleString() : (dimension === 'cost' ? (v) => '$' + v.toFixed(4) : (v) => v);
 
-        models.forEach(model => {
-            const modelData = data[model];
-            let xValues;
+        models.forEach((model, i) => {
+            const len = data[model].turns.length; // Assuming all arrays same length
+            const modelNormX = allNormX.slice(offset, offset + len);
+
+            // Get raw values for customdata (hover)
+            let rawValues;
             switch (dimension) {
-                case 'turn': xValues = modelData.turns; break;
-                case 'token': xValues = modelData.tokens; break;
-                case 'cost': xValues = modelData.costs; break;
+                case 'turn': rawValues = data[model].turns; break;
+                case 'token': rawValues = data[model].tokens; break;
+                case 'cost': rawValues = data[model].costs; break;
             }
-            allXValues.push(...xValues);
+            offset += len;
 
             newTraces.push({
-                x: xValues,
-                y: modelData.accuracy,
-                mode: 'lines+markers',
-                name: model,
-                line: { color: DDR_DATA.modelColors[model] || '#888', width: 2 },
-                marker: { size: 6, color: DDR_DATA.modelColors[model] || '#888' },
-                hovertemplate: `<b>${model}</b><br>${hoverLabels[dimension]}: ${hoverFormat}<br>Accuracy: %{y:.2f}%<extra></extra>`
+                x: modelNormX,
+                y: data[model].accuracy,
+                customdata: rawValues,
+                hovertemplate: `<b>${model}</b><br>${hoverLabels[dimension]}: %{customdata}<br>Accuracy: %{y:.2f}%<extra></extra>`
             });
         });
 
-        const maxX = Math.max(...allXValues);
-        const minX = Math.min(...allXValues.filter(v => v > 0));
-
-        // Determine final axis settings
-        let finalXaxis = {
-            'xaxis.title.text': xLabels[dimension]
-        };
-
-        if (dimension === 'turn') {
-            finalXaxis['xaxis.type'] = 'linear';
-            finalXaxis['xaxis.dtick'] = 10;
-            finalXaxis['xaxis.range'] = [0, maxX + 5];
-            finalXaxis['xaxis.tickformat'] = null;
-        } else if (dimension === 'token') {
-            finalXaxis['xaxis.type'] = 'linear';
-            finalXaxis['xaxis.dtick'] = 10000;
-            finalXaxis['xaxis.range'] = [0, maxX * 1.05];
-            finalXaxis['xaxis.tickformat'] = ',.0f';
-        } else { // cost
-            finalXaxis['xaxis.type'] = 'log';
-            finalXaxis['xaxis.dtick'] = null;
-            finalXaxis['xaxis.range'] = [Math.log10(minX * 0.5), Math.log10(maxX * 1.5)];
-            finalXaxis['xaxis.tickformat'] = '$.3f';
-            finalXaxis['xaxis.exponentformat'] = 'none';
-        }
-
-        // STEP 1: Unset dtick/tickformat to prevent freezing during animation
-        // When switching range 100 -> 30000, if dtick stays 10, it tries to draw 3000 ticks!
-        Plotly.relayout(`scaling-${scenario}`, {
-            'xaxis.dtick': null,
-            'xaxis.tickformat': null
-        }).then(() => {
-            // STEP 2: Animate data and range together
-            // This creates the smooth "morphing" effect as axis scales with data
-            Plotly.animate(`scaling-${scenario}`, {
-                data: newTraces,
-                layout: {
-                    xaxis: {
-                        ...darkLayout.xaxis,
-                        title: { text: xLabels[dimension], font: { size: 11, color: '#e2e8f0' } },
-                        type: finalXaxis['xaxis.type'],
-                        range: finalXaxis['xaxis.range'],
-                        dtick: null, // Keep auto-ticks during animation
-                        tickformat: null
-                    },
-                    yaxis: {
-                        ...darkLayout.yaxis,
-                        title: { text: 'Accuracy (%)', font: { size: 11, color: '#e2e8f0' } },
-                        dtick: 5,
-                        range: yRange
-                    }
-                }
-            }, {
-                transition: {
-                    duration: 500,
-                    easing: 'cubic-in-out'
-                },
-                frame: {
-                    duration: 500,
-                    redraw: true
-                }
-            }).then(() => {
-                // STEP 3: Apply precise ticks after animation finishes
-                Plotly.relayout(`scaling-${scenario}`, finalXaxis);
-            });
+        // 4. Animate!
+        // Since axis range is fixed [-0.05, 1.05], we only animate points and update tick labels
+        Plotly.animate(`scaling-${scenario}`, {
+            data: newTraces,
+            layout: {
+                'xaxis.title.text': xLabels[dimension],
+                'xaxis.tickvals': tickVals,
+                'xaxis.ticktext': tickText
+            }
+        }, {
+            transition: {
+                duration: 800,
+                easing: 'cubic-in-out'
+            },
+            frame: {
+                duration: 800,
+                redraw: true
+            }
         });
     });
 }