@inventure71/paddockjs 0.1.0 → 0.2.0

package/src/styles.css

@@ -294,6 +294,20 @@
   overflow: hidden;
 }
 
+.telemetry-stack {
+  display: grid;
+  gap: 0.72rem;
+  min-height: 0;
+}
+
+.telemetry-stack > .sim-telemetry {
+  min-height: auto;
+}
+
+.telemetry-component {
+  width: 100%;
+}
+
 .sim-timing.broadcast-tower {
   position: relative;
   width: min(100%, var(--timing-board-max-width));
@@ -722,6 +736,134 @@
   display: block;
 }
 
+.race-telemetry-drawer {
+  --telemetry-drawer-width: min(390px, max(300px, 30cqw));
+  position: relative;
+  display: block;
+  container-type: inline-size;
+  min-height: var(--paddock-race-view-min-height, 620px);
+  overflow: hidden;
+  background: #000;
+}
+
+.race-telemetry-drawer__race {
+  min-width: 0;
+  display: flex;
+  min-height: inherit;
+  margin-right: 0;
+  transition: margin-right 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.race-telemetry-drawer.is-telemetry-open .race-telemetry-drawer__race {
+  margin-right: var(--telemetry-drawer-width);
+}
+
+.race-telemetry-drawer__race > .sim-canvas-panel {
+  flex: 1 1 auto;
+  min-height: inherit;
+  height: auto;
+}
+
+.race-telemetry-drawer__controls {
+  position: absolute;
+  z-index: 12;
+  top: 1rem;
+  right: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.45rem;
+}
+
+.race-telemetry-drawer__controls .sim-control,
+.race-telemetry-drawer__controls .telemetry-drawer-toggle {
+  min-height: 2.45rem;
+  padding: 0.62rem 0.72rem;
+  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
+}
+
+.telemetry-drawer-toggle {
+  border: 1px solid rgba(255, 255, 255, 0.26);
+  color: #08090b;
+  background: var(--green);
+  font-family: var(--font-mono);
+  font-size: 0.66rem;
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.telemetry-drawer {
+  position: absolute;
+  z-index: 11;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--telemetry-drawer-width);
+  min-width: 0;
+  height: 100%;
+  overflow: hidden;
+  color: var(--text);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 22%),
+    rgba(8, 9, 11, 0.97);
+  border-left: 1px solid var(--line);
+  transform: translate3d(100%, 0, 0);
+  opacity: 0;
+  pointer-events: none;
+  will-change: transform, opacity;
+  transition:
+    transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    opacity 180ms ease;
+}
+
+.race-telemetry-drawer.is-telemetry-open .telemetry-drawer {
+  transform: translate3d(0, 0, 0);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.telemetry-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.8rem 0.85rem;
+  border-bottom: 1px solid var(--line);
+  text-transform: uppercase;
+}
+
+.telemetry-drawer__header span {
+  color: var(--green);
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  font-weight: 900;
+  letter-spacing: 0.16em;
+}
+
+.telemetry-drawer__header button {
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.06);
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+  font-weight: 900;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  padding: 0.45rem 0.54rem;
+  cursor: pointer;
+}
+
+.telemetry-drawer__content {
+  display: grid;
+  gap: 0.72rem;
+  height: calc(100% - 3.4rem);
+  padding: 0.72rem;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
 .camera-controls {
   position: absolute;
   top: 1rem;
@@ -1263,6 +1405,239 @@
   text-align: right;
 }
 
+.telemetry-module-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.65rem;
+  text-transform: uppercase;
+}
+
+.telemetry-module-header span {
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 0.66rem;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+}
+
+.telemetry-module-header strong {
+  color: var(--green);
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+}
+
+.telemetry-sector-bars {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.35rem;
+}
+
+.telemetry-sector-bar {
+  --sector-status-color: var(--green);
+  --sector-status-bg: color-mix(in srgb, var(--sector-status-color) 10%, rgba(8, 10, 14, 0.94));
+  position: relative;
+  isolation: isolate;
+  min-width: 0;
+  overflow: hidden;
+  padding: 0.55rem 0.46rem 0.48rem;
+  color: rgba(244, 247, 251, 0.84);
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--sector-status-color) 72%, transparent) var(--sector-fill, 0%), rgba(255, 255, 255, 0.055) 0),
+    var(--sector-status-bg);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.05);
+}
+
+.telemetry-sector-bar.is-active {
+  border-color: color-mix(in srgb, var(--green) 65%, rgba(255, 255, 255, 0.22));
+  box-shadow:
+    inset 0 -2px 0 var(--green),
+    0 0 24px rgba(20, 199, 132, 0.12);
+}
+
+.telemetry-sector-bar.is-complete {
+  color: #08090b;
+}
+
+.telemetry-sector-bar.is-overall-best,
+.telemetry-sector-table td.is-overall-best {
+  --sector-status-color: #c77dff;
+  --sector-status-bg: color-mix(in srgb, #c77dff 23%, rgba(8, 10, 14, 0.94));
+  color: #fff;
+}
+
+.telemetry-sector-bar.is-personal-best,
+.telemetry-sector-table td.is-personal-best {
+  --sector-status-color: var(--green);
+  --sector-status-bg: color-mix(in srgb, var(--green) 20%, rgba(8, 10, 14, 0.94));
+  color: #ecfff7;
+}
+
+.telemetry-sector-bar.is-slower,
+.telemetry-sector-table td.is-slower {
+  --sector-status-color: var(--yellow);
+  --sector-status-bg: color-mix(in srgb, var(--yellow) 16%, rgba(8, 10, 14, 0.94));
+  color: #fff2b8;
+}
+
+.telemetry-sector-table td.is-overall-best,
+.telemetry-sector-table td.is-personal-best,
+.telemetry-sector-table td.is-slower {
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--sector-status-color) 28%, transparent), transparent 72%),
+    var(--sector-status-bg);
+  box-shadow: inset 3px 0 0 var(--sector-status-color);
+}
+
+.telemetry-sector-bar span,
+.telemetry-sector-bar strong {
+  position: relative;
+  z-index: 1;
+  display: block;
+  font-family: var(--font-mono);
+  line-height: 1;
+  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.32);
+}
+
+.telemetry-sector-bar span {
+  margin-bottom: 0.4rem;
+  font-size: 0.58rem;
+  font-weight: 900;
+  letter-spacing: 0.16em;
+}
+
+.telemetry-sector-bar strong {
+  overflow: hidden;
+  font-size: 0.72rem;
+  font-weight: 900;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.telemetry-sector-banner {
+  --sector-status-color: var(--green);
+  --sector-banner-color: var(--driver-color, var(--green));
+  position: absolute;
+  z-index: 9;
+  right: 1rem;
+  bottom: 1rem;
+  display: grid;
+  grid-template-columns: minmax(9rem, 0.8fr) minmax(14rem, 1.2fr);
+  gap: 0.65rem;
+  align-items: stretch;
+  width: min(560px, calc(100% - 2rem));
+  padding: 0.65rem;
+  color: var(--text);
+  background:
+    linear-gradient(110deg, rgba(8, 10, 16, 0.98), rgba(24, 29, 40, 0.92)),
+    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 58px);
+  border-left: 4px solid var(--sector-banner-color);
+  border-bottom: 2px solid var(--sector-banner-color);
+  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
+  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.12);
+}
+
+.sim-canvas-panel:has(.race-data-panel:not(.is-hidden)) .telemetry-sector-banner {
+  bottom: 8.3rem;
+}
+
+.telemetry-sector-banner__copy {
+  min-width: 0;
+  padding: 0.28rem 0.35rem;
+  text-transform: uppercase;
+}
+
+.telemetry-sector-banner__copy span {
+  display: block;
+  color: var(--sector-banner-color);
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+  font-weight: 900;
+  letter-spacing: 0.14em;
+}
+
+.telemetry-sector-banner__copy b {
+  color: inherit;
+  font: inherit;
+}
+
+.telemetry-sector-banner__copy strong {
+  display: block;
+  margin-top: 0.2rem;
+  overflow: hidden;
+  font-size: clamp(1.15rem, 2vw, 1.65rem);
+  font-weight: 900;
+  line-height: 0.92;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.telemetry-sector-banner__copy em {
+  display: block;
+  margin-top: 0.28rem;
+  color: rgba(244, 247, 251, 0.68);
+  font-family: var(--font-mono);
+  font-size: 0.66rem;
+  font-style: normal;
+  font-weight: 900;
+  letter-spacing: 0.12em;
+}
+
+.telemetry-sector-banner__bars {
+  align-self: stretch;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.32rem;
+}
+
+.telemetry-lap-table,
+.telemetry-sector-table {
+  width: 100%;
+  border-collapse: collapse;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.045);
+  font-family: var(--font-mono);
+}
+
+.telemetry-lap-table tr,
+.telemetry-sector-table tr {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
+}
+
+.telemetry-lap-table tr:last-child,
+.telemetry-sector-table tr:last-child {
+  border-bottom: 0;
+}
+
+.telemetry-lap-table th,
+.telemetry-lap-table td,
+.telemetry-sector-table th,
+.telemetry-sector-table td {
+  padding: 0.55rem 0.5rem;
+  font-size: 0.68rem;
+  line-height: 1;
+  text-align: right;
+}
+
+.telemetry-lap-table th,
+.telemetry-sector-table th {
+  color: var(--muted);
+  font-weight: 800;
+  letter-spacing: 0.09em;
+  text-align: left;
+  text-transform: uppercase;
+}
+
+.telemetry-lap-table td,
+.telemetry-sector-table td {
+  color: var(--text);
+  font-weight: 900;
+}
+
 .car-overview {
   position: relative;
   margin-top: 1rem;
@@ -1676,7 +2051,12 @@
 
   .sim-shell--left-tower-overlay .sim-timing,
   .sim-canvas-panel--with-timing-tower > .sim-timing {
-    width: min(72vw, var(--timing-board-max-width));
+    width: min(100%, var(--timing-board-max-width));
+  }
+
+  .sim-shell--left-tower-overlay .sim-timing {
+    width: 100%;
+    max-width: 100%;
   }
 
   .sim-topbar {
@@ -1703,8 +2083,33 @@
     min-height: 58svh;
   }
 
+  .race-telemetry-drawer {
+    --telemetry-drawer-width: 100%;
+  }
+
+  .race-telemetry-drawer__race,
+  .race-telemetry-drawer.is-telemetry-open .race-telemetry-drawer__race {
+    margin-right: 0;
+  }
+
+  .race-telemetry-drawer.is-telemetry-open .race-telemetry-drawer__race {
+    margin-bottom: min(360px, 46svh);
+  }
+
+  .telemetry-drawer {
+    top: auto;
+    height: min(360px, 46svh);
+    border-left: 0;
+    border-top: 1px solid var(--line);
+    transform: translate3d(0, 100%, 0);
+  }
+
+  .race-telemetry-drawer.is-telemetry-open .telemetry-drawer {
+    transform: translate3d(0, 0, 0);
+  }
+
   .camera-controls {
-    max-width: calc(100% - 5.4rem);
+    max-width: calc(100% - 1.5rem);
   }
 
   .race-data-panel {
@@ -1715,6 +2120,17 @@
     min-height: 88px;
   }
 
+  .telemetry-sector-banner {
+    right: 0.75rem;
+    bottom: 0.75rem;
+    grid-template-columns: 1fr;
+    width: calc(100% - 1.5rem);
+  }
+
+  .sim-canvas-panel:has(.race-data-panel:not(.is-hidden)) .telemetry-sector-banner {
+    bottom: 8rem;
+  }
+
   .race-data-panel.is-radio-mode {
     grid-template-columns: minmax(0, 1fr);
   }
@@ -1816,3 +2232,36 @@
     display: none;
   }
 }
