fix: trying to fix minification error

Reviewed-on: #1

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:
+        try:
-            return session.exec(
+            with Session(engine) as session:
-                select(User).where(User.username == username)
+                return session.exec(
-            ).one_or_none()
+                    select(User).where(User.username == username)
+                ).one_or_none()
+        except OperationalError:
+            return
 
 
 def authenticate_user(username: str, password: str):

src/Analysis.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
-import { apiAuth, baseUrl, token } from "./api";
+import { apiAuth } from "./api";
-import useAuthContext from "./AuthContext";
 
 //const debounce = <T extends (...args: any[]) => void>(
 //  func: T,
@@ -67,8 +66,7 @@ export default function Analysis() {
         setImage(data.image);
         setLoading(false);
       }).catch((e) => {
-        const { checkAuth } = useAuthContext();
+        console.log("best to just reload... ", e);
-        checkAuth();
       })
   }
 
@@ -89,9 +87,6 @@ export default function Analysis() {
     }
   }
 
-  const { user } = useAuthContext()!
-  console.log(`logged in as ${user.username}`);
-
   return (
     <div className="stack column dropdown">
       <button onClick={() => setShowControlPanel(!showControlPanel)}>

src/App.css

@@ -19,6 +19,7 @@ body {
 }
 
 footer {
+  margin-top: 24px;
   font-size: x-small;
 }
 
@@ -208,6 +209,10 @@ button,
 }
 
 .navbar {
+  span {
+    padding: 4px;
+  }
+
   button {
     font-size: medium;
     margin: 4px 0.5%;

src/App.tsx

@@ -1,27 +1,27 @@
 import Analysis from "./Analysis";
 import "./App.css";
-import { AuthProvider } from "./AuthContext";
 import Footer from "./Footer";
 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={
-          <AuthProvider>
+          <SessionProvider>
             <Analysis />
-          </AuthProvider>
+          </SessionProvider>
         } />
       </Routes>
       <Footer />

src/Footer.tsx

@@ -1,6 +1,13 @@
+import { Link } from "react-router";
+
 export default function Footer() {
         return <footer>
-                <p className="grey">
+                <div className="navbar">
+                        <Link to="/" ><span>Form</span></Link>
+                        <span>|</span>
+                        <Link to="/network" ><span>Trainer Analysis</span></Link>
+                </div>
+                <p className="grey extra-margin">
                         something not working?
                         <br />
                         message <a href="https://t.me/x0124816">me</a>.

src/Header.tsx

@@ -2,7 +2,7 @@ import { baseUrl } from "./api";
 
 export default function Header() {
   return <div className="logo">
-    <a href={baseUrl}>
+    <a href={"/"}>
       <img alt="logo" height="66%" src="logo.svg" />
       <h3 className="centered">cutt</h3>
     </a>

src/Login.tsx

@@ -0,0 +1,86 @@
+import { FormEvent, useContext, useState } from "react";
+import { useNavigate } from "react-router";
+import { currentUser, login, LoginRequest, User } from "./api";
+
+export interface LoginProps {
+  onLogin: (user: User) => void;
+}
+
+export const Login = ({ onLogin }: LoginProps) => {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<unknown>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function doLogin() {
+    setLoading(true);
+    setError(null);
+    const timeout = new Promise((r) => setTimeout(r, 1500));
+    let user: User;
+    try {
+      login({ username, password });
+      user = await currentUser();
+    } catch (e) {
+      await timeout;
+      setError(e);
+      setLoading(false);
+      return
+    }
+
+    await timeout;
+    onLogin(user);
+  }
+
+  function handleClick() {
+    doLogin();
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    doLogin();
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div>
+        <input type="text" id="username" name="username" placeholder="username" required value={username} onChange={evt => setUsername(evt.target.value)} />
+      </div>
+      <div>
+        <input type="password" id="password" name="password" placeholder="password" minLength={8} value={password} required onChange={evt => setPassword(evt.target.value)} />
+      </div>
+      <button type="submit" value="login" style={{ fontSize: "small" }} onClick={handleClick} >login</button>
+      {loading && <span className="loader" />}
+    </form>
+  )
+}
+
+/*
+export default function Login(props: { onLogin: (user: User) => void }) {
+  const { onLogin } = props;
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  async function handleLogin(e: FormEvent) {
+    e.preventDefault()
+    const timeout = new Promise((r) => setTimeout(r, 1500));
+    let user: User;
+    try {
+      login({ username, password })
+      user = await currentUser()
+    } catch (e) { await timeout; return }
+    await timeout;
+    onLogin(user);
+  }
+
+  return <div>
+    <form onSubmit={handleLogin}>
+      <div>
+        <input type="text" id="username" name="username" placeholder="username" required value={username} onChange={evt => setUsername(evt.target.value)} />
+      </div>
+      <div>
+        <input type="password" id="password" name="password" placeholder="password" minLength={8} value={password} required onChange={evt => setPassword(evt.target.value)} />
+      </div>
+      <input className="button" type="submit" value="login" onSubmit={handleLogin} />
+    </form>
+  </div>
+} */

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/Rankings.tsx

@@ -334,7 +334,8 @@ export default function Rankings() {
             </button>
           </div>
 
-          <span className="grey">assign as many or as few players as you want and don't forget to <b>submit</b> (💾) when you're done :)</span>
+          <span className="grey">assign as many or as few players as you want<br />
+            and don't forget to <b>submit</b> (💾) when you're done :)</span>
 
           <div id="Chemistry" className="tabcontent">
             <Chemistry {...{ user, players }} />

src/Session.tsx

@@ -0,0 +1,40 @@
+import { createContext, ReactNode, useContext, useLayoutEffect, useState } from "react";
+import { currentUser, User } from "./api";
+import { Login } from "./Login";
+
+export interface SessionProviderProps {
+  children: ReactNode;
+}
+
+const sessionContext = createContext<User | null>(null);
+
+export function SessionProvider(props: SessionProviderProps) {
+  const { children } = props;
+
+  const [user, setUser] = useState<User | null>(null);
+  const [err, setErr] = useState<unknown>(null);
+
+  function loadUser() {
+    currentUser()
+      .then((user) => { setUser(user); setErr(null); })
+      .catch((err) => { setUser(null); setErr(err); });
+  }
+
+  useLayoutEffect(() => { loadUser(); }, [err]);
+
+  function onLogin(user: User) {
+    setUser(user);
+    setErr(null);
+  }
+
+  let content: ReactNode;
+  if (!err && !user) content = <span className="loader" />;
+  else if (err) content = <Login onLogin={onLogin} />;
+  else content = <sessionContext.Provider value={user}>{children}</sessionContext.Provider>;
+
+  return content;
+}
+
+export function useSession() {
+  return useContext(sessionContext);
+}

src/api.ts

@@ -1,7 +1,3 @@
-import { useContext } from "react";
-import useAuthContext from "./AuthContext";
-import { createCookie } from "react-router";
-
 export const baseUrl = import.meta.env.VITE_BASE_URL as string;
 export const token = () => localStorage.getItem("access_token") as string;
 
@@ -24,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}`, {
+  const req = new Request(`${baseUrl}api/${path}`,
-    method: method, headers: {
+    {
-      "Authorization": `Bearer ${token()} `,
+      method: method,
-      'Content-Type': 'application/json'
+      headers: {
-    },
+        "Authorization": `Bearer ${token()} `,
-    body: JSON.stringify(data),
+        'Content-Type': 'application/json'
-  });
+      },
+      ...(data && { body: JSON.stringify(data) })
+    }
+  );
   let resp: Response;
   try {
     resp = await fetch(req);
@@ -90,15 +89,8 @@ export const login = (req: LoginRequest) => {
     method: "POST", headers: {
       'Content-Type': 'application/x-www-form-urlencoded',
     }, body: new URLSearchParams(req).toString()
-  }).then(resp => resp.json() as unknown as Token).then(token => token ? localStorage.setItem("access_token", token.access_token) : console.log("token not acquired")).catch((e) => console.log("catch error " + e + " in login"));
+  }).then(resp => resp.json() as Promise<Token>).then(token => token ? localStorage.setItem("access_token", token.access_token) : console.log("token not acquired")).catch((e) => console.log("catch error " + e + " in login"));
-}
+  return Promise<void>
-
-export const cookielogin = (req: LoginRequest) => {
-  fetch(`${baseUrl}api/token`, {
-    method: "POST", headers: {
-      'Content-Type': 'application/x-www-form-urlencoded',
-    }, body: new URLSearchParams(req).toString()
-  }).then(resp => { createCookie(resp.headers.getSetCookie()) }).catch((e) => console.log("catch error " + e + " in login"));
 }
 
 export const logout = () => localStorage.removeItem("access_token");