From 8bb21e5921c1ab5f80877be8336b81b057a41724 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 27 Aug 2021 15:28:44 -0400
Subject: [PATCH 1/7] Display Tabular datasets as sortable tables with correct
 metadata headers in pages

---
 .../Elements/HistoryDatasetDisplay.vue        | 96 +++++++++++++------
 .../providers/SingleQueryProvider.js          |  4 +
 lib/galaxy/managers/markdown_util.py          |  5 +-
 3 files changed, 75 insertions(+), 30 deletions(-)

diff --git a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue b/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
index 5cc4e14bbb7..cf2836efef4 100644
--- a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
+++ b/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
@@ -33,14 +33,35 @@
                 </span>
             </b-card-header>
             <b-card-body>
-                <LoadingSpan v-if="loading" message="Loading Dataset" />
-                <div v-else class="embedded-dataset content-height">
-                    <pre v-if="itemContent.item_data">
-                        <code class="text-normalwrap">{{ itemContent.item_data }}</code>
-                    </pre>
-                    <div v-else>No content found.</div>
-                    <b-link v-if="itemContent.truncated" :href="itemContent.item_url"> Show More... </b-link>
-                </div>
+                <UrlDataProvider :url="itemUrl" v-slot="{ result: itemContent, loading, error }">
+                    <LoadingSpan v-if="loading" message="Loading Dataset" />
+                    <div v-else-if="error">{{ error }}</div>
+                    <div v-else class="embedded-dataset content-height">
+                        <div v-if="itemContent.item_data">
+                            <pre v-if="notTabular">
+                                <code class="text-normalwrap">{{ itemContent.item_data }}</code>
+                            </pre>
+                            <div v-else>
+                                <UrlDataProvider
+                                    :url="metaUrl"
+                                    v-slot="{ result: metaData, loading: metaLoading, error: metaError }"
+                                >
+                                    <LoadingSpan v-if="metaLoading" message="Loading Metadata" />
+                                    <div v-else-if="metaError">{{ metaError }}</div>
+                                    <b-table
+                                        v-else
+                                        striped
+                                        hover
+                                        :fields="getFields(metaData)"
+                                        :items="getItems(itemContent.item_data, metaData)"
+                                    />
+                                </UrlDataProvider>
+                            </div>
+                        </div>
+                        <div v-else>No content found.</div>
+                        <b-link v-if="itemContent.truncated" :href="itemContent.item_url"> Show More... </b-link>
+                    </div>
+                </UrlDataProvider>
             </b-card-body>
         </b-card>
     </div>
@@ -49,10 +70,12 @@
 <script>
 import { getAppRoot } from "onload/loadConfig";
 import LoadingSpan from "components/LoadingSpan";
