@uwdata/mosaic-inputs 0.1.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uwdata/mosaic-inputs",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Mosaic input components.",
   "keywords": [
     "inputs",
@@ -25,9 +25,9 @@
     "prepublishOnly": "npm run test && npm run lint && npm run build"
   },
   "dependencies": {
-    "@uwdata/mosaic-core": "^0.1.0",
-    "@uwdata/mosaic-sql": "^0.1.0",
+    "@uwdata/mosaic-core": "^0.3.0",
+    "@uwdata/mosaic-sql": "^0.3.0",
     "isoformat": "^0.2.1"
   },
-  "gitHead": "a7967c35349bdf7f00abb113ce1dd9abb233cd62"
+  "gitHead": "a8dd23fed4c7a24c0a2ee5261d1aabe4239ce574"
 }

package/src/Menu.js

@@ -1,12 +1,16 @@
 import { MosaicClient, isParam, isSelection } from '@uwdata/mosaic-core';
 import { Query, eq, literal } from '@uwdata/mosaic-sql';
+import { input } from './input.js';
 
 const isObject = v => {
   return v && typeof v === 'object' && !Array.isArray(v);
 };
 
+export const menu = options => input(Menu, options);
+
 export class Menu extends MosaicClient {
   constructor({
+    element,
     filterBy,
     from,
     column,
@@ -22,7 +26,7 @@ export class Menu extends MosaicClient {
     this.selection = as;
     this.format = format;
 
-    this.element = document.createElement('div');
+    this.element = element ?? document.createElement('div');
     this.element.setAttribute('class', 'input');
     this.element.value = this;
 
@@ -36,13 +40,12 @@ export class Menu extends MosaicClient {
       this.update();
     }
     value = value ?? this.selection?.value ?? this.data?.[0]?.value;
-    this.select.value = value;
     if (this.selection?.value === undefined) this.publish(value);
     this.element.appendChild(this.select);
 
     if (this.selection) {
       this.select.addEventListener('input', () => {
-        this.publish(this.selectedValue() || null);
+        this.publish(this.selectedValue() ?? null);
       });
       if (!isSelection(this.selection)) {
         this.selection.addEventListener('value', value => {
@@ -59,11 +62,19 @@ export class Menu extends MosaicClient {
       const index = this.select.selectedIndex;
       return this.data[index].value;
     } else {
-      // TODO make more robust
-      this.select.value = String(value);
+      const index = this.data?.findIndex(opt => opt.value === value);
+      if (index >= 0) {
+        this.select.selectedIndex = index;
+      } else {
+        this.select.value = String(value);
+      }
     }
   }
 
+  reset() {
+    this.select.selectedIndex = this.from ? 0 : -1;
+  }
+
   publish(value) {
     const { selection, column } = this;
     if (isSelection(selection)) {
@@ -104,7 +115,7 @@ export class Menu extends MosaicClient {
       this.select.appendChild(opt);
     }
     if (this.selection) {
-      this.select.value = this.selection?.value || '';
+      this.selectedValue(this.selection?.value ?? '');
     }
     return this;
   }

package/src/Search.js

@@ -2,17 +2,21 @@ import { MosaicClient, isParam, isSelection } from '@uwdata/mosaic-core';
 import {
   Query, regexp_matches, contains, prefix, suffix, literal
 } 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 {
   constructor({
+    element,
     filterBy,
     from,
     column,
     label,
-    type,
+    type = 'contains',
     as
   } = {}) {
     super(filterBy);
@@ -22,7 +26,7 @@ export class Search extends MosaicClient {
     this.column = column;
     this.selection = as;
 
-    this.element = document.createElement('div');
+    this.element = element ?? document.createElement('div');
     this.element.setAttribute('class', 'input');
     this.element.value = this;
 
@@ -53,6 +57,10 @@ export class Search extends MosaicClient {
     }
   }
 
+  reset() {
+    this.searchbox.value = '';
+  }
+
   publish(value) {
     const { selection, column, type } = this;
     if (isSelection(selection)) {

package/src/Slider.js

@@ -1,10 +1,14 @@
 import { MosaicClient, isParam, isSelection } from '@uwdata/mosaic-core';
 import { Query, eq, literal, max, min } from '@uwdata/mosaic-sql';
+import { input } from './input.js';
 
 let _id = 0;
 
+export const slider = options => input(Slider, options);
+
 export class Slider extends MosaicClient {
   constructor({
+    element,
     filterBy,
     as,
     min,
@@ -13,7 +17,8 @@ export class Slider extends MosaicClient {
     from,
     column,
     label = column,
-    value = as?.value
+    value = as?.value,
+    width
   } = {}) {
     super(filterBy);
     this.id = 'slider_' + (++_id);
@@ -24,7 +29,7 @@ export class Slider extends MosaicClient {
     this.max = max;
     this.step = step;
 
-    this.element = document.createElement('div');
+    this.element = element || document.createElement('div');
     this.element.setAttribute('class', 'input');
     this.element.value = this;
 
@@ -38,6 +43,7 @@ export class Slider extends MosaicClient {
     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);

package/src/Table.js

@@ -1,24 +1,33 @@
-import { MosaicClient } from '@uwdata/mosaic-core';
+import { MosaicClient, coordinator } 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';
 
 let _id = -1;
 
+export const table = options => input(Table, options);
+
 export class Table extends MosaicClient {
   constructor({
+    element,
     filterBy,
     from,
     columns = ['*'],
+    align = {},
     format,
-    rowBatch = 100,
     width,
-    height = 500
+    maxWidth,
+    height = 500,
+    rowBatch = 100,
   } = {}) {
     super(filterBy);
     this.id = `table-${++_id}`;
     this.from = from;
     this.columns = columns;
     this.format = format;
+    this.align = align;
+    this.widths = typeof width === 'object' ? width : {};
+
     this.offset = 0;
     this.limit = +rowBatch;
     this.pending = false;
@@ -27,12 +36,11 @@ export class Table extends MosaicClient {
     this.sortColumn = null;
     this.sortDesc = false;
 
-    this.element = document.createElement('div');
+    this.element = element || document.createElement('div');
     this.element.setAttribute('id', this.id);
     this.element.value = this;
-    if (width) {
-      this.element.style.maxWidth = `${width}px`;
-    }
+    if (typeof width === 'number') this.element.style.width = `${width}px`;
+    if (maxWidth) this.element.style.maxWidth = `${maxWidth}px`;
     this.element.style.maxHeight = `${height}px`;
     this.element.style.overflow = 'auto';
 
@@ -47,9 +55,7 @@ export class Table extends MosaicClient {
 
       if (scrollHeight - scrollTop < 2 * clientHeight) {
         this.pending = true;
-        this.offset += this.limit;
-        const query = this.queryInternal(this.filterBy?.predicate(this));
-        this.requestQuery(query);
+        this.requestData(this.offset + this.limit);
       }
     });
 
@@ -66,17 +72,28 @@ export class Table extends MosaicClient {
     this.element.appendChild(this.style);
   }
 
+  requestData(offset = 0) {
+    this.offset = offset;
+
+    // request next data batch
+    const query = this.query(this.filterBy?.predicate(this));
+    this.requestQuery(query);
+
+    // prefetch subsequent data batch
+    coordinator().prefetch(query.clone().offset(offset + this.limit));
+  }
+
   fields() {
     return this.columns.map(name => column(this.from, name));
   }
 
-  fieldStats(stats) {
-    this.stats = stats;
+  fieldInfo(info) {
+    this.schema = info;
 
     const thead = this.head;
     thead.innerHTML = '';
     const tr = document.createElement('tr');
-    for (const { column } of stats) {
+    for (const { column } of info) {
       const th = document.createElement('th');
       th.addEventListener('click', evt => this.sort(evt, column));
       th.appendChild(document.createElement('span'));
@@ -86,23 +103,22 @@ export class Table extends MosaicClient {
     thead.appendChild(tr);
 
     // get column formatters
-    this.formats = formatof(this.format, stats);
+    this.formats = formatof(this.format, info);
 
     // get column alignment style
-    this.style.innerText = tableCSS(this.id, alignof({}, stats));
+    this.style.innerText = tableCSS(
+      this.id,
+      alignof(this.align, info),
+      widthof(this.widths, info)
+    );
 
     return this;
   }
 
-  query(filter) {
-    this.offset = 0;
-    return this.queryInternal(filter);
-  }
-
-  queryInternal(filter = []) {
-    const { from, limit, offset, stats, sortColumn, sortDesc } = this;
+  query(filter = []) {
+    const { from, limit, offset, schema, sortColumn, sortDesc } = this;
     return Query.from(from)
-      .select(stats.map(s => s.column))
+      .select(schema.map(s => s.column))
       .where(filter)
       .orderby(sortColumn ? (sortDesc ? desc(sortColumn) : sortColumn) : [])
       .limit(limit)
@@ -120,15 +136,15 @@ export class Table extends MosaicClient {
   }
 
   update() {
-    const { body, formats, data, stats, limit } = this;
-    const nf = stats.length;
+    const { body, formats, data, schema, limit } = this;
+    const nf = schema.length;
 
     let count = 0;
     for (const row of data) {
       ++count;
       const tr = document.createElement('tr');
       for (let i = 0; i < nf; ++i) {
-        const value = row[stats[i].column];
+        const value = row[schema[i].column];
         const td = document.createElement('td');
         td.innerText = value == null ? '' : formats[i](value);
         tr.appendChild(td);
@@ -166,13 +182,12 @@ export class Table extends MosaicClient {
     }
 
     // issue query for sorted data
-    const query = this.query(this.filterBy?.predicate(this));
-    this.requestQuery(query);
+    this.requestData();
   }
 }
 
-function formatof(base = {}, stats, locale) {
-  return stats.map(({ column, type }) => {
+function formatof(base = {}, schema, locale) {
+  return schema.map(({ column, type }) => {
     if (column in base) {
       return base[column];
     } else {
@@ -185,8 +200,8 @@ function formatof(base = {}, stats, locale) {
   });
 }
 
-function alignof(base = {}, stats) {
-  return stats.map(({ column, type }) => {
+function alignof(base = {}, schema) {
+  return schema.map(({ column, type }) => {
     if (column in base) {
       return base[column];
     } else if (type === 'number') {
@@ -197,11 +212,18 @@ function alignof(base = {}, stats) {
   });
 }
 
-function tableCSS(id, align) {
+function widthof(base = {}, schema) {
+  return schema.map(({ column }) => base[column]);
+}
+
+function tableCSS(id, aligns, widths) {
   const styles = [];
-  align.forEach((a, i) => {
-    if (a !== 'left') {
-      styles.push(`#${id} tr>:nth-child(${i+1}) {text-align:${a}}`);
+  aligns.forEach((a, i) => {
+    const w = +widths[i];
+    if (a !== 'left' || w) {
+      const align = a !== 'left' ? `text-align:${a};` : '';
+      const width = w ? `width:${w}px;max-width:${w}px;` : '';
+      styles.push(`#${id} tr>:nth-child(${i+1}) {${align}${width}}`);
     }
   });
   return styles.join(' ');

package/src/index.js

@@ -1,4 +1,4 @@
-export { Menu } from './Menu.js';
-export { Search } from './Search.js';
-export { Slider } from './Slider.js';
-export { Table } from './Table.js';
+export { Menu, menu } from './Menu.js';
+export { Search, search } from './Search.js';
+export { Slider, slider } from './Slider.js';
+export { Table, table } from './Table.js';

package/src/input.js

@@ -0,0 +1,7 @@
+import { coordinator } from '@uwdata/mosaic-core';
+
+export function input(InputClass, options) {
+  const input = new InputClass(options);
+  coordinator().connect(input);
+  return input.element;
+}