higlass 1.13.2 → 1.13.3

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

@@ -2,6 +2,13 @@ import slugid from 'slugid';
 import pako from 'pako';
 import genbankParser from 'genbank-parser';
 
+/**
+ * @template T
+ * @typedef {import('../types').AbstractDataFetcher<T>} AbstractDataFetcher
+ */
+
+/** @typedef {{ start: number, end: number, type: 'filler', strand: "+" | "-" }} FillerSegment */
+
 /**
  * Take a list of genes, which can be any list with elements containing
  * { start, end } fields and return another list of { start, end }
@@ -10,8 +17,14 @@ import genbankParser from 'genbank-parser';
  * The segments should be sorted by their start coordinate.
  *
  * The scale parameter is the number of base pairs per pixels
+ *
+ * @param {ArrayLike<{ start: number, end: number }>} segments
+ * @param {number} scale
+ * @param {"+" | "-"} strand
+ * @returns {Array<FillerSegment>}
  */
-function collapse(segments, scale) {
+function collapse(segments, scale, strand) {
+  /** @type {Array<FillerSegment>} */
   const collapsed = [];
 
   // the maximum distance we allow between segments before collapsing them
@@ -38,6 +51,7 @@ function collapse(segments, scale) {
         type: 'filler',
         start: currStart,
         end: currEnd,
+        strand,
       });
 
       // start a new collapsed segment
@@ -51,6 +65,7 @@ function collapse(segments, scale) {
     start: currStart,
     end: currEnd,
     type: 'filler',
+    strand,
   });
 
   return collapsed;
