Add live update of OverlayTrack transparency.

igvteam · Oct 18, 2023 · cef7486 · cef7486
1 parent 1627883
commit cef7486
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 9 deletions.
diff --git a/dev/multi-select/multi-select.html b/dev/multi-select/multi-select.html
@@ -177,15 +177,15 @@ <h1>Multiple Track Selection</h1>
 
         };
 
-    const MergedTracksConfig =
+    const overyTrackConfig =
         {
             genome: "hg19",
             locus: "chr1:155,138,124-155,153,715",
             tracks:
                 [
                     {
                         name: "Merged - configuration",
-                        height: 50,
+                        height: 256,
                         type: "merged",
                         tracks: [
                             {
@@ -291,7 +291,7 @@ <h1>Multiple Track Selection</h1>
         ]
     }
 
-    igv.createBrowser(document.getElementById("igvDiv"), BigWigConfig)
+    igv.createBrowser(document.getElementById("igvDiv"), overyTrackConfig)
         .then(function (browser) {
             console.log("Created IGV browser");
         })

diff --git a/js/browser.js b/js/browser.js
@@ -1,8 +1,7 @@
 import $ from "./vendor/jquery-3.3.1.slim.js"
 import html2canvas from '../node_modules/html2canvas/dist/html2canvas.esm.js'
-import {InputDialog, GenericColorPicker} from '../node_modules/igv-ui/dist/igv-ui.js'
 import {BGZip, FileUtils, igvxhr, StringUtils, URIUtils} from "../node_modules/igv-utils/src/index.js"
-import {DOMUtils, Icon} from "../node_modules/igv-ui/dist/igv-ui.js"
+import {DOMUtils, Icon, SliderDialog, InputDialog, GenericColorPicker} from "../node_modules/igv-ui/dist/igv-ui.js"
 import Alert from './ui/alert.js'
 import * as TrackUtils from './util/trackUtils.js'
 import TrackView, {igv_axis_column_width} from "./trackView.js"
@@ -306,6 +305,9 @@ class Browser {
             this.$navigation.hide()
         }
 
+        this.sliderDialog = new SliderDialog(this.root)
+        this.sliderDialog.container.id = `igv-slider-dialog-${DOMUtils.guid()}`
+
         this.inputDialog = new InputDialog(this.root)
         this.inputDialog.container.id = `igv-input-dialog-${DOMUtils.guid()}`
 

diff --git a/js/ui/menuUtils.js b/js/ui/menuUtils.js
@@ -137,19 +137,22 @@ function overlayTrackAlphaAdjustmentMenuItem() {
     container.innerText = 'Set transparency'
 
     function dialogPresentationHandler (e) {
-        const callback = value => {
-            this.alpha = parseFloat(value)
+        const callback = alpha => {
+            this.alpha = Math.max(0.001, alpha)
             this.updateViews()
         }
 
         const config =
             {
                 label: 'Transparency',
                 value: this.alpha,
+                min: 0.0,
+                max: 1.0,
+                scaleFactor: 1000,
                 callback
             }
 
-        this.browser.inputDialog.present(config, e)
+        this.browser.sliderDialog.present(config, e)
     }
 
     return { object: $(container), dialog:dialogPresentationHandler }

diff --git a/package.json b/package.json
@@ -53,7 +53,7 @@
     "circular-view": "github:igvteam/circular-view#v0.2.4",
     "eslint": "^6.4.0",
     "hdf5-indexed-reader": "github:jrobinso/hdf5-indexed-reader#v0.5.2",
-    "igv-ui": "github:igvteam/igv-ui#v1.5.2",
+    "igv-ui": "github:igvteam/igv-ui#dat_slider_dialog",
     "igv-utils": "github:igvteam/igv-utils#v1.4.8",
     "mocha": "^10.2.0",
     "rollup": "^2.66.0",