@elabs-ai/components-process 4.1.0 → 5.0.0

package/src/dotted-chart/compute-dots.ts

@@ -0,0 +1,241 @@
+/**
+ * Pure model behind `DottedChart` (RM-059) — no React, no canvas, so the row order, the
+ * time transform and the brush enumeration are fixture-testable on their own.
+ *
+ * A dotted chart puts one ROW per case and one DOT per event. `computeDots` groups a log by
+ * case (through `/core`'s `normalizeLog`, so lifecycle pairs and the three timestamp
+ * encodings are resolved exactly once), orders the rows by `sort`, and places every event
+ * on the x axis according to `x`:
+ *
+ * - `absolute` — the event's own start time (epoch ms).
+ * - `relative` — milliseconds since the case's first event.
+ * - `relative_day` — time of day, `0 … 24 h` (UTC), so daily rhythms line up.
+ * - `relative_week` — time of week, `0 … 7 d`, weeks starting Monday 00:00 (UTC).
+ *
+ * The two cyclic modes use UTC on purpose: a chart whose dots move when the reviewer's
+ * machine changes time zone is not a deterministic fixture.
+ */
+import {
+  ACTIVITY_COLOR_SLOTS,
+  ACTIVITY_OTHER_TOKEN,
+  type ActivityColor,
+} from "../core/activity-color-scale";
+import { asNormalizedLog, type AnyLog, type NormalizedEvent } from "../core/event-log";
+
+/** How the x axis places an event. */
+export type DottedChartX = "absolute" | "relative" | "relative_day" | "relative_week";
+
+/** How case rows are ordered, top to bottom. Every order is ascending and stable. */
+export type DottedChartSort = "start" | "end" | "duration" | "start_day";
+
+const DAY_MS = 86_400_000;
+const WEEK_MS = 7 * DAY_MS;
+/** 1970-01-01 was a Thursday; shifting by 3 days makes weeks start on Monday. */
+const MONDAY_OFFSET_MS = 3 * DAY_MS;
+
+/** One event, placed on the chart. */
+export interface DottedChartDot {
+  kind: "dot";
+  caseId: string;
+  /** Index of this dot's row in {@link DottedChartModel.rows}. */
+  rowIndex: number;
+  /** The normalized event (activity, start, end, resource, attributes). */
+  event: NormalizedEvent;
+  /** The event's position on the x axis, in the unit `x` implies (always milliseconds). */
+  x: number;
+}
+
+/** One case, placed on the chart. */
+export interface DottedChartRow {
+  kind: "row";
+  caseId: string;
+  /** Position in `rows` — top row is `0`. */
+  index: number;
+  start: number;
+  end: number;
+  duration: number;
+  eventCount: number;
+  firstActivity: string;
+  lastActivity: string;
+  /** This row's dots are `dots.slice(dotStart, dotEnd)`, in time order. */
+  dotStart: number;
+  dotEnd: number;
+}
+
+/** What {@link computeDots} returns. */
+export interface DottedChartModel {
+  x: DottedChartX;
+  sort: DottedChartSort;
+  rows: DottedChartRow[];
+  /** Every dot, grouped by row in `rows` order, each row's dots in time order. */
+  dots: DottedChartDot[];
+  /** The x extent to scale against. Never zero-width. */
+  domain: [number, number];
+}
+
+export interface ComputeDotsOptions {
+  x?: DottedChartX;
+  sort?: DottedChartSort;
+}
+
+function timeOfDay(ms: number): number {
+  return ((ms % DAY_MS) + DAY_MS) % DAY_MS;
+}
+
+function timeOfWeek(ms: number): number {
+  const shifted = ms + MONDAY_OFFSET_MS;
+  return ((shifted % WEEK_MS) + WEEK_MS) % WEEK_MS;
+}
+
+function placeX(x: DottedChartX, at: number, caseStart: number): number {
+  switch (x) {
+    case "relative":
+      return at - caseStart;
+    case "relative_day":
+      return timeOfDay(at);
+    case "relative_week":
+      return timeOfWeek(at);
+    default:
+      return at;
+  }
+}
+
+/**
+ * Build the dotted-chart model for a log.
+ *
+ * Deterministic: the same log and options always yield the same rows, dots and domain.
+ * Events whose start could not be parsed are left out (they have no place on a time axis);
+ * a case left with no placeable event is left out too.
+ */
+export function computeDots(log: AnyLog, options: ComputeDotsOptions = {}): DottedChartModel {
+  const x = options.x ?? "absolute";
+  const sort = options.sort ?? "start";
+  const normalized = asNormalizedLog(log);
+
+  const cases = normalized.cases
+    .map((kase) => ({
+      kase,
+      events: kase.events.filter((event) => Number.isFinite(event.start)),
+    }))
+    .filter((entry) => entry.events.length > 0);
+
+  const keyOf = (entry: (typeof cases)[number]): number => {
+    const first = entry.events[0] as NormalizedEvent;
+    const last = entry.events[entry.events.length - 1] as NormalizedEvent;
+    const start = first.start;
+    const end = Math.max(last.end, entry.kase.end);
+    switch (sort) {
+      case "end":
+        return end;
+      case "duration":
+        return end - start;
+      case "start_day":
+        return timeOfDay(start);
+      default:
+        return start;
+    }
+  };
+
+  // Decorate-sort-undecorate keeps the sort stable and each key computed once.
+  const ordered = cases
+    .map((entry, position) => ({ entry, position, key: keyOf(entry) }))
+    .sort((a, b) => a.key - b.key || a.position - b.position);
+
+  const rows: DottedChartRow[] = [];
+  const dots: DottedChartDot[] = [];
+  let min = Number.POSITIVE_INFINITY;
+  let max = Number.NEGATIVE_INFINITY;
+
+  for (const { entry } of ordered) {
+    const { kase, events } = entry;
+    const rowIndex = rows.length;
+    const first = events[0] as NormalizedEvent;
+    const last = events[events.length - 1] as NormalizedEvent;
+    const start = first.start;
+    const end = Number.isFinite(kase.end) ? Math.max(kase.end, start) : start;
+    const dotStart = dots.length;
+    for (const event of events) {
+      const value = placeX(x, event.start, start);
+      if (value < min) min = value;
+      if (value > max) max = value;
+      dots.push({ kind: "dot", caseId: kase.caseId, rowIndex, event, x: value });
+    }
+    rows.push({
+      kind: "row",
+      caseId: kase.caseId,
+      index: rowIndex,
+      start,
+      end,
+      duration: end - start,
+      eventCount: events.length,
+      firstActivity: first.activity,
+      lastActivity: last.activity,
+      dotStart,
+      dotEnd: dots.length,
+    });
+  }
+
+  let domain: [number, number];
+  if (x === "relative_day") domain = [0, DAY_MS];
+  else if (x === "relative_week") domain = [0, WEEK_MS];
+  else if (!Number.isFinite(min)) domain = [0, 1];
+  else if (min === max) domain = [min - 1, max + 1];
+  else domain = [min, max];
+
+  return { x, sort, rows, dots, domain };
+}
+
+/**
+ * Case ids of the rows a brush covers, in `rows` order.
+ *
+ * A row is covered when its index is in `[firstRow, lastRow]` (inclusive, either order) AND
+ * at least one of its dots lies in the x range `[x0, x1]` (inclusive, either order). The
+ * x test is what makes a brush over an empty stretch of time select nothing.
+ */
+export function casesInBrush(
+  model: DottedChartModel,
+  rowRange: readonly [number, number],
+  xRange: readonly [number, number],
+): string[] {
+  const firstRow = Math.max(0, Math.min(rowRange[0], rowRange[1]));
+  const lastRow = Math.min(model.rows.length - 1, Math.max(rowRange[0], rowRange[1]));
+  const lo = Math.min(xRange[0], xRange[1]);
+  const hi = Math.max(xRange[0], xRange[1]);
+  const ids: string[] = [];
+  for (let r = firstRow; r <= lastRow; r += 1) {
+    const row = model.rows[r] as DottedChartRow;
+    for (let d = row.dotStart; d < row.dotEnd; d += 1) {
+      const value = (model.dots[d] as DottedChartDot).x;
+      if (value >= lo && value <= hi) {
+        ids.push(row.caseId);
+        break;
+      }
+    }
+  }
+  return ids;
+}
+
+/** One entry of a {@link rankCategoryColors} legend. */
+export interface DottedChartCategory extends ActivityColor {
+  key: string;
+  /** How many dots carry this category. */
+  count: number;
+}
+
+/**
+ * Colour arbitrary category keys (resources, a caller's own grouping) with the SAME budget
+ * `activityColorScale` uses: the {@link ACTIVITY_COLOR_SLOTS} most frequent keys take
+ * `--chart-1 …`, every other key shares {@link ACTIVITY_OTHER_TOKEN} and is flagged
+ * `pattern: "other"`. Ranked by count descending, ties by key. Returns token names only.
+ */
+export function rankCategoryColors(keys: readonly string[]): DottedChartCategory[] {
+  const counts = new Map<string, number>();
+  for (const key of keys) counts.set(key, (counts.get(key) ?? 0) + 1);
+  return [...counts.entries()]
+    .sort((a, b) => b[1] - a[1] || (a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : 0))
+    .map(([key, count], index) =>
+      index < ACTIVITY_COLOR_SLOTS
+        ? { key, count, token: `--chart-${index + 1}` }
+        : { key, count, token: ACTIVITY_OTHER_TOKEN, pattern: "other" as const },
+    );
+}

