Skilltree

Long day. Started reasonable — added a docker-compose test stack and an actual async test harness with real focus-graph tests, merged that as PR #1 (the repo’s first one). Then spent the rest of the day chasing one thing: focus/drill-down navigation that doesn’t jitter, doesn’t lose your camera position, and doesn’t show you a wrong node when you back out.

Went through several real attempts before landing on something that works: centralizing focus state so navigation and graph-loading both read from one source of truth, fixing a double-fit() call that was causing visible jitter on every transition, decoupling node selection from focus (selecting a node and entering focus on it turned out to be two different things pretending to be one), fixing the baseline view rendering every node instead of just top-level ones, and fixing drill-down landing on the wrong “super node.” Along the way: directional boundary hints (depends_on vs used_by, instead of one undifferentiated “related” hint) and an abstract_memberships table with seed data to actually test hub/spoke shapes.

The thing that finally made it click: a GraphStage with layered Cytoscape instances and a single camera authority — nothing else is allowed to call fit() mid-transition. Crossfade + dagre expansion on enter, stable camera snapshots on the way back out, one-time framing only on the initial root load. Landed late that night, then one more pass the next morning to fix back-navigation and edge visibility that broke slightly under the new layering. Whole day was basically: every fix surfaced the next inconsistency, until it didn’t.

Split the data model: nodes are now abstract concepts with separate “impl” rows underneath them, plus an impl_contexts table for which implementations apply in which context. That split is what makes a “focused” graph view possible — instead of always rendering the whole DAG, you can load a nested view centered on one node and its immediate context. Also gave vertices a short_title for on-graph labels (the full titles were overlapping the connection lines, which looked exactly as bad as it sounds) and fixed a bug where focused views weren’t correctly resolving which prerequisite impl to point an edge at.

Added path highlighting and proper viewport controls (pan/zoom that doesn’t fight you), a reset for selection state, and cleaned up dismissing newly-added nodes. Then split the page apart — toolbar and sidebar as their own components, and broke the graph view itself into separate Cytoscape modules instead of one growing file. A day later made the whole thing actually run in Docker with a Makefile wrapping the common commands, plus a real README — up to then it was very much “works on my machine.”

Wanted a graph explorer for skills/topics with actual prerequisite structure — a DAG, not a flat list. FastAPI + Postgres + Alembic on the backend, Cytoscape.js inside Next.js on the frontend, wired together same night. Basic toolbar, edge toggles, hover highlighting with a fade so the graph doesn’t feel like a wall of nodes and lines the second it loads.