@crvouga/atlas 0.0.0-stage → 0.2.0

package/packages/visualizer/src/layout/layout.ts

@@ -0,0 +1,237 @@
+import type { LayoutFile } from '@crvouga/atlas/schema';
+import ELK, { type ElkExtendedEdge, type ElkNode } from 'elkjs/lib/elk-api';
+import elkWorkerUrl from 'elkjs/lib/elk-worker.min.js?url';
+
+import { SIZES, type LayoutEdge, type LayoutInput, type LayoutNode } from './graph';
+
+export type Point = { x: number; y: number };
+
+export type PlacedNode = LayoutNode & { x: number; y: number; absX: number; absY: number };
+
+export type PlacedEdge = LayoutEdge & {
+  points: Point[];
+  label: { x: number; y: number; width: number; height: number };
+};
+
+export type ChartLayout = {
+  key: string;
+  width: number;
+  height: number;
+  nodes: PlacedNode[];
+  edges: PlacedEdge[];
+  pinned: boolean;
+};
+
+const LAYOUT_VERSION = 4;
+const STORAGE_PREFIX = `atlas-layout:v${LAYOUT_VERSION}:`;
+const memory = new Map<string, ChartLayout>();
+
+async function hash(text: string) {
+  const digest = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(text));
+  return [...new Uint8Array(digest)]
+    .slice(0, 12)
+    .map((b) => b.toString(16).padStart(2, '0'))
+    .join('');
+}
+
+let elk: InstanceType<typeof ELK> | null = null;
+
+/** ELK's own worker script runs the layout, so the page stays responsive on large charts. */
+function runElk(graph: ElkNode) {
+  elk ??= new ELK({ workerFactory: () => new Worker(elkWorkerUrl) });
+  return elk.layout(graph);
+}
+
+const ROOT_OPTIONS: Record<string, string> = {
+  'elk.algorithm': 'layered',
+  'elk.direction': 'RIGHT',
+  'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
+  'elk.json.edgeCoords': 'ROOT',
+  'elk.json.shapeCoords': 'PARENT',
+  'elk.edgeRouting': 'ORTHOGONAL',
+  'elk.layered.spacing.nodeNodeBetweenLayers': '84',
+  'elk.layered.spacing.edgeNodeBetweenLayers': '28',
+  'elk.layered.spacing.edgeEdgeBetweenLayers': '14',
+  'elk.spacing.nodeNode': '56',
+  'elk.spacing.edgeNode': '24',
+  'elk.spacing.edgeEdge': '14',
+  'elk.spacing.edgeLabel': '6',
+  'elk.edgeLabels.inline': 'true',
+  'elk.edgeLabels.placement': 'CENTER',
+  'elk.layered.nodePlacement.strategy': 'NETWORK_SIMPLEX',
+  'elk.layered.considerModelOrder.strategy': 'NODES_AND_EDGES',
+  'elk.layered.crossingMinimization.forceNodeModelOrder': 'false',
+  'elk.layered.mergeEdges': 'false',
+  'elk.randomSeed': '7',
+  'elk.padding': '[top=24,left=24,bottom=24,right=24]'
+};
+
+function groupOptions(node: LayoutNode): Record<string, string> {
+  const p = SIZES.groupPadding;
+  return {
+    'elk.padding': `[top=${p.top},left=${p.left},bottom=${p.bottom},right=${p.right}]`,
+    'elk.direction': node.kind === 'parallel' ? 'DOWN' : 'RIGHT',
+    ...(node.kind === 'parallel' ? { 'elk.layered.spacing.nodeNodeBetweenLayers': '36' } : {})
+  };
+}
+
+function toElk(input: LayoutInput): ElkNode {
+  const children = new Map<string | null, LayoutNode[]>();
+  for (const n of input.nodes) children.set(n.parent, [...(children.get(n.parent) ?? []), n]);
+  const build = (n: LayoutNode): ElkNode => {
+    const kids = children.get(n.id) ?? [];
+    if (kids.length === 0) return { id: n.id, width: n.width, height: n.height };
+    return { id: n.id, layoutOptions: groupOptions(n), children: kids.map(build) };
+  };
+  return {
+    id: '__root',
+    layoutOptions: ROOT_OPTIONS,
+    children: (children.get(null) ?? []).map(build),
+    edges: input.edges.map(
+      (e): ElkExtendedEdge => ({
+        id: e.id,
+        sources: [e.source],
+        targets: [e.target],
+        labels: [{ id: `${e.id}#label`, text: e.id, width: e.labelWidth, height: SIZES.chip.height }]
+      })
+    )
+  };
+}
+
+function fromElk(input: LayoutInput, result: ElkNode, key: string): ChartLayout {
+  const byId = new Map(input.nodes.map((n) => [n.id, n]));
+  const nodes: PlacedNode[] = [];
+  const walk = (node: ElkNode, ox: number, oy: number) => {
+    for (const child of node.children ?? []) {
+      const base = byId.get(child.id);
+      if (!base) continue;
+      const x = child.x ?? 0;
+      const y = child.y ?? 0;
+      nodes.push({ ...base, width: child.width ?? base.width, height: child.height ?? base.height, x, y, absX: ox + x, absY: oy + y });
+      walk(child, ox + x, oy + y);
+    }
+  };
+  walk(result, 0, 0);
+  const edgesById = new Map(input.edges.map((e) => [e.id, e]));
+  const edges: PlacedEdge[] = [];
+  const collect = (node: ElkNode) => {
+    for (const edge of node.edges ?? []) {
+      const base = edgesById.get(edge.id);
+      if (!base) continue;
+      const section = edge.sections?.[0];
+      const points = section ? [section.startPoint, ...(section.bendPoints ?? []), section.endPoint].map((p) => ({ x: p.x, y: p.y })) : [];
+      const label = edge.labels?.[0];
+      const mid = midpoint(points);
+      edges.push({
+        ...base,
+        points,
+        label: {
+          x: label?.x ?? mid.x - base.labelWidth / 2,
+          y: label?.y ?? mid.y - SIZES.chip.height / 2,
+          width: base.labelWidth,
+          height: SIZES.chip.height
+        }
+      });
+    }
+    for (const child of node.children ?? []) collect(child);
+  };
+  collect(result);
+  return { key, width: result.width ?? 0, height: result.height ?? 0, nodes, edges, pinned: false };
+}
+
+function midpoint(points: Point[]): Point {
+  if (points.length === 0) return { x: 0, y: 0 };
+  let total = 0;
+  const lengths = points.slice(1).map((p, i) => {
+    const l = Math.hypot(p.x - points[i]!.x, p.y - points[i]!.y);
+    total += l;
+    return l;
+  });
+  let walked = 0;
+  for (let i = 0; i < lengths.length; i++) {
+    const l = lengths[i]!;
+    if (walked + l >= total / 2) {
+      const t = l === 0 ? 0 : (total / 2 - walked) / l;
+      const a = points[i]!;
+      const b = points[i + 1]!;
+      return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
+    }
+    walked += l;
+  }
+  return points[0]!;
+}
+
+function boundaryPoint(node: PlacedNode, toward: Point): Point {
+  const cx = node.absX + node.width / 2;
+  const cy = node.absY + node.height / 2;
+  const dx = toward.x - cx;
+  const dy = toward.y - cy;
+  if (dx === 0 && dy === 0) return { x: cx, y: cy };
+  const sx = Math.abs(dx) / (node.width / 2);
+  const sy = Math.abs(dy) / (node.height / 2);
+  const s = Math.max(sx, sy);
+  return { x: cx + dx / s, y: cy + dy / s };
+}
+
+/**
+ * A committed `<chart>.layout.json` wins for the nodes it names (absolute positions); edges that
+ * touch a moved node are redrawn straight between the two nodes.
+ */
+function applyPinned(layout: ChartLayout, file: LayoutFile): ChartLayout {
+  const moved = new Set<string>();
+  const byId = new Map(layout.nodes.map((n) => [n.id, n]));
+  const nodes = layout.nodes.map((n) => {
+    const pos = file.positions[n.id];
+    const size = file.sizes?.[n.id];
+    if (!pos && !size) return n;
+    moved.add(n.id);
+    const parent = n.parent ? byId.get(n.parent) : null;
+    const absX = pos?.x ?? n.absX;
+    const absY = pos?.y ?? n.absY;
+    return { ...n, absX, absY, x: absX - (parent?.absX ?? 0), y: absY - (parent?.absY ?? 0), width: size?.width ?? n.width, height: size?.height ?? n.height };
+  });
+  const placed = new Map(nodes.map((n) => [n.id, n]));
+  const edges = layout.edges.map((e) => {
+    if (!moved.has(e.source) && !moved.has(e.target)) return e;
+    const s = placed.get(e.source)!;
+    const t = placed.get(e.target)!;
+    const sc = { x: s.absX + s.width / 2, y: s.absY + s.height / 2 };
+    const tc = { x: t.absX + t.width / 2, y: t.absY + t.height / 2 };
+    const points = [boundaryPoint(s, tc), boundaryPoint(t, sc)];
+    const mid = midpoint(points);
+    return { ...e, points, label: { ...e.label, x: mid.x - e.label.width / 2, y: mid.y - e.label.height / 2 } };
+  });
+  const width = Math.max(layout.width, ...nodes.map((n) => n.absX + n.width + 24));
+  const height = Math.max(layout.height, ...nodes.map((n) => n.absY + n.height + 24));
+  return { ...layout, nodes, edges, width, height, pinned: true };
+}
+
+function readStored(key: string) {
+  try {
+    const raw = localStorage.getItem(STORAGE_PREFIX + key);
+    return raw ? (JSON.parse(raw) as ChartLayout) : null;
+  } catch {
+    return null;
+  }
+}
+
+function store(key: string, layout: ChartLayout) {
+  try {
+    localStorage.setItem(STORAGE_PREFIX + key, JSON.stringify(layout));
+  } catch {
+    // A full store only costs a fresh layout next time.
+  }
+}
+
+/**
+ * Positions for one chart, cached by its structure: the same states, nesting and events always
+ * get the same layout, from memory, then local storage, then ELK in a worker.
+ */
+export async function layoutChart(input: LayoutInput, pinned: LayoutFile | null): Promise<ChartLayout> {
+  const key = await hash(`${input.key}\n${JSON.stringify(SIZES)}\n${input.nodes.map((n) => n.id).join('|')}\n${input.edges.map((e) => `${e.source}>${e.target}`).join('|')}`);
+  const cached = memory.get(key) ?? readStored(key);
+  const base = cached ?? fromElk(input, await runElk(toElk(input)), key);
+  if (!cached) store(key, base);
+  memory.set(key, base);
+  return pinned ? applyPinned(base, pinned) : base;
+}

