Insights demo
The portal's Insights page (apps/portal/src/app/dashboard/data/insights/)
has a demo: a finished board of sample athletes, drawn by the real chart
components, with a walk over it that explains what the page is for and how
to use it, from reading one chart to building one. It follows the Live Hub
demo (live-performance-hub.md, "First screen and
demo" to "Help and demo are one thing") where the two pages are alike, and
differs where they are not (see Differences from the Live Hub demo).
Where the demo opens
- The page's head: Watch the demo (an outline button between the quiet
"How it works" and the filled "New chart", the Live Hub head's order). While
the "All" tab shows the empty board, the head leaves it out: the empty
state offers it instead (
insights-empty-state.tsx). - "How charts work" (
InsightsWalkthroughModal): Watch the demo on the overview, See it in the demo under each chart type, which opens the demo on that type's tab without the walk. - The first-visit tour (
use-insights-tour.ts): a stop on "Watch the demo" between "How it works" and the click-to-advance "New chart". The tour id is stillportal-insights(product-guidance-backend.md).
The address
insights-demo-route.ts, read once when the demo opens:
| Address | Opens |
|---|---|
/dashboard/data/insights?demo=1 | The demo, its walk at the first station |
…?demo=1&station=focus | The walk at a station (INSIGHTS_DEMO_STATIONS) |
…?demo=1&type=ranking | The demo on a chart type's tab, without the walk |
/dashboard/data/insights?new=1 | The page with its builder open (the walk's last step) |
Opened from the page, the demo is an entry in the browser's history, and its
arrow goes back to the page. The demo needs nothing of the account, so it
opens while the profile is on its way or cannot be read; behind the server's
"no" to writeCustomCharts it is closed like the page.
The demo's data
demo-board.ts, pure and tested (demo-board.test.ts): ten sample athletes,
two athlete tags ("U19", "Senior squad"), three lifts, and seven saved charts,
every chart type at least once and one whose lift was rested through its
period (a chart without data keeps its place).
Every chart of the demo comes out of one generator, demoChart(request):
each athlete has a few traits (how fast, which way they are heading, how even
their sets are, how closely force and power move together), and a chart is
those traits seen through its request. The board's charts are fixed requests
(demoBoardRequests); a chart built in the demo's builder is the coach's own
request. So all charts tell one story: Jonas Weber, slowing down on the squat,
is also the athlete whose sets vary most.
The answers on the tiles are not written by hand: the real answer rules
(components/charts/chart-answer.ts) read them from the generated data. The
test holds the story against those answers ("Jonas Weber is trending down",
"Jonas Weber varies most", Mara König first in the ranking), so a change to
the traits that breaks a sentence of the walk fails by name.
A metric of the coach's catalogue picked in the demo's builder is drawn by
the family its key or name says it is (velocity, velocity loss, force, power,
jump height; catalogueMetric).
The walk
insights-demo-guide.ts, pure and tested (insights-demo-guide.test.ts):
nine stations, each a state of the screen (tab, builder open, the walk's own
chart on the board) set when the walk arrives there, and its stops: one
sentence each and a target to light.
| Station | What it shows |
|---|---|
board | What Insights is for; every chart leads with its answer |
tile | One tile: kicker, standfirst, key line; a chart without data (more) |
tabs | One question per chart type; each type's question (more) |
focus | "Expand" (pressed), the focus view, the strip of other charts |
spotlight | The spotlight search (pressed: pick an athlete), every chart lit, Clear |
new-chart | "New chart" (pressed) |
guided | The questions (pressed), then the guided steps while the card waits |
saved | The new chart first on the board, ringed |
own | "Build your own chart": leaves the demo for the page's builder |
A pressed stop leaves its target in use under the dim; what the press leads
to (the focus view open, an athlete spotlit, the builder open, a chart saved)
moves the walk on. The card's "Next" there does it for the coach. The card,
the dim and the lit target are the shared DemoWalk
(apps/portal/src/components/demo-walk.tsx), the same as the Live Hub
demo's. The card's X closes the walk and leaves the sample board to explore;
Step by step takes the walk up again where it was. Its "?" opens "How
charts work" on what the station shows (INSIGHTS_DEMO_HELP).
The walk lights tile parts by data-tile-part (kicker, answer, keys,
chart-tile-context.tsx) and the demo screen's own marks (data-demo,
data-demo-chart, data-demo-new; DEMO_MARK in the guide).
Nothing reaches the server
Every id of the demo carries the prefix demo: (components/charts/demo-ids.ts,
the Live Hub demo's prefix too). The demo screen (insights-demo.tsx) renders
the real ChartBoard, InsightsChartTile, FocusHost, SpotlightBar and
ChartBuilderDrawer inside ChartDemoProvider
(components/charts/chart-demo.tsx). Inside it, the places that would read
the coach's data or call the server answer from the demo instead:
| Where | Outside the demo | Inside it |
|---|---|---|
| Athlete names, tag members (chart header, Trend, Distribution, spotlight, recipe, selection size) | useUsers | useChartUsers: the demo's squad, the roster not loaded |
| Tag names | getTag | useChartTagOf: the demo's tags |
Who trained which lift (use-lift-activity.ts) | GET /history/scope | The demo's rows |
Exercise names of athletes' own exercises (useSelectedExerciseNames) | The athletes' exercises, read | The demo's lifts; nothing read |
The builder's preview (use-chart-preview.ts) | POST /charts/{type}/preview | demoChart, at once |
The guided flow's save (guided-flow.tsx) | saveFlatChart / saveProfileChart | The chart lands on the demo's board |
Chart links (chart-links.ts) | Open athlete, Velocity profile, Sessions | None for a demo athlete |
The guided steps leave out what would read or write the coach's own data: the whole-roster and whole-catalogue pickers, "Same as last chart", "Tag these athletes…", the ways into the full builder ("Build it yourself", "Adjust everything", "Always open the full builder"), and the builder's first-creation tour. The demo's tiles have no ⋯ menu and their headers no "change": the demo edits nothing. The demo's athletes are marked as having no photo, so no avatar asks the server.
Differences from the Live Hub demo
- No clock. The Live Hub demo's player (
demo-evening.ts) plays a session over time and holds still at a station. A board has no timeline: a station is a state of the screen, set when the walk arrives there. - No writing into the shared store. The Live Hub demo fills the live
stores, which are keyed by session, so its session sits beside the real
ones. The charts store (
@enode/core/charts/store.ts) is keyed by chart type and caches the coach's own charts; the demo keeps its charts in its own state and hands them to the board. - It opens with the walk. The Live Hub demo opens on a session that plays by itself; a board has nothing that plays.
- No drawn phone and no display: Insights runs on one screen.
TODO
- TODO: the guided steps are the only way to build a chart in the demo. The
full builder reads the roster and the catalogue in more places
(
scope-selection.tsx), which the seam does not answer yet. - TODO: below 1280 px some targets are folded away (the head's buttons go into the "…" menu on a phone); the walk then says the sentence over the dimmed page, as the Live Hub demo's does.
- TODO: no live browser test walks the demo yet (the Live Hub's is
tests/live/offline/71-demo-evening.live.test.ts).