@genome-spy/core 0.48.2 → 0.50.0

package/dist/src/gl/glslScaleGenerator.js

@@ -10,23 +10,23 @@ import { color as d3color } from "d3-color";
 import {
     getDiscreteRangeMapper,
     isColorChannel,
-    isDatumDef,
     isDiscreteChannel,
     getPrimaryChannel,
-    isValueDef,
     isFieldDef,
 } from "../encoder/encoder.js";
 import { asArray, peek } from "../utils/arrayUtils.js";
 import { InternMap } from "internmap";
-import { isExprRef } from "../view/paramMediator.js";
+import { isExprRef, validateParameterName } from "../view/paramMediator.js";
 import scaleNull from "../utils/scaleNull.js";
 
 export const ATTRIBUTE_PREFIX = "attr_";
 export const DOMAIN_PREFIX = "uDomain_";
 export const RANGE_PREFIX = "range_";
+export const ACCESSOR_FUNCTION_PREFIX = "accessor_";
 export const SCALE_FUNCTION_PREFIX = "scale_";
 export const SCALED_FUNCTION_PREFIX = "getScaled_";
 export const RANGE_TEXTURE_PREFIX = "uRangeTexture_";
+export const PARAM_PREFIX = "uParam_";
 
 // https://stackoverflow.com/a/47543127
 const FLT_MAX = 3.402823466e38;
@@ -51,13 +51,37 @@ function splitScaleType(type) {
     };
 }
 
+/**
+ *
+ * @param {Channel} channel
+ * @param {number} conditionNumber
+ * @returns {string}
+ */
+export function makeAccessorFunctionName(channel, conditionNumber) {
+    return `${ACCESSOR_FUNCTION_PREFIX}${channel}_${conditionNumber}`;
+}
+
+/**
+ * @typedef {object} AccessorParts
+ * @prop {Channel} channel
+ * @prop {string} accessorGlsl
+ * @prop {string} accessorFunctionName
+ * @prop {string} [attributeName]
+ * @prop {string} [attributeGlsl]
+ * @prop {string} [uniformName]
+ * @prop {string} [uniformGlsl]
+ * @prop {(x: any) => any} [adjuster]
+ */
+
 /**
  * Generates GLSL code for a constant value.
  *
  * @param {Channel} channel
+ * @param {number} conditionNumber
  * @param {number | number[] | string | boolean} value
+ * @returns {AccessorParts}
  */
