@uwdata/mosaic-plot 0.11.0 → 0.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uwdata/mosaic-plot",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "description": "A Mosaic-powered plotting framework based on Observable Plot.",
   "keywords": [
     "data",
@@ -29,10 +29,10 @@
   },
   "dependencies": {
     "@observablehq/plot": "^0.6.16",
-    "@uwdata/mosaic-core": "^0.11.0",
-    "@uwdata/mosaic-sql": "^0.11.0",
+    "@uwdata/mosaic-core": "^0.12.1",
+    "@uwdata/mosaic-sql": "^0.12.1",
     "d3": "^7.9.0",
     "isoformat": "^0.2.1"
   },
-  "gitHead": "861d616f39926a1d2aee83b59dbdd70b0b3caf12"
+  "gitHead": "fe3a7c34352da54ec36a1ebf557846f46a649782"
 }

package/src/index.js

@@ -22,10 +22,11 @@ export { Interval1D } from './interactors/Interval1D.js';
 export { Interval2D } from './interactors/Interval2D.js';
 export { Nearest } from './interactors/Nearest.js';
 export { PanZoom } from './interactors/PanZoom.js';
+export { Region } from './interactors/Region.js';
 export { Toggle } from './interactors/Toggle.js';
 
 // legend
 export { Legend } from './legend.js';
 
 // transforms
-export { bin } from './transforms/index.js';
+export { bin } from './transforms/bin.js';

package/src/interactors/Highlight.js

@@ -1,5 +1,6 @@
 import { throttle } from '@uwdata/mosaic-core';
