@genome-spy/core 0.29.0 → 0.30.2

package/src/scale/colorUtils.js

@@ -1,184 +0,0 @@
-import { color as d3color } from "d3-color";
-import { range } from "d3-array";
-import { scheme as vegaScheme, interpolateColors } from "vega-scale";
-import { isString, isArray, isFunction } from "vega-util";
-import { peek } from "../utils/arrayUtils";
-import { createOrUpdateTexture } from "../gl/webGLHelper";
-
-/**
- * @param {string | import("../spec/scale").SchemeParams} schemeParams
- * @param {WebGL2RenderingContext} gl
- * @param {number} [count]
- * @param {WebGLTexture} [existingTexture]
- */
-export function createSchemeTexture(schemeParams, gl, count, existingTexture) {
-    const schemeName = isString(schemeParams)
-        ? schemeParams
-        : schemeParams.name;
-    const extent = (!isString(schemeParams) && schemeParams.extent) || [0, 1];
-
-    if (count === undefined && !isString(schemeParams)) {
-        count = schemeParams.count;
-    }
-
-    if (schemeName) {
-        const scheme = vegaScheme(schemeName);
-        if (isFunction(scheme)) {
-            // TODO: Reverse
-            const textureData = interpolatorToTextureData(scheme, {
-                extent,
-                count,
-            });
-            return createOrUpdateTexture(
-                gl,
-                {
-                    minMag: gl.LINEAR,
-                    format: gl.RGB,
-                    height: 1,
-                    wrap: gl.CLAMP_TO_EDGE,
-                },
-                textureData,
-                existingTexture
-            );
-        } else if (isArray(scheme)) {
-            return createDiscreteColorTexture(scheme, gl);
-        } else {
-            throw new Error("Unknown scheme: " + schemeName);
-        }
-    }
-}
-
-/**
- * @param {string[]} colors
- * @param {import("../spec/scale").ScaleInterpolate | import("../spec/scale").ScaleInterpolateParams} interpolateParams
- * @param {WebGL2RenderingContext} gl
- * @param {WebGLTexture} [existingTexture]
- */
-export function createInterpolatedColorTexture(
-    colors,
-    interpolateParams = "rgb",
-    gl,
-    existingTexture
-) {
-    const interpolator = interpolateColors(
-        colors,
-        isString(interpolateParams)
-            ? interpolateParams
-            : interpolateParams.type,
-        isString(interpolateParams) ? undefined : interpolateParams.gamma
-    );
-
-    // TODO: Reverse
-    const textureData = interpolatorToTextureData(interpolator);
-    return createOrUpdateTexture(
-        gl,
-        {
-            minMag: gl.LINEAR,
-            format: gl.RGB,
-            height: 1,
-            wrap: gl.CLAMP_TO_EDGE,
-        },
-        textureData,
-        existingTexture
-    );
-}
-
-/**
- * Creates a texture that maps integer indices to discrete 32bit floats.
- * The range may represent point shapes, for example.
- *
- * @param {number[]} range
- * @param {WebGL2RenderingContext} gl
- * @param {number} [count]
- * @param {WebGLTexture} [existingTexture]
- */
-export function createDiscreteTexture(range, gl, count, existingTexture) {
-    const size = Math.max(range.length, count || 0);
-    const textureData = new Float32Array(size);
-
-    for (let i = 0; i < size; i++) {
-        textureData[i] = range[i % range.length];
-    }
-
-    return createOrUpdateTexture(
-        gl,
-        {
-            minMag: gl.NEAREST,
-            format: gl.RED,
-            internalFormat: gl.R32F,
-            height: 1,
-        },
-        textureData,
-        existingTexture
-    );
-}
-
-/**
- * Creates a texture that maps integer indices to discrete RGB colors.
- *
- * @param {string[]} colors
- * @param {WebGL2RenderingContext} gl
- * @param {number} [count]
- * @param {WebGLTexture} [existingTexture]
- */
-export function createDiscreteColorTexture(colors, gl, count, existingTexture) {
-    const textureData = colorArrayToTextureData(colors, count);
-    return createOrUpdateTexture(
-        gl,
-        {
-            minMag: gl.NEAREST,
-            format: gl.RGB,
-            height: 1,
-        },
-        textureData,
-        existingTexture
-    );
-}
-
-/**
- * Renders an interpolator to a texture, which can be used for mapping
- * quantitative values to colors (sequential scale).
- *
- * @param {function(number):string} interpolator
- * @param {object} options
- * @param {number[]} [options.extent]
- * @param {boolean} [options.reverse]
- * @param {number} [options.count]
- */
-function interpolatorToTextureData(
-    interpolator,
-    { extent = [0, 1], reverse = false, count = 256 } = {}
-) {
-    const start = extent[0];
-    const span = peek(extent) - start;
-
-    const steps = range(count)
-        .map((x) => x / (count - 1))
-        .map((x) => start + x / span)
-        .map(interpolator);
-
-    if (reverse) {
-        steps.reverse();
-    }
-
-    return colorArrayToTextureData(steps);
-}
-
-/**
- * Renders a scheme (an array of colors) to a texture.
- *
- * @param {string[]} scheme
- * @param {number} [count]
- */
-function colorArrayToTextureData(scheme, count) {
-    const size = Math.max(scheme.length, count || 0);
-
-    const textureData = new Uint8Array(size * 3);
-    for (let i = 0; i < size; i++) {
-        const color = d3color(scheme[i % scheme.length]).rgb();
-        textureData[i * 3 + 0] = color.r;
-        textureData[i * 3 + 1] = color.g;
-        textureData[i * 3 + 2] = color.b;
-    }
-    return textureData;
-}

