[NishiPhalke]

Summary

Add Region, Navigate, and Interaction controls above the web browser for the active session. Region entry accepts coordinates; navigation offers left/right pan and zoom in/out with magnitude selectors. Interaction keeps the shared Pan, Zoom, and Highlight text buttons.

BrowserView composes the existing shared controls without changing the BrowserControls components in the UI package. The web app adds its workspace UI dependency and retains BigBed registration so previously saved test tracks can restore.

Tests cover navigation and persisted interaction-mode edits: selecting Pan saves it, then selecting Highlight saves a second updated snapshot. They read coordinates from RegionControls and locate the browser SVG independently of navigation icons. Existing save-status render budgets remain unchanged.

Workspace verification passed with pnpm verify --concurrency=1. React Doctor reports 100/100 with no issues. This PR is independent of session-management PR #336.

Manual verification

1. Run pnpm dev and open /browser/local.
2. Enter coordinates through Region, then try left/right pan and zoom in/out.
3. Hover and select Pan, Zoom, and Highlight; verify the drag behavior.
4. Wait for Saved, reload, and confirm the region and interaction mode restore.
5. Check the toolbar wraps at narrow widths.

Addresses #338

[vercel]

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

Project	Deployment	Actions	Updated
genomebrowser	Ready	Preview	Oct 15, 2026 2:28pm UTC

[github-actions]

React Doctor found no new issues. 🎉

_{Reviewed by React Doctor for commit 4f70540.}

[JaiiR320]

Thanks Nishi, this is looking close. One question on packages/ui/src/BrowserControls/selectionControls.tsx: what was the reasoning for switching the Pan/Zoom/Highlight toggles to icon-only buttons with one-word tooltips? Since it's the shared genomebrowser-ui component, it changes every app that embeds it, and SelectionControls.md and ControlToolbar.md still describe the text labels and the "Drag to…" tooltips. Could we move that change into its own PR so we can discuss it separately and keep this one focused on #338?

[NishiPhalke]

Thanks Nishi, this is looking close. One question on packages/ui/src/BrowserControls/selectionControls.tsx: what was the reasoning for switching the Pan/Zoom/Highlight toggles to icon-only buttons with one-word tooltips? Since it's the shared genomebrowser-ui component, it changes every app that embeds it, and SelectionControls.md and ControlToolbar.md still describe the text labels and the "Drag to…" tooltips. Could we move that change into its own PR so we can discuss it separately and keep this one focused on #338?

It was

Thanks Nishi, this is looking close. One question on packages/ui/src/BrowserControls/selectionControls.tsx: what was the reasoning for switching the Pan/Zoom/Highlight toggles to icon-only buttons with one-word tooltips? Since it's the shared genomebrowser-ui component, it changes every app that embeds it, and SelectionControls.md and ControlToolbar.md still describe the text labels and the "Drag to…" tooltips. Could we move that change into its own PR so we can discuss it separately and keep this one focused on #338?

It was done on Mansi's suggestion. I will revert the change in this PR and keep it Pan/Zoom/Highlight

[NishiPhalke]

Thanks Nishi, this is looking close. One question on packages/ui/src/BrowserControls/selectionControls.tsx: what was the reasoning for switching the Pan/Zoom/Highlight toggles to icon-only buttons with one-word tooltips? Since it's the shared genomebrowser-ui component, it changes every app that embeds it, and SelectionControls.md and ControlToolbar.md still describe the text labels and the "Drag to…" tooltips. Could we move that change into its own PR so we can discuss it separately and keep this one focused on #338?

It was

Thanks Nishi, this is looking close. One question on packages/ui/src/BrowserControls/selectionControls.tsx: what was the reasoning for switching the Pan/Zoom/Highlight toggles to icon-only buttons with one-word tooltips? Since it's the shared genomebrowser-ui component, it changes every app that embeds it, and SelectionControls.md and ControlToolbar.md still describe the text labels and the "Drag to…" tooltips. Could we move that change into its own PR so we can discuss it separately and keep this one focused on #338?

It was done on Mansi's suggestion. I will revert the change in this PR and keep it Pan/Zoom/Highlight

done

[JaiiR320]

Thanks for restoring the text buttons. Looks good.

[JaiiR320]

Thanks Nishi, this is looking close. One question on packages/ui/src/BrowserControls/selectionControls.tsx: what was the reasoning for switching the Pan/Zoom/Highlight toggles to icon-only buttons with one-word tooltips? Since it's the shared genomebrowser-ui component, it changes every app that embeds it, and SelectionControls.md and ControlToolbar.md still describe the text labels and the "Drag to…" tooltips. Could we move that change into its own PR so we can discuss it separately and keep this one focused on #338?

It was

Thanks Nishi, this is looking close. One question on packages/ui/src/BrowserControls/selectionControls.tsx: what was the reasoning for switching the Pan/Zoom/Highlight toggles to icon-only buttons with one-word tooltips? Since it's the shared genomebrowser-ui component, it changes every app that embeds it, and SelectionControls.md and ControlToolbar.md still describe the text labels and the "Drag to…" tooltips. Could we move that change into its own PR so we can discuss it separately and keep this one focused on #338?

It was done on Mansi's suggestion. I will revert the change in this PR and keep it Pan/Zoom/Highlight

done

Ah ok, maybe open a pr to add this back, just wanted to keep the blast radius for this change small