From 01390fb9839ca26815e10dcb1d425f64d918c5d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Linus=20=C3=96stberg?= <linus.ostberg@scilifelab.uu.se>
Date: Sun, 17 Nov 2019 12:50:26 +0100
Subject: [PATCH] Variants are now local. Add vue2-filters to support sorting.

---
 frontend/vue/package.json                     |  1 +
 .../dataset/browser/BrowserVariants.vue       | 81 ++++++++++++++-----
 frontend/vue/src/main.js                      |  7 +-
 frontend/vue/src/store/index.js               | 41 ----------
 4 files changed, 65 insertions(+), 65 deletions(-)

diff --git a/frontend/vue/package.json b/frontend/vue/package.json
index 132bfb358..a11335f20 100644
--- a/frontend/vue/package.json
+++ b/frontend/vue/package.json
@@ -12,6 +12,7 @@
     "core-js": "^3.3.2",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",
+    "vue2-filters": "^0.8.0",
     "vuex": "^3.1.1"
   },
   "devDependencies": {
diff --git a/frontend/vue/src/components/dataset/browser/BrowserVariants.vue b/frontend/vue/src/components/dataset/browser/BrowserVariants.vue
index 8c95ac3cc..264dff8b2 100644
--- a/frontend/vue/src/components/dataset/browser/BrowserVariants.vue
+++ b/frontend/vue/src/components/dataset/browser/BrowserVariants.vue
@@ -4,11 +4,7 @@
     <p>Unable to load the variants.</p>
     <p>Reason: {{ error }}</p>
   </div>
-  <!-- LOADING MESSAGE -->
-  <div v-if="!variants" class="alert alert-info col-md-4 col-md-offset-4 text-center" >
-    <strong>Loading Variants</strong>
-  </div>
-  <div class="container" v-if="variants && !error.statusCode">
+  <div class="container" v-else>
     <div class="row">
       <div class="col-md-12">
         <span class="btn-group radio-button-group" @change="filterVariants">
@@ -39,7 +35,7 @@
     </div>
     <div class="row">
       <div class="col-md-12">
-        Number of variants: {{filteredVariants.length}} (including filtered: {{variants.length}})
+        <div v-if="loaded">Number of variants: {{filteredVariants.length}} (including filtered: {{variants.length}})</div><div v-else>Loading...</div>
       </div>
     </div>
     <div class="row">
@@ -59,7 +55,7 @@
             </tr>
           </thead>
           <tbody>
-            <tr v-for="variant in filteredVariants" :key="variant.variantId">
+            <tr v-for="variant in orderedVariants" :key="variant.variantId">
               <td :title="variant['variantId']" class="variantId">
                 <router-link :to="browserLink('variant/' + variant['variantId'] )">
                   {{formatVariant(variant)}}
@@ -98,15 +94,17 @@
 
 <script>
 import {mapGetters} from 'vuex';
+import axios from 'axios';
+import Vue2Filters from 'vue2-filters'
 
 export default {
   name: 'BrowserVariants',
+
+  mixins: [Vue2Filters.mixin],
+
   data() {
     return {
-      error: {
-        'statusCode': null,
-        'statusText': null
-      },
+      error: null,
       filterVariantsBy: "all",
       filterIncludeNonPass: false,
       filterVariantsOld: null,
@@ -114,15 +112,22 @@ export default {
       item: null,
       itemType: null,
       filteredVariants: [],
-      orderByField: null,
-      headers: null,
-      reverseSort: null,
+      orderByField: "pos",
+      reverseSort: false,
+      variants: [],
+      variantHeaders: [],
+      loaded: false,
     }
   },
+
   props: ['datasetName', 'datasetVersion', 'dataType', 'identifier'],
   computed: {
-    ...mapGetters(['dataset', 'variants', 'variantHeaders']),
+    ...mapGetters(['dataset']),
+    orderedVariants: function() {
+      return this.orderBy(this.filteredVariants, this.orderByField, this.reverseSort ? -1 : 1);
+    }
   },
+
   methods: {
     formatVariant (variant, len=12) {
       function shortenSeq(input, len=12) {
@@ -144,9 +149,17 @@ export default {
       }
       return text;
     },
-    reorderVariants (event) {
-      event.preventDefault();
+
+    reorderVariants (event, field) {
+      if (field == this.orderByField) {
+        this.reverseSort = !this.reverseSort;
+      }
+      else {
+        this.orderByField = field;
+        this.reverseSort = false;
+      }
     },
+
     filterVariants () {
       let filterAsText = this.filterVariantsBy + this.filterIncludeNonPass;
       if (this.filterVariantsOld == filterAsText) {
@@ -173,6 +186,7 @@ export default {
       }
       this.filteredVariants = this.variants.filter( filterFunction );
     },
+
     browserLink (link) {
       if (this.datasetVersion) {
         return "/dataset/" + this.datasetName + "/version/" + this.datasetVersion + "/browser/" + link;
@@ -181,12 +195,35 @@ export default {
     }
   },
   created () {
-    this.$store.dispatch('getVariants', {'dataset': this.$props.datasetName,
-                                         'version': this.$props.datasetVersion,
-                                         'datatype': this.dataType,
-                                         'identifier': this.$props.identifier})
-      .then(() => {
+    let url = '/api/dataset/' + this.$props.datasetName;
+    if (this.$props.datasetVersion) {
+      url += '/version/' + this.$props.datasetVersion;
+    }
+    url += '/browser/variants/' + this.$props.dataType +
+      '/' + this.$props.identifier;
+    axios
+      .get(url)
+      .then((response) => {
+        let variants = response.data.variants;
+
+        let mapFunction = function(variant) {
+          variant.isPass = variant.filter == "PASS";
+          if (variant.flags.indexOf("LoF") === -1)
+            variant.isLof = false;
+          else
+            variant.isLof = true;
+          variant.isMissense = variant.majorConsequence == "missense";
+        };
+
+        variants.map(mapFunction);
+
+        this.variants = variants;
+        this.variantHeaders = response.data.headers;
         this.filterVariants();
+        this.loaded = true;
+      })
+      .catch((error) => {
+        this.error = error;
       });
   }
 };
diff --git a/frontend/vue/src/main.js b/frontend/vue/src/main.js
index 2cfd861e6..b333c4fe4 100644
--- a/frontend/vue/src/main.js
+++ b/frontend/vue/src/main.js
@@ -1,7 +1,10 @@
-import Vue from 'vue'
-import App from './App.vue'
+import Vue from 'vue';
+import App from './App.vue';
 import router from './router';
 import store from './store';
+import Vue2Filters from 'vue2-filters';
+
+Vue.use(Vue2Filters);
 
 Vue.config.productionTip = false
 
diff --git a/frontend/vue/src/store/index.js b/frontend/vue/src/store/index.js
index 4a0cfef4c..a8c494946 100644
--- a/frontend/vue/src/store/index.js
+++ b/frontend/vue/src/store/index.js
@@ -155,47 +155,6 @@ const actions = {
         response;
       });
   },
-
-  getVariants(context, payload) {
-    return new Promise((resolve, reject) => {
-      let url = '';
-      if (payload.version) {
-        url = '/api/dataset/' + payload.dataset +
-          '/version/' + payload.version +
-          '/browser/variants/' + payload.datatype +
-          '/' + payload.identifier;
-      }
-      else {
-        url = '/api/dataset/' + payload.dataset +
-          '/browser/variants/' + payload.datatype +
-          '/' + payload.identifier;
-      }
-      axios
-        .get(url)
-        .then((response) => {
-          let variants = response.data.variants;
-
-          let mapFunction = function(variant) {
-            variant.isPass = variant.filter == "PASS";
-            if (variant.flags.indexOf("LoF") === -1)
-              variant.isLof = false;
-            else
-              variant.isLof = true;
-            variant.isMissense = variant.majorConsequence == "missense";
-          };
-
-          variants.map(mapFunction);
-
-          context.commit('UPDATE_VARIANTS', variants);
-          context.commit('UPDATE_VARIANT_HEADERS', response.data.headers);
-          resolve(response);
-        })
-        .catch((error) => {
-          reject(error);
-          context.commit('UPDATE_VARIANTS', []);
-        });
-    });
-  },
   
   makeBeaconQuery (context, payload) {
     return new Promise((resolve, reject) => {