@genome-spy/core 0.43.3 → 0.45.0

package/dist/src/marks/mark.js

@@ -18,15 +18,16 @@ import createEncoders, {
     isValueDef,
 } from "../encoder/encoder.js";
 import {
-    DOMAIN_PREFIX,
-    generateValueGlsl,
+    generateConstantValueGlsl,
     generateScaleGlsl,
     RANGE_TEXTURE_PREFIX,
-    ATTRIBUTE_PREFIX,
     isHighPrecisionScale,
     toHighPrecisionDomainUniform,
-    splitHighPrecision,
     dedupeEncodingFields,
+    generateDynamicValueGlslAndUniform,
+    isLargeGenome,
+    splitLargeHighPrecision,
+    getRangeForGlsl,
 } from "../gl/glslScaleGenerator.js";
 import GLSL_COMMON from "../gl/includes/common.glsl.js";
 import GLSL_SCALES from "../gl/includes/scales.glsl.js";
@@ -38,9 +39,8 @@ import { createProgram } from "../gl/webGLHelper.js";
 import coalesceProperties from "../utils/propertyCoalescer.js";
 import { isScalar } from "../utils/variableTools.js";
 import { InternMap } from "internmap";
-import scaleNull from "../utils/scaleNull.js";
 import ViewError from "../view/viewError.js";
-import { isString } from "vega-util";
+import { isExprRef } from "../view/paramMediator.js";
 
 export const SAMPLE_FACET_UNIFORM = "SAMPLE_FACET_UNIFORM";
 export const SAMPLE_FACET_TEXTURE = "SAMPLE_FACET_TEXTURE";
