Skip to content

Commit

Permalink
...
Browse files Browse the repository at this point in the history
  • Loading branch information
@jrobinso
jrobinso committed Oct 24, 2024
1 parent 73bfe9c commit 51cb7e4
Show file tree
Hide file tree
Showing 12 changed files with 46 additions and 41 deletions.
9 changes: 5 additions & 4 deletions js/browser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,6 +239,7 @@ class Browser {
if (false === config.showControls) {
this.navbar.hide()
}
this.cursorGuide = new CursorGuide(this.columnContainer, this)

this.inputDialog = new InputDialog(this.root)
this.inputDialog.container.id = `igv-input-dialog-${DOMUtils.guid()}`
Expand Down Expand Up @@ -822,14 +823,14 @@ class Browser {
setCursorGuideVisibility(doShowCursorGuide) {

if (doShowCursorGuide) {
this.navbar.cursorGuide.show()
this.cursorGuide.show()
} else {
this.navbar.cursorGuide.hide()
this.cursorGuide.hide()
}
}

setCustomCursorGuideMouseHandler(mouseHandler) {
this.navbar.cursorGuide.customMouseHandler = mouseHandler
this.cursorGuide.customMouseHandler = mouseHandler
}

// center line
Expand Down Expand Up @@ -2190,7 +2191,7 @@ class Browser {
createCircularView(container, show) {
show = show === true // convert undefined to boolean
this.circularView = createCircularView(container, this)
this.circularViewControl = new CircularViewControl(this.navbar.$toggle_button_container.get(0), this)
this.circularViewControl = new CircularViewControl(this.navbar.toggle_button_container, this)
this.circularView.setAssembly({
name: this.genome.id,
id: this.genome.id,
Expand Down
47 changes: 25 additions & 22 deletions js/responsiveNavbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,20 +41,23 @@ import SampleNameControl from "./sample/sampleNameControl.js"
import SaveImageControl from "./ui/saveImageControl.js"
import CustomButton from "./ui/customButton.js"
import ZoomWidget from "./ui/zoomWidget.js"
import NavbarButton from "./ui/navbarButton.js"

class ResponsiveNavbar {
constructor(config, browser) {

this.browser = browser
this.config = config

this.currentClass = 'igv-navbar-text-button'

// DOM element for
const $navBar = $('<div>', {class: 'igv-navbar'})
this.$navigation = $navBar

const $navbarLeftContainer = $('<div>', {class: 'igv-navbar-left-container'})
$navBar.append($navbarLeftContainer)
$navbarLeftContainer
this.navbarLeftContainer = $navbarLeftContainer.get(0)

// IGV logo
const $logo = $('<div>', {class: 'igv-logo'})
Expand Down Expand Up @@ -105,39 +108,39 @@ class ResponsiveNavbar {

const $navbarRightContainer = $('<div>', {class: 'igv-navbar-right-container'})
$navBar.append($navbarRightContainer)
this.navbarRightContainer = $navbarRightContainer.get(0)

const $toggle_button_container = $('<div class="igv-navbar-toggle-button-container">')
$navbarRightContainer.append($toggle_button_container)
this.$toggle_button_container = $toggle_button_container
const toggleButtonContainer = $toggle_button_container.get(0)
this.toggle_button_container = toggleButtonContainer // TODO -- for circular view , refactor this

this.overlayTrackButton = new OverlayTrackButton(browser, $toggle_button_container.get(0))
this.overlayTrackButton = new OverlayTrackButton(toggleButtonContainer, browser)
this.overlayTrackButton.setVisibility(false)

const showMultiSelect = config.showMultiSelectButton !== false
this.multiTrackSelectButton = new MultiTrackSelectButton(browser, $toggle_button_container.get(0), this, showMultiSelect)
this.multiTrackSelectButton = new MultiTrackSelectButton(toggleButtonContainer, browser, this, showMultiSelect)

this.cursorGuide = new CursorGuide(browser.columnContainer, browser)
this.cursorGuideButton = new CursorGuideButton(toggleButtonContainer, browser)

this.cursorGuideButton = new CursorGuideButton(browser, $toggle_button_container.get(0))
this.centerLineButton = new CenterLineButton(toggleButtonContainer, browser)

this.centerLineButton = new CenterLineButton(browser, $toggle_button_container.get(0))

this.trackLabelControl = new TrackLabelControl($toggle_button_container.get(0), browser)
this.trackLabelControl = new TrackLabelControl(toggleButtonContainer, browser)

// ROI Control
this.roiTableControl = new ROITableControl($toggle_button_container.get(0), browser)
this.roiTableControl = new ROITableControl(toggleButtonContainer, browser)

this.sampleInfoControl = new SampleInfoControl($toggle_button_container.get(0), browser)
this.sampleInfoControl = new SampleInfoControl(toggleButtonContainer, browser)

this.sampleNameControl = new SampleNameControl($toggle_button_container.get(0), browser)
this.sampleNameControl = new SampleNameControl(toggleButtonContainer, browser)

if (true === config.showSVGButton) {
this.saveImageControl = new SaveImageControl($toggle_button_container.get(0), browser)
this.saveImageControl = new SaveImageControl(toggleButtonContainer, browser)
}

if (config.customButtons) {
for (let b of config.customButtons) {
new CustomButton($toggle_button_container.get(0), browser, b)
new CustomButton(toggleButtonContainer, browser, b)
}
}

Expand All @@ -147,18 +150,18 @@ class ResponsiveNavbar {
this.$navigation.hide()
}

this.navbarRightContainer = $navbarRightContainer.get(0)
this.navbarLeftContainer = $navbarLeftContainer.get(0)


}

navbarDidResize() {


const navbarWidth = this.$navigation.width()
const currentClass = this.currentNavbarButtonClass()
if ('igv-navbar-text-button' === currentClass) {
this.textButtonContainerWidth = this.navbarRightContainer.getBoundingClientRect().width
}

const browser = this.browser
const isWGV =
(browser.isMultiLocusWholeGenomeView()) ||
Expand All @@ -175,8 +178,6 @@ class ResponsiveNavbar {

const delta = rightContainerX - leftContainerExtent

// console.log(`Current class ${ currentClass } Delta: ${ StringUtils.numberFormatter(Math.floor(delta))}`)

let navbarButtonClass
const threshold = 8
if ('igv-navbar-text-button' === currentClass && delta < threshold) {
Expand All @@ -188,7 +189,8 @@ class ResponsiveNavbar {
}
}
// Update all the buttons (buttons are listeners)
if(currentClass !== navbarButtonClass) {
if(navbarButtonClass && currentClass !== navbarButtonClass) {
this.currentClass = navbarButtonClass
this.browser.fireEvent('navbar-resize', [navbarButtonClass])
}

Expand Down Expand Up @@ -250,8 +252,9 @@ class ResponsiveNavbar {
}

currentNavbarButtonClass() {
const el = this.$navigation.get(0).querySelector('.igv-navbar-text-button')
return el ? 'igv-navbar-text-button' : 'igv-navbar-icon-button'
return this.currentClass
//const el = this.$navigation.get(0).querySelector('.igv-navbar-text-button')
//return el ? 'igv-navbar-text-button' : 'igv-navbar-icon-button'
}

setEnableTrackSelection(b) {
Expand Down
2 changes: 1 addition & 1 deletion js/roi/roiTableControl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ class ROITableControl extends NavbarButton {

constructor(parent, browser) {

super(browser, parent, [ 'ROI', 'Regions of Interest Table' ], buttonLabel, roiImage, roiImageHover, false)
super(parent, browser, ['ROI', 'Regions of Interest Table'], buttonLabel, roiImage, roiImageHover, false)

this.button.addEventListener('mouseenter', () => {
if (false === browser.doShowROITable) {
Expand Down
2 changes: 1 addition & 1 deletion js/sample/sampleInfoControl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ class SampleInfoControl extends NavbarButton {

constructor(parent, browser) {

super(browser, parent, 'Sample Info', buttonLabel, sampleInfoImage, sampleInfoImageHover, false)
super(parent, browser, 'Sample Info', buttonLabel, sampleInfoImage, sampleInfoImageHover, false)

this.showSampleInfo = false

Expand Down
2 changes: 1 addition & 1 deletion js/sample/sampleNameControl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ class SampleNameControl extends NavbarButton {

constructor(parent, browser) {

super(browser, parent, 'Sample Names', sampleNameButtonLabel, sampleNameImage, sampleNameImageHover, browser.config.showSampleNames)
super(parent, browser, 'Sample Names', sampleNameButtonLabel, sampleNameImage, sampleNameImageHover, browser.config.showSampleNames)

this.button.addEventListener('mouseenter', () => {
if (false === browser.showSampleNames) {
Expand Down
4 changes: 2 additions & 2 deletions js/ui/centerLineButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,9 @@ import { buttonLabel } from "./navbarIcons/buttonLabel.js"

class CenterLineButton extends NavbarButton {

constructor(browser, parent) {
constructor(parent, browser) {

super(browser, parent, 'Center Line', buttonLabel, centerlineImage, centerlineImageHover, browser.config.showCenterGuide)
super(parent, browser, 'Center Line', buttonLabel, centerlineImage, centerlineImageHover, browser.config.showCenterGuide)

this.button.addEventListener('mouseenter', () => {
if (false === browser.doShowCenterLine) {
Expand Down
4 changes: 2 additions & 2 deletions js/ui/cursorGuideButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,9 @@ import { buttonLabel } from "./navbarIcons/buttonLabel.js"

class CursorGuideButton extends NavbarButton {

constructor(browser, parent) {
constructor(parent, browser) {

super(browser, parent, 'Crosshairs', buttonLabel, cursorImage, cursorImageHover, browser.doShowCursorGuide)
super(parent, browser, 'Crosshairs', buttonLabel, cursorImage, cursorImageHover, browser.doShowCursorGuide)

this.button.addEventListener('mouseenter', () => {
if (false === browser.doShowCursorGuide) {
Expand Down
4 changes: 2 additions & 2 deletions js/ui/multiTrackSelectButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import {multiTrackSelectExclusionTypes} from './menuUtils.js'

class MultiTrackSelectButton extends NavbarButton {

constructor(browser, parent, navbar, enableMultiTrackSelection, visibility = true) {
constructor(parent, browser, navbar, enableMultiTrackSelection, visibility = true) {

super(browser, parent, 'Select Tracks', buttonLabel, multiSelectImage, multiSelectImageHover, false)
super(parent, browser, 'Select Tracks', buttonLabel, multiSelectImage, multiSelectImageHover, false)

this.navbar = navbar
this.enableMultiTrackSelection = false // Initial state
Expand Down
5 changes: 3 additions & 2 deletions js/ui/navbarButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import * as DOMUtils from "../ui/utils/dom-utils.js"

class NavbarButton {

constructor(browser, parent, title, buttonLabel, imageSVG, imageHoverSVG, initialButtonState) {
constructor(parent, browser, title, buttonLabel, imageSVG, imageHoverSVG, initialButtonState) {

this.browser = browser

Expand Down Expand Up @@ -85,7 +85,7 @@ class NavbarButton {
}

configureTextButton(textContent) {

console.log(`text ${this.title}`)
this.button.classList.add('igv-navbar-text-button')

const tempDiv = document.createElement('div')
Expand All @@ -100,6 +100,7 @@ class NavbarButton {
}

configureIconButton() {
console.log(`icon ${this.title}`)
this.button.classList.add('igv-navbar-icon-button')
}

Expand Down
4 changes: 2 additions & 2 deletions js/ui/overlayTrackButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import MergedTrack from "../feature/mergedTrack.js"


class OverlayTrackButton extends NavbarButton {
constructor(browser, parent) {
constructor(parent, browser) {

super(browser, parent, 'Overlay Tracks', buttonLabel, overlayTrackImage, overlayTrackImageHover, false)
super(parent, browser, 'Overlay Tracks', buttonLabel, overlayTrackImage, overlayTrackImageHover, false)

this.button.addEventListener('mouseenter', () => this.setState(true))
this.button.addEventListener('mouseleave', () => this.setState(false))
Expand Down
2 changes: 1 addition & 1 deletion js/ui/saveImageControl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import { buttonLabel } from "./navbarIcons/buttonLabel.js"
class SaveImageControl extends NavbarButton {
constructor(parent, browser) {

super(browser, parent, 'Save Image', buttonLabel, imageSaveImageSVG, imageSaveImageHoverSVG, false)
super(parent, browser, 'Save Image', buttonLabel, imageSaveImageSVG, imageSaveImageHoverSVG, false)

this.button.addEventListener('mouseenter', () => this.setState(true))

Expand Down
2 changes: 1 addition & 1 deletion js/ui/trackLabelControl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ class TrackLabelControl extends NavbarButton {

constructor(parent, browser) {

super(browser, parent, 'Track Labels', buttonLabel, trackLabelsImage, trackLabelsImageHover, browser.config.showTrackLabels)
super(parent, browser, 'Track Labels', buttonLabel, trackLabelsImage, trackLabelsImageHover, browser.config.showTrackLabels)

this.button.addEventListener('mouseenter', () => {
if (false === browser.doShowTrackLabels) {
Expand Down

0 comments on commit 51cb7e4

Please sign in to comment.