package/packages/visualizer/src/layout/use-chart-layout.ts

@@ -0,0 +1,18 @@
+import type { LayoutFile } from '@crvouga/atlas/schema';
+import { useQuery } from '@tanstack/react-query';
+
+import type { LayoutInput } from './graph';
+import { layoutChart } from './layout';
+
+/** The chart's layout; results changing never re-run it, only structure changing does. */
+export function useChartLayout(input: LayoutInput | null, pinned: LayoutFile | null) {
+  return useQuery({
+    queryKey: ['layout', input?.chartId ?? '', input?.key ?? '', input?.focus ?? '', pinned ? JSON.stringify(pinned) : ''],
+    queryFn: () => layoutChart(input!, pinned),
+    enabled: input !== null,
+    staleTime: Number.POSITIVE_INFINITY,
+    gcTime: 30 * 60_000,
+    placeholderData: (previous, previousQuery) =>
+      previousQuery?.queryKey[1] === input?.chartId && previousQuery?.queryKey[3] === (input?.focus ?? '') ? previous : undefined
+  });
+}

package/packages/visualizer/src/main.tsx

@@ -0,0 +1,31 @@
+import './styles/global.css';
+import '@xyflow/react/dist/base.css';
+
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { RouterProvider } from '@tanstack/react-router';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { router } from './app/router';
+import { ReportSourcesProvider } from './app/report-sources';
+import { AdapterContext } from './data/queries';
+import { createAdapter } from './data/adapters';
+import { createQueryClient } from './data/queries';
+
+const root = document.getElementById('root');
+if (root) {
+  createRoot(root).render(
+    <StrictMode>
+      <AdapterContext.Provider value={createAdapter()}>
+        <QueryClientProvider client={createQueryClient()}>
+          <ReportSourcesProvider>
+            <Tooltip.Provider delayDuration={300}>
+              <RouterProvider router={router} />
+            </Tooltip.Provider>
+          </ReportSourcesProvider>
+        </QueryClientProvider>
+      </AdapterContext.Provider>
+    </StrictMode>
+  );
+}

