ggaction 0.0.9 → 0.0.11

package/src/actions/scales/definitions.js

@@ -22,49 +22,70 @@ import {
   SCALE_ROLES,
   validateScalePropertyForType,
   validateScaleTypeForRole,
-  isDiscretePositionScaleType
+  isDiscretePositionScaleType,
+  withScaleUnknown
 } from "../../grammar/scales/index.js";
 import {
   validateRadialRange,
   validateThetaRange
 } from "../../grammar/polar.js";
-import { withScaleUnknown } from "../../grammar/scales/index.js";
 import { findSemanticScale } from "../../selectors/scales.js";
 
-const BASE_OPTIONS = Object.freeze(["id", "type", "domain", "range"]);
-const POSITION_OPTIONS = Object.freeze([
+const BASE_OPTIONS = ["id", "type", "domain", "range"];
+const UNKNOWN_OPTIONS = [...BASE_OPTIONS, "unknown"];
+const CLAMP_REVERSE = ["clamp", "reverse"];
+const BOOLEAN_OPTIONS = ["nice", "zero", ...CLAMP_REVERSE];
+const TRANSFORM_OPTIONS = ["base", "exponent", "constant"];
+const POSITION_OPTIONS = [
   ...BASE_OPTIONS,
-  "nice",
-  "zero",
-  "clamp",
-  "reverse",
-  "base",
-  "exponent",
-  "constant",
+  ...BOOLEAN_OPTIONS,
+  ...TRANSFORM_OPTIONS,
   "paddingInner",
   "paddingOuter",
   "padding",
   "align",
   "unknown"
-]);
-const COLOR_OPTIONS = Object.freeze([...BASE_OPTIONS, "palette", "unknown"]);
-const SEQUENTIAL_COLOR_OPTIONS = Object.freeze([
+];
+const COLOR_OPTIONS = [...BASE_OPTIONS, "palette", "unknown"];
+const SEQUENTIAL_COLOR_OPTIONS = [
   ...COLOR_OPTIONS,
   "interpolate",
-  "clamp",
-  "reverse"
-]);
-const OPACITY_OPTIONS = Object.freeze([
-  ...POSITION_OPTIONS,
-  "clamp",
-  "reverse"
-]);
+  ...CLAMP_REVERSE
+];
+const OPACITY_OPTIONS = [...BASE_OPTIONS, ...BOOLEAN_OPTIONS, "unknown"];
+const STROKE_WIDTH_OPTIONS = [
+  ...BASE_OPTIONS, ...BOOLEAN_OPTIONS, ...TRANSFORM_OPTIONS
+];
 
 function optionsObject(options) {
   if (!isPlainObject(options)) {
     throw new TypeError("Encoding scale must be a plain object.");
   }
-  return options;
+}
+
+function validateBooleanOptions(options, properties, type) {
+  for (const property of properties) {
+    if (options[property] !== undefined && typeof options[property] !== "boolean") {
+      throw new TypeError(`Scale ${property} must be a boolean.`);
+    }
+    if (type !== undefined && options[property] !== undefined) {
+      validateScalePropertyForType(type, property);
+    }
+  }
+}
+
+function assignOptions(scale, options, existing, properties) {
+  for (const property of properties) {
+    const value = options[property] ?? existing?.[property];
+    if (value !== undefined) scale[property] = value;
+  }
+  return scale;
+}
+
+function validatePaletteRange(options) {
+  if (options.palette !== undefined && options.range !== undefined) {
+    throw new Error("Color scale cannot specify both palette and range.");
+  }
 }
 
 export function resolvePositionScaleDefinition(
@@ -78,14 +99,15 @@ export function resolvePositionScaleDefinition(
   validateKeys(options, POSITION_OPTIONS, "scale");
   const id = validateUserId(options.id ?? channel, "Scale id");
   const existing = findSemanticScale(program, id);
+  const discrete = ["ordinal", "nominal"].includes(fieldType);
   const expectedType = fieldType === "temporal"
     ? "time"
-    : ["ordinal", "nominal"].includes(fieldType)
+    : discrete
       ? defaults.discreteType ?? "point"
       : "linear";
   const type = options.type ?? existing?.type ?? expectedType;
   if (fieldType === "temporal") validateTimeScaleType(type);
-  else if (["ordinal", "nominal"].includes(fieldType)) {
+  else if (discrete) {
     if (!isDiscretePositionScaleType(type)) {
       throw new Error(
         `Scale type "${type}" is not valid for discrete position.`
@@ -104,14 +126,17 @@ export function resolvePositionScaleDefinition(
         ...(existing === undefined && defaults.nice !== undefined
           ? { nice: defaults.nice }
           : {}),
-        ...(existing === undefined && defaults.zero !== undefined
+        ...(
+          existing === undefined &&
+          defaults.zero !== undefined &&
+          (type !== "log" || defaults.zero)
           ? { zero: defaults.zero }
           : {})
       },
       retainCoreOnTypeChange: true,
       retainCompatibleOnTypeChange: true,
       validateDomain: (_scaleType, value) =>
-        ["ordinal", "nominal"].includes(fieldType)
+        discrete
           ? validateOrdinalDomain(value)
           : validateScaleDomain(value),
       validateRange: (_scaleType, value) => channel === "theta"
@@ -127,9 +152,7 @@ export function resolvePositionScaleDefinition(
 export function resolveColorScaleDefinition(program, options) {
   optionsObject(options);
   validateKeys(options, COLOR_OPTIONS, "scale");
-  if (options.palette !== undefined && options.range !== undefined) {
-    throw new Error("Color scale cannot specify both palette and range.");
-  }
+  validatePaletteRange(options);
   const id = validateUserId(options.id ?? "color", "Scale id");
   const existing = findSemanticScale(program, id);
   const range = options.palette === undefined
@@ -165,20 +188,14 @@ export function resolveSequentialColorScaleDefinition(
 ) {
   optionsObject(options);
   validateKeys(options, SEQUENTIAL_COLOR_OPTIONS, "scale");
-  if (options.palette !== undefined && options.range !== undefined) {
-    throw new Error("Color scale cannot specify both palette and range.");
-  }
+  validatePaletteRange(options);
   const id = validateUserId(options.id ?? "color", "Scale id");
   const existing = findSemanticScale(program, id);
   const type = options.type ?? existing?.type ?? "sequential";
   if (type !== "sequential") {
     throw new Error(`Unsupported continuous color scale type "${type}".`);
   }
-  for (const property of ["clamp", "reverse"]) {
-    if (options[property] !== undefined && typeof options[property] !== "boolean") {
-      throw new TypeError(`Scale ${property} must be a boolean.`);
-    }
-  }
+  validateBooleanOptions(options, CLAMP_REVERSE);
   const requestedRange = options.palette === undefined
     ? options.range
     : { palette: options.palette };
@@ -193,11 +210,11 @@ export function resolveSequentialColorScaleDefinition(
       options.interpolate ?? existing?.interpolate ?? "rgb"
     )
   };
-  const clamp = options.clamp ?? existing?.clamp;
-  const reverse = options.reverse ?? existing?.reverse;
-  if (clamp !== undefined) scale.clamp = clamp;
-  if (reverse !== undefined) scale.reverse = reverse;
-  return withScaleUnknown(scale, { ...existing, ...options }, "color");
+  return withScaleUnknown(
+    assignOptions(scale, options, existing, CLAMP_REVERSE),
+    { ...existing, ...options },
+    "color"
+  );
 }
 
 export function resolveQuantitativeColorScaleDefinition(
@@ -213,26 +230,16 @@ export function resolveQuantitativeColorScaleDefinition(
   if (type === "sequential") {
     return resolveSequentialColorScaleDefinition(program, fieldType, options);
   }
-  validateKeys(options, [
-    ...COLOR_OPTIONS,
-    "clamp",
-    "reverse"
-  ], "scale");
+  validateKeys(options, [...COLOR_OPTIONS, ...CLAMP_REVERSE], "scale");
   if (fieldType !== "quantitative") {
     throw new Error(`Scale type "${type}" requires quantitative color.`);
   }
   validateScaleTypeForRole(type, SCALE_ROLES.discretizedColor);
-  if (options.palette !== undefined && options.range !== undefined) {
-    throw new Error("Color scale cannot specify both palette and range.");
-  }
-  for (const property of ["clamp", "reverse"]) {
-    if (options[property] !== undefined && typeof options[property] !== "boolean") {
-      throw new TypeError(`Scale ${property} must be a boolean.`);
-    }
-    if (options[property] !== undefined) validateScalePropertyForType(type, property);
-  }
+  validatePaletteRange(options);
+  validateBooleanOptions(options, CLAMP_REVERSE, type);
   const id = validateUserId(options.id ?? "color", "Scale id");
   const existing = findSemanticScale(program, id);
+  const previous = existing?.type === type ? existing : undefined;
   const requestedRange = options.palette === undefined
     ? options.range
     : { palette: options.palette };
@@ -241,35 +248,41 @@ export function resolveQuantitativeColorScaleDefinition(
     type,
     domain: validateDiscretizedColorDomain(
       type,
-      options.domain ?? (existing?.type === type ? existing.domain : "auto")
+      options.domain ?? previous?.domain ?? "auto"
     ),
     range: validateDiscretizedColorRange(
-      requestedRange ?? (existing?.type === type ? existing.range : { palette: "viridis" })
+      requestedRange ?? previous?.range ?? { palette: "viridis" }
     )
   };
-  const clamp = options.clamp ?? (existing?.type === type ? existing.clamp : undefined);
-  const reverse = options.reverse ?? (existing?.type === type ? existing.reverse : undefined);
-  if (clamp !== undefined) scale.clamp = clamp;
-  if (reverse !== undefined) scale.reverse = reverse;
-  return withScaleUnknown(scale, { ...existing, ...options }, "color");
+  return withScaleUnknown(
+    assignOptions(scale, options, previous, CLAMP_REVERSE),
+    { ...existing, ...options },
+    "color"
+  );
 }
 
-export function resolveStrokeDashScaleDefinition(program, options) {
+function resolveOrdinalScaleDefinition(program, options, channel, rangeValidator) {
   optionsObject(options);
-  validateKeys(options, [...BASE_OPTIONS, "unknown"], "scale");
-  const id = validateUserId(options.id ?? "strokeDash", "Scale id");
+  validateKeys(options, UNKNOWN_OPTIONS, "scale");
+  const id = validateUserId(options.id ?? channel, "Scale id");
   const existing = findSemanticScale(program, id);
   return withScaleUnknown({
     id,
     type: validateOrdinalScaleType(options.type ?? existing?.type ?? "ordinal"),
     domain: validateOrdinalDomain(options.domain ?? existing?.domain ?? "auto"),
-    range: validateStrokeDashRange(options.range ?? existing?.range ?? "auto")
-  }, { ...existing, ...options }, "strokeDash");
+    range: rangeValidator(options.range ?? existing?.range ?? "auto")
+  }, { ...existing, ...options }, channel);
+}
+
+export function resolveStrokeDashScaleDefinition(program, options) {
+  return resolveOrdinalScaleDefinition(
+    program, options, "strokeDash", validateStrokeDashRange
+  );
 }
 
 export function resolveAppearanceScaleDefinition(program, channel, options) {
   optionsObject(options);
-  validateKeys(options, [...BASE_OPTIONS, "unknown"], "scale");
+  validateKeys(options, UNKNOWN_OPTIONS, "scale");
   const id = validateUserId(options.id ?? channel, "Scale id");
   const existing = findSemanticScale(program, id);
   const shape = channel === "shape";
@@ -293,38 +306,31 @@ export function resolveOpacityScaleDefinition(program, options) {
   const id = validateUserId(options.id ?? "opacity", "Scale id");
   const existing = findSemanticScale(program, id);
   const type = validateLinearScaleType(options.type ?? existing?.type ?? "linear");
-  for (const property of ["nice", "zero", "clamp", "reverse"]) {
-    if (options[property] !== undefined && typeof options[property] !== "boolean") {
-      throw new TypeError(`Scale ${property} must be a boolean.`);
-    }
-  }
+  validateBooleanOptions(options, BOOLEAN_OPTIONS, type);
   const scale = {
     id,
     type,
     domain: validateScaleDomain(options.domain ?? existing?.domain ?? "auto"),
     range: validateOpacityRange(options.range ?? existing?.range ?? "auto")
   };
-  const nice = options.nice ?? existing?.nice;
-  const zero = options.zero ?? existing?.zero;
-  const clamp = options.clamp ?? existing?.clamp;
-  const reverse = options.reverse ?? existing?.reverse;
-  if (nice !== undefined) scale.nice = nice;
-  if (zero !== undefined) scale.zero = zero;
-  if (clamp !== undefined) scale.clamp = clamp;
-  if (reverse !== undefined) scale.reverse = reverse;
-  return withScaleUnknown(scale, { ...existing, ...options }, "opacity");
+  return withScaleUnknown(
+    assignOptions(scale, options, existing, BOOLEAN_OPTIONS),
+    { ...existing, ...options },
+    "opacity"
+  );
 }
 
 export function resolveStrokeWidthScaleDefinition(program, options) {
   optionsObject(options);
-  validateKeys(options, OPACITY_OPTIONS, "scale");
+  validateKeys(options, STROKE_WIDTH_OPTIONS, "scale");
   const id = validateUserId(options.id ?? "strokeWidth", "Scale id");
   const existing = findSemanticScale(program, id);
   const type = options.type ?? existing?.type ?? "linear";
   validateScaleTypeForRole(type, SCALE_ROLES.quantitativePosition);
-  for (const property of ["nice", "zero", "clamp", "reverse"]) {
-    if (options[property] !== undefined && typeof options[property] !== "boolean") {
-      throw new TypeError(`Scale ${property} must be a boolean.`);
+  validateBooleanOptions(options, BOOLEAN_OPTIONS, type);
+  for (const property of TRANSFORM_OPTIONS) {
+    if (options[property] !== undefined) {
+      validateScalePropertyForType(type, property);
     }
   }
   const domain = validateScaleDomain(options.domain ?? existing?.domain ?? "auto");
@@ -337,22 +343,13 @@ export function resolveStrokeWidthScaleDefinition(program, options) {
     domain,
     range: validateStrokeWidthRange(options.range ?? existing?.range ?? "auto")
   };
-  for (const property of ["nice", "zero", "clamp", "reverse", "base", "exponent", "constant"]) {
-    const value = options[property] ?? existing?.[property];
-    if (value !== undefined) scale[property] = value;
-  }
-  return scale;
+  return assignOptions(
+    scale, options, existing, [...BOOLEAN_OPTIONS, ...TRANSFORM_OPTIONS]
+  );
 }
 
 export function resolveOffsetScaleDefinition(program, options, channel = "xOffset") {
-  optionsObject(options);
-  validateKeys(options, [...BASE_OPTIONS, "unknown"], "scale");
-  const id = validateUserId(options.id ?? channel, "Scale id");
-  const existing = findSemanticScale(program, id);
-  return withScaleUnknown({
-    id,
-    type: validateOrdinalScaleType(options.type ?? existing?.type ?? "ordinal"),
-    domain: validateOrdinalDomain(options.domain ?? existing?.domain ?? "auto"),
-    range: validateScaleRange(options.range ?? existing?.range ?? "auto")
-  }, { ...existing, ...options }, channel);
+  return resolveOrdinalScaleDefinition(
+    program, options, channel, validateScaleRange
+  );
 }

package/src/actions/scales/materialize.js

@@ -100,6 +100,11 @@ export const rematerializeScale = action(
         continue;
       }
       if (materializationMode === "defer") continue;
+      if (Object.values(this.materializationConfigs.highlights ?? {})
+        .some(config => config.target === consumer.layer.id)) {
+        next = next.rematerializePointMark({ id: consumer.layer.id });
+        continue;
+      }
       next = next.editGraphics({
         target: consumer.layer.id,
         property: channel === "color" ? "fill" : channel,

package/src/actions/selection/actions.js

@@ -121,6 +121,57 @@ function selectedKeys(args, resolved) {
   return args.keys;
 }
 
+function selectedGraphicItems(program, resolved, keys) {
+  const selected = new Set(keys);
+  const graphic = program.graphicSpec.objects[resolved.definition.target];
+  const keyByGraphic = new Map(resolved.items.flatMap(item =>
+    item.graphicIds.map(id => [id, item.key])
+  ));
+  return {
+    selected,
+    target: resolved.definition.target,
+    items: graphic.items.map(child => ({
+      key: keyByGraphic.get(child.id),
+      child: { type: child.type ?? graphic.type, properties: child.properties }
+    }))
+  };
+}
+
+function editSelectedItems(
+  program,
+  resolved,
+  keys,
+  transform,
+  complement = false
+) {
+  const { selected, target, items } = selectedGraphicItems(program, resolved, keys);
+  return program.editGraphics({
+    target,
+    property: "items",
+    value: items.map(item => selected.has(item.key) !== complement
+      ? transform(item.child)
+      : item.child)
+  });
+}
+
+function applyHighlight(program, config, keys) {
+  let next = program[requireSelectionPolicy(config.markType).applyHighlightOp]({
+    selection: config.selection,
+    style: config.style,
+    keys
+  });
+  if (config.dimOthers !== false) {
+    next = next.dimUnselectedMarkItems({
+      selection: config.selection,
+      opacity: config.dimOthers.opacity,
+      keys
+    });
+  }
+  return config.bringToFront
+    ? next.placeSelectedMarkItemsLast({ selection: config.selection, keys })
+    : next;
+}
+
 export const selectMarks = action(
   { op: "selectMarks", description: "Create one reusable selection over final mark items." },
   function (args = {}) {
@@ -217,24 +268,9 @@ export const applyPointHighlight = action(
       throw new Error("applyPointHighlight requires a point selection.");
     }
     if (keys.length === 0) return this;
-    const selected = new Set(keys);
-    const graphic = this.graphicSpec.objects[resolved.definition.target];
-    const keyByGraphic = new Map(resolved.items.flatMap(item =>
-      item.graphicIds.map(id => [id, item.key])
-    ));
-    const items = graphic.items.map(child =>
-      selected.has(keyByGraphic.get(child.id))
-        ? transformPointHighlightChild({
-            type: child.type ?? graphic.type,
-            properties: child.properties
-          }, args.style)
-        : { type: child.type ?? graphic.type, properties: child.properties }
+    return editSelectedItems(this, resolved, keys, item =>
+      transformPointHighlightChild(item, args.style)
     );
-    return this.editGraphics({
-      target: resolved.definition.target,
-      property: "items",
-      value: items
-    });
   }
 );
 
@@ -265,21 +301,12 @@ function applyRectangularHighlight(
     throw new Error(`${operation} requires a ${markType} selection.`);
   }
   if (keys.length === 0) return program;
-  const selected = new Set(keys);
-  const graphic = program.graphicSpec.objects[resolved.definition.target];
-  const keyByGraphic = new Map(resolved.items.flatMap(item =>
-    item.graphicIds.map(id => [id, item.key])
-  ));
-  return program.editGraphics({
-    target: resolved.definition.target,
-    property: "items",
-    value: graphic.items.map(child => ({
-      type: child.type ?? graphic.type,
-      properties: selected.has(keyByGraphic.get(child.id))
-        ? transformRectangularProperties(child.properties, args.style, offset)
-        : child.properties
-    }))
-  });
+  return editSelectedItems(program, resolved, keys, item => ({
+    ...item,
+    properties: transformRectangularProperties(
+      item.properties, args.style, offset
+    )
+  }));
 }
 
 export const applyBarHighlight = action(
@@ -316,21 +343,10 @@ export const applyPathHighlight = action(
       throw new Error("applyPathHighlight requires a path selection policy.");
     }
     if (keys.length === 0) return this;
-    const selected = new Set(keys);
-    const graphic = this.graphicSpec.objects[resolved.definition.target];
-    const keyByGraphic = new Map(resolved.items.flatMap(item =>
-      item.graphicIds.map(id => [id, item.key])
-    ));
-    return this.editGraphics({
-      target: resolved.definition.target,
-      property: "items",
-      value: graphic.items.map(child => ({
-        type: child.type ?? graphic.type,
-        properties: selected.has(keyByGraphic.get(child.id))
-          ? transformPathHighlightProperties(child.properties, args.style)
-          : child.properties
-      }))
-    });
+    return editSelectedItems(this, resolved, keys, item => ({
+      ...item,
+      properties: transformPathHighlightProperties(item.properties, args.style)
+    }));
   }
 );
 
@@ -347,21 +363,10 @@ export const applyRuleHighlight = action(
       throw new Error("applyRuleHighlight requires a rule or Tick selection.");
     }
     if (keys.length === 0) return this;
-    const selected = new Set(keys);
-    const graphic = this.graphicSpec.objects[resolved.definition.target];
-    const keyByGraphic = new Map(resolved.items.flatMap(item =>
-      item.graphicIds.map(id => [id, item.key])
-    ));
-    return this.editGraphics({
-      target: resolved.definition.target,
-      property: "items",
-      value: graphic.items.map(child => ({
-        type: child.type ?? graphic.type,
-        properties: selected.has(keyByGraphic.get(child.id))
-          ? transformRuleHighlightProperties(child.properties, args.style)
-          : child.properties
-      }))
-    });
+    return editSelectedItems(this, resolved, keys, item => ({
+      ...item,
+      properties: transformRuleHighlightProperties(item.properties, args.style)
+    }));
   }
 );
 
@@ -371,21 +376,11 @@ export const dimUnselectedMarkItems = action(
     validateKeys(args, INTERNAL_DIM_OPTIONS, "dimUnselectedMarkItems");
     const opacity = validateUnitInterval(args.opacity, "Dim opacity");
     const resolved = resolveStoredSelection(this, args.selection);
-    const selected = new Set(selectedKeys(args, resolved));
-    const graphic = this.graphicSpec.objects[resolved.definition.target];
-    const keyByGraphic = new Map(resolved.items.flatMap(item =>
-      item.graphicIds.map(id => [id, item.key])
-    ));
-    return this.editGraphics({
-      target: resolved.definition.target,
-      property: "items",
-      value: graphic.items.map(child => ({
-        type: child.type ?? graphic.type,
-        properties: selected.has(keyByGraphic.get(child.id))
-          ? child.properties
-          : { ...child.properties, opacity }
-      }))
-    });
+    const keys = selectedKeys(args, resolved);
+    return editSelectedItems(this, resolved, keys, item => ({
+      ...item,
+      properties: { ...item.properties, opacity }
+    }), true);
   }
 );
 
@@ -398,17 +393,9 @@ export const placeSelectedMarkItemsLast = action(
     if (keys.length === 0 || keys.length === resolved.items.length) {
       return this;
     }
-    const selected = new Set(keys);
-    const graphic = this.graphicSpec.objects[resolved.definition.target];
-    const keyByGraphic = new Map(resolved.items.flatMap(item =>
-      item.graphicIds.map(id => [id, item.key])
-    ));
-    const items = graphic.items.map(child => ({
-      key: keyByGraphic.get(child.id),
-      child: { type: child.type ?? graphic.type, properties: child.properties }
-    }));
+    const { selected, target, items } = selectedGraphicItems(this, resolved, keys);
     return this.editGraphics({
-      target: resolved.definition.target,
+      target,
       property: "items",
       value: [
         ...items.filter(item => !selected.has(item.key)),
@@ -433,26 +420,7 @@ export const rematerializeMarkHighlights = action(
     }));
     let next = this;
     for (const { id, config, keys } of prepared) {
-      const policy = requireSelectionPolicy(config.markType);
-      next = next[policy.applyHighlightOp]({
-        selection: config.selection,
-        style: config.style,
-        keys
-      });
-      if (config.dimOthers !== false) {
-        next = next.dimUnselectedMarkItems({
-          selection: config.selection,
-          opacity: config.dimOthers.opacity,
-          keys
-        });
-      }
-      if (config.bringToFront) {
-        next = next.placeSelectedMarkItemsLast({
-          selection: config.selection,
-          keys
-        });
-      }
-      next = next._withHighlightConfig(id, config);
+      next = applyHighlight(next, config, keys)._withHighlightConfig(id, config);
     }
     return prepared.some(({ config }) =>
       hasLegendSelection(next, config.target, config.selection)
@@ -519,26 +487,16 @@ export const highlightMarks = action(
       next = next._withoutMaterializationConfig(["highlights", selection]);
       next = rebuildTargetHighlights(next, resolved.definition.target);
     }
-    const policy = requireSelectionPolicy(layer.mark.type);
-    next = next[policy.applyHighlightOp]({ selection, style, keys });
-    if (dimOthers !== false) {
-      next = next.dimUnselectedMarkItems({
-        selection,
-        opacity: dimOthers.opacity,
-        keys
-      });
-    }
-    if (bringToFront) {
-      next = next.placeSelectedMarkItemsLast({ selection, keys });
-    }
-    next = next._withHighlightConfig(selection, {
+    const config = {
       target: resolved.definition.target,
       selection,
       markType: layer.mark.type,
       style,
       dimOthers,
       bringToFront
-    });
+    };
+    next = applyHighlight(next, config, keys)
+      ._withHighlightConfig(selection, config);
     return hasLegendSelection(next, resolved.definition.target, selection)
       ? next.rematerializeLegendHighlights()
       : next;