From 93af53ac1b533996791d61714340f971000def27 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Mon, 2 Oct 2023 17:08:13 -0400
Subject: [PATCH] More display at the top of detail component

---
 client/src/components/Dataset/DatasetView.vue | 43 ++++++++++++++++---
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Dataset/DatasetView.vue b/client/src/components/Dataset/DatasetView.vue
index 6af9ca546eb4..14a434cfa8d9 100644
--- a/client/src/components/Dataset/DatasetView.vue
+++ b/client/src/components/Dataset/DatasetView.vue
@@ -1,11 +1,17 @@
 <script setup lang="ts">
 import { BTab, BTabs } from "bootstrap-vue";
-import { computed } from "vue";
+import { computed, ref} from "vue";
 
+import { STATES } from "@/components/History/Content/model/states";
+import { useDatasetStore } from "@/stores/datasetStore";
+
+import Heading from "../Common/Heading.vue";
 import DatasetAttributes from "@/components/DatasetInformation/DatasetAttributes.vue";
 import DatasetDetails from "@/components/DatasetInformation/DatasetDetails.vue";
 import VisualizationsList from "@/components/Visualizations/Index.vue";
 
+const datasetStore = useDatasetStore();
+
 const props = defineProps({
     datasetId: {
         type: String,
@@ -14,14 +20,35 @@ const props = defineProps({
     // Move toplevel routes to this component with subrouting
 });
 
-// const activeTab = ref("activeTab");
+
+const dataset = computed(() => datasetStore.getDataset(props.datasetId));
+const isLoading = computed(() => datasetStore.isLoadingDataset(props.datasetId));
+
+const stateText = computed(() => dataset.value && STATES[dataset.value.state] && STATES[dataset.value.state].text);
+const activeTab = ref("activeTab");
 const displayUrl = computed(() => `/datasets/${props.datasetId}/display/?preview=true`);
 </script>
 <template>
-    <div>
+    <div v-if="dataset && !isLoading">
         <header class="dataset-header">
-            <h2>Dataset {{ datasetId }}</h2>
-            <code>More toplevel details here</code>
+            <Heading h2>{{ dataset.name }}</Heading>
+            <div v-if="stateText" class="mb-1">{{ stateText }}</div>
+            <div v-else-if="dataset.misc_blurb" class="blurb">
+                <span class="value">{{ dataset.misc_blurb }}</span>
+            </div>
+            <span v-if="dataset.file_ext" class="datatype">
+                <span v-localize class="prompt">format</span>
+                <span class="value">{{ dataset.file_ext }}</span>
+            </span>
+            <span v-if="dataset.genome_build" class="dbkey">
+                <span v-localize class="prompt">database</span>
+                <BLink class="value" data-label="Database/Build" @click.stop="activeTab = 'edit'">{{
+                    dataset.genome_build
+                }}</BLink>
+            </span>
+            <div v-if="dataset.misc_info" class="info">
+                <span class="value">{{ dataset.misc_info }}</span>
+            </div>
         </header>
         <div class="dataset-tabs h-100">
             <BTabs pills card>
@@ -48,4 +75,8 @@ const displayUrl = computed(() => `/datasets/${props.datasetId}/display/?preview
     </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.dataset-header {
+    margin-bottom: 1.5rem;
+}
+</style>