feat: re-implement Graph with Reagraph

analysis.py

@@ -24,10 +24,10 @@ P = Player
 def sociogram_json():
     nodes = []
     necessary_nodes = set()
-    links = []
+    edges = []
     with Session(engine) as session:
         for p in session.exec(select(P)).fetchall():
-            nodes.append({"id": p.name, "appearance": 1})
+            nodes.append({"id": p.name, "label": p.name})
         subquery = (
             select(C.user, func.max(C.time).label("latest"))
             .where(C.time > datetime(2025, 2, 1, 10))
@@ -44,9 +44,49 @@ def sociogram_json():
                 # G.add_edge(c.user, p)
                 # p_id = session.exec(select(P.id).where(P.name == p)).one()
                 necessary_nodes.add(p)
-                links.append({"source": c.user, "target": p})
+                edges.append({"from": c.user, "to": p, "relation": "likes"})
+            for p in c.hate:
+                edges.append({"from": c.user, "to": p, "relation": "dislikes"})
     # nodes = [n for n in nodes if n["name"] in necessary_nodes]
-    return JSONResponse({"nodes": nodes, "links": links})
+    return JSONResponse({"nodes": nodes, "edges": edges})
+
+
+def graph_json():
+    nodes = []
+    edges = []
+    with Session(engine) as session:
+        for p in session.exec(select(P)).fetchall():
+            nodes.append({"id": p.name, "label": p.name})
+        subquery = (
+            select(C.user, func.max(C.time).label("latest"))
+            .where(C.time > datetime(2025, 2, 1, 10))
+            .group_by(C.user)
+            .subquery()
+        )
+        statement2 = select(C).join(
+            subquery, (C.user == subquery.c.user) & (C.time == subquery.c.latest)
+        )
+        for c in session.exec(statement2):
+            for p in c.love:
+                edges.append(
+                    {
+                        "id": f"{c.user}->{p}",
+                        "source": c.user,
+                        "target": p,
+                        "relation": "likes",
+                    }
+                )
+            continue
+            for p in c.hate:
+                edges.append(
+                    {
+                        id: f"{c.user}-x>{p}",
+                        "source": c.user,
+                        "target": p,
+                        "relation": "dislikes",
+                    }
+                )
+    return JSONResponse({"nodes": nodes, "edges": edges})
 
 
 def sociogram_data(show: int | None = 2):
@@ -144,6 +184,7 @@ async def render_sociogram(params: Params):
 
 
 analysis_router.add_api_route("/json", endpoint=sociogram_json, methods=["GET"])
+analysis_router.add_api_route("/graph_json", endpoint=graph_json, methods=["GET"])
 analysis_router.add_api_route("/image", endpoint=render_sociogram, methods=["POST"])
 
 if __name__ == "__main__":

db.py

@@ -12,7 +12,7 @@ from sqlmodel import (
 with open("db.secrets", "r") as f:
     db_secrets = f.readline().strip()
 
-engine = create_engine(db_secrets)
+engine = create_engine(db_secrets, connect_args={"connect_timeout": 8})
 del db_secrets
 
 

package.json

@@ -10,11 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "d3": "^7.9.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-sortablejs": "^6.1.4",
-    "sortablejs": "^1.15.6"
+    "reagraph": "^4.21.2",
+    "sortablejs": "^1.15.6",
+    "vis-data": "^7.1.9",
+    "vis-network": "^9.1.9"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
@@ -22,7 +24,7 @@
     "@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",
@@ -30,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",

security.py

@@ -9,6 +9,7 @@ from db import engine, User
 from fastapi.security import OAuth2PasswordBearer, OAuth2PasswordRequestForm
 from pydantic_settings import BaseSettings, SettingsConfigDict
 from passlib.context import CryptContext
+from sqlalchemy.exc import OperationalError
 
 
 class Config(BaseSettings):
@@ -47,10 +48,13 @@ def get_password_hash(password):
 
 def get_user(username: str | None):
     if username:
-        with Session(engine) as session:
-            return session.exec(
-                select(User).where(User.username == username)
-            ).one_or_none()
+        try:
+            with Session(engine) as session:
+                return session.exec(
+                    select(User).where(User.username == username)
+                ).one_or_none()
+        except OperationalError:
+            return
 
 
 def authenticate_user(username: str, password: str):

src/App.tsx

@@ -5,19 +5,19 @@ import Header from "./Header";
 import Rankings from "./Rankings";
 import { BrowserRouter, Routes, Route } from "react-router";
 import { SessionProvider } from "./Session";
+import { GraphComponent } from "./Graph";
 
 function App() {
-  //const [data, setData] = useState({ nodes: [], links: [] } as SociogramData);
-  //async function loadData() {
-  //  await fetch(`${baseUrl}api/analysis/json`, { method: "GET" }).then(resp => resp.json() as unknown as SociogramData).then(json => { setData(json) })
-  //}
-  //useEffect(() => { loadData() }, [])
-  //
   return (
     <BrowserRouter>
       <Header />
       <Routes>
         <Route index element={<Rankings />} />
+        <Route path="/network" element={
+          <SessionProvider>
+            <GraphComponent />
+          </SessionProvider>
+        } />
         <Route path="/analysis" element={
           <SessionProvider>
             <Analysis />

src/Footer.tsx

@@ -5,7 +5,7 @@ export default function Footer() {
                 <div className="navbar">
                         <Link to="/" ><span>Form</span></Link>
                         <span>|</span>
-                        <Link to="/analysis" ><span>Trainer Analysis</span></Link>
+                        <Link to="/network" ><span>Trainer Analysis</span></Link>
                 </div>
                 <p className="grey extra-margin">
                         something not working?

src/Network.tsx

@@ -0,0 +1,127 @@
+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";
+
+const GraphComponent = () => {
+  const graphRef = useRef<HTMLDivElement>(null);
+  const [data, setData] = useState({ nodes: [], edges: [] } as NetworkData);
+  const [loading, setLoading] = useState(true);
+
+  async function loadData() {
+    setLoading(true);
+    await apiAuth("analysis/json", null)
+      .then(json => json as Promise<NetworkData>).then(json => { setData(json) })
+    setLoading(false);
+  }
+
+  useEffect(() => { loadData() }, [])
+
+  var network: Network;
+
+  //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
+  //  });
+  //}
+
+
+  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;

src/api.ts

@@ -20,13 +20,16 @@ export default async function api(path: string, data: any): Promise<any> {
 
 export async function apiAuth(path: string, data: any, method: string = "GET"): Promise<any> {
 
-  const req = new Request(`${baseUrl}api/${path}`, {
-    method: method, headers: {
-      "Authorization": `Bearer ${token()} `,
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify(data),
-  });
+  const req = new Request(`${baseUrl}api/${path}`,
+    {
+      method: method,
+      headers: {
+        "Authorization": `Bearer ${token()} `,
+        'Content-Type': 'application/json'
+      },
+      ...(data && { body: JSON.stringify(data) })
+    }
+  );
   let resp: Response;
   try {
     resp = await fetch(req);