@genome-spy/core 0.70.0 → 0.72.0

package/dist/src/utils/keyboardZoomMotion.js

@@ -0,0 +1,285 @@
+/**
+ * @typedef {"KeyW" | "KeyA" | "KeyS" | "KeyD"} NavigationKeyCode
+ */
+
+/**
+ * @typedef {object} AxisProfile
+ * @prop {number} baseSpeed Target speed reached rapidly after key press.
+ * @prop {number} maxExtraSpeed Additional speed gained during sustained hold.
+ * @prop {number} pressHalfLifeMs Half-life for accelerating toward target speed.
+ * @prop {number} releaseHalfLifeMs Half-life for braking velocity after release.
+ * @prop {number} holdGrowthHalfLifeMs Half-life for hold-time extra acceleration.
+ * @prop {number} stopVelocity Velocity threshold below which motion snaps to zero.
+ */
+
+/**
+ * @typedef {object} AxisState
+ * @prop {number} velocity
+ * @prop {number} holdMs
+ * @prop {-1 | 0 | 1} direction
+ */
+
+/**
+ * @typedef {object} MotionStep
+ * @prop {number} panDelta
+ * @prop {number} zoomDelta
+ * @prop {boolean} active
+ */
+
+/**
+ * Tuned for fast key-tap response, one-second-ish braking, and gradual
+ * acceleration during long key holds.
+ */
+export const DEFAULT_KEYBOARD_ZOOM_MOTION_CONFIG = {
+    pan: {
+        baseSpeed: 1,
+        maxExtraSpeed: 3,
+        pressHalfLifeMs: 30,
+        releaseHalfLifeMs: 100,
+        holdGrowthHalfLifeMs: 800,
+        stopVelocity: 0.01,
+    },
+    zoom: {
+        baseSpeed: 3,
+        maxExtraSpeed: 15,
+        pressHalfLifeMs: 10,
+        releaseHalfLifeMs: 100,
+        holdGrowthHalfLifeMs: 600,
+        stopVelocity: 0.01,
+    },
+};
+
+/**
+ * Handles smooth WASD navigation motion with acceleration and braking.
+ */
+export default class KeyboardZoomMotion {
+    /** @type {Record<NavigationKeyCode, boolean>} */
+    #pressed;
+
+    /** @type {AxisState} */
+    #pan;
+
+    /** @type {AxisState} */
+    #zoom;
+
+    #panProfile;
+
+    #zoomProfile;
+
+    /**
+     * @param {typeof DEFAULT_KEYBOARD_ZOOM_MOTION_CONFIG} [config]
+     */
+    constructor(config = DEFAULT_KEYBOARD_ZOOM_MOTION_CONFIG) {
+        this.#panProfile = config.pan;
+        this.#zoomProfile = config.zoom;
+
+        this.#pressed = {
+            KeyW: false,
+            KeyA: false,
+            KeyS: false,
+            KeyD: false,
+        };
+
+        this.#pan = {
+            velocity: 0,
+            holdMs: 0,
+            direction: 0,
+        };
+
+        this.#zoom = {
+            velocity: 0,
+            holdMs: 0,
+            direction: 0,
+        };
+    }
+
+    /**
+     * @param {string} code
+     */
+    isNavigationKey(code) {
+        return (
+            code === "KeyW" ||
+            code === "KeyA" ||
+            code === "KeyS" ||
+            code === "KeyD"
+        );
+    }
+
+    /**
+     * @param {string} code
+     * @returns {boolean} true if the key state changed
+     */
+    handleKeyDown(code) {
+        return this.#setPressed(code, true);
+    }
+
+    /**
+     * @param {string} code
+     * @returns {boolean} true if the key state changed
+     */
+    handleKeyUp(code) {
+        return this.#setPressed(code, false);
+    }
+
+    reset() {
+        this.#pressed.KeyW = false;
+        this.#pressed.KeyA = false;
+        this.#pressed.KeyS = false;
+        this.#pressed.KeyD = false;
+
+        this.#pan.velocity = 0;
+        this.#pan.holdMs = 0;
+        this.#pan.direction = 0;
+
+        this.#zoom.velocity = 0;
+        this.#zoom.holdMs = 0;
+        this.#zoom.direction = 0;
+    }
+
+    /**
+     * @param {number} dtMs
+     * @returns {MotionStep}
+     */
+    step(dtMs) {
+        if (dtMs <= 0) {
+            return {
+                panDelta: 0,
+                zoomDelta: 0,
+                active: this.isActive(),
+            };
+        } else {
+            const panDirection = axisDirection(
+                this.#pressed.KeyD,
+                this.#pressed.KeyA
+            );
+            const zoomDirection = axisDirection(
+                this.#pressed.KeyW,
+                this.#pressed.KeyS
+            );
+
+            const panVelocity = updateAxis(
+                this.#pan,
+                panDirection,
+                dtMs,
+                this.#panProfile
+            );
+            const zoomVelocity = updateAxis(
+                this.#zoom,
+                zoomDirection,
+                dtMs,
+                this.#zoomProfile
+            );
+
+            const dtSeconds = dtMs / 1000;
+
+            return {
+                panDelta: panVelocity * dtSeconds,
+                zoomDelta: zoomVelocity * dtSeconds,
+                active: this.isActive(),
+            };
+        }
+    }
+
+    isActive() {
+        if (
+            this.#pressed.KeyW ||
+            this.#pressed.KeyA ||
+            this.#pressed.KeyS ||
+            this.#pressed.KeyD
+        ) {
+            return true;
+        } else {
+            return this.#pan.velocity !== 0 || this.#zoom.velocity !== 0;
+        }
+    }
+
+    /**
+     * @param {string} code
+     * @param {boolean} pressed
+     * @returns {boolean}
+     */
+    #setPressed(code, pressed) {
+        if (!this.isNavigationKey(code)) {
+            return false;
+        } else {
+            const keyCode = /** @type {NavigationKeyCode} */ (code);
+            const previous = this.#pressed[keyCode];
+            if (previous === pressed) {
+                return false;
+            } else {
+                this.#pressed[keyCode] = pressed;
+                return true;
+            }
+        }
+    }
+}
+
+/**
+ * @param {boolean} negative
+ * @param {boolean} positive
+ * @returns {-1 | 0 | 1}
+ */
+function axisDirection(negative, positive) {
+    if (negative === positive) {
+        return 0;
+    } else if (positive) {
+        return 1;
+    } else {
+        return -1;
+    }
+}
+
+/**
+ * @param {AxisState} axis
+ * @param {-1 | 0 | 1} direction
+ * @param {number} dtMs
+ * @param {AxisProfile} profile
+ * @returns {number}
+ */
+function updateAxis(axis, direction, dtMs, profile) {
+    if (direction !== 0) {
+        if (axis.direction !== direction) {
+            axis.holdMs = 0;
+        }
+
+        axis.holdMs += dtMs;
+
+        const extraSpeed =
+            profile.maxExtraSpeed *
+            (1 - Math.pow(2, -axis.holdMs / profile.holdGrowthHalfLifeMs));
+
+        const target = direction * (profile.baseSpeed + extraSpeed);
+
+        axis.velocity = smoothApproach(
+            axis.velocity,
+            target,
+            dtMs,
+            profile.pressHalfLifeMs
+        );
+    } else {
+        axis.holdMs = 0;
+        axis.velocity = smoothApproach(
+            axis.velocity,
+            0,
+            dtMs,
+            profile.releaseHalfLifeMs
+        );
+
+        if (Math.abs(axis.velocity) < profile.stopVelocity) {
+            axis.velocity = 0;
+        }
+    }
+
+    axis.direction = direction;
+    return axis.velocity;
+}
+
+/**
+ * @param {number} current
+ * @param {number} target
+ * @param {number} dtMs
+ * @param {number} halfLifeMs
+ */
+function smoothApproach(current, target, dtMs, halfLifeMs) {
+    return target + (current - target) * Math.pow(2, -dtMs / halfLifeMs);
+}

