higlass 1.13.4 → 1.13.6

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);
 

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';
 

package/app/scripts/Annotations1dTrack.js

@@ -54,7 +54,7 @@ class Annotations1dTrack extends PixiTrack {
         : 0;
 
     let strokePos;
-    if (this.options.strokePos && this.options.strokePos.length) {
+    if (this.options.strokePos?.length) {
       strokePos = Array.isArray(this.options.strokePos)
         ? this.options.strokePos
         : [this.options.strokePos];

package/app/scripts/Annotations2dTrack.js

@@ -41,13 +41,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;
   }
@@ -468,7 +466,7 @@ class Annotations2dTrack extends TiledPixiTrack {
     track.appendChild(output);
 
     this.visibleAndFetchedTiles()
-      .filter((tile) => tile.tileData && tile.tileData.length)
+      .filter((tile) => tile.tileData?.length)
       .map((tile) => ({ graphics: tile.graphics, td: tile.tileData }))
       .forEach(({ td, graphics }) => {
         const gTile = document.createElement('g');

package/app/scripts/Autocomplete.jsx

@@ -1,9 +1,9 @@
 // @ts-nocheck
-/* eslint-disable react/jsx-props-no-spreading */
-import React from 'react';
-import { findDOMNode } from 'react-dom';
+
 import scrollIntoView from 'dom-scroll-into-view';
 import PropTypes from 'prop-types';
+import React from 'react';
+import { findDOMNode } from 'react-dom';
 
 const _debugStates = [];
 
@@ -102,14 +102,12 @@ class Autocomplete extends React.Component {
     };
   }
 
-  // eslint-disable-next-line camelcase
   UNSAFE_componentWillMount() {
     this._ignoreBlur = false;
     this._performAutoCompleteOnUpdate = false;
     this._performAutoCompleteOnKeyUp = false;
   }
 
-  // eslint-disable-next-line camelcase
   UNSAFE_componentWillReceiveProps(nextProps) {
     this._performAutoCompleteOnUpdate = true;
     // If `items` has changed we want to reset `highlightedIndex`
@@ -143,9 +141,8 @@ class Autocomplete extends React.Component {
 
   maybeScrollItemIntoView() {
     if (this.state.isOpen === true && this.state.highlightedIndex !== null) {
-      // eslint-disable-next-line react/no-string-refs
       const itemNode = this.refs[`item-${this.state.highlightedIndex}`];
-      // eslint-disable-next-line react/no-string-refs
+
       const menuNode = this.refs.menu;
       if (itemNode) {
         scrollIntoView(findDOMNode(itemNode), findDOMNode(menuNode), {
@@ -217,9 +214,9 @@ class Autocomplete extends React.Component {
     const node = this.inputEl;
     const rect = node.getBoundingClientRect();
     const computedStyle = global.window.getComputedStyle(node);
-    const marginBottom = parseInt(computedStyle.marginBottom, 10) || 0;
-    const marginLeft = parseInt(computedStyle.marginLeft, 10) || 0;
-    const marginRight = parseInt(computedStyle.marginRight, 10) || 0;
+    const marginBottom = Number.parseInt(computedStyle.marginBottom, 10) || 0;
+    const marginLeft = Number.parseInt(computedStyle.marginLeft, 10) || 0;
+    const marginRight = Number.parseInt(computedStyle.marginRight, 10) || 0;
     this.setState({
       menuTop: rect.bottom + marginBottom,
       menuLeft: rect.left + marginLeft,
@@ -354,26 +351,26 @@ class Autocomplete extends React.Component {
           autoComplete="off"
           onBlur={this.composeEventHandlers(
             this.handleInputBlur.bind(this),
-            inputProps.onBlur && inputProps.onBlur.bind(this),
+            inputProps.onBlur?.bind(this),
           )}
           onChange={this.handleChange.bind(this)}
           onClick={this.composeEventHandlers(
             this.handleInputClick.bind(this),
-            inputProps.onClick && inputProps.onClick.bind(this),
+            inputProps.onClick?.bind(this),
           )}
           onFocus={this.composeEventHandlers(
             this.handleInputFocus.bind(this),
-            inputProps.onFocus && inputProps.onFocus.bind(this),
+            inputProps.onFocus?.bind(this),
           )}
           onKeyDown={this.composeEventHandlers(
             this.handleKeyDown.bind(this),
-            inputProps.onKeyDown && inputProps.onKeyDown.bind(this),
+            inputProps.onKeyDown?.bind(this),
           )}
           onKeyUp={this.composeEventHandlers(
             this.handleKeyUp.bind(this),
-            inputProps.onKeyUp && inputProps.onKeyUp.bind(this),
+            inputProps.onKeyUp?.bind(this),
           )}
-          // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+          // biome-ignore lint/a11y/useAriaPropsForRole:
           role="combobox"
           value={this.props.value}
         />
@@ -403,11 +400,7 @@ Autocomplete.defaultProps = {
   onChange() {},
   onSelect() {},
   renderMenu(items, value, style) {
-    return (
-      /* eslint-disable react/no-this-in-sfc */
-      <div style={{ ...style, ...this.menuStyle }}>{items}</div>
-      /* eslint-enable react/no-this-in-sfc */
-    );
+    return <div style={{ ...style, ...this.menuStyle }}>{items}</div>;
   },
   shouldItemRender() {
     return true;

package/app/scripts/AxisPixi.js

@@ -2,9 +2,11 @@
 import { format } from 'd3-format';
 
 // Configs
-import { GLOBALS, THEME_DARK } from './configs';
+import GLOBALS from './configs/globals';
+import { THEME_DARK } from './configs/themes';
 
-import { colorToHex } from './utils';
+// Utils
+import colorToHex from './utils/color-to-hex';
 
 const TICK_HEIGHT = 40;
 const TICK_MARGIN = 0;
@@ -136,7 +138,7 @@ class AxisPixi {
       graphics.moveTo(-TICK_MARGIN, valueScale(tick));
       graphics.lineTo(-(TICK_MARGIN + TICK_LENGTH), valueScale(tick));
 
-      if (this.track && this.track.flipText) {
+      if (this.track?.flipText) {
         this.axisTexts[i].scale.x = -1;
       }
     }
@@ -178,7 +180,7 @@ class AxisPixi {
       graphics.moveTo(TICK_MARGIN, valueScale(tick));
       graphics.lineTo(TICK_MARGIN + TICK_LENGTH, valueScale(tick));
 
-      if (this.track && this.track.flipText) {
+      if (this.track?.flipText) {
         this.axisTexts[i].scale.x = -1;
       }
     }
@@ -226,7 +228,7 @@ class AxisPixi {
 
     let stroke = 'black';
 
-    if (this.track && this.track.options.lineStrokeColor) {
+    if (this.track?.options.lineStrokeColor) {
       stroke = this.track.options.lineStrokeColor;
     }
     // TODO: On the canvas, there is no vertical line beside the scale,
@@ -252,7 +254,7 @@ class AxisPixi {
     // factor out the styling for axis lines
     let stroke = 'black';
 
-    if (this.track && this.track.options.lineStrokeColor) {
+    if (this.track?.options.lineStrokeColor) {
       stroke = this.track.options.lineStrokeColor;
     }
 
@@ -304,9 +306,7 @@ class AxisPixi {
 
       tickLine.setAttribute(
         'd',
-        `M${+TICK_MARGIN},${valueScale(tick)} L${+(
-          TICK_MARGIN + TICK_LENGTH
-        )},${valueScale(tick)}`,
+        `M${+TICK_MARGIN},${valueScale(tick)} L${+(TICK_MARGIN + TICK_LENGTH)},${valueScale(tick)}`,
       );
 
       const g = document.createElement('g');
@@ -350,9 +350,7 @@ class AxisPixi {
 
       tickLine.setAttribute(
         'd',
-        `M${-TICK_MARGIN},${valueScale(tick)} L${-(
-          TICK_MARGIN + TICK_LENGTH
-        )},${valueScale(tick)}`,
+        `M${-TICK_MARGIN},${valueScale(tick)} L${-(TICK_MARGIN + TICK_LENGTH)},${valueScale(tick)}`,
       );
 
       const g = document.createElement('g');

package/app/scripts/BarTrack.js

@@ -20,7 +20,7 @@ class BarTrack extends HorizontalLine1DPixiTrack {
     this.pMain.addChild(this.zeroLine);
     this.valueScaleTransform = zoomIdentity;
 
-    if (this.options && this.options.colorRange) {
+    if (this.options?.colorRange) {
       if (this.options.colorRangeGradient) {
         this.setColorGradient(this.options.colorRange);
       } else {
@@ -226,7 +226,7 @@ class BarTrack extends HorizontalLine1DPixiTrack {
   }
 
   rerender(options, force) {
-    if (options && options.colorRange) {
+    if (options?.colorRange) {
       if (options.colorRangeGradient) {
         this.setColorGradient(options.colorRange);
       } else {
@@ -430,7 +430,7 @@ class BarTrack extends HorizontalLine1DPixiTrack {
     if (this.options.zeroLine) this.drawZeroLineSvg(output);
 
     this.visibleAndFetchedTiles()
-      .filter((tile) => tile.svgData && tile.svgData.barXValues)
+      .filter((tile) => tile.svgData?.barXValues)
       .forEach((tile) => {
         // const [xScale, xPos] = this.getXScaleAndOffset(tile.drawnAtScale);
         const data = tile.svgData;

package/app/scripts/BedLikeTrack.js

@@ -2,8 +2,8 @@
 import boxIntersect from 'box-intersect';
 import { median, range } from 'd3-array';
 import { scaleBand, scaleLinear } from 'd3-scale';
-import classifyPoint from 'robust-point-in-polygon';
 import { zoomIdentity } from 'd3-zoom';
+import classifyPoint from 'robust-point-in-polygon';
 
 import HorizontalTiled1DPixiTrack from './HorizontalTiled1DPixiTrack';
 import trackUtils from './track-utils';
@@ -84,7 +84,7 @@ class BedLikeTrack extends HorizontalTiled1DPixiTrack {
     let plusStrandRows = [];
     let minusStrandRows = [];
 
-    if (tile.tileData && tile.tileData.length) {
+    if (tile.tileData?.length) {
       tile.tileData.sort((a, b) => b.importance - a.importance);
       // tile.tileData = tile.tileData.slice(0, MAX_TILE_ENTRIES);
 
@@ -164,9 +164,9 @@ class BedLikeTrack extends HorizontalTiled1DPixiTrack {
     tile.rectGraphics.clear();
     tile.rendered = false;
 
-    if (tile.tileData && tile.tileData.length) {
+    if (tile.tileData?.length) {
       tile.tileData.forEach((td, i) => {
-        if (this.drawnRects[zoomLevel] && this.drawnRects[zoomLevel][td.uid]) {
+        if (this.drawnRects[zoomLevel]?.[td.uid]) {
           if (this.drawnRects[zoomLevel][td.uid][2] === tile.tileId) {
             // this was the tile that drew that rectangle
             delete this.drawnRects[zoomLevel][td.uid];
@@ -196,7 +196,7 @@ class BedLikeTrack extends HorizontalTiled1DPixiTrack {
   }
 
   drawTile(tile) {
-    if (this.options && this.options.valueColumn) {
+    if (this.options?.valueColumn) {
       // there might no be a value scale if no valueColumn was specified
       if (this.valueScale) this.drawAxis(this.valueScale);
     }
@@ -404,7 +404,7 @@ class BedLikeTrack extends HorizontalTiled1DPixiTrack {
   setValueScale() {
     this.valueScale = null;
 
-    if (this.options && this.options.valueColumn) {
+    if (this.options?.valueColumn) {
       /**
        * These intervals come with some y-value that we want to plot
        */
@@ -431,8 +431,7 @@ class BedLikeTrack extends HorizontalTiled1DPixiTrack {
     this.colorValueScale = null;
 
     if (
-      this.options &&
-      this.options.colorEncoding &&
+      this.options?.colorEncoding &&
       this.options.colorEncoding !== 'itemRgb'
     ) {
       const min = this.options.colorEncodingRange
@@ -655,7 +654,7 @@ class BedLikeTrack extends HorizontalTiled1DPixiTrack {
     // this.options.colorEncoding is set
     this.setColorValueScale();
 
-    if (tile.tileData && tile.tileData.length) {
+    if (tile.tileData?.length) {
       const fill =
         this.options.plusStrandColor || this.options.fillColor || 'blue';
       const minusStrandFill =
@@ -721,7 +720,7 @@ class BedLikeTrack extends HorizontalTiled1DPixiTrack {
       null,
       visibleAndFetchedIds
         .map((x) => this.fetchedTiles[x])
-        .filter((x) => x.tileData && x.tileData.length)
+        .filter((x) => x.tileData?.length)
         .map((x) =>
           Math.min.apply(
             null,
@@ -753,7 +752,7 @@ class BedLikeTrack extends HorizontalTiled1DPixiTrack {
       null,
       visibleAndFetchedIds
         .map((x) => this.fetchedTiles[x])
-        .filter((x) => x.tileData && x.tileData.length)
+        .filter((x) => x.tileData?.length)
         .map((x) =>
           Math.max.apply(
             null,
@@ -789,7 +788,7 @@ class BedLikeTrack extends HorizontalTiled1DPixiTrack {
       .concat(
         ...visibleAndFetchedIds
           .map((x) => this.fetchedTiles[x])
-          .filter((x) => x.tileData && x.tileData.length)
+          .filter((x) => x.tileData?.length)
           .map((x) =>
             x.tileData
               .sort((a, b) => b.importance - a.importance)
@@ -833,7 +832,7 @@ class BedLikeTrack extends HorizontalTiled1DPixiTrack {
         continue;
       }
 
-      if (tile.tileData && tile.tileData.length) {
+      if (tile.tileData?.length) {
         tile.tileData.forEach((td) => {
           if (!tile.texts) {
             // tile probably hasn't been initialized yet

package/app/scripts/Button.jsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 import classes from '../styles/Button.module.scss';
 

package/app/scripts/CNVIntervalTrack.js

@@ -1,6 +1,6 @@
 // @ts-nocheck
-import { scaleBand } from 'd3-scale';
 import { range } from 'd3-array';
+import { scaleBand } from 'd3-scale';
 import { segmentsToRows } from './utils';
 
 import HorizontalTiled1DPixiTrack from './HorizontalTiled1DPixiTrack';

package/app/scripts/CenterTrack.jsx

@@ -1,25 +1,25 @@
 // @ts-nocheck
-import PropTypes from 'prop-types';
-import React from 'react';
+import clsx from 'clsx';
 import { brush, brushX, brushY } from 'd3-brush';
 import { select } from 'd3-selection';
-import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import TrackControl from './TrackControl';
 
 // Utils
-import { or, resetD3BrushStyle, IS_TRACK_RANGE_SELECTABLE } from './utils';
+import { IS_TRACK_RANGE_SELECTABLE, or, resetD3BrushStyle } from './utils';
 
 // Styles
-import styles from '../styles/CenterTrack.module.scss'; // eslint-disable-line no-unused-vars
-import stylesTrack from '../styles/Track.module.scss'; // eslint-disable-line no-unused-vars
+import styles from '../styles/CenterTrack.module.scss';
+import stylesTrack from '../styles/Track.module.scss';
 
 const STYLES = {
   pointerEvents: 'all',
 };
 
 function sourceEvent(event) {
-  return event && event.sourceEvent;
+  return event?.sourceEvent;
 }
 
 class CenterTrack extends React.Component {
@@ -488,6 +488,7 @@ class CenterTrack extends React.Component {
             }}
             xmlns="http://www.w3.org/2000/svg"
           >
+            <title>Range Selection Brush</title>
             <g
               ref={(el) => {
                 this.brushElX = select(el);

package/app/scripts/Chromosome2DAnnotations.js

@@ -1,8 +1,8 @@
 // @ts-nocheck
 import { color } from 'd3-color';
 
-import PixiTrack from './PixiTrack';
 import ChromosomeInfo from './ChromosomeInfo';
+import PixiTrack from './PixiTrack';
 
 // Configs
 import { GLOBALS } from './configs';

package/app/scripts/Chromosome2DLabels.js

@@ -1,8 +1,8 @@
 // @ts-nocheck
 import boxIntersect from 'box-intersect';
 
-import PixiTrack from './PixiTrack';
 import ChromosomeInfo from './ChromosomeInfo';
+import PixiTrack from './PixiTrack';
 import SearchField from './SearchField';
 
 import { absToChr } from './utils';