higlass 2.2.3 → 2.3.0

package/app/scripts/PopupMenu.jsx

@@ -9,6 +9,7 @@ class PopupMenu extends React.Component {
   constructor(props) {
     super(props);
 
+    this.popup = null;
     this.clickHandlerBound = this.clickHandler.bind(this);
     this.contextMenuHandlerBound = this.contextMenuHandler.bind(this);
     this.resizeHandlerBound = this.resizeHandler.bind(this);
@@ -30,11 +31,8 @@ class PopupMenu extends React.Component {
     );
     window.addEventListener('resize', this.resizeHandlerBound, true);
 
-    this._renderLayer();
-  }
-
-  componentDidUpdate() {
-    this._renderLayer();
+    // Re-render now that this.popup is ready for the portal
+    this.forceUpdate();
   }
 
   componentWillUnmount() {
@@ -45,14 +43,10 @@ class PopupMenu extends React.Component {
       true,
     );
     window.removeEventListener('resize', this.resizeHandlerBound, true);
-    ReactDOM.unmountComponentAtNode(this.popup);
+    // React automatically cleans up the portal contents
     document.body.removeChild(this.popup);
   }
 
-  _renderLayer() {
-    ReactDOM.render(this.props.children, this.popup);
-  }
-
   clickHandler(event) {
     if (!this.popup.contains(event.target)) {
       if (this.props.onMenuClosed) this.props.onMenuClosed(event);
@@ -70,8 +64,8 @@ class PopupMenu extends React.Component {
   }
 
   render() {
-    // Render a placeholder
-    return <div />;
+    if (!this.popup) return null;
+    return ReactDOM.createPortal(this.props.children, this.popup);
   }
 }
 

package/app/scripts/SortableList.jsx

@@ -1,71 +1,126 @@
 // @ts-nocheck
 
+import {
+  DndContext,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  horizontalListSortingStrategy,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
 import React from 'react';
-import { SortableContainer } from 'react-sortable-hoc';
 
-const SortableList = SortableContainer(
-  ({
-    className,
-    items,
-    itemClass,
-    itemControlAlignLeft,
-    sortingIndex,
-    useDragHandle,
-    sortableHandlers,
-    height,
-    width,
-    onCloseTrack,
-    onCollapseTrack,
-    onExpandTrack,
-    onCloseTrackMenuOpened,
-    onConfigTrackMenuOpened,
-    onAddSeries,
-    handleConfigTrack,
-    editable,
-    itemReactClass,
-    handleResizeTrack,
-    resizeHandles,
-  }) => {
-    const itemElements = items.map((item, index) =>
-      React.createElement(itemReactClass, {
-        key: `sci-${item.uid}`,
-        className: itemClass,
-        controlAlignLeft: itemControlAlignLeft,
-        sortingIndex,
-        index,
-        uid: item.uid,
-        height: item.height,
-        width: item.width,
-        isCollapsed: item.isCollapsed,
-        item,
-        useDragHandle,
-        onCloseTrack,
-        onCollapseTrack,
-        onExpandTrack,
-        onCloseTrackMenuOpened,
-        onConfigTrackMenuOpened,
-        onAddSeries,
-        handleConfigTrack,
-        editable,
-        handleResizeTrack,
-        resizeHandles,
-      }),
-    );
+function SortableList({
+  className,
+  items,
+  itemClass,
+  itemControlAlignLeft,
+  sortingIndex,
+  useDragHandle,
+  sortableHandlers,
+  height,
+  width,
+  onCloseTrack,
+  onCollapseTrack,
+  onExpandTrack,
+  onCloseTrackMenuOpened,
+  onConfigTrackMenuOpened,
+  onAddSeries,
+  handleConfigTrack,
+  editable,
+  itemReactClass,
+  handleResizeTrack,
+  resizeHandles,
+  onSortEnd,
+  onSortStart,
+  onSortMove,
+  axis,
+}) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 5 },
+    }),
+  );
 
-    return (
-      <div
-        className={className}
-        style={{
-          height,
-          width,
-          background: 'transparent',
-        }}
-        {...sortableHandlers}
-      >
-        {itemElements}
-      </div>
-    );
-  },
-);
+  const handleDragStart = (event) => {
+    const { active } = event;
+    const index = items.findIndex((item) => item.uid === active.id);
+    if (onSortStart) {
+      onSortStart({ index });
+    }
+  };
+
+  const handleDragOver = (event) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+
+    const oldIndex = items.findIndex((item) => item.uid === active.id);
+    const newIndex = items.findIndex((item) => item.uid === over.id);
+
+    if (oldIndex !== -1 && newIndex !== -1) {
+      onSortEnd({ oldIndex, newIndex });
+    }
+  };
+
+  const isHorizontalAxis = axis === 'x';
+  const strategy = isHorizontalAxis
+    ? horizontalListSortingStrategy
+    : verticalListSortingStrategy;
+
+  const itemIds = items.map((item) => item.uid);
+
+  const itemElements = items.map((item, index) =>
+    React.createElement(itemReactClass, {
+      key: `sci-${item.uid}`,
+      className: itemClass,
+      controlAlignLeft: itemControlAlignLeft,
+      sortingIndex,
+      index,
+      uid: item.uid,
+      height: item.height,
+      width: item.width,
+      isCollapsed: item.isCollapsed,
+      item,
+      useDragHandle,
+      onCloseTrack,
+      onCollapseTrack,
+      onExpandTrack,
+      onCloseTrackMenuOpened,
+      onConfigTrackMenuOpened,
+      onAddSeries,
+      handleConfigTrack,
+      editable,
+      handleResizeTrack,
+      resizeHandles,
+    }),
+  );
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragOver={handleDragOver}
+      onDragEnd={() => {}}
+    >
+      <SortableContext items={itemIds} strategy={strategy}>
+        <div
+          className={className}
+          style={{
+            height,
+            width,
+            background: 'transparent',
+          }}
+        >
+          {itemElements}
+        </div>
+      </SortableContext>
+    </DndContext>
+  );
+}
 
 export default SortableList;

