@genome-spy/core 0.62.2 → 0.64.0

package/dist/src/utils/interactionEvent.js

@@ -4,8 +4,10 @@
  * as in the DOM.
  */
 export default class InteractionEvent {
+    /** @type {MouseEvent} */
+    #primitiveMouseEventProxy;
+
     /**
-     *
      * @param {import("../view/layout/point.js").default} point Event coordinates
      *      inside the visualization canvas.
      * @param {UIEvent} uiEvent The event to be wrapped
@@ -27,10 +29,27 @@ export default class InteractionEvent {
         this.stopped = true;
     }
 
+    /**
+     * The event type string of the underlying UI event (e.g. "click", "keydown").
+     *
+     * This getter proxies and returns the `type` property from the internal `UIEvent` instance (`this.uiEvent`).
+     *
+     * @returns {string} The UI event type.
+     */
     get type() {
         return this.uiEvent.type;
     }
 
+    get proxiedMouseEvent() {
+        if (!this.#primitiveMouseEventProxy) {
+            this.#primitiveMouseEventProxy = createPrimitiveEventProxy(
+                this.mouseEvent
+            );
+        }
+
+        return this.#primitiveMouseEventProxy;
+    }
+
     get mouseEvent() {
         if (this.uiEvent instanceof MouseEvent) {
             return this.uiEvent;
@@ -39,3 +58,84 @@ export default class InteractionEvent {
         }
     }
 }
+
+/**
+ * Create a safe proxy for an event-like object that exposes only primitive
+ * (string, number, boolean, bigint, symbol, undefined) properties and null.
+ *
+ * @param {T} target The event-like object to wrap.
+ * @returns {T} A proxy exposing only primitive properties.
+ * @template T
+ */
+export function createPrimitiveEventProxy(target) {
+    /**
+     * @param {any} v
+     * @returns {boolean}
+     */
+    const isPrimitiveOrNull = (v) =>
+        v === null || (typeof v !== "object" && typeof v !== "function");
+
+    /** @type {ProxyHandler<any>} */
+    const handler = {
+        /**
+         * @param {any} target
+         * @param {PropertyKey} prop
+         * @param {any} receiver
+         */
+        get(target, prop, receiver) {
+            const value = Reflect.get(target, prop, target);
+            if (!isPrimitiveOrNull(value)) {
+                throw new Error(
+                    `Access to non-primitive property "${String(prop)}" is not allowed.`
+                );
+            }
+            return value;
+        },
+
+        getPrototypeOf() {
+            return null;
+        },
+
+        /**
+         * @param {any} target
+         * @returns {ArrayLike<string|symbol>}
+         */
+        ownKeys(target) {
+            const keys = Reflect.ownKeys(target).filter((k) =>
+                isPrimitiveOrNull(target[k])
+            );
+            return keys.map((k) => (typeof k === "symbol" ? k : String(k)));
+        },
+
+        /**
+         * @param {any} target
+         * @param {PropertyKey} prop
+         * @returns {PropertyDescriptor|undefined}
+         */
+        getOwnPropertyDescriptor(target, prop) {
+            const desc = Reflect.getOwnPropertyDescriptor(target, prop);
+            if (!desc) return undefined;
+            // hide accessor properties (getters/setters)
+            if ("get" in desc || "set" in desc) return undefined;
+            if (!isPrimitiveOrNull(desc.value)) return undefined;
+            // Preserve configurability/enumerability/writability to satisfy proxy invariants
+            return {
+                value: desc.value,
+                writable: !!desc.writable,
+                enumerable: !!desc.enumerable,
+                configurable: !!desc.configurable,
+            };
+        },
+
+        /**
+         * @param {any} target
+         * @param {PropertyKey} prop
+         * @returns {boolean} */
+        has(target, prop) {
+            if (!(prop in target)) return false;
+            return isPrimitiveOrNull(target[prop]);
+        },
+    };
+
+    return new Proxy(target, handler);
+}

package/dist/src/utils/interactionEvent.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interactionEvent.test.d.ts.map

package/dist/src/utils/interactionEvent.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactionEvent.test.d.ts","sourceRoot":"","sources":["../../../src/utils/interactionEvent.test.js"],"names":[],"mappings":""}