@@ -60,13 +60,20 @@ export const SAMPLE_FACET_TEXTURE = "SAMPLE_FACET_TEXTURE";
  */
 export default class Mark {
     /**
-     * @typedef {import("../spec/mark.js").MarkConfig} MarkConfig
+     * @typedef {import("../spec/mark.js").MarkProps} MarkProps
      * @typedef {import("../spec/channel.js").Channel} Channel
      * @typedef {import("../spec/channel.js").Encoding} Encoding
      * @typedef {import("../spec/channel.js").ValueDef} ValueDef
-     * @typedef {import("../spec/mark.js").ExprRef} ExprRef
+     * @typedef {import("../spec/parameter.js").ExprRef} ExprRef
      */
 
+    /**
+     * Only needed during initialization;
+     *
+     * @type {(() => void)[]}
+     */
+    #callAfterShaderCompilation = [];
+
     /**
      * @param {import("../view/unitView.js").default} unitView
      */
@@ -111,7 +118,7 @@ export default class Mark {
         this.rangeMap = new RangeMap();
 
         // TODO: Implement https://vega.github.io/vega-lite/docs/config.html
-        /** @type {MarkConfig} */
+        /** @type {MarkProps} */
         this.defaultProperties = {
             get clip() {
                 // TODO: Cache once the scales have been resolved
@@ -141,13 +148,13 @@ export default class Mark {
          *
          * TODO: Proper and comprehensive typings for mark properties
          *
-         * @type {Partial<MarkConfig>}
+         * @type {Partial<MarkProps>}
          * @readonly
          */
         this.properties = coalesceProperties(
             typeof this.unitView.spec.mark == "object"
-                ? () => /** @type {MarkConfig} */ (this.unitView.spec.mark)
-                : () => /** @type {MarkConfig} */ ({}),
+                ? () => /** @type {MarkProps} */ (this.unitView.spec.mark)
+                : () => /** @type {MarkProps} */ ({}),
             () => this.defaultProperties
         );
     }
@@ -214,6 +221,49 @@ export default class Mark {
         return encoding;
     }
 
+    /**
+     * Handles dynamic properties that are not bound to uniforms but need
+     * to trigger a graphics update, i.e., rebuild the vertex buffer.
+     *
+     * @param {(keyof MarkProps)[]} props
+     * @protected
+     */
+    setupExprRefsNeedingGraphicsUpdate(props) {
+        const channels = this.getSupportedChannels();
+        /** @type {Partial<MarkProps>} */
+        const exprProps = {};
+        for (const key of props) {
+            const prop = this.properties[key];
+            if (prop && isExprRef(prop)) {
+                const fn = this.unitView.paramMediator.createExpression(
+                    prop.expr
+                );
+                fn.addListener(() => {
+                    this.updateGraphicsData();
+                    this.unitView.context.animator.requestRender();
+                });
+                // @ts-ignore
+                if (!channels.includes(key)) {
+                    Object.defineProperty(exprProps, key, {
+                        get() {
+                            return fn();
+                        },
+                    });
+                } else {
+                    // Encoder takes care of evaluating the expression
+                    // N.B.: There are now two expression instances for the
+                    // same expression, which is no ideal
+                }
+            }
+        }
+        const originalProperties = this.properties;
+        // @ts-ignore
+        this.properties = coalesceProperties(
+            () => exprProps,
+            () => originalProperties
+        );
+    }
+
     /**
      * Returns the encoding spec supplemented with mark's default encodings
      *
@@ -227,20 +277,22 @@ export default class Mark {
             /** @type {(property: string) => ValueDef} */
             const propToValueDef = (property) => {
                 const value =
-                    this.properties[/** @type {keyof MarkConfig} */ (property)];
-                return isScalar(value) && { value };
+                    this.properties[/** @type {keyof MarkProps} */ (property)];
+                return isScalar(value) || isExprRef(value)
+                    ? { value }
+                    : undefined;
             };
 
             const propertyValues = Object.fromEntries(
                 this.getSupportedChannels()
                     .map(
                         (channel) =>
-                            /** @type {[Channel, ValueDef]} */ ([
+                            /** @type {[Channel, ValueDef] } */ ([
                                 channel,
                                 propToValueDef(channel),
                             ])
                     )
-                    .filter((entry) => entry[1].value !== undefined)
+                    .filter((entry) => isValueDef(entry[1]))
             );
 
             const encoding = this.fixEncoding({
@@ -326,16 +378,13 @@ export default class Mark {
      * @param {string[]} [extraHeaders]
      * @protected
      */
+    // eslint-disable-next-line complexity
     createAndLinkShaders(vertexShader, fragmentShader, extraHeaders = []) {
         const attributes = this.getAttributes();
 
         // For debugging
         const debugHeader = "// view: " + this.unitView.getPathString();
 
-        // TODO: This is a temporary variable, don't store it in the mark object
-        /** @type {string[]} */
-        this.domainUniforms = [];
-
         /** @type {string[]} */
         let scaleCode = [];
 
@@ -353,6 +402,9 @@ export default class Mark {
             extraHeaders.push(`#define ${sampleFacetMode}`);
         }
 
+        /** @type {string[]} */
+        const dynamicMarkUniforms = [];
+
         for (const attribute of attributes) {
             /** @type {Channel} */
             let channel;
@@ -363,24 +415,40 @@ export default class Mark {
             }
 
             const channelDef = this.encoding[channel];
-
             if (!channelDef) {
                 continue;
             }
 
             if (isValueDef(channelDef)) {
-                scaleCode.push(generateValueGlsl(channel, channelDef.value));
+                if (isExprRef(channelDef.value)) {
+                    // An expression that evaluates to a value
+                    const { uniformName, uniformGlsl, scaleGlsl, adjuster } =
+                        generateDynamicValueGlslAndUniform(channel);
+                    scaleCode.push(scaleGlsl);
+                    dynamicMarkUniforms.push(uniformGlsl);
+
+                    this.#callAfterShaderCompilation.push(() => {
+                        this.registerMarkUniformValue(
+                            uniformName,
+                            channelDef.value,
+                            adjuster
+                        );
+                    });
+                } else {
+                    // A constant value
+                    scaleCode.push(
+                        generateConstantValueGlsl(channel, channelDef.value)
+                    );
+                }
             } else {
                 const resolutionChannel =
                     (isChannelDefWithScale(channelDef) &&
                         channelDef.resolutionChannel) ||
                     channel;
 
-                const scale = isChannelWithScale(resolutionChannel)
-                    ? this.unitView
-                          .getScaleResolution(resolutionChannel)
-                          .getScale()
-                    : scaleNull();
+                const scaleResolution = isChannelWithScale(resolutionChannel)
+                    ? this.unitView.getScaleResolution(resolutionChannel)
+                    : null;
 
                 // Channels that share the same quantitative field
                 // TODO: It should be ok to share a categorical field if the channels
@@ -391,7 +459,7 @@ export default class Mark {
 
                 const generated = generateScaleGlsl(
                     channel,
-                    scale,
+                    scaleResolution,
                     channelDef,
                     sharedChannels?.includes(channel)
                         ? sharedChannels
@@ -399,22 +467,103 @@ export default class Mark {
                 );
 
                 scaleCode.push(generated.glsl);
-                if (generated.domainUniform) {
-                    this.domainUniforms.push(generated.domainUniform);
+                dynamicMarkUniforms.push(generated.domainUniform);
+                dynamicMarkUniforms.push(generated.rangeUniform);
+                attributeCode.add(generated.attributeGlsl);
+
+                if (generated.rangeUniform) {
+                    this.#callAfterShaderCompilation.push(() => {
+                        const rangeSetter = this.createMarkUniformSetter(
+                            generated.rangeName
+                        );
+
+                        const set = () =>
+                            rangeSetter(
+                                getRangeForGlsl(scaleResolution.scale, channel)
+                            );
+                        scaleResolution.addEventListener("range", set);
+
+                        // Initial value
+                        set();
+                    });
                 }
-                if (generated.attributeGlsl) {
-                    attributeCode.add(generated.attributeGlsl);
+
+                if (generated.markUniformGlsl) {
+                    if (!isDatumDef(channelDef)) {
+                        throw new Error("Bug!");
+                    }
+
+                    const encoder = this.encoders[channel];
+
+                    const indexer = encoder.indexer;
+                    const hp = isHighPrecisionScale(encoder.scale.type);
+                    const largeHp = hp && isLargeGenome(encoder.scale.domain());
+
+                    /**
+                     * Discrete variables both numeric and strings must be "indexed",
+                     * 64 bit floats must be converted to vec2.
+                     * 32 bit continuous variables go to GPU as is.
+                     *
+                     * @type {function(import("../spec/channel.js").Scalar):(number | number[])}
+                     */
+                    const adjuster = indexer
+                        ? indexer
+                        : largeHp
+                        ? splitLargeHighPrecision
+                        : (d) => +d;
+
+                    dynamicMarkUniforms.push(generated.markUniformGlsl);
+
+                    this.#callAfterShaderCompilation.push(() => {
+                        this.registerMarkUniformValue(
+                            generated.attributeName,
+                            channelDef.datum,
+                            adjuster
+                        );
+                    });
+                }
+
+                if (generated.domainUniform) {
+                    this.#callAfterShaderCompilation.push(() => {
+                        const domainSetter = this.createMarkUniformSetter(
+                            generated.domainUniformName
+                        );
+                        const scale = scaleResolution.scale;
+                        const set = () => {
+                            const domain = isDiscrete(scale.type)
+                                ? [0, scale.domain().length]
+                                : scale.domain();
+
+                            domainSetter(
+                                isHighPrecisionScale(scale.type)
+                                    ? toHighPrecisionDomainUniform(domain)
+                                    : domain
+                            );
+                        };
+
+                        scaleResolution.addEventListener("domain", set);
+
+                        // Initial value
+                        set();
+                    });
                 }
             }
         }
 
-        const domainUniformBlock = this.domainUniforms.length
-            ? "layout(std140) uniform Domains {\n" +
-              this.domainUniforms.map((u) => `    ${u}\n`).join("") +
-              "};\n\n"
-            : "";
+        const vertexPrecision = "precision highp float;\nprecision highp int;";
 
-        const vertexPrecision = "precision highp float;\n";
+        /**
+         * @param {string} shaderCode
+         */
+        const addDynamicMarkUniforms = (shaderCode) =>
+            shaderCode.replace(
+                "#pragma markUniforms",
+                dynamicMarkUniforms.join("\n")
+            );
+
+        extraHeaders = extraHeaders.map(addDynamicMarkUniforms);
+        vertexShader = addDynamicMarkUniforms(vertexShader);
+        fragmentShader = addDynamicMarkUniforms(fragmentShader);
 
         const vertexParts = [
             vertexPrecision,
@@ -422,7 +571,6 @@ export default class Mark {
             ...extraHeaders,
             GLSL_COMMON,
             GLSL_SCALES,
-            domainUniformBlock,
             [...attributeCode].join("\n"),
             ...scaleCode,
             GLSL_SAMPLE_FACET,
@@ -431,6 +579,7 @@ export default class Mark {
         ];
 
         const fragmentParts = [
+            vertexPrecision,
             debugHeader,
             ...extraHeaders,
             GLSL_COMMON,
@@ -453,6 +602,9 @@ export default class Mark {
     /**
      * Check WebGL shader/program compilation/linking status and finalize
      * initialization.
+     *
+     * This is done as a separate step after all shader compilations have been
+     * initiated. The idea is to allow for parallel background compilation.
      */
     finalizeGraphicsInitialization() {
         const error = this.programStatus.getProgramErrors();
@@ -474,14 +626,6 @@ export default class Mark {
         );
         delete this.programStatus;
 
-        if (this.domainUniforms.length) {
-            this.domainUniformInfo = createUniformBlockInfo(
-                this.gl,
-                this.programInfo,
-                "Domains"
-            );
-        }
-
         this.viewUniformInfo = createUniformBlockInfo(
             this.gl,
             this.programInfo,
@@ -496,14 +640,39 @@ export default class Mark {
 
         this.gl.useProgram(this.programInfo.program);
 
-        this._setDatums();
-
         setUniforms(this.programInfo, {
             // left pos, left height, right pos, right height
             uSampleFacet: [0, 1, 0, 1],
             uTransitionOffset: 0.0,
             uZero: 0.0,
         });
+
+        for (const fn of this.#callAfterShaderCompilation) {
+            fn();
+        }
+        this.#callAfterShaderCompilation = undefined;
+    }
+
+    /**
+     * Sets a uniform in the Mark block. Requests a render from the animator.
+     *
+     * @protected
+     * @param {string} uniformName
+     * @returns {function(any):void}
+     */
+    createMarkUniformSetter(uniformName) {
+        const uniformSetter = this.markUniformInfo.setters[uniformName];
+        if (!uniformSetter) {
+            throw new Error(
+                `Uniform "${uniformName}" not found int the Mark block!`
+            );
+        }
+
+        return (value) => {
+            uniformSetter(value);
+            this.markUniformsAltered = true;
+            this.unitView.context.animator.requestRender();
+        };
     }
 
     /**
@@ -517,46 +686,32 @@ export default class Mark {
      * @param {T} propValue
      * @param {(x: Exclude<T, ExprRef>) => any} adjuster
      */
-    registerMarkUniform(uniformName, propValue, adjuster = (x) => x) {
-        const uniformSetter = this.markUniformInfo.setters[uniformName];
+    registerMarkUniformValue(uniformName, propValue, adjuster = (x) => x) {
+        const rawSetter = this.createMarkUniformSetter(uniformName);
+        const setter = (/** @type {any} */ value) => {
+            if (value == null) {
+                throw new Error(
+                    `Trying to set null/undefined value for uniform: ${uniformName}${
+                        isExprRef(propValue) ? `Expr: ${propValue.expr}` : ""
+                    }`
+                );
+            }
+            rawSetter(value);
+        };
 
         if (isExprRef(propValue)) {
-            const fn = this.unitView.context.paramBroker.createExpression(
+            const fn = this.unitView.paramMediator.createExpression(
                 propValue.expr
             );
 
-            const set = () => {
-                uniformSetter(adjuster(fn(null)));
-                this.markUniformsAltered = true;
-            };
+            const set = () => setter(adjuster(fn(null)));
 
             // Register a listener ...
             fn.addListener(set);
             // ... and set the initial value
             set();
         } else {
-            uniformSetter(
-                adjuster(/** @type {Exclude<T, ExprRef>} */ (propValue))
-            );
-            this.markUniformsAltered = true;
-        }
-    }
-
-    _setDatums() {
-        for (const [channel, channelDef] of Object.entries(this.encoding)) {
-            if (isDatumDef(channelDef)) {
-                const encoder = this.encoders[channel];
-
-                const datum = encoder.indexer
-                    ? encoder.indexer(channelDef.datum)
-                    : isHighPrecisionScale(encoder.scale.type)
-                    ? splitHighPrecision(+channelDef.datum)
-                    : +channelDef.datum;
-
-                setUniforms(this.programInfo, {
-                    [ATTRIBUTE_PREFIX + channel]: datum,
-                });
-            }
+            setter(adjuster(/** @type {Exclude<T, ExprRef>} */ (propValue)));
         }
     }
 
@@ -707,47 +862,6 @@ export default class Mark {
             gl.useProgram(this.programInfo.program);
         });
 
-        if (this.domainUniformInfo) {
-            // TODO: Only update the domains that have changed
-
-            for (const [uniform, setter] of Object.entries(
-                this.domainUniformInfo.setters
-            )) {
-                // TODO: isChannel()
-                const channel = /** @type {Channel} */ (
-                    uniform.substring(DOMAIN_PREFIX.length)
-                );
-
-                const channelDef = this.encoding[channel];
-                const resolutionChannel =
-                    (isChannelDefWithScale(channelDef) &&
-                        channelDef.resolutionChannel) ||
-                    channel;
-
-                if (isChannelWithScale(resolutionChannel)) {
-                    const scale = this.unitView
-                        .getScaleResolution(resolutionChannel)
-                        .getScale();
-
-                    ops.push(() => {
-                        const domain = isDiscrete(scale.type)
-                            ? [0, scale.domain().length]
-                            : scale.domain();
-
-                        setter(
-                            isHighPrecisionScale(scale.type)
-                                ? toHighPrecisionDomainUniform(domain)
-                                : domain
-                        );
-                    });
-                }
-            }
-
-            ops.push(() =>
-                setUniformBlock(gl, this.programInfo, this.domainUniformInfo)
-            );
-        }
-
         for (const [channel, channelDef] of Object.entries(this.encoding)) {
             if (isChannelDefWithScale(channelDef)) {
                 const resolutionChannel =
@@ -888,7 +1002,7 @@ export default class Mark {
         /** @type {function(import("../gl/dataToVertices.js").RangeEntry):void} rangeEntry */
         let drawWithRangeEntry;
 
-        const scale = this.unitView.getScaleResolution("x")?.getScale();
+        const scale = this.unitView.getScaleResolution("x")?.scale;
         const continuous = scale && isContinuous(scale.type);
         const domainStartOffset = ["index", "locus"].includes(scale?.type)
             ? -1
@@ -1115,12 +1229,3 @@ class RangeMap extends InternMap {
         }
     }
 }
-
-// TODO: Find a better place for this function
-/**
- * @param {any} x
- * @returns {x is import("../spec/mark.js").ExprRef}
- */
-export function isExprRef(x) {
-    return typeof x === "object" && "expr" in x && isString(x.expr);
-}

package/dist/src/marks/point.common.glsl.js

@@ -1,2 +1,2 @@
-const shader = "uniform Mark{/***The stroke should only grow inwards,e.g,the diameter/outline is not affected by the stroke width.*Thus,a point that has a zero size has no visible stroke. This allows strokes to be used with*geometric zoom,etc.*/uniform bool uInwardStroke;uniform lowp float uMaxRelativePointDiameter;uniform mediump float uScaleFactor;uniform mediump float uMaxPointSize;uniform mediump float uZoomLevel;uniform highp float uSemanticThreshold;uniform mediump float uGradientStrength;};";
+const shader = "layout(std140)uniform Mark{/***The stroke should only grow inwards,e.g,the diameter/outline is not affected by the stroke width.*Thus,a point that has a zero size has no visible stroke. This allows strokes to be used with*geometric zoom,etc.*/uniform bool uInwardStroke;uniform mediump float uScaleFactor;uniform mediump float uZoomLevel;uniform highp float uSemanticThreshold;uniform mediump float uGradientStrength;\n#pragma markUniforms\n};";
 export default shader;

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

@@ -1,11 +1,8 @@
 export default class PointMark extends Mark {
     sampledSemanticScores: Float32Array;
     _getGeometricScaleFactor(): number;
-    /**
-     * Returns the maximum size of the points in the data, before any scaling
-     */
-    _getMaxPointSize(): import("../spec/channel.js").Scalar;
     getSemanticThreshold(): number;
+    #private;
 }
 import Mark from "./mark.js";
 //# sourceMappingURL=point.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../src/marks/point.js"],"names":[],"mappings":"AAkBA;IAsGY,oCAMC;IA2CT,mCAQC;IAED;;OAEG;IACH,wDASC;IAED,+BAoBC;CAiDJ;iBA3PgB,WAAW"}
+{"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"}

package/dist/src/marks/point.js

@@ -10,6 +10,7 @@ import FRAGMENT_SHADER from "./point.fragment.glsl.js";
 import COMMON_SHADER from "./point.common.glsl.js";
 
 import Mark from "./mark.js";
+import { isExprRef } from "../view/paramMediator.js";
 import { sampleIterable } from "../data/transforms/sample.js";
 import { fixFill, fixStroke } from "./markUtils.js";
 
@@ -17,6 +18,8 @@ import { fixFill, fixStroke } from "./markUtils.js";
 const defaultEncoding = {};
 
 export default class PointMark extends Mark {
+    #semanticZoomFraction = () => 0;
+
     /**
      * @param {import("../view/unitView.js").default} unitView
      */
@@ -45,6 +48,24 @@ export default class PointMark extends Mark {
                 semanticZoomFraction: 0.02,
             })
         );
+
+        // TODO: This mess should be simplified
+        // TODO: createExpression should accept constant values or ExprRefs and allow
+        // easy registration of requestRender listeners
+        const szf = this.properties.semanticZoomFraction;
+        if (szf != null) {
+            if (isExprRef(szf)) {
+                const fn = this.unitView.paramMediator.createExpression(
+                    szf.expr
+                );
+                fn.addListener(() =>
+                    this.getContext().animator.requestRender()
+                );
+                this.#semanticZoomFraction = fn;
+            } else {
+                this.#semanticZoomFraction = () => szf;
+            }
+        }
     }
 
     getAttributes() {
@@ -143,11 +164,15 @@ export default class PointMark extends Mark {
 
         const props = this.properties;
 
-        setBlockUniforms(this.markUniformInfo, {
-            uInwardStroke: !!props.inwardStroke,
-            uGradientStrength: +props.fillGradientStrength,
-            uMaxRelativePointDiameter: 1 - 2 * props.sampleFacetPadding,
-        });
+        this.registerMarkUniformValue(
+            "uInwardStroke",
+            props.inwardStroke,
+            (x) => !!x
+        );
+        this.registerMarkUniformValue(
+            "uGradientStrength",
+            props.fillGradientStrength
+        );
     }
 
     updateGraphicsData() {
@@ -177,27 +202,11 @@ export default class PointMark extends Mark {
         );
     }
 
-    /**
-     * Returns the maximum size of the points in the data, before any scaling
-     */
-    _getMaxPointSize() {
-        const e = this.encoders.size;
-        if (e.constant) {
-            return e(null);
-        } else {
-            return /** @type {number[]} */ (e.scale.range()).reduce((a, b) =>
-                Math.max(a, b)
-            );
-        }
-    }
-
     getSemanticThreshold() {
         if (this.sampledSemanticScores) {
             const p = Math.max(
                 0,
-                1 -
-                    this.properties.semanticZoomFraction *
-                        this.unitView.getZoomLevel()
+                1 - this.#semanticZoomFraction() * this.unitView.getZoomLevel()
             );
             if (p <= 0) {
                 // The sampled scores may be missing the min/max values
@@ -222,7 +231,6 @@ export default class PointMark extends Mark {
         ops.push(() => {
             // TODO: Use bindUniformBlock if none of the uniform has changed
             setBlockUniforms(this.markUniformInfo, {
-                uMaxPointSize: this._getMaxPointSize(),
                 uScaleFactor: this._getGeometricScaleFactor(),
                 uSemanticThreshold: this.getSemanticThreshold(),
             });