H-5763: Add simple MiniMap #8286

kube · 2026-01-22T01:19:28Z

🌟 What is the purpose of this PR?

This PR adds a MiniMap component to the SDCPN ReactFlow canvas using ReactFlow's built-in MiniMap. The MiniMap provides an overview of the entire Petri net, helping users navigate large nets.

Note: ReactFlow's MiniMap viewport indicator is not currently configurable to account for panel overlays. This PR focuses on adding the basic MiniMap functionality. A follow-up PR will add viewport awareness to bring selected objects back into view on selection.

🔗 Related links

🚫 Blocked by

None

🔍 What does this change?

Introduces a custom MiniMap wrapper component using ReactFlow's built-in MiniMap
Positions the MiniMap at the top-right, offset by the properties panel width when visible
Renders place nodes as circles and transition nodes as rectangles
Applies custom styling: 100×64px size, 6px border radius, reduced mask opacity

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

does not modify any publishable blocks or libraries, or modifications do not need publishing

📜 Does this require a change to the docs?

The changes in this PR:

are internal and do not require a docs change

🕸️ Does this require a change to the Turbo Graph?

The changes in this PR:

do not affect the execution graph

⚠️ Known issues

The MiniMap viewport indicator shows the full ReactFlow container rather than the actual visible area (accounting for panel overlays)

🐾 Next steps

Add viewport awareness to EditorContext to track visible area. H-5977
Implement "bring into view" functionality when selecting objects
Consider matching node colors between the canvas and MiniMap

🛡 What tests cover this?

Manual testing

❓ How to test this?

Checkout the branch
Open a Petri net in the SDCPN editor
Confirm the MiniMap appears in the top-right corner
Open the properties panel and verify the MiniMap shifts left
Verify places appear as circles and transitions as rectangles
Test panning and zooming via the MiniMap

📹 Demo

To be added

vercel · 2026-01-22T01:19:34Z

The latest updates on your projects. Learn more about Vercel for GitHub.

3 Skipped Deployments

Project	Deployment	Review	Updated (UTC)
ds-theme	Ignored	Preview	Jan 29, 2026 0:49am
hashdotdesign	Ignored	Preview	Jan 29, 2026 0:49am
hashdotdesign-tokens	Ignored	Preview	Jan 29, 2026 0:49am

kube · 2026-01-22T01:19:45Z

This stack of pull requests is managed by Graphite. Learn more about stacking.

cursor · 2026-01-28T09:33:03Z

PR Summary

Low Risk
UI-only addition using ReactFlow’s built-in MiniMap with no changes to persistence, simulation, or authorization logic.

Overview
Adds a top-right ReactFlow MiniMap to the SDCPN editor canvas to aid navigation, with panning/zooming enabled.

Introduces a custom MiniMap wrapper that offsets horizontally when the properties panel is open and custom-renders nodes (places as circles with type-based HSL coloring and strokes; transitions as grey rectangles) plus light mask/rounded styling.

^{Written by Cursor Bugbot for commit 3ba9d4b. This will update automatically on new commits. Configure here.}

augmentcode · 2026-01-28T09:37:14Z

🤖 Augment PR Summary

Summary: Adds a ReactFlow MiniMap overlay to the SDCPN editor to help navigate large Petri nets.

Changes:

Introduces a new SDCPN MiniMap wrapper component with custom styling and node shapes.
Renders place nodes as circles and transition nodes as rectangles using a custom MiniMap node renderer.
Positions the MiniMap top-right and offsets it left based on the properties panel width when open.
Integrates the MiniMap into SDCPNView with pannable/zoomable enabled.

Technical Notes: Uses ReactFlow useStore to look up node internals for node-type discrimination in the MiniMap.

_{🤖 Was this summary useful? React with 👍 or 👎}

augmentcode

Review completed. 1 suggestions posted.

Comment augment review to trigger a new review at any time.

augmentcode · 2026-01-28T09:37:15Z

libs/@hashintel/petrinaut/src/views/SDCPN/components/mini-map.tsx

