Annotation load from config and display

[JulieWinchester]

PR builds on #17 and that PR should be reviewed/decided on first.

This PR:

• Enables loading annotations as part of a source object.
• Since we expect MorphoSource users (and other users) to start using Aleph loading annotations on initial model viewing, the viewer should be capable of showing annotations in the default/scene tab. So this adds an annotation toolbar similar to what SketchFab uses for interacting with annotations in “view-only” mode. It also cleans up the UI for the annotation tab somewhat.
• Speaking of the left-hand tab menus, they’ve been getting a little unwieldy as more functionality gets added in. Also, it would be ideal for most users to be able to fully interact with the viewer without ever needing to use the left-hand menu (since it’s collapsed by default in UV). So this also adds a little control toolbar in the top right for toggle settings and recenter button.
• Related to adding the toolbar, this removes the Leva source setting and brings that in-app. It also reconfigures how sources can be specified in config, giving the Viewer element a choice of either a src attribute (when users should only be exposed to one model or set of models) or a srcCollection attribute (for selecting from different sets of models, this is shown in the demo).
• Swaps the colors for selected annotation - selected is now white, unselected is black. I think this is more consistent with how the rest of the UI treats selected annotations.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
aleph-r3f	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 27, 2025 5:48pm

[Copilot]

Pull Request Overview

This PR enhances the viewer's annotation capabilities and refines the UI for model selection and scene interaction.

• Enables loading annotations from a source configuration and displays them using a new annotation toolbar.
• Introduces a control toolbar for toggling scene components, updates various UI components, and revises state management in the store.
• Reorganizes files by adding new components (e.g., Toolbar, Dropdown, SourceSelector) and removing obsolete ones.

Reviewed Changes

Copilot reviewed 25 out of 26 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/components/ui/tooltip.tsx	Adds an optional "side" prop to configure tooltip placement.
src/components/ui/toolbar.tsx	Introduces reusable toolbar components for UI controls.
src/components/ui/dropdown.tsx	Creates a new dropdown component for annotation selection.
src/components/ui/button.tsx	Adds a new "iconSm" variant to the button component.
src/components/tab.tsx	Simplifies tab layout by removing an unused DisplayControls import.
src/components/source-selector.tsx	Implements source selection with redundant state update call.
src/components/scene-tab.tsx	Updates scene tab to incorporate new source and camera selectors.
src/components/rotation-controls-selector.tsx	Adds a boolean selector for rotation controls.
src/components/gltf.tsx	Switches from primitive to Clone for glTF model rendering.
src/components/control-toolbar.tsx	Provides a new control toolbar for scene reset and toggling views.
src/components/annotation-tools.tsx	Updates annotation tool behaviors based on a view-only mode.
src/components/annotation-toolbar.tsx	Creates annotation navigation toolbar with dropdown selection.
src/components/annotation-tab.tsx	Adjusts layout and text capitalization in the annotation tab.
src/Store.ts	Renames and adds state properties for rotation controls and source collections.
src/App.tsx	Revises config usage for single and multiple sources, and updates effect hooks.

Files not reviewed (1)

• package.json: Language not supported