+
+@media (max-width: 520px) {
+  .sim-canvas-panel--with-timing-tower {
+    min-height: max(58svh, calc(min(46svh, 420px) + 17rem));
+  }
+
+  .sim-canvas-panel--with-timing-tower > .sim-timing {
+    position: static;
+    inset: auto;
+    width: 100%;
+    max-width: 100%;
+    height: min(46svh, 420px);
+    clip-path: none;
+  }
+
+  .sim-canvas-panel--with-timing-tower > .sim-timing.broadcast-tower {
+    position: static;
+    width: 100%;
+    max-width: 100%;
+    height: min(46svh, 420px);
+  }
+
+  .sim-canvas-panel--with-timing-tower > .camera-controls {
+    left: 0.75rem;
+    top: calc(min(46svh, 420px) + 1.25rem);
+    max-width: calc(100% - 1.5rem);
+  }
+
+  .sim-canvas-panel--with-timing-tower > .start-lights {
+    top: calc(min(46svh, 420px) + 4.2rem);
+    left: 50%;
+  }
+}

package/src/ui/componentTemplates.js

@@ -2,6 +2,13 @@ function buttonHiddenAttribute(isVisible) {
   return isVisible ? '' : ' hidden';
 }
 
+let telemetryDrawerIdSequence = 0;
+
+function createTelemetryDrawerId() {
+  telemetryDrawerIdSequence += 1;
+  return `paddock-telemetry-drawer-${telemetryDrawerIdSequence}`;
+}
+
 function createLoadingMarkup(label = 'Loading') {
   return `
       <div class="paddock-loading" data-paddock-loading aria-label="${escapeHtml(label)} loading">
@@ -110,6 +117,7 @@ export function createCameraControlsMarkup({ embedded = false } = {}) {
 export function createRaceCanvasMarkup({
   includeRaceDataPanel = false,
   includeTimingTower = false,
+  includeTelemetrySectorBanner = false,
   timingTowerVerticalFit,
   assets,
   totalLaps,
@@ -147,6 +155,7 @@ export function createRaceCanvasMarkup({
       </div>
       ${showEmbeddedCameraControls ? createCameraControlsMarkup({ embedded: true }) : ''}
       ${includeRaceDataPanel ? createRaceDataPanelMarkup({ assets, ui }) : ''}
+      ${includeTelemetrySectorBanner ? createTelemetrySectorBannerMarkup({ ui }) : ''}
       <div class="race-finish-panel" data-race-finish-panel hidden aria-live="polite">
         <span>Race winner</span>
         <strong data-race-finish-winner>--</strong>
@@ -205,9 +214,33 @@ export function createCarDriverOverviewMarkup({ assets }) {
   `;
 }
 
