From 9291173c77e0f81a9eb8ab3f3e856be9e6b52445 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 10 Apr 2024 22:42:04 -0400
Subject: [PATCH 1/4] In HistoryDatasetDisplay markdown element, display images
 in iframe

---
 .../Markdown/Elements/HistoryDatasetDisplay.vue           | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue b/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
index 547f6bcc9353..08aebe4aba57 100644
--- a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
+++ b/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
@@ -61,7 +61,13 @@
                     <div v-else-if="error">{{ error }}</div>
                     <div v-else :class="contentClass">
                         <b-embed
-                            v-if="isSubTypeOfAny(datasetType, ['pdf', 'html'], datatypesModel)"
+                            v-if="
+                                isSubTypeOfAny(
+                                    datasetType,
+                                    ['pdf', 'html', 'galaxy.datatypes.images.Image'],
+                                    datatypesModel
+                                )
+                            "
                             type="iframe"
                             aspect="16by9"
                             :src="displayUrl" />

From c15b6e0fd3cdb7c53660bdbe58a31c8fa98f9a1a Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 10 Apr 2024 22:48:25 -0400
Subject: [PATCH 2/4] Allow abstract parent class lookup by classname for
 isSubType.

---
 client/src/components/Datatypes/model.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Datatypes/model.ts b/client/src/components/Datatypes/model.ts
index 45334ba8d255..28e55257daa7 100644
--- a/client/src/components/Datatypes/model.ts
+++ b/client/src/components/Datatypes/model.ts
@@ -17,7 +17,8 @@ export class DatatypesMapperModel {
     isSubType(child: string, parent: string): boolean {
         const mapping = this.datatypesMapping;
         const childClassName = mapping.ext_to_class_name[child];
-        const parentClassName = mapping.ext_to_class_name[parent];
+        const parentClassName = mapping.ext_to_class_name[parent] || parent;
+
         if (!childClassName || !parentClassName) {
             return false;
         }

From dd9af46effe1067168a7bbdbda7c0c2dec0be6f3 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Thu, 11 Apr 2024 07:44:21 -0400
Subject: [PATCH 3/4] Document isSubType

---
 client/src/components/Datatypes/model.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/client/src/components/Datatypes/model.ts b/client/src/components/Datatypes/model.ts
index 28e55257daa7..797d0349e199 100644
--- a/client/src/components/Datatypes/model.ts
+++ b/client/src/components/Datatypes/model.ts
@@ -14,6 +14,13 @@ export class DatatypesMapperModel {
         this.datatypesMapping = typesAndMapping.datatypes_mapping;
     }
 
+    /**
+     * Checks if a given child datatype is a subtype of a parent datatype.
+     * @param child - The child datatype extension as registered in the datatypes registry.
+     * @param parent - The parent datatype, which can be an extension or explicit class name
+     *                 Can also be used with extensionless abstract datatypes (e.g. "galaxy.datatypes.images.Image")
+     * @returns A boolean indicating whether the child is a subtype of the parent.
+     */
     isSubType(child: string, parent: string): boolean {
         const mapping = this.datatypesMapping;
         const childClassName = mapping.ext_to_class_name[child];

From ea455b382399c4e6e1dd75766656bee8c2a2ee51 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Thu, 11 Apr 2024 07:37:04 -0400
Subject: [PATCH 4/4] Reuse datasetimage display for appropriate datatypes

Minor tweaking of pre
---
 .../Elements/HistoryDatasetDisplay.vue         | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue b/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
index 08aebe4aba57..d44e22d74b4b 100644
--- a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
+++ b/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
@@ -61,16 +61,13 @@
                     <div v-else-if="error">{{ error }}</div>
                     <div v-else :class="contentClass">
                         <b-embed
-                            v-if="
-                                isSubTypeOfAny(
-                                    datasetType,
-                                    ['pdf', 'html', 'galaxy.datatypes.images.Image'],
-                                    datatypesModel
-                                )
-                            "
+                            v-if="isSubTypeOfAny(datasetType, ['pdf', 'html'], datatypesModel)"
                             type="iframe"
                             aspect="16by9"
                             :src="displayUrl" />
+                        <HistoryDatasetAsImage
+                            v-else-if="isSubTypeOfAny(datasetType, ['galaxy.datatypes.images.Image'], datatypesModel)"
+                            :args="args" />
                         <div v-else-if="itemContent.item_data">
                             <div v-if="isSubTypeOfAny(datasetType, ['tabular'], datatypesModel)">
                                 <UrlDataProvider
@@ -87,8 +84,8 @@
                                 </UrlDataProvider>
                             </div>
                             <pre v-else>
-                                    <code class="word-wrap-normal">{{ itemContent.item_data }}</code>
-                                </pre>
+                                <code class="word-wrap-normal">{{ 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>
@@ -105,10 +102,13 @@ import LoadingSpan from "components/LoadingSpan";
 import { UrlDataProvider } from "components/providers/UrlDataProvider";
 import { getAppRoot } from "onload/loadConfig";
 
+import HistoryDatasetAsImage from "./HistoryDatasetAsImage.vue";
+
 export default {
     components: {
         LoadingSpan,
         UrlDataProvider,
+        HistoryDatasetAsImage,
     },
     props: {
         args: {