@genome-spy/core 0.15.0 → 0.16.0

package/src/spec/view.d.ts

@@ -1,7 +1,13 @@
 import { Data } from "./data";
 import { Scale } from "./scale";
 import { TransformParams } from "./transform";
-import { Channel, Encoding, FacetFieldDef, PositionalChannel } from "./channel";
+import {
+    Channel,
+    Encoding,
+    FacetFieldDef,
+    PrimaryPositionalChannel,
+    Type,
+} from "./channel";
 import {
     FillAndStrokeProps,
     MarkConfigAndType,
@@ -30,7 +36,7 @@ export interface FacetMapping {
  * The opacity is interpolated between the specified stops.
  */
 export interface DynamicOpacity {
-    channel?: PositionalChannel;
+    channel?: PrimaryPositionalChannel;
     /** Stops expressed as units (base pairs, for example) per pixel. */
     unitsPerPixel: number[];
     /** Opacity values that match the given stops. */
@@ -124,14 +130,14 @@ export interface LayerSpec extends ViewSpecBase, AggregateSamplesSpec {
 }
 
 export interface FacetSpec extends ViewSpecBase {
-    facet: FacetFieldDef | FacetMapping;
+    facet: any; //FacetMapping | FacetFieldDef
     spec: LayerSpec | UnitSpec;
     columns?: number;
     spacing?: number;
 }
 
 export interface SampleAttributeDef {
-    type: string;
+    type: Type; // TODO: Omit index/locus
     /** Color scale (primary) */
     scale?: Scale;
     barScale?: Scale;
@@ -170,7 +176,7 @@ export interface ResolveSpec {
 
 export type ContainerSpec = (
     | LayerSpec
-    | FacetSpec
+    //    | FacetSpec
     | SampleSpec
     | VConcatSpec
     | HConcatSpec
@@ -182,7 +188,7 @@ export type ContainerSpec = (
 export type ViewSpec =
     | UnitSpec
     | LayerSpec
-    | FacetSpec
+    //    | FacetSpec
     | SampleSpec
     | VConcatSpec
     | HConcatSpec

package/src/tooltip/refseqGeneTooltipHandler.js

@@ -43,6 +43,7 @@ async function fetchGeneSummary(symbol) {
 
     console.log("Searching: " + symbol);
 
+    /** @type {RequestInit} */
     const opts = { mode: "cors" };
 
     const searchResult = await fetch(

package/src/types/filetypes.d.ts

@@ -2,3 +2,13 @@ declare module "*.svg" {
     const content: string;
     export default content;
 }
+
+declare module "*.txt" {
+    const content: string;
+    export default content;
+}
+
+declare module "*.png" {
+    const value: any;
+    export = value;
+}

package/src/types/internmap.d.ts

@@ -0,0 +1,22 @@
+// Source: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/d3-array/index.d.ts
+
+declare module "internmap" {
+    /**
+     * The InternMap class extends the native JavaScript Map class, allowing Dates and other non-primitive keys by bypassing the SameValueZero algorithm when determining key equality.
+     */
+    export class InternMap<K = any, V = any> extends Map<K, V> {
+        constructor(
+            entries?: readonly (readonly [K, V])[] | null,
+            keyFunction?: KeyFunction
+        );
+    }
+
+    /**
+     * The InternSet class extends the native JavaScript Set class, allowing Dates and other non-primitive keys by bypassing the SameValueZero algorithm when determining key equality.
+     */
+    export class InternSet<T = any> extends Set<T> {
+        constructor(values?: readonly T[] | null, keyFunction?: KeyFunction);
+    }
+}
+
+type KeyFunction = (key: any) => string | number | bigint | boolean | symbol;

package/src/types/vega-loader.d.ts

@@ -0,0 +1 @@
+declare module "vega-loader";

package/src/utils/arrayUtils.js

@@ -1,14 +1,20 @@
 /**
- *
+ * @param {T[]} a
+ * @param {T[]} b
+ * @template T
+ */
+export function shallowArrayEquals(a, b) {
+    return a.length == b.length && a.every((s, i) => a[i] === b[i]);
+}
+
+/**
  * @param {A[]} a
  * @param {B[]} b
- * @param {function(A):T} [aAccessor]
- * @param {function(B):T} [bAccessor]
+ * @param {function(A):T} aAccessor
+ * @param {function(B):T} bAccessor
  * @template A, B, T
  */
-export function shallowArrayEquals(a, b, aAccessor, bAccessor) {
-    aAccessor = aAccessor || ((x) => x);
-    bAccessor = bAccessor || ((x) => x);
+export function shallowArrayEqualsWithAccessors(a, b, aAccessor, bAccessor) {
     return (
         a.length == b.length &&
         a.every((s, i) => aAccessor(a[i]) === bAccessor(b[i]))

package/src/utils/cloner.js

@@ -7,14 +7,16 @@
  * https://mrale.ph/blog/2014/07/30/constructor-vs-objectcreate.html
  *
  * @param {T} template The template object that
- * @returns {function(T):T}
+ * @returns {(function(T):T) & { properties: string[] }}
  * @template T
  */
 export default function createCloner(template) {
     // TODO: Check that only properties, not methods get cloned
-    const properties = Object.keys(template);
+    const properties = /** @type {string[]} */ (
+        Object.keys(template).filter((k) => typeof k == "string")
+    );
 
-    const cloner = /** @type {function(T):T} */ (
+    const cloner = /** @type {(function(T):T) & { properties: string[] }} */ (
         new Function(
             "source",
             "return { " +

package/src/utils/concatIterables.js

@@ -1,6 +1,6 @@
 /**
- *
- * @param  {...Iterable} iterables
+ * @param  {...Iterable<T>} iterables
+ * @template T
  */
 export default function concatIterables(...iterables) {
     if (iterables.length <= 0) {

package/src/utils/domainArray.js

@@ -194,14 +194,6 @@ export default function createDomain(type, initialDomain) {
     throw new Error("Unknown type: " + type);
 }
 
-/**
- *
- * @param {array} array
- */
-export function isDomainArray(array) {
-    return array instanceof DomainArray;
-}
-
 /**
  * For unit tests
  *

package/src/utils/propertyCoalescer.js

@@ -2,16 +2,19 @@
  * Coalesces properties. Allows for creating chains of defaults without
  * using object destructuring, which may generate piles of garbage for GC.
  *
- * Still WIP. TODO: Efficient computed defaults.
+ * Still WIP.
+ * TODO: Efficient computed defaults.
+ * TODO: Make sense of the types
  *
  * @param  {...function():T} sources
  * @returns {T}
  *
- * @template T
+ * @template {Record<string | symbol, any>} [T=object]
  */
 export default function coalesceProperties(...sources) {
+    /** @type {ProxyHandler<T>} */
     const handler = {
-        get: function (target, prop, receiver) {
+        get(_target, prop, _receiver) {
             for (const source of sources) {
                 const props = source();
                 const value = props[prop];
@@ -22,7 +25,8 @@ export default function coalesceProperties(...sources) {
             return undefined;
         },
 
-        has: function (target, prop, receiver) {
+        // @ts-ignore
+        has(target, prop, _receiver) {
             for (const source of sources) {
                 const props = source();
                 if (prop in props) {
@@ -33,5 +37,6 @@ export default function coalesceProperties(...sources) {
         },
     };
 
+    // @ts-ignore
     return new Proxy({}, handler);
 }

package/src/view/axisResolution.js

@@ -5,6 +5,7 @@ import {
     isExprDef,
     isFieldDef,
     isSecondaryChannel,
+    isValueDef,
 } from "../encoder/encoder";
 import { peek } from "../utils/arrayUtils";
 import coalesce from "../utils/coalesce";
@@ -22,7 +23,7 @@ export default class AxisResolution {
      */
     constructor(channel) {
         this.channel = channel;
-        /** @type {import("./scaleResolution").ResolutionMember[]} The involved views */
+        /** @type {import("./scaleResolution").ResolutionMember<import("../spec/channel").PositionalChannel>[]} The involved views */
         this.members = [];
     }
 
@@ -35,7 +36,7 @@ export default class AxisResolution {
      * scales have been resolved.
      *
      * @param {UnitView} view
-     * @param {import("../spec/channel").Channel} channel TODO: Do something for this
+     * @param {import("../spec/channel").PositionalChannel} channel TODO: Do something for this
      */
     pushUnitView(view, channel) {
         const newScaleResolution = view.getScaleResolution(this.channel);
@@ -56,10 +57,10 @@ export default class AxisResolution {
 
     getAxisProps() {
         return getCachedOrCall(this, "axisProps", () => {
-            const propArray = this.members.map(
-                (member) =>
-                    getChannelDefWithScale(member.view, member.channel).axis
-            );
+            const propArray = this.members.map((member) => {
+                const channelDef = member.view.mark.encoding[member.channel];
+                return "axis" in channelDef && channelDef.axis;
+            });
 
             if (
                 propArray.length > 0 &&
@@ -87,6 +88,10 @@ export default class AxisResolution {
                 member.channel
             );
 
+            if (isValueDef(channelDef)) {
+                return undefined;
+            }
+
             // Retain nulls as they indicate that no title should be shown
 
             return {

package/src/view/axisView.js

@@ -2,14 +2,17 @@ import { validTicks, tickValues, tickFormat, tickCount } from "../scale/ticks";
 import LayerView from "./layerView";
 import { isNumber } from "vega-util";
 import smoothstep from "../utils/smoothstep";
-import { shallowArrayEquals } from "../utils/arrayUtils";
+import {
+    shallowArrayEquals,
+    shallowArrayEqualsWithAccessors,
+} from "../utils/arrayUtils";
 import { FlexDimensions } from "../utils/layout/flexLayout";
 import DynamicCallbackSource from "../data/sources/dynamicCallbackSource";
 
 const CHROM_LAYER_NAME = "chromosome_ticks_and_labels";
 
 /**
- * @typedef {import("../spec/channel").PositionalChannel} PositionalChannel
+ * @typedef {import("../spec/channel").PrimaryPositionalChannel} PositionalChannel
  * @typedef {import("../spec/view").GeometricDimension} GeometricDimension
  */
 
@@ -265,7 +268,7 @@ function generateTicks(axisProps, scale, axisLength, oldTicks = []) {
         : tickValues(scale, count);
 
     if (
-        shallowArrayEquals(
+        shallowArrayEqualsWithAccessors(
             values,
             oldTicks,
             (v) => v,
@@ -428,7 +431,7 @@ function createAxis(axisProps) {
         },
         encoding: {
             [main]: { field: "value", type: "quantitative" },
-            text: { field: "label", type: "quantitative" },
+            text: { field: "label" },
         },
     });
 
@@ -649,7 +652,7 @@ export function createGenomeAxis(axisProps) {
             },
             encoding: {
                 [main + "2"]: { field: "continuousEnd", type: "locus" },
-                text: { field: "name", type: "ordinal" },
+                text: { field: "name" },
             },
         };
         return labels;

package/src/view/decoratorView.js

@@ -6,7 +6,7 @@ import UnitView from "./unitView";
 import { ZERO_FLEXDIMENSIONS } from "../utils/layout/flexLayout";
 
 /**
- * @typedef {import("../spec/channel").PositionalChannel} PositionalChannel
+ * @typedef {import("../spec/channel").PrimaryPositionalChannel} PositionalChannel
  * @typedef {import("../spec/view").GeometricDimension} GeometricDimension
  */
 
@@ -384,7 +384,10 @@ export default class DecoratorView extends ContainerView {
                     zDelta: 0,
                 });
             }
-        } else if (event.type == "mousedown" && event.uiEvent.button === 0) {
+        } else if (
+            event.type == "mousedown" &&
+            /** @type {MouseEvent} */ (event.uiEvent).button === 0
+        ) {
             const mouseEvent = /** @type {MouseEvent} */ (event.uiEvent);
             mouseEvent.preventDefault();
 
@@ -424,7 +427,7 @@ export default class DecoratorView extends ContainerView {
 
     _getZoomableResolutions() {
         return this._cache("zoomableResolutions", () => {
-            /** @type {Record<import("../spec/channel").PositionalChannel, Set<import("./scaleResolution").default>>} */
+            /** @type {Record<import("../spec/channel").PrimaryPositionalChannel, Set<import("./scaleResolution").default>>} */
             const resolutions = {
                 x: new Set(),
                 y: new Set(),

package/src/view/facetView.js

@@ -1,3 +1,6 @@
+// @ts-nocheck
+// TODO: Enable when this is taken to use again
+
 import { isFacetFieldDef, isFacetMapping } from "./viewUtils";
 import ContainerView from "./containerView";
 import UnitView from "./unitView";

package/src/view/flowBuilder.js

@@ -286,6 +286,7 @@ export function linearizeLocusAccess(view) {
                       ...rewrittenEncoding,
                   };
                   // This is so ugly...
+                  // @ts-ignore
                   invalidate(view.mark, "encoding");
               },
           }
@@ -294,7 +295,7 @@ export function linearizeLocusAccess(view) {
 
 /**
  * @param {View} view
- * @param {Record<string, import("../spec/channel").ChannelDef>} [encoding]
+ * @param {Encoding} [encoding]
  * @returns {import("../spec/transform").CompareParams}
  */
 function getCompareParamsForView(view, encoding) {

package/src/view/renderingContext/svgViewRenderingContext.js

@@ -8,8 +8,12 @@ import ViewRenderingContext from "./viewRenderingContext";
  * @typedef {import("../view").default} View
  */
 export default class SvgViewRenderingContext extends ViewRenderingContext {
-    constructor() {
-        super();
+    /**
+     *
+     * @param {import("../rendering").GlobalRenderingOptions} globalOptions
+     */
+    constructor(globalOptions) {
+        super(globalOptions);
 
         /** @type {import("../../utils/layout/rectangle").default} */
         this.coords = undefined;
@@ -39,7 +43,7 @@ export default class SvgViewRenderingContext extends ViewRenderingContext {
             this.svg.setAttributeNS(
                 null,
                 "viewBox",
-                ["x", "y", "width", "height"].map((a) => viewBox[a]).join(" ")
+                [viewBox.x, viewBox.y, viewBox.width, viewBox.height].join(" ")
             );
         }
 

package/src/view/scaleResolution.js

@@ -23,8 +23,8 @@ import {
     isColorChannel,
     isDiscreteChannel,
     isPositionalChannel,
+    isPrimaryPositionalChannel,
     isSecondaryChannel,
-    primaryPositionalChannels,
 } from "../encoder/encoder";
 import {
     isChromosomalLocus,
@@ -34,6 +34,7 @@ import { NominalDomain } from "../utils/domainArray";
 import { easeQuadInOut } from "d3-ease";
 import { interpolateZoom } from "d3-interpolate";
 import { shallowArrayEquals } from "../utils/arrayUtils";
+import { isScaleLocus } from "../genome/scaleLocus";
 
 export const QUANTITATIVE = "quantitative";
 export const ORDINAL = "ordinal";
@@ -41,6 +42,15 @@ export const NOMINAL = "nominal";
 export const LOCUS = "locus"; // Humdum, should this be "genomic"?
 export const INDEX = "index";
 
+/**
+ * @template {Channel}[T=Channel]
+ * @typedef {{view: import("./unitView").default, channel: T}} ResolutionMember
+ * @typedef {import("./unitView").default} UnitView
+ * @typedef {import("../encoder/encoder").VegaScale} VegaScale
+ * @typedef {import("../utils/domainArray").DomainArray} DomainArray
+ * @typedef {import("../genome/genome").ChromosomalLocus} ChromosomalLocus
+ *
+ */
 /**
  * Resolution takes care of merging domains and scales from multiple views.
  * This class also provides some utility methods for zooming the scales etc..
@@ -50,12 +60,6 @@ export const INDEX = "index";
  * @typedef {import("./scaleResolutionApi").ScaleResolutionApi} ScaleResolutionApi
  * @implements {ScaleResolutionApi}
  *
- * @typedef {{view: import("./unitView").default, channel: Channel}} ResolutionMember
- * @typedef {import("./unitView").default} UnitView
- * @typedef {import("../encoder/encoder").VegaScale} VegaScale
- * @typedef {import("../utils/domainArray").DomainArray} DomainArray
- * @typedef {import("../genome/genome").ChromosomalLocus} ChromosomalLocus
- *
  * @typedef {import("../spec/channel").Channel} Channel
  * @typedef {import("../spec/scale").Scale} Scale
  * @typedef {import("../spec/scale").NumericDomain} NumericDomain
@@ -323,7 +327,7 @@ export default class ScaleResolution {
         const scale = createScale(props);
         this._scale = scale;
 
-        if (scale.type == "locus") {
+        if (isScaleLocus(scale)) {
             scale.genome(this.getGenome());
         }
 
@@ -366,7 +370,7 @@ export default class ScaleResolution {
     }
 
     isZoomable() {
-        if (!primaryPositionalChannels.includes(this.channel)) {
+        if (!isPrimaryPositionalChannel(this.channel)) {
             return false;
         }
 
@@ -400,13 +404,14 @@ export default class ScaleResolution {
         const oldDomain = scale.domain();
         let newDomain = [...oldDomain];
 
+        // @ts-expect-error
         const anchor = scale.invert(scaleAnchor);
 
         if (this.getScaleProps().reverse) {
             pan = -pan;
         }
 
-        // TODO: log, pow, symlog, ...
+        // TODO: symlog
         switch (scale.type) {
             case "linear":
             case "index":
@@ -419,22 +424,33 @@ export default class ScaleResolution {
                 newDomain = zoomLog(newDomain, anchor, scaleFactor);
                 break;
             case "pow":
-            case "sqrt":
-                newDomain = panPow(newDomain, pan || 0, scale.exponent());
+            case "sqrt": {
+                const powScale =
+                    /** @type {import("d3-scale").ScalePower<number, number>} */ (
+                        scale
+                    );
+                newDomain = panPow(newDomain, pan || 0, powScale.exponent());
                 newDomain = zoomPow(
                     newDomain,
                     anchor,
                     scaleFactor,
-                    scale.exponent()
+                    powScale.exponent()
                 );
                 break;
+            }
             default:
-                throw new Error("Unsupported scale type: " + scale.type);
+                throw new Error(
+                    "Zooming is not implemented for: " + scale.type
+                );
         }
 
         // TODO: Use the zoomTo method. Move clamping etc there.
         if (this._zoomExtent) {
-            newDomain = clampRange(newDomain, ...this._zoomExtent);
+            newDomain = clampRange(
+                newDomain,
+                this._zoomExtent[0],
+                this._zoomExtent[1]
+            );
         }
 
         if ([0, 1].some((i) => newDomain[i] != oldDomain[i])) {
@@ -491,9 +507,8 @@ export default class ScaleResolution {
                 },
             });
             */
-            const interpolator = interpolateZoom.rho(0.7)(
-                [fc, 0, fw],
-                [tc, 0, tw]
+            const interpolator = interpolateZoom([fc, 0, fw], [tc, 0, tw]).rho(
+                0.7
             );
             await animator.transition({
                 duration: (duration / 1000) * interpolator.duration,
@@ -672,12 +687,13 @@ export default class ScaleResolution {
  *
  * @param {Channel} channel
  * @param {string} dataType
+ * @returns {import("../spec/scale").ScaleType}
  */
 function getDefaultScaleType(channel, dataType) {
     // TODO: Band scale, Bin-Quantitative
 
-    if ([INDEX, LOCUS].includes(dataType)) {
-        if (primaryPositionalChannels.includes(channel)) {
+    if (dataType == INDEX || dataType == LOCUS) {
+        if (isPrimaryPositionalChannel(channel)) {
             return dataType;
         } else {
             // TODO: Also explicitly set scales should be validated
@@ -688,13 +704,11 @@ function getDefaultScaleType(channel, dataType) {
     }
 
     /**
-     * @type {Partial<Record<Channel, string[]>>}
+     * @type {Partial<Record<Channel, (import("../spec/scale").ScaleType | undefined)[]>>}
      * Default types: nominal, ordinal, quantitative.
      * undefined = incompatible, "null" = disabled (pass-thru)
      */
     const defaults = {
-        uniqueId: ["null", undefined, undefined],
-        facetIndex: ["null", undefined, undefined],
         x: ["band", "band", "linear"],
         y: ["band", "band", "linear"],
         size: [undefined, "point", "linear"],
@@ -706,16 +720,24 @@ function getDefaultScaleType(channel, dataType) {
         stroke: ["ordinal", "ordinal", "linear"],
         strokeWidth: [undefined, undefined, "linear"],
         shape: ["ordinal", "ordinal", undefined],
-        sample: ["null", "null", undefined],
-        semanticScore: [undefined, undefined, "null"],
-        search: ["null", undefined, undefined],
-        text: ["null", "null", "null"],
         dx: [undefined, undefined, "null"],
         dy: [undefined, undefined, "null"],
         angle: [undefined, undefined, "linear"],
     };
 
-    const type = defaults[channel]
+    /** @type {Channel[]} */
+    const typelessChannels = [
+        "uniqueId",
+        "facetIndex",
+        "semanticScore",
+        "search",
+        "text",
+        "sample",
+    ];
+
+    const type = typelessChannels.includes(channel)
+        ? "null"
+        : defaults[channel]
         ? defaults[channel][[NOMINAL, ORDINAL, QUANTITATIVE].indexOf(dataType)]
         : dataType == QUANTITATIVE
         ? "linear"
@@ -739,10 +761,8 @@ function applyLockedProperties(props, channel) {
         props.range = [0, 1];
     }
 
-    if (channel == "opacity") {
-        if (isContinuous(props.type)) {
-            props.clamp = true;
-        }
+    if (channel == "opacity" && isContinuous(props.type)) {
+        props.clamp = true;
     }
 }
 

package/src/view/testUtils.js

@@ -15,15 +15,15 @@ import { ViewFactory } from "./viewFactory";
 /** @type {<V extends View>(spec: ViewSpec, viewClass: { new(...args: any[]): V }, context?: ViewContext) => V} */
 export function create(spec, viewClass, context = undefined) {
     const viewTypeRegistry = new ViewFactory();
-    /** @type {ViewContext} */
-    const c = {
+
+    const c = /** @type {ViewContext} */ ({
         ...(context || {}),
         accessorFactory: new AccessorFactory(),
 
         createView: function (spec, parent, defaultName) {
             return viewTypeRegistry.createView(spec, c, parent, defaultName);
         },
-    };
+    });
 
     const view = c.createView(spec, null, "root");
 
@@ -40,7 +40,10 @@ export async function createAndInitialize(
     viewClass,
     context = undefined
 ) {
-    context = { ...(context || {}), dataFlow: new DataFlow() };
+    context = /** @type {ViewContext} */ ({
+        ...(context || {}),
+        dataFlow: new DataFlow(),
+    });
     const view = create(spec, viewClass, context);
     resolveScalesAndAxes(view);
     await initializeData(view, context.dataFlow);