insomni-plot 0.1.0-alpha.0

package/src/marks.test.ts

@@ -0,0 +1,541 @@
+import { describe, expect, test } from "vite-plus/test";
+
+import { areaMark, barMark, lineMark, pointMark, stack } from "./marks.ts";
+import { createGroup, createLayer, rgba } from "insomni";
+import { bandScale, linearScale } from "./scales.ts";
+
+interface Point {
+  x: number;
+  y: number;
+  value?: number;
+  category?: string;
+}
+
+describe("pointMark", () => {
+  test("emits one circle per datum at accessor-resolved coords", () => {
+    const layer = createLayer({ space: "ui" });
+    const data: Point[] = [
+      { x: 0, y: 0 },
+      { x: 1, y: 2 },
+      { x: 2, y: 4 },
+    ];
+
+    pointMark(data, {
+      x: (d) => d.x * 10,
+      y: (d) => d.y * 10,
+    }).addTo(layer);
+
+    // pushCircle → 1 shape per datum
+    expect(layer.shapeCount).toBe(3);
+  });
+
+  test("applies origin offset to accessor output", () => {
+    const layer = createLayer({ space: "ui" });
+    pointMark([{ x: 5, y: 5 }], {
+      x: (d) => d.x,
+      y: (d) => d.y,
+      radius: 3,
+    }).addTo(layer, { x: 100, y: 50 });
+
+    // circle at 105,55 — inspect pack to verify
+    // v3 packs into one UberPack ArrayBuffer (16-float stride); geom0 (the
+    // shape center for rect/circle) sits at float offset 0/1 of instance 0 —
+    // the same slot v1's `packedShapeFloats[0..1]` exposed.
+    const packed = new Float32Array(layer.pack.buffer);
+    expect(packed[0]).toBe(105);
+    expect(packed[1]).toBe(55);
+  });
+
+  test("resolves value-or-accessor for radius, fill, shape", () => {
+    const layer = createLayer({ space: "ui" });
+    const data: Point[] = [
+      { x: 0, y: 0, value: 1 },
+      { x: 1, y: 1, value: 2 },
+    ];
+    const rScale = linearScale([1, 2], [2, 10]);
+
+    pointMark(data, {
+      x: (d) => d.x,
+      y: (d) => d.y,
+      radius: (d) => rScale(d.value!),
+      fill: (_, i) => (i === 0 ? rgba(1, 0, 0, 1) : rgba(0, 1, 0, 1)),
+      shape: "square",
+    }).addTo(layer);
+
+    // squares use pushRect → still 1 shape per datum
+    expect(layer.shapeCount).toBe(2);
+  });
+
+  test("triangle and diamond shapes emit triangulated polygons", () => {
+    const layer = createLayer({ space: "ui" });
+    pointMark([{ x: 0, y: 0 }], {
+      x: (d) => d.x,
+      y: (d) => d.y,
+      shape: "triangle",
+      fill: rgba(1, 0, 0, 1),
+    }).addTo(layer);
+
+    // equilateral triangle → 1 triangle from earcut
+    expect(layer.triangleCount).toBe(1);
+    expect(layer.shapeCount).toBe(0);
+
+    pointMark([{ x: 10, y: 10 }], {
+      x: (d) => d.x,
+      y: (d) => d.y,
+      shape: "diamond",
+      fill: rgba(0, 1, 0, 1),
+    }).addTo(layer);
+
+    // diamond (4 points) → 2 triangles
+    expect(layer.triangleCount).toBe(3);
+  });
+
+  test("threads group reference through to the layer", () => {
+    const layer = createLayer({ space: "ui" });
+    const group = createGroup();
+    pointMark([{ x: 0, y: 0 }], {
+      x: (d) => d.x,
+      y: (d) => d.y,
+      group,
+    }).addTo(layer);
+
+    // v3 carries the group on the draw command (CPU-side metadata), not in a
+    // `Layer._groups` parallel array (v1).
+    expect(layer.pack.commands[0]?.group).toBe(group);
+  });
+
+  test("borderStyle 'open' suppresses fill and routes color to stroke", () => {
+    // 'open' = fill-alpha 0 + stroke. Geometry-wise, still one circle shape;
+    // the open behavior is observable on the encoded fill alpha (no fill ⇒
+    // pack stores fill alpha 0) while the stroke color is the fill input.
+    const solid = createLayer({ space: "ui" });
+    const open = createLayer({ space: "ui" });
+    const data: Point[] = [{ x: 0, y: 0 }];
+
+    pointMark(data, {
+      x: (d) => d.x,
+      y: (d) => d.y,
+      radius: 5,
+      fill: rgba(0.5, 0.5, 0.5, 1),
+    }).addTo(solid);
+    pointMark(data, {
+      x: (d) => d.x,
+      y: (d) => d.y,
+      radius: 5,
+      fill: rgba(0.5, 0.5, 0.5, 1),
+      strokeWidth: 1,
+      borderStyle: "open",
+    }).addTo(open);
+
+    expect(solid.shapeCount).toBe(1);
+    expect(open.shapeCount).toBe(1);
+    // 'open' shouldn't add a polyline ring (that's dashed/dotted only).
+    expect(open.triangleCount).toBe(0);
+  });
+
+  test("borderStyle 'dashed' adds a polyline ring on top of the SDF shape", () => {
+    const layer = createLayer({ space: "ui" });
+    pointMark([{ x: 0, y: 0 }], {
+      x: (d) => d.x,
+      y: (d) => d.y,
+      radius: 5,
+      fill: rgba(0.5, 0.5, 0.5, 1),
+      stroke: rgba(0, 0, 0, 1),
+      strokeWidth: 1,
+      borderStyle: "dashed",
+    }).addTo(layer);
+
+    // Base circle still goes through the SDF path.
+    expect(layer.shapeCount).toBe(1);
+    // Dashed border is a tessellated polyline → emits triangles.
+    expect(layer.triangleCount).toBeGreaterThan(0);
+  });
+
+  test("borderStyle 'dotted' emits more dash segments than 'dashed'", () => {
+    const dashed = createLayer({ space: "ui" });
+    const dotted = createLayer({ space: "ui" });
+    const opts = {
+      x: (d: Point) => d.x,
+      y: (d: Point) => d.y,
+      radius: 8,
+      fill: rgba(0.5, 0.5, 0.5, 1),
+      stroke: rgba(0, 0, 0, 1),
+      strokeWidth: 1,
+    };
+    pointMark([{ x: 0, y: 0 }], { ...opts, borderStyle: "dashed" }).addTo(dashed);
+    pointMark([{ x: 0, y: 0 }], { ...opts, borderStyle: "dotted" }).addTo(dotted);
+    // Dotted pattern [1, 3] produces ~2x as many on/off transitions vs [4, 4].
+    expect(dotted.triangleCount).toBeGreaterThan(dashed.triangleCount);
+  });
+
+  test("overlayGlyph emits a second shape at the same anchor with scaled radius", () => {
+    const layer = createLayer({ space: "ui" });
+    pointMark([{ x: 10, y: 10 }], {
+      x: (d) => d.x,
+      y: (d) => d.y,
+      radius: 5,
+      fill: rgba(0.5, 0.5, 0.5, 1),
+      overlayGlyph: "circle",
+      overlayScale: 0.5,
+    }).addTo(layer);
+
+    // Base circle + overlay circle → 2 SDF shapes.
+    expect(layer.shapeCount).toBe(2);
+    // v3 packs into one UberPack ArrayBuffer (16-float stride); geom0 (the
+    // shape center for rect/circle) sits at float offset 0/1 of instance 0 —
+    // the same slot v1's `packedShapeFloats[0..1]` exposed.
+    const packed = new Float32Array(layer.pack.buffer);
+    // Both anchored at (10, 10).
+    expect(packed[0]).toBe(10);
+    expect(packed[1]).toBe(10);
+  });
+
+  test("overlayGlyph null per-datum skips overlay", () => {
+    const layer = createLayer({ space: "ui" });
+    pointMark(
+      [
+        { x: 0, y: 0 },
+        { x: 1, y: 1 },
+      ],
+      {
+        x: (d) => d.x,
+        y: (d) => d.y,
+        radius: 5,
+        fill: rgba(0.5, 0.5, 0.5, 1),
+        overlayGlyph: (_, i) => (i === 0 ? "circle" : null),
+      },
+    ).addTo(layer);
+
+    // Datum 0: base + overlay = 2; datum 1: base only = 1. Total = 3.
+    expect(layer.shapeCount).toBe(3);
+  });
+
+  test("status → {active: solid, inactive: open+cross} via accessor mapping", () => {
+    // Integration test for the documented categorical-status pattern: combine
+    // a `borderStyle` accessor with an `overlayGlyph` accessor so the rejected
+    // markers visibly differ from accepted markers.
+    const layer = createLayer({ space: "ui" });
+    interface Reading {
+      x: number;
+      y: number;
+      status: "active" | "inactive";
+    }
+    const data: Reading[] = [
+      { x: 0, y: 0, status: "active" },
+      { x: 1, y: 1, status: "inactive" },
+      { x: 2, y: 2, status: "active" },
+    ];
+    pointMark(data, {
+      x: (d) => d.x,
+      y: (d) => d.y,
+      radius: 4,
+      fill: rgba(0.2, 0.6, 0.8, 1),
+      // Open border requires a non-zero strokeWidth — without one the SDF
+      // skips the shape (fill suppressed, stroke width 0).
+      strokeWidth: 1,
+      borderStyle: (d) => (d.status === "active" ? "solid" : "open"),
+      overlayGlyph: (d) => (d.status === "active" ? null : "cross"),
+    }).addTo(layer);
+
+    // 3 base circles + 1 overlay (cross is a polygon, triangulated)
+    expect(layer.shapeCount).toBe(3);
+    // Cross overlay produces triangulated polygon → triangles > 0.
+    expect(layer.triangleCount).toBeGreaterThan(0);
+  });
+
+  test("skips datums with non-finite x or y", () => {
+    // Geoms signal "skip this row" by returning NaN from x/y accessors
+    // (e.g. legend hide filters in point.ts). Without a guard, NaN
+    // positions corrupt the GPU batch and erase all points in the layer.
+    const layer = createLayer({ space: "ui" });
+    const data: Point[] = [
+      { x: 0, y: 0 },
+      { x: 1, y: 1 },
+      { x: 2, y: 2 },
+      { x: 3, y: 3 },
+    ];
+
+    pointMark(data, {
+      x: (d, i) => (i === 1 ? NaN : d.x),
+      y: (d, i) => (i === 2 ? NaN : d.y),
+    }).addTo(layer);
+
+    // 4 datums in, 2 skipped (NaN x at i=1, NaN y at i=2) → 2 circles
+    expect(layer.shapeCount).toBe(2);
+  });
+});
+
+describe("lineMark", () => {
+  test("emits one polyline covering all data points", () => {
+    const layer = createLayer({ space: "ui" });
+    lineMark(
+      [
+        { x: 0, y: 0 },
+        { x: 1, y: 1 },
+        { x: 2, y: 4 },
+      ],
+      { x: (d) => d.x, y: (d) => d.y, strokeWidth: 2 },
+    ).addTo(layer);
+
+    // polyline produces tessellated triangles; at minimum >0 triangles
+    expect(layer.triangleCount).toBeGreaterThan(0);
+  });
+
+  test("splits into segments on defined=false", () => {
+    const layerWhole = createLayer({ space: "ui" });
+    const layerSplit = createLayer({ space: "ui" });
+    const data = [
+      { x: 0, y: 0 },
+      { x: 1, y: 1 },
+      { x: 2, y: 4 },
+      { x: 3, y: 9 },
+    ];
+
+    lineMark(data, { x: (d) => d.x, y: (d) => d.y }).addTo(layerWhole);
+    lineMark(data, {
+      x: (d) => d.x,
+      y: (d) => d.y,
+      defined: (_, i) => i !== 2,
+    }).addTo(layerSplit);
+
+    // split version drops point 2 → left with 2-pt and 1-pt segments.
+    // 1-pt segment skipped, so fewer triangles than the whole polyline.
+    expect(layerSplit.triangleCount).toBeLessThan(layerWhole.triangleCount);
+  });
+
+  test("skips entirely when fewer than 2 points are defined", () => {
+    const layer = createLayer({ space: "ui" });
+    lineMark([{ x: 0, y: 0 }], { x: (d) => d.x, y: (d) => d.y }).addTo(layer);
+    expect(layer.triangleCount).toBe(0);
+  });
+
+  test("dashStyle maps to a dashed polyline (more triangles than solid)", () => {
+    const solid = createLayer({ space: "ui" });
+    const dashed = createLayer({ space: "ui" });
+    const data = [
+      { x: 0, y: 0 },
+      { x: 50, y: 50 },
+      { x: 100, y: 0 },
+    ];
+    lineMark(data, { x: (d) => d.x, y: (d) => d.y, strokeWidth: 2 }).addTo(solid);
+    lineMark(data, {
+      x: (d) => d.x,
+      y: (d) => d.y,
+      strokeWidth: 2,
+      dashStyle: "dashed",
+    }).addTo(dashed);
+
+    expect(dashed.triangleCount).toBeGreaterThan(solid.triangleCount);
+  });
+
+  test("explicit dashPattern wins over dashStyle", () => {
+    // When both are set, dashPattern is authoritative — confirmed by output
+    // matching a custom-pattern run rather than the dashStyle preset.
+    const customPattern = createLayer({ space: "ui" });
+    const both = createLayer({ space: "ui" });
+    const data = [
+      { x: 0, y: 0 },
+      { x: 100, y: 0 },
+    ];
+    lineMark(data, {
+      x: (d) => d.x,
+      y: (d) => d.y,
+      strokeWidth: 1,
+      dashPattern: [10, 2],
+    }).addTo(customPattern);
+    lineMark(data, {
+      x: (d) => d.x,
+      y: (d) => d.y,
+      strokeWidth: 1,
+      dashPattern: [10, 2],
+      dashStyle: "dotted",
+    }).addTo(both);
+
+    expect(both.triangleCount).toBe(customPattern.triangleCount);
+  });
+});
+
+describe("areaMark", () => {
+  test("builds a single polygon tracing top then bottom", () => {
+    const layer = createLayer({ space: "ui" });
+    const xScale = linearScale([0, 2], [0, 100]);
+    const yScale = linearScale([0, 4], [100, 0]);
+
+    areaMark(
+      [
+        { x: 0, y: 1 },
+        { x: 1, y: 3 },
+        { x: 2, y: 2 },
+      ],
+      {
+        x: (d) => xScale(d.x),
+        y0: () => yScale(0),
+        y1: (d) => yScale(d.y),
+        fill: rgba(0.2, 0.4, 0.8, 0.5),
+      },
+    ).addTo(layer);
+
+    // polygon with 6 vertices (3 top + 3 bottom) → 4 triangles via earcut
+    expect(layer.triangleCount).toBe(4);
+  });
+
+  test("splits into multiple polygons on defined=false", () => {
+    const layer = createLayer({ space: "ui" });
+
+    areaMark(
+      [
+        { x: 0, y: 1 },
+        { x: 1, y: 2 },
+        { x: 2, y: 3 },
+        { x: 3, y: 4 },
+      ],
+      {
+        x: (d) => d.x,
+        y0: () => 0,
+        y1: (d) => d.y,
+        defined: (_, i) => i !== 2,
+        fill: rgba(0, 0, 0, 1),
+      },
+    ).addTo(layer);
+
+    // One segment of 2 points (quad → 2 triangles) plus a trailing 1-point segment
+    // (skipped due to top.length < 2). Total 2 triangles.
+    expect(layer.triangleCount).toBe(2);
+  });
+});
+
+describe("barMark", () => {
+  test("emits one rect per datum via bandScale + linear y", () => {
+    const layer = createLayer({ space: "ui" });
+    const data = [
+      { category: "A", value: 10 },
+      { category: "B", value: 20 },
+      { category: "C", value: 15 },
+    ];
+    const x = bandScale(
+      data.map((d) => d.category),
+      [0, 300],
+      { padding: 0.1 },
+    );
+    const y = linearScale([0, 20], [200, 0]);
+    const baseline = 200;
+
+    barMark(data, {
+      x: (d) => x(d.category),
+      y: (d) => y(d.value),
+      width: x.bandwidth(),
+      height: (d) => baseline - y(d.value),
+      fill: rgba(0.1, 0.4, 0.9, 1),
+    }).addTo(layer);
+
+    expect(layer.shapeCount).toBe(3);
+  });
+
+  test("supports per-datum fill accessor", () => {
+    const layer = createLayer({ space: "ui" });
+    barMark([{ value: 1 }, { value: 2 }], {
+      x: (_, i) => i * 20,
+      y: () => 0,
+      width: 10,
+      height: (d) => d.value * 10,
+      fill: (d) => (d.value > 1 ? rgba(1, 0, 0, 1) : rgba(0, 1, 0, 1)),
+    }).addTo(layer);
+
+    expect(layer.shapeCount).toBe(2);
+  });
+
+  test("applies origin offset", () => {
+    const layer = createLayer({ space: "ui" });
+    barMark([{ value: 5 }], {
+      x: () => 0,
+      y: () => 0,
+      width: 10,
+      height: 20,
+    }).addTo(layer, { x: 50, y: 100 });
+
+    // packed rect stores center: x+w/2 = 55, y+h/2 = 110
+    // v3 packs into one UberPack ArrayBuffer (16-float stride); geom0 (the
+    // shape center for rect/circle) sits at float offset 0/1 of instance 0 —
+    // the same slot v1's `packedShapeFloats[0..1]` exposed.
+    const packed = new Float32Array(layer.pack.buffer);
+    expect(packed[0]).toBe(55);
+    expect(packed[1]).toBe(110);
+  });
+
+  test("borderStyle 'open' keeps one shape per bar with no extra geometry", () => {
+    const layer = createLayer({ space: "ui" });
+    barMark([{ value: 5 }, { value: 10 }], {
+      x: (_, i) => i * 20,
+      y: () => 0,
+      width: 10,
+      height: (d) => d.value * 4,
+      fill: rgba(0.2, 0.5, 0.8, 1),
+      strokeWidth: 1,
+      borderStyle: "open",
+    }).addTo(layer);
+
+    expect(layer.shapeCount).toBe(2);
+    // Open border on bars is fill-suppression only; no polyline ring.
+    expect(layer.triangleCount).toBe(0);
+  });
+
+  test("borderStyle 'dashed' adds a polyline ring around each bar", () => {
+    const layer = createLayer({ space: "ui" });
+    barMark([{ value: 5 }], {
+      x: () => 0,
+      y: () => 0,
+      width: 20,
+      height: 40,
+      fill: rgba(0.2, 0.5, 0.8, 1),
+      stroke: rgba(0, 0, 0, 1),
+      strokeWidth: 1,
+      borderStyle: "dashed",
+    }).addTo(layer);
+
+    // SDF rect (1) + tessellated polyline ring (>0 triangles).
+    expect(layer.shapeCount).toBe(1);
+    expect(layer.triangleCount).toBeGreaterThan(0);
+  });
+});
+
+describe("stack()", () => {
+  test("emits one segment per (datum, key) with cumulative base/top", () => {
+    const data = [
+      { category: "A", west: 10, east: 20, central: 5 },
+      { category: "B", west: 4, east: 8, central: 6 },
+    ];
+    const segments = stack(data, ["west", "east", "central"]);
+
+    expect(segments).toHaveLength(6);
+
+    // First datum, first key
+    expect(segments[0]).toMatchObject({
+      datum: data[0],
+      key: "west",
+      value: 10,
+      base: 0,
+      top: 10,
+      subIndex: 0,
+      datumIndex: 0,
+    });
+    // First datum, second key — base resumes from prior top
+    expect(segments[1]).toMatchObject({ key: "east", base: 10, top: 30 });
+    // First datum, third key
+    expect(segments[2]).toMatchObject({ key: "central", base: 30, top: 35 });
+    // Second datum resets base
+    expect(segments[3]).toMatchObject({
+      datum: data[1],
+      key: "west",
+      base: 0,
+      datumIndex: 1,
+    });
+  });
+
+  test("supports a custom value accessor for non-flat data shapes", () => {
+    const data = [{ parts: new Map([["a", 5]]) }, { parts: new Map([["a", 9]]) }];
+    const segments = stack(data, ["a"], {
+      value: (d, key) => d.parts.get(key) ?? 0,
+    });
+    expect(segments.map((s) => s.value)).toEqual([5, 9]);
+  });
+});