higlass 2.2.2 → 2.3.0

package/app/scripts/Autocomplete.jsx

@@ -17,6 +17,9 @@ class Autocomplete extends React.Component {
       isOpen: false,
     };
 
+    this.itemRefs = {};
+    this.menuRef = null;
+
     this.keyDownHandlers = {
       ArrowDown(event) {
         event.preventDefault();
@@ -139,7 +142,7 @@ class Autocomplete extends React.Component {
 
   maybeScrollItemIntoView() {
     if (this.state.isOpen === true && this.state.highlightedIndex !== null) {
-      const itemNode = this.refs[`item-${this.state.highlightedIndex}`];
+      const itemNode = this.itemRefs[this.state.highlightedIndex];
       itemNode?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
     }
   }
@@ -250,7 +253,9 @@ class Autocomplete extends React.Component {
         // Ignore blur to prevent menu from de-rendering before we can process click
         onMouseEnter: () => this.highlightItemFromMouse(index),
         onClick: () => this.selectItemFromMouse(item),
-        ref: `item-${index}`,
+        ref: (el) => {
+          this.itemRefs[index] = el;
+        },
       });
     });
     const style = {
@@ -260,7 +265,11 @@ class Autocomplete extends React.Component {
     };
     if (!items.length) return null;
     const menu = this.props.renderMenu(items, this.props.value, style);
-    return React.cloneElement(menu, { ref: 'menu' });
+    return React.cloneElement(menu, {
+      ref: (el) => {
+        this.menuRef = el;
+      },
+    });
   }
 
   handleInputBlur() {

package/app/scripts/Button.jsx

@@ -4,30 +4,26 @@ import React from 'react';
 
 import classes from '../styles/Button.module.scss';
 
-const Button = React.forwardRef((props, ref) => (
-  <button
-    ref={ref}
-    className={classes[props.styleName] ?? classes.button}
-    disabled={props.disable}
-    onBlur={props.onBlur}
-    onClick={props.onClick}
-    onMouseDown={props.onMouseDown}
-    onMouseOut={props.onMouseOut}
-    onMouseUp={props.onMouseUp}
-    type="button"
-  >
-    {props.children}
-    {props.shortcut && (
-      <span className={classes['button-shortcut']}>{props.shortcut}</span>
-    )}
-  </button>
-));
-
-Button.defaultProps = {
-  onClick: () => {},
-  styleName: '',
-  type: 'button',
-};
+const Button = React.forwardRef(
+  ({ onClick = () => {}, styleName = '', children, ...props }, ref) => (
+    <button
+      ref={ref}
+      className={classes[styleName] ?? classes.button}
+      disabled={props.disable}
+      onBlur={props.onBlur}
+      onClick={onClick}
+      onMouseDown={props.onMouseDown}
+      onMouseOut={props.onMouseOut}
+      onMouseUp={props.onMouseUp}
+      type="button"
+    >
+      {children}
+      {props.shortcut && (
+        <span className={classes['button-shortcut']}>{props.shortcut}</span>
+      )}
+    </button>
+  ),
+);
 
 Button.propTypes = {
   children: PropTypes.any,

package/app/scripts/ContextMenuContainer.jsx

@@ -2,7 +2,6 @@
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
-import ReactDOM from 'react-dom';
 
 import { THEME_DARK } from './configs';
 
@@ -101,8 +100,7 @@ class ContextMenuContainer extends React.Component {
     if (this.adjusted) return;
 
     this.adjusted = true;
-    this.divDom = ReactDOM.findDOMNode(this.div);
-    const bbox = this.divDom.getBoundingClientRect();
+    const bbox = this.div.getBoundingClientRect();
 
     const parentBbox = this.props.parentBbox
       ? this.props.parentBbox

package/app/scripts/ContextMenuItem.jsx

@@ -9,37 +9,36 @@ import classes from '../styles/ContextMenu.module.scss';
  * @typedef ContextMenuItemProps
  * @prop {string} [className]
  * @prop {(evt: React.MouseEvent) => void} onClick
- * @prop {(evt: React.MouseEvent) => void} onMouseEnter
- * @prop {(evt: React.MouseEvent) => void} onMouseLeave
+ * @prop {(evt: React.MouseEvent) => void} [onMouseEnter]
+ * @prop {(evt: React.MouseEvent) => void} [onMouseLeave]
  */
 
 /**
  * @param {React.PropsWithChildren<ContextMenuItemProps>} props
  */
-function ContextMenuItem(props) {
+function ContextMenuItem({
+  onMouseEnter = () => undefined,
+  onMouseLeave = () => undefined,
+  onClick,
+  className,
+  children,
+}) {
   return (
     <div
-      data-menu-item-for={
-        typeof props.children === 'string' ? props.children : null
-      }
-      className={clsx(classes['context-menu-item'], props.className)}
-      onClick={(e) => props.onClick(e)}
-      onMouseEnter={(e) => props.onMouseEnter(e)}
-      onMouseLeave={(e) => props.onMouseLeave(e)}
+      data-menu-item-for={typeof children === 'string' ? children : null}
+      className={clsx(classes['context-menu-item'], className)}
+      onClick={(e) => onClick(e)}
+      onMouseEnter={(e) => onMouseEnter(e)}
+      onMouseLeave={(e) => onMouseLeave(e)}
       // biome-ignore lint/a11y/useSemanticElements:
       role="button"
       tabIndex={0}
     >
-      <span className={classes['context-menu-span']}>{props.children}</span>
+      <span className={classes['context-menu-span']}>{children}</span>
     </div>
   );
 }
 
-ContextMenuItem.defaultProps = {
-  onMouseEnter: () => undefined,
-  onMouseLeave: () => undefined,
-};
-
 ContextMenuItem.propTypes = {
   children: PropTypes.node.isRequired,
   onClick: PropTypes.func.isRequired,

package/app/scripts/Dialog.jsx

@@ -10,53 +10,62 @@ import withModal from './hocs/with-modal';
 
 import classes from '../styles/Dialog.module.scss';
 
-function Dialog(props) {
+function Dialog({
+  cancelTitle = 'Cancel',
+  hide = false,
+  maxHeight = false,
+  okayOnly = false,
+  okayTitle = 'Ok',
+  modal,
+  onCancel,
+  onOkay,
+  title,
+  cancelShortcut,
+  okayShortcut,
+  children,
+}) {
   const handleCancel = () => {
-    props.modal.close();
-    if (props.onCancel) props.onCancel();
+    modal.close();
+    if (onCancel) onCancel();
   };
 
   const handleOkay = () => {
-    props.modal.close();
-    if (props.onOkay) props.onOkay();
+    modal.close();
+    if (onOkay) onOkay();
   };
 
   return (
-    <Modal closeButton={false} hide={props.hide} maxHeight={props.maxHeight}>
+    <Modal closeButton={false} hide={hide} maxHeight={maxHeight}>
       <>
         <header className={classes['dialog-header']}>
-          <h3>{props.title}</h3>
+          <h3>{title}</h3>
           <Button onClick={handleCancel}>
             <Cross />
           </Button>
         </header>
-        {props.maxHeight ? (
+        {maxHeight ? (
           <main
-            className={clsx(
-              props.maxHeight && classes['dialog-main-max-height'],
-            )}
+            className={clsx(maxHeight && classes['dialog-main-max-height'])}
           >
-            {props.children}
+            {children}
           </main>
         ) : (
-          <main>{props.children}</main>
+          <main>{children}</main>
         )}
         <footer
           className={
-            classes[
-              props.maxHeight ? 'dialog-footer-max-height' : 'dialog-footer'
-            ]
+            classes[maxHeight ? 'dialog-footer-max-height' : 'dialog-footer']
           }
         >
-          {props.okayOnly ? (
+          {okayOnly ? (
             <div />
           ) : (
-            <Button onClick={handleCancel} shortcut={props.cancelShortcut}>
-              {props.cancelTitle}
+            <Button onClick={handleCancel} shortcut={cancelShortcut}>
+              {cancelTitle}
             </Button>
           )}
-          <Button onClick={handleOkay} shortcut={props.okayShortcut}>
-            {props.okayTitle}
+          <Button onClick={handleOkay} shortcut={okayShortcut}>
+            {okayTitle}
           </Button>
         </footer>
       </>
@@ -64,14 +73,6 @@ function Dialog(props) {
   );
 }
 
-Dialog.defaultProps = {
-  cancelTitle: 'Cancel',
-  hide: false,
-  maxHeight: false,
-  okayOnly: false,
-  okayTitle: 'Ok',
-};
-
 Dialog.propTypes = {
   cancelShortcut: PropTypes.string,
   cancelTitle: PropTypes.string,

package/app/scripts/HiGlassComponent.jsx

@@ -7,9 +7,8 @@ import * as PIXI from 'pixi.js';
 import PropTypes from 'prop-types';
 import createPubSub, { globalPubSub } from 'pub-sub-es';
 import React from 'react';
-import ReactGridLayout from 'react-grid-layout';
+import ReactGridLayout, { getCompactor } from 'react-grid-layout';
 import slugid from 'slugid';
-import parse from 'url-parse';
 import vkbeautify from 'vkbeautify';
 
 import ChromosomeInfo from './ChromosomeInfo';
@@ -290,7 +289,6 @@ class HiGlassComponent extends React.Component {
     this.pluginDataFetchers = pluginDataFetchers;
 
     this.state = {
-      currentBreakpoint: 'lg',
       width: 0,
       height: 0,
       rowHeight,
@@ -555,10 +553,18 @@ class HiGlassComponent extends React.Component {
     this.fitPixiToParentContainer();
 
     // keep track of the width and height of this element, because it
-    // needs to be reflected in the size of our drawing surface
+    // needs to be reflected in the size of our drawing surface.
+    // Also measure initial width so that ReactGridLayout renders grid items
+    // with valid dimensions on the first mounted render. Without this,
+    // width=0 causes react-grid-layout v2 to calculate negative column
+    // widths, and TiledPlot's ResizeSensor fails to detect the subsequent
+    // resize from zero to the actual size.
+    const [initialWidth, initialHeight] = getElementDim(this.element);
     this.setState({
       svgElement: this.svgElement,
       canvasElement: this.canvasElement,
+      ...(initialWidth > 0 ? { width: initialWidth } : {}),
+      ...(initialHeight > 0 ? { height: initialHeight } : {}),
     });
 
     this.waitForDOMAttachment(() => {
@@ -588,11 +594,11 @@ class HiGlassComponent extends React.Component {
   }
 
   getTrackObject(viewUid, trackUid) {
-    return this.tiledPlots[viewUid].trackRenderer.getTrackObject(trackUid);
+    return this.tiledPlots[viewUid]?.trackRenderer?.getTrackObject(trackUid);
   }
 
   getTrackRenderer(viewUid) {
-    return this.tiledPlots[viewUid].trackRenderer;
+    return this.tiledPlots[viewUid]?.trackRenderer;
   }
 
   UNSAFE_componentWillReceiveProps(newProps) {
@@ -985,12 +991,6 @@ class HiGlassComponent extends React.Component {
     this.resizeHandler();
   }
 
-  onBreakpointChange(breakpoint) {
-    this.setState({
-      currentBreakpoint: breakpoint,
-    });
-  }
-
   handleOverlayMouseEnter(uid) {
     this.setState({
       mouseOverOverlayUid: uid,
@@ -1316,7 +1316,7 @@ class HiGlassComponent extends React.Component {
           ) > epsilon;
 
         const hasBrushMoved =
-          sourceTrack.options &&
+          sourceTrack?.options &&
           lockedTrack.options &&
           typeof sourceTrack.options.scaleStartPercent !== 'undefined' &&
           typeof sourceTrack.options.scaleEndPercent !== 'undefined' &&
@@ -4196,6 +4196,7 @@ class HiGlassComponent extends React.Component {
   }
 
   triggerViewChange() {
+    if (!this.mounted) return;
     const viewsString = this.getViewsAsString();
     this.viewChangeListener.forEach((callback) => callback(viewsString));
   }
@@ -5317,8 +5318,29 @@ class HiGlassComponent extends React.Component {
             />
           ) : null;
 
+        // Constrain the grid item child to the expected pixel height
+        // derived from view.layout.h. react-grid-layout v2 syncs its
+        // internal layout state via useEffect (async), so after a layout
+        // change (e.g. track removal) the grid item's DOM dimensions can
+        // be stale (too large). maxHeight ensures TiledPlot.measureSize()
+        // reads the correct (new) height even before the grid re-syncs.
+        const marginY = this.isEditable() ? 10 : 0;
+        const expectedPixelHeight = view.layout
+          ? Math.round(
+              this.state.rowHeight * view.layout.h +
+                Math.max(0, view.layout.h - 1) * marginY,
+            )
+          : undefined;
+
         return (
-          <div key={view.uid}>
+          <div
+            key={view.uid}
+            style={
+              expectedPixelHeight !== undefined
+                ? { maxHeight: expectedPixelHeight, overflow: 'hidden' }
+                : undefined
+            }
+          >
             <div
               ref={(c) => {
                 this.tiledAreasDivs[view.uid] = c;
@@ -5360,34 +5382,30 @@ class HiGlassComponent extends React.Component {
 
     const gridLayout = (
       <ReactGridLayout
-        // Reserved props
-        ref={(c) => {
-          this.gridLayout = c;
+        gridConfig={{
+          cols: 12,
+          rowHeight: this.state.rowHeight,
+          // for some reason, this becomes 40 within the react-grid component
+          // (try resizing the component to see how much the height changes)
+          // Programming by coincidence FTW :-/
+          margin: this.isEditable() ? [10, 10] : [0, 0],
+          containerPadding: [containerPaddingX, containerPaddingY],
+        }}
+        dragConfig={{
+          enabled: this.isEditable(),
+          handle: `.${stylesMTHeader['multitrack-header-grabber']}`,
+        }}
+        resizeConfig={{
+          enabled: this.isEditable(),
         }}
-        // Custom props
-        cols={12}
-        containerPadding={[containerPaddingX, containerPaddingY]}
-        draggableHandle={`.${stylesMTHeader['multitrack-header-grabber']}`}
-        isDraggable={this.isEditable()}
-        isResizable={this.isEditable()}
+        compactor={getCompactor(
+          this.state.viewConfig.compactLayout === false ? null : 'vertical',
+        )}
         layout={layouts}
-        margin={this.isEditable() ? [10, 10] : [0, 0]}
-        measureBeforeMount={false}
-        onBreakpointChange={this.onBreakpointChange.bind(this)}
         onDragStart={this.handleDragStart.bind(this)}
         onDragStop={this.handleDragStop.bind(this)}
         onLayoutChange={this.handleLayoutChange.bind(this)}
         onResize={this.resizeHandler.bind(this)}
-        rowHeight={this.state.rowHeight}
-        // for some reason, this becomes 40 within the react-grid component
-        // (try resizing the component to see how much the height changes)
-        // Programming by coincidence FTW :-/
-        // WidthProvider option
-        // I like to have it animate on mount. If you don't, delete
-        // `useCSSTransforms` (it's default `true`)
-        // and set `measureBeforeMount={true}`.
-        useCSSTransforms={this.mounted}
-        verticalCompact={this.state.viewConfig.compactLayout}
         width={this.state.width}
       >
         {this.tiledAreas}

package/app/scripts/HorizontalItem.jsx

@@ -1,30 +1,59 @@
 // @ts-nocheck
+
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import React from 'react';
-import { SortableElement } from 'react-sortable-hoc';
 
 import HorizontalTrack from './HorizontalTrack';
 
-const HorizontalItem = SortableElement((props) => {
+function HorizontalItem(props) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: props.uid });
+
+  const adjustedTransform = transform ? { ...transform, x: 0 } : transform;
+
+  const style = {
+    transform: CSS.Transform.toString(adjustedTransform),
+    transition,
+    ...(isDragging
+      ? {
+          zIndex: 10,
+          background: 'rgba(0, 0, 0, 0.1)',
+          border: '2px dashed rgba(0, 0, 0, 0.3)',
+          borderRadius: 4,
+        }
+      : {}),
+  };
+
   return (
-    <HorizontalTrack
-      className={props.className}
-      editable={props.editable}
-      handleConfigTrack={props.handleConfigTrack}
-      handleResizeTrack={props.handleResizeTrack}
-      height={props.height}
-      isCollapsed={props.isCollapsed}
-      item={props.item}
-      onAddSeries={props.onAddSeries}
-      onCollapseTrack={props.onCollapseTrack}
-      onExpandTrack={props.onExpandTrack}
-      onCloseTrack={props.onCloseTrack}
-      onCloseTrackMenuOpened={props.onCloseTrackMenuOpened}
-      onConfigTrackMenuOpened={props.onConfigTrackMenuOpened}
-      resizeHandles={props.resizeHandles}
-      uid={props.uid}
-      width={props.width}
-    />
+    <div ref={setNodeRef} style={style}>
+      <HorizontalTrack
+        className={props.className}
+        dragHandleProps={{ ...attributes, ...listeners }}
+        editable={props.editable}
+        handleConfigTrack={props.handleConfigTrack}
+        handleResizeTrack={props.handleResizeTrack}
+        height={props.height}
+        isCollapsed={props.isCollapsed}
+        item={props.item}
+        onAddSeries={props.onAddSeries}
+        onCollapseTrack={props.onCollapseTrack}
+        onExpandTrack={props.onExpandTrack}
+        onCloseTrack={props.onCloseTrack}
+        onCloseTrackMenuOpened={props.onCloseTrackMenuOpened}
+        onConfigTrackMenuOpened={props.onConfigTrackMenuOpened}
+        resizeHandles={props.resizeHandles}
+        uid={props.uid}
+        width={props.width}
+      />
+    </div>
   );
-});
+}
 
 export default HorizontalItem;

package/app/scripts/HorizontalTrack.jsx

@@ -17,6 +17,7 @@ class HorizontalTrack extends MoveableTrack {
         // center.
         expandCollapseAvailable={true}
         configMenuVisible={this.props.item.configMenuVisible}
+        dragHandleProps={this.props.dragHandleProps}
         imgStyleAdd={STYLES}
         imgStyleClose={STYLES}
         imgStyleMove={STYLES}

package/app/scripts/ListWrapper.jsx

@@ -1,8 +1,8 @@
 // @ts-nocheck
 
+import { arrayMove } from '@dnd-kit/sortable';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { arrayMove } from 'react-sortable-hoc';
 
 class ListWrapper extends React.Component {
   constructor({ items }) {
@@ -19,8 +19,7 @@ class ListWrapper extends React.Component {
     });
   }
 
-  onSortStart({ node, index, collection }, e) {
-    e.stopImmediatePropagation();
+  onSortStart({ index }) {
     const { onSortStart } = this.props;
     this.setState({ isSorting: true });
 
@@ -29,9 +28,6 @@ class ListWrapper extends React.Component {
     }
 
     this.sortingIndex = index;
-
-    this.sortStartTop = e.offsetTop;
-    this.sortStartLeft = e.offsetLeft;
   }
 
   onSortMove() {}
@@ -39,14 +35,15 @@ class ListWrapper extends React.Component {
   onSortEnd({ oldIndex, newIndex }) {
     const { onSortEnd } = this.props;
     const { items } = this.state;
+    const sortedItems = arrayMove(items, oldIndex, newIndex);
 
     this.setState({
-      items: arrayMove(items, oldIndex, newIndex),
+      items: sortedItems,
       isSorting: false,
     });
 
     if (onSortEnd) {
-      onSortEnd(this.state.items);
+      onSortEnd(sortedItems);
     }
 
     this.sortingIndex = null;
@@ -63,15 +60,7 @@ class ListWrapper extends React.Component {
       onSortMove: this.onSortMove.bind(this),
     };
 
-    return (
-      <Component
-        {...this.props}
-        {...props}
-        ref={(element) => {
-          this.ref = element;
-        }}
-      />
-    );
+    return <Component {...this.props} {...props} />;
   }
 }
 

package/app/scripts/Modal.jsx

@@ -9,42 +9,43 @@ import withModal from './hocs/with-modal';
 
 import classes from '../styles/Modal.module.scss';
 
-function Modal(props) {
+function Modal({
+  closeButton = true,
+  hide = false,
+  maxHeight = false,
+  modal,
+  onClose,
+  children,
+}) {
   const handleClose = () => {
-    props.modal.close();
-    if (props.onClose) props.onClose();
+    modal.close();
+    if (onClose) onClose();
   };
 
   return (
     <div
       className={clsx(classes['modal-background'], {
-        [classes['modal-hide']]: props.hide,
+        [classes['modal-hide']]: hide,
       })}
     >
       <div className={classes['modal-wrap']}>
         <div
           className={clsx(classes['modal-window'], {
-            [classes['modal-window-max-height']]: props.maxHeight,
+            [classes['modal-window-max-height']]: maxHeight,
           })}
         >
-          {props.closeButton && (
+          {closeButton && (
             <Button onClick={handleClose}>
               <Cross />
             </Button>
           )}
-          <div className={classes['modal-content']}>{props.children}</div>
+          <div className={classes['modal-content']}>{children}</div>
         </div>
       </div>
     </div>
   );
 }
 
-Modal.defaultProps = {
-  closeButton: true,
-  hide: false,
-  maxHeight: false,
-};
-
 Modal.propTypes = {
   children: PropTypes.element.isRequired,
   closeButton: PropTypes.bool,