higlass 1.11.11 → 1.12.1

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import clsx from 'clsx';
 import { mix } from './mixwith';
 
 import ContextMenuContainer from './ContextMenuContainer';
@@ -10,7 +11,7 @@ import { getSeriesItems } from './SeriesListItems';
 import { THEME_DARK } from './configs';
 
 // Styles
-import '../styles/ContextMenu.module.scss';
+import classes from '../styles/ContextMenu.module.scss';
 
 class ConfigTrackMenu extends mix(ContextMenuContainer).with(
   SeriesListSubmenuMixin,
@@ -30,20 +31,19 @@ class ConfigTrackMenu extends mix(ContextMenuContainer).with(
   }
 
   render() {
-    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="ConfigTrackMenu"
         style={{
           left: this.state.left,
           top: this.state.top,
         }}
-        styleName={styleNames}
       >
         {getSeriesItems(
           this.props.tracks,
@@ -52,14 +52,14 @@ class ConfigTrackMenu extends mix(ContextMenuContainer).with(
           null,
         )}
 
-        <hr styleName="context-menu-hr" />
+        <hr className={classes['context-menu-hr']} />
 
         <ContextMenuItem
           contextMenu={this}
           onClick={() => this.props.onLockValueScale(this.props.tracks[0].uid)}
           onMouseEnter={(e) => this.handleOtherMouseEnter(e)}
         >
-          {'Lock Value Scale With'}
+          Lock Value Scale With
         </ContextMenuItem>
 
         <ContextMenuItem
@@ -69,23 +69,23 @@ class ConfigTrackMenu extends mix(ContextMenuContainer).with(
           }
           onMouseEnter={(e) => this.handleOtherMouseEnter(e)}
         >
-          {'Unlock Value Scale'}
+          Unlock Value Scale
         </ContextMenuItem>
 
-        <hr styleName="context-menu-hr" />
+        <hr className={classes['context-menu-hr']} />
 
         <ContextMenuItem
           contextMenu={this}
           onClick={() => this.props.onAddSeries(this.props.tracks[0].uid)}
           onMouseEnter={(e) => this.handleOtherMouseEnter(e)}
         >
-          {'Add Series'}
+          Add Series
         </ContextMenuItem>
 
         <ContextMenuItem
           onClick={() => this.props.onCloseTrack(this.props.tracks[0].uid)}
         >
-          {'Close Track'}
+          Close Track
         </ContextMenuItem>
 
         <ContextMenuItem
@@ -96,7 +96,7 @@ class ConfigTrackMenu extends mix(ContextMenuContainer).with(
             );
           }}
         >
-          {'Replace Track'}
+          Replace Track
         </ContextMenuItem>
 
         {this.getSubmenu()}

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

@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 
 import ContextMenuContainer from './ContextMenuContainer';
 import ContextMenuItem from './ContextMenuItem';
 import NestedContextMenu from './NestedContextMenu';
 
 // Styles
-import '../styles/ContextMenu.module.scss';
+import classes from '../styles/ContextMenu.module.scss';
 
 import { OPTIONS_INFO, THEME_DARK } from './configs';
 
@@ -55,9 +56,8 @@ class ConfigViewMenu extends ContextMenuContainer {
               this.props.onOptionsChanged(newOptions);
             };
 
-            menuItems[optionType].children[
-              inlineOptionKey
-            ] = optionSelectorSettings;
+            menuItems[optionType].children[inlineOptionKey] =
+              optionSelectorSettings;
           }
         }
       }
