feat(tree): Add popup help text for counts.

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>

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>
@@ -185,14 +185,14 @@
               <!-- Annotations selection options -->
               <div class="treeAnnotation rounded-lg mt-5 pa-2" style="font-size: 12px;">
                 <v-row no-gutters>
-                  <b>Annotations</b>
+                  <b>Counts</b>
                 </v-row>
                 <v-row no-gutters>
                   <v-checkbox
                     dense
                     v-model="showDescGenomes"
                     class="font-12px"
-                    label="Genome count"
+                    label="Genomes"
                     hide-details
                   ></v-checkbox>
                 </v-row>
@@ -202,9 +202,10 @@
                     color="#9e94ca"
                     v-model="showDescChildren"
                     class="font-12px"
-                    label="Taxon count"
+                    label="Children"
                     hide-details
                   ></v-checkbox>
+                  <TreePopUpHelp class="ml-3 my-auto"></TreePopUpHelp>
                 </v-row>
               </div>
 
@@ -235,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() {
@@ -249,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}) {