higlass 1.13.0 → 1.13.2

package/app/scripts/Track.js

@@ -1,41 +1,62 @@
+// @ts-check
 import { scaleLinear } from 'd3-scale';
 import { fake as fakePubSub } from './hocs/with-pub-sub';
 
 // Services
 import { isWithin } from './utils';
 
+/**
+ * @typedef TrackContext
+ * @property {string} id - The track ID.
+ * @property {import('pub-sub-es').PubSub & { __fake__?: boolean }} [pubSub] - The pub-sub channel.
+ * @property {() => import('./types').Theme} [getTheme] - A function that returns the current theme.
+ */
+
+/**
+ * @template T
+ * @typedef {T & TrackContext} ExtendedTrackContext
+ */
+
+/** @template Options */
 class Track {
-  constructor(context) {
+  /**
+   * @param {TrackContext} context
+   * @param {Options} options
+   */
+  constructor(context, options) {
     this.context = context;
 
     const { id, pubSub, getTheme } = context;
-    if (pubSub) {
-      this.pubSub = pubSub;
-    } else {
-      this.pubSub = fakePubSub;
-    }
+    /** @type {import('pub-sub-es').PubSub} */
+    this.pubSub = pubSub ?? fakePubSub;
 
+    /** @type {string} */
     this.id = id;
+    /** @type {import('./types').Scale} */
     this._xScale = scaleLinear();
+    /** @type {import('./types').Scale} */
     this._yScale = scaleLinear();
 
     // reference scales used for tracks that can translate and scale
     // their graphics
     // They will draw their graphics on the reference scales and then translate
     // and pan them as needed
+    /** @type {import('./types').Scale} */
     this._refXScale = scaleLinear();
+    /** @type {import('./types').Scale} */
     this._refYScale = scaleLinear();
 
+    /** @type {[number, number]} */
     this.position = [0, 0];
+    /** @type {[number, number]} */
     this.dimensions = [1, 1];
-    this.options = {};
+    /** @type {Options} */
+    this.options = options;
+    /** @type {Array<import('pub-sub-es').Subscription>} */
     this.pubSubs = [];
 
-    if (getTheme) {
-      this.getTheme = getTheme;
-    } else {
-      this.getTheme = () => {};
-    }
+    /** @type {() => (import('./types').Theme | undefined)} */
+    this.getTheme = getTheme ?? (() => undefined);
 
     this.pubSubs.push(
       this.pubSub.subscribe(
@@ -43,14 +64,16 @@ class Track {
         this.defaultMouseMoveHandler.bind(this),
       ),
     );
+
+    this.isLeftModified = false;
   }
 
   /**
    * Check if a 2d location (x, y) is within the bounds of this track.
    *
-   * @param {Number}  x  X position to be tested.
-   * @param {Number}  y  Y position to be tested.
-   * @return {Boolean}  If `true` location is within the track.
+   * @param {number} x - X position to be tested.
+   * @param {number} y - Y position to be tested.
+   * @return {boolean}  If `true` location is within the track.
    */
   isWithin(x, y) {
     let xx = x;
@@ -75,14 +98,26 @@ class Track {
     );
   }
 
+  /**
+   * Get a property from the track.
+   * @template {keyof this} T
+   * @param {T} prop - The property to get.
+   * @return {() => this[T]}
+   */
   getProp(prop) {
     return () => this[prop];
   }
 
   getData() {}
 
-  /** Capture click events. x and y are relative to the track
-   * position */
+  /**
+   * Capture click events. x and y are relative to the track position
+   * @template T
+   * @param {number} x - X position of the click event.
+   * @param {number} y - Y position of the click event.
+   * @param {T} evt - The event.
+   * @return {{ type: 'generic', event: T, payload: null }}
+   */
   click(x, y, evt) {
     return {
       type: 'generic',
@@ -94,10 +129,12 @@ class Track {
   /** There was a click event outside the track * */
   clickOutside() {}
 
+  /** @returns {[number, number]} */
   getDimensions() {
     return this.dimensions;
   }
 
+  /** @param {[number, number]} newDimensions */
   setDimensions(newDimensions) {
     this.dimensions = newDimensions;
 
@@ -105,82 +142,136 @@ class Track {
     this._yScale.range([0, this.dimensions[1]]);
   }
 
+  /**
+   * @overload
+   * @return {import('./types').Scale}
+   */
+  /**
+   * @overload
+   * @param {import('./types').Scale} scale
+   * @return {this}
+   */
   /**
    * Either get or set the reference xScale
+   *
+   * @param {import('./types').Scale=} scale
+   * @return {import('./types').Scale | this}
    */
-  refXScale(_) {
-    if (!arguments.length) return this._refXScale;
-
-    this._refXScale = _;
-
+  refXScale(scale) {
+    if (!scale) return this._refXScale;
+    this._refXScale = scale;
     return this;
   }
 
+  /**
+   * @overload
+   * @return {import('./types').Scale}
+   */
+  /**
+   * @overload
+   * @param {import('./types').Scale} scale
+   * @return {this}
+   */
   /**
    * Either get or set the reference yScale
+   *
+   * @param {import('./types').Scale=} scale
+   * @return {import('./types').Scale | this}
    */
-  refYScale(_) {
-    if (!arguments.length) return this._refYScale;
-
-    this._refYScale = _;
-
+  refYScale(scale) {
+    if (!scale) return this._refYScale;
+    this._refYScale = scale;
     return this;
   }
 
+  /**
+   * @overload
+   * @return {import('./types').Scale}
+   */
+  /**
+   * @overload
+   * @param {import('./types').Scale} scale
+   * @return {this}
+   */
   /**
    * Either get or set the xScale
+   *
+   * @param {import('./types').Scale=} scale
+   * @return {import('./types').Scale | this}
    */
-  xScale(_) {
-    if (!arguments.length) return this._xScale;
-
-    this._xScale = _;
-
+  xScale(scale) {
+    if (!scale) return this._xScale;
+    this._xScale = scale;
     return this;
   }
 
+  /**
+   * @overload
+   * @return {import('./types').Scale}
+   */
+  /**
+   * @overload
+   * @param {import('./types').Scale} scale
+   * @return {this}
+   */
   /**
    * Either get or set the yScale
+   *
+   * @param {import('./types').Scale=} scale
+   * @return {import('./types').Scale | this}
    */
-  yScale(_) {
-    if (!arguments.length) {
-      return this._yScale;
-    }
-
-    this._yScale = _;
-
+  yScale(scale) {
+    if (!scale) return this._yScale;
+    this._yScale = scale;
     return this;
   }
 
+  /**
+   * @param {import('./types').Scale} newXScale
+   * @param {import('./types').Scale} newYScale
+   * @returns {void}
+   */
   zoomed(newXScale, newYScale) {
     this.xScale(newXScale);
     this.yScale(newYScale);
   }
 
+  /**
+   * @param {import('./types').Scale} refXScale
+   * @param {import('./types').Scale} refYScale
+   * @returns {void}
+   */
   refScalesChanged(refXScale, refYScale) {
     this._refXScale = refXScale;
     this._refYScale = refYScale;
   }
 
+  /** @returns {void} */
   draw() {}
 
+  /** @returns {[number, number]} */
   getPosition() {
     return this.position;
   }
 
+  /**
+   * @param {[number, number]} newPosition
+   * @returns {void}
+   */
   setPosition(newPosition) {
     this.position = newPosition;
   }
 
-  /*
+  /**
    * A blank handler for MouseMove / Zoom events. Should be overriden
    * by individual tracks to provide
    *
-   * @param {obj} evt:
-   *
-   * @returns nothing
+   * @param {{}} evt
+   * @returns {void}
    */
   defaultMouseMoveHandler(evt) {}
 
+  /** @returns {void} */
   remove() {
     // Clear all pubSub subscriptions
     this.pubSubs.forEach((subscription) =>
@@ -189,19 +280,36 @@ class Track {
     this.pubSubs = [];
   }
 
-  rerender() {}
+  /**
+   * @param {Options} options
+   * @returns {void}
+   */
+  rerender(options) {}
 
-  /*
+  /**
    * This function is for seeing whether this track should respond
    * to events at this mouse position. The difference to `isWithin()` is that it
    * can be overwritten if a track is inactive for example.
+   *
+   * @param {number} x - X position to be tested.
+   * @param {number} y - Y position to be tested.
+   * @returns {boolean}
    */
   respondsToPosition(x, y) {
     return this.isWithin(x, y);
   }
 
+  /**
+   * @param {number} trackY
+   * @param {number} kMultiplier
+   * @returns {void}
+   */
   zoomedY(trackY, kMultiplier) {}
 
+  /**
+   * @param {number} dY
+   * @returns {void}
+   */
   movedY(dY) {}
 }
 

package/app/scripts/TrackRenderer.jsx

@@ -91,6 +91,7 @@ const SCROLL_TIMEOUT = 100;
 /** @typedef {import('./types').Scale} Scale */
 /** @typedef {import('./types').TrackConfig} TrackConfig */
 /** @typedef {import('./types').TrackObject} TrackObject */
+/** @typedef {import('./types').TilesetInfo} TilesetInfo */
 
 /** @typedef {TrackRenderer["setCenter"]} SetCentersFunction */
 /** @typedef {(x: Scale, y: Scale) => [Scale, Scale]} ProjectorFunction */
@@ -104,8 +105,6 @@ const SCROLL_TIMEOUT = 100;
  * @property {number} left
  */
 
-/** @typedef {Record<string, unknown>} TilesetInfo */
-
 /**
  * @typedef MetaPluginTrackContext
  * @property {(trackId: string) => TrackObject | undefined} getTrackObject
@@ -133,7 +132,7 @@ const SCROLL_TIMEOUT = 100;
  * @property {() => void} onMouseMoveZoom
  * @property {string} chromInfoPath
  * @property {() => boolean} isShowGlobalMousePosition
- * @property {() => (string | typeof THEME_DARK)} getTheme
+ * @property {() => import('./types').Theme} getTheme
  * @property {unknown=} AVAILABLE_FOR_PLUGINS
  * @property {(HTMLDivElement | null)=} baseEl
  * @property {TrackConfig=} definition
@@ -197,7 +196,7 @@ const SCROLL_TIMEOUT = 100;
  * @property {import('pub-sub-es').PubSub} pubSub
  * @property {(func: SetCentersFunction) => void} setCentersFunction
  * @property {HTMLElement} svgElement
- * @property {string | typeof THEME_DARK} theme
+ * @property {import('./types').Theme} theme
  * @property {number} topHeight
  * @property {number} topHeightNoGallery
  * @property {{ backgroundColor?: string }} viewOptions
@@ -1856,17 +1855,15 @@ class TrackRenderer extends React.Component {
       context.projectionYDomain = track.projectionYDomain;
     }
 
-    const options = track.options;
-
     switch (track.type) {
       case 'left-axis':
-        return new LeftAxisTrack(context, options);
+        return new LeftAxisTrack(context, track.options);
 
       case 'top-axis':
-        return new TopAxisTrack(context, options);
+        return new TopAxisTrack(context, track.options);
 
       case 'heatmap':
-        return new HeatmapTiledPixiTrack(context, options);
+        return new HeatmapTiledPixiTrack(context, track.options);
 
       case 'multivec':
       case 'vector-heatmap':
@@ -1874,46 +1871,46 @@ class TrackRenderer extends React.Component {
       case 'horizontal-vector-heatmap': // legacy, included for backwards compatiblity
       case 'vertical-multivec': // legacy, included for backwards compatiblity
       case 'vertical-vector-heatmap': // legacy, included for backwards compatiblity
-        return new HorizontalMultivecTrack(context, options);
+        return new HorizontalMultivecTrack(context, track.options);
 
       case '1d-heatmap':
       case 'horizontal-1d-heatmap': // legacy, included for backwards compatiblity
       case 'vertical-1d-heatmap': // legacy, included for backwards compatiblity
-        return new Horizontal1dHeatmapTrack(context, options);
+        return new Horizontal1dHeatmapTrack(context, track.options);
 
       case 'line':
       case 'horizontal-line': // legacy, included for backwards compatiblity
       case 'vertical-line': // legacy, included for backwards compatiblity
-        return new HorizontalLine1DPixiTrack(context, options);
+        return new HorizontalLine1DPixiTrack(context, track.options);
 
       case 'point':
       case 'horizontal-point': // legacy, included for backwards compatiblity
       case 'vertical-point': // legacy, included for backwards compatiblity
-        return new HorizontalPoint1DPixiTrack(context, options);
+        return new HorizontalPoint1DPixiTrack(context, track.options);
 
       case 'bar':
       case 'horizontal-bar': // legacy, included for backwards compatiblity
       case 'vertical-bar': // legacy, included for backwards compatiblity
-        return new BarTrack(context, options);
+        return new BarTrack(context, track.options);
 
       case 'divergent-bar':
       case 'horizontal-divergent-bar': // legacy, included for backwards compatiblity
       case 'vertical-divergent-bar': // legacy, included for backwards compatiblity
-        return new DivergentBarTrack(context, options);
+        return new DivergentBarTrack(context, track.options);
 
       case 'horizontal-1d-tiles':
-        return new IdHorizontal1DTiledPixiTrack(context, options);
+        return new IdHorizontal1DTiledPixiTrack(context, track.options);
 
       case 'vertical-1d-tiles':
-        return new IdVertical1DTiledPixiTrack(context, options);
+        return new IdVertical1DTiledPixiTrack(context, track.options);
 
       case '2d-tiles':
-        return new Id2DTiledPixiTrack(context, options);
+        return new Id2DTiledPixiTrack(context, track.options);
 
       case 'stacked-interval':
       case 'top-stacked-interval': // legacy, included for backwards compatiblity
       case 'left-stacked-interval': // legacy, included for backwards compatiblity
-        return new CNVIntervalTrack(context, options);
+        return new CNVIntervalTrack(context, track.options);
 
       case 'viewport-projection-center':
         // TODO: Fix this so that these functions are defined somewhere else
@@ -1925,9 +1922,9 @@ class TrackRenderer extends React.Component {
           context.registerViewportChanged = track.registerViewportChanged;
           context.removeViewportChanged = track.removeViewportChanged;
           context.setDomainsCallback = track.setDomainsCallback;
-          return new ViewportTracker2D(context, options);
+          return new ViewportTracker2D(context, track.options);
         }
-        return new Track(context);
+        return new Track(context, {});
 
       case 'viewport-projection-horizontal':
         // TODO: Fix this so that these functions are defined somewhere else
@@ -1939,9 +1936,9 @@ class TrackRenderer extends React.Component {
           context.registerViewportChanged = track.registerViewportChanged;
           context.removeViewportChanged = track.removeViewportChanged;
           context.setDomainsCallback = track.setDomainsCallback;
-          return new ViewportTrackerHorizontal(context, options);
+          return new ViewportTrackerHorizontal(context, track.options);
         }
-        return new Track(context);
+        return new Track(context, {});
 
       case 'viewport-projection-vertical':
         // TODO: Fix this so that these functions are defined somewhere else
@@ -1953,37 +1950,37 @@ class TrackRenderer extends React.Component {
           context.registerViewportChanged = track.registerViewportChanged;
           context.removeViewportChanged = track.removeViewportChanged;
           context.setDomainsCallback = track.setDomainsCallback;
-          return new ViewportTrackerVertical(context, options);
+          return new ViewportTrackerVertical(context, track.options);
         }
-        return new Track(context);
+        return new Track(context, {});
 
       case 'gene-annotations':
       case 'horizontal-gene-annotations': // legacy, included for backwards compatiblity
       case 'vertical-gene-annotations': // legacy, included for backwards compatiblity
-        return new HorizontalGeneAnnotationsTrack(context, options);
+        return new HorizontalGeneAnnotationsTrack(context, track.options);
 
       case '2d-rectangle-domains':
       case 'arrowhead-domains':
-        return new ArrowheadDomainsTrack(context, options);
+        return new ArrowheadDomainsTrack(context, track.options);
 
       case 'horizontal-1d-annotations':
-        return new Annotations1dTrack(context, options);
+        return new Annotations1dTrack(context, track.options);
 
       case 'vertical-1d-annotations':
         // Fix this: LeftTrackModifier is doing a whole bunch of things not
         // needed by this track but the current setup is not consistent.
-        return new Annotations1dTrack(context, options, true);
+        return new Annotations1dTrack(context, track.options, true);
 
       case '2d-annotations':
-        return new Annotations2dTrack(context, options);
+        return new Annotations2dTrack(context, track.options);
 
       case 'linear-2d-rectangle-domains':
       case 'horizontal-2d-rectangle-domains': // legacy, included for backwards compatiblity
       case 'vertical-2d-rectangle-domains': // legacy, included for backwards compatiblity
-        return new Horizontal2DDomainsTrack(context, options);
+        return new Horizontal2DDomainsTrack(context, track.options);
 
       case 'square-markers':
-        return new SquareMarkersTrack(context, options);
+        return new SquareMarkersTrack(context, track.options);
 
       case 'combined':
         // @ts-expect-error - FIXME: Our typing should be able to narrow track config
@@ -1993,80 +1990,84 @@ class TrackRenderer extends React.Component {
         return new CombinedTrack(context);
 
       case '2d-chromosome-labels':
-        return new Chromosome2DLabels(context, options);
+        return new Chromosome2DLabels(context, track.options);
 
       case 'horizontal-chromosome-grid':
         context.orientation = '1d-horizontal';
-        return new ChromosomeGrid(context, options);
+        return new ChromosomeGrid(context, track.options);
 
       case 'vertical-chromosome-grid':
         context.orientation = '1d-vertical';
-        return new ChromosomeGrid(context, options);
+        return new ChromosomeGrid(context, track.options);
 
       case '2d-chromosome-grid':
-        return new ChromosomeGrid(context, options);
+        return new ChromosomeGrid(context, track.options);
 
       case 'chromosome-labels':
       case 'horizontal-chromosome-labels': // legacy, included for backwards compatiblity
       case 'vertical-chromosome-labels': // legacy, included for backwards compatiblity
         // chromInfoPath is passed in for backwards compatibility
         // it can be used to provide custom chromosome sizes
-        return new HorizontalChromosomeLabels(context, options);
+        return new HorizontalChromosomeLabels(context, track.options);
 
       case 'linear-heatmap':
       case 'horizontal-heatmap': // legacy, included for backwards compatiblity
       case 'vertical-heatmap': // legacy, included for backwards compatiblity
-        return new HorizontalHeatmapTrack(context, options);
+        return new HorizontalHeatmapTrack(context, track.options);
 
       case '2d-chromosome-annotations':
-        return new Chromosome2DAnnotations(context, options);
+        return new Chromosome2DAnnotations(context, track.options);
 
       case '1d-value-interval':
       case 'horizontal-1d-value-interval': // legacy, included for backwards compatiblity
       case 'vertical-1d-value-interval': // legacy, included for backwards compatiblity
-        return new ValueIntervalTrack(context, options);
+        return new ValueIntervalTrack(context, track.options);
 
       case 'osm':
       case 'osm-tiles':
-        return new OSMTilesTrack(context, options);
+        return new OSMTilesTrack(context, track.options);
 
       case 'osm-2d-tile-ids':
-        return new OSMTileIdsTrack(context, options);
+        return new OSMTileIdsTrack(context, track.options);
 
       case 'mapbox':
       case 'mapbox-tiles':
-        return new MapboxTilesTrack(context, options);
+        return new MapboxTilesTrack(context, track.options);
 
       case 'raster-tiles':
-        return new RasterTilesTrack(context, options);
+        return new RasterTilesTrack(context, track.options);
 
       case 'bedlike':
       case 'vertical-bedlike': // legacy, included for backwards compatiblity
-        return new BedLikeTrack(context, options);
+        return new BedLikeTrack(context, track.options);
 
       case 'overlay-track':
-        return new OverlayTrack(context, options);
+        return new OverlayTrack(context, track.options);
 
       case 'overlay-chromosome-grid-track':
         context.isOverlay = true;
-        return new ChromosomeGrid(context, options);
+        return new ChromosomeGrid(context, track.options);
 
       case 'horizontal-rule':
-        return new HorizontalRule(context, options);
+        return new HorizontalRule(context, track.options);
 
       case 'vertical-rule':
-        return new VerticalRule(context, options);
+        return new VerticalRule(context, track.options);
 
       case 'cross-rule':
         // This needs to be harmonized.
         context.x = track.x;
         context.y = track.y;
-        return new CrossRule(context, options);
+        return new CrossRule(context, track.options);
 
       case 'simple-svg':
-        return new SVGTrack(context, options);
-      case 'empty':
+        return new SVGTrack(context, track.options);
+      case 'empty': {
+        /** @type {import('./PixiTrack').PixiTrackOptions} */
+        // @ts-expect-error - We need a way to relate the track type and track.options.
+        const options = track.options;
         return new PixiTrack(context, options);
+      }
 
       default: {
         // Check if a plugin track is available
@@ -2091,7 +2092,7 @@ class TrackRenderer extends React.Component {
             return new pluginTrack.track( // eslint-disable-line new-cap
               this.availableForPlugins,
               context,
-              options,
+              track.options,
             );
           } catch (e) {
             console.error(

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

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 
 import { toVoid } from '../utils';

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

@@ -1,12 +1,15 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 
 import { toVoid } from '../utils';
 
+/** @type {import('pub-sub-es').PubSub & { __fake__: true }} */
 const fake = {
   __fake__: true,
   publish: toVoid,
-  subscribe: toVoid,
+  subscribe: () => ({ event: 'fake', handler: toVoid }),
   unsubscribe: toVoid,
+  clear: toVoid,
 };
 
 const { Provider, Consumer } = React.createContext(fake);

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

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 
 import { toVoid } from '../utils';

package/app/scripts/icons.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { select } from 'd3-selection';
 import classes from '../styles/ViewHeader.module.scss';
 
@@ -397,3 +398,8 @@ export function SearchIcon({ theStyle, onClick }) {
     </svg>
   );
 }
+
+SearchIcon.propTypes = {
+  theStyle: PropTypes.string,
+  onClick: PropTypes.func,
+};

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

@@ -52,7 +52,7 @@ fetchTilesPool.run(function(params, done) {
 }, [workerPath]);
 */
 
-const sessionId = slugid.nice();
+const sessionId = import.meta.env.DEV ? 'dev' : slugid.nice();
 export let requestsInFlight = 0; // eslint-disable-line import/no-mutable-exports
 export let authHeader = null; // eslint-disable-line import/no-mutable-exports