Tidying up naming

extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx

@@ -23,7 +23,7 @@ function PanelStudyBrowserTracking({
   // Tabs --> Studies --> DisplaySets --> Thumbnails
   const [{ StudyInstanceUIDs }, dispatchImageViewer] = useImageViewer();
   const [
-    { activeViewportIndex, viewports, currentDisplaySetData },
+    { activeViewportIndex, viewports },
     viewportGridService,
   ] = useViewportGrid();
   const [
@@ -39,15 +39,15 @@ function PanelStudyBrowserTracking({
   const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState({});
   const [jumpToDisplaySet, setJumpToDisplaySet] = useState(null);
 
-  const onClickThumbnailHandler = displaySetInstanceUID => {
+  const onDoubleClickThumbnailHandler = displaySetInstanceUID => {
     viewportGridService.setDisplaysetForViewport({
       viewportIndex: activeViewportIndex,
       displaySetInstanceUID,
     });
   };
 
-  const currentDisplaySetInstanceUID =
+  const activeDisplaySetInstanceUID =
-    currentDisplaySetData.displaySetInstanceUID || '';
+    viewports[activeViewportIndex]?.displaySetInstanceUID;
 
   // TODO: Should this be somewhere else? Feels more like a mode "lifecycle" setup/destroy?
   useEffect(() => {
@@ -300,8 +300,9 @@ function PanelStudyBrowserTracking({
           SeriesInstanceUID: displaySet.SeriesInstanceUID,
         });
       }}
-      onClickThumbnail={onClickThumbnailHandler}
+      onClickThumbnail={() => {}}
-      currentDisplaySetInstanceUID={currentDisplaySetInstanceUID}
+      onDoubleClickThumbnail={onDoubleClickThumbnailHandler}
+      activeDisplaySetInstanceUID={activeDisplaySetInstanceUID}
     />
   );
 }

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

@@ -25,8 +25,9 @@ const StudyBrowser = ({
   onClickTab,
   onClickStudy,
   onClickThumbnail,
+  onDoubleClickThumbnail,
   onClickUntrack,
-  currentDisplaySetInstanceUID,
+  activeDisplaySetInstanceUID,
 }) => {
   const getTabContent = () => {
     const tabData = tabs.find(tab => tab.name === activeTabName);
@@ -57,8 +58,9 @@ const StudyBrowser = ({
             {isExpanded && displaySets && (
               <ThumbnailList
                 thumbnails={displaySets}
-                currentDisplaySetInstanceUID={currentDisplaySetInstanceUID}
+                activeDisplaySetInstanceUID={activeDisplaySetInstanceUID}
                 onThumbnailClick={onClickThumbnail}
+                onThumbnailDoubleClick={onDoubleClickThumbnail}
                 onClickUntrack={onClickUntrack}
               />
             )}
@@ -108,10 +110,11 @@ StudyBrowser.propTypes = {
   onClickTab: PropTypes.func.isRequired,
   onClickStudy: PropTypes.func,
   onClickThumbnail: PropTypes.func,
+  onDoubleClickThumbnail: PropTypes.func,
   onClickUntrack: PropTypes.func,
   activeTabName: PropTypes.string.isRequired,
   expandedStudyInstanceUIDs: PropTypes.arrayOf(PropTypes.string).isRequired,
-  currentDisplaySetInstanceUID: PropTypes.string.isRequired,
+  activeDisplaySetInstanceUID: PropTypes.string,
   tabs: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string.isRequired,
@@ -164,6 +167,7 @@ StudyBrowser.defaultProps = {
   onClickTab: noop,
   onClickStudy: noop,
   onClickThumbnail: noop,
+  onDoubleClickThumbnail: noop,
   onClickUntrack: noop,
 };
 

platform/ui/src/components/Thumbnail/Thumbnail.jsx

@@ -1,8 +1,7 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useDrag } from 'react-dnd';
-//
 import { Icon } from '@ohif/ui';
 import blurHandlerListener from '../../utils/blurHandlerListener';
 
@@ -20,6 +19,7 @@ const Thumbnail = ({
   dragData,
   isActive,
   onClick,
+  onDoubleClick,
 }) => {
   // TODO: We should wrap our thumbnail to create a "DraggableThumbnail", as
   // this will still allow for "drag", even if there is no drop target for the
@@ -42,7 +42,8 @@ const Thumbnail = ({
         'flex flex-col flex-1 px-3 mb-8 cursor-pointer outline-none group'
       )}
       id={`thumbnail-${displaySetInstanceUID}`}
-      onDoubleClick={onClick}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
       role="button"
       tabIndex="0"
     >
@@ -101,6 +102,7 @@ Thumbnail.propTypes = {
   numInstances: PropTypes.number.isRequired,
   isActive: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
+  onDoubleClick: PropTypes.func.isRequired,
 };
 
 Thumbnail.defaultProps = {

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

@@ -5,8 +5,9 @@ import { Thumbnail, ThumbnailNoImage, ThumbnailTracked } from '@ohif/ui';
 
 const ThumbnailList = ({
   thumbnails,
-  currentDisplaySetInstanceUID,
+  activeDisplaySetInstanceUID,
   onThumbnailClick,
+  onThumbnailDoubleClick,
   onClickUntrack,
 }) => {
   return (
@@ -27,7 +28,7 @@ const ThumbnailList = ({
           imageAltText,
         }) => {
           const isActive =
-            currentDisplaySetInstanceUID === displaySetInstanceUID;
+            activeDisplaySetInstanceUID === displaySetInstanceUID;
 
           switch (componentType) {
             case 'thumbnail':
@@ -44,6 +45,9 @@ const ThumbnailList = ({
                   viewportIdentificator={viewportIdentificator}
                   isActive={isActive}
                   onClick={() => onThumbnailClick(displaySetInstanceUID)}
+                  onDoubleClick={() =>
+                    onThumbnailDoubleClick(displaySetInstanceUID)
+                  }
                 />
               );
             case 'thumbnailTracked':
@@ -61,6 +65,9 @@ const ThumbnailList = ({
                   isTracked={isTracked}
                   isActive={isActive}
                   onClick={() => onThumbnailClick(displaySetInstanceUID)}
+                  onDoubleClick={() =>
+                    onThumbnailDoubleClick(displaySetInstanceUID)
+                  }
                   onClickUntrack={() => onClickUntrack(displaySetInstanceUID)}
                 />
               );
@@ -75,6 +82,9 @@ const ThumbnailList = ({
                   seriesDate={seriesDate}
                   description={description}
                   onClick={() => onThumbnailClick(displaySetInstanceUID)}
+                  onDoubleClick={() =>
+                    onThumbnailDoubleClick(displaySetInstanceUID)
+                  }
                 />
               );
             default:
@@ -116,8 +126,9 @@ ThumbnailList.propTypes = {
       }),
     })
   ),
-  currentDisplaySetInstanceUID: PropTypes.string,
+  activeDisplaySetInstanceUID: PropTypes.string,
-  onThumbnailClick: PropTypes.func,
+  onThumbnailClick: PropTypes.func.isRequired,
+  onThumbnailDoubleClick: PropTypes.func.isRequired,
   onClickUntrack: PropTypes.func.isRequired,
 };
 

platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx

@@ -1,9 +1,7 @@
 import React, { useRef } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import { useDrag } from 'react-dnd';
-
 import { Icon } from '@ohif/ui';
 import blurHandlerListener from '../../utils/blurHandlerListener';
 
@@ -13,6 +11,7 @@ const ThumbnailNoImage = ({
   seriesDate,
   modality,
   onClick,
+  onDoubleClick,
   dragData,
   isActive,
 }) => {
@@ -34,7 +33,8 @@ const ThumbnailNoImage = ({
         isActive ? 'border-2 border-primary-light' : 'border'
       )}
       id={`thumbnail-${displaySetInstanceUID}`}
-      onDoubleClick={onClick}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
       role="button"
       tabIndex="0"
     >
@@ -73,6 +73,7 @@ ThumbnailNoImage.propTypes = {
   modality: PropTypes.string.isRequired,
   seriesDate: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
+  onDoubleClick: PropTypes.func.isRequired,
   isActive: PropTypes.bool.isRequired,
 };
 

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

@@ -14,6 +14,7 @@ const ThumbnailTracked = ({
   numInstances,
   dragData,
   onClick,
+  onDoubleClick,
   onClickUntrack,
   viewportIdentificator,
   isTracked,
@@ -72,6 +73,7 @@ const ThumbnailTracked = ({
         )}
       </div>
       <Thumbnail
+         displaySetInstanceUID={displaySetInstanceUID}
         imageSrc={imageSrc}
         imageAltText={imageAltText}
         dragData={dragData}
@@ -80,6 +82,7 @@ const ThumbnailTracked = ({
         numInstances={numInstances}
         isActive={isActive}
         onClick={onClick}
+        onDoubleClick={onDoubleClick}
       />
     </div>
   );
@@ -97,6 +100,7 @@ ThumbnailTracked.propTypes = {
     /** Must match the "type" a dropTarget expects */
     type: PropTypes.string.isRequired,
   }),
+  displaySetInstanceUID: PropTypes.string.isRequired,
   className: PropTypes.string,
   imageSrc: PropTypes.string,
   imageAltText: PropTypes.string,
@@ -104,6 +108,7 @@ ThumbnailTracked.propTypes = {
   seriesNumber: PropTypes.number.isRequired,
   numInstances: PropTypes.number.isRequired,
   onClick: PropTypes.func.isRequired,
+  onDoubleClick: PropTypes.func.isRequired,
   onClickUntrack: PropTypes.func.isRequired,
   viewportIdentificator: PropTypes.string,
   isTracked: PropTypes.bool,

platform/ui/src/contextProviders/ViewportGridProvider.jsx

@@ -10,9 +10,12 @@ import PropTypes from 'prop-types';
 const DEFAULT_STATE = {
   numRows: 1,
   numCols: 1,
-  viewports: [],
+  viewports: [
+    // {
+    //    displaySetInstanceUID: string,
+    // }
+  ],
   activeViewportIndex: 0,
-  currentDisplaySetData: {},
 };
 
 export const ViewportGridContext = createContext(DEFAULT_STATE);
@@ -21,16 +24,15 @@ export function ViewportGridProvider({ children, service }) {
   const viewportGridReducer = (state, action) => {
     switch (action.type) {
       case 'SET_ACTIVE_VIEWPORT_INDEX': {
-        const activeViewportIndex = action.payload;
+        return { ...state, ...{ activeViewportIndex: action.payload } };
-        const currentDisplaySetData = state.viewports[activeViewportIndex];
-        return { ...state, ...{ activeViewportIndex, currentDisplaySetData } };
       }
       case 'SET_DISPLAYSET_FOR_VIEWPORT': {
         const { viewportIndex, displaySetInstanceUID } = action.payload;
         const viewports = state.viewports.slice();
-        const currentDisplaySetData = { displaySetInstanceUID };
+
         viewports[viewportIndex] = { displaySetInstanceUID };
-        return { ...state, ...{ viewports, currentDisplaySetData } };
+
+        return { ...state, ...{ viewports } };
       }
       case 'SET_LAYOUT': {
         const { numCols, numRows } = action.payload;