WIP DisplaySetService

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

@@ -22,8 +22,16 @@ const getTrackedSeries = displaySets => {
   return trackedSeries;
 };
 
-const StudyBrowser = ({ tabs, activeTabName, onSetTabActive, onClickStudy, onClickThumbnail }) => {
-  const [tabActive, setTabActive] = useState(activeTabName || getInitialActiveTab(tabs));
+const StudyBrowser = ({
+  tabs,
+  activeTabName,
+  onSetTabActive,
+  onClickStudy,
+  onClickThumbnail,
+}) => {
+  const [tabActive, setTabActive] = useState(
+    activeTabName || getInitialActiveTab(tabs)
+  );
   const [studyActive, setStudyActive] = useState(null);
   const [thumbnailActive, setThumbnailActive] = useState(null);
 
@@ -66,6 +74,7 @@ const StudyBrowser = ({ tabs, activeTabName, onSetTabActive, onClickStudy, onCli
             />
             {isActive && displaySets && (
               <ThumbnailList
+                dragData={{ type: 'displayset' }}
                 thumbnails={displaySets}
                 thumbnailActive={thumbnailActive}
                 onThumbnailClick={thumbnailId => {
@@ -110,7 +119,7 @@ const StudyBrowser = ({ tabs, activeTabName, onSetTabActive, onClickStudy, onCli
                   setStudyActive(null);
 
                   if (onSetTabActive) {
-                    onSetTabActive(name)
+                    onSetTabActive(name);
                   }
                 }}
               >
@@ -141,6 +150,21 @@ 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,