@uwdata/vgplot 0.12.0 → 0.12.2

package/README.md

@@ -1,5 +1,7 @@
 # vgplot: A Mosaic-powered Visualization Grammar
 
+[![npm version](https://img.shields.io/npm/v/@uwdata/vgplot.svg)](https://www.npmjs.com/package/@uwdata/vgplot)
+
 A **v**isualization **g**rammar for interactive Mosaic-powered visualizations and dashboards. This package provides convenient, composable methods that combines multiple Mosaic packages (core, inputs, plot, etc.) in an integrated API.
 
 vgplot is a JavaScript API for creating visualizations and dashboards. See the [mosaic-spec](https://github.com/uwdata/mosaic/tree/main/packages/spec) package to instead use declarative specifications in JSON or YAML format.

package/dist/vgplot.js

@@ -103,7 +103,7 @@ var require_search_bounds = __commonJS({
       }
       return -1;
     }
-    function norm(a2, y4, c4, l, h2, f2) {
+    function norm2(a2, y4, c4, l, h2, f2) {
       if (typeof c4 === "function") {
         return f2(a2, y4, c4, l === void 0 ? 0 : l | 0, h2 === void 0 ? a2.length - 1 : h2 | 0);
       }
@@ -111,19 +111,19 @@ var require_search_bounds = __commonJS({
     }
     module.exports = {
       ge: function(a2, y4, c4, l, h2) {
-        return norm(a2, y4, c4, l, h2, ge);
+        return norm2(a2, y4, c4, l, h2, ge);
       },
       gt: function(a2, y4, c4, l, h2) {
-        return norm(a2, y4, c4, l, h2, gt2);
+        return norm2(a2, y4, c4, l, h2, gt2);
       },
       lt: function(a2, y4, c4, l, h2) {
-        return norm(a2, y4, c4, l, h2, lt2);
+        return norm2(a2, y4, c4, l, h2, lt2);
       },
       le: function(a2, y4, c4, l, h2) {
-        return norm(a2, y4, c4, l, h2, le);
+        return norm2(a2, y4, c4, l, h2, le);
       },
       eq: function(a2, y4, c4, l, h2) {
-        return norm(a2, y4, c4, l, h2, eq2);
+        return norm2(a2, y4, c4, l, h2, eq2);
       }
     };
   }
@@ -563,14 +563,15 @@ var MosaicClient = class {
   }
   /**
    * Return an array of fields queried by this client.
-   * @returns {object[]|null} The fields to retrieve info for.
+   * @returns {import('./types.js').FieldInfoRequest[] | null}
+   *  The fields to retrieve info for.
    */
   fields() {
     return null;
   }
   /**
    * Called by the coordinator to set the field info for this client.
-   * @param {*} info The field info result.
+   * @param {import('./types.js').FieldInfo[]} info The field info result.
    * @returns {this}
    */
   fieldInfo(info) {
@@ -3451,6 +3452,9 @@ var ColumnNameRefNode = class extends ColumnRefNode {
 };
 
 // ../sql/src/ast/column-param.js
+function isColumnParam(value) {
+  return value instanceof ColumnParamNode;
+}
 var ColumnParamNode = class extends ColumnRefNode {
   /**
    * Instantiate a column param node.
@@ -5039,7 +5043,7 @@ function collectAggregates(root2) {
 function collectColumns(root2) {
   const cols = {};
   walk(root2, (node) => {
-    if (node.type === COLUMN_REF) {
+    if (node.type === COLUMN_REF || node.type === COLUMN_PARAM) {
       cols[node] = node;
     }
   });
@@ -5170,21 +5174,21 @@ function bin2d(q2, xp, yp, aggs, xn, groupby) {
 }
 
 // ../sql/src/transforms/bin-linear-1d.js
-function binLinear1d(query, x4, weight) {
+function binLinear1d(query, x4, weight = void 0, groupby = []) {
   const w = weight ? (x5) => mul(x5, weight) : (x5) => x5;
   const p0 = floor(x4);
   const p1 = add(p0, 1);
   return Query.from(Query.unionAll(
     query.clone().select({ i: int322(p0), w: w(sub(p1, x4)) }),
     query.clone().select({ i: int322(p1), w: w(sub(x4, p0)) })
-  )).select({ index: "i", density: sum("w") }).groupby("index").having(neq("density", 0));
+  )).select({ index: "i", density: sum("w") }, groupby).groupby("index", groupby).having(neq("density", 0));
 }
 
 // ../sql/src/transforms/bin-linear-2d.js
 function identity(x4) {
   return x4;
 }
-function binLinear2d(q2, xp, yp, weight, xn, groupby) {
+function binLinear2d(q2, xp, yp, weight, xn, groupby = []) {
   const w = weight ? (x4) => mul(x4, weight) : identity;
   const subq = (i, w2) => q2.clone().select({ xp, yp, i, w: w2 });
   const index2 = (x4, y4) => add(x4, mul(y4, xn));
@@ -5914,7 +5918,7 @@ var statMap = {
   [Min]: min,
   [Nulls]: (column3) => count().where(isNull(column3))
 };
-function summarize(table3, column3, stats) {
+function summarize({ table: table3, column: column3, stats }) {
   return Query.from(table3).select(Array.from(stats, (s2) => ({ [s2]: statMap[s2](column3) })));
 }
 async function queryFieldInfo(mc, fields) {
@@ -5925,7 +5929,7 @@ async function queryFieldInfo(mc, fields) {
   }
 }
 async function getFieldInfo(mc, { table: table3, column: column3, stats }) {
-  const q2 = Query.from({ source: table3 }).select({ column: column3 }).groupby(column3.aggregate ? sql`ALL` : []);
+  const q2 = Query.from({ source: table3 }).select({ column: column3 }).groupby(isNode(column3) && isAggregateExpression(column3) ? sql`ALL` : []);
   const [desc2] = Array.from(await mc.query(Query.describe(q2)));
   const info = {
     table: table3,
@@ -5934,16 +5938,16 @@ async function getFieldInfo(mc, { table: table3, column: column3, stats }) {
     type: jsType(desc2.column_type),
     nullable: desc2.null === "YES"
   };
-  if (!(stats?.length || stats?.size)) return info;
+  if (!stats?.length) return info;
   const [result] = await mc.query(
-    summarize(table3, column3, stats),
+    summarize({ table: table3, column: column3, stats }),
     { persist: true }
   );
   return Object.assign(info, result);
 }
 async function getTableInfo(mc, table3) {
-  const result = await mc.query(`DESCRIBE ${asTableRef(table3)}`);
-  return Array.from(result).map((desc2) => ({
+  const result = Array.from(await mc.query(`DESCRIBE ${asTableRef(table3)}`));
+  return result.map((desc2) => ({
     table: table3,
     column: desc2.column_name,
     sqlType: desc2.column_type,
@@ -6559,7 +6563,10 @@ var Coordinator = class {
    *  or a SQL string.
    * @param {object} [options] An options object.
    * @param {'arrow' | 'json'} [options.type] The query result format type.
-   * @param {boolean} [options.cache=true] If true, cache the query result.
+   * @param {boolean} [options.cache=true] If true, cache the query result
+   *  client-side within the QueryManager.
+   * @param {boolean} [options.persist] If true, request the database
+   *  server to persist a cached query server-side.
    * @param {number} [options.priority] The query priority, defaults to
    *  `Priority.Normal`.
    * @returns {QueryResult} A query result promise.
@@ -19664,7 +19671,7 @@ function clausePoint(field3, value, {
   source,
   clients = source ? /* @__PURE__ */ new Set([source]) : void 0
 }) {
-  const predicate = value !== void 0 ? isNotDistinct(field3, literal(value)) : null;
+  const predicate = value !== void 0 ? isIn(field3, [literal(value)]) : null;
   return {
     meta: { type: "point" },
     source,
@@ -20118,6 +20125,8 @@ __export(api_exports, {
   voronoi: () => voronoi2,
   voronoiMesh: () => voronoiMesh2,
   vspace: () => vspace,
+  waffleX: () => waffleX2,
+  waffleY: () => waffleY2,
   width: () => width,
   xAlign: () => xAlign,
   xAriaDescription: () => xAriaDescription,
@@ -44193,7 +44202,9 @@ function isColor2(value) {
 
 // ../plot/src/marks/util/is-constant-option.js
 var constantOptions = /* @__PURE__ */ new Set([
+  "offset",
   "order",
+  "reverse",
   "sort",
   "label",
   "anchor",
@@ -44265,7 +44276,7 @@ var isFieldObject = (channel, field3) => {
 var fieldEntry = (channel, field3) => ({
   channel,
   field: field3,
-  as: isColumnRef(field3) ? field3.column : channel
+  as: isColumnRef(field3) && !isColumnParam(field3) ? field3.column : channel
 });
 var valueEntry = (channel, value) => ({ channel, value });
 var isDataArray = (source) => Array.isArray(source);
@@ -44361,7 +44372,11 @@ var Mark2 = class extends MosaicClient {
       reqs[channel]?.forEach((s2) => entry.add(s2));
     }
     const table3 = this.sourceTable();
-    return Array.from(fields, ([c4, s2]) => ({ table: table3, column: c4, stats: s2 }));
+    return Array.from(fields, ([c4, s2]) => ({
+      table: table3,
+      column: c4,
+      stats: Array.from(s2)
+    }));
   }
   fieldInfo(info) {
     const lookup = Object.fromEntries(info.map((x4) => [x4.column, x4]));
@@ -44559,13 +44574,33 @@ var ConnectedMark = class extends Mark2 {
 function array3(size, proto = []) {
   return new proto.constructor(size);
 }
-function grid1d(size, index2, value) {
-  const G = array3(size, value);
-  const n = value.length;
-  for (let i = 0; i < n; ++i) {
-    G[index2[i]] = value[i];
+function grid1d(size, index2, value, columns, groupby) {
+  const numRows = index2.length;
+  const result = {};
+  const cells = [];
+  if (groupby?.length) {
+    const group3 = new Int32Array(numRows);
+    const gvalues = groupby.map((name2) => columns[name2]);
+    const cellMap = {};
+    for (let row = 0; row < numRows; ++row) {
+      const key = gvalues.map((group4) => group4[row]);
+      group3[row] = cellMap[key] ??= cells.push(key) - 1;
+    }
+    for (let i = 0; i < groupby.length; ++i) {
+      result[groupby[i]] = cells.map((cell3) => cell3[i]);
+    }
+    const G = result._grid = cells.map(() => array3(size, value));
+    for (let row = 0; row < numRows; ++row) {
+      G[group3[row]][index2[row]] = value[row];
+    }
+  } else {
+    cells.push([]);
+    const [G] = result._grid = [array3(size, value)];
+    for (let row = 0; row < numRows; ++row) {
+      G[index2[row]] = value[row];
+    }
   }
-  return G;
+  return { numRows: cells.length, columns: result };
 }
 function grid2d(w, h2, index2, columns, aggregates, groupby, interpolate) {
   const numRows = index2.length;
@@ -45423,9 +45458,16 @@ function stripXY(mark2, filter3) {
 }
 
 // ../plot/src/marks/Density1DMark.js
+var GROUPBY = { fill: 1, stroke: 1, z: 1 };
 var Density1DMark = class extends Mark2 {
   constructor(type2, source, options) {
-    const { bins: bins2 = 1024, bandwidth = 20, ...channels } = options;
+    const {
+      bins: bins2 = 1024,
+      bandwidth = 20,
+      normalize: normalize4 = false,
+      stack: stack2 = false,
+      ...channels
+    } = options;
     const dim = type2.endsWith("X") ? "y" : "x";
     super(type2, source, channels, dim === "x" ? xext : yext);
     this.dim = dim;
@@ -45434,7 +45476,13 @@ var Density1DMark = class extends Mark2 {
     });
     this.bandwidth = handleParam(bandwidth, (value) => {
       this.bandwidth = value;
-      return this.grid ? this.convolve().update() : null;
+      return this.grids ? this.convolve().update() : null;
+    });
+    this.normalize = handleParam(normalize4, (value) => {
+      return this.normalize = value, this.convolve().update();
+    });
+    this.stack = handleParam(stack2, (value) => {
+      return this.stack = value, this.update();
     });
   }
   get filterStable() {
@@ -45449,42 +45497,67 @@ var Density1DMark = class extends Mark2 {
     const [x4, bx] = binExpr(this, dim, bins2, extent4);
     const q2 = markQuery(channels, this.sourceTable(), [dim]).where(filter3.concat(isBetween(bx, extent4)));
     const v3 = this.channelField("weight") ? "weight" : null;
-    return binLinear1d(q2, x4, v3);
+    const g2 = this.groupby = channels.flatMap((c4) => {
+      return GROUPBY[c4.channel] && c4.field ? c4.as : [];
+    });
+    return binLinear1d(q2, x4, v3, g2);
   }
   queryResult(data) {
-    const { columns: { index: index2, density: density3 } } = toDataColumns(data);
-    this.grid = grid1d(this.bins, index2, density3);
+    const c4 = toDataColumns(data).columns;
+    this.grids = grid1d(this.bins, c4.index, c4.density, c4, this.groupby);
     return this.convolve();
   }
   convolve() {
-    const { bins: bins2, bandwidth, dim, grid: grid2, plot: plot3, extent: [lo, hi] } = this;
-    const neg = grid2.some((v4) => v4 < 0);
+    const {
+      bins: bins2,
+      bandwidth,
+      normalize: normalize4,
+      dim,
+      grids,
+      groupby,
+      plot: plot3,
+      extent: [lo, hi]
+    } = this;
+    const cols = grids.columns;
+    const numGrids = grids.numRows;
+    const b2 = this.channelField(dim).as;
+    const v3 = dim === "x" ? "y" : "x";
     const size = dim === "x" ? plot3.innerWidth() : plot3.innerHeight();
+    const neg = cols._grid.some((grid2) => grid2.some((v4) => v4 < 0));
     const config = dericheConfig(bandwidth * (bins2 - 1) / size, neg);
-    const result = dericheConv1d(config, grid2, bins2);
-    const v3 = dim === "x" ? "y" : "x";
-    const b2 = this.channelField(dim).as;
     const b0 = +lo;
     const delta = (hi - b0) / (bins2 - 1);
-    const scale3 = 1 / delta;
-    const _b2 = new Float64Array(bins2);
-    const _v2 = new Float64Array(bins2);
-    for (let i = 0; i < bins2; ++i) {
-      _b2[i] = b0 + i * delta;
-      _v2[i] = result[i] * scale3;
-    }
-    this.data = { numRows: bins2, columns: { [b2]: _b2, [v3]: _v2 } };
+    const numRows = bins2 * numGrids;
+    const _b2 = new Float64Array(numRows);
+    const _v2 = new Float64Array(numRows);
+    const _g2 = groupby.reduce((m2, name2) => (m2[name2] = Array(numRows), m2), {});
+    for (let k3 = 0, g2 = 0; g2 < numGrids; ++g2) {
+      groupby.forEach((name2) => _g2[name2].fill(cols[name2][g2], k3, k3 + bins2));
+      const grid2 = cols._grid[g2];
+      const result = dericheConv1d(config, grid2, bins2);
+      const scale3 = 1 / norm(grid2, result, delta, normalize4);
+      for (let i = 0; i < bins2; ++i, ++k3) {
+        _b2[k3] = b0 + i * delta;
+        _v2[k3] = result[i] * scale3;
+      }
+    }
+    this.data = { numRows, columns: { [b2]: _b2, [v3]: _v2, ..._g2 } };
     return this;
   }
   plotSpecs() {
-    const { type: type2, data: { numRows: length4, columns }, channels, dim } = this;
-    const options = dim === "x" ? { y: columns.y } : { x: columns.x };
+    const { type: type2, data: { numRows: length4, columns }, channels, dim, stack: stack2 } = this;
+    const _2 = type2.startsWith("area") && !stack2 ? "2" : "";
+    const options = dim === "x" ? { [`y${_2}`]: columns.y } : { [`x${_2}`]: columns.x };
     for (const c4 of channels) {
       options[c4.channel] = channelOption(c4, columns);
     }
     return [{ type: type2, data: { length: length4 }, options }];
   }
 };
+function norm(grid2, smoothed, delta, type2) {
+  const value = type2 === true || type2 === "sum" ? sum2(grid2) : type2 === "max" ? max2(smoothed) : delta;
+  return value || 1;
+}
 
 // ../plot/src/marks/Density2DMark.js
 var Density2DMark = class extends Grid2DMark {
@@ -45856,13 +45929,16 @@ var HexbinMark = class extends Mark2 {
         float642(x12),
         div(add(mul(add(x4, mul(0.5, bitAnd(y4, 1))), dx), ox2), xr)
       ),
-      [yc.as]: sub(float642(y22), div(add(mul(y4, dy), oy2), yr)),
+      [yc.as]: sub(
+        float642(y22),
+        div(add(mul(y4, dy), oy2), yr)
+      ),
       ...cols
     }).groupby(x4, y4, ...dims).from(
       // Subquery performs hex binning in screen space and also passes
       // original columns through (the DB should optimize this).
       Query.select({
-        [py]: div(mul(yr, sub(sub(y22, yc.field), oy2)), dy),
+        [py]: div(sub(mul(yr, sub(y22, yc.field)), oy2), dy),
         [pj]: int322(round(py)),
         [px]: sub(
           div(sub(mul(xr, sub(xc.field, x12)), ox2), dx),
@@ -47549,6 +47625,7 @@ var Menu = class extends MosaicClient {
   constructor({
     element,
     filterBy,
+    as,
     from: from2,
     column: column3,
     label = column3,
@@ -47556,8 +47633,7 @@ var Menu = class extends MosaicClient {
     // TODO
     options,
     value,
-    field: field3 = column3,
-    as
+    field: field3 = column3
   } = {}) {
     super(filterBy);
     this.from = from2;
@@ -47574,8 +47650,8 @@ var Menu = class extends MosaicClient {
     this.select = document.createElement("select");
     this.element.appendChild(this.select);
     if (options) {
-      this.data = options.map((value2) => isObject3(value2) ? value2 : { value: value2 });
-      this.selectedValue(value ?? "");
+      this.data = options.map((opt) => isObject3(opt) ? opt : { value: opt });
+      this.selectedValue(value === void 0 ? "" : value);
       this.update();
     }
     if (selection2) {
@@ -47592,6 +47668,11 @@ var Menu = class extends MosaicClient {
             this.selectedValue(value2);
           }
         });
+      } else {
+        this.select.addEventListener("pointerenter", (evt) => {
+          if (!evt.buttons) this.activate();
+        });
+        this.select.addEventListener("focus", () => this.activate());
       }
     }
   }
@@ -47611,6 +47692,9 @@ var Menu = class extends MosaicClient {
   reset() {
     this.select.selectedIndex = this.from ? 0 : -1;
   }
+  activate() {
+    this.selection.activate(clausePoint(this.field, 0, { source: this }));
+  }
   publish(value) {
     const { selection: selection2, field: field3 } = this;
     if (isSelection(selection2)) {
@@ -47641,7 +47725,7 @@ var Menu = class extends MosaicClient {
     }
     if (selection2) {
       const value = isSelection(selection2) ? selection2.valueFor(this) : selection2.value;
-      this.selectedValue(value ?? "");
+      this.selectedValue(value === void 0 ? "" : value);
     }
     return this;
   }
@@ -47716,17 +47800,28 @@ var Search = class extends MosaicClient {
             this.searchbox.value = value;
           }
         });
+      } else {
+        this.searchbox.addEventListener("pointerenter", (evt) => {
+          if (!evt.buttons) this.activate();
+        });
+        this.searchbox.addEventListener("focus", () => this.activate());
       }
     }
   }
   reset() {
     this.searchbox.value = "";
   }
+  clause(value) {
+    const { field: field3, type: type2 } = this;
+    return clauseMatch(field3, value, { source: this, method: type2 });
+  }
+  activate() {
+    this.selection.activate(this.clause(""));
+  }
   publish(value) {
-    const { selection: selection2, field: field3, type: type2 } = this;
+    const { selection: selection2 } = this;
     if (isSelection(selection2)) {
-      const clause = clauseMatch(field3, value, { source: this, method: type2 });
-      selection2.update(clause);
+      selection2.update(this.clause(value));
     } else if (isParam(selection2)) {
       selection2.update(value);
     }
@@ -47845,13 +47940,20 @@ var Slider = class extends MosaicClient {
       this.curval.innerText = value2;
       if (this.selection) this.publish(+value2);
     });
-    if (this.selection && !isSelection(this.selection)) {
-      this.selection.addEventListener("value", (value2) => {
-        if (value2 !== +this.slider.value) {
-          this.slider.value = value2;
-          this.curval.innerText = value2;
-        }
-      });
+    if (this.selection) {
+      if (!isSelection(this.selection)) {
+        this.selection.addEventListener("value", (value2) => {
+          if (value2 !== +this.slider.value) {
+            this.slider.value = value2;
+            this.curval.innerText = value2;
+          }
+        });
+      } else {
+        this.slider.addEventListener("pointerenter", (evt) => {
+          if (!evt.buttons) this.activate();
+        });
+        this.slider.addEventListener("focus", () => this.activate());
+      }
     }
   }
   query(filter3 = []) {
@@ -47875,20 +47977,27 @@ var Slider = class extends MosaicClient {
     }
     return this;
   }
+  clause(value) {
+    const { field: field3, selectionType } = this;
+    if (selectionType === "interval") {
+      const domain = [this.min ?? 0, value];
+      return clauseInterval(field3, domain, {
+        source: this,
+        bin: "ceil",
+        scale: { type: "identity", domain },
+        pixelSize: this.step
+      });
+    } else {
+      return clausePoint(field3, value, { source: this });
+    }
+  }
+  activate() {
+    this.selection.activate(this.clause(0));
+  }
   publish(value) {
-    const { field: field3, selectionType, selection: selection2 } = this;
+    const { selection: selection2 } = this;
     if (isSelection(selection2)) {
-      if (selectionType === "interval") {
-        const domain = [this.min ?? 0, value];
-        selection2.update(clauseInterval(field3, domain, {
-          source: this,
-          bin: "ceil",
-          scale: { type: "identity", domain },
-          pixelSize: this.step
-        }));
-      } else {
-        selection2.update(clausePoint(field3, value, { source: this }));
-      }
+      selection2.update(this.clause(value));
     } else if (isParam(this.selection)) {
       selection2.update(value);
     }
@@ -48012,8 +48121,8 @@ var Table3 = class extends MosaicClient {
     coordinator().prefetch(query.clone().offset(offset2 + this.limit));
   }
   fields() {
-    const from2 = this.sourceTable();
-    return this.columns.map((name2) => column(name2, from2));
+    const table3 = this.sourceTable();
+    return this.columns.map((column3) => ({ column: column3, table: table3 }));
   }
   fieldInfo(info) {
     this.schema = info;
@@ -48791,7 +48900,9 @@ __export(marks_exports, {
   vectorX: () => vectorX2,
   vectorY: () => vectorY2,
   voronoi: () => voronoi2,
-  voronoiMesh: () => voronoiMesh2
+  voronoiMesh: () => voronoiMesh2,
+  waffleX: () => waffleX2,
+  waffleY: () => waffleY2
 });
 var decorators = /* @__PURE__ */ new Set([
   "frame",
@@ -48888,6 +48999,8 @@ var gridFy2 = (...args) => mark("gridFy", ...args);
 var geo2 = (...args) => implicitType(GeoMark, ...args);
 var sphere2 = (...args) => mark("sphere", ...args);
 var graticule3 = (...args) => mark("graticule", ...args);
+var waffleX2 = (...args) => mark("waffleX", ...args);
+var waffleY2 = (...args) => mark("waffleY", ...args);
 
 // src/plot/interactors.js
 var interactors_exports = {};
@@ -49369,6 +49482,8 @@ export {
   voronoi2 as voronoi,
   voronoiMesh2 as voronoiMesh,
   vspace,
+  waffleX2 as waffleX,
+  waffleY2 as waffleY,
   wasmConnector,
   width,
   xAlign,