Better GenericContainer presentation positioning

Author: turner

css/_igv-generic-container.scss

@@ -2,8 +2,10 @@
 .igv-generic-container {
 
   position: absolute;
-  top: 0;
-  left:0;
+
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 
   z-index: 2048;
 

css/igv.css

@@ -7,17 +7,11 @@ class GenericContainer {
 
     constructor({parent,  top, left, width, height, border, closeHandler}) {
 
-        let container = DOMUtils.div({class: 'igv-ui-generic-container'});
+        const container = DOMUtils.div({class: 'igv-ui-generic-container'});
         parent.appendChild(container);
-        DOMUtils.hide(container);
+
         this.container = container;
 
-        if(top !== undefined) {
-            this.container.style.top = `${ top }px`
-        }
-        if(left !== undefined) {
-            this.container.style.left = `${ left }px`
-        }
         if (width !== undefined) {
             this.container.style.width = `${ width }px`
         }
@@ -27,32 +21,30 @@ class GenericContainer {
         if(border) {
             this.container.style.border = border;
         }
-        //
-        // let bbox = parent.getBoundingClientRect();
-        // this.origin = {x: bbox.x, y: bbox.y};
-        // this.container.offset({left: this.origin.x, top: this.origin.y});
 
         // header
         const header = DOMUtils.div();
         this.container.appendChild(header);
 
         // close button
         UIUtils.attachDialogCloseHandlerWithParent(header, (e) => {
-            DOMUtils.hide(this.container);
             if(typeof closeHandler === "function") {
                 closeHandler(e);
             }
+            this.hide()
         });
 
         makeDraggable(this.container, header);
+
+        this.hide()
     }
 
     show() {
-        DOMUtils.show(this.container);
+        this.container.style.display = 'flex'
     }
 
     hide() {
-        DOMUtils.hide(this.container)
+        this.container.style.display = 'none'
     }
 
     dispose() {