Remove tabular chunked, binary and large file mako

client/src/bundleEntries.js

@@ -1,23 +1,9 @@
 /**
- * The list of horrible globals we expose on window.bundleEntries.
- *
- * Everything that is exposed on this global variable is something that the python templates
- * require for their hardcoded initializations. These objects are going to have to continue
- * to exist until such time as we replace the overall application with a Vue component which
- * will handle initializations for components individually.
- *
+ * The list of globals we expose on window.bundleEntries.
  */
-import { replaceChildrenWithComponent } from "utils/mountVueComponent";
-
-import TabularChunkedView from "components/Visualizations/Tabular/TabularChunkedView.vue";
 
 // legacy/grid_base.mako
 export { default as LegacyGridView } from "legacy/grid/grid-view";
 
 // webapps/reports/run_stats.mako
 export { create_chart, create_histogram } from "reports/run_stats";
-
-// webapps/galaxy/dataset/{ display | tabular_chunked }.mako
-export const createTabularDatasetChunkedView = (options) => {
-    return replaceChildrenWithComponent(options.parent_elt, TabularChunkedView, { options });
-};

client/src/components/Dataset/DatasetDisplay.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { BAlert } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed, ref, watch } from "vue";
+
+import { useDatasetStore } from "@/stores/datasetStore";
+import { useUserStore } from "@/stores/userStore";
+import { withPrefix } from "@/utils/redirect";
+import { errorMessageAsString } from "@/utils/simple-error";
+import { bytesToString } from "@/utils/utils";
+
+import Alert from "@/components/Alert.vue";
+import TabularChunkedView from "@/components/Dataset/Tabular/TabularChunkedView.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+import CenterFrame from "@/entry/analysis/modules/CenterFrame.vue";
+
+interface Props {
+    datasetId: string;
+    isBinary: boolean;
+}
+
+const { getDataset, isLoadingDataset } = useDatasetStore();
+
+const emit = defineEmits(["load"]);
+
+const props = defineProps<Props>();
+
+const contentTruncated = ref<number | null>(null);
+const contentChunked = ref<boolean>(false);
+const errorMessage = ref<string>("");
+const sanitizedJobImported = ref<boolean>(false);
+const sanitizedToolId = ref<string | null>(null);
+
+const { isAdmin } = storeToRefs(useUserStore());
+
+const dataset = computed(() => getDataset(props.datasetId));
+const datasetUrl = computed(() => `/datasets/${props.datasetId}/display`);
+const downloadUrl = computed(() => withPrefix(`${datasetUrl.value}?to_ext=${dataset.value?.file_ext}`));
+const isLoading = computed(() => isLoadingDataset(props.datasetId));
+const previewUrl = computed(() => `${datasetUrl.value}?preview=True`);
+
+const sanitizedMessage = computed(() => {
+    const plainText = "Contents are shown as plain text.";
+    if (sanitizedJobImported.value) {
+        return `Dataset has been imported. ${plainText}`;
+    } else if (sanitizedToolId.value) {
+        return `Dataset created by a tool that is not known to create safe HTML. ${plainText}`;
+    }
+    return undefined;
+});
+
+watch(
+    () => props.datasetId,
+    async () => {
+        try {
+            const { headers } = await fetch(withPrefix(previewUrl.value), { method: "HEAD" });
+            contentChunked.value = !!headers.get("x-content-chunked");
+            contentTruncated.value = headers.get("x-content-truncated")
+                ? Number(headers.get("x-content-truncated"))
+                : null;
+            sanitizedJobImported.value = !!headers.get("x-sanitized-job-imported");
+            sanitizedToolId.value = headers.get("x-sanitized-tool-id");
+            errorMessage.value = "";
+        } catch (e) {
+            errorMessage.value = errorMessageAsString(e);
+            console.error(e);
+        }
+    },
+    { immediate: true },
+);
+</script>
+
+<template>
+    <BAlert v-if="errorMessage" variant="danger" show>
+        {{ errorMessage }}
+    </BAlert>
+    <LoadingSpan v-else-if="isLoading || !dataset" message="Loading dataset content" />
+    <div v-else class="dataset-display h-100">
+        <Alert v-if="sanitizedMessage" :dismissible="true" variant="warning" data-description="sanitization warning">
+            {{ sanitizedMessage }}
+            <span v-if="isAdmin && sanitizedToolId">
+                <br />
+                <router-link data-description="allowlist link" to="/admin/sanitize_allow">Review Allowlist</router-link>
+                if outputs of {{ sanitizedToolId }} are trusted and should be shown as HTML.
+            </span>
+        </Alert>
+        <div v-if="dataset.deleted" id="deleted-data-message" class="errormessagelarge">
+            You are viewing a deleted dataset.
+        </div>
+        <TabularChunkedView v-if="contentChunked" :options="dataset" />
+        <div v-else 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.
+            </div>
+            <div v-if="contentTruncated" class="warningmessagelarge">
+                <div>
+                    This dataset is large and only the first {{ bytesToString(contentTruncated) }} is shown below.
+                </div>
+                <a :href="downloadUrl">Download</a>
+            </div>
+            <CenterFrame :src="previewUrl" @load="emit('load')" />
+        </div>
+    </div>
+</template>

