Restore iframe, inject content

Author: guerler

client/src/components/Dataset/DatasetDisplay.vue

@@ -12,7 +12,8 @@ import { bytesToString } from "@/utils/utils";
 
 import Alert from "@/components/Alert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
-import TabularChunkedView from "./Tabular/TabularChunkedView.vue";
+import CenterFrame from "@/entry/analysis/modules/CenterFrame.vue";
+import TabularChunkedView from "components/Dataset/Tabular/TabularChunkedView.vue";
 
 interface Props {
     datasetId: string;
@@ -73,7 +74,7 @@ watch(
         {{ errorMessage }}
     </BAlert>
     <LoadingSpan v-else-if="isLoading || !dataset" message="Loading dataset content" />
-    <div v-else>
+    <div v-else class="h-100">
         <Alert v-if="sanitizedMessage" :dismissible="true" variant="warning" data-description="sanitization warning">
             {{ sanitizedMessage }}
             <span v-if="isAdmin && sanitizedToolId">
@@ -86,7 +87,7 @@ watch(
             You are viewing a deleted dataset.
         </div>
         <TabularChunkedView v-if="content && content.ck_data" :options="{ ...dataset, first_data_chunk: content }" />
-        <div v-else-if="content">
+        <div v-else-if="content" class="h-100">
             <div v-if="isBinary">
                 This is a binary (or unknown to Galaxy) dataset of size {{ bytesToString(dataset.file_size) }}. Preview
                 is not implemented for this filetype. Displaying as ASCII text.
@@ -97,7 +98,7 @@ watch(
                 </div>
                 <a :href="downloadUrl">Download</a>
             </div>
-            <pre v-if="contentType === 'text/html'" v-html="content" />
+            <CenterFrame v-if="contentType === 'text/html'" :html="content" />
             <pre v-else>{{ content }}</pre>
         </div>
     </div>

client/src/entry/analysis/modules/CenterFrame.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 
 import { withPrefix } from "@/utils/redirect";
 
@@ -10,16 +10,25 @@ const props = withDefaults(
     defineProps<{
         id?: string;
         src?: string;
+        html?: string;
     }>(),
     {
         id: "frame",
         src: "",
+        html: "",
     },
 );
 
+const iframeRef = ref<HTMLIFrameElement>();
 const srcWithRoot = computed(() => withPrefix(props.src));
 const isLoading = ref(true);
 
+function injectHtml(val: string) {
+    if (iframeRef.value && val) {
+        iframeRef.value.srcdoc = val;
+    }
+}
+
 function onLoad(ev: Event) {
     isLoading.value = false;
     const iframe = ev.currentTarget as HTMLIFrameElement;
@@ -32,14 +41,19 @@ function onLoad(ev: Event) {
         console.warn("[CenterFrame] onLoad location access forbidden.", ev, location);
     }
 }
+
+watch(() => props.html, injectHtml);
+onMounted(() => injectHtml(props.html));
 </script>
+
 <template>
     <div class="h-100">
         <LoadingSpan v-if="isLoading">Loading ...</LoadingSpan>
         <iframe
             :id="id"
+            ref="iframeRef"
             :name="id"
-            :src="srcWithRoot"
+            :src="props.html ? undefined : srcWithRoot"
             class="center-frame"
             frameborder="0"
             title="galaxy frame"