higlass 1.13.5 → 2.0.0

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

package/app/scripts/ChromosomeGrid.js

@@ -1,14 +1,13 @@
 // @ts-nocheck
-import PixiTrack from './PixiTrack';
 import ChromosomeInfo from './ChromosomeInfo';
-import SearchField from './SearchField';
+import TiledPixiTrack from './TiledPixiTrack';
 
 import { colorToHex } from './utils';
 
 // Configs
 import { GLOBALS } from './configs';
 
-class ChromosomeGrid extends PixiTrack {
+class ChromosomeGrid extends TiledPixiTrack {
   constructor(context, options) {
     super(context, options);
     const {
@@ -20,47 +19,59 @@ class ChromosomeGrid extends PixiTrack {
       isOverlay = false,
     } = context;
 
-    this.searchField = null;
     this.chromInfo = null;
     this.animate = animate;
     this.orientation = orientation;
     this.isOverlay = isOverlay;
 
-    let chromSizesPath = chromInfoPath;
-
-    if (!chromSizesPath) {
-      chromSizesPath = `${dataConfig.server}/chrom-sizes/?id=${dataConfig.tilesetUid}`;
+    /** The previous chromInfoPath approach to loading chromosome size.
+     *
+     * This is superseded by loading chromosome sizes directly from the
+     * tileset info object
+     */
+    if (chromInfoPath) {
+      ChromosomeInfo(
+        chromInfoPath,
+        (newChromInfo) => {
+          this.chromInfo = newChromInfo;
+
+          this.tilesetInfoReceived();
+        },
+        this.pubSub,
+      );
     }
+  }
 
-    ChromosomeInfo(
-      chromSizesPath,
-      (newChromInfo) => {
-        this.chromInfo = newChromInfo;
-
-        this.searchField = new SearchField(this.chromInfo);
-
-        this.texts = [];
-        this.lineGraphics = new GLOBALS.PIXI.Graphics();
-        this.lineGraphics1dH = new GLOBALS.PIXI.Graphics();
-        this.lineGraphics1dV = new GLOBALS.PIXI.Graphics();
-        this.lineGraphics2d = new GLOBALS.PIXI.Graphics();
-        this.mask1dH = new GLOBALS.PIXI.Graphics();
-        this.mask1dV = new GLOBALS.PIXI.Graphics();
-        this.mask2d = new GLOBALS.PIXI.Graphics();
-
-        this.lineGraphics.addChild(this.lineGraphics1dH);
-        this.lineGraphics1dH.addChild(this.mask1dH);
-        this.lineGraphics.addChild(this.lineGraphics1dV);
-        this.lineGraphics1dV.addChild(this.mask1dV);
-        this.lineGraphics.addChild(this.lineGraphics2d);
-        this.lineGraphics2d.addChild(this.mask2d);
-        this.pMain.addChild(this.lineGraphics);
-
-        this.draw();
-        this.animate();
-      },
-      pubSub,
-    );
+  /** We got tileset info which (presumably) has chromsizes.
+   *
+   * Set up all the graphics objects necessary for rendering
+   * the chromosome grid.
+   */
+  tilesetInfoReceived() {
+    this.texts = [];
+    this.lineGraphics = new GLOBALS.PIXI.Graphics();
+    this.lineGraphics1dH = new GLOBALS.PIXI.Graphics();
+    this.lineGraphics1dV = new GLOBALS.PIXI.Graphics();
+    this.lineGraphics2d = new GLOBALS.PIXI.Graphics();
+    this.mask1dH = new GLOBALS.PIXI.Graphics();
+    this.mask1dV = new GLOBALS.PIXI.Graphics();
+    this.mask2d = new GLOBALS.PIXI.Graphics();
+
+    this.lineGraphics.addChild(this.lineGraphics1dH);
+    this.lineGraphics1dH.addChild(this.mask1dH);
+    this.lineGraphics.addChild(this.lineGraphics1dV);
+    this.lineGraphics1dV.addChild(this.mask1dV);
+    this.lineGraphics.addChild(this.lineGraphics2d);
+    this.lineGraphics2d.addChild(this.mask2d);
+    this.pMain.addChild(this.lineGraphics);
+
+    this.draw();
+    this.animate();
+  }
+
+  calculateVisibleTiles() {
+    /** This track does not use tiles so return an empty set */
+    return [];
   }
 
   drawLines(orientation = this.orientation, left = 0, top = 0) {
@@ -123,7 +134,7 @@ class ChromosomeGrid extends PixiTrack {
       return;
     }
 
-    if (!this.searchField) {
+    if (!this.tilesetInfo) {
       return;
     }
 

package/app/scripts/ChromosomeInfo.js

@@ -4,8 +4,8 @@ import { tileProxy } from './services';
 
 import absToChr from './utils/abs-to-chr';
 import chrToAbs from './utils/chr-to-abs';
-import parseChromsizesRows from './utils/parse-chromsizes-rows';
 import fakePubSub from './utils/fake-pub-sub';
+import parseChromsizesRows from './utils/parse-chromsizes-rows';
 
 function ChromosomeInfo(filepath, success, pubSub = fakePubSub) {
   const ret = {};

package/app/scripts/CombinedTrack.js

@@ -175,6 +175,7 @@ class CombinedTrack {
   }
 
   minValue(_) {
+    // biome-ignore lint/style/noArguments: Getter/Setter
     if (arguments.length === 0) {
       const minValues = this.childTracks
         .filter((x) => x.minValue) // filter for tracks which have the minValue function
@@ -192,6 +193,7 @@ class CombinedTrack {
   }
 
   maxValue(_) {
+    // biome-ignore lint/style/noArguments: Getter/Setter
     if (arguments.length === 0) {
       const maxValues = this.childTracks
         .filter((x) => x.maxValue) // filter for tracks which have the minValue function
@@ -230,7 +232,7 @@ class CombinedTrack {
       if (childTrack.getMouseOverHtml) {
         const trackHtml = childTrack.getMouseOverHtml(trackX, trackY);
 
-        if (trackHtml && trackHtml.length) {
+        if (trackHtml?.length) {
           mouseOverHtml += trackHtml;
           mouseOverHtml += '<br/>';
         }

package/app/scripts/ConfigTrackMenu.jsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
-import React from 'react';
 import clsx from 'clsx';
+import React from 'react';
 import { mix } from './mixwith';
 
 import ContextMenuContainer from './ContextMenuContainer';

package/app/scripts/ConfigViewMenu.jsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
-import React from 'react';
-import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import ContextMenuContainer from './ContextMenuContainer';
 import ContextMenuItem from './ContextMenuItem';

package/app/scripts/ContextMenuContainer.jsx

@@ -1,8 +1,8 @@
 // @ts-nocheck
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import clsx from 'clsx';
 
 import { THEME_DARK } from './configs';
 
@@ -36,7 +36,6 @@ class ContextMenuContainer extends React.Component {
     this.updateOrientation();
   }
 
-  // eslint-disable-next-line camelcase
   UNSAFE_componentWillReceiveProps(newProps) {
     this.adjusted = false;
 
@@ -59,6 +58,9 @@ class ContextMenuContainer extends React.Component {
     });
   }
 
+  /**
+   * @param {React.MouseEvent} evt
+   */
   handleItemMouseEnter(evt, series) {
     this.handleItemMouseEnterWithRect(
       evt.currentTarget.getBoundingClientRect(),

package/app/scripts/ContextMenuItem.jsx

@@ -1,20 +1,32 @@
-// @ts-nocheck
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
 
 // Styles
 import classes from '../styles/ContextMenu.module.scss';
 
+/**
+ * @typedef ContextMenuItemProps
+ * @prop {string} [className]
+ * @prop {(evt: React.MouseEvent) => void} onClick
+ * @prop {(evt: React.MouseEvent) => void} onMouseEnter
+ * @prop {(evt: React.MouseEvent) => void} onMouseLeave
+ */
+
+/**
+ * @param {React.PropsWithChildren<ContextMenuItemProps>} props
+ */
 function ContextMenuItem(props) {
   return (
     <div
       data-menu-item-for={
         typeof props.children === 'string' ? props.children : null
       }
-      className={classes['context-menu-item']}
+      className={clsx(classes['context-menu-item'], props.className)}
       onClick={(e) => props.onClick(e)}
       onMouseEnter={(e) => props.onMouseEnter(e)}
       onMouseLeave={(e) => props.onMouseLeave(e)}
+      // biome-ignore lint/a11y/useSemanticElements:
       role="button"
       tabIndex={0}
     >

package/app/scripts/CrossRule.js

@@ -1,6 +1,6 @@
 // @ts-nocheck
-import { colorToHex } from './utils';
 import { mix } from './mixwith';
+import { colorToHex } from './utils';
 
 import PixiTrack from './PixiTrack';
 import RuleMixin from './RuleMixin';

package/app/scripts/CustomTrackDialog.jsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 import Dialog from './Dialog';
 
@@ -12,7 +12,7 @@ class CustomTrackDialog extends React.PureComponent {
     const childrenWithProp = [];
     this.props.children.forEach((Child, i) => {
       const key = `customTrackDialog_${i}`;
-      // eslint-disable-next-line react/jsx-props-no-spreading
+
       childrenWithProp.push(<Child key={key} {...this.props.bodyProps[i]} />);
     });
 

package/app/scripts/Dialog.jsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
-import React from 'react';
-import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import Button from './Button';
 import Cross from './Cross';

package/app/scripts/DragListeningDiv.jsx

@@ -1,8 +1,8 @@
 // @ts-nocheck
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
 import slugid from 'slugid';
-import clsx from 'clsx';
 
 import withPubSub from './hocs/with-pub-sub';
 

package/app/scripts/DraggableDiv.jsx

@@ -1,12 +1,12 @@
 // @ts-nocheck
+import clsx from 'clsx';
 import { drag } from 'd3-drag';
 import { pointer, select } from 'd3-selection';
 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/DraggableDiv.module.scss';
 
@@ -65,7 +65,6 @@ class DraggableDiv extends React.Component {
     select(this.rightHandle).call(this.dragRight);
   }
 
-  // eslint-disable-next-line camelcase
   UNSAFE_componentWillReceiveProps(newProps) {
     if ('width' in newProps) {
       this.setState({ width: newProps.width });

package/app/scripts/ExportLinkDialog.jsx

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