fix(frontend): average emotion not being the main card item

frontend/src/components/EmotionalStats.tsx

@@ -1,14 +1,3 @@
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  Tooltip,
-  CartesianGrid,
-  ResponsiveContainer,
-  Legend
-} from "recharts";
-
 import type { ContentAnalysisResponse } from "../types/ApiTypes"
 import StatsStyling from "../styles/stats_styling";
 
@@ -24,16 +13,6 @@ const EmotionalStats = ({contentData}: EmotionalStatsProps) => {
     ? Object.keys(rows[0]).filter((key) => key.startsWith("emotion_"))
     : [];
 
-  const colors = ["#2563eb", "#f59e0b", "#10b981", "#ef4444", "#8b5cf6", "#14b8a6"];
-
-  const chartData = rows.map((row) => {
-    const topic = String(row.topic);
-    return {
-      ...row,
-      topicLabel: topic.length > 20 ? `${topic.slice(0, 20)}...` : topic
-    };
-  });
-
   const strongestPerTopic = rows.map((row) => {
     let maxKey = "";
     let maxValue = Number.NEGATIVE_INFINITY;
@@ -68,34 +47,14 @@ const EmotionalStats = ({contentData}: EmotionalStatsProps) => {
       <div style={{ ...styles.container, ...styles.card, marginTop: 16 }}>
         <h2 style={styles.sectionTitle}>Average Emotion by Topic</h2>
         <p style={styles.sectionSubtitle}>Mean emotion scores for each detected topic</p>
-
-        {/* <div style={{ ...styles.chartWrapper, height: 420 }}>
-          <ResponsiveContainer width="100%" height="100%">
-            <BarChart data={chartData} margin={{ top: 10, right: 20, left: 0, bottom: 70 }}>
-              <CartesianGrid strokeDasharray="3 3" />
-              <XAxis dataKey="topicLabel" angle={-22} textAnchor="end" interval={0} height={80} />
-              <YAxis domain={[0, 1]} />
-              <Tooltip />
-              <Legend />
-              {emotionKeys.map((key, index) => (
-                <Bar
-                  key={key}
-                  dataKey={key}
-                  name={key.replace("emotion_", "")}
-                  fill={colors[index % colors.length]}
-                />
-              ))}
-            </BarChart>
-          </ResponsiveContainer>
-        </div> */}
       </div>
 
       <div style={{ ...styles.container, ...styles.grid }}>
         {strongestPerTopic.map((topic) => (
           <div key={topic.topic} style={{ ...styles.card, gridColumn: "span 4" }}>
             <h3 style={{ ...styles.sectionTitle, marginBottom: 6 }}>{topic.topic}</h3>
-            <p style={styles.sectionSubtitle}>Top emotion: {topic.emotion}</p>
-            <div style={{ fontSize: 20, fontWeight: 700 }}>{topic.value.toFixed(3)}</div>
+            <div style={{ fontSize: 20, fontWeight: 700 }}>Top emotion: {topic.emotion}</div>
+            <p style={styles.sectionSubtitle}>Model Confidence: {topic.value.toFixed(3)}</p>
             <div style={{ fontSize: 13, color: "#6b7280", marginTop: 6 }}>
               Based on {topic.count} events
             </div>