update

charts.js

@@ -110,15 +110,24 @@ function initScalingCharts() {
             });
         });
 
+        // Calculate Y-axis range (similar to Python: round to nearest 5)
+        const allAccuracies = models.flatMap(m => data[m].accuracy);
+        const yMin = Math.max(0, Math.floor(Math.min(...allAccuracies) / 5) * 5);
+        const yMax = (Math.floor(Math.max(...allAccuracies) / 5) + 1) * 5 + 5;
+
         const layout = {
             ...darkLayout,
             xaxis: {
                 ...darkLayout.xaxis,
-                title: { text: 'Interaction Turns', font: { size: 11, color: '#e2e8f0' } }
+                title: { text: 'Number of Interaction Turns', font: { size: 11, color: '#e2e8f0' } },
+                dtick: 5,  // 5 turn intervals
+                range: [0, Math.max(...models.flatMap(m => data[m].turns)) + 2]
             },
             yaxis: {
                 ...darkLayout.yaxis,
-                title: { text: 'Accuracy (%)', font: { size: 11, color: '#e2e8f0' } }
+                title: { text: 'Accuracy (%)', font: { size: 11, color: '#e2e8f0' } },
+                dtick: 5,  // 5% intervals
+                range: [yMin, yMax]
             },
             showlegend: true
         };
@@ -127,11 +136,12 @@ function initScalingCharts() {
     });
 }
 
+
 function updateScalingCharts(dimension) {
     const scenarios = ['mimic', '10k', 'globem'];
     const xLabels = {
-        'turn': 'Interaction Turns',
-        'token': 'Token Usage',
+        'turn': 'Number of Interaction Turns',
+        'token': 'Total Costed Tokens',
         'cost': 'Inference Cost ($)'
     };
 
@@ -163,6 +173,25 @@ function updateScalingCharts(dimension) {
             newY.push(modelData.accuracy);
         });
 
+        // Calculate proper axis settings for each dimension
+        const xAxisSettings = {
+            'turn': {
+                dtick: 5,
+                tickformat: null,
+                range: [0, Math.max(...newX.flat()) + 2]
+            },
+            'token': {
+                dtick: 5000,
+                tickformat: ',.0f',
+                range: [0, Math.max(...newX.flat()) * 1.05]
+            },
+            'cost': {
+                dtick: null,  // auto for log scale
+                tickformat: '$.2f',
+                range: null  // auto for log scale
+            }
+        };
+
         // Animate the transition
         Plotly.animate(`scaling-${scenario}`, {
             data: newX.map((x, i) => ({ x, y: newY[i] })),
@@ -170,21 +199,26 @@ function updateScalingCharts(dimension) {
             layout: {
                 xaxis: {
                     title: { text: xLabels[dimension], font: { size: 11, color: '#e2e8f0' } },
-                    type: dimension === 'cost' ? 'log' : 'linear'
+                    type: dimension === 'cost' ? 'log' : 'linear',
+                    dtick: xAxisSettings[dimension].dtick,
+                    tickformat: xAxisSettings[dimension].tickformat,
+                    range: xAxisSettings[dimension].range,
+                    exponentformat: 'none'
                 }
             }
         }, animationSettings);
 
         // Update hover templates
         const hoverLabels = {
-            'turn': 'Turn',
-            'token': 'Tokens',
-            'cost': 'Cost: $'
+            'turn': 'Turns',
+            'token': 'Total Tokens',
+            'cost': 'Cost'
         };
 
         models.forEach((model, i) => {
+            const hoverFormat = dimension === 'token' ? '%{x:,.0f}' : (dimension === 'cost' ? '$%{x:.4f}' : '%{x}');
             Plotly.restyle(`scaling-${scenario}`, {
-                hovertemplate: `<b>${model}</b><br>${hoverLabels[dimension]}: %{x}<br>Accuracy: %{y:.1f}%<extra></extra>`
+                hovertemplate: `<b>${model}</b><br>${hoverLabels[dimension]}: ${hoverFormat}<br>Accuracy: %{y:.1f}%<extra></extra>`
             }, [i]);
         });
     });
@@ -352,7 +386,7 @@ function initTurnCharts() {
             barmode: 'group',
             xaxis: {
                 ...darkLayout.xaxis,
-                title: { text: 'Median Turns', font: { size: 11, color: '#e2e8f0' } },
+                title: { text: 'Number of Turns', font: { size: 11, color: '#e2e8f0' } },
                 range: [0, Math.max(...sortedData.map(d => d.median)) * 1.15]
             },
             yaxis: {
@@ -428,7 +462,7 @@ function renderProbingCharts(mode) {
             ...darkLayout,
             xaxis: {
                 ...darkLayout.xaxis,
-                title: { text: mode === 'byTurn' ? 'Turn' : 'Progress (%)', font: { size: 11, color: '#e2e8f0' } }
+                title: { text: mode === 'byTurn' ? 'Turn' : 'Interaction Progress (%)', font: { size: 11, color: '#e2e8f0' } }
             },
             yaxis: {
                 ...darkLayout.yaxis,