Merge pull request #7 from Ecogenomics/dev

Dev
Ecogenomics · Oct 28, 2022 · 4549dc3 · 4549dc3
2 parents 416ebe4 + 9bafef3
commit 4549dc3
Show file tree

Hide file tree

Showing 8 changed files with 159 additions and 46 deletions.
diff --git a/assets/api/taxon.ts b/assets/api/taxon.ts
@@ -47,6 +47,7 @@ export interface TaxonDescendants {
   isGenome?: boolean,
   isRep?: boolean,
   typeMaterial?: string
+  nDescChildren?: number
 }
 
 export interface TaxonSearchResponse {

diff --git a/components/search/IsSurveillanceGenome.vue b/components/search/IsSurveillanceGenome.vue
@@ -14,14 +14,14 @@
 
     <v-divider></v-divider>
     <v-card-text>
-      <p>You searched for the accession <b>{{ accession }}</b>, which is a known surveillance genome.</p>
+      <p>You searched for the accession <b>{{ surveyAccession }}</b>, which is a known surveillance genome.</p>
 
       <p>The <a href="https://www.ncbi.nlm.nih.gov/pathogens/" target="_blank">NCBI Pathogen Detection Assembly</a>
         (surveillance) genomes have been excluded from the GTDB as they include extremely large quantities of well
         described taxa.</p>
 
       <p class="mb-0">For more information, search the NCBI assembly database: NCBI - <a
-        :href="`https://www.ncbi.nlm.nih.gov/assembly/${accession}/`" target="_blank">{{ accession }}</a></p cla>
+        :href="`https://www.ncbi.nlm.nih.gov/assembly/${surveyAccession}/`" target="_blank">{{ surveyAccession }}</a></p cla>
     </v-card-text>
   </v-card>
 </template>
@@ -46,7 +46,8 @@ export default Vue.extend({
     loading: false,
     lastAccession: '',
     isSurveillance: false,
-    mdiAlertCircleSvg: mdiAlertCircle
+    mdiAlertCircleSvg: mdiAlertCircle,
+    surveyAccession: '',
   }),
   mounted() {
     this.loadGenomeMetadata(this.accession);
@@ -58,6 +59,7 @@ export default Vue.extend({
       this.loading = true;
       this.$api.genome.getMetadata(accession).then(response => {
         this.isSurveillance = response.data.isNcbiSurveillance;
+        this.surveyAccession = response.data.accession;
       })
         .finally(() => {
           this.loading = false;

diff --git a/components/tree/TreePopUpHelp.vue b/components/tree/TreePopUpHelp.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="text-center">
+    <v-dialog
+      v-model="dialog"
+      max-width="700"
+    >
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn
+          color="#9e93ca"
+          icon
+          v-bind="attrs"
+          x-small
+          v-on="on"
+        >
+          <v-icon>
+            {{ mdiHelpCircleSvg }}
+          </v-icon>
+        </v-btn>
+      </template>
+
+      <v-card>
+        <v-card-title class="text-h5 grey lighten-2">
+          Taxon suffix counts
+        </v-card-title>
+
+        <v-card-text>
+          <div class="pt-3">
+            <p>
+              Note that taxon ranks above genus with an alphabetical suffix are not included in the counts.
+            </p>
+            <p>
+              For more information, see the
+              <nuxt-link to="faq#why-do-some-family-and-higher-rank-names-end-with-an-alphabetic-suffix">FAQ</nuxt-link>.
+            </p>
+          </div>
+        </v-card-text>
+
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import {mdiHelpCircle} from "@mdi/js";
+
+export default Vue.extend({
+  data: () => ({
+    mdiHelpCircleSvg: mdiHelpCircle,
+    dialog: false
+  }),
+})
+</script>
+
+<style scoped>
+</style>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "@nuxtjs/axios": "^5.13.6",
     "@nuxtjs/pwa": "^3.3.5",
     "cookie-universal-nuxt": "^2.2.2",
-    "core-js": "^3.25.5",
+    "core-js": "^3.26.0",
     "d3-sankey": "^0.12.3",
     "d3-scale-chromatic": "^3.0.0",
     "d3v5": "npm:d3@^5.16.0",
@@ -23,7 +23,7 @@
     "nuxt": "^2.15.8",
     "nuxt-typed-vuex": "^0.3.1",
     "vue-gtag": "^1.16.1",
-    "vuetify": "^2.6.11"
+    "vuetify": "^2.6.12"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",

diff --git a/pages/faq.vue b/pages/faq.vue
@@ -101,27 +101,18 @@
       </template>
 
       <template #how-are-the-bacterial-and-archaeal-multiple-sequence-alignments-constructed>
-        <p> Bacterial and archaeal multiple sequence alignments (MSAs) are formed
-          from the concatenation of 120 or 53
-          phylogenetically informative markers, respectively. These marker sets are referred to as
-          bac120 and arc53 for
-          bacterial and archaeal markers, respectively, and are comprised of proteins or protein
-          domains specified in the
-          Pfam v27 or TIGRFAMs v15.0 databases. Details on these markers are available for
-          download
-          (<a href="https://data.ace.uq.edu.au/public/gtdb/data/releases/latest/" target="_blank">here</a>). Gene
-          calling is performed
-          with Prodigal v2.6.3, and markers identified and aligned using HMMER v3.1b1. Columns in
-          the MSA with >50% gaps
-          or with a single amino acid spanning <25% or >95% of taxa are removed. In order to
-          reduce computational
-          requirements, 42 amino acids per marker were randomly selected from the remaining
-          columns to produce MSAs of
-          ~5,000 columns. The final masks applied to the concatenated MSAs are available for
-          download (<a
-            href="https://data.ace.uq.edu.au/public/gtdb/data/releases/latest/" target="_blank">here</a>)
-          and the identical filtering approach is implemented in <a
-            href="https://github.com/ecogenomics/gtdbtk" target="_blank">GTDB-Tk</a>.<br>
+        <p>
+          Bacterial and archaeal multiple sequence alignments (MSAs) are formed from the concatenation of 120 (bac120)
+          or 53 (arc53) phylogenetically informative markers, respectively. These markers are comprised of proteins or
+          protein domains specified in the Pfam v33.1 or TIGRFAMs v15.0 databases. Details on these markers are
+          available for download (<a href="https://data.ace.uq.edu.au/public/gtdb/data/releases/latest/" target="_blank">here</a>). Gene calling is performed with Prodigal v2.6.3, and markers identified
+          and aligned using HMMER v3.1b1. Columns in the MSA with >50% gaps or with a single amino acid spanning
+          <25% or >95% of taxa are removed. In order to reduce computational requirements of the bacterial reference
+          tree, 42 amino acids per marker were randomly selected from the remaining columns to produce a MSA of
+          ~5,000 columns. The final masks applied to the concatenated MSAs are available for download (<a
+          href="https://data.ace.uq.edu.au/public/gtdb/data/releases/latest/" target="_blank">here</a>) and
+          the identical filtering approach is implemented in <a
+          href="https://github.com/ecogenomics/gtdbtk" target="_blank">GTDB-Tk</a>.<br>.
         </p>
       </template>
 

diff --git a/pages/tree.vue b/pages/tree.vue
@@ -54,7 +54,7 @@
       </v-btn>
     </v-col>
 
-    <v-card style="min-height: 500px;">
+    <v-card style="min-height: 600px;">
       <v-card-title class="text-h4">
         Tree
       </v-card-title>
@@ -115,11 +115,26 @@
                       :class="getActive.includes(item.taxon) ?
                       `treeNodeActive treeNode rounded py-1 px-2 ${getTreeNodeClass(item)}` :
                        `treeNode rounded py-1 px-2 ${getTreeNodeClass(item)}`">
-                      {{ item.taxon }} ({{ item.total ? item.total.toLocaleString() : 'loading...' }})
+
+                      <!-- Add the taxon name -->
+                      {{ item.taxon }}
+
+                      <!-- Add the genome count -->
+                      <v-chip v-if="showDescGenomes" x-small color="#e3e3e3" class="ml-2">
+                        {{ item.total ? item.total.toLocaleString() : 'loading...' }}
+                      </v-chip>
+
+                      <!-- Add the taxon count -->
+                      <v-chip v-if="showDescChildren && item.nDescChildren" x-small color="#9e94ca" class="m-2">
+                        {{ item.nDescChildren.toLocaleString() }}
+                      </v-chip>
+
+                      <!-- Append the taxon not in literature icon if required -->
                       <template v-if="taxaNotInLit[item.taxon.substring(3)]">
                         <TaxonNotInLit v-if="taxaNotInLit[item.taxon.substring(3)]"
                                        :tooltip="taxaNotInLit[item.taxon.substring(3)]"/>
                       </template>
+
                     </div>
                   </template>
                 </div>
@@ -167,6 +182,33 @@
                 class="pa-2 mt-5"
               />
 
+              <!-- Annotations selection options -->
+              <div class="treeAnnotation rounded-lg mt-5 pa-2" style="font-size: 12px;">
+                <v-row no-gutters>
+                  <b>Counts</b>
+                </v-row>
+                <v-row no-gutters>
+                  <v-checkbox
+                    dense
+                    v-model="showDescGenomes"
+                    class="font-12px"
+                    label="Genomes"
+                    hide-details
+                  ></v-checkbox>
+                </v-row>
+                <v-row no-gutters>
+                  <v-checkbox
+                    dense
+                    color="#9e94ca"
+                    v-model="showDescChildren"
+                    class="font-12px"
+                    label="Children"
+                    hide-details
+                  ></v-checkbox>
+                  <TreePopUpHelp class="ml-3 my-auto"></TreePopUpHelp>
+                </v-row>
+              </div>
+
               <!-- Taxonomy table for the selected taxon -->
               <!--              <TreeFullTaxonomy-->
               <!--                class="mt-5"-->
@@ -194,6 +236,7 @@ import {TaxonomyOptional} from "~/assets/api/taxonomy";
 import TreeFullTaxonomy from "~/components/tree/TreeFullTaxonomy.vue";
 import {Dict} from "~/assets/ts/interfaces";
 import TaxonNotInLit from "~/components/browse/TaxonNotInLit.vue";
+import TreePopUpHelp from "~/components/tree/TreePopUpHelp.vue";
 
 export default Vue.extend({
   head() {
@@ -208,7 +251,7 @@ export default Vue.extend({
       ]
     }
   },
-  components: {TreeFullTaxonomy, TaxonSearchAutocomplete, TreeLegend, TaxonNotInLit},
+  components: {TreePopUpHelp, TreeFullTaxonomy, TaxonSearchAutocomplete, TreeLegend, TaxonNotInLit},
 
   // Load the initial content to be baked into the page
   async asyncData({$api}) {
@@ -236,12 +279,15 @@ export default Vue.extend({
     // The taxonomy string of the selected node
     selectedTaxonomy: {} as TaxonomyOptional,
 
-
     // Navigation drawer (for small screens)
     drawer: false,
 
     // Taxa not in literature tooltip
     taxaNotInLit: {} as Dict<string>,
+
+    // Allow the user to select the following tree annotations
+    showDescChildren: false,
+    showDescGenomes: true
   }),
   watch: {
     // If the user searches for a taxon, manipulate the tree
@@ -485,4 +531,19 @@ export default Vue.extend({
   }
 }
 
+.treeAnnotation {
+  background-color: #f5f5f5;
+  border-color: #e1e1e1;
+  border-style: solid;
+  border-width: 1px;
+}
+
+
+
+</style>
+
+<style>
+.font-12px .v-label {
+  font-size: 13px !important;
+}
 </style>
diff --git a/store/tree.ts b/store/tree.ts
@@ -10,6 +10,7 @@ const MAX_CHILDREN = 100;
 export interface TreeItem {
   taxon: string
   total?: number
+  nDescChildren?: number,
   children?: TreeItem[],
 
   isGenome?: boolean,
@@ -108,6 +109,7 @@ function treeItemFromTaxonDescendants(item: TaxonDescendants): TreeItem {
   // Taxon
   else {
     out.total = item.total
+    out.nDescChildren = item.nDescChildren
     out.children = []
   }
   return out