higlass 1.11.10 → 1.12.0

package/app/scripts/{DraggableDiv.js → DraggableDiv.jsx}

@@ -1,12 +1,14 @@
+// @ts-check
 import { drag } from 'd3-drag';
-import { event, mouse, select } from 'd3-selection';
+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 '../styles/DraggableDiv.module.scss';
+import classes from '../styles/DraggableDiv.module.scss';
 
 class DraggableDiv extends React.Component {
   constructor(props) {
@@ -76,8 +78,8 @@ class DraggableDiv extends React.Component {
 
   /* ---------------------------- Custom Methods ---------------------------- */
 
-  dragBottomFunc() {
-    const ms = mouse(this.domBody);
+  dragBottomFunc(event) {
+    const ms = pointer(event, this.domBody);
 
     let newHeight = this.dragStartHeight + (ms[1] - this.dragStartMousePos[1]);
     newHeight = newHeight > this.minHeight ? newHeight : this.minHeight;
@@ -88,8 +90,8 @@ class DraggableDiv extends React.Component {
     this.sizeChanged();
   }
 
-  dragLeftFunc() {
-    const ms = mouse(this.domBody);
+  dragLeftFunc(event) {
+    const ms = pointer(event, this.domBody);
 
     let newWidth = this.dragStartWidth - (ms[0] - this.dragStartMousePos[0]);
     newWidth = newWidth > this.minWidth ? newWidth : this.minWidth;
@@ -109,8 +111,8 @@ class DraggableDiv extends React.Component {
     this.sizeChanged();
   }
 
-  dragTopFunc() {
-    const ms = mouse(this.domBody);
+  dragTopFunc(event) {
+    const ms = pointer(event, this.domBody);
 
     let newHeight = this.dragStartHeight - (ms[1] - this.dragStartMousePos[1]);
     newHeight = newHeight > this.minHeight ? newHeight : this.minHeight;
@@ -130,8 +132,8 @@ class DraggableDiv extends React.Component {
     this.sizeChanged();
   }
 
-  dragRightFunc() {
-    const ms = mouse(this.domBody);
+  dragRightFunc(event) {
+    const ms = pointer(event, this.domBody);
 
     let newWidth = this.dragStartWidth + (ms[0] - this.dragStartMousePos[0]);
     newWidth = newWidth > this.minWidth ? newWidth : this.minWidth;
@@ -144,8 +146,8 @@ class DraggableDiv extends React.Component {
     this.sizeChanged();
   }
 
-  dragBottomLeftFunc() {
-    const ms = mouse(this.domBody);
+  dragBottomLeftFunc(event) {
+    const ms = pointer(event, this.domBody);
 
     let newHeight = this.dragStartHeight + (ms[1] - this.dragStartMousePos[1]);
     newHeight = newHeight > this.minHeight ? newHeight : this.minHeight;
@@ -169,8 +171,8 @@ class DraggableDiv extends React.Component {
     this.sizeChanged();
   }
 
-  dragBottomRightFunc() {
-    const ms = mouse(this.domBody);
+  dragBottomRightFunc(event) {
+    const ms = pointer(event, this.domBody);
 
     let newWidth = this.dragStartWidth + (ms[0] - this.dragStartMousePos[0]);
     newWidth = newWidth > this.minWidth ? newWidth : this.minWidth;
@@ -187,8 +189,8 @@ class DraggableDiv extends React.Component {
     this.sizeChanged();
   }
 
-  dragTopRightFunc() {
-    const ms = mouse(this.domBody);
+  dragTopRightFunc(event) {
+    const ms = pointer(event, this.domBody);
 
     let newHeight = this.dragStartHeight - (ms[1] - this.dragStartMousePos[1]);
     newHeight = newHeight > this.minHeight ? newHeight : this.minHeight;
@@ -212,8 +214,8 @@ class DraggableDiv extends React.Component {
     this.sizeChanged();
   }
 
-  dragTopLeftFunc() {
-    const ms = mouse(this.domBody);
+  dragTopLeftFunc(event) {
+    const ms = pointer(event, this.domBody);
 
     let newWidth = this.dragStartWidth - (ms[0] - this.dragStartMousePos[0]);
     newWidth = newWidth > this.minWidth ? newWidth : this.minWidth;
@@ -245,8 +247,8 @@ class DraggableDiv extends React.Component {
     this.sizeChanged();
   }
 
-  dragStart() {
-    this.dragStartMousePos = mouse(this.domBody);
+  dragStart(event) {
+    this.dragStartMousePos = pointer(event, this.domBody);
 
     this.dragStartWidth = this.state.width;
     this.dragStartHeight = this.state.height;
@@ -310,13 +312,13 @@ class DraggableDiv extends React.Component {
         ref={(c) => {
           this[`${x}Handle`] = c;
         }}
+        className={classes[`${x}-draggable-handle`]}
         style={styles[x]}
-        styleName={`${x}-draggable-handle`}
         title="Resize track"
       >
         <div
+          className={classes[`${x}-draggable-handle-grabber`]}
           style={{ borderColor: dragColor }}
-          styleName={`${x}-draggable-handle-grabber`}
         />
       </div>
     ));
@@ -326,9 +328,8 @@ class DraggableDiv extends React.Component {
         ref={(c) => {
           this.divContainer = c;
         }}
-        className={this.props.className}
+        className={clsx(this.props.className, classes['draggable-div'])}
         style={divStyle}
-        styleName="draggable-div"
       >
         {resizeHandles}
       </div>

package/app/scripts/{ExportLinkDialog.js → ExportLinkDialog.jsx}

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import Button from './Button';
 import Dialog from './Dialog';
 
-import '../styles/ExportLinkDialog.module.scss';
+import classes from '../styles/ExportLinkDialog.module.scss';
 
 class ExportLinkDialog extends React.Component {
   render() {
@@ -15,7 +15,7 @@ class ExportLinkDialog extends React.Component {
         onOkay={this.props.onDone}
         title="Share view link"
       >
-        <div styleName="export-link-dialog-wrapper">
+        <div className={classes['export-link-dialog-wrapper']}>
           <input
             ref={(element) => {
               if (!element) return;

package/app/scripts/{GalleryTracks.js → GalleryTracks.jsx}

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import clsx from 'clsx';
 
 import TrackControl from './TrackControl';
 
@@ -29,11 +30,12 @@ class GalleryTracks extends React.Component {
 
   render() {
     return (
-      <div className="gallery-tracks" styleName="styles.gallery-tracks">
+      <div className={clsx('gallery-tracks', styles['gallery-tracks'])}>
         {this.props.tracks &&
           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,
@@ -41,9 +43,9 @@ class GalleryTracks extends React.Component {
                 bottom: track.height * index,
                 left: track.height * index,
               }}
-              styleName="styles.gallery-track"
             >
               <div
+                className={styles['gallery-sub-track']}
                 onMouseEnter={this.mouseEnterHandler.bind(this)}
                 style={{
                   top: 0,
@@ -51,9 +53,9 @@ class GalleryTracks extends React.Component {
                   left: 0,
                   height: track.height,
                 }}
-                styleName="styles.gallery-sub-track"
               />
               <div
+                className={styles['gallery-sub-track']}
                 onMouseEnter={this.mouseEnterHandler.bind(this)}
                 style={{
                   top: 0,
@@ -61,9 +63,9 @@ class GalleryTracks extends React.Component {
                   bottom: 0,
                   width: track.height,
                 }}
-                styleName="styles.gallery-sub-track"
               />
               <div
+                className={styles['gallery-sub-track']}
                 onMouseEnter={this.mouseEnterHandler.bind(this)}
                 style={{
                   right: 0,
@@ -71,9 +73,9 @@ class GalleryTracks extends React.Component {
                   left: 0,
                   height: track.height,
                 }}
-                styleName="styles.gallery-sub-track"
               />
               <div
+                className={styles['gallery-sub-track']}
                 onMouseEnter={this.mouseEnterHandler.bind(this)}
                 style={{
                   top: 0,
@@ -81,9 +83,9 @@ class GalleryTracks extends React.Component {
                   left: 0,
                   width: track.height,
                 }}
-                styleName="styles.gallery-sub-track"
               />
               <div
+                className={styles['gallery-invisible-track']}
                 onMouseLeave={this.mouseLeaveHandler.bind(this)}
                 style={{
                   top: track.height,
@@ -91,7 +93,6 @@ class GalleryTracks extends React.Component {
                   bottom: track.height,
                   left: track.height,
                 }}
-                styleName="styles.gallery-invisible-track"
               />
               {this.props.editable && (
                 <TrackControl
@@ -115,10 +116,10 @@ class GalleryTracks extends React.Component {
 }
 
 GalleryTracks.propTypes = {
-  editable: PropTypes.bool.isRequired,
+  editable: PropTypes.bool,
   onCloseTrackMenuOpened: PropTypes.func.isRequired,
   onConfigTrackMenuOpened: PropTypes.func.isRequired,
-  tracks: PropTypes.array.isRequired,
+  tracks: PropTypes.array,
 };
 
 export default GalleryTracks;

package/app/scripts/{GenomePositionSearchBox.js → GenomePositionSearchBox.jsx}

@@ -1,7 +1,9 @@
-import { select, event } from 'd3-selection';
+// @ts-check
+import { select } from 'd3-selection';
 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';
@@ -476,7 +478,7 @@ class GenomePositionSearchBox extends React.Component {
     );
   }
 
-  autocompleteKeyPress() {
+  autocompleteKeyPress(event) {
     const ENTER_KEY_CODE = 13;
 
     if (event.keyCode === ENTER_KEY_CODE) {
@@ -600,9 +602,8 @@ class GenomePositionSearchBox extends React.Component {
             }
           }
 
-          const geneSymbol = this.replaceGenesWithLoadedPositions(
-            genePositions,
-          );
+          const geneSymbol =
+            this.replaceGenesWithLoadedPositions(genePositions);
 
           finished(geneSymbol);
         }
@@ -737,11 +738,11 @@ class GenomePositionSearchBox extends React.Component {
     return (
       <PopupMenu>
         <div
+          className={styles['genome-position-search-bar-suggestions']}
           style={{
             left: this.menuPosition.left,
             top: this.menuPosition.top,
           }}
-          styleName="styles.genome-position-search-bar-suggestions"
         >
           {items}
         </div>
@@ -770,20 +771,17 @@ class GenomePositionSearchBox extends React.Component {
       </option>
     ));
 
-    let className = this.state.isFocused
-      ? 'styles.genome-position-search-focus'
-      : 'styles.genome-position-search';
-
-    if (this.props.theme === THEME_DARK) {
-      className += ' styles.genome-position-search-dark';
-    }
-
     return (
       <div
         ref={(c) => {
           this.gpsbForm = c;
         }}
-        styleName={className}
+        className={clsx({
+          [styles['genome-position-search-focus']]: this.state.isFocused,
+          [styles['genome-position-search']]: !this.state.isFocused,
+          [styles['genome-position-search-dark']]:
+            this.props.theme === THEME_DARK,
+        })}
       >
         {!this.props.hideAvailableAssemblies && (
           <select
@@ -857,7 +855,7 @@ GenomePositionSearchBox.propTypes = {
   chromInfoServer: PropTypes.string,
   hideAvailableAssemblies: PropTypes.bool,
   isFocused: PropTypes.bool,
-  pubSub: PropTypes.func,
+  pubSub: PropTypes.object,
   onFocus: PropTypes.func,
   onGeneSearch: PropTypes.func,
   onSelectedAssemblyChanged: PropTypes.func,

package/app/scripts/HeatmapTiledPixiTrack.js

@@ -2,7 +2,7 @@ import ndarray from 'ndarray';
 import { brushY } from 'd3-brush';
 import { format } from 'd3-format';
 import { scaleLinear } from 'd3-scale';
-import { select, event } from 'd3-selection';
+import { select } from 'd3-selection';
 import slugid from 'slugid';
 import {
   colorToRgba,
@@ -262,12 +262,8 @@ class HeatmapTiledPixiTrack extends TiledPixiTrack {
    * @return {Object}  Object holding the absolute x, y, width, and height.
    */
   getAbsTileDim(zoomLevel, tilePos, mirrored) {
-    const {
-      tileX,
-      tileY,
-      tileWidth,
-      tileHeight,
-    } = this.getTilePosAndDimensions(zoomLevel, tilePos);
+    const { tileX, tileY, tileWidth, tileHeight } =
+      this.getTilePosAndDimensions(zoomLevel, tilePos);
 
     const dim = {};
 
@@ -512,7 +508,7 @@ class HeatmapTiledPixiTrack extends TiledPixiTrack {
     this.brushing = true;
   }
 
-  brushMoved() {
+  brushMoved(event) {
     if (!event.selection) {
       return;
     }
@@ -1024,16 +1020,12 @@ class HeatmapTiledPixiTrack extends TiledPixiTrack {
 
       // get the tile's position and width (in data coordinates)
       // if it's mirrored then we have to switch the position indeces
-      const {
-        tileX,
-        tileY,
-        tileWidth,
-        tileHeight,
-      } = this.getTilePosAndDimensions(
-        tile.tileData.zoomLevel,
-        tilePos,
-        this.binsPerTile(),
-      );
+      const { tileX, tileY, tileWidth, tileHeight } =
+        this.getTilePosAndDimensions(
+          tile.tileData.zoomLevel,
+          tilePos,
+          this.binsPerTile(),
+        );
 
       // calculate the tile's position in bins
       const tileXStartBin = Math.floor(tileX / tileRes);
@@ -1253,8 +1245,8 @@ class HeatmapTiledPixiTrack extends TiledPixiTrack {
       {
         selectedRows: this.options.selectRows,
         selectedRowsAggregationMode: this.options.selectRowsAggregationMode,
-        selectedRowsAggregationWithRelativeHeight: this.options
-          .selectRowsAggregationWithRelativeHeight,
+        selectedRowsAggregationWithRelativeHeight:
+          this.options.selectRowsAggregationWithRelativeHeight,
         selectedRowsAggregationMethod: this.options.selectRowsAggregationMethod,
       },
     );
@@ -1391,16 +1383,12 @@ class HeatmapTiledPixiTrack extends TiledPixiTrack {
       ? [tile.tileData.tilePos[1], tile.tileData.tilePos[0]]
       : tile.tileData.tilePos;
 
-    const {
-      tileX,
-      tileY,
-      tileWidth,
-      tileHeight,
-    } = this.getTilePosAndDimensions(
-      tile.tileData.zoomLevel,
-      tilePos,
-      this.binsPerTile(),
-    );
+    const { tileX, tileY, tileWidth, tileHeight } =
+      this.getTilePosAndDimensions(
+        tile.tileData.zoomLevel,
+        tilePos,
+        this.binsPerTile(),
+      );
 
     const tileXScale = scaleLinear()
       .domain([0, this.binsPerTile()])