Skip to content

Commit

Permalink
Start adding progress indicators (#2)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mihailefter
mihailefter committed May 25, 2021
1 parent 3e36b94 commit 2e5df1f
Show file tree
Hide file tree
Showing 2 changed files with 124 additions and 85 deletions.
171 changes: 94 additions & 77 deletions src/components/ReferenceInformation.vue
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,97 @@
<template>
<div>
<v-expansion-panels
multiple
flat
<v-progress-linear
indeterminate
color="cyan"
class="mt-5"
tile
v-if="record"
v-model="panel"
>
<v-expansion-panel v-if="record">
<v-expansion-panel-header class="overline blue-grey--text text"
>Reference ID: {{ record.id }}</v-expansion-panel-header
>
<v-expansion-panel-content>
<v-list shaped>
<v-list-item v-for="(detail, index) in record.details" :key="index">
<v-list-item-title color="blue">{{
detail.name
}}</v-list-item-title>
<v-list-item-subtitle class="text-right">{{
detail.value
}}</v-list-item-subtitle>
</v-list-item>
</v-list>
</v-expansion-panel-content>
</v-expansion-panel>
v-if="progress"
></v-progress-linear>
<div v-if="!progress && no_response">
Reference information not retrieved.
</div>
<div v-if="!progress && !no_response">
<v-expansion-panels
multiple
flat
class="mt-5"
tile
v-if="record"
v-model="panel"
>
<v-expansion-panel v-if="record">
<v-expansion-panel-header class="overline blue-grey--text text"
>Reference ID: {{ record.id }}</v-expansion-panel-header
>
<v-expansion-panel-content>
<v-list shaped>
<v-list-item
v-for="(detail, index) in record.details"
:key="index"
>
<v-list-item-title color="blue">{{
detail.name
}}</v-list-item-title>
<v-list-item-subtitle class="text-right">{{
detail.value
}}</v-list-item-subtitle>
</v-list-item>
</v-list>
</v-expansion-panel-content>
</v-expansion-panel>

<v-expansion-panel v-if="gene">
<v-expansion-panel-header
class="overline blue-grey--text text--lighten-2"
>selected transcript gene name:
{{ gene.id }}</v-expansion-panel-header
>
<v-expansion-panel-content>
<v-list>
<v-list-item v-for="(detail, index) in gene.details" :key="index">
<v-list-item-title>{{ detail.name }}</v-list-item-title>
<v-list-item-subtitle class="text-right">{{
detail.value
}}</v-list-item-subtitle>
</v-list-item>
</v-list>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel v-if="gene">
<v-expansion-panel-header
class="overline blue-grey--text text--lighten-2"
>selected transcript gene name:
{{ gene.id }}</v-expansion-panel-header
>
<v-expansion-panel-content>
<v-list>
<v-list-item v-for="(detail, index) in gene.details" :key="index">
<v-list-item-title>{{ detail.name }}</v-list-item-title>
<v-list-item-subtitle class="text-right">{{
detail.value
}}</v-list-item-subtitle>
</v-list-item>
</v-list>
</v-expansion-panel-content>
</v-expansion-panel>

<v-expansion-panel v-if="selector">
<v-expansion-panel-header class="overline blue-grey--text text"
>Selected transcript ID: {{ selector.id }}</v-expansion-panel-header
>
<v-expansion-panel-content>
<v-list shaped>
<v-list-item
v-for="(detail, index) in selector.details"
:key="index"
>
<v-list-item-title>{{ detail.name }}</v-list-item-title>
<v-list-item-subtitle class="text-right">{{
detail.value
}}</v-list-item-subtitle>
</v-list-item>
</v-list>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
<v-expansion-panel v-if="selector">
<v-expansion-panel-header class="overline blue-grey--text text"
>Selected transcript ID: {{ selector.id }}</v-expansion-panel-header
>
<v-expansion-panel-content>
<v-list shaped>
<v-list-item
v-for="(detail, index) in selector.details"
:key="index"
>
<v-list-item-title>{{ detail.name }}</v-list-item-title>
<v-list-item-subtitle class="text-right">{{
detail.value
}}</v-list-item-subtitle>
</v-list-item>
</v-list>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>

<v-expansion-panels
focusable
hover
flat
class="mt-10 mb-10"
v-if="record && false"
>
<v-expansion-panel>
<v-expansion-panel-header>View as a tree</v-expansion-panel-header>
<v-expansion-panel-content>
<JsonPretty :summary="reference_model" />
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
<v-expansion-panels
focusable
hover
flat
class="mt-10 mb-10"
v-if="record && false"
>
<v-expansion-panel>
<v-expansion-panel-header>View as a tree</v-expansion-panel-header>
<v-expansion-panel-content>
<JsonPretty :summary="reference_model" />
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</div>
</div>
</template>

Expand All @@ -100,6 +114,8 @@ export default {
record: null,
gene: null,
selector: null,
progress: true,
no_response: true,
};
},
created: function () {
Expand All @@ -122,19 +138,20 @@ export default {
};
}
MutalyzerService.referenceModel(params).then((response) => {
this.progress = false;
if (response.data) {
this.reference_model = response.data;
this.record = this.getRecord(this.reference_model);
this.gene = this.getGene(this.reference_model);
this.selector = this.getSelector(this.reference_model);
this.no_response = false;
} else {
this.no_response = true;
}
});
},
methods: {
getRecord(annotations) {
if (annotations.type != "record") {
return;
}
let output = { id: annotations.id };
if (annotations.qualifiers) {
output.details = this.extractQualifiers(annotations.qualifiers);
Expand Down
38 changes: 30 additions & 8 deletions src/components/ViewVariants.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
<template>
<div>
<v-progress-linear
indeterminate
color="cyan"
v-if="progress"
></v-progress-linear>

<div v-for="(variant, v_i) in variants" :key="v_i">
<div class="variant">{{ variant.description }}</div>
<div class="wrapper">
Expand All @@ -18,17 +24,30 @@
>
</v-tooltip>
</div>

<!-- left -->
<div class="seq">
<span class="seq-elem" v-for="(s, s_i) in variant.left" :key="s_i">
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<span v-bind="attrs" v-on="on">
<span>{{ s }}</span></span
></template
>
<span>{{ get_left_position(variant, s_i) }}</span>
</v-tooltip>
<v-list-item-action class="ma-0 pa-0" style="min-width: unset">
<v-menu>
<template #activator="{ on: onMenu }">
<v-tooltip bottom>
<template #activator="{ on: onTooltip }">
<span v-on="{ ...onMenu, ...onTooltip }">{{
s
}}</span></template
><span>{{ get_left_position(variant, s_i) }}</span>
</v-tooltip>
</template>
<v-list>
<v-list-item class="text-right">
<v-btn small text color="primary" @click="map(false)">
Get HGVS location
</v-btn>
</v-list-item>
</v-list>
</v-menu>
</v-list-item-action>
</span>
</div>
<div class="seq-variant">
Expand Down Expand Up @@ -295,6 +314,7 @@ export default {
data() {
return {
variants: [],
progress: true,
};
},
created: function () {
Expand All @@ -304,6 +324,7 @@ export default {
get_variants: function () {
if (this.description) {
MutalyzerService.view(this.description).then((response) => {
this.progress = false;
if (response.data) {
this.variants = response.data;
}
Expand Down Expand Up @@ -459,6 +480,7 @@ export default {
.seq-elem:hover {
background-color: #b8b8b8;
cursor: pointer;
}
.seqdel {
Expand Down

0 comments on commit 2e5df1f

Please sign in to comment.