Skip to content

Commit

Permalink
Update region dashboard to gene dashboard styling.
Browse files Browse the repository at this point in the history 
  Align region and gene pages formatting.
Stub tab on region page as structural variants placeholder.
  • Loading branch information
@grosscol
grosscol committed Nov 15, 2023
1 parent d11935f commit c70b46b
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 62 deletions.
163 changes: 122 additions & 41 deletions src/components/RegionDashboard.vue
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,117 @@
<template>
<div id="bravo-plot">
<RegionInfo/>
<div class="row justify-content-center" style="border-bottom: 1px solid #cccccc;margin-bottom: 5px;">
<div class="col-12 col-sm-11 col-md-11">
<div class="bravo-tab">
<div class="bravo-tab-item bravo-tab-item-selected">
<a href="#">SNVs and Indels</a>
</div>
<div id="dashboard">
<div class="container-fluid">
<div class="row justify-content-center px-5">
<div class="col-md">
<RegionInfo v-if="positionResolved"/>
</div>
</div>

<div id="tab-headers" class="row justify-content-center">
<div class="col-md px-5">
<ul class="nav nav-tabs" style="margin-bottom: 5px">
<li class="nav-item">
<a :class=tabClass(showTab.snv) href="#snv" @click="toggleTab('snv')">SNVs and Indels</a>
</li>
<li class="nav-item">
<a :class=tabClass(showTab.structvar) href="#structvar" @click="toggleTab('structvar')">Structural Variants</a>
</li>
</ul>
</div>
</div>

<!-- strucvar tab -->
<div id="structvar-tab" v-if="showTab.structvar">
<div class="row justify-content-left px-5" >
<div class="col-md-11">
<h4>Structural Variants Visual</h4>
<pre> Visualization Placeholder </pre>
</div>
<div class="col-md-11">
<h4>Structural Variants Description</h4>
<pre> Description Placeholder </pre>
</div>
</div>
</div>
<div id="bravoviz">
<div class="parentMenu">
<ToggleList list-title="Panels" list-group="showPanels" :list-vars="showPanels"
@varToggled="handleInfoViewToggle" :icon="panelsIcon"/>
<ToggleList list-title="Columns" list-group="showCols" :list-vars="showCols"
@varToggled="handleInfoViewToggle" :icon="columnsIcon"/>

<!-- don't show download button on mobile devices i.e. devices with very small screens -->
<div class="d-none d-sm-inline" style="display: inline-block;">
<button type="button" class="parentMenu__button" v-on:click="doDownload++">CSV
<font-awesome-icon style="background-color: transparent; display: inline-block; vertical-align: middle" :icon="downloadIcon"></font-awesome-icon>
</button>

<!-- SNVs tab -->
<div id="snv-tab" v-if="showTab.snv">
<div class="row justify-content-left px-5">
<div class="col-md-5">
<div >
<ToggleList list-title="Panels" list-group="showPanels" :list-vars="showPanels"
@varToggled="handleInfoViewToggle" :icon="panelsIcon"/>
<ToggleList list-title="Columns" list-group="showCols" :list-vars="showCols"
@varToggled="handleInfoViewToggle" :icon="columnsIcon"/>

<div class="d-none d-sm-inline" style="display: inline-block;">
<button type="button" class="parentMenu__button" v-on:click="doDownload++">
CSV
<font-awesome-icon style="background-color: transparent; display: inline-block; vertical-align: middle" :icon="downloadIcon"></font-awesome-icon>
</button>
</div>
</div>
</div>
</div>
<div style="position: relative; min-height: 20px">
<RegionSummaries v-if="showPanels.summaries.val" :filterArray='filterArray'
@close="showPanels.summaries.val = false"/>
<SeqDepth v-if="showPanels.seqDepth.val" @close="showPanels.seqDepth.val = false"
:hoveredVarPosition="hoveredVarPosition" :segmentBounds="segmentBounds"
:segmentRegions="segmentRegions" :givenWidth="childWidth" :givenMargins="childMargins"/>
<GeneBars v-if="showPanels.genes.val" @close="showPanels.genes.val = false"
:hoveredVarPosition="hoveredVarPosition" :segmentBounds="segmentBounds"
:segmentRegions="segmentRegions" :givenWidth="childWidth" :givenMargins="childMargins"/>
<RegionSnvCount v-if="showPanels.snvCount.val" @close="showPanels.snvCount.val = false"
:segmentBounds="segmentBounds"
:segmentRegions="segmentRegions" :givenWidth="childWidth" :givenMargins="childMargins"
:filters="filterArray" :visibleVariants="visibleVariants"/>
<BpCoordBar :segmentBounds="segmentBounds" :segmentRegions="segmentRegions"
:givenWidth="childWidth" :givenMargins="childMargins" />
<FilterBar @filterChange='handleFilterChange'/>
<RegionSNVTable :filters="filterArray" :doDownload="doDownload"
@scroll='handleTableScroll' @hover='handleTableHover'
@openModal="handleOpenModal"/>

