feat: add dev tooling for graph screenshot pipeline #56
Conversation
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
Add RenderHTML() and RenderEnrichedJSON() to the visualization package, producing a self-contained HTML file with an embedded force-directed graph. Uses force-graph v1.51.1 (MIT) via go:embed for offline-capable, zero-server visualization. Nodes are colored by behavior kind (Catppuccin Mocha palette), sized by PageRank + degree, with hover tooltips and click detail panels. Includes OpenBrowser() cross-platform utility, embedded assets/templates, and comprehensive tests for enriched JSON, HTML rendering, and edge collection. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add --format html, --output/-o, and --no-open flags to floop graph command. Computes PageRank for node sizing, generates self-contained HTML, writes to file, and opens in default browser. MCP floop_graph handler also supports html format using cached PageRank scores. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Much stronger charge repulsion (-1000 - 20*N) to spread nodes apart - Very weak link force (0.02) so edges don't pull everything into a blob - Smaller node radii (sqrt(val)*2.5) to reduce overlap - Labels only render at very high zoom (>8x), keeping overview clean - Brighter edge color and wider strokes for visibility - Zoom-to-fit capped at 1x to ensure overview perspective - Multiple zoom-to-fit calls as simulation settles Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Detail panel now shows canonical behavior content when clicking a node - Edge colors match their kind (blue=requires, red=overrides/conflicts, green=learned-from, purple=merged-into, gray=similar-to) - Added merged-into edge type to legend and styling - Increased link strength (0.02→0.08) so connected nodes cluster better - Added test for canonical content in enriched JSON - Fix click event: debounce background click to prevent panel dismissal Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Return HTML content directly as string instead of writing to temp file in MCP handler, eliminating orphaned temp file accumulation - Populate EdgeCount in MCP HTML output (was defaulting to 0) - Pass file path directly to OpenBrowser instead of constructing fragile file:// URL that breaks on paths with spaces - Export CollectEdges for reuse by MCP handler Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add Puppeteer-based screenshot script and Makefile targets for single-command graph visualization capture. Puppeteer auto-installs into build/node_modules on first run (no package.json needed). Targets: make graph-html, graph-screenshot, graph-preview Uses GOWORK=off to support building from git worktrees. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Greptile OverviewGreptile SummaryThis PR adds development tooling for capturing screenshots of HTML graph visualizations. It introduces a standalone Puppeteer script ( Key changes:
Confidence Score: 5/5
|
| Filename | Overview |
|---|---|
| .gitignore | Added build/ directory to gitignore for dev artifacts |
| Makefile | Added three graph visualization targets with auto-installing puppeteer and GOWORK=off support |
| scripts/screenshot.js | Standalone Puppeteer script with configurable viewport and wait time for graph physics |
Sequence Diagram
sequenceDiagram
participant Dev as Developer
participant Make as Makefile
participant Go as Go Build
participant Floop as floop CLI
participant Node as Node.js
participant Puppeteer as Puppeteer
Dev->>Make: make graph-preview
Make->>Make: mkdir -p build/graph
Make->>Go: GOWORK=off go build
Go-->>Make: ./floop binary
Make->>Floop: ./floop graph --format html --no-open
Floop-->>Make: build/graph/graph.html
Make->>Node: Check node installation
Node-->>Make: node exists
Make->>Node: npm install puppeteer (if missing)
Node-->>Make: build/node_modules/puppeteer
Make->>Node: NODE_PATH=build/node_modules node scripts/screenshot.js
Node->>Puppeteer: Launch headless browser
Puppeteer->>Puppeteer: Load file://build/graph/graph.html
Puppeteer->>Puppeteer: Wait 2000ms for physics
Puppeteer->>Puppeteer: Capture screenshot
Puppeteer-->>Node: build/graph/graph.png
Node-->>Make: Screenshot complete
Make-->>Dev: Preview paths displayed
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
nvandessel
force-pushed
the
feat/graph-html-visualization
branch
from
03f1ca6 to
5c370b8
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
scripts/screenshot.js— standalone Puppeteer script for capturing HTML graph screenshots as PNGgraph-html,graph-screenshot,graph-previewfor single-command visual iterationbuild/node_moduleson first run (nopackage.jsonneeded)GOWORK=offto support building from git worktreesbuild/(gitignored)Test plan
make graph-htmlgeneratesbuild/graph/graph.htmlmake graph-screenshotgeneratesbuild/graph/graph.pngmake graph-previewruns full pipelinemake cleanremovesbuild/directorybuild/does not appear ingit status