ggaction 0.0.5 → 0.0.7

package/src/actions/marks/rect/actions.js

@@ -162,7 +162,11 @@ const editRectMark = action(
 );
 
 export function registerRectMarkActions(ProgramClass) {
-  ProgramClass.prototype.createRectMark = createRectMark;
   ProgramClass.prototype.editRectMark = editRectMark;
+  registerBasicRectMarkActions(ProgramClass);
+}
+
+export function registerBasicRectMarkActions(ProgramClass) {
+  ProgramClass.prototype.createRectMark = createRectMark;
   ProgramClass.prototype.rematerializeRectMark = rematerializeRectMark;
 }

package/src/actions/marks/rect/index.js

@@ -1 +1,4 @@
-export { registerRectMarkActions } from "./actions.js";
+export {
+  registerBasicRectMarkActions,
+  registerRectMarkActions
+} from "./actions.js";

package/src/actions/marks/rule/actions.js

@@ -238,7 +238,10 @@ const rematerializeRuleMark = action(
       }
     }
 
-    const resolvedConfig = resolved.markConfigs[id] ?? DEFAULT_RULE_CONFIG;
+    const resolvedConfig = {
+      ...DEFAULT_RULE_CONFIG,
+      ...resolved.markConfigs[id]
+    };
     const dashEncoding = layer.encoding?.strokeDash;
     const opacityEncoding = layer.encoding?.opacity;
     const strokeWidthEncoding = layer.encoding?.strokeWidth;

package/src/actions/regression/edit.js

@@ -12,12 +12,12 @@ import { validateCurveInterpolation } from "../../grammar/curveCommands.js";
 import { planDerivedDataRevision } from
   "../../materialization/dataProvenance.js";
 import { findLayer } from "../../selectors/layers.js";
