@uwdata/mosaic-plot 0.7.1 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uwdata/mosaic-plot",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "description": "A Mosaic-powered plotting framework based on Observable Plot.",
   "keywords": [
     "data",
@@ -23,16 +23,16 @@
   "scripts": {
     "prebuild": "rimraf dist && mkdir dist",
     "build": "node ../../esbuild.js mosaic-plot",
-    "lint": "eslint src test --ext .js",
+    "lint": "eslint src test",
     "test": "mocha 'test/**/*-test.js'",
     "prepublishOnly": "npm run test && npm run lint && npm run build"
   },
   "dependencies": {
     "@observablehq/plot": "^0.6.14",
-    "@uwdata/mosaic-core": "^0.7.1",
-    "@uwdata/mosaic-sql": "^0.7.0",
+    "@uwdata/mosaic-core": "^0.9.0",
+    "@uwdata/mosaic-sql": "^0.9.0",
     "d3": "^7.9.0",
     "isoformat": "^0.2.1"
   },
-  "gitHead": "7e6f3ea9b3011ea2c9201c1aa16e8e5664621a4c"
+  "gitHead": "89bb9b0dfa747aed691eaeba35379525a6764c61"
 }

package/src/index.js

@@ -8,6 +8,7 @@ export { ContourMark } from './marks/ContourMark.js';
 export { DenseLineMark } from './marks/DenseLineMark.js';
 export { Density1DMark } from './marks/Density1DMark.js';
 export { Density2DMark } from './marks/Density2DMark.js';
+export { ErrorBarMark } from './marks/ErrorBarMark.js';
 export { GeoMark } from './marks/GeoMark.js';
 export { Grid2DMark } from './marks/Grid2DMark.js';
 export { HexbinMark } from './marks/HexbinMark.js';

package/src/interactors/Highlight.js

