Fallout-branded build-graph control PoC (elkjs + React Flow)#526
Draft
ChrisonSimtian wants to merge 4 commits into
Draft
Fallout-branded build-graph control PoC (elkjs + React Flow)#526ChrisonSimtian wants to merge 4 commits into
ChrisonSimtian wants to merge 4 commits into
Conversation
Phase 1 of replacing the extension's Mermaid graph with a Fallout-branded, GitHub-Actions-style graph control. Deliberately not a GitHub clone — its own dark radioactive-amber identity, tokens lifted from the logo assets. Stack keeps layout and render as separate layers: elkjs (layered, left-to-right) computes positions, React Flow renders + handles pan/zoom/click. The layout is surface-independent so the same control can back the VS Code webview, the --plan HTML report, and eventually the Fallout CI run graph. - Consumes the existing build-graph.json schema (solid=dependsOn, dashed=after, thick=triggers); host injects a real graph via window.__FALLOUT_GRAPH__. - Optional per-target status (running/succeeded/failed/…) is wired through the node now but reserved for the later live phase — schema v1 omits it. - Vite + singlefile build emits one self-contained dist/index.html, the same shape the static HTML report will take. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Emits a single self-contained IIFE (dist-lib/fallout-graph-control.js) via
`npm run build:lib` — React, React Flow and elkjs bundled, CSS injected at
runtime — exposing FalloutGraph.mount(el, graph, { onRunTarget }). Hosts load it
as one <script>, the same way the extension loaded mermaid.
Re-calling mount on the same element reconciles in place, which is what drives
the extension's live refresh. dist-lib is gitignored (build artifact).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Two defects the standalone demo build masked, both hit only when the control is loaded as a plain <script> (the webview / HTML-report path): - theme.css (which defines --fallout-yellow and the rest) was imported only by the demo entry, so the library bundle shipped control.css referencing tokens that weren't there — the embedded control rendered unstyled. Import it from GraphControl so the tokens travel with the control regardless of entry point. - Vite library mode doesn't substitute process.env.NODE_ENV, so React's reference threw `process is not defined` in a browser <script> host. Define it in the lib config; the bundle now ships React's production build (and is ~300 KB smaller for it). Verified by loading dist-lib via a <script> tag + FalloutGraph.mount — renders branded with zero console errors. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Collaborator
Author
there is also a darkmode version btw
|
`npm run report [build-graph.json] [out.html]` emits one self-contained HTML file with the control's IIFE and the graph JSON inlined — double-clickable, offline, no server. This is the shape the `fallout` --plan HTML report will take. - Dark by default: the report pins data-theme="dark" so it stays dark regardless of the viewer's OS, with a toggle that remembers the choice in localStorage. - theme.css now honours an explicit data-theme both ways (dark default, explicit light via data-theme="light", OS preference only when nothing is pinned) — the webview keeps following the editor theme since it pins nothing. - The "click a target to run it" legend hint now shows only when a run handler is wired (the webview), not in a static report where there's nothing to run. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Collaborator
|
@ChrisonSimtian I don't get it.. Where does this graph show up? IS this just a replacement of the |
Collaborator
Author
|
that too but its mainly going to show in extensions like the vs code extension im working on |
Collaborator
|
Ok Curious, how that will look then :) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Phase 1 PoC of a Fallout-branded, GitHub-Actions-style build/run graph control — the intended replacement for the VS Code extension's Mermaid graph, and the basis for the
--planHTML report and (eventually) the Fallout CI run graph.Not a GitHub clone: its own dark radioactive-amber identity, tokens lifted from the logo assets.
Stack — layout and render kept as separate layers:
layered, left-to-right) computes node positions — surface-independent.@xyflow/react) renders + handles pan/zoom/click.How it fits Fallout
build-graph.jsonschema. Edge semantics match Mermaid/--plan: solid =dependsOn, dashed =after, thick =triggers.window.__FALLOUT_GRAPH__; otherwise a demo fixture renders.statusis wired through the node now but reserved for the live phase — schema v1 omits it.dist/index.html— the same shape the static HTML report will take.Scope — exploratory, lives under
poc/; nothing shipped/wired yet (henceskip-changelog).Try it
Next
graphPanel.ts) + emit the static HTML report.BuildManagerstreams per-target status → the control animates the run.