fix display

charts.js

@@ -62,21 +62,6 @@ const animationSettings = {
 let currentScalingDim = 'turn';
 let currentProbingMode = 'byTurn';
 
-// Tab Navigation
-document.querySelectorAll('.nav-tab').forEach(tab => {
-    tab.addEventListener('click', () => {
-        document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
-        tab.classList.add('active');
-
-        const sectionId = tab.dataset.section;
-        document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
-        document.getElementById(sectionId).classList.add('active');
-
-        // Resize plots on tab change
-        setTimeout(() => window.dispatchEvent(new Event('resize')), 100);
-    });
-});
-
 // ============================================================================
 // SCALING ANALYSIS - 3 Charts with animated dimension switching
 // ============================================================================

index.html

@@ -41,78 +41,66 @@
         </div>
     </header>
 
-    <!-- Navigation -->
-    <nav class="nav-tabs">
-        <button class="nav-tab active" data-section="scaling">📈 Scaling Analysis</button>
-        <button class="nav-tab" data-section="ranking">🏆 Ranking Comparison</button>
-        <button class="nav-tab" data-section="turn">🔄 Turn Distribution</button>
-        <button class="nav-tab" data-section="error">⚠️ Error Analysis</button>
-        <button class="nav-tab" data-section="probing">🔍 Probing Results</button>
-    </nav>
-
-    <!-- Main Content -->
+    <!-- Main Content - All sections visible -->
     <main class="content">
-        <!-- Scaling Analysis Section - 3 charts side by side -->
-        <section id="scaling" class="section active">
+
+        <!-- 1. Scaling Analysis Section -->
+        <section id="scaling" class="section visible">
             <div class="section-header">
-                <h2>Scaling Analysis</h2>
-                <p>Explore how model performance scales with interaction turns, token usage, and inference cost across
-                    all datasets.</p>
+                <h2>📈 Scaling Analysis</h2>
+                <p>Explore how model performance scales with interaction turns, token usage, and inference cost.</p>
             </div>
             <div class="dimension-toggle">
-                <button class="dim-btn active" data-dim="turn">🔄 Interaction Turns</button>
-                <button class="dim-btn" data-dim="token">📊 Token Usage</button>
-                <button class="dim-btn" data-dim="cost">💰 Inference Cost</button>
+                <button class="dim-btn active" data-dim="turn">🔄 Turns</button>
+                <button class="dim-btn" data-dim="token">📊 Tokens</button>
+                <button class="dim-btn" data-dim="cost">💰 Cost</button>
             </div>
             <div class="charts-grid three-col">
                 <div class="chart-card">
                     <h3>MIMIC</h3>
-                    <div id="scaling-mimic" class="chart-container-sm"></div>
+                    <div id="scaling-mimic" class="chart-container"></div>
                 </div>
                 <div class="chart-card">
                     <h3>10-K</h3>
-                    <div id="scaling-10k" class="chart-container-sm"></div>
+                    <div id="scaling-10k" class="chart-container"></div>
                 </div>
                 <div class="chart-card">
                     <h3>GLOBEM</h3>
-                    <div id="scaling-globem" class="chart-container-sm"></div>
+                    <div id="scaling-globem" class="chart-container"></div>
                 </div>
             </div>
         </section>
 
-        <!-- Ranking Comparison Section - 3 charts with toggle -->
-        <section id="ranking" class="section">
+        <!-- 2. Ranking Comparison Section -->
+        <section id="ranking" class="section visible">
             <div class="section-header">
-                <h2>Novelty vs Accuracy Ranking</h2>
-                <p>Compare model rankings based on Bradley-Terry pairwise ranking against traditional accuracy ranking.
-                </p>
+                <h2>🏆 Ranking Comparison</h2>
+                <p>Compare model rankings based on Bradley-Terry pairwise ranking against accuracy ranking.</p>
             </div>
             <div class="dimension-toggle">
                 <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>
-                    <div id="ranking-mimic" class="chart-container-md"></div>
+                    <div id="ranking-mimic" class="chart-container"></div>
                 </div>
                 <div class="chart-card">
                     <h3>10-K</h3>
-                    <div id="ranking-10k" class="chart-container-md"></div>
+                    <div id="ranking-10k" class="chart-container"></div>
                 </div>
                 <div class="chart-card">
                     <h3>GLOBEM</h3>
-                    <div id="ranking-globem" class="chart-container-md"></div>
+                    <div id="ranking-globem" class="chart-container"></div>
                 </div>
             </div>
         </section>
 
-
-        <!-- Turn Distribution Section - 3 charts -->
-        <section id="turn" class="section">
+        <!-- 3. Turn Distribution Section -->
+        <section id="turn" class="section visible">
             <div class="section-header">
-                <h2>Turn Count Distribution</h2>
+                <h2>🔄 Turn Distribution</h2>
                 <p>Analyze the distribution of interaction turns across different models and datasets.</p>
             </div>
             <div class="charts-grid three-col">
@@ -131,23 +119,23 @@
             </div>
         </section>
 
-        <!-- Error Analysis Section -->
-        <section id="error" class="section">
+        <!-- 4. Error Analysis Section -->
+        <section id="error" class="section visible">
             <div class="section-header">
-                <h2>Error Type Analysis</h2>
+                <h2>⚠️ Error Analysis</h2>
                 <p>Breakdown of error types encountered during agent interactions, grouped by main categories.</p>
             </div>
             <div class="charts-grid single">
                 <div class="chart-card wide">
-                    <div id="error-chart" class="chart-container-md"></div>
+                    <div id="error-chart" class="chart-container"></div>
                 </div>
             </div>
         </section>
 
-        <!-- Probing Results Section -->
-        <section id="probing" class="section">
+        <!-- 5. Probing Results Section -->
+        <section id="probing" class="section visible">
             <div class="section-header">
-                <h2>FINISH Token Probing</h2>
+                <h2>🔍 Probing Results</h2>
                 <p>Analyze the average log probability of FINISH messages across conversation turns and progress.</p>
             </div>
             <div class="dimension-toggle">
@@ -157,15 +145,15 @@
             <div class="charts-grid three-col">
                 <div class="chart-card">
                     <h3>MIMIC</h3>
-                    <div id="probing-mimic" class="chart-container-sm"></div>
+                    <div id="probing-mimic" class="chart-container"></div>
                 </div>
                 <div class="chart-card">
                     <h3>GLOBEM</h3>
-                    <div id="probing-globem" class="chart-container-sm"></div>
+                    <div id="probing-globem" class="chart-container"></div>
                 </div>
                 <div class="chart-card">
                     <h3>10-K</h3>
-                    <div id="probing-10k" class="chart-container-sm"></div>
+                    <div id="probing-10k" class="chart-container"></div>
                 </div>
             </div>
         </section>

styles.css

@@ -42,7 +42,7 @@ body {
 /* Hero Section */
 .hero {
     background: var(--gradient-hero);
-    padding: 3rem 2rem 2rem;
+    padding: 2rem 2rem 1.5rem;
     text-align: center;
     position: relative;
     overflow: hidden;
@@ -72,45 +72,45 @@ body {
     display: inline-block;
     background: rgba(99, 102, 241, 0.2);
     color: var(--primary-light);
-    padding: 0.4rem 0.8rem;
+    padding: 0.3rem 0.7rem;
     border-radius: 2rem;
-    font-size: 0.8rem;
+    font-size: 0.75rem;
     font-weight: 500;
-    margin-bottom: 0.75rem;
+    margin-bottom: 0.5rem;
     border: 1px solid rgba(99, 102, 241, 0.3);
 }
 
 .hero h1 {
-    font-size: 3rem;
+    font-size: 2.5rem;
     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.5rem;
+    margin-bottom: 0.4rem;
     letter-spacing: -0.02em;
 }
 
 .subtitle {
-    font-size: 1.2rem;
+    font-size: 1rem;
     color: var(--text-secondary);
-    margin-bottom: 0.75rem;
+    margin-bottom: 0.5rem;
     font-weight: 400;
 }
 
 .description {
-    font-size: 0.9rem;
+    font-size: 0.85rem;
     color: var(--text-muted);
     max-width: 700px;
-    margin: 0 auto 1.5rem;
-    line-height: 1.6;
+    margin: 0 auto 1rem;
+    line-height: 1.5;
 }
 
 .stats-row {
     display: flex;
     justify-content: center;
-    gap: 2.5rem;
-    margin-top: 1.5rem;
+    gap: 2rem;
+    margin-top: 1rem;
 }
 
 .stat-item {
@@ -119,144 +119,102 @@ body {
 
 .stat-value {
     display: block;
-    font-size: 2rem;
+    font-size: 1.5rem;
     font-weight: 700;
     color: var(--primary-light);
 }
 
 .stat-label {
-    font-size: 0.8rem;
+    font-size: 0.7rem;
     color: var(--text-muted);
 }
 
-/* Navigation Tabs */
-.nav-tabs {
-    display: flex;
-    justify-content: center;
-    gap: 0.5rem;
-    padding: 0.75rem 2rem;
-    background: var(--bg-card);
-    border-bottom: 1px solid var(--border);
-    position: sticky;
-    top: 0;
-    z-index: 100;
-    flex-wrap: wrap;
-}
-
-.nav-tab {
-    padding: 0.6rem 1.25rem;
-    background: transparent;
-    border: 1px solid transparent;
-    border-radius: 0.5rem;
-    color: var(--text-secondary);
-    font-size: 0.9rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-family: inherit;
-}
-
-.nav-tab:hover {
-    color: var(--text-primary);
-    background: var(--bg-card-hover);
-}
-
-.nav-tab.active {
-    color: var(--primary-light);
-    background: rgba(99, 102, 241, 0.15);
-    border-color: rgba(99, 102, 241, 0.3);
-}
-
 /* Main Content */
 .content {
-    max-width: 1600px;
+    max-width: 1400px;
     margin: 0 auto;
-    padding: 1.5rem;
+    padding: 1rem 1.5rem;
 }
 
-/* Sections */
+/* Sections - all visible */
 .section {
-    display: none;
-    animation: fadeIn 0.3s ease;
-}
-
-.section.active {
     display: block;
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--border);
 }
 
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+.section:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
 }
 
 .section-header {
-    margin-bottom: 1.5rem;
+    margin-bottom: 1rem;
     text-align: center;
 }
 
 .section-header h2 {
-    font-size: 1.5rem;
+    font-size: 1.25rem;
     font-weight: 600;
     color: var(--text-primary);
-    margin-bottom: 0.4rem;
+    margin-bottom: 0.25rem;
 }
 
 .section-header p {
     color: var(--text-muted);
-    font-size: 0.9rem;
+    font-size: 0.8rem;
 }
 
 /* Dimension Toggle Buttons */
 .dimension-toggle {
     display: flex;
     justify-content: center;
-    gap: 0.5rem;
-    margin-bottom: 1.5rem;
+    gap: 0.4rem;
+    margin-bottom: 1rem;
 }
 
 .dim-btn {
-    padding: 0.6rem 1.2rem;
+    padding: 0.4rem 0.9rem;
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: 2rem;
     color: var(--text-secondary);
-    font-size: 0.85rem;
+    font-size: 0.75rem;
     font-weight: 500;
     cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all 0.2s ease;
     font-family: inherit;
 }
 
 .dim-btn:hover {
     background: var(--bg-card-hover);
     color: var(--text-primary);
-    transform: translateY(-1px);
 }
 
 .dim-btn.active {
     background: var(--gradient-primary);
     color: white;
     border-color: transparent;
-    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
 }
 
 /* Charts Grid */
 .charts-grid {
     display: grid;
-    gap: 1rem;
+    gap: 0.75rem;
 }
 
 .charts-grid.three-col {
     grid-template-columns: repeat(3, 1fr);
 }
 
+.charts-grid.single {
+    grid-template-columns: 1fr;
+    max-width: 900px;
+    margin: 0 auto;
+}
+
 @media (max-width: 1200px) {
     .charts-grid.three-col {
         grid-template-columns: repeat(2, 1fr);
@@ -272,93 +230,72 @@ body {
 /* Chart Card */
 .chart-card {
     background: var(--bg-card);
-    border-radius: 0.75rem;
-    padding: 1rem;
+    border-radius: 0.5rem;
+    padding: 0.75rem;
     border: 1px solid var(--border);
     box-shadow: var(--shadow);
+    overflow: hidden;
 }
 
 .chart-card h3 {
-    font-size: 1rem;
+    font-size: 0.85rem;
     font-weight: 600;
     color: var(--text-primary);
-    margin-bottom: 0.75rem;
+    margin-bottom: 0.5rem;
     text-align: center;
-    padding-bottom: 0.5rem;
+    padding-bottom: 0.4rem;
     border-bottom: 1px solid var(--border);
 }
 
-/* Chart Container */
-.chart-container-sm {
-    height: 350px;
-    min-height: 300px;
+.chart-card.wide {
+    padding: 1rem;
 }
 
-.chart-container-md {
-    height: 450px;
-    min-height: 400px;
+/* Chart Containers - Fixed heights */
+.chart-container {
+    height: 280px;
+    width: 100%;
 }
 
 .chart-container-tall {
-    height: 550px;
-    min-height: 500px;
-}
-
-/* Single chart grid */
-.charts-grid.single {
-    grid-template-columns: 1fr;
-    max-width: 1000px;
-    margin: 0 auto;
-}
-
-.chart-card.wide {
-    padding: 1.5rem;
+    height: 380px;
+    width: 100%;
 }
 
 /* Footer */
 .footer {
     text-align: center;
-    padding: 1.5rem;
+    padding: 1rem;
     color: var(--text-muted);
-    font-size: 0.85rem;
+    font-size: 0.75rem;
     border-top: 1px solid var(--border);
-    margin-top: 2rem;
+    margin-top: 1rem;
 }
 
 /* Responsive */
 @media (max-width: 768px) {
     .hero {
-        padding: 2rem 1rem 1.5rem;
+        padding: 1.5rem 1rem;
     }
 
     .hero h1 {
-        font-size: 2rem;
+        font-size: 1.75rem;
     }
 
     .subtitle {
-        font-size: 1rem;
+        font-size: 0.9rem;
     }
 
     .stats-row {
-        gap: 1.5rem;
+        gap: 1rem;
     }
 
     .stat-value {
-        font-size: 1.5rem;
-    }
-
-    .nav-tabs {
-        padding: 0.5rem 0.75rem;
-        gap: 0.25rem;
-    }
-
-    .nav-tab {
-        padding: 0.5rem 0.75rem;
-        font-size: 0.8rem;
+        font-size: 1.25rem;
     }
 
     .content {
-        padding: 1rem;
+        padding: 0.75rem;
     }
 
     .dimension-toggle {
@@ -366,8 +303,16 @@ body {
     }
 
     .dim-btn {
-        padding: 0.5rem 1rem;
-        font-size: 0.8rem;
+        padding: 0.35rem 0.7rem;
+        font-size: 0.7rem;
+    }
+
+    .chart-container {
+        height: 250px;
+    }
+
+    .chart-container-tall {
+        height: 320px;
     }
 }
 
@@ -384,12 +329,8 @@ body {
     fill: var(--text-primary) !important;
 }
 
-/* Smooth transitions for chart updates */
-.chart-container-sm,
-.chart-container-tall {
-    transition: opacity 0.2s ease;
-}
-
-.chart-updating {
-    opacity: 0.7;
+/* Ensure Plotly charts don't overflow */
+.js-plotly-plot {
+    width: 100% !important;
+    height: 100% !important;
 }