@genome-spy/core 0.14.2 → 0.18.0

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);

package/src/view/unitView.js

@@ -170,7 +170,18 @@ export default class UnitView extends ContainerView {
                         : new AxisResolution(targetChannel);
             }
 
-            view.resolutions[type][targetChannel].pushUnitView(this, channel);
+            // Looks silly, but keeps type checking happy
+            if (isPositionalChannel(channel)) {
+                view.resolutions[type][targetChannel].pushUnitView(
+                    this,
+                    channel
+                );
+            } else if (type == "scale") {
+                view.resolutions[type][targetChannel].pushUnitView(
+                    this,
+                    channel
+                );
+            }
         }
     }
 
@@ -223,16 +234,11 @@ export default class UnitView extends ContainerView {
         }
 
         const channelDef = this.mark.encoding[channel];
+        // TODO: Broken. Fix.
         if (!isChannelDefWithScale(channelDef)) {
             throw new Error("The channel has no scale, cannot get domain!");
         }
 
-        const type = channelDef.type;
-        if (!type) {
-            throw new Error(`No data type for channel "${channel}"!`);
-            // TODO: Support defaults
-        }
-
         return channelDef;
     }
 
@@ -252,7 +258,7 @@ export default class UnitView extends ContainerView {
                 channelDef.resolutionChannel ?? channel
             );
             return createDomain(
-                channelDef.type,
+                channelDef.type ?? "nominal",
                 // Chrom/pos must be linearized first
                 scaleResolution.fromComplexInterval(specDomain)
             );
