higlass 1.13.5 → 2.0.0

package/app/scripts/api.js

@@ -1,22 +1,32 @@
 // @ts-nocheck
-import ReactDOM from 'react-dom';
-import createPubSub from 'pub-sub-es';
 import Ajv from 'ajv';
+import createPubSub from 'pub-sub-es';
+import ReactDOM from 'react-dom';
 
 import schema from '../schema.json';
 
-import { setTileProxyAuthHeader } from './services';
+import { getTileProxyAuthHeader, setTileProxyAuthHeader } from './services';
 
 import { getTrackObjectFromHGC } from './utils';
 
-import { MOUSE_TOOL_MOVE, MOUSE_TOOL_SELECT } from './configs';
-
 import { version } from '../../package.json';
+import {
+  MOUSE_TOOL_MOVE,
+  MOUSE_TOOL_SELECT,
+  MOUSE_TOOL_TRACK_SELECT,
+  SIZE_MODE_BOUNDED,
+  SIZE_MODE_BOUNDED_OVERFLOW,
+  SIZE_MODE_DEFAULT,
+  SIZE_MODE_OVERFLOW,
+  SIZE_MODE_SCROLL,
+} from './configs';
 
 const forceUpdate = (self) => {
   self.setState(self.state);
 };
 
+/** @typedef {ReturnType<typeof createApi>} HiGlassApi */
+
 const createApi = function api(context, pubSub) {
   /** @type {import('./HiGlassComponent').default} */
   const self = context;
@@ -100,7 +110,7 @@ const createApi = function api(context, pubSub) {
        * Get the currently set auth header
        */
       getAuthHeader() {
-        return setTileProxyAuthHeader();
+        return getTileProxyAuthHeader();
       },
 
       /**
@@ -152,7 +162,9 @@ const createApi = function api(context, pubSub) {
        */
       destroy() {
         destroy();
-        ReactDOM.unmountComponentAtNode(self.topDiv.parentNode);
+        if (self.topDivRef.current) {
+          ReactDOM.unmountComponentAtNode(self.topDivRef.current);
+        }
       },
 
       /**
@@ -193,7 +205,7 @@ const createApi = function api(context, pubSub) {
        * hgv.activateTool('select'); // Activate select tool
        * hgv.setRangeSelection1dSize(5000, 10000); // Force selections to be between 5 and 10 Kb
        */
-      setRangeSelection1dSize(minSize = 0, maxSize = Infinity) {
+      setRangeSelection1dSize(minSize = 0, maxSize = Number.POSITIVE_INFINITY) {
         self.setState({
           rangeSelection1dSize: [minSize, maxSize],
         });
@@ -367,6 +379,16 @@ const createApi = function api(context, pubSub) {
         });
       },
 
+      measureSize() {
+        self.measureSize();
+
+        for (const tiledPlot of Object.values(self.tiledPlots)) {
+          if (tiledPlot) {
+            tiledPlot.measureSize();
+          }
+        }
+      },
+
       /**
        * Show the track chooser which highlights tracks
        * when the mouse is over them.
@@ -391,7 +413,7 @@ const createApi = function api(context, pubSub) {
        * Hide the track chooser.
        */
       hideTrackChooser() {
-        this.setState({
+        self.setState({
           chooseTrackHandler: null,
         });
       },
@@ -587,6 +609,10 @@ const createApi = function api(context, pubSub) {
        */
       activateTool(tool) {
         switch (tool) {
+          case 'track-select':
+            self.setMouseTool(MOUSE_TOOL_TRACK_SELECT);
+            break;
+
           case 'select':
             self.setMouseTool(MOUSE_TOOL_SELECT);
             break;
@@ -597,6 +623,33 @@ const createApi = function api(context, pubSub) {
         }
       },
 
+      /**
+       * Set the size mode for the higlass container
+       *
+       * @param {string sizeMode The size mode for the container.
+       *                         The vailable options are 'default',
+       *                         'bounded', 'overflow' and 'scroll'
+       */
+      setSizeMode(sizeMode) {
+        switch (sizeMode) {
+          case 'bounded':
+            self.setSizeMode(SIZE_MODE_BOUNDED);
+            break;
+          case 'overflow':
+            self.setSizeMode(SIZE_MODE_OVERFLOW);
+            break;
+          case 'bounded-overflow':
+            self.setSizeMode(SIZE_MODE_BOUNDED_OVERFLOW);
+            break;
+          case 'scroll':
+            self.setSizeMode(SIZE_MODE_SCROLL);
+            break;
+          default:
+            self.setSizeMode(SIZE_MODE_DEFAULT);
+            break;
+        }
+      },
+
       /**
        * Get a Promise which returns a Blob containing a PNG for the current view.
        * It's possible to get string of the PNG bytes from that:
@@ -659,8 +712,7 @@ const createApi = function api(context, pubSub) {
       getLocation(viewId) {
         const wurstId = viewId
           ? self.xScales[viewId] && self.yScales[viewId] && viewId
-          : Object.values(self.tiledPlots)[0] &&
-            Object.values(self.tiledPlots)[0].props.uid;
+          : Object.values(self.tiledPlots)[0]?.props.uid;
 
         if (!wurstId) {
           return 'Please provide a valid view UUID sweetheart 😙';
@@ -743,6 +795,18 @@ const createApi = function api(context, pubSub) {
           typeof listenerId === 'object' ? listenerId.callback : listenerId;
 
         switch (event) {
+          case 'annotationCreated':
+            apiPubSub.unsubscribe('annotationCreated', callback);
+            break;
+
+          case 'annotationChanged':
+            apiPubSub.unsubscribe('annotationChanged', callback);
+            break;
+
+          case 'annotationRemoved':
+            apiPubSub.unsubscribe('annotationRemoved', callback);
+            break;
+
           case 'click':
             apiPubSub.unsubscribe('click', callback);
             break;
@@ -751,6 +815,10 @@ const createApi = function api(context, pubSub) {
             apiPubSub.unsubscribe('cursorLocation', callback);
             break;
 
+          case 'datasetInfo':
+            apiPubSub.unsubscribe('datasetInfo', callback);
+            break;
+
           case 'location':
             self.offLocationChange(viewId, listenerId);
             break;
@@ -798,7 +866,7 @@ const createApi = function api(context, pubSub) {
        *
        * **Event types**
        *
-       * ``click``: Returns a list of objects for each track that is below the click event.
+       * ``click``: Returns clicked objects. (Currently only clicks on 1D annotations are captured.)
        *
        * .. code-block:: javascript
        *
@@ -967,12 +1035,24 @@ const createApi = function api(context, pubSub) {
        */
       on(event, callback, viewId, callbackId) {
         switch (event) {
+          case 'annotationCreated':
+            return apiPubSub.subscribe('annotationCreated', callback);
+
+          case 'annotationChanged':
+            return apiPubSub.subscribe('annotationChanged', callback);
+
+          case 'annotationRemoved':
+            return apiPubSub.subscribe('annotationRemoved', callback);
+
           case 'click':
             return apiPubSub.subscribe('click', callback);
 
           case 'cursorLocation':
             return apiPubSub.subscribe('cursorLocation', callback);
 
+          case 'datasetInfo':
+            return apiPubSub.subscribe('datasetInfo', callback);
+
           case 'location':
             // returns a set of scales (xScale, yScale) on every zoom event
             return self.onLocationChange(viewId, callback, callbackId);

package/app/scripts/configs/available-track-types.js

@@ -23,7 +23,7 @@ import { DATATYPE_TO_TRACK_TYPE } from './datatype-to-track-type';
 export const AVAILABLE_TRACK_TYPES = (datatypes, orientation) => {
   const datatypesToTrackTypes = DATATYPE_TO_TRACK_TYPE(orientation);
   let availableTrackTypes = new Set(
-    Object.values(datatypesToTrackTypes).flatMap((x) => x),
+    Object.values(datatypesToTrackTypes).flat(),
   );
 
   for (const datatype of datatypes) {

package/app/scripts/configs/index.js

@@ -1,4 +1,3 @@
-// @ts-nocheck
 /* ------------------------------- Primitives ------------------------------- */
 
 export * from './primitives';
@@ -21,3 +20,9 @@ export {
   NUM_PRECOMP_SUBSETS_PER_1D_TTILE,
   NUM_PRECOMP_SUBSETS_PER_2D_TTILE,
 } from './dense-data-extrema-config';
+
+export const SIZE_MODE_DEFAULT = 'default';
+export const SIZE_MODE_BOUNDED = 'bounded';
+export const SIZE_MODE_OVERFLOW = 'overflow';
+export const SIZE_MODE_BOUNDED_OVERFLOW = 'bounded-overflow';
+export const SIZE_MODE_SCROLL = 'scroll';

package/app/scripts/configs/positions-by-datatype.js

@@ -3,8 +3,8 @@ import { TRACKS_INFO } from './tracks-info';
 
 export const POSITIONS_BY_DATATYPE = TRACKS_INFO.reduce(
   (positionsByDatatype, track) => {
-    // TODO: Found by eslint. This loop never iterates?
-    /* eslint-disable-next-line no-unreachable-loop */
+    // TODO: Found by Biome
+    // biome-ignore lint/correctness/noUnreachable: This loop never iterates?
     for (let i = 0; i < track.datatype.length; i++) {
       const datatype = track.datatype[i];
 

package/app/scripts/configs/primitives.js

@@ -12,6 +12,8 @@ export const MOUSE_TOOL_MOVE = 'move';
 
 export const MOUSE_TOOL_SELECT = 'select';
 
+export const MOUSE_TOOL_TRACK_SELECT = 'track-select';
+
 export const TILE_FETCH_DEBOUNCE = 100;
 
 // Number of milliseconds zoom-related actions (e.g., tile loading) are debounced

package/app/scripts/configs/themes.js

@@ -1,4 +1,3 @@
-// @ts-nocheck
 export const THEME_LIGHT = Symbol('Light theme');
 
 export const THEME_DARK = Symbol('Dark theme');

package/app/scripts/configs/tracks-info-by-type.js

@@ -2,14 +2,17 @@ import { TRACKS_INFO } from './tracks-info';
 
 /** @typedef {Record<string, import('./tracks-info').TrackInfo>} TracksInfoByType */
 
-export const TRACKS_INFO_BY_TYPE = TRACKS_INFO.reduce((tracksByType, track) => {
-  tracksByType[track.type] = track;
-  if (track.aliases) {
-    for (const alias of track.aliases) {
-      tracksByType[alias] = track;
+export const TRACKS_INFO_BY_TYPE = TRACKS_INFO.reduce(
+  (tracksByType, track) => {
+    tracksByType[track.type] = track;
+    if (track.aliases) {
+      for (const alias of track.aliases) {
+        tracksByType[alias] = track;
+      }
     }
-  }
-  return tracksByType;
-}, /** @type {TracksInfoByType} */ ({}));
+    return tracksByType;
+  },
+  /** @type {TracksInfoByType} */ ({}),
+);
 
 export default TRACKS_INFO_BY_TYPE;

package/app/scripts/configs/tracks-info.js

@@ -7,11 +7,11 @@ import {
   svg2DTilesIcon,
   svgArrowheadDomainsIcon,
   svgGeneAnnotationsIcon,
-  svgHorizontalLineIcon,
+  svgGeoMapIcon,
   svgHorizontal1dHeatmap,
+  svgHorizontalLineIcon,
   svgVertical1DAxisIcon,
   svgVertical1DTilesIcon,
-  svgGeoMapIcon,
 } from '../icons';
 
 /**
@@ -34,6 +34,7 @@ import {
  * @property {number=} defaultWidth
  * @property {string=} chromInfoPath
  * @property {boolean=} projection
+ * @property {Record<string, unknown>} [optionsInfo]
  */
 
 const osm = {

package/app/scripts/d3-context-menu.js

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { mouse, select, selectAll, event } from 'd3-selection';
+import { event, mouse, select, selectAll } from 'd3-selection';
 import slugid from 'slugid';
 
 import '../styles/d3-context-menu.css';
@@ -72,12 +72,11 @@ function contextMenu(menu, optsIn) {
   return function onContextMenu(
     data,
     index,
-    /* eslint-disable-next-line default-param-last */
+    // biome-ignore lint/style/useDefaultParameterLast:
     pMouseUp = false,
     clickAwayFunc,
     useMouse = false,
   ) {
-    const elm = this;
     let mousePos = null;
     const currentThis = this;
 
@@ -136,7 +135,7 @@ function contextMenu(menu, optsIn) {
       .on('click', (d) => {
         if (d.disabled) return; // do nothing if disabled
         if (!d.action) return; // headers have no "action"
-        d.action(elm, data, index, mousePos);
+        d.action(this, data, index, mousePos);
 
         // close all context menus
         selectAll('.d3-context-menu').style('display', 'none');

package/app/scripts/data-fetchers/DataFetcher.js

@@ -1,27 +1,22 @@
-import slugid from 'slugid';
 import { scaleLinear } from 'd3-scale';
+import slugid from 'slugid';
 
-// Utils
-import tts from '../utils/trim-trailing-slash';
-import dictValues from '../utils/dict-values';
-import minNonZero from '../utils/min-non-zero';
-import maxNonZero from '../utils/max-non-zero';
 import DenseDataExtrema1D from '../utils/DenseDataExtrema1D';
 import DenseDataExtrema2D from '../utils/DenseDataExtrema2D';
+import assert from '../utils/assert';
+import dictValues from '../utils/dict-values';
+import maxNonZero from '../utils/max-non-zero';
+import minNonZero from '../utils/min-non-zero';
+// Utils
+import tts from '../utils/trim-trailing-slash';
 
 // Services
 import * as tileProxy from '../services/tile-proxy';
+import { isResolutionsTilesetInfo } from '../utils/type-guards';
 
-/** @typedef {import('../types').DataConfig} DataConfig */
-/** @typedef {import('../types').TilesetInfo} TilesetInfo */
-/**
- * @template T
- * @typedef {import('../types').AbstractDataFetcher<T>} AbstractDataFetcher
- */
-/**
- * @template T
- * @typedef {import('../types').TileSource<T>} TileSource
- */
+/** @import { PubSub } from 'pub-sub-es' */
+/** @import { TilesetInfo, AbstractDataFetcher, TileSource, DataConfig, HandleTilesetInfoFinished } from '../types' */
+/** @import { CompletedTileData, TileResponse } from '../services/worker' */
 
 /**
  * @typedef Tile
@@ -54,16 +49,16 @@ function isTuple(x) {
 }
 
 /**
- * @param {import("pub-sub-es").PubSub} pubSub
+ * @param {PubSub} pubSub
  * @returns {TileSource<Tile>}
  */
 function createDefaultTileSource(pubSub) {
   return {
-    fetchTiles(request) {
-      const ids = request.tileIds;
-      return new Promise((done, _reject) => {
-        tileProxy.fetchTilesDebounced({ ...request, ids, done }, pubSub, true);
-      });
+    async fetchTiles(request) {
+      /** @type {Record<string, Tile>} */
+      // @ts-expect-error - TODO: Need to resolve these types together
+      const tileData = await tileProxy.fetchTilesDebounced(request, pubSub);
+      return tileData;
     },
     fetchTilesetInfo({ server, tilesetUid }) {
       return new Promise((resolve, reject) => {
@@ -88,11 +83,11 @@ function createDefaultTileSource(pubSub) {
   };
 }
 
-/** @implements {AbstractDataFetcher<Tile | DividedTile>} */
+/** @implements {AbstractDataFetcher<Tile | DividedTile, ResolvedDataConfig>} */
 export default class DataFetcher {
   /**
-   * @param {import('../types').DataConfig} dataConfig
-   * @param {import('pub-sub-es').PubSub} pubSub
+   * @param {DataConfig} dataConfig
+   * @param {PubSub} pubSub
    * @param {TileSource<Tile>} [tileSource]
    */
   constructor(dataConfig, pubSub, tileSource) {
@@ -113,7 +108,7 @@ export default class DataFetcher {
     this.dataConfig = JSON.parse(JSON.stringify(dataConfig));
     /** @type {string} */
     this.uuid = slugid.nice();
-    /** @type {import('pub-sub-es').PubSub} */
+    /** @type {PubSub} */
     this.pubSub = pubSub;
 
     if (dataConfig.children) {
@@ -146,7 +141,7 @@ export default class DataFetcher {
 
   /**
    * Obtain tileset infos for all of the tilesets listed
-   * @param {import('../types').HandleTilesetInfoFinished} finished - A callback that will be called
+   * @param {HandleTilesetInfoFinished} finished - A callback that will be called
    */
   tilesetInfo(finished) {
     // if this track has a url, server and filetype
@@ -177,7 +172,7 @@ export default class DataFetcher {
    * infos have the same dimensions and then return a common
    * one.
    *
-   * @param {import('../types').HandleTilesetInfoFinished} finished - A callback that will be called
+   * @param {HandleTilesetInfoFinished} finished - A callback that will be called
    *  when all tileset infos are loaded
    */
   tilesetInfoAfterRegister(finished) {
@@ -257,7 +252,11 @@ export default class DataFetcher {
       return this.fetchHorizontalSection(receivedTiles, tileIds, true);
     }
 
-    if (!this.dataConfig.children && this.dataConfig.tilesetUid) {
+    if (
+      !this.dataConfig.children &&
+      this.dataConfig.tilesetUid &&
+      this.dataConfig.server
+    ) {
       // no children, just return the fetched tiles as is
       const promise = this._tileSource.fetchTiles({
         id: slugid.nice(),
@@ -325,7 +324,7 @@ export default class DataFetcher {
     const result = new Float32Array(numeratorData.length);
 
     for (let i = 0; i < result.length; i++) {
-      if (denominatorData[i] === 0.0) result[i] = NaN;
+      if (denominatorData[i] === 0.0) result[i] = Number.NaN;
       else result[i] = numeratorData[i] / denominatorData[i];
     }
 
@@ -385,10 +384,10 @@ export default class DataFetcher {
     /** @type {boolean[]} */
     const mirrored = [];
 
-    const { slicePos, tilesetInfo } = this.dataConfig;
-    if (!slicePos || !tilesetInfo) {
-      throw new Error('No slice position or tileset info');
-    }
+    const { slicePos, tilesetInfo, server } = this.dataConfig;
+    assert(slicePos, 'No slice position in dataConfig.');
+    assert(server, 'No server in dataConfig.');
+    assert(tilesetInfo, 'No tilesetInfo in dataConfig.');
 
     for (const tileId of tileIds) {
       const parts = tileId.split('.');
@@ -404,7 +403,7 @@ export default class DataFetcher {
       // this needs to be consolidated into one function eventually
       let yTiles = [];
 
-      if ('resolutions' in tilesetInfo) {
+      if (isResolutionsTilesetInfo(tilesetInfo)) {
         const sortedResolutions = tilesetInfo.resolutions
           .map((x) => +x)
           .sort((a, b) => b - a);
@@ -442,7 +441,7 @@ export default class DataFetcher {
     // actually fetch the new tileIds
     const promise = this._tileSource.fetchTiles({
       id: slugid.nice(),
-      server: this.dataConfig.server,
+      server: server,
       tileIds: newTileIds.map((x) => `${this.dataConfig.tilesetUid}.${x}`),
     });
 

package/app/scripts/data-fetchers/genbank-fetcher.js

@@ -1,12 +1,9 @@
-import slugid from 'slugid';
-import pako from 'pako';
 import genbankParser from 'genbank-parser';
+import slugid from 'slugid';
 
-/**
- * @template T
- * @typedef {import('../types').AbstractDataFetcher<T>} AbstractDataFetcher
- */
+import decompress from '../utils/decompress';
 
+/** @import { AbstractDataFetcher } from '../types' */
 /** @typedef {{ start: number, end: number, type: 'filler', strand: "+" | "-" }} FillerSegment */
 
 /**
@@ -205,18 +202,6 @@ function gbToJsonAndFeatures(gbText) {
   return { json: gbJson, features };
 }
 
-/**
- * Extract the response from a fetch request
- * @param {Response} response
- * @param {{ gzipped: boolean }} options
- * @returns {Promise<string>}
- */
-async function extractResponse(response, { gzipped }) {
-  if (!gzipped) return response.text();
-  const buffer = await response.arrayBuffer();
-  return pako.inflate(buffer, { to: 'string' });
-}
-
 /**
  * @typedef GenbankDataConfig
  * @prop {string=} url
@@ -227,7 +212,7 @@ async function extractResponse(response, { gzipped }) {
  * @typedef {Array<GeneAnnotation> & { tilePositionId?: string }} GenbankTile
  */
 
-/** @implements {AbstractDataFetcher<GenbankTile>} */
+/** @implements {AbstractDataFetcher<GenbankTile, GenbankDataConfig>} */
 class GBKDataFetcher {
   /** @param {GenbankDataConfig} dataConfig */
   constructor(dataConfig) {
@@ -247,7 +232,13 @@ class GBKDataFetcher {
         mode: 'cors',
         redirect: 'follow',
         method: 'GET',
-      }).then((r) => extractResponse(r, { gzipped: extension === '.gz' }));
+      }).then((originalResponse) => {
+        const normalizedResponse =
+          extension === '.gz'
+            ? decompress(originalResponse, { format: 'gzip' })
+            : originalResponse;
+        return normalizedResponse.text();
+      });
     } else if (dataConfig.text) {
       textPromise = Promise.resolve(dataConfig.text);
     } else {
@@ -313,8 +304,8 @@ class GBKDataFetcher {
 
     for (const tileId of tileIds) {
       const parts = tileId.split('.');
-      const z = parseInt(parts[0], 10);
-      const x = parseInt(parts[1], 10);
+      const z = Number.parseInt(parts[0], 10);
+      const x = Number.parseInt(parts[1], 10);
 
       if (Number.isNaN(x) || Number.isNaN(z)) {
         console.warn('Invalid tile zoom or position:', z, x);

package/app/scripts/data-fetchers/local-tile-fetcher.js

@@ -1,13 +1,9 @@
 import { tileResponseToData } from '../services';
 
-/** @typedef {import('../types').TilesetInfo} TilesetInfo */
-/**
- * @template T
- * @typedef {import('../types').AbstractDataFetcher<T>} AbstractDataFetcher
- */
+/** @import { AbstractDataFetcher, TilesetInfo } from '../types' */
 
 // TODO: Add type for LocalTile
-/** @typedef {{}} LocalTile */
+/** @typedef {{tilePositionId?: string}} LocalTile */
 
 /**
  * @typedef LocalTileDataConfig
@@ -15,7 +11,7 @@ import { tileResponseToData } from '../services';
  * @property {Record<string, TilesetInfo>} tilesetInfo
  */
 
-/** @implements {AbstractDataFetcher<LocalTile>} */
+/** @implements {AbstractDataFetcher<LocalTile, LocalTileDataConfig>} */
 class LocalTileDataFetcher {
   /** @param {LocalTileDataConfig} dataConfig */
   constructor(dataConfig) {
@@ -32,7 +28,12 @@ class LocalTileDataFetcher {
   /** @param {import('../types').HandleTilesetInfoFinished} callback */
   async tilesetInfo(callback) {
     this.tilesetInfoLoading = false;
-    callback(this.tilesetInfoData);
+    await new Promise((resolve) =>
+      setTimeout(() => {
+        callback(this.tilesetInfoData);
+        resolve(true);
+      }, 0),
+    );
     return this.tilesetInfoData;
   }
 
@@ -61,6 +62,7 @@ class LocalTileDataFetcher {
 
     for (const tileId of tileIds) {
       ret[tileId] = this.tilesData[`localtile.${tileId}`];
+      ret[tileId].tilePositionId = tileId;
     }
     receivedTiles(ret);
     return ret;