Skip to content

Commit

Permalink
feat: more consistent UI design on seqvar details page (#217) (#279)
Browse files Browse the repository at this point in the history
  • Loading branch information
@holtgrewe
holtgrewe authored Dec 12, 2023
1 parent 52c8a45 commit b040108
Show file tree
Hide file tree
Showing 5 changed files with 172 additions and 188 deletions.
4 changes: 2 additions & 2 deletions frontend/src/views/GeneDetailView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { defineAsyncComponent, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import BookmarkListItem from '@/components/BookmarkListItem.vue'
import FooterDefault from '@/components/FooterDefault.vue'
import { type GenomeBuild, guessGenomeBuild } from '@/lib/genomeBuilds'
import { lookupGene } from '@/lib/query'
import { scrollToSection } from '@/lib/utils'
Expand Down Expand Up @@ -129,8 +130,6 @@ const SECTIONS: Section[] = [
<v-col cols="2">
<div v-if="geneInfoStore.storeState == StoreState.Active">
<v-list v-model:opened="openedSection" rounded="lg">
<v-list-subheader> GENE </v-list-subheader>

<BookmarkListItem :id="geneInfoStore.hgncId ?? ''" :type="'gene'" />

<v-list-group value="gene">
Expand Down Expand Up @@ -209,6 +208,7 @@ const SECTIONS: Section[] = [
</div>
</v-col>
</v-row>
<FooterDefault />
</v-container>
</v-main>
</v-app>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/views/HomeView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,8 +111,8 @@ const performExampleSearch = (example: Example) => {
</v-col>
<v-spacer></v-spacer>
</v-row>
<FooterDefault />
</v-container>
</v-main>
<FooterDefault />
</v-app>
</template>
331 changes: 169 additions & 162 deletions frontend/src/views/SeqvarDetailsView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import BookmarkListItem from '@/components/BookmarkListItem.vue'
import FooterDefault from '@/components/FooterDefault.vue'
import { type GenomeBuild, guessGenomeBuild } from '@/lib/genomeBuilds'
import { type Seqvar } from '@/lib/genomicVars'
import { resolveSeqvar } from '@/lib/query'
Expand Down Expand Up @@ -221,171 +222,177 @@ const SECTIONS: { [key: string]: Section[] } = {

<template>
<v-app>
<v-snackbar v-model="errSnackbarShow" multi-line>
{{ errSnackbarMsg }}

<template #actions>
<v-btn color="red" variant="text" @click="errSnackbarShow = false"> Close </v-btn>
</template>
</v-snackbar>

<PageHeader />
<v-navigation-drawer :elevation="3" :permanent="true">
<div v-if="seqvarInfoStore.storeState == StoreState.Active">
<v-list v-model:opened="openedSection" density="compact">
<BookmarkListItem :id="idForBookmark" type="seqvar" />

<v-list-subheader> GENE </v-list-subheader>

<template v-if="geneInfoStore.hgncId?.length">
<v-list-group value="gene">
<template #activator="{ props: vProps }">
<v-list-item
:value="vProps"
prepend-icon="mdi-dna"
v-bind="vProps"
class="text-no-break"
>
Gene
<span class="font-italic">
{{
seqvarInfoStore?.geneInfo?.hgnc?.symbol ||
seqvarInfoStore?.geneInfo?.hgnc?.agr
}}
</span>
</v-list-item>
</template>

<v-list-item
v-for="section in SECTIONS.GENE"
:id="`${section.id}-nav`"
:key="section.id"
density="compact"
@click="router.push({ hash: `#${section.id}` })"
<v-main class="bg-grey-lighten-2">
<v-container>
<v-row>
<v-col cols="2">
<div v-if="seqvarInfoStore.storeState == StoreState.Active">
<v-list v-model:opened="openedSection" density="compact" rounded="lg">
<BookmarkListItem :id="idForBookmark" type="seqvar" />

<template v-if="geneInfoStore.hgncId?.length">
<v-list-group value="gene">
<template #activator="{ props: vProps }">
<v-list-item
:value="vProps"
prepend-icon="mdi-dna"
v-bind="vProps"
class="text-no-break"
>
Gene
<span class="font-italic">
{{
seqvarInfoStore?.geneInfo?.hgnc?.symbol ||
seqvarInfoStore?.geneInfo?.hgnc?.agr
}}
</span>
</v-list-item>
</template>

<v-list-item
v-for="section in SECTIONS.GENE"
:id="`${section.id}-nav`"
:key="section.id"
density="compact"
@click="router.push({ hash: `#${section.id}` })"
>
<v-list-item-title class="text-no-break">
{{ section.title }}
</v-list-item-title>
</v-list-item>
</v-list-group>
</template>
<template v-else>
<v-list-item prepend-icon="mdi-dna" class="font-italic text-grey-darken-2">
No Gene
</v-list-item>
</template>

<v-list-group value="seqvar">
<template #activator="{ props: vProps }">
<v-list-item
:value="vProps"
v-bind="vProps"
prepend-icon="mdi-magnify-expand"
class="text-no-wrap"
>
Variant
</v-list-item>
</template>

<v-list-item
v-for="section in SECTIONS.SEQVAR"
:id="`${section.id}-nav`"
:key="section.id"
density="compact"
@click="router.push({ hash: `#${section.id}` })"
>
<v-list-item-title class="text-no-break">
{{ section.title }}
</v-list-item-title>
</v-list-item>
</v-list-group>
</v-list>
</div>
</v-col>

<v-col cols="10">
<v-alert v-if="errorMessage?.length" type="warning" class="mb-6">
<div>
{{ errorMessage }}
</div>
<v-btn
:to="{ name: 'home' }"
prepend-icon="mdi-arrow-left-circle-outline"
class="mt-3"
variant="outlined"
color="white"
>
<v-list-item-title class="text-no-break">
{{ section.title }}
</v-list-item-title>
</v-list-item>
</v-list-group>
</template>
<template v-else>
<v-list-item prepend-icon="mdi-dna" class="font-italic text-grey-darken-2">
No Gene
</v-list-item>
</template>

<v-list-group value="seqvar">
<template #activator="{ props: vProps }">
<v-list-item
:value="vProps"
v-bind="vProps"
prepend-icon="mdi-magnify-expand"
class="text-no-wrap"
>
Variant
</v-list-item>
Back to home
</v-btn>
</v-alert>

<template v-if="seqvarInfoStore?.geneInfo">
<div id="gene-overview">
<GeneOverviewCard :gene-info="seqvarInfoStore?.geneInfo" />
</div>
<div id="gene-pathogenicity">
<GenePathogenicityCard :gene-info="seqvarInfoStore?.geneInfo" />
</div>
<div id="gene-conditions">
<GeneConditionsCard :gene-info="seqvarInfoStore?.geneInfo" :hpo-terms="[]" />
</div>
<div id="gene-expression">
<GeneExpressionCard
:gene-symbol="seqvarInfoStore?.geneInfo?.hgnc?.symbol"
:expression-records="seqvarInfoStore?.geneInfo?.gtex?.records"
:ensembl-gene-id="seqvarInfoStore?.geneInfo?.gtex?.ensemblGeneId"
/>
</div>
<div v-if="geneInfoStore?.geneClinvar && seqvar?.genomeBuild" id="gene-clinvar">
<GeneClinvarCard
:gene-clinvar="geneInfoStore.geneClinvar"
:transcripts="geneInfoStore.transcripts"
:genome-build="seqvar?.genomeBuild"
:gene-info="geneInfoStore?.geneInfo"
:per-freq-counts="geneInfoStore?.geneClinvar?.perFreqCounts"
/>
</div>
</template>

<v-list-item
v-for="section in SECTIONS.SEQVAR"
:id="`${section.id}-nav`"
:key="section.id"
density="compact"
@click="router.push({ hash: `#${section.id}` })"
>
<v-list-item-title class="text-no-break">
{{ section.title }}
</v-list-item-title>
</v-list-item>
</v-list-group>
</v-list>
</div>
</v-navigation-drawer>

<v-main class="mb-3 mx-3">
<v-alert v-if="errorMessage?.length" type="warning" class="mb-6">
<div>
{{ errorMessage }}
</div>
<v-btn
:to="{ name: 'home' }"
prepend-icon="mdi-arrow-left-circle-outline"
class="mt-3"
variant="outlined"
color="white"
>
Back to home
</v-btn>
</v-alert>

<template v-if="seqvarInfoStore?.geneInfo">
<div id="gene-overview" class="mt-3">
<GeneOverviewCard :gene-info="seqvarInfoStore?.geneInfo" />
</div>
<div id="gene-pathogenicity">
<GenePathogenicityCard :gene-info="seqvarInfoStore?.geneInfo" />
</div>
<div id="gene-conditions">
<GeneConditionsCard :gene-info="seqvarInfoStore?.geneInfo" :hpo-terms="[]" />
</div>
<div id="gene-expression">
<GeneExpressionCard
:gene-symbol="seqvarInfoStore?.geneInfo?.hgnc?.symbol"
:expression-records="seqvarInfoStore?.geneInfo?.gtex?.records"
:ensembl-gene-id="seqvarInfoStore?.geneInfo?.gtex?.ensemblGeneId"
/>
</div>
<div v-if="geneInfoStore?.geneClinvar && seqvar?.genomeBuild" id="gene-clinvar">
<GeneClinvarCard
:gene-clinvar="geneInfoStore.geneClinvar"
:transcripts="geneInfoStore.transcripts"
:genome-build="seqvar?.genomeBuild"
:gene-info="geneInfoStore?.geneInfo"
:per-freq-counts="geneInfoStore?.geneClinvar?.perFreqCounts"
/>
</div>
</template>
<div>
<div class="text-h4 mt-6 mb-3 ml-1">
Variant Details
<template v-if="orig">
<small class="font-italic">
{{ orig }}
</small>
</template>
</div>
<div id="seqvar-clinsig">
<ClinsigCard :seqvar="seqvarInfoStore.seqvar" @error-display="handleDisplayError" />
</div>
<div id="seqvar-csq" class="mt-3">
<VariantDetailsTxCsq :tx-csq="seqvarInfoStore.txCsq" />
</div>
<div id="seqvar-clinvar" class="mt-3">
<VariantDetailsClinvar :clinvar="seqvarInfoStore.varAnnos?.clinvar" />
</div>
<div id="seqvar-freqs" class="mt-3">
<VariantDetailsFreqs
:seqvar="seqvarInfoStore.seqvar"
:var-annos="seqvarInfoStore.varAnnos"
/>
</div>
<div id="seqvar-scores" class="mt-3">
<VariantScoresCard :var-annos="seqvarInfoStore.varAnnos" />
</div>
<div id="seqvar-tools" class="mt-3">
<VariantToolsCard
:seqvar="seqvarInfoStore.seqvar"
:var-annos="seqvarInfoStore.varAnnos"
/>
</div>
<div id="seqvar-ga4ghbeacons" class="mt-3">
<BeaconNetworkCard :seqvar="seqvarInfoStore.seqvar" />
</div>
<div id="seqvar-variantvalidator" class="mt-3">
<VariantValidatorCard :seqvar="seqvarInfoStore.seqvar" />
</div>
</div>
<div>
<div class="text-h4 mt-6 mb-3 ml-1">
Variant Details
<template v-if="orig">
<small class="font-italic">
{{ orig }}
</small>
</template>
</div>
<div id="seqvar-clinsig">
<ClinsigCard :seqvar="seqvarInfoStore.seqvar" @error-display="handleDisplayError" />
</div>
<div id="seqvar-csq" class="mt-3">
<VariantDetailsTxCsq :tx-csq="seqvarInfoStore.txCsq" />
</div>
<div id="seqvar-clinvar" class="mt-3">
<VariantDetailsClinvar :clinvar="seqvarInfoStore.varAnnos?.clinvar" />
</div>
<div id="seqvar-freqs" class="mt-3">
<VariantDetailsFreqs
:seqvar="seqvarInfoStore.seqvar"
:var-annos="seqvarInfoStore.varAnnos"
/>
</div>
<div id="seqvar-scores" class="mt-3">
<VariantScoresCard :var-annos="seqvarInfoStore.varAnnos" />
</div>
<div id="seqvar-tools" class="mt-3">
<VariantToolsCard
:seqvar="seqvarInfoStore.seqvar"
:var-annos="seqvarInfoStore.varAnnos"
/>
</div>
<div id="seqvar-ga4ghbeacons" class="mt-3">
<BeaconNetworkCard :seqvar="seqvarInfoStore.seqvar" />
</div>
<div id="seqvar-variantvalidator" class="mt-3">
<VariantValidatorCard :seqvar="seqvarInfoStore.seqvar" />
</div>
</div>
</v-col>
</v-row>
<FooterDefault />
</v-container>

<!-- VSnackbar for displaying errors -->
<v-snackbar v-model="errSnackbarShow" multi-line>
{{ errSnackbarMsg }}

<template #actions>
<v-btn color="red" variant="text" @click="errSnackbarShow = false"> Close </v-btn>
</template>
</v-snackbar>
</v-main>
</v-app>
</template>
3 changes: 0 additions & 3 deletions frontend/src/views/__tests__/GeneDetailView.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,9 +84,6 @@ describe.concurrent('GeneDetailView', async () => {
it('renders info-cards and navigation drawer', async () => {
const { wrapper } = await makeWrapper()

const navigationDrawer = wrapper.find('.v-navigation-drawer')
expect(navigationDrawer.exists()).toBe(true)

// Renders the anchors
const geneOverview = wrapper.find('#gene-overview')
const genePathogencity = wrapper.find('#gene-pathogenicity')
Expand Down
Loading

0 comments on commit b040108

Please sign in to comment.