H-5655: Refactor selection logic and migrate to @xyflow/react v12 by kube · Pull Request #8523 · hashintel/hash

kube · 2026-03-07T19:36:11Z

🌟 What is the purpose of this PR?

Refactor the selection logic in Petrinaut and migrate to @xyflow/react v12. This centralizes selection state in EditorContext, adds multi-selection support, and improves keyboard shortcut handling.

🔗 Related links

H-5655 (internal)

🔍 What does this change?

Migrate to @xyflow/react v12 with updated APIs and types
Centralize selection state in EditorContext with isSelected/hasSelection helpers
Add multi-selection support — click nodes/arcs with modifier keys, with a new multi-selection panel in Properties
Add arc properties panel for viewing/editing selected arcs
Make Delete/Backspace work globally for all selected item types (places, transitions, arcs)
Batch multi-node drag position commits into single atomic mutations
Highlight selected nodes in MiniMap
Add partial selection setting in viewport settings dialog
Remove browser tests and related dependencies
Fix stale selection race conditions and restrict arc selection to click-only
Add selection cleanup hook to handle removed items

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

modifies an npm-publishable library and I have added a changeset file(s)

📜 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

Selection synchronization between EditorContext and ReactFlow's internal state still needs enhancements
Selection logic is functional but not perfect — will need reworking later

🐾 Next steps

Comprehensive testing pass needed once dependent features are built
Further refinement of selection sync between EditorContext and ReactFlow
This provides a solid foundation to build on, but the selection system will need another iteration

🛡 What tests cover this?

No automated tests — browser tests were removed as part of this PR

❓ How to test this?

Checkout the branch / view the deployment
Open a Petri net in the editor
Select nodes, transitions, and arcs — verify single and multi-selection works
Use Delete/Backspace to remove selected items
Drag multiple selected nodes and verify positions update atomically
Check MiniMap highlights selected nodes

vercel · 2026-03-07T19:36:18Z

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

Project	Deployment	Actions	Updated (UTC)
hash	Ready	Preview, Comment	Mar 12, 2026 7:06pm
petrinaut	Ready	Preview	Mar 12, 2026 7:06pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
hashdotdesign	Ignored	Preview	Mar 12, 2026 7:06pm
hashdotdesign-tokens	Ignored	Preview	Mar 12, 2026 7:06pm

kube · 2026-03-07T19:36:30Z

H-5655: Refactor selection logic and migrate to @xyflow/react v12 #8523 : 2 dependent PRs (#8528 , #8532 ) 👈 (View in Graphite)
FE-225: Petrinaut: Setup rolldown-plugin-dts and update @typeScript/native-preview + vite #8509
FE-225, H-6116, H-6286: Update Petrinaut UI #8472 : 1 other dependent PR (#8463 )
H-5839, FE-488: Petrinaut: LSP-like interface for Diagnostics and Code Editor #8300
FE-223, H-5780, H-6227: Setup Petrinaut inside HASH + Build with Vite 8 and TypeScript 7 #8369
main

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

cursor · 2026-03-09T23:53:00Z

PR Summary

Medium Risk
Touches core editor interaction paths (selection, deletion, drag/position commits) while also migrating the underlying graph library to @xyflow/react v12, so regressions in canvas UX and coordinate handling are possible.

Overview
Migrates the SDCPN canvas integration from reactflow to @xyflow/react v12 (imports, instance APIs, store lookups, selection configuration) and updates node/edge typing accordingly.

Refactors editor selection into a typed selection: Map in EditorContext with isSelected/hasSelection helpers, adding multi-select (modifier-click + box select for nodes) and global Delete/Backspace handling via keyboard shortcuts.

Adds new PropertiesPanel flows for arc selection (ArcProperties with weight edit + delete) and multi-selection (MultiSelectionPanel with grouped summary + bulk delete), plus a useSelectionCleanup hook to remove stale selections after model mutations.

