From 1fd98d922094d10fe0c6e9df726314ec9fce49e8 Mon Sep 17 00:00:00 2001
From: Joe Boccanfuso <109477394+jbocce@users.noreply.github.com>
Date: Thu, 5 Oct 2023 22:13:08 -0400
Subject: [PATCH] fix(segmentation scroll): and hydration bugs (#3701)

---
 .../src/panels/PanelSegmentation.tsx          |  2 +-
 .../components/Notification/Notification.tsx  |  4 +++
 .../SegmentationDropDownRow.tsx               | 14 +++++-----
 .../SegmentationGroupTable.tsx                | 26 +++++++++----------
 4 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/extensions/cornerstone-dicom-seg/src/panels/PanelSegmentation.tsx b/extensions/cornerstone-dicom-seg/src/panels/PanelSegmentation.tsx
index d17c0397b..870c1d454 100644
--- a/extensions/cornerstone-dicom-seg/src/panels/PanelSegmentation.tsx
+++ b/extensions/cornerstone-dicom-seg/src/panels/PanelSegmentation.tsx
@@ -217,7 +217,7 @@ export default function PanelSegmentation({
 
   return (
     <>
-      <div className="flex min-h-0 flex-auto select-none flex-col justify-between">
+      <div className="ohif-scrollbar flex min-h-0 flex-auto select-none flex-col justify-between overflow-auto">
         <SegmentationGroupTable
           title={t('Segmentations')}
           segmentations={segmentations}
diff --git a/platform/ui/src/components/Notification/Notification.tsx b/platform/ui/src/components/Notification/Notification.tsx
index 09bc86a8b..1f603a49f 100644
--- a/platform/ui/src/components/Notification/Notification.tsx
+++ b/platform/ui/src/components/Notification/Notification.tsx
@@ -18,10 +18,14 @@ const Notification = ({ id, type, message, actions, onSubmit, onOutsideClick })
       }
     };
 
+    // Both a mouse down and up listeners are desired so as to avoid missing events
+    // from elements that have pointer-events:none (e.g. the active viewport).
     document.addEventListener('mousedown', handleClick);
+    document.addEventListener('mouseup', handleClick);
 
     return () => {
       document.removeEventListener('mousedown', handleClick);
+      document.removeEventListener('mouseup', handleClick);
     };
   }, [onOutsideClick]);
 
diff --git a/platform/ui/src/components/SegmentationGroupTable/SegmentationDropDownRow.tsx b/platform/ui/src/components/SegmentationGroupTable/SegmentationDropDownRow.tsx
index d3fa818c2..0095c9767 100644
--- a/platform/ui/src/components/SegmentationGroupTable/SegmentationDropDownRow.tsx
+++ b/platform/ui/src/components/SegmentationGroupTable/SegmentationDropDownRow.tsx
@@ -75,14 +75,16 @@ function SegmentationDropDownRow({
                       storeSegmentation(activeSegmentation.id);
                     },
                   },
-                  {
-                    title: 'Download',
-                    onClick: () => {
-                      onSegmentationDownload(activeSegmentation.id);
-                    },
-                  },
                 ]
               : []),
+            ...[
+              {
+                title: 'Download',
+                onClick: () => {
+                  onSegmentationDownload(activeSegmentation.id);
+                },
+              },
+            ],
           ]}
         >
           <div className="hover:bg-secondary-dark mx-1 grid h-[28px] w-[28px]  cursor-pointer place-items-center rounded-[4px]">
diff --git a/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupTable.tsx b/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupTable.tsx
index fce3fb4ed..a247326e3 100644
--- a/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupTable.tsx
+++ b/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupTable.tsx
@@ -104,20 +104,18 @@ const SegmentationGroupTable = ({
             </div>
           ) : (
             <div className="mt-1 select-none">
-              {!disableEditing && (
-                <SegmentationDropDownRow
-                  segmentations={segmentations}
-                  disableEditing={disableEditing}
-                  activeSegmentation={activeSegmentation}
-                  onActiveSegmentationChange={onActiveSegmentationChange}
-                  onSegmentationDelete={onSegmentationDelete}
-                  onSegmentationEdit={onSegmentationEdit}
-                  onSegmentationDownload={onSegmentationDownload}
-                  storeSegmentation={storeSegmentation}
-                  onSegmentationAdd={onSegmentationAdd}
-                  onToggleSegmentationVisibility={onToggleSegmentationVisibility}
-                />
-              )}
+              <SegmentationDropDownRow
+                segmentations={segmentations}
+                disableEditing={disableEditing}
+                activeSegmentation={activeSegmentation}
+                onActiveSegmentationChange={onActiveSegmentationChange}
+                onSegmentationDelete={onSegmentationDelete}
+                onSegmentationEdit={onSegmentationEdit}
+                onSegmentationDownload={onSegmentationDownload}
+                storeSegmentation={storeSegmentation}
+                onSegmentationAdd={onSegmentationAdd}
+                onToggleSegmentationVisibility={onToggleSegmentationVisibility}
+              />
               {!disableEditing && showAddSegment && (
                 <AddSegmentRow onClick={() => onSegmentAdd(activeSegmentationId)} />
               )}