insomni-plot 0.1.0-alpha.0

package/src/grammar/geoms/line.test.ts

@@ -0,0 +1,247 @@
+import { createFrame } from "insomni";
+import { describe, expect, test } from "vite-plus/test";
+
+import { resolveAes } from "../aes.ts";
+import { buildPositionScale, type ScaleBundle } from "../scales.ts";
+import { themeDefault } from "../theme.ts";
+import { line } from "./line.ts";
+import { emphasisKeyFor, geomEmphasisBase } from "./emphasis.ts";
+import type { CompileContext } from "./types.ts";
+
+interface Row {
+  x: number;
+  y: number;
+  series: string;
+}
+
+const data: Row[] = [
+  { x: 0, y: 0, series: "a" },
+  { x: 5, y: 10, series: "b" },
+  { x: 10, y: 20, series: "a" },
+];
+
+interface OrderedRow extends Row {
+  order: number;
+}
+
+function makeCtx<T extends Row>(rows: readonly T[]): CompileContext<T> {
+  const xAes = resolveAes<T, unknown>("x");
+  const yAes = resolveAes<T, unknown>("y");
+  const xScale = buildPositionScale(xAes, rows, [0, 100]);
+  const yScale = buildPositionScale(yAes, rows, [200, 0]);
+  const scales: ScaleBundle = { x: xScale, y: yScale };
+  return {
+    data: rows,
+    scales,
+    plot: createFrame({ x: 50, y: 30, width: 100, height: 200 }),
+    theme: themeDefault,
+    atlas: undefined,
+    emphasisBase: geomEmphasisBase(0),
+  };
+}
+
+function capturePolylines(builders: ReturnType<ReturnType<typeof line<Row>>["compile"]>) {
+  const polys: Array<{ emphasisKey?: number }> = [];
+  const layer = {
+    pushPolyline: (s: { points: unknown; emphasisKey?: number }) => polys.push(s),
+    pushCircle: () => {},
+  };
+  for (const b of builders) b.addTo(layer as never);
+  return polys;
+}
+
+describe("line geom — emphasis-key tagging (P5-T3)", () => {
+  test("multi-line tags each color group's strokes with a stable per-series key", () => {
+    // Two points per series so each group emits a polyline. First-seen: a, b.
+    const rows: Row[] = [
+      { x: 0, y: 0, series: "a" },
+      { x: 5, y: 10, series: "b" },
+      { x: 10, y: 20, series: "a" },
+      { x: 15, y: 5, series: "b" },
+    ];
+    const geom = line<Row>({ x: "x", y: "y", color: "series" });
+    const base = geomEmphasisBase(0);
+    const polys = capturePolylines(geom.compile(makeCtx(rows)));
+    const keys = polys.map((p) => p.emphasisKey);
+    expect(keys).toContain(emphasisKeyFor(base, 0)); // series "a"
+    expect(keys).toContain(emphasisKeyFor(base, 1)); // series "b"
+    expect(keys.every((k) => k !== undefined)).toBe(true);
+  });
+
+  test("single-line tags nothing (no sibling series to dim against)", () => {
+    const geom = line<Row>({ x: "x", y: "y" });
+    const polys = capturePolylines(geom.compile(makeCtx(data)));
+    expect(polys.every((p) => p.emphasisKey === undefined)).toBe(true);
+    // No resolver for single-line either.
+    expect(geom.emphasisResolution!(makeCtx(data))).toBeNull();
+  });
+
+  test("resolver maps a hovered vertex to its color group's key", () => {
+    const geom = line<Row>({ x: "x", y: "y", color: "series" });
+    const res = geom.emphasisResolution!(makeCtx(data))!;
+    const base = geomEmphasisBase(0);
+    // data[1].series === "b" → group ordinal 1 (first-seen: a, b).
+    expect(res.resolve({ geomKind: "line", dataIndex: 1, data, x: 0, y: 0 })).toBe(
+      emphasisKeyFor(base, 1),
+    );
+    // data[0].series === "a" → ordinal 0.
+    expect(res.resolve({ geomKind: "line", dataIndex: 0, data, x: 0, y: 0 })).toBe(
+      emphasisKeyFor(base, 0),
+    );
+  });
+
+  test("no compile-time hover dim: strokes stable across hover", () => {
+    const geom = line<Row>({ x: "x", y: "y", color: "series" });
+    const plain = capturePolylines(geom.compile(makeCtx(data)));
+    const hovered = capturePolylines(
+      geom.compile({
+        ...makeCtx(data),
+        hovered: { geomKind: "line", dataIndex: 1, data, x: 0, y: 0 },
+      }),
+    );
+    expect(hovered.map((p) => p.emphasisKey)).toEqual(plain.map((p) => p.emphasisKey));
+  });
+});
+
+describe("line geom — compileHitTest", () => {
+  test("emits one hit per vertex at scaled (x,y) absolute px", () => {
+    const geom = line<Row>({ x: "x", y: "y" });
+    const hits = geom.compileHitTest!(makeCtx(data))!;
+    expect(hits.geomKind).toBe("line");
+    expect(hits.dataIndex.length).toBe(3);
+    // x=0 → 0 + plot.x(50) = 50; y=0 → 200 + plot.y(30) = 230
+    expect(hits.positions[0]).toBeCloseTo(50, 3);
+    expect(hits.positions[1]).toBeCloseTo(230, 3);
+    // x=10 → 100 + 50 = 150; y=20 → 0 + 30 = 30
+    expect(hits.positions[4]).toBeCloseTo(150, 3);
+    expect(hits.positions[5]).toBeCloseTo(30, 3);
+  });
+
+  test("filters non-finite positions", () => {
+    const dirty: Row[] = [
+      { x: 0, y: 0, series: "a" },
+      { x: NaN, y: 5, series: "b" },
+      { x: 10, y: 20, series: "a" },
+    ];
+    const geom = line<Row>({ x: "x", y: "y" });
+    const hits = geom.compileHitTest!(makeCtx(dirty))!;
+    expect(Array.from(hits.dataIndex)).toEqual([0, 2]);
+  });
+
+  test("emits per-vertex hits even with color channel (multi-series)", () => {
+    const geom = line<Row>({ x: "x", y: "y", color: "series" });
+    const hits = geom.compileHitTest!(makeCtx(data))!;
+    expect(hits.dataIndex.length).toBe(3);
+    expect(hits.channels.color?.column).toBe("series");
+  });
+
+  test("returns null for empty data", () => {
+    const geom = line<Row>({ x: "x", y: "y" });
+    expect(geom.compileHitTest!(makeCtx<Row>([]))).toBeNull();
+  });
+
+  test("pickRadius scales with stroke width", () => {
+    const geom = line<Row>({ x: "x", y: "y" });
+    const hits = geom.compileHitTest!(makeCtx(data))!;
+    expect(hits.pickRadius).toBeGreaterThanOrEqual(8);
+  });
+
+  test("nearestX: emits pickAxis 'x' and pickRadius spanning plot", () => {
+    const geom = line<Row>({ x: "x", y: "y" }, { nearestX: true });
+    const hits = geom.compileHitTest!(makeCtx(data))!;
+    expect(hits.pickAxis).toBe("x");
+    // Radius is at least the plot's larger dimension so the cursor anywhere
+    // inside the plot picks a vertex by x.
+    expect(hits.pickRadius).toBeGreaterThanOrEqual(200);
+  });
+
+  test("default mode leaves pickAxis undefined", () => {
+    const geom = line<Row>({ x: "x", y: "y" });
+    const hits = geom.compileHitTest!(makeCtx(data))!;
+    expect(hits.pickAxis).toBeUndefined();
+  });
+});
+
+describe("line geom — ordered path rendering", () => {
+  test("connects a single line in ascending order aesthetic", () => {
+    const rows: OrderedRow[] = [
+      { x: 10, y: 20, series: "a", order: 3 },
+      { x: 0, y: 0, series: "a", order: 1 },
+      { x: 5, y: 10, series: "a", order: 2 },
+    ];
+    const geom = line<OrderedRow>({ x: "x", y: "y", order: "order" });
+    const builders = geom.compile(makeCtx(rows));
+    const polylines: { x: number; y: number }[][] = [];
+    const layer = {
+      pushPolyline({ points }: { points: { x: number; y: number }[] }) {
+        polylines.push(points);
+      },
+    };
+    for (const builder of builders) builder.addTo(layer as never);
+    expect(polylines).toHaveLength(1);
+    expect(polylines[0]?.map((p) => p.x)).toEqual([50, 100, 150]);
+    expect(polylines[0]?.map((p) => p.y)).toEqual([230, 130, 30]);
+  });
+
+  test("sorts within each color-grouped series", () => {
+    const rows: OrderedRow[] = [
+      { x: 10, y: 18, series: "b", order: 2 },
+      { x: 2, y: 2, series: "a", order: 2 },
+      { x: 0, y: 0, series: "a", order: 1 },
+      { x: 8, y: 16, series: "b", order: 1 },
+    ];
+    const geom = line<OrderedRow>({ x: "x", y: "y", color: "series", order: "order" });
+    const builders = geom.compile(makeCtx(rows));
+    const polylines: { x: number; y: number }[][] = [];
+    const layer = {
+      pushPolyline({ points }: { points: { x: number; y: number }[] }) {
+        polylines.push(points);
+      },
+    };
+    for (const builder of builders) builder.addTo(layer as never);
+    expect(polylines).toHaveLength(2);
+    expect(polylines.map((line) => line.map((p) => p.x))).toEqual([
+      [130, 150],
+      [50, 70],
+    ]);
+  });
+});
+
+describe("line geom — focus halo decorator (Gap 2)", () => {
+  // The halo is a stroke-only circle (haloRing) at the hovered vertex. Mirrors
+  // point.test.ts: re-derived geometry; theme hover stroke width; key default
+  // (exempt) so the ring stays full-strength while sibling series dim.
+  function decorate(dataIndex: number, hitData: readonly unknown[] = data) {
+    const geom = line<Row>({ x: "x", y: "y", color: "series" });
+    const deco = geom.hoverDecoration!(makeCtx(data))!;
+    const circles: Array<{
+      cx: number;
+      cy: number;
+      radius: number;
+      fill?: unknown;
+      stroke?: unknown;
+      strokeWidth?: number;
+      emphasisKey?: number;
+    }> = [];
+    const layer = { pushCircle: (s: never) => circles.push(s) };
+    deco.decorate({ geomKind: "line", dataIndex, data: hitData, x: 0, y: 0 }, layer as never);
+    return { deco, circles };
+  }
+
+  test("emits a stroke-only ring at the hovered vertex, exempt from dim", () => {
+    const { deco, circles } = decorate(1);
+    expect(deco.geomKind).toBe("line");
+    expect(circles.length).toBe(1);
+    // haloRing pushes a stroke-only circle (no fill).
+    expect(circles[0]!.fill).toBeUndefined();
+    expect(circles[0]!.stroke).toBeDefined();
+    expect(circles[0]!.strokeWidth).toBe(themeDefault.interactions.hover.haloStrokeWidth);
+    expect(circles[0]!.emphasisKey).toBeUndefined();
+    // Vertex 1 is (x=5, y=10) → x scale [0,100] over domain [0,10] → 50; +plot.x(50)=100.
+    expect(circles[0]!.cx).toBeCloseTo(100, 3);
+  });
+
+  test("hover on a foreign data array emits nothing", () => {
+    expect(decorate(0, []).circles.length).toBe(0);
+  });
+});