@uwdata/vgplot 0.12.1 → 0.13.0

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);
       }
     };
   }
@@ -484,168 +484,9 @@ var require_interval_tree = __commonJS({
   }
 });
 
-// ../core/src/util/throttle.js
-var NIL = {};
-function throttle(callback, debounce = false) {
-  let curr;
-  let next;
-  let pending = NIL;
-  function invoke(event) {
-    curr = callback(event).catch(() => {
-    }).finally(() => {
-      if (next) {
-        const { value } = next;
-        next = null;
-        invoke(value);
-      } else {
-        curr = null;
-      }
-    });
-  }
-  function enqueue(event) {
-    next = { event };
-  }
-  function process(event) {
-    curr ? enqueue(event) : invoke(event);
-  }
-  function delay(event) {
-    if (pending !== event) {
-      requestAnimationFrame(() => {
-        const e = pending;
-        pending = NIL;
-        process(e);
-      });
-    }
-    pending = event;
-  }
-  return debounce ? delay : process;
-}
-
-// ../core/src/MosaicClient.js
-var MosaicClient = class {
-  /**
-   * Constructor.
-   * @param {*} filterSelection An optional selection to interactively filter
-   *  this client's data. If provided, a coordinator will re-query and update
-   *  the client when the selection updates.
-   */
-  constructor(filterSelection) {
-    this._filterBy = filterSelection;
-    this._requestUpdate = throttle(() => this.requestQuery(), true);
-    this._coordinator = null;
-  }
-  /**
-   * Return this client's connected coordinator.
-   */
-  get coordinator() {
-    return this._coordinator;
-  }
-  /**
-   * Set this client's connected coordinator.
-   */
-  set coordinator(coordinator2) {
-    this._coordinator = coordinator2;
-  }
-  /**
-   * Return this client's filter selection.
-   */
-  get filterBy() {
-    return this._filterBy;
-  }
-  /**
-   * Return a boolean indicating if the client query can be sped up with
-   * materialized views of pre-aggregated data. Should return true if changes to
-   * the filterBy selection does not change the groupby domain of the client
-   * query.
-   */
-  get filterStable() {
-    return true;
-  }
-  /**
-   * Return an array of fields queried by this client.
-   * @returns {object[]|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.
-   * @returns {this}
-   */
-  fieldInfo(info) {
-    return this;
-  }
-  /**
-   * Return a query specifying the data needed by this client.
-   * @param {*} [filter] The filtering criteria to apply in the query.
-   * @returns {*} The client query
-   */
-  query(filter3) {
-    return null;
-  }
-  /**
-   * Called by the coordinator to inform the client that a query is pending.
-   * @returns {this}
-   */
-  queryPending() {
-    return this;
-  }
-  /**
-   * Called by the coordinator to return a query result.
-   * @param {*} data The query result.
-   * @returns {this}
-   */
-  queryResult(data) {
-    return this;
-  }
-  /**
-   * Called by the coordinator to report a query execution error.
-   * @param {*} error
-   * @returns {this}
-   */
-  queryError(error) {
-    return this;
-  }
-  /**
-   * Request the coordinator to execute a query for this client.
-   * If an explicit query is not provided, the client query method will
-   * be called, filtered by the current filterBy selection.
-   * @returns {Promise}
-   */
-  requestQuery(query) {
-    const q2 = query || this.query(this.filterBy?.predicate(this));
-    return this._coordinator.requestQuery(this, q2);
-  }
-  /**
-   * Request that the coordinator perform a throttled update of this client
-   * using the default query. Unlike requestQuery, for which every call will
-   * result in an executed query, multiple calls to requestUpdate may be
-   * consolidated into a single update.
-   */
-  requestUpdate() {
-    this._requestUpdate();
-  }
-  /**
-   * Reset this client, initiating new field info and query requests.
-   * @returns {Promise}
-   */
-  initialize() {
-    return this._coordinator.initializeClient(this);
-  }
-  /**
-   * Requests a client update.
-   * For example to (re-)render an interface component.
-   *
-   * @returns {this | Promise<any>}
-   */
-  update() {
-    return this;
-  }
-};
-
 // ../../node_modules/@uwdata/flechette/src/constants.js
 var MAGIC = Uint8Array.of(65, 82, 82, 79, 87, 49);
