Clean up presentation positioning

Author: turner

css/_igv-generic-dialog-container.scss

@@ -33,8 +33,11 @@ $igv-button-width: 75px;
 .igv-generic-dialog-container {
 
   position: absolute;
-  top: 0;
-  left:0;
+
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
   width:300px;
   height:200px;
 

css/_igv-ui-generic-dialog-container.scss

@@ -4,9 +4,12 @@
 
   box-sizing: content-box;
 
-  position: fixed;
-  top: 0;
-  left:0;
+  position: absolute;
+
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
   width:300px;
   height:fit-content;
   padding-bottom: 16px;

css/igv.css

@@ -1,5 +1,4 @@
 import TrackBase from "../trackBase.js"
-import MenuUtils from "../ui/menuUtils.js"
 import HDF5IndexedReader from "./HDF5IndexedReader.js"
 import {CNVpytorVCF} from "./cnvpytorVCF.js"
 import FeatureSource from '../feature/featureSource.js'

js/cnvpytor/cnvpytorTrack.js

@@ -3,7 +3,6 @@ import TrackBase from "../trackBase.js"
 import IGVGraphics from "../igv-canvas.js"
 import {isSimpleType} from "../util/igvUtils.js"
 import paintAxis from "../util/paintAxis.js"
-import MenuUtils from "../ui/menuUtils.js"
 import {StringUtils} from "../../node_modules/igv-utils/src/index.js"
 
 const X_PIXEL_DIFF_THRESHOLD = 1

js/embedCss.js

@@ -13,9 +13,6 @@ class InputDialog {
         this.container = DOMUtils.div({class: 'igv-ui-generic-dialog-container'})
         parent.appendChild(this.container)
 
-        // const { x, y, width, height } = this.container.getBoundingClientRect();
-        // console.log(`InputDialog - x ${ x } y ${ y } width ${ width } height ${ height }`)
-
         // dialog header
         const header = DOMUtils.div({class: 'igv-ui-generic-dialog-header'})
         this.container.appendChild(header)
@@ -87,7 +84,12 @@ class InputDialog {
         return DOMPurify.sanitize(this._input.value)
     }
 
-    present(options, e) {
+
+    present(parent) {
+        this.container.style.display = 'flex';
+    }
+
+    __present(options, e) {
 
         this.label.textContent = options.label
         this._input.value = options.value

js/gcnv/gcnvTrack.js

@@ -12,9 +12,6 @@ class DataRangeDialog {
         this.container.className = 'igv-generic-dialog-container';
         parent.appendChild(this.container);
 
-        this.container.style.left = '0px';
-        this.container.style.top = '0px';
-
         // Create dialog header
         const header = document.createElement('div');
         header.className = 'igv-generic-dialog-header';
@@ -23,8 +20,6 @@ class DataRangeDialog {
         attachDialogCloseHandlerWithParent(header, () => {
             this.minimumInput.value = '';
             this.maximumInput.value = '';
-            this.container.style.left = '0px';
-            this.container.style.top = '0px';
             this.container.style.display = 'none';
         })
 
@@ -162,12 +157,6 @@ class DataRangeDialog {
     }
 
     present(parent) {
-        const parentRect = parent.getBoundingClientRect();
-        const bodyScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
-
-        // Position the container
-        this.container.style.left = `${parent.offsetWidth - this.container.offsetWidth}px`;
-        this.container.style.top = `${parentRect.top + bodyScrollTop}px`;
         this.container.style.display = 'flex';
     }
 

js/ui/components/inputDialog.js

@@ -1,7 +1,6 @@
 import NavbarButton from "./navbarButton.js"
 import {multiSelectImage, multiSelectImageHover} from "./navbarIcons/multiSelect.js"
 import {buttonLabel} from "./navbarIcons/buttonLabel.js"
-import {multiTrackSelectExclusionTypes} from './menuUtils.js'
 
 class MultiTrackSelectButton extends NavbarButton {