Skip to content

Commit

Permalink
Merge pull request #294 from igvteam/juicebox_panel_ui_make_over
Browse files Browse the repository at this point in the history 
Juicebox Panel - Tabbed Maps UI Improvements
  • Loading branch information
@turner
turner authored Sep 12, 2024
2 parents be07048 + caf40c2 commit 4f29d77
Show file tree
Hide file tree
Showing 6 changed files with 111 additions and 131 deletions.
167 changes: 83 additions & 84 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -312,6 +312,7 @@
</nav>

<main id="spacewalk-main" role="main">

<div id="spacewalk-root-container">

<!-- Render Settings Button -->
Expand Down Expand Up @@ -500,103 +501,101 @@

<div class="card-header">

<div class="spacewalk_card_drag_container">
<i class="fas fa-square-full"></i>
<i class="fas fa-times-circle" data-target="spacewalk_ui_manager_ui_controls_juicebox"></i>
</div>

<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button id="spacewalk-juicebox-panel-hic-map-tab" class="nav-link active" data-bs-toggle="tab" data-bs-target="" type="button" role="tab">Hi-C Map</button>
</li>
<li class="nav-item" role="presentation">
<button id="spacewalk-juicebox-panel-live-map-tab" class="nav-link" data-bs-toggle="tab" data-bs-target="" type="button" role="tab">Live Map</button>
</li>
</ul>

<ul class="list-group list-group-flush">

<!-- drag handle-->
<li class="list-group-item">
<div class="spacewalk_card_drag_container">
<i class="fas fa-square-full"></i>
<div class="dropdown">
<a id="hic-contact-map-dropdown" class="dropdown-toggle" data-bs-toggle="dropdown">
Juicebox File
</a>
<ul class="dropdown-menu">
<!-- Live Contact Frequency Map -->
<li>
<a id="hic-live-contact-frequency-map-button" class="dropdown-item" href="#" role="button">
Load Live Contact Frequency Map ...
</a>
</li>

<!-- Juicebox Archive Map -->
<li>
<a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#hic-contact-map-modal">
Load Juicebox Archive Maps ...
</a>
</li>

<!-- ENCODE Maps -->
<li>
<button class="dropdown-item" id="hic-encode-hosted-contact-map-presentation-button" type="button" data-bs-toggle="modal" data-bs-target="#hic-encode-hosted-contact-map-modal">
Load ENCODE Maps ...
</button>
</li>

<!-- Local Map File -->
<li>
<label class="dropdown-item btn btn-default btn-file">
<div class="igv-app-dropdown-item-cloud-storage">
<div>
Load Local Map File ...
</div>
<div>
<input name="contact-map" type="file" style="display: none;">
</div>
<!-- Hi-C map file chooser -->
<li id="hic-file-chooser-dropdown" class="list-group-item mx-auto py-1 ps-1">
<div class="dropdown">
<button id="hic-contact-map-dropdown" class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Load Hi-C Map
</button>
<ul class="dropdown-menu">

<!-- Juicebox Archive Map -->
<li>
<a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#hic-contact-map-modal">
Load Juicebox Archive Maps ...
</a>
</li>

<!-- ENCODE Maps -->
<li>
<button class="dropdown-item" id="hic-encode-hosted-contact-map-presentation-button" type="button" data-bs-toggle="modal" data-bs-target="#hic-encode-hosted-contact-map-modal">
Load ENCODE Maps ...
</button>
</li>

<!-- Local Map File -->
<li>
<label class="dropdown-item btn btn-default btn-file">
<div class="igv-app-dropdown-item-cloud-storage">
<div>
Load Local Map File ...
</div>
</label>
</li>

<!-- Dropbox -->
<li>
<div class="dropdown-item">
<div id="hic-contact-map-dropdown-dropbox-button" class="igv-app-dropdown-item-cloud-storage">
<div>Load Dropbox Map File ...</div>
<div>
<img src="img/dropbox-dropdown-menu-item.png" width="18" height="18">
</div>
<div>
<input name="contact-map" type="file" style="display: none;">
</div>
</div>
</li>

<!-- Google Drive -->
<li>
<div class="dropdown-item">
<div id="hic-contact-map-dropdown-google-drive-button" class="igv-app-dropdown-item-cloud-storage">
<div>Load Google Drive Map File ...</div>
<div><img src="img/googledrive-dropdown-menu-item.png" width="18" height="18"></div>
</label>
</li>

<!-- Dropbox -->
<li>
<div class="dropdown-item">
<div id="hic-contact-map-dropdown-dropbox-button" class="igv-app-dropdown-item-cloud-storage">
<div>Load Dropbox Map File ...</div>
<div>
<img src="img/dropbox-dropdown-menu-item.png" width="18" height="18">
</div>
</div>
</li>

<!-- URL -->
<li>
<a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#hic-load-url-modal">
Load Map URL ...
</a>
</li>
</ul>
</div>
<i class="fas fa-times-circle" data-target="spacewalk_ui_manager_ui_controls_juicebox"></i>
</div>
</li>

