Dashboards

The dashboard file

layout: sits next to views:. Panels are in reading order; w is the number of columns (of 12) and h the height in row units (110 px each). A panel is {view}, {views: [...]} (several views as tabs inside the panel) or {text} (markdown). Under 900 px the grid is one column. Obsidian opens the same file and shows the panels as tabs.

layout:
  panels:
    - text: |
        ## Every track, computed from its runs
        Headlines are each producer's own newest number, never recomputed. **Passing** and **Pass rate** are
        rolled up: the newest run of each suite, summed through every child track (a parent shows its children's
        checks). Click a card, a bar or a track to narrow the whole page; click a run for its details.
      w: 12
    - { view: Headlines, w: 12, h: 5 }
    - { view: Tracks, w: 7, h: 5 }
    - { view: Runs by track, w: 5, h: 5 }
    - { views: [Latest runs, Pass rate by kind], title: Runs, w: 12, h: 5 }

<script type="module" src="/vendor/data-ui/data-ui.js"></script>
<script type="module" src="/vendor/data-ui/dashboard.js"></script>

<data-dashboard src="views.base"></data-dashboard>

Several datasets, linked, and roll-ups

datasets: names each data file; a view picks one with from: (default: the file's own data:). links: says which property of one dataset holds the ids of another's rows. A link filters, it never adds a column: "show the runs of the tracks that pass the rail" reaches the runs panel as an ordinary filter on track, visible in that panel's Filter menu. Links work both ways and chain (kpis → tracks → runs).

datasets:
  runs: ../vibetracks-dashboard/runs.json
  tracks:
    data: ../vibetracks-dashboard/tracks.json
    tree: { parent: parent }
    facets: [area]
    rollup:
      from: runs
      latest: { by: t, per: suite }
      values:
        checks_passed: { property: passed, summary: Sum }
        checks_run: { property: checks, summary: Sum }
        pass_rate: { property: passed, summary: Ratio, per: checks }
links:
  - { from: runs.track, to: tracks.id }

• A roll-up is a computed column on a dataset with a tree:: rollup: {from, latest: {by, per}, values: {<column>: {property, summary, per}}}. It reads one direct link to from, keeps the newest row per per when latest: says so, and sums through the tree, so a parent shows its children's numbers.
• summary is a Bases summary name, or Ratio: Σproperty / Σper, a ratio of sums, never a mean of ratios.
• Its cells say what they are: {value, basis: derived, n, note}, drawn hollow like an estimate. A producer's own headline number is never recomputed.
• A roll-up reads only its source dataset's own filters, so ticking a track in the rail does not shrink the totals it is ranked by.

One rail, click to filter

• One rail. Each dataset's facets: is its part of the rail. Its counts include every other restriction, so a count says what a tick would leave. The rail's edge drags, like every side panel.
• What a panel shows: its dataset's rail filter, every selection other panels made on it, and a semi-join from every other restricted dataset that has a link path to it. Its own filters: still apply.
• Click to filter. select: <property> on a view: a click on a bar, a card or a row selects that property's values for the whole dashboard; clicking again clears it. The panel you clicked ignores its own selection, so you can click another bar (Superset's and Mosaic's rule). Chips above the grid show each selection.
• Drill down. A click on a panel without select: opens one side peek for the whole dashboard, resizable like every side panel.
• The URL holds it all: ?health=green&runs.kind=tests for the rails, #s.<panel>=track:a,b for selections, #p.<panel>=<view> for a panel's tab. Reload and Back restore it. (The demos here are no-url, so they leave this page's address alone.)

views:
  - type: kpi
    name: Tuned against the oracle
    from: robots
    select: robot_id
    groupBy: { property: robot }
    kpi:
      value: { property: tuned_tracking_rms }
      compare: { against: oracle_tracking_rms, better: lower, neutral: 0.05 }
  - type: chart
    name: Gain vs error
    select: robot_id
    chart:
      mark: { type: point, size: 70 }
      encoding:
        x: { field: kp, scale: { type: log }, title: Kp }
        y: { field: tracking_rms, scale: { type: log }, title: Tracking RMS (mrad; mm for belt axes) }
        color: { field: rung, title: Rung, sort: [factory, analytic, tuned, oracle] }
        shape: { field: robot, title: Robot }
    hover: { title: joint, fields: [robot, rung, kp, kd, tracking_rms, stop_p90, feedforward] }
  - type: chart
    name: Error by rung
    select: rung
    chart:
      mark: bar
      encoding:
        x: { field: rung, sort: [factory, analytic, tuned, oracle], title: null }
        y: { field: tracking_rms, aggregate: median, scale: { type: log }, title: Median tracking RMS }
        color: { field: rung, sort: [factory, analytic, tuned, oracle], legend: null }

The card catalog

A card is a view: every card is a type: in views:, placed by layout: like a table or a chart. Only its own keys are new.

views:
  - type: playback
    name: Playback
    playback: { speeds: [0.25, 0.5, 1, 2], range: true, readout: true }
  - type: timeseries
    name: Error over time
    filters: 'joint == "elbow_joint" && situation != "target"'
    timeseries:
      x: t
      y: err_mrad
      series: situation
      unit: mrad
      rules: [{ y: 5, label: "gate 5 mrad", tone: bad }, { y: -5, tone: bad }]
      bands: [{ y: [-5, 5], label: tolerance, tone: good }]
  - type: video-compare
    name: Overlay
    from: media
    overlay: { by: situation, a: tuned, b: factory, mode: wipe, split: 0.5 }
  - type: trajectory
    name: Tool path (XZ)
    from: tool
    trajectory: { x: px, y: pz, series: situation, target: target, t: t, trail: true, tolerance: 0.005 }

One clock, synced

Time is one more piece of dashboard state. One clock per dashboard sets t; every time-aware card follows it: a video seeks, a time series draws its playhead, a trajectory and a 3D scene move their marker. The playback card is its control. #t=3.20 in the URL lands a shared link on the same instant.

style:
  chrome: minimal
  numbers: { digits: 3, compact: true }
  palette: { target: "#8b9099", factory: "#e8743b", tuned: "#2a78d6", oracle: "#19a979" }
clock:
  data: samples
  time: t
  loop: true
  fps: 30