@opendata-ai/openchart-engine 8.0.0-rc.5 → 8.0.0-rc.7

package/src/compiler/validate.ts

@@ -16,6 +16,7 @@ import {
   MARK_TYPES,
   type MarkType,
   resolveSchemeName,
+  SEQUENTIAL_PALETTES,
   SUPPORTED_SCHEME_NAMES,
   type VizSpec,
 } from '@opendata-ai/openchart-core';
@@ -107,6 +108,94 @@ function didYouMean(field: string, columns: string[]): string {
   return match ? ` Did you mean "${match}"?` : '';
 }
 
+/**
+ * Push an INVALID_VALUE error when a channel carries an unrecognized
+ * scale.scheme name. Chart specs are the only family that consumes schemes
+ * this way: known names (including VL aliases) resolve via the core palette
+ * registry and are expanded to scale.range by the pre-validation sugar pass,
+ * so `resolveSchemeName` failing means the name is unknown.
+ */
+function checkSchemeName(
+  channelObj: Record<string, unknown>,
+  channelPath: string,
+  errors: ValidationError[],
+): void {
+  const scale = channelObj.scale as Record<string, unknown> | undefined;
+  if (scale && typeof scale.scheme === 'string' && !resolveSchemeName(scale.scheme)) {
+    errors.push({
+      message: `Spec error: ${channelPath}.scale.scheme "${scale.scheme}" is not a supported scheme name`,
+      path: `${channelPath}.scale.scheme`,
+      code: 'INVALID_VALUE',
+      suggestion: `Use one of the supported scheme names: ${[...SUPPORTED_SCHEME_NAMES].join(', ')}. Or provide explicit colors via scale.range.`,
+    });
+  }
+}
+
+/**
+ * Push an INVALID_VALUE error when any channel of an encoding block carries a
+ * scale.scheme on a spec family whose compile path never reads it. Even a
+ * known scheme name is dead config there — silently accepting it would leave
+ * the author believing they chose the colors.
+ */
+function checkSchemeUnused(
+  encoding: Record<string, unknown>,
+  errors: ValidationError[],
+  familyNote: string,
+  suggestion: string,
+): void {
+  for (const [channel, ch] of Object.entries(encoding)) {
+    if (!ch || typeof ch !== 'object' || Array.isArray(ch)) continue;
+    const scale = (ch as Record<string, unknown>).scale as Record<string, unknown> | undefined;
+    if (scale && typeof scale.scheme === 'string') {
+      errors.push({
+        message: `Spec error: encoding.${channel}.scale.scheme has no effect — ${familyNote}`,
+        path: `encoding.${channel}.scale.scheme`,
+        code: 'INVALID_VALUE',
+        suggestion,
+      });
+    }
+  }
+}
+
+/** Palette names the map compile path actually supports (sequential only). */
+const MAP_PALETTE_NAMES = Object.keys(SEQUENTIAL_PALETTES).join(', ');
+
+/**
+ * Map color channels resolve scale.scheme against SEQUENTIAL_PALETTES with a
+ * silent fallback to blue — a typo'd scheme would render the default palette
+ * with no signal. Reject names outside the map's supported set here instead.
+ * Categorical channels never read schemes at all (colors come from
+ * scale.domain/scale.range), so any scheme there is dead config.
+ */
+function checkMapSchemeName(
+  channelObj: Record<string, unknown>,
+  channelPath: string,
+  errors: ValidationError[],
+): void {
+  const scale = channelObj.scale as Record<string, unknown> | undefined;
+  if (!scale || typeof scale.scheme !== 'string') return;
+
+  if (channelObj.type === 'nominal' || channelObj.type === 'ordinal') {
+    errors.push({
+      message: `Spec error: ${channelPath}.scale.scheme has no effect — categorical map colors come from scale.range and scale.domain`,
+      path: `${channelPath}.scale.scheme`,
+      code: 'INVALID_VALUE',
+      suggestion:
+        'Remove scale.scheme. To customize categorical map colors, provide explicit colors via scale.range (with scale.domain for category order).',
+    });
+    return;
+  }
+
+  if (!(scale.scheme in SEQUENTIAL_PALETTES)) {
+    errors.push({
+      message: `Spec error: ${channelPath}.scale.scheme "${scale.scheme}" is not a supported map palette`,
+      path: `${channelPath}.scale.scheme`,
+      code: 'INVALID_VALUE',
+      suggestion: `Maps support the sequential palettes: ${MAP_PALETTE_NAMES}. The default is "blue".`,
+    });
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Range mark validation
 // ---------------------------------------------------------------------------
@@ -613,19 +702,7 @@ function validateChartSpec(spec: Record<string, unknown>, errors: ValidationErro
     // Check scale.scheme names. Known names (including VL aliases) are
     // resolved to palette ranges by the pre-validation sugar expansion, so a
     // scheme surviving to this point on the compile path is an unknown name.
-    const channelScale = channelObj.scale as Record<string, unknown> | undefined;
-    if (
-      channelScale &&
-      typeof channelScale.scheme === 'string' &&
-      !resolveSchemeName(channelScale.scheme)
-    ) {
-      errors.push({
-        message: `Spec error: encoding.${channel}.scale.scheme "${channelScale.scheme}" is not a supported scheme name`,
-        path: `encoding.${channel}.scale.scheme`,
-        code: 'INVALID_VALUE',
-        suggestion: `Use one of the supported scheme names: ${[...SUPPORTED_SCHEME_NAMES].join(', ')}. Or provide explicit colors via scale.range.`,
-      });
-    }
+    checkSchemeName(channelObj, `encoding.${channel}`, errors);
 
     // Check field type is allowed for this channel
     if (channelRule && channelObj.type && channelRule.allowedTypes.length > 0) {
@@ -1022,7 +1099,7 @@ function validateGraphSpec(spec: Record<string, unknown>, errors: ValidationErro
         message: `Spec error: edges[${i}].source "${edge.source}" does not reference an existing node id`,
         path: `edges[${i}].source`,
         code: 'DATA_FIELD_MISSING',
-        suggestion: `Use one of the existing node ids: ${[...nodeIds].slice(0, 5).join(', ')}${nodeIds.size > 5 ? '...' : ''}`,
+        suggestion: `Use one of the existing node ids: ${[...nodeIds].slice(0, 5).join(', ')}${nodeIds.size > 5 ? '...' : ''}.${didYouMean(edge.source, [...nodeIds])}`,
       });
     }
 
@@ -1038,7 +1115,7 @@ function validateGraphSpec(spec: Record<string, unknown>, errors: ValidationErro
         message: `Spec error: edges[${i}].target "${edge.target}" does not reference an existing node id`,
         path: `edges[${i}].target`,
         code: 'DATA_FIELD_MISSING',
-        suggestion: `Use one of the existing node ids: ${[...nodeIds].slice(0, 5).join(', ')}${nodeIds.size > 5 ? '...' : ''}`,
+        suggestion: `Use one of the existing node ids: ${[...nodeIds].slice(0, 5).join(', ')}${nodeIds.size > 5 ? '...' : ''}.${didYouMean(edge.target, [...nodeIds])}`,
       });
     }
   }
