timescale.info#186 · Help in the app: a tour of the editor, and "?" tips (#172, part 2)
- timeline-app
- pull request
Closes #172, together with #185 (part 1, which this builds on: merge that first, and this PR then targets `main`). This covers the issue's "some kind of interactive tour" and the "?" buttons with tooltips around the site. ## The tour - **How it starts:** **Help** under the timeline now offers **Take the tour** and **Open the guide**. The help page has **Take the tour of the editor**, which opens `/editor?tour=1`. - **What it does:** it lights up the editor's main controls one at a time, with what each does: - the timeline; - adding moments and durations; - search and separating by tags; - time display, plugins and compare; - exact bounds; - saving and sharing; - Help itself. - **Moving through it:** **Next** and **Back** or the arrow keys, and Escape or **End tour** to stop. The last step opens the guide. - **Missing controls:** steps whose control isn't shown are left out, such as **Share** for a timeline that isn't on a server. - **Layout:** the card stays within the window, below the control or above it. The highlight follows scrolling and resizing. ## "?" tips - **In the editor (`src/help-tips.ts`):** 14 tips: - beside dialog headings: moment details, durations, separating, shifting/scaling, search, plugins, compare, time display, sharing, conflicts and pull requests; - beside sensitive-content labels, **Follow latest events** and **Group within**. - **Behaviour:** a tip shows on hover or keyboard focus, staying within the window, and works inside open dialogs. Selecting it opens the help about it: - on the website, the site's own `/help` in a new tab; - on the desktop, the connected server's help, in the system browser through the existing native command; - in the offline file, timescale.info's. - **Dialog focus:** a dialog that opens still focuses its first control, not the tip that now comes before it. Otherwise typing into the search dialog straight away would have gone to the "?". The moment-dialog test caught this. - **On the website (`HelpTip`):** - Sharing & settings: visibility, address, sensitive content, data retention, saved history and collaborators; - Account: account security and API keys; - the plugin library. The tips are CSS only. On phones the tooltip shows along the bottom of the screen, so it's never cut off. ## Tests - **`help.test.mjs`:** every tip, in the editor and on the website, leads to a help page and heading that exist. Every element the tips and tour attach to exists in the editor. - **`help-browser.mjs`**, in `browser.mjs`: - tips on hover and on keyboard focus inside a dialog; - opening the right help address; - the tour forward and back by button and arrow key, with the highlight around each control; - Escape ends it, and the end opens the guide. - **`next-platform.mjs`** in the browser: the help page's tour link starts the tour in the editor frame, and a website tip shows and links to its help. Locally: - **Passing:** 284 unit tests, typecheck, the main browser suite, the platform test (both halves), and the offline edition's test. - **Desktop:** the desktop bulk-edit test passes. In the real desktop app all 14 tips are present, and the tour runs its 11 steps. - **Checked by eye:** at desktop and phone widths.
Sources
Related
Open #186 · Help in the app: a tour of the editor, and "?" tips (#172, part 2) in the timeline