ggaction 0.0.17 → 0.0.19

package/src/actions/guides/legends/continuous/gradient.js

@@ -1,6 +1,12 @@
+import{validateLegendClip}from"../../../../grammar/legendClip.js";
+import{hasLegendClipGraphics}from"../../../../materialization/legendClip.js";
+import { normalizeColorSymbols, resolveColorSymbolsLayout, materializeColorSymbols } from "./colorSymbols.js";
+import { alignLegendTitle, resolveLegendTitleText } from "../../../../layout/legendText.js";
+import { intrinsicLegendConfig } from "../../../../materialization/legendGroups.js";
+import { mapContinuousScaleValues, transformedTicks } from "../../../../grammar/scales/index.js";
 import { action, closedAction } from "../../../../core/action.js";
 import { isPlainObject } from "../../../../core/immutable.js";
-import { validateKeys } from "../../../../core/validation.js";
+import { normalizeLegendGradient, DEFAULT_LEGEND_GRADIENT } from "../../../../grammar/legendGradient.js";
 import { mapScaleConsumerValues } from "../../../../materialization/scales/map.js";
 import { inverseLerp, interpolateNumber } from "../../../../grammar/numeric.js";
 import { DEFAULT_COLORS } from "../../../../theme/defaults.js";
@@ -16,49 +22,61 @@ import {
   resolveLegendBackgroundFromBounds,
   resolveLegendTextBounds,
   sampleContinuousValues,
-  styleContinuousText,
-  validatePositive
+  styleContinuousText
 } from "./common.js";
 import { resolveLegendGraphicPlacement } from
   "../../../../materialization/graphicHierarchy.js";
 import { resolveEffectiveLegendBlockConfig } from "../blocks.js";
 
-export const DEFAULT_GRADIENT_SIZE = Object.freeze({ length: 120, thickness: 12 });
+export const DEFAULT_GRADIENT_SIZE = DEFAULT_LEGEND_GRADIENT;
 