Adjusts coordinate semantics to consistently store SDCPN node centers while @xyflow/react uses top-left positions (layout + drag commits), introduces classic/compact node dimensions, and makes node drag-end position commits atomic. Also adds a user setting for SelectionMode.Partial vs full selection and highlights selected nodes in the minimap.

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

Add a `partialSelection` user setting (default true) that controls whether drag-to-select picks up partially intersected nodes. Refactor the viewport settings dialog to use a reusable SettingRow grid component. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Remove FocusNodeRegistrar and all focusNode/registerFocusNode plumbing from the editor context. Viewport centering on node selection will be revisited as a dedicated feature. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Selected nodes render with a light blue fill and stroke in the MiniMap. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Move deletion keyboard handling from SDCPNView's onKeyDown to the global keyboard shortcuts hook using useEffectEvent, so Delete/Backspace works from anywhere in Petrinaut. Extend deleteItemsByIds to also handle types, differential equations, and parameters. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…temsByIds Expose `isSelected(id)` and `hasSelection` from EditorContext so consumers no longer need direct access to the SelectionMap for simple lookups. Change `deleteItemsByIds` to accept typed SelectionMap, enabling it to partition by item type and skip irrelevant collections. Migrate all 12 UI consumers. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…e test deps - Convert ELK top-left positions to center coordinates in calculateGraphLayout, matching the convention used by useSdcpnToReactFlow and useApplyNodeChanges - Accept dims parameter instead of using deprecated nodeDimensions alias, so layout uses correct dimensions for compact vs classic mode - Fix selection guards to check base map instead of prevSelection, preventing previously-selected canvas nodes from being dropped during box-select when non-canvas items are selected - Re-add @testing-library/dom and @testing-library/react devDependencies needed by unit tests that were incorrectly removed with browser test cleanup Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…rc index names Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…ations When a type or differential equation is deleted, clear references to it from places and equations to avoid unresolvable IDs in the SDCPN JSON. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

… fix drag-end cleanup - Stabilize setSelection with useCallback to prevent useSelectionCleanup effect from re-running on every render - Remove unused addToSelection and removeFromSelection - Add early return in selection updater when nothing changed to avoid unnecessary re-renders - Always clear per-node dragging state on drag-end even without position Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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.}

libs/@hashintel/petrinaut/src/state/use-selection-cleanup.ts

kube · 2026-03-12T18:54:12Z

Re: cursor bot's "Selection cleanup uses stale state" — valid point. Switched to setSelection((prev) => ...) functional updater form so the cleanup always operates on the latest selection state.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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

kube mentioned this pull request Mar 7, 2026

H-5641: Probability Distributions in Petrinaut #8463

Merged

3 tasks

kube mentioned this pull request Mar 7, 2026

H-6281, FE-501: Add undo/redo support to Petrinaut demo app #8505

Merged

3 tasks

vercel bot deployed to Preview – petrinaut March 7, 2026 19:39 View deployment

vercel bot deployed to Preview – hash March 7, 2026 20:03 View deployment

kube changed the base branch from cf/h-6281-basic-undoredo-in-petrinaut-demo-app to graphite-base/8523 March 9, 2026 10:38

kube force-pushed the graphite-base/8523 branch from 9b3ab34 to 5604e83 Compare March 9, 2026 12:48

kube force-pushed the cf/h-5655-refactor-selection-logic branch from a4cb46c to 4043333 Compare March 9, 2026 12:48

kube changed the base branch from graphite-base/8523 to cf/h-6281-basic-undoredo-in-petrinaut-demo-app March 9, 2026 12:48

vercel bot deployed to Preview – petrinaut March 9, 2026 12:51 View deployment

vercel bot deployed to Preview – hash March 9, 2026 13:02 View deployment

kube changed the base branch from cf/h-6281-basic-undoredo-in-petrinaut-demo-app to graphite-base/8523 March 9, 2026 17:44

kube force-pushed the graphite-base/8523 branch from 5604e83 to 9f3aa5b Compare March 9, 2026 22:09

