Appearance
Product tour & onboarding
Atlas ships with a built-in product tour and a persona-aware onboarding flow that surface on first sign-in. This page documents what they do, how to control them, and how to extend them if you're contributing.
What the tour does
The tour is a guided sequence of spotlights over the workspace. Each step highlights a panel or surface, shows a short title and body, and waits for the user to click "Next". Visual implementation: frontend/src/components/onboarding/ProductTour.jsx. Step definitions: tourSteps.js.
The tour targets DOM elements via data-tour="<id>" attributes. Currently 8 steps:
| Step ID | Target | What it explains |
|---|---|---|
sidebar | [data-tour="sidebar"] | Left rail: panel switching, live-feed counters, the user menu |
globe | [data-tour="globe"] | The 3D world: vessel/aircraft/news layers, click to focus |
timeline | [data-tour="timeline"] | Bottom strip: time scrubbing, event filters |
marketPanel | [data-tour="market-panel"] | Market panel: quotes, charts, fundamentals |
newsFeed | [data-tour="news-feed"] | News feed: filters, screens, alert hand-off |
aiChat | [data-tour="ai-chat"] | AI chat: context-aware questions about the active panel |
watchlist | [data-tour="watchlist"] | Watchlist: persistent list, alert composer |
securitySearch | [data-tour="security-search"] | Header search: command-bar power moves |
Some steps (market, news, ai, watchlist) require switching the left tab first — the tour handles this automatically via the leftTab field in tourSteps.js.
Tour copy lives in i18n: keys onboarding.tour.<step>Title / onboarding.tour.<step>Body in frontend/src/i18n/en.json (mirrored across all six locales).
Persona-aware onboarding
Before the tour, new users see a brief persona picker:
- 👤 Trader — emphasizes Market panel, Watchlist, Alerts.
- 🛰 OSINT analyst — emphasizes Globe, Timeline, News.
- 📰 Journalist — emphasizes News, Timeline, exports.
- 💼 Investor — emphasizes Security dashboard, Portfolios.
- 🔬 Researcher — emphasizes Timeline, Charts & graphs, exports.
The picked persona reorders the recommended panels in the sidebar (cosmetic only — every user can access every feature). It also seeds a starter checklist (onboarding.checklist.* keys) — three or four tasks for that persona to try.
The persona is stored on the user record and can be changed later in Settings → Profile.
Onboarding checklist
After the tour, a small checklist drawer appears with persona-specific starter tasks. Examples:
- For traders: "Add 5 symbols to your watchlist", "Set your first price alert", "Open the AI chat and ask about a watchlist symbol".
- For OSINT: "Find a vessel by name", "Save it to your subset", "Replay the timeline".
Items mark complete as the user performs the underlying action — no manual ticking. The checklist is dismissable and can be re-opened from the user menu.
Replaying the tour
From the user-menu avatar in the header, choose Replay tour. The same step sequence runs again. Useful after major updates that change layout.
The tour can also be triggered programmatically from URL: ?tour=1 re-runs the tour on next dashboard load.
Skipping the tour
The first-run tour is skippable on every step. Skipping marks the user record tour_completed: true so it doesn't surface again. The persona picker is similarly skippable; the chosen persona defaults to "Trader" if skipped.
Adding a step (for contributors)
To add a new spotlight:
- Add
data-tour="<id>"to the target element. - Add an entry to
STEPSin tourSteps.js — settarget,placement,leftTab(if the step requires switching the left rail),titleKey, andbodyKey. - Add the matching i18n keys to all six locales in frontend/src/i18n/.
- Document the step here.
Contributing notes are also in frontend/src/components/onboarding/README.md.
Tour vs. docs
The tour is a 60-second orientation. This documentation site is the durable reference. After the tour:
- For "how do I do X?" — start with How do I….
- For "what does panel Y do?" — start with Functionality.
- For "what's the recommended layout for my role?" — start with Guides by role.
Related
- Workspace tour — the same content as the in-app tour, but in markdown.
- Quick Start — first-run setup before the tour appears.
- Keyboard shortcuts — the next thing to learn after the tour.