@opendata-ai/openchart-engine 8.0.0-rc.6 → 8.0.0-rc.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-engine",
-  "version": "8.0.0-rc.6",
+  "version": "8.0.0-rc.8",
   "description": "Headless compiler for openchart: spec validation, data compilation, scales, and layout",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -48,7 +48,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@opendata-ai/openchart-core": "8.0.0-rc.6",
+    "@opendata-ai/openchart-core": "8.0.0-rc.8",
     "d3-array": "^3.2.0",
     "d3-format": "^3.1.2",
     "d3-interpolate": "^3.0.0",

package/src/__tests__/annotation-behavior.test.ts

@@ -283,6 +283,64 @@ describe('a callout lands where the anchor says it should', () => {
   });
 });
 
+// --- auto-placement commits to the side it chose ---------------------------
+
+describe('an auto-placed callout on the right edge anchors its text to the left', () => {
+  // A point at the far right edge forces the scored search to place the block on
+  // its LEFT, which it signals by returning `textAnchor: 'end'`. The anchor must
+  // actually be STAMPED on the label (and its subtitle): with a `start` anchor the
+  // same origin makes the text extend right, over the data point. This is the
+  // mutation the suite used to miss -- deleting the anchor assignment in
+  // `moveAnnotationBy` kept every test green, because the only test that looked at
+  // the anchor compared it against bounds derived from the same (wrong) anchor.
+  test('the search picks the left side and the anchor stamp reaches the whole block', () => {
+    const data = Array.from({ length: 21 }, (_, i) => ({
+      x: `2024-01-${String(i + 1).padStart(2, '0')}`,
+      y: 40 + 2 * i,
+    }));
+    const layout: ChartLayout = compileChart(
+      {
+        mark: 'line',
+        data,
+        encoding: {
+          x: { field: 'x', type: 'temporal' },
+          y: { field: 'y', type: 'quantitative' },
+        },
+        annotations: [
+          {
+            type: 'text',
+            x: data[20].x,
+            y: data[20].y,
+            text: 'Peak of the series',
+            subtitle: 'highest reading of the month',
+          },
+        ],
+      } as ChartSpec,
+      { width: 800, height: 460 },
+    );
+
+    const a = layout.annotations![0];
+    const label = a.label!;
+    const bounds = label.bounds!;
+    const dot = a.dot!;
+
+    // The search really chose the left side. If a future engine change makes it
+    // pick another candidate, fail loudly here rather than silently stop guarding.
+    expect(label.style.textAnchor).toBe('end');
+
+    // An end-anchored box extends LEFT of its origin.
+    expect(Math.abs(bounds.x + bounds.width - label.x)).toBeLessThanOrEqual(1);
+
+    // The whole block sits clear of the point, on its left.
+    expect(bounds.x + bounds.width).toBeLessThan(dot.x);
+
+    // The anchor stamp reaches the subtitle too -- `moveAnnotationBy` applies it
+    // to both lines, and an unstamped subtitle would jut right from a shared origin.
+    expect(a.subtitle!.style.textAnchor).toBe('end');
+    expect(a.subtitle!.x).toBeCloseTo(label.x, 0);
+  });
+});
+
 // --- the leader connects the block to the point --------------------------
 
 describe('the leader actually connects the words to the data', () => {
@@ -362,6 +420,29 @@ describe('the leader actually connects the words to the data', () => {
     expect(asserted).toBeGreaterThan(30);
   });
 
+  test("the author's connectorOffset.from survives auto-placement", () => {
+    // `connectorOffset.to` is baked into `connector.endpoint`, so it survives every
+    // later geometry rebuild for free. `from` used to be applied once at resolve and
+    // then thrown away by `refreshConnector` -- so on an auto-placed annotation
+    // (which ALWAYS moves in Pass 2) the author's nudge did exactly nothing, and an
+    // edit-mode drag of the from handle was a silent no-op after re-render.
+    const control = first([{ type: 'text', x: 'Mar', y: 30, text: 'Peak' }]);
+    const nudged = first([
+      {
+        type: 'text',
+        x: 'Mar',
+        y: 30,
+        text: 'Peak',
+        connectorOffset: { from: { dx: 15, dy: 9 } },
+      },
+    ]);
+
+    const from = nudged.label!.connector!.from;
+    const controlFrom = control.label!.connector!.from;
+    expect(from.x - controlFrom.x).toBeCloseTo(15, 5);
+    expect(from.y - controlFrom.y).toBeCloseTo(9, 5);
+  });
+
   test('a drop-line hangs straight down from the words to the point', () => {
     const a = first([{ type: 'text', x: 'Mar', y: 30, text: 'Peak', connector: 'drop-line' }]);
     const c = a.label!.connector!;
@@ -718,4 +799,54 @@ describe('callouts are anchored in the data, not in pixels', () => {
     expect(all).toHaveLength(1);
     expect(all[0].label!.text).toBe('Real');
   });
+
+  test('a dropped annotation does not shift which of its neighbours counts as pinned', () => {
+    // The resolved array is a FILTERED view of the spec array: dropping spec 0
+    // shifts every later annotation down one slot. Anything that reaches back to
+    // the authored spec (collision resolution's "does it carry an offset?" check)
+    // must key on the stamped `specIndex`, not on resolved position -- indexed by
+    // position, the pinned annotation reads the dropped spec's (offset-less) slot,
+    // loses its pin, and gets displaced off its authored spot.
+    const bogus: Ann = { type: 'text', x: 'NotAMonth', y: 30, text: 'Bogus' };
+    const pinned: Ann = {
+      type: 'text',
+      x: 'Mar',
+      y: 30,
+      text: 'Pinned block here',
+      anchor: 'top',
+      offset: { dy: -25 },
+    };
+    const movable: Ann = {
+      type: 'text',
+      x: 'Mar',
+      y: 30,
+      text: 'Other block here',
+      anchor: 'top',
+    };
+
+    const resolved = annotationsFor([bogus, pinned, movable]);
+
+    // The bogus one is dropped; the survivors keep their spec identities.
+    expect(resolved).toHaveLength(2);
+    expect(resolved.map((a) => a.specIndex)).toEqual([1, 2]);
+
+    const [pinnedResolved, movableResolved] = resolved;
+
+    // Pinning held despite the collision: same spot as when compiled alone.
+    const pinnedSolo = first([pinned]);
+    expect(pinnedResolved.label!.y - pinnedResolved.dot!.y).toBeCloseTo(
+      pinnedSolo.label!.y - pinnedSolo.dot!.y,
+      0,
+    );
+
+    // And the movable one actually moved -- without this half, the test passes
+    // on a pair that never collided in the first place.
+    const movableSolo = first([movable]);
+    expect(movableResolved.label!.y - movableResolved.dot!.y).not.toBeCloseTo(
+      movableSolo.label!.y - movableSolo.dot!.y,
+      1,
+    );
+
+    expect(overlaps(pinnedResolved.bounds!, movableResolved.bounds!)).toBe(false);
+  });
 });

package/src/annotations/geometry.ts

@@ -349,7 +349,13 @@ export function refreshConnector(
   const exit = connectorExit(bounds, endpoint.x, endpoint.y);
   if (!exit) return undefined;
 
-  const from = { x: exit.x, y: exit.y };
+  // Re-apply the author's from-end nudge BEFORE the pullback, so the pullback
+  // direction is measured from the real origin -- exactly as
+  // `resolveTextAnnotation` does on first resolve.
+  const from = {
+    x: exit.x + (connector.fromOffset?.dx ?? 0),
+    y: exit.y + (connector.fromOffset?.dy ?? 0),
+  };
 
   const gap = connectorPullbackGap(markerRadius, connector.arrow);
   const cdx = endpoint.x - from.x;

package/src/annotations/resolve-text.ts

@@ -351,6 +351,12 @@ export function resolveTextAnnotation(
           from,
           to,
           endpoint,
+          fromOffset: annotation.connectorOffset?.from
+            ? {
+                dx: annotation.connectorOffset.from.dx ?? 0,
+                dy: annotation.connectorOffset.from.dy ?? 0,
+              }
+            : undefined,
           stroke: connectorStroke,
           style: connectorStyle,
           arrow: connectorArrow,

package/src/compiler/__tests__/validate-did-you-mean.test.ts

@@ -66,6 +66,90 @@ describe('did-you-mean field suggestions', () => {
     expect(suggestion).toContain('Did you mean "quarter"?');
   });
 
+  it('suggests the nearest column for a misspelled sankey encoding field', () => {
+    const result = validateSpec({
+      type: 'sankey',
+      data: [{ source: 'A', target: 'B', value: 10 }],
+      encoding: {
+        source: { field: 'sorce', type: 'nominal' }, // typo of "source"
+        target: { field: 'target', type: 'nominal' },
+        value: { field: 'value', type: 'quantitative' },
+      },
+    });
+    expect(result.valid).toBe(false);
+    const suggestion = suggestionFor(result, 'encoding.source.field');
+    expect(suggestion).toContain('Did you mean "source"?');
+    expect(suggestion).toContain('target');
+  });
+
+  it('suggests the nearest column for a misspelled tilemap encoding field', () => {
+    const result = validateSpec({
+      type: 'tilemap',
+      data: [{ state: 'CA', value: 12000 }],
+      encoding: {
+        state: { field: 'state', type: 'nominal' },
+        value: { field: 'vlaue', type: 'quantitative' }, // typo of "value"
+      },
+    });
+    expect(result.valid).toBe(false);
+    const suggestion = suggestionFor(result, 'encoding.value.field');
+    expect(suggestion).toContain('Did you mean "value"?');
+  });
+
+  it('suggests the nearest column for a misspelled barlist encoding field', () => {
+    const result = validateSpec({
+      type: 'barlist',
+      data: [{ label: 'A', value: 42 }],
+      encoding: {
+        label: { field: 'lable', type: 'nominal' }, // typo of "label"
+        value: { field: 'value', type: 'quantitative' },
+      },
+    });
+    expect(result.valid).toBe(false);
+    const suggestion = suggestionFor(result, 'encoding.label.field');
+    expect(suggestion).toContain('Did you mean "label"?');
+  });
+
+  it('suggests the nearest column for a misspelled optional barlist channel field', () => {
+    const result = validateSpec({
+      type: 'barlist',
+      data: [{ label: 'A', value: 42, group: 'x' }],
+      encoding: {
+        label: { field: 'label', type: 'nominal' },
+        value: { field: 'value', type: 'quantitative' },
+        color: { field: 'gruop', type: 'nominal' }, // typo of "group"
+      },
+    });
+    expect(result.valid).toBe(false);
+    const suggestion = suggestionFor(result, 'encoding.color.field');
+    expect(suggestion).toContain('Did you mean "group"?');
+  });
+
+  it('suggests the nearest node field for a misspelled graph encoding field', () => {
+    const result = validateSpec({
+      type: 'graph',
+      nodes: [{ id: 'a', category: 'x' }],
+      edges: [],
+      encoding: {
+        nodeColor: { field: 'catgory', type: 'nominal' }, // typo of "category"
+      },
+    });
+    expect(result.valid).toBe(false);
+    const suggestion = suggestionFor(result, 'encoding.nodeColor.field');
+    expect(suggestion).toContain('Did you mean "category"?');
+  });
+
+  it('suggests the nearest node id for a misspelled graph edge endpoint', () => {
+    const result = validateSpec({
+      type: 'graph',
+      nodes: [{ id: 'alpha' }, { id: 'beta' }],
+      edges: [{ source: 'alpha', target: 'betta' }], // typo of "beta"
+    });
+    expect(result.valid).toBe(false);
+    const suggestion = suggestionFor(result, 'edges[0].target');
+    expect(suggestion).toContain('Did you mean "beta"?');
+  });
+
   it('does not match on a short unrelated field where the edit distance exceeds the threshold', () => {
     const shortData = [
       { a: 1, b: 2 },

package/src/compiler/__tests__/validate-near-miss.test.ts

@@ -87,3 +87,165 @@ describe('near-miss validation messages', () => {
     expect(result.errors.filter((e) => e.path === 'encoding.color.scale.scheme')).toHaveLength(0);
   });
 });
+
+describe('scale.scheme on non-chart specs', () => {
+  it('rejects any scheme on a sankey color channel as dead config', () => {
+    // Sankey never reads scale.scheme (node colors cycle theme.colors.categorical),
+    // so even a known name like "blues" must not be silently accepted.
+    for (const scheme of ['viridis', 'blues']) {
+      const result = validateSpec({
+        type: 'sankey',
+        data: [{ source: 'A', target: 'B', value: 10 }],
+        encoding: {
+          source: { field: 'source', type: 'nominal' },
+          target: { field: 'target', type: 'nominal' },
+          value: { field: 'value', type: 'quantitative' },
+          color: { field: 'source', type: 'nominal', scale: { scheme } },
+        },
+      });
+      expect(result.valid).toBe(false);
+      const error = result.errors.find((e) => e.path === 'encoding.color.scale.scheme');
+      expect(error?.code).toBe('INVALID_VALUE');
+      expect(error?.message).toContain('has no effect');
+      expect(error?.suggestion).toContain('theme.colors.categorical');
+    }
+  });
+
+  it('rejects any scheme on a tilemap value channel, pointing at the palette prop', () => {
+    const result = validateSpec({
+      type: 'tilemap',
+      data: [{ state: 'CA', value: 12000 }],
+      encoding: {
+        state: { field: 'state', type: 'nominal' },
+        value: { field: 'value', type: 'quantitative', scale: { scheme: 'viridis' } },
+      },
+    });
+    expect(result.valid).toBe(false);
+    const error = result.errors.find((e) => e.path === 'encoding.value.scale.scheme');
+    expect(error?.code).toBe('INVALID_VALUE');
+    expect(error?.message).toContain('has no effect');
+    expect(error?.suggestion).toContain('palette: "green"');
+  });
+
+  it('rejects any scheme on a barlist color channel as dead config', () => {
+    const result = validateSpec({
+      type: 'barlist',
+      data: [{ label: 'A', value: 42, group: 'x' }],
+      encoding: {
+        label: { field: 'label', type: 'nominal' },
+        value: { field: 'value', type: 'quantitative' },
+        color: { field: 'group', type: 'nominal', scale: { scheme: 'viridis' } },
+      },
+    });
+    expect(result.valid).toBe(false);
+    const error = result.errors.find((e) => e.path === 'encoding.color.scale.scheme');
+    expect(error?.code).toBe('INVALID_VALUE');
+    expect(error?.message).toContain('has no effect');
+  });
+
+  it('rejects any scheme on a graph nodeColor channel as dead config', () => {
+    // Graph never reads scale.scheme (encoding.ts consumes only
+    // scale.range/scale.domain), so even a known name must not pass.
+    for (const scheme of ['viridis', 'blues']) {
+      const result = validateSpec({
+        type: 'graph',
+        nodes: [{ id: 'a', category: 'x' }],
+        edges: [],
+        encoding: {
+          nodeColor: { field: 'category', type: 'nominal', scale: { scheme } },
+        },
+      });
+      expect(result.valid).toBe(false);
+      const error = result.errors.find((e) => e.path === 'encoding.nodeColor.scale.scheme');
+      expect(error?.code).toBe('INVALID_VALUE');
+      expect(error?.message).toContain('has no effect');
+      expect(error?.suggestion).toContain('scale.range');
+    }
+  });
+});
+
+describe('scale.scheme on map specs', () => {
+  // Minimal valid TopoJSON topology with one feature
+  const topo = {
+    type: 'Topology',
+    objects: {
+      things: {
+        type: 'GeometryCollection',
+        geometries: [{ type: 'Polygon', arcs: [[0]], id: '01' }],
+      },
+    },
+    arcs: [
+      [
+        [0, 0],
+        [0, 1],
+        [1, 0],
+        [-1, -1],
+      ],
+    ],
+  };
+
+  it('rejects a scheme the map palette set does not support', () => {
+    const result = validateSpec({
+      type: 'map',
+      geo: { features: topo },
+      data: [{ id: '01', value: 5 }],
+      encoding: {
+        key: { field: 'id' },
+        color: { field: 'value', type: 'quantitative', scale: { scheme: 'viridis' } },
+      },
+    });
+    expect(result.valid).toBe(false);
+    const error = result.errors.find((e) => e.path === 'encoding.color.scale.scheme');
+    expect(error?.code).toBe('INVALID_VALUE');
+    expect(error?.message).toContain('"viridis" is not a supported map palette');
+    expect(error?.suggestion).toContain('green');
+  });
+
+  it('accepts a supported sequential palette on a map color channel', () => {
+    const result = validateSpec({
+      type: 'map',
+      geo: { features: topo },
+      data: [{ id: '01', value: 5 }],
+      encoding: {
+        key: { field: 'id' },
+        color: { field: 'value', type: 'quantitative', scale: { scheme: 'green' } },
+      },
+    });
+    expect(result.errors.filter((e) => e.path === 'encoding.color.scale.scheme')).toHaveLength(0);
+  });
+
+  it('rejects any scheme on a categorical map color channel as dead config', () => {
+    const result = validateSpec({
+      type: 'map',
+      geo: { features: topo },
+      data: [{ id: '01', region: 'south' }],
+      encoding: {
+        key: { field: 'id' },
+        color: { field: 'region', type: 'nominal', scale: { scheme: 'green' } },
+      },
+    });
+    expect(result.valid).toBe(false);
+    const error = result.errors.find((e) => e.path === 'encoding.color.scale.scheme');
+    expect(error?.code).toBe('INVALID_VALUE');
+    expect(error?.message).toContain('has no effect');
+    expect(error?.suggestion).toContain('scale.range');
+  });
+
+  it('rejects an unsupported scheme on the points layer color channel', () => {
+    const result = validateSpec({
+      type: 'map',
+      geo: { features: topo },
+      data: [],
+      encoding: { key: { field: 'id' } },
+      points: {
+        data: [{ lat: 30, lon: -97, score: 1 }],
+        latitude: { field: 'lat' },
+        longitude: { field: 'lon' },
+        color: { field: 'score', type: 'quantitative', scale: { scheme: 'magma' } },
+      },
+    });
+    const error = result.errors.find((e) => e.path === 'points.color.scale.scheme');
+    expect(error?.code).toBe('INVALID_VALUE');
+    expect(error?.message).toContain('"magma" is not a supported map palette');
+  });
+});