higlass 1.13.5 → 2.0.0

package/app/scripts/types.ts

@@ -1,11 +1,72 @@
-/* eslint-disable */
-
-import type { THEME_DARK, THEME_LIGHT } from './configs';
+import type * as configs from './configs';
+import type { ChromsizeRow } from './utils/parse-chromsizes-rows';
+
+export type Theme = typeof configs.THEME_DARK | typeof configs.THEME_LIGHT;
+export type SizeMode =
+  | typeof configs.SIZE_MODE_DEFAULT
+  | typeof configs.SIZE_MODE_BOUNDED
+  | typeof configs.SIZE_MODE_OVERFLOW
+  | typeof configs.SIZE_MODE_BOUNDED_OVERFLOW
+  | typeof configs.SIZE_MODE_SCROLL;
+
+// TODO: Generate from 'schema.json'
+export type HiGlassViewConfig = Record<string, unknown>;
+
+/** Additional options for how the {@link HiGlassComponent} is drawn and behaves */
+export interface HiGlassOptions {
+  /** An auth token to be included with every tile request. */
+  authToken?: string;
+  /**
+   * Whether the component should be sized to fit within the enclosing div.
+   *
+   * If `false`, the component will grow as needed to fit the tracks within it.
+   */
+  bounded?: boolean;
+  /**
+   * Whether the layout be changed.
+   *
+   * If `false`, the view headers will be hidden. Overrides the `editable` value in the viewconf if specified.
+   */
+  editable?: boolean;
+  /** A set of default options that will be used for newly added tracks. */
+  defaultTrackOptions?: {
+    /** Options for all tracks types. */
+    all?: Record<string, unknown>;
+    /** Options for specific tracks types. */
+    trackSpecific?: Record<string, Record<string, unknown>>;
+  };
+  viewMarginTop?: number;
+  viewMarginBottom?: number;
+  viewMarginLeft?: number;
+  viewMarginRight?: number;
+  viewPaddingTop?: number;
+  viewPaddingBottom?: number;
+  viewPaddingLeft?: number;
+  viewPaddingRight?: number;
+  theme?: 'dark' | 'light';
+  isDarkTheme?: boolean;
+  moustTool?: 'select' | 'track-select';
+  pluginTracks?: Record<string, unknown>;
+  pluginDataFetchers?: Record<string, unknown>;
+  pixelPreciseMarginPadding?: boolean;
+  sizeMode?: SizeMode;
+  renderer?: 'canvas';
+  onViewConfLoaded?: () => void;
+  cheatCodesEnabled?: boolean;
+  rangeSelectionOnAlt?: boolean;
+  tracksEditable?: boolean;
+  zoomFixed?: boolean;
+  containerPaddingX?: number;
+  containerPaddingY?: number;
+  broadcastMousePositionGlobally?: boolean;
+  showGlobalMousePosition?: boolean;
+  globalMousePosition?: boolean;
+}
 
 export type Scale = import('d3-scale').ScaleContinuousNumeric<number, number>;
 
