GraphViz Val Town Project Notes

This project is a Val Town HTTP React/D3 visualization.

Val Town push for this project currently accepts only top-level published source files. Keep live runtime modules that must be fetched by esm.town at the graphViz/ root. Nested folders can be used for notes or local-only organization, but files under nested paths are not safe to rely on for live module resolution or deploy sync.

• Keep index.http.tsx thin.
• Keep Val Town server response and client bootstrapping in index.http.tsx.
• Keep page composition in App.tsx.
• Keep static faction data in data.ts.
• Keep shared constants in constants.ts.
• Keep shared TypeScript interfaces in types.ts.
• Keep graph helper functions in top-level graphUtils.ts.
• Keep D3 imperative rendering, simulation, zoom, drag, and hover behavior inside top-level ForceDirectedGraph.tsx.
• Keep React controls/details/legend/stats in pure top-level component files such as GraphControls.tsx, GraphDetails.tsx, GraphLegend.tsx, and GraphStats.tsx.
• Do not move D3 selection, simulation, or DOM mutation logic into React panel components.

Do not store transient hover state in React if it causes the force simulation to rebuild. React should own durable UI state such as filters, layout mode, label mode, and clicked or keyboard-selected node/link details. D3 should own transient SVG interaction state such as hover highlighting, tooltip placement, zoom transform, drag state, and simulation ticks.

• Use Deno-compatible imports.
• Use explicit .ts and .tsx extensions for local imports.
• Keep local imports relative to the Val root instead of importing this Val by its public module URL.
• Avoid Node-only packages unless confirmed compatible with Val Town.
• Prefer URL imports or npm: imports where appropriate.
• Files with http in the filename, such as index.http.tsx, are clearer for HTTP Val entrypoints.

From the repository root:

deno task check:graphViz
deno task test

From this folder, use the Val Town CLI for deployment sync:

vt status
vt watch
vt push