@@ -1059,7 +1136,7 @@ function validateGraphSpec(spec: Record<string, unknown>, errors: ValidationErro
           message: `Spec error: encoding.${channel}.field "${ch.field}" does not exist on nodes. Available fields: ${[...nodeFields].join(', ')}`,
           path: `encoding.${channel}.field`,
           code: 'DATA_FIELD_MISSING',
-          suggestion: `Use one of the node fields: ${[...nodeFields].join(', ')}`,
+          suggestion: `Use one of the node fields: ${[...nodeFields].join(', ')}.${didYouMean(ch.field, [...nodeFields])}`,
         });
       }
     }
@@ -1072,10 +1149,18 @@ function validateGraphSpec(spec: Record<string, unknown>, errors: ValidationErro
           message: `Spec error: encoding.${channel}.field "${ch.field}" does not exist on edges. Available fields: ${[...edgeFields].join(', ')}`,
           path: `encoding.${channel}.field`,
           code: 'DATA_FIELD_MISSING',
-          suggestion: `Use one of the edge fields: ${[...edgeFields].join(', ')}`,
+          suggestion: `Use one of the edge fields: ${[...edgeFields].join(', ')}.${didYouMean(ch.field, [...edgeFields])}`,
         });
       }
     }
+
+    // Graph never reads scale.scheme: colors come from scale.range/scale.domain
+    checkSchemeUnused(
+      encoding,
+      errors,
+      'graph colors come from scale.range and scale.domain',
+      'Remove scale.scheme. To customize graph colors, provide explicit colors via scale.range.',
+    );
   }
 
   // Validate layout type if specified