kube force-pushed the cf/h-5655-refactor-selection-logic branch from 4043333 to 47518e4 Compare March 9, 2026 22:09

kube changed the base branch from graphite-base/8523 to main March 9, 2026 22:09

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

vercel bot deployed to Preview – petrinaut March 9, 2026 22:13 View deployment

vercel bot had a problem deploying to Preview – hash March 9, 2026 22:23 Failure

kube force-pushed the cf/h-5655-refactor-selection-logic branch from 47518e4 to 4a51729 Compare March 9, 2026 23:47

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

vercel bot deployed to Preview – petrinaut March 9, 2026 23:50 View deployment

kube marked this pull request as ready for review March 9, 2026 23:52

graphite-app bot assigned kube Mar 9, 2026

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

vercel bot deployed to Preview – petrinaut March 9, 2026 23:55 View deployment

kube and others added 17 commits March 12, 2026 18:30

H-5655: Highlight selected nodes in MiniMap

e185ca7

Selected nodes render with a light blue fill and stroke in the MiniMap. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

H-5655: Remove browser tests and related dependencies

1cdd1ed

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Update yarn.lock

c9cdd5d

H-5655: Add changeset for selection logic refactor

25b5c87

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Fix from review

ba94bd8

Remove vite.browser.config.ts from ESLint allowDefaultProject

fb41c5b

yarn fix:yarn-deduplicate

2e13d92

yarn fix:yarn-deduplicate

94f502f

Update refactor-selection-logic.md

616e1ab

Address review nits: rename dims to dimensions, restore descriptive a…

ac4803f

…rc index names Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Clean up dangling references when deleting types and differential equ…

e783a6a

…ations When a type or differential equation is deleted, clear references to it from places and equations to avoid unresolvable IDs in the SDCPN JSON. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

kube force-pushed the cf/h-5655-refactor-selection-logic branch from 7f99391 to 3dfb714 Compare March 12, 2026 18:02

vercel bot deployed to Preview – petrinaut March 12, 2026 18:05 View deployment

vercel bot deployed to Preview – hash March 12, 2026 18:15 View deployment

Fix issue for React compiler

c88f30b

vercel bot deployed to Preview – petrinaut March 12, 2026 18:39 View deployment

cursor bot reviewed Mar 12, 2026

View reviewed changes

libs/@hashintel/petrinaut/src/state/use-selection-cleanup.ts Show resolved Hide resolved

vercel bot deployed to Preview – hash March 12, 2026 18:43 View deployment

Use functional updater in selection cleanup to avoid stale closure

278aaa6

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

CiaranMn approved these changes Mar 12, 2026

View reviewed changes

vercel bot deployed to Preview – petrinaut March 12, 2026 19:02 View deployment

hashdotai mentioned this pull request Mar 12, 2026

Version Packages #8336

Open

kube mentioned this pull request Mar 12, 2026

H-6327: Integrate Sentry feedback button into ViewportControls #8537

Open

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

H-5655: Refactor selection logic and migrate to @xyflow/react v12#8523

H-5655: Refactor selection logic and migrate to @xyflow/react v12#8523
kube merged 25 commits intomainfrom
cf/h-5655-refactor-selection-logic

kube commented Mar 7, 2026 •

edited

Loading

Uh oh!

vercel bot commented Mar 7, 2026 •

edited

Loading

Uh oh!

kube commented Mar 7, 2026 •

edited

Loading

Uh oh!

cursor bot commented Mar 9, 2026 •

edited

Loading

Uh oh!

cursor bot left a comment

Uh oh!

Uh oh!

kube commented Mar 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

Conversation

kube commented Mar 7, 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

🔍 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?

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

PR Summary

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kube commented Mar 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

kube commented Mar 7, 2026 •

edited

Loading

vercel bot commented Mar 7, 2026 •

edited

Loading

kube commented Mar 7, 2026 •

edited

Loading

cursor bot commented Mar 9, 2026 •

edited

Loading