@uwdata/mosaic-plot 0.6.1 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uwdata/mosaic-plot",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "A Mosaic-powered plotting framework based on Observable Plot.",
   "keywords": [
     "data",
@@ -29,10 +29,10 @@
   },
   "dependencies": {
     "@observablehq/plot": "^0.6.13",
-    "@uwdata/mosaic-core": "^0.6.1",
-    "@uwdata/mosaic-sql": "^0.6.0",
+    "@uwdata/mosaic-core": "^0.7.0",
+    "@uwdata/mosaic-sql": "^0.7.0",
     "d3": "^7.8.5",
     "isoformat": "^0.2.1"
   },
-  "gitHead": "9e788e6dc5241fa1c54967a25fd9599f97da1a41"
+  "gitHead": "4680b922f15579b7b527f31507ed71a12230ec35"
 }

package/src/interactors/Interval1D.js

@@ -21,7 +21,7 @@ export class Interval1D {
     this.pixelSize = pixelSize || 1;
     this.selection = selection;
     this.peers = peers;
-    this.field = field || getField(mark, [channel, channel+'1', channel+'2']);
+    this.field = field || getField(mark, channel);
     this.style = style && sanitizeStyles(style);
     this.brush = channel === 'y' ? brushY() : brushX();
     this.brush.on('brush end', ({ selection }) => this.publish(selection));

package/src/interactors/Interval2D.js

@@ -22,8 +22,8 @@ export class Interval2D {
     this.pixelSize = pixelSize || 1;
     this.selection = selection;
     this.peers = peers;
-    this.xfield = xfield || getField(mark, ['x', 'x1', 'x2']);
-    this.yfield = yfield || getField(mark, ['y', 'y1', 'y2']);
+    this.xfield = xfield || getField(mark, 'x');
+    this.yfield = yfield || getField(mark, 'y');
     this.style = style && sanitizeStyles(style);
     this.brush = brush();
     this.brush.on('brush end', ({ selection }) => this.publish(selection));

package/src/interactors/PanZoom.js

@@ -18,8 +18,8 @@ export class PanZoom {
     this.mark = mark;
     this.xsel = x;
     this.ysel = y;
-    this.xfield = xfield || getField(mark, ['x', 'x1', 'x2']);
-    this.yfield = yfield || getField(mark, ['y', 'y1', 'y2']);
+    this.xfield = xfield || getField(mark, 'x');
+    this.yfield = yfield || getField(mark, 'y');
     this.zoom = extent(zoom, [0, Infinity], [1, 1]);
     this.panx = this.xsel && panx;
     this.pany = this.ysel && pany;

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

@@ -1,4 +1,4 @@
-export function getField(mark, channels) {
-  const field = mark.channelField(channels)?.field;
+export function getField(mark, channel) {
+  const field = mark.channelField(channel)?.field;
   return field?.basis || field;
 }

package/src/legend.js

@@ -56,8 +56,10 @@ function findMark({ marks }, channel) {
     : null;
   if (channels == null) return null;
   for (let i = marks.length - 1; i > -1; --i) {
-    if (marks[i].channelField(channels)) {
-      return marks[i];
+    for (const channel of channels) {
+      if (marks[i].channelField(channel, { exact: true })) {
+        return marks[i];
+      }
     }
   }
   return null;

package/src/marks/ConnectedMark.js

@@ -6,29 +6,26 @@ import { Mark } from './Mark.js';
 export class ConnectedMark extends Mark {
   constructor(type, source, encodings) {
     const dim = type.endsWith('X') ? 'y' : type.endsWith('Y') ? 'x' : null;
-    const req = { [dim]: ['min', 'max'] };
+    const req = dim ? { [dim]: ['min', 'max'] } : undefined;
     super(type, source, encodings, req);
     this.dim = dim;
   }
 
   query(filter = []) {
-    const { plot, dim, source, stats } = this;
+    const { plot, dim, source } = this;
     const { optimize = true } = source.options || {};
     const q = super.query(filter);
     if (!dim) return q;
 
     const ortho = dim === 'x' ? 'y' : 'x';
-    const value = this.channelField(ortho)?.as;
-    const { field, as } = this.channelField(dim);
-    const { type } = stats[field.column];
+    const value = this.channelField(ortho, { exact: true })?.as;
+    const { field, as, type, min, max } = this.channelField(dim);
     const isContinuous = type === 'date' || type === 'number';
 
     if (optimize && isContinuous && value) {
       // TODO: handle stacked data!
-      const { column } = field;
-      const { max, min } = stats[column];
       const size = dim === 'x' ? plot.innerWidth() : plot.innerHeight();
-      const [lo, hi] = filteredExtent(filter, column) || [min, max];
+      const [lo, hi] = filteredExtent(filter, field) || [min, max];
       const [expr] = binExpr(this, dim, size, [lo, hi], 1, as);
       const cols = q.select()
         .map(c => c.as)

package/src/marks/DenseLineMark.js

@@ -47,10 +47,17 @@ export class DenseLineMark extends RasterMark {
 function stripXY(mark, filter) {
   if (Array.isArray(filter) && !filter.length) return filter;
 
-  const xc = mark.channelField('x').field.column;
-  const yc = mark.channelField('y').field.column;
-  const test = p => p.op !== 'BETWEEN'
-    || p.field.column !== xc && p.field.column !== yc;
+  // get column expressions for x and y encoding channels
+  const { column: xc } = mark.channelField('x');
+  const { column: yc } = mark.channelField('y');
+
+  // test if a range predicate filters the x or y channels
+  const test = p => {
+    const col = `${p.field}`;
+    return p.op !== 'BETWEEN' || col !== xc && col !== yc;
+  };
+
+  // filter boolean 'and' operations
   const filterAnd = p => p.op === 'AND'
     ? and(p.children.filter(c => test(c)))
     : p;

package/src/marks/Grid2DMark.js

@@ -39,7 +39,7 @@ export class Grid2DMark extends Mark {
   }
 
   setPlot(plot, index) {
-    const update = () => { if (this.stats) this.requestUpdate(); };
+    const update = () => { if (this.hasFieldInfo()) this.requestUpdate(); };
     plot.addAttributeListener('domainX', update);
     plot.addAttributeListener('domainY', update);
     return super.setPlot(plot, index);

package/src/marks/Mark.js

@@ -19,6 +19,8 @@ const fieldEntry = (channel, field) => ({
 });
 const valueEntry = (channel, value) => ({ channel, value });
 
+// checks if a data source is an explicit array of values
+// as opposed to a database table refernece
 export const isDataArray = source => Array.isArray(source);
 
 export class Mark extends MosaicClient {
@@ -94,45 +96,47 @@ export class Mark extends MosaicClient {
     return this.source == null || isDataArray(this.source);
   }
 
+  hasFieldInfo() {
+    return !!this._fieldInfo;
+  }
+
   channel(channel) {
     return this.channels.find(c => c.channel === channel);
   }
 
-  channelField(...channels) {
-    const list = channels.flat();
-    for (const channel of list) {
-      const c = this.channel(channel);
-      if (c?.field) return c;
-    }
-    return null;
+  channelField(channel, { exact } = {}) {
+    const c = exact
+      ? this.channel(channel)
+      : this.channels.find(c => c.channel.startsWith(channel));
+    return c?.field ? c : null;
   }
 
   fields() {
     if (this.hasOwnData()) return null;
-    const { source: { table }, channels, reqs } = this;
 
+    const { source: { table }, channels, reqs } = this;
     const fields = new Map;
     for (const { channel, field } of channels) {
-      const column = field?.column;
-      if (!column) {
-        continue; // no column to lookup
-      } else if (field.stats?.length || reqs[channel]) {
-        if (!fields.has(column)) fields.set(column, new Set);
-        const entry = fields.get(column);
-        reqs[channel]?.forEach(s => entry.add(s));
-        field.stats?.forEach(s => entry.add(s));
-      }
+      if (!field) continue;
+      const stats = field.stats?.stats || [];
+      const key = field.stats?.column ?? field;
+      const entry = fields.get(key) ?? fields.set(key, new Set).get(key);
+      stats.forEach(s => entry.add(s));
+      reqs[channel]?.forEach(s => entry.add(s));
     }
-    return Array.from(fields, ([column, stats]) => {
-      return { table, column, stats: Array.from(stats) };
-    });
+
+    return Array.from(fields, ([c, s]) => ({ table, column: c, stats: s }));
   }
 
   fieldInfo(info) {
-    this.stats = info.reduce(
-      (o, d) => (o[d.column] = d, o),
-      Object.create(null)
-    );
+    const lookup = Object.fromEntries(info.map(x => [x.column, x]));
+    for (const entry of this.channels) {
+      const { field } = entry;
+      if (field) {
+        Object.assign(entry, lookup[field.stats?.column ?? field]);
+      }
+    }
+    this._fieldInfo = true;
     return this;
   }
 
@@ -169,6 +173,13 @@ export class Mark extends MosaicClient {
   }
 }
 
+/**
+ * Helper method for setting a channel option in a Plot specification.
+ * Checks if a constant value or a data field is needed.
+ * Also avoids misinterpretation of data values as color names.
+ * @param {*} c a visual encoding channel spec
+ * @returns the Plot channel option
+ */
 export function channelOption(c) {
   // use a scale override for color channels to sidestep
   // https://github.com/observablehq/plot/issues/1593
@@ -177,6 +188,16 @@ export function channelOption(c) {
     : c.as;
 }
 
+/**
+ * Default query construction for a mark.
+ * Tracks aggregates by checking fields for an aggregate flag.
+ * If aggregates are found, groups by all non-aggregate fields.
+ * @param {*} channels array of visual encoding channel specs.
+ * @param {*} table the table to query.
+ * @param {*} skip an optional array of channels to skip.
+ *  Mark subclasses can skip channels that require special handling.
+ * @returns a Query instance
+ */
 export function markQuery(channels, table, skip = []) {
   const q = Query.from({ source: table });
   const dims = new Set;

package/src/marks/RasterMark.js

@@ -23,7 +23,7 @@ export class RasterMark extends Grid2DMark {
   }
 
   setPlot(plot, index) {
-    const update = () => { if (this.stats) this.rasterize(); };
+    const update = () => { if (this.hasFieldInfo()) this.rasterize(); };
     plot.addAttributeListener('schemeColor', update);
     super.setPlot(plot, index);
   }

package/src/marks/RasterTileMark.js

@@ -18,7 +18,7 @@ export class RasterTileMark extends Grid2DMark {
   }
 
   setPlot(plot, index) {
-    const update = () => { if (this.stats) this.rasterize(); };
+    const update = () => { if (this.hasFieldInfo()) this.rasterize(); };
     plot.addAttributeListener('schemeColor', update);
     super.setPlot(plot, index);
   }

package/src/marks/util/channel-scale.js

@@ -5,8 +5,7 @@ export function channelScale(mark, channel) {
 
   let scaleType = plot.getAttribute(`${channel}Scale`);
   if (!scaleType) {
-    const { field } = mark.channelField(channel, `${channel}1`, `${channel}2`);
-    const { type } = mark.stats[field.column];
+    const { type } = mark.channelField(channel);
     scaleType = type === 'date' ? 'time' : 'linear';
   }
 

package/src/marks/util/extent.js

@@ -6,16 +6,14 @@ export const yext = { y: ['min', 'max'] };
 export const xyext = { ...xext, ...yext };
 
 export function plotExtent(mark, filter, channel, domainAttr, niceAttr) {
-  const { plot, stats } = mark;
+  const { plot } = mark;
   const domain = plot.getAttribute(domainAttr);
   const nice = plot.getAttribute(niceAttr);
 
   if (Array.isArray(domain) && !domain[Transient]) {
     return domain;
   } else {
-    const { field } = mark.channelField(channel);
-    const { column } = field;
-    const { min, max } = stats[column];
+    const { column, min, max } = mark.channelField(channel);
     const dom = filteredExtent(filter, column) || (nice
       ? scaleLinear().domain([min, max]).nice().domain()
       : [min, max]);
@@ -39,7 +37,7 @@ export function filteredExtent(filter, column) {
   let lo;
   let hi;
   const visitor = (type, clause) => {
-    if (type === 'BETWEEN' && clause.field.column === column) {
+    if (type === 'BETWEEN' && `${clause.field}` === column) {
       const { range } = clause;
       if (range && (lo == null || range[0] < lo)) lo = range[0];
       if (range && (hi == null || range[1] > hi)) hi = range[1];

package/src/marks/util/grid.js

@@ -1,20 +1,18 @@
 import { InternSet, ascending } from 'd3';
-import { convertArrowColumn, convertArrowType, isArrowTable } from './arrow.js';
+import {
+  convertArrowArrayType,
+  convertArrowColumn,
+  isArrowTable
+} from '@uwdata/mosaic-core';
 
 function arrayType(values, name = 'density') {
-  if (isArrowTable(values)) {
-    return convertArrowType(values.getChild(name).type);
-  } else {
-    return typeof values[0][name] === 'number' ? Float64Array : Array;
-  }
-}
-
-export function grid1d(n, values) {
-  const Type = arrayType(values);
-  return valuesToGrid(new Type(n), values);
+  return isArrowTable(values)
+    ? convertArrowArrayType(values.getChild(name).type)
+    : typeof values[0]?.[name] === 'number' ? Float64Array : Array;
 }
 
-function valuesToGrid(grid, values, name = 'density') {
+export function grid1d(n, values, name = 'density') {
+  const grid = new (arrayType(values))(n);
   if (isArrowTable(values)) {
     // optimize access for Arrow tables
     const numRows = values.numRows;

package/src/marks/util/interpolate.js

@@ -1,5 +1,8 @@
 import { Delaunay, randomLcg } from 'd3';
 
+// Derived from Observable Plot’s interpolatorBarycentric:
+// https://github.com/observablehq/plot/blob/41a63e372453d2f95e7a046839dfd245d21e7660/src/marks/raster.js#L283-L334
+
 export function interpolatorBarycentric({random = randomLcg(42)} = {}) {
   return (index, width, height, X, Y, V, W) => {
     // Interpolate the interior of all triangles with barycentric coordinates
@@ -122,6 +125,9 @@ function ray(j, X, Y) {
   };
 }
 
+// Derived from Observable Plot’s interpolateNearest:
+// https://github.com/observablehq/plot/blob/41a63e372453d2f95e7a046839dfd245d21e7660/src/marks/raster.js#L410-L428
+
 export function interpolateNearest(index, width, height, X, Y, V, W) {
   const delaunay = Delaunay.from(index, (i) => X[i], (i) => Y[i]);
   // memoization of delaunay.find for the line start (iy) and pixel (ix)
@@ -137,6 +143,9 @@ export function interpolateNearest(index, width, height, X, Y, V, W) {
   return W;
 }
 
+// Derived from Observable Plot’s interpolatorRandomWalk:
+// https://github.com/observablehq/plot/blob/41a63e372453d2f95e7a046839dfd245d21e7660/src/marks/raster.js#L430-L462
+
 // https://observablehq.com/@observablehq/walk-on-spheres-precision
 export function interpolatorRandomWalk({random = randomLcg(42), minDistance = 0.5, maxSteps = 2} = {}) {
   return (index, width, height, X, Y, V, W) => {

package/src/marks/util/is-color.js

@@ -1,5 +1,8 @@
 import { color } from 'd3';
 
+// Derived from Observable Plot’s isColor:
+// https://github.com/observablehq/plot/blob/a063b226fec284c5b0e973701fdbbb244ef9ac2c/src/options.js#L462-L477
+
 // Mostly relies on d3-color, with a few extra color keywords. Currently this
 // strictly requires that the value be a string; we might want to apply string
 // coercion here, though note that d3-color instances would need to support

package/src/marks/util/to-data-array.js

@@ -1,4 +1,4 @@
-import { convertArrow, isArrowTable } from './arrow.js';
+import { convertArrowValue, isArrowTable } from '@uwdata/mosaic-core';
 
 export function toDataArray(data) {
   return isArrowTable(data) ? arrowToObjects(data) : data;
@@ -34,7 +34,7 @@ export function arrowToObjects(data) {
     for (let j = 0; j < numCols; ++j) {
       const child = batch.getChildAt(j);
       const { name, type } = schema.fields[j];
-      const valueOf = convertArrow(type);
+      const valueOf = convertArrowValue(type);
 
       // for each row in the current batch...
       for (let o = k, i = 0; i < numRows; ++i, ++o) {

package/src/plot-renderer.js

@@ -9,8 +9,6 @@ const OPTIONS_ONLY_MARKS = new Set([
   'graticule'
 ]);
 
-
-
 // construct Plot output
 // see https://github.com/observablehq/plot
 export async function plotRenderer(plot) {
@@ -76,17 +74,17 @@ function setSymbolAttributes(plot, svg, attributes, symbols) {
 
 function inferLabels(spec, plot) {
   const { marks } = plot;
-  inferLabel('x', spec, marks, ['x', 'x1', 'x2']);
-  inferLabel('y', spec, marks, ['y', 'y1', 'y2']);
+  inferLabel('x', spec, marks);
+  inferLabel('y', spec, marks);
   inferLabel('fx', spec, marks);
   inferLabel('fy', spec, marks);
 }
 
-function inferLabel(key, spec, marks, channels = [key]) {
+function inferLabel(key, spec, marks) {
   const scale = spec[key] || {};
   if (scale.axis === null || scale.label !== undefined) return; // nothing to do
 
-  const fields = marks.map(mark => mark.channelField(channels)?.field);
+  const fields = marks.map(mark => mark.channelField(key)?.field);
   if (fields.every(x => x == null)) return; // no columns found
 
   // check for consistent columns / labels
@@ -100,7 +98,7 @@ function inferLabel(key, spec, marks, channels = [key]) {
     } else if (candCol === undefined && candLabel === undefined) {
       candCol = column;
       candLabel = label;
-      type = getType(marks[i].data, channels) || 'number';
+      type = getType(marks[i].data, key) || 'number';
     } else if (candLabel !== label) {
       candLabel = undefined;
     } else if (candCol !== column) {
@@ -149,13 +147,11 @@ function annotateMarks(svg, indices) {
   }
 }
 
-function getType(data, channels) {
+function getType(data, channel) {
   for (const row of data) {
-    for (let j = 0; j < channels.length; ++j) {
-      const v = row[channels[j]];
-      if (v != null) {
-        return v instanceof Date ? 'date' : typeof v;
-      }
+    const v = row[channel] ?? row[channel+'1'] ?? row[channel+'2'];
+    if (v != null) {
+      return v instanceof Date ? 'date' : typeof v;
     }
   }
 }

package/src/transforms/bin.js

@@ -24,12 +24,12 @@ function binField(mark, channel, column, options) {
   return {
     column,
     label: column,
-    get stats() { return ['min', 'max']; },
+    get stats() { return { column, stats: ['min', 'max'] }; },
     get columns() { return [column]; },
     get basis() { return column; },
     toString() {
       const { apply, sqlApply, sqlInvert } = channelScale(mark, channel);
-      const { min, max } = mark.stats[column];
+      const { min, max } = mark.channelField(channel);
       const b = bins(apply(min), apply(max), options);
       const col = sqlApply(column);
       const base = b.min === 0 ? col : `(${col} - ${b.min})`;

package/src/marks/util/arrow.js

@@ -1,55 +0,0 @@
-export const INTEGER = 2;
-export const FLOAT = 3;
-export const DECIMAL = 7;
-export const TIMESTAMP = 10;
-
-export function isArrowTable(values) {
-  return typeof values?.getChild === 'function';
-}
-
-export function convertArrowType(type) {
-  switch (type.typeId) {
-    case INTEGER:
-    case FLOAT:
-    case DECIMAL:
-      return Float64Array;
-    default:
-      return Array;
-  }
-}
-
-export function convertArrow(type) {
-  const { typeId } = type;
-
-  // map timestamp numbers to date objects
-  if (typeId === TIMESTAMP) {
-    return v => v == null ? v : new Date(v);
-  }
-
-  // map bignum to number
-  if (typeId === INTEGER && type.bitWidth >= 64) {
-    return v => v == null ? v : Number(v);
-  }
-
-  // otherwise use Arrow JS defaults
-  return v => v;
-}
-
-export function convertArrowColumn(column) {
-  const { type } = column;
-  const { typeId } = type;
-
-  // map bignum to number
-  if (typeId === INTEGER && type.bitWidth >= 64) {
-    const size = column.length;
-    const array = new Float64Array(size);
-    for (let row = 0; row < size; ++row) {
-      const v = column.get(row);
-      array[row] = v == null ? NaN : Number(v);
-    }
-    return array;
-  }
-
-  // otherwise use Arrow JS defaults
-  return column.toArray();
-}