longitudinal mode to use "tracked" thumbnails

extensions/measurement-tracking/src/Panels/PanelStudyBrowserTracking/PanelStudyBrowser.jsx

@@ -212,7 +212,7 @@ function _mapDisplaySets(displaySets, thumbnailImageSrcMap) {
       date: ds.SeriesDate,
       numInstances: ds.numImageFrames,
       StudyInstanceUID: ds.StudyInstanceUID,
-      componentType: 'thumbnail', // 'thumbnailNoImage' || 'thumbnailTracked' // TODO: PUT THIS SOMEWHERE ELSE
+      componentType: 'thumbnailTracked', // 'thumbnailNoImage' || 'thumbnail' // TODO: PUT THIS SOMEWHERE ELSE
       imageSrc,
       dragData: {
         type: 'displayset',
@@ -223,7 +223,6 @@ function _mapDisplaySets(displaySets, thumbnailImageSrcMap) {
   });
 }
 
-
 /**
  *
  * @param {string[]} primaryStudyInstanceUIDs

extensions/measurement-tracking/src/Viewports/OHIFCornerstoneViewport.js

@@ -155,29 +155,12 @@ class OHIFCornerstoneViewport extends Component {
       });
     }
 
-    const debouncedNewImageHandler = debounce(
-      ({ currentImageIdIndex, sopInstanceUid }) => {
-        const { displaySet } = this.props;
-        const { StudyInstanceUID } = displaySet;
-        if (currentImageIdIndex > 0) {
-          this.props.onNewImage({
-            StudyInstanceUID,
-            SOPInstanceUID: sopInstanceUid,
-            frameIndex: currentImageIdIndex,
-            activeViewportIndex: viewportIndex,
-          });
-        }
-      },
-      700
-    );
-
     return (
       <>
         <CornerstoneViewport
           viewportIndex={viewportIndex}
           imageIds={imageIds}
           imageIdIndex={currentImageIdIndex}
-          onNewImage={debouncedNewImageHandler}
           // TODO: ViewportGrid Context?
           isActive={true} // todo
           isStackPrefetchEnabled={true} // todo

extensions/measurement-tracking/src/getViewportModule.js

@@ -13,19 +13,7 @@ const OHIFCornerstoneViewport = props => {
 };
 
 function getViewportModule({ commandsManager }) {
-  const ExtendedOHIFCornerstoneViewport = props => {
-    const onNewImageHandler = jumpData => {
-      alert('here we are!')
-      commandsManager.runCommand('jumpToImage', jumpData);
-    };
-    return (
-      <OHIFCornerstoneViewport {...props} onNewImage={onNewImageHandler} />
-    );
-  };
-
-  return [
-    { name: 'cornerstone-tracked', component: ExtendedOHIFCornerstoneViewport },
-  ];
-};
+  return [{ name: 'cornerstone-tracked', component: OHIFCornerstoneViewport }];
+}
 
 export default getViewportModule;

modes/longitudinal/src/index.js

@@ -74,12 +74,15 @@ export default function mode({ modeConfiguration }) {
             id: 'org.ohif.default.layoutTemplateModule.viewerLayout',
             props: {
               // named slots
-              leftPanels: ['org.ohif.default.panelModule.seriesList'],
+              leftPanels: [
+                'org.ohif.measurement-tracking.panelModule.seriesList',
+              ],
               // TODO: Should be optional, or required to pass empty array for slots?
               rightPanels: [], // // ['org.ohif.default.panelModule.measure'],
               viewports: [
                 {
-                  namespace: 'org.ohif.measurement-tracking.viewportModule.cornerstone-tracked',
+                  namespace:
+                    'org.ohif.measurement-tracking.viewportModule.cornerstone-tracked',
                   displaySetsToDisplay: [
                     'org.ohif.default.sopClassHandlerModule.stack',
                   ],

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

@@ -43,17 +43,6 @@ const ThumbnailList = ({
                   onClick={() => onThumbnailClick(displaySetInstanceUID)}
                 />
               );
-            case 'thumbnailNoImage':
-              return (
-                <ThumbnailNoImage
-                  key={displaySetInstanceUID}
-                  dragData={dragData}
-                  modality={modality}
-                  seriesDate={seriesDate}
-                  description={description}
-                  onClick={() => onThumbnailClick(displaySetInstanceUID)}
-                />
-              );
             case 'thumbnailTracked':
               return (
                 <ThumbnailTracked
@@ -70,6 +59,17 @@ const ThumbnailList = ({
                   onClick={() => onThumbnailClick(displaySetInstanceUID)}
                 />
               );
+            case 'thumbnailNoImage':
+              return (
+                <ThumbnailNoImage
+                  key={displaySetInstanceUID}
+                  dragData={dragData}
+                  modality={modality}
+                  seriesDate={seriesDate}
+                  description={description}
+                  onClick={() => onThumbnailClick(displaySetInstanceUID)}
+                />
+              );
             default:
               return <></>;
           }

platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx

@@ -11,6 +11,7 @@ const ThumbnailTracked = ({
   description,
   seriesNumber,
   numInstances,
+  dragData,
   onClick,
   viewportIdentificator,
   isTracked,
@@ -25,7 +26,7 @@ const ThumbnailTracked = ({
         className
       )}
     >
-      <div className="flex flex-col flex-2 items-center">
+      <div className="flex flex-col items-center flex-2">
         <div
           className={classnames(
             'flex flex-col items-center justify-start p-2 mb-2 relative cursor-pointer',
@@ -49,14 +50,14 @@ const ThumbnailTracked = ({
                     </span>
                   )}
                 </div>
-                <div className="flex flex-2 items-center justify-center">
+                <div className="flex items-center justify-center flex-2">
                   <Icon name="info-link" className="text-primary-active" />
                 </div>
               </div>
             }
           >
-            <Icon name={trackedIcon} className="text-primary-light mb-2 w-4" />
-            <div className="text-white text-xl leading-tight h-5">
+            <Icon name={trackedIcon} className="w-4 mb-2 text-primary-light" />
+            <div className="h-5 text-xl leading-tight text-white">
               {viewportIdentificator}
             </div>
           </Tooltip>
@@ -64,13 +65,14 @@ const ThumbnailTracked = ({
         {isTracked && (
           <Icon
             name="cancel"
-            className="text-primary-active excludeButton w-4"
+            className="w-4 text-primary-active excludeButton"
           />
         )}
       </div>
       <Thumbnail
         imageSrc={imageSrc}
         imageAltText={imageAltText}
+        dragData={dragData}
         description={description}
         seriesNumber={seriesNumber}
         numInstances={numInstances}
@@ -82,6 +84,17 @@ const ThumbnailTracked = ({
 };
 
 ThumbnailTracked.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,
+  }),
   className: PropTypes.string,
   imageSrc: PropTypes.string,
   imageAltText: PropTypes.string,