fix: 🐛 Fix drag-n-drop of local files into OHIF (#1319)

* fix: 🐛 Fix drag-n-drop of local files into OHIF

Closes: #1307

* CR Update: Centralize dialogs

platform/ui/src/contextProviders/DialogProvider.js

@@ -152,6 +152,7 @@ const DialogProvider = ({ children, service }) => {
         onStart,
         onStop,
         onDrag,
+        showOverlay,
       } = dialog;
 
       let position =
@@ -160,7 +161,7 @@ const DialogProvider = ({ children, service }) => {
         position = centerPositions.find(position => position.id === id);
       }
 
-      return (
+      const dragableItem = () => (
         <Draggable
           key={id}
           disabled={!isDraggable}
@@ -217,6 +218,16 @@ const DialogProvider = ({ children, service }) => {
           </div>
         </Draggable>
       );
+
+      return (
+        showOverlay ? (
+          <div className="Overlay" key={id}>
+            {dragableItem()}
+          </div>
+        ) : (
+            dragableItem()
+          )
+      );
     });
 
   /**
@@ -238,13 +249,11 @@ const DialogProvider = ({ children, service }) => {
 
   return (
     <DialogContext.Provider value={{ create, dismiss, dismissAll, isEmpty }}>
-      <div className="DraggableArea">
+      {!isEmpty() &&
-        {dialogs.some(dialog => dialog.showOverlay) ? (
+        <div className="DraggableArea">
-          <div className="Overlay active">{renderDialogs()}</div>
+          {renderDialogs()}
-        ) : (
+        </div>
-          renderDialogs()
+      }
-        )}
-      </div>
       {children}
     </DialogContext.Provider>
   );

platform/ui/src/contextProviders/DialogProvider.styl

@@ -6,17 +6,16 @@
   div
     cursor: grabbing !important
 
-.DraggableArea, .Overlay
+.DraggableArea
   width: 100%
   height: 100%
   position: absolute
-
+  .Overlay
-.Overlay.active
+    position: fixed
-  position: fixed
+    z-index: 999
-  z-index: 999
+    left: 0
-  left: 0
+    top: 0
-  top: 0
+    width: 100%
-  width: 100%
+    height: 100%
-  height: 100%
+    overflow: auto
-  overflow: auto
+    background: rgba(0,0,0,.1)
-  background: rgba(0,0,0,.1)

platform/viewer/src/appExtensions/MeasurementsPanel/init.js

@@ -80,6 +80,7 @@ export default function init({
       id: 'labelling',
       isDraggable: false,
       showOverlay: true,
+      centralize: true,
       content: LabellingFlow,
       contentProps: {
         measurementData,