package/dist/src/utils/interactionEvent.test.js

@@ -0,0 +1,35 @@
+import { describe, it, expect } from "vitest";
+import { createPrimitiveEventProxy } from "./interactionEvent.js";
+
+describe("createPrimitiveEventProxy", () => {
+    it("exposes primitive properties and hides non-primitives", () => {
+        const mock = {
+            type: "click",
+            clientX: 42,
+            meta: { foo: "bar" },
+            nested: { a: 1 },
+        };
+
+        /** @type {any} */
+        const proxy = createPrimitiveEventProxy(mock);
+
+        // allowed primitives
+        expect(proxy.type).toBe("click");
+        expect(proxy.clientX).toBe(42);
+
+        // non-primitive access throws
+        expect(() => proxy.meta).toThrow(/non-primitive/);
+
+        // keys enumeration hides non-primitives
+        const keys = Object.keys(proxy);
+        expect(keys).toContain("type");
+        expect(keys).not.toContain("meta");
+
+        // `in` operator respects the policy
+        expect("type" in proxy).toBe(true);
+        expect("meta" in proxy).toBe(false);
+
+        // prototype is hidden
+        expect(Object.getPrototypeOf(proxy)).toBeNull();
+    });
+});

package/dist/src/view/facetView.d.ts

@@ -48,7 +48,7 @@ export default class FacetView extends ContainerView {
     getAccessor(channel: "row" | "column"): any;
     updateFacets(): void;
     updateLabels(): void;
-    getFacetGroups(): any[];
+    getFacetGroups(): string[] | number[] | boolean[];
     /**
      * @param {import("./renderingContext/viewRenderingContext.js").default} context
      * @param {import("./layout/rectangle.js").default} coords

package/dist/src/view/facetView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"facetView.d.ts","sourceRoot":"","sources":["../../../src/view/facetView.js"],"names":[],"mappings":"AAmDA;;;;;;;;;;;;;;GAcG;AACH;IACI;;;;;;;OAOG;IACH;;;;;;OAMG;IACH,kBALW,OAAO,gBAAgB,EAAE,SAAS,WAClC,OAAO,gBAAgB,EAAE,WAAW,UACpC,aAAa,QACb,MAAM,EA8BhB;IAzBG,UAAgB;IAEhB,WAEC;IAED;;;;OAIG;IACH,aAFU,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,CAYvC;IAED,oDAAoD;IACpD,kBADY,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,CACa;IA2BjE,sBAIC;IAED;;;OAGG;IACH,qBAFW,KAAK,GAAG,QAAQ,OAwB1B;IAED,qBAyCC;IAED,qBASC;IA6BD,wBAgBC;IAOD;;;;OAIG;IACH,gBAJW,OAAO,4CAA4C,EAAE,OAAO,UAC5D,OAAO,uBAAuB,EAAE,OAAO,YACvC,OAAO,WAAW,EAAE,gBAAgB,QA2L9C;IA3KO,wBAA0B;CA4KrC;2BA/bY,QAAQ,GAAG,KAAK;;;;;;aA4CnB,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,MAAM,EAAE;;;0BA1Df,oBAAoB;qBACzB,eAAe"}
+{"version":3,"file":"facetView.d.ts","sourceRoot":"","sources":["../../../src/view/facetView.js"],"names":[],"mappings":"AAmDA;;;;;;;;;;;;;;GAcG;AACH;IACI;;;;;;;OAOG;IACH;;;;;;OAMG;IACH,kBALW,OAAO,gBAAgB,EAAE,SAAS,WAClC,OAAO,gBAAgB,EAAE,WAAW,UACpC,aAAa,QACb,MAAM,EA8BhB;IAzBG,UAAgB;IAEhB,WAEC;IAED;;;;OAIG;IACH,aAFU,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,CAYvC;IAED,oDAAoD;IACpD,kBADY,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,CACa;IA2BjE,sBAIC;IAED;;;OAGG;IACH,qBAFW,KAAK,GAAG,QAAQ,OAwB1B;IAED,qBAyCC;IAED,qBASC;IA6BD,kDAgBC;IAOD;;;;OAIG;IACH,gBAJW,OAAO,4CAA4C,EAAE,OAAO,UAC5D,OAAO,uBAAuB,EAAE,OAAO,YACvC,OAAO,WAAW,EAAE,gBAAgB,QA2L9C;IA3KO,wBAA0B;CA4KrC;2BA/bY,QAAQ,GAAG,KAAK;;;;;;aA4CnB,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,MAAM,EAAE;;;0BA1Df,oBAAoB;qBACzB,eAAe"}

package/dist/src/view/gridView/gridView.js

@@ -449,7 +449,7 @@ export default class GridView extends ContainerView {
         context.pushView(this, coords);
 
         const flexOpts = {
-            devicePixelRatio: this.context.devicePixelRatio,
+            devicePixelRatio: context.getDevicePixelRatio(),
         };
         const columnFlexCoords = mapToPixelCoords(
             this.#makeFlexItems("column"),

package/dist/src/view/renderingContext/bufferedViewRenderingContext.d.ts

@@ -1,30 +1,45 @@
+/**
+ * @typedef {object} BufferedViewRenderingOptions
+ * @prop {import("../../gl/webGLHelper.js").default} webGLHelper
+ * @prop {{width: number, height: number}} canvasSize Size of the canvas in logical pixels.
+ * @prop {number} devicePixelRatio
+ * @prop {import("twgl.js").FramebufferInfo} [framebufferInfo]
+ * @prop {string} [clearColor] Clear color for the  WebGL context,
+ *      defaults to transparent black.
+ */
+/**
+ * View rendering context that buffers the actual WebGL rendering for
+ * efficient animation.
+ */
 export default class BufferedViewRenderingContext extends ViewRenderingContext {
     /**
      * @param {import("../../types/rendering.js").GlobalRenderingOptions} globalOptions
-     * @param {import("../../gl/webGLHelper.js").default} webGLHelper
+     * @param {BufferedViewRenderingOptions} bufferedOptions
      */
-    constructor(globalOptions: import("../../types/rendering.js").GlobalRenderingOptions, webGLHelper: import("../../gl/webGLHelper.js").default);
-    webGLHelper: import("../../gl/webGLHelper.js").default;
-    /**
-     * @type {import("../../types/rendering.js").BufferedRenderingRequest[]}
-     */
-    buffer: import("../../types/rendering.js").BufferedRenderingRequest[];
-    /** @type {import("../layout/rectangle.js").default} */
-    coords: import("../layout/rectangle.js").default;
-    /** @type {Set<import("../view.js").default>} */
-    views: Set<import("../view.js").default>;
+    constructor(globalOptions: import("../../types/rendering.js").GlobalRenderingOptions, bufferedOptions: BufferedViewRenderingOptions);
     /**
      * Renders marks in an optimized order, minimizing the number of WebGL state
      * changes.
      */
     render(): void;
-    _buildBatch(): void;
+    #private;
+}
+export type BufferedViewRenderingOptions = {
+    webGLHelper: import("../../gl/webGLHelper.js").default;
     /**
-     * Store the operations as a sequence of commands for cheap subsequent rendering.
-     *
-     * @type {(function():void)[]}
+     * Size of the canvas in logical pixels.
      */
-    batch: (() => void)[];
-}
+    canvasSize: {
+        width: number;
+        height: number;
+    };
+    devicePixelRatio: number;
+    framebufferInfo?: import("twgl.js").FramebufferInfo;
+    /**
+     * Clear color for the  WebGL context,
+     * defaults to transparent black.
+     */
+    clearColor?: string;
+};
 import ViewRenderingContext from "./viewRenderingContext.js";
 //# sourceMappingURL=bufferedViewRenderingContext.d.ts.map

