Phase 5.6: Restore Chart Feature Parity

api/app/routes/pages.py

@@ -213,3 +213,72 @@ async def monitor_health_fragment(request: Request) -> HTMLResponse:
             "partials/monitor_health.html",
             {"request": request, "health": None, "error": str(e)}
         )
+
+import pandas as pd
+from pathlib import Path
+import json
+
+@router.get("/batch/charts/{job_id}", response_class=HTMLResponse)
+async def batch_charts_fragment(request: Request, job_id: str) -> HTMLResponse:
+    """
+    Phase 5.6: HTMX partial for rendering charts.
+    Parses the generated CSV and passes JSON directly to the template for Chart.js.
+    """
+    try:
+        file_path = Path(f"data/results/{job_id}.csv")
+        if not file_path.exists():
+            return templates.TemplateResponse("partials/batch_charts.html", {"request": request, "error": "CSV not found"})
+
+        df = pd.read_csv(file_path)
+
+        lang_pie = []
+        if "language" in df.columns:
+            counts = df["language"].value_counts().to_dict()
+            lang_pie = [{"name": str(k), "value": int(v)} for k, v in counts.items()]
+
+        aspect_heat = []
+        if "aspect" in df.columns and "sentiment" in df.columns:
+            # Group by aspect and sentiment
+            grouped = df.groupby(["aspect", "sentiment"]).size().unstack(fill_value=0)
+            for aspect, row in grouped.iterrows():
+                if pd.isna(aspect) or not aspect:
+                    continue
+                aspect_heat.append({
+                    "aspect": str(aspect),
+                    "positive": int(row.get("positive", 0)),
+                    "negative": int(row.get("negative", 0)),
+                    "neutral": int(row.get("neutral", 0)),
+                    "conflict": int(row.get("conflict", 0))
+                })
+
+        sent_line = []
+        if "sentiment" in df.columns:
+            df_sent = df[df["sentiment"].notna()]
+            n = len(df_sent)
+            # Create 7 chunks for the line chart
+            chunk_size = max(1, n // 7) if n > 0 else 1
+            for i in range(7):
+                chunk = df_sent.iloc[i*chunk_size : (i+1)*chunk_size]
+                if chunk.empty:
+                    break
+                counts = chunk["sentiment"].value_counts().to_dict()
+                sent_line.append({
+                    "name": f"Batch {i+1}",
+                    "positive": int(counts.get("positive", 0)),
+                    "negative": int(counts.get("negative", 0)),
+                    "neutral": int(counts.get("neutral", 0)),
+                    "conflict": int(counts.get("conflict", 0))
+                })
+
+        return templates.TemplateResponse(
+            "partials/batch_charts.html",
+            {
+                "request": request,
+                "language_pie": json.dumps(lang_pie),
+                "aspect_heatmap": json.dumps(aspect_heat),
+                "sentiment_chart": json.dumps(sent_line),
+                "error": None
+            }
+        )
+    except Exception as e:
+        return templates.TemplateResponse("partials/batch_charts.html", {"request": request, "error": str(e)})

api/app/templates/partials/batch_charts.html

@@ -0,0 +1,114 @@
+{% if error %}
+<div class="card bg-error/10 border border-error/20 p-md rounded-lg text-center">
+  <p class="text-error font-medium">Failed to load charts: {{ error }}</p>
+</div>
+{% else %}
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-xl animate-fade-in" id="batch-charts-container">
+  
+  {# Aspect Heatmap (Stacked Bar) #}
+  <div class="xl:col-span-2 bg-[#222a3d] rounded-xl shadow-sm border border-white/[0.08] p-6 h-96">
+    <h3 class="text-sm font-semibold text-[#dae2fd] mb-4">Top Aspects by Sentiment</h3>
+    <div class="relative w-full h-[300px]">
+      <canvas id="aspectChart"></canvas>
+    </div>
+  </div>
+
+  {# Language Pie #}
+  <div class="bg-[#222a3d] rounded-xl shadow-sm border border-white/[0.08] p-6 h-96">
+    <h3 class="text-sm font-semibold text-[#dae2fd] mb-4">Language Distribution</h3>
+    <div class="relative w-full h-[300px]">
+      <canvas id="languageChart"></canvas>
+    </div>
+  </div>
+
+  {# Sentiment Chart (Line) #}
+  <div class="lg:col-span-2 xl:col-span-3 bg-[#222a3d] rounded-xl shadow-sm border border-white/[0.08] p-6 h-96">
+    <h3 class="text-sm font-semibold text-[#dae2fd] mb-4">Sentiment Over Time (Row Chunks)</h3>
+    <div class="relative w-full h-[300px]">
+      <canvas id="sentimentChart"></canvas>
+    </div>
+  </div>
+
+</div>
+
+<script>
+  (function() {
+    // Shared styling for dark mode
+    Chart.defaults.color = '#c7c4d7';
+    Chart.defaults.borderColor = 'rgba(255, 255, 255, 0.08)';
+    
+    // Data passed from backend
+    const rawAspect = {{ aspect_heatmap | safe }};
+    const rawLang = {{ language_pie | safe }};
+    const rawSent = {{ sentiment_chart | safe }};
+
+    // 1. Aspect Stacked Bar Chart (Horizontal)
+    const aspectCtx = document.getElementById('aspectChart');
+    if (aspectCtx && rawAspect.length > 0) {
+      new Chart(aspectCtx, {
+        type: 'bar',
+        data: {
+          labels: rawAspect.map(d => d.aspect),
+          datasets: [
+            { label: 'Positive', data: rawAspect.map(d => d.positive), backgroundColor: '#10B981' },
+            { label: 'Negative', data: rawAspect.map(d => d.negative), backgroundColor: '#EF4444' },
+            { label: 'Neutral',  data: rawAspect.map(d => d.neutral), backgroundColor: '#6B7280' },
+            { label: 'Conflict', data: rawAspect.map(d => d.conflict), backgroundColor: '#F59E0B' }
+          ]
+        },
+        options: {
+          indexAxis: 'y',
+          responsive: true,
+          maintainAspectRatio: false,
+          scales: { x: { stacked: true }, y: { stacked: true } }
+        }
+      });
+    }
+
+    // 2. Language Pie Chart
+    const langCtx = document.getElementById('languageChart');
+    if (langCtx && rawLang.length > 0) {
+      new Chart(langCtx, {
+        type: 'pie',
+        data: {
+          labels: rawLang.map(d => d.name),
+          datasets: [{
+            data: rawLang.map(d => d.value),
+            backgroundColor: ['#3B82F6', '#F97316', '#10B981', '#8B5CF6'],
+            borderWidth: 0
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: { position: 'bottom' }
+          }
+        }
+      });
+    }
+
+    // 3. Sentiment Line Chart
+    const sentCtx = document.getElementById('sentimentChart');
+    if (sentCtx && rawSent.length > 0) {
+      new Chart(sentCtx, {
+        type: 'line',
+        data: {
+          labels: rawSent.map(d => d.name),
+          datasets: [
+            { label: 'Positive', data: rawSent.map(d => d.positive), borderColor: '#10B981', backgroundColor: '#10B981', tension: 0.3 },
+            { label: 'Negative', data: rawSent.map(d => d.negative), borderColor: '#EF4444', backgroundColor: '#EF4444', tension: 0.3 },
+            { label: 'Neutral',  data: rawSent.map(d => d.neutral), borderColor: '#6B7280', backgroundColor: '#6B7280', tension: 0.3 },
+            { label: 'Conflict', data: rawSent.map(d => d.conflict), borderColor: '#F59E0B', backgroundColor: '#F59E0B', tension: 0.3 }
+          ]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false
+        }
+      });
+    }
+  })();
+</script>
+{% endif %}

api/app/templates/partials/batch_progress.html

@@ -39,6 +39,13 @@
 
     {% if job.status in ['queued', 'processing'] %}
     <div hx-get="/batch/progress/{{ job.job_id }}" hx-trigger="every 2s" hx-swap="outerHTML" hx-target="#batch-progress-container"></div>
+    {% elif job.status == 'completed' %}
+    <div class="mt-8" hx-get="/batch/charts/{{ job.job_id }}" hx-trigger="load" hx-swap="innerHTML">
+        <div class="flex items-center justify-center gap-2 text-[#c7c4d7]/70 font-mono text-sm py-8 animate-pulse">
+            <span class="material-symbols-outlined animate-spin" style="font-size:18px;">analytics</span>
+            Generating charts...
+        </div>
+    </div>
     {% endif %}
     {% endif %}
 </div>

tests/web/test_pages.py

@@ -266,11 +266,44 @@ class TestBatchFragments:
 
     def test_download_endpoint_exists(self):
         with _html_client() as client:
-            # We don't have a guaranteed completed job to download, but we can verify 
-            # 404 is returned instead of 405 Method Not Allowed, meaning it exists.
             response = client.get("/results/download/fake-job-id")
             assert response.status_code == 404
 
+    def test_batch_charts_endpoint_handles_missing_file(self):
+        with _html_client() as client:
+            response = client.get("/batch/charts/fake-job-id")
+            assert response.status_code == 200
+            assert "text/html" in response.headers["content-type"]
+            assert "CSV not found" in response.text
+
+    def test_batch_charts_endpoint_valid_file(self, tmp_path):
+        import pandas as pd
+        from pathlib import Path
+        
+        # Create a mock CSV for a fake job
+        job_id = "test-job-charts"
+        test_file = Path(f"data/results/{job_id}.csv")
+        test_file.parent.mkdir(parents=True, exist_ok=True)
+        
+        df = pd.DataFrame({
+            "text": ["hello", "world"],
+            "language": ["en", "hi"],
+            "aspect": ["food", "service"],
+            "sentiment": ["positive", "negative"]
+        })
+        df.to_csv(test_file, index=False)
+        
+        try:
+            with _html_client() as client:
+                response = client.get(f"/batch/charts/{job_id}")
+                assert response.status_code == 200
+                assert "text/html" in response.headers["content-type"]
+                assert "chart.js" in response.text.lower()
+                assert "languageChart" in response.text
+        finally:
+            if test_file.exists():
+                test_file.unlink()
+
 class TestMonitorFragments:
     """Verify Phase 5 System Monitor HTMX endpoints."""