<!-- Google Drive -->
<li>
<div class="dropdown-item">
<div id="hic-contact-map-dropdown-google-drive-button" class="igv-app-dropdown-item-cloud-storage">
<div>Load Google Drive Map File ...</div>
<div><img src="img/googledrive-dropdown-menu-item.png" width="18" height="18"></div>
</div>
</div>
</li>

<!-- URL -->
<li>
<a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#hic-load-url-modal">
Load Map URL ...
</a>
</li>
</ul>
</div>
</li>

<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button id="spacewalk-juicebox-panel-hic-map-tab" class="nav-link active" data-bs-toggle="tab" data-bs-target="" type="button" role="tab">Hi-C Map</button>
</li>
<li class="nav-item" role="presentation">
<button id="spacewalk-juicebox-panel-live-map-tab" class="nav-link" data-bs-toggle="tab" data-bs-target="" type="button" role="tab">Live Map</button>
</li>
</ul>

<!-- live contact map threshold widget -->
<li id="hic-live-contact-frequency-map-threshold-widget" class="list-group-item py-1 ps-1">
<div class="input-group input-group-sm">
<div class="input-group-text">Threshold</div>
<input id="spacewalk_contact_frequency_map_adjustment_select_input" type="text" class="form-control text-center">
<button id="spacewalk_contact_frequency_map__button" class="btn btn-secondary" type="button">Enter</button>
<div class="d-flex justify-content-between align-items-center">
<div class="input-group input-group-sm">
<div class="input-group-text">Threshold</div>
<input id="spacewalk_contact_frequency_map_adjustment_select_input" type="text" class="form-control text-center">
<button id="spacewalk_contact_frequency_map_button" class="btn btn-secondary" type="button">Enter</button>
</div>
<button id="hic-live-contact-frequency-map-button" class="btn btn-sm btn-outline-secondary" type="button">Calculate Live Map</button>
</div>
</li>

</ul>

</div>
Expand Down
7 changes: 7 additions & 0 deletions js/juicebox/juiceboxPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,9 @@ class JuiceboxPanel extends Panel {

this.browser.contactMatrixView.assessPanelTabSelection(false)

document.getElementById('hic-live-contact-frequency-map-threshold-widget').style.display = 'none'
document.getElementById('hic-file-chooser-dropdown').style.display = 'block'

const hicMapTab = document.getElementById('spacewalk-juicebox-panel-hic-map-tab');
const liveMapTab = document.getElementById('spacewalk-juicebox-panel-live-map-tab');

Expand All @@ -147,8 +150,12 @@ class JuiceboxPanel extends Panel {
for (const tab of tabs) {
tab.addEventListener('show.bs.tab', event => {
if (hicMapTab.id === event.target.id) {
document.getElementById('hic-live-contact-frequency-map-threshold-widget').style.display = 'none'
document.getElementById('hic-file-chooser-dropdown').style.display = 'block'
this.browser.contactMatrixView.assessPanelTabSelection(false)
} else if (liveMapTab.id === event.target.id) {
document.getElementById('hic-live-contact-frequency-map-threshold-widget').style.display = 'block'
document.getElementById('hic-file-chooser-dropdown').style.display = 'none'
this.browser.contactMatrixView.assessPanelTabSelection(true)
}
console.log(`Juicebox panel: ${ event.target.id } tab selection`)
Expand Down
2 changes: 1 addition & 1 deletion js/juicebox/liveContactMapService.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ class LiveContactMapService {
this.input = document.querySelector('#spacewalk_contact_frequency_map_adjustment_select_input')
this.input.value = distanceThreshold.toString()

document.querySelector('#spacewalk_contact_frequency_map__button').addEventListener('click', () => {
document.querySelector('#spacewalk_contact_frequency_map_button').addEventListener('click', () => {

this.distanceThreshold = clamp(parseInt(this.input.value, 10), 0, maxDistanceThreshold)

Expand Down
42 changes: 13 additions & 29 deletions styles/_juicebox_panel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,51 +9,35 @@

.card-header {
width: 100%;
.list-group {
width: 100%;

.spacewalk_card_drag_container {

i.fa-grip-horizontal {
cursor: unset;
color: transparent;
background-color: transparent;
}
padding-bottom: unset;

a.dropdown-toggle {
color: unset;
}
}

.list-group-item {
padding: 0;
.spacewalk_card_drag_container {
i.fa-grip-horizontal {
cursor: unset;
color: transparent;
background-color: transparent;
}
}

.list-group-item:last-child {
width: 256px;
.list-group {
width: 100%;
#hic-live-contact-frequency-map-threshold-widget.list-group-item {
div.input-group {
width: 200px;
}
}

}
}

.card-body {

#spacewalk_hic_url_form_group {
width: 95%;
margin-top: 4px;
margin-bottom: 4px;
}

#spacewalk_juicebox_root_container {

.hic-root {
margin: 0;
border-color: transparent;
border-width: thin;
border-radius: .25rem;
}
}

}

}
22 changes: 6 additions & 16 deletions styles/app.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 4f29d77

Please sign in to comment.