From b28a70520e84fe44b5f813e38644987afd2afdc5 Mon Sep 17 00:00:00 2001
From: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>
Date: Fri, 10 Jul 2020 11:06:45 -0300
Subject: [PATCH] fix: OHIF-219 - Viewport Labels should be sequential (#1881)

---
 .../dicom-sr/src/OHIFCornerstoneSRViewport.js |  5 +--
 .../PanelStudyBrowserTracking.jsx             | 31 ++++++++------
 .../viewports/TrackedCornerstoneViewport.js   |  5 +--
 .../ThumbnailNoImage/ThumbnailNoImage.jsx     |  2 -
 .../ThumbnailTracked/ThumbnailTracked.jsx     | 41 ++++++++++++++++---
 .../contextProviders/ViewportGridProvider.jsx |  2 +
 6 files changed, 57 insertions(+), 29 deletions(-)

diff --git a/extensions/dicom-sr/src/OHIFCornerstoneSRViewport.js b/extensions/dicom-sr/src/OHIFCornerstoneSRViewport.js
index d7232dc07..6bbb67d84 100644
--- a/extensions/dicom-sr/src/OHIFCornerstoneSRViewport.js
+++ b/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}
 
diff --git a/extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx b/extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx
index 3d494d592..fe3d37643 100644
--- a/extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx
+++ b/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'
diff --git a/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js b/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js
index d287806b4..8071246cd 100644
--- a/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js
+++ b/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) {
diff --git a/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx b/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx
index 0b018191a..90ff0d9d1 100644
--- a/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx
+++ b/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;
diff --git a/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx b/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx
index 8d9e69c11..146c77821 100644
--- a/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx
+++ b/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,
 };
diff --git a/platform/ui/src/contextProviders/ViewportGridProvider.jsx b/platform/ui/src/contextProviders/ViewportGridProvider.jsx
index a9c86b29d..f2bb8a04b 100644
--- a/platform/ui/src/contextProviders/ViewportGridProvider.jsx
+++ b/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 }),