restyled tabs, their content and footer/navbar

ag-computational-bio · Aug 30, 2023 · 25912e7 · 25912e7
1 parent 12eafc1
commit 25912e7
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 41 deletions.
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -8,21 +8,7 @@
         <a href="">
           <img src="@/assets/images/De.NBI_Logo.svg" width="350" height="160" />
         </a>
-        <div class="mx-5 vr justify-self-center"></div>
-        <ul class="nav pb-3 mb-3 justify-content-center flex-xl-column flex-row">
-          <li class="navitem">
-            <router-link class="nav-link px-2 text-muted" to="/">Home</router-link>
-          </li>
-          <li class="navitem">
-            <router-link class="nav-link px-2 text-muted" to="/about">About</router-link>
-          </li>
-          <li class="navitem">
-            <router-link class="nav-link px-2 text-muted" to="/imprint">Imprint</router-link>
-          </li>
-        </ul>
       </div>
-
-      <p class="text-center text-muted">2023 - Bakta</p>
     </footer>
   </div>
 </template>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -5,6 +5,7 @@ const items = ref([
   { href: { 'name': 'browse' }, text: 'Browse' },
   { href: { 'name': 'search' }, text: 'Search' },
   { href: { 'name': 'about' }, text: 'About' },
+  { href: { 'name': 'imprint' }, text: 'Imprint' },
 ])
 </script>
 

diff --git a/src/views/show-results/DatasetSummary.vue b/src/views/show-results/DatasetSummary.vue
@@ -7,15 +7,15 @@
       </tr>
       <tr>
         <th scope="row">Species:</th>
-        <td>{{ species }}</td>
+        <td>{{ annotation.genome.genus + " " + annotation.genome.species }}</td>
       </tr>
       <tr>
         <th scope="row">Strain:</th>
         <td>{{ annotation.genome.strain }}</td>
       </tr>
       <tr>
         <th scope="row">Genome size:</th>
-        <td>{{ annotation.stats.size + " bp" }}</td>
+        <td>{{ annotation.stats.size.toLocaleString('gb') + " bp" }}</td>
       </tr>
       <tr>
         <th scope="row">GC:</th>
@@ -55,10 +55,4 @@ const props = defineProps({
   checkm: { type: Object as PropType<CheckmResult> },
   id: { type: String },
 });
-
-const species = computed(() => {
-  return props.annotation?.genome.genus + " "
-    + props.annotation?.genome.species.charAt(0).toLocaleUpperCase() + props.annotation?.genome.species.slice(1);
-})
-
 </script>
diff --git a/src/views/show-results/DisplayAnnotation.vue b/src/views/show-results/DisplayAnnotation.vue
@@ -0,0 +1,64 @@
+<template>
+  <table class="table statstable">
+    <template v-if="annotation">
+      <tr>
+        <th scope="row">ID:</th>
+        <td>{{ id }}</td>
+      </tr>
+      <tr>
+        <th scope="row">Species:</th>
+        <td>{{ species }}</td>
+      </tr>
+      <tr>
+        <th scope="row">Strain:</th>
+        <td>{{ annotation.genome.strain }}</td>
+      </tr>
+      <tr>
+        <th scope="row">Genome size:</th>
+        <td>{{ annotation.stats.size + " bp" }}</td>
+      </tr>
+      <tr>
+        <th scope="row">GC:</th>
+        <td>{{ ratioToPercentage(annotation.stats.gc) }}</td>
+      </tr>
+    </template>
+    <template v-else>
+      <tr>
+        <th scope="row">There is no bakta file availabe.</th>
+      </tr>
+    </template>
+    <template v-if="checkm">
+      <tr>
+        <th scope="row">Completeness:</th>
+        <td>{{ checkm.quality.completeness + "%" }}</td>
+      </tr>
+      <tr>
+        <th scope="row">Contamination:</th>
+        <td>{{ checkm.quality.contamination + "%" }}</td>
+      </tr>
+    </template>
+    <template v-else>
+      <tr>
+        <th scope="row">There is no checkm file available.</th>
+      </tr>
+    </template>
+  </table>
+</template>
+<script setup lang="ts">
+import type { BaktaResult } from "@/model/BaktaResults";
+import type { CheckmResult } from "@/model/CheckmResults";
+import { ratioToPercentage } from "@/util";
+import { computed, type PropType } from "vue";
+
+const props = defineProps({
+  annotation: { type: Object as PropType<BaktaResult> },
+  checkm: { type: Object as PropType<CheckmResult> },
+  id: { type: String },
+});
+
+const species = computed(() => {
+  return props.annotation?.genome.genus + " "
+    + props.annotation?.genome.species.charAt(0).toLocaleUpperCase() + props.annotation?.genome.species.slice(1);
+})
+
+</script>
diff --git a/src/views/show-results/DisplayAssembly.vue b/src/views/show-results/DisplayAssembly.vue
@@ -2,21 +2,21 @@
   <table class="table statstable">
     <template v-if="bakta">
       <tr>
-        <th scope="row">Genome size</th>
-        <td>{{ bakta.stats.size }}</td>
+        <th scope="row">Genome size:</th>
+        <td>{{ bakta.stats.size.toLocaleString("gb") + "bp" }}</td>
       </tr>
       <tr>
-        <th scope="row">GC</th>
+        <th scope="row">GC:</th>
         <td>{{ ratioToPercentage(bakta.stats.gc) }}</td>
       </tr>
       <tr>
-        <th scope="row">No. Sequences</th>
+        <th scope="row">No. Sequences:</th>
         <td>{{ bakta.stats.no_sequences }}</td>
       </tr>
     </template>
     <template v-if="bakta">
       <tr>
-        <th scope="row">N50</th>
+        <th scope="row">N50:</th>
         <td>{{ bakta.stats.n50 }}</td>
       </tr>
     </template>
@@ -27,14 +27,14 @@
     </template>
     <template v-if="checkm">
       <tr>
-        <th scope="row">Completeness</th>
-        <td>{{ checkm.quality.completeness }}</td>
+        <th scope="row">Completeness:</th>
+        <td>{{ checkm.quality.completeness + "%" }}</td>
       </tr>
     </template>
     <template v-if="checkm">
       <tr>
-        <th scope="row">Contamination</th>
-        <td>{{ checkm.quality.contamination }}</td>
+        <th scope="row">Contamination:</th>
+        <td>{{ checkm.quality.contamination + "%"}}</td>
       </tr>
     </template>
     <template v-else>

diff --git a/src/views/show-results/bakta/BaktaStats.vue b/src/views/show-results/bakta/BaktaStats.vue
@@ -1,16 +1,7 @@
 <template>
-  <div class="row mb-5">
-    <div class="col-md-6">
-      <h5>Input</h5>
-      <display-tuple label="Organism:" :value="name" />
-      <display-tuple label="Sequences:" :value="sequencesCount" />
-      <display-tuple label="Genome size:" :value="size" />
-    </div>
-  </div>
-
   <div class="row mb-5">
     <div class="col-md-10">
-      <h5>Output</h5>
+      <h5>Number of Features</h5>
       <div class="row">
         <div class="col-md-4">
           <display-tuple