@uwdata/mosaic-inputs 0.0.1 → 0.1.0

package/package.json

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

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');
@@ -40,18 +42,28 @@ export class Menu extends MosaicClient {
 
     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 {
+      // TODO make more robust
+      this.select.value = String(value);
+    }
+  }
+
   publish(value) {
     const { selection, column } = this;
     if (isSelection(selection)) {
@@ -61,16 +73,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,12 +95,12 @@ 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) {

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 };
@@ -62,16 +62,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,28 @@
-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
   } = {}) {
+    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');
@@ -54,6 +61,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 +87,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';
 
@@ -21,7 +21,6 @@ export class Table extends MosaicClient {
     this.format = format;
     this.offset = 0;
     this.limit = +rowBatch;
-    this.request = new Signal();
     this.pending = false;
 
     this.sortHeader = null;
@@ -50,7 +49,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,8 +67,7 @@ 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) {
@@ -169,7 +167,7 @@ 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);
   }
 }