-import axios from "axios";
+import { UrlDataProvider } from "components/providers/UrlDataProvider";
+
 export default {
     components: {
         LoadingSpan,
+        UrlDataProvider,
     },
     props: {
         args: {
@@ -68,19 +91,11 @@ export default {
             default: false,
         },
     },
-    data() {
-        return {
-            itemContent: null,
-            loading: true,
-        };
-    },
-    created() {
-        this.getContent().then((data) => {
-            this.itemContent = data;
-            this.loading = false;
-        });
-    },
     computed: {
+        notTabular() {
+            const dataset = this.datasets[this.args.history_dataset_id];
+            return dataset && dataset.ext != "tabular";
+        },
         datasetName() {
             const dataset = this.datasets[this.args.history_dataset_id];
             return dataset && dataset.name;
@@ -92,17 +107,42 @@ export default {
             return `${getAppRoot()}dataset/imp?dataset_id=${this.args.history_dataset_id}`;
         },
         itemUrl() {
-            return `${getAppRoot()}api/datasets/${this.args.history_dataset_id}/get_content_as_text`;
+            return `api/datasets/${this.args.history_dataset_id}/get_content_as_text`;
+        },
+        metaUrl() {
+            return `api/datasets/${this.args.history_dataset_id}`;
         },
     },
     methods: {
-        async getContent() {
-            try {
-                const response = await axios.get(this.itemUrl);
-                return response.data;
-            } catch (e) {
-                return `Failed to retrieve content. ${e}`;
+        getFields(metaData) {
+            const fields = [];
+            const columnNames = metaData.metadata_column_names || [];
+            const columnCount = metaData.metadata_columns;
+            for (let i = 0; i < columnCount; i++) {
+                fields.push({
+                    key: `${i}`,
+                    label: columnNames[i] || i,
+                    sortable: true,
+                });
             }
+            return fields;
+        },
+        getItems(textData, metaData) {
+            const tableData = [];
+            const delimiter = metaData.metadata_delimiter || "\t";
+            const comments = metaData.metadata_comment_lines || 0;
+            const lines = textData.split("\n");
+            lines.forEach((line, i) => {
+                if (i >= comments) {
+                    const tabs = line.split(delimiter);
+                    const rowData = {};
+                    tabs.forEach((cellData, j) => {
+                        rowData[j] = cellData;
+                    });
+                    tableData.push(rowData);
+                }
+            });
+            return tableData;
         },
     },
 };
diff --git a/client/src/components/providers/SingleQueryProvider.js b/client/src/components/providers/SingleQueryProvider.js
index bee613787e0..76ec0cbb41d 100644
--- a/client/src/components/providers/SingleQueryProvider.js
+++ b/client/src/components/providers/SingleQueryProvider.js
@@ -21,6 +21,7 @@ export const SingleQueryProvider = (lookup) => {
         data() {
             return {
                 result: undefined,
+                error: undefined,
             };
         },
         computed: {
@@ -47,6 +48,8 @@ export const SingleQueryProvider = (lookup) => {
                     this.result = result;
                 },
                 (err) => {
+                    this.result = {};
+                    this.error = err;
                     this.$emit("error", err);
                 }
             );
@@ -55,6 +58,7 @@ export const SingleQueryProvider = (lookup) => {
             return this.$scopedSlots.default({
                 loading: this.loading,
                 result: this.result,
+                error: this.error,
             });
         },
     };
diff --git a/lib/galaxy/managers/markdown_util.py b/lib/galaxy/managers/markdown_util.py
index 806281b5616..ae7e6927b80 100644
--- a/lib/galaxy/managers/markdown_util.py
+++ b/lib/galaxy/managers/markdown_util.py
@@ -270,10 +270,11 @@ class ReadyForExportMarkdownDirectiveHandler(GalaxyInternalMarkdownDirectiveHand
         self.ensure_rendering_data_for("history_datasets", obj)[key] = val or default_val
 
     def handle_dataset_display(self, line, hda):
-        self.extend_history_dataset_rendering_data(hda, "name", hda.name, "")
+        self.handle_dataset_name(line, hda)
+        self.handle_dataset_type(line, hda)
 
     def handle_dataset_embedded(self, line, hda):
-        self.extend_history_dataset_rendering_data(hda, "name", hda.name, "")
+        self.handle_dataset_name(line, hda)
 
     def handle_dataset_peek(self, line, hda):
         self.extend_history_dataset_rendering_data(hda, "peek", hda.peek, "*No Dataset Peek Available*")

From cab184eb95f904d8621cb63f0dbe9679ea8e3a92 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 27 Aug 2021 16:28:18 -0400
Subject: [PATCH 2/7] Show PDF and HTML content as embedded frames in pages,
 increase maximum content size to 20rem

---
 .../Elements/HistoryDatasetDisplay.vue        | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue b/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
index cf2836efef4..147a27f4c78 100644
--- a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
+++ b/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
@@ -37,11 +37,14 @@
                     <LoadingSpan v-if="loading" message="Loading Dataset" />
                     <div v-else-if="error">{{ error }}</div>
                     <div v-else class="embedded-dataset content-height">
-                        <div v-if="itemContent.item_data">
-                            <pre v-if="notTabular">
-                                <code class="text-normalwrap">{{ itemContent.item_data }}</code>
-                            </pre>
-                            <div v-else>
+                        <b-embed
+                            v-if="['pdf', 'html'].includes(datasetType)"
+                            type="iframe"
+                            aspect="16by9"
+                            :src="displayUrl"
+                        />
+                        <div v-else-if="itemContent.item_data">
+                            <div v-if="datasetType == 'tabular'">
                                 <UrlDataProvider
                                     :url="metaUrl"
                                     v-slot="{ result: metaData, loading: metaLoading, error: metaError }"
@@ -57,6 +60,9 @@
                                     />
                                 </UrlDataProvider>
                             </div>
+                            <pre v-else>
+                                <code class="text-normalwrap">{{ itemContent.item_data }}</code>
+                            </pre>
                         </div>
                         <div v-else>No content found.</div>
                         <b-link v-if="itemContent.truncated" :href="itemContent.item_url"> Show More... </b-link>
@@ -92,9 +98,9 @@ export default {
         },
     },
     computed: {
-        notTabular() {
+        datasetType() {
             const dataset = this.datasets[this.args.history_dataset_id];
-            return dataset && dataset.ext != "tabular";
+            return dataset.ext;
         },
         datasetName() {
             const dataset = this.datasets[this.args.history_dataset_id];
@@ -103,6 +109,9 @@ export default {
         downloadUrl() {
             return `${getAppRoot()}dataset/display?dataset_id=${this.args.history_dataset_id}`;
         },
+        displayUrl() {
+            return `${getAppRoot()}datasets/${this.args.history_dataset_id}/display`;
+        },
         importUrl() {
             return `${getAppRoot()}dataset/imp?dataset_id=${this.args.history_dataset_id}`;
         },
@@ -149,6 +158,6 @@ export default {
 </script>
 <style scoped>
 .content-height {
-    max-height: 15rem;
+    max-height: 20rem;
 }
 </style>

From 20fd446fcb2ce125feea378a43b665a53d35f66d Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 30 Aug 2021 15:33:52 -0400
Subject: [PATCH 3/7] Match tabular datatype through datatype mapping, add
 filter to ignore empty rows

---
 .../Elements/HistoryDatasetDisplay.vue        | 63 ++++++++++++-------
 1 file changed, 42 insertions(+), 21 deletions(-)

diff --git a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue b/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
index 147a27f4c78..7d5abb2409b 100644
--- a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
+++ b/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
@@ -44,25 +44,31 @@
                             :src="displayUrl"
                         />
                         <div v-else-if="itemContent.item_data">
-                            <div v-if="datasetType == 'tabular'">
-                                <UrlDataProvider
-                                    :url="metaUrl"
-                                    v-slot="{ result: metaData, loading: metaLoading, error: metaError }"
-                                >
-                                    <LoadingSpan v-if="metaLoading" message="Loading Metadata" />
-                                    <div v-else-if="metaError">{{ metaError }}</div>
-                                    <b-table
-                                        v-else
-                                        striped
-                                        hover
-                                        :fields="getFields(metaData)"
-                                        :items="getItems(itemContent.item_data, metaData)"
-                                    />
-                                </UrlDataProvider>
-                            </div>
-                            <pre v-else>
-                                <code class="text-normalwrap">{{ itemContent.item_data }}</code>
-                            </pre>
+                            <UrlDataProvider
+                                :url="datatypesUrl"
+                                v-slot="{ result: datatypesModel, loading: datatypesLoading }"
+                            >
+                                <LoadingSpan v-if="datatypesLoading" message="Loading Datatypes" />
+                                <div v-else-if="isSubType('tabular', datasetType, datatypesModel)">
+                                    <UrlDataProvider
+                                        :url="metaUrl"
+                                        v-slot="{ result: metaData, loading: metaLoading, error: metaError }"
+                                    >
+                                        <LoadingSpan v-if="metaLoading" message="Loading Metadata" />
+                                        <div v-else-if="metaError">{{ metaError }}</div>
+                                        <b-table
+                                            v-else
+                                            striped
+                                            hover
+                                            :fields="getFields(metaData)"
+                                            :items="getItems(itemContent.item_data, metaData)"
+                                        />
+                                    </UrlDataProvider>
+                                </div>
+                                <pre v-else>
+                                    <code class="text-normalwrap">{{ itemContent.item_data }}</code>
+                                </pre>
+                            </UrlDataProvider>
                         </div>
                         <div v-else>No content found.</div>
                         <b-link v-if="itemContent.truncated" :href="itemContent.item_url"> Show More... </b-link>
@@ -77,6 +83,7 @@
 import { getAppRoot } from "onload/loadConfig";
 import LoadingSpan from "components/LoadingSpan";
 import { UrlDataProvider } from "components/providers/UrlDataProvider";
+import { DatatypesMapperModel } from "components/Datatypes/model";
 
 export default {
     components: {
@@ -106,6 +113,9 @@ export default {
             const dataset = this.datasets[this.args.history_dataset_id];
             return dataset && dataset.name;
         },
+        datatypesUrl() {
+            return "api/datatypes/types_and_mapping";
+        },
         downloadUrl() {
             return `${getAppRoot()}dataset/display?dataset_id=${this.args.history_dataset_id}`;
         },
@@ -123,6 +133,10 @@ export default {
         },
     },
     methods: {
+        isSubType(child, parent, datatypesModel) {
+            const datatypesMapper = new DatatypesMapperModel(datatypesModel);
+            return datatypesMapper.isSubType(child, parent);
+        },
         getFields(metaData) {
             const fields = [];
             const columnNames = metaData.metadata_column_names || [];
@@ -145,10 +159,17 @@ export default {
                 if (i >= comments) {
                     const tabs = line.split(delimiter);
                     const rowData = {};
+                    let hasData = false;
                     tabs.forEach((cellData, j) => {
-                        rowData[j] = cellData;
+                        const cellDataTrimmed = cellData.trim();
+                        if (cellDataTrimmed) {
+                            hasData = true;
+                        }
+                        rowData[j] = cellDataTrimmed;
                     });
-                    tableData.push(rowData);
+                    if (hasData) {
+                        tableData.push(rowData);
+                    }
                 }
             });
             return tableData;

From c22aa7d7a27efa4f76d175bf683483015ed064b2 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 30 Aug 2021 15:45:24 -0400
Subject: [PATCH 4/7] Use dataset mapper for html and pdf subtype mapping

---
 .../Elements/HistoryDatasetDisplay.vue        | 76 ++++++++++---------
 1 file changed, 40 insertions(+), 36 deletions(-)

diff --git a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue b/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
index 7d5abb2409b..ed207cd2544 100644
--- a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
+++ b/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
@@ -37,41 +37,45 @@
                     <LoadingSpan v-if="loading" message="Loading Dataset" />
                     <div v-else-if="error">{{ error }}</div>
                     <div v-else class="embedded-dataset content-height">
-                        <b-embed
-                            v-if="['pdf', 'html'].includes(datasetType)"
-                            type="iframe"
-                            aspect="16by9"
-                            :src="displayUrl"
-                        />
-                        <div v-else-if="itemContent.item_data">
-                            <UrlDataProvider
-                                :url="datatypesUrl"
-                                v-slot="{ result: datatypesModel, loading: datatypesLoading }"
-                            >
-                                <LoadingSpan v-if="datatypesLoading" message="Loading Datatypes" />
-                                <div v-else-if="isSubType('tabular', datasetType, datatypesModel)">
-                                    <UrlDataProvider
-                                        :url="metaUrl"
-                                        v-slot="{ result: metaData, loading: metaLoading, error: metaError }"
-                                    >
-                                        <LoadingSpan v-if="metaLoading" message="Loading Metadata" />
-                                        <div v-else-if="metaError">{{ metaError }}</div>
-                                        <b-table
-                                            v-else
-                                            striped
-                                            hover
-                                            :fields="getFields(metaData)"
-                                            :items="getItems(itemContent.item_data, metaData)"
-                                        />
-                                    </UrlDataProvider>
+                        <UrlDataProvider
+                            :url="datatypesUrl"
+                            v-slot="{ result: datatypesModel, loading: datatypesLoading }"
+                        >
+                            <LoadingSpan v-if="datatypesLoading" message="Loading Datatypes" />
+                            <div v-else>
+                                <b-embed
+                                    v-if="isSubTypeOfAny(datasetType, ['pdf', 'html'], datatypesModel)"
+                                    type="iframe"
+                                    aspect="16by9"
+                                    :src="displayUrl"
+                                />
+                                <div v-else-if="itemContent.item_data">
+                                    <div v-if="isSubTypeOfAny(datasetType, ['tabular'], datatypesModel)">
+                                        <UrlDataProvider
+                                            :url="metaUrl"
+                                            v-slot="{ result: metaData, loading: metaLoading, error: metaError }"
+                                        >
+                                            <LoadingSpan v-if="metaLoading" message="Loading Metadata" />
+                                            <div v-else-if="metaError">{{ metaError }}</div>
+                                            <b-table
+                                                v-else
+                                                striped
+                                                hover
+                                                :fields="getFields(metaData)"
+                                                :items="getItems(itemContent.item_data, metaData)"
+                                            />
+                                        </UrlDataProvider>
+                                    </div>
+                                    <pre v-else>
+                                            <code class="text-normalwrap">{{ itemContent.item_data }}</code>
+                                        </pre>
                                 </div>
-                                <pre v-else>
-                                    <code class="text-normalwrap">{{ itemContent.item_data }}</code>
-                                </pre>
-                            </UrlDataProvider>
-                        </div>
-                        <div v-else>No content found.</div>
-                        <b-link v-if="itemContent.truncated" :href="itemContent.item_url"> Show More... </b-link>
+                                <div v-else>No content found.</div>
+                                <b-link v-if="itemContent.truncated" :href="itemContent.item_url">
+                                    Show More...
+                                </b-link>
+                            </div>
+                        </UrlDataProvider>
                     </div>
                 </UrlDataProvider>
             </b-card-body>
@@ -133,9 +137,9 @@ export default {
         },
     },
     methods: {
-        isSubType(child, parent, datatypesModel) {
+        isSubTypeOfAny(child, parents, datatypesModel) {
             const datatypesMapper = new DatatypesMapperModel(datatypesModel);
-            return datatypesMapper.isSubType(child, parent);
+            return datatypesMapper.isSubTypeOfAny(child, parents);
         },
         getFields(metaData) {
             const fields = [];

From 06599fb0f7599f5d482e9571ed07a926d834b892 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 30 Aug 2021 16:06:31 -0400
Subject: [PATCH 5/7] Fix indent missed by format client

---
 .../components/Markdown/Elements/HistoryDatasetDisplay.vue    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue b/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
index ed207cd2544..c725d313abc 100644
--- a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
+++ b/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
@@ -67,8 +67,8 @@
                                         </UrlDataProvider>
                                     </div>
                                     <pre v-else>
-                                            <code class="text-normalwrap">{{ itemContent.item_data }}</code>
-                                        </pre>
+                                        <code class="text-normalwrap">{{ itemContent.item_data }}</code>
+                                    </pre>
                                 </div>
                                 <div v-else>No content found.</div>
                                 <b-link v-if="itemContent.truncated" :href="itemContent.item_url">

From ed3c4d8b8f82da98b7b534bb3e3c892ace752fea Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 30 Aug 2021 23:37:11 -0400
Subject: [PATCH 6/7] Remove unused divs in markdown components, slightly
 increase padding for pages to improve scolling and navigation

---
 .../CollectionDisplay.vue                     |  98 ++++++-----
 .../Elements/HistoryDatasetDisplay.vue        | 153 +++++++++---------
 .../Markdown/Elements/JobMetrics.vue          |   8 +-
 .../Markdown/Elements/JobParameters.vue       |   8 +-
 .../components/Markdown/Elements/ToolStd.vue  |  12 +-
 .../Markdown/Elements/Visualization.vue       |  12 +-
 .../Elements/Workflow/WorkflowDisplay.vue     |  84 +++++-----
 client/src/components/Markdown/Markdown.vue   |   2 +-
 client/src/style/scss/markdown.scss           |   7 +
 9 files changed, 186 insertions(+), 198 deletions(-)

diff --git a/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionDisplay.vue b/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionDisplay.vue
index 6b69dc66870..077e7b77536 100644
--- a/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionDisplay.vue
+++ b/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionDisplay.vue
@@ -1,54 +1,52 @@
 <template>
-    <div class="w-100 p-2">
-        <b-card body-class="p-0">
-            <b-card-header>
-                <span class="float-right">
-                    <b-button
-                        :href="downloadUrl"
-                        variant="link"
-                        size="sm"
-                        role="button"
-                        title="Download Collection"
-                        type="button"
-                        class="py-0 px-1"
-                        v-b-tooltip.hover
-                    >
-                        <span class="fa fa-download" />
-                    </b-button>
-                    <CurrentUser v-slot="{ user }">
-                        <UserHistories v-if="user" :user="user" v-slot="{ currentHistoryId }">
-                            <b-button
-                                v-if="currentHistoryId"
-                                @click="onCopyCollection(currentHistoryId)"
-                                href="#"
-                                role="button"
-                                variant="link"
-                                title="Import Collection"
-                                type="button"
-                                class="py-0 px-1"
-                                v-b-tooltip.hover
-                            >
-                                <span class="fa fa-file-import" />
-                            </b-button>
-                        </UserHistories>
-                    </CurrentUser>
-                </span>
-                <span>
-                    <span>Dataset Collection:</span>
-                    <span class="font-weight-light">{{ collectionName }}</span>
-                </span>
-            </b-card-header>
-            <b-card-body>
-                <LoadingSpan v-if="loading" message="Loading Collection" />
-                <div v-else class="content-height">
-                    <b-alert v-if="!!messageText" :variant="messageVariant" show>
-                        {{ messageText }}
-                    </b-alert>
-                    <CollectionTree :node="itemContent" :skip-head="true" />
-                </div>
-            </b-card-body>
-        </b-card>
-    </div>
+    <b-card body-class="p-0">
+        <b-card-header>
+            <span class="float-right">
+                <b-button
+                    :href="downloadUrl"
+                    variant="link"
+                    size="sm"
+                    role="button"
+                    title="Download Collection"
+                    type="button"
+                    class="py-0 px-1"
+                    v-b-tooltip.hover
+                >
+                    <span class="fa fa-download" />
+                </b-button>
+                <CurrentUser v-slot="{ user }">
+                    <UserHistories v-if="user" :user="user" v-slot="{ currentHistoryId }">
+                        <b-button
+                            v-if="currentHistoryId"
+                            @click="onCopyCollection(currentHistoryId)"
+                            href="#"
+                            role="button"
+                            variant="link"
+                            title="Import Collection"
+                            type="button"
+                            class="py-0 px-1"
+                            v-b-tooltip.hover
+                        >
+                            <span class="fa fa-file-import" />
+                        </b-button>
+                    </UserHistories>
+                </CurrentUser>
+            </span>
+            <span>
+                <span>Dataset Collection:</span>
+                <span class="font-weight-light">{{ collectionName }}</span>
+            </span>
+        </b-card-header>
+        <b-card-body>
+            <LoadingSpan v-if="loading" message="Loading Collection" />
+            <div v-else class="content-height">
+                <b-alert v-if="!!messageText" :variant="messageVariant" show>
+                    {{ messageText }}
+                </b-alert>
+                <CollectionTree :node="itemContent" :skip-head="true" />
+            </div>
+        </b-card-body>
+    </b-card>
 </template>
 
 <script>
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue b/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
index c725d313abc..138e9e9a002 100644
--- a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
+++ b/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
@@ -1,86 +1,79 @@
 <template>
-    <div class="w-100 p-2">
-        <b-card body-class="p-0">
-            <b-card-header v-if="!embedded">
-                <span class="float-right">
-                    <b-button
-                        :href="downloadUrl"
-                        variant="link"
-                        size="sm"
-                        role="button"
-                        title="Download Dataset"
-                        type="button"
-                        class="py-0 px-1"
-                        v-b-tooltip.hover
-                    >
-                        <span class="fa fa-download" />
-                    </b-button>
-                    <b-button
-                        :href="importUrl"
-                        role="button"
-                        variant="link"
-                        title="Import Dataset"
-                        type="button"
-                        class="py-0 px-1"
-                        v-b-tooltip.hover
-                    >
-                        <span class="fa fa-file-import" />
-                    </b-button>
-                </span>
-                <span>
-                    <span>Dataset:</span>
-                    <span class="font-weight-light">{{ datasetName }}</span>
-                </span>
-            </b-card-header>
-            <b-card-body>
-                <UrlDataProvider :url="itemUrl" v-slot="{ result: itemContent, loading, error }">
-                    <LoadingSpan v-if="loading" message="Loading Dataset" />
-                    <div v-else-if="error">{{ error }}</div>
-                    <div v-else class="embedded-dataset content-height">
-                        <UrlDataProvider
-                            :url="datatypesUrl"
-                            v-slot="{ result: datatypesModel, loading: datatypesLoading }"
-                        >
-                            <LoadingSpan v-if="datatypesLoading" message="Loading Datatypes" />
-                            <div v-else>
-                                <b-embed
-                                    v-if="isSubTypeOfAny(datasetType, ['pdf', 'html'], datatypesModel)"
-                                    type="iframe"
-                                    aspect="16by9"
-                                    :src="displayUrl"
-                                />
-                                <div v-else-if="itemContent.item_data">
-                                    <div v-if="isSubTypeOfAny(datasetType, ['tabular'], datatypesModel)">
-                                        <UrlDataProvider
-                                            :url="metaUrl"
-                                            v-slot="{ result: metaData, loading: metaLoading, error: metaError }"
-                                        >
-                                            <LoadingSpan v-if="metaLoading" message="Loading Metadata" />
-                                            <div v-else-if="metaError">{{ metaError }}</div>
-                                            <b-table
-                                                v-else
-                                                striped
-                                                hover
-                                                :fields="getFields(metaData)"
-                                                :items="getItems(itemContent.item_data, metaData)"
-                                            />
-                                        </UrlDataProvider>
-                                    </div>
-                                    <pre v-else>
-                                        <code class="text-normalwrap">{{ itemContent.item_data }}</code>
-                                    </pre>
+    <b-card body-class="p-0">
+        <b-card-header v-if="!embedded">
+            <span class="float-right">
+                <b-button
+                    :href="downloadUrl"
+                    variant="link"
+                    size="sm"
+                    role="button"
+                    title="Download Dataset"
+                    type="button"
+                    class="py-0 px-1"
+                    v-b-tooltip.hover
+                >
+                    <span class="fa fa-download" />
+                </b-button>
+                <b-button
+                    :href="importUrl"
+                    role="button"
+                    variant="link"
+                    title="Import Dataset"
+                    type="button"
+                    class="py-0 px-1"
+                    v-b-tooltip.hover
+                >
+                    <span class="fa fa-file-import" />
+                </b-button>
+            </span>
+            <span>
+                <span>Dataset:</span>
+                <span class="font-weight-light">{{ datasetName }}</span>
+            </span>
+        </b-card-header>
+        <b-card-body>
+            <UrlDataProvider :url="itemUrl" v-slot="{ result: itemContent, loading, error }">
+                <LoadingSpan v-if="loading" message="Loading Dataset" />
+                <div v-else-if="error">{{ error }}</div>
+                <div v-else class="embedded-dataset content-height">
+                    <UrlDataProvider :url="datatypesUrl" v-slot="{ result: datatypesModel, loading: datatypesLoading }">
+                        <LoadingSpan v-if="datatypesLoading" message="Loading Datatypes" />
+                        <div v-else>
+                            <b-embed
+                                v-if="isSubTypeOfAny(datasetType, ['pdf', 'html'], datatypesModel)"
+                                type="iframe"
+                                aspect="16by9"
+                                :src="displayUrl"
+                            />
+                            <div v-else-if="itemContent.item_data">
+                                <div v-if="isSubTypeOfAny(datasetType, ['tabular'], datatypesModel)">
+                                    <UrlDataProvider
+                                        :url="metaUrl"
+                                        v-slot="{ result: metaData, loading: metaLoading, error: metaError }"
+                                    >
+                                        <LoadingSpan v-if="metaLoading" message="Loading Metadata" />
+                                        <div v-else-if="metaError">{{ metaError }}</div>
+                                        <b-table
+                                            v-else
+                                            striped
+                                            hover
+                                            :fields="getFields(metaData)"
+                                            :items="getItems(itemContent.item_data, metaData)"
+                                        />
+                                    </UrlDataProvider>
                                 </div>
-                                <div v-else>No content found.</div>
-                                <b-link v-if="itemContent.truncated" :href="itemContent.item_url">
-                                    Show More...
-                                </b-link>
+                                <pre v-else>
+                                    <code class="text-normalwrap">{{ itemContent.item_data }}</code>
+                                </pre>
                             </div>
-                        </UrlDataProvider>
-                    </div>
-                </UrlDataProvider>
-            </b-card-body>
-        </b-card>
-    </div>
+                            <div v-else>No content found.</div>
+                            <b-link v-if="itemContent.truncated" :href="itemContent.item_url"> Show More... </b-link>
+                        </div>
+                    </UrlDataProvider>
+                </div>
+            </UrlDataProvider>
+        </b-card-body>
+    </b-card>
 </template>
 
 <script>
diff --git a/client/src/components/Markdown/Elements/JobMetrics.vue b/client/src/components/Markdown/Elements/JobMetrics.vue
index 66d17bc0397..46af304a0a7 100644
--- a/client/src/components/Markdown/Elements/JobMetrics.vue
+++ b/client/src/components/Markdown/Elements/JobMetrics.vue
@@ -1,9 +1,7 @@
 <template>
-    <div class="w-100 p-2">
-        <b-card nobody>
-            <JobMetrics class="job-metrics" :job-id="args.job_id" />
-        </b-card>
-    </div>
+    <b-card nobody>
+        <JobMetrics class="job-metrics" :job-id="args.job_id" />
+    </b-card>
 </template>
 
 <script>
diff --git a/client/src/components/Markdown/Elements/JobParameters.vue b/client/src/components/Markdown/Elements/JobParameters.vue
index f3d48790d11..3560a6e443a 100644
--- a/client/src/components/Markdown/Elements/JobParameters.vue
+++ b/client/src/components/Markdown/Elements/JobParameters.vue
@@ -1,9 +1,7 @@
 <template>
-    <div class="w-100 p-2">
-        <b-card nobody>
-            <JobParameters class="job-parameters" :job-id="args.job_id" :param="args.param" :include-title="false" />
-        </b-card>
-    </div>
+    <b-card nobody>
+        <JobParameters class="job-parameters" :job-id="args.job_id" :param="args.param" :include-title="false" />
+    </b-card>
 </template>
 
 <script>
diff --git a/client/src/components/Markdown/Elements/ToolStd.vue b/client/src/components/Markdown/Elements/ToolStd.vue
index ddb47974030..0a819c29f58 100644
--- a/client/src/components/Markdown/Elements/ToolStd.vue
+++ b/client/src/components/Markdown/Elements/ToolStd.vue
@@ -1,11 +1,9 @@
 <template>
-    <div class="w-100 p-2">
-        <b-card nobody class="content-height">
-            <div :class="name" :job_id="args.job_id">
-                <pre><code class="text-normalwrap">{{ jobContent }}</code></pre>
-            </div>
-        </b-card>
-    </div>
+    <b-card nobody class="content-height">
+        <div :class="name" :job_id="args.job_id">
+            <pre><code class="text-normalwrap">{{ jobContent }}</code></pre>
+        </div>
+    </b-card>
 </template>
 
 <script>
diff --git a/client/src/components/Markdown/Elements/Visualization.vue b/client/src/components/Markdown/Elements/Visualization.vue
index abe938955ef..0f500b9efa2 100644
--- a/client/src/components/Markdown/Elements/Visualization.vue
+++ b/client/src/components/Markdown/Elements/Visualization.vue
@@ -1,11 +1,9 @@
 <template>
-    <div class="w-100 p-2">
-        <b-card body-class="embed-responsive embed-responsive-4by3">
-            <LoadingSpan v-if="loading" class="m-2" message="Loading Visualization" />
-            <div v-else-if="error" class="m-2">{{ error }}</div>
-            <iframe v-else class="embed-responsive-item" :src="visualizationUrl" />
-        </b-card>
-    </div>
+    <b-card body-class="embed-responsive embed-responsive-4by3">
+        <LoadingSpan v-if="loading" class="m-2" message="Loading Visualization" />
+        <div v-else-if="error" class="m-2">{{ error }}</div>
+        <iframe v-else class="embed-responsive-item" :src="visualizationUrl" />
+    </b-card>
 </template>
 
 <script>
diff --git a/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue b/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue
index 73b2692f755..d2ba0a814fd 100644
--- a/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue
+++ b/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue
@@ -1,48 +1,46 @@
 <template>
-    <div class="w-100 p-2">
-        <b-card body-class="p-0">
-            <b-card-header v-if="!embedded">
-                <span class="float-right">
-                    <b-button
-                        :href="downloadUrl"
-                        variant="link"
-                        size="sm"
-                        role="button"
-                        title="Download Workflow"
-                        type="button"
-                        class="py-0 px-1"
-                        v-b-tooltip.hover
-                    >
-                        <span class="fa fa-download" />
-                    </b-button>
-                    <b-button
-                        :href="importUrl"
-                        role="button"
-                        variant="link"
-                        title="Import Workflow"
-                        type="button"
-                        class="py-0 px-1"
-                        v-b-tooltip.hover
-                    >
-                        <span class="fa fa-file-import" />
-                    </b-button>
-                </span>
-                <span>
-                    <span>Workflow:</span>
-                    <span class="font-weight-light">{{ workflowName }}</span>
-                </span>
-            </b-card-header>
-            <b-card-body>
-                <LoadingSpan v-if="loading" message="Loading Workflow" />
-                <div v-else class="content-height">
-                    <div v-for="step in itemContent.steps" :key="step.order_index" class="mb-2">
-                        <div>Step {{ step.order_index + 1 }}: {{ step.label }}</div>
-                        <WorkflowTree :input="step" :skip-head="true" />
-                    </div>
+    <b-card body-class="p-0">
+        <b-card-header v-if="!embedded">
+            <span class="float-right">
+                <b-button
+                    :href="downloadUrl"
+                    variant="link"
+                    size="sm"
+                    role="button"
+                    title="Download Workflow"
+                    type="button"
+                    class="py-0 px-1"
+                    v-b-tooltip.hover
+                >
+                    <span class="fa fa-download" />
+                </b-button>
+                <b-button
+                    :href="importUrl"
+                    role="button"
+                    variant="link"
+                    title="Import Workflow"
+                    type="button"
+                    class="py-0 px-1"
+                    v-b-tooltip.hover
+                >
+                    <span class="fa fa-file-import" />
+                </b-button>
+            </span>
+            <span>
+                <span>Workflow:</span>
+                <span class="font-weight-light">{{ workflowName }}</span>
+            </span>
+        </b-card-header>
+        <b-card-body>
+            <LoadingSpan v-if="loading" message="Loading Workflow" />
+            <div v-else class="content-height">
+                <div v-for="step in itemContent.steps" :key="step.order_index" class="mb-2">
+                    <div>Step {{ step.order_index + 1 }}: {{ step.label }}</div>
+                    <WorkflowTree :input="step" :skip-head="true" />
                 </div>
-            </b-card-body>
-        </b-card>
-    </div>
+            </div>
+        </b-card-body>
+    </b-card>
 </template>
 
 <script>
diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index 24b081b19c0..700a77aeaea 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -44,7 +44,7 @@
                     </div>
                 </b-alert>
             </div>
-            <div v-for="(obj, index) in markdownObjects" :key="index">
+            <div v-for="(obj, index) in markdownObjects" :key="index" class="markdown-components">
                 <p v-if="obj.name == 'default'" v-html="obj.content" class="text-justify m-2" />
                 <div v-else-if="obj.name == 'generate_galaxy_version'" class="galaxy-version">
                     <pre><code>{{ getVersion }}</code></pre>
diff --git a/client/src/style/scss/markdown.scss b/client/src/style/scss/markdown.scss
index 2e39f5bce9f..31de045c3a6 100644
--- a/client/src/style/scss/markdown.scss
+++ b/client/src/style/scss/markdown.scss
@@ -12,3 +12,10 @@
         flex: 1;
     }
 }
+
+.markdown-wrapper {
+    @extend .px-4;
+    .markdown-components {
+        @extend .py-2;
+    }
+}

From ade2764e25d408bf5288a53f2b89089a07c7d6cd Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 31 Aug 2021 11:24:14 -0400
Subject: [PATCH 7/7] Fix padding in legacy dataset display mako

---
 templates/webapps/galaxy/dataset/display.mako | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/webapps/galaxy/dataset/display.mako b/templates/webapps/galaxy/dataset/display.mako
index 0e3ccc90bf6..fb174b6fbd1 100644
--- a/templates/webapps/galaxy/dataset/display.mako
+++ b/templates/webapps/galaxy/dataset/display.mako
@@ -100,7 +100,7 @@
 
     <div class="unified-panel-body">
         <div style="overflow: auto; height: 100%;">
-            <div class="page-body">
+            <div class="page-body p-3">
                 <div style="float: right">
                     ${self.render_item_links( item )}
                 </div>