package/packages/visualizer/src/map/ChartMap.tsx

@@ -0,0 +1,252 @@
+import { MiniMap, ReactFlow, ReactFlowProvider, useReactFlow, type Node, type ReactFlowInstance, type Viewport } from '@xyflow/react';
+import { useCallback, useMemo, useRef } from 'react';
+
+import type { AtlasView, ItemStatus } from '../data/model';
+import { FitIcon, MinusIcon, PlusIcon } from '../components/icons';
+import { Legend } from '../components/Legend';
+import { chartGraph } from '../layout/graph';
+import type { ChartLayout } from '../layout/layout';
+import { useChartLayout } from '../layout/use-chart-layout';
+import { useUiStore } from '../state/ui-store';
+import { EdgeMarkers, edgeTypes, type EventEdgeType } from './EventEdge';
+import styles from './map.module.css';
+import { nodeTypes, type ChartLinkNodeType, type ContextNodeType, type GroupNodeType, type ScreenNodeType, type SummaryNodeType } from './nodes';
+
+type MapNode = ScreenNodeType | GroupNodeType | ChartLinkNodeType | ContextNodeType | SummaryNodeType;
+
+export type MapSelection = { screen?: string; event?: string; journey?: string };
+
+const MINIMAP_COLOR: Record<ItemStatus, string> = {
+  passed: '#86efac',
+  flaky: '#fdba74',
+  failed: '#fca5a5',
+  'not-reached': '#e2e8f0',
+  'not-yet-run': '#e2e8f0',
+  'spec-only': '#ddd6fe'
+};
+
+const START_ZOOM = 0.7;
+
+function fitPadding() {
+  const narrow = typeof window !== 'undefined' && window.matchMedia('(max-width: 900px)').matches;
+  if (narrow) return { top: '180px', right: '64px', bottom: '16px', left: '16px' } as const;
+  return { top: '16px', right: '72px', bottom: '120px', left: '16px' } as const;
+}
+
+const reducedMotion = () => typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+function useFlowElements(view: AtlasView, chartId: string, layout: ChartLayout | undefined, selection: MapSelection) {
+  return useMemo(() => {
+    if (!layout) return { nodes: [] as MapNode[], edges: [] as EventEdgeType[] };
+    const journey = selection.journey ? view.journeys.find((j) => j.id === selection.journey) : undefined;
+    const steps = new Map<string, number>();
+    journey?.steps.forEach((step, i) => {
+      for (const tid of step.transitionIds) {
+        if (!steps.has(tid)) steps.set(tid, i + 1);
+        const carried = [...view.transitions.values()].find((t) => t.carriedBy === tid);
+        if (carried && !steps.has(carried.id)) steps.set(carried.id, i + 1);
+      }
+    });
+    const onJourney = new Set<string>();
+    for (const tid of steps.keys()) {
+      const t = view.transitions.get(tid);
+      if (t) {
+        onJourney.add(t.source);
+        if (t.target) onJourney.add(t.target);
+      }
+    }
+    const dim = (id: string) => Boolean(journey) && !onJourney.has(id);
+    const coversJourney = (id: string): boolean => {
+      if (onJourney.has(id)) return true;
+      const state = view.states.get(id);
+      return Boolean(state?.children.some((child) => coversJourney(child)));
+    };
+
+    const nodes: MapNode[] = layout.nodes.flatMap((n): MapNode[] => {
+      const state = view.states.get(n.id);
+      if (!state) return [];
+      const base = {
+        id: n.id,
+        position: { x: n.x, y: n.y },
+        width: n.width,
+        height: n.height,
+        style: { width: n.width, height: n.height },
+        ...(n.parent ? { parentId: n.parent } : {}),
+        draggable: false,
+        selectable: false
+      };
+      switch (n.kind) {
+        case 'group':
+        case 'region':
+        case 'parallel':
+          return [{ ...base, type: 'group', zIndex: 0, data: { state, variant: n.kind, dimmed: false } }];
+        case 'chart-link':
+          return [{ ...base, type: 'chartLink', zIndex: 2, data: { state, chart: state.childChartId ? view.charts.get(state.childChartId) ?? null : null, dimmed: dim(n.id) } }];
+        case 'context':
+          return [{ ...base, type: 'context', zIndex: 2, data: { state, chart: view.charts.get(state.chartId) ?? null, dimmed: dim(n.id) } }];
+        case 'summary':
+          return [
+            {
+              ...base,
+              type: 'summary',
+              zIndex: 2,
+              data: { state, places: n.places ?? 0, status: n.status ?? state.status, dimmed: Boolean(journey) && !coversJourney(n.id) }
+            }
+          ];
+        default:
+          return [{ ...base, type: 'screen', zIndex: 2, data: { state, chartId, selected: selection.screen === n.id, dimmed: dim(n.id) } }];
+      }
+    });
+
+    const edges: EventEdgeType[] = layout.edges.flatMap((e): EventEdgeType[] => {
+      const transition = e.transitionId ? (view.transitions.get(e.transitionId) ?? null) : null;
+      if (!transition && !e.bundle) return [];
+      const step = e.transitionId ? (steps.get(e.transitionId) ?? null) : null;
+      const dimmed = e.bundle ? Boolean(journey) && !(e.memberIds ?? []).some((id) => steps.has(id)) : Boolean(journey) && step === null;
+      return [
+        {
+          id: e.id,
+          source: e.source,
+          target: e.target,
+          type: 'event',
+          zIndex: 1,
+          selectable: false,
+          data: { placed: e, transition, bundle: e.bundle, chartId, selected: Boolean(e.transitionId) && selection.event === e.transitionId, step, dimmed }
+        }
+      ];
+    });
+    return { nodes, edges };
+  }, [view, chartId, layout, selection.screen, selection.event, selection.journey]);
+}
+
+function ZoomControls() {
+  const flow = useReactFlow();
+  const duration = reducedMotion() ? 0 : 250;
+  return (
+    <div className={styles.zoom} role="group" aria-label="Zoom">
+      <button type="button" className={styles.zoomButton} onClick={() => void flow.zoomIn({ duration })} aria-label="Zoom in">
+        <PlusIcon size={16} />
+      </button>
+      <button type="button" className={styles.zoomButton} onClick={() => void flow.zoomOut({ duration })} aria-label="Zoom out">
+        <MinusIcon size={16} />
+      </button>
+      <button type="button" className={styles.zoomButton} onClick={() => void flow.fitView({ duration, padding: fitPadding() })} aria-label="Fit the whole map">
+        <FitIcon size={16} />
+      </button>
+    </div>
+  );
+}
+
+function Flow({ view, chartId, scopeKey, layout, selection }: { view: AtlasView; chartId: string; scopeKey: string; layout: ChartLayout; selection: MapSelection }) {
+  const { nodes, edges } = useFlowElements(view, chartId, layout, selection);
+  const saved = useRef<Viewport | undefined>(useUiStore.getState().viewports[scopeKey]);
+  const saveViewport = useUiStore((s) => s.saveViewport);
+  const onMoveEnd = useCallback((_: unknown, viewport: Viewport) => saveViewport(scopeKey, viewport), [scopeKey, saveViewport]);
+  const onInit = useCallback(
+    (flow: ReactFlowInstance<MapNode, EventEdgeType>) => {
+      if (saved.current) return;
+      const el = document.querySelector('.react-flow');
+      const width = el?.clientWidth ?? 1200;
+      const height = el?.clientHeight ?? 700;
+      if (!selection.screen) {
+        void flow.fitView({ padding: fitPadding() });
+        return;
+      }
+      const focus = layout.nodes.find((n) => n.id === selection.screen);
+      if (focus) {
+        const zoom = START_ZOOM;
+        flow.setViewport({ x: width / 2 - (focus.absX + focus.width / 2) * zoom, y: height / 2 - (focus.absY + focus.height / 2) * zoom, zoom });
+        return;
+      }
+      const start = layout.nodes.find((n) => n.id === view.charts.get(chartId)?.initial) ?? layout.nodes[0]!;
+      const zoom = START_ZOOM;
+      flow.setViewport({ x: 32 - start.absX * zoom, y: height / 2 - (start.absY + start.height / 2) * zoom, zoom });
+    },
+    [layout, view, chartId, selection.screen]
+  );
+  const hasTime = useMemo(() => [...view.transitions.values()].some((t) => t.chartId === chartId && t.kind === 'time'), [view, chartId]);
+  return (
+    <ReactFlow<MapNode, EventEdgeType>
+      nodes={nodes}
+      edges={edges}
+      nodeTypes={nodeTypes}
+      edgeTypes={edgeTypes}
+      defaultViewport={saved.current}
+      onInit={onInit}
+      onMoveEnd={onMoveEnd}
+      minZoom={0.08}
+      maxZoom={2.5}
+      nodesDraggable={false}
+      nodesConnectable={false}
+      nodesFocusable={false}
+      edgesFocusable={false}
+      elementsSelectable={false}
+      onlyRenderVisibleElements
+      className={styles.flow}
+      aria-label="Map of screens and events. Drag to move, scroll or pinch to zoom."
+    >
+      <EdgeMarkers />
+      <ZoomControls />
+      <div className={styles.legendSlot}>
+        <Legend showTime={hasTime} />
+      </div>
+      <MiniMap<MapNode>
+        pannable
+        zoomable
+        ariaLabel="Overview of the whole map"
+        className={styles.minimap}
+        nodeColor={(n: Node) => {
+          if (n.type === 'group') return 'transparent';
+          const data = n.data as { status?: ItemStatus; state?: { status: ItemStatus } };
+          return MINIMAP_COLOR[data.status ?? data.state?.status ?? 'spec-only'];
+        }}
+        nodeStrokeColor={(n: Node) => (n.type === 'group' ? '#ddd6fe' : 'transparent')}
+        nodeBorderRadius={8}
+        maskColor="rgba(248, 250, 252, 0.7)"
+      />
+    </ReactFlow>
+  );
+}
+
+function MapSkeleton({ label }: { label: string }) {
+  return (
+    <div className={styles.skeleton} role="status">
+      <div className={styles.skeletonRow}>
+        {Array.from({ length: 5 }, (_, i) => (
+          <span key={i} className={styles.skeletonPhone} style={{ animationDelay: `${i * 120}ms` }} />
+        ))}
+      </div>
+      <span className={styles.skeletonLabel}>{label}</span>
+    </div>
+  );
+}
+
+/** One chart's map. Positions come from the cached layout, statuses and media from the view. */
+export function ChartMap({ view, chartId, selection, group }: { view: AtlasView; chartId: string; selection: MapSelection; group?: string }) {
+  const input = useMemo(() => chartGraph(view, chartId, group ?? null), [view, chartId, group]);
+  const chart = view.charts.get(chartId);
+  const layout = useChartLayout(input, input?.scoped ? null : (chart?.layout ?? null));
+  if (layout.error) {
+    return (
+      <div className={styles.mapMessage} role="alert">
+        <p>The map for this chart couldn’t be laid out.</p>
+        <button type="button" className={styles.retryButton} onClick={() => void layout.refetch()}>
+          Try again
+        </button>
+      </div>
+    );
+  }
+  if (!layout.data) return <MapSkeleton label={`Laying out ${chart?.name ?? 'the map'}…`} />;
+  if (layout.data.nodes.length === 0) {
+    return (
+      <div className={styles.mapMessage}>
+        <p>This chart has no states yet.</p>
+      </div>
+    );
+  }
+  return (
+    <ReactFlowProvider>
+      <Flow view={view} chartId={chartId} scopeKey={`${chartId}:${input?.focus ?? ''}`} layout={layout.data} selection={selection} />
+    </ReactFlowProvider>
+  );
+}

