Next dashboard components

A Widget is one visual block in a layout row, rendered by a named dashboard component. The Next dashboard (ui/dashboard, published by dashboard-v2 or heat-system-next-dimension) has 20 of them. Each binds to channels in the data service payload through the Layout.

Configuration and payloads differ from Legacy components even when the same React component renders underneath. Next is the current generation. Legacy is kept for existing templates.

Concepts (realms, channels, direct ingestion): Next data service and direct ingestion. The layout document: Layout reference.

How wiring works

A runner or system-utils node publishes $heat-dataservice (see the dashboard-v2 upstream contract).
A layout column sets "component": "<ComponentId>" (for example MapDisplay) plus a configuration block with name, titleContent, channels and the widget’s own options.
The component’s data-service wrapper (for example MapDisplayDS) loads channel data for the realm in view and samples it at the current playback time.
Widget options (for example mapDisplayItem or composableChartItem) live in the layout configuration, not in the channel payload.

Component ids in a layout are not always the same as Legacy mount ids, though many names match.

Component manifest (build-time)

Building ui/dashboard runs npm run build:manifest, which writes dist/dashboard-component-manifest.json. The source of truth is ui/dashboard/src/dashboard-manifest/registry.ts, which records each component’s channel shapes, widget config key and migration status.

Dataservice migration

Full status table, reference JSON paths and notes on partial and layout-only widgets: Dataservice migration status.

All components (20)

Component	Widget config key	Migration	Doc
BarChart	`barChartItem`	migrated	bar-chart
CircuitStats	`circuitStatsItems`	migrated	circuit-stats
CognitiveLoad	`cognitiveItem`	migrated	cognitive-load
CognitiveLoadBreakdown	`cognitiveLoadBreakdownItem`	migrated	cognitive-load-breakdown
Comms	`commsItem`	migrated	comms
ComposableChart	`composableChartItem`	migrated	composable-chart
CustomRenderer	`customRendererItem`	layout-only	custom-renderer
EyeTracking	None	migrated	eye-tracking
EyeTrackingContainer	`eyeTrackingItem`	migrated	eye-tracking-container
FlightPath	`flightPathItem`	migrated	flight-path
ImpactHeatmap	None	migrated	impact-heatmap
LeaderBoard	`leaderBoardItem`	migrated	leader-board
MapDisplay	`mapDisplayItem`	migrated	map-display
Modal	`modalItem`	migrated	modal
ProgressScore	`progressScoreItems`	migrated	progress-score
ResponseTime	`responseTimeItem`	migrated	response-time
StatsSummary	`statsItems`	migrated	stats-summary
TacticalMap	None	migrated	tactical-map
TimelineChart	`timelineItems`	partial	timeline-chart
VideoPlayback	`videoPlaybackItem`	migrated	video-playback

TimelineChart is partially migrated. Use ComposableChart for new layouts. CustomRenderer binds no channels and is documented as layout only.

Reference JSON (maximal examples): tools/arbex/reference/next/<ComponentId>.json

Arbex RAG (per-widget): tools/arbex/rag/reference/components/

Authoring new pages

Follow the structure of an existing component page such as bar-chart. Document the layout configuration, the channel shape and the payload fields separately, and add the component to the registry with a docsPath that matches the new page.

HEAT documentation team. Last updated 2 October 2026.

Opens your browser's print dialog. Choose "Save as PDF" as the destination.