Sketch out initial dataset view component

dannon · Mar 8, 2024 · f25e5bb · f25e5bb
1 parent 9ddb6ad
commit f25e5bb
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 1 deletion.
diff --git a/client/src/components/Dataset/DatasetView.vue b/client/src/components/Dataset/DatasetView.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { BTab, BTabs } from "bootstrap-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,
+        required: true,
+    },
+    // Move toplevel routes to this component with subrouting
+});
+
+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 v-if="dataset && !isLoading">
+        <header class="dataset-header">
+            <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>
+                <BTab title="Preview" active class="h-100">
+                    <iframe
+                        :src="displayUrl"
+                        title="galaxy dataset display frame"
+                        class="center-frame h-100"
+                        width="100%"
+                        height="100%"
+                        frameborder="0"></iframe>
+                </BTab>
+                <BTab title="Details">
+                    <DatasetDetails :dataset-id="datasetId" />
+                </BTab>
+                <BTab title="Visualize">
+                    <VisualizationsList :dataset-id="datasetId" />
+                </BTab>
+                <BTab title="Edit">
+                    <DatasetAttributes :dataset-id="datasetId" />
+                </BTab>
+            </BTabs>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.dataset-header {
+    margin-bottom: 1.5rem;
+}
+</style>
diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
@@ -69,6 +69,7 @@
                     :keyboard-selectable="isCollection || expandDataset"
                     @delete="onDelete"
                     @display="onDisplay"
+                    @view="onView"
                     @showCollectionInfo="onShowCollectionInfo"
                     @edit="onEdit"
                     @undelete="$emit('undelete')"
@@ -223,6 +224,7 @@ export default {
                 reportError: `/datasets/${id}/error`,
                 rerun: `/tool_runner/rerun?id=${id}`,
                 visualize: `/visualizations?dataset_id=${id}`,
+                view: `/datasets/${id}`,
             };
         },
         isBeingUsed() {
@@ -292,6 +294,9 @@ export default {
         onDragEnd() {
             clearDrag();
         },
+        onView() {
+            this.$router.push(this.itemUrls.view);
+        },
         onEdit() {
             this.$router.push(this.itemUrls.edit);
         },

diff --git a/client/src/components/History/Content/ContentOptions.vue b/client/src/components/History/Content/ContentOptions.vue
@@ -38,6 +38,8 @@ const editDisabled = computed(() =>
 
 const displayUrl = computed(() => prependPath(props.itemUrls.display));
 
+const viewUrl = computed(() => prependPath(props.itemUrls.view));
+
 const editUrl = computed(() => prependPath(props.itemUrls.edit));
 
 const isCollection = computed(() => !props.isDataset);
@@ -98,7 +100,7 @@ function onDisplay($event: MouseEvent) {
             class="display-btn px-1"
             size="sm"
             variant="link"
-            :href="displayUrl"
+            :href="viewUrl"
             @click.prevent.stop="onDisplay($event)">
             <icon icon="eye" />
         </b-button>

diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js
@@ -5,6 +5,7 @@ import CollectionEditView from "components/Collections/common/CollectionEditView
 import DatasetList from "components/Dataset/DatasetList";
 import DatasetAttributes from "components/DatasetInformation/DatasetAttributes";
 import DatasetDetails from "components/DatasetInformation/DatasetDetails";
+import DatasetView from "components/Dataset/DatasetView";
 import DatasetError from "components/DatasetInformation/DatasetError";
 import FormGeneric from "components/Form/FormGeneric";
 import HistoryExportTasks from "components/History/Export/HistoryExport";
@@ -225,6 +226,11 @@ export function getRouter(Galaxy) {
                         component: DatasetError,
                         props: true,
                     },
+                    {
+                        path: "datasets/:datasetId",
+                        component: DatasetView,
+                        props: true,
+                    },
                     {
                         path: "datatypes",
                         component: AvailableDatatypes,

diff --git a/lib/galaxy/webapps/galaxy/buildapp.py b/lib/galaxy/webapps/galaxy/buildapp.py
@@ -258,6 +258,7 @@ def app_pair(global_conf, load_app_kwds=None, wsgi_preflight=True, **kwargs):
     webapp.add_client_route("/datasets/{dataset_id}/details")
     webapp.add_client_route("/datasets/{dataset_id}/preview")
     webapp.add_client_route("/datasets/{dataset_id}/show_params")
+    webapp.add_client_route("/datasets/{dataset_id}")
     webapp.add_client_route("/collection/{collection_id}/edit")
     webapp.add_client_route("/jobs/submission/success")
     webapp.add_client_route("/jobs/{job_id}/view")