feat: re-implement Graph with Reagraph

analysis.py

@@ -51,6 +51,44 @@ def sociogram_json():
     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):
     G = nx.DiGraph()
     with Session(engine) as session:
@@ -146,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__":

package.json

@@ -13,6 +13,7 @@
     "react": "^18.3.1",
     "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"

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/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?