@uwdata/mosaic-plot 0.12.2 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uwdata/mosaic-plot",
-  "version": "0.12.2",
+  "version": "0.13.0",
   "description": "A Mosaic-powered plotting framework based on Observable Plot.",
   "keywords": [
     "data",
@@ -12,27 +12,24 @@
   "license": "BSD-3-Clause",
   "author": "Jeffrey Heer (https://idl.uw.edu)",
   "type": "module",
-  "main": "src/index.js",
-  "module": "src/index.js",
-  "jsdelivr": "dist/mosaic-plot.min.js",
-  "unpkg": "dist/mosaic-plot.min.js",
+  "exports": {
+    "default": "./src/index.js"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/uwdata/mosaic.git"
   },
   "scripts": {
-    "prebuild": "rimraf dist && mkdir dist",
-    "build": "node ../../esbuild.js mosaic-plot",
     "lint": "eslint src test",
     "test": "vitest run",
-    "prepublishOnly": "npm run test && npm run lint && npm run build"
+    "prepublishOnly": "npm run test && npm run lint"
   },
   "dependencies": {
-    "@observablehq/plot": "^0.6.16",
-    "@uwdata/mosaic-core": "^0.12.2",
-    "@uwdata/mosaic-sql": "^0.12.2",
+    "@observablehq/plot": "^0.6.17",
+    "@uwdata/mosaic-core": "^0.13.0",
+    "@uwdata/mosaic-sql": "^0.13.0",
     "d3": "^7.9.0",
     "isoformat": "^0.2.1"
   },
-  "gitHead": "0ca741d840b98039255f26a5ceedf10be66f790e"
+  "gitHead": "b5a0e03e200c0f04c46562a288f084ffc9f6ad55"
 }

package/src/interactors/Interval1D.js

@@ -6,6 +6,10 @@ import { getField } from './util/get-field.js';
 import { invert } from './util/invert.js';
 import { sanitizeStyles } from './util/sanitize-styles.js';
 
