higlass 1.13.5 → 1.13.6

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;
 

package/app/scripts/ContextMenuItem.jsx

@@ -15,6 +15,7 @@ function ContextMenuItem(props) {
       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';

package/app/scripts/GalleryTracks.jsx

@@ -1,14 +1,14 @@
 // @ts-nocheck
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
-import clsx from 'clsx';
 
 import TrackControl from './TrackControl';
 
 // Styles
-import styles from '../styles/GalleryTracks.module.scss'; // eslint-disable-line no-unused-vars
-import stylesPlot from '../styles/TiledPlot.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/GalleryTracks.module.scss';
+import stylesPlot from '../styles/TiledPlot.module.scss';
+import stylesTrack from '../styles/Track.module.scss';
 
 const STYLES = {
   pointerEvents: 'all',
@@ -32,85 +32,84 @@ class GalleryTracks extends React.Component {
   render() {
     return (
       <div className={clsx('gallery-tracks', styles['gallery-tracks'])}>
-        {this.props.tracks &&
-          this.props.tracks.map((track, index) => (
+        {this.props.tracks?.map((track, index) => (
+          <div
+            key={track.uid || index}
+            className={styles['gallery-track']}
+            onMouseLeave={this.mouseLeaveHandler.bind(this)}
+            style={{
+              top: track.height * index,
+              right: track.height * index,
+              bottom: track.height * index,
+              left: track.height * index,
+            }}
+          >
+            <div
+              className={styles['gallery-sub-track']}
+              onMouseEnter={this.mouseEnterHandler.bind(this)}
+              style={{
+                top: 0,
+                right: 0,
+                left: 0,
+                height: track.height,
+              }}
+            />
+            <div
+              className={styles['gallery-sub-track']}
+              onMouseEnter={this.mouseEnterHandler.bind(this)}
+              style={{
+                top: 0,
+                right: 0,
+                bottom: 0,
+                width: track.height,
+              }}
+            />
+            <div
+              className={styles['gallery-sub-track']}
+              onMouseEnter={this.mouseEnterHandler.bind(this)}
+              style={{
+                right: 0,
+                bottom: 0,
+                left: 0,
+                height: track.height,
+              }}
+            />
+            <div
+              className={styles['gallery-sub-track']}
+              onMouseEnter={this.mouseEnterHandler.bind(this)}
+              style={{
+                top: 0,
+                bottom: 0,
+                left: 0,
+                width: track.height,
+              }}
+            />
             <div
-              key={track.uid || index}
-              className={styles['gallery-track']}
+              className={styles['gallery-invisible-track']}
               onMouseLeave={this.mouseLeaveHandler.bind(this)}
               style={{
-                top: track.height * index,
-                right: track.height * index,
-                bottom: track.height * index,
-                left: track.height * index,
+                top: track.height,
+                right: track.height,
+                bottom: track.height,
+                left: track.height,
               }}
-            >
-              <div
-                className={styles['gallery-sub-track']}
-                onMouseEnter={this.mouseEnterHandler.bind(this)}
-                style={{
-                  top: 0,
-                  right: 0,
-                  left: 0,
-                  height: track.height,
-                }}
-              />
-              <div
-                className={styles['gallery-sub-track']}
-                onMouseEnter={this.mouseEnterHandler.bind(this)}
-                style={{
-                  top: 0,
-                  right: 0,
-                  bottom: 0,
-                  width: track.height,
-                }}
-              />
-              <div
-                className={styles['gallery-sub-track']}
-                onMouseEnter={this.mouseEnterHandler.bind(this)}
-                style={{
-                  right: 0,
-                  bottom: 0,
-                  left: 0,
-                  height: track.height,
-                }}
-              />
-              <div
-                className={styles['gallery-sub-track']}
-                onMouseEnter={this.mouseEnterHandler.bind(this)}
-                style={{
-                  top: 0,
-                  bottom: 0,
-                  left: 0,
-                  width: track.height,
-                }}
-              />
-              <div
-                className={styles['gallery-invisible-track']}
-                onMouseLeave={this.mouseLeaveHandler.bind(this)}
-                style={{
-                  top: track.height,
-                  right: track.height,
-                  bottom: track.height,
-                  left: track.height,
-                }}
+            />
+            {this.props.editable && (
+              <TrackControl
+                configMenuVisible={true}
+                imgStyleAdd={STYLES}
+                imgStyleClose={STYLES}
+                imgStyleMove={STYLES}
+                imgStyleSettings={STYLES}
+                isMoveable={false}
+                isVisible={this.state.hovering}
+                onCloseTrackMenuOpened={this.props.onCloseTrackMenuOpened}
+                onConfigTrackMenuOpened={this.props.onConfigTrackMenuOpened}
+                uid={track.uid || index}
               />
-              {this.props.editable && (
-                <TrackControl
-                  configMenuVisible={true}
-                  imgStyleAdd={STYLES}
-                  imgStyleClose={STYLES}
-                  imgStyleMove={STYLES}
-                  imgStyleSettings={STYLES}
-                  isMoveable={false}
-                  isVisible={this.state.hovering}
-                  onCloseTrackMenuOpened={this.props.onCloseTrackMenuOpened}
-                  onConfigTrackMenuOpened={this.props.onConfigTrackMenuOpened}
-                  uid={track.uid || index}
-                />
-              )}
-            </div>
-          ))}
+            )}
+          </div>
+        ))}
       </div>
     );
   }

package/app/scripts/GenomePositionSearchBox.jsx

@@ -1,30 +1,30 @@
 // @ts-nocheck
+import clsx from 'clsx';
 import { select } from 'd3-selection';
+import PropTypes from 'prop-types';
 import React from 'react';
 import slugid from 'slugid';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
 
 import Autocomplete from './Autocomplete';
 import ChromosomeInfo from './ChromosomeInfo';
-import SearchField from './SearchField';
 import PopupMenu from './PopupMenu';
+import SearchField from './SearchField';
 
+import withPubSub from './hocs/with-pub-sub';
 // Services
 import { tileProxy } from './services';
-import withPubSub from './hocs/with-pub-sub';
 
 // Utils
-import { scalesCenterAndK, dictKeys, toVoid } from './utils';
+import { dictKeys, scalesCenterAndK, toVoid } from './utils';
 
+// Configs
+import { THEME_DARK, ZOOM_TRANSITION_DURATION } from './configs';
 // HOCS
 import withTheme from './hocs/with-theme';
 import { SearchIcon } from './icons';
-// Configs
-import { THEME_DARK, ZOOM_TRANSITION_DURATION } from './configs';
 
 // Styles
-import styles from '../styles/GenomePositionSearchBox.module.scss'; // eslint-disable-line no-unused-vars
+import styles from '../styles/GenomePositionSearchBox.module.scss';
 
 class GenomePositionSearchBox extends React.Component {
   constructor(props) {
@@ -537,7 +537,8 @@ class GenomePositionSearchBox extends React.Component {
             }
             foundGeneSymbol = true; // we found a gene symbol
             break;
-          } else if (k === j + 1) {
+          }
+          if (k === j + 1) {
             if (spacePart.length) {
               spacePart += '-';
             }

package/app/scripts/HeatmapOptions.jsx

@@ -121,15 +121,16 @@ class HeatmapOptions extends React.Component {
                   height: 10,
                 }}
               >
+                <title>Remove</title>
                 <use xlinkHref="#cross" />
               </svg>
             </div>
           ) : null; // removeButton
 
         return (
-          /* eslint-disable react/no-array-index-key */
           // Colors may be repeated, so the array index is the best choice here.
           <div
+            // biome-ignore lint/suspicious/noArrayIndexKey:
             key={`l${i}`}
             style={{
               borderRadius: '1px',
@@ -140,6 +141,7 @@ class HeatmapOptions extends React.Component {
           >
             {removeButton}
             <SketchInlinePicker
+              // biome-ignore lint/suspicious/noArrayIndexKey:
               key={i}
               color={this.state.colors[i]}
               onChange={(c) => {
@@ -156,7 +158,6 @@ class HeatmapOptions extends React.Component {
               }}
             />
           </div>
-          /* eslint-enable react/no-array-index-key */
         );
       })
       .reverse();
@@ -192,6 +193,7 @@ class HeatmapOptions extends React.Component {
               }}
               width="10px"
             >
+              <title>Add</title>
               <use xlinkHref="#plus" />
             </svg>
           </div>