Briefing Overview

A visual flight plan timeline showing lesson topics as waypoints along a dashed flight path — with optional timing tracking to keep ground briefings on schedule.

Ground briefings are where the lesson is set up, and their quality directly influences how much a student retains and can apply in the air. Without a visible structure, briefings can feel like a stream of information: students lose track of where they are in the content, and instructors lose track of time. Both outcomes reduce what gets transferred to the flight.

A visible agenda changes both dynamics. Students who can see the shape of the lesson before it starts arrive with accurate expectations — they know how many topics there are, roughly how long each takes, and where the flight fits in. That reduces the cognitive load of simply following the briefing, leaving more capacity for the content itself. For instructors, actively tracking variance builds the pacing habit that separates good briefings from rushed ones.

Position: 0

Description

The Briefing Overview shows a lesson ground briefing as a series of numbered topic bubbles on a dashed flight path between two runways. An animated aircraft marker moves through the topics as the briefing progresses. When timing is started, the component tracks how long each topic actually takes and shows a variance against the plan.

The built-in controls let you run the overview interactively:

Start flight (lever icon) — starts the timer at departure
Direct to → — advances the aircraft to the next topic, recording the actual time at that waypoint
Variance — shown in the footer once timing is underway, comparing planned against actual elapsed time

This component uses no external assets — it is a pure SVG visualisation with no Three.js or canvas dependency.

For instructors

Use it as a visible agenda at the start of any ground briefing:

Setting expectations — show students the shape of the lesson before you begin, so they know how many topics there are and roughly how long each takes
Staying on time — click Direct-To as each topic ends to track variance; a growing positive number is a signal to speed up or cut a topic
Projector use — the SVG scales to any container width, so it works on a laptop screen or a classroom projector

The component is well-suited to building into lesson slides (e.g. Slidev) or displaying on a second screen during a tablet-based lesson.

For trainees

The overview gives you a map of the ground briefing before it starts:

Note how many topics there are and the time allocated to each
Watch the aircraft marker advance as each topic is completed
Use the footer variance to gauge whether the lesson is running to time — useful context if the instructor needs to abbreviate a topic toward the end

Embedding this component

<script type="module">
  import 'https://unpkg.com/@open-aviation-solutions/components/dist/lib/define.es.js';
</script>

<briefing-overview arrival-label="Arrival">
  <briefing-topic label="Overview" time="1"></briefing-topic>
  <briefing-topic label="Risk Analysis&#10;I'M SAFE &amp; PAVE" time="3"></briefing-topic>
  <briefing-topic label="&quot;See and Avoid&quot;&#10;Our joint responsibility" time="2"></briefing-topic>
  <briefing-topic label="Who has control" time="2"></briefing-topic>
  <briefing-topic label="Today's Flight" time="2"></briefing-topic>
  <briefing-topic label="Recap and Fly" time="2"></briefing-topic>
</briefing-overview>


 encodes a newline within an attribute value. Apostrophes need no escaping inside double-quoted attributes.

To control the plane position, set the plane-position attribute:

document.querySelector('briefing-overview').setAttribute('plane-position', '2')

Properties and attributes

Name	Kind	Description
`briefing-topic`	child element	Declares one topic. `label` (required) is the display name; ` ` encodes a newline. `time` (optional) is the segment duration in minutes. `color` (optional) overrides the waypoint circle fill. `label-color` (optional) overrides the label text colour. The first child is the departure label; the rest are waypoints
`plane-position`	attribute	Integer position of the plane: `0` = departure runway, `1..N` = at waypoint i, `N+1` = arrival runway. Animates between positions with a 600 ms cubic ease-out
`arrival-label`	attribute	Label shown under the right runway. Defaults to `Arrival`
`controls`	boolean attribute	When present, renders a two-button control panel at the top-right corner: Start flight (gear-up lever icon) calls `setEstimatedTimes()` once and disables itself; re-enables if the timer is reset. Direct-To (D→ icon) advances `plane-position` by one, records the actual waypoint time, then disables itself for the lifetime of the element instance
`controls-start`	boolean attribute	Shows only the Start button (gear-up icon). Use when the Direct-To button should not be available
`controls-direct-to`	boolean attribute	Shows only the Direct-To button. Use when start has already occurred and only progression control is needed
`show-help`	attribute	Set to `"false"` to hide the in-component help (?) link

Installation

npm install @open-aviation-solutions/components

Shared state

All <briefing-overview> elements on a page share the same plan and the same recorded actual times — useful when consecutive slides show the same flight at different positions. The first transition 0 → 1 records the departure timestamp; subsequent transitions record per-waypoint actuals. Import resetTimer() / resetFlightPlan() from the package to clear.