-export function generateConstantValueGlsl(channel, value) {
+export function generateConstantValueGlsl(channel, conditionNumber, value) {
     /** @type {VectorizedValue} */
     let vec;
     if (isDiscreteChannel(channel)) {
@@ -84,13 +108,21 @@ export function generateConstantValueGlsl(channel, value) {
         vec = vectorize(value);
     }
 
-    let glsl = `
-#define ${channel}_DEFINED
-${vec.type} ${SCALED_FUNCTION_PREFIX}${channel}() {
+    const accessorFunctionName = makeAccessorFunctionName(
+        channel,
+        conditionNumber
+    );
+    const accessorGlsl = `
+${vec.type} ${accessorFunctionName}() {
     // Constant value
     return ${vec};
 }`;
-    return glsl;
+
+    return {
+        channel,
+        accessorGlsl,
+        accessorFunctionName,
+    };
 }
 
 /**
@@ -98,8 +130,10 @@ ${vec.type} ${SCALED_FUNCTION_PREFIX}${channel}() {
  * used as dynamic mark properties that map to encoding channels.
  *
  * @param {Channel} channel
+ * @param {number} conditionNumber
+ * @returns {AccessorParts}
  */
-export function generateDynamicValueGlslAndUniform(channel) {
+export function generateDynamicValueGlslAndUniform(channel, conditionNumber) {
     let dataType = "float";
     /** @type {(x: any) => any} */
     let adjuster = (x) => x;
@@ -109,13 +143,16 @@ export function generateDynamicValueGlslAndUniform(channel) {
         adjuster = (x) => cssColorToArray(x);
     }
 
-    const uniformName = `u${capitalize(channel)}`;
+    const uniformName = `u${capitalize(channel)}_${conditionNumber}`;
 
     const uniformGlsl = `    // Dynamic value\n    uniform ${dataType} ${uniformName};`;
 
-    let scaleGlsl = `
-#define ${channel}_DEFINED
-${dataType} ${SCALED_FUNCTION_PREFIX}${channel}() {
+    const accessorFunctionName = makeAccessorFunctionName(
+        channel,
+        conditionNumber
+    );
+    let accessorGlsl = `
+${dataType} ${accessorFunctionName}() {
     // Dynamic value
     return ${uniformName};
 }`;
@@ -124,56 +161,95 @@ ${dataType} ${SCALED_FUNCTION_PREFIX}${channel}() {
         channel,
         uniformName,
         uniformGlsl,
-        scaleGlsl,
+        accessorGlsl,
+        accessorFunctionName,
         adjuster,
     };
 }
 
 /**
- *
  * @param {Channel} channel
- * @param {import("../view/scaleResolution.js").default} scaleResolution TODO: typing
- * @param {import("../spec/channel.js").ChannelDef} channelDef
+ * @param {any} scale
+ * @param {number} conditionNumber
  * @param {Channel[]} [sharedQuantitativeChannels] Channels that share the same quantitative field
+ * @returns {AccessorParts}
  */
-// eslint-disable-next-line complexity
-export function generateScaleGlsl(
+export function generateDataGlsl(
     channel,
-    scaleResolution,
-    channelDef,
+    scale,
+    conditionNumber,
     sharedQuantitativeChannels = [channel]
 ) {
-    if (isValueDef(channelDef)) {
-        throw new Error(
-            `Cannot create scale for "value": ${JSON.stringify(channelDef)}`
-        );
-    }
-
-    /**
-     * Typecast to any to make it easier to handle all the different scale variants
-     * @type {any}
-     */
-    const scale = scaleResolution ? scaleResolution.scale : scaleNull();
-
-    const primary = getPrimaryChannel(channel);
+    const { attributeType } = getAttributeAndArrayTypes(scale, channel);
     const attributeName =
         ATTRIBUTE_PREFIX + makeAttributeName(sharedQuantitativeChannels);
-    const domainUniformName = DOMAIN_PREFIX + primary;
-    const rangeName = RANGE_PREFIX + primary;
 
-    // The attribute has discrete values
-    const discrete = isDiscrete(scale.type);
+    const attributeGlsl = `in highp ${attributeType} ${attributeName};`;
 
-    const hp = isHighPrecisionScale(scale.type);
-    const largeHp = hp && isLargeGenome(scale.domain());
+    const accessorFunctionName = makeAccessorFunctionName(
+        channel,
+        conditionNumber
+    );
 
-    const attributeType = largeHp
-        ? "uvec2"
-        : hp
-        ? "uint"
-        : discrete || channel == "uniqueId"
-        ? "uint"
-        : "float";
+    const accessorGlsl = `
+${attributeType} ${accessorFunctionName}() {
+    return ${attributeName};
+}`;
+
+    return {
+        channel,
+        attributeName,
+        attributeGlsl,
+        accessorGlsl,
+        accessorFunctionName,
+    };
+}
+/**
+ * @param {Channel} channel
+ * @param {any} scale
+ * @param {number} conditionNumber
+ * @returns {AccessorParts}
+ */
+export function generateDatumGlslAndUniform(channel, scale, conditionNumber) {
+    const { attributeType } = getAttributeAndArrayTypes(scale, channel);
+
+    // TODO: Use uniform prefix
+    const uniformName = ATTRIBUTE_PREFIX + makeAttributeName(channel);
+    const uniformGlsl = `    uniform highp ${attributeType} ${uniformName};`;
+
+    const accessorFunctionName = makeAccessorFunctionName(
+        channel,
+        conditionNumber
+    );
+    const accessorGlsl = `
+${attributeType} ${accessorFunctionName}() {
+    return ${uniformName};
+}`;
+
+    return {
+        channel,
+        uniformName,
+        uniformGlsl,
+        accessorGlsl,
+        accessorFunctionName,
+    };
+}
+
+/**
+ *
+ * @param {Channel} channel
+ * @param {any} scale
+ * @param {import("../spec/channel.js").ChannelDef} channelDef
+ */
+// eslint-disable-next-line complexity
+export function generateScaleGlsl(channel, scale, channelDef) {
+    scale ??= scaleNull();
+
+    const primary = getPrimaryChannel(channel);
+    const domainUniformName = DOMAIN_PREFIX + primary;
+    const rangeUniformName = RANGE_PREFIX + primary;
+
+    const { hp, attributeType } = getAttributeAndArrayTypes(scale, channel);
 
     const domainLength = scale.domain ? scale.domain().length : undefined;
 
@@ -189,8 +265,6 @@ export function generateScaleGlsl(
     glsl.push(`// Channel: ${channel}`);
     glsl.push("");
 
-    glsl.push(`#define ${channel}_DEFINED`);
-
     const { transform } = splitScaleType(scale.type);
 
     /**
@@ -204,14 +278,18 @@ export function generateScaleGlsl(
     let functionCall;
     switch (transform) {
         case "linear":
-            functionCall = makeScaleCall("scaleLinear", "domain", rangeName);
+            functionCall = makeScaleCall(
+                "scaleLinear",
+                "domain",
+                rangeUniformName
+            );
             break;
 
         case "log":
             functionCall = makeScaleCall(
                 "scaleLog",
                 "domain",
-                rangeName,
+                rangeUniformName,
                 scale.base()
             );
             break;
@@ -220,7 +298,7 @@ export function generateScaleGlsl(
             functionCall = makeScaleCall(
                 "scaleSymlog",
                 "domain",
-                rangeName,
+                rangeUniformName,
                 scale.constant()
             );
             break;
@@ -230,7 +308,7 @@ export function generateScaleGlsl(
             functionCall = makeScaleCall(
                 "scalePow",
                 "domain",
-                rangeName,
+                rangeUniformName,
                 scale.exponent()
             );
             break;
@@ -240,7 +318,7 @@ export function generateScaleGlsl(
             functionCall = makeScaleCall(
                 "scaleBandHp",
                 "domain",
-                rangeName,
+                rangeUniformName,
                 scale.paddingInner(),
                 scale.paddingOuter(),
                 scale.align(),
@@ -253,7 +331,7 @@ export function generateScaleGlsl(
             functionCall = makeScaleCall(
                 "scaleBand",
                 "domain",
-                rangeName,
+                rangeUniformName,
                 scale.paddingInner(),
                 scale.paddingOuter(),
                 scale.align(),
@@ -303,17 +381,17 @@ export function generateScaleGlsl(
             }
             rangeUniform = `    uniform ${getFloatVectorType(
                 range.length
-            )} ${rangeName};`;
+            )} ${rangeUniformName};`;
         } else if (range.length && range.every(isNumber)) {
             const vectorizedRange = vectorizeRange(range);
 
             glsl.push(
-                `const ${vectorizedRange.type} ${rangeName} = ${vectorizedRange};`
+                `const ${vectorizedRange.type} ${rangeUniformName} = ${vectorizedRange};`
             );
         }
     }
 
-    const returnType = isColorChannel(channel) ? "vec3" : "float";
+    const returnType = getScaledDataTypeForChannel(channel);
 
     /**
      * An optional interpolator function that maps the transformed value to the range.
@@ -340,10 +418,6 @@ export function generateScaleGlsl(
         interpolate = `getDiscreteColor(${textureUniformName}, int(transformed)).r`;
     }
 
-    const [attributeGlsl, markUniformGlsl] = isDatumDef(channelDef)
-        ? [undefined, `    uniform highp ${attributeType} ${attributeName};`]
-        : [`in highp ${attributeType} ${attributeName};`, undefined];
-
     /** @type {string[]} Channel's scale function*/
     const scaleBody = [];
 
@@ -409,12 +483,6 @@ ${returnType} ${SCALE_FUNCTION_PREFIX}${channel}(${attributeType} value) {
 ${scaleBody.map((x) => `    ${x}\n`).join("")}
 }`);
 
-    // A convenience getter for the scaled value
-    glsl.push(`
-${returnType} ${SCALED_FUNCTION_PREFIX}${channel}() {
-    return ${SCALE_FUNCTION_PREFIX}${channel}(${attributeName});
-}`);
-
     const concatenated = glsl.join("\n");
 
     if (usesDomain && channel == primary) {
@@ -429,18 +497,58 @@ ${returnType} ${SCALED_FUNCTION_PREFIX}${channel}() {
     }
 
     return {
-        attributeName,
-        attributeGlsl,
-        // Ends up in the Mark uniform block
-        markUniformGlsl,
         glsl: concatenated,
         domainUniformName,
         domainUniform,
-        rangeName,
+        rangeUniformName,
         rangeUniform,
     };
 }
 
+/**
+ *
+ * @param {Channel} channel
+ * @param {import("../types/encoder.js").Accessor[]} accessors
+ */
+export function generateConditionalEncoderGlsl(channel, accessors) {
+    const type = getScaledDataTypeForChannel(channel);
+
+    /** @type {string[]}  */
+    const conditions = [];
+    /** @type {string[]}  */
+    const statements = [];
+
+    for (let i = 0; i < accessors.length; i++) {
+        const accessor = accessors[i];
+        const accessorFunctionName = makeAccessorFunctionName(channel, i);
+        const { param, empty } = accessor.predicate;
+
+        const paramUniform = PARAM_PREFIX + validateParameterName(param);
+        const idAttribute = ATTRIBUTE_PREFIX + "uniqueId";
+
+        // Hardcoded condition for single point selection ... for now.
+        conditions.push(
+            param
+                ? `${idAttribute} == ${paramUniform}${
+                      empty ? ` || ${paramUniform} == uint(0)` : ""
+                  }`
+                : null
+        );
+
+        statements.push(
+            accessor.scaleChannel
+                ? `return ${SCALE_FUNCTION_PREFIX}${channel}(${accessorFunctionName}());`
+                : `return ${accessorFunctionName}();`
+        );
+    }
+
+    return `${type} ${SCALED_FUNCTION_PREFIX}${channel}() {
+${ifElseGlsl(conditions, statements)}
+}
+
+#define ${channel}_DEFINED`;
+}
+
 /**
  * Adds a trailing decimal zero so that GLSL is happy.
  *
@@ -506,6 +614,17 @@ function getFloatVectorType(numComponents) {
     }
 }
 
+/**
+ * @param {Channel} channel
+ */
+export function getScaledDataTypeForChannel(channel) {
+    return isColorChannel(channel)
+        ? "vec3"
+        : channel == "uniqueId"
+        ? "uint"
+        : "float";
+}
+
 /**
  * @param {string} color
  */
@@ -551,6 +670,37 @@ function makeFunctionCall(name, ...args) {
     return `${name}(${fixedArgs.join(", ")})`;
 }
 
+/**
+ *
+ * @param {import("../types/encoder.js").VegaScale} scale
+ * @param {import("../spec/channel.js").Channel} channel
+ */
+export function getAttributeAndArrayTypes(scale, channel) {
+    const discrete = scale && isDiscrete(scale.type);
+    const hp = scale && isHighPrecisionScale(scale.type);
+    const largeHp = hp && isLargeGenome(scale.domain());
+
+    /**
+     * @type {{attributeType: string, arrayConstructor: Uint32ArrayConstructor | Uint16ArrayConstructor | Float32ArrayConstructor}}
+     */
+    const props = largeHp
+        ? { attributeType: "uvec2", arrayConstructor: Uint32Array }
+        : hp
+        ? { attributeType: "uint", arrayConstructor: Uint32Array }
+        : discrete
+        ? { attributeType: "uint", arrayConstructor: Uint16Array }
+        : channel == "uniqueId"
+        ? { attributeType: "uint", arrayConstructor: Uint32Array }
+        : { attributeType: "float", arrayConstructor: Float32Array };
+
+    return Object.assign(props, {
+        numComponents: +(props.attributeType.match(/^vec([234])$/)?.[1] ?? 1),
+        discrete,
+        hp,
+        largeHp,
+    });
+}
+
 /**
  * True if scale needs more than 24 bits (float32) of precision.
  *
@@ -686,3 +836,40 @@ export const getRangeForGlsl = (scale, channel) =>
         : scale.range
         ? scale.range()
         : undefined;
+
+/**
+ * @param {string[]} conditions
+ * @param {string[]} statements
+ * @returns {string}
+ */
+export function ifElseGlsl(conditions, statements) {
+    if (conditions.length != statements.length) {
+        throw new Error("Unequal array lengths");
+    }
+
+    const n = conditions.length;
+
+    if (n == 0) {
+        return "";
+    } else if (n == 1 && conditions[0] == null) {
+        return statements[0];
+    }
+
+    const parts = [];
+    for (let i = 0; i < n; i++) {
+        const condition = conditions[i];
+        const ifelse =
+            i == 0
+                ? `if (${condition})`
+                : condition == null && i == n - 1
+                ? `else`
+                : `else if (${condition})`;
+        parts.push(
+            `    ${ifelse} {
+        ${statements[i]}
+    }`
+        );
+    }
+
+    return parts.join("\n");
+}

package/dist/src/gl/includes/common.glsl.js

@@ -1,2 +1,2 @@
-const shader = "#define PI 3.141593\nuniform View{mediump vec2 uViewOffset;mediump vec2 uViewScale;mediump vec2 uViewportSize;lowp float uDevicePixelRatio;lowp float uViewOpacity;bool uPickingEnabled;};/***Maps a coordinate on the unit scale to a normalized device coordinate.*(0,0)is at the bottom left corner.*/vec4 unitToNdc(vec2 coord){return vec4((coord*uViewScale+uViewOffset)*2.0-1.0,0.0,1.0);}vec4 unitToNdc(float x,float y){return unitToNdc(vec2(x,y));}vec4 pixelsToNdc(vec2 coord){return unitToNdc(coord/uViewportSize);}vec4 pixelsToNdc(float x,float y){return pixelsToNdc(vec2(x,y));}float linearstep(float edge0,float edge1,float x){return clamp((x-edge0)/(edge1-edge0),0.0,1.0);}/***Specialized linearstep for doing antialiasing*/float distanceToRatio(float d){return clamp(d*uDevicePixelRatio+0.5,0.0,1.0);}vec4 distanceToColor(float d,vec4 fill,vec4 stroke,float halfStrokeWidth){if(halfStrokeWidth>0.0){float sd=abs(d)-halfStrokeWidth;return mix(stroke,d<=0.0 ? fill : vec4(0.0),distanceToRatio(sd));}else{return fill*distanceToRatio(-d);}}";
+const shader = "#define PI 3.141593\nuniform View{mediump vec2 uViewOffset;mediump vec2 uViewScale;mediump vec2 uViewportSize;lowp float uDevicePixelRatio;lowp float uViewOpacity;bool uPickingEnabled;};/***Maps a coordinate on the unit scale to a normalized device coordinate.*(0,0)is at the bottom left corner.*/vec4 unitToNdc(vec2 coord){return vec4((coord*uViewScale+uViewOffset)*2.0-1.0,0.0,1.0);}vec4 unitToNdc(float x,float y){return unitToNdc(vec2(x,y));}vec4 pixelsToNdc(vec2 coord){return unitToNdc(coord/uViewportSize);}vec4 pixelsToNdc(float x,float y){return pixelsToNdc(vec2(x,y));}float linearstep(float edge0,float edge1,float x){return clamp((x-edge0)/(edge1-edge0),0.0,1.0);}/***Calculates a gamma for antialiasing opacity based on the color.*/float getGammaForColor(vec3 rgb){return mix(1.25,0.75,smoothstep(0.0,1.0,dot(rgb,vec3(0.299,0.587,0.114))));}/***Specialized linearstep for doing antialiasing*/float distanceToRatio(float d){return clamp(d*uDevicePixelRatio+0.5,0.0,1.0);}vec4 distanceToColor(float d,vec4 fill,vec4 stroke,float halfStrokeWidth){if(halfStrokeWidth>0.0){float sd=abs(d)-halfStrokeWidth;return mix(stroke,d<=0.0 ? fill : vec4(0.0),distanceToRatio(sd));}else{return fill*distanceToRatio(-d);}}";
 export default shader;

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

@@ -1,2 +1,2 @@
-const shader = "layout(std140)uniform Mark{uniform float uArcHeightFactor;uniform float uMinArcHeight;uniform float uMinPickingSize;uniform int uShape;uniform int uOrient;uniform bool uClampApex;uniform float uMaxChordLength;uniform vec2 uArcFadingDistance;uniform int uSegmentBreaks;\n#pragma markUniforms\n};";
+const shader = "layout(std140)uniform Mark{uniform float uArcHeightFactor;uniform float uMinArcHeight;uniform float uMinPickingSize;uniform int uShape;uniform int uOrient;uniform bool uClampApex;uniform float uMaxChordLength;uniform vec2 uArcFadingDistance;uniform bool uNoFadingOnPointSelection;uniform int uSegmentBreaks;\n#pragma markUniforms\n};";
 export default shader;

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

@@ -1,4 +1,11 @@
-export default class LinkMark extends Mark {
+/**
+ * @extends {Mark<import("../spec/mark.js").LinkProps>}
+ */
+export default class LinkMark extends Mark<import("../spec/mark.js").LinkProps> {
+    /**
+     * @param {import("../view/unitView.js").default} unitView
+     */
+    constructor(unitView: import("../view/unitView.js").default);
     /**
      * Only available if "WebGL Draft Extensions" is enabled in chrome://flags
      * But seems to work.

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

@@ -1 +1 @@
-{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/marks/link.js"],"names":[],"mappings":"AAYA;IA+BQ;;;;;OAKG;IACH,yBAEC;IA2GD;;;;;;MAKC;CAwFR;iBArPgB,WAAW"}
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/marks/link.js"],"names":[],"mappings":"AAYA;;GAEG;AACH;IACI;;OAEG;IACH,sBAFW,OAAO,qBAAqB,EAAE,OAAO,EAoC/C;IATG;;;;;OAKG;IACH,yBAEC;IAsHD;;;;;;MAKC;CA4FR;iBArQgB,WAAW"}

package/dist/src/marks/link.fragment.glsl.js

@@ -1,2 +1,2 @@
-const shader = "in vec4 vColor;in float vSize;in float vNormalLengthInPixels;out lowp vec4 fragColor;void main(void){float dpr=uDevicePixelRatio;float distance=abs(vNormalLengthInPixels);float opacity=clamp(((vSize/2.0-distance)*dpr),0.0,1.0);fragColor=vColor*opacity;if(uPickingEnabled){fragColor=vPickingColor;}}";
+const shader = "in vec4 vColor;in float vSize;in float vNormalLengthInPixels;in float vGamma;out lowp vec4 fragColor;void main(void){float dpr=uDevicePixelRatio;float distance=abs(vNormalLengthInPixels);float opacity=clamp(((vSize/2.0-distance)*dpr),0.0,1.0);opacity=pow(opacity,vGamma);fragColor=vColor*opacity;if(uPickingEnabled){fragColor=vPickingColor;}}";
 export default shader;