Skip to content

Commit 2e5df1f

Browse files
mihaileftermihailefter
committed
Start adding progress indicators (#2)
1 parent 3e36b94 commit 2e5df1f

File tree

2 files changed

+124
-85
lines changed

2 files changed

+124
-85
lines changed

Diff for: ‎src/components/ReferenceInformation.vue

+94-77
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,97 @@
11
<template>
22
<div>
3-
<v-expansion-panels
4-
multiple
5-
flat
3+
<v-progress-linear
4+
indeterminate
5+
color="cyan"
66
class="mt-5"
7-
tile
8-
v-if="record"
9-
v-model="panel"
10-
>
11-
<v-expansion-panel v-if="record">
12-
<v-expansion-panel-header class="overline blue-grey--text text"
13-
>Reference ID: {{ record.id }}</v-expansion-panel-header
14-
>
15-
<v-expansion-panel-content>
16-
<v-list shaped>
17-
<v-list-item v-for="(detail, index) in record.details" :key="index">
18-
<v-list-item-title color="blue">{{
19-
detail.name
20-
}}</v-list-item-title>
21-
<v-list-item-subtitle class="text-right">{{
22-
detail.value
23-
}}</v-list-item-subtitle>
24-
</v-list-item>
25-
</v-list>
26-
</v-expansion-panel-content>
27-
</v-expansion-panel>
7+
v-if="progress"
8+
></v-progress-linear>
9+
<div v-if="!progress && no_response">
10+
Reference information not retrieved.
11+
</div>
12+
<div v-if="!progress && !no_response">
13+
<v-expansion-panels
14+
multiple
15+
flat
16+
class="mt-5"
17+
tile
18+
v-if="record"
19+
v-model="panel"
20+
>
21+
<v-expansion-panel v-if="record">
22+
<v-expansion-panel-header class="overline blue-grey--text text"
23+
>Reference ID: {{ record.id }}</v-expansion-panel-header
24+
>
25+
<v-expansion-panel-content>
26+
<v-list shaped>
27+
<v-list-item
28+
v-for="(detail, index) in record.details"
29+
:key="index"
30+
>
31+
<v-list-item-title color="blue">{{
32+
detail.name
33+
}}</v-list-item-title>
34+
<v-list-item-subtitle class="text-right">{{
35+
detail.value
36+
}}</v-list-item-subtitle>
37+
</v-list-item>
38+
</v-list>
39+
</v-expansion-panel-content>
40+
</v-expansion-panel>
2841

29-
<v-expansion-panel v-if="gene">
30-
<v-expansion-panel-header
31-
class="overline blue-grey--text text--lighten-2"
32-
>selected transcript gene name:
33-
{{ gene.id }}</v-expansion-panel-header
34-
>
35-
<v-expansion-panel-content>
36-
<v-list>
37-
<v-list-item v-for="(detail, index) in gene.details" :key="index">
38-
<v-list-item-title>{{ detail.name }}</v-list-item-title>
39-
<v-list-item-subtitle class="text-right">{{
40-
detail.value
41-
}}</v-list-item-subtitle>
42-
</v-list-item>
43-
</v-list>
44-
</v-expansion-panel-content>
45-
</v-expansion-panel>
42+
<v-expansion-panel v-if="gene">
43+
<v-expansion-panel-header
44+
class="overline blue-grey--text text--lighten-2"
45+
>selected transcript gene name:
46+
{{ gene.id }}</v-expansion-panel-header
47+
>
48+
<v-expansion-panel-content>
49+
<v-list>
50+
<v-list-item v-for="(detail, index) in gene.details" :key="index">
51+
<v-list-item-title>{{ detail.name }}</v-list-item-title>
52+
<v-list-item-subtitle class="text-right">{{
53+
detail.value
54+
}}</v-list-item-subtitle>
55+
</v-list-item>
56+
</v-list>
57+
</v-expansion-panel-content>
58+
</v-expansion-panel>
4659

47-
<v-expansion-panel v-if="selector">
48-
<v-expansion-panel-header class="overline blue-grey--text text"
49-
>Selected transcript ID: {{ selector.id }}</v-expansion-panel-header
50-
>
51-
<v-expansion-panel-content>
52-
<v-list shaped>
53-
<v-list-item
54-
v-for="(detail, index) in selector.details"
55-
:key="index"
56-
>
57-
<v-list-item-title>{{ detail.name }}</v-list-item-title>
58-
<v-list-item-subtitle class="text-right">{{
59-
detail.value
60-
}}</v-list-item-subtitle>
61-
</v-list-item>
62-
</v-list>
63-
</v-expansion-panel-content>
64-
</v-expansion-panel>
65-
</v-expansion-panels>
60+
<v-expansion-panel v-if="selector">
61+
<v-expansion-panel-header class="overline blue-grey--text text"
62+
>Selected transcript ID: {{ selector.id }}</v-expansion-panel-header
63+
>
64+
<v-expansion-panel-content>
65+
<v-list shaped>
66+
<v-list-item
67+
v-for="(detail, index) in selector.details"
68+
:key="index"
69+
>
70+
<v-list-item-title>{{ detail.name }}</v-list-item-title>
71+
<v-list-item-subtitle class="text-right">{{
72+
detail.value
73+
}}</v-list-item-subtitle>
74+
</v-list-item>
75+
</v-list>
76+
</v-expansion-panel-content>
77+
</v-expansion-panel>
78+
</v-expansion-panels>
6679

67-
<v-expansion-panels
68-
focusable
69-
hover
70-
flat
71-
class="mt-10 mb-10"
72-
v-if="record && false"
73-
>
74-
<v-expansion-panel>
75-
<v-expansion-panel-header>View as a tree</v-expansion-panel-header>
76-
<v-expansion-panel-content>
77-
<JsonPretty :summary="reference_model" />
78-
</v-expansion-panel-content>
79-
</v-expansion-panel>
80-
</v-expansion-panels>
80+
<v-expansion-panels
81+
focusable
82+
hover
83+
flat
84+
class="mt-10 mb-10"
85+
v-if="record && false"
86+
>
87+
<v-expansion-panel>
88+
<v-expansion-panel-header>View as a tree</v-expansion-panel-header>
89+
<v-expansion-panel-content>
90+
<JsonPretty :summary="reference_model" />
91+
</v-expansion-panel-content>
92+
</v-expansion-panel>
93+
</v-expansion-panels>
94+
</div>
8195
</div>
8296
</template>
8397

@@ -100,6 +114,8 @@ export default {
100114
record: null,
101115
gene: null,
102116
selector: null,
117+
progress: true,
118+
no_response: true,
103119
};
104120
},
105121
created: function () {
@@ -122,19 +138,20 @@ export default {
122138
};
123139
}
124140
MutalyzerService.referenceModel(params).then((response) => {
141+
this.progress = false;
125142
if (response.data) {
126143
this.reference_model = response.data;
127144
this.record = this.getRecord(this.reference_model);
128145
this.gene = this.getGene(this.reference_model);
129146
this.selector = this.getSelector(this.reference_model);
147+
this.no_response = false;
148+
} else {
149+
this.no_response = true;
130150
}
131151
});
132152
},
133153
methods: {
134154
getRecord(annotations) {
135-
if (annotations.type != "record") {
136-
return;
137-
}
138155
let output = { id: annotations.id };
139156
if (annotations.qualifiers) {
140157
output.details = this.extractQualifiers(annotations.qualifiers);

Diff for: ‎src/components/ViewVariants.vue

+30-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
<template>
22
<div>
3+
<v-progress-linear
4+
indeterminate
5+
color="cyan"
6+
v-if="progress"
7+
></v-progress-linear>
8+
39
<div v-for="(variant, v_i) in variants" :key="v_i">
410
<div class="variant">{{ variant.description }}</div>
511
<div class="wrapper">
@@ -18,17 +24,30 @@
1824
>
1925
</v-tooltip>
2026
</div>
27+
2128
<!-- left -->
2229
<div class="seq">
2330
<span class="seq-elem" v-for="(s, s_i) in variant.left" :key="s_i">
24-
<v-tooltip bottom>
25-
<template v-slot:activator="{ on, attrs }">
26-
<span v-bind="attrs" v-on="on">
27-
<span>{{ s }}</span></span
28-
></template
29-
>
30-
<span>{{ get_left_position(variant, s_i) }}</span>
31-
</v-tooltip>
31+
<v-list-item-action class="ma-0 pa-0" style="min-width: unset">
32+
<v-menu>
33+
<template #activator="{ on: onMenu }">
34+
<v-tooltip bottom>
35+
<template #activator="{ on: onTooltip }">
36+
<span v-on="{ ...onMenu, ...onTooltip }">{{
37+
s
38+
}}</span></template
39+
><span>{{ get_left_position(variant, s_i) }}</span>
40+
</v-tooltip>
41+
</template>
42+
<v-list>
43+
<v-list-item class="text-right">
44+
<v-btn small text color="primary" @click="map(false)">
45+
Get HGVS location
46+
</v-btn>
47+
</v-list-item>
48+
</v-list>
49+
</v-menu>
50+
</v-list-item-action>
3251
</span>
3352
</div>
3453
<div class="seq-variant">
@@ -295,6 +314,7 @@ export default {
295314
data() {
296315
return {
297316
variants: [],
317+
progress: true,
298318
};
299319
},
300320
created: function () {
@@ -304,6 +324,7 @@ export default {
304324
get_variants: function () {
305325
if (this.description) {
306326
MutalyzerService.view(this.description).then((response) => {
327+
this.progress = false;
307328
if (response.data) {
308329
this.variants = response.data;
309330
}
@@ -459,6 +480,7 @@ export default {
459480
460481
.seq-elem:hover {
461482
background-color: #b8b8b8;
483+
cursor: pointer;
462484
}
463485
464486
.seqdel {

0 commit comments

Comments
 (0)