feat: export graph as PNG image or JSON data#411
Open
shaunpatterson wants to merge 2 commits into
Open
Conversation
Adds two buttons to the graph toolbar (next to zoom-to-fit): - PNG: composites every canvas in the graph container onto a single white-backed canvas and downloads it via toBlob, so it works with the current d3 canvas renderer and any future layered renderer. - JSON: serializes the GraphParser node/edge Maps to plain JSON. Edge endpoints may be uid strings or node objects resolved in place by d3-force - both shapes export as uids, keeping the output free of circular references. lib/exportGraph.js is covered by 8 unit tests. Verified in a real browser against a live Dgraph cluster: both buttons download valid files (the PNG renders the graph, the JSON carries correct uid endpoints). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
shaunpatterson
force-pushed
the
sp/graph-export
branch
from
bbea086 to
121fd9b
Compare
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
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.
What
Adds graph export to the query results view — a standard feature in comparable tools (Neo4j Browser, Memgraph Lab) that Ratel lacks. Two new buttons in the graph toolbar next to Fit to screen:
<canvas>inside.graph-container(in DOM order) onto a single white-backed canvas and downloads it viatoBlob. Renderer-agnostic: works with the current d3 canvas renderer and any future layered/WebGL renderer.{nodes: [{uid, label, group, attrs, facets}], edges: [{source, target, predicate, facets}]}).Implementation notes
source/targetmay be uid strings or node objects (d3-force resolves them to objects in place after first render).graphToJSONhandles both shapes and always emits uids, so the output is free of circular references — covered by tests.ratel-graph-2026-06-12-0832.png).lib/exportGraph.jshas 8 unit tests (serialization, cycle-safety, canvas compositing, filename format).Testing
npx jest src/lib/exportGraph— 8/8 pass (note: the rest of the suite is repaired separately in fix: repair broken Jest test suite (16/18 suites failing) #410).npm run buildpasses.🤖 Generated with Claude Code