add statistics about annotation

frontend/package-lock.json

@@ -4589,6 +4589,11 @@
       "integrity": "sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=",
       "dev": true
     },
+    "d3-format": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.2.tgz",
+      "integrity": "sha512-gco1Ih54PgMsyIXgttLxEhNy/mXxq8+rLnCb5shQk+P5TsiySrwWU5gpB4zen626J4LIwBxHvDChyA8qDm57ww=="
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",

frontend/package.json

@@ -13,6 +13,7 @@
     "axios": "^0.19.0",
     "chart.js": "^2.8.0",
     "core-js": "^2.6.5",
+    "d3-format": "^1.4.2",
     "element-ui": "^2.10.0",
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.10",

frontend/src/components/CountCard.vue

+<template>
+  <v-flex xs6 sm4 md2 xl1>
+    <v-card :color="count.class" dark class="elevation-2">
+      <v-card-title primary-title>
+        <div v-if="count.text">
+          <div class="blue-grey--text text--lighten-5 subheading font-weight-thin mb-1">{{ count.title }}</div>
+          <div class="display-1 font-weight-medium">{{ count.text }}</div>
+        </div>
+        <div v-else class="text-xs-center">
+          <v-progress-circular
+            indeterminate
+            color="secondary"
+          ></v-progress-circular>
+        </div>
+      </v-card-title>
+    </v-card>
+  </v-flex>
+</template>
+
+<script>
+export default {
+  props: {
+    count: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>

frontend/src/components/Histogram.vue

 <template>
-  <v-flex xs12 md6>
+  <v-flex xs12 md6 xl4>
     <v-toolbar
-      :class="geneLengthData.class"
+      :class="histoData.class"
       dark
-      v-if="geneLengthData.data"
+      v-if="histoData.data"
     >
-      <v-icon class="white--text">{{ geneLengthData.icon }}</v-icon>
-      <v-toolbar-title>{{ geneLengthData.title }}</v-toolbar-title>
+      <v-icon class="white--text">{{ histoData.icon }}</v-icon>
+      <v-toolbar-title>{{ histoData.title }}</v-toolbar-title>
     </v-toolbar>
     <v-card class="pa-2">
       <div class="card-body">
-        <div v-if="geneLengthData.data">
-          <canvas :id="geneLengthData.chart_id"></canvas>
+        <div v-if="histoData.data">
+          <canvas :id="histoData.chart_id"></canvas>
         </div>
         <div class="text-xs-center" v-else>
           <v-progress-circular
@@ -29,25 +29,25 @@ import Chart from 'chart.js';
 
 export default {
   props: {
-    geneLengthData: {
+    histoData: {
       type: Object,
       required: true,
     },
   },
   updated() {
-    this.createChart(this.geneLengthData.chart_id);
+    this.createChart(this.histoData.chart_id);
   },
   methods: {
     createChart(chartId) {
       const ctx = document.getElementById(chartId);
       const histoData = {
-        labels: this.geneLengthData.labels,
+        labels: this.histoData.labels,
         datasets: [
           {
-            label: this.geneLengthData.label,
-            data: this.geneLengthData.data,
-            borderColor: this.geneLengthData.bordelColor,
-            backgroundColor: this.geneLengthData.backgroundColor,
+            label: this.histoData.label,
+            data: this.histoData.data,
+            borderColor: this.histoData.bordelColor,
+            backgroundColor: this.histoData.backgroundColor,
           },
         ],
       };

frontend/src/views/Stats.vue

@@ -5,7 +5,7 @@
         <v-btn dark icon>
           <v-icon>list_alt</v-icon>
         </v-btn>
-        <v-toolbar-title>Gene details: {{ gene_id }}</v-toolbar-title>
+        <v-toolbar-title>Catalog Statistics</v-toolbar-title>
         <v-spacer></v-spacer>
         <v-btn dark icon>
           <v-icon>search</v-icon>
@@ -18,8 +18,13 @@
           grid-list-md
         >
           <v-layout row wrap>
-            <histogram :geneLengthData="geneLengthData"></histogram>
-            <histogram :geneLengthData="geneLengthDataOther"></histogram>
+            <countcard :count="geneCountAll"></countcard>
+            <countcard :count="geneCountFunctions"></countcard>
+            <countcard :count="geneCountTaxo"></countcard>
+            <countcard :count="geneCountFull"></countcard>
+          </v-layout>
+          <v-layout row wrap>
+            <histogram :histoData="geneLengthData"></histogram>
           </v-layout>
         </v-container>
       </v-card>
@@ -31,24 +36,34 @@
 <script>
 import axios from 'axios';
 import Histogram from '@/components/Histogram.vue';
+import CountCard from '@/components/CountCard.vue';
 
 export default {
   name: 'home',
   data() {
     return {
       geneLengthData: {},
-      geneLengthDataOther: {},
-      geneLengthWindowSize: 1000,
+      geneCountAll: {},
+      geneCountFunctions: {},
+      geneCountTaxo: {},
+      geneCountFull: {},
+      geneLengthWindowSize: 400,
+      stopAt: 5000,
     };
   },
   mounted() {
-    this.getGeneLength(this.geneLengthWindowSize);
+    this.getGeneLength(this.geneLengthWindowSize, this.stopAt);
+    this.getGeneCountsAll();
+    this.getGeneCountsFunctions();
+    this.getGeneCountsTaxo();
+    this.getGeneCountsFull();
   },
   methods: {
-    getGeneLength(geneLengthWindowSize) {
+    getGeneLength(geneLengthWindowSize, stopAt) {
       axios.get('/api/catalog/v1/genes/gene_length', {
         params: {
           'window_size': geneLengthWindowSize,
+          'stop_at': stopAt,
         },
         headers: {
           Accept: 'application/json',
@@ -66,23 +81,97 @@ export default {
           class: "secondary",
           icon: "bar_chart",
         };
-        this.geneLengthDataOther = {
-          chart_id: "histo2",
-          data: response.data.results.counts,
-          labels: response.data.results.labels,
-          title: "Gene length distribution",
-          label: "Number of genes",
-          borderColor: '#aab183',
-          backgroundColor: '#faa152',
-          class: "genefunction",
-          icon: "graphic_eq",
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+    },
+    getGeneCountsAll() {
+      axios.get('/api/catalog/v1/genes', {
+        headers: {
+          Accept: 'application/json',
+        },
+      })
+      .then((response) => {
+        this.geneCountAll = {
+          class: "secondary",
+          icon: "bar_chart",
+          text: response.data.count,
+          title: "Genes",
+        };
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+    },
+    getGeneCountsFunctions() {
+      axios.get('/api/catalog/v1/genes', {
+        params: {
+          no_functions: false,
+        },
+        headers: {
+          Accept: 'application/json',
+        },
+      })
+      .then((response) => {
+        this.geneCountFunctions = {
+          class: "secondary",
+          icon: "bar_chart",
+          text: response.data.count,
+          title: "Functions annotation",
+        };
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+    },
+    getGeneCountsTaxo() {
+      axios.get('/api/catalog/v1/genes', {
+        params: {
+          no_taxonomy: false,
+        },
+        headers: {
+          Accept: 'application/json',
+        },
+      })
+      .then((response) => {
+        this.geneCountTaxo = {
+          class: "secondary",
+          icon: "bar_chart",
+          text: response.data.count,
+          title: "Taxonomy Annotation",
         };
       })
       .catch((error) => {
         console.log(error);
       });
     },
+    getGeneCountsFull() {
+      axios.get('/api/catalog/v1/genes', {
+        params: {
+          no_functions: false,
+          no_taxonomy: false,
+        },
+        headers: {
+          Accept: 'application/json',
+        },
+      })
+      .then((response) => {
+        this.geneCountFull = {
+          class: "secondary",
+          icon: "bar_chart",
+          text: response.data.count,
+          title: "Full annotation",
+        };
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+    },
+  },
+  components: {
+    histogram: Histogram,
+    countcard: CountCard,
   },
-  components: { histogram: Histogram },
 };
 </script>