@@ -274,7 +280,7 @@ export default class UnitView extends ContainerView {
      */
     extractDataDomain(channel) {
         const channelDef = this._validateDomainQuery(channel);
-        const type = channelDef.type;
+        const type = channelDef.type ?? "nominal"; // TODO: Should check that this is a channel without scale
 
         /** @param {Channel} channel */
         const extract = (channel) => {

package/src/view/view.js

@@ -142,13 +142,10 @@ export default class View {
      */
     getSizeFromSpec() {
         /**
-         *
          * @param {"width" | "height"} dimension
          * @return {SizeDef}
          */
         const handleSize = (dimension) => {
-            /** @type {SizeDef} */
-            let sizeDef;
             let value = this.spec[dimension];
 
             if (isStepSize(value)) {
@@ -172,22 +169,27 @@ export default class View {
                         );
                     }
 
+                    // TODO: Type guards maybe?
+                    const _scale =
+                        /** @type {import("d3-scale").ScaleBand<any> | import("../genome/scaleLocus").ScaleLocus | import("../genome/scaleIndex").ScaleIndex} */ (
+                            scale
+                        );
+
                     steps = bandSpace(
                         steps,
-                        scale.paddingInner(),
-                        scale.paddingOuter()
+                        _scale.paddingInner(),
+                        _scale.paddingOuter()
                     );
 
-                    sizeDef = { px: steps * stepSize, grow: 0 };
+                    return { px: steps * stepSize, grow: 0 };
                 } else {
                     throw new Error(
                         "Cannot use 'step' size with missing scale!"
                     );
                 }
             } else {
-                sizeDef = (value && parseSizeDef(value)) || { px: 0, grow: 1 };
+                return (value && parseSizeDef(value)) ?? { px: 0, grow: 1 };
             }
-            return sizeDef;
         };
 
         return this._cache(

package/src/view/viewFactory.js

@@ -123,8 +123,10 @@ export function isLayerSpec(spec) {
 export function isFacetSpec(spec) {
     return (
         "facet" in spec &&
+        // @ts-expect-error
         isObject(spec.facet) &&
         "spec" in spec &&
+        // @ts-expect-error
         isObject(spec.spec)
     );
 }

package/src/view/viewUtils.js

@@ -35,10 +35,9 @@ import { rollup } from "d3-array";
  * @typedef {import("../spec/view").ImportSpec} ImportSpec
  * @typedef {import("../spec/view").ImportConfig} ImportConfig
  * @typedef {import("../spec/root").RootSpec} RootSpec
- * @typedef {import("../spec/root").RootConfig} RootConfig
  *
- * @typedef {import("../spec/channel").FacetFieldDef} FacetFieldDef
  * @typedef {import("../spec/view").FacetMapping} FacetMapping
+ * @typedef {import("../spec/channel").FacetFieldDef} FacetFieldDef
  */
 
 /**
@@ -253,14 +252,14 @@ export async function initializeData(root, existingFlow) {
  * @param {View} view
  */
 export function findEncodedFields(view) {
-    /** @type {{view: UnitView, channel: string, field: string, type: string}[]} */
+    /** @type {{view: UnitView, channel: import("../spec/channel").Channel, field: import("../spec/channel").Field, type: import("../spec/channel").Type}[]} */
     const fieldInfos = [];
 
     view.visit((view) => {
         if (view instanceof UnitView) {
             const encoding = view.getEncoding();
             for (const [channel, def] of Object.entries(encoding)) {
-                if (isFieldDef(def)) {
+                if (isFieldDef(def) && "type" in def) {
                     fieldInfos.push({
                         view,
                         channel,
@@ -292,7 +291,7 @@ async function loadExternalViewSpec(spec, baseUrl, viewContext) {
     const url = spec.import.url;
 
     const importedSpec = JSON.parse(
-        await loader.load(url).catch((e) => {
+        await loader.load(url).catch((/** @type {Error} */ e) => {
             throw new Error(
                 `Could not load imported view spec: ${url} \nReason: ${e.message}`
             );

package/src/options.d.ts

@@ -1,15 +0,0 @@
-import { TooltipHandler } from "./tooltip/tooltipHandler";
-
-export interface EmbedOptions {
-    /**
-     * A function that allows retrieval of named data sources.
-     *
-     * TODO: Support dynamic updates, i.e., pushing new data.
-     */
-    namedDataProvider?: (name: string) => any[];
-
-    /**
-     * Custom tooltip handlers. Use "default" to override the default handler
-     */
-    tooltipHandlers?: Record<string, TooltipHandler>;
-}

package/src/utils/fisheye.js

@@ -1,60 +0,0 @@
-/**
- * Based on:
- * fisheye d3-plugin (c) Mike Bostock
- * https://github.com/d3/d3-plugins/blob/master/fisheye/
- */
-export default function () {
-    let radius = 200;
-    let distortion = 2;
-    let k0 = 1,
-        k1 = 1;
-    let focus = 0;
-
-    /**
-     *
-     * @param {number} x
-     */
-    function fisheye(x) {
-        const dx = x - focus;
-        const dd = Math.abs(dx);
-        if (!dd || dd >= radius) return x;
-        const k = ((k0 * (1 - Math.exp(-dd * k1))) / dd) * 0.75 + 0.25;
-        return focus + dx * k;
-    }
-
-    function rescale() {
-        k0 = Math.exp(distortion);
-        k0 = (k0 / (k0 - 1)) * radius;
-        k1 = distortion / radius;
-        return fisheye;
-    }
-
-    /**
-     * @param {number} _
-     */
-    fisheye.radius = function (_) {
-        if (!arguments.length) return radius;
-        radius = +_;
-        return rescale();
-    };
-
-    /**
-     * @param {number} _
-     */
-    fisheye.distortion = function (_) {
-        if (!arguments.length) return distortion;
-        distortion = +_;
-        return rescale();
-    };
-
-    /**
-     * @param {number} _
-     */
-    fisheye.focus = function (_) {
-        if (!arguments.length) return focus;
-        focus = _;
-        return fisheye;
-    };
-
-    return rescale();
-}

package/src/utils/html.js

@@ -1,23 +0,0 @@
-/* https://stackoverflow.com/a/41699140/1547896 */
-
-export function escapeHtml(str) {
-    var map = {
-        "&": "&",
-        "<": "&lt;",
-        ">": "&gt;",
-        '"': "&quot;",
-        "'": "&#039;",
-    };
-    return str.replace(/[&<>"']/g, (m) => map[m]);
-}
-
-export function decodeHtml(str) {
-    var map = {
-        "&amp;": "&",
-        "&lt;": "<",
-        "&gt;": ">",
-        "&quot;": '"',
-        "&#039;": "'",
-    };
-    return str.replace(/&amp;|&lt;|&gt;|&quot;|&#039;/g, (m) => map[m]);
-}

package/src/utils/html.test.js

@@ -1,13 +0,0 @@
-import * as html from "./html";
-
-test("Escape HTML", () => {
-    expect(html.escapeHtml('< "x" & "y" >')).toEqual(
-        "&lt; &quot;x&quot; &amp; &quot;y&quot; &gt;"
-    );
-});
-
-test("Decode HTML", () => {
-    expect(
-        html.decodeHtml("&lt; &quot;x&quot; &amp; &quot;y&quot; &gt;")
-    ).toEqual('< "x" & "y" >');
-});

package/src/view/channel.js

@@ -1,5 +0,0 @@
-export default class Channel {
-    constructor() {
-        this.type = null; // x, y, etc
-    }
-}