fix: OHIF-219 - Viewport Labels should be sequential (#1881)

extensions/dicom-sr/src/OHIFCornerstoneSRViewport.js

@@ -399,10 +399,7 @@ function OHIFCornerstoneSRViewport({
     });
   }
 
-  const label =
-    viewports.length > 1
-      ? _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid]
-      : '';
+  const label = viewports.length > 1 ? _viewportLabels[viewportIndex] : '';
 
   // TODO -> disabled double click for now: onDoubleClick={_onDoubleClick}
 

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 },
+    { activeViewportIndex, viewports, numCols, numRows },
     viewportGridService,
   ] = useViewportGrid();
   const [
@@ -49,6 +49,8 @@ function PanelStudyBrowserTracking({
   const activeDisplaySetInstanceUID =
     viewports[activeViewportIndex]?.displaySetInstanceUID;
 
+  const isSingleViewport = numCols === 1 && numRows === 1;
+
   // TODO: Should this be somewhere else? Feels more like a mode "lifecycle" setup/destroy?
   useEffect(() => {
     const { unsubscribe } = MeasurementService.subscribe(
@@ -133,7 +135,8 @@ function PanelStudyBrowserTracking({
       currentDisplaySets,
       thumbnailImageSrcMap,
       trackedSeries,
-      viewports
+      viewports,
+      isSingleViewport
     );
 
     setDisplaySets(mappedDisplaySets);
@@ -189,7 +192,8 @@ function PanelStudyBrowserTracking({
           changedDisplaySets,
           thumbnailImageSrcMap,
           trackedSeries,
-          viewports
+          viewports,
+          isSingleViewport
         );
 
         setDisplaySets(mappedDisplaySets);
@@ -279,7 +283,7 @@ function PanelStudyBrowserTracking({
       ];
       setExpandedStudyInstanceUIDs(updatedExpandedStudyInstanceUIDs);
     }
-  }, [jumpToDisplaySet]);
+  }, [expandedStudyInstanceUIDs, jumpToDisplaySet, tabs]);
 
   return (
     <StudyBrowser
@@ -355,21 +359,22 @@ function _mapDisplaySets(
   displaySets,
   thumbnailImageSrcMap,
   trackedSeriesInstanceUIDs,
-  viewports // TODO: make array of `displaySetInstanceUIDs`?
+  viewports, // TODO: make array of `displaySetInstanceUIDs`?
+  isSingleViewport
 ) {
   const thumbnailDisplaySets = [];
   const thumbnailNoImageDisplaySets = [];
   displaySets.forEach(ds => {
     const imageSrc = thumbnailImageSrcMap[ds.displaySetInstanceUID];
     const componentType = _getComponentType(ds.Modality);
-    const firstViewportIndexWithMatchingDisplaySetUid = viewports.findIndex(
-      vp => vp.displaySetInstanceUID === ds.displaySetInstanceUID
-    );
-
-    const viewportIdentificator =
-      viewports.length > 1
-        ? _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid]
-        : '';
+    const viewportIdentificator = isSingleViewport
+      ? []
+      : viewports.reduce((acc, viewportData, index) => {
+          if (viewportData.displaySetInstanceUID === ds.displaySetInstanceUID) {
+            acc.push(_viewportLabels[index]);
+          }
+          return acc;
+        }, []);
 
     const array =
       componentType === 'thumbnailTracked'

extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js

@@ -245,10 +245,7 @@ function TrackedCornerstoneViewport({
     setIsTracked(!isTracked);
   }
 
-  const label =
-    viewports.length > 1
-      ? _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid]
-      : '';
+  const label = viewports.length > 1 ? _viewportLabels[viewportIndex] : '';
 
   function switchMeasurement(direction) {
     if (!element) {

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

@@ -15,7 +15,6 @@ const ThumbnailNoImage = ({
   onDoubleClick,
   dragData,
   isActive,
-  viewportIdentificator = '',
 }) => {
   const [collectedProps, drag, dragPreview] = useDrag({
     item: { ...dragData },
@@ -84,7 +83,6 @@ ThumbnailNoImage.propTypes = {
   onClick: PropTypes.func.isRequired,
   onDoubleClick: PropTypes.func.isRequired,
   isActive: PropTypes.bool.isRequired,
-  viewportIdentificator: PropTypes.string,
 };
 
 export default ThumbnailNoImage;

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

@@ -21,6 +21,35 @@ const ThumbnailTracked = ({
   isActive,
 }) => {
   const trackedIcon = isTracked ? 'circled-checkmark' : 'dotted-circle';
+  const viewportIdentificatorLabel = viewportIdentificator.join(', ');
+  const renderViewportLabels = () => {
+    const MAX_LABELS_PER_COL = 3;
+    const shouldShowStack = viewportIdentificator.length > MAX_LABELS_PER_COL;
+    if (shouldShowStack) {
+      return (
+        <div>
+          <div>
+            {viewportIdentificator.slice(0, MAX_LABELS_PER_COL).map(label => (
+              <div key={label}>{label}</div>
+            ))}
+          </div>
+          <Tooltip
+            position="right"
+            content={
+              <div className="text-left max-w-40">
+                Series is displayed <br /> in viewport{' '}
+                {viewportIdentificatorLabel}
+              </div>
+            }
+          >
+            <Icon name="tool-more-menu" className="text-white py-2" />
+          </Tooltip>
+        </div>
+      );
+    }
+
+    return viewportIdentificator.map(label => <div key={label}>{label}</div>);
+  };
 
   return (
     <div
@@ -48,11 +77,11 @@ const ThumbnailTracked = ({
                       {isTracked ? ' tracked' : ' untracked'}
                     </span>
                   </span>
-                  {viewportIdentificator && (
+                  {!!viewportIdentificator.length && (
                     <span>
                       in viewport
                       <span className="ml-1 text-white">
-                        {viewportIdentificator}
+                        {viewportIdentificatorLabel}
                       </span>
                     </span>
                   )}
@@ -64,10 +93,10 @@ const ThumbnailTracked = ({
             }
           >
             <Icon name={trackedIcon} className="w-4 mb-2 text-primary-light" />
-            <div className="h-5 text-xl leading-tight text-white">
-              {viewportIdentificator}
-            </div>
           </Tooltip>
+          <div className="text-xl leading-tight text-white text-center">
+            {renderViewportLabels()}
+          </div>
         </div>
         {isTracked && (
           <div onClick={onClickUntrack}>
@@ -113,7 +142,7 @@ ThumbnailTracked.propTypes = {
   onClick: PropTypes.func.isRequired,
   onDoubleClick: PropTypes.func.isRequired,
   onClickUntrack: PropTypes.func.isRequired,
-  viewportIdentificator: PropTypes.string,
+  viewportIdentificator: PropTypes.array,
   isTracked: PropTypes.bool,
   isActive: PropTypes.bool.isRequired,
 };

platform/ui/src/contextProviders/ViewportGridProvider.jsx

@@ -88,6 +88,8 @@ export function ViewportGridProvider({ children, service }) {
     DEFAULT_STATE
   );
 
+  console.log('viewportGridState',viewportGridState)
+
   const getState = useCallback(() => viewportGridState, [viewportGridState]);
   const setActiveViewportIndex = useCallback(
     index => dispatch({ type: 'SET_ACTIVE_VIEWPORT_INDEX', payload: index }),