Skip to content

bug(data-weaver): Move multi-selection UI to OnTheCanvas slot - #451

Merged
beets merged 2 commits into
datacommonsorg:mainfrom
pablonoel:ui-z_index
Aug 25, 2026
Merged

beets merged 2 commits into
datacommonsorg:mainfrom
pablonoel:ui-z_index

Conversation

@pablonoel

@pablonoel pablonoel commented Aug 25, 2026 •

Copy link
Copy Markdown
Contributor

Clone of: #430

The multi-card selection bounding box (the blue border + action toolbar shown when 2+ cards are selected) was rendering above the prompt input and other page-level UI. This happened because the selection lived inside the InFrontOfTheCanvas portal, which uses z-index: $z-index-overlay (2) — above the prompt's z-index: $z-index-above-content (1).

Fixed by extracting the selection into its own OnTheCanvas tldraw component slot, rendered via a separate portal at z-index: $z-index-content (0) — the same stacking level as the cards themselves.

Changes Made

  • Moved selection/ subfolder out of in_front_of_canvas/ into a new on_the_canvas/ component folder
  • Created on_the_canvas/index.tsx — renders in a at z-index: $z-index-content
  • Removed from in_front_of_canvas/index.tsx
  • Registered the new OnTheCanvas component in ATLAS_COMPONENTS (tldraw slot) in config.ts
  • Updated comment in selection_foreground.ts to reference the new slot location
localhost_3000_(Desktop SM) (1)

Testing Done

Describe the steps you took to test these changes (please also list commands ran if possible).

  • Unit tests passed
  • Integration tests passed
  • Manual verification

Checklist

  • I have followed the style guidelines of this project.
  • I have commented my code, particularly in hard-to-understand areas.
  • My changes generate no new warnings.

Note: Only Maintainers can approve and merge PRs. Expected initial review time: 3 business days.

Move the multi-selection selection UI and its hooks/styles from InFrontOfTheCanvas into a new OnTheCanvas component. Added on_the_canvas index.module.scss and OnTheCanvas index.tsx which renders Selection only when multiple shapes are selected. Renamed selection files (selection.tsx, use_selection_* and styles) into the on_the_canvas folder and removed Selection from InFrontOfTheCanvas. Updated atlas config to register OnTheCanvas and adjusted overlay comment to reference the new slot.
@pablonoel
pablonoel marked this pull request as ready for review August 25, 2026 20:02

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request moves the custom multi-selection UI from the InFrontOfTheCanvas component to a new OnTheCanvas component, which is conditionally rendered when multiple shapes are selected. The configuration and comments have been updated accordingly to register and reference the new component. There are no review comments, and we have no additional feedback to provide.

@pablonoel pablonoel changed the title Move multi-selection UI to OnTheCanvas slot bug(data-weaver): Move multi-selection UI to OnTheCanvas slot Aug 25, 2026

@beets beets left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ty!

@beets
beets merged commit 0579862 into datacommonsorg:main Aug 25, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants