[PhilippMatthes]

Description

Follow-up from #891 and perses/perses#4634

This reworks the display panel so that it supports panning and zooming not only for regular mouses but also for trackpads and devices without a scroll wheel (like the Apple Magic Mouse I use). The implementation is inspired by how other tools like Grafana handle in-panel movements:

• Pan by dragging the left mouse button anywhere on the canvas (middle-button drag still pans too).
• Zoom with Ctrl/Cmd + wheel, or a trackpad pinch (which the browser delivers as a Ctrl+wheel). A plain, unmodified wheel no longer zooms — it scrolls the surrounding dashboard page, so a Magic Mouse swipe behaves as expected.
• On-screen controls (zoom in / out / fit-to-view / reset) in a small overlay in the bottom-right, as a fallback for other devices or ways to use the canvas.

The editor (edit mode) is unchanged: it keeps middle-button pan and Ctrl/Cmd+wheel zoom, leaving the left button and plain wheel free for node move, edge drag, rubber-band selection, and page scroll.

Two behaviors are preserved explicitly under the new left-button pan and clamped zoom:

• Node navigation — a small clickDistance keeps a near-stationary left click from being treated as a pan, so a node's URL still opens.
• Fit to view — fitView widens the scale-extent floor for very large graphs so fit-to-view frames the whole graph.
• Left-button panning relies on touch-action: none / user-select: none on the panel SVG so the browser's native drag/selection doesn't preempt the pan.

The gesture predicate (shouldStartGesture) and the zoom-limit logic (isAtScaleLimit) are pure, exported, and unit-tested (d3-zoom is ESM-only and awkward to drive through the DOM).

Screenshots

The only visual addition is the zoom-controls overlay (zoom in / out / fit / reset) in the bottom-right of the display panel; the graph rendering itself is unchanged. See this screenshot:

Checklist

• Pull request has a descriptive title and context useful to a reviewer.
• Pull request title follows the [<catalog_entry>] <commit message> naming convention using one of the
  following catalog_entry values: FEATURE, ENHANCEMENT, BUGFIX, BREAKINGCHANGE, DOC,IGNORE.
• All commits have DCO signoffs.

UI Changes

• Changes that impact the UI include screenshots and/or screencasts of the relevant changes.
• Code follows the UI guidelines.

[Copilot]

🟡 Changes recommended

The zoom controls incorrectly disable zooming out within the effective extent, and the panel blocks native touch scrolling without providing touch panning.

2 open issues

• Preserve native touch scrolling when touch gestures are unsupported · New
• Track the effective zoom extent when disabling zoom controls · New

What changed in this PR

Updates canvas navigation with display-mode panning and visible zoom controls, building on the data-driven graph work while preserving editor gestures.

Changes:

• Enables left/middle-button panning in display mode and Ctrl/Cmd+wheel or trackpad-pinch zoom.
• Adds zoom-in, zoom-out, fit-to-view, and reset controls with bounded zoom.
• Extends the zoom context and test fixtures, and adds gesture-filter and scale-limit tests.

File	Description
canvas/​src/​test-utils/​hookWrapper.tsx	Adds stubs for the expanded zoom context.
canvas/​src/​hooks/​useZoom.ts	Adds interaction modes, zoom bounds, and button actions.
canvas/​src/​hooks/​useZoom.test.ts	Tests gesture filtering and scale-limit detection.
canvas/​src/​contexts/​ZoomContext.tsx	Exposes zoom actions, scale, and availability flags.
canvas/​src/​components/​panel/​ZoomControls.tsx	Adds the on-screen zoom toolbar.
canvas/​src/​components/​panel/​CanvasPanel.tsx	Integrates display-mode navigation and controls.
canvas/​src/​components/​editor/​EditorItemsPanel.tsx	Supplies the expanded context while retaining editor mode.

_{Review effort: Balanced}

[PhilippMatthes]

I hope I addressed the feedback appropriately. @ibakshay can you trigger the bot again so we make sure I didn't miss anything?

[Copilot]

🔵 Needs a closer look

At the canvas zoom limits, Ctrl+wheel or trackpad pinch gestures can zoom the entire dashboard page because their default behavior is not prevented.

No open issues 🎉

1 previously missed issue

In code that hasn't changed since last review

Prevent modified-wheel page zoom at scale limits

canvas/​src/​hooks/​useZoom.ts:145

With the new finite scale extent, d3-zoom ignores a fresh wheel gesture directed past a zoom limit without calling preventDefault(). Consequently, starting Ctrl+wheel or a trackpad pinch while already at the minimum or maximum scale can zoom the entire dashboard page instead of remaining confined to the canvas. Cancel accepted modified-wheel events even when the scale cannot change, while continuing to leave plain wheel events untouched.

2 resolved since last review

• Track the effective zoom extent when disabling zoom controls
• Preserve native touch scrolling when touch gestures are unsupported

_{Review effort: Balanced}

[PhilippMatthes]

Thanks for the re-review — addressed the "Prevent modified-wheel page zoom at scale limits" finding in 3bc29f9.

You're right: d3-zoom's wheeled only calls preventDefault when a modified wheel actually changes the transform. With the finite view-mode scaleExtent, a ctrl/⌘+wheel or trackpad pinch directed past the min/max clamps to an unchanged scale and d3-zoom hits its t.k === k early-return before noevent(event), so the browser's default page zoom fires.

Fix: a non-passive native wheel listener on the panel SVG now cancels the default for the modified wheels we claim, whether or not the scale changes, while a plain wheel is left untouched so it keeps scrolling the surrounding page. The listener is detached in the callback ref's cleanup. The decision is an exported pure predicate (shouldPreventWheelDefault) with unit coverage, plus integration tests that dispatch a ctrl+wheel at the max scale limit (asserting defaultPrevented) and after ref teardown.

[PhilippMatthes]

@ibakshay let the bot go zoop pls

[PhilippMatthes]

Related to #858 btw