@uwdata/mosaic-inputs 0.9.0 → 0.10.0

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@uwdata/mosaic-inputs",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Mosaic input components.",
   "keywords": [
     "inputs",
     "mosaic"
   ],
   "license": "BSD-3-Clause",
-  "author": "Jeffrey Heer (http://idl.cs.washington.edu)",
+  "author": "Jeffrey Heer (https://idl.uw.edu)",
   "type": "module",
   "main": "src/index.js",
   "module": "src/index.js",
@@ -25,9 +25,9 @@
     "prepublishOnly": "npm run test && npm run lint && npm run build"
   },
   "dependencies": {
-    "@uwdata/mosaic-core": "^0.9.0",
-    "@uwdata/mosaic-sql": "^0.9.0",
+    "@uwdata/mosaic-core": "^0.10.0",
+    "@uwdata/mosaic-sql": "^0.10.0",
     "isoformat": "^0.2.1"
   },
-  "gitHead": "89bb9b0dfa747aed691eaeba35379525a6764c61"
+  "gitHead": "94fc4f0d4efc622001f6afd6714d1e9dda745be2"
 }

package/src/Menu.js

@@ -1,4 +1,4 @@
-import { MosaicClient, Param, isParam, isSelection, point } from '@uwdata/mosaic-core';
+import { MosaicClient, Param, isParam, isSelection, clausePoint } from '@uwdata/mosaic-core';
 import { Query } from '@uwdata/mosaic-sql';
 import { input } from './input.js';
 
@@ -122,7 +122,7 @@ export class Menu extends MosaicClient {
     const { selection, field } = this;
     if (isSelection(selection)) {
       if (value === '') value = undefined; // 'All' option
-      const clause = point(field, value, { source: this });
+      const clause = clausePoint(field, value, { source: this });
       selection.update(clause);
     } else if (isParam(selection)) {
       selection.update(value);

package/src/Search.js

@@ -1,4 +1,4 @@
-import { MosaicClient, Param, isParam, isSelection, match } from '@uwdata/mosaic-core';
+import { MosaicClient, Param, isParam, isSelection, clauseMatch } from '@uwdata/mosaic-core';
 import { Query } from '@uwdata/mosaic-sql';
 import { input } from './input.js';
 
@@ -88,7 +88,7 @@ export class Search extends MosaicClient {
   publish(value) {
     const { selection, field, type } = this;
     if (isSelection(selection)) {
-      const clause = match(field, value, { source: this, method: type });
+      const clause = clauseMatch(field, value, { source: this, method: type });
       selection.update(clause);
     } else if (isParam(selection)) {
       selection.update(value);

package/src/Slider.js

@@ -1,4 +1,4 @@
-import { MosaicClient, Param, interval, isParam, isSelection, point } from '@uwdata/mosaic-core';
+import { MosaicClient, Param, clauseInterval, clausePoint, isParam, isSelection } from '@uwdata/mosaic-core';
 import { Query, max, min } from '@uwdata/mosaic-sql';
 import { input } from './input.js';
 
@@ -145,14 +145,14 @@ export class Slider extends MosaicClient {
       if (selectionType === 'interval') {
         /** @type {[number, number]} */
         const domain = [this.min ?? 0, value];
-        selection.update(interval(field, domain, {
+        selection.update(clauseInterval(field, domain, {
           source: this,
           bin: 'ceil',
           scale: { type: 'identity', domain },
           pixelSize: this.step
         }));
       } else {
-        selection.update(point(field, value, { source: this }));
+        selection.update(clausePoint(field, value, { source: this }));
       }
     } else if (isParam(this.selection)) {
       selection.update(value);

package/src/Table.js

@@ -1,4 +1,4 @@
-import { MosaicClient, coordinator } from '@uwdata/mosaic-core';
+import { MosaicClient, clausePoints, coordinator, toDataColumns } 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';
@@ -23,6 +23,7 @@ export class Table extends MosaicClient {
     maxWidth,
     height = 500,
     rowBatch = 100,
+    as
   } = {}) {
     super(filterBy);
     this.id = `table-${++_id}`;
@@ -36,6 +37,9 @@ export class Table extends MosaicClient {
     this.limit = +rowBatch;
     this.pending = false;
 
+    this.selection = as;
+    this.currentRow = -1;
+
     this.sortHeader = null;
     this.sortColumn = null;
     this.sortDesc = false;
@@ -72,10 +76,34 @@ export class Table extends MosaicClient {
     this.body = document.createElement('tbody');
     this.tbl.appendChild(this.body);
 
+    if (this.selection) {
+      this.body.addEventListener('pointerover', evt => {
+        const row = resolveRow(evt.target);
+        if (row > -1 && row !== this.currentRow) {
+          this.currentRow = row;
+          this.selection.update(this.clause([row]));
+        }
+      });
+      this.body.addEventListener('pointerleave', () => {
+        this.currentRow = -1;
+        this.selection.update(this.clause());
+      });
+    }
+
     this.style = document.createElement('style');
     this.element.appendChild(this.style);
   }
 
+  clause(rows = []) {
+    const { data, limit, schema } = this;
+    const fields = schema.map(s => s.column);
+    const values = rows.map(row => {
+      const { columns } = data[~~(row / limit)];
+      return fields.map(f => columns[f][row % limit]);
+    });
+    return clausePoints(fields, values, { source: this });
+  }
+
   requestData(offset = 0) {
     this.offset = offset;
 
@@ -133,30 +161,35 @@ export class Table extends MosaicClient {
     if (!this.pending) {
       // data is not from an internal request, so reset table
       this.loaded = false;
+      this.data = [];
       this.body.replaceChildren();
+      this.offset = 0;
     }
-    this.data = data;
+    this.data.push(toDataColumns(data));
     return this;
   }
 
   update() {
     const { body, formats, data, schema, limit } = this;
     const nf = schema.length;
+    const n = data.length - 1;
+    const rowCount = limit * n;
 
-    let count = 0;
-    for (const row of data) {
-      ++count;
+    const { numRows, columns } = data[n];
+    const cols = schema.map(s => columns[s.column]);
+    for (let i = 0; i < numRows; ++i) {
       const tr = document.createElement('tr');
-      for (let i = 0; i < nf; ++i) {
-        const value = row[schema[i].column];
+      Object.assign(tr, { __row__: rowCount + i });
+      for (let j = 0; j < nf; ++j) {
+        const value = cols[j][i];
         const td = document.createElement('td');
-        td.innerText = value == null ? '' : formats[i](value);
+        td.innerText = value == null ? '' : formats[j](value);
         tr.appendChild(td);
       }
       body.appendChild(tr);
     }
 
-    if (count < limit) {
+    if (numRows < limit) {
       // data table has been fully loaded
       this.loaded = true;
     }
@@ -190,6 +223,16 @@ export class Table extends MosaicClient {
   }
 }
 
+/**
+ * Resolve a table row number from a table cell element.
+ * @param {any} element An HTML element.
+ * @returns {number} The resolved row, or -1 if not a row.
+ */
+function resolveRow(element) {
+  const p = element.parentElement;
+  return Object.hasOwn(p, '__row__') ? +p.__row__ : -1;
+}
+
 function formatof(base = {}, schema, locale) {
   return schema.map(({ column, type }) => {
     if (column in base) {