feat(tree): Add Bergey's Manual links.

Ecogenomics · Nov 18, 2022 · 39cf210 · 39cf210
1 parent a7cb8e8
commit 39cf210
Show file tree

Hide file tree

Showing 4 changed files with 160 additions and 22 deletions.
diff --git a/assets/api/taxon.ts b/assets/api/taxon.ts
@@ -46,8 +46,9 @@ export interface TaxonDescendants {
   total: number,
   isGenome?: boolean,
   isRep?: boolean,
-  typeMaterial?: string
-  nDescChildren?: number
+  typeMaterial?: string,
+  nDescChildren?: number,
+  bergeysUrl?: string
 }
 
 export interface TaxonSearchResponse {

diff --git a/components/tree/TreePopUpBergeysHelp.vue b/components/tree/TreePopUpBergeysHelp.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="text-center">
+    <v-dialog
+      v-model="dialog"
+      max-width="700"
+    >
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn
+          color="#cfad46"
+          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">
+          Bergey's Manual
+        </v-card-title>
+
+        <v-card-text>
+          <div class="pt-3">
+            <p>
+              Bergey's Manual of Systematic of Archaea and Bacteria requires a license for access,
+              check with your institution if you are unable to view the content.
+            </p>
+            <p>
+              A best effort has been made to ensure that all taxa in Bergey's Manual are mapped to their corresponding
+              GTDB taxon. Please <nuxt-link to="contact">contact us</nuxt-link> if you notice any mistakes.
+            </p>
+            <p>
+              For more information, see: <a href="https://www.bergeys.org/publications/#archea-bacteria" target="_blank">Bergey's Manual</a>.
+            </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/pages/tree.vue b/pages/tree.vue
@@ -42,23 +42,48 @@
           </v-row>
           <v-row no-gutters>
             <v-checkbox
-              dense
               v-model="showDescGenomes"
               class="font-12px"
-              label="Genomes"
+              dense
               hide-details
+              label="Genomes"
             ></v-checkbox>
           </v-row>
           <v-row no-gutters>
             <v-checkbox
-              dense
-              color="#9e94ca"
               v-model="showDescChildren"
               class="font-12px"
+              color="#9e94ca"
+              dense
+              hide-details
               label="Children"
+            >
+              <template v-slot:append>
+                <TreePopUpHelp class="ml-3 my-auto"></TreePopUpHelp>
+              </template>
+            </v-checkbox>
+
+          </v-row>
+        </div>
+
+        <!-- Link annotation selection options -->
+        <div class="treeAnnotation rounded-lg mt-5 pa-2" style="font-size: 12px;">
+          <v-row no-gutters>
+            <b>External Resources</b>
+          </v-row>
+          <v-row no-gutters>
+            <v-checkbox
+              v-model="showBergeysUrl"
+              class="font-12px"
+              color="#cfad46"
+              dense
               hide-details
-            ></v-checkbox>
-            <TreePopUpHelp class="ml-3 my-auto"></TreePopUpHelp>
+              label="Bergey's Manual"
+            >
+              <template v-slot:append>
+                <TreePopUpBergeysHelp class="ml-3 my-auto"></TreePopUpBergeysHelp>
+              </template>
+            </v-checkbox>
           </v-row>
         </div>
 
@@ -141,19 +166,20 @@
                   <template v-else>
                     <div
                       :class="getActive.includes(item.taxon) ?
-                      `treeNodeActive treeNode rounded py-1 px-2 ${getTreeNodeClass(item)}` :
-                       `treeNode rounded py-1 px-2 ${getTreeNodeClass(item)}`">
+                      `d-inline-block treeNodeActive treeNode rounded py-1 px-2 ${getTreeNodeClass(item)}` :
+                       `d-inline-block treeNode rounded py-1 px-2 ${getTreeNodeClass(item)}`">
 
                       <!-- Add the taxon name -->
                       {{ item.taxon }}
 
                       <!-- Add the genome count -->
-                      <v-chip v-if="showDescGenomes" x-small color="#e3e3e3" class="ml-2">
+                      <v-chip v-if="showDescGenomes" class="ml-2" color="#e3e3e3" x-small>
                         {{ 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 chip-white">
+                      <v-chip v-if="showDescChildren && item.nDescChildren" class="m-2 chip-white" color="#9e94ca"
+                              x-small>
                         {{ item.nDescChildren.toLocaleString() }}
                       </v-chip>
 
@@ -164,6 +190,22 @@
                       </template>
 
                     </div>
+
+                    <!-- Additional links to the right side -->
+                    <div class="d-inline-block ml-2">
+
+                      <!-- Bergeys URL -->
+                      <template v-if="showBergeysUrl && item.bergeysUrl">
+                        <a :href="item.bergeysUrl" target="_blank">
+                          <span class="rounded-circle pa-1" style="background-color: #cfad46">
+                        <v-icon small>
+                        {{ mdiLinkVariantSvg }}
+                      </v-icon>
+                      </span>
+                        </a>
+                      </template>
+
+                    </div>
                   </template>
                 </div>
               </template>
@@ -217,23 +259,47 @@
                 </v-row>
                 <v-row no-gutters>
                   <v-checkbox
-                    dense
                     v-model="showDescGenomes"
                     class="font-12px"
-                    label="Genomes"
+                    dense
                     hide-details
+                    label="Genomes"
                   ></v-checkbox>
                 </v-row>
                 <v-row no-gutters>
                   <v-checkbox
-                    dense
-                    color="#9e94ca"
                     v-model="showDescChildren"
                     class="font-12px"
+                    color="#9e94ca"
+                    dense
+                    hide-details
                     label="Children"
+                  >
+                    <template v-slot:append>
+                      <TreePopUpHelp class="ml-3 my-auto"></TreePopUpHelp>
+                    </template>
+                  </v-checkbox>
+                </v-row>
+              </div>
+
+              <!-- Link annotation selection options -->
+              <div class="treeAnnotation rounded-lg mt-5 pa-2" style="font-size: 12px;">
+                <v-row no-gutters>
+                  <b>External Resources</b>
+                </v-row>
+                <v-row no-gutters>
+                  <v-checkbox
+                    v-model="showBergeysUrl"
+                    class="font-12px"
+                    color="#cfad46"
+                    dense
                     hide-details
-                  ></v-checkbox>
-                  <TreePopUpHelp class="ml-3 my-auto"></TreePopUpHelp>
+                    label="Bergey's Manual"
+                  >
+                    <template v-slot:append>
+                      <TreePopUpBergeysHelp class="ml-3 my-auto"></TreePopUpBergeysHelp>
+                    </template>
+                  </v-checkbox>
                 </v-row>
               </div>
 
@@ -257,14 +323,15 @@
 <script lang="ts">
 import Vue from 'vue'
 import {TreeItem} from "~/store/tree";
-import {mdiArrowCollapseRight, mdiArrowLeftDropCircle, mdiUndo} from "@mdi/js";
+import {mdiArrowCollapseRight, mdiArrowLeftDropCircle, mdiLinkVariant, mdiUndo} from "@mdi/js";
 import TreeLegend from "~/components/tree/TreeLegend.vue";
 import TaxonSearchAutocomplete from "~/components/shared/TaxonSearchAutocomplete.vue";
 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";
+import TreePopUpBergeysHelp from "~/components/tree/TreePopUpBergeysHelp.vue";
 
 export default Vue.extend({
   head() {
@@ -279,7 +346,14 @@ export default Vue.extend({
       ]
     }
   },
-  components: {TreePopUpHelp, TreeFullTaxonomy, TaxonSearchAutocomplete, TreeLegend, TaxonNotInLit},
+  components: {
+    TreePopUpHelp,
+    TreePopUpBergeysHelp,
+    TreeFullTaxonomy,
+    TaxonSearchAutocomplete,
+    TreeLegend,
+    TaxonNotInLit
+  },
 
   // Load the initial content to be baked into the page
   async asyncData({$api}) {
@@ -300,6 +374,7 @@ export default Vue.extend({
     mdiUndoSvg: mdiUndo,
     mdiArrowLeftDropCircleSvg: mdiArrowLeftDropCircle,
     mdiArrowCollapseRightSvg: mdiArrowCollapseRight,
+    mdiLinkVariantSvg: mdiLinkVariant,
 
     // Search for taxon input field - value not used, but watched for changes
     searchForTaxon: '',
@@ -315,7 +390,8 @@ export default Vue.extend({
 
     // Allow the user to select the following tree annotations
     showDescChildren: false,
-    showDescGenomes: true
+    showDescGenomes: true,
+    showBergeysUrl: false
   }),
   watch: {
     // If the user searches for a taxon, manipulate the tree
@@ -567,7 +643,6 @@ export default Vue.extend({
 }
 
 
-
 </style>
 
 <style>

diff --git a/store/tree.ts b/store/tree.ts
@@ -11,6 +11,7 @@ export interface TreeItem {
   taxon: string
   total?: number
   nDescChildren?: number,
+  bergeysUrl?: string,
   children?: TreeItem[],
 
   isGenome?: boolean,
@@ -110,6 +111,7 @@ function treeItemFromTaxonDescendants(item: TaxonDescendants): TreeItem {
   else {
     out.total = item.total
     out.nDescChildren = item.nDescChildren
+    out.bergeysUrl = item.bergeysUrl
     out.children = []
   }
   return out