fix(segmentation scroll): and hydration bugs (#3701)

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}

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]);
 

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]">

platform/ui/src/components/SegmentationGroupTable/SegmentationGroupTable.tsx

@@ -104,20 +104,18 @@ const SegmentationGroupTable = ({
             </div>
           ) : (
             <div className="mt-1 select-none">
-              {!disableEditing && (
+              <SegmentationDropDownRow
-                <SegmentationDropDownRow
+                segmentations={segmentations}
-                  segmentations={segmentations}
+                disableEditing={disableEditing}
-                  disableEditing={disableEditing}
+                activeSegmentation={activeSegmentation}
-                  activeSegmentation={activeSegmentation}
+                onActiveSegmentationChange={onActiveSegmentationChange}
-                  onActiveSegmentationChange={onActiveSegmentationChange}
+                onSegmentationDelete={onSegmentationDelete}
-                  onSegmentationDelete={onSegmentationDelete}
+                onSegmentationEdit={onSegmentationEdit}
-                  onSegmentationEdit={onSegmentationEdit}
+                onSegmentationDownload={onSegmentationDownload}
-                  onSegmentationDownload={onSegmentationDownload}
+                storeSegmentation={storeSegmentation}
-                  storeSegmentation={storeSegmentation}
+                onSegmentationAdd={onSegmentationAdd}
-                  onSegmentationAdd={onSegmentationAdd}
+                onToggleSegmentationVisibility={onToggleSegmentationVisibility}
-                  onToggleSegmentationVisibility={onToggleSegmentationVisibility}
+              />
-                />
-              )}
               {!disableEditing && showAddSegment && (
                 <AddSegmentRow onClick={() => onSegmentAdd(activeSegmentationId)} />
               )}