package.json

@@ -14,14 +14,17 @@
     "react-dom": "^18.3.1",
     "react-sortablejs": "^6.1.4",
     "reagraph": "^4.21.2",
-    "sortablejs": "^1.15.6"
+    "sortablejs": "^1.15.6",
+    "vis-data": "^7.1.9",
+    "vis-network": "^9.1.9"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
+    "@types/d3": "^7.4.3",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@types/sortablejs": "^1.15.8",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^1.3.2",
     "eslint": "^9.17.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
@@ -29,7 +32,7 @@
     "react-router": "^7.1.5",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",
-    "vite": "^6.0.5"
+    "vite": "^6.1.0"
   },
   "prettier": {
     "trailingComma": "es5",

src/App.tsx

@@ -5,7 +5,7 @@ import Header from "./Header";
 import Rankings from "./Rankings";
 import { BrowserRouter, Routes, Route } from "react-router";
 import { SessionProvider } from "./Session";
-import { GraphComponent } from "./Network";
+import { GraphComponent } from "./Graph";
 
 function App() {
   return (

src/Network.tsx

@@ -1,46 +1,127 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { apiAuth } from "./api";
+import "vis-network/styles/vis-network.css";
-import { GraphCanvas, GraphCanvasRef, GraphEdge, GraphNode, useSelection } from "reagraph";
+import { apiAuth, baseUrl } from './api';
+import NetworkData, { Edge } from './types';
+import { Network } from 'vis-network/esnext';
+import { DataSet, DataView } from "vis-data/esnext";
 
-interface NetworkData {
+const GraphComponent = () => {
-  nodes: GraphNode[],
+  const graphRef = useRef<HTMLDivElement>(null);
-  edges: GraphEdge[],
-}
-
-export const GraphComponent = () => {
   const [data, setData] = useState({ nodes: [], edges: [] } as NetworkData);
   const [loading, setLoading] = useState(true);
 
   async function loadData() {
     setLoading(true);
-    await apiAuth("analysis/graph_json", null)
+    await apiAuth("analysis/json", null)
       .then(json => json as Promise<NetworkData>).then(json => { setData(json) })
     setLoading(false);
   }
 
   useEffect(() => { loadData() }, [])
 
-  const graphRef = useRef<GraphCanvasRef | null>(null);
+  var network: Network;
 
-  const { selections, actives, onNodeClick, onCanvasClick } = useSelection({
+  //function updateEdgeWidths(nodeId: number | string) {
-    ref: graphRef,
+  //  // Get all edges connected to the clicked node
-    nodes: data.nodes,
+  //  const edges = network.body.edges.getEdges({
-    edges: data.edges,
+  //    filter: (edge: any) => edge.from === nodeId,
-    pathSelectionType: 'out'
+  //  });
-  });
+  //  // Update the width of each edge
+  //  edges.forEach((edge: any) => {
+  //    network.body.edges.update(edge.id, { width: 5 }); // Change the width to your desired value
+  //  });
+  //}
 
-  return (
-    <GraphCanvas
-      draggable
-      ref={graphRef}
-      nodes={data.nodes}
-      edges={data.edges}
-      selections={selections}
-      actives={actives}
-      onCanvasClick={onCanvasClick}
-      onNodeClick={onNodeClick}
-    />
-  );
 
-}
+  useEffect(() => {
+    var { nodes, edges } = data;
+    if (graphRef.current) {
+      const options = {
+        layout: {
+          randomSeed: null,
+        },
+        interaction: {
+          zoomView: true,
+        },
+        nodes: {
+          shape: 'box',
+          size: 20,
+          font: { size: 24 },
+        },
+        edges: {
+          arrows: "to",
+          color: "black",
+        }
+      };
 
+
+      const edgesFilterValues = {
+        likes: true,
+        dislikes: false,
+      }
+      const edgesFilter = (edge: Edge) => {
+        return edgesFilterValues[edge.relation];
+      };
+
+      //edgeFilters.forEach((filter) =>
+      //  filter.addEventListener("change", (e) => {
+      //    const { value, checked } = e.target;
+      //    edgesFilterValues[value] = checked;
+      //    edgesView.refresh();
+      //  })
+      //);
+
+      var networkData = {
+        nodes: new DataSet(nodes),
+        edges: new DataView(new DataSet(edges), { filter: edgesFilter })
+      };
+      network = new Network(graphRef.current, networkData, options);
+
+      // Add event listeners for node clicks and drags
+      network.on('click', (params) => {
+        if (params.nodes.length > 0) {
+          console.log(`clicked ${networkData.nodes.getIds().find((nodeId) => nodeId === params.nodes[0])}`);
+          const nodeID = params.nodes[0];
+          //updateEdgeWidths(nodeID);
+
+          if (nodeID !== null) {
+            edges.forEach((edge) => {
+              if (edge.from === nodeID) {
+                edge.color = { opacity: 1, highlight: "red", color: "red" };
+              } else {
+                edge.color = { opacity: 0.2, highlight: "none", color: "#36c" };
+              }
+            });
+          } else {
+            edges.forEach((edge) => {
+              edge.color = { opacity: 0.2, highlight: "none", color: "#36c" };
+            });
+          }
+          //
+          // Update the network with new edge colors
+          if (graphRef.current) {
+            const updatedData = {
+              nodes: new DataSet(nodes),
+              edges: new DataSet(edges),
+            };
+            network.setData(updatedData);
+          }
+        }
+      })
+
+      network.on('dragEnd', (params) => {
+        if (params.nodes.length > 0) {
+          console.log(`dragged ${networkData.nodes.getIds().find((nodeId) => nodeId === params.nodes[0])}`);
+        }
+      });
+
+    }
+  }, [loading]);
+
+
+  if (loading) return <span className='loader' />
+  else
+    return <div ref={graphRef} style={{ width: '100%', height: "86vh" }} />;
+};
+
+export default GraphComponent;