@@ -1147,7 +1232,8 @@ function validateSankeySpec(spec: Record<string, unknown>, errors: ValidationErr
 
   const encoding = spec.encoding as Record<string, unknown>;
   const dataColumns = new Set(Object.keys(firstRow as Record<string, unknown>));
-  const availableColumns = [...dataColumns].join(', ');
+  const columnList = [...dataColumns];
+  const availableColumns = columnList.join(', ');
 
   // Required channels
   for (const channel of ['source', 'target', 'value'] as const) {
@@ -1157,7 +1243,7 @@ function validateSankeySpec(spec: Record<string, unknown>, errors: ValidationErr
         message: `Spec error: sankey encoding requires "${channel}" channel`,
         path: `encoding.${channel}`,
         code: 'MISSING_FIELD',
-        suggestion: `Add encoding.${channel} with a field from your data (${availableColumns}). Example: ${channel}: { field: "${[...dataColumns][0] ?? 'myField'}", type: "${channel === 'value' ? 'quantitative' : 'nominal'}" }`,
+        suggestion: `Add encoding.${channel} with a field from your data (${availableColumns}). Example: ${channel}: { field: "${columnList[0] ?? 'myField'}", type: "${channel === 'value' ? 'quantitative' : 'nominal'}" }`,
       });
       continue;
     }
@@ -1177,11 +1263,19 @@ function validateSankeySpec(spec: Record<string, unknown>, errors: ValidationErr
         message: `Spec error: encoding.${channel}.field "${ch.field}" does not exist in data. Available columns: ${availableColumns}`,
         path: `encoding.${channel}.field`,
         code: 'DATA_FIELD_MISSING',
-        suggestion: `Use one of the available data columns: ${availableColumns}`,
+        suggestion: `Use one of the available data columns: ${availableColumns}.${didYouMean(ch.field as string, columnList)}`,
       });
     }
   }
 
+  // Sankey never reads scale.scheme: node colors cycle theme.colors.categorical
+  checkSchemeUnused(
+    encoding,
+    errors,
+    'sankey node colors cycle the theme categorical palette',
+    'Remove scale.scheme. To customize sankey colors, set theme.colors.categorical.',
+  );
+
   // Validate darkMode if provided
   if (spec.darkMode !== undefined && !VALID_DARK_MODES.has(spec.darkMode as string)) {
     errors.push({
@@ -1260,7 +1354,8 @@ function validateTileMapSpec(spec: Record<string, unknown>, errors: ValidationEr
 
     const encoding = spec.encoding as Record<string, unknown>;
     const dataColumns = new Set(Object.keys(firstRow as Record<string, unknown>));
-    const availableColumns = [...dataColumns].join(', ');
+    const columnList = [...dataColumns];
+    const availableColumns = columnList.join(', ');
 
     // Required channels
     for (const channel of ['state', 'value'] as const) {
@@ -1270,7 +1365,7 @@ function validateTileMapSpec(spec: Record<string, unknown>, errors: ValidationEr
           message: `Spec error: tilemap encoding requires "${channel}" channel`,
           path: `encoding.${channel}`,
           code: 'MISSING_FIELD',
-          suggestion: `Add encoding.${channel} with a field from your data (${availableColumns}). Example: ${channel}: { field: "${[...dataColumns][0] ?? 'myField'}", type: "${channel === 'value' ? 'quantitative' : 'nominal'}" }`,
+          suggestion: `Add encoding.${channel} with a field from your data (${availableColumns}). Example: ${channel}: { field: "${columnList[0] ?? 'myField'}", type: "${channel === 'value' ? 'quantitative' : 'nominal'}" }`,
         });
         continue;
       }
@@ -1290,12 +1385,23 @@ function validateTileMapSpec(spec: Record<string, unknown>, errors: ValidationEr
           message: `Spec error: encoding.${channel}.field "${ch.field}" does not exist in data. Available columns: ${availableColumns}`,
           path: `encoding.${channel}.field`,
           code: 'DATA_FIELD_MISSING',
-          suggestion: `Use one of the available data columns: ${availableColumns}`,
+          suggestion: `Use one of the available data columns: ${availableColumns}.${didYouMean(ch.field as string, columnList)}`,
         });
       }
     }
   }
 