+
+  return (
+    <ReactFlowMiniMap
+      {...props}


Spreading {...props} before className means any caller-provided className will be ignored here. If callers are expected to customize this wrapper, that behavior may be surprising.

_{🤖 Was this useful? React with 👍 or 👎}

cursor · 2026-01-28T09:41:42Z

libs/@hashintel/petrinaut/src/views/SDCPN/components/mini-map.tsx

+ * Renders place nodes as circles and transition nodes as rectangles.
+ * Positions at top-right, offset by properties panel width when visible.
+ */
+export const MiniMap: React.FC<Omit<MiniMapProps, "style">> = (props) => {


Type signature allows props that are silently ignored

Low Severity

The component type Omit<MiniMapProps, "style"> suggests all MiniMapProps except style can be customized, but props like className, maskColor, maskStrokeWidth, nodeComponent, and offsetScale are hardcoded after the spread and will be silently overwritten. This creates a misleading API where callers could pass these props expecting them to work, but they'll be ignored. The type should exclude all fixed props to accurately reflect the component's actual API.

graphite-app · 2026-01-29T00:26:40Z

Merge activity

Jan 29, 12:26 AM UTC: This pull request can not be added to the Graphite merge queue. Please try rebasing and resubmitting to merge when ready.
Jan 29, 12:26 AM UTC: Graphite disabled "merge when ready" on this PR due to: a merge conflict with the target branch; resolve the conflict and try again..
Jan 29, 12:48 AM UTC: Graphite rebased this pull request, because this pull request is set to merge when ready.

- Add VisibleViewport type representing panel insets (top, right, bottom, left) - Add computeVisibleViewport() helper that calculates insets based on panel state - Expose visibleViewport in EditorContext, computed reactively in EditorProvider - Add ReactFlow MiniMap positioned at top-right of visible viewport Co-Authored-By: Claude Opus 4.5 <[email protected]>

- Create dedicated MiniMap wrapper component - Render place nodes as circles (transitions as rectangles) - Add rounded corners (6px) to minimap SVG - Set fixed size (100x64px) with reduced padding - Position relative to visible viewport for panel awareness Co-Authored-By: Claude Opus 4.5 <[email protected]>

Simplify MiniMap to use default ReactFlow positioning for now. Viewport-aware positioning will be added in a follow-up PR. Co-Authored-By: Claude Opus 4.5 <[email protected]>

- Place MiniMap at top of canvas instead of bottom - Offset from right edge by properties panel width when visible Co-Authored-By: Claude Opus 4.5 <[email protected]>

Co-Authored-By: Claude Opus 4.5 <[email protected]>

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

cursor · 2026-01-29T01:00:25Z

libs/@hashintel/petrinaut/src/views/SDCPN/components/mini-map.tsx

+  const isPropertiesPanelVisible = selectedResourceId !== null;
+  const rightOffset = isPropertiesPanelVisible
+    ? propertiesPanelWidth + PANEL_MARGIN * 2
+    : PANEL_MARGIN;


MiniMap offset ignores non-resource panel visibility

Low Severity

MiniMap decides whether the properties panel is visible using only selectedResourceId !== null. If the properties panel can be shown for selections that don’t set selectedResourceId (e.g., edge selection, pinned-open panel, or other UI flows), rightOffset stays small and the MiniMap can overlap the panel.

github-actions bot added area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team labels Jan 22, 2026

vercel bot deployed to Preview – petrinaut January 22, 2026 01:24 View deployment

vercel bot deployed to Preview – hash January 22, 2026 01:26 View deployment

vilkinsons assigned kube Jan 22, 2026

kube force-pushed the cf/h-5763-have-a-minimap-for-nets-when-not-fully-in-view branch from 26d0314 to 7cb91bd Compare January 22, 2026 12:19

kube changed the title ~~Add visible viewport to EditorContext and display ReactFlow MiniMap~~ H-5763, H-5977: Add visible viewport to EditorContext and display ReactFlow MiniMap Jan 22, 2026

vercel bot deployed to Preview – petrinaut January 22, 2026 12:23 View deployment

vercel bot deployed to Preview – hash January 22, 2026 12:27 View deployment

kube force-pushed the cf/h-5763-have-a-minimap-for-nets-when-not-fully-in-view branch from 7cb91bd to 5636d00 Compare January 27, 2026 01:24

vercel bot deployed to Preview – petrinaut January 27, 2026 01:28 View deployment

kube changed the title ~~H-5763, H-5977: Add visible viewport to EditorContext and display ReactFlow MiniMap~~ H-5763: Add visible viewport to EditorContext and display ReactFlow MiniMap Jan 27, 2026

kube changed the title ~~H-5763: Add visible viewport to EditorContext and display ReactFlow MiniMap~~ H-5763: Add simple MiniMap Jan 27, 2026

vercel bot deployed to Preview – hash January 27, 2026 01:32 View deployment

kube changed the base branch from main to graphite-base/8286 January 27, 2026 23:10

kube force-pushed the cf/h-5763-have-a-minimap-for-nets-when-not-fully-in-view branch from 5636d00 to 5e51486 Compare January 27, 2026 23:10

kube changed the base branch from graphite-base/8286 to cf/h-5976-fix-readonly-tooltips January 27, 2026 23:10

This was referenced Jan 27, 2026

H-5976: Fix display of tooltips for readonly inputs #8285

Merged

H-5770: Add PlaybackContext for real-time simulation playback #8295

Draft

vercel bot deployed to Preview – petrinaut January 27, 2026 23:14 View deployment

vercel bot deployed to Preview – hash January 27, 2026 23:17 View deployment

vercel bot deployed to Preview – petrinaut January 28, 2026 01:02 View deployment

kube marked this pull request as ready for review January 28, 2026 09:32

graphite-app bot requested a review from a team January 28, 2026 09:33

augmentcode bot reviewed Jan 28, 2026

View reviewed changes

cursor bot reviewed Jan 28, 2026

View reviewed changes

kube changed the base branch from cf/h-5976-fix-readonly-tooltips to graphite-base/8286 January 28, 2026 18:01

vercel bot deployed to Preview – petrinaut January 28, 2026 18:22 View deployment

kube force-pushed the graphite-base/8286 branch from 1f85b90 to b7a126d Compare January 29, 2026 00:47

kube force-pushed the cf/h-5763-have-a-minimap-for-nets-when-not-fully-in-view branch from becfd05 to b584cca Compare January 29, 2026 00:47

kube changed the base branch from graphite-base/8286 to main January 29, 2026 00:47

github-actions bot added the area/infra Relates to version control, CI, CD or IaC (area) label Jan 29, 2026

kube force-pushed the cf/h-5763-have-a-minimap-for-nets-when-not-fully-in-view branch from b584cca to a70a878 Compare January 29, 2026 00:47

github-actions bot removed the area/infra Relates to version control, CI, CD or IaC (area) label Jan 29, 2026

kube and others added 6 commits January 29, 2026 01:48

Remove visibleViewport dependency from MiniMap

1f256c2

Simplify MiniMap to use default ReactFlow positioning for now. Viewport-aware positioning will be added in a follow-up PR. Co-Authored-By: Claude Opus 4.5 <[email protected]>

Position MiniMap at top-right, offset by properties panel

b945e0b

- Place MiniMap at top of canvas instead of bottom - Offset from right edge by properties panel width when visible Co-Authored-By: Claude Opus 4.5 <[email protected]>

Use design token for MiniMap border radius

f1905e8

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Add MiniMap colours, tweak size/ratio (#8335)

3ba9d4b

kube force-pushed the cf/h-5763-have-a-minimap-for-nets-when-not-fully-in-view branch from a70a878 to 3ba9d4b Compare January 29, 2026 00:49

kube requested a review from CiaranMn January 29, 2026 00:51

vercel bot deployed to Preview – petrinaut January 29, 2026 00:53 View deployment

vercel bot deployed to Preview – hash January 29, 2026 00:56 View deployment

cursor bot reviewed Jan 29, 2026

View reviewed changes

CiaranMn approved these changes Jan 29, 2026

View reviewed changes

kube added this pull request to the merge queue Jan 29, 2026

Merged via the queue into main with commit 7071640 Jan 29, 2026
45 checks passed

kube deleted the cf/h-5763-have-a-minimap-for-nets-when-not-fully-in-view branch January 29, 2026 08:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

H-5763: Add simple MiniMap #8286

H-5763: Add simple MiniMap #8286

Uh oh!

kube commented Jan 22, 2026 •

edited

Loading

Uh oh!

vercel bot commented Jan 22, 2026 •

edited

Loading

Uh oh!

kube commented Jan 22, 2026 •

edited

Loading

Uh oh!

cursor bot commented Jan 28, 2026 •

edited

Loading

Uh oh!

augmentcode bot commented Jan 28, 2026

Uh oh!

augmentcode bot left a comment

Uh oh!

augmentcode bot Jan 28, 2026

Uh oh!

cursor bot Jan 28, 2026

Uh oh!

graphite-app bot commented Jan 29, 2026 •

edited

Loading

Uh oh!

cursor bot left a comment

Uh oh!

cursor bot Jan 29, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

H-5763: Add simple MiniMap #8286

H-5763: Add simple MiniMap #8286

Uh oh!

Conversation

kube commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🌟 What is the purpose of this PR?

🔗 Related links

🚫 Blocked by

🔍 What does this change?

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

📜 Does this require a change to the docs?

🕸️ Does this require a change to the Turbo Graph?

⚠️ Known issues

🐾 Next steps

🛡 What tests cover this?

❓ How to test this?

📹 Demo

Uh oh!

vercel bot commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kube commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cursor bot commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Summary

Uh oh!

augmentcode bot commented Jan 28, 2026

Uh oh!

augmentcode bot left a comment

Choose a reason for hiding this comment

Uh oh!

augmentcode bot Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

cursor bot Jan 28, 2026

Choose a reason for hiding this comment

Type signature allows props that are silently ignored

Uh oh!

graphite-app bot commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot Jan 29, 2026

Choose a reason for hiding this comment

MiniMap offset ignores non-resource panel visibility

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

kube commented Jan 22, 2026 •

edited

Loading

vercel bot commented Jan 22, 2026 •

edited

Loading

kube commented Jan 22, 2026 •

edited

Loading

cursor bot commented Jan 28, 2026 •

edited

Loading

graphite-app bot commented Jan 29, 2026 •

edited

Loading