higlass 1.11.10 → 1.12.0

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

@@ -4,6 +4,7 @@ import slugid from 'slugid';
 import CheckboxTree from 'react-checkbox-tree';
 
 import { tileProxy } from './services';
+
 import '../styles/TilesetFinder.css';
 
 import withPubSub from './hocs/with-pub-sub';
@@ -20,7 +21,7 @@ class TilesetFinder extends React.Component {
     // local tracks are ones that don't have a filetype associated with them
     this.localTracks = TRACKS_INFO.filter((x) => x.local && !x.hidden).map(
       (x) => {
-        const y = Object.assign({}, x);
+        const y = { ...x };
         y.datatype = x.datatype[0];
         return y;
       },
@@ -89,14 +90,15 @@ class TilesetFinder extends React.Component {
     const newOptions = existingOptions;
 
     const entries = newEntries.map((ne) => {
-      const ane = Object.assign({}, ne, {
+      const ane = {
+        ...ne,
         server: sourceServer,
         tilesetUid: ne.uuid,
         serverUidKey: this.serverUidKey(sourceServer, ne.uuid),
         datatype: ne.datatype,
         name: ne.name,
         uid: slugid.nice(),
-      });
+      };
 
       return ane;
     });
@@ -125,6 +127,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 ||
@@ -345,10 +348,7 @@ class TilesetFinder extends React.Component {
             type="text"
           />
         </div>
-        <div
-          className="tileset-finder-checkbox-tree"
-          styleName="tileset-finder-checkbox-tree"
-        >
+        <div className="tileset-finder-checkbox-tree">
           <CheckboxTree
             checked={this.state.checked}
             expanded={this.state.expanded}

package/app/scripts/Track.js

@@ -5,7 +5,10 @@ import { fake as fakePubSub } from './hocs/with-pub-sub';
 import { isWithin } from './utils';
 
 class Track {
-  constructor({ id, pubSub, getTheme }) {
+  constructor(context) {
+    this.context = context;
+
+    const { id, pubSub, getTheme } = context;
     if (pubSub) {
       this.pubSub = pubSub;
     } else {
@@ -78,6 +81,19 @@ class Track {
 
   getData() {}
 
+  /** Capture click events. x and y are relative to the track
+   * position */
+  click(x, y, evt) {
+    return {
+      type: 'generic',
+      event: evt,
+      payload: null,
+    };
+  }
+
+  /** There was a click event outside the track * */
+  clickOutside() {}
+
   getDimensions() {
     return this.dimensions;
   }

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

@@ -1,39 +1,33 @@
 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';
 
 // Styles
-import '../styles/TrackControl.module.scss';
-
-const getClassNames = (props) => {
-  let className = props.isVisible ? 'track-control-active' : 'track-control';
-
-  className += props.isAlignLeft ? ' track-control-left' : '';
-
-  className += props.isVertical ? ' track-control-vertical' : '';
-
-  className += props.paddingRight ? ' track-control-padding-right' : '';
-
-  if (props.theme === THEME_DARK) className += ' track-control-dark';
-
-  return className;
-};
-
-const getButtonClassNames = (props) => {
-  let buttonClassName = 'track-control-button';
-
-  buttonClassName += props.isVertical ? ' track-control-button-vertical' : '';
-
-  return buttonClassName;
-};
+import classes from '../styles/TrackControl.module.scss';
+
+const getClassName = (props) =>
+  clsx({
+    [classes['track-control-active']]: props.isVisible,
+    [classes['track-control']]: !props.isVisible,
+    [classes['track-control-left']]: props.isAlignLeft,
+    [classes['track-control-vertical']]: props.isVertical,
+    [classes['track-control-padding-right']]: props.paddingRight,
+    [classes['track-control-dark']]: props.theme === THEME_DARK,
+  });
+
+const getButtonClassName = (props) =>
+  clsx('no-zoom', classes['track-control-button'], {
+    [classes['track-control-button-vertical']]: props.isVertical,
+  });
 
 let oldProps = null;
 let DragHandle = null;
 
-const TrackControl = (props) => {
+function TrackControl(props) {
   // Avoid constant recreating that button when the props didn't change.
   // Damn React could be a little smarter here...
   if (
@@ -44,12 +38,12 @@ const TrackControl = (props) => {
     oldProps = props;
     DragHandle = SortableHandle(() => (
       <svg
-        className="no-zoom"
-        style={Object.assign(
-          { height: '20px', width: '20px' },
-          props.imgStyleMove,
-        )}
-        styleName={getButtonClassNames(props)}
+        className={getButtonClassName(props)}
+        style={{
+          height: '20px',
+          width: '20px',
+          ...props.imgStyleMove,
+        }}
       >
         <title>Move track</title>
         <use xlinkHref="#move" />
@@ -61,25 +55,25 @@ const TrackControl = (props) => {
   let imgClose;
 
   return (
-    <div styleName={getClassNames(props)}>
+    <div className={getClassName(props)}>
       {props.isMoveable && <DragHandle />}
 
       <svg
         ref={(c) => {
           imgConfig = c;
         }}
-        className="no-zoom"
+        className={getButtonClassName(props)}
         onClick={() => {
           props.onConfigTrackMenuOpened(
             props.uid,
             imgConfig.getBoundingClientRect(),
           );
         }}
-        style={Object.assign(
-          { height: '20px', width: '20px' },
-          props.imgStyleSettings,
-        )}
-        styleName={getButtonClassNames(props)}
+        style={{
+          height: '20px',
+          width: '20px',
+          ...props.imgStyleSettings,
+        }}
       >
         <title>Configure track</title>
         <use xlinkHref="#cog" />
@@ -87,13 +81,13 @@ const TrackControl = (props) => {
 
       {props.onAddSeries && (
         <svg
-          className="no-zoom"
+          className={getButtonClassName(props)}
           onClick={() => props.onAddSeries(props.uid)}
-          style={Object.assign(
-            { height: '20px', width: '20px' },
-            props.imgStyleAdd,
-          )}
-          styleName={getButtonClassNames(props)}
+          style={{
+            height: '20px',
+            width: '20px',
+            ...props.imgStyleAdd,
+          }}
         >
           <title>Add series</title>
           <use xlinkHref="#plus" />
@@ -104,25 +98,25 @@ const TrackControl = (props) => {
         ref={(c) => {
           imgClose = c;
         }}
-        className="no-zoom"
+        className={getButtonClassName(props)}
         onClick={() => {
           props.onCloseTrackMenuOpened(
             props.uid,
             imgClose.getBoundingClientRect(),
           );
         }}
-        style={Object.assign(
-          { height: '20px', width: '20px' },
-          props.imgStyleClose,
-        )}
-        styleName={getButtonClassNames(props)}
+        style={{
+          height: '20px',
+          width: '20px',
+          ...props.imgStyleClose,
+        }}
       >
         <title>Close track</title>
         <use xlinkHref="#cross" />
       </svg>
     </div>
   );
-};
+}
 
 TrackControl.propTypes = {
   imgStyleAdd: PropTypes.object,

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

@@ -2,9 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { zoom, zoomIdentity } from 'd3-zoom';
-import { select, event, clientPoint } from 'd3-selection';
+import { select, pointer } from 'd3-selection';
 import { scaleLinear } from 'd3-scale';
 import slugid from 'slugid';
+import clsx from 'clsx';
 
 import PixiTrack from './PixiTrack';
 import HeatmapTiledPixiTrack from './HeatmapTiledPixiTrack';
@@ -81,7 +82,7 @@ import {
 } from './configs';
 
 // Styles
-import '../styles/TrackRenderer.module.scss';
+import classes from '../styles/TrackRenderer.module.scss';
 
 const SCROLL_TIMEOUT = 100;
 
@@ -116,9 +117,14 @@ class TrackRenderer extends React.Component {
     this.uid = slugid.nice();
     this.viewUid = this.props.uid;
 
-    this.availableForPlugins = AVAILABLE_FOR_PLUGINS;
-    this.availableForPlugins.services.pubSub = this.props.pubSub;
-    this.availableForPlugins.services.pixiRenderer = this.props.pixiRenderer;
+    this.availableForPlugins = {
+      ...AVAILABLE_FOR_PLUGINS,
+      services: {
+        ...AVAILABLE_FOR_PLUGINS.services,
+        pubSub: this.props.pubSub,
+        pixiRenderer: this.props.pixiRenderer,
+      },
+    };
 
     this.mounted = false;
 
@@ -136,7 +142,7 @@ class TrackRenderer extends React.Component {
     // catch any zooming behavior within all of the tracks in this plot
     // this.zoomTransform = zoomIdentity();
     this.zoomBehavior = zoom()
-      .filter(() => {
+      .filter((event) => {
         if (event.target.classList.contains('no-zoom')) {
           return false;
         }
@@ -154,9 +160,9 @@ class TrackRenderer extends React.Component {
 
     this.initialXDomain = [0, 1];
     this.initialYDomain = [0, 1];
-    this.xDomainLimits = [-Infinity, Infinity];
-    this.yDomainLimits = [-Infinity, Infinity];
-    this.zoomLimits = [0, Infinity];
+    this.xDomainLimits = [-Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER];
+    this.yDomainLimits = [-Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER];
+    this.zoomLimits = [0, Number.MAX_SAFE_INTEGER];
 
     this.prevCenterX =
       this.currentProps.paddingLeft +
@@ -545,9 +551,9 @@ class TrackRenderer extends React.Component {
   setUpInitialScales(
     initialXDomain = [0, 1],
     initialYDomain = [0, 1],
-    xDomainLimits = [-Infinity, Infinity],
-    yDomainLimits = [-Infinity, Infinity],
-    zoomLimits = [0, Infinity],
+    xDomainLimits = [-Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER],
+    yDomainLimits = [-Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER],
+    zoomLimits = [0, Number.MAX_SAFE_INTEGER],
   ) {
     // Make sure the initial domain is within the limits first
     zoomLimits[0] = zoomLimits[0] === null ? 0 : zoomLimits[0];
@@ -1116,7 +1122,7 @@ class TrackRenderer extends React.Component {
 
   valueScaleMove(movement) {
     // mouse wheel from zoom event
-    // const cp = clientPoint(this.props.canvasElement, event.sourceEvent);
+    // const cp = pointer(event.sourceEvent, this.props.canvasElement);
     for (const track of this.getTracksAtPosition(...this.zoomStartPos)) {
       track.movedY(movement);
     }
@@ -1124,7 +1130,7 @@ class TrackRenderer extends React.Component {
     this.zoomTransform = this.zoomStartTransform;
   }
 
-  valueScaleZoom(orientation) {
+  valueScaleZoom(event, orientation) {
     // mouse move probably from a drag event
     const mdy = event.sourceEvent.deltaY;
     const mdm = event.sourceEvent.deltaMode;
@@ -1132,7 +1138,7 @@ class TrackRenderer extends React.Component {
     const myWheelDelta = (dy, dm) => (dy * (dm ? 120 : 1)) / 500;
     const mwd = myWheelDelta(mdy, mdm);
 
-    const cp = clientPoint(this.props.canvasElement, event.sourceEvent);
+    const cp = pointer(event.sourceEvent, this.props.canvasElement);
 
     for (const track of this.getTracksAtPosition(...cp)) {
       const yPos =
@@ -1152,7 +1158,7 @@ class TrackRenderer extends React.Component {
    * We need to update our local record of the zoom transform and apply it
    * to all the tracks.
    */
-  zoomed() {
+  zoomed(event) {
     // the orientation of the track where we started zooming
     // if it's a 1d-horizontal, then mousemove events shouldn't
     // move the center track vertically
@@ -1183,7 +1189,7 @@ class TrackRenderer extends React.Component {
       // a 1d track, try to apply value scale zooming
       if (event.shiftKey || this.valueScaleZooming) {
         if (event.sourceEvent.deltaY !== undefined) {
-          this.valueScaleZoom(trackOrientation);
+          this.valueScaleZoom(event, trackOrientation);
           return;
         }
 
@@ -1278,14 +1284,11 @@ class TrackRenderer extends React.Component {
     return foundTracks;
   }
 
-  zoomStarted() {
+  zoomStarted(event) {
     this.zooming = true;
 
-    if (event.sourceEvent) {
-      this.zoomStartPos = clientPoint(
-        this.props.canvasElement,
-        event.sourceEvent,
-      );
+    if (event && event.sourceEvent) {
+      this.zoomStartPos = pointer(event.sourceEvent, this.props.canvasElement);
 
       if (event.sourceEvent.shiftKey) {
         this.valueScaleZooming = true;
@@ -1442,7 +1445,7 @@ class TrackRenderer extends React.Component {
           };
           try {
             return new pluginTrack.track( // eslint-disable-line new-cap
-              AVAILABLE_FOR_PLUGINS,
+              this.availableForPlugins,
               context,
               track.options,
             );
@@ -1502,27 +1505,27 @@ class TrackRenderer extends React.Component {
       dataConfig,
       this.props.pubSub,
       this.props.pluginDataFetchers,
+      this.availableForPlugins,
     );
 
     // To simplify the context creation via ES6 object shortcuts.
     const context = {
       id: track.uid,
+      trackUid: track.uid,
+      trackType: track.type,
       viewUid: this.viewUid,
       pubSub: this.props.pubSub,
       scene: this.pStage,
       dataConfig,
       dataFetcher,
-      getLockGroupExtrema: () => {
-        return this.currentProps.getLockGroupExtrema(track.uid);
-      },
+      getLockGroupExtrema: () =>
+        this.currentProps.getLockGroupExtrema(track.uid),
       handleTilesetInfoReceived,
       animate: () => {
         this.currentProps.onNewTilesLoaded(track.uid);
       },
       svgElement: this.svgElement,
-      isValueScaleLocked: () => {
-        return this.currentProps.isValueScaleLocked(track.uid);
-      },
+      isValueScaleLocked: () => this.currentProps.isValueScaleLocked(track.uid),
       onValueScaleChanged: () => {
         this.currentProps.onValueScaleChanged(track.uid);
       },
@@ -1769,7 +1772,7 @@ class TrackRenderer extends React.Component {
         const pluginTrack = this.props.pluginTracks[track.type];
 
         if (pluginTrack && !pluginTrack.isMetaTrack) {
-          context.AVAILABLE_FOR_PLUGINS = AVAILABLE_FOR_PLUGINS;
+          context.AVAILABLE_FOR_PLUGINS = this.availableForPlugins;
           context.baseEl = this.baseEl;
           context.definition = track;
 
@@ -1785,7 +1788,7 @@ class TrackRenderer extends React.Component {
 
           try {
             return new pluginTrack.track( // eslint-disable-line new-cap
-              AVAILABLE_FOR_PLUGINS,
+              this.availableForPlugins,
               context,
               options,
             );
@@ -1977,26 +1980,29 @@ class TrackRenderer extends React.Component {
         ref={(c) => {
           this.baseEl = c;
         }}
-        className="track-renderer-div"
+        className={clsx('track-renderer-div', classes['track-renderer'])}
         style={{
           height: this.currentProps.height,
           width: this.currentProps.width,
         }}
-        styleName="track-renderer"
       >
         <div
           ref={(c) => {
             this.element = c;
           }}
-          className="track-renderer-element"
-          styleName="track-renderer-element"
+          className={clsx(
+            'track-renderer-element',
+            classes['track-renderer-element'],
+          )}
         />
         <div
           ref={(c) => {
             this.eventTracker = c;
           }}
-          className="track-renderer-events"
-          styleName="track-renderer-events"
+          className={clsx(
+            'track-renderer-events',
+            classes['track-renderer-events'],
+          )}
         >
           {this.currentProps.children}
         </div>

package/app/scripts/VerticalRule.js

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

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

@@ -1,9 +1,11 @@
+// @ts-check
 import PropTypes from 'prop-types';
 import React from 'react';
 
 import { brushY } from 'd3-brush';
-import { select, event } from 'd3-selection';
+import { select } from 'd3-selection';
 import slugid from 'slugid';
+import clsx from 'clsx';
 
 import ListWrapper from './ListWrapper';
 import VerticalItem from './VerticalItem';
@@ -20,11 +22,15 @@ import styles from '../styles/VerticalTiledPlot.module.scss'; // eslint-disable-
 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
 
+function sourceEvent(event) {
+  return event && event.sourceEvent;
+}
+
 class VerticalTiledPlot extends React.Component {
   constructor(props) {
     super(props);
 
-    this.brushBehavior = brushY(true)
+    this.brushBehavior = brushY()
       .on('start', this.brushStarted.bind(this))
       .on('brush', this.brushed.bind(this))
       .on('end', this.brushedEnded.bind(this));
@@ -77,10 +83,6 @@ class VerticalTiledPlot extends React.Component {
 
   /* --------------------------- Getter / Setter ---------------------------- */
 
-  get sourceEvent() {
-    return event && event.sourceEvent;
-  }
-
   /* ---------------------------- Custom Methods ---------------------------- */
 
   addBrush() {
@@ -102,13 +104,13 @@ class VerticalTiledPlot extends React.Component {
     );
   }
 
-  brushed() {
+  brushed(event) {
     // Need to reassign variable to check after reset
     const rangeSelectionMoved = this.rangeSelectionMoved;
     this.rangeSelectionMoved = false;
 
     if (
-      !this.sourceEvent ||
+      !sourceEvent(event) ||
       !this.props.onRangeSelection ||
       rangeSelectionMoved
     )
@@ -118,13 +120,13 @@ class VerticalTiledPlot extends React.Component {
     this.props.onRangeSelection(event.selection);
   }
 
-  brushStarted() {
-    if (!this.sourceEvent || !event.selection) return;
+  brushStarted(event) {
+    if (!sourceEvent(event) || !event.selection) return;
 
     this.props.onRangeSelectionStart();
   }
 
-  brushedEnded() {
+  brushedEnded(event) {
     if (!this.props.is1dRangeSelection) return;
 
     const rangeSelectionMovedEnd = this.rangeSelectionMovedEnd;
@@ -191,35 +193,42 @@ class VerticalTiledPlot extends React.Component {
       .map((track) => IS_TRACK_RANGE_SELECTABLE(track))
       .reduce(or, false);
 
-    const rangeSelectorClass = this.props.isRangeSelectionActive
-      ? 'stylesTrack.track-range-selection-active'
-      : 'stylesTrack.track-range-selection';
+    const rangeSelectorClass =
+      stylesTrack[
+        this.props.isRangeSelectionActive
+          ? 'track-range-selection-active'
+          : 'track-range-selection'
+      ];
 
     return (
-      <div styleName="styles.vertical-tiled-plot">
+      <div className={styles['vertical-tiled-plot']}>
         {isBrushable && (
           <svg
             ref={(el) => {
               this.brushEl = select(el);
             }}
+            className={rangeSelectorClass}
             style={{
               height: this.props.height,
               width,
             }}
-            styleName={rangeSelectorClass}
             xmlns="http://www.w3.org/2000/svg"
           />
         )}
         <ListWrapper
           axis="x"
-          className={`${stylesPlot.list} ${stylesPlot.stylizedList} ${stylesPlot.horizontalList}`}
+          className={clsx(
+            stylesPlot.list,
+            stylesPlot.stylizedList,
+            stylesPlot.horizontalList,
+          )}
           component={SortableList}
           editable={this.props.editable}
           handleConfigTrack={this.props.handleConfigTrack}
           handleResizeTrack={this.props.handleResizeTrack}
           height={this.props.height}
           helperClass={stylesPlot.stylizedHelper}
-          itemClass={`${stylesPlot.stylizedItem} ${stylesPlot.horizontalItem}`}
+          itemClass={clsx(stylesPlot.stylizedItem, stylesPlot.horizontalItem)}
           itemControlAlignLeft={this.props.tracksControlAlignLeft}
           itemReactClass={VerticalItem}
           items={this.props.tracks.map((d) => ({