@genome-spy/core 0.46.0 → 0.47.0

package/dist/src/gl/webGLHelper.d.ts

@@ -25,11 +25,12 @@ export default class WebGLHelper {
      *      A function that returns the content size. If a dimension is undefined,
      *      the canvas fills the container, otherwise the canvas is adjusted to the content size.
      * @param {string} [clearColor]
+     * @param {WebGLContextAttributes} [webglContextAttributes]
      */
     constructor(container: HTMLElement, sizeSource?: () => {
         width: number;
         height: number;
-    }, clearColor?: string);
+    }, clearColor?: string, webglContextAttributes?: WebGLContextAttributes);
     _container: HTMLElement;
     _sizeSource: () => {
         width: any;

package/dist/src/gl/webGLHelper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"webGLHelper.d.ts","sourceRoot":"","sources":["../../../src/gl/webGLHelper.js"],"names":[],"mappings":"AA4ZA;;;;GAIG;AACH,kCAJW,sBAAsB,gBACtB,WAAW,kBACX,WAAW;;;;;;EA8CrB;AAED;;;;;GAKG;AACH,0CALW,qBAAqB,WACrB,KAAK,OAAO,SAAS,EAAE,cAAc,EAAE,KAAK,CAAC,OAC7C,MAAM,EAAE,GAAG,eAAe,YAC1B,YAAY,gBAYtB;AAjcD;IACI;;;;;;;OAOG;IACH,uBANW,WAAW,eACX,MAAM;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,eAGrC,MAAM,EAmFhB;IAhFG,wBAA2B;IAC3B;;;MAKO;IAEP,uCAAuC;IACvC,cADW,IAAI,MAAM,EAAE,WAAW,CAAC,CACN;IAE7B,kFAAkF;IAClF,eADW,QAAQ,OAAO,4BAA4B,EAAE,OAAO,EAAE,YAAY,CAAC,CAC5C;IAuClC,0BAAoB;IACpB,2BAAY;IAGZ,oDAAoD;IACpD,2BADW,OAAO,SAAS,EAAE,iBAAiB,EAAE,CAQ/C;IACD,sDAGC;IAOD,+CAA+C;IAC/C,aADW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CACZ;IAOnC,uBAIC;IAHG;;;MAAmC;IAKvC,mBAEC;IADG,YAAkC;IAGtC;;;;;OAKG;IACH,oBAHW,MAAM,QACN,MAAM,GAAG,MAAM,EAAE,eA2B3B;IAED,iBAcC;IAED,iBAEC;IAED;;;;OAIG;IACH,oCAFW;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;;;MAQ3C;IAED;;OAEG;IACH;;;MAuBC;IAED;;;;OAIG;IACH,oBAHW,MAAM,KACN,MAAM,cAwBhB;IAED,iBAOC;IAED;;;;;;;;;OASG;IACH,+BAHW,OAAO,4BAA4B,EAAE,OAAO,WAC5C,OAAO,QA0GjB;CACJ"}
+{"version":3,"file":"webGLHelper.d.ts","sourceRoot":"","sources":["../../../src/gl/webGLHelper.js"],"names":[],"mappings":"AAmaA;;;;GAIG;AACH,kCAJW,sBAAsB,gBACtB,WAAW,kBACX,WAAW;;;;;;EA8CrB;AAED;;;;;GAKG;AACH,0CALW,qBAAqB,WACrB,KAAK,OAAO,SAAS,EAAE,cAAc,EAAE,KAAK,CAAC,OAC7C,MAAM,EAAE,GAAG,eAAe,YAC1B,YAAY,gBAYtB;AAxcD;IACI;;;;;;;;OAQG;IACH,uBAPW,WAAW,eACX,MAAM;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,eAGrC,MAAM,2BACN,sBAAsB,EAyFhC;IAjFG,wBAA2B;IAC3B;;;MAKO;IAEP,uCAAuC;IACvC,cADW,IAAI,MAAM,EAAE,WAAW,CAAC,CACN;IAE7B,kFAAkF;IAClF,eADW,QAAQ,OAAO,4BAA4B,EAAE,OAAO,EAAE,YAAY,CAAC,CAC5C;IAwClC,0BAAoB;IACpB,2BAAY;IAGZ,oDAAoD;IACpD,2BADW,OAAO,SAAS,EAAE,iBAAiB,EAAE,CAQ/C;IACD,sDAGC;IAOD,+CAA+C;IAC/C,aADW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CACZ;IAOnC,uBAIC;IAHG;;;MAAmC;IAKvC,mBAEC;IADG,YAAkC;IAGtC;;;;;OAKG;IACH,oBAHW,MAAM,QACN,MAAM,GAAG,MAAM,EAAE,eA2B3B;IAED,iBAcC;IAED,iBAEC;IAED;;;;OAIG;IACH,oCAFW;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;;;MAQ3C;IAED;;OAEG;IACH;;;MAuBC;IAED;;;;OAIG;IACH,oBAHW,MAAM,KACN,MAAM,cAwBhB;IAED,iBAOC;IAED;;;;;;;;;OASG;IACH,+BAHW,OAAO,4BAA4B,EAAE,OAAO,WAC5C,OAAO,QA0GjB;CACJ"}

