Prep for maintaining multi-select state in sessions (#1711)

igvteam · Oct 10, 2023 · 2a96b2f · 2a96b2f
1 parent 90b55a5
commit 2a96b2f
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 16 deletions.
diff --git a/js/trackBase.js b/js/trackBase.js
@@ -108,6 +108,8 @@ class TrackBase {
         this.minHeight = config.minHeight || Math.min(25, this.height)
         this.maxHeight = config.maxHeight || Math.max(1000, this.height)
 
+        this.isMultiSelection = config.isMultiSelection || false
+
         if (config.onclick) {
             this.onclick = config.onclick
             config.onclick = undefined   // functions cannot be saved in sessions, clear it here.

diff --git a/js/trackView.js b/js/trackView.js
@@ -49,7 +49,7 @@ class TrackView {
         this.browser = browser
         this.track = track
         track.trackView = this
-
+        
         this.addDOMToColumnContainer(browser, columnContainer, browser.referenceFrameList)
 
     }
@@ -132,12 +132,14 @@ class TrackView {
                 event.preventDefault()
                 event.stopPropagation()
 
-                setDragHandleSelectionState(this, this.dragHandle, event.target.checked)
+                this.track.isMultiSelection = event.target.checked
 
                 if (this.track.autoscaleGroup && false === event.target.checked) {
                     this.track.autoscaleGroup = undefined
                 }
 
+                setDragHandleSelectionState(this, this.dragHandle, event.target.checked)
+
             })
 
             setMultiTrackSelectionState(this, axis, ENABLE_MULTI_TRACK_SELECTION)
@@ -631,7 +633,6 @@ class TrackView {
         } else {
             this.dragHandle = DOMUtils.div({ class: 'igv-track-drag-handle' })
             this.dragHandle.classList.add('igv-track-drag-handle-color')
-            this.dragHandle.dataset.selected = 'no'
         }
 
         browser.columnContainer.querySelector('.igv-track-drag-column').appendChild(this.dragHandle)
@@ -736,7 +737,7 @@ class TrackView {
                 event.preventDefault()
 
                 currentDragHandle = event.target
-                if ('no' === currentDragHandle.dataset.selected) {
+                if (false === this.track.isMultiSelection) {
                     currentDragHandle.classList.remove('igv-track-drag-handle-color')
                     currentDragHandle.classList.add('igv-track-drag-handle-hover-color')
                 }
@@ -755,7 +756,7 @@ class TrackView {
 
                 if (currentDragHandle && event.target !== currentDragHandle) {
 
-                    if ('no' === currentDragHandle.dataset.selected) {
+                    if (false === this.track.isMultiSelection) {
                         currentDragHandle.classList.remove('igv-track-drag-handle-hover-color')
                         currentDragHandle.classList.add('igv-track-drag-handle-color')
                     }
@@ -773,7 +774,7 @@ class TrackView {
                 event.preventDefault()
 
                 if (undefined === currentDragHandle) {
-                    if ('no' === event.target.dataset.selected) {
+                    if (false === this.track.isMultiSelection) {
                         event.target.classList.remove('igv-track-drag-handle-color')
                         event.target.classList.add('igv-track-drag-handle-hover-color')
                     }
@@ -788,7 +789,7 @@ class TrackView {
                 event.preventDefault()
 
                 if (undefined === currentDragHandle) {
-                    if ('no' === event.target.dataset.selected) {
+                    if (false === this.track.isMultiSelection) {
                         event.target.classList.remove('igv-track-drag-handle-hover-color')
                         event.target.classList.add('igv-track-drag-handle-color')
                     }
@@ -802,7 +803,7 @@ class TrackView {
                 event.preventDefault()
 
                 if (undefined === currentDragHandle) {
-                    if ('no' === event.target.dataset.selected) {
+                    if (false === this.track.isMultiSelection) {
                         event.target.classList.remove('igv-track-drag-handle-hover-color')
                         event.target.classList.add('igv-track-drag-handle-color')
                     }

diff --git a/js/ui/menuUtils.js b/js/ui/menuUtils.js
@@ -438,7 +438,7 @@ function getMultiSelectedTrackViews(browser) {
 
     const candidates = browser.trackViews.filter(({ track }) => { return false === multiTrackSelectExclusionTypes.has(track.type) })
 
-    let selected = candidates.filter(({ namespace, dragHandle }) => { return namespace === dragHandle.dataset.selected })
+    let selected = candidates.filter(trackView => true === trackView.track.isMultiSelection)
 
     selected = 0 === selected.length ? undefined : selected
 

diff --git a/js/ui/multiTrackSelectButton.js b/js/ui/multiTrackSelectButton.js
@@ -55,18 +55,19 @@ function setMultiTrackSelectionState(trackView, axis, doEnableMultiSelection) {
         container.style.display = 'grid'
     } else {
 
-        const trackSelectInput =  container.querySelector('[name=track-select]')
-
-        if (trackView.dragHandle) {
-            setDragHandleSelectionState(trackView, trackView.dragHandle, trackSelectInput.checked)
-        }
+        trackView.track.isMultiSelection = false
 
         if (trackView.track.autoscaleGroup) {
             trackView.track.autoscaleGroup = undefined
         }
 
+        const trackSelectInput =  container.querySelector('[name=track-select]')
         trackSelectInput.checked = false
 
+        if (trackView.dragHandle) {
+            setDragHandleSelectionState(trackView, trackView.dragHandle, false)
+        }
+
         container.style.display = 'none'
     }
 
@@ -76,12 +77,10 @@ function setMultiTrackSelectionState(trackView, axis, doEnableMultiSelection) {
 function setDragHandleSelectionState(trackView, dragHandle, isSelected) {
 
     if (isSelected) {
-        dragHandle.dataset.selected = trackView.namespace
         dragHandle.classList.remove('igv-track-drag-handle-color')
         dragHandle.classList.remove('igv-track-drag-handle-hover-color')
         dragHandle.classList.add('igv-track-drag-handle-selected-color')
     } else {
-        dragHandle.dataset.selected = 'no'
         dragHandle.classList.remove('igv-track-drag-handle-hover-color')
         dragHandle.classList.remove('igv-track-drag-handle-selected-color')
         dragHandle.classList.add('igv-track-drag-handle-color')