package/src/dotted-chart/dotted-chart-labels.ts

@@ -0,0 +1,93 @@
+/**
+ * Every user-visible string `DottedChart` (RM-059) renders. `{name}` placeholders are
+ * filled at render; override any subset through the component's `labels` prop to localize.
+ */
+
+export interface DottedChartLabels {
+  /** Accessible name of the plot and its keyboard cursor. */
+  chart: string;
+  /** `{cases}`, `{events}`, `{from}`, `{to}`, `{sort}`, `{colorBy}` — the parallel summary. */
+  summary: string;
+  sortStart: string;
+  sortEnd: string;
+  sortDuration: string;
+  sortStartDay: string;
+  colorByActivity: string;
+  colorByResource: string;
+  colorByCustom: string;
+  /** `{caseId}`, `{events}`, `{duration}`, `{activities}` — spoken for a focused case row. */
+  row: string;
+  /** `{activity}`, `{time}`, `{caseId}` — spoken/shown for one event. */
+  dot: string;
+  /** `{resource}` — appended to a dot tooltip when the event has a resource. */
+  dotResource: string;
+  eventsOne: string;
+  eventsOther: string;
+  casesOne: string;
+  casesOther: string;
+  /** `{count}` more activities past the spoken prefix of a long trace. */
+  moreActivities: string;
+  /** `{cases}` — visible count of the current selection. */
+  selectionCount: string;
+  axisAbsolute: string;
+  axisRelative: string;
+  axisDay: string;
+  axisWeek: string;
+  /** The legend entry every category past the colour budget shares. */
+  other: string;
+  /** Category key for an event that carries no resource. */
+  noResource: string;
+  tableCaption: string;
+  columnCase: string;
+  columnFirstActivity: string;
+  columnLastActivity: string;
+  columnStart: string;
+  columnEnd: string;
+  columnDuration: string;
+  columnEvents: string;
+  columnState: string;
+  selected: string;
+  empty: string;
+  emptyBody: string;
+}
+
+/** The shipped English labels. */
+export const DOTTED_CHART_DEFAULT_LABELS: Readonly<DottedChartLabels> = Object.freeze({
+  chart: "Dotted chart — one row per case, one dot per event",
+  summary:
+    "{cases} and {events}, from {from} to {to}. One row per case, sorted by {sort}; one dot per event, coloured by {colorBy}.",
+  sortStart: "case start",
+  sortEnd: "case end",
+  sortDuration: "case duration",
+  sortStartDay: "time of day the case started",
+  colorByActivity: "activity",
+  colorByResource: "resource",
+  colorByCustom: "category",
+  row: "Case {caseId}, {events}, {duration}: {activities}",
+  dot: "{activity} at {time}, case {caseId}",
+  dotResource: "by {resource}",
+  eventsOne: "{count} event",
+  eventsOther: "{count} events",
+  casesOne: "{count} case",
+  casesOther: "{count} cases",
+  moreActivities: "and {count} more",
+  selectionCount: "{cases} selected",
+  axisAbsolute: "Time (UTC)",
+  axisRelative: "Time since case start",
+  axisDay: "Time of day (UTC)",
+  axisWeek: "Time of week (UTC)",
+  other: "Other",
+  noResource: "No resource",
+  tableCaption: "Cases — first and last activity, start, end, duration and event count",
+  columnCase: "Case",
+  columnFirstActivity: "First activity",
+  columnLastActivity: "Last activity",
+  columnStart: "Start",
+  columnEnd: "End",
+  columnDuration: "Duration",
+  columnEvents: "Events",
+  columnState: "State",
+  selected: "selected",
+  empty: "No events",
+  emptyBody: "No cases match the current filters.",
+});