+  // Tilemap never reads scale.scheme: fills come from the top-level palette
+  // prop (encoding may be present in both record-map and array-data modes)
+  if (spec.encoding && typeof spec.encoding === 'object') {
+    checkSchemeUnused(
+      spec.encoding as Record<string, unknown>,
+      errors,
+      'tilemap fills come from the top-level palette property',
+      `Remove scale.scheme and set the top-level palette property instead, e.g. palette: "green". Supported: ${MAP_PALETTE_NAMES}.`,
+    );
+  }
+
   // Validate darkMode if provided
   if (spec.darkMode !== undefined && !VALID_DARK_MODES.has(spec.darkMode as string)) {
     errors.push({
@@ -1346,6 +1452,19 @@ function validateMapSpec(spec: Record<string, unknown>, errors: ValidationError[
     return;
   }
 
+  // Map color channels resolve scale.scheme against the sequential palettes
+  // with a silent blue fallback; reject unsupported names here instead.
+  const mapEncoding = spec.encoding as Record<string, unknown>;
+  if (mapEncoding.color && typeof mapEncoding.color === 'object') {
+    checkMapSchemeName(mapEncoding.color as Record<string, unknown>, 'encoding.color', errors);
+  }
+  if (spec.points && typeof spec.points === 'object') {
+    const pointsLayer = spec.points as Record<string, unknown>;
+    if (pointsLayer.color && typeof pointsLayer.color === 'object') {
+      checkMapSchemeName(pointsLayer.color as Record<string, unknown>, 'points.color', errors);
+    }
+  }
+
   // Validate geo.focus if present
   if ('focus' in geo && geo.focus !== undefined && geo.focus !== null) {
     const focus = geo.focus;
@@ -1593,7 +1712,8 @@ function validateBarListSpec(spec: Record<string, unknown>, errors: ValidationEr
 
   const encoding = spec.encoding as Record<string, unknown>;
   const dataColumns = new Set(Object.keys(firstRow as Record<string, unknown>));
-  const availableColumns = [...dataColumns].join(', ');
+  const columnList = [...dataColumns];
+  const availableColumns = columnList.join(', ');
 
   for (const channel of ['label', 'value'] as const) {
     const ch = encoding[channel] as Record<string, unknown> | undefined;
@@ -1602,7 +1722,7 @@ function validateBarListSpec(spec: Record<string, unknown>, errors: ValidationEr
         message: `Spec error: barlist encoding requires "${channel}" channel`,
         path: `encoding.${channel}`,
         code: 'MISSING_FIELD',
-        suggestion: `Add encoding.${channel} with a field from your data (${availableColumns}). Example: ${channel}: { field: "${[...dataColumns][0] ?? 'myField'}", type: "${channel === 'value' ? 'quantitative' : 'nominal'}" }`,
+        suggestion: `Add encoding.${channel} with a field from your data (${availableColumns}). Example: ${channel}: { field: "${columnList[0] ?? 'myField'}", type: "${channel === 'value' ? 'quantitative' : 'nominal'}" }`,
       });
       continue;
     }
@@ -1622,7 +1742,7 @@ function validateBarListSpec(spec: Record<string, unknown>, errors: ValidationEr
         message: `Spec error: encoding.${channel}.field "${ch.field}" does not exist in data. Available columns: ${availableColumns}`,
         path: `encoding.${channel}.field`,
         code: 'DATA_FIELD_MISSING',
-        suggestion: `Use one of the available data columns: ${availableColumns}`,
+        suggestion: `Use one of the available data columns: ${availableColumns}.${didYouMean(ch.field as string, columnList)}`,
       });
     }
   }
@@ -1637,11 +1757,19 @@ function validateBarListSpec(spec: Record<string, unknown>, errors: ValidationEr
         message: `Spec error: encoding.${channel}.field "${field}" does not exist in data. Available columns: ${availableColumns}`,
         path: `encoding.${channel}.field`,
         code: 'DATA_FIELD_MISSING',
-        suggestion: `Use one of the available data columns: ${availableColumns}`,
+        suggestion: `Use one of the available data columns: ${availableColumns}.${didYouMean(field, columnList)}`,
       });
     }
   }
 
