Reset selection source upon clause eviction

dev/examples/splom.js

@@ -12,7 +12,7 @@ export default function(el) {
 
   const columns = ['bill_length', 'bill_depth', 'flipper_length', 'body_mass'];
   const table = 'penguins';
-  const brush = Selection.union();
+  const brush = Selection.single();
 
   function scatter(x, y, row, col, n) {
     const s = 135;

packages/core/src/Selection.js

@@ -58,7 +58,9 @@ export class Selection extends Param {
   update(clause) {
     const { source, predicate } = clause;
     this.active = clause;
-    const clauses = this.single ? [] : this.clauses.filter(c => source !== c.source);
+    const filtered = this.clauses.filter(c => source !== c.source);
+    const clauses = this.single ? [] : filtered;
+    if (this.single) filtered.forEach(c => c.source?.reset?.());
     if (predicate) clauses.push(clause);
     return super.update(clauses);
   }

packages/inputs/src/Menu.js

@@ -64,6 +64,10 @@ export class Menu extends MosaicClient {
     }
   }
 
+  reset() {
+    this.select.selectedIndex = this.from ? 0 : -1;
+  }
+
   publish(value) {
     const { selection, column } = this;
     if (isSelection(selection)) {

packages/inputs/src/Search.js

@@ -53,6 +53,10 @@ export class Search extends MosaicClient {
     }
   }
 
+  reset() {
+    this.searchbox.value = '';
+  }
+
   publish(value) {
     const { selection, column, type } = this;
     if (isSelection(selection)) {

packages/vgplot/src/interactors/Interval1D.js

@@ -1,5 +1,6 @@
-import { brushX, brushY, select, min, max } from 'd3';
+import { select, min, max } from 'd3';
 import { isBetween } from '@uwdata/mosaic-sql';
+import { brushX, brushY } from './util/brush.js';
 import { closeTo } from './util/close-to.js';
 import { invert } from './util/invert.js';
 import { patchScreenCTM } from './util/patchScreenCTM.js';
@@ -26,6 +27,11 @@ export class Interval1D {
     this.brush.on('brush end', ({ selection }) => this.publish(selection));
   }
 
+  reset() {
+    this.value = undefined;
+    if (this.g) this.brush.reset(this.g);
+  }
+
   activate() {
     this.selection.activate(this.clause(this.value || [0, 1]));
   }

packages/vgplot/src/interactors/Interval2D.js

@@ -1,5 +1,6 @@
-import { brush, select, min, max } from 'd3';
+import { select, min, max } from 'd3';
 import { and, isBetween } from '@uwdata/mosaic-sql';
+import { brush } from './util/brush.js';
 import { closeTo } from './util/close-to.js';
 import { invert } from './util/invert.js';
 import { patchScreenCTM } from './util/patchScreenCTM.js';
@@ -27,6 +28,11 @@ export class Interval2D {
     this.brush.on('brush end', ({ selection }) => this.publish(selection));
   }
 
+  reset() {
+    this.value = undefined;
+    if (this.g) this.brush.reset(this.g);
+  }
+
   activate() {
     this.selection.activate(this.clause(this.value || [[0, 1], [0, 1]]));
   }
@@ -42,7 +48,7 @@ export class Interval2D {
     }
 
     if (!closeTo(xr, value?.[0]) || !closeTo(yr, value?.[1])) {
-      this.value = extent ? [xr, yr] : null;
+      this.value = extent ? [xr, yr] : undefined;
       this.g.call(this.brush.move, extent);
       this.selection.update(this.clause(this.value));
     }

packages/vgplot/src/interactors/util/brush.js

@@ -0,0 +1,30 @@
+import {
+  brush as d3_brush, brushX as d3_brushX, brushY as d3_brushY
+} from 'd3';
+
+function wrap(brush) {
+  const addEventListener = brush.on;
+  brush._enabled = true;
+  brush.reset = group => {
+    brush._enabled = false;
+    brush.clear(group);
+    brush._enabled = true;
+  };
+  brush.on = (type, callback) => {
+    const f = (...args) => brush._enabled && callback(...args);
+    return addEventListener(type, f);
+  };
+  return brush;
+}
+
+export function brush() {
+  return wrap(d3_brush());
+}
+
+export function brushX() {
+  return wrap(d3_brushX());
+}
+
+export function brushY() {
+  return wrap(d3_brushY());
+}