UI Reference Guide¶

A widget-by-widget description of every interface component in Decision Theatre.

Landing Page¶

The entry point of the application.

Onboarding Walkthrough¶

A small draggable card (bottom-center) with a spotlight ring on the relevant UI element, progress dots, Back / Next, and Skip tour. Runs automatically the first time the app loads in a browser profile; restart it anytime from the landing page's Guided Tour button. Covers: Welcome → My Sites → Create a Site → Define Your Boundary → Your Site on the Map → Indicators & Scenarios → View Modes → Documentation.

Your Sites Page¶

Reached via the My Sites icon (pin) in the header.

Site Card¶

Create Site Wizard¶

Three steps, tracked by a stepper in the header (Method → Boundary → Details); editing an existing site skips straight to a single Details step.

Step 1: Method¶

Step 2: Boundary¶

Step 3: Details¶

Main Application (Map View)¶

Header Bar¶

Map View¶

Per-Pane Map Toolbar¶

Floating vertical toolbar, left edge of each map pane:

Per-Pane View-Mode Toolbar¶

Floating toolbar, bottom-right of each pane -- buttons for every other view mode than the one showing (Map / Chart / Dial / Table). In grid view this also offers Calculation details, Focus this pane (maximise), a 2x2 / 2x3 columns toggle (first pane only), and Remove pane (extra panes only).

Single and Grid Views¶

• Single view -- one pane fills the content area; its indicator panel opens automatically on the right. Use the grid icon to switch to grid view.
• Grid view -- 2x2 or 2x3 grid of independent panes, each with its own factor/scenario/view-mode selections. A shared top toolbar can set all panes to one view mode at once, add panes, and open Targets.

Indicator Panel¶

Slides in from the right (drag its left edge to resize, 320-720px).

View Modes¶

Switch a pane's view mode from its per-pane toolbar. See Scenario Comparison for how to configure each one.

Mode	Shows
Map	Choropleth map, described above
Chart	Line or boxplot comparison of Reference/Current/Target for one factor, or a whole Variable Type category
Dial	Gauge showing Current and Target relative to the Ecological Reference band
Table	Site Aggregate Calculation -- area-weighted average, with an optional per-catchment breakdown

Targets Panel¶

Opened via the Targets button in the grid-view toolbar, once a site has indicators. It docks into the right-hand side panel -- the same slot the single-factor controls use, so only one of the two is open at a time -- and the views shrink to make room rather than being covered. The dials, charts and maps stay visible while you drag, which is the point: you are watching them answer the slider.

Only the sliders you actually move are submitted. Dragging one back to where it started clears the target you set for it.

Live update¶

Every target edit costs a recalculation that rescores each catchment in the site, so its cost grows with how many catchments the site has.

The box is ticked by default on sites of 20 catchments or fewer, and cleared by default on larger ones. Ticking or clearing it yourself replaces that judgement permanently: your choice is remembered across sites and sessions, and the catchment count stops being consulted. Turn it on for a large site if your machine and connection can keep up; turn it off for a small one if you would rather not recalculate mid-drag.

With live update on, a drag never queues up a backlog of requests. At most one recalculation is in flight at a time, and movement made while it runs collapses into a single follow-up, so the result always converges on the value you actually let go at.

Indicators Page¶

Reached via the header's Indicators icon.

Boundary Edit Mode¶

Toggled from the header's pencil icon, map page only.

Edits auto-apply as you go -- there is no separate save step.

Navigation Flow¶

Landing Page
├── Guided Tour (onboarding walkthrough overlay)
├── Explore → Map View (no site)
├── Demo tour cards → Map View (read-only demo site)
├── Partnership Page
│   └── Back to Landing
└── My Sites
    ├── Create New Site → 3-step wizard → Map View
    └── Site Card (click) → Map View
        ├── Home icon → Landing Page
        ├── My Sites icon → Your Sites
        └── Indicators icon → Indicators Page