Skip to content

feat(onboarding): tour of the UI for first-time users - #1391

Draft
Dhruv-0-Arora wants to merge 38 commits into
devfrom
darora1/218/ui-tour
Draft

feat(onboarding): tour of the UI for first-time users#1391
Dhruv-0-Arora wants to merge 38 commits into
devfrom
darora1/218/ui-tour

Conversation

@Dhruv-0-Arora

@Dhruv-0-Arora Dhruv-0-Arora commented Jul 8, 2026

Copy link
Copy Markdown
Collaborator

SYNTH-218

Onboarding users onto the new UI. Helping them navigate through using Synthesis and understand the different parts of the simulator.
Certain onboarding modules block clicking anything on the screen except the TourCard itself.

Note

Onboarding is only for the first time you open the simulator. To see it, you must clear your preferences.

Component UI:
Screenshot 2026-07-08 at 2 21 13 PM

Screenshot 2026-07-16 at 6 33 37 PM

In addition, this PR adds the new Library modal. This modal sorts each robot and field by year in addition to adding their thumbnails.

Screenshot 2026-07-16 at 6 34 06 PM

Important

Some PRs that have worked on the InitialConfigPanel may have been lost in merging. Ensure your PRs have been merged in and not silently merged out.


Before merging, ensure the following criteria are met:

  • All acceptance criteria outlined in the ticket are met.
  • Necessary test cases have been added and updated.
  • A feature toggle or safe disable path has been added (if applicable).
  • User-facing polish:
    • Ask: "Is this ready-looking?"
  • Cross-linking between Jira and GitHub:
    • PR links to the relevant Jira issue.
    • Jira ticket has a comment referencing this PR.
      Signed-off-by: Dhruv Arora dhruv.arora1@autodesk.com

Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>
Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>
Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>
@Dhruv-0-Arora Dhruv-0-Arora self-assigned this Jul 8, 2026
@Dhruv-0-Arora
Dhruv-0-Arora changed the base branch from feat/63/ui-redesign to dev July 10, 2026 22:38
@Dhruv-0-Arora
Dhruv-0-Arora changed the base branch from dev to feat/63/ui-redesign July 10, 2026 22:44
Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>
Thread structured per-asset `year` and optional `thumbnail` from the
manifest through to cached assets so the asset library can group and
preview assets:

- Widen the manifest schema (ManifestFileEntry) with year/thumbnail.
- Derive year (parsed from filenames at build time) and resolve a
  sibling thumbnail path in update_manifest.ts.
- Expose both on DefaultAssetInfo, resolving the thumbnail to a
  servable URL.
- Persist them onto MirabufCacheInfo via cacheRemote/storeInCache so
  downloaded assets retain the metadata; older cached entries still
  deserialize since the fields are optional.
Replace the docked ImportMirabufPanel with a large centered LibraryModal
that lists assets by competition year, matching the Figma design:

- Year tabs (descending, with an "Other" tab for undated assets) over a
  card grid that merges each year's robots and field, with thumbnail
  placeholders, a cached badge, and spawn/download/delete affordances.
- Keep Saved (cached), Autodesk Hub (APS), and Import-from-File as
  secondary sections so no functionality is lost.
- Extract spawnCachedMira and the remote/APS/download-all flows into a
  shared librarySpawnActions module.
- Migrate all call sites from openPanel to openModal; drop the Library
  from the panel mutual-exclusion group and replicate the
  block-spawn-while-configuring guard in openModal; defer the
  Import<->Library handoff a tick to avoid the single-modal clobber.
- Advance the onboarding tour on a new modal-open trigger and update the
  step copy to reference year tabs.
Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>
Encapsulate the APS state, event subscriptions, and spawn handler in
AutodeskHubAccordion so the Library body only deals with default/cached
assets. Also fix DownloadButton using the delete icon.
The deployed manifest had no year fields, so every asset fell into the
single 'Other' tab. Regenerate the asset pack with update_manifest.ts to
write year (and thumbnail) metadata, and fix the script's basepath case
(Mira -> mira) so it targets the actual served directory on case-sensitive
filesystems.
…previews

