refactor(frontend): rename InteractionStats to UserStats

frontend/src/components/UserStats.tsx

@@ -0,0 +1,61 @@
+import ForceGraph3D from "react-force-graph-3d";
+
+import {
+    type UserAnalysisResponse,
+    type InteractionGraph
+} from '../types/ApiTypes';
+
+import StatsStyling from "../styles/stats_styling";
+
+const styles = StatsStyling;
+
+function ApiToGraphData(apiData: InteractionGraph) {
+    const nodes = Object.keys(apiData).map(username => ({ id: username }));
+    const links = [];
+    
+    for (const [source, targets] of Object.entries(apiData)) {
+        for (const [target, count] of Object.entries(targets)) {
+            links.push({ source, target, value: count });
+        }
+    }
+    
+    // drop low-value and deleted interactions to reduce clutter
+    const filteredLinks = links.filter(link => 
+        link.value >= 2 && 
+        link.source !== "[deleted]" && 
+        link.target !== "[deleted]"
+    );
+
+    // also filter out nodes that are no longer connected after link filtering
+    const connectedNodeIds = new Set(filteredLinks.flatMap(link => [link.source, link.target]));
+    const filteredNodes = nodes.filter(node => connectedNodeIds.has(node.id));
+
+    return { nodes: filteredNodes, links: filteredLinks};
+}
+
+
+const UserStats = (props: { data: UserAnalysisResponse }) => {
+  const graphData = ApiToGraphData(props.data.interaction_graph);
+
+  return (
+    <div style={styles.page}>
+        <h2 style={styles.sectionTitle}>User Interaction Graph</h2>
+        <p style={styles.sectionSubtitle}>
+            This graph visualizes interactions between users based on comments and replies. 
+            Nodes represent users, and edges represent interactions (e.g., comments or replies) between them.
+        </p>
+        <div>
+            <ForceGraph3D
+                graphData={graphData}
+                nodeAutoColorBy="id"
+                linkDirectionalParticles={2}
+                linkDirectionalParticleSpeed={0.005}
+                linkWidth={(link) => Math.sqrt(link.value)}
+                nodeLabel={(node) => `${node.id}`}
+            />
+        </div>
+    </div>
+  );
+}
+
+export default UserStats;