ggaction 0.0.2 → 0.0.4

package/src/materialization/bars/grouped.js

@@ -1,18 +1,32 @@
 import { deriveBarAggregates } from "../../grammar/bars/aggregate.js";
-import { mapContinuousScaleValues } from "../../grammar/scales.js";
+import {
+  mapContinuousScaleValues,
+  mapOrdinalPositionValues
+} from "../../grammar/scales/index.js";
 import { sameOrderedValues } from "../../core/validation.js";
 import {
   DEFAULT_BAR_STROKE,
   DEFAULT_BAR_STROKE_WIDTH
 } from "./resolve.js";
 import { resolveBarWidth } from "../../grammar/bars/geometry.js";
+import { DEFAULT_SERIES_BASELINE } from "../../grammar/seriesLayout.js";
+import {
+  BAR_ORIENTATIONS,
+  resolveBarChannels,
+  resolveBarOffsetChannel
+} from "../../grammar/bars/policy.js";
 
 export function deriveGroupedRectangles(required, resolved, widthConfig) {
   const { dataset, layer } = required;
   const xScale = resolved.resolvedScales[required.xEncoding.scale];
   const yScale = resolved.resolvedScales[required.yEncoding.scale];
+  const channels = resolveBarChannels(layer);
+  const vertical = channels.orientation === BAR_ORIENTATIONS.vertical;
+  const categoryScale = vertical ? xScale : yScale;
+  const measureScale = vertical ? yScale : xScale;
+  const offsetChannel = resolveBarOffsetChannel(layer);
   const colorEncoding = layer.encoding?.color;
-  const offsetEncoding = layer.encoding?.xOffset;
+  const offsetEncoding = layer.encoding?.[offsetChannel];
   const colorScale = resolved.resolvedScales[colorEncoding?.scale];
   const offsetScale = resolved.resolvedScales[offsetEncoding?.scale];
 
@@ -23,16 +37,18 @@ export function deriveGroupedRectangles(required, resolved, widthConfig) {
     offsetScale === undefined
   ) {
     throw new Error(
-      `Grouped bar mark "${layer.id}" requires matching color and xOffset scales.`
+      `Grouped bar mark "${layer.id}" requires matching color and ${offsetChannel} scales.`
     );
   }
   if (!sameOrderedValues(colorScale.domain, offsetScale.domain)) {
     throw new Error(
-      `Grouped bar mark "${layer.id}" requires matching color and xOffset domains.`
+      `Grouped bar mark "${layer.id}" requires matching color and ${offsetChannel} domains.`
     );
   }
 
-  const xIndex = new Map(xScale.domain.map((value, index) => [value, index]));
+  const categoryIndex = new Map(
+    categoryScale.domain.map((value, index) => [value, index])
+  );
   const offsetIndex = new Map(
     offsetScale.domain.map((value, index) => [value, index])
   );
@@ -43,18 +59,21 @@ export function deriveGroupedRectangles(required, resolved, widthConfig) {
     ])
   );
   const offsetMidpoint = (offsetScale.range[0] + offsetScale.range[1]) / 2;
-  const direction = Math.sign(xScale.step) || 1;
+  const categoryDirection = Math.sign(
+    categoryScale.step ?? categoryScale.range[1] - categoryScale.range[0]
+  ) || 1;
   const offsetDirection = Math.sign(offsetScale.step) || 1;
   const width = resolveBarWidth(widthConfig, offsetScale.bandwidth);
   const baseline = mapContinuousScaleValues(
-    [yScale.domain[0]],
-    yScale
+    [DEFAULT_SERIES_BASELINE],
+    measureScale
   )[0];
   const cells = [...deriveBarAggregates(dataset.values, layer).values].sort(
     (left, right) =>
-      (xScale.type === "time"
-        ? left.x - right.x
-        : xIndex.get(left.x) - xIndex.get(right.x)) ||
+      (categoryScale.type === "time"
+        ? left[channels.category] - right[channels.category]
+        : categoryIndex.get(left[channels.category]) -
+          categoryIndex.get(right[channels.category])) ||
       offsetIndex.get(left.color) - offsetIndex.get(right.color)
   );
   const existing = resolved.graphicSpec.objects[layer.id].items;