client/src/components/Dataset/DatasetView.vue

@@ -14,13 +14,13 @@ import { bytesToString } from "@/utils/utils";
 import DatasetError from "../DatasetInformation/DatasetError.vue";
 import LoadingSpan from "../LoadingSpan.vue";
 import DatasetAsImage from "./DatasetAsImage/DatasetAsImage.vue";
+import DatasetDisplay from "./DatasetDisplay.vue";
 import DatasetState from "./DatasetState.vue";
 import Heading from "@/components/Common/Heading.vue";
 import DatasetAttributes from "@/components/DatasetInformation/DatasetAttributes.vue";
 import DatasetDetails from "@/components/DatasetInformation/DatasetDetails.vue";
 import VisualizationsList from "@/components/Visualizations/Index.vue";
 import VisualizationFrame from "@/components/Visualizations/VisualizationFrame.vue";
-import CenterFrame from "@/entry/analysis/modules/CenterFrame.vue";
 
 const datasetStore = useDatasetStore();
 const datatypeStore = useDatatypeStore();
@@ -61,6 +61,13 @@ const downloadUrl = computed(() => withPrefix(`/datasets/${props.datasetId}/disp
 const preferredVisualization = computed(
     () => dataset.value && datatypeStore.getPreferredVisualization(dataset.value.file_ext),
 );
+const isBinaryDataset = computed(() => {
+    if (!dataset.value?.file_ext || !datatypesMapperStore.datatypesMapper) {
+        return false;
+    }
+    return datatypesMapperStore.datatypesMapper.isSubTypeOfAny(dataset.value.file_ext, ["galaxy.datatypes.binary"]);
+});
+
 const isImageDataset = computed(() => {
     if (!dataset.value?.file_ext || !datatypesMapperStore.datatypesMapper) {
         return false;
@@ -93,7 +100,7 @@ watch(
 
 <template>
     <LoadingSpan v-if="isLoading || !dataset" message="Loading dataset details" />
-    <div v-else class="dataset-view d-flex flex-column h-100">
+    <div v-else class="dataset-view d-flex flex-column">
         <header v-if="!displayOnly" :key="`dataset-header-${dataset.id}`" class="dataset-header flex-shrink-0">
             <div class="d-flex">
                 <Heading
@@ -181,18 +188,13 @@ watch(
                 <FontAwesomeIcon :icon="faBug" class="mr-1" /> Error
             </BNavItem>
         </BNav>
-        <div v-if="tab === 'preview'" class="h-100">
+        <div v-if="tab === 'preview'" class="tab-content-panel">
             <VisualizationFrame
                 v-if="preferredVisualization"
                 :dataset-id="datasetId"
                 :visualization="preferredVisualization"
                 @load="iframeLoading = false" />
-            <CenterFrame
-                v-else-if="isPdfDataset"
-                :src="`/datasets/${datasetId}/display/?preview=True`"
-                :is-preview="true"
-                @load="iframeLoading = false" />
-            <div v-else-if="isAutoDownloadType" class="auto-download-message p-4">
+            <div v-else-if="isAutoDownloadType && !isPdfDataset" class="auto-download-message p-4">
                 <div class="alert alert-info">
                     <h4>Download Required</h4>
                     <p>This file type ({{ dataset.file_ext }}) will download automatically when accessed directly.</p>
@@ -203,23 +205,14 @@ watch(
                 </div>
             </div>
             <DatasetAsImage
-                v-else-if="isImageDataset"
+                v-else-if="isImageDataset && !isPdfDataset"
                 :history-dataset-id="datasetId"
                 :allow-size-toggle="true"
                 class="p-3" />
-            <CenterFrame
-                v-else
-                :src="`/datasets/${datasetId}/display/?preview=True`"
-                :is-preview="true"
-                @load="iframeLoading = false" />
+            <DatasetDisplay v-else :dataset-id="datasetId" :is-binary="isBinaryDataset" @load="iframeLoading = false" />
         </div>
-        <div v-else-if="tab === 'raw'" class="h-100">
-            <CenterFrame
-                v-if="isPdfDataset"
-                :src="`/datasets/${datasetId}/display/?preview=True`"
-                :is-preview="true"
-                @load="iframeLoading = false" />
-            <div v-else-if="isAutoDownloadType" class="auto-download-message p-4">
+        <div v-else-if="tab === 'raw'" class="tab-content-panel">
+            <div v-if="isAutoDownloadType && !isPdfDataset" class="auto-download-message p-4">
                 <div class="alert alert-info">
                     <h4>Download Required</h4>
                     <p>This file type ({{ dataset.file_ext }}) will download automatically when accessed directly.</p>
@@ -229,11 +222,7 @@ watch(
                     </a>
                 </div>
             </div>
-            <CenterFrame
-                v-else
-                :src="`/datasets/${datasetId}/display/?preview=True`"
-                :is-preview="true"
-                @load="iframeLoading = false" />
+            <DatasetDisplay v-else :dataset-id="datasetId" :is-binary="isBinaryDataset" @load="iframeLoading = false" />
         </div>
         <div v-else-if="tab === 'visualize'" class="tab-content-panel">
             <VisualizationsList :dataset-id="datasetId" />
@@ -318,8 +307,7 @@ watch(
 .tab-content-panel {
     display: flex;
     flex-direction: column;
-    overflow: hidden;
-    overflow-y: auto;
+    overflow: auto;
     height: 100%;
 }
 

client/src/components/Visualizations/Tabular/TabularChunkedView.vue → client/src/components/Dataset/Tabular/TabularChunkedView.vue

@@ -4,6 +4,7 @@ import axios from "axios";
 import { parse } from "csv-parse/sync";
 import { computed, onMounted, reactive, ref, watch } from "vue";
 
+import type { HDADetailed } from "@/api";
 import { getAppRoot } from "@/onload/loadConfig";
 
 interface TabularChunk {
@@ -12,17 +13,14 @@ interface TabularChunk {
     data_line_offset: number;
 }
 
+interface TabularDataset extends HDADetailed {
+    metadata_columns?: number;
+    metadata_column_types?: string[];
+    metadata_column_names?: string[];
+}
+
 interface TabularChunkedViewProps {
-    options: {
-        dataset_config: {
-            id: string;
-            file_ext: string;
-            first_data_chunk: TabularChunk;
-            metadata_columns: number;
-            metadata_column_types: string[];
-            metadata_column_names: string[];
-        };
-    };
+    options: TabularDataset;
 }
 
 const props = defineProps<TabularChunkedViewProps>();
@@ -37,32 +35,32 @@ const tabularData = reactive<{ rows: string[][] }>({
 });
 
 const columns = computed(() => {
-    const columns = Array(props.options.dataset_config.metadata_columns);
+    const columns = Array(props.options.metadata_columns);
     // for each column_name, inject header
-    if (props.options.dataset_config.metadata_column_names?.length > 0) {
-        props.options.dataset_config.metadata_column_names.forEach((column_name, index) => {
+    if (props.options.metadata_column_names && props.options.metadata_column_names?.length > 0) {
+        props.options.metadata_column_names.forEach((column_name, index) => {
             columns[index] = column_name;
         });
     }
     return columns;
 });
 
 const columnStyle = computed(() => {
-    const columnStyle = Array(props.options.dataset_config.metadata_columns);
-    if (props.options.dataset_config.metadata_column_types?.length > 0) {
-        props.options.dataset_config.metadata_column_types.forEach((column_type, index) => {
+    const columnStyle = Array(props.options.metadata_columns);
+    if (props.options.metadata_column_types && props.options.metadata_column_types?.length > 0) {
+        props.options.metadata_column_types.forEach((column_type, index) => {
             columnStyle[index] = column_type === "str" || column_type === "list" ? "string-align" : "number-align";
         });
     }
     return columnStyle;
 });
 
 const delimiter = computed(() => {
-    return props.options.dataset_config.file_ext === "csv" ? "," : "\t";
+    return props.options.file_ext === "csv" ? "," : "\t";
 });
 
 const chunkUrl = computed(() => {
-    return `${getAppRoot()}dataset/display?dataset_id=${props.options.dataset_config.id}`;
+    return `${getAppRoot()}dataset/display?dataset_id=${props.options.id}`;
 });
 
 // Loading more data on user scroll to (near) bottom.
@@ -163,11 +161,8 @@ function nextChunk() {
 }
 
 onMounted(() => {
-    // Render first chunk if available.
-    if (props.options.dataset_config.first_data_chunk) {
-        processChunk(props.options.dataset_config.first_data_chunk);
-        loading.value = false;
-    }
+    // Fetch and render first chunk
+    nextChunk();
 });
 </script>
 

client/src/components/DatasetInformation/DatasetAttributes.vue

@@ -91,7 +91,7 @@ onMounted(async () => {
 </script>
 
 <template>
-    <div aria-labelledby="dataset-attributes-heading">
+    <div class="dataset-attributes" aria-labelledby="dataset-attributes-heading">
         <Heading id="dataset-attributes-heading" h1 separator inline size="md">
             {{ localize("Edit Dataset Attributes") }}
         </Heading>
@@ -230,3 +230,10 @@ onMounted(async () => {
         </div>
     </div>
 </template>
+
+<style>
+.dataset-attributes {
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+</style>

client/src/components/DatasetInformation/DatasetDetails.vue

@@ -155,7 +155,8 @@ onUnmounted(() => {
     display: flex;
     flex-direction: column;
     gap: 1rem;
-
+    overflow-x: hidden;
+    overflow-y: auto;
     .dataset-peek {
         word-break: break-all;
     }

client/src/components/Visualizations/VisualizationFrame.vue

@@ -95,7 +95,7 @@ onMounted(() => {
 </script>
 
 <template>
-    <div class="position-relative h-100">
+    <div class="position-relative h-100 overflow-hidden">
         <div v-if="isLoading" class="iframe-loading bg-light">
             <LoadingSpan message="Loading preview" />
         </div>