@uwdata/mosaic-inputs 0.8.0 → 0.10.0

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@uwdata/mosaic-inputs",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Mosaic input components.",
   "keywords": [
     "inputs",
     "mosaic"
   ],
   "license": "BSD-3-Clause",
-  "author": "Jeffrey Heer (http://idl.cs.washington.edu)",
+  "author": "Jeffrey Heer (https://idl.uw.edu)",
   "type": "module",
   "main": "src/index.js",
   "module": "src/index.js",
@@ -25,9 +25,9 @@
     "prepublishOnly": "npm run test && npm run lint && npm run build"
   },
   "dependencies": {
-    "@uwdata/mosaic-core": "^0.8.0",
-    "@uwdata/mosaic-sql": "^0.8.0",
+    "@uwdata/mosaic-core": "^0.10.0",
+    "@uwdata/mosaic-sql": "^0.10.0",
     "isoformat": "^0.2.1"
   },
-  "gitHead": "a24b4c9f7dfa1c38c6af96ec17e075326c1af9b0"
+  "gitHead": "94fc4f0d4efc622001f6afd6714d1e9dda745be2"
 }

package/src/Menu.js

@@ -1,5 +1,5 @@
-import { MosaicClient, isParam, isSelection } from '@uwdata/mosaic-core';
-import { Query, eq, literal } from '@uwdata/mosaic-sql';
+import { MosaicClient, Param, isParam, isSelection, clausePoint } from '@uwdata/mosaic-core';
+import { Query } from '@uwdata/mosaic-sql';
 import { input } from './input.js';
 
 const isObject = v => {
@@ -10,8 +10,31 @@ export const menu = options => input(Menu, options);
 
 export class Menu extends MosaicClient {
   /**
-   * Create a new Menu instance.
-   * @param {object} options Options object
+   * Create a new menu input.
+   * @param {object} [options] Options object
+   * @param {HTMLElement} [options.element] The parent DOM element in which to
+   *  place the menu elements. 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 {Param} [options.as] The output param or selection. A selection
+   *  clause is added for the currently selected menu option.
+   * @param {string} [options.field] The database column name to use within
+   *  generated selection clause predicates. Defaults to the *column* option.
+   * @param {(any | { value: any, label?: string })[]} [options.options] An
+   *  array of menu options, as literal values or option objects. Option
+   *  objects have a `value` property and an optional `label` property. If no
+   *  label or *format* function is provided, the string-coerced value is used.
+   * @param {(value: any) => string} [options.format] A format function that
+   *  takes an option value as input and generates a string label. The format
+   *  function is not applied when an explicit label is provided in an option
+   *  object.
+   * @param {*} [options.value] The initial selected menu value.
+   * @param {string} [options.from] The name of a database table to use as a data
+   *  source for this widget. Used in conjunction with the *column* option.
+   * @param {string} [options.column] The name of a database column from which
+   *  to pull menu options. The unique column values are used as menu options.
+   *  Used in conjunction with the *from* option.
+   * @param {string} [options.label] A text label for this input.
    */
   constructor({
     element,
@@ -22,36 +45,52 @@ export class Menu extends MosaicClient {
     format = x => x, // TODO
     options,
     value,
+    field = column,
     as
   } = {}) {
     super(filterBy);
     this.from = from;
     this.column = column;
-    this.selection = as;
     this.format = format;
+    this.field = field;
+    const selection = this.selection = as;
 
     this.element = element ?? document.createElement('div');
     this.element.setAttribute('class', 'input');
-    this.element.value = this;
+    Object.defineProperty(this.element, 'value', { value: this });
 
     const lab = document.createElement('label');
     lab.innerText = label || column;
     this.element.appendChild(lab);
 
     this.select = document.createElement('select');
+    this.element.appendChild(this.select);
+
+    // if provided, populate menu options
     if (options) {
       this.data = options.map(value => isObject(value) ? value : { value });
+      this.selectedValue(value ?? '');
       this.update();
     }
-    value = value ?? this.selection?.value ?? this.data?.[0]?.value;
-    if (this.selection?.value === undefined) this.publish(value);
-    this.element.appendChild(this.select);
 
-    if (this.selection) {
+    // initialize selection or param bindings
+    if (selection) {
+      const isParam = !isSelection(selection);
+
+      // publish any initial menu value to the selection/param
+      // later updates propagate this back to the menu element
+      // do not publish if using a param that already has a value
+      if (value != null && (!isParam || selection.value === undefined)) {
+        this.publish(value);
+      }
+
+      // publish selected value upon menu change
       this.select.addEventListener('input', () => {
         this.publish(this.selectedValue() ?? null);
       });
-      if (!isSelection(this.selection)) {
+
+      // if bound to a scalar param, respond to value updates
+      if (isParam) {
         this.selection.addEventListener('value', value => {
           if (value !== this.select.value) {
             this.selectedValue(value);
@@ -80,14 +119,11 @@ export class Menu extends MosaicClient {
   }
 
   publish(value) {
-    const { selection, column } = this;
+    const { selection, field } = this;
     if (isSelection(selection)) {
-      selection.update({
-        source: this,
-        schema: { type: 'point' },
-        value,
-        predicate: (value !== '' && value !== undefined) ? eq(column, literal(value)) : null
-      });
+      if (value === '') value = undefined; // 'All' option
+      const clause = clausePoint(field, value, { source: this });
+      selection.update(clause);
     } else if (isParam(selection)) {
       selection.update(value);
     }
@@ -105,12 +141,15 @@ export class Menu extends MosaicClient {
   }
 
   queryResult(data) {
+    // column option values, with an inserted 'All' value
     this.data = [{ value: '', label: 'All' }, ...data];
     return this;
   }
 
   update() {
-    const { data, format, select } = this;
+    const { data, format, select, selection } = this;
+
+    // generate menu item options
     select.replaceChildren();
     for (const { value, label } of data) {
       const opt = document.createElement('option');
@@ -118,9 +157,15 @@ export class Menu extends MosaicClient {
       opt.innerText = label ?? format(value);
       this.select.appendChild(opt);
     }
-    if (this.selection) {
-      this.selectedValue(this.selection?.value ?? '');
+
+    // update menu value based on param/selection
+    if (selection) {
+      const value = isSelection(selection)
+        ? selection.valueFor(this)
+        : selection.value;
+      this.selectedValue(value ?? '');
     }
+
     return this;
   }
 }

package/src/Search.js

@@ -1,18 +1,36 @@
-import { MosaicClient, isParam, isSelection } from '@uwdata/mosaic-core';
-import {
-  Query, regexp_matches, contains, prefix, suffix, literal
-} from '@uwdata/mosaic-sql';
+import { MosaicClient, Param, isParam, isSelection, clauseMatch } from '@uwdata/mosaic-core';
+import { Query } from '@uwdata/mosaic-sql';
 import { input } from './input.js';
 
-const FUNCTIONS = { contains, prefix, suffix, regexp: regexp_matches };
 let _id = 0;
 
 export const search = options => input(Search, options);
 
 export class Search extends MosaicClient {
   /**
-   * Create a new Search instance.
-   * @param {object} options Options object
+   * Create a new text search input.
+   * @param {object} [options] Options object
+   * @param {HTMLElement} [options.element] The parent DOM element in which to
+   *  place the search elements. 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 {Param} [options.as] The output param or selection. A selection
+   *  clause is added based on the current text search query.
+   * @param {string} [options.field] The database column name to use within
+   *  generated selection clause predicates. Defaults to the *column* option.
+   * @param {'contains' | 'prefix' | 'suffix' | 'regexp'} [options.type] The
+   *  type of text search query to perform. One of:
+   *  - `"contains"` (default): the query string may appear anywhere in the text
+   *  - `"prefix"`: the query string must appear at the start of the text
+   *  - `"suffix"`: the query string must appear at the end of the text
+   *  - `"regexp"`: the query string is a regular expression the text must match
+   * @param {string} [options.from] The name of a database table to use as an
+   *  autocomplete data source for this widget. Used in conjunction with the
+   *  *column* option.
+   * @param {string} [options.column] The name of a database column from which
+   *  to pull valid search results. The unique column values are used as search
+   *  autocomplete values. Used in conjunction with the *from* option.
+   * @param {string} [options.label] A text label for this input.
    */
   constructor({
     element,
@@ -21,6 +39,7 @@ export class Search extends MosaicClient {
     column,
     label,
     type = 'contains',
+    field = column,
     as
   } = {}) {
     super(filterBy);
@@ -29,10 +48,11 @@ export class Search extends MosaicClient {
     this.from = from;
     this.column = column;
     this.selection = as;
+    this.field = field;
 
     this.element = element ?? document.createElement('div');
     this.element.setAttribute('class', 'input');
-    this.element.value = this;
+    Object.defineProperty(this.element, 'value', { value: this });
 
     if (label) {
       const lab = document.createElement('label');
@@ -66,14 +86,10 @@ export class Search extends MosaicClient {
   }
 
   publish(value) {
-    const { selection, column, type } = this;
+    const { selection, field, type } = this;
     if (isSelection(selection)) {
-      selection.update({
-        source: this,
-        schema: { type },
-        value,
-        predicate: value ? FUNCTIONS[type](column, literal(value)) : null
-      });
+      const clause = clauseMatch(field, value, { source: this, method: type });
+      selection.update(clause);
     } else if (isParam(selection)) {
       selection.update(value);
     }

package/src/Slider.js

@@ -1,5 +1,5 @@
-import { MosaicClient, isParam, isSelection } from '@uwdata/mosaic-core';
-import { Query, eq, literal, max, min } from '@uwdata/mosaic-sql';
+import { MosaicClient, Param, clauseInterval, clausePoint, isParam, isSelection } from '@uwdata/mosaic-core';
+import { Query, max, min } from '@uwdata/mosaic-sql';
 import { input } from './input.js';
 
 let _id = 0;
@@ -8,8 +8,34 @@ export const slider = options => input(Slider, options);
 
 export class Slider extends MosaicClient {
   /**
-   * Create a new Slider instance.
-   * @param {object} options Options object
+   * Create a new slider input.
+   * @param {object} [options] Options object
+   * @param {HTMLElement} [options.element] The parent DOM element in which to
+   *  place the slider elements. 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 {Param} [options.as] The output param or selection. A selection
+   *  clause is added based on the currently selected slider option.
+   * @param {string} [options.field] The database column name to use within
+   *  generated selection clause predicates. Defaults to the *column* option.
+   * @param {'point' | 'interval'} [options.select] The type of selection clause
+   *  predicate to generate if the **as** option is a Selection.  If `'point'`
+   *  (the default), the selection predicate is an equality check for the slider
+   *  value. If `'interval'`, the predicate checks an interval from the minimum
+   *  to the current slider value.
+   * @param {number} [options.min] The minimum slider value.
+   * @param {number} [options.max] The maximum slider value.
+   * @param {number} [options.step] The slider step, the amount to increment
+   *  between consecutive values.
+   * @param {number} [options.value] The initial slider value.
+   * @param {string} [options.from] The name of a database table to use as a data
+   *  source for this widget. Used in conjunction with the *column* option.
+   *  The minimum and maximum values of the column determine the slider range.
+   * @param {string} [options.column] The name of a database column whose values
+   *  determine the slider range. Used in conjunction with the *from* option.
+   *  The minimum and maximum values of the column determine the slider range.
+   * @param {string} [options.label] A text label for this input.
+   * @param {number} [options.width] The width of the slider in screen pixels.
    */
   constructor({
     element,
@@ -22,6 +48,8 @@ export class Slider extends MosaicClient {
     column,
     label = column,
     value = as?.value,
+    select = 'point',
+    field = column,
     width
   } = {}) {
     super(filterBy);
@@ -29,45 +57,59 @@ export class Slider extends MosaicClient {
     this.from = from;
     this.column = column || 'value';
     this.selection = as;
+    this.selectionType = select;
+    this.field = field;
     this.min = min;
     this.max = max;
     this.step = step;
 
     this.element = element || document.createElement('div');
     this.element.setAttribute('class', 'input');
-    this.element.value = this;
+    Object.defineProperty(this.element, 'value', { value: this });
 
     if (label) {
-      const lab = document.createElement('label');
-      lab.setAttribute('for', this.id);
-      lab.innerText = label;
-      this.element.appendChild(lab);
+      const desc = document.createElement('label');
+      desc.setAttribute('for', this.id);
+      desc.innerText = label;
+      this.element.appendChild(desc);
     }
 
     this.slider = document.createElement('input');
     this.slider.setAttribute('id', this.id);
     this.slider.setAttribute('type', 'range');
     if (width != null) this.slider.style.width = `${+width}px`;
-    if (min != null) this.slider.setAttribute('min', min);
-    if (max != null) this.slider.setAttribute('max', max);
-    if (step != null) this.slider.setAttribute('step', step);
+    if (min != null) this.slider.setAttribute('min', `${min}`);
+    if (max != null) this.slider.setAttribute('max', `${max}`);
+    if (step != null) this.slider.setAttribute('step', `${step}`);
+    this.element.appendChild(this.slider);
+
+    this.curval = document.createElement('label');
+    this.curval.setAttribute('for', this.id);
+    this.curval.setAttribute('class', 'value');
+    this.element.appendChild(this.curval);
+
+    // handle initial value
     if (value != null) {
-      this.slider.setAttribute('value', value);
+      this.slider.setAttribute('value', `${value}`);
       if (this.selection?.value === undefined) this.publish(value);
     }
-    this.element.appendChild(this.slider);
+    this.curval.innerText = this.slider.value;
+
+    // respond to slider input
+    this.slider.addEventListener('input', () => {
+      const { value } = this.slider;
+      this.curval.innerText = value;
+      if (this.selection) this.publish(+value);
+    });
 
-    if (this.selection) {
-      this.slider.addEventListener('input', () => {
-        this.publish(+this.slider.value);
+    // track param updates
+    if (this.selection && !isSelection(this.selection)) {
+      this.selection.addEventListener('value', value => {
+        if (value !== +this.slider.value) {
+          this.slider.value = value;
+          this.curval.innerText = value;
+        }
       });
-      if (!isSelection(this.selection)) {
-        this.selection.addEventListener('value', value => {
-          if (value !== +this.slider.value) {
-            this.slider.value = value;
-          }
-        });
-      }
     }
   }
 
@@ -82,21 +124,36 @@ export class Slider extends MosaicClient {
 
   queryResult(data) {
     const { min, max } = Array.from(data)[0];
-    if (this.min == null) this.slider.setAttribute('min', min);
-    if (this.max == null) this.slider.setAttribute('max', max);
-    if (this.step == null) this.slider.setAttribute('step', String((max - min) / 500));
+    if (this.min == null) {
+      this.min = min;
+      this.slider.setAttribute('min', `${min}`);
+    }
+    if (this.max == null) {
+      this.max = max;
+      this.slider.setAttribute('max', `${max}`);
+    }
+    if (this.step == null) {
+      this.step = (max - min) / 500;
+      this.slider.setAttribute('step', `${this.step}`);
+    }
     return this;
   }
 
   publish(value) {
-    const { selection, column } = this;
+    const { field, selectionType, selection } = this;
     if (isSelection(selection)) {
-      selection.update({
-        source: this,
-        schema: { type: 'point' },
-        value,
-        predicate: eq(column, literal(value))
-      });
+      if (selectionType === 'interval') {
+        /** @type {[number, number]} */
+        const domain = [this.min ?? 0, value];
+        selection.update(clauseInterval(field, domain, {
+          source: this,
+          bin: 'ceil',
+          scale: { type: 'identity', domain },
+          pixelSize: this.step
+        }));
+      } else {
+        selection.update(clausePoint(field, value, { source: this }));
+      }
     } else if (isParam(this.selection)) {
       selection.update(value);
     }

package/src/Table.js

@@ -1,4 +1,4 @@
-import { MosaicClient, coordinator } from '@uwdata/mosaic-core';
+import { MosaicClient, clausePoints, coordinator, toDataColumns } from '@uwdata/mosaic-core';
 import { Query, column, desc } from '@uwdata/mosaic-sql';
 import { formatDate, formatLocaleAuto, formatLocaleNumber } from './util/format.js';
 import { input } from './input.js';
@@ -23,6 +23,7 @@ export class Table extends MosaicClient {
     maxWidth,
     height = 500,
     rowBatch = 100,
+    as
   } = {}) {
     super(filterBy);
     this.id = `table-${++_id}`;
@@ -36,13 +37,16 @@ export class Table extends MosaicClient {
     this.limit = +rowBatch;
     this.pending = 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);
-    this.element.value = this;
+    Object.defineProperty(this.element, 'value', { value: this });
     if (typeof width === 'number') this.element.style.width = `${width}px`;
     if (maxWidth) this.element.style.maxWidth = `${maxWidth}px`;
     this.element.style.maxHeight = `${height}px`;
@@ -72,10 +76,34 @@ export class Table extends MosaicClient {
     this.body = document.createElement('tbody');
     this.tbl.appendChild(this.body);
 
+    if (this.selection) {
+      this.body.addEventListener('pointerover', evt => {
+        const row = resolveRow(evt.target);
+        if (row > -1 && row !== this.currentRow) {
+          this.currentRow = row;
+          this.selection.update(this.clause([row]));
+        }
+      });
+      this.body.addEventListener('pointerleave', () => {
+        this.currentRow = -1;
+        this.selection.update(this.clause());
+      });
+    }
+
     this.style = document.createElement('style');
     this.element.appendChild(this.style);
   }
 
+  clause(rows = []) {
+    const { data, limit, schema } = this;
+    const fields = schema.map(s => s.column);
+    const values = rows.map(row => {
+      const { columns } = data[~~(row / limit)];
+      return fields.map(f => columns[f][row % limit]);
+    });
+    return clausePoints(fields, values, { source: this });
+  }
+
   requestData(offset = 0) {
     this.offset = offset;
 
@@ -133,30 +161,35 @@ export class Table extends MosaicClient {
     if (!this.pending) {
       // data is not from an internal request, so reset table
       this.loaded = false;
+      this.data = [];
       this.body.replaceChildren();
+      this.offset = 0;
     }
-    this.data = data;
+    this.data.push(toDataColumns(data));
     return this;
   }
 
   update() {
     const { body, formats, data, schema, limit } = this;
     const nf = schema.length;
+    const n = data.length - 1;
+    const rowCount = limit * n;
 
-    let count = 0;
-    for (const row of data) {
-      ++count;
+    const { numRows, columns } = data[n];
+    const cols = schema.map(s => columns[s.column]);
+    for (let i = 0; i < numRows; ++i) {
       const tr = document.createElement('tr');
-      for (let i = 0; i < nf; ++i) {
-        const value = row[schema[i].column];
+      Object.assign(tr, { __row__: rowCount + i });
+      for (let j = 0; j < nf; ++j) {
+        const value = cols[j][i];
         const td = document.createElement('td');
-        td.innerText = value == null ? '' : formats[i](value);
+        td.innerText = value == null ? '' : formats[j](value);
         tr.appendChild(td);
       }
       body.appendChild(tr);
     }
 
-    if (count < limit) {
+    if (numRows < limit) {
       // data table has been fully loaded
       this.loaded = true;
     }
@@ -190,6 +223,16 @@ export class Table extends MosaicClient {
   }
 }
 
+/**
+ * Resolve a table row number from a table cell element.
+ * @param {any} element An HTML element.
+ * @returns {number} The resolved row, or -1 if not a row.
+ */
+function resolveRow(element) {
+  const p = element.parentElement;
+  return Object.hasOwn(p, '__row__') ? +p.__row__ : -1;
+}
+
 function formatof(base = {}, schema, locale) {
   return schema.map(({ column, type }) => {
     if (column in base) {