@@ -69,7 +69,8 @@ export class Highlight {
     for (let i = 0; i < nodes.length; ++i) {
       const node = nodes[i];
       const base = values[i];
-      const t = test(node.__data__);
+      const data = node.__data__;
+      const t = test(Array.isArray(data) ? data[0] : data);
       // TODO? handle inherited values / remove attributes
       for (let j = 0; j < channels.length; ++j) {
         const [attr, value] = channels[j];
@@ -91,9 +92,11 @@ async function predicateFunction(mark, selection) {
 
   const s = { __: and(pred) };
   const q = mark.query(filter);
-  const p = q.groupby().length ? q.select(s) : q.$select(s);
+  (q.queries || [q]).forEach(q => {
+    q.groupby().length ? q.select(s) : q.$select(s);
+  });
 
-  const data = await mark.coordinator.query(p);
+  const data = await mark.coordinator.query(q);
   const v = data.getChild?.('__');
   return !(data.numRows || data.length) ? (() => false)
     : v ? (i => v.get(i))

package/src/interactors/Interval1D.js

@@ -1,5 +1,5 @@
-import { select, min, max } from 'd3';
-import { isBetween } from '@uwdata/mosaic-sql';
+import { interval } from '@uwdata/mosaic-core';
+import { ascending, min, max, select } from 'd3';
 import { brushX, brushY } from './util/brush.js';
 import { closeTo } from './util/close-to.js';
 import { getField } from './util/get-field.js';
@@ -11,7 +11,7 @@ export class Interval1D {
   constructor(mark, {
     channel,
     selection,
-    field,
+    field = undefined,
     pixelSize = 1,
     peers = true,
     brush: style
@@ -52,16 +52,15 @@ export class Interval1D {
 
   clause(value) {
     const { mark, pixelSize, field, scale } = this;
-    return {
+    return interval(field, value, {
       source: this,
-      schema: { type: 'interval', pixelSize, scales: [scale] },
       clients: this.peers ? mark.plot.markSet : new Set().add(mark),
-      value,
-      predicate: value ? isBetween(field, value) : null
-    };
+      scale,
+      pixelSize
+    });
   }
 
-  init(svg) {
+  init(svg, root) {
     const { brush, channel, style } = this;
     this.scale = svg.scale(channel);
 
@@ -69,14 +68,15 @@ export class Interval1D {
     const ry = svg.scale('y').range;
     brush.extent([[min(rx), min(ry)], [max(rx), max(ry)]]);
 
+    const range = this.value?.map(this.scale.apply).sort(ascending);
     const facets = select(svg).selectAll('g[aria-label="facet"]');
-    const root = facets.size() ? facets : select(svg);
+    root = facets.size() ? facets : select(root ?? svg);
     this.g = root
       .append('g')
       .attr('class', `interval-${channel}`)
       .each(patchScreenCTM)
       .call(brush)
-      .call(brush.moveSilent, this.value?.map(this.scale.apply));
+      .call(brush.moveSilent, range);
 
     if (style) {
       const brushes = this.g.selectAll('rect.selection');
@@ -85,6 +85,8 @@ export class Interval1D {
       }
     }
 
-    svg.addEventListener('pointerenter', () => this.activate());
+    svg.addEventListener('pointerenter', evt => {
+      if (!evt.buttons) this.activate();
+    });
   }
 }

package/src/interactors/Interval2D.js

@@ -1,5 +1,5 @@
-import { select, min, max } from 'd3';
-import { and, isBetween } from '@uwdata/mosaic-sql';
+import { intervals } from '@uwdata/mosaic-core';
+import { ascending, min, max, select } from 'd3';
 import { brush } from './util/brush.js';
 import { closeTo } from './util/close-to.js';
 import { getField } from './util/get-field.js';
@@ -7,8 +7,6 @@ import { invert } from './util/invert.js';
 import { patchScreenCTM } from './util/patchScreenCTM.js';
 import { sanitizeStyles } from './util/sanitize-styles.js';
 
-const asc = (a, b) => a - b;
-
 export class Interval2D {
   constructor(mark, {
     selection,
@@ -44,8 +42,8 @@ export class Interval2D {
     let yr = undefined;
     if (extent) {
       const [a, b] = extent;
-      xr = [a[0], b[0]].map(v => invert(v, xscale, pixelSize)).sort(asc);
-      yr = [a[1], b[1]].map(v => invert(v, yscale, pixelSize)).sort(asc);
+      xr = [a[0], b[0]].map(v => invert(v, xscale, pixelSize)).sort(ascending);
+      yr = [a[1], b[1]].map(v => invert(v, yscale, pixelSize)).sort(ascending);
     }
 
     if (!closeTo(xr, value?.[0]) || !closeTo(yr, value?.[1])) {
@@ -57,15 +55,12 @@ export class Interval2D {
 
   clause(value) {
     const { mark, pixelSize, xfield, yfield, xscale, yscale } = this;
-    return {
+    return intervals([xfield, yfield], value, {
       source: this,
-      schema: { type: 'interval', pixelSize, scales: [xscale, yscale] },
       clients: this.peers ? mark.plot.markSet : new Set().add(mark),
-      value,
-      predicate: value
-        ? and(isBetween(xfield, value[0]), isBetween(yfield, value[1]))
-        : null
-    };
+      scales: [xscale, yscale],
+      pixelSize
+    });
   }
 
   init(svg) {
@@ -92,11 +87,13 @@ export class Interval2D {
     }
 
     if (this.value) {
-      const [x1, x2] = this.value[0].map(xscale.apply).sort(asc);
-      const [y1, y2] = this.value[1].map(yscale.apply).sort(asc);
+      const [x1, x2] = this.value[0].map(xscale.apply).sort(ascending);
+      const [y1, y2] = this.value[1].map(yscale.apply).sort(ascending);
       this.g.call(brush.moveSilent, [[x1, y1], [x2, y2]]);
     }
 
-    svg.addEventListener('pointerenter', () => this.activate());
+    svg.addEventListener('pointerenter', evt => {
+      if (!evt.buttons) this.activate();
+    });
   }
 }

package/src/interactors/Nearest.js

@@ -1,66 +1,110 @@
-import { isSelection } from '@uwdata/mosaic-core';
-import { eq, literal } from '@uwdata/mosaic-sql';
+import { isSelection, points } from '@uwdata/mosaic-core';
 import { select, pointer } from 'd3';
 import { getField } from './util/get-field.js';
 
 export class Nearest {
   constructor(mark, {
     selection,
-    channel,
-    field
+    pointer,
+    channels,
+    fields,
+    maxRadius = 40
   }) {
     this.mark = mark;
     this.selection = selection;
     this.clients = new Set().add(mark);
-    this.channel = channel;
-    this.field = field || getField(mark, [channel]);
+    this.pointer = pointer;
+    this.channels = channels || (
+      pointer === 'x' ? ['x'] : pointer === 'y' ? ['y'] : ['x', 'y']
+    );
+    this.fields = fields || this.channels.map(c => getField(mark, [c]));
+    this.maxRadius = maxRadius;
+    this.valueIndex = -1;
   }
 
   clause(value) {
-    const { clients, field } = this;
-    const predicate = value ? eq(field, literal(value)) : null;
-    return {
-      source: this,
-      schema: { type: 'point' },
-      clients,
-      value,
-      predicate
-    };
+    const { clients, fields } = this;
+    return points(fields, value ? [value] : value, { source: this, clients });
   }
 
   init(svg) {
     const that = this;
-    const { mark, channel, selection } = this;
-    const { data } = mark;
-    const key = mark.channelField(channel).as;
+    const { mark, channels, selection, maxRadius } = this;
+    const { data: { columns } } = mark;
+    const keys = channels.map(c => mark.channelField(c).as);
+    const param = !isSelection(selection);
 
     const facets = select(svg).selectAll('g[aria-label="facet"]');
     const root = facets.size() ? facets : select(svg);
-    const scale = svg.scale(channel);
-    const param = !isSelection(selection);
 
-    root.on('pointerdown pointermove', function(evt) {
-      const [x, y] = pointer(evt, this);
-      const z = findNearest(data, key, scale.invert(channel === 'x' ? x : y));
-      selection.update(param ? z : that.clause(z));
+    // extract x, y coordinates for data values and determine scale factors
+    const xscale = svg.scale('x').apply;
+    const yscale = svg.scale('y').apply;
+    const X = Array.from(columns[mark.channelField('x').as], xscale);
+    const Y = Array.from(columns[mark.channelField('y').as], yscale);
+    const sx = this.pointer === 'y' ? 0.01 : 1;
+    const sy = this.pointer === 'x' ? 0.01 : 1;
+
+    // find value nearest to pointer and update param or selection
+    // we don't pass undefined values to params, but do allow empty selections
+    root.on('pointerenter pointerdown pointermove', function(evt) {
+      const [px, py] = pointer(evt, this);
+      const i = findNearest(X, Y, px, py, sx, sy, maxRadius);
+      if (i !== this.valueIndex) {
+        this.valueIndex = i;
+        const v = i < 0 ? undefined : keys.map(k => columns[k][i]);
+        if (param) {
+          if (i > -1) selection.update(v.length > 1 ? v : v[0]);
+        } else {
+          selection.update(that.clause(v));
+        }
+      }
     });
 
+    // if not a selection, we're done
     if (param) return;
-    svg.addEventListener('pointerenter', () => {
-      this.selection.activate(this.clause(0));
+
+    // clear selection upon pointer exit
+    root.on('pointerleave', () => {
+      selection.update(that.clause(undefined));
+    });
+
+    // trigger activation updates
+    svg.addEventListener('pointerenter', evt => {
+      if (!evt.buttons) {
+        const v = this.channels.map(() => 0);
+        selection.activate(this.clause(v));
+      }
     });
   }
 }
 
-function findNearest(data, key, value) {
-  let dist = Infinity;
-  let v;
-  data.forEach(d => {
-    const delta = Math.abs(d[key] - value);
-    if (delta < dist) {
-      dist = delta;
-      v = d[key];
+/**
+ * Find the nearest data point to the pointer. The nearest point
+ * is found via Euclidean distance, but with scale factors *sx* and
+ * *sy* applied to the x and y distances. For example, to prioritize
+ * selection along the x-axis, use *sx* = 1, *sy* = 0.01.
+ * @param {number[]} x Array of data point x coordinate values.
+ * @param {number[]} y Array of data point y coordinate values.
+ * @param {number} px The x coordinate of the pointer.
+ * @param {number} py The y coordinate of the pointer.
+ * @param {number} sx A scale factor for x coordinate spans.
+ * @param {number} sy A scale factor for y coordinate spans.
+ * @param {number} maxRadius The maximum pointer distance for selection.
+ * @returns {number} An integer index into the data array corresponding
+ *  to the nearest data point, or -1 if no nearest point is found.
+ */
+function findNearest(x, y, px, py, sx, sy, maxRadius) {
+  let dist = maxRadius * maxRadius;
+  let nearest = -1;
+  for (let i = 0; i < x.length; ++i) {
+    const dx = sx * (x[i] - px);
+    const dy = sy * (y[i] - py);
+    const dd = dx * dx + dy * dy;
+    if (dd <= dist) {
+      dist = dd;
+      nearest = i;
     }
-  });
-  return v;
+  }
+  return nearest;
 }

package/src/interactors/PanZoom.js

@@ -1,6 +1,5 @@
+import { interval, Selection } from '@uwdata/mosaic-core';
 import { select, zoom, ZoomTransform } from 'd3';
-import { Selection } from '@uwdata/mosaic-core';
-import { isBetween } from '@uwdata/mosaic-sql';
 import { getField } from './util/get-field.js';
 
 const asc = (a, b) => a - b;
@@ -49,13 +48,11 @@ export class PanZoom {
   }
 
   clause(value, field, scale) {
-    return {
+    return interval(field, value, {
       source: this,
-      schema: { type: 'interval', scales: [scale] },
       clients: this.mark.plot.markSet,
-      value,
-      predicate: value ? isBetween(field, value) : null
-    };
+      scale
+    });
   }
 
   init(svg) {
@@ -86,8 +83,9 @@ export class PanZoom {
 
     if (panx || pany) {
       let enter = false;
-      element.addEventListener('mouseenter', () => {
+      element.addEventListener('pointerenter', evt => {
         if (enter) return; else enter = true;
+        if (evt.buttons) return; // don't activate if mouse down
         if (panx) {
           const { xscale, xfield } = this;
           xsel.activate(this.clause(xscale.domain, xfield, xscale));
@@ -97,7 +95,7 @@ export class PanZoom {
           ysel.activate(this.clause(yscale.domain, yfield, yscale));
         }
       });
-      element.addEventListener('mouseleave', () => enter = false);
+      element.addEventListener('pointerleave', () => enter = false);
     }
   }
 }

package/src/interactors/Toggle.js

@@ -1,6 +1,10 @@
-import { and, or, isNotDistinct, literal } from '@uwdata/mosaic-sql';
+import { points } from '@uwdata/mosaic-core';
 
 export class Toggle {
+  /**
+   * @param {*} mark The mark to interact with.
+   * @param {*} options The interactor options.
+   */
   constructor(mark, {
     selection,
     channels,
@@ -10,54 +14,41 @@ export class Toggle {
     this.mark = mark;
     this.selection = selection;
     this.peers = peers;
-    this.channels = channels.map(c => {
-      const q = c === 'color' ? ['fill', 'stroke']
+    const fields = this.fields = [];
+    const as = this.as = [];
+    channels.forEach(c => {
+      const q = c === 'color' ? ['color', 'fill', 'stroke']
         : c === 'x' ? ['x', 'x1', 'x2']
         : c === 'y' ? ['y', 'y1', 'y2']
         : [c];
       for (let i = 0; i < q.length; ++i) {
-        const f = mark.channelField(q[i]);
-        if (f) return {
-          field: f.field?.basis || f.field,
-          as: f.as
-        };
+        const f = mark.channelField(q[i], { exact: true });
+        if (f) {
+          fields.push(f.field?.basis || f.field);
+          as.push(f.as);
+          return;
+        }
       }
       throw new Error(`Missing channel: ${c}`);
     });
   }
 
   clause(value) {
-    const { channels, mark } = this;
-    let predicate = null;
-
-    if (value) {
-      const clauses = value.map(vals => {
-        const list = vals.map((v, i) => {
-          return isNotDistinct(channels[i].field, literal(v));
-        });
-        return list.length > 1 ? and(list) : list[0];
-      });
-      predicate = clauses.length > 1 ? or(clauses) : clauses[0];
-    }
-
-    return {
+    const { fields, mark } = this;
+    return points(fields, value, {
       source: this,
-      schema: { type: 'point' },
-      clients: this.peers ? mark.plot.markSet : new Set().add(mark),
-      value,
-      predicate
-    };
+      clients: this.peers ? mark.plot.markSet : new Set().add(mark)
+    });
   }
 
   init(svg, selector, accessor) {
-    const { mark, channels, selection } = this;
-    const { data } = mark;
-    accessor = accessor || (target => {
-      const datum = data[target.__data__];
-      return channels.map(c => datum[c.as]);
+    const { mark, as, selection } = this;
+    const { data: { columns = {} } = {} } = mark;
+    accessor ??= target => as.map(name => {
+      const data = target.__data__;
+      return columns[name][Array.isArray(data) ? data[0] : data];
     });
-
-    selector = selector || `[data-index="${mark.index}"]`;
+    selector ??= `[data-index="${mark.index}"]`;
     const groups = new Set(svg.querySelectorAll(selector));
 
     svg.addEventListener('pointerdown', evt => {
@@ -67,7 +58,7 @@ export class Toggle {
 
       if (isTargetElement(groups, target)) {
         const point = accessor(target);
-        if (evt.shiftKey && state?.length) {
+        if ((evt.shiftKey || evt.metaKey) && state?.length) {
           value = state.filter(s => neq(s, point));
           if (value.length === state.length) value.push(point);
         } else if (state?.length === 1 && !neq(state[0], point)) {
@@ -83,8 +74,9 @@ export class Toggle {
       }
     });
 
-    svg.addEventListener('pointerenter', () => {
-      this.selection.activate(this.clause([this.channels.map(() => 0)]));
+    svg.addEventListener('pointerenter', evt => {
+      if (evt.buttons) return;
+      this.selection.activate(this.clause([this.fields.map(() => 0)]));
     });
   }
 }

package/src/interactors/util/patchScreenCTM.js

@@ -4,6 +4,8 @@
  * even after the node is removed from the DOM.
  */
 export function patchScreenCTM() {
+  /** @type {SVGGraphicsElement} */
+  // @ts-ignore
   const node = this;
   const getScreenCTM = node.getScreenCTM;
   let memo;