feat(R220): Update the website for R220.

assets/api/genome.ts

@@ -94,6 +94,9 @@ export interface GenomeMetadataGene {
   checkm_completeness: number
   checkm_contamination: number
   checkm_strain_heterogeneity: number
+  checkm2_completeness: number
+  checkm2_contamination: number
+  checkm2_model: string
   lsu_5s_count: number
   ssu_count: number
   lsu_23s_count: number

assets/models/taxon-history.ts

@@ -9,6 +9,7 @@ export enum TaxonHistoryRelease {
   R202 = "202",
   R207 = "207",
   R214 = "214",
+  R220 = "220",
   NCBI = "NCBI"
 }
 
@@ -22,6 +23,7 @@ export const TaxonHistoryReleases = [
   TaxonHistoryRelease.R202,
   TaxonHistoryRelease.R207,
   TaxonHistoryRelease.R214,
+  TaxonHistoryRelease.R220,
   TaxonHistoryRelease.NCBI
 ]
 

components/advanced/SearchRule.vue

@@ -176,20 +176,29 @@ function sortText(a: string, b: string): number {
 }
 
 function sortColumns(a: Column, b: Column): number {
-  // Sort based on group (override)
-  if (a.group == b.group) {
-    return sortText(a.display, b.display)
+  // Priority order for groups
+  const order = ['General', 'Taxonomic Information', 'Genome Characteristics', 'NCBI Metadata'];
+
+  // If both columns are in the same group, sort by display text
+  if (a.group === b.group) {
+    return sortText(a.display, b.display);
   } else {
-    if (a.group == 'General') {
-      return 1
-    } else if (a.group == 'Taxonomic Information') {
-      return 1
-    } else if (a.group == 'Genome Characteristics') {
-      return 1
-    } else if (a.group == 'NCBI Metadata') {
-      return 1
+    // Compare the groups by predefined order
+    const indexA = order.indexOf(a.group);
+    const indexB = order.indexOf(b.group);
+
+    // If both groups are found in the order array
+    if (indexA !== -1 && indexB !== -1) {
+      return indexA - indexB;
+    } else if (indexA !== -1) {
+      // Group A is in order array, but Group B is not
+      return -1;
+    } else if (indexB !== -1) {
+      // Group B is in order array, but Group A is not
+      return 1;
     } else {
-      return sortText(a.group, b.group)
+      // Neither group is in the order array, sort alphabetically
+      return sortText(a.group, b.group);
     }
   }
 }

components/genome/GenomeCharacteristics.vue

@@ -61,6 +61,63 @@
             </td>
           </tr>
 
+          <tr>
+            <td class="gtdb-green-bg-table first-table-col">CheckM2 Completeness</td>
+            <td>
+              <template v-if="isLoading">
+                <v-skeleton-loader
+                  type="text"
+                ></v-skeleton-loader>
+              </template>
+              <template v-else>
+                <template v-if="genomeCard.metadata_gene.checkm2_completeness == null">
+                  <NullChip/>
+                </template>
+                <template v-else>
+                  {{ genomeCard.metadata_gene.checkm2_completeness.toLocaleString() }}%
+                </template>
+              </template>
+            </td>
+          </tr>
+
+          <tr>
+            <td class="gtdb-green-bg-table first-table-col">CheckM2 Contamination</td>
+            <td>
+              <template v-if="isLoading">
+                <v-skeleton-loader
+                  type="text"
+                ></v-skeleton-loader>
+              </template>
+              <template v-else>
+                <template v-if="genomeCard.metadata_gene.checkm2_contamination == null">
+                  <NullChip/>
+                </template>
+                <template v-else>
+                  {{ genomeCard.metadata_gene.checkm2_contamination.toLocaleString() }}%
+                </template>
+              </template>
+            </td>
+          </tr>
+
+          <tr>
+            <td class="gtdb-green-bg-table first-table-col">CheckM2 Model</td>
+            <td>
+              <template v-if="isLoading">
+                <v-skeleton-loader
+                  type="text"
+                ></v-skeleton-loader>
+              </template>
+              <template v-else>
+                <template v-if="genomeCard.metadata_gene.checkm2_model == null">
+                  <NullChip/>
+                </template>
+                <template v-else>
+                  {{ genomeCard.metadata_gene.checkm2_model }}
+                </template>
+              </template>
+            </td>
+          </tr>
+
           <tr>
             <td class="gtdb-green-bg-table first-table-col">5S Count</td>
             <td>

components/genome/GenomeTaxonHistory.vue

@@ -177,7 +177,7 @@ export default Vue.extend({
   methods: {
     // Compute the taxon history URL for the current taxon
     getHistUrl(taxon: string) {
-      return `/taxon-history?from=R80&to=R214&query=${encodeURIComponent(taxon)}`
+      return `/taxon-history?from=R80&to=R220&query=${encodeURIComponent(taxon)}`
     },
 
     // Retrieve the taxon history for this accession

components/stats/REDr220.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="mt-2">
+    <h3>Bacteria</h3>
+    <div id="mpld3_bacteria_r214"></div>
+
+    <h3>Archaea</h3>
+    <div id="mpld3_archaea_r214"></div>
+
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+import * as d3 from 'd3v5';
+//@ts-ignore
+import mpld3 from 'mpld3';
+
+const archaea = require('~/assets/data/stats/r214/red-archaea.json')
+const bacteria = require('~/assets/data/stats/r214/red-bacteria.json')
+
+export default Vue.extend({
+  mounted() {
+
+    mpld3.register_plugin("axisreplacer", AxisReplacer);
+    AxisReplacer.prototype = Object.create(mpld3.Plugin.prototype);
+    AxisReplacer.prototype.constructor = AxisReplacer;
+    AxisReplacer.prototype.requiredProps = ["data"];
+    AxisReplacer.prototype.defaultProps = {}
+    // @ts-ignore
+    function AxisReplacer(fig, props){
+      // @ts-ignore
+      mpld3.Plugin.call(this, fig, props);
+    }
+
+    AxisReplacer.prototype.draw = function(){
+      let data = this.props.data;
+      let parent = document.getElementsByClassName("mpld3-yaxis")[0];
+      let gTicks = parent.getElementsByTagName("g");
+      for (let i=0; i < gTicks.length; i++) {
+        let curTick = gTicks[i];
+        let curText = curTick.getElementsByTagName("text")[0];
+        curText.innerHTML = data[i];
+      }
+    };
+
+    // @ts-ignore
+    mpld3.draw_figure("mpld3_archaea_r214", archaea);
+    mpld3.draw_figure("mpld3_bacteria_r214", bacteria);
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

components/taxon-history/TaxonHistoryFullTaxonomy.vue

@@ -41,7 +41,7 @@
             <td v-if="currentTaxonIndex >= 0"
             >
               <!-- If this is the current release, link to the tree -->
-              <template v-if="item.release === 'R214' && item.taxonomy.d.length > 3">
+              <template v-if="item.release === 'R220' && item.taxonomy.d.length > 3">
                 <nuxt-link :to="`/tree?r=${item.taxonomy.d}`">
                   {{ item.taxonomy.d }}
                 </nuxt-link>
@@ -53,7 +53,7 @@
             </td>
             <td v-if="currentTaxonIndex >= 1">
               <!-- If this is the current release, link to the tree -->
-              <template v-if="item.release === 'R214' && item.taxonomy.p.length > 3">
+              <template v-if="item.release === 'R220' && item.taxonomy.p.length > 3">
                 <nuxt-link :to="`/tree?r=${item.taxonomy.p}`">
                   {{ item.taxonomy.p }}
                 </nuxt-link>
@@ -65,7 +65,7 @@
             </td>
             <td v-if="currentTaxonIndex >= 2">
               <!-- If this is the current release, link to the tree -->
-              <template v-if="item.release === 'R214' && item.taxonomy.c.length > 3">
+              <template v-if="item.release === 'R220' && item.taxonomy.c.length > 3">
                 <nuxt-link :to="`/tree?r=${item.taxonomy.c}`">
                   {{ item.taxonomy.c }}
                 </nuxt-link>
@@ -77,7 +77,7 @@
             </td>
             <td v-if="currentTaxonIndex >= 3">
               <!-- If this is the current release, link to the tree -->
-              <template v-if="item.release === 'R214' && item.taxonomy.o.length > 3">
+              <template v-if="item.release === 'R220' && item.taxonomy.o.length > 3">
                 <nuxt-link :to="`/tree?r=${item.taxonomy.o}`">
                   {{ item.taxonomy.o }}
                 </nuxt-link>
@@ -89,7 +89,7 @@
             </td>
             <td v-if="currentTaxonIndex >= 4">
               <!-- If this is the current release, link to the tree -->
-              <template v-if="item.release === 'R214' && item.taxonomy.f.length > 3">
+              <template v-if="item.release === 'R220' && item.taxonomy.f.length > 3">
                 <nuxt-link :to="`/tree?r=${item.taxonomy.f}`">
                   {{ item.taxonomy.f }}
                 </nuxt-link>
@@ -101,7 +101,7 @@
             </td>
             <td v-if="currentTaxonIndex >= 5">
               <!-- If this is the current release, link to the tree -->
-              <template v-if="item.release === 'R214' && item.taxonomy.g.length > 3">
+              <template v-if="item.release === 'R220' && item.taxonomy.g.length > 3">
                 <nuxt-link :to="`/tree?r=${item.taxonomy.g}`">
                   {{ item.taxonomy.g }}
                 </nuxt-link>
@@ -113,7 +113,7 @@
             </td>
             <td v-if="currentTaxonIndex >= 6">
               <!-- If this is the current release, link to the tree -->
-              <template v-if="item.release === 'R214' && item.taxonomy.s.length > 3">
+              <template v-if="item.release === 'R220' && item.taxonomy.s.length > 3">
                 <nuxt-link :to="`/tree?r=${item.taxonomy.s}`">
                   {{ item.taxonomy.s }}
                 </nuxt-link>

layouts/default.vue

@@ -220,6 +220,13 @@ export default {
         },
       ],
       navStatistics: [
+        {
+          icon: 'mdi-apps',
+          title: 'Release 220',
+          to: '/stats/r220',
+          nuxt: true,
+          external: false,
+        },
         {
           icon: 'mdi-apps',
           title: 'Release 214',

nuxt.config.js

@@ -153,7 +153,7 @@ export default {
     advancedMaxHistory: 50,  // Maximum number of history states to retain in advanced search
     captchaSiteKey: process.env.CAPTCHA_KEY,
     googleAnalyticsId: process.env.GA_TRACKING_ID,
-    latestStatsPageUrl: '/stats/r214',  // this is used to point to the latest stats page,
+    latestStatsPageUrl: '/stats/r220',  // this is used to point to the latest stats page,
     nuxtVersion: version,
     apiCacheKey: loadApiVersion(),
     fastAniJobCookieName: 'fastani-jobs'

pages/index.vue

@@ -8,14 +8,14 @@
 
       <!-- First row -->
       <div class="d-flex flex-column">
-        <NotifyBar uid="r214">
-          *** GTDB Release 214.1 is now available 🎉
+        <NotifyBar uid="r220">
+          *** GTDB Release 220 is now available 🎉
           <NuxtLink class="mx-1" to="/downloads">download files</NuxtLink>
           ***
         </NotifyBar>
         <NotifyBar uid="r214-gtdbtk">
-          *** GTDB-Tk has been updated to use the R214 taxonomy from <span class="mx-1"><a
-          href="https://ecogenomics.github.io/GTDBTk/installing/index.html" target="_blank">v2.3.0</a></span>***
+          *** GTDB-Tk has been updated to use the R220 taxonomy from <span class="mx-1"><a
+          href="https://ecogenomics.github.io/GTDBTk/installing/index.html" target="_blank">v2.4.0</a></span>***
         </NotifyBar>
       </div>
 
@@ -91,7 +91,7 @@
     <!--    </div>-->
 
     <!-- Twitter footer -->
-    <div style="height: 40px;" class="d-block">
+    <div class="d-block" style="height: 40px;">
       <TwitterFooter/>
     </div>
 
@@ -129,27 +129,27 @@ export default Vue.extend({
   },
   data: () => ({
     /* Bacterial stats */
-    nBacTot: 394932,
-    nBacS: 80789,
-    nBacG: 19153,
-    nBacF: 4264,
-    nBacO: 1624,
-    nBacC: 488,
-    nBacP: 161,
+    nBacTot: 584382,
+    nBacS: 107235,
+    nBacG: 23112,
+    nBacF: 4870,
+    nBacO: 1840,
+    nBacC: 538,
+    nBacP: 175,
 
     /* Archaeal stats */
-    nArcTot: 7777,
-    nArcS: 4416,
-    nArcG: 1586,
-    nArcF: 508,
-    nArcO: 148,
-    nArcC: 60,
-    nArcP: 20,
+    nArcTot: 12477,
+    nArcS: 5869,
+    nArcG: 1847,
+    nArcF: 564,
+    nArcO: 166,
+    nArcC: 64,
+    nArcP: 19,
 
     /* Summary stats */
-    nGenomes: 402709,
-    releaseVer: '08-RS214',
-    releaseDate: '28th April 2023',
+    nGenomes: 596859,
+    releaseVer: '09-RS220',
+    releaseDate: 'TODO April 2023',
   }),
 })
 </script>

pages/stats/r214.vue

@@ -70,7 +70,7 @@
       </template>
 
       <template #species-overview>
-        GTDB R207 is comprised of 394,932 bacterial and 7,777 archaeal genomes organized into 80,789 bacterial and 4,416 archaeal species clusters.
+        GTDB R214 is comprised of 394,932 bacterial and 7,777 archaeal genomes organized into 80,789 bacterial and 4,416 archaeal species clusters.
         <v-simple-table class="gtdb-table mt-3" dense>
           <template v-slot:default>
             <thead>