fix(engine): dual-axis lines no longer break where layers' x-values interleave

compileLayerIndependent gave both dual-axis layers a shared x-axis by calling
ensureXDomainCoverage, which injected the OTHER layer's x-values into each leaf
as placeholder rows with no y-field. In line/area compute those became null-y
points, which are treated as line breaks -- so two series with interleaved
x-values (e.g. two temporal series on different dates) drew as disconnected
segments. This is the "line rendered with gaps" bug.

The earlier guard (1e105ff) only added a regression test that asserts point
x-positions, not path continuity, and used disjoint 2-point layers where the
injected nulls land at the ends rather than mid-line -- so it never caught this.

Replace the row-injection with an explicit union x-domain pinned on each leaf's
x-encoding (temporal -> [minDate, maxDate], quantitative -> [min, max], discrete
-> ordered category union). The scale builders already honour scale.domain, so
both layers share one x-scale without ever touching mark data. An author-pinned
x domain still wins per leaf. The discrete union is pinned to both leaves so the
bar-remap path still enumerates every band centre.

Add regression tests that assert PATH continuity (exactly one M command per
series) for interleaved temporal series, and that bar+line remap covers the full
category union.

Claude-Session: https://claude.ai/code/session_016rS7hi2g4bSzRBfnD1p2ji

Author: rileyhilliard

packages/engine/src/__tests__/compile-layer.test.ts

@@ -1022,4 +1022,112 @@ describe('compileLayer', () => {
     expect(Math.min(...layerBXs)).toBeGreaterThan(areaMidX);
     expect(Math.max(...layerAXs)).toBeLessThan(Math.min(...layerBXs));
   });
+
+  it('keeps dual-axis lines continuous when the two layers have interleaved x-values', () => {
+    // Regression guard for the "line drawn with gaps" bug. The shared x-domain
+    // used to be achieved by injecting the OTHER layer's x-values as placeholder
+    // rows with no y-field. Those became null-y points, which line compute treats
+    // as line breaks — so two temporal series with interleaved dates each drew as
+    // disconnected segments. The fix pins an explicit union domain instead of
+    // touching mark data, so each series stays a single unbroken path.
+    //
+    // Layer A: Jan, Mar, May. Layer B: Feb, Apr, Jun. Sorted together the dates
+    // interleave, which is exactly the arrangement that produced mid-line breaks.
+    const spec: LayerSpec = {
+      resolve: { scale: { y: 'independent' } },
+      layer: [
+        {
+          mark: 'line' as const,
+          data: [
+            { d: '2024-01-01', a: 10 },
+            { d: '2024-03-01', a: 20 },
+            { d: '2024-05-01', a: 15 },
+          ],
+          encoding: {
+            x: { field: 'd', type: 'temporal' as const },
+            y: { field: 'a', type: 'quantitative' as const },
+          },
+        },
+        {
+          mark: 'line' as const,
+          data: [
+            { d: '2024-02-01', b: 5 },
+            { d: '2024-04-01', b: 8 },
+            { d: '2024-06-01', b: 6 },
+          ],
+          encoding: {
+            x: { field: 'd', type: 'temporal' as const },
+            y: { field: 'b', type: 'quantitative' as const },
+          },
+        },
+      ],
+    };
+
+    const layout = compileLayer(spec, compileOpts);
+    const lines = layout.marks.filter((m) => m.type === 'line') as unknown as {
+      path: string;
+      points: { x: number }[];
+      data: unknown[];
+    }[];
+    expect(lines).toHaveLength(2);
+
+    for (const line of lines) {
+      // Exactly one `M` command ⇒ one unbroken subpath (no injected null breaks).
+      expect((line.path.match(/M/g) ?? []).length).toBe(1);
+      // No placeholder rows leaked into the mark: 3 real points per series.
+      expect(line.points).toHaveLength(3);
+      expect(line.data).toHaveLength(3);
+    }
+  });
+
+  it('remaps a dual-axis line onto all bar band centres across a category union', () => {
+    // The bar+line dual-axis path reads band centres for every category from the
+    // bar layer's axis ticks. With the union pinned as an explicit discrete
+    // domain on both leaves, the band scale must still enumerate categories from
+    // BOTH layers so the line's points remap onto real centres.
+    const spec: LayerSpec = {
+      resolve: { scale: { y: 'independent' } },
+      layer: [
+        {
+          mark: 'bar' as const,
+          data: [
+            { yr: '2024', bars: 100 },
+            { yr: '2025', bars: 120 },
+          ],
+          encoding: {
+            x: { field: 'yr', type: 'ordinal' as const },
+            y: { field: 'bars', type: 'quantitative' as const },
+          },
+        },
+        {
+          mark: 'line' as const,
+          data: [
+            { yr: '2025', ln: 3 },
+            { yr: '2026', ln: 5 },
+          ],
+          encoding: {
+            x: { field: 'yr', type: 'ordinal' as const },
+            y: { field: 'ln', type: 'quantitative' as const },
+          },
+        },
+      ],
+    };
+
+    const layout = compileLayer(spec, compileOpts);
+
+    // The x-axis enumerates the ordered union of both layers' categories.
+    const tickLabels = (layout.axes.x?.ticks ?? []).map((t) => String(t.label));
+    expect(tickLabels).toEqual(['2024', '2025', '2026']);
+
+    const line = layout.marks.find((m) => m.type === 'line') as unknown as {
+      points: { x: number }[];
+    };
+    expect(line).toBeDefined();
+    // Every line point remapped to a finite band centre inside the plot area.
+    for (const p of line.points) {
+      expect(Number.isFinite(p.x)).toBe(true);
+      expect(p.x).toBeGreaterThanOrEqual(layout.area.x);
+      expect(p.x).toBeLessThanOrEqual(layout.area.x + layout.area.width);
+    }
+  });
 });

