ggaction 0.0.10 → 0.0.12

package/src/actions/errorBars/edit.js

@@ -1,26 +1,77 @@
 import { action } from "../../core/action.js";
 import { validateUserId } from "../../core/identifiers.js";
-import { validateKeys } from "../../core/validation.js";
-import { findLayer, resolveEligibleLayer } from "../../selectors/layers.js";
-import { planIntervalEdit } from "../data/intervalEdit.js";
 import {
-  ERROR_BAR_APPEARANCE_OPTIONS,
-  ERROR_BAR_EDIT_OPTIONS,
-  resolveErrorBarAppearance
-} from "./options.js";
+  validateKeys,
+  validatePositiveFinite
+} from "../../core/validation.js";
+import {
+  normalizeStrokeDashPattern,
+  validateOpacityValue
+} from "../../grammar/scales/index.js";
+import {
+  validateRuleStroke,
+  validateRuleStrokeWidth
+} from "../../grammar/ruleAppearance.js";
+import { findLayer } from "../../selectors/layers.js";
+import {
+  applyIntervalRevision,
+  ownOptions,
+  planIntervalEdit,
+  releaseIntervalRevision,
+  resolveIntervalOwner
+} from "../data/intervalEdit.js";
+
+export const ERROR_BAR_EDIT_OPTIONS = Object.freeze([
+  "target", "caps", "capSize", "stroke", "strokeWidth",
+  "strokeDash", "opacity", "statistics"
+]);
+
+export const ERROR_BAR_APPEARANCE_OPTIONS = Object.freeze(
+  ERROR_BAR_EDIT_OPTIONS.filter(option =>
+    option !== "target" && option !== "statistics"
+  )
+);
+
+export function resolveErrorBarAppearance(args, { defaults, operation }) {
+  validateKeys(args, ERROR_BAR_EDIT_OPTIONS, operation);
+  const caps = args.caps ?? defaults.caps;
+  if (typeof caps !== "boolean") {
+    throw new TypeError(`${operation} caps must be a boolean.`);
+  }
+  const capSize = args.capSize ?? defaults.capSize;
+  validatePositiveFinite(capSize, `${operation} capSize`);
+  const stroke = validateRuleStroke(
+    args.stroke ?? defaults.stroke,
+    `${operation} stroke`
+  );
+  const strokeWidth = validateRuleStrokeWidth(
+    args.strokeWidth ?? defaults.strokeWidth,
+    `${operation} strokeWidth`
+  );
+  const strokeDash = args.strokeDash ?? defaults.strokeDash;
+  normalizeStrokeDashPattern(strokeDash);
+  const opacity = validateOpacityValue(
+    args.opacity ?? defaults.opacity,
+    `${operation} opacity`
+  );
+  return { caps, capSize, stroke, strokeWidth, strokeDash, opacity };
+}
 
 const REMATERIALIZE_OPTIONS = Object.freeze(["id"]);
 