package/src/scale/glslScaleGenerator.js

@@ -1,488 +0,0 @@
-import {
-    isContinuous,
-    isDiscrete,
-    isDiscretizing,
-    isInterpolating,
-} from "vega-scale";
-import { isArray, isBoolean, isNumber, isString } from "vega-util";
-import { color as d3color } from "d3-color";
-
-import {
-    getDiscreteRangeMapper,
-    isColorChannel,
-    isDatumDef,
-    isDiscreteChannel,
-    getPrimaryChannel,
-    isValueDef,
-} from "../encoder/encoder";
-import { peek } from "../utils/arrayUtils";
-
-export const ATTRIBUTE_PREFIX = "attr_";
-export const DOMAIN_PREFIX = "uDomain_";
-export const RANGE_PREFIX = "range_";
-export const SCALE_FUNCTION_PREFIX = "scale_";
-export const SCALED_FUNCTION_PREFIX = "getScaled_";
-export const RANGE_TEXTURE_PREFIX = "uRangeTexture_";
-
-// https://stackoverflow.com/a/47543127
-const FLT_MAX = 3.402823466e38;
-
-/**
- * @typedef {import("../spec/channel").Channel} Channel
- */
-
-/**
- * Splits a vega-scale type (e.g., linear, sequential-linear) to components.
- *
- * @param {string} type
- */
-function splitScaleType(type) {
-    const match = type.match(/^(?:(\w+)-)?(\w+)$/);
-    if (!match) {
-        throw new Error("Not a scale type: " + type);
-    }
-    return {
-        family: match[1] || "continuous",
-        transform: match[2],
-    };
-}
-
-/**
- *
- * @param {Channel} channel
- * @param {number | number[] | string | boolean} value
- */
-export function generateValueGlsl(channel, value) {
-    /** @type {VectorizedValue} */
-    let vec;
-    if (isDiscreteChannel(channel)) {
-        vec = vectorize(getDiscreteRangeMapper(channel)(value));
-    } else if (isString(value)) {
-        if (isColorChannel(channel)) {
-            vec = vectorizeCssColor(value);
-        } else {
-            throw new Error(
-                `String values are not supported on the "${channel}" channel: ${value}`
-            );
-        }
-    } else if (isBoolean(value)) {
-        vec = vectorize(value ? 1 : 0);
-    } else if (value === null) {
-        if (isColorChannel(channel)) {
-            vec = vectorize([0, 0, 0]);
-        } else {
-            throw new Error(
-                `null value is not supported on the "${channel}" chanel.`
-            );
-        }
-    } else {
-        vec = vectorize(value);
-    }
-
-    // These could also be passed as uniforms because GPU drivers often handle
-    // uniforms as constants and recompile the shader to eliminate dead code etc.
-    let glsl = `
-#define ${channel}_DEFINED
-${vec.type} ${SCALED_FUNCTION_PREFIX}${channel}() {
-    // Constant value
-    return ${vec};
-}`;
-    return glsl;
-}
-
-/**
- *
- * @param {Channel} channel
- * @param {any} scale TODO: typing
- * @param {import("../spec/channel").ChannelDef} channelDef
- */
-// eslint-disable-next-line complexity
-export function generateScaleGlsl(channel, scale, channelDef) {
-    if (isValueDef(channelDef)) {
-        throw new Error(
-            `Cannot create scale for "value": ${JSON.stringify(channelDef)}`
-        );
-    }
-
-    const primary = getPrimaryChannel(channel);
-    const attributeName = ATTRIBUTE_PREFIX + channel;
-    const domainUniformName = DOMAIN_PREFIX + primary;
-    const rangeName = RANGE_PREFIX + primary;
-
-    const hp = isHighPrecisionScale(scale.type);
-    const attributeType = hp ? "vec2" : "float";
-
-    const domainLength = scale.domain ? scale.domain().length : undefined;
-
-    /** @type {string} */
-    let domainUniform;
-
-    /** @type {string[]} The generated shader (concatenated at the end) */
-    const glsl = [];
-
-    // For debugging
-    glsl.push("");
-    glsl.push("/".repeat(70));
-    glsl.push(`// Channel: ${channel}`);
-    glsl.push("");
-
-    glsl.push(`#define ${channel}_DEFINED`);
-
-    const { transform } = splitScaleType(scale.type);
-
-    /**
-     * @param {string} name
-     * @param {...any} args
-     */
-    const makeScaleCall = (name, ...args) =>
-        // eslint-disable-next-line no-useless-call
-        makeFunctionCall.apply(null, [name, "value", ...args]);
-
-    let functionCall;
-    switch (transform) {
-        case "linear":
-            functionCall = makeScaleCall("scaleLinear", "domain", rangeName);
-            break;
-
-        case "log":
-            functionCall = makeScaleCall(
-                "scaleLog",
-                "domain",
-                rangeName,
-                scale.base()
-            );
-            break;
-
-        case "symlog":
-            functionCall = makeScaleCall(
-                "scaleSymlog",
-                "domain",
-                rangeName,
-                scale.constant()
-            );
-            break;
-
-        case "pow":
-        case "sqrt":
-            functionCall = makeScaleCall(
-                "scalePow",
-                "domain",
-                rangeName,
-                scale.exponent()
-            );
-            break;
-
-        case "index":
-        case "locus":
-            functionCall = makeScaleCall(
-                "scaleBandHp",
-                "domain",
-                rangeName,
-                scale.paddingInner(),
-                scale.paddingOuter(),
-                scale.align(),
-                // @ts-expect-error TODO: fix typing
-                channelDef.band ?? 0.5
-            );
-            break;
-        case "point":
-        case "band":
-            functionCall = makeScaleCall(
-                "scaleBand",
-                "domain",
-                rangeName,
-                scale.paddingInner(),
-                scale.paddingOuter(),
-                scale.align(),
-                // @ts-expect-error TODO: fix typing
-                channelDef.band ?? 0.5
-            );
-            break;
-
-        case "ordinal": // Use identity transform and lookup the value from a texture
-        case "null":
-        case "identity":
-            functionCall = makeScaleCall("scaleIdentity");
-            break;
-
-        case "threshold":
-            // TODO: Quantile (it's a specialization of threshold scale)
-            // TODO: Quantize
-            break;
-
-        default:
-            // TODO: Implement log, sqrt, etc...
-            throw new Error(
-                `Unsupported scale type: ${
-                    scale.type
-                }! ${channel}: ${JSON.stringify(channelDef)}`
-            );
-    }
-
-    // N.B. Interpolating scales require unit range
-    // TODO: Reverse
-    const range =
-        isInterpolating(scale.type) ||
-        (isContinuous(scale.type) && isColorChannel(channel))
-            ? [0, 1]
-            : scale.range
-            ? scale.range()
-            : undefined;
-
-    if (range && channel == primary && range.length && range.every(isNumber)) {
-        const vectorizedRange = vectorizeRange(range);
-
-        // Range needs no runtime adjustment (at least for now). Thus, pass it as a constant that the
-        // GLSL compiler can optimize away in the case of unit ranges.
-        glsl.push(
-            `const ${vectorizedRange.type} ${rangeName} = ${vectorizedRange};`
-        );
-    }
-
-    const returnType = isColorChannel(channel) ? "vec3" : "float";
-
-    /**
-     * An optional interpolator function that maps the transformed value to the range.
-     * @type {string}
-     */
-    let interpolate;
-    if (isColorChannel(channel)) {
-        const textureUniformName = RANGE_TEXTURE_PREFIX + primary;
-        if (channel == primary) {
-            glsl.push(`uniform sampler2D ${textureUniformName};`);
-        }
-        if (isContinuous(scale.type)) {
-            interpolate = `getInterpolatedColor(${textureUniformName}, transformed)`;
-        } else if (isDiscrete(scale.type) || isDiscretizing(scale.type)) {
-            interpolate = `getDiscreteColor(${textureUniformName}, int(transformed))`;
-        } else {
-            throw new Error("Problem with color scale!");
-        }
-    } else if (scale.type === "ordinal" || isDiscretizing(scale.type)) {
-        const textureUniformName = RANGE_TEXTURE_PREFIX + primary;
-        if (channel == primary) {
-            glsl.push(`uniform sampler2D ${textureUniformName};`);
-        }
-        interpolate = `getDiscreteColor(${textureUniformName}, int(transformed)).r`;
-    }
-
-    if (isDatumDef(channelDef)) {
-        glsl.push(`uniform highp ${attributeType} ${attributeName};`);
-    } else {
-        glsl.push(`in highp ${attributeType} ${attributeName};`);
-    }
-
-    /** @type {string[]} Channel's scale function*/
-    const scaleBody = [];
-
-    const piecewise = isContinuous(scale.type) && domainLength > 2;
-    const needsSlot = isDiscretizing(scale.type) || piecewise;
-
-    // 1. If scale is piecewise or discretizing, find a matching slot
-    scaleBody.push(`int slot = 0;`);
-    if (needsSlot) {
-        const name = domainUniformName;
-        // Use a simple linear search.
-        // This cannot be put into a function because GLSL requires fixed array lengths for parameters.
-        scaleBody.push(
-            piecewise
-                ? `while (slot < ${name}.length() - 2 && value >= ${name}[slot + 1]) { slot++; }`
-                : `while (slot < ${name}.length() && value >= ${name}[slot]) { slot++; }`
-        );
-    }
-
-    const usesDomain =
-        isContinuous(scale.type) ||
-        isDiscretizing(scale.type) ||
-        ["band", "point"].includes(scale.type);
-
-    // 2. transform
-    if (functionCall) {
-        const name = domainUniformName;
-        if (usesDomain) {
-            if (hp) {
-                scaleBody.push(`vec3 domain = ${name};`);
-            } else {
-                scaleBody.push(
-                    `vec2 domain = vec2(${name}[slot], ${name}[slot + 1]);`
-                );
-            }
-        }
-
-        scaleBody.push(`float transformed = ${functionCall};`);
-
-        if (piecewise) {
-            // TODO: Handle range correctly. Now this assumes unit range.
-            scaleBody.push(
-                `transformed = (float(slot) + transformed) / (float(${name}.length()) - 1.0);`
-            );
-        }
-    } else {
-        // Discretizing scale
-        scaleBody.push(`float transformed = float(slot);`);
-    }
-
-    // 3. clamp
-    if ("clamp" in scale && scale.clamp()) {
-        scaleBody.push(
-            `transformed = clampToRange(transformed, ${vectorizeRange(range)});`
-        );
-    }
-
-    // 4. interpolate or map to a discrete value
-    scaleBody.push(`return ${interpolate ?? "transformed"};`);
-
-    glsl.push(`
-${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) {
-        // Band, point, index, and locus scale need the domain extent (the first and last elements).
-        const length =
-            isContinuous(scale.type) || isDiscretizing(scale.type)
-                ? domainLength
-                : 2;
-        domainUniform = hp
-            ? `highp vec3 ${domainUniformName};`
-            : `mediump float ${domainUniformName}[${length}];`;
-    }
-
-    return {
-        glsl: concatenated,
-        domainUniform,
-    };
-}
-
-/**
- * Adds a trailing decimal zero so that GLSL is happy.
- *
- * @param {number} number
- * @returns {string}
- */
-function toDecimal(number) {
-    if (!isNumber(number)) {
-        throw new Error(`Not a number: ${number}`);
-    }
-
-    if (number == Infinity) {
-        return "" + FLT_MAX;
-    } else if (number == -Infinity) {
-        return "" + -FLT_MAX;
-    } else {
-        let str = `${number}`;
-        if (/^(-)?\d+$/.test(str)) {
-            str += ".0";
-        }
-        return str;
-    }
-}
-
-/**
- * Turns a number or number array to float or vec[234] string.
- *
- * @param {number | number[]} value
- * @returns {VectorizedValue}
- *
- * @typedef {string & { type: string, numComponents: number }} VectorizedValue
- */
-function vectorize(value) {
-    if (typeof value == "number") {
-        value = [value];
-    }
-    const numComponents = value.length;
-    if (numComponents < 1 || numComponents > 4) {
-        throw new Error("Invalid number of components: " + numComponents);
-    }
-
-    let type;
-    let str;
-
-    if (numComponents > 1) {
-        type = `vec${numComponents}`;
-        str = `${type}(${value.map(toDecimal).join(", ")})`;
-    } else {
-        type = "float";
-        str = toDecimal(value[0]);
-    }
-
-    return Object.assign(str, { type, numComponents });
-}
-
-/**
- * @param {string} color
- */
-function vectorizeCssColor(color) {
-    const rgb = d3color(color).rgb();
-    return vectorize([rgb.r, rgb.g, rgb.b].map((x) => x / 255));
-}
-
-/**
- *
- * @param {number[]} range
- */
-function vectorizeRange(range) {
-    return vectorize([range[0], peek(range)]);
-}
-
-/**
- *
- * @param {string} name
- * @param  {...any} args
- */
-function makeFunctionCall(name, ...args) {
-    /** @type {string[]} */
-    const fixedArgs = [];
-
-    for (const arg of args) {
-        if (isNumber(arg)) {
-            fixedArgs.push(toDecimal(arg));
-        } else if (isArray(arg)) {
-            fixedArgs.push(vectorize(arg));
-        } else {
-            fixedArgs.push(arg);
-        }
-    }
-
-    return `${name}(${fixedArgs.join(", ")})`;
-}
-
-/**
- *
- * @param {string} type
- */
-export function isHighPrecisionScale(type) {
-    return type == "index" || type == "locus";
-}
-
-/**
- * @param {number} x
- * @param {number[]} [arr]
- */
-export function splitHighPrecision(x, arr) {
-    // Maximum precise index number is 2^(23 + 11) ~ 17G
-    // Higher number increases precision but makes zooming unstable
-    const bs = 2 ** 11;
-
-    const lo = x % bs;
-    const hi = Math.round(x - lo);
-    arr ??= [];
-    arr[0] = hi;
-    arr[1] = lo;
-    return arr;
-}
-
-/**
- * @param {number[]} domain
- */
-export function toHighPrecisionDomainUniform(domain) {
-    return [...splitHighPrecision(domain[0]), domain[1] - domain[0]];
-}