-import { and } from '@uwdata/mosaic-sql';
+import { and, isAggregateExpression } from '@uwdata/mosaic-sql';
+import { getDatum } from './util/get-datum.js';
 import { sanitizeStyles } from './util/sanitize-styles.js';
 
 function configureMark(mark) {
@@ -13,7 +14,7 @@ function configureMark(mark) {
     if (channel === 'orderby') {
       ordered = true;
     } else if (field) {
-      if (field.aggregate) {
+      if (isAggregateExpression(field)) {
         aggregate = true;
       } else {
         if (dims.has(as)) continue;
@@ -49,7 +50,9 @@ export class Highlight {
     this.svg = svg;
     const values = this.values = [];
     const index = this.mark.index;
-    const nodes = this.nodes = svg.querySelectorAll(`[data-index="${index}"] > *`);
+    const g = `g[data-index="${index}"]`;
+    const selector = `${g} > *:not(g), ${g} > g > *`;
+    const nodes = this.nodes = svg.querySelectorAll(selector);
 
     const { channels } = this;
     for (let i = 0; i < nodes.length; ++i) {
@@ -69,8 +72,7 @@ export class Highlight {
     for (let i = 0; i < nodes.length; ++i) {
       const node = nodes[i];
       const base = values[i];
-      const data = node.__data__;
-      const t = test(Array.isArray(data) ? data[0] : data);
+      const t = test(getDatum(node));
       // TODO? handle inherited values / remove attributes
       for (let j = 0; j < channels.length; ++j) {
         const [attr, value] = channels[j];
@@ -93,7 +95,7 @@ async function predicateFunction(mark, selection) {
   const s = { __: and(pred) };
   const q = mark.query(filter);
   (q.queries || [q]).forEach(q => {
-    q.groupby().length ? q.select(s) : q.$select(s);
+    q._groupby.length ? q.select(s) : q.setSelect(s);
   });
 
   const data = await mark.coordinator.query(q);

package/src/interactors/Interval1D.js

@@ -1,10 +1,9 @@
 import { clauseInterval } from '@uwdata/mosaic-core';
-import { ascending, min, max, select } from 'd3';
-import { brushX, brushY } from './util/brush.js';
+import { ascending, min, max } from 'd3';
+import { brushGroups, brushX, brushY } from './util/brush.js';
 import { closeTo } from './util/close-to.js';
 import { getField } from './util/get-field.js';
 import { invert } from './util/invert.js';
-import { patchScreenCTM } from './util/patchScreenCTM.js';
 import { sanitizeStyles } from './util/sanitize-styles.js';
 
 export class Interval1D {
@@ -63,18 +62,12 @@ export class Interval1D {
   init(svg, root) {
     const { brush, channel, style } = this;
     this.scale = svg.scale(channel);
+    const range = this.value?.map(this.scale.apply).sort(ascending);
 
     const rx = svg.scale('x').range;
     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"]');
-    root = facets.size() ? facets : select(root ?? svg);
-    this.g = root
-      .append('g')
-      .attr('class', `interval-${channel}`)
-      .each(patchScreenCTM)
+    this.g = brushGroups(svg, root, min(rx), min(ry), `interval-${channel}`)
       .call(brush)
       .call(brush.moveSilent, range);
 

package/src/interactors/Interval2D.js

@@ -1,10 +1,9 @@
 import { clauseIntervals } from '@uwdata/mosaic-core';
-import { ascending, min, max, select } from 'd3';
-import { brush } from './util/brush.js';
+import { ascending, min, max } from 'd3';
+import { brush, brushGroups } from './util/brush.js';
 import { closeTo } from './util/close-to.js';
 import { getField } from './util/get-field.js';
 import { invert } from './util/invert.js';
-import { patchScreenCTM } from './util/patchScreenCTM.js';
 import { sanitizeStyles } from './util/sanitize-styles.js';
 
 export class Interval2D {
@@ -38,6 +37,7 @@ export class Interval2D {
 
   publish(extent) {
     const { value, pixelSize, xscale, yscale } = this;
+
     let xr = undefined;
     let yr = undefined;
     if (extent) {
@@ -64,20 +64,13 @@ export class Interval2D {
   }
 
   init(svg) {
-    const { brush, style } = this;
+    const { brush, style, value } = this;
     const xscale = this.xscale = svg.scale('x');
     const yscale = this.yscale = svg.scale('y');
     const rx = xscale.range;
     const ry = yscale.range;
     brush.extent([[min(rx), min(ry)], [max(rx), max(ry)]]);
-
-    const facets = select(svg).selectAll('g[aria-label="facet"]');
-    const root = facets.size() ? facets : select(svg);
-    this.g = root
-      .append('g')
-      .attr('class', `interval-xy`)
-      .each(patchScreenCTM)
-      .call(brush);
+    this.g = brushGroups(svg, null, min(rx), min(ry), 'interval-xy').call(brush);
 
     if (style) {
       const brushes = this.g.selectAll('rect.selection');
@@ -86,9 +79,9 @@ export class Interval2D {
       }
     }
 
-    if (this.value) {
-      const [x1, x2] = this.value[0].map(xscale.apply).sort(ascending);
-      const [y1, y2] = this.value[1].map(yscale.apply).sort(ascending);
+    if (value) {
+      const [x1, x2] = value[0].map(xscale.apply).sort(ascending);
+      const [y1, y2] = value[1].map(yscale.apply).sort(ascending);
       this.g.call(brush.moveSilent, [[x1, y1], [x2, y2]]);
     }
 

package/src/interactors/Nearest.js

@@ -1,5 +1,5 @@
 import { clausePoint, clausePoints, isSelection } from '@uwdata/mosaic-core';
-import { select, pointer } from 'd3';
+import { select, pointer, min } from 'd3';
 import { getField } from './util/get-field.js';
 
 export class Nearest {
@@ -39,17 +39,13 @@ export class Nearest {
     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);
-
     // 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 [X, Y] = calculateXY(svg, mark);
     const sx = this.pointer === 'y' ? 0.01 : 1;
     const sy = this.pointer === 'x' ? 0.01 : 1;
 
+    const root = select(svg);
+
     // 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) {
@@ -83,6 +79,41 @@ export class Nearest {
   }
 }
 
+/**
+ * Extract x, y coordinates for data values.
+ */
+function calculateXY(svg, mark) {
+  const { data: { columns } } = mark;
+  const data = c => columns[mark.channelField(c)?.as];
+  const scale = c => svg.scale(c);
+
+  const sx = svg.scale('x');
+  const sy = svg.scale('y');
+  const sfx = scale('fx')?.apply;
+  const sfy = scale('fy')?.apply;
+
+  const X = Array.from(data('x'), sx.apply);
+  const Y = Array.from(data('y'), sy.apply);
+
+  // as needed, adjust coordinates by facets
+  if (sfx) {
+    const dx = min(sx.range);
+    const FX = data('fx');
+    for (let i = 0; i < FX.length; ++i) {
+      X[i] += sfx(FX[i]) - dx;
+    }
+  }
+  if (sfy) {
+    const dy = min(sy.range);
+    const FY = data('fy');
+    for (let i = 0; i < FY.length; ++i) {
+      Y[i] += sfy(FY[i]) - dy;
+    }
+  }
+
+  return [X, Y];
+}
+
 /**
  * Find the nearest data point to the pointer. The nearest point
  * is found via Euclidean distance, but with scale factors *sx* and

package/src/interactors/Region.js

@@ -0,0 +1,108 @@
+import { clausePoints } from '@uwdata/mosaic-core';
+import { select } from 'd3';
+import { brush } from './util/brush.js';
+import { getFields } from './util/get-field.js';
+import { intersect } from './util/intersect.js';
+import { patchScreenCTM } from './util/patchScreenCTM.js';
+import { sanitizeStyles } from './util/sanitize-styles.js';
+import { neqSome } from './util/neq.js';
+import { getDatum } from './util/get-datum.js';
+
+export class Region {
+  constructor(mark, {
+    channels,
+    selection,
+    peers = true,
+    brush: style = {
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeDasharray: '1,1'
+    }
+  }) {
+    this.mark = mark;
+    this.selection = selection;
+    this.peers = peers;
+
+    this.style = style && sanitizeStyles(style);
+    this.brush = brush();
+    this.brush.on('brush end', evt => this.publish(evt.selection));
+    this.extent = null;
+    this.groups = null;
+
+    const { fields, as } = getFields(mark, channels);
+    this.fields = fields;
+    this.as = as;
+  }
+
+  reset() {
+    this.value = undefined;
+    this.extent = null;
+    if (this.g) this.brush.reset(this.g);
+  }
+
+  activate() {
+    this.selection.activate(this.clause([this.fields.map(() => 0)]));
+  }
+
+  clause(value) {
+    const { fields, mark } = this;
+    return clausePoints(fields, value, {
+      source: this,
+      clients: this.peers ? mark.plot.markSet : new Set().add(mark)
+    });
+  }
+
+  publish(extent) {
+    const { as, group, mark, svg } = this;
+    let value;
+
+    // extract channel values for points
+    if (extent) {
+      const { data: { columns = {} } = {} } = mark;
+      const map = new Map;
+      intersect(svg, group, extent).forEach(el => {
+        const index = getDatum(el);
+        const vals = as.map(name => columns[name][index]);
+        map.set(vals.join('|'), vals); // deduplicate values
+      });
+      value = Array.from(map.values());
+    }
+    this.extent = extent;
+
+    if (neqSome(value, this.value)) {
+      this.value = value;
+      this.selection.update(this.clause(value));
+    }
+  }
+
+  init(svg) {
+    const { brush, extent, mark, style } = this;
+    this.svg = svg;
+
+    const w = svg.width.baseVal.value;
+    const h = svg.height.baseVal.value;
+    brush.extent([[0, 0], [w, h]]);
+
+    // isolate eligible mark group
+    this.group = svg.querySelector(`[data-index="${mark.index}"]`);
+
+    // create a single brush, regardless of facets
+    this.g = select(svg)
+      .append('g')
+      .attr('class', `region-xy`)
+      .each(patchScreenCTM)
+      .call(brush)
+      .call(brush.moveSilent, extent);
+
+    if (style) {
+      const brushes = this.g.selectAll('rect.selection');
+      for (const name in style) {
+        brushes.attr(name, style[name]);
+      }
+    }
+
+    svg.addEventListener('pointerenter', evt => {
+      if (!evt.buttons) this.activate();
+    });
+  }
+}

package/src/interactors/Toggle.js

@@ -1,4 +1,6 @@
 import { clausePoints } from '@uwdata/mosaic-core';
+import { getDatum } from './util/get-datum.js';
+import { neq, neqSome } from './util/neq.js';
 
 export class Toggle {
   /**
@@ -44,12 +46,10 @@ export class Toggle {
   init(svg, selector, accessor) {
     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];
-    });
+    accessor ??= target => as.map(name => columns[name][getDatum(target)]);
+
     selector ??= `[data-index="${mark.index}"]`;
-    const groups = new Set(svg.querySelectorAll(selector));
+    const groups = Array.from(svg.querySelectorAll(selector));
 
     svg.addEventListener('pointerdown', evt => {
       const state = selection.single ? selection.value : this.value;
@@ -82,22 +82,5 @@ export class Toggle {
 }
 
 function isTargetElement(groups, node) {
-  return groups.has(node)
-    || groups.has(node.parentNode)
-    || groups.has(node.parentNode?.parentNode);
-}
-
-function neqSome(a, b) {
-  return (a == null || b == null)
-    ? (a != null || b != null)
-    : (a.length !== b.length || a.some((x, i) => neq(x, b[i])));
-}
-
-function neq(a, b) {
-  const n = a.length;
-  if (b.length !== n) return true;
-  for (let i = 0; i < n; ++i) {
-    if (a[i] !== b[i]) return true;
-  }
-  return false;
+  return groups.some(g => g.contains(node));
 }

package/src/interactors/util/brush.js

@@ -1,6 +1,5 @@
-import {
-  brush as d3_brush, brushX as d3_brushX, brushY as d3_brushY
-} from 'd3';
+import { brush as d3_brush, brushX as d3_brushX, brushY as d3_brushY, select } from 'd3';
+import { patchScreenCTM } from './patchScreenCTM.js';
 
 function wrap(brush) {
   const brushOn = brush.on;
@@ -43,3 +42,36 @@ export function brushX() {
 export function brushY() {
   return wrap(d3_brushY());
 }
+
+export function brushGroups(svg, root, dx, dy, className) {
+  let groups = select(root ?? svg)
+    .append('g')
+    .attr('class', className)
+
+  // if the plot is faceted, create per-facet brush groups
+  const fx = svg.scale('fx');
+  const fy = svg.scale('fy');
+  if (fx || fy) {
+    const X = fx?.domain.map(v => fx.apply(v) - dx);
+    const Y = fy?.domain.map(v => fy.apply(v) - dy);
+    if (X && Y) {
+      for (let i = 0; i < X.length; ++i) {
+        for (let j = 0; j < Y.length; ++j) {
+          groups.append('g').attr('transform', `translate(${X[i]}, ${Y[j]})`);
+        }
+      }
+    } else if (X) {
+      for (let i = 0; i < X.length; ++i) {
+        groups.append('g').attr('transform', `translate(${X[i]}, 0})`);
+      }
+    } else if (Y) {
+      for (let j = 0; j < Y.length; ++j) {
+        groups.append('g').attr('transform', `translate(0, ${Y[j]})`);
+      }
+    }
+    groups = groups.selectAll('g');
+  }
+
+  // return brush groups, with screen transform fix
+  return groups.each(patchScreenCTM);
+}

package/src/interactors/util/get-datum.js

@@ -0,0 +1,15 @@
+/**
+ * Return the bound datum value on a Plot-generated SVG element.
+ * Following D3, bound data is assigned to the `__data__` property.
+ * However, the target mark may be wrapped within a hyperlink `a` tag.
+ * @param {Element} el A DOM element.
+ * @returns {*} The bound datum.
+ */
+export function getDatum(el) {
+  if (el.tagName === 'a') {
+    el = el.children[0];
+  }
+  // @ts-ignore
+  const data = el.__data__;
+  return Array.isArray(data) ? data[0] : data;
+}

package/src/interactors/util/get-field.js

@@ -1,4 +1,39 @@
+import { isNode } from '@uwdata/mosaic-sql';
+
+function extractField(field) {
+  if (isNode(field)) {
+    if (field.type === 'COLUMN_REF') {
+      // @ts-ignore
+      return field.column;
+    } else if (field.type === 'AGGREGATE') {
+      // @ts-ignore
+      return field.args[0] ?? field;
+    }
+  }
+  return field;
+}
+
 export function getField(mark, channel) {
-  const field = mark.channelField(channel)?.field;
-  return field?.basis || field;
+  return extractField(mark.channelField(channel)?.field);
+}
+
+export function getFields(mark, channels) {
+  const fields = [];
+  const 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], { exact: true });
+      if (f) {
+        fields.push(extractField(f.field));
+        as.push(f.as);
+        return;
+      }
+    }
+    throw new Error(`Missing channel: ${c}`);
+  });
+  return { fields, as };
 }