@@ -62,41 +81,60 @@ export function deriveGroupedRectangles(required, resolved, widthConfig) {
   const appearance = config.barAppearance ?? {};
 
   return cells.map((cell, index) => {
-    const category = xIndex.get(cell.x);
+    const categoryValue = cell[channels.category];
+    const category = categoryIndex.get(categoryValue);
     const offset = offsetIndex.get(cell.color);
-    if ((xScale.type !== "time" && category === undefined) || offset === undefined) {
+    if ((categoryScale.type !== "time" && category === undefined) || offset === undefined) {
       throw new Error("Grouped bar value is outside a resolved ordinal domain.");
     }
 
-    const temporal = xScale.type === "time";
-    const categoryStart = temporal
-      ? mapContinuousScaleValues(
-          [cell.x],
-          xScale
-        )[0] - xScale.bandwidth / 2
-      : (xScale.start ?? xScale.range[0]) + category * xScale.step;
     const offsetCenter = offsetScale.start + offset * offsetScale.step +
       offsetDirection * offsetScale.bandwidth / 2;
-    const center = temporal
-      ? categoryStart + offsetCenter
-      : xScale.step > 0 && offsetScale.step > 0
-      ? categoryStart + offsetCenter
-      : categoryStart + xScale.step / 2 +
-        direction * (offsetCenter - offsetMidpoint);
-    const x = temporal || (xScale.step > 0 && offsetScale.step > 0)
-      ? categoryStart + offsetScale.start + offset * offsetScale.step +
-        (offsetScale.bandwidth - width) / 2
-      : center - width / 2;
-    const valueY = mapContinuousScaleValues(
-      [cell.y],
-      yScale
+    const valuePosition = mapContinuousScaleValues(
+      [cell[channels.measure]],
+      measureScale
     )[0];
+    let geometry;
+    if (vertical) {
+      // Preserve the established vertical arithmetic order exactly. Primitive
+      // baselines intentionally compare concrete floating-point coordinates.
+      const temporal = xScale.type === "time";
+      const categoryStart = temporal
+        ? mapContinuousScaleValues([cell.x], xScale)[0] - xScale.bandwidth / 2
+        : (xScale.start ?? xScale.range[0]) + category * xScale.step;
+      const center = temporal
+        ? categoryStart + offsetCenter
+        : xScale.step > 0 && offsetScale.step > 0
+        ? categoryStart + offsetCenter
+        : categoryStart + xScale.step / 2 +
+          categoryDirection * (offsetCenter - offsetMidpoint);
+      const x = temporal || (xScale.step > 0 && offsetScale.step > 0)
+        ? categoryStart + offsetScale.start + offset * offsetScale.step +
+          (offsetScale.bandwidth - width) / 2
+        : center - width / 2;
+      geometry = {
+        x,
+        y: Math.min(valuePosition, baseline),
+        width,
+        height: Math.abs(baseline - valuePosition)
+      };
+    } else {
+      const categoryCenter = mapOrdinalPositionValues(
+        [categoryValue],
+        categoryScale
+      )[0];
+      const center = categoryCenter + categoryDirection *
+        (offsetCenter - offsetMidpoint);
+      geometry = {
+        x: Math.min(valuePosition, baseline),
+        y: center - width / 2,
+        width: Math.abs(baseline - valuePosition),
+        height: width
+      };
+    }
 
     return {
-      x,
-      y: Math.min(valueY, baseline),
-      width,
-      height: Math.abs(baseline - valueY),
+      ...geometry,
       fill: colors.get(cell.color),
       stroke: appearance.stroke === false
         ? "transparent"

package/src/materialization/bars/histogram.js

@@ -8,7 +8,7 @@ import {
   mapOrdinalValues,
   readNominalField,
   readQuantitativeField
-} from "../../grammar/scales.js";
+} from "../../grammar/scales/index.js";
 import { resolveBarColorLayout } from "../../grammar/bars/policy.js";
 import { layoutSeriesPartition } from "../../grammar/seriesLayout.js";
 import {

package/src/materialization/bars/ranged.js

@@ -1,4 +1,4 @@
-import { mapContinuousScaleValues, mapOrdinalPositionValues, mapOrdinalValues } from "../../grammar/scales.js";
+import { mapContinuousScaleValues, mapOrdinalPositionValues, mapOrdinalValues } from "../../grammar/scales/index.js";
 import { resolveBarWidth } from "../../grammar/bars/geometry.js";
 import { DEFAULT_BAR_FILL, DEFAULT_BAR_STROKE, DEFAULT_BAR_STROKE_WIDTH } from "./resolve.js";
 

package/src/materialization/composition.js

@@ -0,0 +1,152 @@
+import { freezeOwned } from "../core/immutable.js";
+import {
+  requireSingleOrderedGraphicByType
+} from "../grammar/schemas/graphicTree.js";
+import {
+  resolveCompositionLayout,
+  resolveCompositionSnapshotPlacement
+} from "../layout/composition.js";
+import { namespaceGraphicSnapshot } from "./compositionSnapshot.js";
+
+const ZERO_MARGIN = freezeOwned({ top: 0, right: 0, bottom: 0, left: 0 });
+
+export function requireChildCanvas(program, id) {
+  const { object } = requireSingleOrderedGraphicByType(program.graphicSpec, "canvas");
+  const { width, height } = object.properties ?? {};
+  if (!Number.isFinite(width) || width <= 0 || !Number.isFinite(height) || height <= 0) {
+    throw new Error(`Composition child "${id}" requires a complete positive Canvas size.`);
+  }
+  return object;
+}
+
+export function compositionChildDescriptor(id, program) {
+  const canvas = requireChildCanvas(program, id);
+  const size = program.materializationConfigs.canvas?.size ?? {
+    width: "explicit",
+    height: "explicit"
+  };
+  return {
+    id,
+    width: canvas.properties.width,
+    height: canvas.properties.height,
+    widthMode: size.width,
+    heightMode: size.height
+  };
+}
+
+export function resolveCompositionProgramLayout(program) {
+  program._assertCompositionProgram("resolveCompositionProgramLayout");
+  const spec = program.compositionSpec;
+  return resolveCompositionLayout({
+    direction: spec.direction,
+    children: spec.children.map(id => compositionChildDescriptor(id, program.children[id])),
+    gap: spec.gap,
+    align: spec.align,
+    padding: spec.padding
+  });
+}
+
+function resizeChildForSnapshot(program, placement) {
+  const canvas = requireSingleOrderedGraphicByType(program.graphicSpec, "canvas");
+  const widthChanged = canvas.object.properties.width !== placement.width;
+  const heightChanged = canvas.object.properties.height !== placement.height;
+  if (!widthChanged && !heightChanged) return program;
+
+  if (program.compositionSpec !== undefined) {
+    return program;
+  }
+  if (typeof program.editCanvas !== "function") {
+    throw new Error("Automatic composition sizing requires child editCanvas support.");
+  }
+  return program.editCanvas({
+    ...(widthChanged ? { width: placement.width } : {}),
+    ...(heightChanged ? { height: placement.height } : {})
+  });
+}
+
+function resolveSnapshotPlacement(program, placement, layout) {
+  if (program.compositionSpec === undefined) return placement;
+  const canvas = requireSingleOrderedGraphicByType(program.graphicSpec, "canvas");
+  return resolveCompositionSnapshotPlacement({
+    direction: layout.direction,
+    align: layout.align,
+    placement,
+    width: canvas.object.properties.width,
+    height: canvas.object.properties.height
+  });
+}
+
+function itemDefinitions(object) {
+  return object.items.map(item => ({
+    type: item.type ?? object.type,
+    properties: item.properties
+  }));
+}
+
+export function attachSnapshotObject(program, snapshot, id, parent) {
+  const object = snapshot.objects[id];
+  let next = program.createGraphics({
+    id,
+    type: object.type,
+    parent,
+    ...(object.items !== undefined && object.type !== "collection"
+      ? { length: object.items.length }
+      : {})
+  });
+  for (const [property, value] of Object.entries(object.properties ?? {})) {
+    next = next.editGraphics({ target: id, property, value });
+  }
+  if (object.items !== undefined) {
+    next = next.editGraphics({
+      target: id,
+      property: "items",
+      value: itemDefinitions(object)
+    });
+  }
+  for (const childId of object.children ?? []) {
+    next = attachSnapshotObject(next, snapshot, childId, id);
+  }
+  return next;
+}
+
+export function clearCompositionChildren(program) {
+  const canvas = program.graphicSpec.objects.canvas;
+  let next = program;
+  for (const id of canvas?.children ?? []) {
+    next = next.editGraphics({ target: id, remove: true });
+  }
+  return next;
+}
+
+export function materializeCompositionGraphics(program) {
+  program._assertCompositionProgram("materializeCompositionGraphics");
+  const layout = resolveCompositionProgramLayout(program);
+  let next = clearCompositionChildren(program);
+  if (next.graphicSpec.objects.canvas === undefined) {
+    next = next.createGraphics({ id: "canvas", type: "canvas" });
+  }
+  for (const [property, value] of Object.entries({
+    width: layout.width,
+    height: layout.height,
+    background: "white"
+  })) {
+    next = next.editGraphics({ target: "canvas", property, value });
+  }
+
+  for (const placement of layout.children) {
+    const source = program.children[placement.id];
+    const child = resizeChildForSnapshot(source, placement);
+    const snapshotPlacement = resolveSnapshotPlacement(child, placement, layout);
+    const snapshot = namespaceGraphicSnapshot(child.graphicSpec, {
+      namespace: `${program.compositionSpec.id}-${placement.id}`,
+      x: snapshotPlacement.x,
+      y: snapshotPlacement.y
+    });
+    next = attachSnapshotObject(next, snapshot, snapshot.order[0], "canvas");
+  }
+
+  return next._withCanvasConfig({
+    margin: ZERO_MARGIN,
+    size: { width: "auto", height: "auto" }
+  });
+}

package/src/materialization/compositionSnapshot.js

@@ -0,0 +1,114 @@
+import { cloneAndFreeze, freezeOwned, isPlainObject } from "../core/immutable.js";
+import {
+  requireSingleOrderedGraphicByType,
+  walkGraphicTreeEvents
+} from "../grammar/schemas/graphicTree.js";
+
+function validateNamespace(namespace) {
+  if (typeof namespace !== "string" || namespace.length === 0) {
+    throw new TypeError("Graphic snapshot namespace must be a non-empty string.");
+  }
+  return namespace;
+}
+
+function validatePlacement(value, property) {
+  if (!Number.isFinite(value)) {
+    throw new TypeError(`Graphic snapshot ${property} must be a finite number.`);
+  }
+  return value;
+}
+
+function validateCanvas(canvas, id) {
+  const { width, height } = canvas.properties ?? {};
+  if (!Number.isFinite(width) || width <= 0) {
+    throw new RangeError(`Child Canvas "${id}" width must be a positive finite number.`);
+  }
+  if (!Number.isFinite(height) || height <= 0) {
+    throw new RangeError(`Child Canvas "${id}" height must be a positive finite number.`);
+  }
+}
+
+export function namespaceGraphicId(namespace, id) {
+  const encode = value => Array.from(value, character =>
+    character.codePointAt(0).toString(16).padStart(6, "0")
+  ).join("");
+  return `g${encode(namespace)}_${encode(id)}`;
+}
+
+function rewriteItem(item, namespace) {
+  if (!isPlainObject(item) || typeof item.id !== "string" || item.id.length === 0) {
+    throw new TypeError("Graphic snapshot items require non-empty string ids.");
+  }
+  return freezeOwned({
+    ...cloneAndFreeze(item),
+    id: namespaceGraphicId(namespace, item.id)
+  });
+}
+
+function rewriteObject(object, namespace, rootCanvasId, placement, extraRoots) {
+  const children = object.children ?? [];
+  const rewritten = {
+    ...cloneAndFreeze(object),
+    ...(object.items === undefined
+      ? {}
+      : { items: freezeOwned(object.items.map(item => rewriteItem(item, namespace))) }),
+    ...(children.length === 0 && rootCanvasId === undefined
+      ? {}
+      : {
+          children: freezeOwned([
+            ...children.map(id => namespaceGraphicId(namespace, id)),
+            ...(rootCanvasId === undefined
+              ? []
+                : extraRoots.map(id => namespaceGraphicId(namespace, id)))
+          ])
+        })
+  };
+  if (rootCanvasId !== undefined) {
+    rewritten.properties = freezeOwned({
+      ...rewritten.properties,
+      x: placement.x,
+      y: placement.y
+    });
+  }
+  return freezeOwned(rewritten);
+}
+
+export function namespaceGraphicSnapshot(
+  graphicSpec,
+  { namespace, x = 0, y = 0 } = {}
+) {
+  const resolvedNamespace = validateNamespace(namespace);
+  const placement = {
+    x: validatePlacement(x, "x"),
+    y: validatePlacement(y, "y")
+  };
+  if (
+    !isPlainObject(graphicSpec) ||
+    !isPlainObject(graphicSpec.objects) ||
+    !Array.isArray(graphicSpec.order)
+  ) {
+    throw new TypeError("Graphic snapshot requires objects and order.");
+  }
+  walkGraphicTreeEvents(graphicSpec, {});
+  const { id: canvasId, object: canvas } =
+    requireSingleOrderedGraphicByType(graphicSpec, "canvas");
+  validateCanvas(canvas, canvasId);
+  const extraRoots = graphicSpec.order.filter(id => id !== canvasId);
+  const objects = Object.fromEntries(Object.entries(graphicSpec.objects).map(
+    ([id, object]) => [
+      namespaceGraphicId(resolvedNamespace, id),
+      rewriteObject(
+        object,
+        resolvedNamespace,
+        id === canvasId ? canvasId : undefined,
+        placement,
+        id === canvasId ? extraRoots : []
+      )
+    ]
+  ));
+  const rootId = namespaceGraphicId(resolvedNamespace, canvasId);
+  return freezeOwned({
+    objects: freezeOwned(objects),
+    order: freezeOwned([rootId])
+  });
+}

package/src/materialization/density.js

@@ -1,4 +1,4 @@
-import { getMarkMaterializationStep } from "./marks.js";
+import { getMarkMaterializationStep } from "./marks/index.js";
 import { requireLayer } from "../selectors/layers.js";
 import { buildMaterializationPlan } from "./planner.js";
 

package/src/materialization/dependencies.js

@@ -1,33 +1,19 @@
-import { getMarkMaterializationStep } from "./marks.js";
+import {
+  canDeferScaleConsumerApplication,
+  getExistingMarkRematerializationStep,
+  getMarkMaterializationStep,
+  getSourceDependentMarkSteps
+} from "./marks/index.js";
 import { requireLayer } from "../selectors/layers.js";
 import {
   applyMaterializationPlan,
   buildMaterializationPlan
 } from "./planner.js";
+import { hasMaterializedLegend } from "./legends.js";
 import {
-  hasMaterializedLegend,
-  materializedLegendUsesScale
-} from "./legends.js";
-
-function usesPositionalScale(program, id) {
-  return program.semanticSpec.layers.some(layer =>
-    ["x", "y", "x2", "y2", "xOffset"].some(
-      channel => layer.encoding?.[channel]?.scale === id
-    )
-  );
-}
-
-function needsCanvasScaleRematerialization(program, scale) {
-  return (
-    (scale.range === "auto" ||
-      program.semanticSpec.guides.axis?.x?.scale === scale.id ||
-      program.semanticSpec.guides.axis?.y?.scale === scale.id ||
-      program.semanticSpec.guides.grid?.horizontal?.scale === scale.id ||
-      program.semanticSpec.guides.grid?.vertical?.scale === scale.id) &&
-    program.resolvedScales[scale.id] !== undefined &&
-    usesPositionalScale(program, scale.id)
-  );
-}
+  needsCanvasScaleRematerialization,
+  planScaleGuideRematerialization
+} from "./scaleGuideDependencies.js";
 
 function hasTitle(program) {
   return (
@@ -37,20 +23,36 @@ function hasTitle(program) {
 }
 
 export function planCanvasRematerialization(program) {
+  const marks = [];
+  for (const layer of program.semanticSpec.layers) {
+    const step = getMarkMaterializationStep(program, layer);
+    if (step !== undefined) marks.push(step);
+  }
+  const deferredMarkIds = new Set(
+    marks
+      .map(step => step.args.id)
+  );
   const scales = [];
   for (const scale of program.semanticSpec.scales) {
     if (needsCanvasScaleRematerialization(program, scale)) {
+      const deferredConsumers = program.semanticSpec.layers.filter(layer =>
+        canDeferScaleConsumerApplication(layer) &&
+        Object.values(layer.encoding ?? {}).some(
+          encoding => encoding?.scale === scale.id
+        )
+      );
+      const canDeferMarks = deferredConsumers.length === 0 ||
+        deferredConsumers.every(layer => deferredMarkIds.has(layer.id));
       scales.push({
         op: "rematerializeScale",
-        args: { id: scale.id, guides: false }
+        args: {
+          id: scale.id,
+          guides: false,
+          ...(canDeferMarks ? { marks: false } : {})
+        }
       });
     }
   }
-  const marks = [];
-  for (const layer of program.semanticSpec.layers) {
-    const step = getMarkMaterializationStep(program, layer);
-    if (step !== undefined) marks.push(step);
-  }
   const guides = program.semanticSpec.scales.flatMap(scale =>
     needsCanvasScaleRematerialization(program, scale)
       ? planScaleGuideRematerialization(program, scale.id)
@@ -63,42 +65,6 @@ export function planCanvasRematerialization(program) {
   return buildMaterializationPlan({ scales, marks, guides, layout });
 }
 
-export function planScaleGuideRematerialization(program, id) {
-  const guides = [];
-  const objects = program.graphicSpec?.objects ?? {};
-  const guideConfigs = program.guideConfigs ?? {};
-  if (
-    objects.xAxisLine &&
-    program.semanticSpec.guides.axis?.x?.scale === id
-  ) {
-    guides.push({ op: "editXAxisLine" });
-  }
-  if (
-    objects.yAxisLine &&
-    program.semanticSpec.guides.axis?.y?.scale === id
-  ) {
-    guides.push({ op: "editYAxisLine" });
-  }
-  for (const channel of ["x", "y"]) {
-    for (const component of ["ticks", "labels", "title"]) {
-      if (guideConfigs.axis?.[channel]?.[component]?.scale === id) {
-        const suffix = component[0].toUpperCase() + component.slice(1);
-        guides.push({ op: `edit${channel.toUpperCase()}Axis${suffix}` });
-      }
-    }
-  }
-  if (guideConfigs.grid?.horizontal?.scale === id) {
-    guides.push({ op: "rematerializeHorizontalGrid" });
-  }
-  if (guideConfigs.grid?.vertical?.scale === id) {
-    guides.push({ op: "rematerializeVerticalGrid" });
-  }
-  if (materializedLegendUsesScale(program, id)) {
-    guides.push({ op: "rematerializeLegend" });
-  }
-  return buildMaterializationPlan({ guides });
-}
-
 export function planLayerDataRematerialization(program, id) {
   const layer = requireLayer(program, id);
   const scaleIds = [...new Set(
@@ -106,22 +72,29 @@ export function planLayerDataRematerialization(program, id) {
       .map(encoding => encoding?.scale)
       .filter(scale => scale !== undefined)
   )];
+  const markStep = getMarkMaterializationStep(program, layer);
   const scales = scaleIds.map(scale => ({
       op: "rematerializeScale",
-      args: { id: scale, guides: false }
+      args: {
+        id: scale,
+        guides: false,
+        ...(markStep === undefined ? {} : { marks: false })
+      }
     }));
-  const markStep = getMarkMaterializationStep(program, layer);
-  const marks = markStep === undefined ? [] : [markStep];
+  const marks = [
+    ...(markStep === undefined ? [] : [markStep]),
+    ...getSourceDependentMarkSteps(program, id)
+  ];
   if (scales.length > 0 || marks.length > 0) {
     const guides = scaleIds.flatMap(scale =>
       planScaleGuideRematerialization(program, scale)
     );
     return buildMaterializationPlan({ scales, marks, guides });
   }
-  return buildMaterializationPlan({ marks: layer.mark?.type === "point" &&
-    program.graphicSpec.objects[layer.id] !== undefined
-    ? [{ op: "rematerializePointMark", args: { id: layer.id } }]
-    : [] });
+  const existingStep = getExistingMarkRematerializationStep(program, layer);
+  return buildMaterializationPlan({
+    marks: existingStep === undefined ? [] : [existingStep]
+  });
 }
 
 export function applyLayerDataRematerialization(program, id) {
@@ -132,3 +105,4 @@ export function applyLayerDataRematerialization(program, id) {
 }
 
 export { applyMaterializationPlan } from "./planner.js";
+export { planScaleGuideRematerialization };

package/src/materialization/encodings.js

@@ -1,7 +1,10 @@
 import { hasMaterializedLegend } from "./legends.js";
 import { requireLayer } from "../selectors/layers.js";
-import { getMarkRematerializationStep } from "./marks.js";
+import {
+  getEncodingMaterializationStages
+} from "./marks/index.js";
 import { buildMaterializationPlan } from "./planner.js";
+import { getSourceDependentMarkSteps } from "./marks/index.js";
 
 export function planEncodingRematerialization(program, {
   target,
@@ -14,33 +17,16 @@ export function planEncodingRematerialization(program, {
     `Unknown encoding materialization target "${target}"`
   );
 
-  const scales = [];
-  if (layer.mark?.type === "point" && scale !== undefined) {
-    scales.push({
-      op: "rematerializeScale",
-      args: { id: scale, guides: false }
-    });
-  }
-
-  const marks = [];
-  if (
-    layer.mark?.type === "area" &&
-    channel === "color" &&
-    scale !== undefined
-  ) {
-    for (const candidate of program.semanticSpec.layers) {
-      if (
-        candidate.mark?.type === "area" &&
-        candidate.encoding?.color?.scale === scale
-      ) {
-        const step = getMarkRematerializationStep(candidate);
-        if (step !== undefined) marks.push(step);
-      }
-    }
-  } else {
-    const step = getMarkRematerializationStep(layer);
-    if (step !== undefined) marks.push(step);
-  }
+  const { scales, marks: directMarks } = getEncodingMaterializationStages(
+    program,
+    layer,
+    channel,
+    scale
+  );
+  const marks = [
+    ...directMarks,
+    ...getSourceDependentMarkSteps(program, target)
+  ];
 
   const guides = [];
   if (hasMaterializedLegend(program)) {