@@ -58,7 +73,9 @@ function collapse(segments, scale) {
 
 /**
  * Shuffles array in place.
- * @param {Array} a items An array containing the items.
+ * @template T
+ * @param {Array<T>} a items An array containing the items.
+ * @returns {Array<T>} The (mutated) shuffled array
  */
 function shuffle(a) {
   for (let i = a.length - 1; i > 0; i--) {
@@ -70,12 +87,67 @@ function shuffle(a) {
   return a;
 }
 
-function gbToHgGene(gb) {
+/** @typedef {import('genbank-parser').ParsedGenbank["features"][number]} GenbankFeature */
+
+/**
+ * @typedef FillerGeneAnnotation
+ * @prop {number} xStart
+ * @prop {number} xEnd
+ * @prop {'+' | '-'} strand
+ * @prop {string} uid
+ * @prop {'filler'} type
+ * @prop {[]} fields
+ */
+
+/**
+ * @typedef CompleteGeneAnnotation
+ * @prop {number} xStart
+ * @prop {number} xEnd
+ * @prop {'+' | '-'} strand
+ * @prop {number} chrOffset
+ * @prop {number} importance
+ * @prop {string} uid
+ * @prop {string=} type
+ * @prop {[
+ *    chr: 'chrom',
+ *    start: number,
+ *    end: number,
+ *    name: string,
+ *    importance: number,
+ *    strand: '+' | '-',
+ *    _unknown0: string,
+ *    _unknown1: string,
+ *    type: string,
+ *    name: string,
+ *    start: string,
+ *    end: string,
+ *    start: string,
+ *    end: string,
+ *  ]} fields
+ */
+
+/** @typedef {CompleteGeneAnnotation | FillerGeneAnnotation} GeneAnnotation */
+
+/**
+ * @param {GenbankFeature | FillerSegment} x
+ * @returns {x is FillerSegment}
+ */
+function isFillerSegment(x) {
+  return x.type === 'filler';
+}
+
+/**
+ * Convert a genbank feature to a higlass gene annotation
+ *
+ * @param {GenbankFeature | FillerSegment} gb
+ * @returns {GeneAnnotation}
+ */
+function genbankFeatureToHiGlassGeneAnnotation(gb) {
   const importance = gb.end - gb.start;
   const strand = gb.strand === 1 ? '+' : '-';
   const uid = slugid.nice();
 
-  if (gb.type === 'filler') {
+  if (isFillerSegment(gb)) {
     // this is annotation that was generated by collapsing genes and is
     // only meant to show that there is something there.
     return {
@@ -115,68 +187,97 @@ function gbToHgGene(gb) {
   };
 }
 
-/** Convert genbank text to a JSON representation and extract features * */
-const gbToJsonAndFeatures = (gbText) => {
+/**
+ * Convert genbank text to a JSON representation and extract features
+ * @param {string} gbText
+ * @returns {{
+ *  json: import('genbank-parser').ParsedGenbank[],
+ *  features: GenbankFeature[],
+ * }}
+ */
+function gbToJsonAndFeatures(gbText) {
   const gbJson = genbankParser(gbText);
   const features = shuffle(
     gbJson[0].features
       .filter((f) => f.type !== 'source')
       .sort((a, b) => a.start - b.start),
   );
+  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' });
+}
 
-  return [gbJson, features];
-};
+/**
+ * @typedef GenbankDataConfig
+ * @prop {string=} url
+ * @prop {string=} text
+ */
 
+/**
+ * @typedef {Array<GeneAnnotation> & { tilePositionId?: string }} GenbankTile
+ */
+
+/** @implements {AbstractDataFetcher<GenbankTile>} */
 class GBKDataFetcher {
+  /** @param {GenbankDataConfig} dataConfig */
   constructor(dataConfig) {
+    /** @type {GenbankDataConfig} */
     this.dataConfig = dataConfig;
+    /** @type {string} */
     this.trackUid = slugid.nice();
+    /** @type {string} */
+    this.errorTxt = '';
+
+    /** @type {Promise<string>} */
+    let textPromise;
 
     if (dataConfig.url) {
       const extension = dataConfig.url.slice(dataConfig.url.length - 3);
-      const gzipped = extension === '.gz';
-      this.errorTxt = '';
-
-      this.dataPromise = fetch(dataConfig.url, {
+      textPromise = fetch(dataConfig.url, {
         mode: 'cors',
         redirect: 'follow',
         method: 'GET',
-      })
-        .then((response) =>
-          gzipped ? response.arrayBuffer() : response.text(),
-        )
-        .then((buffer) => {
-          const gffText = gzipped
-            ? pako.inflate(buffer, { to: 'string' })
-            : buffer;
-          [this.gbJson, this.cdss] = gbToJsonAndFeatures(gffText);
-        });
+      }).then((r) => extractResponse(r, { gzipped: extension === '.gz' }));
     } else if (dataConfig.text) {
-      this.dataPromise = new Promise((resolve, reject) => {
-        [this.gbJson, this.cdss] = gbToJsonAndFeatures(dataConfig.text);
-        resolve();
-      });
+      textPromise = Promise.resolve(dataConfig.text);
+    } else {
+      throw new Error('No data or URL specified');
     }
+    /** @type {Promise<ReturnType<typeof gbToJsonAndFeatures>>} */
+    this.gbDataPromise = textPromise.then((text) => gbToJsonAndFeatures(text));
   }
 
+  /**
+   * @param {import('../types').HandleTilesetInfoFinished} [callback]
+   * @returns {Promise<import('../types').LegacyTilesetInfo | undefined>}
+   */
   tilesetInfo(callback) {
     this.tilesetInfoLoading = true;
-
-    return this.dataPromise
-      .then(() => {
+    return this.gbDataPromise
+      .then((gbData) => {
         this.tilesetInfoLoading = false;
 
         const TILE_SIZE = 1024;
-        let retVal = {};
-        // retVal[this.trackUid] = {
-        retVal = {
+        /** @satisfies {import('../types').LegacyTilesetInfo} */
+        const retVal = {
+          name: `genbank-${this.trackUid}`,
           tile_size: TILE_SIZE,
           max_zoom: Math.ceil(
-            Math.log(this.gbJson[0].size / TILE_SIZE) / Math.log(2),
+            Math.log(gbData.json[0].size / TILE_SIZE) / Math.log(2),
           ),
-          max_width: this.gbJson[0].size,
+          max_width: gbData.json[0].size,
           min_pos: [0],
-          max_pos: [this.gbJson[0].size],
+          max_pos: [gbData.json[0].size],
         };
 
         if (callback) {
@@ -193,13 +294,21 @@ class GBKDataFetcher {
             error: `Error parsing genbank: ${err}`,
           });
         }
+        return undefined;
       });
   }
 
-  fetchTilesDebounced(receivedTiles, tileIds) {
+  /**
+   * @param {(tiles: Record<string, GenbankTile>) => void} receivedTiles
+   * @param {string[]} tileIds
+   * @returns {Promise<Record<string, GenbankTile>>}
+   */
+  async fetchTilesDebounced(receivedTiles, tileIds) {
+    /** @type {Record<string, GenbankTile>} */
     const tiles = {};
-
+    /** @type {string[]} */
     const validTileIds = [];
+    /** @type {Promise<GeneAnnotation[]>[]} */
     const tilePromises = [];
 
     for (const tileId of tileIds) {
@@ -216,62 +325,71 @@ class GBKDataFetcher {
       tilePromises.push(this.tile(z, x));
     }
 
-    Promise.all(tilePromises).then((values) => {
-      for (let i = 0; i < values.length; i++) {
-        const validTileId = validTileIds[i];
-        tiles[validTileId] = values[i];
-        tiles[validTileId].tilePositionId = validTileId;
-      }
+    const values = await Promise.all(tilePromises);
+    for (let i = 0; i < values.length; i++) {
+      const validTileId = validTileIds[i];
+      tiles[validTileId] = values[i];
+      tiles[validTileId].tilePositionId = validTileId;
+    }
 
-      receivedTiles(tiles);
-    });
-    // tiles = tileResponseToData(tiles, null, tileIds);
+    receivedTiles(tiles);
     return tiles;
   }
 
-  tile(z, x) {
-    return this.tilesetInfo().then((tsInfo) => {
-      const tileWidth = +tsInfo.max_width / 2 ** +z;
-
-      // get the bounds of the tile
-      const minX = tsInfo.min_pos[0] + x * tileWidth;
-      const maxX = tsInfo.min_pos[0] + (x + 1) * tileWidth;
-
-      const filtered = this.cdss.filter((v) => v.end > minX && v.start < maxX);
-      const scaleFactor = 1024 / 2 ** (tsInfo.max_zoom - z);
-
-      const collapsedPlus = collapse(
-        filtered.filter((v) => v.strand === 1),
-        scaleFactor,
-      );
-      const collapsedMinus = collapse(
-        filtered.filter((v) => v.strand !== 1),
-        scaleFactor,
-      );
-
-      collapsedPlus.forEach((v) => {
-        v.strand = '+';
-      });
-      collapsedMinus.forEach((v) => {
-        v.strand = '-';
-      });
-
-      let values = [];
-      const TILE_CAPACITY = 20;
-      // fill the tile with entries that are within it
-      for (let i = 0; i < this.cdss.length; i++) {
-        if (values.length >= TILE_CAPACITY) break;
+  /**
+   * @param {number} z
+   * @param {number} x
+   * @returns {Promise<GeneAnnotation[]>}
+   */
+  async tile(z, x) {
+    const [tsInfo, gbData] = await Promise.all([
+      this.tilesetInfo(),
+      this.gbDataPromise,
+    ]);
+    if (!tsInfo) {
+      throw new Error('No tileset info');
+    }
 
-        if (this.cdss[i].end >= minX && this.cdss[i].start <= maxX) {
-          values.push(this.cdss[i]);
-        }
+    const tileWidth = +tsInfo.max_width / 2 ** +z;
+
+    // get the bounds of the tile
+    const minX = tsInfo.min_pos[0] + x * tileWidth;
+    const maxX = tsInfo.min_pos[0] + (x + 1) * tileWidth;
+
+    const filtered = gbData.features.filter(
+      (v) => v.end > minX && v.start < maxX,
+    );
+    const scaleFactor = 1024 / 2 ** (tsInfo.max_zoom - z);
+
+    /** @type {Array<FillerSegment>} */
+    const collapsedPlus = collapse(
+      filtered.filter((v) => v.strand === 1),
+      scaleFactor,
+      '+',
+    );
+
+    /** @type {Array<FillerSegment>} */
+    const collapsedMinus = collapse(
+      filtered.filter((v) => v.strand !== 1),
+      scaleFactor,
+      '-',
+    );
+
+    /** @type {Array<GenbankFeature | FillerSegment>} */
+    const values = [];
+    const TILE_CAPACITY = 20;
+    // fill the tile with entries that are within it
+    for (let i = 0; i < gbData.features.length; i++) {
+      if (values.length >= TILE_CAPACITY) {
+        break;
       }
-
-      values = [...values, ...collapsedPlus, ...collapsedMinus];
-      // values = values.concat(collapsedPlus).concat(collapsedMinus);
-      // we're not going to take into account importance
-      return values.map((v) => gbToHgGene(v));
-    });
+      if (gbData.features[i].end >= minX && gbData.features[i].start <= maxX) {
+        values.push(gbData.features[i]);
+      }
+    }
+    return [values, collapsedPlus, collapsedMinus].flatMap((v) =>
+      v.map(genbankFeatureToHiGlassGeneAnnotation),
+    );
   }
 }
 

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 export { default as DataFetcher } from './DataFetcher';
 export { default as GBKDataFetcher } from './genbank-fetcher';
 export { default as LocalDataFetcher } from './local-tile-fetcher';

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

@@ -1,24 +1,50 @@
 import { tileResponseToData } from '../services';
 
+/** @typedef {import('../types').TilesetInfo} TilesetInfo */
+/**
+ * @template T
+ * @typedef {import('../types').AbstractDataFetcher<T>} AbstractDataFetcher
+ */
+
+// TODO: Add type for LocalTile
+/** @typedef {{}} LocalTile */
+
+/**
+ * @typedef LocalTileDataConfig
+ * @property {Record<string, LocalTile>} tiles
+ * @property {Record<string, TilesetInfo>} tilesetInfo
+ */
+
+/** @implements {AbstractDataFetcher<LocalTile>} */
 class LocalTileDataFetcher {
+  /** @param {LocalTileDataConfig} dataConfig */
   constructor(dataConfig) {
+    /** @type {LocalTileDataConfig} */
     this.dataConfig = dataConfig;
-
+    /** @type {TilesetInfo} */
     this.tilesetInfoData = Object.values(this.dataConfig.tilesetInfo)[0];
+    /** @type {Record<string, LocalTile>} */
+    this.tilesData = {};
+    /** @type {boolean} */
+    this.tilesetInfoLoading = true;
   }
 
-  tilesetInfo(callback) {
+  /** @param {import('../types').HandleTilesetInfoFinished} callback */
+  async tilesetInfo(callback) {
     this.tilesetInfoLoading = false;
-
     callback(this.tilesetInfoData);
+    return this.tilesetInfoData;
   }
 
   /** We expect there to be a tilesetUid in the provided tilesetInfo
    * and tiles data since tileResponseToData needs it
    *
    * It is also easier for users to paste in request responses for debugging.
+   *
+   * @param {(tiles: Record<string, LocalTile>) => void} receivedTiles
+   * @param {string[]} tileIds
    */
-  fetchTilesDebounced(receivedTiles, tileIds) {
+  async fetchTilesDebounced(receivedTiles, tileIds) {
     this.tilesData = {};
 
     for (const key of Object.keys(this.dataConfig.tiles)) {
@@ -27,6 +53,7 @@ class LocalTileDataFetcher {
       this.tilesData[newKey] = this.dataConfig.tiles[key];
     }
 
+    /** @type {Record<string, LocalTile>} */
     const ret = {};
 
     const newTileIds = tileIds.map((x) => `localtile.${x}`);
@@ -36,8 +63,14 @@ class LocalTileDataFetcher {
       ret[tileId] = this.tilesData[`localtile.${tileId}`];
     }
     receivedTiles(ret);
+    return ret;
   }
 
+  /**
+   * @param {number} z
+   * @param {number} x
+   * @returns {void}
+   */
   tile(z, x) {}
 }
 

package/app/scripts/hglib.jsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React from 'react';
 import ReactDOM from 'react-dom';
 import HiGlassComponent from './HiGlassComponent';

package/app/scripts/hocs/with-modal.jsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 

package/app/scripts/hocs/with-pub-sub.jsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 

package/app/scripts/hocs/with-theme.jsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 

package/app/scripts/icons.jsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React from 'react';
 import PropTypes from 'prop-types';
 import { select } from 'd3-selection';

package/app/scripts/mixwith.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /* eslint-disable max-classes-per-file */
 
 // used by apply() and isApplicationOf()

package/app/scripts/options-info.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 // A better position of this file would be under \configs,
 // but this file imports HeatmapOptions that contains React
 // components, so having this file near track implementations

package/app/scripts/plugins/available-for-plugins.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * Code that is available to plugin tracks.
  */

package/app/scripts/plugins/get-data-fetcher.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   DataFetcher,
   GBKDataFetcher,

package/app/scripts/plugins/index.js

@@ -1,2 +1,3 @@
+// @ts-nocheck
 export { default as getDataFetcher } from './get-data-fetcher';
 export { default as AVAILABLE_FOR_PLUGINS } from './available-for-plugins';

package/app/scripts/services/chrom-info.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { tsvParseRows } from 'd3-dsv';
 import { parseChromsizesRows } from '../utils';
 

package/app/scripts/services/dom-event.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 class DomEvent {
   constructor(pubSub) {
     /**

package/app/scripts/services/element-resize-listener.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { getXylofon } from '../utils';
 
 let isInit = false;

package/app/scripts/services/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 export { default as chromInfo } from './chrom-info';
 export { default as createDomEvent } from './dom-event';
 export { default as ElementResizeListener } from './element-resize-listener';

package/app/scripts/services/tile-proxy.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { range } from 'd3-array';
 import slugid from 'slugid';
 
@@ -404,15 +405,16 @@ export function calculateTileAndPosInTile(
  * All the parameters except the first should be present in the
  * tileset_info returned by the server.
  *
- * @param zoomLevel: The zoom level at which to find the tiles (can be
+ * @param {number} zoomLevel - The zoom level at which to find the tiles (can be
  *   calculated using this.calcaulteZoomLevel, but needs to synchronized across
  *   both x and y scales so should be calculated externally)
- * @param scale: A d3 scale mapping data domain to visible values
- * @param minX: The minimum possible value in the dataset
- * @param maxX: The maximum possible value in the dataset
- * @param maxZoom: The maximum zoom value in this dataset
- * @param maxDim: The largest dimension of the tileset (e.g., width or height)
+ * @param {import('../type').Scale} scale - A d3 scale mapping data domain to visible values
+ * @param {number} minX - The minimum possible value in the dataset
+ * @param {number} maxX - The maximum possible value in the dataset
+ * @param {number} maxZoom - The maximum zoom value in this dataset
+ * @param {number} maxDim - The largest dimension of the tileset (e.g., width or height)
  *   (roughlty equal to 2 ** maxZoom * tileSize * tileResolution)
+ * @returns {number[]} The indices of the tiles that should be visible
  */
 export const calculateTiles = (
   zoomLevel,
@@ -462,10 +464,12 @@ export const calculateTileWidth = (tilesetInfo, zoomLevel, binsPerTile) => {
  * Calculate the tiles that sould be visisble given the resolution and
  * the minX and maxX values for the region
  *
- * @param resolution: The number of base pairs per bin
- * @param scale: The scale to use to calculate the currently visible tiles
- * @param minX: The minimum x position of the tileset
- * @param maxX: The maximum x position of the tileset
+ * @param {number} resolution - The number of base pairs per bin
+ * @param {import('../type').Scale} scale - The scale to use to calculate the currently visible tiles
+ * @param {number} minX - The minimum x position of the tileset
+ * @param {number} maxX - The maximum x position of the tileset
+ * @param {number=} pixelsPerTile - The number of pixels per tile
+ * @returns {number[]} The indices of the tiles that should be visible
  */
 export const calculateTilesFromResolution = (
   resolution,