higlass 1.13.5 → 2.0.0

package/app/scripts/TilesetFinder.jsx

@@ -1,8 +1,8 @@
 // @ts-nocheck
-import React from 'react';
 import PropTypes from 'prop-types';
-import slugid from 'slugid';
+import React from 'react';
 import CheckboxTree from 'react-checkbox-tree';
+import slugid from 'slugid';
 
 import { tileProxy } from './services';
 
@@ -13,7 +13,7 @@ import withPubSub from './hocs/with-pub-sub';
 // Configs
 import { TRACKS_INFO } from './configs';
 
-class TilesetFinder extends React.Component {
+export class TilesetFinder extends React.Component {
   constructor(props) {
     super(props);
 
@@ -128,7 +128,7 @@ class TilesetFinder extends React.Component {
         [].concat(
           ...this.augmentedTracksInfo
             .filter((x) => x.datatype)
-            // eslint-disable-next-line arrow-body-style
+
             .filter((x) => {
               return (
                 x.orientation === this.props.orientation ||
@@ -356,41 +356,49 @@ class TilesetFinder extends React.Component {
             icons={{
               uncheck: (
                 <svg style={svgStyle}>
+                  <title>Uncheck</title>
                   <use xlinkHref="#square_o" />
                 </svg>
               ),
               check: (
                 <svg style={svgStyle}>
+                  <title>Check</title>
                   <use xlinkHref="#check_square_o" />
                 </svg>
               ),
               halfCheck: (
                 <svg style={halfSvgStyle}>
+                  <title>Half Check</title>
                   <use xlinkHref="#check_square_o" />
                 </svg>
               ),
               leaf: (
                 <svg style={svgStyle}>
+                  <title>Leaf</title>
                   <use xlinkHref="#file_o" />
                 </svg>
               ),
               expandClose: (
                 <svg style={svgStyle}>
+                  <title>Expand Close</title>
                   <use xlinkHref="#chevron_right" />
                 </svg>
               ),
               expandOpen: (
                 <svg style={svgStyle}>
+                  <title>Expand Open </title>
                   <use xlinkHref="#chevron_down" />
                 </svg>
               ),
               parentClose: (
                 <svg style={svgStyle}>
+                  <title>Parent Close</title>
                   <use xlinkHref="#folder_o" />
                 </svg>
               ),
               parentOpen: (
                 <svg style={svgStyle}>
+                  <title>Parent Open</title>
                   <use xlinkHref="#folder_open_o" />
                 </svg>
               ),

package/app/scripts/Track.js

@@ -1,8 +1,8 @@
 import { scaleLinear } from 'd3-scale';
 
+import fakePubSub from './utils/fake-pub-sub';
 // Services
 import isWithin from './utils/is-within';
-import fakePubSub from './utils/fake-pub-sub';
 
 /**
  * @typedef TrackContext

package/app/scripts/TrackArea.jsx

@@ -47,6 +47,7 @@ class TrackArea extends React.Component {
           style={this.getMoveImgStyle()}
           width="10px"
         >
+          <title>Move</title>
           <use xlinkHref="#move" />
         </svg>
       ));
@@ -84,6 +85,7 @@ class TrackArea extends React.Component {
           style={this.getSettingsImgStyle()}
           width="10px"
         >
+          <title>No Zoom</title>
           <use xlinkHref="#cog" />
         </svg>
 
@@ -97,6 +99,7 @@ class TrackArea extends React.Component {
           style={this.getAddImgStyle()}
           width="10px"
         >
+          <title>Add</title>
           <use xlinkHref="#plus" />
         </svg>
 
@@ -114,6 +117,7 @@ class TrackArea extends React.Component {
           style={this.getCloseImgStyle()}
           width="10px"
         >
+          <title>Close</title>
           <use xlinkHref="#cross" />
         </svg>
       </div>

package/app/scripts/TrackControl.jsx

@@ -1,11 +1,11 @@
 // @ts-nocheck
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { SortableHandle } from 'react-sortable-hoc';
-import clsx from 'clsx';
 
-import withTheme from './hocs/with-theme';
 import { THEME_DARK } from './configs';
+import withTheme from './hocs/with-theme';
 
 // Styles
 import classes from '../styles/TrackControl.module.scss';

package/app/scripts/TrackRenderer.jsx

@@ -1,45 +1,45 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 
-import { zoom, zoomIdentity } from 'd3-zoom';
-import { select, pointer } from 'd3-selection';
+import clsx from 'clsx';
 import { scaleLinear } from 'd3-scale';
+import { pointer, select } from 'd3-selection';
+import { zoom, zoomIdentity } from 'd3-zoom';
 import slugid from 'slugid';
-import clsx from 'clsx';
 
-import PixiTrack from './PixiTrack';
+import BedLikeTrack from './BedLikeTrack';
+import CombinedTrack from './CombinedTrack';
 import HeatmapTiledPixiTrack from './HeatmapTiledPixiTrack';
 import Id2DTiledPixiTrack from './Id2DTiledPixiTrack';
 import IdHorizontal1DTiledPixiTrack from './IdHorizontal1DTiledPixiTrack';
 import IdVertical1DTiledPixiTrack from './IdVertical1DTiledPixiTrack';
-import TopAxisTrack from './TopAxisTrack';
 import LeftAxisTrack from './LeftAxisTrack';
-import CombinedTrack from './CombinedTrack';
-import BedLikeTrack from './BedLikeTrack';
 import OverlayTrack from './OverlayTrack';
+import PixiTrack from './PixiTrack';
+import TopAxisTrack from './TopAxisTrack';
 
-import HorizontalLine1DPixiTrack from './HorizontalLine1DPixiTrack';
-import HorizontalPoint1DPixiTrack from './HorizontalPoint1DPixiTrack';
-import HorizontalMultivecTrack from './HorizontalMultivecTrack';
 import BarTrack from './BarTrack';
 import DivergentBarTrack from './DivergentBarTrack';
 import Horizontal1dHeatmapTrack from './Horizontal1dHeatmapTrack';
+import HorizontalLine1DPixiTrack from './HorizontalLine1DPixiTrack';
+import HorizontalMultivecTrack from './HorizontalMultivecTrack';
+import HorizontalPoint1DPixiTrack from './HorizontalPoint1DPixiTrack';
 
+import Annotations1dTrack from './Annotations1dTrack';
+import Annotations2dTrack from './Annotations2dTrack';
+import ArrowheadDomainsTrack from './ArrowheadDomainsTrack';
 import CNVIntervalTrack from './CNVIntervalTrack';
+import HorizontalGeneAnnotationsTrack from './HorizontalGeneAnnotationsTrack';
 import LeftTrackModifier from './LeftTrackModifier';
 import Track from './Track';
-import HorizontalGeneAnnotationsTrack from './HorizontalGeneAnnotationsTrack';
-import ArrowheadDomainsTrack from './ArrowheadDomainsTrack';
-import Annotations2dTrack from './Annotations2dTrack';
-import Annotations1dTrack from './Annotations1dTrack';
 
 import Horizontal2DDomainsTrack from './Horizontal2DDomainsTrack';
 
-import SquareMarkersTrack from './SquareMarkersTrack';
+import Chromosome2DAnnotations from './Chromosome2DAnnotations';
 import Chromosome2DLabels from './Chromosome2DLabels';
 import ChromosomeGrid from './ChromosomeGrid';
-import Chromosome2DAnnotations from './Chromosome2DAnnotations';
 import HorizontalChromosomeLabels from './HorizontalChromosomeLabels';
+import SquareMarkersTrack from './SquareMarkersTrack';
 
 import HorizontalHeatmapTrack from './HorizontalHeatmapTrack';
 import UnknownPixiTrack from './UnknownPixiTrack';
@@ -48,13 +48,13 @@ import ViewportTracker2D from './ViewportTracker2D';
 import ViewportTrackerHorizontal from './ViewportTrackerHorizontal';
 import ViewportTrackerVertical from './ViewportTrackerVertical';
 
+import CrossRule from './CrossRule';
 import HorizontalRule from './HorizontalRule';
 import VerticalRule from './VerticalRule';
-import CrossRule from './CrossRule';
 
-import OSMTilesTrack from './OSMTilesTrack';
-import OSMTileIdsTrack from './OSMTileIdsTrack';
 import MapboxTilesTrack from './MapboxTilesTrack';
+import OSMTileIdsTrack from './OSMTileIdsTrack';
+import OSMTilesTrack from './OSMTilesTrack';
 import RasterTilesTrack from './RasterTilesTrack';
 
 import SVGTrack from './SVGTrack';
@@ -129,7 +129,7 @@ const SCROLL_TIMEOUT = 100;
  * @property {() => void} onValueScaleChanged
  * @property {(newOption: Record<string, unknown>) => void} onTrackOptionsChanged
  * @property {() => void} onMouseMoveZoom
- * @property {string} chromInfoPath
+ * @property {string=} chromInfoPath
  * @property {() => boolean} isShowGlobalMousePosition
  * @property {() => import('./types').Theme} getTheme
  * @property {unknown=} AVAILABLE_FOR_PLUGINS
@@ -221,7 +221,7 @@ const SCROLL_TIMEOUT = 100;
 /**
  * @extends {React.Component<TrackRendererProps>}
  */
-class TrackRenderer extends React.Component {
+export class TrackRenderer extends React.Component {
   /**
    * Maintain a list of tracks, and re-render them whenever either
    * their size changes or the zoom level changes
@@ -420,7 +420,6 @@ class TrackRenderer extends React.Component {
     return this._yScale;
   }
 
-  // eslint-disable-next-line camelcase
   UNSAFE_componentWillMount() {
     this.pubSubs = [];
     this.pubSubs.push(
@@ -445,6 +444,7 @@ class TrackRenderer extends React.Component {
       throw new Error('Component did not mount, this.element is not defined.');
     }
     this.elementPos = this.element.getBoundingClientRect();
+
     this.elementSelection = select(this.element);
 
     /** @type {import('pixi.js').Graphics} */
@@ -507,7 +507,6 @@ class TrackRenderer extends React.Component {
       .scaleExtent(this.zoomLimits);
   }
 
-  // eslint-disable-next-line camelcase
   /** @param {TrackRendererProps} nextProps */
   UNSAFE_componentWillReceiveProps(nextProps) {
     /**
@@ -777,7 +776,8 @@ class TrackRenderer extends React.Component {
   ) {
     // Make sure the initial domain is within the limits first
     zoomLimits[0] = zoomLimits[0] === null ? 0 : zoomLimits[0];
-    zoomLimits[1] = zoomLimits[1] === null ? Infinity : zoomLimits[1];
+    zoomLimits[1] =
+      zoomLimits[1] === null ? Number.POSITIVE_INFINITY : zoomLimits[1];
 
     // make sure the two scales are equally wide:
     const xWidth = initialXDomain[1] - initialXDomain[0];
@@ -1569,7 +1569,7 @@ class TrackRenderer extends React.Component {
   zoomStarted(event) {
     this.zooming = true;
 
-    if (event && event.sourceEvent) {
+    if (event?.sourceEvent) {
       this.zoomStartPos = pointer(event.sourceEvent, this.props.canvasElement);
 
       if (event.sourceEvent.shiftKey) {
@@ -1736,10 +1736,10 @@ class TrackRenderer extends React.Component {
             definition: track,
           };
           try {
-            return new pluginTrack.track( // eslint-disable-line new-cap
+            return new pluginTrack.track(
               this.availableForPlugins,
               context,
-              track.options,
+              track.options ?? {},
             );
           } catch (e) {
             console.error(
@@ -1781,7 +1781,7 @@ class TrackRenderer extends React.Component {
     let dataConfig = track.data;
     if (!dataConfig) {
       dataConfig = {
-        server: trimTrailingSlash(track.server),
+        server: trimTrailingSlash(track.server ?? ''),
         tilesetUid: track.tilesetUid,
       };
     }
@@ -1962,9 +1962,8 @@ class TrackRenderer extends React.Component {
       case 'arrowhead-domains':
         return new ArrowheadDomainsTrack(context, track.options);
 
+      case '1d-annotations':
       case 'horizontal-1d-annotations':
-        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.
@@ -2088,10 +2087,10 @@ class TrackRenderer extends React.Component {
           }
 
           try {
-            return new pluginTrack.track( // eslint-disable-line new-cap
+            return new pluginTrack.track(
               this.availableForPlugins,
               context,
-              track.options,
+              track.options ?? {},
             );
           } catch (e) {
             console.error(

package/app/scripts/ValueIntervalTrack.js

@@ -1,8 +1,8 @@
 // @ts-nocheck
 import { scaleLog } from 'd3-scale';
 
-import HorizontalLine1DPixiTrack from './HorizontalLine1DPixiTrack';
 import AxisPixi from './AxisPixi';
+import HorizontalLine1DPixiTrack from './HorizontalLine1DPixiTrack';
 
 import { colorToHex } from './utils';
 

package/app/scripts/VerticalRule.js

@@ -1,6 +1,6 @@
 // @ts-nocheck
-/* eslint-disable max-classes-per-file */
-import { mix, Mixin } from './mixwith';
+
+import { Mixin, mix } from './mixwith';
 
 import PixiTrack from './PixiTrack';
 import RuleMixin from './RuleMixin';

package/app/scripts/VerticalTiledPlot.jsx

@@ -2,25 +2,25 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import clsx from 'clsx';
 import { brushY } from 'd3-brush';
 import { select } from 'd3-selection';
 import slugid from 'slugid';
-import clsx from 'clsx';
 
 import ListWrapper from './ListWrapper';
-import VerticalItem from './VerticalItem';
 import SortableList from './SortableList';
+import VerticalItem from './VerticalItem';
 
 // Utils
-import { or, resetD3BrushStyle, sum, IS_TRACK_RANGE_SELECTABLE } from './utils';
+import { IS_TRACK_RANGE_SELECTABLE, or, resetD3BrushStyle, sum } from './utils';
 
+import stylesPlot from '../styles/TiledPlot.module.scss';
+import stylesTrack from '../styles/Track.module.scss';
 // Styles
-import styles from '../styles/VerticalTiledPlot.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/VerticalTiledPlot.module.scss';
 
 function sourceEvent(event) {
-  return event && event.sourceEvent;
+  return event?.sourceEvent;
 }
 
 class VerticalTiledPlot extends React.Component {

package/app/scripts/ViewConfigEditor.jsx

@@ -1,8 +1,8 @@
 // @ts-nocheck
+import { highlight, languages } from 'prismjs/components/prism-core';
 import PropTypes from 'prop-types';
 import React from 'react';
 import Editor from 'react-simple-code-editor';
-import { highlight, languages } from 'prismjs/components/prism-core';
 import 'prismjs/components/prism-json';
 import Ajv from 'ajv';
 import clsx from 'clsx';

package/app/scripts/ViewContextMenu.jsx

@@ -1,17 +1,20 @@
 // @ts-nocheck
-import React from 'react';
-import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { format } from 'd3-format';
+import PropTypes from 'prop-types';
+import React from 'react';
+
 import { mix } from './mixwith';
 
-import { expandCombinedTracks } from './utils';
 import { getSeriesItems } from './SeriesListItems';
+import { absToChr, expandCombinedTracks } from './utils';
+import copyTextToClipboard from './utils/copy-text-to-clipboard';
 
-import ContextMenuItem from './ContextMenuItem';
 import ContextMenuContainer from './ContextMenuContainer';
+import ContextMenuItem from './ContextMenuItem';
 import SeriesListSubmenuMixin from './SeriesListSubmenuMixin';
 
-import { THEME_DARK } from './configs';
+import { THEME_DARK } from './configs/themes';
 
 // Styles
 import classes from '../styles/ContextMenu.module.scss';
@@ -58,6 +61,17 @@ class ViewContextMenu extends mix(ContextMenuContainer).with(
 
         {seriesItems && <hr className={classes['context-menu-hr']} />}
 
+        {this.props.genomePositionSearchBox && (
+          <ContextMenuItem
+            onClick={this.copyLocationToClipboard.bind(this)}
+            onMouseEnter={(e) => this.handleOtherMouseEnter(e)}
+          >
+            Copy location under cursor
+          </ContextMenuItem>
+        )}
+
+        <hr className={classes['context-menu-hr']} />
+
         <ContextMenuItem
           onClick={() =>
             this.props.onAddTrack({
@@ -155,6 +169,40 @@ class ViewContextMenu extends mix(ContextMenuContainer).with(
     });
   }
 
+  copyLocationToClipboard() {
+    const is2d =
+      this.props.tracks[0] && this.props.tracks[0].position === 'center';
+
+    const chromInfo =
+      this.props.genomePositionSearchBox?.searchField?.chromInfo;
+
+    if (!chromInfo) {
+      console.warn(
+        'There needs to be a genome position search box present to copy the location',
+      );
+      this.props.closeMenu();
+      return;
+    }
+
+    const xAbsCoord = this.props.coords[0];
+    const yAbsCoord = this.props.coords[1];
+
+    const xChr = absToChr(xAbsCoord, chromInfo);
+    const stringFormat = format(',d');
+
+    let locationText = `${xChr[0]}:${stringFormat(xChr[1])}`;
+
+    if (is2d) {
+      const yChr = absToChr(yAbsCoord, chromInfo);
+      locationText = `${locationText} & ${yChr[0]}:${stringFormat(yChr[1])}`;
+      copyTextToClipboard(locationText);
+    } else {
+      copyTextToClipboard(locationText);
+    }
+
+    this.props.closeMenu();
+  }
+
   handleAddVerticalSection() {
     const trackList = expandCombinedTracks(this.props.tracks);
     const matrixTrack = trackList.filter(

package/app/scripts/ViewHeader.jsx

@@ -1,12 +1,12 @@
 // @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 PopupMenu from './PopupMenu';
-import ContextMenuContainer from './ContextMenuContainer';
-import ConfigViewMenu from './ConfigViewMenu';
 import AddTrackPositionMenu from './AddTrackPositionMenu';
+import ConfigViewMenu from './ConfigViewMenu';
+import ContextMenuContainer from './ContextMenuContainer';
+import PopupMenu from './PopupMenu';
 
 // HOCS
 import withTheme from './hocs/with-theme';
@@ -43,7 +43,6 @@ class ViewHeader extends React.Component {
   }
 
   componentDidMount() {
-    // eslint-disable-next-line react/no-did-mount-set-state
     this.setState({ width: this.el.clientWidth });
   }
 
@@ -81,8 +80,8 @@ class ViewHeader extends React.Component {
    *
    * We just need to close the menu here.
    */
-  handleTrackPositionChosen(position) {
-    this.props.onTrackPositionChosen(position);
+  handleTrackPositionChosen(position, extent) {
+    this.props.onTrackPositionChosen(position, extent);
 
     this.setState({
       addTrackPositionMenuUid: null,
@@ -243,8 +242,8 @@ class ViewHeader extends React.Component {
           {this.props.mouseTool === MOUSE_TOOL_SELECT && (
             <svg
               className={clsx(classes['mouse-tool-selection'], classNameIcon)}
-              title="Selection tool active"
             >
+              <title>Selection tool active</title>
               <use xlinkHref="#select" />
             </svg>
           )}
@@ -288,6 +287,7 @@ class ViewHeader extends React.Component {
             onClick={() =>
               this.handleAddTrackPositionMenuOpened(this.props.viewUid)
             }
+            data-testid="add-track"
           >
             <title>Add Track</title>
             <use xlinkHref="#plus" />

package/app/scripts/ViewportTracker2D.js

@@ -1,6 +1,6 @@
 // @ts-nocheck
-import slugid from 'slugid';
 import { brush } from 'd3-brush';
+import slugid from 'slugid';
 
 import SVGTrack from './SVGTrack';