package/src/dotted-chart/dotted-chart.stories.tsx

@@ -0,0 +1,182 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useCallback, useState } from "react";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
+import { activityColorScale } from "../core/activity-color-scale";
+import { discoverGraph } from "../core/discover-graph";
+import { generateSyntheticLog } from "../core/fixtures/synthetic-log";
+import type { EventLog } from "../core/types";
+import { computeDots } from "./compute-dots";
+import { DottedChart, type DottedChartProps } from "./dotted-chart";
+
+const log = generateSyntheticLog({ cases: 300, seed: 42 });
+const colorScale = activityColorScale(discoverGraph(log));
+const rows = computeDots(log).rows;
+
+const HOUR = 3_600_000;
+const T0 = Date.UTC(2026, 0, 5, 9);
+/** Three short cases — small enough that a play function can aim at a known dot. */
+const tinyLog: EventLog = {
+  events: [
+    { caseId: "order-1", activity: "Create Order", timestamp: T0 },
+    { caseId: "order-1", activity: "Ship Order", timestamp: T0 + 6 * HOUR },
+    { caseId: "order-2", activity: "Create Order", timestamp: T0 + 2 * HOUR },
+    { caseId: "order-2", activity: "Ship Order", timestamp: T0 + 9 * HOUR },
+    { caseId: "order-3", activity: "Create Order", timestamp: T0 + 4 * HOUR },
+    { caseId: "order-3", activity: "Cancel Order", timestamp: T0 + 12 * HOUR },
+  ],
+};
+
+/** Owns the selection a playbook would own, so the stories are interactive. */
+function Stateful({
+  initialSelected = [],
+  onSelect,
+  ...props
+}: DottedChartProps & { initialSelected?: string[] }) {
+  const [selected, setSelected] = useState<string[]>(initialSelected);
+  const handleSelect = useCallback(
+    (ids: string[]) => {
+      setSelected(ids);
+      onSelect?.(ids);
+    },
+    [onSelect],
+  );
+  return <DottedChart {...props} selectedCaseIds={selected} onSelect={handleSelect} />;
+}
+
+const meta = {
+  title: "Process/DottedChart",
+  component: DottedChart,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    // `color` here picks a COLOURING STRATEGY ("activity" | "resource" | a
+    // function), not a CSS colour. The controls colour matcher is keyed on the
+    // prop NAME, and it runs (and warns) before any argTypes enhancer can veto
+    // it, so the opt-out has to be the matcher itself: a pattern no prop name
+    // matches. Without this the props table offered a hex picker whose value the
+    // component cannot use (2026-09-17 review §A5).
+    controls: { matchers: { color: /^$/ } },
+    docs: {
+      description: {
+        component:
+          "One row per case, one dot per event, coloured by activity with the same scale " +
+          "`ProcessMap` and `VariantExplorer` read. Built on the charts canvas mark layer inside " +
+          "`ChartFrame`, so 100k dots stay one canvas with one keyboard cursor and a spoken " +
+          "summary. Click a dot or press Enter on a row to select a case; drag a rectangle to " +
+          'emit a `{ kind: "cases" }` filter intent. The chart never filters itself.',
+      },
+    },
+  },
+  args: {
+    log,
+    colorScale,
+    title: "Order-to-cash cases over time",
+    description: "Each row is a case, each dot an event, coloured by activity.",
+    onSelect: fn(),
+    onFilterIntent: fn(),
+  },
+  render: (args) => <Stateful {...args} />,
+} satisfies Meta<typeof DottedChart>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Absolute time on the x axis, rows sorted by case start (the defaults). */
+export const Absolute: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(
+      await canvas.findByText(new RegExp(`^${rows.length} cases and`)),
+    ).toBeInTheDocument();
+    await expect(canvasElement.querySelector('[data-slot="canvas-layer-surface"]')).not.toBeNull();
+  },
+};
+
+/** Every case starts at zero — compare case shapes, not calendar dates. */
+export const RelativeToStart: Story = {
+  args: { x: "relative" },
+};
+
+/** Shortest cases on top; the long tail collects at the bottom. */
+export const SortByDuration: Story = {
+  args: { sort: "duration" },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const sorted = computeDots(log, { sort: "duration" }).rows;
+    const cursor = await canvas.findByRole("button", { name: /dotted chart/i });
+    cursor.focus();
+    await userEvent.keyboard("{ArrowDown}{ArrowDown}");
+    await waitFor(() =>
+      expect(
+        canvasElement.querySelector('[data-slot="canvas-layer-cursor-status"]'),
+      ).toHaveTextContent(`Case ${sorted[2]!.caseId},`),
+    );
+    await userEvent.keyboard("{Enter}");
+    await waitFor(() => expect(args.onSelect).toHaveBeenCalledWith([sorted[2]!.caseId]));
+    await expect(await canvas.findByText("1 case selected")).toBeInTheDocument();
+  },
+};
+
+/** Colour by who executed each event; the same colour budget as activities. */
+export const ColorByResource: Story = {
+  args: { color: "resource", title: "Work by resource over time" },
+};
+
+/** Ten cases selected — everything else dims, and a text count states the selection. */
+export const WithSelection: Story = {
+  render: (args) => (
+    <Stateful {...args} initialSelected={rows.slice(0, 10).map((row) => row.caseId)} />
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByText("10 cases selected")).toBeInTheDocument();
+  },
+};
+
+/** Click a dot to select its case. */
+export const ClickToSelect: Story = {
+  args: { log: tinyLog, colorScale: undefined, title: "Three orders", height: 240 },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByRole("button", { name: /dotted chart/i });
+    const surface = canvasElement.querySelector(
+      '[data-slot="canvas-layer-surface"]',
+    ) as HTMLCanvasElement;
+    const rect = surface.getBoundingClientRect();
+    // order-1's first event is the earliest in the log: the left inset, top row centre.
+    const inset = 6;
+    const rowHeight = (rect.height - 2 * inset) / 3;
+    await userEvent.pointer([
+      {
+        keys: "[MouseLeft]",
+        target: surface,
+        coords: { clientX: rect.left + inset, clientY: rect.top + inset + rowHeight / 2 },
+      },
+    ]);
+    await waitFor(() => expect(args.onSelect).toHaveBeenCalledWith(["order-1"]));
+    await expect(await canvas.findByText("1 case selected")).toBeInTheDocument();
+  },
+};
+
+/** The accessible twin: every case as a table row. */
+export const TableView: Story = {
+  args: { log: tinyLog, colorScale: undefined, tableView: true, title: "Three orders" },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const table = await canvas.findByRole("table");
+    await expect(within(table).getAllByRole("row")).toHaveLength(4);
+    await expect(within(table).getByRole("cell", { name: "order-3" })).toBeInTheDocument();
+  },
+};
+
+/** No log yet — the frame’s skeleton. */
+export const Loading: Story = {
+  args: { loading: true, log: { events: [] } },
+};
+
+/** The filters left no cases. */
+export const Empty: Story = {
+  args: { log: { events: [] } },
+  play: async ({ canvasElement }) => {
+    await expect(await within(canvasElement).findByText("No events")).toBeInTheDocument();
+  },
+};

