Merge pull request #17964 from dannon/fix-report-image-display

[24.0] Show dataset image in workflow_outputs display listing.

client/src/components/Datatypes/model.ts

@@ -14,10 +14,18 @@ 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];
-        const parentClassName = mapping.ext_to_class_name[parent];
+        const parentClassName = mapping.ext_to_class_name[parent] || parent;
+
         if (!childClassName || !parentClassName) {
             return false;
         }

client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue

@@ -65,6 +65,9 @@
                             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
@@ -81,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>
@@ -99,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: {