@uwdata/mosaic-inputs 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uwdata/mosaic-inputs",
-  "version": "0.1.0",
+  "version": "0.2.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.2.0",
+    "@uwdata/mosaic-sql": "^0.2.0",
     "isoformat": "^0.2.1"
   },
-  "gitHead": "a7967c35349bdf7f00abb113ce1dd9abb233cd62"
+  "gitHead": "e53cd914c807f99aabe78dcbe618dd9543e2f438"
 }

package/src/Menu.js

@@ -36,13 +36,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 +58,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 +111,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

@@ -53,6 +53,10 @@ export class Search extends MosaicClient {
     }
   }
 
+  reset() {
+    this.searchbox.value = '';
+  }
+
   publish(value) {
     const { selection, column, type } = this;
     if (isSelection(selection)) {

package/src/Slider.js

@@ -13,7 +13,8 @@ export class Slider extends MosaicClient {
     from,
     column,
     label = column,
-    value = as?.value
+    value = as?.value,
+    width
   } = {}) {
     super(filterBy);
     this.id = 'slider_' + (++_id);
@@ -38,6 +39,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

@@ -9,16 +9,21 @@ 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.pending = false;
@@ -30,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';
 
@@ -70,13 +74,13 @@ export class Table extends MosaicClient {
     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,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;
   }
@@ -100,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)
@@ -120,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);
@@ -171,8 +179,8 @@ export class Table extends MosaicClient {
   }
 }
 
-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 +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') {
@@ -197,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(' ');