-const GRADIENT_OPTIONS = Object.freeze(["length", "thickness"]);
-
-export function resolveGradientLayout(program, config, scale, label = "Gradient legend") {
+export function resolveGradientLayout(program, config, scale, label = "Gradient legend", stripStrokeWidth = 0) {
+  validateLegendClip("gradient",config);
+  if (config.representation === "symbols") return resolveColorSymbolsLayout(program, config, scale);
+  config = intrinsicLegendConfig(program, config);
   const { plot, canvas } = resolveContinuousBounds(program);
-  const vertical = ["right", "left"].includes(config.position);
+  const vertical = config.gradientDirection === undefined
+    ? ["right", "left"].includes(config.position) : config.gradientDirection === "vertical";
+  const stripWidth = vertical ? config.gradient.thickness : config.gradient.length;
+  const stripHeight = vertical ? config.gradient.length : config.gradient.thickness;
   const length = config.gradient.length;
   const thickness = config.gradient.thickness;
+  const titleText = config.titleVisible === false ? { height: 0, extraHeight: 0 }
+    : resolveLegendTitleText(config.title, config.titleStyle, program.materializationConfigs.textMetrics);
   const titleGap = config.blockGap ?? 12;
   let x;
   let y;
   if (config.position === "right") {
     x = plot.x + plot.width + config.offset;
-    y = plot.y + 46 + titleGap - 12;
+    y = plot.y + 46 + titleGap - 12 + titleText.extraHeight / 2;
   } else if (config.position === "left") {
-    x = plot.x - config.offset - thickness;
-    y = plot.y + 46 + titleGap - 12;
+    x = plot.x - config.offset - stripWidth;
+    y = plot.y + 46 + titleGap - 12 + titleText.extraHeight / 2;
   } else {
     x = config.align === "left" ? plot.x
-      : config.align === "right" ? plot.x + plot.width - length
-        : plot.x + (plot.width - length) / 2;
+      : config.align === "right" ? plot.x + plot.width - stripWidth
+        : plot.x + (plot.width - stripWidth) / 2;
     y = config.position === "top"
-      ? plot.y - config.offset - thickness - config.labels.offset -
+      ? plot.y - config.offset - stripHeight - config.labels.offset -
         config.labels.fontSize
       : plot.y + plot.height + config.offset +
-        (config.titleVisible === false ? 0 : config.titleStyle.fontSize + titleGap);
+        (config.titleVisible === false ? 0 : titleText.height + titleGap);
   }
-  const title = vertical
-    ? { x, y: plot.y + 20, align: "left" }
+  let title = vertical
+    ? { x, y: ["right", "left"].includes(config.position) ? plot.y + 20
+      : y - titleGap - titleText.height / 2, align: "left" }
     : {
         x: x + length / 2,
-        y: y - titleGap - config.titleStyle.fontSize / 2,
+        y: y - titleGap - titleText.height / 2,
         align: "center"
       };
-  const values = [...sampleContinuousValues(scale.domain, config.count)];
+  const transformed = ["log", "pow", "sqrt", "symlog"].includes(scale.type);
+  const values = transformed
+    ? transformedTicks(scale.type, scale.domain, config.count,
+        scale.type === "log" ? {base: scale.base}
+          : scale.type === "pow" ? {exponent: scale.exponent}
+          : scale.type === "symlog" ? {constant: scale.constant} : {})
+    : [...sampleContinuousValues(scale.domain, config.count)];
   if (scale.midpoint !== undefined && !values.includes(scale.midpoint)) {
     values.push(scale.midpoint);
     values.sort((a, b) => scale.domain[1] > scale.domain[0] ? a - b : b - a);
@@ -69,17 +87,17 @@ export function resolveGradientLayout(program, config, scale, label = "Gradient
     config.fieldType,
     config.labels.format
   );
-  const fractions = values.map((value, index) => scale.midpoint === undefined
+  const fractions = transformed ? mapContinuousScaleValues(values, {...scale, range: [0, 1]})
+    : values.map((value, index) => scale.midpoint === undefined
     ? index / (values.length - 1)
     : inverseLerp(value, ...scale.domain));
   const labelOffset = config.labels.offset;
   const labels = vertical
     ? fractions.map(fraction => ({
-        x: config.position === "right"
-          ? x + thickness + labelOffset
-          : x - labelOffset,
+        x: config.position === "left"
+          ? x - labelOffset : x + thickness + labelOffset,
         y: y + length * (1 - fraction),
-        align: config.position === "right" ? "left" : "right"
+        align: config.position === "left" ? "right" : "left"
       }))
     : fractions.map(fraction => ({
         x: x + length * fraction,
@@ -88,9 +106,9 @@ export function resolveGradientLayout(program, config, scale, label = "Gradient
       }));
   const ticks = vertical
     ? labels.map(label => ({
-        x1: config.position === "right" ? x + thickness : x,
+        x1: config.position === "left" ? x : x + thickness,
         y1: label.y,
-        x2: config.position === "right" ? x + thickness + 6 : x - 6,
+        x2: config.position === "left" ? x - 6 : x + thickness + 6,
         y2: label.y
       }))
     : labels.map(label => ({
@@ -114,11 +132,21 @@ export function resolveGradientLayout(program, config, scale, label = "Gradient
   const labelBounds = labels.map((label, index) =>
     resolveLegendTextBounds(label, texts[index], config.labels, program.materializationConfigs.textMetrics)
   );
+  if (config.titlePosition === "bottom" && config.titleVisible !== false) {
+    const bottom = Math.max(stripBounds.bottom + stripStrokeWidth / 2,
+      ...tickBounds.map(bounds => bounds.bottom), ...labelBounds.map(bounds => bounds.bottom));
+    title = { x: vertical ? x : x + length / 2,
+      y: bottom + titleGap + titleText.height / 2, align: vertical ? "left" : "center" };
+  }
+  if (config.titleVisible !== false) title = alignLegendTitle(title, config.title, config.titleStyle,
+    [{ left: stripBounds.left - stripStrokeWidth / 2, right: stripBounds.right + stripStrokeWidth / 2,
+      top: stripBounds.top - stripStrokeWidth / 2, bottom: stripBounds.bottom + stripStrokeWidth / 2 },
+      ...tickBounds, ...labelBounds], program.materializationConfigs.textMetrics);
   const titleBounds = config.titleVisible === false ? undefined : resolveLegendTextBounds(
     title,
     config.title,
     config.titleStyle
-  , program.materializationConfigs.textMetrics);
+  , program.materializationConfigs.textMetrics, { hardBreaks: true });
   const occupiedBounds = [stripBounds, ...tickBounds, ...labelBounds,
     ...(config.titleVisible === false ? [] : [titleBounds])];
   assertLegendBoundsInsideCanvas(
@@ -173,14 +201,15 @@ export function materializeGradientLegend(program, resolved, appearance) {
   const prefix = `${channel}Gradient`;
   const { scale, encoding, config: currentConfig } = resolved;
   const config = resolveEffectiveLegendBlockConfig(program, kind, currentConfig);
+  if (!stroke && config.representation === "symbols") return materializeColorSymbols(program, resolved, config);
   const layout = resolveGradientLayout(program, config, scale,
-    stroke ? "Stroke gradient legend" : "Gradient legend");
+    stroke ? "Stroke gradient legend" : "Gradient legend", appearance?.strokeWidth ?? 0);
   const stripCount = 60;
   const stripSize = layout.length / stripCount;
   const strips = Array.from({ length: stripCount }, (_, index) => {
     const fraction = (index + 0.5) / stripCount;
     const position = layout.vertical ? 1 - fraction : fraction;
-    const samplingScale = scale.midpoint === undefined ? { ...scale, domain: [0, 1] } : scale;
+    const samplingScale = scale.midpoint === undefined ? { ...scale, type: "sequential", domain: [0, 1] } : scale;
     const value = scale.midpoint === undefined ? position : interpolateNumber(...scale.domain, position);
     const [color] = mapScaleConsumerValues([value], samplingScale, channel);
     return {
@@ -204,6 +233,9 @@ export function materializeGradientLegend(program, resolved, appearance) {
   for (const property of ["x", "y", "width", "height", "fill", "stroke", "strokeWidth"]) {
     next = next.editGraphics({ target: `${prefix}Strips`, property, value: strips.map(strip => strip[property]) });
   }
+  if (config.gradient.opacity !== undefined) {
+    next = next.editGraphics({ target: `${prefix}Strips`, property: "opacity", value: config.gradient.opacity });
+  }
   next = next.editGraphics({ target: `${prefix}Ticks`, property: "length", value: layout.ticks.length });
   for (const property of ["x1", "y1", "x2", "y2"]) {
     next = next.editGraphics({ target: `${prefix}Ticks`, property, value: layout.ticks.map(tick => tick[property]) });
@@ -225,6 +257,7 @@ export const rematerializeGradientLegend = /* @__PURE__ */ closedAction(
     description: "Rematerialize a continuous color gradient legend."
   }, [],
   function (args = {}) {
+    if(hasLegendClipGraphics(this))return this.rematerializeLegend();
     const stored = this.guideConfigs.legend?.gradient;
     if (stored === undefined) {
       throw new Error("Gradient legend requires stored configuration.");
@@ -235,7 +268,10 @@ export const rematerializeGradientLegend = /* @__PURE__ */ closedAction(
 
 
 export function resolveGradientLegendCreation(program, args = {}, channel = "color") {
-  const config = normalizeContinuousLegend(args, "gradient");
+  const { representation, ...options } = args;
+  if (representation !== undefined && !["gradient", "symbols"].includes(representation)) throw new Error("Legend representation must be gradient or symbols.");
+  if (channel !== "color" && representation !== undefined) throw new Error("Legend representation requires continuous color.");
+  const config = representation === "symbols" ? normalizeColorSymbols(options) : normalizeContinuousLegend(options, "gradient");
   if (args.channels !== undefined && (
     !Array.isArray(args.channels) ||
     args.channels.length !== 1 ||
@@ -246,18 +282,7 @@ export function resolveGradientLegendCreation(program, args = {}, channel = "col
   if (args.gradient !== undefined && !isPlainObject(args.gradient)) {
     throw new TypeError("createLegend.gradient must be a plain object.");
   }
-  validateKeys(
-    args.gradient ?? {},
-    GRADIENT_OPTIONS,
-    "createLegend.gradient"
-  );
-  config.gradient = {
-    length: args.gradient?.length ?? DEFAULT_GRADIENT_SIZE.length,
-    thickness: args.gradient?.thickness ?? DEFAULT_GRADIENT_SIZE.thickness
-  };
-  config.titleVisible = true;
-  validatePositive(config.gradient.length, "Gradient length");
-  validatePositive(config.gradient.thickness, "Gradient thickness");
+  if (config.representation !== "symbols") config.gradient = normalizeLegendGradient(args.gradient);
   const resolved = resolveGradientConfig(program, config, channel);
   return resolved;
 }
@@ -284,7 +309,9 @@ export function createGradientLegendFromConfig(program, config, channel = "color
       ...resolveLegendGraphicPlacement(next)
     });
   }
-  next = next
+  if (resolved.config.representation === "symbols") {
+    next = next.createGraphics({ id: `${prefix}Symbols`, type: "circle", length: 0, ...resolveLegendGraphicPlacement(next) });
+  } else next = next
     .createGraphics({
       id: `${prefix}Strips`,
       type: "rect",
@@ -298,8 +325,8 @@ export function createGradientLegendFromConfig(program, config, channel = "color
       type: "line",
       length: 0,
       ...resolveLegendGraphicPlacement(next)
-    })
-    .createGraphics({
+    });
+  next = next.createGraphics({
       id: `${prefix}Labels`,
       type: "text",
       length: 0,
@@ -323,7 +350,7 @@ export const createGradientLegend = /* @__PURE__ */ action(
   function (args = {}) {
     const resolved = resolveGradientLegendCreation(this, args);
     resolveGradientLayout(this, resolved.config, resolved.scale);
-    if (this.graphicSpec.objects.colorGradientStrips !== undefined) {
+    if (this.guideConfigs.legend?.gradient !== undefined) {
       throw new Error(
         "createGradientLegend requires a missing gradient legend."
       );

package/src/actions/guides/legends/continuous/interval.js

@@ -1,3 +1,4 @@
+import { intrinsicLegendConfig } from "../../../../materialization/legendGroups.js";
 import { resolveLegendItemLayout } from "../../../../layout/legendItems.js";
 import { action, closedAction } from "../../../../core/action.js";
 import { isPlainObject } from "../../../../core/immutable.js";
@@ -13,6 +14,7 @@ import {
   assertLegendBoundsInsideCanvas,
   editGraphicProperties,
   editLegendBackground,
+  normalizeInitialLegendTitle,
   normalizeLegendBorder,
   normalizeItemLegendLayout,
   normalizeLegendTextOptions,
@@ -60,14 +62,11 @@ export function normalizeIntervalLegend(args) {
   validatePositive(symbol.width, "Legend symbol width");
   validatePositive(symbol.height, "Legend symbol height");
   validateNonNegative(symbol.strokeWidth, "Legend symbol strokeWidth");
-  if (args.title !== undefined) validateNonEmptyString(args.title, "Legend title");
   validateNonEmptyString(symbol.stroke, "Legend symbol stroke");
   return {
     target: args.target,
     ...layout,
-    title: args.title,
-    inferredTitle: args.title === undefined,
-    titleVisible: true,
+    ...normalizeInitialLegendTitle(args.title),
     symbol,
     labels: normalizeLegendTextOptions(args.labels, "createLegend.labels", {
       offset: 8,
@@ -106,6 +105,7 @@ export function resolveIntervalConfig(program, stored, channel = "color") {
 }
 
 export function resolveIntervalLayout(program, config, scale, label = "Interval legend") {
+  config = intrinsicLegendConfig(program, config);
   const { plot, canvas } = resolveContinuousBounds(program);
   const labels = formatDiscretizedIntervals(scale.thresholds, config.labels.format);
   const layout = resolveLegendItemLayout(plot, config, labels, config.symbol, undefined, program.materializationConfigs.textMetrics);

package/src/actions/guides/legends/continuous/opacity.js

@@ -1,3 +1,7 @@
+import{validateLegendClip}from"../../../../grammar/legendClip.js";
+import{hasLegendClipGraphics,applyLegendClipGraphics}from"../../../../materialization/legendClip.js";
+import { intrinsicLegendConfig } from "../../../../materialization/legendGroups.js";
+import { alignLegendTitle, resolveLegendTitleText } from "../../../../layout/legendText.js";
 import { editGraphicProperties } from "../../../primitives/graphicProperties.js";
 import { action, closedAction } from "../../../../core/action.js";
 import { isPlainObject } from "../../../../core/immutable.js";
@@ -23,6 +27,7 @@ import { resolveLegendGraphicPlacement } from
   "../../../../materialization/graphicHierarchy.js";
 import { resolveLegendSampleValues } from "../sampling.js";
 import { resolveEffectiveLegendBlockConfig } from "../blocks.js";
+import { legendLabelLineHeight } from "../../../../layout/legend.js";
 
 const SYMBOL_OPTIONS = Object.freeze([
   "type", "radius", "fill", "stroke", "strokeWidth"
@@ -85,6 +90,8 @@ function resolveOpacityConfig(program, config) {
 }
 
 function resolveOpacityLayout(program, config, scale) {
+  validateLegendClip("opacity",config);
+  config = intrinsicLegendConfig(program, config);
   const { plot, canvas } = resolveContinuousBounds(program);
   const vertical = ["right", "left"].includes(config.position);
   const values = resolveLegendSampleValues(config, scale, "Opacity legend");
@@ -95,6 +102,9 @@ function resolveOpacityLayout(program, config, scale) {
     config.labels.format
   );
   const symbolExtent = config.symbol.radius + (config.symbol.strokeWidth ?? 0) / 2;
+  const visibleExtent=Math.min(symbolExtent,config.clipHeight===undefined?Infinity:config.clipHeight/2);
+  const titleText = config.titleVisible === false ? { width: 0, height: 0 }
+    : resolveLegendTitleText(config.title, config.titleStyle, program.materializationConfigs.textMetrics);
   const labelWidths = texts.map(text => measureTextWidth(text, config.labels, program.materializationConfigs.textMetrics));
   let symbols;
   let labels;
@@ -103,10 +113,10 @@ function resolveOpacityLayout(program, config, scale) {
     const baseX = config.position === "right"
       ? plot.x + plot.width + config.offset
       : plot.x - config.offset;
-    const itemHeight = Math.max(symbolExtent * 2, config.labels.fontSize);
+    const itemHeight = Math.max(visibleExtent * 2, legendLabelLineHeight(config.labels.fontSize));
     const pitch = Math.max(config.itemGap, itemHeight);
     const firstY = Math.max(plot.y + 46, config.titleVisible === false ? plot.y + 46
-      : plot.y + 20 + config.titleStyle.fontSize / 2 + 12 + itemHeight / 2);
+      : plot.y + 20 + titleText.height / 2 + 12 + itemHeight / 2);
     const y = values.map((_, index) => firstY + index * pitch);
     symbols = y.map(itemY => ({
       x: config.position === "right" ? baseX + symbolExtent : baseX - symbolExtent,
@@ -125,7 +135,7 @@ function resolveOpacityLayout(program, config, scale) {
       align: config.position === "right" ? "left" : "right"
     };
   } else if (config.titlePosition === "left") {
-    const titleWidth = config.titleVisible === false ? 0 : measureTextWidth(config.title, config.titleStyle, program.materializationConfigs.textMetrics);
+    const titleWidth = titleText.width;
     const titlePrefix = config.titleVisible === false ? 0 : titleWidth + 20;
     const samplesWidth = labelWidths.reduce(
       (sum, width) => sum + symbolExtent * 2 + config.labels.offset + width,
@@ -136,9 +146,9 @@ function resolveOpacityLayout(program, config, scale) {
       : config.align === "right" ? plot.x + plot.width - width
         : plot.x + (plot.width - width) / 2;
     const height = Math.max(
-      symbolExtent * 2,
+      visibleExtent * 2,
       config.labels.fontSize,
-      config.titleVisible === false ? 0 : config.titleStyle.fontSize
+      titleText.height
     );
     const centerY = config.position === "top"
       ? plot.y - config.offset - height / 2
@@ -161,13 +171,13 @@ function resolveOpacityLayout(program, config, scale) {
     const startX = config.align === "left" ? plot.x
       : config.align === "right" ? plot.x + plot.width - width
         : plot.x + (plot.width - width) / 2;
-    const titleHalf = config.titleStyle.fontSize / 2;
+    const titleHalf = titleText.height / 2;
     const labelHalf = config.labels.fontSize / 2;
     const y = config.position === "top"
       ? plot.y - config.offset - config.labels.fontSize -
-        config.labels.offset - symbolExtent
+        config.labels.offset - visibleExtent
       : plot.y + plot.height + config.offset +
-        (config.titleVisible === false ? 0 : config.titleStyle.fontSize + 12) + symbolExtent;
+        (config.titleVisible === false ? 0 : titleText.height + 12) + visibleExtent;
     const samplePitch = values.length === 1 ? 0 : width / (values.length - 1);
     symbols = values.map((_, index) => ({
       x: startX + index * samplePitch,
@@ -175,29 +185,31 @@ function resolveOpacityLayout(program, config, scale) {
     }));
     labels = symbols.map(symbol => ({
       x: symbol.x,
-      y: symbol.y + symbolExtent + config.labels.offset + labelHalf,
+      y: symbol.y + visibleExtent + config.labels.offset + labelHalf,
       align: "center"
     }));
     title = {
       x: startX + width / 2,
-      y: y - symbolExtent - 12 - titleHalf,
+      y: y - visibleExtent - 12 - titleHalf,
       align: "center"
     };
   }
-  const titleBounds = config.titleVisible === false ? undefined : resolveLegendTextBounds(
-    title,
-    config.title,
-    config.titleStyle
-  , program.materializationConfigs.textMetrics);
   const labelBounds = labels.map((label, index) =>
     resolveLegendTextBounds(label, texts[index], config.labels, program.materializationConfigs.textMetrics)
   );
   const symbolBounds = symbols.map(symbol => ({
     left: symbol.x - symbolExtent,
     right: symbol.x + symbolExtent,
-    top: symbol.y - symbolExtent,
-    bottom: symbol.y + symbolExtent
+    top: symbol.y - visibleExtent,
+    bottom: symbol.y + visibleExtent
   }));
+  if (config.titleVisible !== false) title = alignLegendTitle(title, config.title, config.titleStyle,
+    [...labelBounds, ...symbolBounds], program.materializationConfigs.textMetrics);
+  const titleBounds = config.titleVisible === false ? undefined : resolveLegendTextBounds(
+    title,
+    config.title,
+    config.titleStyle
+  , program.materializationConfigs.textMetrics, { hardBreaks: true });
   const occupiedBounds = [...(config.titleVisible === false ? [] : [titleBounds]), ...labelBounds, ...symbolBounds];
   assertLegendBoundsInsideCanvas(
     occupiedBounds,
@@ -219,6 +231,7 @@ export const rematerializeOpacityLegend = /* @__PURE__ */ closedAction(
     description: "Rematerialize a field-opacity sample legend."
   }, [],
   function (args = {}) {
+    if(hasLegendClipGraphics(this))return this.rematerializeLegend();
     const stored = this.guideConfigs.legend?.opacity;
     if (stored === undefined) {
       throw new Error("Opacity legend requires stored configuration.");
@@ -278,18 +291,18 @@ export const rematerializeOpacityLegend = /* @__PURE__ */ closedAction(
       config.labels,
       { align: layout.labels[0].align }
     );
-    if (config.titleVisible === false) return next;
+    if (config.titleVisible === false) return applyLegendClipGraphics(next);
     next = editGraphicProperties(next, "opacityLegendTitle", {
       x: layout.title.x,
       y: layout.title.y,
       text: config.title
     });
-    return styleContinuousText(
+    return applyLegendClipGraphics(styleContinuousText(
       next,
       "opacityLegendTitle",
       config.titleStyle,
       { align: layout.title.align }
-    );
+    ));
   }
 );
 
@@ -304,7 +317,6 @@ export function resolveOpacityLegendCreation(program, args = {}) {
     throw new Error('Opacity legend requires channels: ["opacity"].');
   }
   config.symbol = normalizeOpacitySymbol(args.symbol);
-  config.titleVisible = true;
   const resolved = resolveOpacityConfig(program, config);
   return resolved;
 }

package/src/actions/guides/legends/creation.js

@@ -1,3 +1,4 @@
+import {resolveColorSizeConfig} from "./colorSize.js";
 import { resolveCategoricalLegendConfig } from "./categorical/actions.js";
 import { resolveGradientLegendCreation } from "./continuous/gradient.js";
 import { resolveOpacityLegendCreation } from "./continuous/opacity.js";
@@ -11,6 +12,7 @@ import {
 
 export function resolveLegendStepConfig(program, step) {
   switch (step.op) {
+    case "createColorSizeLegend": return {kind:"colorSize",config:resolveColorSizeConfig(program,step.args)};
     case "createCategoricalLegend": {
       const config = resolveCategoricalLegendConfig(program, step.args);
       return { kind: config.kind, config };