insomni-plot 0.1.0-alpha.0

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

@@ -0,0 +1,247 @@
+// @vitest-environment jsdom
+import { createFrame } from "insomni";
+import { describe, expect, test } from "vite-plus/test";
+import { plot } from "../chart.ts";
+import { resolveAes } from "../aes.ts";
+import { buildPositionScale, type ScaleBundle } from "../scales.ts";
+import { themeDefault } from "../theme.ts";
+import { ridgeline } from "./ridgeline.ts";
+import { emphasisKeyFor, geomEmphasisBase } from "./emphasis.ts";
+import type { CompileContext } from "./types.ts";
+
+// Fake Layer recording the emphasisKey of every primitive a ridge composites
+// (KDE/hist polygon + silhouette polyline + baseline polyline + inner dot/line).
+function makeKeyCapture() {
+  const keys: (number | undefined)[] = [];
+  const record = (s: { emphasisKey?: number }) => keys.push(s.emphasisKey);
+  const layer = {
+    pushRect: record,
+    pushCircle: record,
+    pushEllipse: record,
+    pushSegment: record,
+    pushLine: record,
+    pushPolyline: record,
+    pushPolygon: record,
+    pushText: () => layer,
+    pushString: () => layer,
+  };
+  return { layer, keys };
+}
+
+interface Obs {
+  group: string;
+  value: number;
+}
+
+const fixture = {
+  threeGroups: (): Obs[] => {
+    const out: Obs[] = [];
+    const seeds = { A: 0.1, B: 0.5, C: 0.9 };
+    let r = 0;
+    const rand = () => {
+      r = (r * 9301 + 49297) % 233280;
+      return r / 233280;
+    };
+    for (const [name, mu] of Object.entries(seeds)) {
+      for (let i = 0; i < 50; i++) {
+        out.push({ group: name, value: mu + (rand() - 0.5) * 0.3 });
+      }
+    }
+    return out;
+  },
+  bimodal: (): Obs[] => {
+    const out: Obs[] = [];
+    for (let i = 0; i < 30; i++) out.push({ group: "A", value: 0.2 + i * 0.005 });
+    for (let i = 0; i < 30; i++) out.push({ group: "A", value: 0.8 + i * 0.005 });
+    return out;
+  },
+};
+
+describe("ridgeline()", () => {
+  test("renders one closed silhouette per category in KDE mode", () => {
+    const svg = plot({ data: fixture.threeGroups(), width: 480, height: 320 })
+      .layer(ridgeline({ x: "value", y: "group" }))
+      .toSVG();
+    expect(svg).toBeInstanceOf(SVGSVGElement);
+    expect(svg.querySelectorAll("polygon").length).toBeGreaterThan(0);
+  });
+
+  test("histogram mode emits a step polygon per row", () => {
+    const svg = plot({ data: fixture.threeGroups(), width: 480, height: 320 })
+      .layer(
+        ridgeline(
+          { x: "value", y: "group" },
+          { geom: "histogram", bins: 12, baseline: false, inner: "none" },
+        ),
+      )
+      .toSVG();
+    expect(svg.querySelectorAll("polygon").length).toBeGreaterThan(0);
+  });
+
+  test("gradient fill renders alongside solid fill (both produce output)", () => {
+    // The SVG renderer tessellates each `pushPolygon` into many triangles, so
+    // probing exact element counts is fragile. Verify both modes render
+    // without throwing and produce non-empty SVG output.
+    const svgSolid = plot({ data: fixture.threeGroups(), width: 320, height: 240 })
+      .layer(
+        ridgeline(
+          { x: "value", y: "group" },
+          { fillMode: "solid", baseline: false, inner: "none", gridSize: 32 },
+        ),
+      )
+      .toSVG();
+    const svgGrad = plot({ data: fixture.threeGroups(), width: 320, height: 240 })
+      .layer(
+        ridgeline(
+          { x: "value", y: "group" },
+          { fillMode: "gradient", baseline: false, inner: "none", gridSize: 32 },
+        ),
+      )
+      .toSVG();
+    expect(svgSolid.querySelectorAll("polygon").length).toBeGreaterThan(0);
+    expect(svgGrad.querySelectorAll("polygon").length).toBeGreaterThan(0);
+  });
+
+  test("does not throw on degenerate samples (n=1, all-equal)", () => {
+    expect(() =>
+      plot({ data: [{ group: "A", value: 5 }] as Obs[] })
+        .layer(ridgeline({ x: "value", y: "group" }))
+        .toSVG({ width: 200, height: 200 }),
+    ).not.toThrow();
+    expect(() =>
+      plot({ data: [3, 3, 3, 3].map((v) => ({ group: "A", value: v })) as Obs[] })
+        .layer(ridgeline({ x: "value", y: "group" }))
+        .toSVG({ width: 200, height: 200 }),
+    ).not.toThrow();
+  });
+
+  test("scale: 'count' / 'area' / 'width' all render", () => {
+    for (const mode of ["width", "area", "count"] as const) {
+      const svg = plot({ data: fixture.threeGroups(), width: 400, height: 300 })
+        .layer(ridgeline({ x: "value", y: "group" }, { scale: mode }))
+        .toSVG();
+      expect(svg).toBeInstanceOf(SVGSVGElement);
+    }
+  });
+
+  test("inner: 'median' / 'quartile' / 'mean' all render without throwing", () => {
+    for (const inner of ["median", "quartile", "mean"] as const) {
+      const svg = plot({ data: fixture.threeGroups(), width: 320, height: 240 })
+        .layer(ridgeline({ x: "value", y: "group" }, { inner }))
+        .toSVG();
+      expect(svg).toBeInstanceOf(SVGSVGElement);
+    }
+  });
+
+  test("orientation auto-detect: y-band vs x-band", () => {
+    const svgYBand = plot({ data: fixture.threeGroups(), width: 320, height: 240 })
+      .layer(ridgeline({ x: "value", y: "group" }))
+      .toSVG();
+    const svgXBand = plot({ data: fixture.threeGroups(), width: 320, height: 240 })
+      .layer(ridgeline({ x: "group", y: "value" }))
+      .toSVG();
+    expect(svgYBand.querySelectorAll("polygon").length).toBeGreaterThan(0);
+    expect(svgXBand.querySelectorAll("polygon").length).toBeGreaterThan(0);
+  });
+
+  test("overlap factor scales row height (3x produces measurably taller silhouettes)", () => {
+    const svgFlat = plot({ data: fixture.bimodal(), width: 320, height: 240 })
+      .layer(ridgeline({ x: "value", y: "group" }, { overlap: 1, baseline: false }))
+      .toSVG();
+    const svgTall = plot({ data: fixture.bimodal(), width: 320, height: 240 })
+      .layer(ridgeline({ x: "value", y: "group" }, { overlap: 3, baseline: false }))
+      .toSVG();
+    // Both should produce polygons; we don't probe geometry directly, but we
+    // confirm both render without error.
+    expect(svgFlat.querySelectorAll("polygon").length).toBeGreaterThan(0);
+    expect(svgTall.querySelectorAll("polygon").length).toBeGreaterThan(0);
+  });
+
+  test("baseline: true draws an additional polygon per row vs. baseline: false", () => {
+    // `pushPolyline` is tessellated into triangles → emitted as <polygon>.
+    // Each row's baseline polyline contributes a couple of triangles, so the
+    // baseline-on chart emits strictly more <polygon> elements.
+    const data = fixture.threeGroups();
+    const withBase = plot({ data, width: 320, height: 240 })
+      .layer(ridgeline({ x: "value", y: "group" }, { baseline: true, inner: "none" }))
+      .toSVG();
+    const noBase = plot({ data, width: 320, height: 240 })
+      .layer(ridgeline({ x: "value", y: "group" }, { baseline: false, inner: "none" }))
+      .toSVG();
+    const polysWith = withBase.querySelectorAll("polygon").length;
+    const polysNo = noBase.querySelectorAll("polygon").length;
+    expect(polysWith).toBeGreaterThan(polysNo);
+  });
+
+  test("compileHitTest emits one hit per row at (median, bandCenter)", () => {
+    const data = fixture.threeGroups();
+    const xAes = resolveAes<Obs, unknown>("value");
+    const yAes = resolveAes<Obs, unknown>("group");
+    const xScale = buildPositionScale(xAes, data, [0, 300]);
+    const yScale = buildPositionScale(yAes, data, [200, 0], { type: "band", padding: 0 });
+    const scales: ScaleBundle = { x: xScale, y: yScale };
+    const ctx: CompileContext<Obs> = {
+      data,
+      scales,
+      plot: createFrame({ x: 50, y: 30, width: 300, height: 200 }),
+      theme: themeDefault,
+      atlas: undefined,
+    };
+    const geom = ridgeline<Obs>({ x: "value", y: "group" });
+    const hits = geom.compileHitTest!(ctx)!;
+    expect(hits.geomKind).toBe("ridgeline");
+    expect(hits.dataIndex.length).toBe(3);
+    expect(new Set(hits.seriesKey)).toEqual(new Set(["A", "B", "C"]));
+    // size channel surfaces sample size per row.
+    expect(hits.channels.size!.fn(data[0]!, 0)).toBe(50);
+  });
+});
+
+describe("ridgeline() — GPU hover emphasis (P5-T3 Gap 1)", () => {
+  function makeCtx(data: Obs[], emphasis = true): CompileContext<Obs> {
+    const xAes = resolveAes<Obs, unknown>("value");
+    const yAes = resolveAes<Obs, unknown>("group");
+    const xScale = buildPositionScale(xAes, data, [0, 300]);
+    const yScale = buildPositionScale(yAes, data, [200, 0], { type: "band", padding: 0 });
+    const scales: ScaleBundle = { x: xScale, y: yScale };
+    return {
+      data,
+      scales,
+      plot: createFrame({ x: 50, y: 30, width: 300, height: 200 }),
+      theme: themeDefault,
+      atlas: undefined,
+      emphasisBase: emphasis ? geomEmphasisBase(0) : undefined,
+    };
+  }
+
+  test("tagging present + every primitive of a single row shares ONE key", () => {
+    const data = fixture.bimodal(); // one row "A"
+    const geom = ridgeline<Obs>({ x: "value", y: "group" }, { inner: "quartile", baseline: true });
+    const { layer, keys } = makeKeyCapture();
+    for (const b of geom.compile(makeCtx(data))) b.addTo(layer as never);
+    const nonzero = keys.filter((k): k is number => k !== undefined && k >= 1);
+    expect(nonzero.length).toBeGreaterThan(0);
+    const expected = emphasisKeyFor(geomEmphasisBase(0), 0);
+    expect(new Set(nonzero)).toEqual(new Set([expected]));
+  });
+
+  test("emphasisResolution maps a hit's dataIndex (bucketIndex) to the tagged key", () => {
+    const data = fixture.threeGroups();
+    const geom = ridgeline<Obs>({ x: "value", y: "group" });
+    const res = geom.emphasisResolution!(makeCtx(data))!;
+    expect(res.geomKind).toBe("ridgeline");
+    expect(res.resolve({ geomKind: "ridgeline", dataIndex: 2, data, x: 0, y: 0 })).toBe(
+      emphasisKeyFor(geomEmphasisBase(0), 2),
+    );
+    expect(res.resolve({ geomKind: "violin", dataIndex: 0, data, x: 0, y: 0 })).toBeNull();
+  });
+
+  test("no emphasisBase (SSR/SVG) → rows untagged, no resolver key", () => {
+    const data = fixture.threeGroups();
+    const geom = ridgeline<Obs>({ x: "value", y: "group" });
+    const { layer, keys } = makeKeyCapture();
+    for (const b of geom.compile(makeCtx(data, false))) b.addTo(layer as never);
+    expect(keys.every((k) => k === undefined)).toBe(true);
+    expect(geom.emphasisResolution!(makeCtx(data, false))).toBeNull();
+  });
+});