feat: remove vis.js

package.json

@@ -14,13 +14,10 @@
     "react-dom": "^18.3.1",
     "react-sortablejs": "^6.1.4",
     "reagraph": "^4.21.2",
-    "sortablejs": "^1.15.6",
-    "vis-data": "^7.1.9",
-    "vis-network": "^9.1.9"
+    "sortablejs": "^1.15.6"
   },
   "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",
@@ -32,7 +29,7 @@
     "react-router": "^7.1.5",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",
-    "vite": "^6.1.0"
+    "vite": "^0.10.3"
   },
   "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 "./Graph";
+import { GraphComponent } from "./Network";
 
 function App() {
   return (

src/Network.tsx

@@ -1,127 +1,46 @@
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import "vis-network/styles/vis-network.css";
-import { apiAuth, baseUrl } from './api';
-import NetworkData, { Edge } from './types';
-import { Network } from 'vis-network/esnext';
-import { DataSet, DataView } from "vis-data/esnext";
+import { useEffect, useRef, useState } from "react";
+import { apiAuth } from "./api";
+import { GraphCanvas, GraphCanvasRef, GraphEdge, GraphNode, useSelection } from "reagraph";
 
-const GraphComponent = () => {
-  const graphRef = useRef<HTMLDivElement>(null);
+interface NetworkData {
+  nodes: GraphNode[],
+  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/json", null)
+    await apiAuth("analysis/graph_json", null)
       .then(json => json as Promise<NetworkData>).then(json => { setData(json) })
     setLoading(false);
   }
 
   useEffect(() => { loadData() }, [])
 
-  var network: Network;
+  const graphRef = useRef<GraphCanvasRef | null>(null);
 
-  //function updateEdgeWidths(nodeId: number | string) {
-  //  // Get all edges connected to the clicked node
-  //  const edges = network.body.edges.getEdges({
-  //    filter: (edge: any) => edge.from === nodeId,
-  //  });
-  //  // 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
-  //  });
-  //}
+  const { selections, actives, onNodeClick, onCanvasClick } = useSelection({
+    ref: graphRef,
+    nodes: data.nodes,
+    edges: data.edges,
+    pathSelectionType: 'out'
+  });
 
+  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;