higlass 1.11.10 → 1.12.0

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

@@ -4,6 +4,7 @@ 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';
 
 import schema from '../schema.json';
 import Button from './Button';
@@ -12,7 +13,7 @@ import withModal from './hocs/with-modal';
 import withPubSub from './hocs/with-pub-sub';
 import { timeout } from './utils';
 
-import '../styles/ViewConfigEditor.module.scss';
+import classes from '../styles/ViewConfigEditor.module.scss';
 
 class ViewConfigEditor extends React.Component {
   constructor(props) {
@@ -48,7 +49,10 @@ class ViewConfigEditor extends React.Component {
       this.editor._input.focus();
       this.editor._input.setSelectionRange(0, 0);
       await timeout(0);
-      this.editorWrap.scrollTop = 0;
+
+      if (this.editorWrap) {
+        this.editorWrap.scrollTop = 0;
+      }
     }
   }
 
@@ -149,7 +153,9 @@ class ViewConfigEditor extends React.Component {
       const key = `${i}-${d.msg}`;
       return (
         <tr key={key}>
-          <td styleName={`title ${d.type}`}>{`[${i}] ${d.type}`}</td>
+          <td
+            className={clsx(classes.title, classes[d.type])}
+          >{`[${i}] ${d.type}`}</td>
           <td>
             <pre>{d.msg}</pre>
           </td>
@@ -169,69 +175,71 @@ class ViewConfigEditor extends React.Component {
         onOkay={this.handleSubmitBound}
         title="Edit View Config"
       >
-        <header styleName="view-config-editor-header">
-          <Button
-            onBlur={this.showBound}
-            onMouseDown={this.hideBound}
-            onMouseOut={this.showBound}
-            onMouseUp={this.showBound}
-          >
-            Hide While Mousedown
-          </Button>
-          <Button
-            onClick={() => {
-              this.props.onChange(this.state.code);
-            }}
-            shortcut="⌘+S"
-          >
-            Save
-          </Button>
-        </header>
-        <div
-          ref={(c) => {
-            this.editorWrap = c;
-          }}
-          styleName="view-config-editor"
-        >
-          <Editor
+        <>
+          <header className={classes['view-config-editor-header']}>
+            <Button
+              onBlur={this.showBound}
+              onMouseDown={this.hideBound}
+              onMouseOut={this.showBound}
+              onMouseUp={this.showBound}
+            >
+              Hide While Mousedown
+            </Button>
+            <Button
+              onClick={() => {
+                this.props.onChange(this.state.code);
+              }}
+              shortcut="⌘+S"
+            >
+              Save
+            </Button>
+          </header>
+          <div
             ref={(c) => {
-              this.editor = c;
-            }}
-            highlight={(code) => highlight(code, languages.json)}
-            onValueChange={this.handleChangeBound}
-            padding={10}
-            style={{
-              fontFamily: '"Fira code", "Fira Mono", monospace',
-              fontSize: 'inherit',
+              this.editorWrap = c;
             }}
-            value={this.state.code}
-          />
-        </div>
-        <div
-          style={{
-            height: this.state.showLog ? '50%' : '30px',
-          }}
-          styleName="view-config-log"
-        >
-          <div
-            onClick={() => this.toggleLogBound()}
-            styleName="view-config-log-header"
+            className={classes['view-config-editor']}
           >
-            {`Log Messages (${
-              this.state.logMsgs.filter((d) => d.type !== 'Success').length
-            })`}
+            <Editor
+              ref={(c) => {
+                this.editor = c;
+              }}
+              highlight={(code) => highlight(code, languages.json)}
+              onValueChange={this.handleChangeBound}
+              padding={10}
+              style={{
+                fontFamily: '"Fira code", "Fira Mono", monospace',
+                fontSize: 'inherit',
+              }}
+              value={this.state.code}
+            />
           </div>
           <div
+            className={classes['view-config-log']}
             style={{
-              padding: this.state.showLog ? '10px' : 0,
+              height: this.state.showLog ? '50%' : '30px',
             }}
-            styleName="view-config-log-msg"
           >
-            <table>
-              <tbody>{logMessages}</tbody>
-            </table>
+            <div
+              className={classes['view-config-log-header']}
+              onClick={() => this.toggleLogBound()}
+            >
+              {`Log Messages (${
+                this.state.logMsgs.filter((d) => d.type !== 'Success').length
+              })`}
+            </div>
+            <div
+              className={classes['view-config-log-msg']}
+              style={{
+                padding: this.state.showLog ? '10px' : 0,
+              }}
+            >
+              <table>
+                <tbody>{logMessages}</tbody>
+              </table>
+            </div>
           </div>
-        </div>
+        </>
       </Dialog>
     );
   }
@@ -243,7 +251,7 @@ ViewConfigEditor.propTypes = {
   onChange: PropTypes.func.isRequired,
   onSave: PropTypes.func.isRequired,
   pubSub: PropTypes.object.isRequired,
-  viewConfig: PropTypes.object.isRequired,
+  viewConfig: PropTypes.string.isRequired,
 };
 
 export default withPubSub(withModal(ViewConfigEditor));

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { mix } from './mixwith';
 
 import { expandCombinedTracks } from './utils';
@@ -12,7 +13,7 @@ import SeriesListSubmenuMixin from './SeriesListSubmenuMixin';
 import { THEME_DARK } from './configs';
 
 // Styles
-import '../styles/ContextMenu.module.scss';
+import classes from '../styles/ContextMenu.module.scss';
 
 class ViewContextMenu extends mix(ContextMenuContainer).with(
   SeriesListSubmenuMixin,
@@ -34,28 +35,27 @@ class ViewContextMenu extends mix(ContextMenuContainer).with(
         )
       : null;
 
-    let styleNames = 'context-menu';
-    if (this.props.theme === THEME_DARK) styleNames += ' context-menu-dark';
-
     return (
       <div
         ref={(c) => {
           this.div = c;
         }}
+        className={clsx(classes['context-menu'], {
+          [classes['context-menu-dark']]: this.props.theme === THEME_DARK,
+        })}
         data-menu-type="ViewContextMenu"
         style={{
           left: this.state.left,
           top: this.state.top,
         }}
-        styleName={styleNames}
       >
         {customItemsWrapped}
 
-        {customItemsWrapped && <hr styleName="context-menu-hr" />}
+        {customItemsWrapped && <hr className={classes['context-menu-hr']} />}
 
         {seriesItems}
 
-        {seriesItems && <hr styleName="context-menu-hr" />}
+        {seriesItems && <hr className={classes['context-menu-hr']} />}
 
         <ContextMenuItem
           onClick={() =>
@@ -67,7 +67,7 @@ class ViewContextMenu extends mix(ContextMenuContainer).with(
           }
           onMouseEnter={(e) => this.handleOtherMouseEnter(e)}
         >
-          {'Add Horizontal Rule'}
+          Add Horizontal Rule
         </ContextMenuItem>
 
         <ContextMenuItem
@@ -80,7 +80,7 @@ class ViewContextMenu extends mix(ContextMenuContainer).with(
           }
           onMouseEnter={(e) => this.handleOtherMouseEnter(e)}
         >
-          {'Add Vertical Rule'}
+          Add Vertical Rule
         </ContextMenuItem>
 
         <ContextMenuItem
@@ -94,17 +94,17 @@ class ViewContextMenu extends mix(ContextMenuContainer).with(
           }
           onMouseEnter={(e) => this.handleOtherMouseEnter(e)}
         >
-          {'Add Cross Rule'}
+          Add Cross Rule
         </ContextMenuItem>
 
-        <hr styleName="context-menu-hr" />
+        <hr className={classes['context-menu-hr']} />
 
         {this.hasMatrixTrack(this.props.tracks) && (
           <ContextMenuItem
             onClick={this.handleAddHorizontalSection.bind(this)}
             onMouseEnter={(e) => this.handleOtherMouseEnter(e)}
           >
-            {'Add Horizontal Cross Section'}
+            Add Horizontal Cross Section
           </ContextMenuItem>
         )}
         {this.hasMatrixTrack(this.props.tracks) && (
@@ -112,7 +112,7 @@ class ViewContextMenu extends mix(ContextMenuContainer).with(
             onClick={this.handleAddVerticalSection.bind(this)}
             onMouseEnter={(e) => this.handleOtherMouseEnter(e)}
           >
-            {'Add Vertical Cross Section'}
+            Add Vertical Cross Section
           </ContextMenuItem>
         )}
 

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 
 import PopupMenu from './PopupMenu';
 import ContextMenuContainer from './ContextMenuContainer';
@@ -18,7 +19,7 @@ import {
 } from './configs';
 
 // Styles
-import '../styles/ViewHeader.module.scss';
+import classes from '../styles/ViewHeader.module.scss';
 
 class ViewHeader extends React.Component {
   constructor(props) {
@@ -36,9 +37,8 @@ class ViewHeader extends React.Component {
       width: -1,
     };
 
-    this.handleTrackPositionChosenBound = this.handleTrackPositionChosen.bind(
-      this,
-    );
+    this.handleTrackPositionChosenBound =
+      this.handleTrackPositionChosen.bind(this);
   }
 
   componentDidMount() {
@@ -217,37 +217,38 @@ class ViewHeader extends React.Component {
       },
     );
 
-    let className = this.state.isFocused
-      ? 'multitrack-header-focus'
-      : 'multitrack-header';
+    const className = clsx(
+      this.state.isFocused
+        ? classes['multitrack-header-focus']
+        : classes['multitrack-header'],
+      {
+        [classes['multitrack-header-dark']]: this.props.theme === THEME_DARK,
+      },
+    );
 
     const classNameIcon =
       this.state.width <= VIEW_HEADER_MED_WIDTH_SEARCH_BAR
-        ? 'multitrack-header-icon-squeazed'
-        : 'multitrack-header-icon';
-
-    if (this.props.theme === THEME_DARK) {
-      className += ' multitrack-header-dark';
-    }
+        ? classes['multitrack-header-icon-squeazed']
+        : classes['multitrack-header-icon'];
 
     return (
       <div
         ref={(c) => {
           this.el = c;
         }}
-        styleName={className}
+        className={className}
       >
-        <div styleName="multitrack-header-left">
+        <div className={classes['multitrack-header-left']}>
           {this.props.mouseTool === MOUSE_TOOL_SELECT && (
             <svg
-              styleName={`mouse-tool-selection ${classNameIcon}`}
+              className={clsx(classes['mouse-tool-selection'], classNameIcon)}
               title="Selection tool active"
             >
               <use xlinkHref="#select" />
             </svg>
           )}
           <div
-            styleName="multitrack-header-grabber"
+            className={classes['multitrack-header-grabber']}
             title="Drag to move the view"
           >
             <div />
@@ -255,14 +256,14 @@ class ViewHeader extends React.Component {
             <div />
           </div>
           {this.state.width > VIEW_HEADER_MIN_WIDTH_SEARCH_BAR && (
-            <div styleName="multitrack-header-search">
+            <div className={classes['multitrack-header-search']}>
               {this.props.isGenomePositionSearchBoxVisible &&
                 GenomePositionSearchBox}
             </div>
           )}
         </div>
-        <nav styleName="multitrack-header-nav-list">
-          <svg onClick={this.props.onAddView} styleName={classNameIcon}>
+        <nav className={classes['multitrack-header-nav-list']}>
+          <svg className={classNameIcon} onClick={this.props.onAddView}>
             <title>Add new view (clone this view)</title>
             <use xlinkHref="#copy" />
           </svg>
@@ -271,8 +272,8 @@ class ViewHeader extends React.Component {
             ref={(c) => {
               this.configImg = c;
             }}
+            className={classNameIcon}
             onClick={() => this.handleConfigMenuOpened(this.props.viewUid)}
-            styleName={classNameIcon}
           >
             <title>Configure this view</title>
             <use xlinkHref="#cog" />
@@ -282,16 +283,16 @@ class ViewHeader extends React.Component {
             ref={(c) => {
               this.plusImg = c;
             }}
+            className={classNameIcon}
             onClick={() =>
               this.handleAddTrackPositionMenuOpened(this.props.viewUid)
             }
-            styleName={classNameIcon}
           >
             <title>Add Track</title>
             <use xlinkHref="#plus" />
           </svg>
 
-          <svg onClick={this.props.onCloseView} styleName={classNameIcon}>
+          <svg className={classNameIcon} onClick={this.props.onCloseView}>
             <title>Close View</title>
             <use xlinkHref="#cross" />
           </svg>

package/app/scripts/ViewportTracker2D.js

@@ -1,6 +1,5 @@
 import slugid from 'slugid';
 import { brush } from 'd3-brush';
-import { event } from 'd3-selection';
 
 import SVGTrack from './SVGTrack';
 
@@ -62,7 +61,7 @@ class ViewportTracker2D extends SVGTrack {
     this.draw();
   }
 
-  brushed() {
+  brushed(event) {
     /**
      * Should only be called  on active brushing, not in response to the
      * draw event

package/app/scripts/ViewportTrackerHorizontal.js

@@ -1,5 +1,4 @@
 import { brushX } from 'd3-brush';
-import { event } from 'd3-selection';
 import slugid from 'slugid';
 
 import SVGTrack from './SVGTrack';
@@ -58,7 +57,7 @@ class ViewportTrackerHorizontal extends SVGTrack {
     this.draw();
   }
 
-  brushed() {
+  brushed(event) {
     /**
      * Should only be called  on active brushing, not in response to the
      * draw event

package/app/scripts/ViewportTrackerVertical.js

@@ -1,5 +1,4 @@
 import { brushY } from 'd3-brush';
-import { event } from 'd3-selection';
 import slugid from 'slugid';
 
 import SVGTrack from './SVGTrack';
@@ -57,7 +56,7 @@ class ViewportTrackerVertical extends SVGTrack {
     this.draw();
   }
 
-  brushed() {
+  brushed(event) {
     /**
      * Should only be called  on active brushing, not in response to the
      * draw event

package/app/scripts/api.js

@@ -10,6 +10,8 @@ import { getTrackObjectFromHGC } from './utils';
 
 import { MOUSE_TOOL_MOVE, MOUSE_TOOL_SELECT } from './configs';
 
+import { version } from '../../package.json';
+
 const forceUpdate = (self) => {
   self.setState(self.state);
 };
@@ -41,10 +43,7 @@ const createApi = function api(context, pubSub) {
        * @return {string} Version number
        */
       get version() {
-        // Note, `VERSION` is exposed by webpack across the entire app. I.e.,
-        // it's globally available within the build but not outside. See
-        // `plugins` in `webpack.config.js`
-        return VERSION;
+        return version;
       },
 
       /**
@@ -735,6 +734,7 @@ const createApi = function api(context, pubSub) {
        * hgv.off('mouseMoveZoom', mmz);
        * hgv.off('wheel', wheelListener);
        * hgv.off('createSVG');
+       * hgv.off('click');
        * hgv.off('geneSearch', geneSearchListener);
        */
       off(event, listenerId, viewId) {
@@ -797,15 +797,22 @@ const createApi = function api(context, pubSub) {
        *
        * **Event types**
        *
-       * ``click``: Returns clicked objects. (Currently only clicks on 1D annotations are captured.)
+       * ``click``: Returns a list of objects for each track that is below the click event.
        *
        * .. code-block:: javascript
        *
-       *     {
-       *       type: 'annotation',
-       *       event: { ... },
-       *       payload: [230000000, 561000000]
-       *     }
+       *     [
+       *      {
+       *       event: {
+       *          type: 'annotation',
+       *          event: { ... },
+       *          payload: [230000000, 561000000]
+       *        },
+       *       trackType: '1d-annotation',
+       *       trackUid: 'xyz',
+       *       viewUid: 'abc'
+       *      }
+       *     ]
        *
        * ``cursorLocation:`` Returns an object describing the location under the cursor
        *

package/app/scripts/configs/available-for-plugins.js

@@ -82,7 +82,7 @@ import ViewportTrackerVertical from '../ViewportTrackerVertical';
 // Factories
 import ContextMenuItem from '../ContextMenuItem';
 import DataFetcher from '../DataFetcher';
-import LruCache from '../factories';
+import LruCache from '../factories/LruCache';
 
 // Services
 import * as services from '../services';
@@ -96,6 +96,8 @@ import GBKDataFetcher from '../data-fetchers/genbank-fetcher';
 import LocalDataFetcher from '../data-fetchers/local-tile-fetcher';
 import getDataFetcher from '../data-fetchers/get-data-fetcher';
 
+import { version } from '../../../package.json';
+
 const libraries = {
   d3Array,
   d3Axis,
@@ -196,6 +198,5 @@ export default {
   services,
   utils,
   configs,
-  // Defined globally by webpack.
-  VERSION,
+  VERSION: version,
 };

package/app/scripts/configs/index.js

@@ -1,52 +1,6 @@
 /* ------------------------------- Primitives ------------------------------- */
 
-export const DEFAULT_VIEW_MARGIN = 0;
-
-export const DEFAULT_VIEW_PADDING = 5;
-
-export const DEFAULT_CONTAINER_PADDING_X = 10;
-
-export const DEFAULT_CONTAINER_PADDING_Y = 10;
-
-export const MAX_CLICK_DELAY = 300;
-
-export const MOUSE_TOOL_MOVE = 'move';
-
-export const MOUSE_TOOL_SELECT = 'select';
-
-export const TILE_FETCH_DEBOUNCE = 100;
-
-// Number of milliseconds zoom-related actions (e.g., tile loading) are debounced
-export const ZOOM_DEBOUNCE = 10;
-
-// the length of time to keep refreshing the view after a drag event
-export const SHORT_DRAG_TIMEOUT = 110;
-
-export const LONG_DRAG_TIMEOUT = 3000;
-
-export const LOCATION_LISTENER_PREFIX = 'locationListenerPrefix';
-
-export const ZOOM_TRANSITION_DURATION = 1000;
-
-export const DEFAULT_SERVER = 'http://higlass.io/api/v1';
-
-export const VIEW_HEADER_MED_WIDTH_SEARCH_BAR = 400;
-
-export const VIEW_HEADER_MIN_WIDTH_SEARCH_BAR = 300;
-
-export const TRACK_LOCATIONS = [
-  'top',
-  'left',
-  'right',
-  'bottom',
-  'center',
-  'whole',
-  'gallery',
-];
-
-export const MIN_HORIZONTAL_HEIGHT = 20;
-
-export const MIN_VERTICAL_WIDTH = 20;
+export * from './primitives';
 
 /* --------------------------------- Themes -------------------------------- */
 

package/app/scripts/configs/positions-by-datatype.js

@@ -2,6 +2,8 @@ import { TRACKS_INFO } from '.';
 
 export const POSITIONS_BY_DATATYPE = TRACKS_INFO.reduce(
   (positionsByDatatype, track) => {
+    // TODO: Found by eslint. This loop never iterates?
+    /* eslint-disable-next-line no-unreachable-loop */
     for (let i = 0; i < track.datatype.length; i++) {
       const datatype = track.datatype[i];
 

package/app/scripts/configs/primitives.js

@@ -0,0 +1,47 @@
+export const DEFAULT_VIEW_MARGIN = 0;
+
+export const DEFAULT_VIEW_PADDING = 5;
+
+export const DEFAULT_CONTAINER_PADDING_X = 10;
+
+export const DEFAULT_CONTAINER_PADDING_Y = 10;
+
+export const MAX_CLICK_DELAY = 300;
+
+export const MOUSE_TOOL_MOVE = 'move';
+
+export const MOUSE_TOOL_SELECT = 'select';
+
+export const TILE_FETCH_DEBOUNCE = 100;
+
+// Number of milliseconds zoom-related actions (e.g., tile loading) are debounced
+export const ZOOM_DEBOUNCE = 10;
+
+// the length of time to keep refreshing the view after a drag event
+export const SHORT_DRAG_TIMEOUT = 110;
+
+export const LONG_DRAG_TIMEOUT = 3000;
+
+export const LOCATION_LISTENER_PREFIX = 'locationListenerPrefix';
+
+export const ZOOM_TRANSITION_DURATION = 1000;
+
+export const DEFAULT_SERVER = 'http://higlass.io/api/v1';
+
+export const VIEW_HEADER_MED_WIDTH_SEARCH_BAR = 400;
+
+export const VIEW_HEADER_MIN_WIDTH_SEARCH_BAR = 300;
+
+export const TRACK_LOCATIONS = [
+  'top',
+  'left',
+  'right',
+  'bottom',
+  'center',
+  'whole',
+  'gallery',
+];
+
+export const MIN_HORIZONTAL_HEIGHT = 20;
+
+export const MIN_VERTICAL_WIDTH = 20;

package/app/scripts/configs/tracks-info.js

@@ -74,9 +74,9 @@ const mapbox = {
 
 export const TRACKS_INFO = [
   osm,
-  Object.assign({}, osm, { type: 'osm' }),
+  { ...osm, type: 'osm' },
   mapbox,
-  Object.assign({}, mapbox, { type: 'mapbox' }),
+  { ...mapbox, type: 'mapbox' },
   {
     type: 'left-axis',
     datatype: ['axis'],

package/app/scripts/d3-context-menu.js

@@ -71,6 +71,7 @@ function contextMenu(menu, optsIn) {
   return function onContextMenu(
     data,
     index,
+    /* eslint-disable-next-line default-param-last */
     pMouseUp = false,
     clickAwayFunc,
     useMouse = false,