From 2e5df1fe8b997e13638d5ed8e95326c3bff214f6 Mon Sep 17 00:00:00 2001
From: Mihai <M.Lefter@lumc.nl>
Date: Tue, 25 May 2021 21:50:53 +0200
Subject: [PATCH] Start adding progress indicators (#2)

---
 src/components/ReferenceInformation.vue | 171 +++++++++++++-----------
 src/components/ViewVariants.vue         |  38 ++++--
 2 files changed, 124 insertions(+), 85 deletions(-)

diff --git a/src/components/ReferenceInformation.vue b/src/components/ReferenceInformation.vue
index 25eea0e..5c87a23 100644
--- a/src/components/ReferenceInformation.vue
+++ b/src/components/ReferenceInformation.vue
@@ -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>
 
@@ -100,6 +114,8 @@ export default {
       record: null,
       gene: null,
       selector: null,
+      progress: true,
+      no_response: true,
     };
   },
   created: function () {
@@ -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);
diff --git a/src/components/ViewVariants.vue b/src/components/ViewVariants.vue
index 99d39ae..e2fa999 100644
--- a/src/components/ViewVariants.vue
+++ b/src/components/ViewVariants.vue
@@ -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">
@@ -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">
@@ -295,6 +314,7 @@ export default {
   data() {
     return {
       variants: [],
+      progress: true,
     };
   },
   created: function () {
@@ -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;
           }
@@ -459,6 +480,7 @@ export default {
 
 .seq-elem:hover {
   background-color: #b8b8b8;
+  cursor: pointer;
 }
 
 .seqdel {