@genome-spy/core 0.14.0 → 0.16.0

package/src/genome/scaleIndex.js

@@ -6,6 +6,8 @@ const minimumDomainSpan = 1;
 /**
  * Creates a "index" scale, which works similarly to d3's band scale but the domain
  * consists of integer indexes.
+ *
+ * @returns {import("./scaleIndex").ScaleIndex}
  */
 export default function scaleIndex() {
     let domain = [0, 1];
@@ -21,29 +23,20 @@ export default function scaleIndex() {
     /** The number of the first element. This affects the generated ticks and their labels. */
     let numberingOffset = 0;
 
-    /**
-     *
-     * @param {number} x
-     */
-    function scale(x) {
-        // In principle, the domain consists of integer indices. However,
-        // we accept real numbers so that items can be centered inside a band.
-        // TODO: paddingInner/paddingOuter/align. Now they are implemented in GLSL.
-        return ((x - domain[0]) / domainSpan) * rangeSpan + range[0];
-    }
+    const scaleFunction = (/** @type {number} */ x) =>
+        ((x - domain[0]) / domainSpan) * rangeSpan + range[0];
 
     /**
+     * In principle, the domain consists of integer indices. However,
+     * we accept real numbers so that items can be centered inside a band.
      *
-     * @param {number} y
+     * @type {import("./scaleIndex").ScaleIndex}
      */
-    scale.invert = function (y) {
-        return ((y - range[0]) / rangeSpan) * domainSpan + domain[0];
-    };
+    const scale = /** @type {any} */ (scaleFunction);
 
-    /**
-     *
-     * @param {Iterable<number>} [_]
-     */
+    scale.invert = (y) => ((y - range[0]) / rangeSpan) * domainSpan + domain[0];
+
+    // @ts-expect-error
     scale.domain = function (_) {
         if (arguments.length) {
             domain = extent(_);
@@ -62,10 +55,7 @@ export default function scaleIndex() {
         }
     };
 
-    /**
-     *
-     * @param {Iterable<number>} [_]
-     */
+    // @ts-expect-error
     scale.range = function (_) {
         if (arguments.length) {
             range = [..._];
@@ -76,10 +66,7 @@ export default function scaleIndex() {
         }
     };
 
-    /**
-     *
-     * @param {number} [_]
-     */
+    // @ts-expect-error
     scale.numberingOffset = function (_) {
         if (arguments.length) {
             numberingOffset = _;
@@ -89,10 +76,7 @@ export default function scaleIndex() {
         }
     };
 
-    /**
-     *
-     * @param {number} _
-     */
+    // @ts-expect-error
     scale.padding = function (_) {
         if (arguments.length) {
             paddingOuter = _;
@@ -103,10 +87,7 @@ export default function scaleIndex() {
         }
     };
 
-    /**
-     *
-     * @param {number} _
-     */
+    // @ts-expect-error
     scale.paddingInner = function (_) {
         if (arguments.length) {
             paddingInner = Math.min(1, _);
@@ -116,10 +97,7 @@ export default function scaleIndex() {
         }
     };
 
-    /**
-     *
-     * @param {number} _
-     */
+    // @ts-expect-error
     scale.paddingOuter = function (_) {
         if (arguments.length) {
             paddingOuter = _;
@@ -129,10 +107,7 @@ export default function scaleIndex() {
         }
     };
 
-    /**
-     *
-     * @param {number} _
-     */
+    // @ts-expect-error
     scale.align = function (_) {
         if (arguments.length) {
             align = Math.max(0, Math.min(1, _));
@@ -146,10 +121,6 @@ export default function scaleIndex() {
 
     scale.bandwidth = () => scale.step();
 
-    /**
-     * @param {number} count
-     * @returns {number[]}
-     */
     scale.ticks = (count) => {
         const align = /** @type {number} */ (scale.align());
         const offset = /** @type {number} */ (scale.numberingOffset());
@@ -162,12 +133,7 @@ export default function scaleIndex() {
             .map((x) => x - numberingOffset);
     };
 
-    /**
-     *
-     * @param {number} [count]
-     * @param {string} [specifier]
-     */
-    scale.tickFormat = function (count, specifier) {
+    scale.tickFormat = (count, specifier) => {
         if (specifier) {
             throw new Error(
                 "Index scale's tickFormat does not support a specifier!"

package/src/genome/scaleLocus.d.ts

@@ -0,0 +1,11 @@
+import Genome from "./genome";
+import { ScaleIndex } from "./scaleIndex";
+
+export default function scaleLocus(): ScaleLocus;
+
+export interface ScaleLocus extends ScaleIndex {
+    genome(): Genome;
+    genome(genome: Genome): this;
+}
+
+export function isScaleLocus(scale: any): scale is ScaleLocus;

package/src/genome/scaleLocus.js

@@ -1,24 +1,22 @@
 import { tickStep } from "d3-array";
 import { format as d3format } from "d3-format";
-import scaleIndex from "./scaleIndex";
+import scaleIndex from "./scaleIndex.js";
 
 /**
  * Creates a "locus" scale, which works similarly to band scale but the domain
  * consists of integer indexes.
  *
  * @typedef {import("./genome").default} Genome
+ * @returns {import("./scaleLocus").ScaleLocus}
  */
 export default function scaleLocus() {
-    const scale = scaleIndex().numberingOffset(1);
+    /** @type {import("./scaleLocus").ScaleLocus} */
+    const scale = /** @type {any} */ (scaleIndex().numberingOffset(1));
 
     /** @type {Genome} */
     let genome;
 
-    /**
-     *
-     * @param {Genome} [_]
-     * @deprecated
-     */
+    // @ts-expect-error
     scale.genome = function (_) {
         if (arguments.length) {
             genome = _;
@@ -28,10 +26,6 @@ export default function scaleLocus() {
         }
     };
 
-    /**
-     * @param {number} count
-     * @returns {number[]}
-     */
     scale.ticks = (count) => {
         if (!genome) {
             return [];
@@ -68,11 +62,6 @@ export default function scaleLocus() {
         return ticks;
     };
 
-    /**
-     *
-     * @param {number} [count]
-     * @param {string} [specifier]
-     */
     scale.tickFormat = (count, specifier) => {
         if (!genome) {
             return;
@@ -110,3 +99,10 @@ export default function scaleLocus() {
 
     return scale;
 }
+
+/**
+ * @type {import("./scaleLocus").isScaleLocus}
+ */
+export function isScaleLocus(scale) {
+    return scale.type == "locus";
+}

package/src/genomeSpy.js

@@ -54,15 +54,12 @@ vegaScale("null", scaleNull, []);
 
 vegaFormats("fasta", fasta);
 
-/**
- * The actual browser without any toolbars etc
- */
 export default class GenomeSpy {
     /**
      *
      * @param {HTMLElement} container
      * @param {RootSpec} spec
-     * @param {import("./options").EmbedOptions} [options]
+     * @param {import("./embedApi").EmbedOptions} [options]
      */
     constructor(container, spec, options = {}) {
         this.container = container;
@@ -133,7 +130,7 @@ export default class GenomeSpy {
 
     /**
      *
-     * @param {function(string):any[]} provider
+     * @param {(name: string) => any[]} provider
      */
     registerNamedDataProvider(provider) {
         this.namedDataProviders.unshift(provider);

package/src/gl/dataToVertices.js

@@ -6,6 +6,7 @@ import ArrayBuilder from "./arrayBuilder";
 import { SDF_PADDING } from "../fonts/bmFontMetrics";
 import { peek } from "../utils/arrayUtils";
 import createBinningRangeIndexer from "../utils/binnedRangeIndex";
+import { isValueDef } from "../encoder/encoder";
 
 /**
  * @typedef {object} RangeEntry Represents a location of a vertex subset
@@ -56,6 +57,8 @@ export class GeometryBuilder {
             const doubleArray = [0, 0];
             const fp64 = ce.scale.fp64;
 
+            const indexer = ce.indexer;
+
             /**
              * Discrete variables both numeric and strings must be "indexed",
              * 64 bit floats must be converted to vec2.
@@ -63,8 +66,8 @@ export class GeometryBuilder {
              *
              * @type {function(any):(number | number[])}
              */
-            const f = ce.indexer
-                ? ce.indexer
+            const f = indexer
+                ? (d) => indexer(accessor(d))
                 : fp64
                 ? (d) => fp64ify(accessor(d), doubleArray)
                 : accessor;
@@ -462,10 +465,15 @@ export class TextVertexBuilder extends GeometryBuilder {
 
         const e = encoders;
 
-        /** @type {function(any):any} */
-        this.numberFormat = e.text.channelDef.format
-            ? format(e.text.channelDef.format)
-            : (d) => d;
+        const channelDef =
+            /** @type {import("../spec/channel").TextDef<string>} */ (
+                e.text.channelDef
+            );
+        /** @type {(value: any) => string} */
+        this.numberFormat =
+            !isValueDef(channelDef) && channelDef.format
+                ? format(channelDef.format)
+                : (d) => d;
 
         this.updateVertexCoord = this.variableBuilder.createUpdater(
             "vertexCoord",

package/src/gl/includes/fp64-utils.js

@@ -45,6 +45,9 @@ export function fp64LowPart(a) {
     return a - Math.fround(a);
 }
 
+/**
+ * @param {WebGLRenderingContext | WebGL2RenderingContext} gl
+ */
 export function getPlatformShaderDefines(gl) {
     const debugInfo = getContextInfo(gl);
 
@@ -94,6 +97,9 @@ const GL_RENDERER = 0x1f01;
 const GL_VERSION = 0x1f02;
 const GL_SHADING_LANGUAGE_VERSION = 0x8b8c;
 
+/**
+ * @param {WebGLRenderingContext | WebGL2RenderingContext} gl
+ */
 export function getContextInfo(gl) {
     const info = gl.getExtension("WEBGL_debug_renderer_info");
     const vendor = gl.getParameter(
@@ -113,6 +119,10 @@ export function getContextInfo(gl) {
     return gpuInfo;
 }
 
+/**
+ * @param {string} vendor
+ * @param {string} renderer
+ */
 function identifyGPUVendor(vendor, renderer) {
     if (vendor.match(/NVIDIA/i) || renderer.match(/NVIDIA/i)) {
         return "NVIDIA";

package/src/gl/includes/scales.glsl

@@ -70,6 +70,8 @@ float scaleBand(float value, vec2 domainExtent, vec2 range,
 
     float n = domainExtent[1] - domainExtent[0];
 
+    paddingInner = int(n) > 1 ? paddingInner : 0.0;
+
     // Adapted from: https://github.com/d3/d3-scale/blob/master/src/band.js
     float step = (stop - start) / max(1.0, n - paddingInner + paddingOuter * 2.0);
     start += (stop - start - step * (n - paddingInner)) * align;

package/src/gl/webGLHelper.js

@@ -395,6 +395,8 @@ export default class WebGLHelper {
  * Copy-pasted from twgl.js:
  * https://github.com/greggman/twgl.js/blob/master/src/programs.js
  * Copyright 2019 Gregg Tavares, MIT license
+ *
+ * @param {string} src
  */
 function addLineNumbersWithError(src, log = "", lineOffset = 0) {
     const errorRE = /ERROR:\s*\d+:(\d+)/gi;
@@ -426,7 +428,7 @@ function addLineNumbersWithError(src, log = "", lineOffset = 0) {
  * @param {WebGLShader} fragmentShader
  */
 export function createProgram(gl, vertexShader, fragmentShader) {
-    var program = gl.createProgram();
+    const program = gl.createProgram();
     gl.attachShader(program, vertexShader);
     gl.attachShader(program, fragmentShader);
     gl.linkProgram(program);

package/src/index.js

@@ -10,9 +10,7 @@ export { GenomeSpy, html, icon };
 /**
  * Embeds GenomeSpy into the DOM
  *
- * @param {HTMLElement | string} el HTMLElement or a query selector
- * @param {object | string} spec a spec object or an url to a json spec
- * @param {import("./options.js").EmbedOptions} [options] options
+ * @type {import("./embedApi.js").EmbedFunction}
  */
 export async function embed(el, spec, options = {}) {
     /** @type {HTMLElement} */
@@ -33,19 +31,11 @@ export async function embed(el, spec, options = {}) {
     let genomeSpy;
 
     try {
-        const specObject = /** @type {import("./spec/root").RootSpec} */ (
-            isObject(spec) ? spec : await loadSpec(spec)
-        );
-
-        specObject.baseUrl = specObject.baseUrl || "";
+        const specObject = isObject(spec) ? spec : await loadSpec(spec);
 
-        if (!("width" in specObject)) {
-            specObject.width = "container";
-        }
-
-        if (!("padding" in specObject)) {
-            specObject.padding = 10;
-        }
+        specObject.baseUrl ??= "";
+        specObject.width ??= "container";
+        specObject.padding ??= 10;
 
         if (element == document.body) {
             // Need to add a wrapper to make sizing behavior more stable
@@ -74,10 +64,6 @@ export async function embed(el, spec, options = {}) {
             }
         },
 
-        /**
-         * @param {string} type
-         * @param {(event: any) => void} listener
-         */
         addEventListener(type, listener) {
             const listenersByType = genomeSpy._eventListeners;
 
@@ -90,20 +76,12 @@ export async function embed(el, spec, options = {}) {
             listeners.add(listener);
         },
 
-        /**
-         * @param {string} type
-         * @param {(event: any) => void} listener
-         */
         removeEventListener(type, listener) {
             const listenersByType = genomeSpy._eventListeners;
 
             listenersByType.get(type)?.delete(listener);
         },
 
-        /**
-         * @param {string} name
-         * @returns {import("./view/scaleResolutionApi").ScaleResolutionApi}
-         */
         getScaleResolutionByName(name) {
             return genomeSpy.getNamedScaleResolutions().get(name);
         },
@@ -113,15 +91,11 @@ export async function embed(el, spec, options = {}) {
 /**
  *
  * @param {import("./genomeSpy").default} genomeSpy
- * @param {Record<string, any>} opt
+ * @param {import("./embedApi.js").EmbedOptions} options options
  */
-function applyOptions(genomeSpy, opt) {
-    if (opt.namedDataProvider) {
-        genomeSpy.registerNamedDataProvider(opt.namedDataProvider);
-    }
-
-    if (opt.beforeLaunchCallback) {
-        opt.beforeLaunchCallback(genomeSpy);
+function applyOptions(genomeSpy, options) {
+    if (options.namedDataProvider) {
+        genomeSpy.registerNamedDataProvider(options.namedDataProvider);
     }
 }
 

package/src/marks/link.js

@@ -20,9 +20,7 @@ export default class LinkMark extends Mark {
                 y: 0.0,
                 y2: undefined,
                 size: 1.0,
-                size2: undefined,
                 color: "black",
-                color2: undefined,
                 opacity: 1.0,
 
                 segments: 101, // Performance is affected more by the fill rate, i.e. number of pixels
@@ -41,24 +39,15 @@ export default class LinkMark extends Mark {
             "y",
             "y2",
             "size",
-            "size2",
             "height",
             "color",
-            "color2",
             "opacity",
         ];
     }
 
     /** @return {import("../spec/channel").Channel[]} */
     getSupportedChannels() {
-        return [
-            ...super.getSupportedChannels(),
-            "x2",
-            "y2",
-            "size",
-            "size2",
-            "color2",
-        ];
+        return [...super.getSupportedChannels(), "x2", "y2", "size"];
     }
 
     /**

package/src/marks/mark.js

@@ -11,6 +11,7 @@ import { isDiscrete } from "vega-scale";
 import { fp64ify } from "../gl/includes/fp64-utils";
 import createEncoders, {
     isChannelDefWithScale,
+    isDatumDef,
     isValueDef,
 } from "../encoder/encoder";
 import {
@@ -18,6 +19,7 @@ import {
     generateValueGlsl,
     generateScaleGlsl,
     RANGE_TEXTURE_PREFIX,
+    ATTRIBUTE_PREFIX,
 } from "../scale/glslScaleGenerator";
 import FP64 from "../gl/includes/fp64-arithmetic.glsl";
 import GLSL_COMMON from "../gl/includes/common.glsl";
@@ -29,6 +31,7 @@ import GLSL_PICKING_FRAGMENT from "../gl/includes/picking.fragment.glsl";
 import { getCachedOrCall } from "../utils/propertyCacher";
 import { createProgram } from "../gl/webGLHelper";
 import coalesceProperties from "../utils/propertyCoalescer";
+import { isScalar } from "../utils/variableTools";
 
 export const SAMPLE_FACET_UNIFORM = "SAMPLE_FACET_UNIFORM";
 export const SAMPLE_FACET_TEXTURE = "SAMPLE_FACET_TEXTURE";
@@ -159,8 +162,6 @@ export default class Mark {
         if (this.isPickingParticipant()) {
             encoding.uniqueId = {
                 field: "_uniqueId", // TODO: Use constant
-                type: "nominal",
-                scale: null,
             };
         }
 
@@ -191,9 +192,7 @@ export default class Mark {
             const propToValueDef = (property) => {
                 const value =
                     this.properties[/** @type {keyof MarkConfig} */ (property)];
-                // TODO: Use isScalar ... but... tooltip breaks if type guard is used
-                return { value };
-                //}
+                return isScalar(value) && { value };
             };
 
             const propertyValues = Object.fromEntries(
@@ -401,6 +400,28 @@ export default class Mark {
                 "Domains"
             );
         }
+
+        this.gl.useProgram(this.programInfo.program);
+
+        this._setDatums();
+    }
+
+    _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)
+                    : encoder.scale.fp64
+                    ? fp64ify(+channelDef.datum)
+                    : +channelDef.datum;
+
+                setUniforms(this.programInfo, {
+                    [ATTRIBUTE_PREFIX + channel]: datum,
+                });
+            }
+        }
     }
 
     /**
@@ -656,6 +677,7 @@ export default class Mark {
             // inferior performance. Based on profiling, this optimization gives
             // a significant performance boost.
             this.gl.uniform4f(
+                // @ts-expect-error
                 locationSetter.location, // TODO: Make a twgl pull request to fix typing
                 pos,
                 height,

package/src/marks/markUtils.js

@@ -1,4 +1,8 @@
-import { isValueDef, getSecondaryChannel } from "../encoder/encoder";
+import {
+    isValueDef,
+    getSecondaryChannel,
+    isChannelDefWithScale,
+} from "../encoder/encoder";
 
 /**
  *
@@ -8,46 +12,58 @@ import { isValueDef, getSecondaryChannel } from "../encoder/encoder";
 
 /**
  * @param {Encoding} encoding
- * @param {Channel} channel
+ * @param {import("../spec/channel").PrimaryPositionalChannel} channel
  */
 export function fixPositional(encoding, channel) {
-    const secondary = getSecondaryChannel(channel);
-    if (encoding[channel]) {
-        if (!encoding[secondary]) {
-            if (encoding[channel].type == "quantitative") {
+    const secondaryChannel = getSecondaryChannel(channel);
+
+    // Must make copies because the definition may be shared with other views/marks
+    let primary = encoding[channel] && { ...encoding[channel] };
+    let secondary = encoding[secondaryChannel] && {
+        ...encoding[secondaryChannel],
+    };
+
+    if (isValueDef(primary) || isValueDef(secondary)) {
+        return;
+    }
+
+    if (primary) {
+        // TODO: fix. May not be a proper type guard.
+        if (!isChannelDefWithScale(encoding[channel])) {
+            // nop
+            return;
+        }
+
+        if (!secondary) {
+            if (primary.type == "quantitative") {
                 // Bar plot, anchor the other end to zero
-                encoding[secondary] = {
-                    datum: 0,
-                };
+                secondary = { datum: 0 };
             } else {
-                // Must make copies because the definition may be shared with other views/marks
-                encoding[channel] = { ...encoding[channel] };
-                encoding[secondary] = { ...encoding[channel] };
+                secondary = { ...primary };
 
                 // Fill the bands (bar plot / heatmap)
                 // We are following the Vega-Lite convention:
                 // the band property works differently on rectangular marks, i.e., it adjusts the band coverage.
-                const adjustment = (1 - (encoding[channel].band || 1)) / 2;
-                encoding[channel].band = 0 + adjustment;
-                encoding[secondary].band = 1 - adjustment;
+                const adjustment = (1 - (primary.band ?? 1)) / 2;
+                primary.band = 0 + adjustment;
+                secondary.band = 1 - adjustment;
 
                 // TODO: If the secondary channel duplicates the primary channel
                 // the data should be uploaded to the GPU only once.
             }
-        } else if (encoding[channel].type != "quantitative") {
-            const adjustment = (1 - (encoding[channel].band || 1)) / 2;
-            encoding[channel].band = adjustment;
-            encoding[secondary].band = -adjustment;
+        } else if (primary.type != "quantitative") {
+            const adjustment = (1 - (primary.band || 1)) / 2;
+            primary.band = adjustment;
+            secondary.band = -adjustment;
         }
-    } else if (encoding[secondary]) {
-        throw new Error(
-            `Only secondary channel ${secondary} has been specified!`
-        );
     } else {
         // Nothing specified, fill the whole viewport
-        encoding[channel] = { value: 0 };
-        encoding[secondary] = { value: 1 };
+        primary = { value: 0 };
+        secondary = { value: 1 };
     }
+
+    encoding[channel] = primary;
+    encoding[secondaryChannel] = secondary;
 }
 
 /**

package/src/marks/pointMark.js

@@ -178,7 +178,9 @@ export default class PointMark extends Mark {
         if (e.constant) {
             return e(null);
         } else {
-            return e.scale.range().reduce((a, b) => Math.max(a, b));
+            return /** @type {number[]} */ (e.scale.range()).reduce((a, b) =>
+                Math.max(a, b)
+            );
         }
     }
 
@@ -196,7 +198,8 @@ export default class PointMark extends Mark {
             } else if (p >= 1) {
                 return Infinity;
             } else {
-                return quantileSorted(this.sampledSemanticScores, p);
+                const scores = /** @type {any} */ (this.sampledSemanticScores);
+                return quantileSorted(/** @type {number[]} */ (scores), p);
             }
         } else {
             return -1;