@@ -105,32 +105,31 @@ class ConfigViewMenu extends ContextMenuContainer {
   }
 
   render() {
-    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="ConfigViewMenu"
         style={{
           left: this.state.left,
           top: this.state.top,
         }}
-        styleName={styleNames}
       >
         <ContextMenuItem
           onClick={(e) => this.props.onTogglePositionSearchBox(e)}
         >
-          {'Toggle position search box'}
+          Toggle position search box
         </ContextMenuItem>
 
         {
           // Fritz: This seems to have been forgotten. The on-click handler does
           // nothing so I comment this out
           //
-          // <hr styleName="context-menu-hr" />
+          // <hr className={classes["context-menu-hr"]} />
           //
           // <ContextMenuItem
           //   onClick={() => {}}
@@ -142,98 +141,98 @@ class ConfigViewMenu extends ContextMenuContainer {
           //   onMouseLeave={e => this.handleMouseLeave(e)}
           // >
           //   {'Options'}
-          //   <svg styleName="play-icon">
+          //   <svg className={classes["play-icon"]}>
           //     <use xlinkHref="#play" />
           //   </svg>
           // </ContextMenuItem>
         }
 
-        <hr styleName="context-menu-hr" />
+        <hr className={classes['context-menu-hr']} />
 
         <ContextMenuItem onClick={(e) => this.props.onZoomToData(e)}>
-          {'Zoom to data extent'}
+          Zoom to data extent
         </ContextMenuItem>
 
         <ContextMenuItem onClick={(e) => this.props.onClearView(e)}>
-          {'Clear View'}
+          Clear View
         </ContextMenuItem>
 
-        <hr styleName="context-menu-hr" />
+        <hr className={classes['context-menu-hr']} />
 
         <ContextMenuItem onClick={(e) => this.props.onYankZoom(e)}>
-          {'Take zoom from'}
+          Take zoom from
         </ContextMenuItem>
 
         <ContextMenuItem onClick={(e) => this.props.onYankLocation(e)}>
-          {'Take location from'}
+          Take location from
         </ContextMenuItem>
 
         <ContextMenuItem onClick={(e) => this.props.onYankZoomAndLocation(e)}>
-          {'Take zoom and location from'}
+          Take zoom and location from
         </ContextMenuItem>
 
-        <hr styleName="context-menu-hr" />
+        <hr className={classes['context-menu-hr']} />
 
         <ContextMenuItem onClick={this.props.onLockZoom}>
-          {'Lock zoom with'}
+          Lock zoom with
         </ContextMenuItem>
 
         <ContextMenuItem onClick={this.props.onLockLocation}>
-          {'Lock location with'}
+          Lock location with
         </ContextMenuItem>
 
         <ContextMenuItem onClick={this.props.onLockZoomAndLocation}>
-          {'Lock zoom and location with'}
+          Lock zoom and location with
         </ContextMenuItem>
 
-        <hr styleName="context-menu-hr" />
+        <hr className={classes['context-menu-hr']} />
 
         <ContextMenuItem onClick={this.props.onTakeAndLockZoomAndLocation}>
-          {'Take and lock zoom and location with'}
+          Take and lock zoom and location with
         </ContextMenuItem>
 
-        <hr styleName="context-menu-hr" />
+        <hr className={classes['context-menu-hr']} />
 
         <ContextMenuItem onClick={(e) => this.props.onUnlockZoom(e)}>
-          {'Unlock zoom'}
+          Unlock zoom
         </ContextMenuItem>
 
         <ContextMenuItem onClick={(e) => this.props.onUnlockLocation(e)}>
-          {'Unlock location'}
+          Unlock location
         </ContextMenuItem>
 
         <ContextMenuItem onClick={(e) => this.props.onUnlockZoomAndLocation(e)}>
-          {'Unlock zoom and location'}
+          Unlock zoom and location
         </ContextMenuItem>
 
-        <hr styleName="context-menu-hr" />
+        <hr className={classes['context-menu-hr']} />
 
         <ContextMenuItem onClick={(e) => this.props.onProjectViewport(e)}>
-          {'Show this viewport on'}
+          Show this viewport on
         </ContextMenuItem>
 
-        <hr styleName="context-menu-hr" />
+        <hr className={classes['context-menu-hr']} />
 
         <ContextMenuItem onClick={(e) => this.props.onEditViewConfig(e)}>
           Edit view config
         </ContextMenuItem>
 
-        <hr styleName="context-menu-hr" />
+        <hr className={classes['context-menu-hr']} />
 
         <ContextMenuItem onClick={() => this.props.onExportSVG()}>
-          {'Export views as SVG'}
+          Export views as SVG
         </ContextMenuItem>
 
         <ContextMenuItem onClick={() => this.props.onExportPNG()}>
-          {'Export views as PNG'}
+          Export views as PNG
         </ContextMenuItem>
 
         <ContextMenuItem onClick={() => this.props.onExportViewAsJSON()}>
-          {'Export views as JSON'}
+          Export views as JSON
         </ContextMenuItem>
 
         <ContextMenuItem onClick={() => this.props.onExportViewAsLink()}>
-          {'Export views as Link'}
+          Export views as Link
         </ContextMenuItem>
 
         {this.getSubmenu()}

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

@@ -3,7 +3,7 @@ import React from 'react';
 import ContextMenuContainer from './ContextMenuContainer';
 
 // Styles
-import '../styles/ContextMenu.module.scss';
+import classes from '../styles/ContextMenu.module.scss';
 
 export default class ConfigureSeriesMenu extends ContextMenuContainer {
   render() {
@@ -12,12 +12,12 @@ export default class ConfigureSeriesMenu extends ContextMenuContainer {
         ref={(c) => {
           this.div = c;
         }}
+        className={classes['context-menu']}
         onMouseLeave={this.props.handleMouseLeave}
         style={{
           left: this.state.left,
           top: this.state.top,
         }}
-        styleName="context-menu"
       />
     );
   }

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

@@ -1,11 +1,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import clsx from 'clsx';
 
 import { THEME_DARK } from './configs';
 
 // Styles
-import '../styles/ContextMenu.module.scss';
+import classes from '../styles/ContextMenu.module.scss';
 
 // the size of the track controls
 // taken from ../styles/TrackControl.module.css
@@ -186,18 +187,15 @@ class ContextMenuContainer extends React.Component {
 
     const wholeStyle = Object.assign(stylePosition, otherStyle);
 
-    let stylenames = 'context-menu';
-
-    if (this.props.theme === THEME_DARK) stylenames += ' context-menu-dark';
-
     return (
       <div
         ref={(c) => {
           this.div = c;
         }}
-        className="context-menu-item"
+        className={clsx('context-menu-item', classes['context-menu'], {
+          [classes['context-menu-dark']]: this.props.theme === THEME_DARK,
+        })}
         style={wholeStyle}
-        styleName={stylenames}
       >
         {this.props.children}
       </div>

package/app/scripts/ContextMenuItem.jsx

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+// Styles
+import classes from '../styles/ContextMenu.module.scss';
+
+function ContextMenuItem(props) {
+  return (
+    <div
+      data-menu-item-for={
+        typeof props.children === 'string' ? props.children : null
+      }
+      className={classes['context-menu-item']}
+      onClick={(e) => props.onClick(e)}
+      onMouseEnter={(e) => props.onMouseEnter(e)}
+      onMouseLeave={(e) => props.onMouseLeave(e)}
+      role="button"
+      tabIndex={0}
+    >
+      <span className={classes['context-menu-span']}>{props.children}</span>
+    </div>
+  );
+}
+
+ContextMenuItem.defaultProps = {
+  onMouseEnter: () => undefined,
+  onMouseLeave: () => undefined,
+};
+
+ContextMenuItem.propTypes = {
+  children: PropTypes.node.isRequired,
+  onClick: PropTypes.func.isRequired,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
+};
+
+export default ContextMenuItem;

package/app/scripts/Cross.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import classes from '../styles/Cross.module.scss';
+
+function Cross() {
+  return <div className={classes.cross} />;
+}
+
+export default Cross;

package/app/scripts/CustomTrackDialog.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Dialog from './Dialog';
+
+// Styles
+import '../styles/AddTrackDialog.module.scss';
+
+class CustomTrackDialog extends React.PureComponent {
+  render() {
+    const childrenWithProp = [];
+    this.props.children.forEach((Child, i) => {
+      const key = `customTrackDialog_${i}`;
+      childrenWithProp.push(<Child key={key} {...this.props.bodyProps[i]} />);
+    });
+
+    return (
+      <Dialog
+        maxHeight={true}
+        okayOnly={true}
+        okayTitle="Close"
+        onCancel={this.props.onCancel}
+        onOkay={this.props.onCancel}
+        title={this.props.title}
+      >
+        {childrenWithProp}
+      </Dialog>
+    );
+  }
+}
+
+CustomTrackDialog.defaultProps = {};
+
+CustomTrackDialog.propTypes = {
+  onCancel: PropTypes.func.isRequired,
+};
+
+export default CustomTrackDialog;

package/app/scripts/DataFetcher.js

@@ -200,7 +200,7 @@ export default class DataFetcher {
       this.fetchHorizontalSection(receivedTiles, tileIds, true);
     } else if (!this.dataConfig.children && this.dataConfig.tilesetUid) {
       // no children, just return the fetched tiles as is
-      const promise = new Promise((resolve) =>
+      const promise = new Promise((resolve) => {
         tileProxy.fetchTilesDebounced(
           {
             id: slugid.nice(),
@@ -211,8 +211,8 @@ export default class DataFetcher {
           },
           this.pubSub,
           true,
-        ),
-      );
+        );
+      });
 
       promise.then((returnedTiles) => {
         const tilesetUid = dictValues(returnedTiles)[0].tilesetUid;
@@ -387,7 +387,7 @@ export default class DataFetcher {
     }
 
     // actually fetch the new tileIds
-    const promise = new Promise((resolve) =>
+    const promise = new Promise((resolve) => {
       tileProxy.fetchTilesDebounced(
         {
           id: slugid.nice(),
@@ -397,8 +397,8 @@ export default class DataFetcher {
         },
         this.pubSub,
         true,
-      ),
-    );
+      );
+    });
     promise.then((returnedTiles) => {
       // we've received some new tiles, but they're 2D
       // we need to extract the row corresponding to the data we need

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

@@ -1,14 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 
 import Button from './Button';
 import Cross from './Cross';
 import Modal from './Modal';
 import withModal from './hocs/with-modal';
 
-import '../styles/Dialog.module.scss';
+import classes from '../styles/Dialog.module.scss';
 
-const Dialog = (props) => {
+function Dialog(props) {
   const handleCancel = () => {
     props.modal.close();
     if (props.onCancel) props.onCancel();
@@ -21,38 +22,46 @@ const Dialog = (props) => {
 
   return (
     <Modal closeButton={false} hide={props.hide} maxHeight={props.maxHeight}>
-      <header styleName="dialog-header">
-        <h3>{props.title}</h3>
-        <Button onClick={handleCancel}>
-          <Cross />
-        </Button>
-      </header>
-      {props.maxHeight ? (
-        <main styleName={props.maxHeight ? 'dialog-main-max-height' : ''}>
-          {props.children}
-        </main>
-      ) : (
-        <main>{props.children}</main>
-      )}
-      <footer
-        styleName={
-          props.maxHeight ? 'dialog-footer-max-height' : 'dialog-footer'
-        }
-      >
-        {props.okayOnly ? (
-          <div />
-        ) : (
-          <Button onClick={handleCancel} shortcut={props.cancelShortcut}>
-            {props.cancelTitle}
+      <>
+        <header className={classes['dialog-header']}>
+          <h3>{props.title}</h3>
+          <Button onClick={handleCancel}>
+            <Cross />
           </Button>
+        </header>
+        {props.maxHeight ? (
+          <main
+            className={clsx(
+              props.maxHeight && classes['dialog-main-max-height'],
+            )}
+          >
+            {props.children}
+          </main>
+        ) : (
+          <main>{props.children}</main>
         )}
-        <Button onClick={handleOkay} shortcut={props.okayShortcut}>
-          {props.okayTitle}
-        </Button>
-      </footer>
+        <footer
+          className={
+            classes[
+              props.maxHeight ? 'dialog-footer-max-height' : 'dialog-footer'
+            ]
+          }
+        >
+          {props.okayOnly ? (
+            <div />
+          ) : (
+            <Button onClick={handleCancel} shortcut={props.cancelShortcut}>
+              {props.cancelTitle}
+            </Button>
+          )}
+          <Button onClick={handleOkay} shortcut={props.okayShortcut}>
+            {props.okayTitle}
+          </Button>
+        </footer>
+      </>
     </Modal>
   );
-};
+}
 
 Dialog.defaultProps = {
   cancelTitle: 'Cancel',
@@ -65,7 +74,7 @@ Dialog.defaultProps = {
 Dialog.propTypes = {
   cancelShortcut: PropTypes.string,
   cancelTitle: PropTypes.string,
-  children: PropTypes.func.isRequired,
+  children: PropTypes.object,
   hide: PropTypes.bool,
   maxHeight: PropTypes.bool,
   modal: PropTypes.object.isRequired,

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

@@ -1,11 +1,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import slugid from 'slugid';
+import clsx from 'clsx';
 
 import withPubSub from './hocs/with-pub-sub';
 
 // Styles
-import '../styles/DragListeningDiv.module.scss';
+import classes from '../styles/DragListeningDiv.module.scss';
 
 class DragListeningDiv extends React.Component {
   constructor(props) {
@@ -26,11 +27,11 @@ class DragListeningDiv extends React.Component {
       background = 'blue';
     }
 
-    const styleNames = this.props.enabled ? 'drag-listening-div-active' : '';
-
     return (
       <div
-        className="DragListeningDiv"
+        className={clsx('DragListeningDiv', {
+          [classes['drag-listening-div-active']]: this.props.enabled,
+        })}
         onDragEnter={() => {
           this.setState({ dragOnTop: true });
         }}
@@ -55,14 +56,11 @@ class DragListeningDiv extends React.Component {
           this.props.onTrackDropped(newTrack);
           this.props.pubSub.publish('trackDropped', newTrack);
         }}
-        style={Object.assign(
-          {
-            background,
-            opacity: 0.6,
-          },
-          this.props.style,
-        )}
-        styleName={styleNames}
+        style={{
+          background,
+          opacity: 0.6,
+          ...this.props.style,
+        }}
       />
     );
   }