Minimap feature

[AntonJames-Sistence]

PR Checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

• Minimap feature

minimap.mov

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

[netlify]

✅ Deploy Preview for reagraph ready!

Name	Link
🔨 Latest commit	9269b78
🔍 Latest deploy log	https://app.netlify.com/projects/reagraph/deploys/689ba8b044a6f5000847d9bf
😎 Deploy Preview	https://deploy-preview-353--reagraph.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[amcdnl]

Good attempt but i think you made it harder than it needs to be because you can get a PNG render of the graph and just use that w/o having to render all the nodes/edges in svg.

[Copilot]

Pull Request Overview

This PR introduces a minimap feature that provides a real-time overview of the graph visualization. The minimap displays all nodes and edges in a scaled-down view with positioning that matches the main canvas.

• Adds a new MiniMap component with customizable position, width, and height
• Integrates minimap support into GraphCanvas with new props for configuration
• Updates documentation and demo stories to showcase the minimap functionality

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/symbols/MiniMap.tsx	New component implementing the minimap with node/edge rendering and coordinate transformation
src/GraphCanvas/GraphCanvas.tsx	Adds minimap props and integration, moves store provider outside Canvas
stories/demos/Basic.story.tsx	Adds minimap demo story
stories/demos/UseCases.story.tsx	Enables minimap in existing demo
README.md	Updates feature list to include minimap

[AntonJames-Sistence]

I experimented a bit with the PNG approach:

It is indeed simpler and provides a more straightforward solution, but the downside is that node highlighting, as seen in the SVG approach, won’t be possible.

Unless there’s a recurring timeout set to refetch the image every 1–2 seconds, we still face an issue: when zooming, the minimap will zoom as well because it’s just a snapshot of the canvas. In my opinion, this defeats the whole purpose of having a minimap.

So at this point, I see only two options: either keep the simple snapshot as a minimap without dynamic updates, or keep the SVG tied to the store and update it dynamically. What do you think @amcdnl ?

[amcdnl]

Unless there’s a recurring timeout set to refetch the image every 1–2 seconds, we still face an issue: when zooming, the minimap will zoom as well because it’s just a snapshot of the canvas. In my opinion, this defeats the whole purpose of having a minimap.

The png does actually refresh on every render so it could work. Not sure what the price for swapping that image so much will be though but worth a look.

[steppy452]

The png does actually refresh on every render so it could work. Not sure what the price for swapping that image so much will be though but worth a look.

@amcdnl if it refreshes on every render, wouldn't you end up with whatever is on the screen at the time vs a wholistic view of the graph? for example, if you zoom in and add a node or something, in order to capture the new node, you'd have to take another snapshot. but your current view is a zoomed in view so wouldn't you lose the rest of the graph in this case?

[AntonJames-Sistence]

Just pushed the PNG capture approach for reference. I’m still working on replacing the timeout with a cleaner solution to ensure the canvas is captured only after it’s fully painted (including animations) @steppy452 @amcdnl

[amcdnl]

@steppy452 - You are right, I didn't think about it only rendering whats visible. I'm not sure how effect this approach will be.

@AntonJames-Sistence - The svgs aren't going to be very feasible either - in a scenario with tons of nodes/edges it won't scale. You almost have to have 2 canvases for this to work properly which will murder perf.

[AntonJames-Sistence]

Currently, I’ve shifted to a PNG approach, where we take a snapshot of the graph and display it in the corner. I’m open to suggestions on how to improve this if we want to make it more sophisticated. cc @amcdnl

[amcdnl]

We can probably simplify this PR a little by removing the need to seperate the children and just having the mini-map implement the <Html /> component internally. We should also make sure and document this in the docs once we merge.

[AntonJames-Sistence]

Here's the <Html approach, but there's a position issue since it's now connected to canvas. Also, there's the preserveDrawingBuffer: true requirement, I feel it might slow down performance.

minimap.mov

[amcdnl]

I'm going to close this as I don't think its very viable at the moment. The approaches we explored have performance or implementation implications that make this pretty tricky.