package/dist/src/utils/radixSort.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radixSort.d.ts","sourceRoot":"","sources":["../../../src/utils/radixSort.js"],"names":[],"mappings":"AAKA;;GAEG;AACH,uCAFW,MAAM,EAAE,YAyDlB;AAaD;;GAEG;AACH,8CAFW,MAAM,EAAE,YAoDlB"}
+{"version":3,"file":"radixSort.d.ts","sourceRoot":"","sources":["../../../src/utils/radixSort.js"],"names":[],"mappings":"AAiBA;;GAEG;AACH,uCAFW,MAAM,EAAE,YA8DlB;AAeD;;GAEG;AACH,8CAFW,MAAM,EAAE,YA0DlB"}

package/dist/src/utils/radixSort.js

@@ -3,12 +3,29 @@ const MAX_INTEGER_DIGIT = getDigits([MAX_INTEGER]);
 
 // TODO: Optimize more! Some ideas: https://travisdowns.github.io/blog/2019/05/22/sorting.html
 
+/**
+ * @param {number[]} arr An array of unsigned integers
+ */
+function checkIfSorted(arr) {
+    for (let i = 1; i < arr.length; i++) {
+        if (arr[i] < arr[i - 1]) {
+            return false;
+        }
+    }
+    return true;
+}
+
 /**
  * @param {number[]} arr An array of unsigned integers
  */
 export default function radixSort(arr) {
     const maxDigits = getDigits(arr);
 
+    // Early exit if already sorted
+    if (checkIfSorted(arr)) {
+        return arr;
+    }
+
     let buffer = new Array(arr.length);
     let bufferPtr = buffer;
     const counts = new Array(16);
@@ -69,7 +86,9 @@ export default function radixSort(arr) {
 function getDigits(arr) {
     let max = 0;
     for (let i = 0, n = arr.length; i < n; i++) {
-        max = Math.max(max, arr[i]);
+        if (arr[i] > max) {
+            max = arr[i];
+        }
     }
     return Math.floor(Math.log2(max) / 4) + 1;
 }
@@ -80,6 +99,12 @@ function getDigits(arr) {
 export function radixSortIntoLookupArray(arr) {
     const maxDigits = getDigits(arr);
     let indexes = Array.from({ length: arr.length }, (_, i) => i);
+
+    // Early exit if already sorted
+    if (checkIfSorted(arr)) {
+        return indexes;
+    }
+
     let buffer = new Array(arr.length);
     const counts = new Array(16);
 

package/dist/src/view/axisGridView.d.ts

@@ -9,7 +9,7 @@
  * @typedef {import("../spec/axis.js").Axis} Axis
  * @typedef {import("../spec/axis.js").GenomeAxis} GenomeAxis
  */
-export default class AxisGridView extends LayerView {
+export default class AxisGridView extends LayerView<import("../spec/view.js").LayerSpec> {
     /**
      * @param {Axis} axisProps
      * @param {import("../types/viewContext.js").default} context

package/dist/src/view/axisGridView.js

@@ -253,7 +253,6 @@ function createAxisGrid(axisProps, type) {
 
     return {
         name: "grid_layers",
-        configurableVisibility: false,
         resolve: {
             scale: {
                 [orient2channel(axisProps.orient)]: "forced",

package/dist/src/view/axisView.d.ts

@@ -22,7 +22,7 @@ export const ORIENT_CHANNELS: Record<import("../spec/axis.js").AxisOrient, impor
  * TODO: Implement grid
  *
  */
-export default class AxisView extends LayerView {
+export default class AxisView extends LayerView<import("../spec/view.js").LayerSpec> {
     /**
      *
      * @typedef {import("../spec/view.js").LayerSpec} LayerSpec

package/dist/src/view/concatView.d.ts

@@ -1,16 +1,19 @@
 /**
  * Creates a vertically or horizontally concatenated layout for children.
+ *
+ * @template {import("../spec/view.js").AnyConcatSpec} [TSpec=import("../spec/view.js").AnyConcatSpec]
+ * @extends {GridView<TSpec>}
  */
-export default class ConcatView extends GridView {
+export default class ConcatView<TSpec extends import("../spec/view.js").AnyConcatSpec = import("../spec/view.js").AnyConcatSpec> extends GridView<TSpec> {
     /**
      *
-     * @param {import("../spec/view.js").AnyConcatSpec} spec
+     * @param {TSpec} spec
      * @param {import("../types/viewContext.js").default} context
      * @param {import("./containerView.js").default} layoutParent
      * @param {import("./view.js").default} dataParent
      * @param {string} name
      */
-    constructor(spec: import("../spec/view.js").AnyConcatSpec, context: import("../types/viewContext.js").default, layoutParent: import("./containerView.js").default, dataParent: import("./view.js").default, name: string);
+    constructor(spec: TSpec, context: import("../types/viewContext.js").default, layoutParent: import("./containerView.js").default, dataParent: import("./view.js").default, name: string);
     /**
      * Adds a child spec dynamically. Intended for post-initialization updates.
      *

package/dist/src/view/concatView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"concatView.d.ts","sourceRoot":"","sources":["../../../src/view/concatView.js"],"names":[],"mappings":"AAIA;;GAEG;AACH;IACI;;;;;;;OAOG;IACH,kBANW,OAAO,iBAAiB,EAAE,aAAa,WACvC,OAAO,yBAAyB,EAAE,OAAO,gBACzC,OAAO,oBAAoB,EAAE,OAAO,cACpC,OAAO,WAAW,EAAE,OAAO,QAC3B,MAAM,EAiBhB;IA6BD;;;;;;;;;OASG;IACH,wBAJW,OAAO,iBAAiB,EAAE,QAAQ,UAClC,MAAM,GACJ,OAAO,CAAC,OAAO,WAAW,EAAE,OAAO,CAAC,CAIhD;IAED;;;;OAIG;IACH,qBAFW,MAAM,iBAIhB;;CA2EJ;qBA3JoB,wBAAwB"}
+{"version":3,"file":"concatView.d.ts","sourceRoot":"","sources":["../../../src/view/concatView.js"],"names":[],"mappings":"AAQA;;;;;GAKG;AACH,gCAHwD,KAAK,SAAhD,OAAQ,iBAAiB,EAAE,aAAc;IAIlD;;;;;;;OAOG;IACH,kBANW,KAAK,WACL,OAAO,yBAAyB,EAAE,OAAO,gBACzC,OAAO,oBAAoB,EAAE,OAAO,cACpC,OAAO,WAAW,EAAE,OAAO,QAC3B,MAAM,EAiBhB;IA6BD;;;;;;;;;OASG;IACH,wBAJW,OAAO,iBAAiB,EAAE,QAAQ,UAClC,MAAM,GACJ,OAAO,CAAC,OAAO,WAAW,EAAE,OAAO,CAAC,CAIhD;IAED;;;;OAIG;IACH,qBAFW,MAAM,iBAIhB;;CA2EJ;qBA9JoB,wBAAwB"}

package/dist/src/view/concatView.js

@@ -1,14 +1,21 @@
-import { isConcatSpec, isHConcatSpec, isVConcatSpec } from "./viewFactory.js";
+import {
+    isConcatSpec,
+    isHConcatSpec,
+    isVConcatSpec,
+} from "./viewSpecGuards.js";
 import GridView from "./gridView/gridView.js";
 import ContainerMutationHelper from "./containerMutationHelper.js";
 
 /**
  * Creates a vertically or horizontally concatenated layout for children.
+ *
+ * @template {import("../spec/view.js").AnyConcatSpec} [TSpec=import("../spec/view.js").AnyConcatSpec]
+ * @extends {GridView<TSpec>}
  */
 export default class ConcatView extends GridView {
     /**
      *
-     * @param {import("../spec/view.js").AnyConcatSpec} spec
+     * @param {TSpec} spec
      * @param {import("../types/viewContext.js").default} context
      * @param {import("./containerView.js").default} layoutParent
      * @param {import("./view.js").default} dataParent

package/dist/src/view/containerMutationHelper.d.ts

@@ -35,23 +35,23 @@ export default class ContainerMutationHelper {
             insertAt: (index: number, spec: import("../spec/view.js").ViewSpec | import("../spec/view.js").ImportSpec) => void;
             removeAt: (index: number) => void;
         };
-        insertView: (view: import("./view.js").default, index: number) => any;
+        insertView: (view: import("./view.js").default<import("../spec/view.js").ViewSpec>, index: number) => any;
         removeView: (index: number) => void;
-        prepareView?: (view: import("./view.js").default, index: number, insertionResult: any) => Promise<void>;
+        prepareView?: (view: import("./view.js").default<import("../spec/view.js").ViewSpec>, index: number, insertionResult: any) => Promise<void>;
         afterRemove?: (index: number) => Promise<void>;
         defaultName?: (index: number, spec: import("../spec/view.js").ViewSpec | import("../spec/view.js").ImportSpec) => string;
         requestLayout?: boolean;
     });
-    container: import("./containerView.js").default;
+    container: import("./containerView.js").default<import("../spec/view.js").ContainerSpec>;
     options: {
         getChildSpecs: () => {
             specs: (import("../spec/view.js").ViewSpec | import("../spec/view.js").ImportSpec)[];
             insertAt: (index: number, spec: import("../spec/view.js").ViewSpec | import("../spec/view.js").ImportSpec) => void;
             removeAt: (index: number) => void;
         };
-        insertView: (view: import("./view.js").default, index: number) => any;
+        insertView: (view: import("./view.js").default<import("../spec/view.js").ViewSpec>, index: number) => any;
         removeView: (index: number) => void;
-        prepareView?: (view: import("./view.js").default, index: number, insertionResult: any) => Promise<void>;
+        prepareView?: (view: import("./view.js").default<import("../spec/view.js").ViewSpec>, index: number, insertionResult: any) => Promise<void>;
         afterRemove?: (index: number) => Promise<void>;
         defaultName?: (index: number, spec: import("../spec/view.js").ViewSpec | import("../spec/view.js").ImportSpec) => string;
         requestLayout?: boolean;
@@ -63,7 +63,7 @@ export default class ContainerMutationHelper {
      * @param {number} [index]
      * @returns {Promise<View>}
      */
-    addChildSpec(childSpec: import("../spec/view.js").ViewSpec | import("../spec/view.js").ImportSpec, index?: number): Promise<import("./view.js").default>;
+    addChildSpec(childSpec: import("../spec/view.js").ViewSpec | import("../spec/view.js").ImportSpec, index?: number): Promise<import("./view.js").default<import("../spec/view.js").ViewSpec>>;
     /**
      * Removes a child by index and updates the backing spec list.
      *

package/dist/src/view/containerMutationHelper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"containerMutationHelper.d.ts","sourceRoot":"","sources":["../../../src/view/containerMutationHelper.js"],"names":[],"mappings":"AAOA;;;GAGG;AACH;IACI;;;;;;;;;;OAUG;IAEH;;;;;;;;;;OAUG;IAEH;;;OAGG;IACH,uBAHW,OAAO,oBAAoB,EAAE,OAAO;uBAX3B;mBARR,CAAC,yEAAqB,CAAC,EAAE;sBACtB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,IAAI;sBACpD,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;SAMF;oBACnB,CAAC,IAAI,6BAAM,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG;oBAClC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;sBACrB,CAAC,IAAI,6BAAM,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC;sBAClE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC;sBAChC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,MAAM;wBACpD,OAAO;OAW3B;IAFG,gDAA0B;IAC1B;uBAhBgB;mBARR,CAAC,yEAAqB,CAAC,EAAE;sBACtB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,IAAI;sBACpD,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;SAMF;oBACnB,CAAC,IAAI,6BAAM,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG;oBAClC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;sBACrB,CAAC,IAAI,6BAAM,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC;sBAClE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC;sBAChC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,MAAM;wBACpD,OAAO;MAUF;IAG1B;;;;;;OAMG;IACH,wBAJW,OAAO,iBAAiB,EAAE,QAAQ,GAAG,OAAO,iBAAiB,EAAE,UAAU,UACzE,MAAM,GACJ,OAAO,6BAAM,CA8CzB;IAED;;;;OAIG;IACH,qBAFW,MAAM,iBAehB;CACJ"}
+{"version":3,"file":"containerMutationHelper.d.ts","sourceRoot":"","sources":["../../../src/view/containerMutationHelper.js"],"names":[],"mappings":"AAOA;;;GAGG;AACH;IACI;;;;;;;;;;OAUG;IAEH;;;;;;;;;;OAUG;IAEH;;;OAGG;IACH,uBAHW,OAAO,oBAAoB,EAAE,OAAO;uBAX3B;mBARR,CAAC,yEAAqB,CAAC,EAAE;sBACtB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,IAAI;sBACpD,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;SAMF;oBACnB,CAAC,IAAI,iEAAM,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG;oBAClC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;sBACrB,CAAC,IAAI,iEAAM,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC;sBAClE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC;sBAChC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,MAAM;wBACpD,OAAO;OAW3B;IAFG,yFAA0B;IAC1B;uBAhBgB;mBARR,CAAC,yEAAqB,CAAC,EAAE;sBACtB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,IAAI;sBACpD,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;SAMF;oBACnB,CAAC,IAAI,iEAAM,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG;oBAClC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;sBACrB,CAAC,IAAI,iEAAM,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC;sBAClE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC;sBAChC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,MAAM;wBACpD,OAAO;MAUF;IAG1B;;;;;;OAMG;IACH,wBAJW,OAAO,iBAAiB,EAAE,QAAQ,GAAG,OAAO,iBAAiB,EAAE,UAAU,UACzE,MAAM,GACJ,OAAO,iEAAM,CA8CzB;IAED;;;;OAIG;IACH,qBAFW,MAAM,iBAehB;CACJ"}

package/dist/src/view/containerView.d.ts

@@ -1,18 +1,20 @@
 /**
  * Compositor view represents a non-leaf node in the view hierarchy.
+ *
+ * @template {import("../spec/view.js").ContainerSpec} [TSpec=import("../spec/view.js").ContainerSpec]
+ * @extends {View<TSpec>}
  */
-export default class ContainerView extends View {
+export default class ContainerView<TSpec extends import("../spec/view.js").ContainerSpec = import("../spec/view.js").ContainerSpec> extends View<TSpec> {
     /**
      *
-     * @param {import("../spec/view.js").ContainerSpec} spec
+     * @param {TSpec} spec
      * @param {import("../types/viewContext.js").default} context
      * @param {ContainerView} layoutParent
      * @param {import("./view.js").default} dataParent
      * @param {string} name
      * @param {import("./view.js").ViewOptions} [options]
      */
-    constructor(spec: import("../spec/view.js").ContainerSpec, context: import("../types/viewContext.js").default, layoutParent: ContainerView, dataParent: import("./view.js").default, name: string, options?: import("./view.js").ViewOptions);
-    spec: import("../spec/view.js").ContainerSpec;
+    constructor(spec: TSpec, context: import("../types/viewContext.js").default, layoutParent: ContainerView, dataParent: import("./view.js").default, name: string, options?: import("./view.js").ViewOptions);
     initializeChildren(): Promise<void>;
     /**
      * Generates an auto name that is guaranteed to be unique within this container
@@ -31,7 +33,7 @@ export default class ContainerView extends View {
      *
      * @param {string} name
      */
-    findDescendantByName(name: string): View;
+    findDescendantByName(name: string): View<import("../spec/view.js").ViewSpec>;
     /**
      * @returns {IterableIterator<View>}
      */

package/dist/src/view/containerView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"containerView.d.ts","sourceRoot":"","sources":["../../../src/view/containerView.js"],"names":[],"mappings":"AAEA;;GAEG;AACH;IAII;;;;;;;;OAQG;IACH,kBAPW,OAAO,iBAAiB,EAAE,aAAa,WACvC,OAAO,yBAAyB,EAAE,OAAO,gBACzC,aAAa,cACb,OAAO,WAAW,EAAE,OAAO,QAC3B,MAAM,YACN,OAAO,WAAW,EAAE,WAAW,EAMzC;IADG,8CAAgB;IAGpB,oCAEC;IAED;;;;;;OAMG;IACH,wBAHW,MAAM,GACJ,MAAM,CAMlB;IAsDD;;;OAGG;IACH,2BAHW,MAAM,EAAE,GACN,IAAI,CAsBhB;IAaD;;;OAGG;IACH,2BAFW,MAAM,QAchB;IAzGD;;OAEG;IACH,qBAFa,gBAAgB,CAAC,IAAI,CAAC,CAIlC;;CA8GJ;iBA5J4C,WAAW"}
+{"version":3,"file":"containerView.d.ts","sourceRoot":"","sources":["../../../src/view/containerView.js"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,mCAHwD,KAAK,SAAhD,OAAQ,iBAAiB,EAAE,aAAc;IAOlD;;;;;;;;OAQG;IACH,kBAPW,KAAK,WACL,OAAO,yBAAyB,EAAE,OAAO,gBACzC,aAAa,cACb,OAAO,WAAW,EAAE,OAAO,QAC3B,MAAM,YACN,OAAO,WAAW,EAAE,WAAW,EAMzC;IAED,oCAEC;IAED;;;;;;OAMG;IACH,wBAHW,MAAM,GACJ,MAAM,CAMlB;IAsDD;;;OAGG;IACH,2BAHW,MAAM,EAAE,GACN,IAAI,CAsBhB;IAaD;;;OAGG;IACH,2BAFW,MAAM,4CAchB;IAzGD;;OAEG;IACH,qBAFa,gBAAgB,CAAC,IAAI,CAAC,CAIlC;;CA8GJ;iBA/J4C,WAAW"}

package/dist/src/view/containerView.js

@@ -2,6 +2,9 @@ import View, { VISIT_STOP, VISIT_SKIP } from "./view.js";
 
 /**
  * Compositor view represents a non-leaf node in the view hierarchy.
+ *
+ * @template {import("../spec/view.js").ContainerSpec} [TSpec=import("../spec/view.js").ContainerSpec]
+ * @extends {View<TSpec>}
  */
 export default class ContainerView extends View {
     /** @type {Map<string, number>} */
@@ -9,7 +12,7 @@ export default class ContainerView extends View {
 
     /**
      *
-     * @param {import("../spec/view.js").ContainerSpec} spec
+     * @param {TSpec} spec
      * @param {import("../types/viewContext.js").default} context
      * @param {ContainerView} layoutParent
      * @param {import("./view.js").default} dataParent

package/dist/src/view/facetView.d.ts

@@ -13,7 +13,7 @@
  * @prop {FacetFieldDef} facetFieldDef
  *
  */
-export default class FacetView extends ContainerView {
+export default class FacetView extends ContainerView<import("../spec/view.js").ContainerSpec> {
     /**
      * @typedef {import("./view.js").default} View
      * @typedef {import("./layerView.js").default} LayerView
@@ -48,7 +48,7 @@ export default class FacetView extends ContainerView {
     getAccessor(channel: "row" | "column"): any;
     updateFacets(): void;
     updateLabels(): void;
-    getFacetGroups(): string[] | number[] | boolean[];
+    getFacetGroups(): number[] | boolean[] | string[];
     /**
      * @param {import("./renderingContext/viewRenderingContext.js").default} context
      * @param {import("./layout/rectangle.js").default} coords

package/dist/src/view/flowBuilder.d.ts

@@ -5,7 +5,7 @@
  * @param {(view: View) => boolean} [viewFilter]
  * @param {(view: View) => boolean} [viewInitializationPredicate]
  */
-export function buildDataFlow(root: import("./view.js").default, existingFlow?: DataFlow, viewFilter?: (view: import("./view.js").default) => boolean, viewInitializationPredicate?: (view: import("./view.js").default) => boolean): DataFlow;
+export function buildDataFlow(root: import("./view.js").default<import("../spec/view.js").ViewSpec>, existingFlow?: DataFlow, viewFilter?: (view: import("./view.js").default<import("../spec/view.js").ViewSpec>) => boolean, viewInitializationPredicate?: (view: import("./view.js").default<import("../spec/view.js").ViewSpec>) => boolean): DataFlow;
 /**
  * Changes the ChromPos channelDefs into FieldDefs and returns
  * LinearizeGenomicCoordinate transform(s) that should be inserted into

package/dist/src/view/flowBuilder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flowBuilder.d.ts","sourceRoot":"","sources":["../../../src/view/flowBuilder.js"],"names":[],"mappings":"AAyBA;;;;;;GAMG;AACH,gFALW,QAAQ,eAER,CAAC,IAAI,6BAAM,KAAK,OAAO,gCACvB,CAAC,IAAI,6BAAM,KAAK,OAAO,YAoPjC;AAuBD;;;;;;GAMG;AACH,2CAFW,OAAO,eAAe,EAAE,OAAO;;;IAoH5B;;;OAGG;;EAYhB;AAgCD;;;;;;GAMG;AACH,4BAFwB,CAAC,SAAZ,qCAAU,cAFZ,CAAC,iBACA,uCAAW;;;0BAwBG,OAAO,CAAC,QAAQ,CAAC,OAAO,qBAAqB,EAAE,KAAK,CAAC,CAAC;EAkB/E;qBAxfoB,qBAAqB;sBAPpB,sBAAsB"}
+{"version":3,"file":"flowBuilder.d.ts","sourceRoot":"","sources":["../../../src/view/flowBuilder.js"],"names":[],"mappings":"AAyBA;;;;;;GAMG;AACH,oHALW,QAAQ,eAER,CAAC,IAAI,iEAAM,KAAK,OAAO,gCACvB,CAAC,IAAI,iEAAM,KAAK,OAAO,YAoPjC;AAuBD;;;;;;GAMG;AACH,2CAFW,OAAO,eAAe,EAAE,OAAO;;;IAoH5B;;;OAGG;;EAYhB;AAgCD;;;;;;GAMG;AACH,4BAFwB,CAAC,SAAZ,qCAAU,cAFZ,CAAC,iBACA,uCAAW;;;0BAwBG,OAAO,CAAC,QAAQ,CAAC,OAAO,qBAAqB,EAAE,KAAK,CAAC,CAAC;EAkB/E;qBAxfoB,qBAAqB;sBAPpB,sBAAsB"}

package/dist/src/view/gridView/gridChild.d.ts

@@ -22,8 +22,8 @@ export default class GridChild {
      * @param {number} serial
      */
     constructor(view: import("../view.js").default, layoutParent: import("../containerView.js").default, serial: number);
-    layoutParent: import("../containerView.js").default;
-    view: import("../view.js").default;
+    layoutParent: import("../containerView.js").default<import("../../spec/view.js").ContainerSpec>;
+    view: import("../view.js").default<import("../../spec/view.js").ViewSpec>;
     serial: number;
     /** @type {UnitView} */
     background: UnitView;
@@ -41,7 +41,7 @@ export default class GridChild {
     title: UnitView;
     /** @type {Rectangle} */
     coords: Rectangle;
-    getChildren(): Generator<import("../view.js").default, void, unknown>;
+    getChildren(): Generator<import("../view.js").default<import("../../spec/view.js").ViewSpec>, void, unknown>;
     /**
      * Create view decorations, grid lines, axes, etc.
      */

package/dist/src/view/gridView/gridChild.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gridChild.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/gridChild.js"],"names":[],"mappings":"AAysBA;;;GAGG;AACH,iDAHW,OAAO,oBAAoB,EAAE,cAAc,GACzC,OAAO,oBAAoB,EAAE,QAAQ,CA8BjD;AAED;;;GAGG;AACH,uDAHW,OAAO,oBAAoB,EAAE,cAAc,GACzC,OAAO,oBAAoB,EAAE,QAAQ,CA6CjD;AAtwBD;IACI;;;;;;OAMG;IAEH;;;;OAIG;IACH,kBAJW,OAAO,YAAY,EAAE,OAAO,gBAC5B,OAAO,qBAAqB,EAAE,OAAO,UACrC,MAAM,EAgGhB;IA7FG,oDAAgC;IAChC,mCAAgB;IAChB,eAAoB;IAEpB,uBAAuB;IACvB,YADW,QAAQ,CACQ;IAE3B,uBAAuB;IACvB,kBADW,QAAQ,CACc;IAEjC,sFAAsF;IACtF,MADW,OAAO,CAAC,MAAM,CAAC,OAAO,oBAAoB,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAC/D;IAEd,+FAA+F;IAC/F,WADW,OAAO,CAAC,MAAM,CAAC,OAAO,oBAAoB,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC,CAC9D;IAEnB,mFAAmF;IACnF,YADW,OAAO,CAAC,MAAM,CAAC,OAAO,gBAAgB,EAAE,eAAe,EAAE,SAAS,CAAC,CAAC,CAC3D;IAEpB,4BAA4B;IAC5B,eADW,aAAa,CACM;IAE9B,uBAAuB;IACvB,OADW,QAAQ,CACG;IAEtB,wBAAwB;IACxB,QADW,SAAS,CACQ;IAgahC,sEAiBC;IAED;;OAEG;IACH,4BAwKC;IAED;;OAEG;IACH,yBAWC;IAED,uBAqBC;IAED,iCAEC;;CACJ;qBAxrBoB,gBAAgB;qBANK,gBAAgB;yBADjC,oBAAoB;sBASvB,gBAAgB;0BACZ,oBAAoB;sBALxB,wBAAwB;oBAF1B,sBAAsB"}
+{"version":3,"file":"gridChild.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/gridChild.js"],"names":[],"mappings":"AAysBA;;;GAGG;AACH,iDAHW,OAAO,oBAAoB,EAAE,cAAc,GACzC,OAAO,oBAAoB,EAAE,QAAQ,CA6BjD;AAED;;;GAGG;AACH,uDAHW,OAAO,oBAAoB,EAAE,cAAc,GACzC,OAAO,oBAAoB,EAAE,QAAQ,CA4CjD;AApwBD;IACI;;;;;;OAMG;IAEH;;;;OAIG;IACH,kBAJW,OAAO,YAAY,EAAE,OAAO,gBAC5B,OAAO,qBAAqB,EAAE,OAAO,UACrC,MAAM,EAgGhB;IA7FG,gGAAgC;IAChC,0EAAgB;IAChB,eAAoB;IAEpB,uBAAuB;IACvB,YADW,QAAQ,CACQ;IAE3B,uBAAuB;IACvB,kBADW,QAAQ,CACc;IAEjC,sFAAsF;IACtF,MADW,OAAO,CAAC,MAAM,CAAC,OAAO,oBAAoB,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAC/D;IAEd,+FAA+F;IAC/F,WADW,OAAO,CAAC,MAAM,CAAC,OAAO,oBAAoB,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC,CAC9D;IAEnB,mFAAmF;IACnF,YADW,OAAO,CAAC,MAAM,CAAC,OAAO,gBAAgB,EAAE,eAAe,EAAE,SAAS,CAAC,CAAC,CAC3D;IAEpB,4BAA4B;IAC5B,eADW,aAAa,CACM;IAE9B,uBAAuB;IACvB,OADW,QAAQ,CACG;IAEtB,wBAAwB;IACxB,QADW,SAAS,CACQ;IAgahC,6GAiBC;IAED;;OAEG;IACH,4BAwKC;IAED;;OAEG;IACH,yBAWC;IAED,uBAqBC;IAED,iCAEC;;CACJ;qBAxrBoB,gBAAgB;qBANK,gBAAgB;yBADjC,oBAAoB;sBASvB,gBAAgB;0BACZ,oBAAoB;sBALxB,wBAAwB;oBAF1B,sBAAsB"}

package/dist/src/view/gridView/gridChild.js

@@ -725,7 +725,6 @@ export function createBackground(viewBackground) {
     }
 
     return {
-        configurableVisibility: false,
         data: { values: [{}] },
         mark: {
             color: viewBackground.fill,
@@ -763,7 +762,6 @@ export function createBackgroundStroke(viewBackground) {
     // We are not using a rect mark because it is not optimized for outlines.
     // TODO: Implement "hollow" mesh for non-filled rectangles
     return {
-        configurableVisibility: false,
         resolve: {
             scale: { x: "excluded", y: "excluded" },
             axis: { x: "excluded", y: "excluded" },