feat!(frontend): add cultural, interactional and linguistic stat pages

frontend/src/pages/Stats.tsx

@@ -5,12 +5,20 @@ import StatsStyling from "../styles/stats_styling";
 import SummaryStats from "../components/SummaryStats";
 import EmotionalStats from "../components/EmotionalStats";
 import UserStats from "../components/UserStats";
+import LinguisticStats from "../components/LinguisticStats";
+import InteractionalStats from "../components/InteractionalStats";
+import CulturalStats from "../components/CulturalStats";
 
 import { 
   type SummaryResponse, 
   type UserAnalysisResponse, 
   type TimeAnalysisResponse,
-  type ContentAnalysisResponse
+  type ContentAnalysisResponse,
+  type UserEndpointResponse,
+  type LinguisticAnalysisResponse,
+  type EmotionalAnalysisResponse,
+  type InteractionAnalysisResponse,
+  type CulturalAnalysisResponse
 } from '../types/ApiTypes'
 
 const API_BASE_URL = import.meta.env.VITE_BACKEND_URL
@@ -20,11 +28,14 @@ const StatPage = () => {
   const { datasetId: routeDatasetId } = useParams<{ datasetId: string }>();
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
-  const [activeView, setActiveView] = useState<"summary" | "emotional" | "user">("summary");
+  const [activeView, setActiveView] = useState<"summary" | "emotional" | "user" | "linguistic" | "interactional" | "cultural">("summary");
 
   const [userData, setUserData] = useState<UserAnalysisResponse | null>(null);
   const [timeData, setTimeData] = useState<TimeAnalysisResponse | null>(null);
   const [contentData, setContentData] = useState<ContentAnalysisResponse | null>(null);
+  const [linguisticData, setLinguisticData] = useState<LinguisticAnalysisResponse | null>(null);
+  const [interactionData, setInteractionData] = useState<InteractionAnalysisResponse | null>(null);
+  const [culturalData, setCulturalData] = useState<CulturalAnalysisResponse | null>(null);
   const [summary, setSummary] = useState<SummaryResponse | null>(null);
 
 
@@ -83,15 +94,23 @@ const StatPage = () => {
     setLoading(true);
 
     Promise.all([
-      axios.get<TimeAnalysisResponse>(`${API_BASE_URL}/dataset/${datasetId}/time`, {
+      axios.get<TimeAnalysisResponse>(`${API_BASE_URL}/dataset/${datasetId}/temporal`, {
         params,
         headers: authHeaders,
       }),
-      axios.get<UserAnalysisResponse>(`${API_BASE_URL}/dataset/${datasetId}/user`, {
+      axios.get<UserEndpointResponse>(`${API_BASE_URL}/dataset/${datasetId}/user`, {
         params,
         headers: authHeaders,
       }),
-      axios.get<ContentAnalysisResponse>(`${API_BASE_URL}/dataset/${datasetId}/content`, {
+      axios.get<LinguisticAnalysisResponse>(`${API_BASE_URL}/dataset/${datasetId}/linguistic`, {
+        params,
+        headers: authHeaders,
+      }),
+      axios.get<EmotionalAnalysisResponse>(`${API_BASE_URL}/dataset/${datasetId}/emotional`, {
+        params,
+        headers: authHeaders,
+      }),
+      axios.get<InteractionAnalysisResponse>(`${API_BASE_URL}/dataset/${datasetId}/interactional`, {
         params,
         headers: authHeaders,
       }),
@@ -99,11 +118,28 @@ const StatPage = () => {
         params,
         headers: authHeaders,
       }),
+      axios.get<CulturalAnalysisResponse>(`${API_BASE_URL}/dataset/${datasetId}/cultural`, {
+        params,
+        headers: authHeaders,
+      }),
     ]) 
-      .then(([timeRes, userRes, contentRes, summaryRes]) => {
-        setUserData(userRes.data || null);
+      .then(([timeRes, userRes, linguisticRes, emotionalRes, interactionRes, summaryRes, culturalRes]) => {
+        const combinedUserData: UserAnalysisResponse = {
+          ...userRes.data,
+          interaction_graph: interactionRes.data?.interaction_graph ?? {},
+        };
+
+        const combinedContentData: ContentAnalysisResponse = {
+          ...linguisticRes.data,
+          ...emotionalRes.data,
+        };
+
+        setUserData(combinedUserData);
         setTimeData(timeRes.data || null);
-        setContentData(contentRes.data || null);
+        setContentData(combinedContentData);
+        setLinguisticData(linguisticRes.data || null);
+        setInteractionData(interactionRes.data || null);
+        setCulturalData(culturalRes.data || null);
         setSummary(summaryRes.data || null);
       })
       .catch((e) => setError("Failed to load statistics: " + String(e)))
@@ -218,6 +254,24 @@ return (
       >
         Users
       </button>
+      <button
+        onClick={() => setActiveView("linguistic")}
+        style={activeView === "linguistic" ? styles.buttonPrimary : styles.buttonSecondary}
+      >
+        Linguistic
+      </button>
+      <button
+        onClick={() => setActiveView("interactional")}
+        style={activeView === "interactional" ? styles.buttonPrimary : styles.buttonSecondary}
+      >
+        Interactional
+      </button>
+      <button
+        onClick={() => setActiveView("cultural")}
+        style={activeView === "cultural" ? styles.buttonPrimary : styles.buttonSecondary}
+      >
+        Cultural
+      </button>
     </div>
 
     {activeView === "summary" && (
@@ -243,6 +297,36 @@ return (
       <UserStats data={userData} />
     )}
 
+    {activeView === "linguistic" && linguisticData && (
+      <LinguisticStats data={linguisticData} />
+    )}
+
+    {activeView === "linguistic" && !linguisticData && (
+      <div style={{ ...styles.container, ...styles.card, marginTop: 16 }}>
+        No linguistic data available.
+      </div>
+    )}
+
+    {activeView === "interactional" && interactionData && (
+      <InteractionalStats data={interactionData} />
+    )}
+
+    {activeView === "interactional" && !interactionData && (
+      <div style={{ ...styles.container, ...styles.card, marginTop: 16 }}>
+        No interactional data available.
+      </div>
+    )}
+
+    {activeView === "cultural" && culturalData && (
+      <CulturalStats data={culturalData} />
+    )}
+
+    {activeView === "cultural" && !culturalData && (
+      <div style={{ ...styles.container, ...styles.card, marginTop: 16 }}>
+        No cultural data available.
+      </div>
+    )}
+
   </div>
 );
 }