From b0334ecf5c1e50160faf2a9c1cb1b69024f18bd3 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Tue, 20 May 2025 22:24:39 -0400
Subject: [PATCH 01/23] Add icons to tabs in DatasetView

---
 client/src/components/Dataset/DatasetView.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Dataset/DatasetView.vue b/client/src/components/Dataset/DatasetView.vue
index b55fd349bc1..e221f7efa5f 100644
--- a/client/src/components/Dataset/DatasetView.vue
+++ b/client/src/components/Dataset/DatasetView.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faBug, faChartBar, faEye, faInfoCircle, faPen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BNav, BNavItem } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
@@ -16,6 +19,8 @@ import VisualizationsList from "@/components/Visualizations/Index.vue";
 import VisualizationFrame from "@/components/Visualizations/VisualizationFrame.vue";
 import CenterFrame from "@/entry/analysis/modules/CenterFrame.vue";
 
+library.add(faEye, faChartBar, faInfoCircle, faPen, faBug);
+
 const datasetStore = useDatasetStore();
 const datatypeVisualizationsStore = useDatatypeVisualizationsStore();
 const { toggled: headerCollapsed, toggle: toggleHeaderCollapse } = usePersistentToggle("dataset-header-collapsed");
@@ -108,21 +113,23 @@ watch(() => dataset.value?.file_ext, checkPreferredVisualization, { immediate: t
         </header>
         <BNav pills class="my-2 p-2 bg-light border-bottom">
             <BNavItem title="Preview" :active="tab === 'preview'" :to="`/datasets/${datasetId}/preview`">
-                Preview
+                <FontAwesomeIcon :icon="faEye" class="mr-1" /> Preview
             </BNavItem>
             <BNavItem
                 v-if="!showError"
                 title="Visualize"
                 :active="tab === 'visualize'"
                 :to="`/datasets/${datasetId}/visualize`">
-                Visualize
+                <FontAwesomeIcon :icon="faChartBar" class="mr-1" /> Visualize
             </BNavItem>
             <BNavItem title="Details" :active="tab === 'details'" :to="`/datasets/${datasetId}/details`">
-                Details
+                <FontAwesomeIcon :icon="faInfoCircle" class="mr-1" /> Details
+            </BNavItem>
+            <BNavItem title="Edit" :active="tab === 'edit'" :to="`/datasets/${datasetId}/edit`">
+                <FontAwesomeIcon :icon="faPen" class="mr-1" /> Edit
             </BNavItem>
-            <BNavItem title="Edit" :active="tab === 'edit'" :to="`/datasets/${datasetId}/edit`">Edit</BNavItem>
             <BNavItem v-if="showError" title="Error" :active="tab === 'error'" :to="`/datasets/${datasetId}/error`">
-                Error
+                <FontAwesomeIcon :icon="faBug" class="mr-1" /> Error
             </BNavItem>
         </BNav>
         <div v-if="tab === 'preview'" class="h-100">

From 273efab3821ed1f306cb76d0c9f045bb250b42b2 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Tue, 20 May 2025 22:36:54 -0400
Subject: [PATCH 02/23] drop library, use icons directly

---
 client/src/components/Dataset/DatasetView.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/client/src/components/Dataset/DatasetView.vue b/client/src/components/Dataset/DatasetView.vue
index e221f7efa5f..473e3fff4fc 100644
--- a/client/src/components/Dataset/DatasetView.vue
+++ b/client/src/components/Dataset/DatasetView.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faBug, faChartBar, faEye, faInfoCircle, faPen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BNav, BNavItem } from "bootstrap-vue";
@@ -19,8 +18,6 @@ import VisualizationsList from "@/components/Visualizations/Index.vue";
 import VisualizationFrame from "@/components/Visualizations/VisualizationFrame.vue";
 import CenterFrame from "@/entry/analysis/modules/CenterFrame.vue";
 
-library.add(faEye, faChartBar, faInfoCircle, faPen, faBug);
-
 const datasetStore = useDatasetStore();
 const datatypeVisualizationsStore = useDatatypeVisualizationsStore();
 const { toggled: headerCollapsed, toggle: toggleHeaderCollapse } = usePersistentToggle("dataset-header-collapsed");

From f1964c876b1e377ac3d000aa040a031ff63fdfd5 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Thu, 22 May 2025 22:47:15 -0400
Subject: [PATCH 03/23] Use faExpand for 'view' of dataset

---
 client/src/components/History/Content/ContentOptions.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/client/src/components/History/Content/ContentOptions.vue b/client/src/components/History/Content/ContentOptions.vue
index 63e75eeaf4f..18b8d9eab7e 100644
--- a/client/src/components/History/Content/ContentOptions.vue
+++ b/client/src/components/History/Content/ContentOptions.vue
@@ -2,7 +2,8 @@
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
 import { BButton, BDropdown } from "bootstrap-vue";
-import { faStop } from "font-awesome-6";
+import { faExpand } from "@fortawesome/free-solid-svg-icons";
+import { faStop } from "@fortawesome/free-solid-svg-icons";
 import { computed, type Ref, ref } from "vue";
 
 import { getAppRoot } from "@/onload/loadConfig";
@@ -112,14 +113,14 @@ function onDisplay($event: MouseEvent) {
         <BButton
             v-if="isDataset"
             v-b-tooltip.hover
-            title="Display"
+            title="View"
             tabindex="0"
             class="display-btn px-1"
             size="sm"
             variant="link"
             :href="displayUrl"
             @click.prevent.stop="onDisplay($event)">
-            <icon icon="eye" />
+            <FontAwesomeIcon :icon="faExpand" />
         </BButton>
         <BButton
             v-if="writable && isHistoryItem"

From e00a601ee543dff3836862a6655c2aef54b92a1b Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Thu, 22 May 2025 22:51:53 -0400
Subject: [PATCH 04/23] Drop pencil edit from dataset card (again -- we'll have
 to fix some tests here)

---
 .../History/Content/ContentOptions.vue        | 22 +------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/client/src/components/History/Content/ContentOptions.vue b/client/src/components/History/Content/ContentOptions.vue
index 18b8d9eab7e..a2faf5fea21 100644
--- a/client/src/components/History/Content/ContentOptions.vue
+++ b/client/src/components/History/Content/ContentOptions.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
+import { faExpand, faStop } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
 import { BButton, BDropdown } from "bootstrap-vue";
-import { faExpand } from "@fortawesome/free-solid-svg-icons";
-import { faStop } from "@fortawesome/free-solid-svg-icons";
 import { computed, type Ref, ref } from "vue";
 
 import { getAppRoot } from "@/onload/loadConfig";
@@ -25,7 +24,6 @@ const props = defineProps({
 const emit = defineEmits<{
     (e: "display"): void;
     (e: "showCollectionInfo"): void;
-    (e: "edit"): void;
     (e: "delete", recursive?: boolean): void;
     (e: "undelete"): void;
     (e: "unhide"): void;
@@ -35,11 +33,6 @@ const entryPointStore = useEntryPointStore();
 const errorMessage = ref("");
 const deleteCollectionMenu: Ref<BDropdown | null> = ref(null);
 
-const editButtonTitle = computed(() => (editDisabled.value ? "This dataset is not yet editable." : "Edit attributes"));
-const editDisabled = computed(() =>
-    ["discarded", "new", "upload", "queued", "running", "waiting"].includes(props.state)
-);
-const editUrl = computed(() => prependPath(props.itemUrls.edit));
 const displayUrl = computed(() => (props.itemUrls.display ? prependPath(props.itemUrls.display) : undefined));
 
 const isCollection = computed(() => !props.isDataset);
@@ -122,19 +115,6 @@ function onDisplay($event: MouseEvent) {
             @click.prevent.stop="onDisplay($event)">
             <FontAwesomeIcon :icon="faExpand" />
         </BButton>
-        <BButton
-            v-if="writable && isHistoryItem"
-            v-b-tooltip.hover
-            :disabled="editDisabled"
-            :title="editButtonTitle"
-            tabindex="0"
-            class="edit-btn px-1"
-            size="sm"
-            variant="link"
-            :href="editUrl"
-            @click.prevent.stop="emit('edit')">
-            <icon icon="pen" />
-        </BButton>
         <BButton
             v-if="isRunningInteractiveTool"
             v-b-tooltip.hover

From 9f4f3d09b3f18ddead625ccae7b0dc8a79fedaf5 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Fri, 23 May 2025 06:37:24 -0400
Subject: [PATCH 05/23] Drop error from dataset card

---
 .../Content/Dataset/DatasetActions.vue        | 26 ++-----------------
 1 file changed, 2 insertions(+), 24 deletions(-)

diff --git a/client/src/components/History/Content/Dataset/DatasetActions.vue b/client/src/components/History/Content/Dataset/DatasetActions.vue
index 07adb883651..8d591cec1d9 100644
--- a/client/src/components/History/Content/Dataset/DatasetActions.vue
+++ b/client/src/components/History/Content/Dataset/DatasetActions.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faBug, faChartBar, faInfoCircle, faLink, faRedo, faSitemap } from "@fortawesome/free-solid-svg-icons";
+import { faChartBar, faInfoCircle, faLink, faRedo, faSitemap } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
 import { computed } from "vue";
@@ -15,7 +15,7 @@ import type { ItemUrls } from ".";
 
 import DatasetDownload from "@/components/History/Content/Dataset/DatasetDownload.vue";
 
-library.add(faBug, faChartBar, faInfoCircle, faLink, faRedo, faSitemap);
+library.add(faChartBar, faInfoCircle, faLink, faRedo, faSitemap);
 
 interface Props {
     item: HDADetailed;
@@ -36,15 +36,9 @@ const router = useRouter();
 const showDownloads = computed(() => {
     return !props.item.purged && ["ok", "failed_metadata", "error"].includes(props.item.state);
 });
-const showError = computed(() => {
-    return props.item.state === "error" || props.item.state === "failed_metadata";
-});
 const showRerun = computed(() => {
     return props.item.accessible && props.item.rerunnable && props.item.creating_job && props.item.state != "upload";
 });
-const reportErrorUrl = computed(() => {
-    return prependPath(props.itemUrls.reportError!);
-});
 const rerunUrl = computed(() => {
     return prependPath(props.itemUrls.rerun!);
 });
@@ -65,10 +59,6 @@ function onHighlight() {
     emit("toggleHighlights");
 }
 
-function onError() {
-    window.location.href = reportErrorUrl.value;
-}
-
 function onRerun() {
     router.push(`/root?job_id=${props.item.creating_job}`);
 }
@@ -78,18 +68,6 @@ function onRerun() {
     <div class="dataset-actions mb-1">
         <div class="clearfix">
             <div class="btn-group float-left">
-                <BButton
-                    v-if="showError"
-                    v-b-tooltip.hover
-                    class="px-1"
-                    title="Error"
-                    size="sm"
-                    variant="link"
-                    :href="reportErrorUrl"
-                    @click.prevent.stop="onError">
-                    <FontAwesomeIcon :icon="faBug" />
-                </BButton>
-
                 <DatasetDownload v-if="showDownloads" :item="item" @on-download="onDownload" />
 
                 <BButton

From c57be28d7daaf6e49a3c5e1bd239d144f670246d Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Fri, 23 May 2025 07:47:46 -0400
Subject: [PATCH 06/23] Refine DatasetView header to show essential fields only

- Remove misc_info field that is overly often filled with garbage
- Add file size display with human-readable formatting
- Improve styling with proper spacing and muted labels
---
 client/src/components/Dataset/DatasetView.vue | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Dataset/DatasetView.vue b/client/src/components/Dataset/DatasetView.vue
index 473e3fff4fc..89c9ce75c9e 100644
--- a/client/src/components/Dataset/DatasetView.vue
+++ b/client/src/components/Dataset/DatasetView.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { faBug, faChartBar, faEye, faInfoCircle, faPen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BNav, BNavItem } from "bootstrap-vue";
+import { BLink, BNav, BNavItem } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
 import { usePersistentToggle } from "@/composables/persistentToggle";
 import { useDatasetStore } from "@/stores/datasetStore";
 import { useDatatypeVisualizationsStore } from "@/stores/datatypeVisualizationsStore";
+import { bytesToString } from "@/utils/utils";
 
 import DatasetError from "../DatasetInformation/DatasetError.vue";
 import LoadingSpan from "../LoadingSpan.vue";
@@ -102,9 +103,10 @@ watch(() => dataset.value?.file_ext, checkPreferredVisualization, { immediate: t
                             {{ dataset.genome_build }}
                         </BLink>
                     </span>
-                    <div v-if="dataset.misc_info" class="info">
-                        <span class="value">{{ dataset.misc_info }}</span>
-                    </div>
+                    <span v-if="dataset.file_size" class="filesize">
+                        <span v-localize class="prompt">size</span>
+                        <span class="value font-weight-bold" v-html="bytesToString(dataset.file_size, false)" />
+                    </span>
                 </div>
             </transition>
         </header>
@@ -165,6 +167,21 @@ watch(() => dataset.value?.file_ext, checkPreferredVisualization, { immediate: t
     opacity: 1;
     transition: all 0.25s ease;
     overflow: hidden;
+
+    .datatype,
+    .dbkey,
+    .filesize {
+        margin-right: 1rem;
+    }
+
+    .prompt {
+        color: $text-muted;
+        margin-right: 0.25rem;
+    }
+
+    .blurb {
+        margin-bottom: 0.25rem;
+    }
 }
 
 .header-enter, /* change to header-enter-from with Vue 3 */

From daef288c007b45ceabd73de7fc3a2d6314d74e96 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Fri, 23 May 2025 10:27:32 -0400
Subject: [PATCH 07/23] Tooltips for the DatasetView tabs

---
 client/src/components/Dataset/DatasetView.vue | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Dataset/DatasetView.vue b/client/src/components/Dataset/DatasetView.vue
index 89c9ce75c9e..81429fe8ef1 100644
--- a/client/src/components/Dataset/DatasetView.vue
+++ b/client/src/components/Dataset/DatasetView.vue
@@ -111,23 +111,36 @@ watch(() => dataset.value?.file_ext, checkPreferredVisualization, { immediate: t
             </transition>
         </header>
         <BNav pills class="my-2 p-2 bg-light border-bottom">
-            <BNavItem title="Preview" :active="tab === 'preview'" :to="`/datasets/${datasetId}/preview`">
+            <BNavItem
+                title="View a preview of the dataset contents"
+                :active="tab === 'preview'"
+                :to="`/datasets/${datasetId}/preview`">
                 <FontAwesomeIcon :icon="faEye" class="mr-1" /> Preview
             </BNavItem>
             <BNavItem
                 v-if="!showError"
-                title="Visualize"
+                title="Explore available visualizations for this dataset"
                 :active="tab === 'visualize'"
                 :to="`/datasets/${datasetId}/visualize`">
                 <FontAwesomeIcon :icon="faChartBar" class="mr-1" /> Visualize
             </BNavItem>
-            <BNavItem title="Details" :active="tab === 'details'" :to="`/datasets/${datasetId}/details`">
+            <BNavItem
+                title="View detailed information about this dataset"
+                :active="tab === 'details'"
+                :to="`/datasets/${datasetId}/details`">
                 <FontAwesomeIcon :icon="faInfoCircle" class="mr-1" /> Details
             </BNavItem>
-            <BNavItem title="Edit" :active="tab === 'edit'" :to="`/datasets/${datasetId}/edit`">
+            <BNavItem
+                title="Edit dataset attributes and metadata"
+                :active="tab === 'edit'"
+                :to="`/datasets/${datasetId}/edit`">
                 <FontAwesomeIcon :icon="faPen" class="mr-1" /> Edit
             </BNavItem>
-            <BNavItem v-if="showError" title="Error" :active="tab === 'error'" :to="`/datasets/${datasetId}/error`">
+            <BNavItem
+                v-if="showError"
+                title="View error information for this dataset"
+                :active="tab === 'error'"
+                :to="`/datasets/${datasetId}/error`">
                 <FontAwesomeIcon :icon="faBug" class="mr-1" /> Error
             </BNavItem>
         </BNav>

From 9ca0093284ce5ea9a40f7f491818eafa7939e410 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Tue, 27 May 2025 20:44:03 -0400
Subject: [PATCH 08/23] Try out scan-eye for dataset view icon

---
 client/src/components/History/Content/ContentOptions.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/src/components/History/Content/ContentOptions.vue b/client/src/components/History/Content/ContentOptions.vue
index a2faf5fea21..def82aaa213 100644
--- a/client/src/components/History/Content/ContentOptions.vue
+++ b/client/src/components/History/Content/ContentOptions.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { faExpand, faStop } from "@fortawesome/free-solid-svg-icons";
+import { faStop } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
 import { BButton, BDropdown } from "bootstrap-vue";
+//@ts-ignore deprecated package without types (vue 2, remove this comment on vue 3 migration)
+import { ScanEye } from "lucide-vue";
 import { computed, type Ref, ref } from "vue";
 
 import { getAppRoot } from "@/onload/loadConfig";
@@ -113,7 +115,7 @@ function onDisplay($event: MouseEvent) {
             variant="link"
             :href="displayUrl"
             @click.prevent.stop="onDisplay($event)">
-            <FontAwesomeIcon :icon="faExpand" />
+            <ScanEye absolute-stroke-width :size="16" />
         </BButton>
         <BButton
             v-if="isRunningInteractiveTool"

From bf5bd4b273c35ea8230f20a2d9ee468318fab895 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Thu, 29 May 2025 10:10:54 -0400
Subject: [PATCH 09/23] Add back dataset card icons -- remove in dev.

---
 .../History/Content/ContentOptions.vue        | 19 +++++
 .../Content/Dataset/DatasetActions.vue        | 70 ++++++++++++++++++-
 2 files changed, 87 insertions(+), 2 deletions(-)

diff --git a/client/src/components/History/Content/ContentOptions.vue b/client/src/components/History/Content/ContentOptions.vue
index def82aaa213..392e1f202f8 100644
--- a/client/src/components/History/Content/ContentOptions.vue
+++ b/client/src/components/History/Content/ContentOptions.vue
@@ -26,6 +26,7 @@ const props = defineProps({
 const emit = defineEmits<{
     (e: "display"): void;
     (e: "showCollectionInfo"): void;
+    (e: "edit"): void;
     (e: "delete", recursive?: boolean): void;
     (e: "undelete"): void;
     (e: "unhide"): void;
@@ -35,6 +36,11 @@ const entryPointStore = useEntryPointStore();
 const errorMessage = ref("");
 const deleteCollectionMenu: Ref<BDropdown | null> = ref(null);
 
+const editButtonTitle = computed(() => (editDisabled.value ? "This dataset is not yet editable." : "Edit attributes"));
+const editDisabled = computed(() =>
+    ["discarded", "new", "upload", "queued", "running", "waiting"].includes(props.state)
+);
+const editUrl = computed(() => prependPath(props.itemUrls.edit));
 const displayUrl = computed(() => (props.itemUrls.display ? prependPath(props.itemUrls.display) : undefined));
 
 const isCollection = computed(() => !props.isDataset);
@@ -117,6 +123,19 @@ function onDisplay($event: MouseEvent) {
             @click.prevent.stop="onDisplay($event)">
             <ScanEye absolute-stroke-width :size="16" />
         </BButton>
+        <BButton
+            v-if="writable && isHistoryItem"
+            v-b-tooltip.hover
+            :disabled="editDisabled"
+            :title="editButtonTitle"
+            tabindex="0"
+            class="edit-btn px-1"
+            size="sm"
+            variant="link"
+            :href="editUrl"
+            @click.prevent.stop="emit('edit')">
+            <icon icon="pen" />
+        </BButton>
         <BButton
             v-if="isRunningInteractiveTool"
             v-b-tooltip.hover
diff --git a/client/src/components/History/Content/Dataset/DatasetActions.vue b/client/src/components/History/Content/Dataset/DatasetActions.vue
index 8d591cec1d9..aa8064dc79f 100644
--- a/client/src/components/History/Content/Dataset/DatasetActions.vue
+++ b/client/src/components/History/Content/Dataset/DatasetActions.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faChartBar, faInfoCircle, faLink, faRedo, faSitemap } from "@fortawesome/free-solid-svg-icons";
+import { faBug, faChartBar, faInfoCircle, faLink, faRedo, faSitemap } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
 import { computed } from "vue";
@@ -15,7 +15,7 @@ import type { ItemUrls } from ".";
 
 import DatasetDownload from "@/components/History/Content/Dataset/DatasetDownload.vue";
 
-library.add(faChartBar, faInfoCircle, faLink, faRedo, faSitemap);
+library.add(faBug, faChartBar, faInfoCircle, faLink, faRedo, faSitemap);
 
 interface Props {
     item: HDADetailed;
@@ -36,9 +36,27 @@ const router = useRouter();
 const showDownloads = computed(() => {
     return !props.item.purged && ["ok", "failed_metadata", "error"].includes(props.item.state);
 });
+const showError = computed(() => {
+    return props.item.state === "error" || props.item.state === "failed_metadata";
+});
+const showInfo = computed(() => {
+    return props.item.state !== "noPermission";
+});
+const showVisualizations = computed(() => {
+    return !props.item.purged && ["ok", "failed_metadata", "error"].includes(props.item.state);
+});
 const showRerun = computed(() => {
     return props.item.accessible && props.item.rerunnable && props.item.creating_job && props.item.state != "upload";
 });
+const reportErrorUrl = computed(() => {
+    return prependPath(props.itemUrls.reportError!);
+});
+const showDetailsUrl = computed(() => {
+    return prependPath(props.itemUrls.showDetails!);
+});
+const visualizeUrl = computed(() => {
+    return prependPath(props.itemUrls.visualize!);
+});
 const rerunUrl = computed(() => {
     return prependPath(props.itemUrls.rerun!);
 });
@@ -59,6 +77,18 @@ function onHighlight() {
     emit("toggleHighlights");
 }
 
+function onError() {
+    window.location.href = reportErrorUrl.value;
+}
+
+function onInfo() {
+    router.push(`/datasets/${props.item.id}/details`);
+}
+
+function onVisualize() {
+    router.push(`/visualizations?dataset_id=${props.item.id}`);
+}
+
 function onRerun() {
     router.push(`/root?job_id=${props.item.creating_job}`);
 }
@@ -68,6 +98,18 @@ function onRerun() {
     <div class="dataset-actions mb-1">
         <div class="clearfix">
             <div class="btn-group float-left">
+                <BButton
+                    v-if="showError"
+                    v-b-tooltip.hover
+                    class="px-1"
+                    title="Error"
+                    size="sm"
+                    variant="link"
+                    :href="reportErrorUrl"
+                    @click.prevent.stop="onError">
+                    <FontAwesomeIcon :icon="faBug" />
+                </BButton>
+
                 <DatasetDownload v-if="showDownloads" :item="item" @on-download="onDownload" />
 
                 <BButton
@@ -81,6 +123,30 @@ function onRerun() {
                     <FontAwesomeIcon :icon="faLink" />
                 </BButton>
 
+                <BButton
+                    v-if="showInfo"
+                    v-b-tooltip.hover
+                    class="info-btn px-1"
+                    title="Dataset Details"
+                    size="sm"
+                    variant="link"
+                    :href="showDetailsUrl"
+                    @click.prevent.stop="onInfo">
+                    <FontAwesomeIcon :icon="faInfoCircle" />
+                </BButton>
+
+                <BButton
+                    v-if="showVisualizations"
+                    v-b-tooltip.hover
+                    class="visualize-btn px-1"
+                    title="Visualize"
+                    size="sm"
+                    variant="link"
+                    :href="visualizeUrl"
+                    @click.prevent.stop="onVisualize">
+                    <FontAwesomeIcon :icon="faChartBar" />
+                </BButton>
+
                 <BButton
                     v-if="showHighlight"
                     v-b-tooltip.hover

From 0e8f200bc127d42b51295104edcd03fb4d97090e Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Sun, 1 Jun 2025 11:39:13 -0400
Subject: [PATCH 10/23] Add Raw tab for datasets with automatic visualization

When a dataset has a preferred visualization, the Preview tab shows the
visualization. This adds a Raw tab to allow users to view the raw data
display alongside the visualization.
---
 client/src/components/Dataset/DatasetView.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Dataset/DatasetView.vue b/client/src/components/Dataset/DatasetView.vue
index 81429fe8ef1..9a571696f16 100644
--- a/client/src/components/Dataset/DatasetView.vue
+++ b/client/src/components/Dataset/DatasetView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { faBug, faChartBar, faEye, faInfoCircle, faPen } from "@fortawesome/free-solid-svg-icons";
+import { faBug, faChartBar, faEye, faFileAlt, faInfoCircle, faPen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BLink, BNav, BNavItem } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
@@ -25,7 +25,7 @@ const { toggled: headerCollapsed, toggle: toggleHeaderCollapse } = usePersistent
 
 interface Props {
     datasetId: string;
-    tab?: "details" | "edit" | "error" | "preview" | "visualize";
+    tab?: "details" | "edit" | "error" | "preview" | "raw" | "visualize";
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -117,6 +117,13 @@ watch(() => dataset.value?.file_ext, checkPreferredVisualization, { immediate: t
                 :to="`/datasets/${datasetId}/preview`">
                 <FontAwesomeIcon :icon="faEye" class="mr-1" /> Preview
             </BNavItem>
+            <BNavItem
+                v-if="preferredVisualization"
+                title="View raw dataset contents"
+                :active="tab === 'raw'"
+                :to="`/datasets/${datasetId}/raw`">
+                <FontAwesomeIcon :icon="faFileAlt" class="mr-1" /> Raw
+            </BNavItem>
             <BNavItem
                 v-if="!showError"
                 title="Explore available visualizations for this dataset"
@@ -156,6 +163,12 @@ watch(() => dataset.value?.file_ext, checkPreferredVisualization, { immediate: t
                 :is_preview="true"
                 @load="iframeLoading = false" />
         </div>
+        <div v-else-if="tab === 'raw'" class="h-100">
+            <CenterFrame
+                :src="`/datasets/${datasetId}/display/?preview=True`"
+                :is_preview="true"
+                @load="iframeLoading = false" />
+        </div>
         <div v-else-if="tab === 'visualize'" class="d-flex flex-column overflow-hidden overflow-y">
             <VisualizationsList :dataset-id="datasetId" />
         </div>

From 6e4964ec6743023d382104883de219630d2cd968 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Sun, 1 Jun 2025 12:11:21 -0400
Subject: [PATCH 11/23] Prevent auto-download file types from triggering
 downloads

Certain file types (TIFF, PDF, office documents, archives) trigger automatic
downloads when loaded in an iframe. This change detects these file types and
shows a download prompt instead of attempting to display them inline.
---
 client/src/components/Dataset/DatasetView.vue | 39 +++++++++++++++++++
 package.json                                  |  3 +-
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Dataset/DatasetView.vue b/client/src/components/Dataset/DatasetView.vue
index 9a571696f16..73b69c6f554 100644
--- a/client/src/components/Dataset/DatasetView.vue
+++ b/client/src/components/Dataset/DatasetView.vue
@@ -23,6 +23,9 @@ const datasetStore = useDatasetStore();
 const datatypeVisualizationsStore = useDatatypeVisualizationsStore();
 const { toggled: headerCollapsed, toggle: toggleHeaderCollapse } = usePersistentToggle("dataset-header-collapsed");
 
+// Temporary testing extensions that trigger automatic downloads
+const AUTO_DOWNLOAD_EXTENSIONS = ["tiff", "tif", "pdf", "zip", "tar", "gz"];
+
 interface Props {
     datasetId: string;
     tab?: "details" | "edit" | "error" | "preview" | "raw" | "visualize";
@@ -41,6 +44,9 @@ const isLoading = computed(() => datasetStore.isLoadingDataset(props.datasetId))
 const showError = computed(
     () => dataset.value && (dataset.value.state === "error" || dataset.value.state === "failed_metadata")
 );
+const isAutoDownloadType = computed(
+    () => dataset.value && AUTO_DOWNLOAD_EXTENSIONS.includes(dataset.value.file_ext?.toLowerCase() || "")
+);
 
 // Check if the dataset has a preferred visualization by datatype
 async function checkPreferredVisualization() {
@@ -157,6 +163,16 @@ watch(() => dataset.value?.file_ext, checkPreferredVisualization, { immediate: t
                 :dataset-id="datasetId"
                 :visualization="preferredVisualization"
                 @load="iframeLoading = false" />
+            <div v-else-if="isAutoDownloadType" 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>
+                    <p>File size: <strong v-html="bytesToString(dataset.file_size || 0, false)" /></p>
+                    <a :href="`/datasets/${datasetId}/display`" class="btn btn-primary mt-2" download>
+                        <FontAwesomeIcon :icon="faFileAlt" class="mr-1" /> Download File
+                    </a>
+                </div>
+            </div>
             <CenterFrame
                 v-else
                 :src="`/datasets/${datasetId}/display/?preview=True`"
@@ -164,7 +180,18 @@ watch(() => dataset.value?.file_ext, checkPreferredVisualization, { immediate: t
                 @load="iframeLoading = false" />
         </div>
         <div v-else-if="tab === 'raw'" class="h-100">
+            <div v-if="isAutoDownloadType" 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>
+                    <p>File size: <strong v-html="bytesToString(dataset.file_size || 0, false)" /></p>
+                    <a :href="`/datasets/${datasetId}/display`" class="btn btn-primary mt-2" download>
+                        <FontAwesomeIcon :icon="faFileAlt" class="mr-1" /> Download File
+                    </a>
+                </div>
+            </div>
             <CenterFrame
+                v-else
                 :src="`/datasets/${datasetId}/display/?preview=True`"
                 :is_preview="true"
                 @load="iframeLoading = false" />
@@ -223,4 +250,16 @@ watch(() => dataset.value?.file_ext, checkPreferredVisualization, { immediate: t
     font-size: $h5-font-size;
     vertical-align: middle;
 }
+
+.auto-download-message {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    height: 100%;
+
+    .alert {
+        max-width: 600px;
+        width: 100%;
+    }
+}
 </style>
diff --git a/package.json b/package.json
index 92d4ffe2f6b..e5997a3e8f8 100644
--- a/package.json
+++ b/package.json
@@ -19,5 +19,6 @@
   "dependencies": {
     "@galaxyproject/galaxy-client": "^24.0.0",
     "cpy-cli": "^5.0.0"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

From a92a3e3b4821d9d9b12fe15264ba8c03cf2088c5 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Sun, 1 Jun 2025 17:55:13 -0400
Subject: [PATCH 12/23] Enhance API response for datatypes to include extra
 display information so the client can account for direct download vs preview,
 etc.

---
 client/src/api/datatypes.ts                   | 17 ++++++++++
 client/src/components/Dataset/DatasetView.vue | 32 ++++++++++++++-----
 lib/galaxy/datatypes/_schema.py               |  5 +++
 lib/galaxy/datatypes/binary.py                |  3 ++
 lib/galaxy/datatypes/data.py                  | 21 ++++++++++++
 lib/galaxy/datatypes/images.py                |  2 ++
 lib/galaxy/datatypes/registry.py              |  5 +++
 lib/galaxy/webapps/galaxy/api/datatypes.py    |  3 ++
 8 files changed, 80 insertions(+), 8 deletions(-)

diff --git a/client/src/api/datatypes.ts b/client/src/api/datatypes.ts
index 449c1a71ac1..857c10d4724 100644
--- a/client/src/api/datatypes.ts
+++ b/client/src/api/datatypes.ts
@@ -1,3 +1,20 @@
+import axios from "axios";
+
 import type { components } from "@/api";
+import { withPrefix } from "@/utils/redirect";
+import { rethrowSimple } from "@/utils/simple-error";
 
 export type CompositeFileInfo = components["schemas"]["CompositeFileInfo"];
+export type DatatypeDetails = components["schemas"]["DatatypeDetails"];
+
+/**
+ * Get details about a specific datatype
+ */
+export async function fetchDatatypeDetails(extension: string) {
+    try {
+        const { data } = await axios.get(withPrefix(`/api/datatypes/${extension}`));
+        return data;
+    } catch (error) {
+        rethrowSimple(error);
+    }
+}
diff --git a/client/src/components/Dataset/DatasetView.vue b/client/src/components/Dataset/DatasetView.vue
index 73b69c6f554..deb6a8a1b15 100644
--- a/client/src/components/Dataset/DatasetView.vue
+++ b/client/src/components/Dataset/DatasetView.vue
@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BLink, BNav, BNavItem } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
+import { fetchDatatypeDetails } from "@/api/datatypes";
 import { usePersistentToggle } from "@/composables/persistentToggle";
 import { useDatasetStore } from "@/stores/datasetStore";
 import { useDatatypeVisualizationsStore } from "@/stores/datatypeVisualizationsStore";
@@ -23,9 +24,6 @@ const datasetStore = useDatasetStore();
 const datatypeVisualizationsStore = useDatatypeVisualizationsStore();
 const { toggled: headerCollapsed, toggle: toggleHeaderCollapse } = usePersistentToggle("dataset-header-collapsed");
 
-// Temporary testing extensions that trigger automatic downloads
-const AUTO_DOWNLOAD_EXTENSIONS = ["tiff", "tif", "pdf", "zip", "tar", "gz"];
-
 interface Props {
     datasetId: string;
     tab?: "details" | "edit" | "error" | "preview" | "raw" | "visualize";
@@ -37,6 +35,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const iframeLoading = ref(true);
 const preferredVisualization = ref<string>();
+const datatypeDetails = ref<any>(null);
 
 const dataset = computed(() => datasetStore.getDataset(props.datasetId));
 const headerState = computed(() => (headerCollapsed.value ? "closed" : "open"));
@@ -44,9 +43,19 @@ const isLoading = computed(() => datasetStore.isLoadingDataset(props.datasetId))
 const showError = computed(
     () => dataset.value && (dataset.value.state === "error" || dataset.value.state === "failed_metadata")
 );
-const isAutoDownloadType = computed(
-    () => dataset.value && AUTO_DOWNLOAD_EXTENSIONS.includes(dataset.value.file_ext?.toLowerCase() || "")
-);
+const isAutoDownloadType = computed(() => datatypeDetails.value?.display_behavior === "download");
+
+// Fetch datatype details including display behavior
+async function fetchDatatypeInfo() {
+    if (dataset.value && dataset.value.file_ext) {
+        try {
+            datatypeDetails.value = await fetchDatatypeDetails(dataset.value.file_ext);
+        } catch (error) {
+            console.error("Failed to fetch datatype details:", error);
+            datatypeDetails.value = null;
+        }
+    }
+}
 
 // Check if the dataset has a preferred visualization by datatype
 async function checkPreferredVisualization() {
@@ -68,8 +77,15 @@ async function checkPreferredVisualization() {
     }
 }
 
-// Watch for changes to the dataset to check for preferred visualizations
-watch(() => dataset.value?.file_ext, checkPreferredVisualization, { immediate: true });
+// Watch for changes to the dataset to check for preferred visualizations and datatype info
+watch(
+    () => dataset.value?.file_ext,
+    () => {
+        checkPreferredVisualization();
+        fetchDatatypeInfo();
+    },
+    { immediate: true }
+);
 </script>
 
 <template>
diff --git a/lib/galaxy/datatypes/_schema.py b/lib/galaxy/datatypes/_schema.py
index 1a32e6ec247..680e32d3bea 100644
--- a/lib/galaxy/datatypes/_schema.py
+++ b/lib/galaxy/datatypes/_schema.py
@@ -66,6 +66,11 @@ class DatatypeDetails(BaseModel):
         title="Upload warning",
         description="End-user information regarding potential pitfalls with this upload type.",
     )
+    display_behavior: Optional[str] = Field(
+        default=None,
+        title="Display behavior",
+        description="How this datatype behaves when displayed with preview=True: 'inline' (can be displayed in browser) or 'download' (triggers download)",
+    )
 
 
 class DatatypesMap(BaseModel):
diff --git a/lib/galaxy/datatypes/binary.py b/lib/galaxy/datatypes/binary.py
index fd64a838384..146447cb0e5 100644
--- a/lib/galaxy/datatypes/binary.py
+++ b/lib/galaxy/datatypes/binary.py
@@ -414,6 +414,7 @@ class CompressedZipArchive(CompressedArchive):
     """
 
     file_ext = "zip"
+    display_behavior = "download"  # Archive files trigger downloads
 
     def set_peek(self, dataset: DatasetProtocol, **kwd) -> None:
         if not dataset.dataset.purged:
@@ -3198,6 +3199,7 @@ class Xlsx(Binary):
 
     file_ext = "xlsx"
     compressed = True
+    display_behavior = "download"  # Office documents trigger downloads
 
     def sniff_prefix(self, file_prefix: FilePrefix) -> bool:
         # Xlsx is compressed in zip format and must not be uncompressed in Galaxy.
@@ -3210,6 +3212,7 @@ class ExcelXls(Binary):
 
     file_ext = "excel.xls"
     edam_format = "format_3468"
+    display_behavior = "download"  # Office documents trigger downloads
 
     def sniff_prefix(self, file_prefix: FilePrefix) -> bool:
         return file_prefix.mime_type == self.get_mime()
diff --git a/lib/galaxy/datatypes/data.py b/lib/galaxy/datatypes/data.py
index 0d73604c3ba..4350f9217a6 100644
--- a/lib/galaxy/datatypes/data.py
+++ b/lib/galaxy/datatypes/data.py
@@ -240,6 +240,10 @@ class Data(metaclass=DataMeta):
     # A per datatype setting (inherited): max file size (in bytes) for setting optional metadata
     _max_optional_metadata_filesize = None
 
+    # Display behavior when preview=True: "inline" (can be displayed in browser),
+    # "download" (always triggers download), or None (default behavior)
+    display_behavior: Optional[Literal["inline", "download"]] = None
+
     # Trackster track type.
     track_type: Optional[str] = None
 
@@ -264,6 +268,23 @@ class Data(metaclass=DataMeta):
             return cls.allow_datatype_change
         return cls.composite_type is None
 
+    @classmethod
+    def get_display_behavior(cls) -> str:
+        """
+        Returns the display behavior for this datatype.
+
+        If display_behavior is set on the class, returns that value.
+        Otherwise, returns "inline" for text-based types and "download" for binary types.
+        """
+        if cls.display_behavior is not None:
+            return cls.display_behavior
+
+        # Default behavior based on whether the datatype is binary
+        if cls.is_binary is True:
+            return "download"
+        else:
+            return "inline"
+
     def dataset_content_needs_grooming(self, file_name: str) -> bool:
         """This function is called on an output dataset file after the content is initially generated."""
         return False
diff --git a/lib/galaxy/datatypes/images.py b/lib/galaxy/datatypes/images.py
index 01bc4e1e778..b2ef54c9bea 100644
--- a/lib/galaxy/datatypes/images.py
+++ b/lib/galaxy/datatypes/images.py
@@ -228,6 +228,7 @@ class Png(Image):
 class Tiff(Image):
     edam_format = "format_3591"
     file_ext = "tiff"
+    display_behavior = "download"  # TIFF files trigger browser downloads
     MetadataElement(
         name="offsets",
         desc="Offsets File",
@@ -505,6 +506,7 @@ class Rast(Image):
 class Pdf(Image):
     edam_format = "format_3508"
     file_ext = "pdf"
+    display_behavior = "download"  # PDFs often trigger downloads depending on browser settings
 
     def sniff(self, filename: str) -> bool:
         """Determine if the file is in pdf format."""
diff --git a/lib/galaxy/datatypes/registry.py b/lib/galaxy/datatypes/registry.py
index 92892326dbf..227c83d0450 100644
--- a/lib/galaxy/datatypes/registry.py
+++ b/lib/galaxy/datatypes/registry.py
@@ -343,6 +343,11 @@ class Registry:
                             "description": description,
                             "description_url": description_url,
                             "upload_warning": upload_warning(upload_warning_template),
+                            "display_behavior": (
+                                datatype_instance.get_display_behavior()
+                                if hasattr(datatype_instance, "get_display_behavior")
+                                else None
+                            ),
                         }
                         composite_files = datatype_instance.get_composite_files()
                         if composite_files:
diff --git a/lib/galaxy/webapps/galaxy/api/datatypes.py b/lib/galaxy/webapps/galaxy/api/datatypes.py
index f696628bd67..db08bd79f85 100644
--- a/lib/galaxy/webapps/galaxy/api/datatypes.py
+++ b/lib/galaxy/webapps/galaxy/api/datatypes.py
@@ -229,6 +229,9 @@ class FastAPIDatatypes:
             "display_in_upload": datatype in self.datatypes_registry.upload_file_formats,
             "mimetype": self.datatypes_registry.get_mimetype_by_extension(datatype),
             "is_binary": getattr(dt_object, "is_binary", False),
+            "display_behavior": (
+                dt_object.get_display_behavior() if hasattr(dt_object, "get_display_behavior") else None
+            ),
         }
 
         # Add composite files if applicable

From af2dfb650dace5ad982af46265a1624b6b133df5 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Sun, 1 Jun 2025 19:40:40 -0400
Subject: [PATCH 13/23] Use store, cache datattypeDetails

---
 client/src/components/Dataset/DatasetView.vue | 28 +++++++------------
 client/src/stores/datatypeStore.js            | 25 +++++++++++++++++
 2 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/client/src/components/Dataset/DatasetView.vue b/client/src/components/Dataset/DatasetView.vue
index deb6a8a1b15..7ceb7384f63 100644
--- a/client/src/components/Dataset/DatasetView.vue
+++ b/client/src/components/Dataset/DatasetView.vue
@@ -4,9 +4,9 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BLink, BNav, BNavItem } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
-import { fetchDatatypeDetails } from "@/api/datatypes";
 import { usePersistentToggle } from "@/composables/persistentToggle";
 import { useDatasetStore } from "@/stores/datasetStore";
+import { useDatatypeStore } from "@/stores/datatypeStore";
 import { useDatatypeVisualizationsStore } from "@/stores/datatypeVisualizationsStore";
 import { bytesToString } from "@/utils/utils";
 
@@ -21,6 +21,7 @@ import VisualizationFrame from "@/components/Visualizations/VisualizationFrame.v
 import CenterFrame from "@/entry/analysis/modules/CenterFrame.vue";
 
 const datasetStore = useDatasetStore();
+const datatypeStore = useDatatypeStore();
 const datatypeVisualizationsStore = useDatatypeVisualizationsStore();
 const { toggled: headerCollapsed, toggle: toggleHeaderCollapse } = usePersistentToggle("dataset-header-collapsed");
 
@@ -35,7 +36,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 const iframeLoading = ref(true);
 const preferredVisualization = ref<string>();
-const datatypeDetails = ref<any>(null);
 
 const dataset = computed(() => datasetStore.getDataset(props.datasetId));
 const headerState = computed(() => (headerCollapsed.value ? "closed" : "open"));
@@ -43,19 +43,9 @@ const isLoading = computed(() => datasetStore.isLoadingDataset(props.datasetId))
 const showError = computed(
     () => dataset.value && (dataset.value.state === "error" || dataset.value.state === "failed_metadata")
 );
-const isAutoDownloadType = computed(() => datatypeDetails.value?.display_behavior === "download");
-
-// Fetch datatype details including display behavior
-async function fetchDatatypeInfo() {
-    if (dataset.value && dataset.value.file_ext) {
-        try {
-            datatypeDetails.value = await fetchDatatypeDetails(dataset.value.file_ext);
-        } catch (error) {
-            console.error("Failed to fetch datatype details:", error);
-            datatypeDetails.value = null;
-        }
-    }
-}
+const isAutoDownloadType = computed(
+    () => dataset.value && datatypeStore.isDatatypeAutoDownload(dataset.value.file_ext)
+);
 
 // Check if the dataset has a preferred visualization by datatype
 async function checkPreferredVisualization() {
@@ -77,12 +67,14 @@ async function checkPreferredVisualization() {
     }
 }
 
-// Watch for changes to the dataset to check for preferred visualizations and datatype info
+// Watch for changes to the dataset to check for preferred visualizations and fetch datatype info
 watch(
     () => dataset.value?.file_ext,
-    () => {
+    async () => {
         checkPreferredVisualization();
-        fetchDatatypeInfo();
+        if (dataset.value && dataset.value.file_ext) {
+            await datatypeStore.fetchDatatypeDetails(dataset.value.file_ext);
+        }
     },
     { immediate: true }
 );
diff --git a/client/src/stores/datatypeStore.js b/client/src/stores/datatypeStore.js
index af20efbdc52..6c55ac5e422 100644
--- a/client/src/stores/datatypeStore.js
+++ b/client/src/stores/datatypeStore.js
@@ -1,14 +1,24 @@
 import UploadUtils from "components/Upload/utils";
 import { defineStore } from "pinia";
 
+import { fetchDatatypeDetails } from "@/api/datatypes";
+
 export const useDatatypeStore = defineStore("datatypeStore", {
     state: () => ({
         uploadDatatypes: [],
+        datatypeDetails: {},
     }),
     getters: {
         getUploadDatatypes: (state) => {
             return state.uploadDatatypes;
         },
+        getDatatypeDetails: (state) => (extension) => {
+            return state.datatypeDetails[extension];
+        },
+        isDatatypeAutoDownload: (state) => (extension) => {
+            const details = state.datatypeDetails[extension];
+            return details?.display_behavior === "download";
+        },
     },
     actions: {
         async fetchUploadDatatypes() {
@@ -19,5 +29,20 @@ export const useDatatypeStore = defineStore("datatypeStore", {
                 console.log("Error: unable to load datatypes", err);
             }
         },
+        async fetchDatatypeDetails(extension) {
+            // Return cached details if available
+            if (this.datatypeDetails[extension]) {
+                return this.datatypeDetails[extension];
+            }
+
+            try {
+                const details = await fetchDatatypeDetails(extension);
+                this.datatypeDetails[extension] = details;
+                return details;
+            } catch (err) {
+                console.error(`Error: unable to load datatype details for ${extension}`, err);
+                return null;
+            }
+        },
     },
 });

From 3974b850a8ce552ff690e2919d9a2b1aeacc64d3 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Mon, 2 Jun 2025 09:28:05 -0400
Subject: [PATCH 14/23] Add Raw tab for visualized datasets and prevent
 auto-downloads

- Add Raw tab to DatasetView when datasets have automatic visualizations,
allowing users to view raw data alongside visualizations
- Prevent file types that trigger automatic downloads (TIFF, PDF, etc.)
from loading in iframes, showing download prompt instead
---
 client/src/components/Dataset/DatasetView.vue | 29 +++----------------
 client/src/stores/datatypeStore.js            |  4 +++
 2 files changed, 8 insertions(+), 25 deletions(-)

diff --git a/client/src/components/Dataset/DatasetView.vue b/client/src/components/Dataset/DatasetView.vue
index 7ceb7384f63..58d569137db 100644
--- a/client/src/components/Dataset/DatasetView.vue
+++ b/client/src/components/Dataset/DatasetView.vue
@@ -7,7 +7,6 @@ import { computed, ref, watch } from "vue";
 import { usePersistentToggle } from "@/composables/persistentToggle";
 import { useDatasetStore } from "@/stores/datasetStore";
 import { useDatatypeStore } from "@/stores/datatypeStore";
-import { useDatatypeVisualizationsStore } from "@/stores/datatypeVisualizationsStore";
 import { bytesToString } from "@/utils/utils";
 
 import DatasetError from "../DatasetInformation/DatasetError.vue";
@@ -22,7 +21,6 @@ import CenterFrame from "@/entry/analysis/modules/CenterFrame.vue";
 
 const datasetStore = useDatasetStore();
 const datatypeStore = useDatatypeStore();
-const datatypeVisualizationsStore = useDatatypeVisualizationsStore();
 const { toggled: headerCollapsed, toggle: toggleHeaderCollapse } = usePersistentToggle("dataset-header-collapsed");
 
 interface Props {
@@ -35,7 +33,6 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const iframeLoading = ref(true);
-const preferredVisualization = ref<string>();
 
 const dataset = computed(() => datasetStore.getDataset(props.datasetId));
 const headerState = computed(() => (headerCollapsed.value ? "closed" : "open"));
@@ -46,32 +43,14 @@ const showError = computed(
 const isAutoDownloadType = computed(
     () => dataset.value && datatypeStore.isDatatypeAutoDownload(dataset.value.file_ext)
 );
+const preferredVisualization = computed(
+    () => dataset.value && datatypeStore.getPreferredVisualization(dataset.value.file_ext)
+);
 
-// Check if the dataset has a preferred visualization by datatype
-async function checkPreferredVisualization() {
-    if (dataset.value && dataset.value.file_ext) {
-        try {
-            const mapping = await datatypeVisualizationsStore.getPreferredVisualizationForDatatype(
-                dataset.value.file_ext
-            );
-            if (mapping) {
-                preferredVisualization.value = mapping.visualization;
-            } else {
-                preferredVisualization.value = undefined;
-            }
-        } catch (error) {
-            preferredVisualization.value = undefined;
-        }
-    } else {
-        preferredVisualization.value = undefined;
-    }
-}
-
-// Watch for changes to the dataset to check for preferred visualizations and fetch datatype info
+// Watch for changes to the dataset to fetch datatype info
 watch(
     () => dataset.value?.file_ext,
     async () => {
-        checkPreferredVisualization();
         if (dataset.value && dataset.value.file_ext) {
             await datatypeStore.fetchDatatypeDetails(dataset.value.file_ext);
         }
diff --git a/client/src/stores/datatypeStore.js b/client/src/stores/datatypeStore.js
index 6c55ac5e422..3a1e15fc3aa 100644
--- a/client/src/stores/datatypeStore.js
+++ b/client/src/stores/datatypeStore.js
@@ -19,6 +19,10 @@ export const useDatatypeStore = defineStore("datatypeStore", {
             const details = state.datatypeDetails[extension];
             return details?.display_behavior === "download";
         },
+        getPreferredVisualization: (state) => (extension) => {
+            const details = state.datatypeDetails[extension];
+            return details?.preferred_visualization?.visualization || null;
+        },
     },
     actions: {
         async fetchUploadDatatypes() {

From 3e9d1a9e97ddc270fb559d36e5751ff5b6a63610 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Mon, 2 Jun 2025 09:34:38 -0400
Subject: [PATCH 15/23] Rebuild api schema

---
 client/src/api/schema/schema.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/client/src/api/schema/schema.ts b/client/src/api/schema/schema.ts
index a61861be3ea..20ba0bc1690 100644
--- a/client/src/api/schema/schema.ts
+++ b/client/src/api/schema/schema.ts
@@ -9301,6 +9301,11 @@ export interface components {
              * @description The URL to a detailed description for this datatype
              */
             description_url: string | null;
+            /**
+             * Display behavior
+             * @description How this datatype behaves when displayed with preview=True: 'inline' (can be displayed in browser) or 'download' (triggers download)
+             */
+            display_behavior?: string | null;
             /**
              * Display in upload
              * @description If True, the associated file extension will be displayed in the `File Format` select list in the `Upload File from your computer` tool in the `Get Data` tool section of the tool panel

From ae0c70ac389edbfa3c0ba3a9b7a0c7a95c03cda0 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Mon, 2 Jun 2025 22:57:00 -0400
Subject: [PATCH 16/23] Update selectors for Edit, Details, and Visualize tabs
 to use more descriptive titles

---
 lib/galaxy/selenium/navigates_galaxy.py | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index b3f450b4689..6e323c4c83b 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -1995,7 +1995,9 @@ class NavigatesGalaxy(HasDriver):
 
         # Find and click the Edit tab - using a more reliable selector
         # BVue generates '.nav-item a' elements with a title attribute matching the tab title
-        edit_tab_button = self.wait_for_selector_clickable(".nav-item[title='Edit'] > a.nav-link")
+        edit_tab_button = self.wait_for_selector_clickable(
+            ".nav-item[title='Edit dataset attributes and metadata'] > a.nav-link"
+        )
         edit_tab_button.click()
 
         # Wait for the edit attributes panel to be visible
@@ -2010,14 +2012,18 @@ class NavigatesGalaxy(HasDriver):
     def show_dataset_details(self, hid):
         self.display_dataset(hid)
         # Find and click the Details tab
-        details_tab_button = self.wait_for_selector_clickable(".nav-item[title='Details'] > a.nav-link")
+        details_tab_button = self.wait_for_selector_clickable(
+            ".nav-item[title='View detailed information about this dataset'] > a.nav-link"
+        )
         details_tab_button.click()
         self.components.dataset_details._.wait_for_visible()
 
     def show_dataset_visualizations(self, hid):
         self.display_dataset(hid)
         # Find and click the Visualize tab
-        visualize_tab_button = self.wait_for_selector_clickable(".nav-item[title='Visualize'] > a.nav-link")
+        visualize_tab_button = self.wait_for_selector_clickable(
+            ".nav-item[title='Explore available visualizations for this dataset'] > a.nav-link"
+        )
         visualize_tab_button.click()
 
     def history_panel_item_view_dataset_details(self, hid):

From e29ec8556da633c18c882c18e45b6c2b46e207ab Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Tue, 3 Jun 2025 07:01:23 -0400
Subject: [PATCH 17/23] Update tab titles for navigation.yml

---
 client/src/utils/navigation/navigation.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 3c50b4bb550..fb3f4902c3e 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -157,9 +157,9 @@ object_store_details:
 dataset_view:
   selectors:
     _: .dataset-view
-    edit_tab: ".nav-item[title='Edit'] > a.nav-link"
-    details_tab: ".nav-item[title='Details'] > a.nav-link"
-    visualize_tab: ".nav-item[title='Visualize'] > a.nav-link"
+    edit_tab: ".nav-item[title='Edit dataset attributes and metadata'] > a.nav-link"
+    details_tab: ".nav-item[title='View detailed information about this dataset'] > a.nav-link"
+    visualize_tab: ".nav-item[title='Explore available visualizations for this dataset'] > a.nav-link"
 
 history_panel:
   menu:

From 488186f71b687594234a671438c2c158266bb5ad Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Tue, 3 Jun 2025 10:00:23 -0400
Subject: [PATCH 18/23] Fix prop passing to centerpane

---
 client/src/components/Dataset/DatasetView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Dataset/DatasetView.vue b/client/src/components/Dataset/DatasetView.vue
index 58d569137db..2f5da800d42 100644
--- a/client/src/components/Dataset/DatasetView.vue
+++ b/client/src/components/Dataset/DatasetView.vue
@@ -163,7 +163,7 @@ watch(
             <CenterFrame
                 v-else
                 :src="`/datasets/${datasetId}/display/?preview=True`"
-                :is_preview="true"
+                :is-preview="true"
                 @load="iframeLoading = false" />
         </div>
         <div v-else-if="tab === 'raw'" class="h-100">
@@ -180,7 +180,7 @@ watch(
             <CenterFrame
                 v-else
                 :src="`/datasets/${datasetId}/display/?preview=True`"
-                :is_preview="true"
+                :is-preview="true"
                 @load="iframeLoading = false" />
         </div>
         <div v-else-if="tab === 'visualize'" class="d-flex flex-column overflow-hidden overflow-y">

From 5cb524c531f7d409d0046bbd269274767934f2f7 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Fri, 6 Jun 2025 11:48:59 -0400
Subject: [PATCH 19/23] Route directly to visualize tab for restored icon in
 datasetcard

---
 .../src/components/History/Content/Dataset/DatasetActions.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/History/Content/Dataset/DatasetActions.vue b/client/src/components/History/Content/Dataset/DatasetActions.vue
index aa8064dc79f..f8bf41f09e4 100644
--- a/client/src/components/History/Content/Dataset/DatasetActions.vue
+++ b/client/src/components/History/Content/Dataset/DatasetActions.vue
@@ -86,7 +86,7 @@ function onInfo() {
 }
 
 function onVisualize() {
-    router.push(`/visualizations?dataset_id=${props.item.id}`);
+    router.push(`/datasets/${props.item.id}/visualize`);
 }
 
 function onRerun() {

From 75212d09d0aa6a75b2f99f999df5876629821682 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Fri, 6 Jun 2025 12:23:49 -0400
Subject: [PATCH 20/23] Swap datatypes info request to fetch client

---
 client/src/api/datatypes.ts | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/client/src/api/datatypes.ts b/client/src/api/datatypes.ts
index 857c10d4724..495019298f0 100644
--- a/client/src/api/datatypes.ts
+++ b/client/src/api/datatypes.ts
@@ -1,7 +1,5 @@
-import axios from "axios";
-
+import { GalaxyApi } from "@/api";
 import type { components } from "@/api";
-import { withPrefix } from "@/utils/redirect";
 import { rethrowSimple } from "@/utils/simple-error";
 
 export type CompositeFileInfo = components["schemas"]["CompositeFileInfo"];
@@ -10,10 +8,18 @@ export type DatatypeDetails = components["schemas"]["DatatypeDetails"];
 /**
  * Get details about a specific datatype
  */
-export async function fetchDatatypeDetails(extension: string) {
+export async function fetchDatatypeDetails(extension: string): Promise<DatatypeDetails> {
     try {
-        const { data } = await axios.get(withPrefix(`/api/datatypes/${extension}`));
-        return data;
+        const { GET } = GalaxyApi();
+        const { data } = await GET("/api/datatypes/{datatype}", {
+            params: {
+                path: { datatype: extension },
+            },
+        });
+        if (!data) {
+            throw new Error(`Failed to fetch datatype details for ${extension}`);
+        }
+        return data as DatatypeDetails;
     } catch (error) {
         rethrowSimple(error);
     }

From 0648cbec7d3d56e224cc9cdadb9abca007fe63b9 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Fri, 6 Jun 2025 14:38:01 -0400
Subject: [PATCH 21/23] Wait for datatype response before setting up tabs -- we
 need this to know if we are preview/viz/raw/etc.

---
 client/src/components/Dataset/DatasetView.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Dataset/DatasetView.vue b/client/src/components/Dataset/DatasetView.vue
index 2f5da800d42..6c133971b21 100644
--- a/client/src/components/Dataset/DatasetView.vue
+++ b/client/src/components/Dataset/DatasetView.vue
@@ -47,12 +47,20 @@ const preferredVisualization = computed(
     () => dataset.value && datatypeStore.getPreferredVisualization(dataset.value.file_ext)
 );
 
+// Track datatype loading state
+const isDatatypeLoading = ref(false);
+const datatypeDetailsLoaded = ref(false);
+
 // Watch for changes to the dataset to fetch datatype info
 watch(
     () => dataset.value?.file_ext,
     async () => {
         if (dataset.value && dataset.value.file_ext) {
+            isDatatypeLoading.value = true;
+            datatypeDetailsLoaded.value = false;
             await datatypeStore.fetchDatatypeDetails(dataset.value.file_ext);
+            isDatatypeLoading.value = false;
+            datatypeDetailsLoaded.value = true;
         }
     },
     { immediate: true }
@@ -60,7 +68,7 @@ watch(
 </script>
 
 <template>
-    <LoadingSpan v-if="isLoading || !dataset" message="Loading dataset details" />
+    <LoadingSpan v-if="isLoading || !dataset || isDatatypeLoading" message="Loading dataset details" />
     <div v-else class="dataset-view d-flex flex-column h-100">
         <header :key="`dataset-header-${dataset.id}`" class="dataset-header flex-shrink-0">
             <div class="d-flex">

From 747c6d0b2bbc31338dfe3a4c45f90fd163679558 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Fri, 6 Jun 2025 14:42:42 -0400
Subject: [PATCH 22/23] Consolidate loading states, fix API imports.

---
 client/src/api/datatypes.ts                   |  2 +-
 client/src/components/Dataset/DatasetView.vue | 18 ++++++++++--------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/client/src/api/datatypes.ts b/client/src/api/datatypes.ts
index 495019298f0..0cc5cb54ed4 100644
--- a/client/src/api/datatypes.ts
+++ b/client/src/api/datatypes.ts
@@ -1,5 +1,5 @@
-import { GalaxyApi } from "@/api";
 import type { components } from "@/api";
+import { GalaxyApi } from "@/api";
 import { rethrowSimple } from "@/utils/simple-error";
 
 export type CompositeFileInfo = components["schemas"]["CompositeFileInfo"];
diff --git a/client/src/components/Dataset/DatasetView.vue b/client/src/components/Dataset/DatasetView.vue
index 6c133971b21..85a9c5e1493 100644
--- a/client/src/components/Dataset/DatasetView.vue
+++ b/client/src/components/Dataset/DatasetView.vue
@@ -36,7 +36,15 @@ const iframeLoading = ref(true);
 
 const dataset = computed(() => datasetStore.getDataset(props.datasetId));
 const headerState = computed(() => (headerCollapsed.value ? "closed" : "open"));
-const isLoading = computed(() => datasetStore.isLoadingDataset(props.datasetId));
+
+// Track datatype loading state
+const isDatatypeLoading = ref(false);
+
+// Consolidated loading state
+const isLoading = computed(() => {
+    return datasetStore.isLoadingDataset(props.datasetId) || isDatatypeLoading.value;
+});
+
 const showError = computed(
     () => dataset.value && (dataset.value.state === "error" || dataset.value.state === "failed_metadata")
 );
@@ -47,20 +55,14 @@ const preferredVisualization = computed(
     () => dataset.value && datatypeStore.getPreferredVisualization(dataset.value.file_ext)
 );
 
-// Track datatype loading state
-const isDatatypeLoading = ref(false);
-const datatypeDetailsLoaded = ref(false);
-
 // Watch for changes to the dataset to fetch datatype info
 watch(
     () => dataset.value?.file_ext,
     async () => {
         if (dataset.value && dataset.value.file_ext) {
             isDatatypeLoading.value = true;
-            datatypeDetailsLoaded.value = false;
             await datatypeStore.fetchDatatypeDetails(dataset.value.file_ext);
             isDatatypeLoading.value = false;
-            datatypeDetailsLoaded.value = true;
         }
     },
     { immediate: true }
@@ -68,7 +70,7 @@ watch(
 </script>
 
 <template>
-    <LoadingSpan v-if="isLoading || !dataset || isDatatypeLoading" message="Loading dataset details" />
+    <LoadingSpan v-if="isLoading || !dataset" message="Loading dataset details" />
     <div v-else class="dataset-view d-flex flex-column h-100">
         <header :key="`dataset-header-${dataset.id}`" class="dataset-header flex-shrink-0">
             <div class="d-flex">

From af028c98c739dad7df2c831ebe9a413d48a78136 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Sat, 7 Jun 2025 20:39:14 -0400
Subject: [PATCH 23/23] Fix dataset view heading wrapping and consolidate
 loading states

Prevent line breaks in hid and dataset state while allowing name to
wrap. Consolidate datatype and dataset loading states into single
computed property.
---
 client/src/components/Dataset/DatasetView.vue | 32 ++++++++++++++++---
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Dataset/DatasetView.vue b/client/src/components/Dataset/DatasetView.vue
index 85a9c5e1493..1f50eecc691 100644
--- a/client/src/components/Dataset/DatasetView.vue
+++ b/client/src/components/Dataset/DatasetView.vue
@@ -82,7 +82,8 @@ watch(
                     class="flex-grow-1"
                     :collapse="headerState"
                     @click="toggleHeaderCollapse">
-                    {{ dataset?.hid }}: <span class="font-weight-bold">{{ dataset?.name }}</span>
+                    <span class="dataset-hid">{{ dataset?.hid }}:</span>
+                    <span class="dataset-name font-weight-bold">{{ dataset?.name }}</span>
                     <span class="dataset-state-header">
                         <DatasetState :dataset-id="datasetId" />
                     </span>
@@ -193,16 +194,16 @@ watch(
                 :is-preview="true"
                 @load="iframeLoading = false" />
         </div>
-        <div v-else-if="tab === 'visualize'" class="d-flex flex-column overflow-hidden overflow-y">
+        <div v-else-if="tab === 'visualize'" class="tab-content-panel">
             <VisualizationsList :dataset-id="datasetId" />
         </div>
-        <div v-else-if="tab === 'edit'" class="d-flex flex-column overflow-hidden overflow-y mt-2">
+        <div v-else-if="tab === 'edit'" class="tab-content-panel mt-2">
             <DatasetAttributes :dataset-id="datasetId" />
         </div>
-        <div v-else-if="tab === 'details'" class="d-flex flex-column overflow-hidden overflow-y mt-2">
+        <div v-else-if="tab === 'details'" class="tab-content-panel mt-2">
             <DatasetDetails :dataset-id="datasetId" />
         </div>
-        <div v-else-if="tab === 'error'" class="d-flex flex-column overflow-hidden overflow-y mt-2">
+        <div v-else-if="tab === 'error'" class="tab-content-panel mt-2">
             <DatasetError :dataset-id="datasetId" />
         </div>
     </div>
@@ -243,9 +244,30 @@ watch(
     opacity: 0;
 }
 
+.dataset-hid,
+.dataset-state-header {
+    white-space: nowrap;
+}
+
+.dataset-hid {
+    margin-right: 0.25rem;
+}
+
+.dataset-name {
+    word-break: break-word;
+}
+
 .dataset-state-header {
     font-size: $h5-font-size;
     vertical-align: middle;
+    margin-left: 0.5rem;
+}
+
+.tab-content-panel {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    overflow-y: auto;
 }
 
 .auto-download-message {