@uwdata/mosaic-inputs 0.2.0 → 0.3.0

package/package.json

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

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;
 

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,
@@ -25,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;
 

package/src/Table.js

@@ -1,11 +1,15 @@
-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 = ['*'],
@@ -32,7 +36,7 @@ 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 (typeof width === 'number') this.element.style.width = `${width}px`;
@@ -51,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);
       }
     });
 
@@ -70,6 +72,17 @@ 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));
   }
@@ -102,12 +115,7 @@ export class Table extends MosaicClient {
     return this;
   }
 
-  query(filter) {
-    this.offset = 0;
-    return this.queryInternal(filter);
-  }
-
-  queryInternal(filter = []) {
+  query(filter = []) {
     const { from, limit, offset, schema, sortColumn, sortDesc } = this;
     return Query.from(from)
       .select(schema.map(s => s.column))
@@ -174,8 +182,7 @@ export class Table extends MosaicClient {
     }
 
     // issue query for sorted data
-    const query = this.query(this.filterBy?.predicate(this));
-    this.requestQuery(query);
+    this.requestData();
   }
 }
 

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;
+}