-export function createTelemetryPanelMarkup(options, { includeOverview = options.ui?.telemetryIncludesOverview !== false } = {}) {
+function getTelemetryModules(ui = {}) {
+  const defaults = {
+    core: true,
+    sectors: true,
+    lapTimes: true,
+    sectorTimes: true,
+  };
+  const modules = ui.telemetryModules;
+  if (modules === false) return Object.fromEntries(Object.keys(defaults).map((name) => [name, false]));
+  if (Array.isArray(modules)) {
+    const requested = new Set(modules);
+    return Object.fromEntries(Object.keys(defaults).map((name) => [name, requested.has(name)]));
+  }
+  if (!modules || typeof modules !== 'object') return defaults;
+  return Object.fromEntries(Object.entries(defaults).map(([name, fallback]) => [
+    name,
+    modules[name] == null ? fallback : Boolean(modules[name]),
+  ]));
+}
+
+function getTelemetryModuleClass(componentName) {
+  return `sim-telemetry telemetry-component telemetry-component--${componentName}`;
+}
+
+export function createTelemetryCoreMarkup() {
   return `
-    <aside class="sim-telemetry" data-paddock-component="telemetry-panel" aria-label="Selected car telemetry">
+    <section class="${getTelemetryModuleClass('core')}" data-paddock-component="telemetry-core" aria-label="Selected car core telemetry">
       <div class="telemetry-header">
         <span data-selected-code>---</span>
         <strong data-selected-name>Select car</strong>
@@ -222,8 +255,148 @@ export function createTelemetryPanelMarkup(options, { includeOverview = options.
         <div><dt>Interval</dt><dd data-telemetry-gap>--</dd></div>
         <div><dt>Leader</dt><dd data-telemetry-leader-gap>--</dd></div>
       </dl>
+      ${createLoadingMarkup('Core telemetry')}
+    </section>
+  `;
+}
+
+export function createTelemetrySectorsMarkup() {
+  return `
+      <section class="${getTelemetryModuleClass('sectors')} telemetry-sector-strip" data-paddock-component="telemetry-sectors" data-telemetry-sector-strip aria-label="Sector progress">
+        <div class="telemetry-module-header">
+          <span>Sector map</span>
+          <strong data-telemetry-current-sector>S1</strong>
+        </div>
+        <div class="telemetry-sector-bars">
+          ${[1, 2, 3].map((sector) => `
+          <div class="telemetry-sector-bar" data-telemetry-sector-bar="${sector}" style="--sector-fill: 0%">
+            <span>S${sector}</span>
+            <strong data-telemetry-sector-time="${sector}">--</strong>
+          </div>
+          `).join('')}
+        </div>
+        ${createLoadingMarkup('Sector telemetry')}
+      </section>
+  `;
+}
+
+export function createTelemetrySectorBannerMarkup() {
+  return `
+      <section class="telemetry-sector-banner" data-paddock-component="telemetry-sector-banner" data-telemetry-sector-banner aria-label="Broadcast sector telemetry">
+        <div class="telemetry-sector-banner__copy">
+          <span><b data-selected-code>--</b> sector telemetry</span>
+          <strong data-selected-name>Select driver</strong>
+          <em data-telemetry-current-sector>S1</em>
+        </div>
+        <div class="telemetry-sector-banner__bars">
+          ${[1, 2, 3].map((sector) => `
+          <div class="telemetry-sector-bar" data-telemetry-sector-bar="${sector}" style="--sector-fill: 0%">
+            <span>S${sector}</span>
+            <strong data-telemetry-sector-time="${sector}">--</strong>
+          </div>
+          `).join('')}
+        </div>
+        ${createLoadingMarkup('Sector banner')}
+      </section>
+  `;
+}
+
+export function createTelemetryLapTimesMarkup() {
+  return `
+      <section class="${getTelemetryModuleClass('lap-times')} telemetry-lap-module" data-paddock-component="telemetry-lap-times" aria-label="Lap timing">
+        <div class="telemetry-module-header">
+          <span>Lap timing</span>
+          <strong data-telemetry-completed-laps>0 laps</strong>
+        </div>
+        <table class="telemetry-lap-table" data-telemetry-lap-table>
+          <tbody>
+            <tr><th scope="row">Current</th><td data-telemetry-current-lap-time>--</td></tr>
+            <tr><th scope="row">Last</th><td data-telemetry-last-lap-time>--</td></tr>
+            <tr><th scope="row">Best</th><td data-telemetry-best-lap-time>--</td></tr>
+          </tbody>
+        </table>
+        ${createLoadingMarkup('Lap telemetry')}
+      </section>
+  `;
+}
+
+export function createTelemetrySectorTimesMarkup() {
+  return `
+      <section class="${getTelemetryModuleClass('sector-times')} telemetry-sector-table-module" data-paddock-component="telemetry-sector-times" aria-label="Sector timing table">
+        <div class="telemetry-module-header">
+          <span>Sector timing</span>
+          <strong>Last / Best</strong>
+        </div>
+        <table class="telemetry-sector-table" data-telemetry-sector-table>
+          <thead>
+            <tr><th scope="col">Sector</th><th scope="col">Last</th><th scope="col">Best</th></tr>
+          </thead>
+          <tbody>
+            ${[1, 2, 3].map((sector) => `
+            <tr data-telemetry-sector-row="${sector}">
+              <th scope="row">S${sector}</th>
+              <td data-telemetry-sector-last="${sector}">--</td>
+              <td data-telemetry-sector-best="${sector}">--</td>
+            </tr>
+            `).join('')}
+          </tbody>
+        </table>
+        ${createLoadingMarkup('Sector table')}
+      </section>
+  `;
+}
+
+function createTelemetryComponentMarkup(options, modules = getTelemetryModules(options.ui)) {
+  return `
+      ${modules.core ? createTelemetryCoreMarkup(options) : ''}
+      ${modules.sectors ? createTelemetrySectorsMarkup(options) : ''}
+      ${modules.lapTimes ? createTelemetryLapTimesMarkup(options) : ''}
+      ${modules.sectorTimes ? createTelemetrySectorTimesMarkup(options) : ''}
+  `;
+}
+
+export function createTelemetryPanelMarkup(options, { includeOverview = options.ui?.telemetryIncludesOverview !== false } = {}) {
+  const modules = getTelemetryModules(options.ui);
+  return `
+    <aside class="telemetry-stack" data-paddock-component="telemetry-stack" aria-label="Selected car telemetry stack">
+      ${createTelemetryComponentMarkup(options, modules)}
       ${includeOverview ? createCarDriverOverviewMarkup(options) : ''}
-      ${createLoadingMarkup('Telemetry')}
     </aside>
   `;
 }
+
+export function createRaceTelemetryDrawerMarkup(options, {
+  timingTowerVerticalFit,
+  drawerInitiallyOpen = false,
+} = {}) {
+  const openClass = drawerInitiallyOpen ? ' is-telemetry-open' : '';
+  const drawerId = createTelemetryDrawerId();
+  return `
+    <section class="race-telemetry-drawer${openClass}" data-paddock-component="race-telemetry-drawer" data-race-telemetry-drawer aria-label="Race view with telemetry drawer">
+      <div class="race-telemetry-drawer__race">
+        ${createRaceCanvasMarkup({
+          ...options,
+          includeRaceDataPanel: true,
+          includeTimingTower: true,
+          includeTelemetrySectorBanner: true,
+          timingTowerVerticalFit,
+        })}
+      </div>
+      <div class="race-telemetry-drawer__controls" aria-label="Race workbench controls">
+        ${createSafetyCarControlMarkup({ compact: true })}
+        <button class="telemetry-drawer-toggle" type="button" data-telemetry-drawer-toggle aria-expanded="${drawerInitiallyOpen ? 'true' : 'false'}" aria-controls="${drawerId}">
+          ${drawerInitiallyOpen ? 'Close telemetry' : 'Telemetry'}
+        </button>
+      </div>
+      <aside id="${drawerId}" class="telemetry-drawer" data-telemetry-drawer aria-label="Telemetry drawer" aria-hidden="${drawerInitiallyOpen ? 'false' : 'true'}"${drawerInitiallyOpen ? '' : ' inert'}>
+        <div class="telemetry-drawer__header">
+          <span>Live telemetry</span>
+          <button type="button" data-telemetry-drawer-close>Close</button>
+        </div>
+        <div class="telemetry-drawer__content">
+          ${createTelemetryComponentMarkup(options)}
+        </div>
+      </aside>
+    </section>
+  `;
+}