packages/engine/src/compile/layer.ts

@@ -225,12 +225,10 @@ function compileLayerIndependent(
 
   const xField0 = leaf0.encoding?.x?.field;
   const xField1 = leaf1.encoding?.x?.field;
-  const unionXValues = new Set<unknown>();
-  if (xField0) for (const row of leaf0.data) unionXValues.add(row[xField0]);
-  if (xField1) for (const row of leaf1.data) unionXValues.add(row[xField1]);
 
-  let leaf0WithUnionX = ensureXDomainCoverage(leaf0, xField0, unionXValues);
-  let leaf1WithUnionX = ensureXDomainCoverage(leaf1, xField1, unionXValues);
+  const union = withUnionXDomain(leaf0, leaf1);
+  let leaf0WithUnionX = union.leaf0;
+  let leaf1WithUnionX = union.leaf1;
 
   const aligned = alignYDomains(leaf0WithUnionX, leaf1WithUnionX);
   if (aligned) {
@@ -414,28 +412,111 @@ function compileLayerIndependent(
   };
 }
 
-function ensureXDomainCoverage(
-  leaf: ChartSpec,
-  xField: string | undefined,
-  allXValues: Set<unknown>,
-): ChartSpec {
-  if (!xField || allXValues.size === 0) return leaf;
-
-  const existingXValues = new Set<unknown>();
-  for (const row of leaf.data) existingXValues.add(row[xField]);
+/** Merge an x-scale `domain` onto a leaf's x-encoding, preserving other scale config. */
+function withXDomain(leaf: ChartSpec, domain: number[] | string[]): ChartSpec {
+  if (!leaf.encoding?.x) return leaf;
+  return {
+    ...leaf,
+    encoding: {
+      ...leaf.encoding,
+      x: {
+        ...leaf.encoding.x,
+        scale: {
+          ...leaf.encoding.x.scale,
+          domain,
+        },
+      },
+    },
+  } as ChartSpec;
+}
 
-  const missingRows: DataRow[] = [];
-  for (const xVal of allXValues) {
-    if (!existingXValues.has(xVal)) {
-      missingRows.push({ [xField]: xVal });
+/**
+ * Make both dual-axis layers render against ONE shared x-scale by pinning an
+ * explicit union x-domain on each, rather than injecting placeholder data rows.
+ *
+ * Injecting rows (the old approach) put x-only rows with no y-field into each
+ * leaf's data. In line/area compute those become null-y points, which are
+ * treated as line breaks -- so two series with interleaved x-values drew as
+ * disconnected segments. Pinning the domain achieves the shared axis without
+ * ever touching the mark data.
+ *
+ * Kept separate from computeSharedDomains, which only unions *quantitative*
+ * channels and folds zero in (correct for a magnitude y-axis, wrong for an x
+ * position axis that must also cover temporal/ordinal and must not fold zero).
+ *
+ * An author-pinned `scale.domain` on a leaf's x wins for that leaf; the union
+ * is still applied to the other leaf. Note that pinning a domain suppresses
+ * d3's `.nice()`, so x-axis endpoints become the exact union min/max -- the
+ * same behaviour the shared-scale path already has.
+ */
+function withUnionXDomain(
+  leaf0: ChartSpec,
+  leaf1: ChartSpec,
+): { leaf0: ChartSpec; leaf1: ChartSpec } {
+  const xEnc0 = leaf0.encoding?.x;
+  const xEnc1 = leaf1.encoding?.x;
+  const xField0 = xEnc0?.field;
+  const xField1 = xEnc1?.field;
+  if (!xField0 || !xField1) return { leaf0, leaf1 };
+
+  // The x-type guard upstream already ensures both encodings agree; take either.
+  const xType = xEnc0?.type ?? xEnc1?.type;
+
+  const pinned0 = xEnc0?.scale?.domain !== undefined;
+  const pinned1 = xEnc1?.scale?.domain !== undefined;
+  if (pinned0 && pinned1) return { leaf0, leaf1 };
+
+  const values0 = leaf0.data.map((row) => row[xField0]);
+  const values1 = leaf1.data.map((row) => row[xField1]);
+  const allValues = [...values0, ...values1].filter((v) => v != null);
+  if (allValues.length === 0) return { leaf0, leaf1 };
+
+  let domain: number[] | string[] | undefined;
+
+  if (xType === 'temporal') {
+    let minMs = Number.POSITIVE_INFINITY;
+    let maxMs = Number.NEGATIVE_INFINITY;
+    for (const v of allValues) {
+      const ms = (v instanceof Date ? v : new Date(String(v))).getTime();
+      if (Number.isNaN(ms)) continue;
+      if (ms < minMs) minMs = ms;
+      if (ms > maxMs) maxMs = ms;
     }
+    if (minMs <= maxMs) {
+      domain = [new Date(minMs).toISOString(), new Date(maxMs).toISOString()];
+    }
+  } else if (xType === 'quantitative') {
+    let min = Number.POSITIVE_INFINITY;
+    let max = Number.NEGATIVE_INFINITY;
+    for (const v of allValues) {
+      const n = typeof v === 'number' ? v : Number(v);
+      if (!Number.isFinite(n)) continue;
+      if (n < min) min = n;
+      if (n > max) max = n;
+    }
+    if (min <= max) domain = [min, max];
+  } else {
+    // Discrete x (nominal/ordinal): ordered union of category labels. leaf0's
+    // categories in data order, then leaf1's not-yet-seen values appended. Pinned
+    // to BOTH leaves so each band/point scale enumerates the full set -- the bar
+    // remap in the caller reads band centres for every category from the axis ticks.
+    const seen = new Set<string>();
+    const categories: string[] = [];
+    for (const v of allValues) {
+      const s = String(v);
+      if (!seen.has(s)) {
+        seen.add(s);
+        categories.push(s);
+      }
+    }
+    if (categories.length > 0) domain = categories;
   }
 
-  if (missingRows.length === 0) return leaf;
+  if (domain === undefined) return { leaf0, leaf1 };
 
   return {
-    ...leaf,
-    data: [...leaf.data, ...missingRows],
+    leaf0: pinned0 ? leaf0 : withXDomain(leaf0, domain),
+    leaf1: pinned1 ? leaf1 : withXDomain(leaf1, domain),
   };
 }