+/**
+ * @import {Activatable} from '@uwdata/mosaic-core'
+ * @implements {Activatable}
+ */
 export class Interval1D {
   constructor(mark, {
     channel,

package/src/interactors/Interval2D.js

@@ -6,6 +6,10 @@ import { getField } from './util/get-field.js';
 import { invert } from './util/invert.js';
 import { sanitizeStyles } from './util/sanitize-styles.js';
 
+/**
+ * @import {Activatable} from '@uwdata/mosaic-core'
+ * @implements {Activatable}
+ */
 export class Interval2D {
   constructor(mark, {
     selection,

package/src/interactors/Nearest.js

@@ -2,6 +2,10 @@ import { clausePoint, clausePoints, isSelection } from '@uwdata/mosaic-core';
 import { select, pointer, min } from 'd3';
 import { getField } from './util/get-field.js';
 
+/**
+ * @import {Activatable} from '@uwdata/mosaic-core'
+ * @implements {Activatable}
+ */
 export class Nearest {
   constructor(mark, {
     selection,
@@ -71,12 +75,14 @@ export class Nearest {
 
     // trigger activation updates
     svg.addEventListener('pointerenter', evt => {
-      if (!evt.buttons) {
-        const v = this.channels.map(() => 0);
-        selection.activate(this.clause(v));
-      }
+      if (!evt.buttons) this.activate();
     });
   }
+
+  activate() {
+    const v = this.channels.map(() => 0);
+    this.selection.activate(this.clause(v));
+  }
 }
 
 /**

package/src/interactors/PanZoom.js

@@ -4,6 +4,10 @@ import { getField } from './util/get-field.js';
 
 const asc = (a, b) => a - b;
 
+/**
+ * @import {Activatable} from '@uwdata/mosaic-core'
+ * @implements {Activatable}
+ */
 export class PanZoom {
   constructor(mark, {
     x = new Selection(),
@@ -59,7 +63,7 @@ export class PanZoom {
     this.svg = svg;
     if (this.initialized) return; else this.initialized = true;
 
-    const { panx, pany, mark: { plot: { element } }, xsel, ysel } = this;
+    const { panx, pany, mark: { plot: { element } } } = this;
 
     this.xscale = svg.scale('x');
     this.yscale = svg.scale('y');
@@ -85,19 +89,22 @@ export class PanZoom {
       let enter = false;
       element.addEventListener('pointerenter', evt => {
         if (enter) return; else enter = true;
-        if (evt.buttons) return; // don't activate if mouse down
-        if (panx) {
-          const { xscale, xfield } = this;
-          xsel.activate(this.clause(xscale.domain, xfield, xscale));
-        }
-        if (pany) {
-          const { yscale, yfield } = this;
-          ysel.activate(this.clause(yscale.domain, yfield, yscale));
-        }
+        if (!evt.buttons) this.activate(); // don't activate if mouse down
       });
       element.addEventListener('pointerleave', () => enter = false);
     }
   }
+
+  activate() {
+    if (this.panx) {
+      const { xscale, xfield } = this;
+      this.xsel.activate(this.clause(xscale.domain, xfield, xscale));
+    }
+    if (this.pany) {
+      const { yscale, yfield } = this;
+      this.ysel.activate(this.clause(yscale.domain, yfield, yscale));
+    }
+  }
 }
 
 function extent(ext, defaultTrue, defaultFalse) {

package/src/interactors/Region.js

@@ -8,6 +8,10 @@ import { sanitizeStyles } from './util/sanitize-styles.js';
 import { neqSome } from './util/neq.js';
 import { getDatum } from './util/get-datum.js';
 
+/**
+ * @import {Activatable} from '@uwdata/mosaic-core'
+ * @implements {Activatable}
+ */
 export class Region {
   constructor(mark, {
     channels,

package/src/interactors/Toggle.js

@@ -2,6 +2,10 @@ import { clausePoints } from '@uwdata/mosaic-core';
 import { getDatum } from './util/get-datum.js';
 import { neq, neqSome } from './util/neq.js';
 
+/**
+ * @import {Activatable} from '@uwdata/mosaic-core'
+ * @implements {Activatable}
+ */
 export class Toggle {
   /**
    * @param {*} mark The mark to interact with.
@@ -12,8 +16,8 @@ export class Toggle {
     channels,
     peers = true
   }) {
-    this.value = null;
     this.mark = mark;
+    this.value = null;
     this.selection = selection;
     this.peers = peers;
     const fields = this.fields = [];
@@ -75,10 +79,13 @@ export class Toggle {
     });
 
     svg.addEventListener('pointerenter', evt => {
-      if (evt.buttons) return;
-      this.selection.activate(this.clause([this.fields.map(() => 0)]));
+      if (!evt.buttons) this.activate();
     });
   }
+
+  activate() {
+    this.selection.activate(this.clause([this.fields.map(() => 0)]));
+  }
 }
 
 function isTargetElement(groups, node) {

package/src/marks/ConnectedMark.js

@@ -39,7 +39,7 @@ export class ConnectedMark extends Mark {
         .filter(c => c !== as && c !== value);
       return m4(q, expr, as, value, cols);
     } else {
-      return q.orderby(field);
+      return q.orderby(as);
     }
   }
 }

package/src/marks/Mark.js

@@ -230,7 +230,7 @@ export function markQuery(channels, table, skip = []) {
     if (skip.includes(channel)) continue;
 
     if (channel === 'orderby') {
-      q.orderby(c.value);
+      q.orderby(c.value ?? field);
     } else if (field) {
       if (isAggregateExpression(field)) {
         aggr = true;

package/src/plot.js

@@ -10,19 +10,30 @@ const DEFAULT_ATTRIBUTES = {
 };
 
 export class Plot {
+  /**
+   * @param {HTMLElement} [element]
+   */
   constructor(element) {
+    /** @type {Record<string, any>} */
     this.attributes = { ...DEFAULT_ATTRIBUTES };
     this.listeners = null;
     this.interactors = [];
+    /** @type {{ legend: import('./legend.js').Legend, include: boolean }[]} */
     this.legends = [];
+    /** @type {import('./marks/Mark.js').Mark[]} */
     this.marks = [];
+    /** @type {Set<import('./marks/Mark.js').Mark> | null} */
     this.markset = null;
+    /** @type {Map<import('@uwdata/mosaic-core').Param, import('./marks/Mark.js').Mark[]>} */
+    this.params = new Map;
+    /** @type {ReturnType<synchronizer>} */
+    this.synch = synchronizer();
+
+    /** @type {HTMLElement} */
     this.element = element || document.createElement('div');
     this.element.setAttribute('class', 'plot');
     this.element.style.display = 'flex';
-    this.element.value = this;
-    this.params = new Map;
-    this.synch = synchronizer();
+    Object.assign(this.element, { value: this });
   }
 
   margins() {

package/vitest.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({});