feat: change API output

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,11 @@ 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 sociogram_data(show: int | None = 2):

package.json

@@ -10,11 +10,12 @@
     "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"
+    "sortablejs": "^1.15.6",
+    "vis-data": "^7.1.9",
+    "vis-network": "^9.1.9"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
@@ -22,7 +23,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 +31,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,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/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);