+export function errorBarCaps(config) {
+  return [
+    [config.lowerCapId, config.fields?.lower ?? config.lowerField],
+    [config.upperCapId, config.fields?.upper ?? config.upperField]
+  ];
+}
+
 function resolveOwner(program, requested) {
-  const target = requested === undefined
-    ? undefined
-    : validateUserId(requested, "Error-bar id");
-  return resolveEligibleLayer(program, {
-    target,
+  return resolveIntervalOwner(program, requested, {
+    idLabel: "Error-bar id",
     label: "error bar",
-    predicate: layer =>
-      layer.mark?.type === "rule" &&
-      program.markConfigs[layer.id]?.errorBar !== undefined
+    mark: "rule",
+    config: "errorBar"
   });
 }
 
@@ -43,6 +94,16 @@ function capArgs(config, id, intervalField) {
     coordinate: config.coordinate,
     positionScale: config.positionScale,
     intervalScale: config.intervalScale,
+    ...(config.offset === undefined
+      ? {}
+      : {
+          offsetChannel: config.offset.channel,
+          offsetField: config.offset.field,
+          offsetFieldType: config.offset.fieldType,
+          offsetScale: config.offset.scale,
+          offsetPaddingInner: config.offset.paddingInner,
+          offsetPaddingOuter: config.offset.paddingOuter
+        }),
     capSize: config.capSize,
     stroke: config.stroke,
     strokeWidth: config.strokeWidth,
@@ -82,10 +143,7 @@ export const rematerializeErrorBar = action(
       throw new Error(`Unknown error bar "${id}".`);
     }
     let next = rematerializeRuleAppearance(this, id, config);
-    const capDefinitions = [
-      [config.lowerCapId, config.lowerField],
-      [config.upperCapId, config.upperField]
-    ];
+    const capDefinitions = errorBarCaps(config);
     if (!config.caps) {
       for (const [capId] of capDefinitions) next = removeCap(next, capId);
       return next;
@@ -118,22 +176,20 @@ export const editErrorBar = action(
     }
     const owner = resolveOwner(this, args.target);
     const current = this.markConfigs[owner.id].errorBar;
-    const appearanceArgs = Object.fromEntries(
-      ERROR_BAR_APPEARANCE_OPTIONS
-        .filter(key => Object.hasOwn(args, key))
-        .map(key => [key, args[key]])
-    );
-    const appearance = resolveErrorBarAppearance(appearanceArgs, {
+    const appearance = resolveErrorBarAppearance(
+      ownOptions(args, ERROR_BAR_APPEARANCE_OPTIONS), {
       defaults: current,
       operation: "editErrorBar"
-    });
+      }
+    );
     const interval = Object.hasOwn(args, "statistics")
       ? planIntervalEdit(this, {
           owner: owner.id,
           data: current.data,
           consumers: [
             owner.id,
-            ...[current.lowerCapId, current.upperCapId]
+            ...errorBarCaps(current)
+              .map(([id]) => id)
               .filter(id => findLayer(this, id) !== undefined)
           ],
           statistics: args.statistics,
@@ -141,27 +197,14 @@ export const editErrorBar = action(
         })
       : { changed: false };
 
-    const applyEdit = program => {
-      let next = program;
-      if (interval.changed) {
-        next = next.createIntervalData(interval.dataArgs);
-        for (const rebind of interval.revision.rebinds) {
-          next = next.rebindLayerData(rebind);
-        }
+    const next = applyIntervalRevision(this, interval);
+    return releaseIntervalRevision(next._withMarkConfig(owner.id, {
+      ...next.markConfigs[owner.id],
+      errorBar: {
+        ...current,
+        ...appearance,
+        ...(interval.changed ? { data: interval.revision.id } : {})
       }
-      next = next._withMarkConfig(owner.id, {
-        ...next.markConfigs[owner.id],
-        errorBar: {
-          ...current,
-          ...appearance,
-          ...(interval.changed ? { data: interval.revision.id } : {})
-        }
-      }).rematerializeErrorBar({ id: owner.id });
-      return interval.changed
-        ? next.releaseDerivedData(interval.revision.release)
-        : next;
-    };
-    if (interval.changed) applyEdit(this);
-    return applyEdit(this);
+    }).rematerializeErrorBar({ id: owner.id }), interval);
   }
 );

package/src/actions/errorBars/index.js

@@ -1,5 +1,4 @@
-import { createErrorBarCap } from "./components.js";
-import { createErrorBar } from "./create.js";
+import { createErrorBar, createErrorBarCap } from "./create.js";
 import { editErrorBar, rematerializeErrorBar } from "./edit.js";
 
 export function registerErrorBarActions(ProgramClass) {

package/src/actions/facets/actions.js

@@ -7,9 +7,10 @@ import {
   validatePositiveFinite
 } from "../../core/validation.js";
 import { resolveFacetDefinition } from "../../grammar/facets/index.js";
-import { normalizeFacetScalePolicies } from
-  "../../grammar/facets/scales.js";
-import { FACET_SCALE_CHANNELS } from "../../grammar/facets/scales.js";
+import {
+  FACET_SCALE_CHANNELS,
+  normalizeFacetScalePolicies
+} from "../../grammar/facets/scales.js";
 import { resolveFacetLayout } from "../../layout/facets.js";
 import { compositionChildDescriptor } from
   "../../materialization/composition.js";
@@ -17,6 +18,7 @@ import { DEFAULT_COLORS, DEFAULT_FONT_FAMILY } from "../../theme/defaults.js";
 import { deriveFacetChildren } from "./derive.js";
 import { replayDerivedData } from "./replay.js";
 import { composeFacetGuides } from "./guides.js";
+import { applyCompositionState } from "../composition/actions.js";
 
 const FACET_OPTIONS = Object.freeze([
   "id", "field", "data", "columns", "gap", "align", "padding", "scales",
@@ -48,25 +50,6 @@ function normalizeGuides(guides) {
   return { axes, legend };
 }
 
-function normalizeHeaderPatch(args, previous) {
-  validateOptionObject(args, HEADER_OPTIONS, "editFacetHeaders", {
-    allowEmpty: false,
-    emptyMessage: "editFacetHeaders requires at least one change."
-  });
-  const next = { ...previous, ...args };
-  validatePositiveFinite(next.fontSize, "Facet header fontSize");
-  validateNonEmptyString(next.fontFamily, "Facet header fontFamily");
-  validateNonEmptyString(next.color, "Facet header color");
-  validateNonNegativeFinite(next.offset, "Facet header offset");
-  if (!(
-    (typeof next.fontWeight === "string" && next.fontWeight.length > 0) ||
-    Number.isFinite(next.fontWeight)
-  )) {
-    throw new TypeError("Facet header fontWeight must be a non-empty string or number.");
-  }
-  return next;
-}
-
 function requireFacetProgram(program, operation) {
   program._assertCompositionProgram(operation);
   if (program.compositionSpec.type !== "facet") {
@@ -74,16 +57,6 @@ function requireFacetProgram(program, operation) {
   }
 }
 
-function currentFacetDefinition(program) {
-  const current = program.compositionSpec;
-  return resolveFacetDefinition(program.semanticSpec, {
-    id: current.id,
-    data: current.facet.data,
-    field: current.facet.field,
-    values: current.facet.values
-  });
-}
-
 function facetUnitTemplate(program) {
   const seed = program.children[program.compositionSpec.children[0]];
   if (seed === undefined) {
@@ -106,20 +79,19 @@ function facetUnitTemplate(program) {
   });
 }
 
-function applicableScaleRequest(program, channels) {
-  return Object.fromEntries(FACET_SCALE_CHANNELS.flatMap(channel =>
+function rederiveFacet(program, { scales, guides }) {
+  const current = program.compositionSpec;
+  const definition = resolveFacetDefinition(program.semanticSpec, {
+    id: current.id,
+    data: current.facet.data,
+    field: current.facet.field,
+    values: current.facet.values
+  });
+  const request = Object.fromEntries(FACET_SCALE_CHANNELS.flatMap(channel =>
     program.semanticSpec.layers.some(
       layer => layer.encoding?.[channel]?.scale !== undefined
-    )
-      ? [[channel, channels[channel]]]
-      : []
+    ) ? [[channel, scales[channel]]] : []
   ));
-}
-
-function rederiveFacet(program, { scales, guides }) {
-  const current = program.compositionSpec;
-  const definition = currentFacetDefinition(program);
-  const request = applicableScaleRequest(program, scales);
   const normalized = normalizeFacetScalePolicies(program.semanticSpec, request);
   const derived = deriveFacetChildren(facetUnitTemplate(program), definition, {
     closeInheritedAction: true,
@@ -134,14 +106,10 @@ function rederiveFacet(program, { scales, guides }) {
       guides
     }
   };
-  let next = program._withCompositionState({
+  return applyCompositionState(program, {
     children: derived.children,
     compositionSpec
-  });
-  for (const id of compositionSpec.children) {
-    next = next.useProgram({ id });
-  }
-  return next.materializeComposition();
+  }, compositionSpec.children);
 }
 
 export const facet = action(
@@ -189,18 +157,16 @@ export const facet = action(
         guides
       }
     };
-    let next = this
-      ._withCompositionState({
+    return applyCompositionState(
+      this._withMaterializationConfig(["facets", definition.id], {
+        headers: DEFAULT_HEADERS
+      }),
+      {
         children: derived.children,
         compositionSpec
-      })
-      ._withMaterializationConfig(["facets", definition.id], {
-        headers: DEFAULT_HEADERS
-      });
-    for (const id of compositionSpec.children) {
-      next = next.useProgram({ id });
-    }
-    return next.materializeComposition();
+      },
+      compositionSpec.children
+    );
   }
 );
 
@@ -217,7 +183,23 @@ export const editFacetHeaders = action(
     if (!isPlainObject(config?.headers)) {
       throw new Error(`Facet "${id}" requires header configuration.`);
     }
-    const headers = normalizeHeaderPatch(args, config.headers);
+    validateOptionObject(args, HEADER_OPTIONS, "editFacetHeaders", {
+      allowEmpty: false,
+      emptyMessage: "editFacetHeaders requires at least one change."
+    });
+    const headers = { ...config.headers, ...args };
+    validatePositiveFinite(headers.fontSize, "Facet header fontSize");
+    validateNonEmptyString(headers.fontFamily, "Facet header fontFamily");
+    validateNonEmptyString(headers.color, "Facet header color");
+    validateNonNegativeFinite(headers.offset, "Facet header offset");
+    if (!(
+      (typeof headers.fontWeight === "string" && headers.fontWeight.length > 0) ||
+      Number.isFinite(headers.fontWeight)
+    )) {
+      throw new TypeError(
+        "Facet header fontWeight must be a non-empty string or number."
+      );
+    }
     return this
       ._withMaterializationConfig(["facets", id], { ...config, headers })
       .materializeComposition();
@@ -252,14 +234,10 @@ export const editFacetScales = action(
     )) {
       throw new Error("editFacetScales requires at least one channel policy change.");
     }
-    const request = applicableScaleRequest(this, scales);
-    const normalized = normalizeFacetScalePolicies(this.semanticSpec, request);
-    const applyEdit = program => rederiveFacet(program, {
-      scales: normalized.channels,
+    return rederiveFacet(this, {
+      scales,
       guides: current.guides
     });
-    applyEdit(this);
-    return applyEdit(this);
   }
 );
 
@@ -277,12 +255,10 @@ export const editFacetGuides = action(
     });
     const current = this.compositionSpec.facet;
     const guides = normalizeGuides({ ...current.guides, ...args });
-    const applyEdit = program => rederiveFacet(program, {
+    return rederiveFacet(this, {
       scales: current.scales,
       guides
     });
-    applyEdit(this);
-    return applyEdit(this);
   }
 );
 

package/src/actions/facets/derive.js

@@ -56,40 +56,6 @@ function applySharedHistogramBoundaries(program, layerId, boundaries) {
   });
 }
 
-function replayDatasetId(cell, owner) {
-  return `${cell.id}-${owner}-data`;
-}
-
-function rebindReplayedGradientPlots(child, base, datasets) {
-  let next = child;
-  for (const [id, markConfig] of Object.entries(base.markConfigs)) {
-    const gradientPlot = markConfig.gradientPlot;
-    if (gradientPlot?.materialized !== true) continue;
-    const profile = datasets.get(gradientPlot.profileId);
-    const source = datasets.get(gradientPlot.source);
-    if (profile === undefined || source === undefined) {
-      throw new Error(
-        `Facet gradient plot "${id}" is missing replayed profile dependencies.`
-      );
-    }
-    next = next.rebindGradientPlotProfile({ id, profile, source });
-  }
-  return next;
-}
-
-function cellMaterializationPlan(program) {
-  const scaleIds = [...new Set(program.semanticSpec.layers.flatMap(layer =>
-    Object.values(layer.encoding ?? {})
-      .map(encoding => encoding?.scale)
-      .filter(id => id !== undefined)
-  ))];
-  const scales = scaleIds.map(id => ({
-    op: "rematerializeScale",
-    args: { id, guides: false, marks: false }
-  }));
-  return buildMaterializationPlan({ scales });
-}
-
 function deriveCellProgram(
   base,
   definition,
@@ -111,7 +77,7 @@ function deriveCellProgram(
         `Facet replay source "${replay.source}" is not available in cell "${cell.id}".`
       );
     }
-    const id = replayDatasetId(cell, replay.id);
+    const id = `${cell.id}-${replay.id}-data`;
     const policy = findTransformPolicy(replay.transform.type);
     const transform = policy?.facetReplayTransform?.(
       replay.transform,
@@ -138,8 +104,29 @@ function deriveCellProgram(
       histogramBoundaries.get(layer.id)
     );
   }
-  child = rebindReplayedGradientPlots(child, base, datasets);
-  return applyMaterializationPlan(child, cellMaterializationPlan(child));
+  for (const [id, markConfig] of Object.entries(base.markConfigs)) {
+    const gradientPlot = markConfig.gradientPlot;
+    if (gradientPlot?.materialized !== true) continue;
+    const profile = datasets.get(gradientPlot.profileId);
+    const source = datasets.get(gradientPlot.source);
+    if (profile === undefined || source === undefined) {
+      throw new Error(
+        `Facet gradient plot "${id}" is missing replayed profile dependencies.`
+      );
+    }
+    child = child.rebindGradientPlotProfile({ id, profile, source });
+  }
+  const scaleIds = [...new Set(child.semanticSpec.layers.flatMap(layer =>
+    Object.values(layer.encoding ?? {})
+      .map(encoding => encoding?.scale)
+      .filter(id => id !== undefined)
+  ))];
+  return applyMaterializationPlan(child, buildMaterializationPlan({
+    scales: scaleIds.map(id => ({
+      op: "rematerializeScale",
+      args: { id, guides: false, marks: false }
+    }))
+  }));
 }
 
 function applyResolvedDomains(program, childId, resolution, baseResolved) {
@@ -186,14 +173,14 @@ export function deriveFacetChildren(
   const template = stripTitle && base.semanticSpec.title.text !== undefined
     ? base.removeTitle()
     : base;
-  const resolutionRequest = scales ?? {};
-  const xPolicy = resolutionRequest.x ?? "shared";
+  scales ??= {};
+  const xPolicy = scales.x ?? "shared";
   const bins = xPolicy === "shared"
     ? sharedHistogramBoundaries(template)
     : new Map();
   const independentlyResolved = Object.fromEntries(definition.cells.map(cell => [
     cell.id,
-    deriveCellProgram(template, definition, cell, bins, resolutionRequest)
+    deriveCellProgram(template, definition, cell, bins, scales)
   ]));
   const resolution = resolveFacetScaleDomains(
     template.semanticSpec,
@@ -201,14 +188,19 @@ export function deriveFacetChildren(
       id,
       child.resolvedScales
     ])),
-    resolutionRequest,
+    scales,
     template.resolvedScales
   );
   const resolvedChildren = Object.fromEntries(
-    Object.entries(independentlyResolved).map(([id, child]) => [
-      id,
-      applyResolvedDomains(child, id, resolution, template.resolvedScales)
-    ])
+    Object.entries(independentlyResolved).map(([id, child]) => {
+      const resolved = applyResolvedDomains(
+        child,
+        id,
+        resolution,
+        template.resolvedScales
+      );
+      return [id, closeInheritedAction ? resolved._exitAction() : resolved];
+    })
   );
   const sharedScales = Object.fromEntries(
     Object.entries(resolution.scales)
@@ -216,14 +208,7 @@ export function deriveFacetChildren(
       .map(([id]) => [id, resolvedChildren[definition.cells[0].id].resolvedScales[id]])
   );
   return freezeOwned({
-    children: freezeOwned(Object.fromEntries(
-      Object.entries(resolvedChildren).map(([id, child]) => [
-        id,
-        closeInheritedAction
-          ? child._exitAction()
-          : child
-      ])
-    )),
+    children: freezeOwned(resolvedChildren),
     sharedScales: freezeOwned(sharedScales),
     resolution
   });

package/src/actions/facets/replay.js

@@ -3,7 +3,6 @@ import { isPlainObject } from "../../core/immutable.js";
 import { validateUserId } from "../../core/identifiers.js";
 import { validateKeys } from "../../core/validation.js";
 import { findTransformPolicy } from "../../grammar/transforms.js";
-import { hasDataset } from "../../selectors/datasets.js";
 
 const REPLAY_OPTIONS = Object.freeze(["id", "source", "transform"]);
 

package/src/actions/gradientPlots/components.js

@@ -65,6 +65,14 @@ function requireLegendOwner(program, owner) {
   return { layer, config };
 }
 
+function editProperties(program, target, properties) {
+  let next = program;
+  for (const [property, value] of Object.entries(properties)) {
+    next = next.editGraphics({ target, property, value });
+  }
+  return next;
+}
+
 export const rematerializeGradientPlotLegend = action(
   {
     op: "rematerializeGradientPlotLegend",
@@ -82,35 +90,33 @@ export const rematerializeGradientPlotLegend = action(
     const y = bounds.y + 50;
     const width = 22;
     const height = Math.min(170, Math.max(80, bounds.height - 110));
-    return this
-      .editGraphics({ target: ids.strip, property: "x", value: x })
-      .editGraphics({ target: ids.strip, property: "y", value: y })
-      .editGraphics({ target: ids.strip, property: "width", value: width })
-      .editGraphics({ target: ids.strip, property: "height", value: height })
-      .editGraphics({
-        target: ids.strip,
-        property: "fill",
-        value: createDensityLegendPaint(config.gradient.opacity)
-      })
-      .editGraphics({ target: ids.strip, property: "stroke", value: "#cbd5e1" })
-      .editGraphics({ target: ids.strip, property: "strokeWidth", value: 1 })
-      .editGraphics({ target: ids.labels, property: "x", value: x + width + 10 })
-      .editGraphics({ target: ids.labels, property: "y", value: [y + height, y] })
-      .editGraphics({ target: ids.labels, property: "text", value: ["Low", "High"] })
-      .editGraphics({ target: ids.labels, property: "fill", value: "#64748b" })
-      .editGraphics({ target: ids.labels, property: "fontSize", value: 11 })
-      .editGraphics({ target: ids.labels, property: "fontFamily", value: "sans-serif" })
-      .editGraphics({ target: ids.labels, property: "textAlign", value: "left" })
-      .editGraphics({ target: ids.labels, property: "textBaseline", value: "middle" })
-      .editGraphics({ target: ids.title, property: "x", value: x })
-      .editGraphics({ target: ids.title, property: "y", value: y - 18 })
-      .editGraphics({ target: ids.title, property: "text", value: config.guides.legend.title })
-      .editGraphics({ target: ids.title, property: "fill", value: "#334155" })
-      .editGraphics({ target: ids.title, property: "fontSize", value: 12 })
-      .editGraphics({ target: ids.title, property: "fontFamily", value: "sans-serif" })
-      .editGraphics({ target: ids.title, property: "fontWeight", value: 600 })
-      .editGraphics({ target: ids.title, property: "textAlign", value: "left" })
-      .editGraphics({ target: ids.title, property: "textBaseline", value: "middle" });
+    let next = editProperties(this, ids.strip, {
+      x, y, width, height,
+      fill: createDensityLegendPaint(config.gradient.opacity),
+      stroke: "#cbd5e1",
+      strokeWidth: 1
+    });
+    next = editProperties(next, ids.labels, {
+      x: x + width + 10,
+      y: [y + height, y],
+      text: ["Low", "High"],
+      fill: "#64748b",
+      fontSize: 11,
+      fontFamily: "sans-serif",
+      textAlign: "left",
+      textBaseline: "middle"
+    });
+    return editProperties(next, ids.title, {
+      x,
+      y: y - 18,
+      text: config.guides.legend.title,
+      fill: "#334155",
+      fontSize: 12,
+      fontFamily: "sans-serif",
+      fontWeight: 600,
+      textAlign: "left",
+      textBaseline: "middle"
+    });
   }
 );
 
@@ -130,24 +136,29 @@ export const createGradientPlotLegend = action(
     }
     const ids = legendIds(args.owner);
     const densityScale = `${args.owner}Density`;
-    let next = this
-      .editSemantic({ property: `scale[${densityScale}].type`, value: "sequential" })
-      .editSemantic({
-        property: `scale[${densityScale}].domain`,
-        value: this.markConfigs[args.owner].gradientPlot.intensityDomain
-      })
-      .editSemantic({
-        property: `scale[${densityScale}].range`,
-        value: { palette: { name: "greys" } }
-      })
-      .editSemantic({ property: "guide.legend.color.scale", value: densityScale })
-      .editSemantic({
-        property: "guide.legend.color.title",
-        value: args.title ?? "Relative density"
-      })
-      .createGraphics({ id: ids.strip, type: "rect", parent: "canvas" })
-      .createGraphics({ id: ids.labels, type: "text", length: 2, parent: "canvas" })
-      .createGraphics({ id: ids.title, type: "text", parent: "canvas" });
+    const title = args.title ?? "Relative density";
+    let next = this;
+    for (const [property, value] of [
+      [`scale[${densityScale}].type`, "sequential"],
+      [`scale[${densityScale}].domain`, this.markConfigs[args.owner].gradientPlot.intensityDomain],
+      [`scale[${densityScale}].range`, { palette: { name: "greys" } }],
+      ["guide.legend.color.scale", densityScale],
+      ["guide.legend.color.title", title]
+    ]) {
+      next = next.editSemantic({ property, value });
+    }
+    for (const [id, type, length] of [
+      [ids.strip, "rect"],
+      [ids.labels, "text", 2],
+      [ids.title, "text"]
+    ]) {
+      next = next.createGraphics({
+        id,
+        type,
+        ...(length === undefined ? {} : { length }),
+        parent: "canvas"
+      });
+    }
     next = next._withMarkConfig(args.owner, {
       ...next.markConfigs[args.owner],
       gradientPlot: {
@@ -155,7 +166,7 @@ export const createGradientPlotLegend = action(
         guides: {
           ...next.markConfigs[args.owner].gradientPlot.guides,
           legend: {
-            title: args.title ?? "Relative density",
+            title,
             position: args.position ?? "right"
           }
         }