higlass 1.13.5 → 2.0.0

package/README.md

@@ -7,20 +7,31 @@
 
 ### Introduction
 
-HiGlass is a web-based viewer for datasets too large to view at once.
-It features synchronized navigation of multiple views as well as continuous zooming and panning
-for navigation across genomic loci and resolutions. It supports visual comparison of
-genomic (e.g., Hi-C, ChIP-seq, or bed annotations) and other data (e.g., geographic maps, gigapixel images, or abstract 1D and 2D sequential data) from different experimental conditions and can be used to efficiently
-identify salient outcomes of experimental perturbations, generate new hypotheses, and share
-the results with the community.
-
-A live instance can be found at [https://higlass.io](https://higlass.io). A [Docker container](https://github.com/higlass/higlass-docker) is available for running an instance locally, although we recommend using the [higlass-manage](https://github.com/pkerpedjiev/higlass-manage) package to start, stop and configure local instances.
-
-For documentation about how to use and install HiGlass, please visit [https://docs.higlass.io](https://docs.higlass.io).
+HiGlass is a web-based viewer for datasets too large to view at once. It
+features synchronized navigation of multiple views as well as continuous
+zooming and panning for navigation across genomic loci and resolutions. It
+supports visual comparison of genomic (e.g., Hi-C, ChIP-seq, or bed
+annotations) and other data (e.g., geographic maps, gigapixel images, or
+abstract 1D and 2D sequential data) from different experimental conditions and
+can be used to efficiently identify salient outcomes of experimental
+perturbations, generate new hypotheses, and share the results with the
+community.
+
+A live instance can be found at [https://higlass.io](https://higlass.io). A
+[Docker container](https://github.com/higlass/higlass-docker) is available for
+running an instance locally, although we recommend using the
+[higlass-manage](https://github.com/pkerpedjiev/higlass-manage) package to
+start, stop and configure local instances.
+
+For documentation about how to use and install HiGlass, please visit
+[https://docs.higlass.io](https://docs.higlass.io).
 
 ### Citation
 
-Kerpedjiev, P., Abdennur, N., Lekschas, F., McCallum, C., Dinkla, K., Strobelt, H., ... & Gehlenborg, N. *HiGlass: Web-based Visual Exploration and Analysis of Genome Interaction Maps.* Genome Biology (2018): 19:125. https://doi.org/10.1186/s13059-018-1486-1
+Kerpedjiev, P., Abdennur, N., Lekschas, F., McCallum, C., Dinkla, K., Strobelt,
+H., ... & Gehlenborg, N. *HiGlass: Web-based Visual Exploration and Analysis of
+Genome Interaction Maps.* Genome Biology (2018): 19:125.
+https://doi.org/10.1186/s13059-018-1486-1
 
 ### Example
 
@@ -34,7 +45,7 @@ To run higlass from its source code simply run the following:
 
 ```
 npm clean-install // use --legacy-peer-deps if you get peer dependency errors
-npm run start
+npm start
 ```
 
 This starts a server in development mode at http://localhost:5173/.
@@ -44,26 +55,16 @@ This starts a server in development mode at http://localhost:5173/.
 > Once started, a list of the examples can be found at [http://localhost:8080/examples.html](http://localhost:8080/examples.html).
 > Template viewconfs located at `/docs/examples/viewconfs` can viewed directly at urls such as  [http://localhost:8080/apis/svg.html?/viewconfs/overlay-tracks.json](http://localhost:8080/apis/svg.html?/viewconfs/overlay-tracks.json).
 
-
 ### Tests
 
-The tests for the React components and API functions are located in the `test` directory.
-Tests are run with [`web-test-runner`](https://modern-web.dev/docs/test-runner/overview/), which you can learn more about the CLI in the [documentation](https://modern-web.dev/docs/test-runner/cli-and-configuration/#test-runner-cli-and-configuration).
+The tests for the React components and API functions are located in the `test`
+directory. Tests are run with [`vitest`](https://vitest.dev/).
 
 Useful commands:
 
-- Run all tests: `npm test`
-- Run all tests in interactive "watch" mode: `npm test -- --watch`
-- Run a specific test or "glob" of tests: `npm test -- test/APITests.js [--watch]`
-- Manually run individual tests in an open browser window: `npm test -- --manual`
-
-**Troubleshooting:**
-
-- If the installation fails due to `sharp` > `node-gyp` try installing the node packages using `python2`:
+- Run all tests in the browser: `npm test -- --browser.headless=false`
 
-  ```
-  npm ci --python=/usr/bin/python2 && rm -rf node_modules/node-sass && npm ci
-  ```
+See the [contributing guide](./CONTRIBUTING.md) to learn more.
 
 ### API
 
@@ -71,34 +72,27 @@ HiGlass provides an API for controlling the component from with JavaScript. Belo
 
 ```html
 <!DOCTYPE html>
-<head>
-  <meta charset="utf-8">
-  <title>Minimal Working Example &middot; HiGlass</title>
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-  <link rel="stylesheet" href="https://unpkg.com/higlass@1.6.6/dist/hglib.css">
-
-  <style type="text/css">
-    html, body {
-      width: 100vw;
-      height: 100vh;
-      overflow: hidden;
-    }
-  </style>
-
-  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
-  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
-  <script crossorigin src="https://unpkg.com/pixi.js@5/dist/pixi.min.js"></script>
-  <script crossorigin src="https://unpkg.com/react-bootstrap@0.32.1/dist/react-bootstrap.min.js"></script>
-  <script crossorigin src="https://unpkg.com/higlass@1.6.6/dist/hglib.min.js"></script>
-</head>
-<body></body>
-<script>
-const hgApi = window.hglib.viewer(
-  document.body,
-  'https://higlass.io/api/v1/viewconfs/?d=default',
-  { bounded: true },
-);
-</script>
+  <head>
+    <meta charset="utf-8">
+    <title>Minimal Working Example &middot; HiGlass</title>
+    <style type="text/css">
+      html, body {
+        width: 100vw;
+        height: 100vh;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script type="module">
+    import * as hglib from "https://esm.sh/higlass@1.13";
+
+    const api = hglib.viewer(
+      document.body,
+      'https://higlass.io/api/v1/viewconfs/?d=default',
+      { bounded: true },
+    );
+  </script>
 </html>
 ```
 

package/app/globals.d.ts

@@ -1,5 +1,5 @@
 export {};
-/* eslint-disable */
+
 declare global {
   interface Window {
     higlassTracksByType?: {

package/app/missing-types.d.ts

@@ -1,9 +1,10 @@
-/* eslint-disable */
 // https://www.npmjs.com/package/pub-sub-es
 declare module 'pub-sub-es' {
+  // biome-ignore lint/suspicious/noExplicitAny: Inherited API
   type EventMap = { [name: string]: any };
   export type Subscription = {
     event: string;
+    // biome-ignore lint/suspicious/noExplicitAny: Inherited API
     handler: (news: any) => void;
   };
   type PublishOptions = {
@@ -11,7 +12,9 @@ declare module 'pub-sub-es' {
     isNoGlobalBroadCast?: boolean;
   };
   export type PubSub = {
+    // biome-ignore lint/suspicious/noExplicitAny: Inherited API
     publish(event: string, news?: any, options?: PublishOptions): void;
+    // biome-ignore lint/suspicious/noExplicitAny: Inherited API
     subscribe(event: string, handler: (news: any) => void): Subscription;
     unsubscribe(subscription: Subscription): void;
     clear(): void;

package/app/scripts/AddTrackDialog.jsx

@@ -1,10 +1,10 @@
 // @ts-nocheck
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 import Dialog from './Dialog';
-import TilesetFinder from './TilesetFinder';
 import PlotTypeChooser from './PlotTypeChooser';
+import TilesetFinder from './TilesetFinder';
 
 // Configs
 import { AVAILABLE_TRACK_TYPES } from './configs';
@@ -15,7 +15,7 @@ import { getDefaultTrackForDatatype } from './utils';
 // Styles
 import '../styles/AddTrackDialog.module.scss';
 
-class AddTrackDialog extends React.Component {
+export class AddTrackDialog extends React.Component {
   constructor(props) {
     super(props);
 
@@ -67,6 +67,7 @@ class AddTrackDialog extends React.Component {
     this.props.onTracksChosen(
       this.state.selectedTilesets,
       this.props.position,
+      this.props.extent,
       this.props.host,
     );
   }
@@ -86,6 +87,7 @@ class AddTrackDialog extends React.Component {
     this.props.onTracksChosen(
       this.state.selectedTilesets,
       this.props.position,
+      this.props.extent,
       this.props.host,
     );
   }
@@ -172,7 +174,11 @@ class AddTrackDialog extends React.Component {
           datatype={this.props.datatype}
           onDoubleClick={this.handleTilesetPickerDoubleClick.bind(this)}
           onTracksChosen={(value) =>
-            this.props.onTracksChosen(value, this.props.position)
+            this.props.onTracksChosen(
+              value,
+              this.props.position,
+              this.props.extent,
+            )
           }
           orientation={orientation}
           selectedTilesetChanged={this.selectedTilesetsChanged.bind(this)}
@@ -223,6 +229,7 @@ AddTrackDialog.defaultProps = {
 
 AddTrackDialog.propTypes = {
   datatype: PropTypes.string,
+  extent: PropTypes.string,
   host: PropTypes.string,
   onCancel: PropTypes.func.isRequired,
   onTracksChosen: PropTypes.func.isRequired,

package/app/scripts/AddTrackPositionMenu.jsx

@@ -1,10 +1,10 @@
 // @ts-nocheck
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
-import clsx from 'clsx';
 
-import withTheme from './hocs/with-theme';
 import { THEME_DARK } from './configs';
+import withTheme from './hocs/with-theme';
 
 import classes from '../styles/AddTrackPositionMenu.module.scss';
 
@@ -42,11 +42,32 @@ function AddTrackPositionMenu(props) {
             >
               left
             </td>
-            <td
-              className={classes['add-track-position-middle-middle']}
-              onClick={() => props.onTrackPositionChosen('center')}
-            >
-              center
+            <td className={classes['add-track-position-middle-middle']}>
+              <span
+                onClick={() => props.onTrackPositionChosen('center')}
+                className={classes['add-track-position-middle-middle-full']}
+                data-testid="add-track-center"
+              >
+                center
+              </span>
+              <span
+                onClick={() =>
+                  props.onTrackPositionChosen('center', 'upper-right')
+                }
+                className={
+                  classes['add-track-position-middle-middle-upper-right']
+                }
+                data-testid="add-track-upper-right"
+              />
+              <span
+                onClick={() =>
+                  props.onTrackPositionChosen('center', 'lower-left')
+                }
+                className={
+                  classes['add-track-position-middle-middle-lower-left']
+                }
+                data-testid="add-track-lower-left"
+              />
             </td>
             <td
               className={classes['add-track-position-middle-right']}

package/app/scripts/Annotations1dTrack.js

@@ -1,271 +1,110 @@
 // @ts-nocheck
-import { color } from 'd3-color';
-import PixiTrack from './PixiTrack';
+import polygonArea from 'area-polygon';
+import classifyPoint from 'robust-point-in-polygon';
+
+import BedLikeTrack, { polyToPoly } from './BedLikeTrack';
+
+/** Find out which rects are under a point.
+ *
+ * @param  {track} The track object
+ * @param  {x} x position to check (relative to track)
+ * @param  {y} y position to check (relative to track)
+ * @return {[]} An array of drawnRects that are under that point
+ */
+export const rectsAtPoint = (track, x, y) => {
+  const drawnRects = Object.values(track.drawnRects);
+  const point = [x, y];
+  const payloads = [];
+  const g = track.rectGraphics;
+
+  for (const drawnRect of drawnRects) {
+    // copy the rect because polyToPoly is destructive
+    const rect = drawnRect[0].slice(0);
+
+    const poly = polyToPoly(
+      rect,
+      g.scale.x,
+      g.position.x,
+      g.scale.y,
+      g.position.y,
+    );
+    const area = polygonArea(poly);
+
+    if (classifyPoint(poly, point) === -1) {
+      const payload = drawnRect[1];
+      payload.area = area;
+
+      payloads.push(payload);
+    }
+  }
 
-// Maximum delay in ms between mousedown and mouseup that is registered as a
-// click. Note we need to use mousedown and mouseup as PIXI doesn't recognize
-// click events with out current setup. Since most UIs treat long clicks as
-// either something special or a cancelation we follow best practices and
-// implement a threshold on the delay as well.
-import { GLOBALS, MAX_CLICK_DELAY } from './configs';
+  return payloads;
+};
 
-class Annotations1dTrack extends PixiTrack {
+class Annotations1dTrack extends BedLikeTrack {
   constructor(context, options, isVertical) {
     super(context, options);
-
-    this.pubSub = context.pubSub;
-    this.options = options;
-    this.isVertical = isVertical;
-
-    this.rects = {};
-
-    this.defaultColor = color('red');
   }
 
-  draw() {
-    const globalMinRectWidth =
-      typeof this.options.minRectWidth !== 'undefined'
-        ? this.options.minRectWidth
-        : 10;
-
-    const globalFill =
-      typeof this.options.fill !== 'undefined'
-        ? color(this.options.fill)
-        : this.defaultColor;
-
-    const globalFillOpacity =
-      typeof this.options.fillOpacity !== 'undefined'
-        ? +this.options.fillOpacity
-        : 0.2;
-
-    const globalStroke =
-      typeof this.options.stroke !== 'undefined'
-        ? color(this.options.stroke)
-        : this.defaultColor;
-
-    const globalStrokeWidth =
-      typeof this.options.strokeWidth !== 'undefined'
-        ? +this.options.strokeWidth
-        : 1;
-
-    const globalStrokeOpacity =
-      typeof this.options.strokeOpacity !== 'undefined'
-        ? +this.options.strokeOpacity
-        : 0;
-
-    let strokePos;
-    if (this.options.strokePos && this.options.strokePos.length) {
-      strokePos = Array.isArray(this.options.strokePos)
-        ? this.options.strokePos
-        : [this.options.strokePos];
+  rerender(options, force) {
+    if (options && options.projectUid !== this.options.projectUid) {
+      // we're filtering by a new project id so we have to
+      // re-fetch the tiles
+      this.options = options;
+      this.fetchedTiles = {};
+      this.refreshTiles();
+      return;
     }
 
-    super.draw();
-    const graphics = this.pMain;
-    graphics.clear();
-
-    // The time stamp is used to keep track which rectangles have been drawn per
-    // draw call. Each rectangle previously drawn that is not visible anymore
-    // (i.e., is not drawn in the current draw call) will be removed at the end
-    // by checking against the time stamp.
-    const timeStamp = performance.now();
-
-    // Regions have to follow the following form:
-    // start, end, fill, stroke, fillOpacity, strokeOpcaity, min-size
-    // If `color-line` is not given, `color-fill` is used
-    this.options.regions.forEach((region) => {
-      const id = `${region[0]}-${region[1]}`;
-
-      if (!this.rects[id]) {
-        this.rects[id] = { graphics: new GLOBALS.PIXI.Graphics() };
-        graphics.addChild(this.rects[id].graphics);
-      }
-
-      this.rects[id].timeStamp = timeStamp;
-
-      const fill = color(region[2]) || globalFill;
-      let stroke = color(region[3]) || globalStroke;
-
-      if (!stroke) {
-        stroke = fill;
-      }
-
-      const fillHex = GLOBALS.PIXI.utils.rgb2hex([
-        fill.r / 255.0,
-        fill.g / 255.0,
-        fill.b / 255.0,
-      ]);
-      const strokeHex = GLOBALS.PIXI.utils.rgb2hex([
-        stroke.r / 255.0,
-        stroke.g / 255.0,
-        stroke.b / 255.0,
-      ]);
-
-      if (strokePos) {
-        graphics.lineStyle(1, strokeHex, 0);
-        graphics.beginFill(strokeHex, +region[5] || globalStrokeOpacity);
-      } else {
-        graphics.lineStyle(
-          globalStrokeWidth,
-          strokeHex,
-          +region[5] || globalStrokeOpacity,
-        );
-        graphics.beginFill(fillHex, +region[4] || globalFillOpacity);
-      }
-
-      const scale = this.isVertical ? this._yScale : this._xScale;
-
-      let start = scale(+region[0]);
-      const end = scale(+region[1]);
-
-      let width = end - start;
-
-      const minRectWidth =
-        typeof region[6] !== 'undefined' ? region[6] : globalMinRectWidth;
-
-      if (width < minRectWidth) {
-        // this region is too small to draw so center it on the location
-        // where it would be drawn
-        start = (start + end) / 2 - minRectWidth / 2;
-        width = minRectWidth;
-      }
-
-      if (strokePos) {
-        graphics.lineStyle(1, strokeHex, 0);
-        graphics.beginFill(strokeHex, +region[5] || globalStrokeOpacity);
-
-        strokePos.forEach((pos) => {
-          if (pos === 'top' || pos === 'around') {
-            if (this.isVertical) {
-              graphics.drawRect(0, start, globalStrokeWidth, width);
-            } else {
-              graphics.drawRect(start, 0, width, globalStrokeWidth);
-            }
-          }
-
-          if (pos === 'right' || pos === 'around') {
-            if (this.isVertical) {
-              graphics.drawRect(
-                0,
-                start,
-                this.dimensions[0],
-                globalStrokeWidth,
-              );
-            } else {
-              graphics.drawRect(
-                start,
-                0,
-                globalStrokeWidth,
-                this.dimensions[1],
-              );
-            }
-          }
-
-          if (pos === 'bottom' || pos === 'around') {
-            if (this.isVertical) {
-              graphics.drawRect(
-                this.dimensions[0] - globalStrokeWidth,
-                start,
-                globalStrokeWidth,
-                width,
-              );
-            } else {
-              graphics.drawRect(
-                start,
-                this.dimensions[1] - globalStrokeWidth,
-                width,
-                globalStrokeWidth,
-              );
-            }
-          }
-
-          if (pos === 'left' || pos === 'around') {
-            if (this.isVertical) {
-              graphics.drawRect(
-                0,
-                start + width - globalStrokeWidth,
-                this.dimensions[0],
-                globalStrokeWidth,
-              );
-            } else {
-              graphics.drawRect(
-                start + width - globalStrokeWidth,
-                0,
-                globalStrokeWidth,
-                this.dimensions[1],
-              );
-            }
-          }
-        });
-      } else {
-        graphics.lineStyle(
-          globalStrokeWidth,
-          strokeHex,
-          +region[5] || globalStrokeOpacity,
-        );
-      }
-
-      // Make annotation clickable
-      this.rects[id].graphics.clear();
-      this.rects[id].graphics.interactive = true;
-      this.rects[id].graphics.buttonMode = true;
-
-      graphics.beginFill(fillHex, +region[4] || globalFillOpacity);
-      if (this.isVertical) {
-        graphics.drawRect(0, start, this.dimensions[0], width);
-        this.rects[id].graphics.hitArea = new GLOBALS.PIXI.Rectangle(
-          0,
-          start,
-          this.dimensions[0],
-          width,
-        );
-      } else {
-        graphics.drawRect(start, 0, width, this.dimensions[1]);
-        this.rects[id].graphics.hitArea = new GLOBALS.PIXI.Rectangle(
-          start,
-          0,
-          width,
-          this.dimensions[1],
-        );
-      }
+    super.rerender(options, force);
+  }
 
-      this.rects[id].graphics.mousedown = () => {
-        this.rects[id].mouseDownTime = performance.now();
-      };
+  /*
+   * The local tile identifier
+   */
+  tileToLocalId(tile) {
+    // tile contains [zoomLevel, xPos, yPos]
+    return this.tileToRemoteId(tile);
+  }
 
-      this.rects[id].graphics.mouseup = (event) => {
-        if (
-          performance.now() - this.rects[id].mouseDownTime <
-          MAX_CLICK_DELAY
-        ) {
-          this.pubSub.publish('app.click', {
-            type: 'annotation',
-            event,
-            payload: region,
-          });
-        }
-      };
-    });
+  /**
+   * The tile identifier used on the server
+   */
+  tileToRemoteId(tile) {
+    // tile contains [zoomLevel, xPos, yPos]
+    let tileId = `${tile.join('.')}`;
+
+    if (this.options.projectUid) {
+      // include the projectUid in the options
+      // (resgen feature)
+      tileId = `${tileId}.ui=${this.options.projectUid}`;
+    }
 
-    // Remove outdated rects, i.e., rects whose time stamp is not the current
-    // time stamp stored above.
-    Object.values(this.rects)
-      .filter((rect) => rect.timeStamp !== timeStamp)
-      .forEach((rect) => graphics.removeChild(rect.graphics));
+    return tileId;
   }
 
-  setPosition(newPosition) {
-    super.setPosition(newPosition);
+  /**
+   * @param  {x} x position of the evt relative to the track
+   * @param  {y} y position of the evt relative to the track
+   */
+  click(x, y) {
+    const rects = rectsAtPoint(this, x, y);
+
+    if (!rects.length) {
+      this.selectRect(null);
+    } else {
+      this.selectRect(rects[0].value.uid);
+    }
 
-    this.pMain.position.y = this.position[1];
-    this.pMain.position.x = this.position[0];
+    return {
+      type: '1d-annotations',
+      event: null,
+      payload: rects,
+    };
   }
 
-  zoomed(newXScale, newYScale) {
-    this.xScale(newXScale);
-    this.yScale(newYScale);
-
-    this.draw();
+  render() {
+    super.render();
   }
 }
 

package/app/scripts/Annotations2dTrack.js

@@ -1,4 +1,5 @@
 // @ts-nocheck
+
 import createPubSub from 'pub-sub-es';
 
 import TiledPixiTrack from './TiledPixiTrack';
@@ -41,13 +42,11 @@ class Annotations2dTrack extends TiledPixiTrack {
   /* --------------------------- Getter / Setter ---------------------------- */
 
   get minX() {
-    return this.tilesetInfo && this.tilesetInfo.min_pos
-      ? this.tilesetInfo.min_pos[0]
-      : 0;
+    return this.tilesetInfo?.min_pos ? this.tilesetInfo.min_pos[0] : 0;
   }
 
   get maxX() {
-    return this.tilesetInfo && this.tilesetInfo.max_pos
+    return this.tilesetInfo?.max_pos
       ? this.tilesetInfo.max_pos[0]
       : this.tilesetInfo.max_width || this.tilesetInfo.max_size;
   }
@@ -420,7 +419,10 @@ class Annotations2dTrack extends TiledPixiTrack {
       prevUid = this.selectedAnno.uid;
     }
 
-    this.selectedAnno = { graphics, uid };
+    this.selectedAnno = {
+      graphics,
+      uid,
+    };
     this.focus(graphics, viewPos, uid);
 
     if (this.options.onSelect && !silent) {
@@ -468,8 +470,11 @@ class Annotations2dTrack extends TiledPixiTrack {
     track.appendChild(output);
 
     this.visibleAndFetchedTiles()
-      .filter((tile) => tile.tileData && tile.tileData.length)
-      .map((tile) => ({ graphics: tile.graphics, td: tile.tileData }))
+      .filter((tile) => tile.tileData?.length)
+      .map((tile) => ({
+        graphics: tile.graphics,
+        td: tile.tileData,
+      }))
       .forEach(({ td, graphics }) => {
         const gTile = document.createElement('g');