package/dist/src/view/renderingContext/bufferedViewRenderingContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bufferedViewRenderingContext.d.ts","sourceRoot":"","sources":["../../../../src/view/renderingContext/bufferedViewRenderingContext.js"],"names":[],"mappings":"AAIA;IACI;;;OAGG;IACH,2BAHW,OAAO,0BAA0B,EAAE,sBAAsB,eACzD,OAAO,yBAAyB,EAAE,OAAO,EAiBnD;IAZG,uDAA8B;IAE9B;;OAEG;IACH,QAFU,OAAO,0BAA0B,EAAE,wBAAwB,EAAE,CAEvD;IAEhB,uDAAuD;IACvD,QADW,OAAO,wBAAwB,EAAE,OAAO,CAC5B;IAEvB,gDAAgD;IAChD,OADW,GAAG,CAAC,OAAO,YAAY,EAAE,OAAO,CAAC,CACtB;IAsC1B;;;OAGG;IACH,eA+BC;IAED,oBA2EC;IA1EG;;;;OAIG;IACH,OAFU,CAAC,MAAW,IAAI,CAAC,EAAE,CAEd;CAsEtB;iCA5KgC,2BAA2B"}
+{"version":3,"file":"bufferedViewRenderingContext.d.ts","sourceRoot":"","sources":["../../../../src/view/renderingContext/bufferedViewRenderingContext.js"],"names":[],"mappings":"AAKA;;;;;;;;GAQG;AAEH;;;GAGG;AACH;IA2BI;;;OAGG;IACH,2BAHW,OAAO,0BAA0B,EAAE,sBAAsB,mBACzD,4BAA4B,EActC;IAyCD;;;OAGG;IACH,eAmCC;;CA8EJ;;iBArNS,OAAO,yBAAyB,EAAE,OAAO;;;;gBACzC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC;sBAC/B,MAAM;sBACN,OAAO,SAAS,EAAE,eAAe;;;;;iBACjC,MAAM;;iCATiB,2BAA2B"}

