ggaction 0.0.10 → 0.0.12

package/src/materialization/rowEncoding.js

@@ -1,11 +1,19 @@
-import { POSITION_CHANNELS } from "../core/vocabulary.js";
 import {
+  OFFSET_POSITION_CHANNELS,
+  POSITION_CHANNELS
+} from "../core/vocabulary.js";
+import {
+  mapOrdinalOffsetValues,
   mapOrdinalPositionValues,
   readNominalField,
   readQuantitativeField,
   readScaleField,
   readTemporalField
 } from "../grammar/scales/index.js";
+import {
+  finiteMidpoint,
+  requireFiniteResult
+} from "../grammar/numeric.js";
 import { mapScaleConsumerValues } from "./scales/map.js";
 
 export function resolveRowEncodingValues(program, layer, dataset, channel) {
@@ -27,7 +35,55 @@ export function resolveRowEncodingValues(program, layer, dataset, channel) {
       : encoding.fieldType === "temporal"
         ? readTemporalField(dataset.values, encoding.field)
         : readQuantitativeField(dataset.values, encoding.field);
+  if (categorical && OFFSET_POSITION_CHANNELS.includes(channel)) {
+    return mapOrdinalOffsetValues(values, scale);
+  }
   return categorical && POSITION_CHANNELS.includes(channel)
     ? mapOrdinalPositionValues(values, scale)
     : mapScaleConsumerValues(values, scale, channel);
 }
+
+export function applyOffsetPositionValues({
+  base,
+  offset,
+  parentScale,
+  offsetScale,
+  channel
+}) {
+  if (base.length !== offset.length) {
+    throw new Error(`${channel} offset values must match the base position grain.`);
+  }
+  const midpoint = finiteMidpoint(offsetScale.range[0], offsetScale.range[1]);
+  const direction = Math.sign(parentScale.step) ||
+    Math.sign(parentScale.range[1] - parentScale.range[0]) || 1;
+  return Object.freeze(base.map((value, index) => {
+    if (!Number.isFinite(value) || !Number.isFinite(offset[index])) {
+      return undefined;
+    }
+    return requireFiniteResult(
+      value + direction * (offset[index] - midpoint),
+      `${channel} offset position`
+    );
+  }));
+}
+
+export function resolveRowPositionValues(program, layer, dataset, channel) {
+  const base = resolveRowEncodingValues(program, layer, dataset, channel);
+  if (base === undefined) return undefined;
+  const offsetChannel = channel === "x" ? "xOffset" : "yOffset";
+  const offsetEncoding = layer.encoding?.[offsetChannel];
+  if (offsetEncoding === undefined) return base;
+  const offset = resolveRowEncodingValues(
+    program,
+    layer,
+    dataset,
+    offsetChannel
+  );
+  return applyOffsetPositionValues({
+    base,
+    offset,
+    parentScale: program.resolvedScales[layer.encoding[channel].scale],
+    offsetScale: program.resolvedScales[offsetEncoding.scale],
+    channel
+  });
+}

package/src/materialization/scales/policies/bar.js

@@ -1,88 +1,14 @@
-import { normalizeOffsetPadding } from "../../../grammar/bars/geometry.js";
 import {
   BAR_GRAINS,
   resolveBarChannels,
   resolveBarGrain
 } from "../../../grammar/bars/policy.js";
-import { resolveHistogramBins } from "../../../grammar/histogram.js";
-
-export function resolveBinnedBarDomain({
-  valuesByConsumer,
-  channel,
-  scale,
-  id,
-  allValues
-}) {
-  const binnedBars = valuesByConsumer.filter(
-    ({ consumer }) =>
-      consumer.layer.mark?.type === "bar" &&
-      consumer.encoding.bin !== undefined
-  );
-  if (binnedBars.length === 0) return undefined;
-  if (channel !== "x" || binnedBars.length !== valuesByConsumer.length) {
-    throw new Error(
-      `Binned scale "${id}" cannot be shared with an unbinned consumer.`
-    );
-  }
-  const binDefinitions = new Set(
-    binnedBars.map(({ consumer }) => JSON.stringify(consumer.encoding.bin))
-  );
-  if (binDefinitions.size !== 1) {
-    throw new Error(`Binned scale "${id}" requires one shared bin definition.`);
-  }
-  return resolveHistogramBins({
-    values: allValues,
-    bin: binnedBars[0].consumer.encoding.bin,
-    domain: scale.domain,
-    nice: scale.nice ?? true,
-    zero: scale.zero ?? false
-  }).domain;
-}
-
-export function resolveOffsetScalePolicy({
-  consumers,
-  resolvedScales,
-  markConfigs,
-  id,
-  channel
-}) {
-  const parentChannel = channel === "xOffset" ? "x" : "y";
-  const bandwidths = consumers.map(consumer => {
-    if (parentChannel === "x" && consumer.layer.encoding?.x?.bin !== undefined) {
-      return 1;
-    }
-    const parentScaleId = consumer.layer.encoding?.[parentChannel]?.scale;
-    return resolvedScales[parentScaleId]?.bandwidth;
-  });
-  if (
-    bandwidths.some(value => !Number.isFinite(value)) ||
-    new Set(bandwidths).size !== 1
-  ) {
-    throw new Error(
-      `${channel} scale "${id}" requires one shared resolved ${parentChannel} bandwidth.`
-    );
-  }
-  const paddings = consumers.map(consumer => normalizeOffsetPadding(
-    markConfigs[consumer.layer.id]?.[channel],
-    undefined,
-    channel
-  ));
-  const signatures = new Set(
-    paddings.map(padding => JSON.stringify(padding))
-  );
-  if (signatures.size !== 1) {
-    throw new Error(
-      `${channel} scale "${id}" requires one shared padding policy.`
-    );
-  }
-  return {
-    parentBandwidth: bandwidths[0],
-    ...paddings[0]
-  };
-}
-
-export function resolveTemporalBarBand(consumers, domain, range, values) {
-  const temporalBars = consumers.filter(consumer => {
+import {
+  interpolateNumber,
+  inverseLerp
+} from "../../../grammar/numeric.js";
+export function resolveTemporalBarBand(valuesByConsumer, domain, range) {
+  const temporalBars = valuesByConsumer.filter(({ consumer }) => {
     const channels = resolveBarChannels(consumer.layer);
     return resolveBarGrain(consumer.layer) === BAR_GRAINS.aggregate &&
       channels?.category === consumer.channel &&
@@ -90,43 +16,76 @@ export function resolveTemporalBarBand(consumers, domain, range, values) {
   });
   if (temporalBars.length === 0) return undefined;
   const temporalFields = new Set(
-    temporalBars.map(consumer => consumer.encoding.field)
+    temporalBars.map(({ consumer }) => consumer.encoding.field)
   );
-  const compatibleLines = consumers.filter(consumer =>
-    consumer.layer.mark?.type === "line" &&
-    consumer.encoding.fieldType === "temporal" &&
-    temporalFields.has(consumer.encoding.field)
+  const compatibleConsumers = valuesByConsumer.filter(({ consumer }) =>
+    ["line", "rule", "text"].includes(consumer.layer.mark?.type) &&
+      consumer.encoding.fieldType === "temporal" &&
+      temporalFields.has(consumer.encoding.field)
   );
-  if (temporalBars.length + compatibleLines.length !== consumers.length) {
+  if (
+    temporalBars.length + compatibleConsumers.length !==
+    valuesByConsumer.length
+  ) {
     throw new Error(
-      "A temporal bar position scale requires compatible bar or line consumers of one field."
+      "A temporal bar position scale requires compatible bar, line, rule, or text consumers of one field."
     );
   }
+  const values = temporalBars.flatMap(item => item.values);
   const ordered = [...new Set(values)].sort((left, right) => left - right);
   if (ordered.length < 2) {
     throw new Error("Temporal bar position requires at least two distinct values.");
   }
-  const minimumGap = Math.min(
-    ...ordered.slice(1).map((value, index) => value - ordered[index])
-  );
+  let minimumGap = Infinity;
+  for (let index = 1; index < ordered.length; index += 1) {
+    minimumGap = Math.min(minimumGap, ordered[index] - ordered[index - 1]);
+  }
   const domainSpan = Math.abs(domain[1] - domain[0]);
   if (!(minimumGap > 0) || !(domainSpan > 0)) {
     throw new Error("Temporal bar position requires an increasing time domain.");
   }
   const direction = Math.sign(range[1] - range[0]) || 1;
-  const estimatedBandwidth = Math.abs(range[1] - range[0]) * minimumGap /
+  const bandwidthFraction = minimumGap / (domainSpan + minimumGap);
+  const directBandwidth = Math.abs(range[1] - range[0]) * minimumGap /
     (domainSpan + minimumGap);
-  const resolvedRange = [
-    range[0] + direction * estimatedBandwidth / 2,
-    range[1] - direction * estimatedBandwidth / 2
+  const directRange = [
+    range[0] + direction * directBandwidth / 2,
+    range[1] - direction * directBandwidth / 2
   ];
-  const positions = ordered.map(value =>
-    resolvedRange[0] +
-      (value - domain[0]) / (domain[1] - domain[0]) *
-      (resolvedRange[1] - resolvedRange[0])
-  );
-  const bandwidth = Math.min(
-    ...positions.slice(1).map((value, index) => Math.abs(value - positions[index]))
-  );
+  const stable = !Number.isFinite(directBandwidth) ||
+    !directRange.every(Number.isFinite);
+  const estimatedBandwidth = stable
+    ? Math.abs(
+      interpolateNumber(range[0], range[1], bandwidthFraction) - range[0]
+    )
+    : directBandwidth;
+  const resolvedRange = stable
+    ? [
+        interpolateNumber(range[0], range[1], bandwidthFraction / 2),
+        interpolateNumber(range[0], range[1], 1 - bandwidthFraction / 2)
+      ]
+    : directRange;
+  const resolvedSpan = resolvedRange[1] - resolvedRange[0];
+  const positions = ordered.map(value => {
+    const direct = resolvedRange[0] +
+      (value - domain[0]) / (domain[1] - domain[0]) * resolvedSpan;
+    return Number.isFinite(direct)
+      ? direct
+      : interpolateNumber(
+        resolvedRange[0],
+        resolvedRange[1],
+        inverseLerp(value, domain[0], domain[1])
+      );
+  });
+  let bandwidth = Infinity;
+  for (let index = 1; index < positions.length; index += 1) {
+    bandwidth = Math.min(
+      bandwidth,
+      Math.abs(positions[index] - positions[index - 1])
+    );
+  }
+  if (![estimatedBandwidth, bandwidth, ...resolvedRange].every(Number.isFinite)) {
+    throw new RangeError("Temporal bar position exceeds the finite numeric range.");
+  }
   return { bandwidth, range: resolvedRange };
 }

package/src/materialization/scales/policies/binnedPosition.js

@@ -0,0 +1,34 @@
+import { resolveHistogramBins } from "../../../grammar/histogram.js";
+
+export function resolveBinnedPositionDomain({
+  valuesByConsumer,
+  channel,
+  scale,
+  id,
+  allValues
+}) {
+  const binnedPositions = valuesByConsumer.filter(
+    ({ consumer }) =>
+      ["bar", "line"].includes(consumer.layer.mark?.type) &&
+      consumer.encoding.bin !== undefined
+  );
+  if (binnedPositions.length === 0) return undefined;
+  if (channel !== "x" || binnedPositions.length !== valuesByConsumer.length) {
+    throw new Error(
+      `Binned scale "${id}" cannot be shared with an unbinned consumer.`
+    );
+  }
+  const binDefinitions = new Set(
+    binnedPositions.map(({ consumer }) => JSON.stringify(consumer.encoding.bin))
+  );
+  if (binDefinitions.size !== 1) {
+    throw new Error(`Binned scale "${id}" requires one shared bin definition.`);
+  }
+  return resolveHistogramBins({
+    values: allValues,
+    bin: binnedPositions[0].consumer.encoding.bin,
+    domain: scale.domain,
+    nice: scale.nice ?? true,
+    zero: scale.zero ?? false
+  }).domain;
+}

package/src/materialization/scales/policies/offset.js

@@ -0,0 +1,54 @@
+import { normalizeOffsetPadding } from "../../../grammar/bars/geometry.js";
+
+function resolveParentSlot(consumer, resolvedScales, parentChannel) {
+  if (parentChannel === "x" && consumer.layer.encoding?.x?.bin !== undefined) {
+    return 1;
+  }
+  const parentScaleId = consumer.layer.encoding?.[parentChannel]?.scale;
+  const parentScale = resolvedScales[parentScaleId];
+  if (Number.isFinite(parentScale?.bandwidth) && parentScale.bandwidth > 0) {
+    return parentScale.bandwidth;
+  }
+  if (parentScale?.type === "point" && Number.isFinite(parentScale.step)) {
+    return Math.abs(parentScale.step);
+  }
+  return undefined;
+}
+
+export function resolveOffsetScalePolicy({
+  consumers,
+  resolvedScales,
+  markConfigs,
+  id,
+  channel
+}) {
+  const parentChannel = channel === "xOffset" ? "x" : "y";
+  const slots = consumers.map(consumer =>
+    resolveParentSlot(consumer, resolvedScales, parentChannel)
+  );
+  if (
+    slots.some(value => !Number.isFinite(value) || value <= 0) ||
+    new Set(slots).size !== 1
+  ) {
+    throw new Error(
+      `${channel} scale "${id}" requires one shared resolved ${parentChannel} categorical slot.`
+    );
+  }
+  const paddings = consumers.map(consumer => normalizeOffsetPadding(
+    markConfigs[consumer.layer.id]?.[channel],
+    undefined,
+    channel
+  ));
+  const signatures = new Set(
+    paddings.map(padding => JSON.stringify(padding))
+  );
+  if (signatures.size !== 1) {
+    throw new Error(
+      `${channel} scale "${id}" requires one shared padding policy.`
+    );
+  }
+  return {
+    parentBandwidth: slots[0],
+    ...paddings[0]
+  };
+}

package/src/materialization/scales/policies/series.js

@@ -3,6 +3,7 @@ import {
   resolveContinuousDomain,
   resolveTransformedDomain
 } from "../../../grammar/scales/index.js";
+import { numericExtent } from "../../../grammar/numeric.js";
 
 export function resolveSeriesLayoutDomain({
   id,
@@ -25,9 +26,14 @@ export function resolveSeriesLayoutDomain({
   const compatibleDirect = directConsumers.every(({ consumer }) =>
     layoutConsumers.every(({ consumer: layoutConsumer }) => {
       const aggregate = layoutConsumer.encoding.aggregate;
-      return aggregate !== "count" &&
-        consumer.encoding.fieldType === "quantitative" &&
-        consumer.encoding.field === layoutConsumer.encoding.field;
+      const directEncoding = consumer.encoding;
+      return directEncoding.fieldType === "quantitative" && (
+        Object.hasOwn(directEncoding, "datum") ||
+        (
+          aggregate !== "count" &&
+          directEncoding.field === layoutConsumer.encoding.field
+        )
+      );
     })
   );
   if (!compatibleDirect) {
@@ -41,9 +47,9 @@ export function resolveSeriesLayoutDomain({
     ...directConsumers.flatMap(item => item.values)
   ];
   if (layout === "center" && scale.domain !== "auto") {
-    const minimum = Math.min(...values);
-    const maximum = Math.max(...values);
-    if (Math.min(...scale.domain) > minimum || Math.max(...scale.domain) < maximum) {
+    const [minimum, maximum] = numericExtent(values);
+    const [domainMinimum, domainMaximum] = numericExtent(scale.domain);
+    if (domainMinimum > minimum || domainMaximum < maximum) {
       throw new Error(
         `Center layout scale "${id}" explicit domain must contain every centered bound.`
       );
@@ -52,7 +58,7 @@ export function resolveSeriesLayoutDomain({
   if (
     ["group", "overlay"].includes(layout) &&
     scale.domain !== "auto" &&
-    (Math.min(...scale.domain) > 0 || Math.max(...scale.domain) < 0)
+    (numericExtent(scale.domain)[0] > 0 || numericExtent(scale.domain)[1] < 0)
   ) {
     throw new Error(
       `Series layout scale "${id}" requires an explicit domain containing zero.`

package/src/materialization/scales/resolve.js

@@ -27,11 +27,9 @@ import {
   validateTimeScaleType
 } from "../../grammar/scales/index.js";
 import { resolveArcAutoPositionRange } from "./policies/arc.js";
-import {
-  resolveBinnedBarDomain,
-  resolveOffsetScalePolicy,
-  resolveTemporalBarBand
-} from "./policies/bar.js";
+import { resolveTemporalBarBand } from "./policies/bar.js";
+import { resolveOffsetScalePolicy } from "./policies/offset.js";
+import { resolveBinnedPositionDomain } from "./policies/binnedPosition.js";
 import { resolveSeriesLayoutDomain } from "./policies/series.js";
 import { OFFSET_POSITION_CHANNELS } from "../../core/vocabulary.js";
 
@@ -223,7 +221,7 @@ export function resolveScaleMaterialization({
   }
   const binnedDomain = isDiscretizedColor
     ? undefined
-    : resolveBinnedBarDomain({
+    : resolveBinnedPositionDomain({
         valuesByConsumer,
         channel,
         scale,
@@ -331,10 +329,9 @@ export function resolveScaleMaterialization({
   }
   if (scale.type === "time" && ["x", "y"].includes(channel)) {
     const temporalBarBand = resolveTemporalBarBand(
-      consumers,
+      valuesByConsumer,
       domain,
-      range,
-      allValues
+      range
     );
     if (temporalBarBand !== undefined) {
       resolvedScale = {

package/src/materialization/selection/items/arc.js

@@ -1,7 +1,12 @@
 import { deriveArcSectors } from "../../../grammar/arcs.js";
+import { resolvePolarPoint } from "../../../grammar/polarPaths.js";
 import { resolvePolarFrame } from "../../../grammar/polar.js";
 import { resolveGraphicBounds } from "../../../layout/canvas.js";
-import { finalizeItems, uniqueFields } from "./common.js";
+import {
+  concreteProperties,
+  finalizeItems,
+  uniqueFields
+} from "./common.js";
 
 export function resolveArcItems(program, layer, dataset) {
   const thetaScale = program.resolvedScales[layer.encoding?.theta?.scale];
@@ -13,7 +18,8 @@ export function resolveArcItems(program, layer, dataset) {
     frame,
     innerRadiusRatio: program.markConfigs[layer.id]?.innerRadius ?? 0
   });
-  const definitions = derived.sectors.map(sector => {
+  const graphic = program.graphicSpec.objects[layer.id];
+  const definitions = derived.sectors.map((sector, index) => {
     const members = sector.sourceIndices.map(index => dataset.values[index]);
     return {
       fields: uniqueFields(members),
@@ -22,6 +28,14 @@ export function resolveArcItems(program, layer, dataset) {
         ...(sector.radius === undefined ? {} : { radius: sector.radius }),
         ...(sector.color === undefined ? {} : { color: sector.color })
       },
+      properties: {
+        ...concreteProperties(graphic.items[index]?.properties),
+        ...resolvePolarPoint(
+          frame,
+          (sector.startTheta + sector.endTheta) / 2,
+          (sector.innerRadius + sector.outerRadius) / 2
+        )
+      },
       members
     };
   });

package/src/materialization/selection/items/bar.js

@@ -6,6 +6,7 @@ import {
   resolveBarOffsetChannel,
   resolveBarGrain
 } from "../../../grammar/bars/policy.js";
+import { numericExtent } from "../../../grammar/numeric.js";
 import { layoutSeriesPartition } from "../../../grammar/seriesLayout.js";
 import {
   readNominalField,
@@ -215,14 +216,15 @@ function barStackDefinitions(layer, barGrain, definitions) {
         `Bar mark "${layer.id}" stack ${index} has no resolved semantic endpoints.`
       );
     }
+    const [minimum, maximum] = numericExtent(endpoints);
     const members = grouped.flatMap(definition => definition.members);
     return {
       key: itemKey(layer, "stack", index),
       fields: uniqueFields(members),
       channels: {
         ...sharedChannels(grouped),
-        [measure]: Math.min(...endpoints),
-        [secondary]: Math.max(...endpoints)
+        [measure]: minimum,
+        [secondary]: maximum
       },
       members,
       graphicIndices: entries.map(entry => entry.index)

package/src/materialization/selection/items/common.js

@@ -1,5 +1,8 @@
 import { cloneAndFreeze, isPlainObject } from "../../../core/immutable.js";
-import { MARK_GRAPHIC_PROPERTIES } from "../../../grammar/markSelection.js";
+import {
+  MARK_GRAPHIC_PROPERTIES,
+  selectMarkItemKeys
+} from "../../../grammar/markSelection.js";
 import { unionConcreteGraphicBounds } from
   "../../../grammar/schemas/graphicBounds.js";
 
@@ -129,3 +132,20 @@ export function finalizeItems(program, layer, grain, definitions, graphicType) {
     });
   }));
 }
+
+export function reorderHighlightedItems(program, layer, definitions) {
+  let ordered = definitions;
+  for (const config of Object.values(
+    program.materializationConfigs.highlights ?? {}
+  )) {
+    if (config.target !== layer.id || config.bringToFront !== true) continue;
+    const selection = program.materializationConfigs.selections?.[config.selection];
+    if (selection?.target !== layer.id) continue;
+    const selected = new Set(selectMarkItemKeys(ordered, selection.selector));
+    ordered = [
+      ...ordered.filter(definition => !selected.has(definition.key)),
+      ...ordered.filter(definition => selected.has(definition.key))
+    ];
+  }
+  return ordered;
+}

package/src/materialization/selection/items/path.js

@@ -3,8 +3,12 @@ import {
   deriveAreaSeries,
   deriveDensityAreaSeries
 } from "../../../grammar/areaSeries.js";
-import { deriveLineSeries } from "../../../grammar/lineSeries.js";
+import {
+  deriveLineSeries,
+  resolveLineBins
+} from "../../../grammar/lineSeries.js";
 import { findUpstreamTransform } from "../../dataProvenance.js";
+import { requireSemanticScale } from "../../../selectors/scales.js";
 import {
   channelMapFromRow,
   finalizeItems,
@@ -61,7 +65,20 @@ export function resolveLineItems(program, layer, dataset) {
     });
     return finalizeItems(program, layer, "row", definitions, "path");
   }
-  const derived = deriveLineSeries(dataset.values, layer);
+  const x = layer.encoding?.x;
+  const derived = deriveLineSeries(
+    dataset.values,
+    layer,
+    x?.bin === undefined
+      ? undefined
+      : {
+          xBinBoundaries: resolveLineBins(
+            dataset.values,
+            layer,
+            requireSemanticScale(program, x.scale)
+          ).boundaries
+        }
+  );
   return finalizeItems(
     program,
     layer,

package/src/materialization/selection/items/point.js

@@ -1,10 +1,10 @@
-import { selectMarkItemKeys } from "../../../grammar/markSelection.js";
 import {
   channelMapFromRow,
   concreteProperties,
   finalizeItems,
   itemKey,
-  ownFields
+  ownFields,
+  reorderHighlightedItems
 } from "./common.js";
 
 export function resolvePointItems(program, layer, dataset) {
@@ -22,30 +22,18 @@ export function resolvePointItems(program, layer, dataset) {
   ) {
     throw new Error(`Point mark "${layer.id}" is incomplete for selection.`);
   }
-  let definitions = dataset.values.map((row, index) => ({
+  const definitions = dataset.values.map((row, index) => ({
     key: itemKey(layer, "point", index),
     fields: ownFields(row),
     channels: channelMapFromRow(row, layer),
     properties: concreteProperties(graphic.items[index]?.properties),
     members: [row]
   }));
-  for (const config of Object.values(
-    program.materializationConfigs.highlights ?? {}
-  )) {
-    if (config.target !== layer.id || config.bringToFront !== true) continue;
-    const selection = program.materializationConfigs.selections?.[config.selection];
-    if (selection?.target !== layer.id) continue;
-    const selected = new Set(selectMarkItemKeys(definitions, selection.selector));
-    definitions = [
-      ...definitions.filter(definition => !selected.has(definition.key)),
-      ...definitions.filter(definition => selected.has(definition.key))
-    ];
-  }
   return finalizeItems(
     program,
     layer,
     "point",
-    definitions,
+    reorderHighlightedItems(program, layer, definitions),
     program.graphicSpec.objects[layer.id]?.type
   );
 }

package/src/materialization/selection/items/tick.js

@@ -1,10 +1,10 @@
-import { selectMarkItemKeys } from "../../../grammar/markSelection.js";
 import {
   channelMapFromRow,
   concreteProperties,
   finalizeItems,
   itemKey,
-  ownFields
+  ownFields,
+  reorderHighlightedItems
 } from "./common.js";
 
 export function resolveTickItems(program, layer, dataset) {
@@ -15,25 +15,17 @@ export function resolveTickItems(program, layer, dataset) {
   if (!Array.isArray(graphic?.items) || !completePosition) {
     throw new Error(`Tick mark "${layer.id}" is incomplete for selection.`);
   }
-  let definitions = dataset.values.map((row, index) => ({
-    key: itemKey(layer, "tick", index),
-    fields: ownFields(row),
-    channels: channelMapFromRow(row, layer),
-    properties: concreteProperties(graphic.items[index]?.properties),
-    members: [row]
-  }));
-  for (const config of Object.values(
-    program.materializationConfigs.highlights ?? {}
-  )) {
-    if (config.target !== layer.id || config.bringToFront !== true) continue;
-    const selection = program.materializationConfigs.selections?.[config.selection];
-    if (selection?.target !== layer.id) continue;
-    const selected = new Set(selectMarkItemKeys(definitions, selection.selector));
-    definitions = [
-      ...definitions.filter(definition => !selected.has(definition.key)),
-      ...definitions.filter(definition => selected.has(definition.key))
-    ];
-  }
+  let definitions = reorderHighlightedItems(
+    program,
+    layer,
+    dataset.values.map((row, index) => ({
+      key: itemKey(layer, "tick", index),
+      fields: ownFields(row),
+      channels: channelMapFromRow(row, layer),
+      properties: concreteProperties(graphic.items[index]?.properties),
+      members: [row]
+    }))
+  );
   definitions = definitions.map((definition, index) => ({
     ...definition,
     properties: concreteProperties(graphic.items[index]?.properties)