package/dist/src/gl/webGLHelper.js

@@ -36,8 +36,14 @@ export default class WebGLHelper {
      *      A function that returns the content size. If a dimension is undefined,
      *      the canvas fills the container, otherwise the canvas is adjusted to the content size.
      * @param {string} [clearColor]
+     * @param {WebGLContextAttributes} [webglContextAttributes]
      */
-    constructor(container, sizeSource, clearColor) {
+    constructor(
+        container,
+        sizeSource,
+        clearColor,
+        webglContextAttributes = {}
+    ) {
         this._container = container;
         this._sizeSource =
             sizeSource ??
@@ -67,6 +73,7 @@ export default class WebGLHelper {
                 // Disable depth writes. We don't use depth testing.
                 depth: false,
                 premultipliedAlpha: true,
+                ...webglContextAttributes,
             })
         );
 

package/dist/src/marks/mark.d.ts

@@ -22,27 +22,39 @@ export default class Mark {
     unitView: import("../view/unitView.js").default;
     /** @type {Record<string, import("../types/encoder.js").Encoder>} */
     encoders: Record<string, import("../types/encoder.js").Encoder>;
-    /** @type {import("twgl.js").BufferInfo & { allocatedVertices?: number }} WebGL buffers */
-    bufferInfo: import("twgl.js").BufferInfo & {
+    /**
+     * @type {import("twgl.js").BufferInfo & { allocatedVertices?: number }}
+     * @protected
+     */
+    protected bufferInfo: import("twgl.js").BufferInfo & {
         allocatedVertices?: number;
     };
-    /** @type {import("twgl.js").ProgramInfo} WebGL buffers */
-    programInfo: import("twgl.js").ProgramInfo;
-    /** @type {import("twgl.js").VertexArrayInfo} WebGL buffers */
-    vertexArrayInfo: import("twgl.js").VertexArrayInfo;
-    /** @type {import("twgl.js").UniformBlockInfo} WebGL buffers */
-    domainUniformInfo: import("twgl.js").UniformBlockInfo;
-    /** @type {import("twgl.js").UniformBlockInfo} WebGL buffers */
-    viewUniformInfo: import("twgl.js").UniformBlockInfo;
+    /**
+     * @type {import("twgl.js").ProgramInfo}
+     * @protected
+     */
+    protected programInfo: import("twgl.js").ProgramInfo;
+    /**
+     * @type {import("twgl.js").VertexArrayInfo}
+     * @protected
+     */
+    protected vertexArrayInfo: import("twgl.js").VertexArrayInfo;
+    /**
+     * @type {import("twgl.js").UniformBlockInfo}
+     * @protected
+     */
+    protected viewUniformInfo: import("twgl.js").UniformBlockInfo;
     /**
      * Uniforms related to the specific mark type.
+     *
      * @type {import("twgl.js").UniformBlockInfo}
+     * @protected
      */
-    markUniformInfo: import("twgl.js").UniformBlockInfo;
+    protected markUniformInfo: import("twgl.js").UniformBlockInfo;
     /**
      * Indicates whether the mark's uniforms have been altered since the last rendering.
      * If set to true, the uniforms will be sent to the GPU before rendering the next frame.
-
+     *
      * @protected
      */
     protected markUniformsAltered: boolean;

package/dist/src/marks/mark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mark.d.ts","sourceRoot":"","sources":["../../../src/marks/mark.js"],"names":[],"mappings":";AA4CA,0DAA2D;AAC3D,0DAA2D;AAE3D;;;;;;;;;;;;GAYG;AACH;IAgBI;;OAEG;IACH,sBAFW,OAAO,qBAAqB,EAAE,OAAO,EAkF/C;IA/EG,gDAAwB;IAExB,oEAAoE;IACpE,UADW,OAAO,MAAM,EAAE,OAAO,qBAAqB,EAAE,OAAO,CAAC,CACvC;IAIzB,0FAA0F;IAC1F,YADW,OAAO,SAAS,EAAE,UAAU,GAAG;QAAE,iBAAiB,CAAC,EAAE,MAAM,CAAA;KAAE,CAC7C;IAE3B,0DAA0D;IAC1D,aADW,OAAO,SAAS,EAAE,WAAW,CACZ;IAE5B,8DAA8D;IAC9D,iBADW,OAAO,SAAS,EAAE,eAAe,CACZ;IAEhC,+DAA+D;IAC/D,mBADW,OAAO,SAAS,EAAE,gBAAgB,CACX;IAElC,+DAA+D;IAC/D,iBADW,OAAO,SAAS,EAAE,gBAAgB,CACb;IAEhC;;;OAGG;IACH,iBAFU,OAAO,SAAS,EAAE,gBAAgB,CAEZ;IAEhC;;;;;OAKG;IACH,uCAA+B;IAE/B,kFAAkF;IAClF,UADW,SAAS,GAAG,CAAC,CACM;IAG9B,wBAAwB;IACxB,uDAqBC;IAED;;;;;;;;OAQG;IACH,kEAKC;IAGL,sBAEC;IAED;;;;;;;OAOG;IACH,iBAFa,MAAM,EAAE,CAKpB;IAED;;OAEG;IACH,+DAWC;IAED;;OAEG;IACH,oEAcC;IAED;;;;;OAKG;IACH,oHAEC;IAED;;;;;;OAMG;IACH,yGAkCC;IAED;;;;OAIG;IACH,8DAiDC;IAED,wDAEC;IAED,8CAEC;IAED,uBAEC;IAED;;;OAGG;IACH,2BAEC;IAED;;OAEG;IACH,oCAEC;IAED;;OAEG;IACH,2BAEC;IAED,sEAeC;IAED;;;;;;OAMG;IAEH,6CANW,MAAM,kBACN,MAAM,iBACN,MAAM,EAAE,QA8NlB;IALG;;;;;;MAIC;IAGL;;;;;;OAMG;IACH,uCA6CC;IAED;;;;;;OAMG;IACH,+CAHW,MAAM,UACK,GAAG,KAAE,IAAI,CAe9B;IAED;;;;;;;;;;OAUG;IACH,mDAJW,MAAM,sFAEsB,GAAG,QA6BzC;IAED;;OAEG;IACH,2BAiBC;IAED;;;OAGG;IACH,6BAFW,GAAG,QAoCb;IAED,yBAAyB;IACzB,uDAEC;IAED,yBAAyB;IACzB,iCAEC;IAED,gCAEC;IAED,+BAEC;IAED,yCAEC;IAED;;;;;OAKG;IACH,gCAcC;IAED;;OAEG;IACH,4CAOC;IAED;;;;;;;;OAQG;IAEH,uBAJW,OAAO,uBAAuB,EAAE,sBAAsB,GACpD,CAAC,MAAM,IAAI,CAAC,EAAE,CAsF1B;IAED;;;;;;OAMG;IACH,qCAJW,oBAAoB,GAClB,OAAO,CAqCnB;IAED;;;;;;;OAOG;IACH,gBAJW,oBAAoB,SACP,IAAI,CAM3B;IAED;;;OAGG;IACH,2BAHW,YAAY,WACZ,OAAO,WAAW,EAAE,oBAAoB,cAiElD;IAED;;;;;;OAMG;IACH,oBAJW,OAAO,6BAA6B,EAAE,OAAO,aAC7C,OAAO,6BAA6B,EAAE,OAAO,GAC3C,OAAO,CAuHnB;IAED;;;;;;;;;OASG;IACH,qBAJW,MAAM,KACN,OAAO,oBAAoB,EAAE,MAAM,GACjC,GAAG,CAIf;;CACJ;+BAznCY,OAAO,uBAAuB,EAAE,gBAAgB;;;;;;wBAEnD,OAAO;;mCAEJ,gBAAgB,GAAG,qBAAqB;oCAG1C,MAAM,SACN,MAAM;AAmnCjB;;;GAGG;AACH;IACI,cAEC;IAkBD;;;OAGG;IACH,2BAFW,IAAI,CAAC,EAAE,OAAO,yBAAyB,EAAE,UAAU,CAAC,QAiB9D;CACJ;0BAjrCyB,WAAW"}
+{"version":3,"file":"mark.d.ts","sourceRoot":"","sources":["../../../src/marks/mark.js"],"names":[],"mappings":";AA4CA,0DAA2D;AAC3D,0DAA2D;AAE3D;;;;;;;;;;;;GAYG;AACH;IAgBI;;OAEG;IACH,sBAFW,OAAO,qBAAqB,EAAE,OAAO,EA6F/C;IA1FG,gDAAwB;IAExB,oEAAoE;IACpE,UADW,OAAO,MAAM,EAAE,OAAO,qBAAqB,EAAE,OAAO,CAAC,CACvC;IAIzB;;;OAGG;IACH,sBAHU,OAAO,SAAS,EAAE,UAAU,GAAG;QAAE,iBAAiB,CAAC,EAAE,MAAM,CAAA;KAAE,CAG5C;IAE3B;;;OAGG;IACH,uBAHU,OAAO,SAAS,EAAE,WAAW,CAGX;IAE5B;;;OAGG;IACH,2BAHU,OAAO,SAAS,EAAE,eAAe,CAGX;IAEhC;;;OAGG;IACH,2BAHU,OAAO,SAAS,EAAE,gBAAgB,CAGZ;IAEhC;;;;;OAKG;IACH,2BAHU,OAAO,SAAS,EAAE,gBAAgB,CAGZ;IAEhC;;;;;OAKG;IACH,uCAA+B;IAE/B,kFAAkF;IAClF,UADW,SAAS,GAAG,CAAC,CACM;IAG9B,wBAAwB;IACxB,uDAqBC;IAED;;;;;;;;OAQG;IACH,kEAKC;IAGL,sBAEC;IAED;;;;;;;OAOG;IACH,iBAFa,MAAM,EAAE,CAKpB;IAED;;OAEG;IACH,+DAWC;IAED;;OAEG;IACH,oEAcC;IAED;;;;;OAKG;IACH,oHAEC;IAED;;;;;;OAMG;IACH,yGAkCC;IAED;;;;OAIG;IACH,8DAiDC;IAED,wDAEC;IAED,8CAEC;IAED,uBAEC;IAED;;;OAGG;IACH,2BAEC;IAED;;OAEG;IACH,oCAEC;IAED;;OAEG;IACH,2BAEC;IAED,sEAeC;IAED;;;;;;OAMG;IAEH,6CANW,MAAM,kBACN,MAAM,iBACN,MAAM,EAAE,QA8NlB;IALG;;;;;;MAIC;IAGL;;;;;;OAMG;IACH,uCA6CC;IAED;;;;;;OAMG;IACH,+CAHW,MAAM,UACK,GAAG,KAAE,IAAI,CAe9B;IAED;;;;;;;;;;OAUG;IACH,mDAJW,MAAM,sFAEsB,GAAG,QA6BzC;IAED;;OAEG;IACH,2BAwBC;IAED;;;OAGG;IACH,6BAFW,GAAG,QAgCb;IAED,yBAAyB;IACzB,uDAEC;IAED,yBAAyB;IACzB,iCAEC;IAED,gCAEC;IAED,+BAEC;IAED,yCAEC;IAED;;;;;OAKG;IACH,gCAcC;IAED;;OAEG;IACH,4CAOC;IAED;;;;;;;;OAQG;IAEH,uBAJW,OAAO,uBAAuB,EAAE,sBAAsB,GACpD,CAAC,MAAM,IAAI,CAAC,EAAE,CAsF1B;IAED;;;;;;OAMG;IACH,qCAJW,oBAAoB,GAClB,OAAO,CAqCnB;IAED;;;;;;;OAOG;IACH,gBAJW,oBAAoB,SACP,IAAI,CAM3B;IAED;;;OAGG;IACH,2BAHW,YAAY,WACZ,OAAO,WAAW,EAAE,oBAAoB,cAiElD;IAED;;;;;;OAMG;IACH,oBAJW,OAAO,6BAA6B,EAAE,OAAO,aAC7C,OAAO,6BAA6B,EAAE,OAAO,GAC3C,OAAO,CAuHnB;IAED;;;;;;;;;OASG;IACH,qBAJW,MAAM,KACN,OAAO,oBAAoB,EAAE,MAAM,GACjC,GAAG,CAIf;;CACJ;+BAvoCY,OAAO,uBAAuB,EAAE,gBAAgB;;;;;;wBAEnD,OAAO;;mCAEJ,gBAAgB,GAAG,qBAAqB;oCAG1C,MAAM,SACN,MAAM;AAioCjB;;;GAGG;AACH;IACI,cAEC;IAkBD;;;OAGG;IACH,2BAFW,IAAI,CAAC,EAAE,OAAO,yBAAyB,EAAE,UAAU,CAAC,QAiB9D;CACJ;0BA/rCyB,WAAW"}

package/dist/src/marks/mark.js

@@ -85,31 +85,42 @@ export default class Mark {
 
         // TODO: Consolidate the following webgl stuff into a single object
 
-        /** @type {import("twgl.js").BufferInfo & { allocatedVertices?: number }} WebGL buffers */
+        /**
+         * @type {import("twgl.js").BufferInfo & { allocatedVertices?: number }}
+         * @protected
+         */
         this.bufferInfo = undefined;
 
-        /** @type {import("twgl.js").ProgramInfo} WebGL buffers */
+        /**
+         * @type {import("twgl.js").ProgramInfo}
+         * @protected
+         */
         this.programInfo = undefined;
 
-        /** @type {import("twgl.js").VertexArrayInfo} WebGL buffers */
+        /**
+         * @type {import("twgl.js").VertexArrayInfo}
+         * @protected
+         */
         this.vertexArrayInfo = undefined;
 
-        /** @type {import("twgl.js").UniformBlockInfo} WebGL buffers */
-        this.domainUniformInfo = undefined;
-
-        /** @type {import("twgl.js").UniformBlockInfo} WebGL buffers */
+        /**
+         * @type {import("twgl.js").UniformBlockInfo}
+         * @protected
+         */
         this.viewUniformInfo = undefined;
 
         /**
          * Uniforms related to the specific mark type.
+         *
          * @type {import("twgl.js").UniformBlockInfo}
+         * @protected
          */
         this.markUniformInfo = undefined;
 
         /**
          * Indicates whether the mark's uniforms have been altered since the last rendering.
          * If set to true, the uniforms will be sent to the GPU before rendering the next frame.
-
+         *
          * @protected
          */
         this.markUniformsAltered = true;
@@ -719,8 +730,15 @@ export default class Mark {
      * Delete WebGL buffers etc.
      */
     deleteGraphicsData() {
+        const gl = this.gl;
+
+        if (this.vertexArrayInfo) {
+            this.gl.bindVertexArray(null);
+            gl.deleteVertexArray(this.vertexArrayInfo.vertexArrayObject);
+            this.vertexArrayInfo = undefined;
+        }
+
         if (this.bufferInfo) {
-            const gl = this.gl;
             // A hack to prevent WebGL: INVALID_OPERATION: drawArrays: no buffer is bound to enabled attribute
             // TODO: Consider using bufferSubData or DYNAMIC_DRAW etc...
             for (let i = 0; i < 8; i++) {
@@ -742,7 +760,6 @@ export default class Mark {
      * @param {any} vertexData TODO: Extract type from VertexBuilder
      */
     updateBufferInfo(vertexData) {
-        // Ensure that no VAOs are inadvertently altered
         this.gl.bindVertexArray(null);
 
         if (
@@ -761,8 +778,6 @@ export default class Mark {
                         attributeData.data,
                         0
                     );
-                    // TODO: Consider double buffering:
-                    // https://community.khronos.org/t/texture-buffers-are-much-slower-than-uniform-buffers/77139
                 }
             }
         } else {
@@ -773,7 +788,6 @@ export default class Mark {
                 { numElements: vertexData.vertexCount }
             );
             this.bufferInfo.allocatedVertices = vertexData.allocatedVertices;
-            this.vertexArrayInfo = undefined;
         }
     }
 

package/dist/src/marks/point.d.ts

@@ -1,6 +1,5 @@
 export default class PointMark extends Mark {
     sampledSemanticScores: Float32Array;
-    _getGeometricScaleFactor(): number;
     getSemanticThreshold(): number;
     #private;
 }

package/dist/src/marks/point.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../src/marks/point.js"],"names":[],"mappings":"AAmBA;IA0HY,oCAMC;IA+CT,mCAQC;IAED,+BAkBC;;CAgDJ;iBAnQgB,WAAW"}
+{"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../src/marks/point.js"],"names":[],"mappings":"AAmBA;IA0HY,oCAMC;IA6DT,+BAkBC;;CAgDJ;iBAvQgB,WAAW"}

package/dist/src/marks/point.js

@@ -192,7 +192,11 @@ export default class PointMark extends Mark {
         this.updateBufferInfo(vertexData);
     }
 
-    _getGeometricScaleFactor() {
+    /**
+     * This and `geometricZoomBound` should be deprecated once params (zoomLevel) and
+     * expressions are documented.
+     */
+    #getGeometricScaleFactor() {
         const zoomLevel = Math.pow(2, this.properties.geometricZoomBound || 0);
 
         return Math.pow(
@@ -231,7 +235,7 @@ export default class PointMark extends Mark {
         ops.push(() => {
             // TODO: Use bindUniformBlock if none of the uniform has changed
             setBlockUniforms(this.markUniformInfo, {
-                uScaleFactor: this._getGeometricScaleFactor(),
+                uScaleFactor: this.#getGeometricScaleFactor(),
                 uSemanticThreshold: this.getSemanticThreshold(),
             });
             this.markUniformsAltered = true;

package/dist/src/marks/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/marks/text.js"],"names":[],"mappings":"AAgCA;;;;;;;GAOG;AACH;IAyDQ,oDAMmD;CAqM1D;iBA/RgB,WAAW"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/marks/text.js"],"names":[],"mappings":"AAgCA;;;;;;;GAOG;AACH;IAyDQ,oDAMmD;CAwM1D;iBAlSgB,WAAW"}

package/dist/src/marks/text.js

@@ -243,7 +243,10 @@ export default class TextMark extends Mark {
             fontMetrics: this.font.metrics,
             numCharacters: Math.max(
                 charCount,
-                this.properties.minBufferSize || 0
+                // There's some mysterious bug with growing the buffer –
+                // old buffer is rendered instead of the new one.
+                // TODO: Figure it out
+                this.properties.minBufferSize || 1024
             ),
         });
 

package/dist/src/scale/scale.js

@@ -274,6 +274,8 @@ function rawDomain(scale, raw, logger) {
 }
 
 function padDomain(type, domain, range, pad, exponent, constant) {
+    range ??= [0, 1]; // default to unit range. TODO: Fix this when we have pixel-based ranges.
+
     var span = Math.abs(peek(range) - range[0]),
         frac = span / (span - 2 * pad),
         d =

package/dist/src/spec/parameter.d.ts

@@ -60,6 +60,25 @@ export interface BindBase {
     description?: string;
 }
 
+export interface BindInput extends BindBase {
+    /**
+     * The type of input element to use.
+     * The valid values are `"checkbox"`, `"radio"`, `"range"`, `"select"`, `"text"`, `"number"`, and `"color"`.
+     */
+    input?: "text" | "number" | "color";
+
+    /**
+     * Text that appears in the form control when it has no value set.
+     */
+    placeholder?: string;
+
+    /**
+     * A hint for form autofill.
+     * See the [HTML autocomplete attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for additional information.
+     */
+    autocomplete?: string;
+}
+
 export interface BindCheckbox extends BindBase {
     input: "checkbox";
 }
@@ -124,4 +143,4 @@ export interface BindDirect {
     debounce?: number;
 }
 
-export type Binding = BindCheckbox | BindRadioSelect | BindRange;
+export type Binding = BindCheckbox | BindRadioSelect | BindRange | BindInput;

package/dist/src/types/embedApi.d.ts

@@ -33,6 +33,13 @@ export interface EmbedOptions {
      * the input binding elements are placed in the same container as the GenomeSpy instance.
      */
     inputBindingContainer?: HTMLElement | "none" | "default";
+
+    /**
+     * A suggestion for the browser on the appropriate GPU setup for the WebGL environment.
+     * Defaults to "default" in the @genome-spy/core package and "high-performance" in the
+     * @genome-spy/app package.
+     */
+    powerPreference?: "default" | "high-performance" | "low-power";
 }
 
 /**

package/dist/src/types/rendering.d.ts

@@ -24,6 +24,12 @@ export interface RenderingOptions {
      */
     facetId?: any;
 
+    /**
+     * If rendering facets, this is the first facet. Allows for
+     * cleanup, etc.
+     */
+    firstFacet?: boolean;
+
     sampleFacetRenderingOptions?: SampleFacetRenderingOptions;
 
     /**

package/dist/src/utils/animator.d.ts

@@ -1,3 +1,18 @@
+/**
+ * Returns a lerp smoother that animates a value towards a target value. Lerp smoothing
+ * is conceptually similar to easing, but can be used when the current and target
+ * values are not known in advance.
+ *
+ * Read more at: https://www.gamedeveloper.com/programming/improved-lerp-smoothing-
+ *
+ * @param {import("../utils/animator.js").default} animator
+ * @param {(value: number) => void} callback Function to be called with the interpolated value
+ * @param {number} halfLife Time until half of the value is reached, in milliseconds
+ * @param {number} stopAt Stop animation when the value is within this distance from the target
+ * @param {number} [initialValue] Initial value
+ * @returns {(target: number) => void} Function that activates the transition with a new target value
+ */
+export function makeLerpSmoother(animator: import("../utils/animator.js").default, callback: (value: number) => void, halfLife: number, stopAt: number, initialValue?: number): (target: number) => void;
 export default class Animator {
     /**
      *

package/dist/src/utils/animator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animator.d.ts","sourceRoot":"","sources":["../../../src/utils/animator.js"],"names":[],"mappings":"AAEA;IACI;;;OAGG;IACH,mCAFoB,MAAM,KAAE,IAAI,EAS/B;IANG,wBAHgB,MAAM,KAAE,IAAI,CAGS;IACrC,0BAA6B;IAC7B,eAAkB;IAElB,wCAAwC;IACxC,aADW,QAAU,MAAM,KAAE,IAAI,CAAC,EAAE,CACf;IAGzB;;;;;;;;;OASG;IACH,mCAFoB,MAAM,KAAE,IAAI,QAM/B;IAED;;OAEG;IACH,kCAFoB,MAAM,KAAE,IAAI,QAO/B;IAED;;;;OAIG;IACH,sBAoBC;IAED;;;;;OAKG;IACH,oBAFW,OAAO,iBAAiB,EAAE,iBAAiB,gBAQrD;CACJ"}
+{"version":3,"file":"animator.d.ts","sourceRoot":"","sources":["../../../src/utils/animator.js"],"names":[],"mappings":"AAoFA;;;;;;;;;;;;;GAaG;AACH,2CAPW,OAAO,sBAAsB,EAAE,OAAO,oBAC9B,MAAM,KAAK,IAAI,YACvB,MAAM,UACN,MAAM,iBACN,MAAM,YACK,MAAM,KAAK,IAAI,CAoDpC;AAlJD;IACI;;;OAGG;IACH,mCAFoB,MAAM,KAAE,IAAI,EAS/B;IANG,wBAHgB,MAAM,KAAE,IAAI,CAGS;IACrC,0BAA6B;IAC7B,eAAkB;IAElB,wCAAwC;IACxC,aADW,QAAU,MAAM,KAAE,IAAI,CAAC,EAAE,CACf;IAGzB;;;;;;;;;OASG;IACH,mCAFoB,MAAM,KAAE,IAAI,QAM/B;IAED;;OAEG;IACH,kCAFoB,MAAM,KAAE,IAAI,QAO/B;IAED;;;;OAIG;IACH,sBAoBC;IAED;;;;;OAKG;IACH,oBAFW,OAAO,iBAAiB,EAAE,iBAAiB,gBAQrD;CACJ"}

package/dist/src/utils/animator.js

@@ -81,3 +81,69 @@ export default class Animator {
         });
     }
 }
+
+/**
+ * Returns a lerp smoother that animates a value towards a target value. Lerp smoothing
+ * is conceptually similar to easing, but can be used when the current and target
+ * values are not known in advance.
+ *
+ * Read more at: https://www.gamedeveloper.com/programming/improved-lerp-smoothing-
+ *
+ * @param {import("../utils/animator.js").default} animator
+ * @param {(value: number) => void} callback Function to be called with the interpolated value
+ * @param {number} halfLife Time until half of the value is reached, in milliseconds
+ * @param {number} stopAt Stop animation when the value is within this distance from the target
+ * @param {number} [initialValue] Initial value
+ * @returns {(target: number) => void} Function that activates the transition with a new target value
+ */
+export function makeLerpSmoother(
+    animator,
+    callback,
+    halfLife,
+    stopAt,
+    initialValue = 0
+) {
+    let lastTimeStamp = 0;
+    let settled = true;
+
+    let current = initialValue;
+    let target = current;
+
+    /**
+     * @param {number} [timestamp]
+     */
+    function smoothUpdate(timestamp) {
+        timestamp ??= +document.timeline.currentTime;
+
+        // If settled, the animation loop may have been stopped, so we need to
+        // wait until the next frame to get a proper time delta.
+        const tD = settled ? 0 : timestamp - lastTimeStamp;
+        lastTimeStamp = timestamp;
+
+        settled = false;
+
+        // Lerp smoothing: https://twitter.com/FreyaHolmer/status/1757836988495847568
+        current = target + (current - target) * Math.pow(2, -tD / halfLife);
+
+        callback(current);
+
+        if (Math.abs(target - current) < stopAt) {
+            current = target;
+            callback(current);
+            settled = true;
+            animator.requestRender();
+        } else {
+            animator.requestTransition((t) => smoothUpdate(t));
+        }
+    }
+
+    /**
+     * @param {number} value
+     */
+    return function setTarget(value) {
+        target = value;
+        if (settled) {
+            smoothUpdate();
+        }
+    };
+}

package/dist/src/utils/inertia.d.ts

@@ -14,18 +14,12 @@ export default class Inertia {
     constructor(animator: import("./animator.js").default, disabled?: boolean);
     animator: import("./animator.js").default;
     disabled: boolean;
-    damping: number;
-    acceleration: number;
-    /** Use acceleration if the momentum step is greater than X */
-    accelerationThreshold: number;
-    lowerLimit: number;
-    loop: boolean;
-    momentum: number;
-    timestamp: number;
+    maxDistance: number;
     /** @type {function(number):void} */
     callback: (arg0: number) => void;
-    _transitionCallback: any;
-    clear(): void;
+    targetValue: number;
+    lastValue: number;
+    smoother: (target: number) => void;
     cancel(): void;
     /**
      *
@@ -33,10 +27,5 @@ export default class Inertia {
      * @param {function(number):void} callback
      */
     setMomentum(value: number, callback: (arg0: number) => void): void;
-    /**
-     *
-     * @param {number} [timestamp]
-     */
-    animate(timestamp?: number): void;
 }
 //# sourceMappingURL=inertia.d.ts.map

package/dist/src/utils/inertia.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inertia.d.ts","sourceRoot":"","sources":["../../../src/utils/inertia.js"],"names":[],"mappings":"AAsGA;;;GAGG;AACH,8EAiBC;AAzHD;;GAEG;AACH;IACI;;;OAGG;IACH,sBAHW,OAAO,eAAe,EAAE,OAAO,aAC/B,OAAO,EAmBjB;IAhBG,0CAAwB;IACxB,kBAA0B;IAC1B,gBAAoB;IACpB,qBAAuB;IACvB,8DAA8D;IAC9D,8BAAgC;IAChC,mBAAqB;IACrB,cAAiB;IAEjB,UAUW,MAAM,CAVA;IACjB,kBAAkB;IAClB,oCAAoC;IACpC,iBADoB,MAAM,KAAE,IAAI,CACZ;IAEpB,yBAAkD;IAItD,cAMC;IAED,eAKC;IAED;;;;OAIG;IACH,mBAHW,MAAM,mBACG,MAAM,KAAE,IAAI,QAyB/B;IAED;;;OAGG;IACH,oBAFW,MAAM,QAuBhB;CACJ"}
+{"version":3,"file":"inertia.d.ts","sourceRoot":"","sources":["../../../src/utils/inertia.js"],"names":[],"mappings":"AAmEA;;;GAGG;AACH,8EAiBC;AApFD;;GAEG;AACH;IACI;;;OAGG;IACH,sBAHW,OAAO,eAAe,EAAE,OAAO,aAC/B,OAAO,EAyBjB;IAtBG,0CAAwB;IACxB,kBAA0B;IAG1B,oBAAsB;IAEtB,oCAAoC;IACpC,iBADoB,MAAM,KAAE,IAAI,CACZ;IAEpB,oBAAoB;IACpB,kBAAkB;IAElB,mCASC;IAGL,eAIC;IAED;;;;OAIG;IACH,mBAHW,MAAM,mBACG,MAAM,KAAE,IAAI,QAkB/B;CACJ"}

package/dist/src/utils/inertia.js

@@ -1,4 +1,6 @@
 import { lerp } from "vega-util";
+import { makeLerpSmoother } from "./animator.js";
+import clamp from "./clamp.js";
 
 /**
  * Creates some inertia, mainly for zooming with a mechanical mouse wheel
@@ -11,35 +13,32 @@ export default class Inertia {
     constructor(animator, disabled) {
         this.animator = animator;
         this.disabled = !!disabled;
-        this.damping = 0.015;
-        this.acceleration = 0.3; // per event
-        /** Use acceleration if the momentum step is greater than X */
-        this.accelerationThreshold = 100;
-        this.lowerLimit = 0.5; // When to stop updating
-        this.loop = false;
 
-        this.momentum = 0;
-        this.timestamp = 0;
+        // Limit the velocity by setting the maximum distance the value can travel
+        this.maxDistance = 500;
+
         /** @type {function(number):void} */
         this.callback = null;
 
-        this._transitionCallback = this.animate.bind(this);
-        this.clear();
-    }
-
-    clear() {
-        /** @type {number} */
-        this.momentum = 0;
-        this.timestamp = null;
-        this.loop = null;
-        this.callback = null;
+        this.targetValue = 0;
+        this.lastValue = 0;
+
+        this.smoother = makeLerpSmoother(
+            animator,
+            (value) => {
+                const delta = value - this.lastValue;
+                this.lastValue = value;
+                this.callback?.(delta);
+            },
+            40,
+            0.1
+        );
     }
 
     cancel() {
-        if (this.loop) {
-            this.animator.cancelTransition(this._transitionCallback);
-            this.clear();
-        }
+        // decelelerate rapidly
+        this.targetValue = lerp([this.lastValue, this.targetValue], 0.3);
+        this.smoother(this.targetValue);
     }
 
     /**
@@ -53,50 +52,16 @@ export default class Inertia {
             return;
         }
 
-        // This may have some use in the future to improve the behavior of
-        // a mechanical mouse wheel:
-        // https://github.com/w3c/uievents/issues/181
-
-        if (value * this.momentum < 0) {
-            this.momentum = 0; // Stop if the direction changes
-        } else if (Math.abs(value) > this.accelerationThreshold) {
-            this.momentum = lerp([this.momentum, value], this.acceleration);
-        } else {
-            this.momentum = value;
-        }
-
         this.callback = callback;
 
-        if (!this.loop) {
-            this.animate();
-        }
-    }
-
-    /**
-     *
-     * @param {number} [timestamp]
-     */
-    animate(timestamp) {
-        this.callback(this.momentum); // TODO: This is actually a delta, should take the elapsed time into account
+        const delta = clamp(
+            this.targetValue + value - this.lastValue,
+            -this.maxDistance,
+            this.maxDistance
+        );
+        this.targetValue = this.lastValue + delta;
 
-        const timeDelta = timestamp - this.timestamp || 0;
-        this.timestamp = timestamp;
-
-        const velocity = Math.abs(this.momentum);
-
-        this.momentum =
-            Math.sign(this.momentum) *
-            Math.max(
-                0,
-                velocity - ((velocity * this.damping) ** 1.5 + 0.04) * timeDelta
-            );
-
-        if (Math.abs(this.momentum) > this.lowerLimit) {
-            this.loop = true;
-            this.animator.requestTransition(this._transitionCallback);
-        } else {
-            this.clear();
-        }
+        this.smoother(this.targetValue);
     }
 }
 

package/dist/src/utils/inputBinding.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inputBinding.d.ts","sourceRoot":"","sources":["../../../src/utils/inputBinding.js"],"names":[],"mappings":"AAIA;;GAEG;AACH,sDAFW,OAAO,0BAA0B,EAAE,OAAO,8CA6GpD"}
+{"version":3,"file":"inputBinding.d.ts","sourceRoot":"","sources":["../../../src/utils/inputBinding.js"],"names":[],"mappings":"AAIA;;GAEG;AACH,sDAFW,OAAO,0BAA0B,EAAE,OAAO,8CAqIpD"}

package/dist/src/utils/inputBinding.js

@@ -32,7 +32,6 @@ export default function createBindingInputs(mediator) {
         const id = `${random}-param-${name}`;
 
         if (bind.input == "range") {
-            // TODO: Show the value next to the slider
             inputs.push(
                 html`<label for=${id}>${label}</label>
                     <div>
@@ -99,8 +98,33 @@ export default function createBindingInputs(mediator) {
                         )}
                     </select> `
             );
+        } else if (
+            bind.input == "text" ||
+            bind.input == "number" ||
+            bind.input == "color"
+        ) {
+            inputs.push(
+                html`<label for=${id}>${label}</label>
+                    <div>
+                        <input
+                            id=${id}
+                            type=${bind.input}
+                            placeholder=${bind.placeholder ?? ""}
+                            autocomplete=${bind.autocomplete ?? "off"}
+                            .value=${value}
+                            @focus=${(/** @type {any} */ e) =>
+                                e.target.select()}
+                            @input=${(/** @type {any} */ e) => {
+                                debouncedSetter(
+                                    bind.input == "number"
+                                        ? e.target.valueAsNumber
+                                        : e.target.value
+                                );
+                            }}
+                        />
+                    </div>`
+            );
         } else {
-            // TODO: Support other types: "text", "number", "color".
             throw new Error("Unsupported input type: " + bind.input);
         }