@appscode/design-system 2.17.87 → 2.17.91-alpha.1

package/vue-components/v3/charts/RecoverableWindowTimeline.vue

@@ -0,0 +1,953 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+import HeroiconsArrowPath from "~icons/heroicons/arrow-path";
+
+type TimeValue = number | string | Date;
+type StatusType = "success" | "warning" | "danger";
+type LegendKey = "recoverable" | "snapshot" | "failed" | "scheduled" | "selected";
+
+interface TimeRange {
+  start: TimeValue;
+  end: TimeValue;
+}
+
+interface Tick {
+  time: TimeValue;
+  label?: string;
+  highlight?: boolean;
+}
+
+interface LegendLabels {
+  recoverable?: string;
+  snapshot?: string;
+  failed?: string;
+  scheduled?: string;
+  selected?: string;
+}
+
+interface TimelineRow {
+  // unique key; defaults to the row index
+  key?: string;
+  label: string;
+  // colors the dot in front of the label
+  status?: StatusType;
+  // "continuous" fills the recoverable ranges (e.g. PITR), "discrete" draws every snapshot as a block;
+  // defaults to "continuous" when the row has recoverable ranges
+  variant?: "continuous" | "discrete";
+  recoverableRanges?: TimeRange[];
+  snapshots?: TimeValue[];
+  failedCheckpoints?: TimeValue[];
+  // upcoming runs, drawn as outlined blocks
+  scheduled?: TimeValue[];
+}
+
+interface RangeOption {
+  label: string;
+  value: string;
+}
+
+interface LegendNote {
+  label: string;
+  value: string;
+}
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  statusLabel?: string;
+  statusText?: string;
+  statusType?: StatusType;
+  // visible time range of the timeline
+  rangeStart: TimeValue;
+  rangeEnd: TimeValue;
+  // current time marker; defaults to rangeEnd
+  now?: TimeValue;
+  nowLabel?: string;
+  // data of the single timeline; ignored when `rows` is set
+  recoverableRanges?: TimeRange[];
+  snapshots?: TimeValue[];
+  failedCheckpoints?: TimeValue[];
+  // labeled timelines sharing one time axis, e.g. a database with its config and cache snapshots
+  rows?: TimelineRow[];
+  // explicit tick marks; when empty, `tickCount` evenly spaced ticks are generated
+  ticks?: Tick[];
+  tickCount?: number;
+  // formats a timestamp (ms) for tick labels and tooltips
+  formatTime?: (time: number) => string;
+  // range presets shown as a toggle in the header, e.g. 24h / 7d / 30d; the active one is `v-model:range`
+  rangeOptions?: RangeOption[];
+  // show a refresh button in the header that emits `refresh`
+  showRefresh?: boolean;
+  legendLabels?: LegendLabels;
+  // legend entries in display order; defaults depend on the layout
+  legendItems?: LegendKey[];
+  // shown at the end of the legend as "label: value", e.g. "etcd interval: 2h"
+  legendNote?: LegendNote;
+  showLegend?: boolean;
+  // allow selecting a timestamp by clicking inside a recoverable range or on a snapshot block
+  selectable?: boolean;
+  modifierClasses?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: "Recoverable Window",
+  subtitle: "",
+  statusLabel: "Continuous Log Streaming",
+  statusText: "",
+  statusType: "success",
+  now: undefined,
+  nowLabel: "now",
+  recoverableRanges: () => [],
+  snapshots: () => [],
+  failedCheckpoints: () => [],
+  rows: () => [],
+  ticks: () => [],
+  tickCount: 6,
+  formatTime: (time: number) => {
+    const d = new Date(time);
+    return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+  },
+  rangeOptions: () => [],
+  showRefresh: false,
+  legendLabels: () => ({}),
+  legendItems: undefined,
+  legendNote: undefined,
+  showLegend: true,
+  selectable: true,
+  modifierClasses: "",
+});
+
+const emit = defineEmits<{
+  // `row` is the entry of `rows` the timestamp was picked from
+  select: [time: number, row?: TimelineRow];
+  refresh: [];
+}>();
+
+// selected timestamp in ms
+const selected = defineModel<number | null>({ default: null });
+// value of the active range option
+const range = defineModel<string>("range", { default: "" });
+
+const activeRange = computed(() => range.value || props.rangeOptions[0]?.value);
+
+const toMs = (value: TimeValue) => new Date(value).getTime();
+
+const startMs = computed(() => toMs(props.rangeStart));
+const endMs = computed(() => toMs(props.rangeEnd));
+const nowMs = computed(() => (props.now !== undefined ? toMs(props.now) : endMs.value));
+const span = computed(() => Math.max(endMs.value - startMs.value, 1));
+
+const toPercent = (time: number) => Math.min(Math.max(((time - startMs.value) / span.value) * 100, 0), 100);
+
+interface Marker {
+  time: number;
+  left: number;
+}
+
+interface Lane {
+  key: string;
+  row: TimelineRow;
+  variant: "continuous" | "discrete";
+  ranges: { start: number; end: number; left: number; width: number }[];
+  snapshots: Marker[];
+  failed: Marker[];
+  scheduled: Marker[];
+  blockWidth?: string;
+}
+
+const toMarkers = (times: TimeValue[] = []): Marker[] =>
+  times.map((t) => ({ time: toMs(t), left: toPercent(toMs(t)) }));
+
+// narrow the blocks when snapshots sit closer together than a block is wide (long ranges)
+const blockWidth = (markers: Marker[]) => {
+  const lefts = markers.map((m) => m.left).sort((a, b) => a - b);
+  const gaps = lefts
+    .slice(1)
+    .map((left, i) => left - lefts[i])
+    .filter((gap) => gap > 0);
+  return gaps.length ? `min(10px, ${Math.min(...gaps) * 0.6}%)` : undefined;
+};
+
+const isMulti = computed(() => props.rows.length > 0);
+
+// without `rows` the component renders one unlabeled continuous lane from the top level props
+const lanes = computed(() => {
+  const rows: TimelineRow[] = isMulti.value
+    ? props.rows
+    : [
+        {
+          label: props.title,
+          recoverableRanges: props.recoverableRanges,
+          snapshots: props.snapshots,
+          failedCheckpoints: props.failedCheckpoints,
+        },
+      ];
+  return rows.map((row, idx): Lane => {
+    const snapshots = toMarkers(row.snapshots);
+    const failed = toMarkers(row.failedCheckpoints);
+    const scheduled = toMarkers(row.scheduled);
+    return {
+      key: row.key ?? String(idx),
+      row,
+      variant: row.variant ?? (!isMulti.value || row.recoverableRanges?.length ? "continuous" : "discrete"),
+      ranges: (row.recoverableRanges ?? []).map((r) => {
+        const start = toMs(r.start);
+        const end = toMs(r.end);
+        const left = toPercent(start);
+        return { start, end, left, width: toPercent(end) - left };
+      }),
+      snapshots,
+      failed,
+      scheduled,
+      blockWidth: blockWidth([...snapshots, ...failed, ...scheduled]),
+    };
+  });
+});
+
+const tickMarks = computed(() => {
+  const source: Tick[] = props.ticks.length
+    ? props.ticks
+    : Array.from({ length: props.tickCount }, (_, i) => ({
+        time: startMs.value + (span.value / props.tickCount) * i,
+      }));
+  return source.map((tick) => {
+    const time = toMs(tick.time);
+    return { time, left: toPercent(time), label: tick.label ?? props.formatTime(time), highlight: !!tick.highlight };
+  });
+});
+
+// grid lines inside the continuous rows
+const gridLines = computed(() => tickMarks.value.filter((tick) => tick.left > 0 && tick.left < 100));
+
+const isRecoverable = (lane: Lane, time: number) => lane.ranges.some((r) => time >= r.start && time <= r.end);
+
+const legend = computed(() => ({
+  recoverable: "Any point recoverable (WAL Replay)",
+  snapshot: "Consistent Snapshot",
+  failed: "Failed checkpoint",
+  scheduled: "Next scheduled",
+  selected: "Selected Timestamp",
+  ...props.legendLabels,
+}));
+
+const legendKeys = computed<LegendKey[]>(
+  () =>
+    props.legendItems ??
+    (isMulti.value
+      ? ["recoverable", "snapshot", "failed", "scheduled"]
+      : ["recoverable", "snapshot", "failed", "selected"]),
+);
+
+// rows only mark the selection where it is recoverable
+const selectedTime = computed(() => selected.value ?? null);
+
+const select = (time: number, lane: Lane) => {
+  if (!props.selectable) return;
+  selected.value = time;
+  emit("select", time, isMulti.value ? lane.row : undefined);
+};
+
+// hover indicator
+const hover = ref<{ lane: string; time: number } | null>(null);
+
+const timeFromEvent = (event: MouseEvent) => {
+  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+  const ratio = Math.min(Math.max((event.clientX - rect.left) / rect.width, 0), 1);
+  return Math.round(startMs.value + ratio * span.value);
+};
+
+const onMouseMove = (event: MouseEvent, lane: Lane) => {
+  if (!props.selectable || lane.variant !== "continuous") return;
+  const time = timeFromEvent(event);
+  hover.value = isRecoverable(lane, time) ? { lane: lane.key, time } : null;
+};
+
+const onClick = (event: MouseEvent, lane: Lane) => {
+  if (!props.selectable || lane.variant !== "continuous") return;
+  const time = timeFromEvent(event);
+  if (isRecoverable(lane, time)) select(time, lane);
+};
+
+// hide the tick labels the now label would overlap
+const ticksRef = ref<HTMLElement | null>(null);
+const nowLabelRef = ref<HTMLElement | null>(null);
+const coveredTicks = ref<number[]>([]);
+
+const updateCoveredTicks = () => {
+  if (!ticksRef.value || !nowLabelRef.value?.offsetWidth) {
+    coveredTicks.value = [];
+    return;
+  }
+  const nowRect = nowLabelRef.value.getBoundingClientRect();
+  const labels = Array.from(ticksRef.value.querySelectorAll<HTMLElement>(".rw-tick:not(.is-now)"));
+  coveredTicks.value = labels.flatMap((label, idx) => {
+    const rect = label.getBoundingClientRect();
+    return rect.right + 8 > nowRect.left && rect.left - 8 < nowRect.right ? [idx] : [];
+  });
+};
+
+useResizeObserver(ticksRef, updateCoveredTicks);
+useResizeObserver(nowLabelRef, updateCoveredTicks);
+watch([tickMarks, nowMs, isMulti], updateCoveredTicks, { flush: "post" });
+</script>
+
+<template>
+  <div class="recoverable-window" :class="[modifierClasses, { 'is-multi': isMulti }]">
+    <div class="rw-header is-flex is-justify-content-space-between is-align-items-center is-flex-wrap-wrap gap-8">
+      <div>
+        <h6 class="rw-title mb-0">{{ title }}</h6>
+        <p v-if="subtitle" class="rw-subtitle mb-0">{{ subtitle }}</p>
+      </div>
+      <div
+        v-if="statusText || rangeOptions.length || showRefresh || $slots.actions"
+        class="is-flex is-align-items-center is-flex-wrap-wrap gap-8"
+      >
+        <p v-if="statusText" class="rw-status mb-0">
+          {{ statusLabel }}: <strong :class="`is-${statusType}`">{{ statusText }}</strong>
+        </p>
+        <slot name="actions">
+          <div v-if="rangeOptions.length" class="rw-range-toggle" role="group" aria-label="Time range">
+            <button
+              v-for="option in rangeOptions"
+              :key="option.value"
+              type="button"
+              class="rw-range-option"
+              :class="{ 'is-active': option.value === activeRange }"
+              :aria-pressed="option.value === activeRange"
+              @click="range = option.value"
+            >
+              {{ option.label }}
+            </button>
+          </div>
+          <button
+            v-if="showRefresh"
+            type="button"
+            class="rw-refresh"
+            title="Refresh"
+            aria-label="Refresh"
+            @click="emit('refresh')"
+          >
+            <HeroiconsArrowPath />
+          </button>
+        </slot>
+      </div>
+    </div>
+
+    <div class="rw-lanes">
+      <template v-for="lane in lanes" :key="lane.key">
+        <div v-if="isMulti" class="rw-lane-label" :title="lane.row.label">
+          <span v-if="lane.row.status" class="rw-dot" :class="`is-${lane.row.status}`" />
+          <span class="rw-lane-name">{{ lane.row.label }}</span>
+        </div>
+        <div
+          class="rw-track"
+          :class="[`is-${lane.variant}`, { 'is-selectable': selectable && lane.variant === 'continuous' }]"
+          :style="{ '--rw-block-width': lane.blockWidth }"
+          @mousemove="onMouseMove($event, lane)"
+          @mouseleave="hover = null"
+          @click="onClick($event, lane)"
+        >
+          <template v-if="lane.variant === 'continuous'">
+            <span
+              v-for="(r, idx) in lane.ranges"
+              :key="`range-${idx}`"
+              class="rw-range"
+              :style="{ left: `${r.left}%`, width: `${r.width}%` }"
+            />
+            <template v-if="isMulti">
+              <span
+                v-for="(tick, idx) in gridLines"
+                :key="`grid-${idx}`"
+                class="rw-grid"
+                :style="{ left: `${tick.left}%` }"
+              />
+            </template>
+            <span
+              v-for="(marker, idx) in lane.snapshots"
+              :key="`snap-${idx}`"
+              class="rw-marker is-snapshot"
+              :style="{ left: `${marker.left}%` }"
+              :title="`${legend.snapshot}: ${formatTime(marker.time)}`"
+            />
+            <span
+              v-for="(marker, idx) in lane.failed"
+              :key="`fail-${idx}`"
+              class="rw-marker is-failed"
+              :style="{ left: `${marker.left}%` }"
+              :title="`${legend.failed}: ${formatTime(marker.time)}`"
+            />
+            <span v-if="hover?.lane === lane.key" class="rw-hover" :style="{ left: `${toPercent(hover.time)}%` }">
+              <span class="rw-hover-label">{{ formatTime(hover.time) }}</span>
+            </span>
+            <span
+              v-if="selectedTime !== null && (!isMulti || isRecoverable(lane, selectedTime))"
+              class="rw-marker is-selected"
+              :style="{ left: `${toPercent(selectedTime)}%` }"
+              :title="`${legend.selected}: ${formatTime(selectedTime)}`"
+            />
+            <span v-if="!isMulti" class="rw-marker is-now" :style="{ left: `${toPercent(nowMs)}%` }" />
+          </template>
+          <template v-else>
+            <span
+              v-for="(marker, idx) in lane.snapshots"
+              :key="`snap-${idx}`"
+              class="rw-block is-snapshot"
+              :class="{ 'is-clickable': selectable, 'is-selected': marker.time === selectedTime }"
+              :style="{ left: `${marker.left}%` }"
+              :title="`${legend.snapshot}: ${formatTime(marker.time)}`"
+              @click="select(marker.time, lane)"
+            />
+            <span
+              v-for="(marker, idx) in lane.failed"
+              :key="`fail-${idx}`"
+              class="rw-block is-failed"
+              :style="{ left: `${marker.left}%` }"
+              :title="`${legend.failed}: ${formatTime(marker.time)}`"
+            />
+            <span
+              v-for="(marker, idx) in lane.scheduled"
+              :key="`next-${idx}`"
+              class="rw-block is-scheduled"
+              :style="{ left: `${marker.left}%` }"
+              :title="`${legend.scheduled}: ${formatTime(marker.time)}`"
+            />
+          </template>
+        </div>
+      </template>
+    </div>
+
+    <div class="rw-axis">
+      <div ref="ticksRef" class="rw-ticks">
+        <span
+          v-for="(tick, idx) in tickMarks"
+          :key="`tick-${idx}`"
+          class="rw-tick"
+          :class="{
+            'is-highlight': tick.highlight,
+            'is-first': tick.left === 0,
+            'is-covered': coveredTicks.includes(idx),
+          }"
+          :style="{ left: `${tick.left}%` }"
+        >
+          {{ tick.label }}
+        </span>
+        <span ref="nowLabelRef" class="rw-tick is-now" :style="isMulti ? undefined : { left: `${toPercent(nowMs)}%` }">
+          {{ nowLabel }}
+        </span>
+      </div>
+    </div>
+
+    <div v-if="showLegend" class="rw-legend is-flex is-flex-wrap-wrap is-align-items-center">
+      <span v-for="key in legendKeys" :key="key" class="rw-legend-item">
+        <span class="rw-swatch" :class="`is-${key}`" />{{ legend[key] }}
+      </span>
+      <span v-if="legendNote" class="rw-legend-note">
+        {{ legendNote.label }}: <strong>{{ legendNote.value }}</strong>
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.recoverable-window {
+  --rw-recoverable: hsl(158, 59%, 49%);
+  --rw-recoverable-start: hsl(161, 94%, 31%);
+  --rw-recoverable-end: hsl(158, 63%, 51%);
+  --rw-snapshot: hsl(145, 60%, 24%);
+  --rw-block: hsl(149, 100%, 30%);
+  --rw-failed: hsl(0, 84%, 60%);
+  --rw-scheduled: #{$slate-60};
+  --rw-selected: #{$color-heading};
+  --rw-track-bg: #{$slate-95};
+  --rw-border: #{$color-border-light};
+  --rw-divider: #{$color-border-light};
+  --rw-tick-color: #{$color-label};
+  --rw-label-width: 152px;
+  --rw-mono: "Inconsolata", monospace;
+
+  padding: 24px 28px;
+  border: 1px solid var(--rw-border);
+  border-radius: 12px;
+  background-color: $white-100;
+
+  // labeled rows layout
+  &.is-multi {
+    --rw-recoverable: hsl(160, 84%, 39%);
+    --rw-failed: hsl(0, 72%, 51%);
+    --rw-track-bg: #{$slate-90};
+    --rw-border: #{$color-border};
+    --rw-tick-color: #{$slate-50};
+
+    padding: 24px;
+
+    @media (max-width: 576px) {
+      --rw-label-width: 108px;
+
+      padding: 16px;
+    }
+  }
+}
+
+.rw-header {
+  margin-bottom: 8px;
+  padding-bottom: 4px;
+
+  .is-multi & {
+    margin-bottom: 24px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid var(--rw-divider);
+  }
+}
+
+.rw-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: $color-heading;
+
+  .is-multi & {
+    font-size: 16px;
+  }
+}
+
+.rw-subtitle {
+  margin-top: 2px;
+  font-size: 13px;
+  color: $slate-50;
+}
+
+.rw-status {
+  font-family: var(--rw-mono);
+  font-size: 13px;
+  color: $color-label;
+
+  strong {
+    font-weight: 700;
+
+    &.is-success {
+      color: hsl(145, 60%, 32%);
+    }
+    &.is-warning {
+      color: hsl(36, 90%, 40%);
+    }
+    &.is-danger {
+      color: var(--rw-failed);
+    }
+  }
+}
+
+.rw-range-toggle {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid $color-border;
+  border-radius: 8px;
+  background-color: $white-100;
+}
+
+.rw-range-option,
+.rw-refresh {
+  border: 0;
+  font-size: 13px;
+  line-height: 18px;
+  color: $slate-40;
+  background-color: transparent;
+  cursor: pointer;
+
+  &:hover {
+    color: $color-heading;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $color-border-dark;
+    outline-offset: 1px;
+  }
+}
+
+.rw-range-option {
+  padding: 3px 10px;
+  border-radius: 6px;
+  font-weight: 500;
+
+  &.is-active {
+    font-weight: 700;
+    color: $color-heading;
+    background-color: $slate-95;
+  }
+}
+
+.rw-refresh {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 1px solid $color-border;
+  border-radius: 8px;
+  color: $slate-50;
+  background-color: $white-100;
+
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+.rw-lanes {
+  .is-multi & {
+    display: grid;
+    grid-template-columns: var(--rw-label-width) minmax(0, 1fr);
+    align-items: center;
+    row-gap: 16px;
+  }
+}
+
+.rw-lane-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  padding-right: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  color: $color-heading;
+}
+
+.rw-lane-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rw-dot {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+
+  &.is-success {
+    background-color: hsl(160, 84%, 39%);
+  }
+  &.is-warning {
+    background-color: hsl(25, 95%, 53%);
+  }
+  &.is-danger {
+    background-color: var(--rw-failed);
+  }
+}
+
+.rw-track {
+  position: relative;
+  height: 34px;
+  border: 1px solid $color-border;
+  background-color: var(--rw-track-bg);
+
+  &.is-selectable {
+    cursor: crosshair;
+  }
+
+  .is-multi & {
+    height: 32px;
+    border-radius: 6px;
+  }
+
+  .is-multi &.is-discrete {
+    height: 28px;
+    background-color: $white-100;
+  }
+}
+
+.rw-range {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background-color: var(--rw-recoverable);
+
+  .is-multi & {
+    top: 2px;
+    bottom: 2px;
+    border-radius: 4px;
+    background-image: linear-gradient(90deg, var(--rw-recoverable-start), var(--rw-recoverable-end));
+  }
+}
+
+.rw-grid {
+  position: absolute;
+  top: 50%;
+  width: 2px;
+  height: 12px;
+  background-color: rgba(255, 255, 255, 0.25);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.rw-marker {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  transform: translateX(-50%);
+
+  &.is-snapshot {
+    background-color: var(--rw-snapshot);
+  }
+
+  &.is-failed {
+    background-color: var(--rw-failed);
+  }
+
+  .is-multi &.is-snapshot,
+  .is-multi &.is-failed {
+    top: 2px;
+    bottom: 2px;
+    width: 2px;
+  }
+
+  &.is-selected {
+    width: 2px;
+    background-color: var(--rw-selected);
+    z-index: 2;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: -4px;
+      left: 50%;
+      width: 9px;
+      height: 9px;
+      border-radius: 50%;
+      background-color: var(--rw-selected);
+      transform: translateX(-50%);
+    }
+  }
+
+  &.is-now {
+    width: 2px;
+    background-color: var(--rw-failed);
+    z-index: 3;
+    pointer-events: none;
+
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: -5px;
+      left: 50%;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: var(--rw-failed);
+      transform: translateX(-50%);
+    }
+  }
+}
+
+.rw-block {
+  position: absolute;
+  top: 50%;
+  width: var(--rw-block-width, 10px);
+  height: 14px;
+  border-radius: 2px;
+  transform: translate(-50%, -50%);
+
+  &.is-snapshot {
+    background-color: var(--rw-block);
+  }
+
+  &.is-failed {
+    background-color: var(--rw-failed);
+  }
+
+  &.is-scheduled {
+    border: 1px dashed var(--rw-scheduled);
+  }
+
+  &.is-clickable {
+    cursor: pointer;
+  }
+
+  &.is-selected {
+    box-shadow:
+      0 0 0 2px $white-100,
+      0 0 0 3px var(--rw-selected);
+  }
+}
+
+.rw-hover {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: rgba(0, 0, 0, 0.4);
+  pointer-events: none;
+  z-index: 1;
+
+  .rw-hover-label {
+    position: absolute;
+    bottom: calc(100% + 4px);
+    left: 50%;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: var(--rw-mono);
+    font-size: 11px;
+    white-space: nowrap;
+    color: $white-100;
+    background-color: $color-heading;
+    transform: translateX(-50%);
+  }
+}
+
+.rw-axis {
+  .is-multi & {
+    display: grid;
+    grid-template-columns: var(--rw-label-width) minmax(0, 1fr);
+    margin-top: 16px;
+    padding: 8px 0 20px;
+    border-top: 1px solid var(--rw-divider);
+    border-bottom: 1px solid var(--rw-divider);
+  }
+}
+
+.rw-ticks {
+  position: relative;
+  height: 18px;
+  margin: 10px 0 12px;
+  padding-bottom: 14px;
+  box-sizing: content-box;
+  border-bottom: 1px dashed var(--rw-border);
+
+  .is-multi & {
+    grid-column: 2;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+}
+
+.rw-tick {
+  position: absolute;
+  top: 0;
+  font-family: var(--rw-mono);
+  font-size: 12px;
+  color: var(--rw-tick-color);
+  white-space: nowrap;
+  transform: translateX(-50%);
+
+  &.is-first {
+    transform: translateX(4px);
+  }
+
+  &.is-covered {
+    visibility: hidden;
+  }
+
+  &.is-highlight {
+    font-weight: 700;
+    color: hsl(145, 60%, 32%);
+  }
+
+  &.is-now {
+    font-weight: 700;
+    color: var(--rw-failed);
+  }
+
+  // pinned to the end of the axis
+  .is-multi &.is-now {
+    right: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    transform: none;
+
+    &::before {
+      content: "";
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background-color: currentColor;
+    }
+  }
+}
+
+.rw-legend {
+  gap: 4px 12px;
+  font-size: 13px;
+  color: $color-text;
+
+  .is-multi & {
+    gap: 8px 24px;
+    padding-top: 12px;
+    color: $slate-40;
+  }
+}
+
+.rw-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+
+  .is-multi & {
+    gap: 8px;
+  }
+}
+
+.rw-legend-note {
+  margin-left: auto;
+  font-family: var(--rw-mono);
+  font-size: 12px;
+  color: $slate-60;
+
+  strong {
+    font-weight: 700;
+    color: $color-text;
+  }
+}
+
+.rw-swatch {
+  display: inline-block;
+  width: 14px;
+  height: 10px;
+
+  &.is-recoverable {
+    background-color: var(--rw-recoverable);
+  }
+  &.is-snapshot {
+    width: 8px;
+    background-color: var(--rw-snapshot);
+  }
+  &.is-failed {
+    width: 10px;
+    background-color: var(--rw-failed);
+  }
+  &.is-scheduled {
+    width: 10px;
+    border: 1px dashed var(--rw-scheduled);
+  }
+  &.is-selected {
+    width: 3px;
+    height: 16px;
+    background-color: var(--rw-selected);
+  }
+
+  // same shapes as the row blocks
+  .is-multi & {
+    width: 10px;
+    height: 12px;
+    border-radius: 2px;
+
+    &.is-recoverable {
+      width: 15px;
+      height: 15px;
+      border-radius: 4px;
+    }
+    &.is-snapshot {
+      background-color: var(--rw-block);
+    }
+    &.is-selected {
+      width: 3px;
+      height: 16px;
+      border-radius: 0;
+    }
+  }
+}
+</style>