From cef7486e1debd43ee81f7ef5f83d9af4ae9be74e Mon Sep 17 00:00:00 2001
From: turner <douglass.turner@gmail.com>
Date: Wed, 18 Oct 2023 15:50:16 -0400
Subject: [PATCH] Add live update of OverlayTrack transparency.

---
 dev/multi-select/multi-select.html | 6 +++---
 js/browser.js                      | 6 ++++--
 js/ui/menuUtils.js                 | 9 ++++++---
 package.json                       | 2 +-
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/dev/multi-select/multi-select.html b/dev/multi-select/multi-select.html
index 03d624353..2a1006d57 100644
--- a/dev/multi-select/multi-select.html
+++ b/dev/multi-select/multi-select.html
@@ -177,7 +177,7 @@ <h1>Multiple Track Selection</h1>
 
         };
 
-    const MergedTracksConfig =
+    const overyTrackConfig =
         {
             genome: "hg19",
             locus: "chr1:155,138,124-155,153,715",
@@ -185,7 +185,7 @@ <h1>Multiple Track Selection</h1>
                 [
                     {
                         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
index 19b3504c6..60fa217eb 100755
--- 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
index a1be02cc4..562a6ed8e 100644
--- a/js/ui/menuUtils.js
+++ b/js/ui/menuUtils.js
@@ -137,8 +137,8 @@ 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()
         }
 
@@ -146,10 +146,13 @@ function overlayTrackAlphaAdjustmentMenuItem() {
             {
                 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
index 175856d93..5c062541b 100644
--- 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",