package/dist/src/view/renderingContext/bufferedViewRenderingContext.js

@@ -1,27 +1,69 @@
 import { group } from "d3-array";
 
 import ViewRenderingContext from "./viewRenderingContext.js";
-
+import { color } from "d3-color";
+
+/**
+ * @typedef {object} BufferedViewRenderingOptions
+ * @prop {import("../../gl/webGLHelper.js").default} webGLHelper
+ * @prop {{width: number, height: number}} canvasSize Size of the canvas in logical pixels.
+ * @prop {number} devicePixelRatio
+ * @prop {import("twgl.js").FramebufferInfo} [framebufferInfo]
+ * @prop {string} [clearColor] Clear color for the  WebGL context,
+ *      defaults to transparent black.
+ */
+
+/**
+ * View rendering context that buffers the actual WebGL rendering for
+ * efficient animation.
+ */
 export default class BufferedViewRenderingContext extends ViewRenderingContext {
+    /** @type {[number, number, number, number]} */
+    #clearColor = [0, 0, 0, 0];
+
+    /** @type {(() => void)[]} */
+    #batch;
+
+    /**
+     * @type {import("../../types/rendering.js").BufferedRenderingRequest[]}
+     */
+    #buffer = [];
+
+    /** @type {import("twgl.js").FramebufferInfo} */
+    #framebufferInfo;
+
+    /** @type {import("../../gl/webGLHelper.js").default} */
+    #webGLHelper;
+
+    /** @type {Set<import("../view.js").default>} */
+    #views = new Set();
+
+    /** @type {import("../layout/rectangle.js").default} */
+    #coords = undefined;
+
+    #dpr = 1;
+    #canvasSize = { width: 0, height: 0 };
+
     /**
      * @param {import("../../types/rendering.js").GlobalRenderingOptions} globalOptions
-     * @param {import("../../gl/webGLHelper.js").default} webGLHelper
+     * @param {BufferedViewRenderingOptions} bufferedOptions
      */
-    constructor(globalOptions, webGLHelper) {
+    constructor(globalOptions, bufferedOptions) {
         super(globalOptions);
 
-        this.webGLHelper = webGLHelper;
-
-        /**
-         * @type {import("../../types/rendering.js").BufferedRenderingRequest[]}
-         */
-        this.buffer = [];
+        this.#webGLHelper = bufferedOptions.webGLHelper;
+        this.#framebufferInfo = bufferedOptions.framebufferInfo;
+        this.#dpr = bufferedOptions.devicePixelRatio;
+        this.#canvasSize = bufferedOptions.canvasSize;
 
-        /** @type {import("../layout/rectangle.js").default} */
-        this.coords = undefined;
+        if (bufferedOptions.clearColor) {
+            const c = color(bufferedOptions.clearColor).rgb();
+            this.#clearColor = [c.r / 255, c.g / 255, c.b / 255, c.opacity];
+        }
+    }
 
-        /** @type {Set<import("../view.js").default>} */
-        this.views = new Set();
+    getDevicePixelRatio() {
+        return this.#dpr;
     }
 
     /**
@@ -33,8 +75,8 @@ export default class BufferedViewRenderingContext extends ViewRenderingContext {
      * @override
      */
     pushView(view, coords) {
-        this.views.add(view);
-        this.coords = coords;
+        this.#views.add(view);
+        this.#coords = coords;
     }
 
     /**
@@ -50,10 +92,10 @@ export default class BufferedViewRenderingContext extends ViewRenderingContext {
 
         const callback = mark.render(options);
         if (callback) {
-            this.buffer.push({
+            this.#buffer.push({
                 mark,
                 callback,
-                coords: this.coords,
+                coords: this.#coords,
                 clipRect: options.clipRect,
             });
         }
@@ -64,45 +106,47 @@ export default class BufferedViewRenderingContext extends ViewRenderingContext {
      * changes.
      */
     render() {
-        if (!this.batch) {
-            this._buildBatch();
+        if (!this.#batch) {
+            this.#buildBatch();
         }
 
-        if (this.batch.length == 0) {
+        if (this.#batch.length == 0) {
             return;
         }
 
-        const gl = this.webGLHelper.gl;
-        const picking = this.globalOptions.picking;
+        const gl = this.#webGLHelper.gl;
+        const fbi = this.#framebufferInfo;
 
-        gl.bindFramebuffer(
-            gl.FRAMEBUFFER,
-            picking ? this.webGLHelper._pickingBufferInfo.framebuffer : null
-        );
+        if (fbi) {
+            gl.bindFramebuffer(gl.FRAMEBUFFER, fbi.framebuffer);
+            gl.viewport(0, 0, fbi.width, fbi.height);
+        } else {
+            gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+        }
 
-        this.webGLHelper.clearAll();
+        gl.disable(gl.SCISSOR_TEST);
+        gl.clearColor(...this.#clearColor);
+        gl.clear(gl.COLOR_BUFFER_BIT);
 
-        for (const view of this.views) {
+        for (const view of this.#views) {
             view.onBeforeRender();
         }
 
         // Execute the batch
-        for (const op of this.batch) {
+        for (const op of this.#batch) {
             op();
         }
 
-        if (picking) {
+        if (this.#framebufferInfo) {
             gl.bindFramebuffer(gl.FRAMEBUFFER, null);
         }
     }
 
-    _buildBatch() {
+    #buildBatch() {
         /**
          * Store the operations as a sequence of commands for cheap subsequent rendering.
-         *
-         * @type {(function():void)[]}
          */
-        this.batch = [];
+        this.#batch = [];
 
         /**
          * Is drawing enabled or not. As an optimization this is toggled off for invisible views.
@@ -129,7 +173,7 @@ export default class BufferedViewRenderingContext extends ViewRenderingContext {
         // Note: by reversing the buffer, we ensure ensure that the last instance
         // of a mark determines the order of the groups.
         const requestByMark = group(
-            this.buffer.reverse(),
+            this.#buffer.reverse(),
             (request) => request.mark
         );
 
@@ -140,11 +184,11 @@ export default class BufferedViewRenderingContext extends ViewRenderingContext {
             }
 
             // eslint-disable-next-line no-loop-func
-            this.batch.push(() => {
+            this.#batch.push(() => {
                 enabled = mark.unitView.getEffectiveOpacity() > 0;
             });
             // Change program, set common uniforms (mark properties, shared domains)
-            this.batch.push(
+            this.#batch.push(
                 ...mark
                     .prepareRender(this.globalOptions)
                     .map((op) => ifEnabled(op))
@@ -156,18 +200,20 @@ export default class BufferedViewRenderingContext extends ViewRenderingContext {
                 const coords = request.coords;
                 // Render each facet
                 if (!coords.equals(previousCoords)) {
-                    this.batch.push(
+                    this.#batch.push(
                         // eslint-disable-next-line no-loop-func
                         ifEnabled(() => {
                             // Suppress rendering if viewport is outside the clipRect
                             viewportVisible = mark.setViewport(
+                                this.#canvasSize,
+                                this.#dpr,
                                 coords,
                                 request.clipRect
                             );
                         })
                     );
                 }
-                this.batch.push(ifEnabledAndVisible(request.callback));
+                this.#batch.push(ifEnabledAndVisible(request.callback));
                 previousCoords = request.coords;
             }
         }

package/dist/src/view/renderingContext/simpleViewRenderingContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"simpleViewRenderingContext.d.ts","sourceRoot":"","sources":["../../../../src/view/renderingContext/simpleViewRenderingContext.js"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH;IAMQ,uDAAuD;IACvD,QADW,OAAO,wBAAwB,EAAE,OAAO,CAC5B;IAEvB,gDAAgD;IAChD,OADW,GAAG,CAAC,OAAO,YAAY,EAAE,OAAO,CAAC,CACtB;CA6C7B;;;;;mBAzDY,OAAO,YAAY,EAAE,OAAO;iCANR,2BAA2B"}
+{"version":3,"file":"simpleViewRenderingContext.d.ts","sourceRoot":"","sources":["../../../../src/view/renderingContext/simpleViewRenderingContext.js"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH;IAMQ,uDAAuD;IACvD,QADW,OAAO,wBAAwB,EAAE,OAAO,CAC5B;IAEvB,gDAAgD;IAChD,OADW,GAAG,CAAC,OAAO,YAAY,EAAE,OAAO,CAAC,CACtB;CAiD7B;;;;;mBA7DY,OAAO,YAAY,EAAE,OAAO;iCANR,2BAA2B"}

package/dist/src/view/renderingContext/simpleViewRenderingContext.js

@@ -58,7 +58,11 @@ export default class SimpleViewRenderingContext extends ViewRenderingContext {
         for (const op of mark.prepareRender(this.globalOptions)) {
             op();
         }
-        mark.setViewport(this.coords, options.clipRect);
+
+        const canvasSize = { width: 100, height: 100 }; // Placeholder, should be replaced with actual canvas size
+        const dpr = this.getDevicePixelRatio();
+
+        mark.setViewport(canvasSize, dpr, this.coords, options.clipRect);
         mark.render(options)();
     }
 }

package/dist/src/view/renderingContext/viewRenderingContext.d.ts

@@ -28,6 +28,7 @@ export default class ViewRenderingContext {
      * @param {import("../../types/rendering.js").RenderingOptions} options
      */
     renderMark(mark: import("../../marks/mark.js").default, options: import("../../types/rendering.js").RenderingOptions): void;
+    getDevicePixelRatio(): number;
 }
 export type View = import("../view.js").default;
 //# sourceMappingURL=viewRenderingContext.d.ts.map

package/dist/src/view/renderingContext/viewRenderingContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viewRenderingContext.d.ts","sourceRoot":"","sources":["../../../../src/view/renderingContext/viewRenderingContext.js"],"names":[],"mappings":"AAAA;;GAEG;AACH;IACI;;;OAGG;IACH,2BAFW,OAAO,0BAA0B,EAAE,sBAAsB,EAInE;IADG,yEAAkC;IAGtC;;;;;;OAMG;IACH,eAJW,IAAI,UACJ,OAAO,wBAAwB,EAAE,OAAO,QAKlD;IAED;;;;OAIG;IACH,cAFW,IAAI,QAId;IAED;;;;OAIG;IACH,iBAHW,OAAO,qBAAqB,EAAE,OAAO,WACrC,OAAO,0BAA0B,EAAE,gBAAgB,QAI7D;CACJ;mBAvCY,OAAO,YAAY,EAAE,OAAO"}
+{"version":3,"file":"viewRenderingContext.d.ts","sourceRoot":"","sources":["../../../../src/view/renderingContext/viewRenderingContext.js"],"names":[],"mappings":"AAAA;;GAEG;AACH;IACI;;;OAGG;IACH,2BAFW,OAAO,0BAA0B,EAAE,sBAAsB,EAInE;IADG,yEAAkC;IAGtC;;;;;;OAMG;IACH,eAJW,IAAI,UACJ,OAAO,wBAAwB,EAAE,OAAO,QAKlD;IAED;;;;OAIG;IACH,cAFW,IAAI,QAId;IAED;;;;OAIG;IACH,iBAHW,OAAO,qBAAqB,EAAE,OAAO,WACrC,OAAO,0BAA0B,EAAE,gBAAgB,QAI7D;IAED,8BAEC;CACJ;mBA3CY,OAAO,YAAY,EAAE,OAAO"}

package/dist/src/view/renderingContext/viewRenderingContext.js

@@ -38,4 +38,8 @@ export default class ViewRenderingContext {
     renderMark(mark, options) {
         //
     }
+
+    getDevicePixelRatio() {
+        return 1;
+    }
 }

package/dist/src/view/unitView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"unitView.d.ts","sourceRoot":"","sources":["../../../src/view/unitView.js"],"names":[],"mappings":"AA4BA;;;;GAIG;AACH,wBAHU,MAAM,CAAC,OAAO,iBAAiB,EAAE,QAAQ,EAAE,cAAc,kBAAkB,EAAE,OAAO,CAAC,CAc7F;AAEF;IAeI;;;;;;;;OAQG;IACH,kBAPW,OAAO,iBAAiB,EAAE,QAAQ,WAClC,OAAO,yBAAyB,EAAE,OAAO,gBACzC,OAAO,oBAAoB,EAAE,OAAO,cACpC,OAAO,WAAW,EAAE,OAAO,QAC3B,MAAM,YACN,OAAO,WAAW,EAAE,WAAW,EAiCzC;IA5BG,yCAAgB;IAIZ,iDAAiD;IACjD,MADW,OAAO,kBAAkB,EAAE,OAAO,CACnB;IAkHlC,2DAIC;IAgBD;;;;;OAKG;IAEH,iEAsHC;IAED;;;;;OAKG;IACH,4IAEC;IAkBD;;OAEG;IACH,uDAEC;IAED;;;;;;;;;;;;;OAaG;IACH,uEAHW,OAAO,oBAAoB,EAAE,IAAI,iDAqB3C;IAED,uBAQC;IAgBD;;;;OAIG;IACH,8BAJW,MAAM,+DAEJ,OAAO,iBAAiB,EAAE,kBAAkB,CAKxD;;CACJ;iBAragB,WAAW"}
+{"version":3,"file":"unitView.d.ts","sourceRoot":"","sources":["../../../src/view/unitView.js"],"names":[],"mappings":"AA6BA;;;;GAIG;AACH,wBAHU,MAAM,CAAC,OAAO,iBAAiB,EAAE,QAAQ,EAAE,cAAc,kBAAkB,EAAE,OAAO,CAAC,CAc7F;AAEF;IAeI;;;;;;;;OAQG;IACH,kBAPW,OAAO,iBAAiB,EAAE,QAAQ,WAClC,OAAO,yBAAyB,EAAE,OAAO,gBACzC,OAAO,oBAAoB,EAAE,OAAO,cACpC,OAAO,WAAW,EAAE,OAAO,QAC3B,MAAM,YACN,OAAO,WAAW,EAAE,WAAW,EAiCzC;IA5BG,yCAAgB;IAIZ,iDAAiD;IACjD,MADW,OAAO,kBAAkB,EAAE,OAAO,CACnB;IA4JlC,2DAIC;IAgBD;;;;;OAKG;IAEH,iEAsHC;IAED;;;;;OAKG;IACH,4IAEC;IAkBD;;OAEG;IACH,uDAEC;IAED;;;;;;;;;;;;;OAaG;IACH,uEAHW,OAAO,oBAAoB,EAAE,IAAI,iDAqB3C;IAED,uBAQC;IAgBD;;;;OAIG;IACH,8BAJW,MAAM,+DAEJ,OAAO,iBAAiB,EAAE,kBAAkB,CAKxD;;CACJ;iBAhdgB,WAAW"}

package/dist/src/view/unitView.js

@@ -25,6 +25,7 @@ import {
     updateMultiPointSelection,
 } from "../selection/selection.js";
 import { UNIQUE_ID_KEY } from "../data/transforms/identifier.js";
+import { createEventFilterFunction } from "../utils/expression.js";
 
 /**
  *
@@ -108,6 +109,16 @@ export default class UnitView extends View {
             }
 
             const select = asSelectionConfig(param.select);
+            // Normalized config has eventConfig in "on"
+            const eventConfig =
+                /** @type {import("../spec/parameter.js").EventConfig} */ (
+                    select.on
+                );
+
+            const clearEventConfig =
+                /** @type {import("../spec/parameter.js").EventConfig} */ (
+                    select.clear
+                );
 
             if (isPointSelectionConfig(select)) {
                 // Handle projection-free point selections
@@ -122,10 +133,17 @@ export default class UnitView extends View {
                     return h?.mark?.unitView === this ? h.datum : null;
                 };
 
+                const eventPredicate = eventConfig.filter
+                    ? createEventFilterFunction(eventConfig.filter)
+                    : () => true;
+
                 const listener = (
                     /** @type {any} */ _,
                     /** @type {import("../utils/interactionEvent.js").default} */ event
                 ) => {
+                    if (!eventPredicate(event.proxiedMouseEvent)) {
+                        return;
+                    }
                     const datum = getHoveredDatum();
                     const id = datum ? datum[UNIQUE_ID_KEY] : none;
 
@@ -164,11 +182,36 @@ export default class UnitView extends View {
                 };
 
                 this.addInteractionEventListener(
-                    ["mouseover", "pointerover"].includes(select.on)
+                    ["mouseover", "pointerover"].includes(eventConfig.type)
                         ? "mousemove"
-                        : "click",
+                        : eventConfig.type,
                     listener
                 );
+
+                if (clearEventConfig) {
+                    const clearPredicate = clearEventConfig.filter
+                        ? createEventFilterFunction(clearEventConfig.filter)
+                        : () => true;
+
+                    const clearListener = (
+                        /** @type {any} */ _,
+                        /** @type {import("../utils/interactionEvent.js").default} */ event
+                    ) => {
+                        if (!clearPredicate(event.proxiedMouseEvent)) {
+                            return;
+                        }
+                        lastId = none;
+                        const selection = select.toggle
+                            ? createMultiPointSelection()
+                            : createSinglePointSelection(null);
+                        setter(selection);
+                    };
+
+                    this.addInteractionEventListener(
+                        clearEventConfig.type,
+                        clearListener
+                    );
+                }
             }
         }
     }

package/package.json

@@ -7,7 +7,7 @@
   },
   "contributors": [],
   "license": "MIT",
-  "version": "0.62.2",
+  "version": "0.64.0",
   "jsdelivr": "dist/bundle/index.js",
   "unpkg": "dist/bundle/index.js",
   "browser": "dist/bundle/index.js",
@@ -44,12 +44,12 @@
     "@gmod/indexedfasta": "^2.1.1",
     "@gmod/tabix": "^1.6.1",
     "@gmod/vcf": "^6.0.0",
-    "@types/d3-array": "^3.2.1",
+    "@types/d3-array": "^3.2.2",
     "@types/d3-dsv": "^3.0.7",
     "@types/d3-ease": "^3.0.2",
     "@types/d3-format": "^3.0.4",
     "@types/d3-interpolate": "^3.0.4",
-    "@types/d3-scale": "^4.0.8",
+    "@types/d3-scale": "^4.0.9",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
     "d3-ease": "^3.0.1",
@@ -59,13 +59,13 @@
     "internmap": "^2.0.3",
     "lit": "^3.3.0",
     "twgl.js": "^4.19.1",
-    "vega-expression": "^6.0.0",
-    "vega-loader": "^5.0.0",
-    "vega-scale": "^8.0.0",
-    "vega-util": "^2.0.0"
+    "vega-expression": "^6.1.0",
+    "vega-loader": "^5.1.0",
+    "vega-scale": "^8.1.0",
+    "vega-util": "^2.1.0"
   },
   "devDependencies": {
     "@types/long": "^4.0.1"
   },
-  "gitHead": "74d02e7425143681fec5fda16d539d94bfdfe034"
+  "gitHead": "a1edb39d7a50b3a2b05c9ee0d860170065fd5ad6"
 }