Sketch out initial ideas for dataset view component

dannon · Jul 15, 2023 · f5fae5a · f5fae5a
1 parent a5c3275
commit f5fae5a
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 0 deletions.
diff --git a/client/src/components/Dataset/DatasetView.vue b/client/src/components/Dataset/DatasetView.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { BTab, BTabs } from "bootstrap-vue";
+
+import DatasetAttributes from "@/components/DatasetInformation/DatasetAttributes.vue";
+import DatasetDetails from "@/components/DatasetInformation/DatasetDetails.vue";
+import VisualizationsList from "@/components/Visualizations/Index.vue";
+
+const props = defineProps({
+    datasetId: {
+        type: String,
+        required: true,
+    },
+    // Move toplevel routes to this component with subrouting
+});
+
+// const activeTab = ref("activeTab");
+const displayUrl = computed(() => `/datasets/${props.datasetId}/display/?preview=true`);
+</script>
+<template>
+    <div>
+        <header class="dataset-header">
+            <h1>Dataset {{ datasetId }}</h1>
+        </header>
+        <div class="dataset-tabs">
+            <b-tabs pills card>
+                <b-tab title="Preview" active>
+                    <iframe
+                        :src="displayUrl"
+                        title="galaxy dataset display frame"
+                        class="center-frame h-100"
+                        width="100%"
+                        height="100%"
+                        frameborder="0"></iframe>
+                </b-tab>
+                <b-tab title="Details">
+                    <dataset-details :dataset-id="datasetId" />
+                </b-tab>
+                <b-tab title="Visualize">
+                    <visualizations-list :dataset-id="datasetId" />
+                </b-tab>
+                <b-tab title="Edit">
+                    <dataset-attributes :dataset-id="datasetId" />
+                </b-tab>
+            </b-tabs>
+        </div>
+    </div>
+</template>
+
+<style scoped></style>
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 GridHistory from "components/Grid/GridHistory";
@@ -210,6 +211,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
@@ -256,6 +256,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")