ggaction 0.0.9 → 0.0.11

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"
           }
         }

package/src/actions/gradientPlots/edit.js

@@ -5,15 +5,13 @@ import { validateKeys } from "../../core/validation.js";
 import { planDerivedDataRevision } from "../../materialization/dataProvenance.js";
 import { findDataset } from "../../selectors/datasets.js";
 import { findLayer } from "../../selectors/layers.js";
+import { removeOwnedMark } from "../marks/remove.js";
 import { GRADIENT_PROFILE_FIELDS } from "../../grammar/gradientProfile.js";
 import { removeGradientPlotLegend } from "./components.js";
 import {
-  assertDistributionScaleHandoff,
-  clearCartesianPositions,
-  rebindDistributionGuides,
-  resolveDistributionScalePlan,
+  resolveDistributionRoles,
   setCartesianPosition,
-  setCartesianRange
+  updateDistributionPositions
 } from "../distributions/revision.js";
 import {
   resolveGradientAppearance,
@@ -39,140 +37,20 @@ function patch(value, label) {
 }
 
 function removeCenter(program, id) {
-  let next = program;
-  const selections = Object.entries(
-    program.materializationConfigs.selections ?? {}
-  ).filter(([, config]) => config.target === id).map(([selection]) => selection);
-  for (const [highlight, config] of Object.entries(
-    program.materializationConfigs.highlights ?? {}
-  )) {
-    if (config.target === id || selections.includes(config.selection)) {
-      next = next._withoutMaterializationConfig(["highlights", highlight]);
-    }
-  }
-  for (const selection of selections) {
-    next = next._withoutMaterializationConfig(["selections", selection]);
-  }
-  if (findLayer(next, id) !== undefined) {
-    next = next.editSemantic({ property: `layer[${id}]`, remove: true });
-  }
-  if (next.graphicSpec.objects[id] !== undefined) {
-    next = next.editGraphics({ target: id, remove: true });
-  }
-  return next
-    ._withoutMaterializationConfig(["marks", id])
-    ._withContext({
-      ...(program.context.currentMark === id ? { currentMark: undefined } : {}),
-      ...(selections.includes(program.context.currentSelection)
-        ? { currentSelection: undefined }
-        : {})
-    });
-}
-
-function currentGradientPositions(owner, current) {
-  const categoryChannel = current.orientation === "vertical" ? "x" : "y";
-  const measureChannel = current.orientation === "vertical" ? "y" : "x";
-  const categoryEncoding = owner.encoding[categoryChannel];
-  const measureEncoding = owner.encoding[measureChannel];
-  return {
-    x: current.orientation === "vertical"
-      ? {
-          field: current.category,
-          fieldType: current.categoryType,
-          scale: categoryEncoding.scale
-        }
-      : {
-          field: current.measure,
-          fieldType: "quantitative",
-          scale: measureEncoding.scale
-        },
-    y: current.orientation === "vertical"
-      ? {
-          field: current.measure,
-          fieldType: "quantitative",
-          scale: measureEncoding.scale
-        }
-      : {
-          field: current.category,
-          fieldType: current.categoryType,
-          scale: categoryEncoding.scale
-        },
-    categoryScale: categoryEncoding.scale,
-    measureScale: measureEncoding.scale
-  };
-}
-
-function requirePositionField(position, label) {
-  if (typeof position?.field !== "string" || position.field.length === 0) {
-    throw new TypeError(`${label} field must be a non-empty string.`);
-  }
-  return position;
+  return removeOwnedMark(program, id, true);
 }
 
 function roleCandidate(program, owner, current, args) {
-  const previous = currentGradientPositions(owner, current);
-  const positions = normalizeGradientPositionTypes(
-    requirePositionField(
-      Object.hasOwn(args, "x")
-        ? resolveGradientPosition(args.x, "x", "editGradientPlot")
-        : previous.x,
-      "editGradientPlot x"
-    ),
-    requirePositionField(
-      Object.hasOwn(args, "y")
-        ? resolveGradientPosition(args.y, "y", "editGradientPlot")
-        : previous.y,
-      "editGradientPlot y"
-    )
-  );
-  if (positions.orientation === undefined) {
-    throw new Error(
-      "editGradientPlot requires one categorical axis and one quantitative axis."
-    );
-  }
-  const xRoleScale = positions.orientation === "vertical"
-    ? previous.categoryScale
-    : previous.measureScale;
-  const yRoleScale = positions.orientation === "vertical"
-    ? previous.measureScale
-    : previous.categoryScale;
-  const xScale = resolveDistributionScalePlan(program, {
-    channel: "x",
-    fieldType: positions.x.fieldType,
-    requested: positions.x.scale,
-    fallback: xRoleScale,
-    defaults: ["ordinal", "nominal"].includes(positions.x.fieldType)
-      ? { discreteType: "band" }
-      : {}
-  });
-  const yScale = resolveDistributionScalePlan(program, {
-    channel: "y",
-    fieldType: positions.y.fieldType,
-    requested: positions.y.scale,
-    fallback: yRoleScale,
-    defaults: ["ordinal", "nominal"].includes(positions.y.fieldType)
-      ? { discreteType: "band" }
-      : {}
-  });
   return {
     source: Object.hasOwn(args, "data")
       ? validateUserId(args.data, "Gradient-plot data id")
       : current.source,
-    orientation: positions.orientation,
-    x: { ...positions.x, scale: xScale.id },
-    y: { ...positions.y, scale: yScale.id },
-    xScale,
-    yScale,
-    category: positions.orientation === "vertical"
-      ? positions.x.field
-      : positions.y.field,
-    categoryType: positions.orientation === "vertical"
-      ? positions.x.fieldType
-      : positions.y.fieldType,
-    measure: positions.orientation === "vertical"
-      ? positions.y.field
-      : positions.x.field,
-    previous
+    ...resolveDistributionRoles(program, owner, current, args, {
+      operation: "editGradientPlot",
+      resolvePosition: resolveGradientPosition,
+      normalize: normalizeGradientPositionTypes,
+      quantitativeDefaults: {}
+    })
   };
 }
 
@@ -190,46 +68,27 @@ function sameRoleCandidate(current, candidate) {
 
 function updateGradientPositions(program, owner, current, candidate, hasCenter) {
   const owned = [owner.id, ...(hasCenter ? [current.centerId] : [])];
-  assertDistributionScaleHandoff(program, {
-    owned,
-    oldXScale: candidate.previous.x.scale,
-    oldYScale: candidate.previous.y.scale,
-    newXScale: candidate.xScale.id,
-    newYScale: candidate.yScale.id
-  });
-  let next = program;
-  for (const id of owned) next = clearCartesianPositions(next, id);
-  for (const scale of [candidate.xScale, candidate.yScale]) {
-    if (scale.create) next = next.createScale(scale.definition);
-  }
-  const category = candidate.orientation === "vertical" ? candidate.x : candidate.y;
-  const measure = candidate.orientation === "vertical" ? candidate.y : candidate.x;
-  const categoryChannel = candidate.orientation === "vertical" ? "x" : "y";
-  const measureChannel = candidate.orientation === "vertical" ? "y" : "x";
-  next = setCartesianPosition(next, owner.id, categoryChannel, {
-    field: candidate.category,
-    fieldType: candidate.categoryType,
-    scale: category.scale
-  });
-  next = setCartesianRange(
-    next,
-    owner.id,
-    measureChannel,
-    GRADIENT_PROFILE_FIELDS.lower,
-    GRADIENT_PROFILE_FIELDS.upper,
-    measure.scale
-  );
-  if (hasCenter) {
-    next = setCartesianPosition(next, current.centerId, categoryChannel, {
+  return updateDistributionPositions(
+    program,
+    owner,
+    current,
+    candidate,
+    {
+      owned,
+      lower: GRADIENT_PROFILE_FIELDS.lower,
+      upper: GRADIENT_PROFILE_FIELDS.upper,
+      update(next, { category, measure, categoryChannel, measureChannel }) {
+        if (!hasCenter) return next;
+        next = setCartesianPosition(next, current.centerId, categoryChannel, {
       field: candidate.category,
       fieldType: candidate.categoryType,
       scale: category.scale
     });
-    next = setCartesianPosition(next, current.centerId, measureChannel, {
+        return setCartesianPosition(next, current.centerId, measureChannel, {
       field: GRADIENT_PROFILE_FIELDS.center,
       fieldType: "quantitative",
       scale: measure.scale
-    })._withMarkConfig(current.centerId, {
+        })._withMarkConfig(current.centerId, {
       ...next.markConfigs[current.centerId],
       fixedSpan: {
         ...next.markConfigs[current.centerId].fixedSpan,
@@ -237,27 +96,10 @@ function updateGradientPositions(program, owner, current, candidate, hasCenter)
           ? "horizontal"
           : "vertical"
       }
-    });
-  }
-  for (const id of new Set([candidate.xScale.id, candidate.yScale.id])) {
-    next = next.rematerializeScale({ id, marks: false, guides: false });
-  }
-  next = rebindDistributionGuides(next, {
-    oldXScale: candidate.previous.x.scale,
-    oldYScale: candidate.previous.y.scale,
-    newXScale: candidate.xScale.id,
-    newYScale: candidate.yScale.id,
-    oldXTitle: candidate.previous.x.field,
-    oldYTitle: candidate.previous.y.field,
-    newXTitle: candidate.x.field,
-    newYTitle: candidate.y.field,
-    oldMeasureChannel: current.orientation === "vertical" ? "y" : "x",
-    newMeasureChannel: candidate.orientation === "vertical" ? "y" : "x"
-  });
-  for (const scale of [candidate.xScale, candidate.yScale]) {
-    if (scale.edit !== undefined) next = next.editScale(scale.edit);
-  }
-  return next;
+        });
+      }
+    }
+  );
 }
 
 export const editGradientPlot = action(
@@ -301,7 +143,10 @@ export const editGradientPlot = action(
       key => Object.hasOwn(args, key)
     );
     const changesRoles = !sameRoleCandidate(current, candidate);
-    if (changesRoles) {
+    const statistical = JSON.stringify(density) !== JSON.stringify(current.density) ||
+      center !== false && current.center !== false &&
+        center.type !== current.center.type;
+    if (changesRoles || statistical) {
       const hadCenter = findLayer(this, current.centerId) !== undefined;
       const revision = planDerivedDataRevision(this, {
         owner: owner.id,
@@ -404,7 +249,6 @@ export const editGradientPlot = action(
           currentData: candidate.source
         });
       };
-      applyEdit(this);
       return applyEdit(this);
     }
     if (roleRequested && !OPTIONS.slice(4).some(
@@ -415,33 +259,8 @@ export const editGradientPlot = action(
         currentData: current.source
       });
     }
-    const densityChanged = JSON.stringify(density) !== JSON.stringify(current.density);
-    const centerTypeChanged = center !== false && current.center !== false &&
-      center.type !== current.center.type;
-    const statistical = densityChanged || centerTypeChanged;
     let next = this;
-    let profileId = current.profileId;
-    if (statistical) {
-      const consumers = [owner.id, ...(findLayer(next, current.centerId) ? [current.centerId] : [])];
-      const revision = planDerivedDataRevision(next, {
-        owner: owner.id,
-        role: "ProfileData",
-        previous: current.profileId,
-        consumers
-      });
-      profileId = revision.id;
-      next = next.createGradientProfileData({
-        id: profileId,
-        source: current.source,
-        category: current.category,
-        field: current.measure,
-        ...density,
-        center: center === false ? "median" : center.type
-      });
-      for (const rebind of revision.rebinds) next = next.rebindLayerData(rebind);
-      next = next.releaseDerivedData(revision.release);
-    }
-    const profile = findDataset(next, profileId);
+    const profile = findDataset(next, current.profileId);
     next = next._withMarkConfig(owner.id, {
       ...next.markConfigs[owner.id],
       gradientPlot: {
@@ -450,7 +269,7 @@ export const editGradientPlot = action(
         width,
         gradient,
         center,
-        profileId,
+        profileId: current.profileId,
         intensityDomain: profile.transform[0].resolved.intensityDomain
       }
     });
@@ -463,7 +282,7 @@ export const editGradientPlot = action(
       next = next.createGradientPlotCenter({
         id: current.centerId,
         owner: owner.id,
-        data: profileId,
+        data: current.profileId,
         category: current.category,
         categoryType: current.categoryType,
         coordinate: owner.coordinate,

package/src/actions/gradientPlots/index.js

@@ -5,20 +5,21 @@ import {
 } from "./components.js";
 import { createGradientPlot } from "./create.js";
 import { editGradientPlot } from "./edit.js";
+import { rebindGradientPlotProfile } from "./rebind.js";
 import {
   materializeGradientPlot,
   materializeGradientPlotFill
 } from "./materialize.js";
-import { rebindGradientPlotProfile } from "./rebind.js";
 
 export function registerGradientPlotActions(ProgramClass) {
-  ProgramClass.prototype.createGradientPlot = createGradientPlot;
-  ProgramClass.prototype.editGradientPlot = editGradientPlot;
-  ProgramClass.prototype.materializeGradientPlot = materializeGradientPlot;
-  ProgramClass.prototype.materializeGradientPlotFill = materializeGradientPlotFill;
-  ProgramClass.prototype.createGradientPlotCenter = createGradientPlotCenter;
-  ProgramClass.prototype.createGradientPlotLegend = createGradientPlotLegend;
-  ProgramClass.prototype.rematerializeGradientPlotLegend =
-    rematerializeGradientPlotLegend;
-  ProgramClass.prototype.rebindGradientPlotProfile = rebindGradientPlotProfile;
+  Object.assign(ProgramClass.prototype, {
+    createGradientPlot,
+    editGradientPlot,
+    materializeGradientPlot,
+    materializeGradientPlotFill,
+    createGradientPlotCenter,
+    createGradientPlotLegend,
+    rematerializeGradientPlotLegend,
+    rebindGradientPlotProfile
+  });
 }

package/src/actions/gradientPlots/materialize.js

@@ -23,10 +23,6 @@ function position(values, scale) {
     : mapContinuousScaleValues(values, scale);
 }
 
-function profileValue(row, key) {
-  return row[GRADIENT_PROFILE_FIELDS[key]];
-}
-
 function axisWithTitle(option, text) {
   if (option === false) return false;
   const axis = option ?? {};
@@ -56,20 +52,22 @@ function gradientAxesOptions(config) {
 }
 
 function bodyItems(program, layer, dataset, config) {
-  const categoryChannel = config.orientation === "vertical" ? "x" : "y";
-  const measureChannel = config.orientation === "vertical" ? "y" : "x";
+  const vertical = config.orientation === "vertical";
+  const categoryChannel = vertical ? "x" : "y";
+  const measureChannel = vertical ? "y" : "x";
   const categoryEncoding = layer.encoding[categoryChannel];
   const measureEncoding = layer.encoding[measureChannel];
   const categoryScale = program.resolvedScales[categoryEncoding.scale];
   const measureScale = program.resolvedScales[measureEncoding.scale];
-  const categories = dataset.values.map(row => row[config.category]);
+  const rows = dataset.values;
+  const categories = rows.map(row => row[config.category]);
   const centers = position(categories, categoryScale);
   const lower = position(
-    dataset.values.map(row => profileValue(row, "lower")),
+    rows.map(row => row[GRADIENT_PROFILE_FIELDS.lower]),
     measureScale
   );
   const upper = position(
-    dataset.values.map(row => profileValue(row, "upper")),
+    rows.map(row => row[GRADIENT_PROFILE_FIELDS.upper]),
     measureScale
   );
   const categoryColors = resolveGradientPlotCategoryColors(
@@ -81,10 +79,10 @@ function bodyItems(program, layer, dataset, config) {
   if (!Number.isFinite(thickness) || thickness <= 0) {
     throw new Error(`Gradient plot "${layer.id}" requires a positive band width.`);
   }
-  return dataset.values.map((row, index) => {
+  return rows.map((row, index) => {
     const a = lower[index];
     const b = upper[index];
-    const geometry = config.orientation === "vertical"
+    const geometry = vertical
       ? {
           x: centers[index] - thickness / 2,
           y: Math.min(a, b),
@@ -102,8 +100,8 @@ function bodyItems(program, layer, dataset, config) {
       properties: {
         ...geometry,
         fill: createGradientPlotPaint({
-          values: profileValue(row, "values"),
-          intensities: profileValue(row, "intensities")
+          values: row[GRADIENT_PROFILE_FIELDS.values],
+          intensities: row[GRADIENT_PROFILE_FIELDS.intensities]
         }, {
           orientation: config.orientation,
           valueScale: measureScale,
@@ -223,28 +221,16 @@ export const materializeGradientPlot = action(
         }
       });
     const measureChannel = orientation === "vertical" ? "y" : "x";
-    const secondaryChannel = `${measureChannel}2`;
-    next = next
-      .editSemantic({
-        property: `layer[${owner}].encoding.${measureChannel}.field`,
-        value: GRADIENT_PROFILE_FIELDS.lower
-      })
-      .editSemantic({
-        property: `layer[${owner}].encoding.${measureChannel}.fieldType`,
-        value: "quantitative"
-      })
-      .editSemantic({
-        property: `layer[${owner}].encoding.${secondaryChannel}.field`,
-        value: GRADIENT_PROFILE_FIELDS.upper
-      })
-      .editSemantic({
-        property: `layer[${owner}].encoding.${secondaryChannel}.fieldType`,
-        value: "quantitative"
-      })
-      .editSemantic({
-        property: `layer[${owner}].encoding.${secondaryChannel}.scale`,
-        value: measure.scale
-      });
+    const path = `layer[${owner}].encoding.`;
+    for (const [property, value] of [
+      [`${path}${measureChannel}.field`, GRADIENT_PROFILE_FIELDS.lower],
+      [`${path}${measureChannel}.fieldType`, "quantitative"],
+      [`${path}${measureChannel}2.field`, GRADIENT_PROFILE_FIELDS.upper],
+      [`${path}${measureChannel}2.fieldType`, "quantitative"],
+      [`${path}${measureChannel}2.scale`, measure.scale]
+    ]) {
+      next = next.editSemantic({ property, value });
+    }
     next = next.materializeGradientPlotFill({ id: owner });
     if (config.center !== false) {
       const categoryScale = next.resolvedScales[category.scale];

package/src/actions/gradientPlots/options.js

@@ -1,8 +1,7 @@
-import { isPlainObject } from "../../core/immutable.js";
 import {
-  validateKeys,
   validateNonEmptyString,
   validateNonNegativeFinite,
+  validateOptionObject,
   validateUnitInterval
 } from "../../core/validation.js";
 import { normalizePalette } from "../../grammar/palettes.js";
@@ -14,11 +13,10 @@ export const GRADIENT_PLOT_OPTIONS = Object.freeze([
 
 function plain(value, keys, label, operation) {
   if (value === undefined) return {};
-  if (!isPlainObject(value)) {
-    throw new TypeError(`${operation} ${label} must be a plain object.`);
-  }
-  validateKeys(value, keys, `${operation} ${label}`);
-  return value;
+  const context = `${operation} ${label}`;
+  return validateOptionObject(value, keys, context, {
+    plainObjectMessage: `${context} must be a plain object.`
+  });
 }
 
 export function resolveGradientPosition(value, label, operation = "createGradientPlot") {

package/src/actions/gradientPlots/paint.js

@@ -1,12 +1,12 @@
 import { resolveContinuousPalette } from "../../grammar/palettes.js";
+import { inverseLerp } from "../../grammar/numeric.js";
 import { mapScaleConsumerValues } from "../../materialization/scales/map.js";
 
 function parseHex(value) {
   const match = value.match(/^#([0-9a-f]{6})$/i);
   if (!match) throw new Error(`Gradient plot requires a six-digit hex color, received "${value}".`);
-  return [0, 2, 4].map(offset =>
-    Number.parseInt(match[1].slice(offset, offset + 2), 16)
-  );
+  const color = Number.parseInt(match[1], 16);
+  return [color >> 16, color >> 8 & 255, color & 255];
 }
 
 function interpolate(left, right, amount) {
@@ -23,8 +23,11 @@ function paletteColor(colors, amount) {
   const bounded = Math.max(0, Math.min(1, amount));
   const scaled = bounded * (colors.length - 1);
   const left = Math.floor(scaled);
-  const right = Math.min(colors.length - 1, left + 1);
-  return interpolate(parseHex(colors[left]), parseHex(colors[right]), scaled - left);
+  return interpolate(
+    parseHex(colors[left]),
+    parseHex(colors[Math.min(colors.length - 1, left + 1)]),
+    scaled - left
+  );
 }
 
 function categoricalRamp(base) {
@@ -75,7 +78,7 @@ export function createGradientPlotPaint(profile, {
   const stops = values.map((_, index) => {
     const fraction = intensities[index] / maximum;
     const offset = Number(
-      ((mapped[index] - startPosition) / (endPosition - startPosition)).toFixed(12)
+      inverseLerp(mapped[index], startPosition, endPosition).toFixed(12)
     );
     return {
       offset: Object.is(offset, -0) ? 0 : offset,