+  // Barlist never reads scale.scheme: bars cycle the built-in barlist palette
+  checkSchemeUnused(
+    encoding,
+    errors,
+    'bar list colors cycle the built-in barlist palette',
+    'Remove scale.scheme. Bar list colors are not configurable via encoding; they cycle the built-in palette.',
+  );
+
   if (spec.darkMode !== undefined && !VALID_DARK_MODES.has(spec.darkMode as string)) {
     errors.push({
       message: 'Spec error: darkMode must be "auto", "force", or "off"',

package/src/geo/__tests__/compile-map.test.ts

@@ -296,6 +296,55 @@ describe('compileMap', () => {
     expect(layout.continuousLegend).toBeNull();
   });
 
+  it('categorical legend defaults to top and sits above the map area', () => {
+    const layout = compileMap(
+      {
+        type: 'map',
+        geo: { features: MINI_TOPO, projection: 'mercator' },
+        data: [
+          { fips: '06', category: 'west' },
+          { fips: '48', category: 'south' },
+        ],
+        encoding: {
+          key: { field: 'fips', type: 'nominal' },
+          color: { field: 'category', type: 'nominal' },
+        },
+      },
+      DEFAULT_OPTIONS,
+    );
+
+    const legend = layout.categoricalLegend!;
+    expect(legend.position).toBe('top');
+    // The map area shifts down to make room for a top legend; the legend row
+    // must land above it, not inside it (the old bottom-anchored legend
+    // overlapped the map because the two disagreed about the layout).
+    expect(legend.bounds.y + legend.bounds.height).toBeLessThanOrEqual(layout.area.y);
+  });
+
+  it('honors position: bottom for categorical legend', () => {
+    const layout = compileMap(
+      {
+        type: 'map',
+        geo: { features: MINI_TOPO, projection: 'mercator' },
+        data: [
+          { fips: '06', category: 'west' },
+          { fips: '48', category: 'south' },
+        ],
+        encoding: {
+          key: { field: 'fips', type: 'nominal' },
+          color: { field: 'category', type: 'nominal' },
+        },
+        legend: { position: 'bottom' },
+      },
+      DEFAULT_OPTIONS,
+    );
+
+    const legend = layout.categoricalLegend!;
+    expect(legend.position).toBe('bottom');
+    // Bottom legend starts at or below the map area's bottom edge.
+    expect(legend.bounds.y).toBeGreaterThanOrEqual(layout.area.y + layout.area.height);
+  });
+
   it('assigns neutral fill to features without data', () => {
     const layout = compileMap(
       {

package/src/geo/compile-map.ts

@@ -360,6 +360,7 @@ export function compileMap(spec: unknown, options: CompileOptions): MapLayout {
       fullArea,
       mapAreaHeight,
       legendReserveGap,
+      legendPosition,
       showLegend,
       droppedFeatures,
     });
@@ -1010,6 +1011,7 @@ interface CategoricalOptions {
   fullArea: { x: number; y: number; width: number; height: number };
   mapAreaHeight: number;
   legendReserveGap: number;
+  legendPosition: 'top' | 'bottom';
   showLegend: boolean;
   droppedFeatures: string[];
 }
@@ -1031,6 +1033,7 @@ function buildCategoricalMarks(opts: CategoricalOptions): {
     fullArea,
     mapAreaHeight,
     legendReserveGap,
+    legendPosition,
     showLegend,
     droppedFeatures,
   } = opts;
@@ -1142,8 +1145,15 @@ function buildCategoricalMarks(opts: CategoricalOptions): {
       shape: 'square' as const,
     }));
 
+    // Honor legend.position like the continuous path does. The map drawing
+    // area (mapAreaY in compileMap) already shifts down for top legends, so
+    // the legend row here must agree with it — a bottom-anchored legend with
+    // a top-shifted map is how legends used to land on top of Alaska.
     const legendX = fullArea.x;
-    const legendY = fullArea.y + mapAreaHeight + legendReserveGap;
+    const legendY =
+      legendPosition === 'bottom'
+        ? fullArea.y + mapAreaHeight + legendReserveGap
+        : fullArea.y + legendReserveGap;
     const legendWidth = fullArea.width;
     const swatchSize = 10;
     const swatchGap = 6;
@@ -1151,7 +1161,7 @@ function buildCategoricalMarks(opts: CategoricalOptions): {
 
     legend = {
       type: 'categorical',
-      position: 'bottom',
+      position: legendPosition,
       bounds: { x: legendX, y: legendY, width: legendWidth, height: swatchSize + 6 },
       labelStyle,
       entries,
@@ -1207,13 +1217,20 @@ function resolveFocus(
     let maxX = -Infinity;
     let maxY = -Infinity;
     for (const p of matched) {
-      minX = Math.min(minX, p.cx - p.r);
-      minY = Math.min(minY, p.cy - p.r);
-      maxX = Math.max(maxX, p.cx + p.r);
-      maxY = Math.max(maxY, p.cy + p.r);
+      // Use center points only, not cx ± r: the camera counter-scales point
+      // radii to constant screen size, so the base radius doesn't occupy
+      // projected space after the transform. Including it inflates the
+      // bounding box and produces a much shallower zoom than expected.
+      minX = Math.min(minX, p.cx);
+      minY = Math.min(minY, p.cy);
+      maxX = Math.max(maxX, p.cx);
+      maxY = Math.max(maxY, p.cy);
     }
+    // Guard against degenerate bounding box (single point or coincident points)
+    const w = Math.max(maxX - minX, 1);
+    const h = Math.max(maxY - minY, 1);
     return {
-      target: { x: minX, y: minY, width: maxX - minX, height: maxY - minY, padding },
+      target: { x: minX, y: minY, width: w, height: h, padding },
       // No feature ids: focus-dim is a feature concept, so a points focus
       // dims no features (there are no "other" features to mute).
       ids: [],