higlass 1.13.5 → 2.0.0

package/app/scripts/services/worker.js

@@ -1,4 +1,4 @@
-import { scaleLog, scaleLinear } from 'd3-scale';
+import { scaleLinear, scaleLog } from 'd3-scale';
 
 // utils
 import DenseDataExtrema1D from '../utils/DenseDataExtrema1D';
@@ -11,9 +11,9 @@ import selectedItemsToSize from '../utils/selected-items-to-size';
  * when selectedRowsOptions have been passed to workerSetPix().
  *
  * @param {ArrayLike<number>} data - The (2D) tile data array.
- * @param {[numRows: number, numCols: number]} shape - Array shape (number of rows and columns).
+ * @param {readonly [numRows: number, numCols: number]} shape - Array shape (number of rows and columns).
  * @param {(pixDataIndex: number, dataPoint: number) => void} setPixData - The setPixData function created by workerSetPix().
- * @param {number[] | number[][]} selectedRows - Row indices, for ordering and filtering rows. Used by the HorizontalMultivecTrack.
+ * @param {Array<number | Array<number>>} selectedRows - Row indices, for ordering and filtering rows. Used by the HorizontalMultivecTrack.
  * @param {'mean' | 'sum' | 'variance' | 'deviation'} selectedRowsAggregationMode - The aggregation function to use ("mean", "sum", etc).
  * @param {boolean} selectedRowsAggregationWithRelativeHeight - Whether the height of row groups should be relative to the size of the group.
  * @param {'client' | 'server'} selectedRowsAggregationMethod - Where will the aggregation be performed? Possible values: "client", "server".
