Drag and drop w/ dragSource + dragTarget w/o errors

extensions/default/src/Panels/PanelStudyBrowser.jsx

@@ -57,6 +57,10 @@ function PanelStudyBrowser({
         StudyInstanceUID: ds.StudyInstanceUID,
         componentType: 'thumbnail', // 'thumbnailNoImage' || 'thumbnailTracked' // TODO: PUT THIS SOMEWHERE ELSE
         imageSrc,
+        dragData: {
+          type: 'displayset',
+          // .. Any other data to pass
+        },
       };
     });
 

platform/ui/src/components/StudyBrowser/StudyBrowser.jsx

@@ -147,21 +147,6 @@ StudyBrowser.propTypes = {
           numInstances: PropTypes.number,
           modalities: PropTypes.string,
           description: PropTypes.string,
-          // These apply to each thumbnail; we should set Thumbnails
-          // As children and kill the <ThumbnailList> component to
-          // make it easier to set this prop.
-          // Do much less nesting so we have a bit more control.
-          /**
-           * Data the thumbnail should expose to a receiving drop target. Use a matching
-           * `dragData.type` to identify which targets can receive this draggable item.
-           * If this is not set, drag-n-drop will be disabled for this thumbnail.
-           *
-           * Ref: https://react-dnd.github.io/react-dnd/docs/api/use-drag#specification-object-members
-           */
-          dragData: PropTypes.shape({
-            /** Must match the "type" a dropTarget expects */
-            type: PropTypes.string.isRequired,
-          }),
           displaySets: PropTypes.arrayOf(
             PropTypes.shape({
               displaySetInstanceUID: PropTypes.string.isRequired,
@@ -178,6 +163,17 @@ StudyBrowser.propTypes = {
               ]).isRequired,
               isTracked: PropTypes.bool,
               viewportIdentificator: PropTypes.string,
+              /**
+               * Data the thumbnail should expose to a receiving drop target. Use a matching
+               * `dragData.type` to identify which targets can receive this draggable item.
+               * If this is not set, drag-n-drop will be disabled for this thumbnail.
+               *
+               * Ref: https://react-dnd.github.io/react-dnd/docs/api/use-drag#specification-object-members
+               */
+              dragData: PropTypes.shape({
+                /** Must match the "type" a dropTarget expects */
+                type: PropTypes.string.isRequired,
+              }),
             })
           ),
         })

platform/ui/src/components/ThumbnailList/ThumbnailList.jsx

@@ -4,17 +4,17 @@ import PropTypes from 'prop-types';
 import { Thumbnail, ThumbnailNoImage, ThumbnailTracked } from '@ohif/ui';
 
 const ThumbnailList = ({
-  dragData,
   thumbnails,
   thumbnailActive,
   onThumbnailClick,
 }) => {
   return (
-    <div className="bg-black py-3">
+    <div className="py-3 bg-black">
       {thumbnails.map(
         ({
           displaySetInstanceUID,
           description,
+          dragData,
           seriesNumber,
           numInstances,
           modality,
@@ -80,17 +80,6 @@ const ThumbnailList = ({
 };
 
 ThumbnailList.propTypes = {
-  /**
-   * Data the thumbnail should expose to a receiving drop target. Use a matching
-   * `dragData.type` to identify which targets can receive this draggable item.
-   * If this is not set, drag-n-drop will be disabled for this thumbnail.
-   *
-   * Ref: https://react-dnd.github.io/react-dnd/docs/api/use-drag#specification-object-members
-   */
-  dragData: PropTypes.shape({
-    /** Must match the "type" a dropTarget expects */
-    type: PropTypes.string.isRequired,
-  }),
   thumbnails: PropTypes.arrayOf(
     PropTypes.shape({
       displaySetInstanceUID: PropTypes.string.isRequired,
@@ -107,6 +96,17 @@ ThumbnailList.propTypes = {
       ]).isRequired,
       viewportIdentificator: PropTypes.string,
       isTracked: PropTypes.bool,
+      /**
+       * Data the thumbnail should expose to a receiving drop target. Use a matching
+       * `dragData.type` to identify which targets can receive this draggable item.
+       * If this is not set, drag-n-drop will be disabled for this thumbnail.
+       *
+       * Ref: https://react-dnd.github.io/react-dnd/docs/api/use-drag#specification-object-members
+       */
+      dragData: PropTypes.shape({
+        /** Must match the "type" a dropTarget expects */
+        type: PropTypes.string.isRequired,
+      }),
     })
   ),
   thumbnailActive: PropTypes.string,

platform/ui/src/components/ViewportPane/ViewportPane.jsx

@@ -13,7 +13,7 @@ function ViewportPane({
   onDrop,
   acceptDropsFor,
 }) {
-  /*const [{ isHovered, isHighlighted }, drop] = useDrop({
+  const [{ isHovered, isHighlighted }, drop] = useDrop({
     accept: acceptDropsFor,
     // TODO: pass in as prop?
     drop: (droppedItem, monitor) => {
@@ -29,11 +29,11 @@ function ViewportPane({
       isHighlighted: monitor.canDrop(),
       isHovered: monitor.isOver(),
     }),
-  });*/
+  });
 
-  //       ref={drop}
   return (
     <div
+      ref={drop}
       className={classnames(
         'rounded-lg hover:border-primary-light transition duration-300 outline-none overflow-hidden',
         {

platform/viewer/src/components/ViewportGrid.jsx

@@ -76,7 +76,7 @@ function ViewerViewportGrid(props) {
               console.warn('DROPPED ITEM:', droppedItem);
             }}
             isActive={activeViewportIndex === viewportIndex}
-          ></ViewportPane>
+          />
         );
       }
 
@@ -101,6 +101,7 @@ function ViewerViewportGrid(props) {
         <ViewportPane
           key={viewportIndex}
           className="m-1"
+          acceptDropsFor="displayset"
           onDrop={() => {
             /* setDisplaySet for Viewport */
           }}