<div class="row justify-content-left px-5">
<div class="col-md" v-if="positionResolved">
<RegionSummaries v-if="showPanels.summaries.val" :filterArray='filterArray'
@close="showPanels.summaries.val = false"/>
</div>
</div>
</div>
<SNVTableAnnotationModal :showModal="showModal" :rowData="modalData" @closeModal="handleCloseModal"/>

<div class="row justify-content-left">
<div class="col-md px-5" v-if="positionResolved">
<SeqDepth v-if="showPanels.seqDepth.val" @close="showPanels.seqDepth.val = false"
:hoveredVarPosition="hoveredVarPosition" :segmentBounds="segmentBounds"
:segmentRegions="segmentRegions"/>
</div>
</div>

<div class="row justify-content-left">
<div class="col-md px-5" v-if="positionResolved">
<GeneBars v-if="showPanels.genes.val" @close="showPanels.genes.val = false"
:hoveredVarPosition="hoveredVarPosition" :segmentBounds="segmentBounds"
:segmentRegions="segmentRegions" :givenWidth="childWidth" :givenMargins="childMargins"/>
</div>

</div>

<div class="row justify-content-left">
<div class="col-md px-5" v-if="positionResolved">
<RegionSnvCount v-if="showPanels.snvCount.val" @close="showPanels.snvCount.val = false"
:segmentBounds="segmentBounds"
:segmentRegions="segmentRegions" :givenWidth="childWidth" :givenMargins="childMargins"
:filters="filterArray" :visibleVariants="visibleVariants"/>
</div>
</div>

<div class="row justify-content-left">
<div class="col-md px-5" v-if="positionResolved">
<BpCoordBar :segmentBounds="segmentBounds" :segmentRegions="segmentRegions"
:givenWidth="childWidth" :givenMargins="childMargins" />
</div>
</div>

<div class="row justify-content-left">
<div class="col-md px-5" v-if="positionResolved">
<FilterBar @filterChange='handleFilterChange'/>
</div>
</div>
<div class="row justify-content-left">
<div class="col-md px-5" v-if="positionResolved">
<RegionSNVTable :filters="filterArray" :doDownload="doDownload"
@scroll='handleTableScroll' @hover='handleTableHover'
@openModal="handleOpenModal"/>
</div>
</div>

</div><!-- SNVs tab end -->

</div>
<SNVTableAnnotationModal :showModal="showModal" :rowData="modalData" @closeModal="handleCloseModal"/>
</div>
</template>

<script>
Expand Down Expand Up @@ -93,6 +158,11 @@ export default {
downloadIcon: faDownload,
doDownload: 0,
showTab: {
structvar: false,
snv: true
},
showPanels: {
summaries: {title: "Summary", val: true},
seqDepth: {title: "Avg. Depth", val: true},
Expand Down Expand Up @@ -153,6 +223,9 @@ export default {
filterArray: function() {
return(Object.values(this.filter).flat(1))
},
positionResolved: function() {
return( this.chrom && this.start && this.stop )
},
},
methods: {
handleOpenModal: function(rowData){
Expand All @@ -170,6 +243,14 @@ export default {
this[attrName] = !this[attrName]
this.showTableMenuDropDown = !this.showTableMenuDropDown
},
toggleTab: function(tabName) {
this.showTab.snv = false
this.showTab.structvar = false
this.showTab[tabName] = true
},
tabClass: function(isActive) {
return isActive ? 'nav-link active' : 'nav-link'
},
onOffStyle: function(boolVar){
return boolVar ? 'display: inline;' : 'display: inline; visibility: hidden;'
},
Expand Down
20 changes: 7 additions & 13 deletions src/components/infoblock/RegionInfo.vue
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,12 @@
<template>
<div class="child-component">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1 class="display-5">{{regionTitle}}</h1>
<ul class="list-unstyled">
<li class="list-item">Region length: {{regionLength.toLocaleString()}} bp</li>
<li class="list-item">External resources:
<span><a v-bind:href="extUrl">UCSC Browser</a></span>
</li>
</ul>
</div>
</div>
</div>
<h1 class="display-5">{{regionTitle}}</h1>
<ul class="list-unstyled">
<li class="list-item">Region length: {{regionLength.toLocaleString()}} bp</li>
<li class="list-item">External resources:
<span><a v-bind:href="extUrl">UCSC Browser</a></span>
</li>
</ul>
</div>
</template>

Expand Down
9 changes: 1 addition & 8 deletions src/pages/region/RegionPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,7 @@
<NavBar style="margin-left: 5px;">
<SearchBox :autofocus="false"/>
</NavBar>

<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-sm-11 col-md-11">
<RegionDashboard/>
</div>
</div>
</div>
<RegionDashboard/>
</template>

<script>
Expand Down

0 comments on commit c70b46b

Please sign in to comment.