Spaces:
Runtime error
Runtime error
| import { useCallback, useEffect, useMemo, useRef, useState, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type RefObject } from "react"; | |
| import { useNavigate } from "react-router-dom"; | |
| import { notebooksApi, topicsApi } from "../api/endpoints"; | |
| import type { Job, TopicDetail, TopicMap as TopicMapData } from "../api/types"; | |
| import { Reader } from "../components/Reader"; | |
| import { EmptyState, errorMessage, formatDate, JobProgress, Loading, PageHeader } from "../components/ui"; | |
| import { useJob } from "../hooks/useJob"; | |
| import { playClick } from "../lib/sound"; | |
| const W = 900; | |
| const H = 620; | |
| type P = { id: string; x: number; y: number; vx: number; vy: number; r: number }; | |
| type View = { x: number; y: number; w: number; h: number }; | |
| const HOME: View = { x: 0, y: 0, w: W, h: H }; | |
| const MIN_W = W / 8; | |
| const MAX_W = W * 1.6; | |
| /** Wheel to zoom around the cursor, drag to pan, buttons and keys for the rest. */ | |
| function useZoomPan(svgRef: RefObject<SVGSVGElement>) { | |
| const [view, setView] = useState<View>(HOME); | |
| const drag = useRef<{ px: number; py: number; view: View; moved: boolean } | null>(null); | |
| const toSvg = useCallback( | |
| (clientX: number, clientY: number, v: View) => { | |
| const rect = svgRef.current!.getBoundingClientRect(); | |
| return { x: v.x + ((clientX - rect.left) / rect.width) * v.w, y: v.y + ((clientY - rect.top) / rect.height) * v.h }; | |
| }, | |
| [svgRef], | |
| ); | |
| const scaleView = (v: View, factor: number, fx: number, fy: number): View => { | |
| const w = Math.max(MIN_W, Math.min(MAX_W, v.w * factor)); | |
| const h = (w / W) * H; | |
| // Keep the focus point fixed on screen while scaling. | |
| return { x: fx - ((fx - v.x) * w) / v.w, y: fy - ((fy - v.y) * h) / v.h, w, h }; | |
| }; | |
| const zoomAt = useCallback((factor: number, cx?: number, cy?: number) => { | |
| setView((v) => scaleView(v, factor, cx ?? v.x + v.w / 2, cy ?? v.y + v.h / 2)); | |
| }, []); | |
| useEffect(() => { | |
| const el = svgRef.current; | |
| if (!el) return; | |
| const onWheel = (e: WheelEvent) => { | |
| e.preventDefault(); | |
| setView((v) => { | |
| const p = toSvg(e.clientX, e.clientY, v); | |
| return scaleView(v, Math.exp(Math.max(-0.4, Math.min(0.4, e.deltaY * 0.0015))), p.x, p.y); | |
| }); | |
| }; | |
| el.addEventListener("wheel", onWheel, { passive: false }); | |
| return () => el.removeEventListener("wheel", onWheel); | |
| }); | |
| const onPointerDown = (e: ReactPointerEvent<SVGSVGElement>) => { | |
| if ((e.target as Element).closest(".map-node")) return; | |
| drag.current = { px: e.clientX, py: e.clientY, view, moved: false }; | |
| svgRef.current?.setPointerCapture(e.pointerId); | |
| }; | |
| const onPointerMove = (e: ReactPointerEvent<SVGSVGElement>) => { | |
| const d = drag.current; | |
| if (!d || !svgRef.current) return; | |
| const rect = svgRef.current.getBoundingClientRect(); | |
| const dx = ((e.clientX - d.px) / rect.width) * d.view.w; | |
| const dy = ((e.clientY - d.py) / rect.height) * d.view.h; | |
| if (Math.abs(dx) + Math.abs(dy) > 2) d.moved = true; | |
| setView({ ...d.view, x: d.view.x - dx, y: d.view.y - dy }); | |
| }; | |
| const onPointerUp = (e: ReactPointerEvent<SVGSVGElement>) => { | |
| drag.current = null; | |
| if (svgRef.current?.hasPointerCapture(e.pointerId)) svgRef.current.releasePointerCapture(e.pointerId); | |
| }; | |
| const onDoubleClick = (e: ReactMouseEvent<SVGSVGElement>) => { | |
| if ((e.target as Element).closest(".map-node")) return; | |
| const p = toSvg(e.clientX, e.clientY, view); | |
| zoomAt(0.6, p.x, p.y); | |
| }; | |
| const pan = (dx: number, dy: number) => setView((v) => ({ ...v, x: v.x + dx * v.w, y: v.y + dy * v.h })); | |
| const reset = () => { | |
| setView(HOME); | |
| }; | |
| const focusOn = (x: number, y: number) => | |
| setView((v) => { | |
| const w = Math.min(v.w, W / 2); | |
| const h = (w / W) * H; | |
| return { x: x - w / 2, y: y - h / 2, w, h }; | |
| }); | |
| return { | |
| view, | |
| zoomAt, | |
| pan, | |
| reset, | |
| focusOn, | |
| handlers: { onPointerDown, onPointerMove, onPointerUp, onPointerCancel: onPointerUp, onDoubleClick }, | |
| }; | |
| } | |
| /** Small deterministic force layout: repulsion between all nodes, springs along edges, pull to center. */ | |
| function layout(data: TopicMapData): Map<string, P> { | |
| const maxCount = Math.max(1, ...data.nodes.map((n) => n.post_count)); | |
| const nodes: P[] = data.nodes.map((n, i) => { | |
| const a = (i / Math.max(1, data.nodes.length)) * Math.PI * 2 * 2.39996; | |
| const rad = 60 + (i % 7) * 30; | |
| return { id: n.id, x: W / 2 + Math.cos(a) * rad, y: H / 2 + Math.sin(a) * rad, vx: 0, vy: 0, r: 6 + 22 * Math.sqrt(n.post_count / maxCount) }; | |
| }); | |
| const byId = new Map(nodes.map((n) => [n.id, n])); | |
| const maxW = Math.max(1, ...data.edges.map((e) => e.weight)); | |
| for (let step = 0; step < 320; step++) { | |
| const cool = 1 - step / 320; | |
| for (let i = 0; i < nodes.length; i++) { | |
| for (let j = i + 1; j < nodes.length; j++) { | |
| const a = nodes[i]; | |
| const b = nodes[j]; | |
| let dx = a.x - b.x; | |
| let dy = a.y - b.y; | |
| let d2 = dx * dx + dy * dy; | |
| if (d2 < 0.01) { | |
| dx = 0.1; | |
| dy = 0.1; | |
| d2 = 0.02; | |
| } | |
| const minD = a.r + b.r + 26; | |
| const f = (2400 / d2) * (d2 < minD * minD ? 3 : 1); | |
| const d = Math.sqrt(d2); | |
| a.vx += (dx / d) * f; | |
| a.vy += (dy / d) * f; | |
| b.vx -= (dx / d) * f; | |
| b.vy -= (dy / d) * f; | |
| } | |
| } | |
| for (const e of data.edges) { | |
| const a = byId.get(e.source); | |
| const b = byId.get(e.target); | |
| if (!a || !b) continue; | |
| const dx = b.x - a.x; | |
| const dy = b.y - a.y; | |
| const d = Math.sqrt(dx * dx + dy * dy) || 1; | |
| const target = 110 - 40 * (e.weight / maxW); | |
| const f = (d - target) * 0.02 * (0.5 + e.weight / maxW); | |
| a.vx += (dx / d) * f; | |
| a.vy += (dy / d) * f; | |
| b.vx -= (dx / d) * f; | |
| b.vy -= (dy / d) * f; | |
| } | |
| for (const n of nodes) { | |
| n.vx += (W / 2 - n.x) * 0.004; | |
| n.vy += (H / 2 - n.y) * 0.004; | |
| n.x += Math.max(-12, Math.min(12, n.vx)) * cool; | |
| n.y += Math.max(-12, Math.min(12, n.vy)) * cool; | |
| n.x = Math.max(n.r + 10, Math.min(W - n.r - 10, n.x)); | |
| n.y = Math.max(n.r + 10, Math.min(H - n.r - 10, n.y)); | |
| n.vx *= 0.6; | |
| n.vy *= 0.6; | |
| } | |
| } | |
| return byId; | |
| } | |
| export default function TopicMap() { | |
| const [data, setData] = useState<TopicMapData | null>(null); | |
| const [job, setJob] = useState<Job | null>(null); | |
| const [selected, setSelected] = useState<TopicDetail | null>(null); | |
| const [hover, setHover] = useState<string | null>(null); | |
| const [reading, setReading] = useState<string | null>(null); | |
| const [error, setError] = useState<string | null>(null); | |
| const navigate = useNavigate(); | |
| const svgRef = useRef<SVGSVGElement>(null); | |
| const { view, zoomAt, pan, reset, focusOn, handlers } = useZoomPan(svgRef); | |
| const load = () => topicsApi.map().then(setData, () => setError("Could not load the topic map.")); | |
| useEffect(() => { | |
| load(); | |
| }, []); | |
| const live = useJob(job, (j) => { | |
| if (j.status === "done") load(); | |
| }); | |
| const positions = useMemo(() => (data ? layout(data) : new Map<string, P>()), [data]); | |
| const neighbors = useMemo(() => { | |
| const m = new Map<string, Set<string>>(); | |
| data?.edges.forEach((e) => { | |
| if (!m.has(e.source)) m.set(e.source, new Set()); | |
| if (!m.has(e.target)) m.set(e.target, new Set()); | |
| m.get(e.source)!.add(e.target); | |
| m.get(e.target)!.add(e.source); | |
| }); | |
| return m; | |
| }, [data]); | |
| const focus = hover ?? selected?.id ?? null; | |
| const running = live && (live.status === "queued" || live.status === "running"); | |
| const rebuild = async (full: boolean) => { | |
| setError(null); | |
| try { | |
| setJob(await topicsApi.rebuild(full)); | |
| } catch (e) { | |
| setError(errorMessage(e)); | |
| } | |
| }; | |
| const open = async (id: string, center = false) => { | |
| playClick(); | |
| if (center) { | |
| const p = positions.get(id); | |
| if (p) focusOn(p.x, p.y); | |
| } | |
| setSelected(await topicsApi.get(id)); | |
| }; | |
| const scale = view.w / W; // keeps labels and strokes a constant size on screen | |
| return ( | |
| <div className="page-wrap"> | |
| <PageHeader eyebrow="Topic map" title="The constellations in your archive"> | |
| <button className="btn" disabled={Boolean(running)} onClick={() => rebuild(false)}> | |
| {data?.has_untagged_posts ? "Map new posts" : "Refresh"} | |
| </button> | |
| <button className="btn" disabled={Boolean(running)} onClick={() => rebuild(true)}> | |
| Rebuild from scratch | |
| </button> | |
| </PageHeader> | |
| {live && (running || live.status === "failed") && <JobProgress job={live} />} | |
| {error && <p className="error-text">{error}</p>} | |
| {!data && <Loading />} | |
| {data && data.nodes.length === 0 && !running && ( | |
| <EmptyState | |
| title="No constellations yet" | |
| body="Notestack reads each post and names what it is about, then links topics that appear together. New posts are mapped automatically after each sync." | |
| action={ | |
| <button className="btn btn-primary" onClick={() => rebuild(false)}> | |
| Map my archive | |
| </button> | |
| } | |
| /> | |
| )} | |
| {data && data.nodes.length > 0 && ( | |
| <div className="map-layout"> | |
| <div className="card map-canvas"> | |
| <div className="map-controls"> | |
| <button className="icon-btn" onClick={() => zoomAt(0.75)} aria-label="Zoom in" title="Zoom in"> | |
| + | |
| </button> | |
| <button className="icon-btn" onClick={() => zoomAt(1.33)} aria-label="Zoom out" title="Zoom out"> | |
| - | |
| </button> | |
| <button className="icon-btn mono" onClick={reset} aria-label="Reset view" title="Reset view"> | |
| 1:1 | |
| </button> | |
| </div> | |
| <p className="map-hint mono muted">Scroll to zoom · drag to pan · double click to dive in</p> | |
| <svg | |
| ref={svgRef} | |
| viewBox={`${view.x} ${view.y} ${view.w} ${view.h}`} | |
| role="img" | |
| aria-label="Topic constellation. Plus and minus zoom, arrow keys pan, 0 resets." | |
| tabIndex={0} | |
| className="map-svg" | |
| {...handlers} | |
| onKeyDown={(e) => { | |
| const step = 0.12; | |
| if (e.key === "+" || e.key === "=") zoomAt(0.8); | |
| else if (e.key === "-") zoomAt(1.25); | |
| else if (e.key === "0") reset(); | |
| else if (e.key === "ArrowLeft") pan(-step, 0); | |
| else if (e.key === "ArrowRight") pan(step, 0); | |
| else if (e.key === "ArrowUp") pan(0, -step); | |
| else if (e.key === "ArrowDown") pan(0, step); | |
| else return; | |
| e.preventDefault(); | |
| }} | |
| > | |
| <defs> | |
| <radialGradient id="star" cx="50%" cy="50%" r="50%"> | |
| <stop offset="0%" stopColor="#ffffff" /> | |
| <stop offset="55%" stopColor="#217cff" stopOpacity="0.9" /> | |
| <stop offset="100%" stopColor="#217cff" stopOpacity="0" /> | |
| </radialGradient> | |
| </defs> | |
| {data.edges.map((e) => { | |
| const a = positions.get(e.source); | |
| const b = positions.get(e.target); | |
| if (!a || !b) return null; | |
| const lit = focus && (e.source === focus || e.target === focus); | |
| return ( | |
| <line | |
| key={`${e.source}-${e.target}`} | |
| x1={a.x} | |
| y1={a.y} | |
| x2={b.x} | |
| y2={b.y} | |
| stroke={lit ? "#217cff" : "#ffffff"} | |
| strokeOpacity={lit ? 0.9 : focus ? 0.05 : 0.14} | |
| strokeWidth={(lit ? 1.6 : 1) * scale} | |
| /> | |
| ); | |
| })} | |
| {data.nodes.map((n) => { | |
| const p = positions.get(n.id)!; | |
| const dim = focus && focus !== n.id && !neighbors.get(focus)?.has(n.id); | |
| const active = selected?.id === n.id; | |
| return ( | |
| <g | |
| key={n.id} | |
| className="map-node" | |
| opacity={dim ? 0.25 : 1} | |
| onMouseEnter={() => setHover(n.id)} | |
| onMouseLeave={() => setHover(null)} | |
| onClick={() => open(n.id)} | |
| onDoubleClick={() => open(n.id, true)} | |
| tabIndex={0} | |
| role="button" | |
| aria-label={`${n.name}, ${n.post_count} posts`} | |
| onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && open(n.id)} | |
| > | |
| <circle cx={p.x} cy={p.y} r={p.r * 1.9} fill="url(#star)" opacity={active ? 0.9 : 0.45} /> | |
| <circle cx={p.x} cy={p.y} r={Math.max(3, p.r * 0.45)} fill="#ffffff" /> | |
| <text x={p.x} y={p.y + p.r + 16 * scale} textAnchor="middle" className="map-label" style={{ fontSize: 12 * scale, strokeWidth: 4 * scale }}> | |
| {n.name} | |
| </text> | |
| </g> | |
| ); | |
| })} | |
| </svg> | |
| </div> | |
| <aside className="card map-side"> | |
| {!selected && ( | |
| <> | |
| <p className="eyebrow">{data.nodes.length} topics</p> | |
| <p className="muted">Click a star to see its posts. Brighter lines mean topics that appear together more often.</p> | |
| <ol className="topic-rank"> | |
| {data.nodes.slice(0, 12).map((n) => ( | |
| <li key={n.id}> | |
| <button className="link-btn" onClick={() => open(n.id, true)}> | |
| {n.name} | |
| </button> | |
| <span className="mono muted"> {n.post_count}</span> | |
| </li> | |
| ))} | |
| </ol> | |
| </> | |
| )} | |
| {selected && ( | |
| <> | |
| <button className="link-btn mono muted" onClick={() => setSelected(null)}> | |
| All topics | |
| </button> | |
| <h2>{selected.name}</h2> | |
| {selected.summary && <p className="muted">{selected.summary}</p>} | |
| <button | |
| className="btn btn-small btn-primary" | |
| onClick={async () => { | |
| const nb = await notebooksApi.fromTopic(selected.id); | |
| navigate(`/app/notebooks/${nb.id}`); | |
| }} | |
| > | |
| Make a notebook from this topic | |
| </button> | |
| <ul className="doc-list"> | |
| {selected.posts.map((d) => ( | |
| <li key={d.id} className="doc-row"> | |
| <button className="link-btn doc-title" onClick={() => setReading(d.id)}> | |
| {d.title} | |
| </button> | |
| <span className="mono muted">{formatDate(d.published_at)}</span> | |
| </li> | |
| ))} | |
| </ul> | |
| </> | |
| )} | |
| </aside> | |
| </div> | |
| )} | |
| {reading && <Reader documentId={reading} onClose={() => setReading(null)} />} | |
| </div> | |
| ); | |
| } | |