+var EOS = Uint8Array.of(255, 255, 255, 255, 0, 0, 0, 0);
 var Version = (
   /** @type {const} */
   {
@@ -3060,7 +2901,7 @@ function literalToSQL(value) {
     case "number":
       return Number.isFinite(value) ? `${value}` : "NULL";
     case "string":
-      return `'${value.replace(`'`, `''`)}'`;
+      return `'${value.replaceAll(`'`, `''`)}'`;
     case "boolean":
       return value ? "TRUE" : "FALSE";
     default:
@@ -3451,6 +3292,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.
@@ -4591,6 +4435,9 @@ function entropy(expr) {
 function first(expr) {
   return aggFn("first", expr);
 }
+function geomean(expr) {
+  return aggFn("geomean", expr);
+}
 function kurtosis(expr) {
   return aggFn("kurtosis", expr);
 }
@@ -5039,7 +4886,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 +5017,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));
@@ -5385,6 +5232,8 @@ function sufficientStatistics(node, preagg, avg2) {
       return sumExpr(preagg, node);
     case "avg":
       return avgExpr(preagg, node);
+    case "geomean":
+      return geomeanExpr(preagg, node);
     case "arg_max":
       return argmaxExpr(preagg, node);
     case "arg_min":
@@ -5468,6 +5317,12 @@ function avgExpr(preagg, node) {
   const { expr, name: name2 } = countExpr(preagg, node);
   return div(sum(mul(as, name2)), expr);
 }
+function geomeanExpr(preagg, node) {
+  const x4 = node.args[0];
+  const expr = addStat(preagg, sum(ln(x4)), node);
+  const { expr: n } = countExpr(preagg, node);
+  return exp(div(sum(expr), n));
+}
 function argmaxExpr(preagg, node) {
   const expr = addStat(preagg, node);
   const maxy = addStat(preagg, max(node.args[1]), node);
@@ -5914,7 +5769,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 +5780,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 +5789,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,
@@ -6540,13 +6395,13 @@ var Coordinator = class {
   }
   /**
    * Issue a query for which no result (return value) is needed.
-   * @param {QueryType | QueryType[]} query The query or an array of queries.
+   * @param { import('./types.js').QueryType[] |
+   *  import('./types.js').QueryType} query The query or an array of queries.
    *  Each query should be either a Query builder object or a SQL string.
    * @param {object} [options] An options object.
    * @param {number} [options.priority] The query priority, defaults to
    *  `Priority.Normal`.
-   * @returns {QueryResult} A query result
-   *  promise.
+   * @returns {QueryResult} A query result promise.
    */
   exec(query, { priority = Priority.Normal } = {}) {
     query = Array.isArray(query) ? query.filter((x4) => x4).join(";\n") : query;
@@ -6555,11 +6410,14 @@ var Coordinator = class {
   /**
    * Issue a query to the backing database. The submitted query may be
    * consolidate with other queries and its results may be cached.
-   * @param {QueryType} query The query as either a Query builder object
-   *  or a SQL string.
+   * @param {import('./types.js').QueryType} query The query as either a Query
+   *  builder object 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.
@@ -6575,8 +6433,8 @@ var Coordinator = class {
   /**
    * Issue a query to prefetch data for later use. The query result is cached
    * for efficient future access.
-   * @param {QueryType} query The query as either a Query builder object
-   *  or a SQL string.
+   * @param {import('./types.js').QueryType} query The query as either a Query
+   *  builder object or a SQL string.
    * @param {object} [options] An options object.
    * @param {'arrow' | 'json'} [options.type] The query result format type.
    * @returns {QueryResult} A query result promise.
@@ -6611,13 +6469,13 @@ var Coordinator = class {
    * Update client data by submitting the given query and returning the
    * data (or error) to the client.
    * @param {MosaicClient} client A Mosaic client.
-   * @param {QueryType} query The data query.
+   * @param {import('./types.js').QueryType} query The data query.
    * @param {number} [priority] The query priority.
    * @returns {Promise} A Promise that resolves upon completion of the update.
    */
   updateClient(client, query, priority = Priority.Normal) {
     client.queryPending();
-    return this.query(query, { priority }).then(
+    return client._pending = this.query(query, { priority }).then(
       (data) => client.queryResult(data).update(),
       (err) => {
         this._logger.error(err);
@@ -6630,7 +6488,7 @@ var Coordinator = class {
    * the client is simply updated. Otherwise `updateClient` is called. As a
    * side effect, this method clears the current preaggregator state.
    * @param {MosaicClient} client The client to update.
-   * @param {QueryType | null} [query] The query to issue.
+   * @param {import('./types.js').QueryType | null} [query] The query to issue.
    */
   requestQuery(client, query) {
     this.preaggregator.clear();
@@ -6647,7 +6505,7 @@ var Coordinator = class {
     }
     clients.add(client);
     client.coordinator = this;
-    this.initializeClient(client);
+    client._pending = this.initializeClient(client);
     connectSelection(this, client.filterBy, client);
   }
   async initializeClient(client) {
@@ -6655,6 +6513,7 @@ var Coordinator = class {
     if (fields?.length) {
       client.fieldInfo(await queryFieldInfo(this, fields));
     }
+    await client.prepare();
     return client.requestQuery();
   }
   /**
@@ -7274,6 +7133,179 @@ var SelectionResolver = class {
   }
 };
 
+// ../core/src/util/throttle.js
+var NIL = {};
+function throttle(callback, debounce = false) {
+  let curr;
+  let next;
+  let pending = NIL;
+  function invoke(event) {
+    curr = callback(event).catch(() => {
+    }).finally(() => {
+      if (next) {
+        const { value } = next;
+        next = null;
+        invoke(value);
+      } else {
+        curr = null;
+      }
+    });
+  }
+  function enqueue(event) {
+    next = { event };
+  }
+  function process(event) {
+    curr ? enqueue(event) : invoke(event);
+  }
+  function delay(event) {
+    if (pending !== event) {
+      requestAnimationFrame(() => {
+        const e = pending;
+        pending = NIL;
+        process(e);
+      });
+    }
+    pending = event;
+  }
+  return debounce ? delay : process;
+}
+
+// ../core/src/MosaicClient.js
+var MosaicClient = class {
+  /**
+   * Constructor.
+   * @param {*} filterSelection An optional selection to interactively filter
+   *  this client's data. If provided, a coordinator will re-query and update
+   *  the client when the selection updates.
+   */
+  constructor(filterSelection) {
+    this._filterBy = filterSelection;
+    this._requestUpdate = throttle(() => this.requestQuery(), true);
+    this._coordinator = null;
+    this._pending = Promise.resolve();
+  }
+  /**
+   * Return this client's connected coordinator.
+   */
+  get coordinator() {
+    return this._coordinator;
+  }
+  /**
+   * Set this client's connected coordinator.
+   */
+  set coordinator(coordinator2) {
+    this._coordinator = coordinator2;
+  }
+  /**
+   * Return a Promise that resolves once the client has updated.
+   */
+  get pending() {
+    return this._pending;
+  }
+  /**
+   * Return this client's filter selection.
+   */
+  get filterBy() {
+    return this._filterBy;
+  }
+  /**
+   * Return a boolean indicating if the client query can be sped up with
+   * materialized views of pre-aggregated data. Should return true if changes to
+   * the filterBy selection does not change the groupby domain of the client
+   * query.
+   */
+  get filterStable() {
+    return true;
+  }
+  /**
+   * Return an array of fields queried by this client.
+   * @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 {import('./types.js').FieldInfo[]} info The field info result.
+   * @returns {this}
+   */
+  fieldInfo(info) {
+    return this;
+  }
+  /**
+   * Prepare the client before the query() method is called.
+   */
+  async prepare() {
+  }
+  /**
+   * Return a query specifying the data needed by this client.
+   * @param {*} [filter] The filtering criteria to apply in the query.
+   * @returns {*} The client query
+   */
+  query(filter3) {
+    return null;
+  }
+  /**
+   * Called by the coordinator to inform the client that a query is pending.
+   * @returns {this}
+   */
+  queryPending() {
+    return this;
+  }
+  /**
+   * Called by the coordinator to return a query result.
+   * @param {*} data The query result.
+   * @returns {this}
+   */
+  queryResult(data) {
+    return this;
+  }
+  /**
+   * Called by the coordinator to report a query execution error.
+   * @param {*} error
+   * @returns {this}
+   */
+  queryError(error) {
+    return this;
+  }
+  /**
+   * Request the coordinator to execute a query for this client.
+   * If an explicit query is not provided, the client query method will
+   * be called, filtered by the current filterBy selection.
+   * @returns {Promise}
+   */
+  requestQuery(query) {
+    const q2 = query || this.query(this.filterBy?.predicate(this));
+    return this._coordinator.requestQuery(this, q2);
+  }
+  /**
+   * Request that the coordinator perform a throttled update of this client
+   * using the default query. Unlike requestQuery, for which every call will
+   * result in an executed query, multiple calls to requestUpdate may be
+   * consolidated into a single update.
+   */
+  requestUpdate() {
+    this._requestUpdate();
+  }
+  /**
+   * Reset this client, initiating new field info, call the prepare method, and query requests.
+   * @returns {Promise}
+   */
+  initialize() {
+    return this._coordinator.initializeClient(this);
+  }
+  /**
+   * Requests a client update.
+   * For example to (re-)render an interface component.
+   *
+   * @returns {this | Promise<any>}
+   */
+  update() {
+    return this;
+  }
+};
+
 // ../core/src/connectors/rest.js
 function restConnector(uri = "http://localhost:3000/") {
   return {
@@ -7295,7 +7327,11 @@ function restConnector(uri = "http://localhost:3000/") {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(query)
       });
-      return query.type === "exec" ? req : query.type === "arrow" ? decodeIPC2(await (await req).arrayBuffer()) : (await req).json();
+      const res = await req;
+      if (!res.ok) {
+        throw new Error(`Query failed with HTTP status ${res.status}: ${await res.text()}`);
+      }
+      return query.type === "exec" ? req : query.type === "arrow" ? decodeIPC2(await res.arrayBuffer()) : res.json();
     }
   };
 }
@@ -19947,6 +19983,7 @@ __export(api_exports, {
   fyTicks: () => fyTicks,
   geo: () => geo2,
   geojson: () => geojson,
+  geomean: () => geomean,
   graticule: () => graticule3,
   grid: () => grid,
   gridFx: () => gridFx2,
@@ -44039,6 +44076,9 @@ var DEFAULT_ATTRIBUTES = {
   marginBottom: 30
 };
 var Plot = class {
+  /**
+   * @param {HTMLElement} [element]
+   */
   constructor(element) {
     this.attributes = { ...DEFAULT_ATTRIBUTES };
     this.listeners = null;
@@ -44046,12 +44086,12 @@ var Plot = class {
     this.legends = [];
     this.marks = [];
     this.markset = null;
+    this.params = /* @__PURE__ */ new Map();
+    this.synch = synchronizer();
     this.element = element || document.createElement("div");
     this.element.setAttribute("class", "plot");
     this.element.style.display = "flex";
-    this.element.value = this;
-    this.params = /* @__PURE__ */ new Map();
-    this.synch = synchronizer();
+    Object.assign(this.element, { value: this });
   }
   margins() {
     return {
@@ -44195,7 +44235,9 @@ function isColor2(value) {
 
 // ../plot/src/marks/util/is-constant-option.js
 var constantOptions = /* @__PURE__ */ new Set([
+  "offset",
   "order",
+  "reverse",
   "sort",
   "label",
   "anchor",
@@ -44267,7 +44309,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);
@@ -44363,7 +44405,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]));
@@ -44420,7 +44466,7 @@ function markQuery(channels, table3, skip = []) {
     const { channel, field: field3, as } = c4;
     if (skip.includes(channel)) continue;
     if (channel === "orderby") {
-      q2.orderby(c4.value);
+      q2.orderby(c4.value ?? field3);
     } else if (field3) {
       if (isAggregateExpression(field3)) {
         aggr = true;
@@ -44552,7 +44598,7 @@ var ConnectedMark = class extends Mark2 {
       const cols = q2._select.map((c4) => c4.alias).filter((c4) => c4 !== as && c4 !== value);
       return m4(q2, expr, as, value, cols);
     } else {
-      return q2.orderby(field3);
+      return q2.orderby(as);
     }
   }
 };
@@ -44561,13 +44607,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;
@@ -45425,9 +45491,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;
@@ -45436,7 +45509,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() {
@@ -45451,42 +45530,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 {
@@ -46654,12 +46758,13 @@ var Nearest = class {
       selection2.update(that.clause(void 0));
     });
     svg.addEventListener("pointerenter", (evt) => {
-      if (!evt.buttons) {
-        const v3 = this.channels.map(() => 0);
-        selection2.activate(this.clause(v3));
-      }
+      if (!evt.buttons) this.activate();
     });
   }
+  activate() {
+    const v3 = this.channels.map(() => 0);
+    this.selection.activate(this.clause(v3));
+  }
 };
 function calculateXY(svg, mark2) {
   const { data: { columns } } = mark2;
@@ -46755,7 +46860,7 @@ var PanZoom = class {
     this.svg = svg;
     if (this.initialized) return;
     else this.initialized = true;
-    const { panx, pany, mark: { plot: { element } }, xsel, ysel } = this;
+    const { panx, pany, mark: { plot: { element } } } = this;
     this.xscale = svg.scale("x");
     this.yscale = svg.scale("y");
     const rx = this.xscale.range.slice().sort(asc2);
@@ -46772,19 +46877,21 @@ var PanZoom = class {
       element.addEventListener("pointerenter", (evt) => {
         if (enter) return;
         else enter = true;
-        if (evt.buttons) return;
-        if (panx) {
-          const { xscale, xfield } = this;
-          xsel.activate(this.clause(xscale.domain, xfield, xscale));
-        }
-        if (pany) {
-          const { yscale, yfield } = this;
-          ysel.activate(this.clause(yscale.domain, yfield, yscale));
-        }
+        if (!evt.buttons) this.activate();
       });
       element.addEventListener("pointerleave", () => enter = false);
     }
   }
+  activate() {
+    if (this.panx) {
+      const { xscale, xfield } = this;
+      this.xsel.activate(this.clause(xscale.domain, xfield, xscale));
+    }
+    if (this.pany) {
+      const { yscale, yfield } = this;
+      this.ysel.activate(this.clause(yscale.domain, yfield, yscale));
+    }
+  }
 };
 function extent3(ext, defaultTrue, defaultFalse) {
   return ext ? Array.isArray(ext) ? ext : defaultTrue : defaultFalse;
@@ -47169,8 +47276,8 @@ var Toggle = class {
     channels,
     peers = true
   }) {
-    this.value = null;
     this.mark = mark2;
+    this.value = null;
     this.selection = selection2;
     this.peers = peers;
     const fields = this.fields = [];
@@ -47222,10 +47329,12 @@ var Toggle = class {
       }
     });
     svg.addEventListener("pointerenter", (evt) => {
-      if (evt.buttons) return;
-      this.selection.activate(this.clause([this.fields.map(() => 0)]));
+      if (!evt.buttons) this.activate();
     });
   }
+  activate() {
+    this.selection.activate(this.clause([this.fields.map(() => 0)]));
+  }
 };
 function isTargetElement(groups2, node) {
   return groups2.some((g2) => g2.contains(node));
@@ -47519,11 +47628,30 @@ var BinTransformNode = class extends ExprNode {
   }
 };
 
+// ../inputs/src/input.js
+var Input = class extends MosaicClient {
+  /**
+   * Create a new input instance.
+   * @param {import('@uwdata/mosaic-core').Selection} [filterBy] A selection
+   *  with which to filter backing data that parameterizes this input.
+   * @param {HTMLElement} [element] Optional container HTML element to use.
+   * @param {string} [className] A class name to set on the container element.
+   */
+  constructor(filterBy, element, className = "input") {
+    super(filterBy);
+    this.element = element || document.createElement("div");
+    if (className) this.element.setAttribute("class", className);
+    Object.defineProperty(this.element, "value", { value: this });
+  }
+  activate() {
+  }
+};
+
 // ../inputs/src/Menu.js
 var isObject3 = (v3) => {
   return v3 && typeof v3 === "object" && !Array.isArray(v3);
 };
-var Menu = class extends MosaicClient {
+var Menu = class extends Input {
   /**
    * Create a new menu input.
    * @param {object} [options] Options object
@@ -47554,6 +47682,7 @@ var Menu = class extends MosaicClient {
   constructor({
     element,
     filterBy,
+    as,
     from: from2,
     column: column3,
     label = column3,
@@ -47561,26 +47690,22 @@ var Menu = class extends MosaicClient {
     // TODO
     options,
     value,
-    field: field3 = column3,
-    as
+    field: field3 = column3
   } = {}) {
-    super(filterBy);
+    super(filterBy, element);
     this.from = from2;
     this.column = column3;
     this.format = format3;
     this.field = field3;
     const selection2 = this.selection = as;
-    this.element = element ?? document.createElement("div");
-    this.element.setAttribute("class", "input");
-    Object.defineProperty(this.element, "value", { value: this });
     const lab3 = document.createElement("label");
     lab3.innerText = label || column3;
     this.element.appendChild(lab3);
     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) {
@@ -47622,7 +47747,9 @@ var Menu = class extends MosaicClient {
     this.select.selectedIndex = this.from ? 0 : -1;
   }
   activate() {
-    this.selection.activate(clausePoint(this.field, 0, { source: this }));
+    if (isSelection(this.selection)) {
+      this.selection.activate(clausePoint(this.field, 0, { source: this }));
+    }
   }
   publish(value) {
     const { selection: selection2, field: field3 } = this;
@@ -47654,7 +47781,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;
   }
@@ -47662,7 +47789,7 @@ var Menu = class extends MosaicClient {
 
 // ../inputs/src/Search.js
 var _id = 0;
-var Search = class extends MosaicClient {
+var Search = class extends Input {
   /**
    * Create a new text search input.
    * @param {object} [options] Options object
@@ -47698,16 +47825,13 @@ var Search = class extends MosaicClient {
     field: field3 = column3,
     as
   } = {}) {
-    super(filterBy);
+    super(filterBy, element);
     this.id = "search_" + ++_id;
     this.type = type2;
     this.from = from2;
     this.column = column3;
     this.selection = as;
     this.field = field3;
-    this.element = element ?? document.createElement("div");
-    this.element.setAttribute("class", "input");
-    Object.defineProperty(this.element, "value", { value: this });
     if (label) {
       const lab3 = document.createElement("label");
       lab3.setAttribute("for", this.id);
@@ -47745,7 +47869,9 @@ var Search = class extends MosaicClient {
     return clauseMatch(field3, value, { source: this, method: type2 });
   }
   activate() {
-    this.selection.activate(this.clause(""));
+    if (isSelection(this.selection)) {
+      this.selection.activate(this.clause(""));
+    }
   }
   publish(value) {
     const { selection: selection2 } = this;
@@ -47782,7 +47908,7 @@ var Search = class extends MosaicClient {
 
 // ../inputs/src/Slider.js
 var _id2 = 0;
-var Slider = class extends MosaicClient {
+var Slider = class extends Input {
   /**
    * Create a new slider input.
    * @param {object} [options] Options object
@@ -47828,7 +47954,7 @@ var Slider = class extends MosaicClient {
     field: field3 = column3,
     width: width2
   } = {}) {
-    super(filterBy);
+    super(filterBy, element);
     this.id = "slider_" + ++_id2;
     this.from = from2;
     this.column = column3 || "value";
@@ -47838,9 +47964,6 @@ var Slider = class extends MosaicClient {
     this.min = min5;
     this.max = max4;
     this.step = step;
-    this.element = element || document.createElement("div");
-    this.element.setAttribute("class", "input");
-    Object.defineProperty(this.element, "value", { value: this });
     if (label) {
       const desc2 = document.createElement("label");
       desc2.setAttribute("for", this.id);
@@ -47921,7 +48044,9 @@ var Slider = class extends MosaicClient {
     }
   }
   activate() {
-    this.selection.activate(this.clause(0));
+    if (isSelection(this.selection)) {
+      this.selection.activate(this.clause(0));
+    }
   }
   publish(value) {
     const { selection: selection2 } = this;
@@ -47954,10 +48079,36 @@ function localize(f2) {
 
 // ../inputs/src/Table.js
 var _id3 = -1;
-var Table3 = class extends MosaicClient {
+var Table3 = class extends Input {
   /**
    * Create a new Table instance.
    * @param {object} options Options object
+   * @param {HTMLElement} [options.element] The parent DOM element in which to
+   *  place the table element. If undefined, a new `div` element is created.
+   * @param {Selection} [options.filterBy] A selection to filter the database
+   *  table indicated by the *from* option.
+   * @param {Selection} [options.as] The output selection. A selection
+   *  clause is added for the currently selected table row.
+   * @param {{ [name: string]: 'left' | 'right' | 'center' }} [options.align]
+   *  An object that maps column names to horiztonal text alignment values. If
+   *  unspecified, alignment is determined based on the column data type.
+   * @param {{ [name: string]: (value: any) => string }} [options.format] An
+   *  object that maps column names to format functions to use for that
+   *  column's data. Each format function takes a value as input and generates
+   *  formatted text to show in the table.
+   * @param {string} [options.from] The name of a database table to use as a data
+   *  source for this widget. Used in conjunction with the *columns* option.
+   * @param {string[]} [options.columns] The name of database columns to include
+   *  in the table component. If unspecified, all columns are included.
+   *  Used in conjunction with the *from* option.
+   * @param {number | { [name: string]: number }} [options.width] If a number,
+   *  sets the desired width of the table, in pixels. If an object, is used to
+   *  set explicit pixel widts for each named column included in the object.
+   * @param {number} [options.maxWidth] The maximum width of the table, in pixels.
+   * @param {number} [options.height] The desired height of the table, in pixels.
+   * @param {number} [options.rowBatch] The number of rows to request per query
+   *  batch. The batch size will be used to prefetch data beyond the currently
+   *  visible range.
    */
   constructor({
     element,
@@ -47972,8 +48123,9 @@ var Table3 = class extends MosaicClient {
     rowBatch = 100,
     as
   } = {}) {
-    super(filterBy);
+    super(filterBy, element, null);
     this.id = `table-${++_id3}`;
+    this.element.setAttribute("id", this.id);
     this.from = from2;
     this.columns = columns;
     this.format = format3;
@@ -47984,28 +48136,25 @@ var Table3 = class extends MosaicClient {
     }
     this.offset = 0;
     this.limit = +rowBatch;
-    this.pending = false;
+    this.isPending = false;
     this.selection = as;
     this.currentRow = -1;
     this.sortHeader = null;
     this.sortColumn = null;
     this.sortDesc = false;
-    this.element = element || document.createElement("div");
-    this.element.setAttribute("id", this.id);
-    Object.defineProperty(this.element, "value", { value: this });
     if (typeof width2 === "number") this.element.style.width = `${width2}px`;
     if (maxWidth) this.element.style.maxWidth = `${maxWidth}px`;
     this.element.style.maxHeight = `${height2}px`;
     this.element.style.overflow = "auto";
     let prevScrollTop = -1;
     this.element.addEventListener("scroll", (evt) => {
-      const { pending, loaded } = this;
+      const { isPending, loaded } = this;
       const { scrollHeight, scrollTop, clientHeight } = evt.target;
       const back = scrollTop < prevScrollTop;
       prevScrollTop = scrollTop;
-      if (back || pending || loaded) return;
+      if (back || isPending || loaded) return;
       if (scrollHeight - scrollTop < 2 * clientHeight) {
-        this.pending = true;
+        this.isPending = true;
         this.requestData(this.offset + this.limit);
       }
     });
@@ -48050,8 +48199,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;
@@ -48079,7 +48228,7 @@ var Table3 = class extends MosaicClient {
     return Query.from(this.sourceTable()).select(schema.map((s2) => s2.column)).where(filter3).orderby(sortColumn ? sortDesc ? desc(sortColumn) : sortColumn : []).limit(limit).offset(offset2);
   }
   queryResult(data) {
-    if (!this.pending) {
+    if (!this.isPending) {
       this.loaded = false;
       this.data = [];
       this.body.replaceChildren();
@@ -48109,9 +48258,14 @@ var Table3 = class extends MosaicClient {
     if (numRows < limit) {
       this.loaded = true;
     }
-    this.pending = false;
+    this.isPending = false;
     return this;
   }
+  activate() {
+    if (isSelection(this.selection)) {
+      this.selection.activate(this.clause([]));
+    }
+  }
   sort(event, column3) {
     if (column3 === this.sortColumn) {
       this.sortDesc = !this.sortDesc;
@@ -49233,6 +49387,7 @@ export {
   fyTicks,
   geo2 as geo,
   geojson,
+  geomean,
   graticule3 as graticule,
   grid,
   gridFx2 as gridFx,