@@ -98,7 +98,7 @@ function setPixDataForSelectedRows(
 
 /**
  * @typedef SelectedRowsOptions
- * @property {number[] | number[][]} selectedRows - Row indices, for ordering and filtering rows. Used by the HorizontalMultivecTrack.
+ * @property {Array<number | Array<number>>} selectedRows - Row indices, for ordering and filtering rows. Used by the HorizontalMultivecTrack.
  * @property {'mean' | 'sum' | 'variance' | 'deviation'} selectedRowsAggregationMode - The aggregation function to use ("mean", "sum", etc).
  * @property {boolean} selectedRowsAggregationWithRelativeHeight - Whether the height of row groups should be relative to the size of the group.
  * @property {'client' | 'server'} selectedRowsAggregationMethod - Where will the aggregation be performed? Possible values: "client", "server".
@@ -110,15 +110,15 @@ function setPixDataForSelectedRows(
  * (and subsequently passed to a PIXI sprite).
  *
  * @param {number} size - `data` parameter length. Often set to a tile's `tile.tileData.dense.length` value.
- * @param {Array<number>} data - The tile data array.
+ * @param {Array<number> | Float32Array} data - The tile data array.
  * @param {'log' | 'linear'} valueScaleType 'log' or 'linear'.
  * @param {[number, number]} valueScaleDomain
  * @param {number} pseudocount - The pseudocount is generally the minimum non-zero value and is
  * used so that our log scaling doesn't lead to NaN values.
- * @param {Array<[r: number, g: number, b: number, a: number]>} colorScale
+ * @param {ReadonlyArray<readonly [r: number, g: number, b: number, a: number]>} colorScale
  * @param {boolean} ignoreUpperRight
  * @param {boolean} ignoreLowerLeft
- * @param {[numRows: number, numCols: number] | null} shape - Array `[numRows, numCols]`, used when iterating over a subset of rows,
+ * @param {readonly [numRows: number, numCols: number] | null} shape - Array `[numRows, numCols]`, used when iterating over a subset of rows,
  * when one needs to know the width of each column.
  * @param {[r: number, g: number, b: number, a: number] | null} zeroValueColor - The color to use for rendering zero data values, [r, g, b, a].
  * @param {Partial<SelectedRowsOptions> | null} selectedRowsOptions - Rendering options when using a `selectRows` track option.
@@ -380,7 +380,8 @@ function uint16ArrayToFloat32Array(uint16array) {
 
 /**
  * @typedef TileResponse
- * @property {string=} dense - a base64 encoded string
+ * @property {string} [dense] - a base64 encoded string
+ * @property {string} [tilePositionId] - The position of the tile
  */
 
 /**
@@ -391,7 +392,7 @@ function uint16ArrayToFloat32Array(uint16array) {
  * @template {TileResponse} T
  * @param {Record<string, T>} inputData
  * @param {string} server
- * @param {string[]} theseTileIds
+ * @param {ReadonlyArray<string>} theseTileIds
  *
  * @returns {Record<string, CompletedTileData<T>>}
  *
@@ -468,41 +469,43 @@ export function tileResponseToData(inputData, server, theseTileIds) {
 /**
  * Fetch tiles from the server.
  *
- * @param {string} outUrl
- * @param {string} server
- * @param {string[]} theseTileIds
- * @param {string} authHeader
- * @param {(data: Record<string, CompletedTileData<TileResponse>>) => void} done
- * @param {Record<string, unknown>} requestBody
+ * @template {TileResponse} T
+ *
+ * @param {Object} request
+ * @param {string} request.server
+ * @param {ReadonlyArray<string>} request.tileIds
+ * @param {ReadonlyArray<{ tilesetUid: string, tileIds: Array<string>, options?: Record<string, unknown> }>} request.body
+ * @param {Object} options
+ * @param {string | null} [options.authHeader]
+ * @param {import("pub-sub-es").PubSub} [options.pubSub]
+ * @param {string} options.sessionId
  */
-export function workerGetTiles(
-  outUrl,
-  server,
-  theseTileIds,
-  authHeader,
-  done,
-  requestBody,
-) {
+export function workerFetchTiles(request, options) {
   /** @type {Record<string, string>} */
   const headers = {
     'content-type': 'application/json',
   };
 
-  if (authHeader) headers.Authorization = authHeader;
+  if (options.authHeader) headers.Authorization = options.authHeader;
+
+  const renderParams = request.tileIds.map((x) => `d=${x}`).join('&');
+  const url = `${request.server}/tiles/?${renderParams}&s=${options.sessionId}`;
 
-  fetch(outUrl, {
+  options.pubSub?.publish('requestSent', url);
+  return fetch(url, {
     credentials: 'same-origin',
     headers,
-    ...(requestBody && Object.keys(requestBody).length > 0
+    ...(request.body?.length > 0
       ? {
           method: 'POST',
-          body: JSON.stringify(requestBody),
+          body: JSON.stringify(request.body),
         }
       : {}),
   })
     .then((response) => response.json())
     .then((data) => {
-      done(tileResponseToData(data, server, theseTileIds));
+      options.pubSub?.publish('requestReceived', url);
+      return tileResponseToData(data, request.server, request.tileIds);
     })
     .catch((err) => console.warn('err:', err));
 }

package/app/scripts/test-helpers/index.js

@@ -1,9 +1,10 @@
-// @ts-nocheck
 export {
   changeOptions,
   waitForJsonComplete,
   waitForTilesLoaded,
   waitForTransitionsFinished,
+  waitForScalesStabilized,
+  waitForComponentReady,
   mountHGComponent,
   mountHGComponentAsync,
   removeHGComponent,

package/app/scripts/test-helpers/test-helpers.jsx

@@ -1,8 +1,6 @@
-// @ts-nocheck
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { mount } from 'enzyme';
 
 import { requestsInFlight } from '../services';
@@ -15,11 +13,12 @@ const TILE_LOADING_CHECK_INTERVAL = 100;
 
 /**
  * Change the options of a track in higlass
- * @param  hgc      enzyme wrapper for a HiGlassComponent
- * @param  viewUid  The view uid
- * @param  trackUid The track uid
- * @param  options  An object of new options (e.g. { color: 'black'})
- * @return          nothing
+ *
+ * @param {import("enzyme").ReactWrapper<{}, {}, HiGlassComponent>} hgc - Enzyme wrapper for a HiGlassComponent
+ * @param {string} viewUid - The view uid
+ * @param {string} trackUid - The track uid
+ * @param {Record<string, unknown>} options - An object of new options (e.g. { color: 'black'})
+ * @returns {void}
  */
 export const changeOptions = (hgc, viewUid, trackUid, options) => {
   for (const { viewId, trackId, track } of hgc.instance().iterateOverTracks()) {
@@ -35,40 +34,77 @@ export const changeOptions = (hgc, viewUid, trackUid, options) => {
 };
 
 /**
- * Check if there are any active transitions that we
- * need to wait on
+ * Check if there are any active transitions that we need to wait on.
  *
- * Parameters
- * ----------
- *  hgc: enzyme wrapper for a HiGlassComponent
+ * @param {HiGlassComponent} hgc
  *
- * Returns
- * -------
- *  True if any of the tracks have active transtions. False otherwise.
+ * @returns {boolean} Whether any of the tracks have active transtions.
  */
 export const areTransitionsActive = (hgc) => {
   for (const track of hgc.iterateOverTracks()) {
-    const trackRenderer = getTrackRenderer(hgc, track.viewId, track.trackId);
+    const trackRenderer = getTrackRenderer(hgc, track.viewId);
 
-    if (trackRenderer.activeTransitions > 0) return true;
+    if (trackRenderer?.activeTransitions) return true;
   }
   return false;
 };
 
 /**
- * Wait until all transitions have finished before
- * calling the callback
+ * Waits for multiple elements to appear in the DOM.
  *
- * Arguments
- * ---------
- *  hgc: Enzyme wrapper for a HiGlassComponent
- *      The componentthat we're waiting on
- *  tilesLoadedCallback: function
- *      The callback to call whenever all of the tiles
- *      have been loaded.
- * Returns
- * -------
- *  Nothing
+ * @param {HTMLElement} parent - The parent element to search within.
+ * @param {string[]} selectors - An array of CSS selectors for the elements to wait for.
+ * @returns {Promise<Array<HTMLElement>>}
+ */
+const waitForElements = (parent, selectors) => {
+  const foundElements = new Map();
+  /** @type {PromiseWithResolvers<Array<HTMLElement>>} */
+  const { promise, resolve } = Promise.withResolvers();
+
+  const observer = new MutationObserver((mutations, obs) => {
+    selectors.forEach((selector) => {
+      if (!foundElements.has(selector)) {
+        const element = parent.querySelector(selector);
+        if (element) {
+          foundElements.set(selector, element);
+        }
+      }
+    });
+
+    // If all elements are found, trigger the callback and disconnect
+    if (foundElements.size === selectors.length) {
+      resolve([...foundElements.values()]); // Pass all elements to the callback
+      obs.disconnect();
+    }
+  });
+
+  observer.observe(parent, {
+    childList: true,
+    subtree: true,
+  });
+
+  // Initial check in case elements are already present
+  selectors.forEach((selector) => {
+    const element = parent.querySelector(selector);
+    if (element) {
+      foundElements.set(selector, element);
+    }
+  });
+
+  if (foundElements.size === selectors.length) {
+    resolve([...foundElements.values()]);
+    observer.disconnect();
+  }
+
+  return promise;
+};
+
+/**
+ * Wait until all transitions have finished before calling the callback
+ *
+ * @param {HiGlassComponent} hgc
+ * @param {() => void} callback A callback to invoke when all tiles have been loaded.
+ * @returns {void}
  */
 export const waitForTransitionsFinished = (hgc, callback) => {
   if (areTransitionsActive(hgc)) {
@@ -83,12 +119,8 @@ export const waitForTransitionsFinished = (hgc, callback) => {
 /**
  * Wait until all open JSON requests are finished
  *
- * Parameters
- * ----------
- *  finished: function
- *    A callback to call when there's no more JSON requests
- *    open
- *
+ * @param {() => void} finished - A callback to invoke when there's no more JSON requests open.
+ * @returns {void}
  */
 export const waitForJsonComplete = (finished) => {
   if (requestsInFlight > 0) {
@@ -102,16 +134,11 @@ export const waitForJsonComplete = (finished) => {
 };
 
 /**
- * Check if a HiGlassComponent is still waiting on tiles from a remote
- * server.
+ * Check if a HiGlassComponent is still waiting on tiles from a remote server.
  *
- * Arguments
- * ---------
- *  hgc: enzyme wrapper for a HiGlassComponent
+ * @param {HiGlassComponent} hgc
+ * @returns {boolean} Whether any of the tracks are wating for tiles.
  *
- * Returns
- * -------
- *  True if any of the tracks are waiting for tiles, false otherwise.
  */
 export const isWaitingOnTiles = (hgc) => {
   for (const track of hgc.iterateOverTracks()) {
@@ -120,25 +147,27 @@ export const isWaitingOnTiles = (hgc) => {
     if (
       !track.track.server &&
       !track.track.tilesetUid &&
-      !(track.track.data && track.track.data.type === 'divided')
+      !(track.track.data && track.track.data.type === 'divided') &&
+      !(track.track.data && track.track.data.type === 'local-tiles')
     ) {
       continue;
-    } else if (
+    }
+    if (
       (track.track.data && track.track.data.type === 'divided') ||
-      (track.track.server && track.track.tilesetUid)
+      (track.track.server && track.track.tilesetUid) ||
+      (track.track.data && track.track.data.type === 'local-tiles')
     ) {
+      if (!trackObj) return true;
+
       if (trackObj.originalTrack) {
         trackObj = trackObj.originalTrack;
       }
 
       if (!(trackObj.tilesetInfo || trackObj.chromInfo)) {
-        // console.warn(
-        //   `Track uuid:${trackObj.uuid} has no tileset or chromosome info`
-        // );
         return true;
       }
 
-      if (trackObj.fetching && trackObj.fetching.size) {
+      if (trackObj.fetching?.size) {
         return true;
       }
     } else {
@@ -149,22 +178,14 @@ export const isWaitingOnTiles = (hgc) => {
   return false;
 };
 
+/**
+ * Wait until all of the tiles in the HiGlassComponent are loaded until calling the callback
+ *
+ * @param {HiGlassComponent} hgc
+ * @param {(value?: unknown) => void} tilesLoadedCallback A callback to invoke whenever all of the tiles have been loaded.
+ * @returns {void}
+ */
 export const waitForTilesLoaded = (hgc, tilesLoadedCallback) => {
-  /**
-   * Wait until all of the tiles in the HiGlassComponent are loaded
-   * until calling the callback
-   *
-   * Arguments
-   * ---------
-   *  hgc: Enzyme wrapper for a HiGlassComponent
-   *      The componentthat we're waiting on
-   *  tilesLoadedCallback: function
-   *      The callback to call whenever all of the tiles
-   *      have been loaded.
-   * Returns
-   * -------
-   *  Nothing
-   */
   if (isWaitingOnTiles(hgc)) {
     setTimeout(() => {
       waitForTilesLoaded(hgc, tilesLoadedCallback);
@@ -178,10 +199,11 @@ export const waitForTilesLoaded = (hgc, tilesLoadedCallback) => {
 /**
  * Mount a new HiGlassComponent and unmount the previously visible one.
  *
- * @param {HTMLElement | null} prevDiv A div element to detach and recreate for the component
- * @param {import('enzyme').ReactWrapper | null} prevHgc An already mounted
- *  hgc component
- * @param {function} done The callback to call when the component is fully loaded
+ * @param {HTMLDivElement | null} prevDiv - A div element to detach and recreate for the component
+ * @param {import("enzyme").ReactWrapper<{}, {}, HiGlassComponent> | null} prevHgc
+ * @param {Record<string, unknown>} viewConf
+ * @param {(value?: unknown) => void} done - The callback to call when the component is fully loaded
+ * @param {{ style?: string, bounded?: boolean, extendedDelay?: boolean }} [options]
  */
 export const mountHGComponent = (
   prevDiv,
@@ -214,6 +236,7 @@ export const mountHGComponent = (
   div.setAttribute('style', style);
   div.setAttribute('id', 'simple-hg-component');
 
+  /** @type {import("enzyme").ReactWrapper<{}, {}, HiGlassComponent>} */
   const hgc = mount(
     <HiGlassComponent options={{ bounded }} viewConfig={viewConf} />,
     { attachTo: div },
@@ -241,6 +264,62 @@ export const mountHGComponent = (
   return /** @type {const} */ ([div, hgc]);
 };
 
+/** Wait for scales to stop changing.
+ *
+ * @param {HiGlassComponent} hgc
+ * @param {string} viewUid
+ * @param {Object} options
+ * @param {number} [options.initialWait] - The interval (in milliseconds) that is waited before the first size check.
+ * @param {number} [options.timeInterval] - The interval (in milliseconds) between size checks.
+ * @param {number} [options.maxTime] - The maximum time (in milliseconds) to wait for stabilization.
+ * @returns {Promise<void>}
+ */
+export const waitForScalesStabilized = async (hgc, viewUid, options) => {
+  const { initialWait = 500, timeInterval = 100, maxTime = 3000 } = options;
+  const xScaleDomain = [0, 0];
+  const yScaleDomain = [0, 0];
+
+  await new Promise((r) => setTimeout(r, initialWait));
+
+  for (let i = 0; i < maxTime; i += timeInterval) {
+    const xScale = hgc.xScales[viewUid];
+    const yScale = hgc.yScales[viewUid];
+
+    if (
+      xScaleDomain[0] !== xScale.domain()[0] ||
+      xScaleDomain[1] !== xScale.domain()[1] ||
+      yScaleDomain[0] !== yScale.domain()[0] ||
+      yScaleDomain[1] !== yScale.domain()[1]
+    ) {
+      xScaleDomain[0] = xScale.domain()[0];
+      xScaleDomain[1] = xScale.domain()[1];
+      yScaleDomain[0] = yScale.domain()[0];
+      yScaleDomain[1] = yScale.domain()[1];
+    } else {
+      return;
+    }
+
+    await new Promise((r) => setTimeout(r, timeInterval));
+  }
+};
+
+/**
+ * Wait for a HiGlassComponet to be ready at the given element.
+ *
+ * By ready we mean that a track-renderer-div is present and that its
+ * size is not changing any more.
+ *
+ * @param {HTMLElement} div
+ * @returns {Promise<void>}
+ */
+export const waitForComponentReady = async (div) => {
+  await waitForElements(div, ['.track-renderer-div']);
+};
+
+/**
+ * @param {HTMLDivElement} div
+ * @returns {void}
+ */
 export const removeHGComponent = (div) => {
   if (!div) return;
 
@@ -250,15 +329,24 @@ export const removeHGComponent = (div) => {
 
 // ideally the "await-ers" avoid would be promises (rather than polling)
 // and that way `mountHGComponent` would be async by default.
+/**
+ * @param {HTMLDivElement | null} prevDiv
+ * @param {import("enzyme").ReactWrapper<{}, {}, HiGlassComponent> | null} prevHgc
+ * @param {Record<string, unknown>} viewConf
+ * @param {{ style?: string, bounded?: boolean, extendedDelay?: boolean }} [options]
+ * @returns {Promise<[HTMLDivElement, { instance: () => HiGlassComponent }]>}
+ */
 export async function mountHGComponentAsync(
   prevDiv,
   prevHgc,
   viewConf,
   options,
 ) {
+  /** @type {ReturnType<typeof mountHGComponent>}*/
   let res;
   await new Promise((resolve) => {
     res = mountHGComponent(prevDiv, prevHgc, viewConf, resolve, options);
   });
+  // @ts-expect-error We know it's been resolved
   return res;
 }