Add peers attribute to toggle interactor

dev/yaml/highlight-toggle.yaml

@@ -15,7 +15,7 @@ vconcat:
   plot:
   - mark: barX
     data: { from: penguins, filterBy: $filter }
-    x: { count: '' }
+    x: { count: }
   xLabel: Total →
   xDomain: Fixed
 - vspace: 20
@@ -24,14 +24,20 @@ vconcat:
   - mark: barY
     data: { from: penguins, filterBy: $filter }
     x: sex
-    y: { count: '' }
+    y: { count: }
   - select: highlight
     by: $select
   - select: toggleX
     as: $select
   - select: toggleX
     as: $filter
-  xLabel: ''
+  - mark: text
+    data: { from: penguins, filterBy: $filter }
+    x: sex
+    y: { count: }
+    text: { count: }
+    dy: -10
+  xLabel: null
   yLabel: Total
   xDomain: Fixed
   yDomain: Fixed

docs/api/vgplot/interactors.md

@@ -13,6 +13,7 @@ Select individual data values by clicking / shift-clicking points. The supported
 
 - _as_: The [Selection](../core/selection) to populate with filter predicates.
 - _channels_: An array of encoding channels (e.g., `"x"`, `"y"`, `"color"`) indicating the data values to select.
+- _peers_: A Boolean-flag (default `true`) indicating if all marks in the current plot should be considered "peers" in the clients set used to perform cross-filtering. A peer mark will be exempt from filtering. Set this to false if you are using a cross-filtered selection but want to filter across marks within the same plot.
 
 ### toggleX
 

packages/vgplot/src/directives/interactors.js

@@ -20,16 +20,16 @@ export function toggle({ as, ...rest }) {
   return interactor(Toggle, { ...rest, selection: as });
 }
 
-export function toggleX({ as }) {
-  return toggle({ as, channels: ['x'] });
+export function toggleX(options) {
+  return toggle({ ...options, channels: ['x'] });
 }
 
-export function toggleY({ as }) {
-  return toggle({ as, channels: ['y'] });
+export function toggleY(options) {
+  return toggle({ ...options, channels: ['y'] });
 }
 
-export function toggleColor({ as }) {
-  return toggle({ as, channels: ['color'] });
+export function toggleColor(options) {
+  return toggle({ ...options, channels: ['color'] });
 }
 
 export function nearestX({ as, ...rest }) {

packages/vgplot/src/interactors/Toggle.js

@@ -3,12 +3,13 @@ import { and, or, isNotDistinct, literal } from '@uwdata/mosaic-sql';
 export class Toggle {
   constructor(mark, {
     selection,
-    channels
+    channels,
+    peers = true
   }) {
     this.value = null;
     this.mark = mark;
     this.selection = selection;
-    this.clients = new Set().add(mark);
+    this.peers = peers;
     this.channels = channels.map(c => {
       const q = c === 'color' ? ['fill', 'stroke']
         : c === 'x' ? ['x', 'x1', 'x2']
@@ -26,7 +27,7 @@ export class Toggle {
   }
 
   clause(value) {
-    const { channels, clients } = this;
+    const { channels, mark } = this;
     let predicate = null;
 
     if (value) {
@@ -42,7 +43,7 @@ export class Toggle {
     return {
       source: this,
       schema: { type: 'point' },
-      clients,
+      clients: this.peers ? mark.plot.markSet : new Set().add(mark),
       value,
       predicate
     };