@uwdata/mosaic-plot 0.11.0 → 0.12.1

package/src/marks/Grid2DMark.js

@@ -1,6 +1,6 @@
 import { interpolatorBarycentric, interpolateNearest, interpolatorRandomWalk } from '@observablehq/plot';
 import { toDataColumns } from '@uwdata/mosaic-core';
-import { Query, count, isBetween, lt, lte, neq, sql, sum } from '@uwdata/mosaic-sql';
+import { ExprNode, Query, bin2d, binLinear2d, collectColumns, count, isAggregateExpression, isBetween, lt, lte, sum } from '@uwdata/mosaic-sql';
 import { Transient } from '../symbols.js';
 import { binExpr } from './util/bin-expr.js';
 import { dericheConfig, dericheConv2d } from './util/density.js';
@@ -70,14 +70,14 @@ export class Grid2DMark extends Mark {
     super.setPlot(plot, index);
   }
 
-  get filterIndexable() {
+  get filterStable() {
     const xdom = this.plot.getAttribute('xDomain');
     const ydom = this.plot.getAttribute('yDomain');
     return xdom && ydom && !xdom[Transient] && !ydom[Transient];
   }
 
   query(filter = []) {
-    const { interpolate, pad, channels, densityMap, source } = this;
+    const { interpolate, pad, channels, densityMap } = this;
     const [x0, x1] = this.extentX = extentX(this, filter);
     const [y0, y1] = this.extentY = extentY(this, filter);
     const [nx, ny] = this.bins = this.binDimensions();
@@ -91,15 +91,17 @@ export class Grid2DMark extends Mark {
       : [lte(+x0, bx), lt(bx, +x1), lte(+y0, by), lt(by, +y1)];
 
     const q = Query
-      .from(source.table)
+      .from(this.sourceTable())
       .where(filter.concat(bounds));
 
+    /** @type {string[]} */
     const groupby = this.groupby = [];
+    /** @type {Record<string, ExprNode>} */
     const aggrMap = {};
     for (const c of channels) {
       if (Object.hasOwn(c, 'field')) {
         const { as, channel, field } = c;
-        if (field.aggregate) {
+        if (isAggregateExpression(field)) {
           // include custom aggregate
           aggrMap[channel] = field;
           densityMap[channel] = true;
@@ -123,7 +125,7 @@ export class Grid2DMark extends Mark {
     // if no aggregates, default to count density
     if (!aggr.length) {
       aggr.push(DENSITY);
-      aggrMap.density = count();
+      aggrMap[DENSITY] = count();
     }
 
     // generate grid binning query
@@ -131,10 +133,11 @@ export class Grid2DMark extends Mark {
       if (aggr.length > 1) {
         throw new Error('Linear binning not applicable to multiple aggregates.');
       }
-      if (!aggrMap.density) {
+      if (!aggrMap[DENSITY]) {
         throw new Error('Linear binning not applicable to custom aggregates.');
       }
-      return binLinear2d(q, x, y, aggrMap[DENSITY], nx, groupby);
+      const weight = collectColumns(aggrMap[DENSITY])[0];
+      return binLinear2d(q, x, y, weight, nx, groupby);
     } else {
       return bin2d(q, x, y, aggrMap, nx, groupby);
     }
@@ -228,47 +231,3 @@ function maybeInterpolate(interpolate = 'none') {
   }
   throw new Error(`invalid interpolate: ${interpolate}`);
 }
-
-function bin2d(q, xp, yp, aggs, xn, groupby) {
-  return q
-    .select({
-      index: sql`FLOOR(${xp})::INTEGER + FLOOR(${yp})::INTEGER * ${xn}`,
-      ...aggs
-    })
-    .groupby('index', groupby);
-}
-
-function binLinear2d(q, xp, yp, density, xn, groupby) {
-  const w = density?.column ? `* ${density.column}` : '';
-  const subq = (i, w) => q.clone().select({ xp, yp, i, w });
-
-  // grid[xu + yu * xn] += (xv - xp) * (yv - yp) * wi;
-  const a = subq(
-    sql`FLOOR(xp)::INTEGER + FLOOR(yp)::INTEGER * ${xn}`,
-    sql`(FLOOR(xp)::INTEGER + 1 - xp) * (FLOOR(yp)::INTEGER + 1 - yp)${w}`
-  );
-
-  // grid[xu + yv * xn] += (xv - xp) * (yp - yu) * wi;
-  const b = subq(
-    sql`FLOOR(xp)::INTEGER + (FLOOR(yp)::INTEGER + 1) * ${xn}`,
-    sql`(FLOOR(xp)::INTEGER + 1 - xp) * (yp - FLOOR(yp)::INTEGER)${w}`
-  );
-
-  // grid[xv + yu * xn] += (xp - xu) * (yv - yp) * wi;
-  const c = subq(
-    sql`FLOOR(xp)::INTEGER + 1 + FLOOR(yp)::INTEGER * ${xn}`,
-    sql`(xp - FLOOR(xp)::INTEGER) * (FLOOR(yp)::INTEGER + 1 - yp)${w}`
-  );
-
-  // grid[xv + yv * xn] += (xp - xu) * (yp - yu) * wi;
-  const d = subq(
-    sql`FLOOR(xp)::INTEGER + 1 + (FLOOR(yp)::INTEGER + 1) * ${xn}`,
-    sql`(xp - FLOOR(xp)::INTEGER) * (yp - FLOOR(yp)::INTEGER)${w}`
-  );
-
-  return Query
-    .from(Query.unionAll(a, b, c, d))
-    .select({ index: 'i', density: sum('w') }, groupby)
-    .groupby('index', groupby)
-    .having(neq('density', 0));
-}

package/src/marks/HexbinMark.js

@@ -1,4 +1,4 @@
-import { Query, isNotNull, sql } from '@uwdata/mosaic-sql';
+import { Query, abs, add, and, bitAnd, cond, div, float64, gt, int32, isAggregateExpression, isNotNull, lt, mul, neq, pow, round, sub } from '@uwdata/mosaic-sql';
 import { Transient } from '../symbols.js';
 import { extentX, extentY, xyext } from './util/extent.js';
 import { Mark } from './Mark.js';
@@ -15,7 +15,7 @@ export class HexbinMark extends Mark {
     });
   }
 
-  get filterIndexable() {
+  get filterStable() {
     const xdom = this.plot.getAttribute('xDomain');
     const ydom = this.plot.getAttribute('yDomain');
     return xdom && ydom && !xdom[Transient] && !ydom[Transient];
@@ -23,24 +23,24 @@ export class HexbinMark extends Mark {
 
   query(filter = []) {
     if (this.hasOwnData()) return null;
-    const { plot, binWidth, channels, source } = this;
+    const { plot, binWidth, channels } = this;
 
     // Extract channel information, update top-level query
     // and extract dependent columns for aggregates
-    let x, y;
+    let xc, yc;
     const dims = new Set;
     const cols = {};
     for (const c of channels) {
       if (c.channel === 'orderby') {
         // ignore ordering, as we will aggregate
       } else if (c.channel === 'x') {
-        x = c;
+        xc = c;
       } else if (c.channel === 'y') {
-        y = c;
+        yc = c;
       } else if (Object.hasOwn(c, 'field')) {
         const { as, field } = c;
         cols[as] = field;
-        if (!field.aggregate) {
+        if (!isAggregateExpression(field)) {
           dims.add(as);
         }
       }
@@ -54,33 +54,66 @@ export class HexbinMark extends Mark {
     // margins as this is what Observable Plot does.
     const ox = 0.5 - plot.getAttribute('marginLeft');
     const oy = 0 - plot.getAttribute('marginTop');
-    const dx = `${binWidth}::DOUBLE`;
-    const dy = `${binWidth * (1.5 / Math.sqrt(3))}::DOUBLE`;
-    const xr = `${plot.innerWidth() / (x2 - x1)}::DOUBLE`;
-    const yr = `${plot.innerHeight() / (y2 - y1)}::DOUBLE`;
+    const dx = float64(binWidth);
+    const dy = float64(binWidth * (1.5 / Math.sqrt(3)));
+    const xr = float64(plot.innerWidth() / (x2 - x1));
+    const yr = float64(plot.innerHeight() / (y2 - y1));
+
+    // column references
+    const x ='_x';
+    const y = '_y';
+    const px = '_px';
+    const py = '_py';
+    const pi = '_pi';
+    const pj = '_pj';
+    const tt = '_tt';
 
     // Top-level query maps from screen space back to data values.
     // Doing so ensures that Plot generates correct data-driven scales.
     return Query.select({
-        [x.as]: sql`${x1}::DOUBLE + ((_x + 0.5 * (_y & 1)) * ${dx} + ${ox})::DOUBLE / ${xr}`,
-        [y.as]: sql`${y2}::DOUBLE - (_y * ${dy} + ${oy})::DOUBLE / ${yr}`,
+        [xc.as]: add(
+          float64(x1),
+          div(add(mul(add(x, mul(0.5, bitAnd(y, 1))), dx), ox), xr)
+        ),
+        [yc.as]: sub(
+          float64(y2),
+          div(add(mul(y, dy), oy), yr)
+        ),
         ...cols
       })
-      .groupby('_x', '_y', ...dims)
+      .groupby(x, y, ...dims)
       .from(
         // Subquery performs hex binning in screen space and also passes
         // original columns through (the DB should optimize this).
         Query.select({
-            _py: sql`(${yr} * (${y2}::DOUBLE - ${y.field}) - ${oy}) / ${dy}`,
-            _pj: sql`ROUND(_py)::INTEGER`,
-            _px: sql`(${xr} * (${x.field} - ${x1}::DOUBLE) - ${ox}) / ${dx} - 0.5 * (_pj & 1)`,
-            _pi: sql`ROUND(_px)::INTEGER`,
-            _tt: sql`ABS(_py-_pj) * 3 > 1 AND (_px-_pi)**2 + (_py-_pj)**2 > (_px - _pi - 0.5 * CASE WHEN _px < _pi THEN -1 ELSE 1 END)**2 + (_py - _pj - CASE WHEN _py < _pj THEN -1 ELSE 1 END)**2`,
-            _x: sql`CASE WHEN _tt THEN (_pi + (CASE WHEN _px < _pi THEN -0.5 ELSE 0.5 END) + (CASE WHEN _pj & 1 <> 0 THEN 0.5 ELSE -0.5 END))::INTEGER ELSE _pi END`,
-            _y: sql`CASE WHEN _tt THEN (_pj + CASE WHEN _py < _pj THEN -1 ELSE 1 END)::INTEGER ELSE _pj END`
+            [py]: div(sub(mul(yr, sub(y2, yc.field)), oy), dy),
+            [pj]: int32(round(py)),
+            [px]: sub(
+                div(sub(mul(xr, sub(xc.field, x1)), ox), dx),
+                mul(0.5, bitAnd(pj, 1))
+              ),
+            [pi]: int32(round(px)),
+            [tt]: and(
+                gt(mul(abs(sub(py, pj)), 3), 1),
+                gt(
+                  add(pow(sub(px, pi), 2), pow(sub(py, pj), 2)),
+                  add(
+                    pow(sub(sub(px, pi), mul(0.5, cond(lt(px, pi), -1, 1))), 2),
+                    pow(sub(sub(py, pj), cond(lt(py, pj), -1, 1)), 2)
+                  )
+                )
+              ),
+            [x]: cond(tt,
+                int32(add(
+                  add(pi, cond(lt(px, pi), -0.5, 0.5)),
+                  cond(neq(bitAnd(pj, 1), 0), 0.5, -0.5)
+                )),
+                pi
+              ),
+            [y]: cond(tt, int32(add(pj, cond(lt(py, pj), -1, 1))), pj)
           }, '*')
-          .from(source.table)
-          .where(isNotNull(x.field), isNotNull(y.field), filter)
+          .from(this.sourceTable())
+          .where(isNotNull(xc.field), isNotNull(yc.field), filter)
       );
   }
 }

package/src/marks/Mark.js

@@ -1,5 +1,5 @@
-import { MosaicClient, toDataColumns } from '@uwdata/mosaic-core';
-import { Query, Ref, column, isParamLike } from '@uwdata/mosaic-sql';
+import { isParam, MosaicClient, toDataColumns } from '@uwdata/mosaic-core';
+import { Query, SelectQuery, collectParams, column, isAggregateExpression, isColumnRef, isNode, isParamLike } from '@uwdata/mosaic-sql';
 import { isColor } from './util/is-color.js';
 import { isConstantOption } from './util/is-constant-option.js';
 import { isSymbol } from './util/is-symbol.js';
@@ -15,7 +15,7 @@ const isFieldObject = (channel, field) => {
 const fieldEntry = (channel, field) => ({
   channel,
   field,
-  as: field instanceof Ref ? field.column : channel
+  as: isColumnRef(field) ? field.column : channel
 });
 const valueEntry = (channel, value) => ({ channel, value });
 
@@ -28,16 +28,18 @@ export class Mark extends MosaicClient {
     super(source?.options?.filterBy);
     this.type = type;
     this.reqs = reqs;
-
     this.source = source;
-    if (isDataArray(this.source)) {
-      this.data = toDataColumns(this.source);
-    }
 
     const channels = this.channels = [];
     const detail = this.detail = new Set;
     const params = this.params = new Set;
 
+    if (isDataArray(source)) {
+      this.data = toDataColumns(source);
+    } else if (isParam(source?.table)) {
+      params.add(source.table);
+    }
+
     const process = (channel, entry) => {
       const type = typeof entry;
       if (channel === 'channels') {
@@ -62,20 +64,16 @@ export class Mark extends MosaicClient {
           channels.push(fieldEntry(channel, column(entry)));
         }
       } else if (isParamLike(entry)) {
-        if (Array.isArray(entry.columns)) {
-          // we currently duck-type to having a columns array
-          // as a check that this is SQLExpression-compatible
-          channels.push(fieldEntry(channel, entry));
-          params.add(entry);
-        } else {
-          const c = valueEntry(channel, entry.value);
-          channels.push(c);
-          entry.addEventListener('value', value => {
-            // update immediately, the value is simply passed to Plot
-            c.value = value;
-            return this.update();
-          });
-        }
+        const c = valueEntry(channel, entry.value);
+        channels.push(c);
+        entry.addEventListener('value', value => {
+          // update immediately, the value is simply passed to Plot
+          c.value = value;
+          return this.update();
+        });
+      } else if (isNode(entry)) {
+        collectParams(entry).forEach(p => params.add(p));
+        channels.push(fieldEntry(channel, entry))
       } else if (type === 'object' && isFieldObject(channel, entry)) {
         channels.push(fieldEntry(channel, entry));
       } else if (entry !== undefined) {
@@ -99,6 +97,11 @@ export class Mark extends MosaicClient {
     if (this.source?.table) this.queryPending();
   }
 
+  sourceTable() {
+    const table = this.source?.table;
+    return table ? (isParam(table) ? table.value : table) : null;
+  }
+
   hasOwnData() {
     return this.source == null || isDataArray(this.source);
   }
@@ -121,7 +124,7 @@ export class Mark extends MosaicClient {
   fields() {
     if (this.hasOwnData()) return null;
 
-    const { source: { table }, channels, reqs } = this;
+    const { channels, reqs } = this;
     const fields = new Map;
     for (const { channel, field } of channels) {
       if (!field) continue;
@@ -132,6 +135,7 @@ export class Mark extends MosaicClient {
       reqs[channel]?.forEach(s => entry.add(s));
     }
 
+    const table = this.sourceTable();
     return Array.from(fields, ([c, s]) => ({ table, column: c, stats: s }));
   }
 
@@ -154,8 +158,7 @@ export class Mark extends MosaicClient {
    */
   query(filter = []) {
     if (this.hasOwnData()) return null;
-    const { channels, source: { table } } = this;
-    return markQuery(channels, table).where(filter);
+    return markQuery(this.channels, this.sourceTable()).where(filter);
   }
 
   queryPending() {
@@ -211,7 +214,7 @@ export function channelOption(c, columns) {
  * @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 {Query} a Query instance
+ * @returns {SelectQuery} a Query instance
  */
 export function markQuery(channels, table, skip = []) {
   const q = Query.from({ source: table });
@@ -225,7 +228,7 @@ export function markQuery(channels, table, skip = []) {
     if (channel === 'orderby') {
       q.orderby(c.value);
     } else if (field) {
-      if (field.aggregate) {
+      if (isAggregateExpression(field)) {
         aggr = true;
       } else {
         if (dims.has(as)) continue;

package/src/marks/RasterMark.js

@@ -173,6 +173,7 @@ function alphaScale(mark, prop) {
     opacity: {
       type: plot.getAttribute('opacityScale'),
       domain,
+      range: plot.getAttribute('opacityRange'),
       clamp: plot.getAttribute('opacityClamp'),
       nice: plot.getAttribute('opacityNice'),
       reverse: plot.getAttribute('opacityReverse'),

package/src/marks/RasterTileMark.js

@@ -36,7 +36,7 @@ export class RasterTileMark extends Grid2DMark {
   }
 
   tileQuery(extent) {
-    const { interpolate, pad, channels, densityMap, source } = this;
+    const { interpolate, pad, channels, densityMap } = this;
     const [[x0, x1], [y0, y1]] = extent;
     const [nx, ny] = this.bins;
     const [x, bx] = binExpr(this, 'x', nx, [x0, x1], pad);
@@ -49,7 +49,7 @@ export class RasterTileMark extends Grid2DMark {
       : [lte(+x0, bx), lt(bx, +x1), lte(+y0, by), lt(by, +y1)];
 
     const q = Query
-      .from(source.table)
+      .from(this.sourceTable())
       .where(bounds);
 
     const groupby = this.groupby = [];

package/src/marks/RegressionMark.js

@@ -1,7 +1,7 @@
 import { range } from 'd3';
 import { toDataColumns } from '@uwdata/mosaic-core';
 import {
-  Query, max, min, castDouble, isNotNull,
+  Query, max, min, float64, isNotNull,
   regrIntercept, regrSlope, regrCount,
   regrSYY, regrSXX, regrAvgX
 } from '@uwdata/mosaic-sql';
@@ -43,8 +43,8 @@ export class RegressionMark extends Mark {
         ssy: regrSYY(y, x),
         ssx: regrSXX(y, x),
         xm: regrAvgX(y, x),
-        x0: castDouble(min(x).where(isNotNull(y))),
-        x1: castDouble(max(x).where(isNotNull(y)))
+        x0: float64(min(x).where(isNotNull(y))),
+        x1: float64(max(x).where(isNotNull(y)))
       })
       .select(groupby)
       .groupby(groupby);

package/src/marks/util/bin-expr.js

@@ -1,12 +1,12 @@
-import { sql } from '@uwdata/mosaic-sql';
+import { bin1d } from '@uwdata/mosaic-sql';
 import { channelScale } from './channel-scale.js';
 
 /**
  * Generates a SQL expression for 1D pixel-level binning.
  * Adjusts for scale transformations (log, sqrt, ...).
  * Returns a [binExpression, field] array, where field is the
- * input value that is binned. Often the field is just a column
- * name. For time data, fields are mapped to numerical timestamps.
+ * input value being binned. Often the field is just a column
+ * name. For time data, fields are mapped to millisecond timestamps.
  */
 export function binExpr(mark, channel, n, extent, pad = 1, expr) {
   // get base expression, the channel field unless otherwise given
@@ -21,10 +21,5 @@ export function binExpr(mark, channel, n, extent, pad = 1, expr) {
   const [lo, hi] = extent.map(v => apply(v));
   const v = sqlApply(expr);
   const f = type === 'time' || type === 'utc' ? v : expr;
-  const d = hi === lo ? 0 : (n - pad) / (hi - lo);
-  const s = d !== 1 ? ` * ${d}::DOUBLE` : '';
-  const bin = reverse
-    ? sql`(${hi} - ${v}::DOUBLE)${s}`
-    : sql`(${v}::DOUBLE - ${lo})${s}`;
-  return [bin, f];
+  return [bin1d(v, lo, hi, n - pad, reverse), f];
 }

package/src/marks/util/extent.js

@@ -1,5 +1,6 @@
 import { scaleLinear } from 'd3';
 import { Fixed, Transient } from '../../symbols.js';
+import { BetweenOpNode, walk } from '@uwdata/mosaic-sql';
 
 export const xext = { x: ['min', 'max'] };
 export const yext = { y: ['min', 'max'] };
@@ -36,19 +37,15 @@ export function filteredExtent(filter, column) {
 
   let lo;
   let hi;
-  const visitor = (type, clause) => {
-    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];
-    }
-  };
 
-  if (Array.isArray(filter)) {
-    filter.forEach(p => p.visit?.(visitor));
-  } else if (filter.visit) {
-    filter.visit(visitor);
-  }
+  [filter].flat().forEach(p => walk(p, (node) => {
+    if (node instanceof BetweenOpNode && `${node.expr}` === column) {
+      // @ts-ignore
+      const extent = (node.extent ?? []).map(v => v?.value ?? v);
+      if (lo == null || extent[0] < lo) lo = extent[0];
+      if (hi == null || extent[1] > hi) hi = extent[1];
+    }
+  }));
 
   return lo != null && hi != null && lo !== hi ? [lo, hi] : undefined;
 }

package/src/plot-renderer.js

@@ -102,54 +102,42 @@ function inferLabel(key, spec, marks) {
   const fields = marks.map(mark => mark.channelField(key)?.field);
   if (fields.every(x => x == null)) return; // no columns found
 
-  // check for consistent columns / labels
-  let candCol;
-  let candLabel;
-  let type;
+  // check for consistent label
+  let candidate;
   for (let i = 0; i < fields.length; ++i) {
-    const { column, label } = fields[i] || {};
-    if (column === undefined && label === undefined) {
+    const label = fieldLabel(fields[i]);
+    if (label === undefined) {
       continue;
-    } else if (candCol === undefined && candLabel === undefined) {
-      candCol = column;
-      candLabel = label;
-      type = getType(marks[i].data, key) || 'number';
-    } else if (candLabel !== label) {
-      candLabel = undefined;
-    } else if (candCol !== column) {
-      candCol = undefined;
+    } else if (candidate === undefined) {
+      candidate = label;
+    } else if (candidate !== label) {
+      candidate = undefined;
     }
   }
-  let candidate = candLabel || candCol;
   if (candidate === undefined) return;
 
-  // adjust candidate label formatting
-  if ((type === 'number' || type === 'date') && (key === 'x' || key === 'y')) {
-    if (scale.percent) candidate = `${candidate} (%)`;
-    const order = (key === 'x' ? 1 : -1) * (scale.reverse ? -1 : 1);
-    if (key === 'x' || scale.labelAnchor === 'center') {
-      candidate = (key === 'x') === order < 0 ? `← ${candidate}` : `${candidate} →`;
-    } else {
-      candidate = `${order < 0 ? '↑ ' : '↓ '}${candidate}`;
-    }
-  }
-
   // add label to spec
   spec[key] = { ...scale, label: candidate };
 }
 
-function annotatePlot(svg, indices) {
-  const facets = svg.querySelectorAll('g[aria-label="facet"]');
-  if (facets.length) {
-    for (const facet of facets) {
-      annotateMarks(facet, indices);
-    }
-  } else {
-    annotateMarks(svg, indices);
+function fieldLabel(field) {
+  if (!field) return undefined;
+  switch (field.type) {
+    case 'COLUMN_REF': return field.column;
+    case 'CAST': return fieldLabel(field.expr);
+    case 'FUNCTION':
+      if (field.name === 'make_date') return 'date';
+      break;
   }
+  return exprLabel(field);
+}
+
+function exprLabel(field) {
+  const s = `${field}`.replaceAll('"', '').replaceAll('(*)', '()');
+  return s.endsWith('()') ? s.slice(0, -2) : s;
 }
 
-function annotateMarks(svg, indices) {
+function annotatePlot(svg, indices) {
   let index = -1;
   for (const child of svg.children) {
     const aria = child.getAttribute('aria-label') || '';
@@ -161,16 +149,3 @@ function annotateMarks(svg, indices) {
     }
   }
 }
-
-function getType(data, channel) {
-  if (!data) return;
-  const { columns } = data;
-  const col = columns[channel] ?? columns[channel+'1'] ?? columns[channel+'2'];
-  if (col) {
-    for (const v of col) {
-      if (v != null) {
-        return v instanceof Date ? 'date' : typeof v;
-      }
-    }
-  }
-}