fix display

charts.js

@@ -377,9 +377,9 @@ document.querySelectorAll('.dim-btn:not(.probing-dim)').forEach(btn => {
 });
 
 // ============================================================================
-// RANKING COMPARISON - 3 Charts with animated mode switching
+// RANKING COMPARISON - 3 Charts with mode switching (novelty vs accuracy)
 // ============================================================================
-let currentRankingMode = 'comparison';
+let currentRankingMode = 'novelty';
 
 function renderRankingCharts(mode) {
     const scenarios = [
@@ -389,120 +389,116 @@ function renderRankingCharts(mode) {
     ];
 
     scenarios.forEach(({ key, id }) => {
-        const data = DDR_DATA.ranking[key];
-        if (!data) return;
+        const rawData = DDR_DATA.ranking[key];
+        if (!rawData) return;
 
-        const models = data.slice(0, 12); // Top 12 models for better fit
-        const traces = [];
+        // Sort models by the primary ranking
+        let sortedModels;
+        if (mode === 'novelty') {
+            sortedModels = [...rawData].sort((a, b) => a.bt_rank - b.bt_rank);
+        } else {
+            sortedModels = [...rawData].sort((a, b) => a.acc_rank - b.acc_rank);
+        }
 
-        // Get x-axis values based on mode
-        const getXValue = (m) => {
-            switch (mode) {
-                case 'novelty': return m.bt_rank;
-                case 'accuracy': return m.acc_rank;
-                default: return m.bt_rank; // For comparison, use bt_rank as base
-            }
-        };
+        // Take top 12 for display
+        const models = sortedModels.slice(0, 12);
+        const traces = [];
 
-        if (mode === 'comparison') {
-            // Connection lines
-            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.3)',
-                        width: 1.5,
-                        dash: 'dot'
-                    },
-                    showlegend: false,
-                    hoverinfo: 'skip'
-                });
-            });
+        // Define colors
+        const primaryColor = mode === 'novelty' ? '#8B5CF6' : '#22C55E';
+        const secondaryColor = mode === 'novelty' ? '#22C55E' : '#8B5CF6';
+        const primaryLabel = mode === 'novelty' ? 'Novelty Rank' : 'Accuracy Rank';
+        const secondaryLabel = mode === 'novelty' ? 'Accuracy Rank' : 'Novelty Rank';
 
-            // Novelty rank points
-            traces.push({
-                x: models.map(m => m.bt_rank),
-                y: models.map((_, i) => i),
-                mode: 'markers',
-                name: 'Novelty Rank',
-                marker: {
-                    size: 10,
-                    symbol: 'circle',
-                    color: '#8B5CF6',
-                    line: { color: '#fff', width: 1 }
-                },
-                text: models.map(m => `${m.model}<br>Novelty: #${m.bt_rank}<br>Win Rate: ${m.win_rate}%`),
-                hovertemplate: '%{text}<extra></extra>'
-            });
+        // Connection lines (dashed) from primary to secondary
+        models.forEach((m, i) => {
+            const primaryX = mode === 'novelty' ? m.bt_rank : m.acc_rank;
+            const secondaryX = mode === 'novelty' ? m.acc_rank : m.bt_rank;
 
-            // Accuracy rank points
             traces.push({
-                x: models.map(m => m.acc_rank),
-                y: models.map((_, i) => i),
-                mode: 'markers',
-                name: 'Accuracy Rank',
-                marker: {
-                    size: 10,
-                    symbol: 'diamond',
-                    color: '#22C55E',
-                    line: { color: '#fff', width: 1 }
+                x: [primaryX, secondaryX],
+                y: [i, i],
+                mode: 'lines',
+                line: {
+                    color: 'rgba(148, 163, 184, 0.4)',
+                    width: 1.5,
+                    dash: 'dot'
                 },
-                text: models.map(m => `${m.model}<br>Accuracy: #${m.acc_rank}<br>${m.accuracy}%`),
-                hovertemplate: '%{text}<extra></extra>'
+                showlegend: false,
+                hoverinfo: 'skip'
             });
-        } else {
-            // Single mode - just points
-            const xVals = models.map(m => mode === 'novelty' ? m.bt_rank : m.acc_rank);
-            const color = mode === 'novelty' ? '#8B5CF6' : '#22C55E';
-            const label = mode === 'novelty' ? 'Novelty' : 'Accuracy';
+        });
 
-            traces.push({
-                x: xVals,
-                y: models.map((_, i) => i),
-                mode: 'markers',
-                name: label,
-                marker: {
-                    size: 12,
-                    symbol: 'circle',
-                    color: color,
-                    line: { color: '#fff', width: 1 }
-                },
-                text: models.map(m => {
-                    if (mode === 'novelty') {
-                        return `${m.model}<br>Novelty: #${m.bt_rank}<br>Win Rate: ${m.win_rate}%`;
-                    } else {
-                        return `${m.model}<br>Accuracy: #${m.acc_rank}<br>${m.accuracy}%`;
-                    }
-                }),
-                hovertemplate: '%{text}<extra></extra>'
-            });
-        }
+        // Primary rank points (filled circles)
+        traces.push({
+            x: models.map(m => mode === 'novelty' ? m.bt_rank : m.acc_rank),
+            y: models.map((_, i) => i),
+            mode: 'markers',
+            name: primaryLabel,
+            marker: {
+                size: 11,
+                symbol: 'circle',
+                color: primaryColor,
+                line: { color: '#fff', width: 1.5 }
+            },
+            text: models.map(m => {
+                if (mode === 'novelty') {
+                    return `<b>${m.model}</b><br>Novelty: #${m.bt_rank}<br>Win Rate: ${m.win_rate}%`;
+                } else {
+                    return `<b>${m.model}</b><br>Accuracy: #${m.acc_rank}<br>${m.accuracy}%`;
+                }
+            }),
+            hovertemplate: '%{text}<extra></extra>'
+        });
 
