@uwdata/vgplot 0.12.0 → 0.12.1

package/README.md

@@ -1,5 +1,7 @@
 # vgplot: A Mosaic-powered Visualization Grammar
 
+[![npm version](https://img.shields.io/npm/v/@uwdata/vgplot.svg)](https://www.npmjs.com/package/@uwdata/vgplot)
+
 A **v**isualization **g**rammar for interactive Mosaic-powered visualizations and dashboards. This package provides convenient, composable methods that combines multiple Mosaic packages (core, inputs, plot, etc.) in an integrated API.
 
 vgplot is a JavaScript API for creating visualizations and dashboards. See the [mosaic-spec](https://github.com/uwdata/mosaic/tree/main/packages/spec) package to instead use declarative specifications in JSON or YAML format.

package/dist/vgplot.js

@@ -19664,7 +19664,7 @@ function clausePoint(field3, value, {
   source,
   clients = source ? /* @__PURE__ */ new Set([source]) : void 0
 }) {
-  const predicate = value !== void 0 ? isNotDistinct(field3, literal(value)) : null;
+  const predicate = value !== void 0 ? isIn(field3, [literal(value)]) : null;
   return {
     meta: { type: "point" },
     source,
@@ -20118,6 +20118,8 @@ __export(api_exports, {
   voronoi: () => voronoi2,
   voronoiMesh: () => voronoiMesh2,
   vspace: () => vspace,
+  waffleX: () => waffleX2,
+  waffleY: () => waffleY2,
   width: () => width,
   xAlign: () => xAlign,
   xAriaDescription: () => xAriaDescription,
@@ -45856,13 +45858,16 @@ var HexbinMark = class extends Mark2 {
         float642(x12),
         div(add(mul(add(x4, mul(0.5, bitAnd(y4, 1))), dx), ox2), xr)
       ),
-      [yc.as]: sub(float642(y22), div(add(mul(y4, dy), oy2), yr)),
+      [yc.as]: sub(
+        float642(y22),
+        div(add(mul(y4, dy), oy2), yr)
+      ),
       ...cols
     }).groupby(x4, y4, ...dims).from(
       // Subquery performs hex binning in screen space and also passes
       // original columns through (the DB should optimize this).
       Query.select({
-        [py]: div(mul(yr, sub(sub(y22, yc.field), oy2)), dy),
+        [py]: div(sub(mul(yr, sub(y22, yc.field)), oy2), dy),
         [pj]: int322(round(py)),
         [px]: sub(
           div(sub(mul(xr, sub(xc.field, x12)), ox2), dx),
@@ -47592,6 +47597,11 @@ var Menu = class extends MosaicClient {
             this.selectedValue(value2);
           }
         });
+      } else {
+        this.select.addEventListener("pointerenter", (evt) => {
+          if (!evt.buttons) this.activate();
+        });
+        this.select.addEventListener("focus", () => this.activate());
       }
     }
   }
@@ -47611,6 +47621,9 @@ var Menu = class extends MosaicClient {
   reset() {
     this.select.selectedIndex = this.from ? 0 : -1;
   }
+  activate() {
+    this.selection.activate(clausePoint(this.field, 0, { source: this }));
+  }
   publish(value) {
     const { selection: selection2, field: field3 } = this;
     if (isSelection(selection2)) {
@@ -47716,17 +47729,28 @@ var Search = class extends MosaicClient {
             this.searchbox.value = value;
           }
         });
+      } else {
+        this.searchbox.addEventListener("pointerenter", (evt) => {
+          if (!evt.buttons) this.activate();
+        });
+        this.searchbox.addEventListener("focus", () => this.activate());
       }
     }
   }
   reset() {
     this.searchbox.value = "";
   }
+  clause(value) {
+    const { field: field3, type: type2 } = this;
+    return clauseMatch(field3, value, { source: this, method: type2 });
+  }
+  activate() {
+    this.selection.activate(this.clause(""));
+  }
   publish(value) {
-    const { selection: selection2, field: field3, type: type2 } = this;
+    const { selection: selection2 } = this;
     if (isSelection(selection2)) {
-      const clause = clauseMatch(field3, value, { source: this, method: type2 });
-      selection2.update(clause);
+      selection2.update(this.clause(value));
     } else if (isParam(selection2)) {
       selection2.update(value);
     }
@@ -47845,13 +47869,20 @@ var Slider = class extends MosaicClient {
       this.curval.innerText = value2;
       if (this.selection) this.publish(+value2);
     });
-    if (this.selection && !isSelection(this.selection)) {
-      this.selection.addEventListener("value", (value2) => {
-        if (value2 !== +this.slider.value) {
-          this.slider.value = value2;
-          this.curval.innerText = value2;
-        }
-      });
+    if (this.selection) {
+      if (!isSelection(this.selection)) {
+        this.selection.addEventListener("value", (value2) => {
+          if (value2 !== +this.slider.value) {
+            this.slider.value = value2;
+            this.curval.innerText = value2;
+          }
+        });
+      } else {
+        this.slider.addEventListener("pointerenter", (evt) => {
+          if (!evt.buttons) this.activate();
+        });
+        this.slider.addEventListener("focus", () => this.activate());
+      }
     }
   }
   query(filter3 = []) {
@@ -47875,20 +47906,27 @@ var Slider = class extends MosaicClient {
     }
     return this;
   }
+  clause(value) {
+    const { field: field3, selectionType } = this;
+    if (selectionType === "interval") {
+      const domain = [this.min ?? 0, value];
+      return clauseInterval(field3, domain, {
+        source: this,
+        bin: "ceil",
+        scale: { type: "identity", domain },
+        pixelSize: this.step
+      });
+    } else {
+      return clausePoint(field3, value, { source: this });
+    }
+  }
+  activate() {
+    this.selection.activate(this.clause(0));
+  }
   publish(value) {
-    const { field: field3, selectionType, selection: selection2 } = this;
+    const { selection: selection2 } = this;
     if (isSelection(selection2)) {
-      if (selectionType === "interval") {
-        const domain = [this.min ?? 0, value];
-        selection2.update(clauseInterval(field3, domain, {
-          source: this,
-          bin: "ceil",
-          scale: { type: "identity", domain },
-          pixelSize: this.step
-        }));
-      } else {
-        selection2.update(clausePoint(field3, value, { source: this }));
-      }
+      selection2.update(this.clause(value));
     } else if (isParam(this.selection)) {
       selection2.update(value);
     }
@@ -48791,7 +48829,9 @@ __export(marks_exports, {
   vectorX: () => vectorX2,
   vectorY: () => vectorY2,
   voronoi: () => voronoi2,
-  voronoiMesh: () => voronoiMesh2
+  voronoiMesh: () => voronoiMesh2,
+  waffleX: () => waffleX2,
+  waffleY: () => waffleY2
 });
 var decorators = /* @__PURE__ */ new Set([
   "frame",
@@ -48888,6 +48928,8 @@ var gridFy2 = (...args) => mark("gridFy", ...args);
 var geo2 = (...args) => implicitType(GeoMark, ...args);
 var sphere2 = (...args) => mark("sphere", ...args);
 var graticule3 = (...args) => mark("graticule", ...args);
+var waffleX2 = (...args) => mark("waffleX", ...args);
+var waffleY2 = (...args) => mark("waffleY", ...args);
 
 // src/plot/interactors.js
 var interactors_exports = {};
@@ -49369,6 +49411,8 @@ export {
   voronoi2 as voronoi,
   voronoiMesh2 as voronoiMesh,
   vspace,
+  waffleX2 as waffleX,
+  waffleY2 as waffleY,
   wasmConnector,
   width,
   xAlign,