package/packages/visualizer/src/map/EventEdge.tsx

@@ -0,0 +1,138 @@
+import { Link } from '@tanstack/react-router';
+import { EdgeLabelRenderer, type Edge, type EdgeProps } from '@xyflow/react';
+import { memo } from 'react';
+
+import { STATUS_LABEL, type ItemStatus, type TransitionView } from '../data/model';
+import { KIND_LABEL, KindIcon } from '../components/labels';
+import type { LayoutBundle } from '../layout/graph';
+import type { PlacedEdge } from '../layout/layout';
+import styles from './map.module.css';
+import { roundedPath } from './path';
+
+export type EventEdgeData = {
+  placed: PlacedEdge;
+  transition: TransitionView | null;
+  bundle: LayoutBundle | null;
+  chartId: string;
+  selected: boolean;
+  step: number | null;
+  dimmed: boolean;
+};
+
+export type EventEdgeType = Edge<EventEdgeData, 'event'>;
+
+const UNCHECKED = new Set(['not-reached', 'not-yet-run', 'spec-only']);
+
+function markerFor(status: ItemStatus, selected: boolean, step: number | null, kind: string) {
+  if (selected || step !== null) return 'active';
+  if (UNCHECKED.has(status)) return 'muted';
+  return kind;
+}
+
+export const EventEdge = memo(function EventEdge({ data, id }: EdgeProps<EventEdgeType>) {
+  if (!data) return null;
+  const { placed, transition: t, bundle, chartId, selected, step, dimmed } = data;
+  if (bundle && bundle.count > 1) {
+    const unchecked = UNCHECKED.has(bundle.status);
+    const d = roundedPath(placed.points);
+    return (
+      <>
+        <path
+          id={id}
+          d={d}
+          className={styles.edge}
+          data-status={bundle.status}
+          data-unchecked={unchecked}
+          data-dimmed={dimmed}
+          markerEnd={`url(#atlas-arrow-${unchecked ? 'muted' : 'user'})`}
+        />
+        <EdgeLabelRenderer>
+          <Link
+            to="/chart/$chartId"
+            params={{ chartId }}
+            search={(prev) => ({
+              run: prev.run,
+              journey: prev.journey,
+              event: undefined,
+              screen: bundle.screen ?? undefined,
+              group: bundle.group ?? undefined
+            })}
+            className={`${styles.chip} nodrag nopan`}
+            data-status={bundle.status}
+            data-unchecked={unchecked}
+            data-dimmed={dimmed}
+            style={{ transform: `translate(${placed.label.x}px, ${placed.label.y}px)`, width: placed.label.width }}
+            aria-label={`${bundle.label}. ${STATUS_LABEL[bundle.status]}.`}
+            title={bundle.label}
+          >
+            <span className={styles.chipText}>{bundle.label}</span>
+          </Link>
+        </EdgeLabelRenderer>
+      </>
+    );
+  }
+  if (!t) return null;
+  const unchecked = UNCHECKED.has(t.status);
+  const d = roundedPath(placed.points);
+  return (
+    <>
+      <path
+        id={id}
+        d={d}
+        className={styles.edge}
+        data-kind={t.kind}
+        data-status={t.status}
+        data-unchecked={unchecked}
+        data-selected={selected}
+        data-highlight={step !== null}
+        data-dimmed={dimmed}
+        markerEnd={`url(#atlas-arrow-${markerFor(t.status, selected, step, t.kind)})`}
+      />
+      <EdgeLabelRenderer>
+        <Link
+          to="/chart/$chartId"
+          params={{ chartId }}
+          search={(prev) => ({ run: prev.run, event: t.id, journey: prev.journey })}
+          className={`${styles.chip} nodrag nopan`}
+          data-kind={t.kind}
+          data-status={t.status}
+          data-unchecked={unchecked}
+          data-selected={selected}
+          data-highlight={step !== null}
+          data-dimmed={dimmed}
+          style={{ transform: `translate(${placed.label.x}px, ${placed.label.y}px)`, width: placed.label.width }}
+          aria-label={`${KIND_LABEL[t.kind]}: ${t.event}. ${STATUS_LABEL[t.status]}.${step !== null ? ` Step ${step} of the journey.` : ''}`}
+          title={t.event}
+        >
+          {step !== null && <span className={styles.stepNo}>{step}</span>}
+          <span className={styles.chipIcon}>
+            <KindIcon kind={t.kind} size={11} />
+          </span>
+          <span className={styles.chipText}>{t.event}</span>
+        </Link>
+      </EdgeLabelRenderer>
+    </>
+  );
+});
+
+export const edgeTypes = { event: EventEdge };
+
+export function EdgeMarkers() {
+  const marker = (id: string, color: string) => (
+    <marker key={id} id={`atlas-arrow-${id}`} viewBox="0 0 10 10" refX="8.5" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0,0.5 L9.5,5 L0,9.5 z" fill={color} />
+    </marker>
+  );
+  return (
+    <svg className={styles.markers} aria-hidden="true">
+      <defs>
+        {marker('user', 'var(--user)')}
+        {marker('system', 'var(--system)')}
+        {marker('time', 'var(--time)')}
+        {marker('hand-off', 'var(--handoff)')}
+        {marker('muted', 'var(--line-2)')}
+        {marker('active', 'var(--place)')}
+      </defs>
+    </svg>
+  );
+}