package/app/scripts/TrackArea.jsx

@@ -1,8 +1,6 @@
 // @ts-nocheck
 import PropTypes from 'prop-types';
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { SortableHandle } from 'react-sortable-hoc';
 
 class TrackArea extends React.Component {
   constructor(props) {
@@ -36,24 +34,23 @@ class TrackArea extends React.Component {
   }
 
   getControls() {
-    let Handle = null;
+    const { dragHandleProps } = this.props;
 
-    if (this.moveable) {
-      Handle = SortableHandle(() => (
-        <svg
-          className="no-zoom"
-          height="10px"
-          onClick={() => {}}
-          style={this.getMoveImgStyle()}
-          width="10px"
-        >
-          <title>Move</title>
-          <use xlinkHref="#move" />
-        </svg>
-      ));
-    } else {
-      Handle = SortableHandle(() => <div />);
-    }
+    const handle = this.moveable ? (
+      <svg
+        className="no-zoom"
+        height="10px"
+        onClick={() => {}}
+        style={this.getMoveImgStyle()}
+        width="10px"
+        {...dragHandleProps}
+      >
+        <title>Move</title>
+        <use xlinkHref="#move" />
+      </svg>
+    ) : (
+      <div />
+    );
 
     return (
       <div
@@ -69,7 +66,7 @@ class TrackArea extends React.Component {
           border: '1px solid #dddddd',
         }}
       >
-        <Handle />
+        {handle}
 
         <svg
           ref={(c) => {
@@ -78,8 +75,7 @@ class TrackArea extends React.Component {
           className="no-zoom"
           height="10px"
           onClick={() => {
-            const imgDom = ReactDOM.findDOMNode(this.imgConfig);
-            const bbox = imgDom.getBoundingClientRect();
+            const bbox = this.imgConfig.getBoundingClientRect();
             this.props.onConfigTrackMenuOpened(this.props.uid, bbox);
           }}
           style={this.getSettingsImgStyle()}
@@ -110,8 +106,7 @@ class TrackArea extends React.Component {
           className="no-zoom"
           height="10px"
           onClick={() => {
-            const imgDom = ReactDOM.findDOMNode(this.imgClose);
-            const bbox = imgDom.getBoundingClientRect();
+            const bbox = this.imgClose.getBoundingClientRect();
             this.props.onCloseTrackMenuOpened(this.props.uid, bbox);
           }}
           style={this.getCloseImgStyle()}

package/app/scripts/TrackControl.jsx

@@ -2,7 +2,6 @@
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { SortableHandle } from 'react-sortable-hoc';
 
 import { THEME_DARK } from './configs';
 import withTheme from './hocs/with-theme';
@@ -25,39 +24,29 @@ const getButtonClassName = (props) =>
     [classes['track-control-button-vertical']]: props.isVertical,
   });
 
-let oldProps = null;
-let DragHandle = null;
-
 function TrackControl(props) {
-  // Avoid constant recreating that button when the props didn't change.
-  // Damn React could be a little smarter here...
-  if (
-    !props ||
-    !oldProps ||
-    Object.keys(props).some((key) => oldProps[key] !== props[key])
-  ) {
-    oldProps = props;
-    DragHandle = SortableHandle(() => (
-      <svg
-        className={getButtonClassName(props)}
-        style={{
-          height: '20px',
-          width: '20px',
-          ...props.imgStyleMove,
-        }}
-      >
-        <title>Move track</title>
-        <use xlinkHref="#move" />
-      </svg>
-    ));
-  }
+  const { dragHandleProps } = props;
 
   let imgConfig;
   let imgClose;
 
   return (
     <div className={getClassName(props)}>
-      {props.isMoveable && <DragHandle />}
+      {props.isMoveable && (
+        <svg
+          className={getButtonClassName(props)}
+          draggable={false}
+          style={{
+            height: '20px',
+            width: '20px',
+            ...props.imgStyleMove,
+          }}
+          {...dragHandleProps}
+        >
+          <title>Move track</title>
+          <use xlinkHref="#move" />
+        </svg>
+      )}
 
       {/* Show collapse button */}
       {props.expandCollapseAvailable && !props.isCollapsed && (

package/app/scripts/VerticalItem.jsx

@@ -1,29 +1,60 @@
 // @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 VerticalTrack from './VerticalTrack';
 
-const VerticalItem = SortableElement((props) => (
-  <VerticalTrack
-    className={props.className}
-    controlAlignLeft={props.controlAlignLeft}
-    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}
-  />
-));
+function VerticalItem(props) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: props.uid });
+
+  const adjustedTransform = transform ? { ...transform, y: 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 (
+    <div ref={setNodeRef} style={style}>
+      <VerticalTrack
+        className={props.className}
+        controlAlignLeft={props.controlAlignLeft}
+        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 VerticalItem;

package/app/scripts/VerticalTrack.jsx

@@ -16,6 +16,7 @@ class VerticalTrack extends MoveableTrack {
         // for use. Only available in horizontal and vertical tracks and not
         // center.
         expandCollapseAvailable={true}
+        dragHandleProps={this.props.dragHandleProps}
         imgStyleAdd={STYLES}
         imgStyleClose={STYLES}
         imgStyleMove={STYLES}

package/app/scripts/api.js

@@ -1,10 +1,10 @@
 // @ts-nocheck
 import Ajv from 'ajv';
 import createPubSub from 'pub-sub-es';
-import ReactDOM from 'react-dom';
-
 import schema from '../schema.json';
 
+import { unmountFromContainer } from './utils/react-dom-compat';
+
 import { getTileProxyAuthHeader, setTileProxyAuthHeader } from './services';
 
 import { getTrackObjectFromHGC } from './utils';
@@ -162,8 +162,9 @@ const createApi = function api(context, pubSub) {
        */
       destroy() {
         destroy();
-        if (self.topDivRef.current) {
-          ReactDOM.unmountComponentAtNode(self.topDivRef.current);
+        const container = self.topDivRef.current?.parentNode;
+        if (container) {
+          unmountFromContainer(container);
         }
       },
 

package/app/scripts/hglib.jsx

@@ -1,6 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import HiGlassComponent from './HiGlassComponent';
+import {
+  ensureReady,
+  renderToContainer,
+  unmountFromContainer,
+} from './utils/react-dom-compat';
 
 import HorizontalGeneAnnotationsTrack from './HorizontalGeneAnnotationsTrack';
 // these exports can be used to create new tracks in outside environments (e.g. Observable)
@@ -77,8 +81,10 @@ export { OPTIONS_INFO } from './options-info';
  * @returns {Promise<HiGlassComponent>}
  */
 const launch = async (element, config, options = {}) => {
-  return new Promise((resolve) => {
-    ReactDOM.render(
+  await ensureReady();
+  const hgc = await new Promise((resolve) => {
+    renderToContainer(
+      element,
       <HiGlassComponent
         ref={(/** @type {HiGlassComponent | null} */ ref) => {
           // Wait to resolve until React gives us a ref
@@ -87,9 +93,33 @@ const launch = async (element, config, options = {}) => {
         options={options}
         viewConfig={config}
       />,
-      element,
     );
   });
+
+  // react-grid-layout v2 uses async useEffect for layout synchronization.
+  // Wait until TiledPlots are rendered (trackRenderer is populated) before
+  // returning, so the component is truly ready to use.
+  const viewUids = Object.keys(hgc.state.views);
+  if (viewUids.length > 0) {
+    await /** @type {Promise<void>} */ (
+      new Promise((resolve) => {
+        const start = performance.now();
+        const check = () => {
+          const allReady = viewUids.every(
+            (uid) => hgc.tiledPlots[uid]?.trackRenderer,
+          );
+          if (allReady || performance.now() - start > 5000) {
+            resolve();
+          } else {
+            setTimeout(check, 16);
+          }
+        };
+        check();
+      })
+    );
+  }
+
+  return hgc;
 };
 
 /**

package/app/scripts/test-helpers/test-helpers.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 
 import { mount } from 'enzyme';
 
 import { requestsInFlight } from '../services';
+import { unmountFromContainer } from '../utils/react-dom-compat';
 
 import { getTrackObjectFromHGC, getTrackRenderer } from '../utils';
 
@@ -323,7 +323,7 @@ export const waitForComponentReady = async (div) => {
 export const removeHGComponent = (div) => {
   if (!div) return;
 
-  ReactDOM.unmountComponentAtNode(div);
+  unmountFromContainer(div);
   document.body.removeChild(div);
 };
 

package/app/scripts/utils/get-higlass-components.js

@@ -24,7 +24,7 @@ export const getTrackObjectFromHGC = (hgc, viewUid, trackUid) => {
     newTrackUid = trackUid;
   }
 
-  return hgc.tiledPlots[newViewUid].trackRenderer?.getTrackObject(newTrackUid);
+  return hgc.tiledPlots[newViewUid]?.trackRenderer?.getTrackObject(newTrackUid);
 };
 
 /**
@@ -33,7 +33,7 @@ export const getTrackObjectFromHGC = (hgc, viewUid, trackUid) => {
  * @returns {TrackRenderer | null}
  */
 export const getTrackRenderer = (hgc, viewUid) =>
-  hgc.tiledPlots[viewUid].trackRenderer;
+  hgc.tiledPlots[viewUid]?.trackRenderer;
 
 /**
  * @param {HiGlassComponent} hgc