ggaction 0.0.11 → 0.0.13

package/src/layout/legendLane.js

@@ -4,6 +4,28 @@ export const SIDE_LEGEND_SYMBOL_CENTER = 16;
 export const SIDE_LEGEND_LABEL_START = 44;
 export const HORIZONTAL_LEGEND_TITLE_ELEMENT_GAP = 12;
 
+export function isHorizontalEdgeLegend(config) {
+  return config !== undefined &&
+    ["top", "bottom"].includes(config.position) &&
+    config.layout !== "legacy-bottom";
+}
+
+export function resolveSingleHorizontalLegendPlacement({ plot, canvas, config, bounds }) {
+  if (!isHorizontalEdgeLegend(config)) {
+    throw new Error("Single legend placement requires a horizontal edge layout.");
+  }
+  const dx = config.align === "left" ? plot.x - bounds.left
+    : config.align === "right" ? plot.x + plot.width - bounds.right
+      : plot.x + plot.width / 2 - midpoint(bounds.left, bounds.right);
+  const dy = config.position === "top" ? plot.y - config.offset - bounds.bottom
+    : plot.y + plot.height + config.offset - bounds.top;
+  const occupied = translateBounds(bounds, dx, dy);
+  if (occupied.left < 0 || occupied.right > canvas.width || occupied.top < 0 || occupied.bottom > canvas.height) {
+    throw new Error(`Legend layout requires more ${config.position}-margin or Canvas space.`);
+  }
+  return { dx, dy, occupied };
+}
+
 function midpoint(start, end) {
   const sum = start + end;
   const result = Number.isFinite(sum) ? sum / 2 : start / 2 + end / 2;
@@ -25,24 +47,25 @@ function decoration(border) {
     : border.padding + border.lineWidth / 2;
 }
 
-function horizontalExtent(blocks) {
+function horizontalExtent(blocks, labelStart) {
   let left = 0;
   let right = 0;
   for (const block of blocks) {
-    if (block.title !== undefined) right = Math.max(right, block.title.width);
+    const inset = block.inset ?? 0;
+    if (block.title !== undefined) right = Math.max(right, block.title.width + inset);
     left = Math.min(left,
-      SIDE_LEGEND_SYMBOL_CENTER + block.symbol.left - block.symbol.centerX
+      SIDE_LEGEND_SYMBOL_CENTER + block.symbol.left - block.symbol.centerX - inset
     );
     right = Math.max(
       right,
-      SIDE_LEGEND_SYMBOL_CENTER + block.symbol.right - block.symbol.centerX,
-      SIDE_LEGEND_LABEL_START + block.labels.width
+      SIDE_LEGEND_SYMBOL_CENTER + block.symbol.right - block.symbol.centerX + inset,
+      labelStart + block.labels.width + inset
     );
   }
   return { left, right };
 }
 
-function placeBlock(block, cursor) {
+function placeBlock(block, cursor, labelStart) {
   let dy;
   if (block.title === undefined) {
     dy = cursor - block.bounds.top;
@@ -65,7 +88,7 @@ function placeBlock(block, cursor) {
       ? undefined
       : -block.title.x,
     symbolDx: SIDE_LEGEND_SYMBOL_CENTER - block.symbol.centerX,
-    labelDx: SIDE_LEGEND_LABEL_START - block.labels.x,
+    labelDx: labelStart - block.labels.x,
     bounds
   };
 }
@@ -87,7 +110,10 @@ export function resolveSideLegendLane({
   }
   const blocks = groups.flatMap(group => group.blocks);
   if (blocks.length < 2) return undefined;
-  const laneExtent = horizontalExtent(blocks);
+  const labelStart = Math.max(SIDE_LEGEND_LABEL_START, ...blocks.map(
+    block => SIDE_LEGEND_SYMBOL_CENTER + Math.abs(block.labels.x - block.symbol.centerX)
+  ));
+  const laneExtent = horizontalExtent(blocks, labelStart);
   const offset = blocks.reduce(
     (maximum, block) => Math.max(maximum, block.offset),
     -Infinity
@@ -96,7 +122,7 @@ export function resolveSideLegendLane({
     ? plot.x + plot.width + offset
     : plot.x - offset - laneExtent.right;
   const symbolCenterX = titleStartX + SIDE_LEGEND_SYMBOL_CENTER;
-  const labelStartX = titleStartX + SIDE_LEGEND_LABEL_START;
+  const labelStartX = titleStartX + labelStart;
   const first = blocks[0];
   let cursor = first.title === undefined
     ? plot.y + 12
@@ -110,7 +136,7 @@ export function resolveSideLegendLane({
     if (occupiedGroups.length > 0) cursor += inset;
     const groupPlacements = [];
     for (const block of group.blocks) {
-      const placement = placeBlock(block, cursor);
+      const placement = placeBlock(block, cursor, labelStart);
       groupPlacements.push(placement);
       placements.push({
         ...placement,
@@ -123,7 +149,7 @@ export function resolveSideLegendLane({
       cursor = placement.bounds.bottom + SIDE_LEGEND_BLOCK_GAP;
     }
     const vertical = unionBounds(groupPlacements.map(item => item.bounds));
-    const groupExtent = horizontalExtent(group.blocks);
+    const groupExtent = horizontalExtent(group.blocks, labelStart);
     const foreground = {
       left: titleStartX + groupExtent.left,
       right: titleStartX + groupExtent.right,
@@ -232,6 +258,13 @@ function normalizeHorizontalRow(entries) {
       )
     : commonTitleY + titleDescent + HORIZONTAL_LEGEND_TITLE_ELEMENT_GAP;
   return entries.map(({ group, dx }) => {
+    if (group.atomic) {
+      const contentDy = elementAnchor - group.element.top;
+      const foreground = translateBounds(group.content, dx, contentDy);
+      return { id: group.id, dx, titleDy: contentDy, contentDy, foreground,
+        occupied: expandBounds(foreground, group.inset), padding: group.padding,
+        backgroundId: group.backgroundId };
+    }
     const contentDy = commonTitleY === undefined
       ? elementAnchor - midpoint(
           group.element.top,
@@ -350,3 +383,59 @@ export function resolveHorizontalLegendLane({
     rowCount: packed.length
   };
 }
+
+// Compose independently measured content blocks before the outer edge lane
+// treats the whole group as one indivisible item.
+export function resolveHorizontalLegendGroup({ edge, plot, canvas, groups,
+  align, offset, border, backgroundId, collisionBounds = [] }) {
+  const inset = decoration(border);
+  const innerPlot = { ...plot, x: plot.x + inset, width: plot.width - inset * 2 };
+  const packed = packHorizontalRows(groups, innerPlot);
+  const rows = packed.map(normalizeHorizontalRow);
+  let cursor = 0;
+  const placements = [];
+  for (const row of rows) {
+    const bounds = unionBounds(row.map(item => item.occupied));
+    const dy = edge === "top" ? cursor - bounds.bottom : cursor - bounds.top;
+    const translated = row.map(item => translateHorizontalPlacement(item, dy));
+    placements.push(...translated);
+    const occupied = unionBounds(translated.map(item => item.occupied));
+    cursor = edge === "top" ? occupied.top - HORIZONTAL_LEGEND_BLOCK_GAP
+      : occupied.bottom + HORIZONTAL_LEGEND_BLOCK_GAP;
+  }
+  const foreground = unionBounds(placements.map(item => item.occupied));
+  const occupied = expandBounds(foreground, inset);
+  const width = occupied.right - occupied.left;
+  const x = align === "left" ? plot.x : align === "right" ? plot.x + plot.width - width
+    : plot.x + (plot.width - width) / 2;
+  const dx = x - occupied.left;
+  const dy = edge === "top" ? plot.y - offset - occupied.bottom
+    : plot.y + plot.height + offset - occupied.top;
+  const finalBounds = translateBounds(occupied, dx, dy);
+  if (finalBounds.left < 0 || finalBounds.right > canvas.width ||
+    finalBounds.top < 0 || finalBounds.bottom > canvas.height) {
+    throw new Error(`Combined legend requires more ${edge}-margin or Canvas space.`);
+  }
+  if (collisionBounds.some(bounds => overlap(finalBounds, bounds))) {
+    throw new Error(`Combined ${edge} legend and ${edge === "top" ? "chart titles" : "x-axis guides"} require more margin space.`);
+  }
+  return {
+    placements: placements.map(item => ({ ...item, dx: item.dx + dx,
+      titleDy: item.titleDy + dy, contentDy: item.contentDy + dy,
+      ...(item.backgroundId === undefined ? {} : { background: {
+        id: item.backgroundId,
+        x: item.foreground.left + dx - item.padding,
+        y: item.foreground.top + dy - item.padding,
+        width: item.foreground.right - item.foreground.left + item.padding * 2,
+        height: item.foreground.bottom - item.foreground.top + item.padding * 2
+      } }) })),
+    occupied: finalBounds,
+    background: backgroundId === undefined ? undefined : {
+      id: backgroundId,
+      x: foreground.left + dx - border.padding,
+      y: foreground.top + dy - border.padding,
+      width: foreground.right - foreground.left + border.padding * 2,
+      height: foreground.bottom - foreground.top + border.padding * 2
+    }
+  };
+}

package/src/materialization/bars/aggregate.js

@@ -1,161 +1,47 @@
-import { deriveBarAggregates } from "../../grammar/bars/aggregate.js";
-import {
-  BAR_ORIENTATIONS,
-  resolveBarChannels,
-  resolveBarColorLayout
-} from "../../grammar/bars/policy.js";
-import {
-  DEFAULT_SERIES_BASELINE,
-  layoutSeriesPartition
-} from "../../grammar/seriesLayout.js";
-import {
-  isDiscretePositionScaleType,
-  mapContinuousScaleValues,
-  mapOrdinalPositionValues
-} from "../../grammar/scales/index.js";
+import { deriveSeriesBarCells } from "../../grammar/bars/aggregate.js";
+import { resolveBarChannels, resolveBarColorLayout, resolveBarOffsetChannel } from "../../grammar/bars/policy.js";
+import { mapContinuousScaleValues, mapOrdinalPositionValues } from "../../grammar/scales/index.js";
 import { mapScaleConsumerValues } from "../scales/map.js";
-import {
-  DEFAULT_BAR_FILL,
-  resolveBarAppearance
-} from "./resolve.js";
-import { deriveGroupedRectangles } from "./grouped.js";
+import { DEFAULT_BAR_FILL, resolveBarAppearance } from "./resolve.js";
 import { resolveBarWidth } from "../../grammar/bars/geometry.js";
+import { finiteMidpoint } from "../../grammar/numeric.js";
 
 export function deriveAggregateRectangles(required, resolved, widthConfig) {
   const { dataset, layer } = required;
-  const layout = resolveBarColorLayout(layer);
-  if (layout === "group") {
-    return deriveGroupedRectangles(required, resolved, widthConfig);
-  }
-
-  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 colorEncoding = layer.encoding?.color;
-  const colorScale = resolved.resolvedScales[colorEncoding?.scale];
-  if (colorEncoding !== undefined && colorScale === undefined) {
-    throw new Error(
-      `Bar mark "${layer.id}" requires a resolved color scale.`
-    );
-  }
-
-  const seriesDomain = colorScale?.domain ?? [undefined];
-  const seriesIndex = new Map(
-    seriesDomain.map((value, index) => [value, index])
-  );
-  const colors = new Map(seriesDomain.map((value, index) => [
-    value,
-    colorScale?.range[index % colorScale.range.length] ?? DEFAULT_BAR_FILL
-  ]));
-  const cells = deriveBarAggregates(dataset.values, layer).values;
-  const discreteCategory = categoryScale.type === "ordinal" ||
-    isDiscretePositionScaleType(categoryScale.type);
-  const categoryDomain = discreteCategory
-    ? categoryScale.domain
-    : [...new Set(cells.map(cell => cell[channels.category]))]
-        .sort((left, right) => left - right);
-  const categoryIndex = new Map(
-    categoryDomain.map((value, index) => [value, index])
-  );
-  const cellMap = new Map(cells.map(cell => [
-    JSON.stringify([cell[channels.category], cell.color]),
-    cell
-  ]));
-  const thickness = resolveBarWidth(
-    widthConfig,
-    Math.abs(categoryScale.bandwidth ?? categoryScale.step)
-  );
-  const baseline = DEFAULT_SERIES_BASELINE;
-  const continuousColor = colorEncoding?.fieldType === "quantitative";
-  if (continuousColor) {
-    const mappedColors = mapScaleConsumerValues(
-      cells.map(cell => cell.color), colorScale, "color"
-    );
-    const cellByCategory = new Map(
-      cells.map((cell, index) => [cell[channels.category], { cell, index }])
-    );
-    const existing = resolved.graphicSpec.objects[layer.id].items;
-    const config = resolved.markConfigs[layer.id] ?? {};
-    const appearance = config.barAppearance ?? {};
-    return categoryDomain.flatMap(categoryValue => {
-      const entry = cellByCategory.get(categoryValue);
-      if (entry === undefined) return [];
-      const { cell, index } = entry;
-      const categoryCenter = discreteCategory
-        ? mapOrdinalPositionValues([categoryValue], categoryScale)[0]
-        : mapContinuousScaleValues(
-            [categoryValue],
-            categoryScale
-          )[0];
-      const [segment] = layoutSeriesPartition(
-        [cell[channels.measure]],
-        layout,
-        { baseline }
-      );
-      if (segment === undefined) return [];
-      const [start, end] = mapContinuousScaleValues(
-        [segment.start, segment.end],
-        measureScale
-      );
-      return [{
-        x: vertical ? categoryCenter - thickness / 2 : Math.min(start, end),
-        y: vertical ? Math.min(start, end) : categoryCenter - thickness / 2,
-        width: vertical ? thickness : Math.abs(start - end),
-        height: vertical ? Math.abs(start - end) : thickness,
-        fill: mappedColors[index],
-        ...resolveBarAppearance(config, existing[index]?.properties)
-      }];
-    });
-  }
-  const segments = [];
-
-  for (const category of categoryDomain) {
-    const partition = seriesDomain.map(color =>
-      cellMap.get(JSON.stringify([category, color]))?.[channels.measure] ?? 0
-    );
-    for (const segment of layoutSeriesPartition(partition, layout, { baseline })) {
-      const color = seriesDomain[segment.index];
-      const cell = cellMap.get(JSON.stringify([category, color]));
-      if (cell === undefined) continue;
-      segments.push({ category, color, ...segment });
-    }
-  }
-
-  const existing = resolved.graphicSpec.objects[layer.id].items;
+  const channels = resolveBarChannels(layer), vertical = channels.orientation === "vertical";
+  const categoryScale = resolved.resolvedScales[layer.encoding[channels.category].scale];
+  const measureScale = resolved.resolvedScales[layer.encoding[channels.measure].scale];
+  const color = layer.encoding.color, colorScale = resolved.resolvedScales[color?.scale];
+  const grouped = resolveBarColorLayout(layer) === "group";
+  const offsetScale = resolved.resolvedScales[layer.encoding[resolveBarOffsetChannel(layer)]?.scale];
+  if (grouped && offsetScale === undefined) throw new Error("Grouped bar requires a resolved offset scale.");
+  const temporal = categoryScale.type === "time";
+  const segments = deriveSeriesBarCells(dataset.values, layer, temporal ? undefined : categoryScale.domain,
+    grouped ? offsetScale.domain : layer.encoding.group === undefined && color?.fieldType !== "quantitative" ? colorScale?.domain : undefined);
+  const fills = color === undefined ? undefined : mapScaleConsumerValues(segments.map(segment => segment.cell.color), colorScale, "color");
   const config = resolved.markConfigs[layer.id] ?? {};
-  const appearance = config.barAppearance ?? {};
-  return segments.map((segment, index) => {
-    const category = categoryIndex.get(segment.category);
-    const color = seriesIndex.get(segment.color);
-    if (category === undefined || color === undefined) {
-      throw new Error("Bar value is outside a resolved ordinal domain.");
+  const existing = resolved.graphicSpec.objects[layer.id].items;
+  const width = resolveBarWidth(widthConfig, grouped ? offsetScale.bandwidth : Math.abs(categoryScale.bandwidth ?? categoryScale.step));
+  const indices = new Map(categoryScale.domain.map((value, index) => [value, index]));
+  return segments.map(({ cell, start, end, seriesIndex }, index) => {
+    const categoryValue = cell[channels.category];
+    const categoryCenter = (temporal ? mapContinuousScaleValues : mapOrdinalPositionValues)([categoryValue], categoryScale)[0];
+    let position = !grouped && layer.encoding.group !== undefined && layer.encoding.group.inferredFrom === undefined && !temporal && categoryScale.step > 0
+      ? (categoryScale.start ?? categoryScale.range[0]) + indices.get(categoryValue) * categoryScale.step + categoryScale.bandwidth / 2 - width / 2
+      : categoryCenter - width / 2;
+    if (grouped) {
+      const direction = Math.sign(categoryScale.step ?? categoryScale.range[1] - categoryScale.range[0]) || 1;
+      const offsetCenter = offsetScale.start + seriesIndex * offsetScale.step + (Math.sign(offsetScale.step) || 1) * offsetScale.bandwidth / 2;
+      if (vertical && direction > 0 && offsetScale.step > 0) {
+        const categoryStart = temporal ? categoryCenter - categoryScale.bandwidth / 2
+          : (categoryScale.start ?? categoryScale.range[0]) + indices.get(categoryValue) * categoryScale.step;
+        position = categoryStart + offsetScale.start + seriesIndex * offsetScale.step + (offsetScale.bandwidth - width) / 2;
+      } else position = categoryCenter + direction * (offsetCenter - finiteMidpoint(...offsetScale.range)) - width / 2;
     }
-    const categoryCenter = discreteCategory
-      ? mapOrdinalPositionValues([segment.category], categoryScale)[0]
-      : mapContinuousScaleValues(
-          [segment.category],
-          categoryScale
-        )[0];
-    const [start, end] = mapContinuousScaleValues(
-      [segment.start, segment.end],
-      measureScale
-    );
-    return {
-      x: vertical
-        ? categoryCenter - thickness / 2
-        : Math.min(start, end),
-      y: vertical
-        ? Math.min(start, end)
-        : categoryCenter - thickness / 2,
-      width: vertical ? thickness : Math.abs(start - end),
-      height: vertical ? Math.abs(start - end) : thickness,
-      fill: segment.color === undefined
-        ? appearance.fill ?? config.fill ?? colors.get(segment.color)
-        : colors.get(segment.color),
-      ...resolveBarAppearance(config, existing[index]?.properties)
-    };
+    const [a, b] = mapContinuousScaleValues([start, end], measureScale);
+    return { x: vertical ? position : Math.min(a, b), y: vertical ? Math.min(a, b) : position,
+      width: vertical ? width : Math.abs(a - b), height: vertical ? Math.abs(a - b) : width,
+      fill: fills?.[index] ?? config.barAppearance?.fill ?? config.fill ?? DEFAULT_BAR_FILL,
+      ...resolveBarAppearance(config, existing[index]?.properties) };
   });
 }

package/src/materialization/bars/histogram.js

@@ -1,3 +1,4 @@
+import { readSeriesIdentity } from "../../grammar/pathSeries.js";
 import {
   countHistogramBins,
   findHistogramBinIndex,
@@ -34,6 +35,29 @@ export function deriveHistogramSegments({
   const colorEncoding = layer.encoding?.color;
   const layout = resolveBarColorLayout(layer);
 
+  if (layer.encoding?.group !== undefined) {
+    const identity = readSeriesIdentity(dataset.values, layer);
+    const cellRows = bins.boundaries.slice(0, -1).map(() => identity.domain.map(() => []));
+    const index = new Map(identity.domain.map((value, i) => [value, i]));
+    xValues.forEach((value, i) => { const bin = findHistogramBinIndex(value, bins.boundaries);
+      if (bin !== -1) cellRows[bin][index.get(identity.values[i])].push(dataset.values[i]); });
+    return cellRows.flatMap((cells, bin) => layoutSeriesPartition(cells.map(rows => rows.length), layout).map(segment => {
+      const members = cells[segment.index];
+      let color, colorValue;
+      if (colorEncoding !== undefined) {
+        const values = readNominalField(members, colorEncoding.field);
+        if (new Set(values).size !== 1) throw new Error("Histogram color requires one value within each bin/series cell.");
+        colorValue = values[0];
+        const scale = resolvedScales[colorEncoding.scale];
+        color = mapOrdinalValues([colorValue], scale.domain, scale.range)[0];
+      }
+      return { bin, start: bins.boundaries[bin], end: bins.boundaries[bin + 1],
+        category: segment.index, categoryCount: identity.domain.length,
+        stackStart: segment.start, stackEnd: segment.end, members,
+        ...(color === undefined ? {} : { color, colorValue }) };
+    }));
+  }
+
   if (colorEncoding?.scale === undefined) {
     return countHistogramBins(xValues, bins.boundaries).flatMap((count, bin) =>
       layoutSeriesPartition([count], layout).map(segment => ({

package/src/materialization/categorySlotOffset.js

@@ -0,0 +1,40 @@
+export function resolveCategorySlotOffset(program, layer) {
+  const policy = program.markConfigs[layer.id]?.categorySlotOffset;
+  if (policy === undefined) return undefined;
+  if (!["x", "y"].includes(policy.channel)) {
+    throw new Error(`Category slot offset for "${layer.id}" requires channel x or y.`);
+  }
+  if (!Number.isFinite(policy.band) || policy.band < -0.5 || policy.band > 0.5) {
+    throw new RangeError(`Category slot offset for "${layer.id}" must be within [-0.5, 0.5] band.`);
+  }
+  const encoding = layer.encoding?.[policy.channel];
+  if (!["nominal", "ordinal"].includes(encoding?.fieldType)) {
+    throw new Error(`Category slot offset for "${layer.id}" requires a categorical position.`);
+  }
+  const scale = program.resolvedScales[encoding.scale];
+  if (scale?.type !== "band" || !Number.isFinite(scale.bandwidth) || scale.bandwidth <= 0) {
+    throw new Error(`Category slot offset for "${layer.id}" requires a positive band scale.`);
+  }
+  return { channel: policy.channel, pixels: scale.bandwidth * policy.band };
+}
+
+export function offsetCategoryPositions(program, layer, positions) {
+  const offset = resolveCategorySlotOffset(program, layer);
+  if (offset === undefined || offset.pixels === 0) return positions;
+  const shift = values => values === undefined
+    ? undefined
+    : values.map(value => Number.isFinite(value) ? value + offset.pixels : value);
+  return {
+    ...positions,
+    [offset.channel]: shift(positions[offset.channel])
+  };
+}
+
+export function offsetCategoryRectangles(program, layer, rectangles) {
+  const offset = resolveCategorySlotOffset(program, layer);
+  if (offset === undefined || offset.pixels === 0) return rectangles;
+  return rectangles.map(rectangle => ({
+    ...rectangle,
+    [offset.channel]: rectangle[offset.channel] + offset.pixels
+  }));
+}

package/src/materialization/compositionSnapshot.js

@@ -32,7 +32,7 @@ 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)}`;
+  return `g${encode(namespace)}_${id}`;
 }
 
 function rewriteItem(item, namespace) {

package/src/materialization/dependencies.js

@@ -1,12 +1,16 @@
+import { withGuideLayoutTransaction } from "./guides/layout.js";
 import {
   canDeferScaleConsumerApplication,
+  getLayerScaleIds,
   getExistingMarkRematerializationStep,
   getMarkMaterializationStep,
-  getSourceDependentMarkSteps
+  getScaleConsumerMarkSteps,
+  getSourceDependentMarkSteps,
+  reusePlannedMarkScales
 } from "./marks/index.js";
-import { requireLayer } from "../selectors/layers.js";
+import { findLayer, requireLayer } from "../selectors/layers.js";
 import {
-  applyMaterializationPlan,
+  applyMaterializationPlan as executeMaterializationPlan,
   buildMaterializationPlan
 } from "./planner.js";
 import { hasMaterializedLegend } from "./legends.js";
@@ -16,13 +20,6 @@ import {
 } from "./scaleGuideDependencies.js";
 import { planLayoutRematerialization } from "./layout.js";
 
-function layerScaleIds(layer) {
-  return [
-    ...Object.values(layer.encoding ?? {}).map(encoding => encoding?.scale),
-    ...(layer.encoding?.parallel?.dimensions ?? []).map(dimension => dimension.scale)
-  ].filter(scale => scale !== undefined);
-}
-
 export function planCanvasRematerialization(program) {
   const marks = [];
   for (const layer of program.semanticSpec.layers) {
@@ -38,7 +35,7 @@ export function planCanvasRematerialization(program) {
     if (needsCanvasScaleRematerialization(program, scale)) {
       const deferredConsumers = program.semanticSpec.layers.filter(layer =>
         canDeferScaleConsumerApplication(layer) &&
-        layerScaleIds(layer).includes(scale.id)
+        getLayerScaleIds(layer).includes(scale.id)
       );
       const canDeferMarks = deferredConsumers.length === 0 ||
         deferredConsumers.every(layer => deferredMarkIds.has(layer.id));
@@ -66,7 +63,7 @@ export function planCanvasRematerialization(program) {
 
 export function planLayerDataRematerialization(program, id) {
   const layer = requireLayer(program, id);
-  const scaleIds = [...new Set(layerScaleIds(layer))];
+  const scaleIds = [...new Set(getLayerScaleIds(layer))];
   const markStep = getMarkMaterializationStep(program, layer);
   const scales = scaleIds.map(scale => ({
       op: "rematerializeScale",
@@ -76,15 +73,19 @@ export function planLayerDataRematerialization(program, id) {
         ...(markStep === undefined ? {} : { marks: false })
       }
     }));
-  const marks = [
+  const directMarks = [
     ...(markStep === undefined ? [] : [markStep]),
-    ...getSourceDependentMarkSteps(program, id)
+    ...getScaleConsumerMarkSteps(program, scaleIds)
+  ];
+  const marks = [
+    ...directMarks,
+    ...directMarks.flatMap(step => getSourceDependentMarkSteps(program, step.args.id))
   ];
   if (scales.length > 0 || marks.length > 0) {
     const guides = scaleIds.flatMap(scale =>
       planScaleGuideRematerialization(program, scale)
     );
-    return buildMaterializationPlan({ scales, marks, guides });
+    return buildMaterializationPlan({ scales, marks: reusePlannedMarkScales(program, marks, scaleIds), guides });
   }
   const existingStep = getExistingMarkRematerializationStep(program, layer);
   return buildMaterializationPlan({
@@ -99,5 +100,45 @@ export function applyLayerDataRematerialization(program, id) {
   );
 }
 
-export { applyMaterializationPlan } from "./planner.js";
+export function applyLayerEmptyDataView(program, id) {
+  requireLayer(program, id);
+  const targets = [
+    id,
+    ...getSourceDependentMarkSteps(program, id).map(step => step.args.id)
+  ];
+  let next = program;
+  for (const target of new Set(targets)) {
+    const graphic = next.graphicSpec.objects[target];
+    if (graphic === undefined) continue;
+    next = graphic.type === "collection"
+      ? next.editGraphics({ target, property: "items", value: [] })
+      : next.editGraphics({ target, property: "length", value: 0 });
+  }
+  return next;
+}
+
+export function applyDetachedScaleRematerialization(program, previousLayers) {
+  const retained = new Set(program.semanticSpec.layers.flatMap(getLayerScaleIds));
+  const scaleIds = [...new Set(previousLayers.flatMap(layer => {
+    const current = findLayer(program, layer.id);
+    const currentIds = current === undefined ? [] : getLayerScaleIds(current);
+    return getLayerScaleIds(layer).filter(id => !currentIds.includes(id) && retained.has(id));
+  }))];
+  if (scaleIds.length === 0) return program;
+  const directMarks = getScaleConsumerMarkSteps(program, scaleIds);
+  return applyMaterializationPlan(program, buildMaterializationPlan({
+    scales: scaleIds.map(id => ({
+      op: "rematerializeScale", args: { id, guides: false, marks: false }
+    })),
+    marks: [
+      ...directMarks,
+      ...directMarks.flatMap(step => getSourceDependentMarkSteps(program, step.args.id))
+    ],
+    guides: scaleIds.flatMap(id => planScaleGuideRematerialization(program, id))
+  }));
+}
+
+export function applyMaterializationPlan(program, plan) {
+  return withGuideLayoutTransaction(program, next => executeMaterializationPlan(next, plan));
+}
 export { planScaleGuideRematerialization };

package/src/materialization/encodings.js

@@ -25,7 +25,7 @@ export function planEncodingRematerialization(program, {
   );
   const marks = [
     ...directMarks,
-    ...getSourceDependentMarkSteps(program, target)
+    ...directMarks.flatMap(step => getSourceDependentMarkSteps(program, step.args.id))
   ];
 
   const guides = [];

package/src/materialization/facetGuides/legacyCategorical.js

@@ -69,7 +69,13 @@ export function resolveLegacyCategoricalLegend(program) {
   return {
     mode: "legacyCategorical",
     compatibility,
-    reservation: { gap: 18, width: 132 },
+    reservation: {
+      position: "right",
+      align: "center",
+      gap: 18,
+      width: 132,
+      height: 0
+    },
     legend: {
       field: config.field,
       mark: encodings[0].layer.mark.type,

package/src/materialization/facetGuides/placement.js

@@ -33,12 +33,27 @@ function removeNamespacedGraphics(program, namespace, ids) {
 }
 
 function legendTranslation(prepared, plot, layout) {
+  const position = prepared.reservation.position;
+  if (["top", "bottom"].includes(position)) {
+    const width = prepared.bounds.right - prepared.bounds.left;
+    const left = prepared.reservation.align === "left"
+      ? plot.x
+      : prepared.reservation.align === "right"
+        ? plot.x + plot.width - width
+        : plot.x + (plot.width - width) / 2;
+    return {
+      x: left - prepared.bounds.left,
+      y: layout.legend.y - prepared.bounds.top
+    };
+  }
   const strips = prepared.source.graphicSpec.objects.colorGradientStrips;
   if (strips?.items?.[0] !== undefined) {
     const properties = strips.items[0].properties;
     const length = prepared.source.guideConfigs.legend.gradient.gradient.length;
     return {
-      x: layout.legend.x - properties.x,
+      x: layout.legend.x - (position === "left"
+        ? prepared.bounds.left
+        : properties.x),
       y: plot.y + (plot.height - length) / 2 - properties.y
     };
   }