feat(tree): Limit the number of genomes displayed under a single spec…

…ies to 100.
Ecogenomics · Mar 18, 2022 · 8d3b57a · 8d3b57a
1 parent f0f608c
commit 8d3b57a
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 17 deletions.
diff --git a/pages/tree.vue b/pages/tree.vue
@@ -82,22 +82,31 @@
 
                   <!-- This is a genome (leaf node) -->
                   <template v-if="item.isGenome">
-                    <NuxtLink :to="{name: 'genome',
+                    <template v-if="item.hideLink">
+                      <nuxt-link :to="`/species?id=${item.species.substring(3)}`">
+                        <div :class="`${getTreeNodeClass(item)} + rounded py-1 px-2`">
+                          {{ item.taxon }}
+                        </div>
+                      </nuxt-link>
+                    </template>
+                    <template v-else>
+                      <NuxtLink :to="{name: 'genome',
                       query: {
                         gid: item.taxon.startsWith('GB_') ? item.taxon.substring(3) :
                         item.taxon.startsWith('RS_') ? item.taxon.substring(3) : item.taxon
                       }}"
-                    >
-                      <div :class="`${getTreeNodeClass(item)} + rounded py-1 px-2`">
+                      >
+                        <div :class="`${getTreeNodeClass(item)} + rounded py-1 px-2`">
                        <span v-if="item.isGtdbSpeciesRep">
                         *
                       </span>
-                        {{
-                          item.taxon.startsWith('GB_') ? item.taxon.substring(3) :
-                            item.taxon.startsWith('RS_') ? item.taxon.substring(3) : item.taxon
-                        }}
-                      </div>
-                    </NuxtLink>
+                          {{
+                            item.taxon.startsWith('GB_') ? item.taxon.substring(3) :
+                              item.taxon.startsWith('RS_') ? item.taxon.substring(3) : item.taxon
+                          }}
+                        </div>
+                      </NuxtLink>
+                    </template>
                   </template>
 
                   <!-- This is a taxon (internal node) -->
@@ -108,7 +117,8 @@
                        `treeNode rounded py-1 px-2 ${getTreeNodeClass(item)}`">
                       {{ item.taxon }} ({{ item.total ? item.total.toLocaleString() : 'loading...' }})
                       <template v-if="taxaNotInLit[item.taxon.substring(3)]">
-                        <TaxonNotInLit v-if="taxaNotInLit[item.taxon.substring(3)]" :tooltip="taxaNotInLit[item.taxon.substring(3)]"/>
+                        <TaxonNotInLit v-if="taxaNotInLit[item.taxon.substring(3)]"
+                                       :tooltip="taxaNotInLit[item.taxon.substring(3)]"/>
                       </template>
                     </div>
                   </template>

diff --git a/store/tree.ts b/store/tree.ts
@@ -5,6 +5,8 @@
 import {actionTree, getterTree, mutationTree} from "typed-vuex";
 import {TaxonDescendants} from "~/assets/api/taxon";
 
+const MAX_CHILDREN = 100;
+
 export interface TreeItem {
   taxon: string
   total?: number
@@ -16,6 +18,9 @@ export interface TreeItem {
   isTypeStrainOfSubspecies?: boolean,
   isGtdbSpeciesRep?: boolean,
 
+  hideLink?: boolean
+  species?: string
+
 }
 
 interface SetNodeChildrenPayload {
@@ -113,9 +118,7 @@ function treeItemFromTaxonDescendants(item: TaxonDescendants): TreeItem {
 // ---------------------------------------------------------------------------------------------------------------------
 
 export const getters = getterTree(state, {
-  items: state => state.items,
-  initHasRun: state => state.initHasRun,
-  open: state => state.open
+  items: state => state.items, initHasRun: state => state.initHasRun, open: state => state.open
 })
 
 // ---------------------------------------------------------------------------------------------------------------------
@@ -169,9 +172,21 @@ export const actions = actionTree({state, getters, mutations}, {
         const taxon = payload[i];
         const resp = values[i];
         const children: TreeItem[] = [];
-        resp.data.forEach(respItem => {
-          children.push(treeItemFromTaxonDescendants(respItem));
-        })
+
+        // break if too many genomes
+        for (let j = 0; j < resp.data.length; j++) {
+          children.push(treeItemFromTaxonDescendants(resp.data[j]))
+
+          if (j >= MAX_CHILDREN && resp.data[j].isGenome) {
+            children.push({
+              taxon: `+ ${(resp.data.length - MAX_CHILDREN).toLocaleString()} others`,
+              isGenome: true,
+              hideLink: true,
+              species: taxon
+            })
+            break;
+          }
+        }
         commit('SET_NODE_CHILDREN', {taxon: taxon, children: children})
         commit('ADD_OPEN', taxon)
       }
@@ -203,8 +218,16 @@ export const actions = actionTree({state, getters, mutations}, {
       const children: TreeItem[] = [];
       for (let i = 0; i < res.data.length; i++) {
         children.push(treeItemFromTaxonDescendants(res.data[i]));
+        if (i >= MAX_CHILDREN && res.data[i].isGenome) {
+          children.push({
+            taxon: `+ ${(res.data.length - MAX_CHILDREN).toLocaleString()} others`,
+            isGenome: true,
+            hideLink: true,
+            species: item.taxon
+          })
+          break;
+        }
       }
-
       commit('SET_NODE_CHILDREN', {taxon: item.taxon, children: children})
     })
   }