package/src/dotted-chart/dotted-chart.test.tsx

@@ -0,0 +1,135 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { generateSyntheticLog } from "../core/fixtures/synthetic-log";
+import type { EventLog } from "../core/types";
+import { computeDots } from "./compute-dots";
+import { DottedChart } from "./dotted-chart";
+
+const PLOT = { width: 600, height: 300 };
+
+// jsdom has no layout: give every element a fixed box so the plot measures and mounts
+// its canvas layer. The canvas itself has no 2D context under jsdom, which is fine — these
+// tests exercise the keyboard, brush and text channels, not pixels.
+const originalRect = HTMLElement.prototype.getBoundingClientRect;
+beforeAll(() => {
+  HTMLElement.prototype.getBoundingClientRect = () =>
+    ({
+      x: 0,
+      y: 0,
+      left: 0,
+      top: 0,
+      right: PLOT.width,
+      bottom: PLOT.height,
+      width: PLOT.width,
+      height: PLOT.height,
+      toJSON: () => ({}),
+    }) as DOMRect;
+  HTMLCanvasElement.prototype.getContext = (() => null) as never;
+  // jsdom ships no PointerEvent; without one `fireEvent.pointer*` drops clientX/pointerId.
+  if (typeof window.PointerEvent !== "function") {
+    class PointerEventShim extends MouseEvent {
+      pointerId: number;
+      constructor(type: string, init: PointerEventInit = {}) {
+        super(type, init);
+        this.pointerId = init.pointerId ?? 0;
+      }
+    }
+    window.PointerEvent = PointerEventShim as unknown as typeof PointerEvent;
+  }
+});
+afterAll(() => {
+  HTMLElement.prototype.getBoundingClientRect = originalRect;
+});
+afterEach(cleanup);
+
+const log: EventLog = generateSyntheticLog({ cases: 12, seed: 11 });
+const rows = computeDots(log).rows;
+
+function cursor() {
+  return screen.getByRole("button", { name: /dotted chart/i });
+}
+
+describe("DottedChart — rendering", () => {
+  it("states the case and event counts in the parallel summary", () => {
+    render(<DottedChart log={log} />);
+    expect(screen.getByText(new RegExp(`^${rows.length} cases and \\d+ events`))).toBeTruthy();
+  });
+
+  it("renders a legend entry for each activity present", () => {
+    const { container } = render(<DottedChart log={log} />);
+    const legend = container.querySelector('[data-slot="dotted-chart-legend"]');
+    expect(legend?.textContent).toContain(log.events[0]!.activity);
+  });
+
+  it("renders the empty panel when the log has no events", () => {
+    render(<DottedChart log={{ events: [] }} />);
+    expect(screen.getByText("No events")).toBeTruthy();
+  });
+
+  it("renders the table twin with one row per case", () => {
+    render(<DottedChart log={log} tableView />);
+    const table = screen.getByRole("table");
+    // header row + one row per case
+    expect(table.querySelectorAll("tr")).toHaveLength(rows.length + 1);
+    expect(screen.getByRole("columnheader", { name: "Duration" })).toBeTruthy();
+  });
+
+  it("marks selected cases in the table twin with text, not colour alone", () => {
+    render(<DottedChart log={log} tableView selectedCaseIds={[rows[0]!.caseId]} />);
+    expect(screen.getByRole("columnheader", { name: "State" })).toBeTruthy();
+    expect(screen.getByText("selected")).toBeTruthy();
+  });
+});
+
+describe("DottedChart — keyboard", () => {
+  it("moves by case row in sort order and selects with Enter", () => {
+    const onSelect = vi.fn();
+    render(<DottedChart log={log} sort="duration" onSelect={onSelect} />);
+    const sorted = computeDots(log, { sort: "duration" }).rows;
+    const button = cursor();
+    fireEvent.focus(button);
+    fireEvent.keyDown(button, { key: "ArrowDown" });
+    expect(screen.getByRole("status").textContent).toContain(`Case ${sorted[1]!.caseId}`);
+    fireEvent.click(button);
+    expect(onSelect).toHaveBeenCalledWith([sorted[1]!.caseId]);
+  });
+
+  it("extends a range with Shift+Arrow and commits it as one filter intent", () => {
+    const onSelect = vi.fn();
+    const onFilterIntent = vi.fn();
+    render(<DottedChart log={log} onSelect={onSelect} onFilterIntent={onFilterIntent} />);
+    const button = cursor();
+    fireEvent.focus(button);
+    fireEvent.keyDown(button, { key: "ArrowDown", shiftKey: true });
+    fireEvent.keyDown(button, { key: "ArrowDown", shiftKey: true });
+    const expected = rows.slice(0, 3).map((row) => row.caseId);
+    expect(onSelect).toHaveBeenLastCalledWith(expected);
+    fireEvent.click(button);
+    expect(onFilterIntent).toHaveBeenCalledTimes(1);
+    expect(onFilterIntent).toHaveBeenCalledWith({ kind: "cases", ids: expected });
+  });
+});
+
+describe("DottedChart — brush", () => {
+  it("emits one filter intent with every brushed case, in rows order", () => {
+    const big = generateSyntheticLog({ cases: 200, seed: 9 });
+    const bigRows = computeDots(big).rows;
+    const onSelect = vi.fn();
+    const onFilterIntent = vi.fn();
+    const { container } = render(
+      <DottedChart log={big} onSelect={onSelect} onFilterIntent={onFilterIntent} />,
+    );
+    const plot = container.querySelector('[data-slot="dotted-chart-plot"]') as HTMLElement;
+    fireEvent.pointerDown(plot, { button: 0, pointerId: 1, clientX: 0, clientY: 0 });
+    fireEvent.pointerMove(plot, { pointerId: 1, clientX: 300, clientY: 150 });
+    fireEvent.pointerMove(plot, { pointerId: 1, clientX: PLOT.width, clientY: PLOT.height });
+    expect(container.querySelector('[data-slot="dotted-chart-brush"]')).not.toBeNull();
+    fireEvent.pointerUp(plot, { pointerId: 1, clientX: PLOT.width, clientY: PLOT.height });
+
+    const expected = bigRows.map((row) => row.caseId);
+    expect(onFilterIntent).toHaveBeenCalledTimes(1);
+    expect(onFilterIntent).toHaveBeenCalledWith({ kind: "cases", ids: expected });
+    expect(onSelect).toHaveBeenCalledWith(expected);
+    expect(container.querySelector('[data-slot="dotted-chart-brush"]')).toBeNull();
+  });
+});