Skip to content

Commit

Permalink
Support Multiple PopOvers per Track (igvteam#1745)
Browse files Browse the repository at this point in the history 
Enable multiple popup text windows by shift-clicking
  • Loading branch information
@turner @arpanda
turner authored and arpanda committed Apr 2, 2024
1 parent 3519b2b commit 71f709c
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 21 deletions.
15 changes: 15 additions & 0 deletions js/browser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ import MultiTrackSelectButton from "./ui/multiTrackSelectButton.js"
import MenuUtils from "./ui/menuUtils.js"
import Genome from "./genome/genome.js"
import {setDefaults} from "./igv-create.js"
import { trackViewportPopoverList } from './trackViewport.js'

// css - $igv-scrollbar-outer-width: 14px;
const igv_scrollbar_outer_width = 14
Expand Down Expand Up @@ -141,6 +142,16 @@ class Browser {
}
})

this.on('didchangecolumnlayout', () => {
if (trackViewportPopoverList.length > 0) {
const len = trackViewportPopoverList.length
for (let i = 0; i < len; i++) {
trackViewportPopoverList[ i ].dispose()
}
trackViewportPopoverList.length = 0
}
})

this.addMouseHandlers()

this.sampleInfo = new SampleInfo(this)
Expand Down Expand Up @@ -1539,6 +1550,7 @@ class Browser {
// TODO -- this is really ugly
const {$viewport} = this.trackViews[0].viewports[indexLeft]
const viewportColumn = viewportColumnManager.insertAfter($viewport.get(0).parentElement)
this.fireEvent('didchangecolumnlayout')

if (indexRight === this.referenceFrameList.length) {
this.referenceFrameList.push(newReferenceFrame)
Expand Down Expand Up @@ -1582,7 +1594,9 @@ class Browser {
// find the $column corresponding to this referenceFrame and remove it
const index = this.referenceFrameList.indexOf(referenceFrame)
const {$viewport} = this.trackViews[0].viewports[index]

viewportColumnManager.removeColumnAtIndex(index, $viewport.parent().get(0))
this.fireEvent('didchangecolumnlayout')

for (let {viewports} of this.trackViews) {
viewports[index].dispose()
Expand Down Expand Up @@ -1721,6 +1735,7 @@ class Browser {

// Insert viewport columns preceding the sample info column
viewportColumnManager.insertBefore(this.columnContainer.querySelector('.igv-sample-info-column'), this.referenceFrameList.length)
this.fireEvent('didchangecolumnlayout')

this.centerLineList = this.createCenterLineList(this.columnContainer)

Expand Down
2 changes: 1 addition & 1 deletion js/roi/ROIManager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@ class ROIManager {
if (this.popover) {
this.popover.dispose()
}
this.popover = new Popover(columnContainer, roiSet.name)
this.popover = new Popover(columnContainer, true, roiSet.name, undefined)
this.popover.presentContentWithEvent(event, name)
})
} else {
Expand Down
75 changes: 61 additions & 14 deletions js/trackViewport.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ let mouseDownCoords
let lastClickTime = 0
let lastHoverUpdateTime = 0
let popupTimerID
let trackViewportPopoverList = []

let popover

class TrackViewport extends Viewport {

Expand Down Expand Up @@ -46,6 +49,7 @@ class TrackViewport extends Viewport {

this.stopSpinner()
this.addMouseHandlers()

}

setContentHeight(contentHeight) {
Expand Down Expand Up @@ -702,16 +706,12 @@ class TrackViewport extends Viewport {
return
}

// Close any currently open popups
$('.igv-popover').hide()


if (this.browser.dragObject || this.browser.isScrolling) {
return
}

// Treat as a mouse click, its either a single or double click.
// Handle here and stop propogation / default
// Treat as a mouse click, it's either a single or double click.
// Handle here and stop propagation / default
event.preventDefault()

const mouseX = DOMUtils.translateMouseCoordinates(event, this.$viewport.get(0)).x
Expand Down Expand Up @@ -756,19 +756,50 @@ class TrackViewport extends Viewport {
} else {
// single-click

if (event.shiftKey && typeof this.trackView.track.shiftClick === "function") {
/*if (event.shiftKey && typeof this.trackView.track.shiftClick === "function") {
this.trackView.track.shiftClick(xBP, event)
} else if (typeof this.trackView.track.popupData === "function") {
} else */

if (typeof this.trackView.track.popupData === "function") {

popupTimerID = setTimeout(() => {

const content = this.getPopupContent(event)
if (content) {
if (this.popover) this.popover.dispose()
this.popover = new Popover(this.browser.columnContainer)
this.popover.presentContentWithEvent(event, content)

if (false === event.shiftKey) {

if (popover) {
popover.dispose()
}

if (trackViewportPopoverList.length > 0) {
for (const gp of trackViewportPopoverList) {
gp.dispose()
}
trackViewportPopoverList.length = 0
}

popover = new Popover(this.$viewport.get(0).parentElement, true, undefined, () => {
popover.dispose()
})

popover.presentContentWithEvent(event, content)
} else {

let po = new Popover(this.$viewport.get(0).parentElement, true, undefined, () => {
const index = trackViewportPopoverList.indexOf(po)
trackViewportPopoverList.splice(index, 1)
po.dispose()
})

trackViewportPopoverList.push( po )

po.presentContentWithEvent(event, content)
}

}
window.clearTimeout(popupTimerID)
popupTimerID = undefined
Expand Down Expand Up @@ -799,10 +830,9 @@ class TrackViewport extends Viewport {
}

if (str) {
if (this.popover) {
this.popover.dispose()
if (undefined === this.popover) {
this.popover = new Popover(this.browser.columnContainer, true, (track.name || ''), undefined)
}
this.popover = new Popover(this.browser.columnContainer, (track.name || ''))
this.popover.presentContentWithEvent(event, str)
}
})
Expand Down Expand Up @@ -856,6 +886,22 @@ class TrackViewport extends Viewport {
return content
}

dispose() {

if (this.popover) {
this.popover.dispose()
}

// if (trackViewportPopoverList) {
// for (let i = 0; i < trackViewportPopoverList.length; i++ ) {
// trackViewportPopoverList[ i ].dispose()
// }
//
// trackViewportPopoverList = undefined
// }

super.dispose()
}

}

Expand Down Expand Up @@ -921,4 +967,5 @@ function mergeArrays(a, b) {

}

export { trackViewportPopoverList }
export default TrackViewport
4 changes: 0 additions & 4 deletions js/viewport.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,10 +192,6 @@ class Viewport {
*/
dispose() {

if (this.popover) {
this.popover.dispose()
}

this.$viewport.get(0).remove()

// Null out all properties -- this should not be neccessary, but just in case there is a
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@
},
"browserslist": "> 1%, not dead",
"devDependencies": {
"html2canvas": "^1.4.1",
"@rollup/plugin-strip": "^3.0.1",
"@rollup/plugin-terser": "^0.4.0",
"@xmldom/xmldom": "^0.7.9",
Expand All @@ -53,7 +52,8 @@
"circular-view": "github:igvteam/circular-view#v0.2.4",
"eslint": "^6.4.0",
"hdf5-indexed-reader": "github:jrobinso/hdf5-indexed-reader#v0.5.5",
"igv-ui": "github:igvteam/igv-ui#v1.5.5",
"html2canvas": "^1.4.1",
"igv-ui": "github:igvteam/igv-ui#v1.5.6",
"igv-utils": "github:igvteam/igv-utils#v1.4.8",
"mocha": "^10.2.0",
"rollup": "^2.66.0",
Expand Down

0 comments on commit 71f709c

Please sign in to comment.