+import { removeLegendKinds } from "../guides/legends/remove.js";
+import { requireRegressionField } from "./resolve.js";
 
 const OPTIONS = Object.freeze([
-  "target", "method", "degree", "span", "confidence", "interval", "band", "line"
-]);
-const STATISTICAL_OPTIONS = Object.freeze([
-  "method", "degree", "span", "confidence", "interval"
+  "target", "data", "x", "y", "groupBy", "method", "degree", "span",
+  "confidence", "interval", "band", "line"
 ]);
 const BAND_OPTIONS = Object.freeze([
   "color", "opacity", "stroke", "strokeWidth", "curve"
@@ -118,11 +118,137 @@ function resolveParameters(previous, args) {
   return normalizeRegressionParameters(raw);
 }
 
+function removeOwnedColorLegends(program, target) {
+  const kinds = Object.entries(program.guideConfigs.legend ?? {})
+    .filter(([kind, config]) =>
+      config?.target === target &&
+      (
+        config.channels?.includes("color") ||
+        ["gradient", "interval"].includes(kind)
+      )
+    )
+    .map(([kind]) => kind);
+  return kinds.length === 0 ? program : removeLegendKinds(program, kinds);
+}
+
 function removeBand(program, id) {
-  return program
+  const selectionIds = Object.entries(
+    program.materializationConfigs.selections ?? {}
+  ).filter(([, config]) => config.target === id).map(([selection]) => selection);
+  let next = program;
+  for (const [highlight, config] of Object.entries(
+    program.materializationConfigs.highlights ?? {}
+  )) {
+    if (config.target === id || selectionIds.includes(config.selection)) {
+      next = next._withoutMaterializationConfig(["highlights", highlight]);
+    }
+  }
+  for (const selection of selectionIds) {
+    next = next._withoutMaterializationConfig(["selections", selection]);
+  }
+  return next
     .editSemantic({ property: `layer[${id}]`, remove: true })
     .editGraphics({ target: id, remove: true })
-    ._withoutMaterializationConfig(["marks", id]);
+    ._withoutMaterializationConfig(["marks", id])
+    ._withContext({
+      ...(program.context.currentMark === id ? { currentMark: undefined } : {}),
+      ...(selectionIds.includes(program.context.currentSelection)
+        ? { currentSelection: undefined }
+        : {})
+    });
+}
+
+function regressionColorScale(owner, current, groupBy) {
+  if (groupBy === undefined || groupBy === current.groupBy) {
+    return current.colorScale;
+  }
+  return owner.encoding?.color?.field === groupBy
+    ? owner.encoding.color.scale
+    : `${owner.id}RegressionColor`;
+}
+
+function updateRegressionLineSemantics(program, current, {
+  x,
+  y,
+  groupBy,
+  colorScale
+}) {
+  let next = program
+    .editSemantic({
+      property: `layer[${current.lineId}].encoding.x.field`,
+      value: x
+    })
+    .editSemantic({
+      property: `layer[${current.lineId}].encoding.y.field`,
+      value: y
+    });
+  if (groupBy === undefined) {
+    if (findLayer(next, current.lineId).encoding?.group !== undefined) {
+      next = next.editSemantic({
+        property: `layer[${current.lineId}].encoding.group`,
+        remove: true
+      });
+    }
+    if (findLayer(next, current.lineId).encoding?.color !== undefined) {
+      next = next.editSemantic({
+        property: `layer[${current.lineId}].encoding.color`,
+        remove: true
+      });
+      next = removeOwnedColorLegends(next, current.lineId);
+    }
+    return next;
+  }
+  next = findLayer(next, current.lineId).encoding?.group === undefined
+    ? next.encodeGroup({ target: current.lineId, field: groupBy })
+    : next.editSemantic({
+        property: `layer[${current.lineId}].encoding.group.field`,
+        value: groupBy
+      });
+  const color = findLayer(next, current.lineId).encoding?.color;
+  if (color === undefined || color.scale !== colorScale) {
+    next = next.encodeColor({
+      target: current.lineId,
+      field: groupBy,
+      scale: { id: colorScale }
+    });
+  } else {
+    next = next.editSemantic({
+      property: `layer[${current.lineId}].encoding.color.field`,
+      value: groupBy
+    });
+  }
+  return next;
+}
+
+function updateRegressionBandSemantics(program, bandId, { x, groupBy }) {
+  if (bandId === undefined) return program;
+  let next = program.editSemantic({
+    property: `layer[${bandId}].encoding.x.field`,
+    value: x
+  });
+  const layer = findLayer(next, bandId);
+  if (groupBy === undefined && layer.encoding?.group !== undefined) {
+    next = next.editSemantic({
+      property: `layer[${bandId}].encoding.group`,
+      remove: true
+    });
+  } else if (groupBy !== undefined) {
+    next = layer.encoding?.group === undefined
+      ? next.encodeGroup({ target: bandId, field: groupBy })
+      : next.editSemantic({
+          property: `layer[${bandId}].encoding.group.field`,
+          value: groupBy
+        });
+  }
+  const config = next.markConfigs[bandId];
+  return next._withMarkConfig(bandId, {
+    ...config,
+    errorBand: {
+      ...config.errorBand,
+      position: { ...config.errorBand.position, field: x },
+      groupBy
+    }
+  });
 }
 
 export const editRegression = action(
@@ -137,10 +263,27 @@ export const editRegression = action(
     }
     const owner = resolveRegressionOwner(this, args.target);
     const current = this.markConfigs[owner.id].regression;
+    const source = Object.hasOwn(args, "data")
+      ? validateUserId(args.data, "Regression data id")
+      : current.source;
+    const x = Object.hasOwn(args, "x")
+      ? requireRegressionField(args.x, "Regression x")
+      : current.x;
+    const y = Object.hasOwn(args, "y")
+      ? requireRegressionField(args.y, "Regression y")
+      : current.y;
+    const groupBy = Object.hasOwn(args, "groupBy")
+      ? args.groupBy === false
+        ? undefined
+        : requireRegressionField(args.groupBy, "Regression groupBy")
+      : current.groupBy;
+    const colorScale = regressionColorScale(owner, current, groupBy);
     const parameters = resolveParameters(current.parameters, args);
-    const changesStatistics = STATISTICAL_OPTIONS.some(
-      key => Object.hasOwn(args, key)
-    ) && JSON.stringify(parameters) !== JSON.stringify(current.parameters);
+    const changesProvenance = source !== current.source ||
+      x !== current.x || y !== current.y || groupBy !== current.groupBy;
+    const changesParameters = JSON.stringify(parameters) !==
+      JSON.stringify(current.parameters);
+    const changesStatistics = changesProvenance || changesParameters;
     const bandPatch = Object.hasOwn(args, "band")
       ? validateBandPatch(args.band)
       : undefined;
@@ -156,8 +299,6 @@ export const editRegression = action(
       (bandPatch === false
         ? false
         : hadBand || bandPatch !== undefined || current.parameters.method === "loess");
-    let dataId = current.dataId;
-    let next = this;
     const revision = changesStatistics
       ? planDerivedDataRevision(this, {
           owner: owner.id,
@@ -170,76 +311,96 @@ export const editRegression = action(
         })
       : undefined;
 
-    if (changesStatistics) {
-      dataId = revision.id;
-      next = next.createRegressionData({
-        id: dataId,
-        source: current.source,
-        x: current.x,
-        y: current.y,
-        ...(current.groupBy === undefined ? {} : { groupBy: current.groupBy }),
-        ...parameters
-      });
-      for (const rebind of revision.rebinds) {
-        next = next.rebindLayerData(rebind);
+    const applyEdit = program => {
+      let dataId = current.dataId;
+      let next = program;
+      if (changesStatistics) {
+        dataId = revision.id;
+        next = next.createRegressionData({
+          id: dataId,
+          source,
+          x,
+          y,
+          ...(groupBy === undefined ? {} : { groupBy }),
+          ...parameters
+        });
+        for (const rebind of revision.rebinds) {
+          next = next.rebindLayerData(rebind);
+        }
       }
-    }
 
-    let bandId = current.bandId;
-    if (hadBand && !wantsBand) {
-      next = removeBand(next, current.bandId);
-      bandId = undefined;
-    } else if (!hadBand && wantsBand) {
-      bandId = `${owner.id}RegressionBands`;
-      next = next.createRegressionBand({
-        id: bandId,
-        data: dataId,
-        x: current.x,
-        lower: "__regression_ci_lower",
-        upper: "__regression_ci_upper",
-        ...(current.groupBy === undefined ? {} : { groupBy: current.groupBy }),
-        coordinate: current.coordinate,
-        xScale: current.xScale,
-        yScale: current.yScale,
-        ...(bandPatch === undefined || bandPatch === false ? {} : bandPatch)
-      });
-    } else if (hadBand && changesStatistics) {
-      const bandConfig = next.markConfigs[bandId];
-      next = next._withMarkConfig(bandId, {
-          ...bandConfig,
-          errorBand: { ...bandConfig.errorBand, data: dataId }
+      let bandId = current.bandId;
+      if (hadBand && !wantsBand) {
+        next = removeBand(next, current.bandId);
+        bandId = undefined;
+      } else if (!hadBand && wantsBand) {
+        bandId = `${owner.id}RegressionBands`;
+        next = next.createRegressionBand({
+          id: bandId,
+          data: dataId,
+          x,
+          lower: "__regression_ci_lower",
+          upper: "__regression_ci_upper",
+          ...(groupBy === undefined ? {} : { groupBy }),
+          coordinate: current.coordinate,
+          xScale: current.xScale,
+          yScale: current.yScale,
+          ...(bandPatch === undefined || bandPatch === false ? {} : bandPatch)
         });
-    }
+      } else if (hadBand && changesStatistics) {
+        const bandConfig = next.markConfigs[bandId];
+        next = next._withMarkConfig(bandId, {
+            ...bandConfig,
+            errorBand: { ...bandConfig.errorBand, data: dataId }
+          });
+      }
 
-    if (bandId !== undefined) {
-      if (
-        bandPatch !== undefined &&
-        bandPatch !== false &&
-        Object.keys(bandPatch).length > 0 &&
-        hadBand
-      ) {
-        next = next.editRegressionBand({ target: bandId, ...bandPatch });
+      if (changesProvenance) {
+        next = updateRegressionLineSemantics(next, current, {
+          x,
+          y,
+          groupBy,
+          colorScale
+        });
+        next = updateRegressionBandSemantics(next, bandId, { x, groupBy });
+      }
+      if (bandId !== undefined) {
+        if (
+          bandPatch !== undefined &&
+          bandPatch !== false &&
+          Object.keys(bandPatch).length > 0 &&
+          hadBand
+        ) {
+          next = next.editRegressionBand({ target: bandId, ...bandPatch });
+        } else if (changesStatistics) {
+          next = next.rematerializeAreaMark({ id: bandId });
+        }
+      }
+      if (linePatch !== undefined && Object.keys(linePatch).length > 0) {
+        next = next.editRegressionLine({ target: current.lineId, ...linePatch });
       } else if (changesStatistics) {
-        next = next.rematerializeAreaMark({ id: bandId });
+        next = next.rematerializeLineMark({ id: current.lineId });
       }
-    }
-    if (linePatch !== undefined && Object.keys(linePatch).length > 0) {
-      next = next.editRegressionLine({ target: current.lineId, ...linePatch });
-    } else if (changesStatistics) {
-      next = next.rematerializeLineMark({ id: current.lineId });
-    }
 
-    if (changesStatistics) {
-      next = next.releaseDerivedData(revision.release);
-    }
-    return next._withMarkConfig(owner.id, {
-      ...next.markConfigs[owner.id],
-      regression: {
-        ...current,
-        dataId,
-        bandId,
-        parameters
+      if (changesStatistics) {
+        next = next.releaseDerivedData(revision.release);
       }
-    });
+      return next._withMarkConfig(owner.id, {
+        ...next.markConfigs[owner.id],
+        regression: {
+          ...current,
+          source,
+          x,
+          y,
+          groupBy,
+          colorScale,
+          dataId,
+          bandId,
+          parameters
+        }
+      });
+    };
+    if (changesStatistics || hadBand !== wantsBand) applyEdit(this);
+    return applyEdit(this);
   }
 );

package/src/actions/scales/index.js

@@ -4,8 +4,12 @@ import { rematerializeScale } from "./materialize.js";
 import { setQuantitativeColorScale } from "./quantitativeColor.js";
 
 export function registerScaleActions(ProgramClass) {
-  ProgramClass.prototype.createScale = createScale;
   ProgramClass.prototype.editScale = editScale;
+  registerBasicScaleActions(ProgramClass);
+}
+
+export function registerBasicScaleActions(ProgramClass) {
+  ProgramClass.prototype.createScale = createScale;
   ProgramClass.prototype.rematerializeScale = rematerializeScale;
   ProgramClass.prototype.setQuantitativeColorScale = setQuantitativeColorScale;
 }

package/src/actions/selection/actions.js

@@ -17,6 +17,7 @@ import {
   findSelectionPolicy,
   requireSelectionPolicy
 } from "../../materialization/selection/policies/index.js";
+import { legendGraphicIds } from "../../materialization/guides/resources.js";
 import {
   normalizeDimOthers,
   validateUnitInterval
@@ -27,6 +28,8 @@ const SELECTOR_KEYS = Object.freeze([
   "inclusive", "count", "groupBy", "ties"
 ]);
 const SELECT_OPTIONS = Object.freeze(["id", "target", ...SELECTOR_KEYS]);
+const EDIT_SELECTION_OPTIONS = Object.freeze(["selection", ...SELECTOR_KEYS]);
+const REMOVE_SELECTION_OPTIONS = Object.freeze(["selection"]);
 const HIGHLIGHT_OPTIONS = Object.freeze([
   "id", "target", "select", "selection", "color", "opacity", "fill",
   "stroke", "strokeWidth", "strokeDash", "shape", "size", "offset",
@@ -63,6 +66,51 @@ function hasLegendSelection(program, target, selection) {
     selector.field === legend.field;
 }
 
+function categoricalLegendKind(program, target) {
+  return ["series", "color"].find(
+    kind => program.guideConfigs.legend?.[kind]?.target === target
+  );
+}
+
+function resetCategoricalLegendSymbols(program, target) {
+  const kind = categoricalLegendKind(program, target);
+  if (kind === undefined) return program;
+  let next = program;
+  for (const id of legendGraphicIds(kind).filter(id => id.includes("Symbol"))) {
+    const graphic = next.graphicSpec.objects[id];
+    if (graphic === undefined) continue;
+    next = graphic.type === "collection"
+      ? next.editGraphics({ target: id, property: "items", value: [] })
+      : next.editGraphics({ target: id, property: "length", value: 0 });
+  }
+  return next.rematerializeLegendSymbols();
+}
+
+function targetHighlightEntries(program, target) {
+  return Object.entries(program.materializationConfigs.highlights ?? {})
+    .filter(([, config]) => config.target === target);
+}
+
+function rebuildTargetHighlights(program, target) {
+  const layer = resolveTarget(program, target, "highlight mark");
+  const highlights = targetHighlightEntries(program, target);
+  let baseline = program;
+  for (const [id] of highlights) {
+    baseline = baseline._withoutMaterializationConfig(["highlights", id]);
+  }
+  const graphic = baseline.graphicSpec.objects[target];
+  baseline = graphic.type === "collection"
+    ? baseline.editGraphics({ target, property: "items", value: [] })
+    : baseline.editGraphics({ target, property: "length", value: 0 });
+  baseline = baseline[requireSelectionPolicy(
+    layer.mark.type
+  ).rematerializeOp]({ id: target });
+  baseline = resetCategoricalLegendSymbols(baseline, target);
+  return highlights.length === 0
+    ? baseline
+    : baseline.rematerializeMarkHighlights({ target, highlights });
+}
+
 function selectedKeys(args, resolved) {
   if (args.keys === undefined) return resolved.keys;
   if (!Array.isArray(args.keys) || !args.keys.every(key =>
@@ -86,6 +134,79 @@ export const selectMarks = action(
   }
 );
 
+export const editMarkSelection = action(
+  {
+    op: "editMarkSelection",
+    description: "Replace one stored mark selector while preserving its identity and target."
+  },
+  function (args = {}) {
+    validateKeys(args, EDIT_SELECTION_OPTIONS, "editMarkSelection");
+    const current = resolveStoredSelection(this, args.selection);
+    const replacement = resolveMarkSelection(
+      this,
+      current.definition.target,
+      selectorFrom(args)
+    );
+    const next = this
+      ._withSelectionConfig(current.id, {
+        target: current.definition.target,
+        selector: replacement.selector
+      })
+      ._withContext({ currentSelection: current.id });
+    const hasDependentHighlight = Object.values(
+      next.materializationConfigs.highlights ?? {}
+    ).some(config => config.selection === current.id);
+    return hasDependentHighlight
+      ? rebuildTargetHighlights(next, current.definition.target)
+      : next;
+  }
+);
+
+export const removeMarkHighlight = action(
+  {
+    op: "removeMarkHighlight",
+    description: "Remove one stored highlight assignment and restore the clean mark baseline."
+  },
+  function (args = {}) {
+    validateKeys(args, REMOVE_SELECTION_OPTIONS, "removeMarkHighlight");
+    const current = resolveStoredSelection(this, args.selection);
+    const dependent = Object.entries(
+      this.materializationConfigs.highlights ?? {}
+    ).filter(([, config]) => config.selection === current.id);
+    if (dependent.length === 0) {
+      throw new Error(
+        `Selection "${current.id}" has no highlight assignment.`
+      );
+    }
+    let next = this;
+    for (const [id] of dependent) {
+      next = next._withoutMaterializationConfig(["highlights", id]);
+    }
+    return rebuildTargetHighlights(next, current.definition.target);
+  }
+);
+
+export const removeMarkSelection = action(
+  {
+    op: "removeMarkSelection",
+    description: "Remove one stored selection after removing its dependent highlight."
+  },
+  function (args = {}) {
+    validateKeys(args, REMOVE_SELECTION_OPTIONS, "removeMarkSelection");
+    const current = resolveStoredSelection(this, args.selection);
+    const hasDependentHighlight = Object.values(
+      this.materializationConfigs.highlights ?? {}
+    ).some(config => config.selection === current.id);
+    let next = hasDependentHighlight
+      ? this.removeMarkHighlight({ selection: current.id })
+      : this;
+    next = next._withoutMaterializationConfig(["selections", current.id]);
+    return this.context.currentSelection === current.id
+      ? next._withContext({ currentSelection: undefined })
+      : next;
+  }
+);
+
 export const applyPointHighlight = action(
   { op: "applyPointHighlight", description: "Apply selected point appearance and geometry." },
   function (args = {}) {
@@ -393,8 +514,7 @@ export const highlightMarks = action(
     const existing = next.materializationConfigs.highlights?.[selection];
     if (existing !== undefined) {
       next = next._withoutMaterializationConfig(["highlights", selection]);
-      const policy = requireSelectionPolicy(layer.mark.type);
-      next = next[policy.rematerializeOp]({ id: resolved.definition.target });
+      next = rebuildTargetHighlights(next, resolved.definition.target);
     }
     const policy = requireSelectionPolicy(layer.mark.type);
     next = next[policy.applyHighlightOp]({ selection, style, keys });

package/src/actions/selection/index.js

@@ -5,14 +5,20 @@ import {
   applyPointHighlight,
   applyRuleHighlight,
   dimUnselectedMarkItems,
+  editMarkSelection,
   highlightMarks,
   placeSelectedMarkItemsLast,
   rematerializeMarkHighlights,
+  removeMarkHighlight,
+  removeMarkSelection,
   selectMarks
 } from "./actions.js";
 
 export function registerSelectionActions(ProgramClass) {
   ProgramClass.prototype.selectMarks = selectMarks;
+  ProgramClass.prototype.editMarkSelection = editMarkSelection;
+  ProgramClass.prototype.removeMarkHighlight = removeMarkHighlight;
+  ProgramClass.prototype.removeMarkSelection = removeMarkSelection;
   ProgramClass.prototype.highlightMarks = highlightMarks;
   ProgramClass.prototype.applyBarHighlight = applyBarHighlight;
   ProgramClass.prototype.applyRectHighlight = applyRectHighlight;

package/src/basic.js

@@ -0,0 +1,2 @@
+export { chart } from "./BasicChartProgram.js";
+export { render } from "./renderers/canvas/index.js";

package/src/core/vocabulary.js

@@ -198,6 +198,13 @@ export const CATEGORICAL_LEGEND_CHANNELS = Object.freeze([
   "shape"
 ]);
 
+export const LEGEND_CHANNELS = Object.freeze([
+  ...CATEGORICAL_LEGEND_CHANNELS,
+  "strokeWidth",
+  "size",
+  "opacity"
+]);
+
 export const LEGEND_CONFIG_KINDS = Object.freeze([
   "series",
   "color",