From d01b78bfaf5c755d72f875a47731826120d51017 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Noah=20St=C3=BCrtz?= <noah.stuertz@gmail.com>
Date: Tue, 7 Nov 2023 12:52:06 +0100
Subject: [PATCH] add data to metadata summary pane

---
 src/views/show-results/DisplayMetadata.vue | 32 ++++++++++++++++++++++
 src/views/show-results/ResultView.vue      |  2 ++
 src/views/show-results/SummaryPane.vue     |  7 ++++-
 3 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 src/views/show-results/DisplayMetadata.vue

diff --git a/src/views/show-results/DisplayMetadata.vue b/src/views/show-results/DisplayMetadata.vue
new file mode 100644
index 0000000..157c80e
--- /dev/null
+++ b/src/views/show-results/DisplayMetadata.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { Metadata } from "@/model/Metadata";
+import type { PropType } from "vue";
+
+const props = defineProps({
+  id: { type: String },
+  metadata: { type: Object as PropType<Metadata>, required: true },
+});
+</script>
+
+<template>
+  <table>
+    <tbody>
+      <tr v-if="metadata.project_name">
+        <th class="text-end">Project Name:</th>
+        <td class="ps-5">{{ metadata.project_name }}</td>
+      </tr>
+      <tr v-if="metadata.sample?.collection_date">
+        <th class="text-end">Collection Date:</th>
+        <td class="ps-5">{{ metadata.sample.collection_date }}</td>
+      </tr>
+      <tr v-if="metadata.sample?.country">
+        <th class="text-end">Country:</th>
+        <td class="ps-5">{{ metadata.sample.country }}</td>
+      </tr>
+      <tr v-if="metadata.sequencing?.instrument_model">
+        <th class="text-end">Sequencing Instrument:</th>
+        <td class="ps-5">{{ metadata.sequencing?.instrument_model }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
diff --git a/src/views/show-results/ResultView.vue b/src/views/show-results/ResultView.vue
index b3f2183..5736548 100644
--- a/src/views/show-results/ResultView.vue
+++ b/src/views/show-results/ResultView.vue
@@ -104,6 +104,7 @@ state.value.setState(State.Loading);
             baktaResult &&
             gtdbtkResult &&
             checkmResult &&
+            metadata &&
             mlstResult
           "
         >
@@ -113,6 +114,7 @@ state.value.setState(State.Loading);
             :gtdbtk="gtdbtkResult"
             :checkm="checkmResult"
             :mlst="mlstResult"
+            :metadata="metadata"
           />
         </template>
         <template v-if="active_tab == 'metadata'">
diff --git a/src/views/show-results/SummaryPane.vue b/src/views/show-results/SummaryPane.vue
index 2635b55..65724f4 100644
--- a/src/views/show-results/SummaryPane.vue
+++ b/src/views/show-results/SummaryPane.vue
@@ -8,8 +8,10 @@ import type { PropType } from "vue";
 import BaktaStats from "@/views/show-results/bakta/BaktaStats.vue";
 import DisplayAssembly from "@/views/show-results/DisplayAssembly.vue";
 import GtdbtkTaxonomy from "@/views/show-results/GtdbtkTaxonomy.vue";
+import DisplayMetadata from "./DisplayMetadata.vue";
 import PhylogenyTree from "@/components/PhylogenyTree.vue";
 import ContigBar from "@/components/ContigBar.vue";
+import type { Metadata } from "@/model/Metadata";
 
 const props = defineProps({
   id: { type: String },
@@ -17,6 +19,7 @@ const props = defineProps({
   checkm: { type: Object as PropType<CheckmResult>, required: true },
   gtdbtk: { type: Object as PropType<GtdbtkResult>, required: true },
   mlst: { type: Object as PropType<MlstResult>, required: true },
+  metadata: { type: Object as PropType<Metadata>, required: true },
 });
 </script>
 
@@ -25,7 +28,9 @@ const props = defineProps({
     <div class="col-lg-4 col-md-12">
       <div class="card h-100">
         <div class="card-header">Metadata</div>
-        <div class="card-body">...</div>
+        <div class="card-body">
+          <DisplayMetadata :metadata="metadata" />
+        </div>
       </div>
     </div>
     <div class="col-lg-4 col-md-12">