fix: trying to fix minification error

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,15 +10,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "d3": "^7.9.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-sortablejs": "^6.1.4",
+    "reagraph": "^4.21.2",
     "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",

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 "./Network";
 
 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,46 @@
+import { useEffect, useRef, useState } from "react";
+import { apiAuth } from "./api";
+import { GraphCanvas, GraphCanvasRef, GraphEdge, GraphNode, useSelection } from "reagraph";
+
+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/graph_json", null)
+      .then(json => json as Promise<NetworkData>).then(json => { setData(json) })
+    setLoading(false);
+  }
+
+  useEffect(() => { loadData() }, [])
+
+  const graphRef = useRef<GraphCanvasRef | null>(null);
+
+  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}
+    />
+  );
+
+}
+

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);