Skip to content

Implement Atlas Controls#355

Merged
PauloMFJ merged 25 commits into
datacommonsorg:mainfrom
madebypxlp:paulo/atlas-controls
Jun 9, 2026
Merged

Implement Atlas Controls#355
PauloMFJ merged 25 commits into
datacommonsorg:mainfrom
madebypxlp:paulo/atlas-controls

Conversation

@PauloMFJ

@PauloMFJ PauloMFJ commented Jun 3, 2026

Copy link
Copy Markdown
Contributor

Implement Atlas Controls

Adds the floating control chrome for the Atlas (tldraw) canvas — a zoom control, export button, and a tool palette — plus the supporting design-system pieces (icons, tokens, typography, a Button size variant).

Controls component

  • New scopes/atlas/components/controls.tsx + .module.scss, rendered through tldraw's InFrontOfTheCanvas slot so it reads live editor state via useEditor while staying out of the canvas transform.
  • Zoom: in/out buttons + a live zoom readout. The displayed value is rescaled from the real zoom range onto a friendlier 0–200 scale via a new mapRange helper, and steps by a constant amount.
  • Tool palette: Select / Pan / Text, bound 1:1 to tldraw tool ids (select / hand / text), with the active tool highlighted.
  • Export: button in place (wiring to the export flow is a follow-up — see TODO below).
  • All three control groups are built on the shared Button element with per-state colorSchemes.

Atlas editor config

  • New scopes/atlas/config.ts centralizes the zoom config: MIN_ZOOM / MAX_ZOOM and an evenly-spaced ZOOM_STEPS array generated from a single display-step value (keeps the on-screen increment constant), plus the display range.
  • atlas.tsx now caps the camera zoom (setCameraOptions), styles the built-in text tool to match the design system, and tints the selection stroke from the accent token (updateThemes). Selection colours are also wired through --tl-color-* overrides in atlas.module.scss.

Design system

  • Icons: cursor, hand, insert_text, minus, plus.
  • Button: new required size prop ('small' | 'large') → data-size.
  • Tokens (colors.json): added control-surface,
    control-surface-hover, control-accent, control-accent-content,
    control-content, and surface-content; renamed card-shadowshadow.
  • Typography: renamed the mixins onto a clearer scale —
    type-label → type-label-large, type-tab → type-label-small and unified previous type-tab with type-label-small; all usages
    updated.

Follow-ups

  • Controls export button is a no-op (// TODO: Support export here) — needs wiring to the canvas export API.

Testing

  • pnpm lint (type-check + Biome + Stylelint) and pnpm build pass.
  • Verified controls render over the canvas; zoom in/out, tool switching, and active-tool highlighting work; selection stroke uses the accent colour.

@PauloMFJ PauloMFJ requested a review from a team as a code owner June 3, 2026 16:43
@PauloMFJ PauloMFJ marked this pull request as draft June 3, 2026 16:44

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

Copy link
Copy Markdown

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 introduces the 'Atlas' canvas feature, integrating tldraw to provide an interactive, camera-tracked workspace. It establishes a comprehensive set of reusable components, including a customizable Button, a loading Skeleton, and a flexible Card system supporting text and chart variants (with tabbed line-chart and table views powered by recharts). Additionally, the PR updates the frontend style guides to enforce category-first naming and flat-by-default folder structures, introduces several SVG icons, and adds utility functions and hooks for layout and resize handling. I have no feedback to provide as there are no review comments.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

@nick-nlb nick-nlb self-requested a review June 4, 2026 16:26
@PauloMFJ PauloMFJ marked this pull request as ready for review June 8, 2026 09:07
nick-nlb
nick-nlb previously approved these changes Jun 8, 2026

@nick-nlb nick-nlb left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Thank you Paulo! Some comments, but they don't have to hold up the merging of this (however, the ones we don't do here, coud we flag to be addressed for a future PR)?

Comment thread dataweaver/apps/web/src/components/scopes/atlas/config.ts
Comment thread dataweaver/apps/web/src/styles/includes/_typography.module.scss
Comment thread dataweaver/apps/web/src/components/scopes/atlas/config.ts
@PauloMFJ PauloMFJ self-assigned this Jun 8, 2026
@PauloMFJ PauloMFJ merged commit 2e207d6 into datacommonsorg:main Jun 9, 2026
7 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