Technical documentation for the natural gas supply chain prototype.
Tech stack
Core
Static HTML, CSS custom properties and vanilla JavaScript, no build step
Design tokens
tokens.json compiled to assets/tokens.css by a zero-dependency Node script (run automatically by GitHub Actions)
Graph engine
Hand-rolled SVG + DOM renderer with pan, zoom, drag, minimap and smooth-step edges (replaces React Flow 11)
UI components
Plain HTML elements styled to match the original Material UI 7 look
Color palette
Primary accent--twsc-primary
Background--twsc-bg
Surface--twsc-surface
Border--twsc-border
Typography
Montserrat ExtraBold
Headings and hero text
Montserrat Medium
UI labels and navigation
Montserrat Regular
Body copy and descriptions
Shape and elevation
8pxradius-sm
12pxradius-md
16pxradius-lg
28pxradius-xl
Pillradius-pill
Resting--twsc-shadow: nodes, active tab
Floating--twsc-float: app bar, side panel, canvas controls
Core components
Stage nodeA graph node with an icon, category and name. Circle nodes mark meters and tanks; blank nodes terminate labeled outflows.
Floating app barBrand, a segmented pill of view tabs and the theme toggle, in a rounded container (radius-xl, float shadow) that hovers over the canvas with a 12px gap to the screen edge.
Node inspectorFloating side panel with carbon intensity, methane and throughput data, plus the full upstream and downstream path of the selected stage. On narrow screens it becomes a floating bottom sheet.
Panel toggleRound button riding the inspector's right edge. Collapsing slides the panel away and turns the button into a pill at the screen edge; the zoom controls and hint follow it. Selecting a node expands the panel again, and the choice is remembered across visits.
Theme toggleSwitch at the right end of the top bar. Sun is light, moon is dark; the thumb sits under the active theme. Light is the default, and the choice is remembered across visits and pages.
Architecture principles
Real-time data
Graph state lives in plain JavaScript objects; only the edges touching a dragged node are recomputed, so large graphs stay responsive.
Traceability
Selecting a stage walks the graph in both directions and highlights its full lineage, so every product can be traced back to its source wells.
Responsive design
The graph fills the screen and every panel floats above it, so collapsing the inspector hands the space back to the graph. Panels become sheets on narrow screens, and every color, radius and shadow comes from tokens, with a light theme (the default) and a dark theme visitors can switch to.