-        const maxRank = Math.max(...models.map(m => Math.max(m.bt_rank, m.acc_rank)));
+        // Secondary rank points (diamond outline)
+        traces.push({
+            x: models.map(m => mode === 'novelty' ? m.acc_rank : m.bt_rank),
+            y: models.map((_, i) => i),
+            mode: 'markers',
+            name: secondaryLabel,
+            marker: {
+                size: 9,
+                symbol: 'diamond-open',
+                color: secondaryColor,
+                line: { width: 2 }
+            },
+            text: models.map(m => {
+                if (mode === 'novelty') {
+                    return `<b>${m.model}</b><br>Accuracy: #${m.acc_rank}<br>${m.accuracy}%`;
+                } else {
+                    return `<b>${m.model}</b><br>Novelty: #${m.bt_rank}<br>Win Rate: ${m.win_rate}%`;
+                }
+            }),
+            hovertemplate: '%{text}<extra></extra>'
+        });
 
         const layout = {
             ...darkLayout,
             xaxis: {
                 ...darkLayout.xaxis,
                 title: { text: 'Rank', font: { size: 11, color: '#e2e8f0' } },
-                range: [maxRank + 1, 0],
-                dtick: 2
+                range: [23, 0], // Fixed range for all charts
+                dtick: 5,
+                tick0: 0
             },
             yaxis: {
                 ...darkLayout.yaxis,
                 tickmode: 'array',
                 tickvals: models.map((_, i) => i),
-                ticktext: models.map(m => m.model.length > 18 ? m.model.substring(0, 16) + '...' : m.model),
-                automargin: true
+                ticktext: models.map(m => m.model.length > 16 ? m.model.substring(0, 14) + '...' : m.model),
+                automargin: true,
+                range: [-0.5, models.length - 0.5]
             },
             showlegend: true,
             legend: {
                 ...darkLayout.legend,
-                y: -0.15
+                y: -0.18,
+                orientation: 'h',
+                x: 0.5,
+                xanchor: 'center'
             },
-            margin: { ...darkLayout.margin, l: 130, b: 70 }
+            margin: { t: 20, r: 15, b: 65, l: 120 }
         };
 
         Plotly.react(`ranking-${id}`, traces, layout, plotlyConfig);
@@ -510,7 +506,7 @@ function renderRankingCharts(mode) {
 }
 
 function initRankingCharts() {
-    renderRankingCharts('comparison');
+    renderRankingCharts('novelty');
 }
 
 // Ranking mode toggle event listener

index.html

@@ -88,10 +88,10 @@
                 </p>
             </div>
             <div class="dimension-toggle">
-                <button class="dim-btn ranking-dim active" data-mode="comparison">🔀 Comparison View</button>
-                <button class="dim-btn ranking-dim" data-mode="novelty">🎯 Novelty Rank</button>
+                <button class="dim-btn ranking-dim active" data-mode="novelty">🎯 Novelty Rank</button>
                 <button class="dim-btn ranking-dim" data-mode="accuracy">📊 Accuracy Rank</button>
             </div>
+
             <div class="charts-grid three-col">
                 <div class="chart-card">
                     <h3>MIMIC</h3>