Fusion embeds a 250x250 PNG thumbnail in every mira file's metadata, which
was going unused (per rutmanz's PR note). Extract it at manifest-build time
into a sibling thumbnails/<name>.png and reference it from the manifest, so
library cards show real asset renders instead of placeholder icons. The
assembly is already decoded for GUID/name normalization, so this adds no
extra parsing.
Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>
Informational tourcards prevent clicking anything on the screen except
the tourcard itself. This commit also modifies the structure of some
tourcards to help improve the flow of onboarding
Insert a "Set Up Your Assembly" card between "Choose a Robot" and
"Select an Assembly". It points at the Assembly Setup panel and tells the
user to pick an input scheme or press Finish, which auto-assigns the
Ernie (WASD) scheme. The step advances on ConfigurationSavedEvent.

Anchor it to the input-scheme list rather than the panel root, whose
bounding box is widened by the transform gizmo control. Also re-sync the
Popper position in a short burst after an anchored step mounts: the panel
slides in via a CSS transform that fires no resize event, which otherwise
leaves the callout measured against its pre-animation position.
@Dhruv-0-Arora
Dhruv-0-Arora force-pushed the darora1/218/ui-tour branch 2 times, most recently from 682466f to 6848d4f Compare July 16, 2026 17:16
@Dhruv-0-Arora
Dhruv-0-Arora marked this pull request as ready for review July 17, 2026 00:56
@Dhruv-0-Arora
Dhruv-0-Arora requested review from a team as code owners July 17, 2026 00:56
@Dhruv-0-Arora
Dhruv-0-Arora requested review from RoushilS and azaleacolburn and removed request for a team July 17, 2026 00:56
@Dhruv-0-Arora

Copy link
Copy Markdown
Collaborator Author

@RoushilS I changed the order to fields -> robots
I'm a bit hesitant to add a watermark for fields vs robots because I feel that on the mobile view that might add a bit of complexity. I think it is pretty clear with the thumbnails whether an item is a field or robot

…1/218/ui-tour

# Conflicts:
#	fission/src/ui/components/TopBar.tsx
#	fission/src/ui/components/topbar/ConfigureControls.tsx
@RoushilS

Copy link
Copy Markdown
Contributor

As soon as you open for the first time, the first tip in the tour is already there, which can feel abrupt for the user. I think that the tour should be introduced. Perhaps it should start with a central welcome modal, with the options start tour or skip? Let me know if that makes sense.

Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>
Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>
Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>
Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>
Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>
Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>
@Dhruv-0-Arora
Dhruv-0-Arora marked this pull request as draft July 24, 2026 20:17
… & download

Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>
Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>
Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>
Base automatically changed from feat/63/ui-redesign to dev July 29, 2026 23:14
Dhruv-0-Arora and others added 6 commits July 30, 2026 09:50
Reconciles the onboarding/UI-tour work with dev's MainHUD redesign.

Conflict resolutions (union of both sides, nothing dropped):
- Synthesis.tsx: keep TourProvider/TourOverlay; honor dev's removal of
  WPILibConnectionStatus (superseded by the topbar CodeConnectionIndicator).
- StateProvider: keep our unconfirmedImport dep, drop dev-removed
  selectedConfigAssembly.
- UIProvider: keep our unsaved-config guard, adopt dev's
  closePanel(OVERWRITE) so mutually exclusive panels fire close events.
  Drop ImportMirabufPanel from the exclusion list (now a modal).
- TopBar/ConfigureControls: rebased our tour anchors onto dev's new
  TopBarButton/ConfigureSplitDropdown structure. AssemblySelect moved up
  to TopBar, so its anchor moved with it. Added an optional anchorRef to
  TopBarButton rather than wrapping buttons in extra DOM.
- ConfigureGamepieceIntakeInterface: took dev's rename/refactor to
  ConfigurationSubpanelComponent, re-applied our intake-show-zone anchor.
- AssemblySelection/ConfigurePanel: dev's CloseType.ACCEPT and addToast
  plus our LibraryModal target and tour ref.

ImportMirabufPanel stays deleted (replaced by LibraryModal). Verified its
command registrations, mobile entry point and URDF import work are all
covered; dev's duplicate spawnCachedMira in MirabufLoader was dead code
and is removed along with the import cycle it introduced.

Also: CloseType.Cancel -> CANCEL for dev's enum rename, and refreshed the
preferences snapshot to include HasSeenOnboardingTour alongside dev's
RenderScoreboard default.

Extracted MiraType into its own leaf module - tourSteps needs it at
module-eval time, and MirabufLoader's top-level await made it resolve as
undefined, breaking 11 test files. That bug predates this merge.

jolt: 716b476 (dev's pointer supersedes the local ccf6173).
…1/272/thumbnail-screenshot

Resolved conflicts:
- MirabufSceneObject.ts createMirabuf: kept both the incoming progress
  handle update / yieldToMain and our assemblyHash assignment.
- ProtectedZoneSceneObject.test.ts: kept our "@/mirabuf/*" alias imports,
  which already include the incoming "import type" change.
Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>
Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>
Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>
Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>
@Dhruv-0-Arora
Dhruv-0-Arora requested a review from rutmanz August 3, 2026 20:37
@Dhruv-0-Arora
Dhruv-0-Arora marked this pull request as ready for review August 3, 2026 22:28
@rutmanz

rutmanz commented Aug 5, 2026

Copy link
Copy Markdown
Member

I feel like if I'm going out of my way to ignore your tour it should go away instead of centering itself, or force explicit dismissal
image


image

Back button takes us to invalid state

image

@Dhruv-0-Arora
Dhruv-0-Arora marked this pull request as draft August 5, 2026 21:42
Conflicts resolved:

- fission/src/mirabuf/MirabufLoader.ts
  This branch moved `spawnCachedMira` out of MirabufLoader into
  ui/modals/mirabuf/librarySpawnActions.ts. Dev edited the old copy in
  place, so the textual merge tried to resurrect it. Kept it deleted and
  ported dev's three changes to the new home instead:
    * added `World.physicsSystem.deactivateGamepieces()` after
      `progressHandle.done()` (from "Allow gamepiece bodies to sleep",
      #1467) - this was the one behavior change at risk of being lost
    * dropped the `as RemoteSceneObjectId` / `as LocalSceneObjectId`
      casts, which no longer compile after "Use UUID-based scene object
      IDs" (#1463) removed those types in favor of `SceneObjectId`
  MirabufLoader.ts is therefore identical to this branch's version, since
  every dev change to that file lived inside the moved function.

- fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx
  Deleted on this branch, replaced by the year-grouped LibraryModal.
  Kept deleted. Dev's only change to it (passing an icon as JSX children
  rather than a `children=` prop) is already how LibraryModal writes it,
  so nothing needed porting.

Verified: tsc clean, `biome lint --diagnostic-level=error` clean, build
passes, 767 tests pass. The 3 failing multiplayer tests and the 2
obsolete MirabufLoader snapshots reproduce identically on a pristine
origin/dev checkout and are unrelated to this merge.
Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>
Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>
Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>
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.

3 participants