@uwdata/mosaic-inputs 0.0.1 → 0.2.0

package/package.json

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

package/src/Menu.js

@@ -1,5 +1,5 @@
-import { isSelection, isSignal, MosaicClient } from '@uwdata/mosaic-core';
-import { Query, column as columnRef, eq, literal } from '@uwdata/mosaic-sql';
+import { MosaicClient, isParam, isSelection } from '@uwdata/mosaic-core';
+import { Query, eq, literal } from '@uwdata/mosaic-sql';
 
 const isObject = v => {
   return v && typeof v === 'object' && !Array.isArray(v);
@@ -11,6 +11,7 @@ export class Menu extends MosaicClient {
     from,
     column,
     label = column,
+    format = x => x, // TODO
     options,
     value,
     as
@@ -19,6 +20,7 @@ export class Menu extends MosaicClient {
     this.from = from;
     this.column = column;
     this.selection = as;
+    this.format = format;
 
     this.element = document.createElement('div');
     this.element.setAttribute('class', 'input');
@@ -34,24 +36,41 @@ 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.select.value || null);
+        this.publish(this.selectedValue() ?? null);
       });
       if (!isSelection(this.selection)) {
         this.selection.addEventListener('value', value => {
           if (value !== this.select.value) {
-            this.select.value = value;
+            this.selectedValue(value);
           }
         });
       }
     }
   }
 
+  selectedValue(value) {
+    if (arguments.length === 0) {
+      const index = this.select.selectedIndex;
+      return this.data[index].value;
+    } else {
+      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)) {
@@ -61,16 +80,11 @@ export class Menu extends MosaicClient {
         value,
         predicate: value ? eq(column, literal(value)) : null
       });
-    } else if (isSignal(selection)) {
+    } else if (isParam(selection)) {
       selection.update(value);
     }
   }
 
-  fields() {
-    const { from, column } = this;
-    return from ? [ columnRef(from, column) ] : null;
-  }
-
   query(filter = []) {
     const { from, column } = this;
     if (!from) return null;
@@ -88,16 +102,16 @@ export class Menu extends MosaicClient {
   }
 
   update() {
-    const { data, select } = this;
+    const { data, format, select } = this;
     select.replaceChildren();
-    for (const { value, label = value } of data) {
+    for (const { value, label } of data) {
       const opt = document.createElement('option');
       opt.setAttribute('value', value);
-      opt.innerText = label; // TODO: label formatting?
+      opt.innerText = label ?? format(value);
       this.select.appendChild(opt);
     }
     if (this.selection) {
-      this.select.value = this.selection?.value || '';
+      this.selectedValue(this.selection?.value ?? '');
     }
     return this;
   }

package/src/Search.js

@@ -1,6 +1,6 @@
-import { isSelection, isSignal, MosaicClient } from '@uwdata/mosaic-core';
+import { MosaicClient, isParam, isSelection } from '@uwdata/mosaic-core';
 import {
-  Query, column as columnRef, regexp_matches, contains, prefix, suffix, literal
+  Query, regexp_matches, contains, prefix, suffix, literal
 } from '@uwdata/mosaic-sql';
 
 const FUNCTIONS = { contains, prefix, suffix, regexp: regexp_matches };
@@ -53,6 +53,10 @@ export class Search extends MosaicClient {
     }
   }
 
+  reset() {
+    this.searchbox.value = '';
+  }
+
   publish(value) {
     const { selection, column, type } = this;
     if (isSelection(selection)) {
@@ -62,16 +66,11 @@ export class Search extends MosaicClient {
         value,
         predicate: value ? FUNCTIONS[type](column, literal(value)) : null
       });
-    } else if (isSignal(selection)) {
+    } else if (isParam(selection)) {
       selection.update(value);
     }
   }
 
-  fields() {
-    const { from, column } = this;
-    return from ? [ columnRef(from, column) ] : null;
-  }
-
   query(filter = []) {
     const { from, column } = this;
     if (!from) return null;

package/src/Slider.js

@@ -1,21 +1,29 @@
-import { isSelection, isSignal } from '@uwdata/mosaic-core';
-import { eq, literal } from '@uwdata/mosaic-sql';
+import { MosaicClient, isParam, isSelection } from '@uwdata/mosaic-core';
+import { Query, eq, literal, max, min } from '@uwdata/mosaic-sql';
 
 let _id = 0;
 
-export class Slider {
+export class Slider extends MosaicClient {
   constructor({
+    filterBy,
     as,
     min,
     max,
     step,
+    from,
     column,
     label = column,
-    value = as?.value
+    value = as?.value,
+    width
   } = {}) {
+    super(filterBy);
     this.id = 'slider_' + (++_id);
+    this.from = from;
     this.column = column || 'value';
     this.selection = as;
+    this.min = min;
+    this.max = max;
+    this.step = step;
 
     this.element = document.createElement('div');
     this.element.setAttribute('class', 'input');
@@ -31,6 +39,7 @@ export class Slider {
     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);
@@ -54,6 +63,23 @@ export class Slider {
     }
   }
 
+  query(filter = []) {
+    const { from, column } = this;
+    if (!from || (this.min != null && this.max != null)) return null;
+    return Query
+      .select({ min: min(column), max: max(column) })
+      .from(from)
+      .where(filter);
+  }
+
+  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);
+    return this;
+  }
+
   publish(value) {
     const { selection, column } = this;
     if (isSelection(selection)) {
@@ -63,7 +89,7 @@ export class Slider {
         value,
         predicate: eq(column, literal(value))
       });
-    } else if (isSignal(this.selection)) {
+    } else if (isParam(this.selection)) {
       selection.update(value);
     }
   }

package/src/Table.js

@@ -1,4 +1,4 @@
-import { MosaicClient, Signal } from '@uwdata/mosaic-core';
+import { MosaicClient } from '@uwdata/mosaic-core';
 import { Query, column, desc } from '@uwdata/mosaic-sql';
 import { formatDate, formatLocaleAuto, formatLocaleNumber } from './util/format.js';
 
@@ -9,19 +9,23 @@ export class Table extends MosaicClient {
     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.request = new Signal();
     this.pending = false;
 
     this.sortHeader = null;
@@ -31,9 +35,8 @@ export class Table extends MosaicClient {
     this.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';
 
@@ -50,7 +53,7 @@ export class Table extends MosaicClient {
         this.pending = true;
         this.offset += this.limit;
         const query = this.queryInternal(this.filterBy?.predicate(this));
-        this.request.update(query);
+        this.requestQuery(query);
       }
     });
 
@@ -68,17 +71,16 @@ export class Table extends MosaicClient {
   }
 
   fields() {
-    const { from, columns } = this;
-    return columns.map(name => column(from, name));
+    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'));
@@ -88,10 +90,14 @@ 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;
   }
@@ -102,9 +108,9 @@ export class Table extends MosaicClient {
   }
 
   queryInternal(filter = []) {
-    const { from, limit, offset, stats, sortColumn, sortDesc } = this;
+    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)
@@ -122,15 +128,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);
@@ -169,12 +175,12 @@ export class Table extends MosaicClient {
 
     // issue query for sorted data
     const query = this.query(this.filterBy?.predicate(this));
-    this.request.update(query);
+    this.requestQuery(query);
   }
 }
 
-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 {
@@ -187,8 +193,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') {
@@ -199,11 +205,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(' ');