Skip to content

Add fpp-diagram-render: CLI that renders FPP diagrams to SVG - #3

Open
devin-ai-integration[bot] wants to merge 1 commit into
masterfrom
devin/1793318756-fpp-diagram-render-cli
Open

devin-ai-integration[bot] wants to merge 1 commit into
masterfrom
devin/1793318756-fpp-diagram-render-cli

Conversation

@devin-ai-integration

Copy link
Copy Markdown

Summary

fpp-diagram already lowers a component/topology to a sprotty SGraph (--kind component --format sprotty), but the picture only ever existed inside the VS Code webview. This adds a Node CLI, editors/code/cli/ → dist/fpp-diagram-render.js, that runs the rest of the panel's pipeline headlessly and writes standalone SVG:

fpp files ──inline includes──► fpp-diagram --format sprotty ──► SGraph
   ──measureLabels (Helvetica metrics)──► FppLayoutEngine + FppDiagramConfig (ELK, unchanged)
   ──toSvg (webview shapes + diagram.css with theme vars resolved)──► .svg
node dist/fpp-diagram-render.js --name Svc.CommandDispatcher -o CommandDispatcher.svg \
    $FPRIME/cmake/platform/unix/Platform/PlatformTypes.fpp $(find $FPRIME/{Fpp,Fw,Svc,Drv,Os,Utils,default/config} -name '*.fpp')
  • Multiple .fpp inputs; include "..." is inlined relative to each file (fpp-diagram reads one translation unit).
  • --kind component|topology|connectionGroup, --hide-unused-ports, --theme dark|light, --json (layout a saved SGraph), --fpp-diagram (binary override; defaults to target/{release,debug} or PATH).
  • Additive only: new cli/ sources + tsconfig, a fourth webpack bundle, test/smoke-render.js + fixtures, package.json scripts (compile:cli, render, test:render; test chains them). No existing Rust/TS modified. .vscodeignore already excludes cli/ and test/ from the VSIX; dist/fpp-diagram-render.js is included.
  • Label sizes are estimated (no DOM), so widths can differ by a few px from the webview.

Svc.CommandDispatcher from nasa/fprime 64e4426d33, rasterized from the SVG with headless Chrome:

CommandDispatcher

Link to Devin session: https://nasa-jpl-demo.devinenterprise.com/sessions/391b811d1ebf411bbe5d407d04cb5cb8
Open in Devin Desktop: https://nasa-jpl-demo.devinenterprise.com/desktop/session/391b811d1ebf411bbe5d407d04cb5cb8?variant=devin

A Node command line (editors/code/cli) that produces the component, topology,
and connection-group diagrams of the VS Code panel as standalone SVG, from
the same pipeline: fpp-diagram --format sprotty for lowering, the extension's
FppLayoutEngine/FppDiagramConfig for ELK layout, and the webview shapes and
stylesheet for drawing. Label sizes are estimated from Helvetica metrics in
place of the webview's DOM measurement.

Multiple .fpp inputs are accepted; include directives are inlined relative to
each file so a whole source tree can be passed.

Additive only: new cli/ sources and tsconfig, a fourth webpack bundle
(dist/fpp-diagram-render.js), a smoke test with fixtures, and package.json
scripts (compile:cli, render, test:render). Existing Rust and TypeScript are
unchanged.


Co-authored-by: Michael Starch <LeStarch@googlemail.com>
@devin-ai-integration

Copy link
Copy Markdown
Author

I'll fix CI failures and address comments from users with write access that start with 'Devin'.

  • Disable automatic comment, CI, and merge conflict monitoring

Original prompt from michael.d.starch

Continue the work from @devin-session:devin-41ec9ea5fc0a4076b6ca8e2280206d69.

We have an existing visualizer that works in VsCode, yes?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 participants