@uwdata/mosaic-inputs 0.7.1 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uwdata/mosaic-inputs",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "description": "Mosaic input components.",
   "keywords": [
     "inputs",
@@ -20,14 +20,14 @@
   "scripts": {
     "prebuild": "rimraf dist && mkdir dist",
     "build": "node ../../esbuild.js mosaic-inputs",
-    "lint": "eslint src test --ext .js",
+    "lint": "eslint src test",
     "test": "mocha 'test/**/*-test.js'",
     "prepublishOnly": "npm run test && npm run lint && npm run build"
   },
   "dependencies": {
-    "@uwdata/mosaic-core": "^0.7.1",
-    "@uwdata/mosaic-sql": "^0.7.0",
+    "@uwdata/mosaic-core": "^0.9.0",
+    "@uwdata/mosaic-sql": "^0.9.0",
     "isoformat": "^0.2.1"
   },
-  "gitHead": "7e6f3ea9b3011ea2c9201c1aa16e8e5664621a4c"
+  "gitHead": "89bb9b0dfa747aed691eaeba35379525a6764c61"
 }

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, point } from '@uwdata/mosaic-core';
+import { Query } from '@uwdata/mosaic-sql';
 import { input } from './input.js';
 
 const isObject = v => {
@@ -9,6 +9,33 @@ const isObject = v => {
 export const menu = options => input(Menu, options);
 
 export class Menu extends MosaicClient {
+  /**
+   * 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,
     filterBy,
@@ -18,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);
@@ -76,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 = point(field, value, { source: this });
+      selection.update(clause);
     } else if (isParam(selection)) {
       selection.update(value);
     }
@@ -101,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');
@@ -114,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,15 +1,37 @@
-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, match } 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 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,
     filterBy,
@@ -17,6 +39,7 @@ export class Search extends MosaicClient {
     column,
     label,
     type = 'contains',
+    field = column,
     as
   } = {}) {
     super(filterBy);
@@ -25,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');
@@ -62,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 = match(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, interval, isParam, isSelection, point } from '@uwdata/mosaic-core';
+import { Query, max, min } from '@uwdata/mosaic-sql';
 import { input } from './input.js';
 
 let _id = 0;
@@ -7,6 +7,36 @@ let _id = 0;
 export const slider = options => input(Slider, options);
 
 export class Slider extends MosaicClient {
+  /**
+   * 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,
     filterBy,
@@ -18,6 +48,8 @@ export class Slider extends MosaicClient {
     column,
     label = column,
     value = as?.value,
+    select = 'point',
+    field = column,
     width
   } = {}) {
     super(filterBy);
@@ -25,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;
-          }
-        });
-      }
     }
   }
 
@@ -78,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', (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(interval(field, domain, {
+          source: this,
+          bin: 'ceil',
+          scale: { type: 'identity', domain },
+          pixelSize: this.step
+        }));
+      } else {
+        selection.update(point(field, value, { source: this }));
+      }
     } else if (isParam(this.selection)) {
       selection.update(value);
     }

package/src/Table.js

@@ -8,6 +8,10 @@ let _id = -1;
 export const table = options => input(Table, options);
 
 export class Table extends MosaicClient {
+  /**
+   * Create a new Table instance.
+   * @param {object} options Options object
+   */
   constructor({
     element,
     filterBy,
@@ -38,7 +42,7 @@ export class Table extends MosaicClient {
 
     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`;

package/src/util/format.js

@@ -42,6 +42,9 @@ export function formatDate(date) {
 
 // Memoize the last-returned locale.
 export function localize(f) {
-  let key = localize, value;
-  return (locale = 'en') => locale === key ? value : (value = f(key = locale));
+  let key = null;
+  let value;
+  return (locale = 'en') => locale === key
+    ? value
+    : (value = f(key = locale));
 }