higlass 1.11.11 → 1.12.0

package/README.md

@@ -1,8 +1,8 @@
-[![Build Status](https://travis-ci.org/higlass/higlass.svg?branch=master)](https://travis-ci.org/higlass/higlass)
+![Build Status](https://github.com/higlass/higlass/actions/workflows/ci.yml/badge.svg)
 [![Live Docs](https://img.shields.io/badge/docs-live-red.svg?colorB=0f9256)](https://docs.higlass.io/)
 [![DOI](https://zenodo.org/badge/56026057.svg)](https://zenodo.org/badge/latestdoi/56026057)
 [![Twitter](https://img.shields.io/badge/news-twitter-red.svg?colorB=6930bf)](https://twitter.com/higlass_io)
-[![Slack](https://img.shields.io/badge/join-Slack-red.svg?colorB=ff4000)](https://join.slack.com/t/higlass/shared_invite/zt-nv5h5hsi-tjM9ydx0EH3Svn4jx~tveQ)
+[![Slack](https://img.shields.io/badge/join-Slack-red.svg?colorB=ff4000)](https://tinyurl.com/3z3bds4w)
 
 
 ### Introduction
@@ -33,22 +33,31 @@ Kerpedjiev, P., Abdennur, N., Lekschas, F., McCallum, C., Dinkla, K., Strobelt,
 To run higlass from its source code simply run the following:
 
 ```
-npm clean-install
+npm clean-install // use --legacy-peer-deps if you get peer dependency errors
 npm run start
 ```
 
-This starts a server in development mode at http://localhost:8080/.
+This starts a server in development mode at http://localhost:5173/.
+
+> **Warning** 
+> The following examples need to be migrated to the latest build.
+> 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).
 
-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. To save time and only run relevant tests, open `karma.conf.js` and select the test files to run before running `test-watch`.
+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).
 
-```
-npm run test-watch
-```
+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`
+
+There can sometimes be import issues due to timeouts when running tests after a clean installation. It is best to run `npm run optimize` prior to running tests for the first time.
 
 **Troubleshooting:**
 

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

@@ -27,9 +27,8 @@ class AddTrackDialog extends React.Component {
 
     this.handleSubmitBound = this.handleSubmit.bind(this);
 
-    this.handleTilesetPickerDoubleClickBound = this.handleTilesetPickerDoubleClick.bind(
-      this,
-    );
+    this.handleTilesetPickerDoubleClickBound =
+      this.handleTilesetPickerDoubleClick.bind(this);
     this.selectedTilesetsChangedBound = this.selectedTilesetsChanged.bind(this);
   }
 
@@ -189,27 +188,29 @@ class AddTrackDialog extends React.Component {
         onOkay={this.handleSubmitBound}
         title="Add Track"
       >
-        {form}
-        {
-          <PlotTypeChooser
-            // Only for testing purposes
-            ref={(c) => {
-              this.plotTypeChooser = c;
-            }}
-            allTracksSameDatatype={this.state.allTracksSameDatatype}
-            datatypes={this.state.selectedTilesets.map((x) => {
-              if (x.filetype === 'cooler') {
-                // cooler files can also supply chromsizes
-                return [x.datatype, 'chromsizes'];
-              }
-
-              return [x.datatype];
-            })}
-            onPlotTypeSelected={this.handlePlotTypeSelected.bind(this)}
-            orientation={orientation}
-            position={this.props.position}
-          />
-        }
+        <>
+          {form}
+          {
+            <PlotTypeChooser
+              // Only for testing purposes
+              ref={(c) => {
+                this.plotTypeChooser = c;
+              }}
+              allTracksSameDatatype={this.state.allTracksSameDatatype}
+              datatypes={this.state.selectedTilesets.map((x) => {
+                if (x.filetype === 'cooler') {
+                  // cooler files can also supply chromsizes
+                  return [x.datatype, 'chromsizes'];
+                }
+
+                return [x.datatype];
+              })}
+              onPlotTypeSelected={this.handlePlotTypeSelected.bind(this)}
+              orientation={orientation}
+              position={this.props.position}
+            />
+          }
+        </>
       </Dialog>
     );
   }
@@ -220,8 +221,8 @@ AddTrackDialog.defaultProps = {
 };
 
 AddTrackDialog.propTypes = {
-  datatype: PropTypes.string.isRequired,
-  host: PropTypes.string.isRequired,
+  datatype: PropTypes.string,
+  host: PropTypes.string,
   onCancel: PropTypes.func.isRequired,
   onTracksChosen: PropTypes.func.isRequired,
   position: PropTypes.string,

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

@@ -1,59 +1,62 @@
 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/AddTrackPositionMenu.module.scss';
+import classes from '../styles/AddTrackPositionMenu.module.scss';
 
 function AddTrackPositionMenu(props) {
-  let tableStyleNames = 'add-track-position-table';
-  if (props.theme === THEME_DARK)
-    tableStyleNames += ' add-track-position-table-dark';
   return (
     <div>
-      <div styleName="add-track-position-span">Add Track...</div>
-      <table styleName={tableStyleNames}>
+      <div className={classes['add-track-position-span']}>Add Track...</div>
+      <table
+        className={clsx(classes['add-track-position-table'], {
+          [classes['add-track-position-table-dark']]:
+            props.theme === THEME_DARK,
+        })}
+      >
         <tbody>
           <tr style={{ height: '30px' }}>
-            <td styleName="add-track-position-other" />
+            <td className={classes['add-track-position-other']} />
             <td
+              className={classes['add-track-position-top-center']}
               onClick={() => props.onTrackPositionChosen('top')}
-              styleName="add-track-position-top-center"
             >
               top
             </td>
-            <td styleName="add-track-position-other" />
+            <td className={classes['add-track-position-other']} />
           </tr>
           <tr style={{ height: '80px' }}>
             <td
+              className={classes['add-track-position-middle-left']}
               onClick={() => props.onTrackPositionChosen('left')}
-              styleName="add-track-position-middle-left"
             >
               left
             </td>
             <td
+              className={classes['add-track-position-middle-middle']}
               onClick={() => props.onTrackPositionChosen('center')}
-              styleName="add-track-position-middle-middle"
             >
               center
             </td>
             <td
+              className={classes['add-track-position-middle-right']}
               onClick={() => props.onTrackPositionChosen('right')}
-              styleName="add-track-position-middle-right"
             >
               right
             </td>
           </tr>
           <tr style={{ height: '30px' }}>
-            <td styleName="add-track-position-other" />
+            <td className={classes['add-track-position-other']} />
             <td
+              className={classes['add-track-position-bottom-middle']}
               onClick={() => props.onTrackPositionChosen('bottom')}
-              styleName="add-track-position-bottom-middle"
             >
               bottom
             </td>
-            <td styleName="add-track-position-other" />
+            <td className={classes['add-track-position-other']} />
           </tr>
         </tbody>
       </table>

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

@@ -371,6 +371,7 @@ class Autocomplete extends React.Component {
             this.handleKeyUp.bind(this),
             inputProps.onKeyUp && inputProps.onKeyUp.bind(this),
           )}
+          // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
           role="combobox"
           value={this.props.value}
         />

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

@@ -1,23 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import '../styles/Button.module.scss';
+import classes from '../styles/Button.module.scss';
 
 const Button = React.forwardRef((props, ref) => (
   <button
     ref={ref}
-    disable={props.disable}
+    className={classes[props.styleName] ?? classes.button}
+    disabled={props.disable}
     onBlur={props.onBlur}
     onClick={props.onClick}
     onMouseDown={props.onMouseDown}
     onMouseOut={props.onMouseOut}
     onMouseUp={props.onMouseUp}
-    styleName="button"
     type="button"
   >
     {props.children}
     {props.shortcut && (
-      <span styleName="button-shortcut">{props.shortcut}</span>
+      <span className={classes['button-shortcut']}>{props.shortcut}</span>
     )}
   </button>
 ));
@@ -29,8 +29,8 @@ Button.defaultProps = {
 };
 
 Button.propTypes = {
-  children: PropTypes.func.isRequired,
-  disable: PropTypes.func.isRequired,
+  children: PropTypes.any,
+  disable: PropTypes.bool,
   onBlur: PropTypes.func,
   onClick: PropTypes.func,
   onMouseDown: PropTypes.func,
@@ -38,6 +38,7 @@ Button.propTypes = {
   onMouseUp: PropTypes.func,
   shortcut: PropTypes.string,
   type: PropTypes.string,
+  styleName: PropTypes.string,
 };
 
 export default Button;

package/app/scripts/CenterTiledPlot.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function CenterTiledPlot() {
+  return <div className="center-plot" />;
+}
+
+export default CenterTiledPlot;

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

@@ -1,7 +1,9 @@
+// @ts-check
 import PropTypes from 'prop-types';
 import React from 'react';
 import { brush, brushX, brushY } from 'd3-brush';
-import { select, event } from 'd3-selection';
+import { select } from 'd3-selection';
+import clsx from 'clsx';
 
 import TrackControl from './TrackControl';
 
@@ -19,6 +21,10 @@ const STYLES = {
   pointerEvents: 'all',
 };
 
+function sourceEvent(event) {
+  return event && event.sourceEvent;
+}
+
 class CenterTrack extends React.Component {
   constructor(props) {
     super(props);
@@ -27,15 +33,15 @@ class CenterTrack extends React.Component {
       isVisible: false,
     };
 
-    this.brushBehaviorX = brushX(true, true)
+    this.brushBehaviorX = brushX()
       .on('brush', this.brushedX.bind(this))
       .on('end', this.brushedXEnded.bind(this));
 
-    this.brushBehaviorY = brushY(true, true, true)
+    this.brushBehaviorY = brushY()
       .on('brush', this.brushedY.bind(this))
       .on('end', this.brushedYEnded.bind(this));
 
-    this.brushBehaviorXY = brush(true)
+    this.brushBehaviorXY = brush()
       .on('start', this.brushStarted.bind(this))
       .on('brush', this.brushedXY.bind(this))
       .on('end', this.brushedXYEnded.bind(this));
@@ -105,12 +111,6 @@ class CenterTrack extends React.Component {
     }
   }
 
-  /* --------------------------- Getter / Setter ---------------------------- */
-
-  get sourceEvent() {
-    return event && event.sourceEvent;
-  }
-
   /* ---------------------------- Custom Methods ---------------------------- */
 
   addBrush1d() {
@@ -170,13 +170,13 @@ class CenterTrack extends React.Component {
     );
   }
 
-  brushedX() {
+  brushedX(event) {
     // Need to reassign variable to check after reset
     const rangeSelectionMoved = this.rangeSelectionMoved;
     this.rangeSelectionMoved = false;
 
     if (
-      !this.sourceEvent ||
+      !sourceEvent(event) ||
       !this.props.onRangeSelectionX ||
       !this.props.is1dRangeSelection ||
       rangeSelectionMoved
@@ -187,12 +187,12 @@ class CenterTrack extends React.Component {
     this.props.onRangeSelectionX(event.selection);
   }
 
-  brushedXEnded() {
+  brushedXEnded(event) {
     const rangeSelectionMovedEnd = this.rangeSelectionMovedEnd;
     this.rangeSelectionMovedEnd = false;
 
     if (
-      !this.sourceEvent ||
+      !sourceEvent(event) ||
       !this.props.onRangeSelectionX ||
       !this.props.is1dRangeSelection ||
       rangeSelectionMovedEnd
@@ -204,13 +204,13 @@ class CenterTrack extends React.Component {
     this.props.onRangeSelectionXEnd(event.selection);
   }
 
-  brushedY() {
+  brushedY(event) {
     // Need to reassign variable to check after reset
     const rangeSelectionMoved = this.rangeSelectionMoved;
     this.rangeSelectionMoved = false;
 
     if (
-      !this.sourceEvent ||
+      !sourceEvent(event) ||
       !this.props.onRangeSelectionY ||
       !this.props.is1dRangeSelection ||
       rangeSelectionMoved
@@ -221,12 +221,12 @@ class CenterTrack extends React.Component {
     this.props.onRangeSelectionY(event.selection);
   }
 
-  brushedYEnded() {
+  brushedYEnded(event) {
     const rangeSelectionMovedEnd = this.rangeSelectionMovedEnd;
     this.rangeSelectionMovedEnd = false;
 
     if (
-      !this.sourceEvent ||
+      !sourceEvent(event) ||
       !this.props.onRangeSelectionY ||
       !this.props.is1dRangeSelection ||
       rangeSelectionMovedEnd
@@ -238,13 +238,13 @@ class CenterTrack extends React.Component {
     this.props.onRangeSelectionYEnd(event.selection);
   }
 
-  brushedXY() {
+  brushedXY(event) {
     // Need to reassign variable to check after reset
     const rangeSelectionMoved = this.rangeSelectionMoved;
     this.rangeSelectionMoved = false;
 
     if (
-      !this.sourceEvent ||
+      !sourceEvent(event) ||
       !this.props.onRangeSelectionXY ||
       rangeSelectionMoved ||
       this.props.is1dRangeSelection
@@ -258,7 +258,7 @@ class CenterTrack extends React.Component {
     ]);
   }
 
-  brushedXYEnded() {
+  brushedXYEnded(event) {
     if (this.props.is1dRangeSelection) return;
 
     const rangeSelectionMovedEnd = this.rangeSelectionMovedEnd;
@@ -285,14 +285,14 @@ class CenterTrack extends React.Component {
     }
   }
 
-  brushStarted() {
-    if (!this.sourceEvent) return;
+  brushStarted(event) {
+    if (!sourceEvent(event)) return;
 
     this.props.onRangeSelectionStart();
   }
 
   moveBrushX(rangeSelection, animate = false) {
-    if (!this.brushEl && !this.sourceEvent) {
+    if (!this.brushEl) {
       return;
     }
 
@@ -319,7 +319,7 @@ class CenterTrack extends React.Component {
   }
 
   moveBrushY(rangeSelection, animate = false) {
-    if (!this.brushEl && !this.sourceEvent) {
+    if (!this.brushEl) {
       return;
     }
 
@@ -346,7 +346,7 @@ class CenterTrack extends React.Component {
   }
 
   moveBrushXY(rangeSelection, animate = false) {
-    if (!this.brushEl && !this.sourceEvent) {
+    if (!this.brushEl) {
       return;
     }
 
@@ -455,58 +455,59 @@ class CenterTrack extends React.Component {
       return false;
     });
 
-    let rangeSelectorClass = 'stylesTrack.track-range-selection';
+    let rangeSelectorName = 'track-range-selection';
     if (this.props.isRangeSelectionActive) {
-      rangeSelectorClass += this.props.is1dRangeSelection
+      rangeSelectorName += this.props.is1dRangeSelection
         ? '-active-secondary'
         : '-active-primary';
     }
 
-    const rangeSelectorGroup1dClass = !this.props.is1dRangeSelection
-      ? 'stylesTrack.track-range-selection-group-inactive'
-      : '';
+    const rangeSelectorGroup1dClass = clsx(
+      !this.props.is1dRangeSelection &&
+        stylesTrack['track-range-selection-group-inactive'],
+    );
 
-    const rangeSelectorGroup2dClass = this.props.is1dRangeSelection
-      ? 'stylesTrack.track-range-selection-group-inactive'
-      : '';
+    const rangeSelectorGroup2dClass = clsx(
+      this.props.is1dRangeSelection &&
+        stylesTrack['track-range-selection-group-inactive'],
+    );
 
     return (
       <div
-        className={this.props.className}
+        className={clsx(this.props.className, styles['center-track'])}
         onMouseEnter={this.mouseEnterHandler.bind(this)}
         onMouseLeave={this.mouseLeaveHandler.bind(this)}
         style={{
           height: this.props.height,
           width: this.props.width,
         }}
-        styleName="styles.center-track"
       >
         {isBrushable && (
           <svg
+            className={stylesTrack[rangeSelectorName]}
             style={{
               height: this.props.height,
               width: this.props.width,
             }}
-            styleName={rangeSelectorClass}
             xmlns="http://www.w3.org/2000/svg"
           >
             <g
               ref={(el) => {
                 this.brushElX = select(el);
               }}
-              styleName={rangeSelectorGroup1dClass}
+              className={rangeSelectorGroup1dClass}
             />
             <g
               ref={(el) => {
                 this.brushElY = select(el);
               }}
-              styleName={rangeSelectorGroup1dClass}
+              className={rangeSelectorGroup1dClass}
             />
             <g
               ref={(el) => {
                 this.brushElXY = select(el);
               }}
-              styleName={rangeSelectorGroup2dClass}
+              className={rangeSelectorGroup2dClass}
             />
           </svg>
         )}
@@ -548,7 +549,7 @@ CenterTrack.defaultProps = {
 CenterTrack.propTypes = {
   className: PropTypes.string,
   configTrackMenuId: PropTypes.string,
-  editable: PropTypes.bool.isRequired,
+  editable: PropTypes.bool,
   height: PropTypes.number.isRequired,
   is1dRangeSelection: PropTypes.bool,
   isRangeSelectionActive: PropTypes.bool,

package/app/scripts/ChromosomeGrid.js

@@ -140,14 +140,10 @@ class ChromosomeGrid extends PixiTrack {
       this.mask2d.beginFill(0xff0000);
 
       for (let i = 0; i < this.options.orientationsAndPositions.length; i++) {
-        const orientation = this.options.orientationsAndPositions[i]
-          .orientation;
-        const {
-          left,
-          top,
-          width,
-          height,
-        } = this.options.orientationsAndPositions[i].position;
+        const orientation =
+          this.options.orientationsAndPositions[i].orientation;
+        const { left, top, width, height } =
+          this.options.orientationsAndPositions[i].position;
 
         if (orientation === '1d-horizontal') {
           this.mask1dH.drawRect(left, top, width, height);
@@ -305,14 +301,10 @@ class ChromosomeGrid extends PixiTrack {
 
     if (this.isOverlay) {
       for (let i = 0; i < this.options.orientationsAndPositions.length; i++) {
-        const orientation = this.options.orientationsAndPositions[i]
-          .orientation;
-        const {
-          left,
-          top,
-          width,
-          height,
-        } = this.options.orientationsAndPositions[i].position;
+        const orientation =
+          this.options.orientationsAndPositions[i].orientation;
+        const { left, top, width, height } =
+          this.options.orientationsAndPositions[i].position;
         this.drawLinesSvg(output, orientation, width, height, left, top);
       }
     } else {

package/app/scripts/CloseTrackMenu.jsx

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import ContextMenuItem from './ContextMenuItem';
+import { getSeriesItems } from './SeriesListItems';
+
+// Styles
+import classes from '../styles/ContextMenu.module.scss';
+
+function CloseTrackMenu(props) {
+  return (
+    <div>
+      {getSeriesItems(props.tracks, null, null, props.onCloseTrack)}
+      <hr className={classes['context-menu-hr']} />
+      <ContextMenuItem onClick={() => props.onCloseTrack(props.tracks[0].uid)}>
+        Close all series
+      </ContextMenuItem>
+    </div>
+  );
+}
+
+CloseTrackMenu.propTypes = {
+  onCloseTrack: PropTypes.func.isRequired,
+  tracks: PropTypes.array.isRequired,
+};
+
+export default CloseTrackMenu;

package/app/scripts/CombinedTrack.js

@@ -1,7 +1,10 @@
 import slugid from 'slugid';
 
 class CombinedTrack {
-  constructor({ tracks, createTrackObject }) {
+  constructor(context) {
+    this.context = context;
+    const { tracks, createTrackObject } = context;
+
     this.childTracks = tracks.map(createTrackObject);
     this.createdTracks = {};
     this.uid = slugid.nice();
@@ -105,6 +108,18 @@ class CombinedTrack {
   //   }
   // }
 
+  clickOutside() {
+    for (let i = 0; i < this.childTracks.length; i++) {
+      this.childTracks[i].clickOutside();
+    }
+  }
+
+  click(...args) {
+    for (let i = 0; i < this.childTracks.length; i++) {
+      this.childTracks[i].click(...args);
+    }
+  }
+
   draw() {
     // for (let i = 0; i < this.childTracks.length; i++) {
     //   this.childTracks[i].draw();