-export type TrackPosition =
-  typeof import('./configs/primitives').TRACK_LOCATIONS[number];
+// biome-ignore format: Biome formatting messes up tsc parsing
+export type TrackPosition = typeof import('./configs/primitives').TRACK_LOCATIONS[number];
 
 export type ChromInfo<Name extends string = string> = {
   cumPositions: { id?: number; pos: number; chr: Name }[];
@@ -15,17 +76,19 @@ export type ChromInfo<Name extends string = string> = {
 };
 
 export type UnknownTrackConfig = {
-  uid: string;
-  options: Record<string, unknown>;
   type: string;
-  position: TrackPosition;
-  data?: Record<string, unknown>;
+  uid: string;
   server: string;
   tilesetUid: string;
+  options?: Record<string, unknown>;
+  position?: TrackPosition;
+  data?: Record<string, unknown>;
   coordSystem?: unknown;
+  height?: number;
+  width?: number;
   x?: number;
   y?: number;
-  chromInfoPath: string;
+  chromInfoPath?: string;
   projectionXDomain?: [number, number];
   projectionYDomain?: [number, number];
   registerViewportChanged?: unknown;
@@ -34,18 +97,20 @@ export type UnknownTrackConfig = {
 };
 
 export type CombinedTrackConfig = {
-  uid: string;
-  options: Record<string, unknown>;
-  contents: TrackConfig[];
   type: 'combined';
-  position: TrackPosition;
+  contents: Array<UnknownTrackConfig>;
+  uid: string;
+  server?: string;
+  height?: number;
+  width?: number;
+  tilesetUid?: string;
+  options?: Record<string, unknown>;
+  position?: TrackPosition;
   data?: Record<string, unknown>;
-  server: string;
-  tilesetUid: string;
   coordSystem?: unknown;
   x?: number;
   y?: number;
-  chromInfoPath: string;
+  chromInfoPath?: string;
   projectionXDomain?: [number, number];
   projectionYDomain?: [number, number];
   registerViewportChanged?: unknown;
@@ -55,26 +120,27 @@ export type CombinedTrackConfig = {
 
 export type TrackConfig = UnknownTrackConfig | CombinedTrackConfig;
 
-export type TrackVisitor = {
-  (track: TrackConfig, position: null | TrackPosition): void;
-};
-
-type ZoomedFunction = {
-  (
-    xScale: Scale,
-    yScale: Scale,
-    k?: number,
-    x?: number,
-    y?: number,
-    xPosition?: number,
-    yPosition?: number,
-  ): void;
-};
+export type TrackVisitor = (
+  track: TrackConfig,
+  position: null | TrackPosition,
+) => void;
+
+type ZoomedFunction = (
+  xScale: Scale,
+  yScale: Scale,
+  k?: number,
+  x?: number,
+  y?: number,
+  xPosition?: number,
+  yPosition?: number,
+) => void;
 
 export interface TrackObject {
   draw(): void;
   rerender(options: unknown): void;
   delayDrawing: boolean;
+  flipText?: boolean;
+  originalTrack?: TrackObject;
   childTracks?: TrackObject[];
   createdTracks: Record<string, TrackObject>;
   refScalesChanged(x: Scale, y: Scale): void;
@@ -87,10 +153,11 @@ export interface TrackObject {
   remove(): void;
   movedY(extent: number): void;
   zoomedY(yPosition: number, wheelDelta: number): void;
+  fetching?: Set<unknown>;
+  tilesetInfo?: TilesetInfo;
+  chromInfo?: unknown; // TODO
 }
 
-export type Theme = typeof THEME_DARK | typeof THEME_LIGHT;
-
 /** Minimum information describing a tileset. */
 export type TilesetInfoShared = {
   name: string;
@@ -101,6 +168,8 @@ export type TilesetInfoShared = {
   tile_size?: number;
   max_tile_width?: number;
   transforms?: { name: string; value: string }[];
+  chromsizes?: ArrayLike<ChromsizeRow>;
+  error?: string;
 };
 
 export type LegacyTilesetInfo = TilesetInfoShared & {
@@ -120,18 +189,18 @@ export type DataConfig = {
   filetype?: string;
   coordSystem?: string;
   children?: DataConfig[];
-  options?: unknown;
+  // biome-ignore lint/suspicious/noExplicitAny: We can't know what the options are
+  options?: Record<string, any>;
   type?: string;
   slicePos?: number;
 };
 
-export type HandleTilesetInfoFinished = {
-  (info: null): void;
-  (info: TilesetInfo, tilesetUid?: string): void;
-  (error: { error: string }): void;
-};
+export type HandleTilesetInfoFinished = (
+  info: TilesetInfo | null | { error: string },
+  tilesetUid?: string,
+) => void;
 
-export interface AbstractDataFetcher<TileType> {
+export interface AbstractDataFetcher<TileType, DataConfig> {
   tilesetInfo(
     callback?: HandleTilesetInfoFinished,
   ): Promise<TilesetInfo | undefined>;
@@ -139,23 +208,25 @@ export interface AbstractDataFetcher<TileType> {
     receivedTiles: (tiles: Record<string, TileType>) => void,
     tileIds: string[],
   ): Promise<Record<string, TileType>>;
+  dataConfig: DataConfig;
 }
 
 // Tileset API
 
-type TilesRequest = {
+export type TilesRequest = {
   id: string;
-  server?: string;
-  tileIds: string[];
-  options?: unknown;
+  tileIds: Array<string>;
+  server: string;
+  // biome-ignore lint/suspicious/noExplicitAny: We can't know what the options are
+  options?: Record<string, any>;
 };
 
-type TilesetInfoRequest = {
+export type TilesetInfoRequest = {
   server: string;
   tilesetUid: string;
 };
 
-type RegisterTilesetRequest = {
+export type RegisterTilesetRequest = {
   server: string;
   url: string;
   filetype: string;

package/app/scripts/utils/LruCache.js

@@ -209,14 +209,14 @@ function keys() {
  */
 function forEach(fun, context, desc) {
   let entry;
-  /* eslint-disable no-param-reassign */
+
   if (context === true) {
     desc = true;
     context = undefined;
   } else if (typeof context !== 'object') {
     context = this;
   }
-  /* eslint-enable */
+
   if (desc) {
     entry = this.tail;
     while (entry) {
@@ -244,6 +244,7 @@ function toJSON() {
 }
 
 /** Returns a String representation */
+// biome-ignore lint/suspicious/noShadowRestrictedNames: Scoped to this module
 function toString() {
   let s = '';
   let entry = this.head;

package/app/scripts/utils/assert.js

@@ -0,0 +1,19 @@
+/**
+ * Make an assertion.
+ *
+ * Usage
+ * @example
+ * ```ts
+ * const value: boolean = Math.random() <= 0.5;
+ * assert(value, "value is greater than than 0.5!");
+ * value // true
+ * ```
+ *
+ * @param {unknown} expression - The expression to test.
+ * @param {string=} msg - The optional message to display if the assertion fails.
+ * @returns {asserts expression}
+ * @throws an {@link Error} if `expression` is not truthy.
+ */
+export default function assert(expression, msg = '') {
+  if (!expression) throw new Error(msg);
+}

package/app/scripts/utils/background-task-scheduler.js

@@ -41,6 +41,7 @@ class BackgroundTaskScheduler {
    * @param {string | null=} trackId
    * @return {void}
    */
+
   /**
    * If `taskData` is `null` the `taskHandler` will eventaully be called without any arguments.
    *
@@ -50,6 +51,7 @@ class BackgroundTaskScheduler {
    * @param {string | null=} trackId
    * @return {void}
    */
+
   /**
    * @param {(data: any) => void} taskHandler
    * @param {any} taskData

package/app/scripts/utils/color-domain-to-rgba-array.js

@@ -1,24 +1,34 @@
-// @ts-nocheck
-import { scaleLinear } from 'd3-scale';
 import { range } from 'd3-array';
 import { rgb } from 'd3-color';
+import { scaleLinear } from 'd3-scale';
+
+/** @typedef {[r: number, g: number, b: number, a: number]} Color */
 
 /**
  * Convert a color domain to a 255 element array of [r,g,b,a]
  * values (all from 0 to 255). The last color (255) will always be
  * transparent
+ *
+ * @param {readonly [start: string, end: string]} colorRange
+ * @param {boolean} noTansparent
+ * @returns {Array<Color>}
  */
 const colorDomainToRgbaArray = (colorRange, noTansparent = false) => {
   // we should always have at least two values in the color range
   const domain = colorRange.map((x, i) => i * (255 / (colorRange.length - 1)));
 
-  const d3Scale = scaleLinear().domain(domain).range(colorRange);
+  const d3Scale = scaleLinear().domain(domain).range(
+    // @ts-expect-error - d3-color types aren't correctly inferred here
+    colorRange,
+  );
 
   const fromX = noTansparent ? 255 : 254;
 
+  /** @type {Array<Color>} */
   const rgbaArray = range(fromX, -1, -1)
     .map(d3Scale)
     .map((x) => {
+      // @ts-expect-error - d3-color support 0-1 ranges but not in types
       const r = rgb(x);
       return [r.r, r.g, r.b, r.opacity * 255];
     });

package/app/scripts/utils/copy-text-to-clipboard.js

@@ -0,0 +1,36 @@
+/** @param {string} text */
+function fallbackCopyTextToClipboard(text) {
+  const textArea = document.createElement('textarea');
+  textArea.value = text;
+
+  // Avoid scrolling to bottom
+  textArea.style.top = '0';
+  textArea.style.left = '0';
+  textArea.style.position = 'fixed';
+
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+
+  try {
+    document.execCommand('copy');
+  } catch (err) {
+    // console.error('Fallback: Oops, unable to copy', err);
+  }
+
+  document.body.removeChild(textArea);
+}
+
+/** @param {string} text */
+export default function copyTextToClipboard(text) {
+  if (!navigator.clipboard) {
+    fallbackCopyTextToClipboard(text);
+    return;
+  }
+  navigator.clipboard.writeText(text).then(
+    () => {},
+    (err) => {
+      // console.error('Async: Could not copy text: ', err);
+    },
+  );
+}

package/app/scripts/utils/decompress.js

@@ -0,0 +1,33 @@
+import assert from './assert.js';
+
+/**
+ * Decompress a compressed data source.
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/DecompressionStream DecompressionStream API}
+ *
+ * @example
+ * ```typescript
+ * const compressed = new Uint8Array([
+ *   0x1f, 0x8b, 0x08, 0x00, 0x1e, 0xc0, 0x7e, 0x67, 0x00, 0x03, 0xf3, 0x48,
+ *   0xcd, 0xc9, 0xc9, 0xd7, 0x51, 0x28, 0xcf, 0x2f, 0xca, 0x49, 0x51, 0x04,
+ *   0x00, 0xe6, 0xc6, 0xe6, 0xeb, 0x0d, 0x00, 0x00, 0x00
+ * ]);
+ * console.log(await decompress(compressed, { format: "gzip" }).text()); // "Hello, world!"
+ * ```
+ *
+ * @param {BodyInit | Response} data - The compressed data.
+ * @param {Object} options
+ * @param {CompressionFormat} options.format
+ * @param {AbortSignal=} options.signal
+ * @returns {Response} A new response for decompressed data.
+ *
+ * @see {@link https://github.com/manzt/manzt/blob/1380bb/utils/decompress.js source}
+ */
+export default function decompress(data, options) {
+  const { format, signal } = options;
+  const response = data instanceof Response ? data : new Response(data);
+  assert(response.body, 'Response does not include a body.');
+  return new Response(
+    response.body.pipeThrough(new DecompressionStream(format), { signal }),
+  );
+}

package/app/scripts/utils/default-tracks.js

@@ -0,0 +1,46 @@
+// @ts-nocheck
+import { DEFAULT_TRACKS_FOR_DATATYPE, TRACKS_INFO_BY_TYPE } from '../configs';
+
+/** Get the default tracks for a datatype. Uses the known track definitions as
+ * well as any extra definitions that may be passed in. */
+export default function getDefaultTracksForDatatype(
+  datatype,
+  otherDefaultTracks,
+) {
+  if (window.higlassTracksByType) {
+    // Extend `TRACKS_INFO_BY_TYPE` with the configs of plugin tracks.
+    Object.keys(window.higlassTracksByType).forEach((pluginTrackType) => {
+      TRACKS_INFO_BY_TYPE[pluginTrackType] =
+        window.higlassTracksByType[pluginTrackType].config;
+    });
+  }
+
+  if (!(datatype in DEFAULT_TRACKS_FOR_DATATYPE) && !otherDefaultTracks) {
+    console.warn('unknown data type:', datatype);
+    return undefined;
+  }
+
+  const orientationToPositions = {
+    '1d-horizontal': ['top', 'bottom', 'left', 'right'],
+    '2d': ['center'],
+    '1d-vertical': ['left', 'right'],
+  };
+
+  const defaultTracks = DEFAULT_TRACKS_FOR_DATATYPE[datatype] || {};
+
+  if (otherDefaultTracks) {
+    for (const trackType of otherDefaultTracks) {
+      if (!TRACKS_INFO_BY_TYPE[trackType]) {
+        console.warn('unknown track type', trackType);
+      } else {
+        for (const position of orientationToPositions[
+          TRACKS_INFO_BY_TYPE[trackType].orientation
+        ]) {
+          defaultTracks[position] = trackType;
+        }
+      }
+    }
+  }
+
+  return defaultTracks;
+}

package/app/scripts/utils/dict-items.js

@@ -19,6 +19,7 @@ const dictItems = (dictionary) => {
   const keyValues = [];
 
   for (const key in dictionary) {
+    // biome-ignore lint/suspicious/noPrototypeBuiltins:
     if (dictionary.hasOwnProperty(key)) {
       keyValues.push([key, dictionary[key]]);
     }

package/app/scripts/utils/dict-keys.js

@@ -13,6 +13,7 @@ export default function dictKeys(dictionary) {
 
   for (const key in dictionary) {
     // @ts-expect-error - TS inference not good enough to infer the correct type
+    // biome-ignore lint/suspicious/noPrototypeBuiltins:
     if (dictionary.hasOwnProperty(key)) {
       keys.push(key);
     }

package/app/scripts/utils/dict-values.js

@@ -10,6 +10,7 @@ export default function dictValues(dictionary) {
   const values = [];
 
   for (const key in dictionary) {
+    // biome-ignore lint/suspicious/noPrototypeBuiltins:
     if (dictionary.hasOwnProperty(key)) {
       values.push(dictionary[key]);
     }

package/app/scripts/utils/expand-combined-tracks.js

@@ -1,19 +1,23 @@
-// @ts-nocheck
+import { isCombinedTrackConfig } from './type-guards';
+
+/** @import * as t from '../types' */
+
 /**
  * Go through a list of tracks and expand combined
  * tracks.
  *
- * @param {list} tracks: A list of tracks some of which might be combined
- * @returns {list} tracks: A list of tracks without combined
+ * @param {Array<t.TrackConfig>} trackList - A list of tracks some of which might be combined
+ * @returns {Array<t.UnknownTrackConfig>} A list of tracks without combined
  */
 const expandCombinedTracks = (trackList) => {
+  /** @type {Array<t.UnknownTrackConfig>} */
   let newTracks = [];
 
-  for (let i = 0; i < trackList.length; i++) {
-    if (trackList[i].contents) {
-      newTracks = newTracks.concat(trackList[i].contents);
+  for (const track of trackList) {
+    if (isCombinedTrackConfig(track)) {
+      newTracks = newTracks.concat(track.contents);
     } else {
-      newTracks.push(trackList[i]);
+      newTracks.push(track);
     }
   }
 

package/app/scripts/utils/fill-in-min-widths.js

@@ -1,48 +1,73 @@
-// @ts-nocheck
-// Configs
 import {
   MIN_HORIZONTAL_HEIGHT,
   MIN_VERTICAL_WIDTH,
   TRACKS_INFO_BY_TYPE,
 } from '../configs';
 
+/** @import * as t from '../types' */
+
 /**
- * If tracks don't have specified dimensions, add in the known
- * minimums
+ * @typedef CompleteTracks
+ * @property {Array<t.TrackConfig>} center
+ * @property {Array<t.TrackConfig>} left
+ * @property {Array<t.TrackConfig>} right
+ * @property {Array<t.TrackConfig>} top
+ * @property {Array<t.TrackConfig>} bottom
+ * @property {Array<t.TrackConfig>} whole
+ * @property {Array<t.TrackConfig>} gallery
+ */
+
+/**
+ * @template {t.TrackPosition} K
+ * @template {Array<t.TrackConfig>} T
+ * @typedef {Array<T[number] & { width: number }>} WithMinWidth
+ */
+
+/**
+ * If tracks don't have specified dimensions, add in the known minimums
+ *
+ * WARNING: Mutates `tracks` argument
+ *
+ * @template {Partial<CompleteTracks>} T
+ * @param {T} tracks
+ * @returns {{
+ *  [K in t.TrackPosition]: K extends keyof T ? T[K] extends undefined ? Array<t.TrackConfig> : T[K] : Array<t.TrackConfig>
+ * }}
  *
  * Operates on the tracks stored for this TiledPlot.
  */
 const fillInMinWidths = (tracks) => {
-  const horizontalLocations = ['top', 'bottom', 'gallery'];
-  const verticalLocations = ['left', 'right', 'gallery'];
+  // biome-ignore format: nicer to have as one line
+  const horizontalLocations = /** @type {const} */ (['top', 'bottom', 'gallery']);
+  const verticalLocations = /** @type {const} */ (['left', 'right', 'gallery']);
 
   // first make sure all track types are specified
   // this will make the code later on simpler
-  tracks.center = tracks.center || [];
-  tracks.left = tracks.left || [];
-  tracks.right = tracks.right || [];
-  tracks.top = tracks.top || [];
-  tracks.bottom = tracks.bottom || [];
-  tracks.whole = tracks.whole || [];
-  tracks.gallery = tracks.gallery || [];
+  tracks.center ??= [];
+  tracks.left ??= [];
+  tracks.right ??= [];
+  tracks.top ??= [];
+  tracks.bottom ??= [];
+  tracks.whole ??= [];
+  tracks.gallery ??= [];
 
   horizontalLocations
     .map((horizontalLocation) => tracks[horizontalLocation])
     .forEach((horizontalTracks) =>
-      horizontalTracks.forEach((track) => {
+      (horizontalTracks ?? []).forEach((track) => {
         const trackInfo = TRACKS_INFO_BY_TYPE[track.type];
-        const defaultOptions = (trackInfo && trackInfo.defaultOptions) || {};
+        const defaultOptions = trackInfo?.defaultOptions || {};
         const options = track.options
           ? { ...defaultOptions, ...track.options } // values in track.options take precedence
           : defaultOptions;
 
         if (options.minHeight !== undefined && track.height === undefined) {
+          // @ts-expect-error - minHeight could be anything that's not undefined
           track.height = options.minHeight;
         }
 
         if (track.height === undefined) {
-          track.height =
-            (trackInfo && trackInfo.defaultHeight) || MIN_HORIZONTAL_HEIGHT;
+          track.height = trackInfo?.defaultHeight || MIN_HORIZONTAL_HEIGHT;
         }
       }),
     );
@@ -50,25 +75,26 @@ const fillInMinWidths = (tracks) => {
   verticalLocations
     .map((verticalLocation) => tracks[verticalLocation])
     .forEach((verticalTracks) =>
-      verticalTracks.forEach((track) => {
+      (verticalTracks ?? []).forEach((track) => {
         const trackInfo = TRACKS_INFO_BY_TYPE[track.type];
-        const defaultOptions = (trackInfo && trackInfo.defaultOptions) || {};
+        const defaultOptions = trackInfo?.defaultOptions || {};
 
         const options = track.options
           ? { ...defaultOptions, ...track.options } // values in track.options take precedence
           : defaultOptions;
 
         if (options.minWidth !== undefined && track.width === undefined) {
+          // @ts-expect-error - minWidth could be anything that's not undefined
           track.width = options.minWidth;
         }
 
         if (track.width === undefined) {
-          track.width =
-            (trackInfo && trackInfo.defaultWidth) || MIN_VERTICAL_WIDTH;
+          track.width = trackInfo?.defaultWidth || MIN_VERTICAL_WIDTH;
         }
       }),
     );
 
+  // @ts-expect-error - TS cannot infer that we have made the type correctly
   return tracks;
 };
 

package/app/scripts/utils/flatten.js

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import reduce from './reduce';
 
 /**

package/app/scripts/utils/get-aggregation-function.js

@@ -1,4 +1,4 @@
-import { mean, sum, variance, deviation } from 'd3-array';
+import { deviation, mean, sum, variance } from 'd3-array';
 
 /** @typedef {(values: number[]) => number | undefined} Aggregation */