shoebox - store colorScale as json in session

igvteam · Oct 13, 2024 · 676ecdd · 676ecdd
1 parent 585b88b
commit 676ecdd
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 7 deletions.
diff --git a/dev/shoebox/shoebox.html b/dev/shoebox/shoebox.html
@@ -10,6 +10,8 @@
 
 <h1>Shoebox</h1>
 
+<button id="log-state">Log Session</button>
+<button id="bookmark">Bookmark</button>
 
 <div id="igvDiv" style="padding-top: 50px;padding-bottom: 20px; height: auto"></div>
 
@@ -75,6 +77,15 @@ <h1>Shoebox</h1>
     igv.createBrowser(igvDiv, options)
         .then(function (browser) {
             console.log("Created IGV browser")
+            document.getElementById("log-state").addEventListener("click", () => console.log(browser.toJSON()))
+
+            document.getElementById('bookmark').addEventListener('click', () => {
+                const path = window.location.href.slice()
+                const idx = path.indexOf("?")
+                const url = (idx > 0 ? path.substring(0, idx) : path) + "?sessionURL=blob:" + browser.compressedSession()
+                window.history.pushState({}, "IGV", url)
+            })
+
         })
 
 

diff --git a/js/shoebox/shoeboxColorScale.js b/js/shoebox/shoeboxColorScale.js
@@ -38,13 +38,15 @@ class ShoeboxColorScale {
         this.updateColor(scale.color || "rgb(0,0,255)")
 
     }
+
     updateColor(color) {
         const comps = color.substring(4).replace(")", "").split(",")
         if (comps.length === 3) {
             this.r = Number.parseInt(comps[0].trim())
             this.g = Number.parseInt(comps[1].trim())
             this.b = Number.parseInt(comps[2].trim())
         }
+        this.cache = []
     }
 
     setMinMax(min, max) {
@@ -66,15 +68,24 @@ class ShoeboxColorScale {
         return this.cache[bin]
     }
 
-    stringify() {
-        return "" + this.min + "," + this.max + ',' + `rgb(${this.r},${this.g},${this.b})`
+    /**
+     *
+     * @returns {{min: (*|number), color: string, max}}
+     */
+    toJson() {
+        return {
+            min: this.min,
+            max: this.max,
+            color: `rgb(${this.r},${this.g},${this.b})`
+        }
     }
 
+    // For short-term backward compatibility
     static parse(str) {
 
-       const tokens = str.split(",")
+        const tokens = str.split(",")
 
-       const cs = {
+        const cs = {
             min: Number.parseFloat(tokens[0]),
             max: Number.parseFloat(tokens[1]),
             color: `${tokens[2]},${tokens[3]},${tokens[4]}`

diff --git a/js/shoebox/shoeboxTrack.js b/js/shoebox/shoeboxTrack.js
@@ -50,8 +50,9 @@ class ShoeboxTrack extends TrackBase {
         // Must do the following after setting track properties as they can be overriden via a track line
 
         // Color settings
-        if (this.config.colorScale) {
-            this.colorScale = ShoeboxColorScale.parse(this.config.colorScale)
+        if (this.config.colorScale && this.config.colorScale.max && this.config.colorScale.color) {   // Minimal validation
+            this.colorScale = new ShoeboxColorScale(this.config.colorScale)
+
         } else {
             const min = this.dataRange.min
             const max = this.dataRange.max
@@ -240,7 +241,7 @@ class ShoeboxTrack extends TrackBase {
     getState() {
 
         const config = super.getState()
-        config.colorScale = this.colorScale.stringify()
+        config.colorScale = this.colorScale.toJson()
         return config
 
     }