From a5be981b636effd73dec1a1107909badfa42326d Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 20 Jan 2026 20:21:58 +0100
Subject: [PATCH 01/39] Add GTable component with loading and empty states

Introduces a new reusable table component that extends BTable with:
- Loading state with customizable message
- Empty state with customizable message and variant
- Type definitions for props and events
- Proper TypeScript interfaces for type safety
---
 client/src/components/Common/GTable.types.ts |  96 ++++
 client/src/components/Common/GTable.vue      | 530 +++++++++++++++++++
 2 files changed, 626 insertions(+)
 create mode 100644 client/src/components/Common/GTable.types.ts
 create mode 100644 client/src/components/Common/GTable.vue

diff --git a/client/src/components/Common/GTable.types.ts b/client/src/components/Common/GTable.types.ts
new file mode 100644
index 000000000000..311d506108fb
--- /dev/null
+++ b/client/src/components/Common/GTable.types.ts
@@ -0,0 +1,96 @@
+import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
+
+import type { BootstrapVariant } from "@/components/Common";
+
+/** Bootstrap component sizes */
+export type BootstrapSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+/** Table field sorting order */
+export type SortOrder = "asc" | "desc";
+
+/** Table field alignment options */
+export type FieldAlignment = "left" | "center" | "right";
+
+/** Table field definition */
+export interface TableField {
+    /** Unique key for the field (matches data property name) */
+    key: string;
+    /** Display label for the column header */
+    label?: string;
+    /** Whether the column is sortable */
+    sortable?: boolean;
+    /** Custom CSS classes for the column */
+    class?: string;
+    /** Custom CSS classes for the header cell */
+    headerClass?: string;
+    /** Custom CSS classes for data cells */
+    cellClass?: string;
+    /** Column alignment */
+    align?: FieldAlignment;
+    /** Width of the column (CSS value) */
+    width?: string;
+    /** Whether to hide the column on small screens */
+    hideOnSmall?: boolean;
+    /** Custom formatter function for cell values */
+    formatter?: (value: any, key: string, item: any) => string;
+    /** Whether to render as HTML (use with caution) */
+    html?: boolean;
+}
+
+/** Sort change event payload */
+export interface SortChangeEvent {
+    /** The field key being sorted */
+    sortBy: string;
+    /** Whether sorting in descending order */
+    sortDesc: boolean;
+}
+
+/** Row click event payload */
+export interface RowClickEvent<T = any> {
+    /** The row item data */
+    item: T;
+    /** The row index */
+    index: number;
+    /** The original mouse/keyboard event */
+    event: MouseEvent | KeyboardEvent;
+}
+
+/** Row selection event payload */
+export interface RowSelectEvent<T = any> {
+    /** The selected row item */
+    item: T;
+    /** The row index */
+    index: number;
+    /** Whether the row is now selected */
+    selected: boolean;
+}
+
+/** Table action button configuration */
+export interface TableAction {
+    /** Unique identifier for the action */
+    id: string;
+    /** Display label for the action */
+    label: string;
+    /** Tooltip text */
+    title: string;
+    /** FontAwesome icon */
+    icon?: IconDefinition;
+    /** Bootstrap variant */
+    variant?: BootstrapVariant;
+    /** Whether the action is disabled */
+    disabled?: boolean;
+    /** Whether the action is visible */
+    visible?: boolean;
+    /** Click handler function */
+    handler?: () => void;
+}
+
+/** Empty state configuration */
+export interface TableEmptyState {
+    /** Message to display when no data */
+    message: string;
+    /** Optional icon to display */
+    icon?: IconDefinition;
+    /** Bootstrap variant for styling */
+    variant?: BootstrapVariant;
+}
diff --git a/client/src/components/Common/GTable.vue b/client/src/components/Common/GTable.vue
new file mode 100644
index 000000000000..712c68fce330
--- /dev/null
+++ b/client/src/components/Common/GTable.vue
@@ -0,0 +1,530 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { faSort, faSortDown, faSortUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BFormCheckbox } from "bootstrap-vue";
+import { computed, ref } from "vue";
+
+import { useUid } from "@/composables/utils/uid";
+import localize from "@/utils/localization";
+
+import type {
+    FieldAlignment,
+    RowClickEvent,
+    RowSelectEvent,
+    SortChangeEvent,
+    TableAction,
+    TableEmptyState,
+    TableField,
+} from "./GTable.types";
+
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+interface Props {
+    /** Unique identifier for the table
+     * @default useUid("g-table-").value
+     */
+    id?: string;
+
+    /** Table field definitions
+     * @default []
+     */
+    fields?: TableField[];
+
+    /** Table data items
+     * @default []
+     */
+    items?: T[];
+
+    /** Whether to show striped rows
+     * @default true
+     */
+    striped?: boolean;
+
+    /** Whether to show hover effect on rows
+     * @default true
+     */
+    hover?: boolean;
+
+    /** Whether to show borders
+     * @default false
+     */
+    bordered?: boolean;
+
+    /** Whether rows are clickable
+     * @default false
+     */
+    clickableRows?: boolean;
+
+    /** Whether to show selection checkboxes
+     * @default false
+     */
+    selectable?: boolean;
+
+    /** Array of selected item indices
+     * @default []
+     */
+    selectedItems?: number[];
+
+    /** Current sort field key
+     * @default ""
+     */
+    sortBy?: string;
+
+    /** Whether sorting in descending order
+     * @default false
+     */
+    sortDesc?: boolean;
+
+    /** Whether to disable local sorting (for server-side sorting)
+     * @default false
+     */
+    noLocalSorting?: boolean;
+
+    /** Whether to reset sort on column click
+     * @default false
+     */
+    noSortReset?: boolean;
+
+    /** Whether the table is in loading state
+     * @default false
+     */
+    loading?: boolean;
+
+    /** Loading message to display
+     * @default "Loading..."
+     */
+    loadingMessage?: string;
+
+    /** Empty state configuration
+     * @default { message: "No data available" }
+     */
+    emptyState?: TableEmptyState;
+
+    /** Additional CSS classes for the table container
+     * @default ""
+     */
+    containerClass?: string | string[];
+
+    /** Additional CSS classes for the table element
+     * @default ""
+     */
+    tableClass?: string | string[];
+
+    /** Table actions displayed above the table
+     * @default []
+     */
+    actions?: TableAction[];
+
+    /** Whether to show select all checkbox in header
+     * @default false
+     */
+    showSelectAll?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    id: () => useUid("g-table-").value,
+    fields: () => [],
+    items: () => [],
+    striped: true,
+    hover: true,
+    bordered: false,
+    clickableRows: false,
+    selectable: false,
+    selectedItems: () => [],
+    sortBy: "",
+    sortDesc: false,
+    noLocalSorting: false,
+    noSortReset: false,
+    loading: false,
+    loadingMessage: "Loading...",
+    emptyState: () => ({ message: "No data available" }),
+    containerClass: "",
+    tableClass: "",
+    actions: () => [],
+    showSelectAll: false,
+});
+
+/**
+ * Events emitted by the GTable component
+ */
+const emit = defineEmits<{
+    /** Emitted when sort changes
+     * @event sort-changed
+     */
+    (e: "sort-changed", event: SortChangeEvent): void;
+
+    /** Emitted when a row is clicked
+     * @event row-click
+     */
+    (e: "row-click", event: RowClickEvent<T>): void;
+
+    /** Emitted when a row is selected/deselected
+     * @event row-select
+     */
+    (e: "row-select", event: RowSelectEvent<T>): void;
+
+    /** Emitted when select all is toggled
+     * @event select-all
+     */
+    (e: "select-all", selected: boolean): void;
+}>();
+
+// Internal state for local sorting
+const localSortBy = ref<string | undefined>(props.sortBy);
+const localSortDesc = ref(props.sortDesc);
+
+// Computed sorted items
+const sortedItems = computed(() => {
+    if (props.noLocalSorting || !localSortBy.value) {
+        return props.items;
+    }
+
+    const sorted = [...props.items];
+    const sortKey = localSortBy.value;
+
+    sorted.sort((a, b) => {
+        const aVal = a[sortKey];
+        const bVal = b[sortKey];
+
+        if (aVal === bVal) {
+            return 0;
+        }
+        if (aVal === null || aVal === undefined) {
+            return 1;
+        }
+        if (bVal === null || bVal === undefined) {
+            return -1;
+        }
+
+        const comparison = aVal < bVal ? -1 : 1;
+        return localSortDesc.value ? -comparison : comparison;
+    });
+
+    return sorted;
+});
+
+// Check if all items are selected
+const allSelected = computed(() => {
+    return props.items.length > 0 && props.selectedItems.length === props.items.length;
+});
+
+// Check if some items are selected
+const someSelected = computed(() => {
+    return props.selectedItems.length > 0 && props.selectedItems.length < props.items.length;
+});
+
+/**
+ * Handle column header click for sorting
+ */
+function onHeaderClick(field: TableField) {
+    if (!field.sortable) {
+        return;
+    }
+
+    if (localSortBy.value === field.key) {
+        if (!props.noSortReset && localSortDesc.value) {
+            // Reset sort
+            localSortBy.value = undefined;
+            localSortDesc.value = false;
+        } else {
+            // Toggle sort direction
+            localSortDesc.value = !localSortDesc.value;
+        }
+    } else {
+        // New sort field
+        localSortBy.value = field.key;
+        localSortDesc.value = false;
+    }
+
+    emit("sort-changed", {
+        sortBy: localSortBy.value || "",
+        sortDesc: localSortDesc.value,
+    });
+}
+
+/**
+ * Get sort icon for a field
+ */
+function getSortIcon(field: TableField) {
+    if (!field.sortable) {
+        return null;
+    }
+
+    if (localSortBy.value !== field.key) {
+        return faSort;
+    }
+
+    return localSortDesc.value ? faSortDown : faSortUp;
+}
+
+/**
+ * Handle row click
+ */
+function onRowClick(item: T, index: number, event: MouseEvent | KeyboardEvent) {
+    if (!props.clickableRows) {
+        return;
+    }
+
+    emit("row-click", { item, index, event });
+}
+
+/**
+ * Handle row selection toggle
+ */
+function onRowSelect(item: T, index: number) {
+    const isSelected = props.selectedItems.includes(index);
+    emit("row-select", { item, index, selected: !isSelected });
+}
+
+/**
+ * Handle select all toggle
+ */
+function onSelectAll() {
+    emit("select-all", !allSelected.value);
+}
+
+/**
+ * Get cell value with optional formatter
+ */
+function getCellValue(item: T, field: TableField) {
+    const value = item[field.key];
+
+    if (field.formatter) {
+        return field.formatter(value, field.key, item);
+    }
+
+    return value;
+}
+
+/**
+ * Get alignment class for a field
+ */
+function getAlignmentClass(align?: FieldAlignment) {
+    if (!align || align === "left") {
+        return "";
+    }
+    return `text-${align}`;
+}
+
+/**
+ * Check if row is selected
+ */
+function isRowSelected(index: number) {
+    return props.selectedItems.includes(index);
+}
+
+/**
+ * Helper functions for generating consistent element IDs
+ */
+const getElementId = (tableId: string, element: string) => `g-table-${element}-${tableId}`;
+const getFieldId = (tableId: string, fieldKey: string) => `g-table-field-${fieldKey}-${tableId}`;
+const getRowId = (tableId: string, index: number) => `g-table-row-${index}-${tableId}`;
+const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table-cell-${fieldKey}-${index}-${tableId}`;
+</script>
+
+<template>
+    <div :id="`g-table-container-${props.id}`" class="g-table-container" :class="containerClass">
+        <!-- Actions toolbar -->
+        <div v-if="props.actions.length > 0" :id="getElementId(props.id, 'actions')" class="g-table-actions mb-2">
+            <slot name="actions">
+                <!-- Custom actions can be added here -->
+            </slot>
+        </div>
+
+        <!-- Table wrapper -->
+        <div :id="`g-table-wrapper-${props.id}`" class="g-table-wrapper">
+            <table
+                :id="`g-table-${props.id}`"
+                class="g-table table"
+                :class="[
+                    { 'table-striped': striped },
+                    { 'table-hover': hover },
+                    { 'table-bordered': bordered },
+                    tableClass,
+                ]">
+                <thead>
+                    <tr>
+                        <!-- Select all checkbox column -->
+                        <th v-if="selectable && showSelectAll" class="g-table-select-column">
+                            <BFormCheckbox
+                                :id="getElementId(props.id, 'select-all')"
+                                v-b-tooltip.hover.noninteractive
+                                :checked="allSelected"
+                                :indeterminate="someSelected"
+                                title="Select all"
+                                @change="onSelectAll" />
+                        </th>
+                        <th v-else-if="selectable" class="g-table-select-column"></th>
+
+                        <!-- Field columns -->
+                        <th
+                            v-for="field in props.fields"
+                            :id="getFieldId(props.id, field.key)"
+                            :key="field.key"
+                            :class="[
+                                field.headerClass,
+                                getAlignmentClass(field.align),
+                                { 'g-table-sortable': field.sortable },
+                                { 'g-table-sorted': localSortBy === field.key },
+                                { 'hide-on-small': field.hideOnSmall },
+                            ]"
+                            :style="field.width ? { width: field.width } : undefined"
+                            @click="onHeaderClick(field)">
+                            <div class="d-flex align-items-center justify-content-between">
+                                <slot :name="`head(${field.key})`" :field="field">
+                                    <span>{{ field.label || field.key }}</span>
+                                </slot>
+                                <FontAwesomeIcon
+                                    v-if="field.sortable && getSortIcon(field)"
+                                    :icon="getSortIcon(field)"
+                                    :class="{ 'text-muted': localSortBy !== field.key }"
+                                    class="ml-1" />
+                            </div>
+                        </th>
+                    </tr>
+                </thead>
+
+                <tbody v-if="!loading && sortedItems.length > 0">
+                    <tr
+                        v-for="(item, index) in sortedItems"
+                        :id="getRowId(props.id, index)"
+                        :key="index"
+                        :class="{
+                            'g-table-row-clickable': clickableRows,
+                            'g-table-row-selected': isRowSelected(index),
+                        }"
+                        @click="onRowClick(item, index, $event)">
+                        <!-- Selection checkbox column -->
+                        <td v-if="selectable" class="g-table-select-column">
+                            <BFormCheckbox
+                                :id="`${getRowId(props.id, index)}-select`"
+                                v-b-tooltip.hover.noninteractive
+                                :checked="isRowSelected(index)"
+                                title="Select row"
+                                @click.stop
+                                @change="onRowSelect(item, index)" />
+                        </td>
+
+                        <!-- Data columns -->
+                        <td
+                            v-for="field in props.fields"
+                            :id="getCellId(props.id, field.key, index)"
+                            :key="field.key"
+                            :class="[
+                                field.cellClass,
+                                field.class,
+                                getAlignmentClass(field.align),
+                                { 'hide-on-small': field.hideOnSmall },
+                            ]">
+                            <slot :name="`cell(${field.key})`" :value="item[field.key]" :item="item" :index="index">
+                                <!-- eslint-disable-next-line vue/no-v-html -->
+                                <span v-if="field.html" v-html="getCellValue(item, field)"></span>
+                                <span v-else>{{ getCellValue(item, field) }}</span>
+                            </slot>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <!-- Loading state -->
+            <div v-if="loading" class="g-table-loading text-center py-4">
+                <LoadingSpan :message="props.loadingMessage" />
+            </div>
+
+            <!-- Empty state -->
+            <div
+                v-else-if="sortedItems.length === 0"
+                class="g-table-empty text-center py-4"
+                :class="props.emptyState.variant ? `text-${props.emptyState.variant}` : ''">
+                <slot name="empty">
+                    <BAlert :variant="props.emptyState.variant || 'info'" show>
+                        <FontAwesomeIcon v-if="props.emptyState.icon" :icon="props.emptyState.icon" class="mr-2" />
+                        {{ localize(props.emptyState.message) }}
+                    </BAlert>
+                </slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@import "@/style/scss/theme/blue.scss";
+@import "@/style/scss/_breakpoints.scss";
+
+.g-table-container {
+    width: 100%;
+}
+
+.g-table-wrapper {
+    position: relative;
+    width: 100%;
+}
+
+.g-table {
+    width: 100%;
+    margin-bottom: 0;
+
+    thead th {
+        position: sticky;
+        top: 0;
+        background-color: $body-bg;
+        z-index: 10;
+        border-bottom: 2px solid $brand-secondary;
+        font-weight: 600;
+        padding: 0.75rem;
+
+        &.g-table-sortable {
+            cursor: pointer;
+            user-select: none;
+
+            &:hover {
+                background-color: lighten($brand-light, 0.5);
+            }
+        }
+
+        &.g-table-sorted {
+            background-color: $brand-light;
+        }
+    }
+
+    tbody {
+        tr {
+            &.g-table-row-clickable {
+                cursor: pointer;
+
+                &:hover {
+                    background-color: lighten($brand-light, 0.5);
+                }
+            }
+
+            &.g-table-row-selected {
+                background-color: $brand-light;
+            }
+        }
+
+        td {
+            padding: 0.75rem;
+            vertical-align: middle;
+        }
+    }
+
+    .g-table-select-column {
+        width: 40px;
+        text-align: center;
+    }
+
+    @media (max-width: $breakpoint-sm) {
+        .hide-on-small {
+            display: none;
+        }
+    }
+}
+
+.g-table-loading,
+.g-table-empty {
+    min-height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+</style>

From c7b67bf98fb77f5c9b0e92c411bf207aacfc62ac Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 20 Jan 2026 20:22:09 +0100
Subject: [PATCH 02/39] Refactor DatasetList to use GTable component

Updates DatasetList component to use the new GTable component:
- Replace BTable with GTable for consistent loading/empty states
- Remove LoadingSpan and BAlert components in favor of GTable states
- Add explicit field labels to table configuration
- Pass loading state and messages as props to GTable
- Simplify template by removing duplicate state handling
---
 client/src/components/Dataset/DatasetList.vue | 45 +++++++++++--------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/client/src/components/Dataset/DatasetList.vue b/client/src/components/Dataset/DatasetList.vue
index 524c33f414ea..1ca904be9cae 100644
--- a/client/src/components/Dataset/DatasetList.vue
+++ b/client/src/components/Dataset/DatasetList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BAlert, BTable } from "bootstrap-vue";
+import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, ref } from "vue";
 
@@ -10,9 +10,9 @@ import { useHistoryStore } from "@/stores/historyStore";
 import { rethrowSimple } from "@/utils/simple-error";
 
 import DelayedInput from "@/components/Common/DelayedInput.vue";
+import GTable from "@/components/Common/GTable.vue";
 import DatasetName from "@/components/Dataset/DatasetName.vue";
 import SwitchToHistoryLink from "@/components/History/SwitchToHistoryLink.vue";
-import LoadingSpan from "@/components/LoadingSpan.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 import UtcDate from "@/components/UtcDate.vue";
 
@@ -28,27 +28,30 @@ const sortDesc = ref(true);
 const sortBy = ref("update_time");
 const rows = ref<HDASummary[]>([]);
 const messageVariant = ref("danger");
-const fields = ref([
+const fields = [
     {
         key: "name",
+        label: "Name",
         sortable: true,
     },
     {
         key: "tags",
+        label: "Tags",
         sortable: false,
     },
     {
-        label: "History",
         key: "history_id",
+        label: "History",
         sortable: true,
     },
     {
         key: "extension",
+        label: "Extension",
         sortable: true,
     },
     {
-        label: "Updated",
         key: "update_time",
+        label: "Updated",
         sortable: true,
     },
     {
@@ -56,7 +59,7 @@ const fields = ref([
         label: "",
         sortable: false,
     },
-]);
+];
 
 const showNotFound = computed(() => {
     return !loading.value && rows.value.length === 0 && query;
@@ -152,10 +155,10 @@ function onQuery(q: string) {
     load();
 }
 
-function onSort(props: { sortBy: string; sortDesc: boolean }) {
+function onSort(event: { sortBy: string; sortDesc: boolean }) {
     offset.value = 0;
-    sortBy.value = props.sortBy;
-    sortDesc.value = props.sortDesc;
+    sortBy.value = event.sortBy;
+    sortDesc.value = event.sortDesc;
 
     load();
 }
@@ -189,13 +192,25 @@ onMounted(() => {
 
         <DelayedInput class="m-1 mb-3" placeholder="Search Datasets" @change="onQuery" />
 
-        <BTable
+        <GTable
             id="dataset-table"
             striped
             no-sort-reset
             no-local-sorting
             :fields="fields"
             :items="rows"
+            :sort-by="sortBy"
+            :sort-desc="sortDesc"
+            :loading="loading"
+            loading-message="Loading datasets"
+            :empty-state="{
+                message: showNotFound
+                    ? `No matching entries found for: ${query}`
+                    : showNotAvailable
+                      ? 'No datasets found.'
+                      : 'Loading...',
+                variant: 'info',
+            }"
             @sort-changed="onSort">
             <template v-slot:cell(name)="row">
                 <DatasetName :item="row.item" @showDataset="onShowDataset" @copyDataset="onCopyDataset" />
@@ -217,14 +232,6 @@ onMounted(() => {
             <template v-slot:cell(update_time)="data">
                 <UtcDate :date="data.value" mode="elapsed" />
             </template>
-        </BTable>
-
-        <LoadingSpan v-if="loading" message="Loading datasets" />
-
-        <BAlert v-if="showNotFound" variant="info" show>
-            No matching entries found for: <span class="font-weight-bold">{{ query }}</span>
-        </BAlert>
-
-        <BAlert v-if="showNotAvailable" variant="info" show> No datasets found. </BAlert>
+        </GTable>
     </div>
 </template>

From 0fef8ba2ef7aae0c6572a87c1e39505975967a5b Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 21 Jan 2026 17:50:33 +0100
Subject: [PATCH 03/39] Add configurable sort options and column toggles

Make ListHeader more flexible by accepting dynamic sort and column
options via props. Add dropdown support for column visibility, emit
events for sort and column changes, and keep default sort behavior for
backward compatibility.
---
 client/src/components/Common/ListHeader.vue | 90 ++++++++++++++++-----
 1 file changed, 68 insertions(+), 22 deletions(-)

diff --git a/client/src/components/Common/ListHeader.vue b/client/src/components/Common/ListHeader.vue
index 1514d2038ff9..ef270ed15b5a 100644
--- a/client/src/components/Common/ListHeader.vue
+++ b/client/src/components/Common/ListHeader.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faAngleDown, faAngleUp, faBars, faGripVertical } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BFormCheckbox } from "bootstrap-vue";
+import { BDropdown, BDropdownItem, BFormCheckbox } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import { type ListViewMode, useUserStore } from "@/stores/userStore";
@@ -9,7 +9,17 @@ import { type ListViewMode, useUserStore } from "@/stores/userStore";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import GButtonGroup from "@/components/BaseComponents/GButtonGroup.vue";
 
-type SortBy = "create_time" | "update_time" | "name";
+type SortBy = string;
+
+interface ColumnOption {
+    key: string;
+    label: string;
+}
+
+interface SortOption {
+    value: string;
+    label: string;
+}
 
 interface Props {
     listId: string;
@@ -19,6 +29,9 @@ interface Props {
     showSortOptions?: boolean;
     selectAllDisabled?: boolean;
     indeterminateSelected?: boolean;
+    columnOptions?: ColumnOption[];
+    visibleColumns?: string[];
+    sortOptions?: SortOption[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -28,16 +41,33 @@ const props = withDefaults(defineProps<Props>(), {
     showSortOptions: false,
     selectAllDisabled: false,
     indeterminateSelected: false,
+    columnOptions: () => [],
+    visibleColumns: () => [],
+    sortOptions: () => [],
 });
 
 const emit = defineEmits<{
     (e: "select-all"): void;
+    (e: "toggle-column", key: string): void;
+    (e: "sort-changed", sortBy: string, sortDesc: boolean): void;
 }>();
 
 const userStore = useUserStore();
 
 const sortDesc = ref(true);
-const sortBy = ref<SortBy>("update_time");
+
+// Default sort options for backward compatibility
+const defaultSortOptions: SortOption[] = [
+    { value: "name", label: "Name" },
+    { value: "update_time", label: "Update time" },
+];
+
+// Use provided sortOptions or fall back to defaults
+const effectiveSortOptions = computed(() => {
+    return props.sortOptions.length > 0 ? props.sortOptions : defaultSortOptions;
+});
+
+const sortBy = ref<SortBy>(effectiveSortOptions.value[0]?.value || "update_time");
 const currentListViewMode = computed(() => userStore.currentListViewPreferences[props.listId] || "grid");
 
 function onSort(newSortBy: SortBy) {
@@ -45,7 +75,17 @@ function onSort(newSortBy: SortBy) {
         sortDesc.value = !sortDesc.value;
     } else {
         sortBy.value = newSortBy;
+        sortDesc.value = true; // Reset to descending when changing sort field
     }
+    emit("sort-changed", sortBy.value, sortDesc.value);
+}
+
+function isColumnVisible(key: string) {
+    return props.visibleColumns.includes(key);
+}
+
+function onToggleColumn(key: string) {
+    emit("toggle-column", key);
 }
 
 function onToggleView(newView: ListViewMode) {
@@ -80,33 +120,39 @@ defineExpose({
                 Sort by:
                 <GButtonGroup>
                     <GButton
-                        id="sortby-name"
-                        tooltip
-                        size="small"
-                        :title="sortDesc ? 'Sort by name ascending' : 'Sort by name descending'"
-                        :pressed="sortBy === 'name'"
-                        color="blue"
-                        outline
-                        @click="onSort('name')">
-                        <FontAwesomeIcon v-show="sortBy === 'name'" :icon="sortDesc ? faAngleDown : faAngleUp" />
-                        Name
-                    </GButton>
-
-                    <GButton
-                        id="sortby-update-time"
+                        v-for="option in effectiveSortOptions"
+                        :id="`sortby-${option.value}`"
+                        :key="option.value"
                         tooltip
                         size="small"
-                        :title="sortDesc ? 'Sort by update time ascending' : 'Sort by update time descending'"
-                        :pressed="sortBy === 'update_time'"
+                        :title="sortDesc ? `Sort by ${option.label} ascending` : `Sort by ${option.label} descending`"
+                        :pressed="sortBy === option.value"
                         color="blue"
                         outline
-                        @click="onSort('update_time')">
-                        <FontAwesomeIcon v-show="sortBy === 'update_time'" :icon="sortDesc ? faAngleDown : faAngleUp" />
-                        Update time
+                        @click="onSort(option.value)">
+                        <FontAwesomeIcon v-show="sortBy === option.value" :icon="sortDesc ? faAngleDown : faAngleUp" />
+                        {{ option.label }}
                     </GButton>
                 </GButtonGroup>
             </div>
 
+            <div v-if="columnOptions.length > 0">
+                <BDropdown text="Columns" size="sm" variant="outline-primary" right>
+                    <BDropdownItem
+                        v-for="column in columnOptions"
+                        :key="column.key"
+                        :disabled="column.key === 'name'"
+                        @click="column.key !== 'name' && onToggleColumn(column.key)">
+                        <BFormCheckbox
+                            :checked="isColumnVisible(column.key)"
+                            :disabled="column.key === 'name'"
+                            @click.prevent>
+                            {{ column.label }}
+                        </BFormCheckbox>
+                    </BDropdownItem>
+                </BDropdown>
+            </div>
+
             <slot name="extra-filter" />
         </div>
 

From 3b3da054e4259d92c74601d5dadb46a84bf182e3 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 21 Jan 2026 17:51:00 +0100
Subject: [PATCH 04/39] add overlay and load-more loading states

Introduce separate loading states for table interactions and pagination. Add support for an overlay loader during sorting/filtering and a bottom "load more" indicator for infinite scroll or pagination, using BOverlay and new configurable props and messages to improve UX clarity.
---
 client/src/components/Common/GTable.vue | 254 +++++++++++++-----------
 1 file changed, 142 insertions(+), 112 deletions(-)

diff --git a/client/src/components/Common/GTable.vue b/client/src/components/Common/GTable.vue
index 712c68fce330..90268af47de1 100644
--- a/client/src/components/Common/GTable.vue
+++ b/client/src/components/Common/GTable.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import { faSort, faSortDown, faSortUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BFormCheckbox } from "bootstrap-vue";
+import { BFormCheckbox, BOverlay } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import { useUid } from "@/composables/utils/uid";
-import localize from "@/utils/localization";
 
 import type {
     FieldAlignment,
@@ -95,6 +94,21 @@ interface Props {
      */
     loadingMessage?: string;
 
+    /** Whether to show overlay loading (for sorting/filtering operations)
+     * @default false
+     */
+    overlayLoading?: boolean;
+
+    /** Whether to show load-more loading indicator at bottom (for pagination/scroll)
+     * @default false
+     */
+    loadMoreLoading?: boolean;
+
+    /** Load-more loading message
+     * @default "Loading more..."
+     */
+    loadMoreMessage?: string;
+
     /** Empty state configuration
      * @default { message: "No data available" }
      */
@@ -137,6 +151,9 @@ const props = withDefaults(defineProps<Props>(), {
     noSortReset: false,
     loading: false,
     loadingMessage: "Loading...",
+    overlayLoading: false,
+    loadMoreLoading: false,
+    loadMoreMessage: "Loading more...",
     emptyState: () => ({ message: "No data available" }),
     containerClass: "",
     tableClass: "",
@@ -332,118 +349,117 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
         </div>
 
         <!-- Table wrapper -->
-        <div :id="`g-table-wrapper-${props.id}`" class="g-table-wrapper">
-            <table
-                :id="`g-table-${props.id}`"
-                class="g-table table"
-                :class="[
-                    { 'table-striped': striped },
-                    { 'table-hover': hover },
-                    { 'table-bordered': bordered },
-                    tableClass,
-                ]">
-                <thead>
-                    <tr>
-                        <!-- Select all checkbox column -->
-                        <th v-if="selectable && showSelectAll" class="g-table-select-column">
-                            <BFormCheckbox
-                                :id="getElementId(props.id, 'select-all')"
-                                v-b-tooltip.hover.noninteractive
-                                :checked="allSelected"
-                                :indeterminate="someSelected"
-                                title="Select all"
-                                @change="onSelectAll" />
-                        </th>
-                        <th v-else-if="selectable" class="g-table-select-column"></th>
-
-                        <!-- Field columns -->
-                        <th
-                            v-for="field in props.fields"
-                            :id="getFieldId(props.id, field.key)"
-                            :key="field.key"
-                            :class="[
-                                field.headerClass,
-                                getAlignmentClass(field.align),
-                                { 'g-table-sortable': field.sortable },
-                                { 'g-table-sorted': localSortBy === field.key },
-                                { 'hide-on-small': field.hideOnSmall },
-                            ]"
-                            :style="field.width ? { width: field.width } : undefined"
-                            @click="onHeaderClick(field)">
-                            <div class="d-flex align-items-center justify-content-between">
-                                <slot :name="`head(${field.key})`" :field="field">
-                                    <span>{{ field.label || field.key }}</span>
+        <BOverlay :show="overlayLoading" rounded="sm" class="g-table-wrapper-overlay">
+            <div :id="`g-table-wrapper-${props.id}`" class="g-table-wrapper">
+                <table
+                    :id="`g-table-${props.id}`"
+                    class="g-table table"
+                    :class="[
+                        { 'table-striped': striped },
+                        { 'table-hover': hover },
+                        { 'table-bordered': bordered },
+                        tableClass,
+                    ]">
+                    <thead>
+                        <tr>
+                            <!-- Select all checkbox column -->
+                            <th v-if="selectable && showSelectAll" class="g-table-select-column">
+                                <BFormCheckbox
+                                    :id="getElementId(props.id, 'select-all')"
+                                    v-b-tooltip.hover.noninteractive
+                                    :checked="allSelected"
+                                    :indeterminate="someSelected"
+                                    title="Select all"
+                                    @change="onSelectAll" />
+                            </th>
+                            <th v-else-if="selectable" class="g-table-select-column"></th>
+
+                            <!-- Field columns -->
+                            <th
+                                v-for="field in props.fields"
+                                :id="getFieldId(props.id, field.key)"
+                                :key="field.key"
+                                :class="[
+                                    field.headerClass,
+                                    getAlignmentClass(field.align),
+                                    { 'g-table-sortable': field.sortable },
+                                    { 'g-table-sorted': localSortBy === field.key },
+                                    { 'hide-on-small': field.hideOnSmall },
+                                ]"
+                                :style="field.width ? { width: field.width } : undefined"
+                                @click="onHeaderClick(field)">
+                                <div class="d-flex align-items-center justify-content-between">
+                                    <slot :name="`head(${field.key})`" :field="field">
+                                        <span>{{ field.label || field.key }}</span>
+                                    </slot>
+                                    <FontAwesomeIcon
+                                        v-if="field.sortable && getSortIcon(field)"
+                                        :icon="getSortIcon(field)"
+                                        :class="{ 'text-muted': localSortBy !== field.key }"
+                                        class="ml-1" />
+                                </div>
+                            </th>
+
+                            <!-- Actions column header (if slot provided) -->
+                            <th v-if="$slots.actions || $scopedSlots.actions" class="g-table-actions-column">
+                                <slot name="head(actions)">Actions</slot>
+                            </th>
+                        </tr>
+                    </thead>
+
+                    <tbody v-if="sortedItems.length > 0">
+                        <tr
+                            v-for="(item, index) in sortedItems"
+                            :id="getRowId(props.id, index)"
+                            :key="index"
+                            :class="{
+                                'g-table-row-clickable': clickableRows,
+                                'g-table-row-selected': isRowSelected(index),
+                            }"
+                            @click="onRowClick(item, index, $event)">
+                            <!-- Selection checkbox column -->
+                            <td v-if="selectable" class="g-table-select-column">
+                                <BFormCheckbox
+                                    :id="`${getRowId(props.id, index)}-select`"
+                                    v-b-tooltip.hover.noninteractive
+                                    :checked="isRowSelected(index)"
+                                    title="Select row"
+                                    @click.stop
+                                    @change="onRowSelect(item, index)" />
+                            </td>
+
+                            <!-- Data columns -->
+                            <td
+                                v-for="field in props.fields"
+                                :id="getCellId(props.id, field.key, index)"
+                                :key="field.key"
+                                :class="[
+                                    field.cellClass,
+                                    field.class,
+                                    getAlignmentClass(field.align),
+                                    { 'hide-on-small': field.hideOnSmall },
+                                ]">
+                                <slot :name="`cell(${field.key})`" :value="item[field.key]" :item="item" :index="index">
+                                    <!-- eslint-disable-next-line vue/no-v-html -->
+                                    <span v-if="field.html" v-html="getCellValue(item, field)"></span>
+                                    <span v-else>{{ getCellValue(item, field) }}</span>
                                 </slot>
-                                <FontAwesomeIcon
-                                    v-if="field.sortable && getSortIcon(field)"
-                                    :icon="getSortIcon(field)"
-                                    :class="{ 'text-muted': localSortBy !== field.key }"
-                                    class="ml-1" />
-                            </div>
-                        </th>
-                    </tr>
-                </thead>
-
-                <tbody v-if="!loading && sortedItems.length > 0">
-                    <tr
-                        v-for="(item, index) in sortedItems"
-                        :id="getRowId(props.id, index)"
-                        :key="index"
-                        :class="{
-                            'g-table-row-clickable': clickableRows,
-                            'g-table-row-selected': isRowSelected(index),
-                        }"
-                        @click="onRowClick(item, index, $event)">
-                        <!-- Selection checkbox column -->
-                        <td v-if="selectable" class="g-table-select-column">
-                            <BFormCheckbox
-                                :id="`${getRowId(props.id, index)}-select`"
-                                v-b-tooltip.hover.noninteractive
-                                :checked="isRowSelected(index)"
-                                title="Select row"
-                                @click.stop
-                                @change="onRowSelect(item, index)" />
-                        </td>
-
-                        <!-- Data columns -->
-                        <td
-                            v-for="field in props.fields"
-                            :id="getCellId(props.id, field.key, index)"
-                            :key="field.key"
-                            :class="[
-                                field.cellClass,
-                                field.class,
-                                getAlignmentClass(field.align),
-                                { 'hide-on-small': field.hideOnSmall },
-                            ]">
-                            <slot :name="`cell(${field.key})`" :value="item[field.key]" :item="item" :index="index">
-                                <!-- eslint-disable-next-line vue/no-v-html -->
-                                <span v-if="field.html" v-html="getCellValue(item, field)"></span>
-                                <span v-else>{{ getCellValue(item, field) }}</span>
-                            </slot>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-
-            <!-- Loading state -->
-            <div v-if="loading" class="g-table-loading text-center py-4">
-                <LoadingSpan :message="props.loadingMessage" />
-            </div>
-
-            <!-- Empty state -->
-            <div
-                v-else-if="sortedItems.length === 0"
-                class="g-table-empty text-center py-4"
-                :class="props.emptyState.variant ? `text-${props.emptyState.variant}` : ''">
-                <slot name="empty">
-                    <BAlert :variant="props.emptyState.variant || 'info'" show>
-                        <FontAwesomeIcon v-if="props.emptyState.icon" :icon="props.emptyState.icon" class="mr-2" />
-                        {{ localize(props.emptyState.message) }}
-                    </BAlert>
-                </slot>
+                            </td>
+
+                            <!-- Actions column -->
+                            <td v-if="$slots.actions || $scopedSlots.actions" class="g-table-actions-column">
+                                <slot name="actions" :item="item" :index="index"></slot>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                <!-- Load more loading indicator -->
+                <div v-if="loadMoreLoading && sortedItems.length > 0" class="g-table-load-more py-3 text-center">
+                    <LoadingSpan :message="props.loadMoreMessage" />
+                </div>
             </div>
-        </div>
+        </BOverlay>
     </div>
 </template>
 
@@ -455,6 +471,11 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
     width: 100%;
 }
 
+.g-table-wrapper-overlay {
+    position: relative;
+    width: 100%;
+}
+
 .g-table-wrapper {
     position: relative;
     width: 100%;
@@ -513,6 +534,11 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
         text-align: center;
     }
 
+    .g-table-actions-column {
+        width: 60px;
+        text-align: center;
+    }
+
     @media (max-width: $breakpoint-sm) {
         .hide-on-small {
             display: none;
@@ -527,4 +553,8 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
     align-items: center;
     justify-content: center;
 }
+
+.g-table-load-more {
+    border-top: 1px solid $brand-secondary;
+}
 </style>

From 9176cbb63b8ec8852f146e3f9588d1840f15aee4 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 21 Jan 2026 17:51:16 +0100
Subject: [PATCH 05/39] Add deleteDataset with optional purge flag

Refactors dataset deletion to support both soft delete and purge
via a configurable deleteDataset function. Keeps purgeDataset as a
wrapper for backward compatibility while enabling non-purge deletes
through the same API call.
---
 client/src/api/datasets.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/src/api/datasets.ts b/client/src/api/datasets.ts
index e25abfbfe89d..d4cdd3f08238 100644
--- a/client/src/api/datasets.ts
+++ b/client/src/api/datasets.ts
@@ -56,11 +56,11 @@ export async function undeleteDataset(datasetId: string) {
     return data;
 }
 
-export async function purgeDataset(datasetId: string) {
+export async function deleteDataset(datasetId: string, purge: boolean = false) {
     const { data, error } = await GalaxyApi().DELETE("/api/datasets/{dataset_id}", {
         params: {
             path: { dataset_id: datasetId },
-            query: { purge: true },
+            query: { purge },
         },
     });
     if (error) {
@@ -69,6 +69,10 @@ export async function purgeDataset(datasetId: string) {
     return data;
 }
 
+export async function purgeDataset(datasetId: string) {
+    return deleteDataset(datasetId, true);
+}
+
 type CopyDatasetParamsType = GalaxyApiPaths["/api/histories/{history_id}/contents/{type}s"]["post"]["parameters"];
 type CopyDatasetBodyType = components["schemas"]["CreateHistoryContentPayload"];
 

From 0f1d30c9a5be1f35563a129739b926436e548dd4 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 21 Jan 2026 17:52:13 +0100
Subject: [PATCH 06/39] Add bulk selection, delete actions, and UI controls

Enhance the dataset list with selectable rows, single and bulk delete functionality, and a confirmation modal. Introduce a configurable list header with column visibility, contextual actions, loading states, and improved feedback to make dataset management clearer and more efficient.
---
 client/src/components/Dataset/DatasetList.vue | 400 +++++++++++++++---
 1 file changed, 339 insertions(+), 61 deletions(-)

diff --git a/client/src/components/Dataset/DatasetList.vue b/client/src/components/Dataset/DatasetList.vue
index 1ca904be9cae..a5d8ff9ceed7 100644
--- a/client/src/components/Dataset/DatasetList.vue
+++ b/client/src/components/Dataset/DatasetList.vue
@@ -1,18 +1,21 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
+import { faEllipsisV, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton, BDropdown, BDropdownItem, BFormCheckbox, BModal } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, ref } from "vue";
 
 import { GalaxyApi, type HDASummary } from "@/api";
-import { copyDataset } from "@/api/datasets";
+import { copyDataset, deleteDataset } from "@/api/datasets";
 import { updateTags } from "@/api/tags";
+import { Toast } from "@/composables/toast";
 import { useHistoryStore } from "@/stores/historyStore";
 import { rethrowSimple } from "@/utils/simple-error";
 
-import DelayedInput from "@/components/Common/DelayedInput.vue";
 import GTable from "@/components/Common/GTable.vue";
-import DatasetName from "@/components/Dataset/DatasetName.vue";
+import ListHeader from "@/components/Common/ListHeader.vue";
 import SwitchToHistoryLink from "@/components/History/SwitchToHistoryLink.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 import UtcDate from "@/components/UtcDate.vue";
 
@@ -24,11 +27,22 @@ const limit = ref(50);
 const offset = ref(0);
 const message = ref("");
 const loading = ref(true);
+const overlay = ref(false);
+const loadMoreLoading = ref(false);
 const sortDesc = ref(true);
 const sortBy = ref("update_time");
 const rows = ref<HDASummary[]>([]);
 const messageVariant = ref("danger");
-const fields = [
+const listHeader = ref<typeof ListHeader | null>(null);
+const selectedItemIds = ref<string[]>([]);
+const hasMoreItems = ref(true);
+const visibleColumns = ref<string[]>(["name", "tags", "history_id", "extension", "update_time"]);
+const bulkDeleteLoading = ref(false);
+const showDeleteModal = ref(false);
+const deleteModalPurge = ref(false);
+const deleteModalItem = ref<HDASummary | null>(null);
+const deleteModalBulk = ref(false);
+const allFields = [
     {
         key: "name",
         label: "Name",
@@ -54,22 +68,58 @@ const fields = [
         label: "Updated",
         sortable: true,
     },
-    {
-        key: "context",
-        label: "",
-        sortable: false,
-    },
 ];
 
+const fields = computed(() => allFields.filter((field) => visibleColumns.value.includes(field.key)));
+
+const columnOptions = allFields.map((field) => ({ key: field.key, label: field.label }));
+
+const sortOptions = allFields
+    .filter((field) => field.sortable)
+    .map((field) => ({ value: field.key, label: field.label }));
+
 const showNotFound = computed(() => {
     return !loading.value && rows.value.length === 0 && query;
 });
 const showNotAvailable = computed(() => {
     return !loading.value && rows.value.length === 0 && !query.value;
 });
+const allSelected = computed(() => {
+    return rows.value.length > 0 && selectedItemIds.value.length === rows.value.length;
+});
+const indeterminateSelected = computed(() => {
+    return selectedItemIds.value.length > 0 && selectedItemIds.value.length < rows.value.length;
+});
+const selectedIndices = computed(() => {
+    return rows.value
+        .map((row, index) => (selectedItemIds.value.includes(row.id) ? index : -1))
+        .filter((i) => i !== -1);
+});
+const deleteModalTitle = computed(() => {
+    if (deleteModalBulk.value) {
+        return `Delete ${selectedItemIds.value.length} dataset${selectedItemIds.value.length > 1 ? "s" : ""}?`;
+    } else if (deleteModalItem.value) {
+        return `Delete "${deleteModalItem.value.name}"?`;
+    }
+    return "Delete dataset?";
+});
+const deleteModalMessage = computed(() => {
+    if (deleteModalBulk.value) {
+        return `Are you sure you want to delete ${selectedItemIds.value.length} dataset${selectedItemIds.value.length > 1 ? "s" : ""}?`;
+    } else if (deleteModalItem.value) {
+        return `Are you sure you want to delete "${deleteModalItem.value.name}"?`;
+    }
+    return "Are you sure you want to delete this dataset?";
+});
 
-async function load(concat = false) {
-    loading.value = true;
+async function load(concat = false, showOverlay = false) {
+    if (showOverlay) {
+        overlay.value = true;
+    } else if (concat) {
+        loadMoreLoading.value = true;
+    } else {
+        loading.value = true;
+    }
 
     try {
         const { data, error } = await GalaxyApi().GET("/api/datasets", {
@@ -96,10 +146,15 @@ async function load(concat = false) {
         } else {
             rows.value = datasets;
         }
+
+        // Check if there are more items to load
+        hasMoreItems.value = datasets.length === limit.value;
     } catch (error: any) {
         onError(error);
     } finally {
         loading.value = false;
+        overlay.value = false;
+        loadMoreLoading.value = false;
     }
 }
 
@@ -160,7 +215,7 @@ function onSort(event: { sortBy: string; sortDesc: boolean }) {
     sortBy.value = event.sortBy;
     sortDesc.value = event.sortDesc;
 
-    load();
+    load(false, true); // Use overlay loading for sorting
 }
 
 function onScroll(scroll: Event) {
@@ -179,59 +234,282 @@ function onError(msg: string) {
     message.value = msg;
 }
 
+function onSelectAll() {
+    if (allSelected.value) {
+        selectedItemIds.value = [];
+    } else {
+        selectedItemIds.value = rows.value.map((row) => row.id);
+    }
+}
+
+function onRowSelect(event: { item: HDASummary; index: number; selected: boolean }) {
+    const index = selectedItemIds.value.indexOf(event.item.id);
+    if (index > -1) {
+        selectedItemIds.value.splice(index, 1);
+    } else {
+        selectedItemIds.value.push(event.item.id);
+    }
+}
+
+function onToggleColumn(key: string) {
+    const index = visibleColumns.value.indexOf(key);
+    if (index > -1) {
+        // Don't allow hiding all columns or the name column
+        if (visibleColumns.value.length > 1 && key !== "name") {
+            visibleColumns.value.splice(index, 1);
+        }
+    } else {
+        visibleColumns.value.push(key);
+    }
+}
+
+function onSortFromHeader(sortByValue: string, sortDescValue: boolean) {
+    sortBy.value = sortByValue;
+    sortDesc.value = sortDescValue;
+    offset.value = 0;
+    load(false, true); // Use overlay loading for sorting
+}
+
+function onBulkDelete() {
+    deleteModalBulk.value = true;
+    deleteModalItem.value = null;
+    deleteModalPurge.value = false;
+    showDeleteModal.value = true;
+}
+
+function onDeleteDataset(item: HDASummary) {
+    deleteModalBulk.value = false;
+    deleteModalItem.value = item;
+    deleteModalPurge.value = false;
+    showDeleteModal.value = true;
+}
+
+async function confirmDelete() {
+    const purge = deleteModalPurge.value;
+
+    try {
+        overlay.value = true;
+
+        if (deleteModalBulk.value) {
+            // Bulk delete
+            const totalSelected = selectedItemIds.value.length;
+            const tmpSelected = [...selectedItemIds.value];
+            bulkDeleteLoading.value = true;
+
+            for (const id of selectedItemIds.value) {
+                await deleteDataset(id, purge);
+
+                tmpSelected.splice(
+                    tmpSelected.findIndex((s) => s === id),
+                    1,
+                );
+            }
+
+            Toast.success(
+                `${purge ? "Permanently deleted" : "Deleted"} ${totalSelected} dataset${totalSelected > 1 ? "s" : ""}.`,
+            );
+
+            selectedItemIds.value = [];
+            bulkDeleteLoading.value = false;
+        } else if (deleteModalItem.value) {
+            // Single delete
+            await deleteDataset(deleteModalItem.value.id, purge);
+            Toast.success(`${purge ? "Permanently deleted" : "Deleted"} dataset "${deleteModalItem.value.name}".`);
+        }
+
+        await load(true);
+    } catch (error: any) {
+        Toast.error(`Failed to delete dataset${deleteModalBulk.value ? "s" : ""}.`);
+        onError(error);
+    } finally {
+        overlay.value = false;
+        showDeleteModal.value = false;
+        deleteModalPurge.value = false;
+        deleteModalItem.value = null;
+        deleteModalBulk.value = false;
+    }
+}
+
+function resetDeleteModal() {
+    deleteModalPurge.value = false;
+}
+
 onMounted(() => {
     load();
 });
 </script>
 
 <template>
-    <div class="overflow-auto h-100" @scroll="onScroll">
-        <BAlert v-if="message" :variant="messageVariant" show>
-            {{ message }}
-        </BAlert>
-
-        <DelayedInput class="m-1 mb-3" placeholder="Search Datasets" @change="onQuery" />
-
-        <GTable
-            id="dataset-table"
-            striped
-            no-sort-reset
-            no-local-sorting
-            :fields="fields"
-            :items="rows"
-            :sort-by="sortBy"
-            :sort-desc="sortDesc"
-            :loading="loading"
-            loading-message="Loading datasets"
-            :empty-state="{
-                message: showNotFound
-                    ? `No matching entries found for: ${query}`
-                    : showNotAvailable
-                      ? 'No datasets found.'
-                      : 'Loading...',
-                variant: 'info',
-            }"
-            @sort-changed="onSort">
-            <template v-slot:cell(name)="row">
-                <DatasetName :item="row.item" @showDataset="onShowDataset" @copyDataset="onCopyDataset" />
-            </template>
-
-            <template v-slot:cell(history_id)="row">
-                <SwitchToHistoryLink
-                    :history-id="row.item.history_id"
-                    :filters="{ deleted: row.item.deleted, visible: row.item.visible, hid: row.item.hid }" />
-            </template>
-
-            <template v-slot:cell(tags)="row">
-                <StatelessTags
-                    :value="row.item.tags"
-                    :disabled="row.item.deleted"
-                    @input="(tags) => onTags(tags, row.index)" />
-            </template>
-
-            <template v-slot:cell(update_time)="data">
-                <UtcDate :date="data.value" mode="elapsed" />
-            </template>
-        </GTable>
+    <div class="dataset-list-container h-100 d-flex flex-column">
+        <div class="dataset-list-header">
+            <BAlert v-if="message" :variant="messageVariant" show class="m-2">
+                {{ message }}
+            </BAlert>
+
+            <DelayedInput class="m-2 mb-3" placeholder="Search Datasets" @change="onQuery" />
+
+            <ListHeader
+                ref="listHeader"
+                list-id="datasets"
+                show-sort-options
+                :show-select-all="true"
+                :select-all-disabled="loading || rows.length === 0"
+                :all-selected="allSelected"
+                :indeterminate-selected="indeterminateSelected"
+                :column-options="columnOptions"
+                :visible-columns="visibleColumns"
+                :sort-options="sortOptions"
+                @select-all="onSelectAll"
+                @toggle-column="onToggleColumn"
+                @sort-changed="onSortFromHeader" />
+        </div>
+
+        <div v-if="loading" class="dataset-list-content">
+            <BAlert variant="info" show>
+                <LoadingSpan message="Loading datasets" />
+            </BAlert>
+        </div>
+        <div v-else-if="showNotAvailable" class="dataset-list-content">
+            <BAlert id="dataset-list-empty" variant="info" show>
+                No datasets found. You may upload new datasets using the button above.
+            </BAlert>
+        </div>
+        <div v-else-if="showNotFound" class="dataset-list-content">
+            <BAlert id="no-dataset-found" variant="info" show>
+                No matching entries found for: <span class="font-weight-bold">{{ query }}</span>
+            </BAlert>
+        </div>
+        <div v-else class="dataset-list-content overflow-auto" @scroll="onScroll">
+            <GTable
+                id="dataset-table"
+                striped
+                selectable
+                show-select-all
+                no-sort-reset
+                no-local-sorting
+                :fields="fields"
+                :items="rows"
+                :sort-by="sortBy"
+                :sort-desc="sortDesc"
+                :overlay-loading="overlay"
+                :load-more-loading="loadMoreLoading"
+                :selected-items="selectedIndices"
+                @sort-changed="onSort"
+                @row-select="onRowSelect"
+                @select-all="onSelectAll">
+                <template v-slot:cell(name)="row">
+                    <span>{{ row.item.name }}</span>
+                </template>
+
+                <template v-slot:cell(history_id)="row">
+                    <SwitchToHistoryLink
+                        :history-id="row.item.history_id"
+                        :filters="{
+                            deleted: row.item.deleted,
+                            visible: row.item.visible,
+                            hid: String(row.item.hid),
+                        }" />
+                </template>
+
+                <template v-slot:cell(tags)="row">
+                    <StatelessTags
+                        :value="row.item.tags"
+                        :disabled="row.item.deleted"
+                        @input="(tags) => onTags(tags, row.index)" />
+                </template>
+
+                <template v-slot:cell(update_time)="data">
+                    <UtcDate :date="data.value" mode="elapsed" />
+                </template>
+
+                <template v-slot:actions="{ item }">
+                    <BDropdown
+                        no-caret
+                        right
+                        variant="link"
+                        size="sm"
+                        toggle-class="text-decoration-none p-0"
+                        @click.stop>
+                        <template v-slot:button-content>
+                            <FontAwesomeIcon :icon="faEllipsisV" />
+                        </template>
+                        <BDropdownItem @click="onCopyDataset(item)">Copy to current history</BDropdownItem>
+                        <BDropdownItem @click="onShowDataset(item)">Show in history</BDropdownItem>
+                        <BDropdownItem @click="onDeleteDataset(item)">Delete</BDropdownItem>
+                    </BDropdown>
+                </template>
+            </GTable>
+
+            <!-- End of list indicator -->
+            <div v-if="!loadMoreLoading && rows.length > 0 && !hasMoreItems" class="text-center py-3 text-muted">
+                - End of list -
+            </div>
+        </div>
+
+        <!-- Bulk actions footer -->
+        <div v-if="selectedItemIds.length > 0" class="dataset-list-footer d-flex mt-1 align-items-center">
+            <div class="d-flex gap-1">
+                <BButton
+                    id="dataset-list-footer-bulk-delete-button"
+                    v-b-tooltip.hover
+                    :title="bulkDeleteLoading ? 'Deleting datasets' : 'Delete selected datasets'"
+                    :disabled="bulkDeleteLoading"
+                    size="sm"
+                    variant="primary"
+                    @click="onBulkDelete">
+                    <span v-if="!bulkDeleteLoading">
+                        <FontAwesomeIcon :icon="faTrash" fixed-width />
+                        Delete ({{ selectedItemIds.length }})
+                    </span>
+                    <LoadingSpan v-else message="Deleting" />
+                </BButton>
+            </div>
+        </div>
+
+        <!-- Delete confirmation modal -->
+        <BModal
+            v-model="showDeleteModal"
+            :title="deleteModalTitle"
+            title-tag="h2"
+            ok-title="Delete"
+            ok-variant="danger"
+            cancel-title="Cancel"
+            cancel-variant="outline-primary"
+            centered
+            @show="resetDeleteModal"
+            @ok="confirmDelete">
+            <p>{{ deleteModalMessage }}</p>
+            <BFormCheckbox id="purge-checkbox" v-model="deleteModalPurge">
+                Permanently delete (cannot be recovered)
+            </BFormCheckbox>
+        </BModal>
     </div>
 </template>
+
+<style scoped lang="scss">
+.dataset-list-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.dataset-list-header {
+    flex-shrink: 0;
+}
+
+.dataset-list-content {
+    flex: 1;
+    overflow-y: auto;
+}
+
+.dataset-list-footer {
+    flex-shrink: 0;
+    padding: 0.5rem 1rem;
+    background-color: #f8f9fa;
+    border-top: 1px solid #dee2e6;
+}
+
+.gap-1 {
+    gap: 0.25rem;
+}
+</style>

From fb8c5a9033fa0b694535a94ccdd331c31a73924e Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 23 Jan 2026 13:51:27 +0100
Subject: [PATCH 07/39] Replace GTable custom styles with utilities

Refactor GTable layout to rely on Bootstrap utility classes instead of
custom CSS, simplifying markup and styles while preserving behavior.
Remove unused container and wrapper styles, adjust table classes for
full-width rendering, and clean up selection header markup.

Also clean up DatasetList by removing an unused ListHeader ref and
adding DelayedInput for improved dataset search handling.
---
 client/src/components/Common/GTable.vue       | 41 ++++---------------
 client/src/components/Dataset/DatasetList.vue |  3 +-
 2 files changed, 10 insertions(+), 34 deletions(-)

diff --git a/client/src/components/Common/GTable.vue b/client/src/components/Common/GTable.vue
index 90268af47de1..ac8257ffac33 100644
--- a/client/src/components/Common/GTable.vue
+++ b/client/src/components/Common/GTable.vue
@@ -340,7 +340,7 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
 </script>
 
 <template>
-    <div :id="`g-table-container-${props.id}`" class="g-table-container" :class="containerClass">
+    <div :id="`g-table-container-${props.id}`" class="w-100" :class="containerClass">
         <!-- Actions toolbar -->
         <div v-if="props.actions.length > 0" :id="getElementId(props.id, 'actions')" class="g-table-actions mb-2">
             <slot name="actions">
@@ -349,11 +349,11 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
         </div>
 
         <!-- Table wrapper -->
-        <BOverlay :show="overlayLoading" rounded="sm" class="g-table-wrapper-overlay">
-            <div :id="`g-table-wrapper-${props.id}`" class="g-table-wrapper">
+        <BOverlay :show="overlayLoading" rounded="sm" class="position-relative w-100">
+            <div :id="`g-table-wrapper-${props.id}`" class="position-relative w-100">
                 <table
                     :id="`g-table-${props.id}`"
-                    class="g-table table"
+                    class="g-table table w-100 mb-0"
                     :class="[
                         { 'table-striped': striped },
                         { 'table-hover': hover },
@@ -363,7 +363,7 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
                     <thead>
                         <tr>
                             <!-- Select all checkbox column -->
-                            <th v-if="selectable && showSelectAll" class="g-table-select-column">
+                            <!-- <th v-if="selectable && showSelectAll" class="g-table-select-column">
                                 <BFormCheckbox
                                     :id="getElementId(props.id, 'select-all')"
                                     v-b-tooltip.hover.noninteractive
@@ -371,8 +371,9 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
                                     :indeterminate="someSelected"
                                     title="Select all"
                                     @change="onSelectAll" />
-                            </th>
-                            <th v-else-if="selectable" class="g-table-select-column"></th>
+                            </th> -->
+                            <!-- <th v-else-if="selectable" class="g-table-select-column"></th> -->
+                            <th lass="g-table-select-column"></th>
 
                             <!-- Field columns -->
                             <th
@@ -467,24 +468,8 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
 @import "@/style/scss/theme/blue.scss";
 @import "@/style/scss/_breakpoints.scss";
 
-.g-table-container {
-    width: 100%;
-}
-
-.g-table-wrapper-overlay {
-    position: relative;
-    width: 100%;
-}
-
-.g-table-wrapper {
-    position: relative;
-    width: 100%;
-}
-
+// Essential custom styles that cannot be replaced with utility classes
 .g-table {
-    width: 100%;
-    margin-bottom: 0;
-
     thead th {
         position: sticky;
         top: 0;
@@ -546,14 +531,6 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
     }
 }
 
-.g-table-loading,
-.g-table-empty {
-    min-height: 200px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
 .g-table-load-more {
     border-top: 1px solid $brand-secondary;
 }
diff --git a/client/src/components/Dataset/DatasetList.vue b/client/src/components/Dataset/DatasetList.vue
index a5d8ff9ceed7..36edf9712994 100644
--- a/client/src/components/Dataset/DatasetList.vue
+++ b/client/src/components/Dataset/DatasetList.vue
@@ -12,6 +12,7 @@ import { Toast } from "@/composables/toast";
 import { useHistoryStore } from "@/stores/historyStore";
 import { rethrowSimple } from "@/utils/simple-error";
 
+import DelayedInput from "@/components/Common/DelayedInput.vue";
 import GTable from "@/components/Common/GTable.vue";
 import ListHeader from "@/components/Common/ListHeader.vue";
 import SwitchToHistoryLink from "@/components/History/SwitchToHistoryLink.vue";
@@ -33,7 +34,6 @@ const sortDesc = ref(true);
 const sortBy = ref("update_time");
 const rows = ref<HDASummary[]>([]);
 const messageVariant = ref("danger");
-const listHeader = ref<typeof ListHeader | null>(null);
 const selectedItemIds = ref<string[]>([]);
 const hasMoreItems = ref(true);
 const visibleColumns = ref<string[]>(["name", "tags", "history_id", "extension", "update_time"]);
@@ -349,7 +349,6 @@ onMounted(() => {
             <DelayedInput class="m-2 mb-3" placeholder="Search Datasets" @change="onQuery" />
 
             <ListHeader
-                ref="listHeader"
                 list-id="datasets"
                 show-sort-options
                 :show-select-all="true"

From 70c9bd245c8178b0f66ebf20b5526f10d2a5acc4 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 23 Jan 2026 13:57:07 +0100
Subject: [PATCH 08/39] Refactor actions and selection slots in GTable

Update GTable to use explicit slots and props for actions and selection,
removing the legacy actions toolbar and scoped slot checks. Introduce a
dedicated head-select slot, adjust actions header naming, and clarify row
selection tooltip text to better support bulk
---
 client/src/components/Common/GTable.vue | 73 +++++++++++++++----------
 1 file changed, 44 insertions(+), 29 deletions(-)

diff --git a/client/src/components/Common/GTable.vue b/client/src/components/Common/GTable.vue
index ac8257ffac33..ba4a525b13cc 100644
--- a/client/src/components/Common/GTable.vue
+++ b/client/src/components/Common/GTable.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
-import { faSort, faSortDown, faSortUp } from "@fortawesome/free-solid-svg-icons";
+import { faCaretDown, faSort, faSortDown, faSortUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BFormCheckbox, BOverlay } from "bootstrap-vue";
+import { BDropdown, BDropdownItem, BFormCheckbox, BOverlay } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import { useUid } from "@/composables/utils/uid";
@@ -341,13 +341,6 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
 
 <template>
     <div :id="`g-table-container-${props.id}`" class="w-100" :class="containerClass">
-        <!-- Actions toolbar -->
-        <div v-if="props.actions.length > 0" :id="getElementId(props.id, 'actions')" class="g-table-actions mb-2">
-            <slot name="actions">
-                <!-- Custom actions can be added here -->
-            </slot>
-        </div>
-
         <!-- Table wrapper -->
         <BOverlay :show="overlayLoading" rounded="sm" class="position-relative w-100">
             <div :id="`g-table-wrapper-${props.id}`" class="position-relative w-100">
@@ -362,18 +355,9 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
                     ]">
                     <thead>
                         <tr>
-                            <!-- Select all checkbox column -->
-                            <!-- <th v-if="selectable && showSelectAll" class="g-table-select-column">
-                                <BFormCheckbox
-                                    :id="getElementId(props.id, 'select-all')"
-                                    v-b-tooltip.hover.noninteractive
-                                    :checked="allSelected"
-                                    :indeterminate="someSelected"
-                                    title="Select all"
-                                    @change="onSelectAll" />
-                            </th> -->
-                            <!-- <th v-else-if="selectable" class="g-table-select-column"></th> -->
-                            <th lass="g-table-select-column"></th>
+                            <th v-if="selectable" class="g-table-select-column">
+                                <slot name="head-select" />
+                            </th>
 
                             <!-- Field columns -->
                             <th
@@ -401,9 +385,8 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
                                 </div>
                             </th>
 
-                            <!-- Actions column header (if slot provided) -->
-                            <th v-if="$slots.actions || $scopedSlots.actions" class="g-table-actions-column">
-                                <slot name="head(actions)">Actions</slot>
+                            <th v-if="props.actions" class="g-table-actions-column">
+                                <slot name="head-actions">Actions</slot>
                             </th>
                         </tr>
                     </thead>
@@ -424,7 +407,7 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
                                     :id="`${getRowId(props.id, index)}-select`"
                                     v-b-tooltip.hover.noninteractive
                                     :checked="isRowSelected(index)"
-                                    title="Select row"
+                                    title="Select for bulk actions"
                                     @click.stop
                                     @change="onRowSelect(item, index)" />
                             </td>
@@ -441,15 +424,45 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
                                     { 'hide-on-small': field.hideOnSmall },
                                 ]">
                                 <slot :name="`cell(${field.key})`" :value="item[field.key]" :item="item" :index="index">
-                                    <!-- eslint-disable-next-line vue/no-v-html -->
-                                    <span v-if="field.html" v-html="getCellValue(item, field)"></span>
+                                    <span v-if="field.html" v-html="getCellValue(item, field)" />
                                     <span v-else>{{ getCellValue(item, field) }}</span>
                                 </slot>
                             </td>
 
                             <!-- Actions column -->
-                            <td v-if="$slots.actions || $scopedSlots.actions" class="g-table-actions-column">
-                                <slot name="actions" :item="item" :index="index"></slot>
+                            <td v-if="props.actions" class="g-table-actions-column">
+                                <slot name="actions" :item="item" :index="index">
+                                    <BDropdown
+                                        v-b-tooltip.hover.noninteractive
+                                        no-caret
+                                        right
+                                        title="More actions"
+                                        variant="link"
+                                        size="sm"
+                                        toggle-class="text-decoration-none p-0"
+                                        @click.stop>
+                                        <template v-slot:button-content>
+                                            <FontAwesomeIcon :icon="faCaretDown" />
+                                        </template>
+
+                                        <template v-for="ac in props.actions">
+                                            <BDropdownItem
+                                                v-if="ac.visible ?? true"
+                                                :id="ac.id"
+                                                :key="ac.id"
+                                                :disabled="ac.disabled"
+                                                :size="ac.size || 'sm'"
+                                                :variant="ac.variant || 'link'"
+                                                :to="ac.to"
+                                                :href="ac.href"
+                                                :target="ac.externalLink ? '_blank' : undefined"
+                                                @click.stop="ac.handler && ac.handler(item, index)">
+                                                <FontAwesomeIcon v-if="ac.icon" :icon="ac.icon" fixed-width />
+                                                {{ ac.label }}
+                                            </BDropdownItem>
+                                        </template>
+                                    </BDropdown>
+                                </slot>
                             </td>
                         </tr>
                     </tbody>
@@ -503,6 +516,8 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
                 }
             }
 
+            box-shadow: inset 0 -1px 0 0 rgba($brand-primary, 0.2);
+
             &.g-table-row-selected {
                 background-color: $brand-light;
             }

From 8f733ee1899da933983577ee57c72bdbb50c0c29 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 23 Jan 2026 13:58:20 +0100
Subject: [PATCH 09/39] Move row actions to GTable and add link navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refactor the dataset list to use GTable’s actions API instead of a custom dropdown, adding copy, show, and delete actions with icons. Make dataset names clickable links to show them in the history panel and simplify footer styling for better consistency and usability.
---
 client/src/components/Dataset/DatasetList.vue | 57 ++++++++++++-------
 1 file changed, 36 insertions(+), 21 deletions(-)

diff --git a/client/src/components/Dataset/DatasetList.vue b/client/src/components/Dataset/DatasetList.vue
index 36edf9712994..cc85023ae39c 100644
--- a/client/src/components/Dataset/DatasetList.vue
+++ b/client/src/components/Dataset/DatasetList.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import { faEllipsisV, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faCopy, faEye, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BDropdown, BDropdownItem, BFormCheckbox, BModal } from "bootstrap-vue";
+import { BAlert, BButton, BFormCheckbox, BLink, BModal } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, ref } from "vue";
 
 import { GalaxyApi, type HDASummary } from "@/api";
 import { copyDataset, deleteDataset } from "@/api/datasets";
 import { updateTags } from "@/api/tags";
+import type { TableAction } from "@/components/Common/GTable.types";
 import { Toast } from "@/composables/toast";
 import { useHistoryStore } from "@/stores/historyStore";
+import localize from "@/utils/localization";
 import { rethrowSimple } from "@/utils/simple-error";
 
 import DelayedInput from "@/components/Common/DelayedInput.vue";
@@ -330,6 +332,30 @@ async function confirmDelete() {
     }
 }
 
+const datasetTableActions: TableAction[] = [
+    {
+        id: "copy-dataset",
+        label: "Copy to current history",
+        title: "Copy Dataset to current history",
+        icon: faCopy,
+        handler: onCopyDataset,
+    },
+    {
+        id: "show-dataset",
+        label: "Show in history",
+        title: "Show dataset in history panel",
+        icon: faEye,
+        handler: onShowDataset,
+    },
+    {
+        id: "delete-dataset",
+        label: "Delete",
+        title: "Delete dataset",
+        icon: faTrash,
+        handler: onDeleteDataset,
+    },
+];
+
 function resetDeleteModal() {
     deleteModalPurge.value = false;
 }
@@ -393,11 +419,17 @@ onMounted(() => {
                 :overlay-loading="overlay"
                 :load-more-loading="loadMoreLoading"
                 :selected-items="selectedIndices"
+                :actions="datasetTableActions"
                 @sort-changed="onSort"
                 @row-select="onRowSelect"
                 @select-all="onSelectAll">
                 <template v-slot:cell(name)="row">
-                    <span>{{ row.item.name }}</span>
+                    <BLink
+                        v-b-tooltip.hover.noninteractive
+                        :title="localize('Show dataset in history panel')"
+                        @click.stop.prevent="onShowDataset(row.item)">
+                        {{ row.item.name }}
+                    </BLink>
                 </template>
 
                 <template v-slot:cell(history_id)="row">
@@ -420,23 +452,6 @@ onMounted(() => {
                 <template v-slot:cell(update_time)="data">
                     <UtcDate :date="data.value" mode="elapsed" />
                 </template>
-
-                <template v-slot:actions="{ item }">
-                    <BDropdown
-                        no-caret
-                        right
-                        variant="link"
-                        size="sm"
-                        toggle-class="text-decoration-none p-0"
-                        @click.stop>
-                        <template v-slot:button-content>
-                            <FontAwesomeIcon :icon="faEllipsisV" />
-                        </template>
-                        <BDropdownItem @click="onCopyDataset(item)">Copy to current history</BDropdownItem>
-                        <BDropdownItem @click="onShowDataset(item)">Show in history</BDropdownItem>
-                        <BDropdownItem @click="onDeleteDataset(item)">Delete</BDropdownItem>
-                    </BDropdown>
-                </template>
             </GTable>
 
             <!-- End of list indicator -->
@@ -446,7 +461,7 @@ onMounted(() => {
         </div>
 
         <!-- Bulk actions footer -->
-        <div v-if="selectedItemIds.length > 0" class="dataset-list-footer d-flex mt-1 align-items-center">
+        <div v-if="selectedItemIds.length > 0" class="d-flex mt-1 align-items-center">
             <div class="d-flex gap-1">
                 <BButton
                     id="dataset-list-footer-bulk-delete-button"

From b3def845ce1eb98381942ac95e4f676e6804b071 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 23 Jan 2026 13:58:46 +0100
Subject: [PATCH 10/39] Extend TableAction with link props and context

Add size, routing, and link-related properties to TableAction and update the handler signature to receive item and index. This enables richer
actions (navigation, external links, sizing) and provides more context to action handlers, at the cost of a breaking type change.
---
 client/src/components/Common/GTable.types.ts | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Common/GTable.types.ts b/client/src/components/Common/GTable.types.ts
index 311d506108fb..a65a392e3273 100644
--- a/client/src/components/Common/GTable.types.ts
+++ b/client/src/components/Common/GTable.types.ts
@@ -81,8 +81,18 @@ export interface TableAction {
     disabled?: boolean;
     /** Whether the action is visible */
     visible?: boolean;
+    /** Bootstrap component size */
+    size?: BootstrapSize;
+    /** Vue Router route to navigate to */
+    to?: string;
+    /** Hyperlink reference */
+    href?: string;
+    /** Link target attribute */
+    target?: string;
+    /** Whether link opens in new tab/window */
+    externalLink?: boolean;
     /** Click handler function */
-    handler?: () => void;
+    handler?: (item: any, index: number) => void;
 }
 
 /** Empty state configuration */

From 6936c10d4f0b0de0414c4f2db75de1956867e668 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 23 Jan 2026 13:59:34 +0100
Subject: [PATCH 11/39] Remove unused dataset name component

Deletes the DatasetName Vue component and its associated test file as they are no longer used in the codebase.
---
 .../components/Dataset/DatasetName.test.ts    | 52 -------------
 client/src/components/Dataset/DatasetName.vue | 75 -------------------
 2 files changed, 127 deletions(-)
 delete mode 100644 client/src/components/Dataset/DatasetName.test.ts
 delete mode 100644 client/src/components/Dataset/DatasetName.vue

diff --git a/client/src/components/Dataset/DatasetName.test.ts b/client/src/components/Dataset/DatasetName.test.ts
deleted file mode 100644
index 1e83aaec2c6b..000000000000
--- a/client/src/components/Dataset/DatasetName.test.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { getLocalVue } from "@tests/vitest/helpers";
-import { shallowMount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-
-import DatasetName from "./DatasetName.vue";
-
-const localVue = getLocalVue();
-
-async function mountComponent(propsData: { item: { name: string; state: string } }) {
-    return shallowMount(DatasetName as object, {
-        propsData,
-        localVue,
-    });
-}
-
-describe("Dataset Name", () => {
-    it("test dataset default", async () => {
-        const wrapper = await mountComponent({ item: { name: "name", state: "success" } });
-
-        const state = wrapper.findAll(".name");
-        expect(state.length).toBe(1);
-        expect(state.at(0).text()).toBe("name");
-        const $linkCopy = wrapper.find(".dropdown-item:first-child");
-        $linkCopy.trigger("click");
-
-        expect(Array.isArray(wrapper.emitted().copyDataset)).toBe(true);
-    });
-
-    it("test dataset error", async () => {
-        const wrapper = await mountComponent({ item: { name: "name", state: "error" } });
-
-        const state = wrapper.findAll(".name");
-        expect(state.length).toBe(1);
-        expect(state.at(0).text()).toBe("name");
-
-        const errorstate = wrapper.findAll(".error");
-        expect(errorstate.length).toBe(1);
-        expect(errorstate.at(0).classes()).toEqual(expect.arrayContaining(["text-danger"]));
-    });
-
-    it("test dataset paused", async () => {
-        const wrapper = await mountComponent({ item: { name: "name", state: "paused" } });
-
-        const state = wrapper.findAll(".name");
-        expect(state.length).toBe(1);
-        expect(state.at(0).text()).toBe("name");
-
-        const pausestate = wrapper.findAll(".pause");
-        expect(pausestate.length).toBe(1);
-        expect(pausestate.at(0).classes()).toEqual(expect.arrayContaining(["text-info"]));
-    });
-});
diff --git a/client/src/components/Dataset/DatasetName.vue b/client/src/components/Dataset/DatasetName.vue
deleted file mode 100644
index 6fcfbbca3951..000000000000
--- a/client/src/components/Dataset/DatasetName.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<script setup lang="ts">
-import { faCaretDown, faCopy, faPause, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BLink } from "bootstrap-vue";
-import { computed } from "vue";
-
-import type { HDASummary } from "@/api";
-
-interface Props {
-    item: HDASummary;
-}
-
-const props = defineProps<Props>();
-
-const emit = defineEmits<{
-    (e: "copyDataset", item: Props["item"]): void;
-    (e: "showDataset", item: Props["item"]): void;
-}>();
-
-const getName = computed(() => {
-    return props.item.name || "Unavailable";
-});
-const isError = computed(() => {
-    return props.item.state === "error";
-});
-const isPaused = computed(() => {
-    return props.item.state === "paused";
-});
-
-function copyDataset() {
-    emit("copyDataset", props.item);
-}
-</script>
-
-<template>
-    <div>
-        <BLink
-            id="dataset-dropdown"
-            class="workflow-dropdown p-2"
-            data-toggle="dropdown"
-            aria-haspopup="true"
-            aria-expanded="false">
-            <FontAwesomeIcon
-                v-if="isError"
-                v-b-tooltip.hover
-                :icon="faTimesCircle"
-                class="dataset-icon error text-danger"
-                title="An error occurred for this dataset." />
-            <FontAwesomeIcon
-                v-else-if="isPaused"
-                v-b-tooltip.hover
-                :icon="faPause"
-                class="dataset-icon pause text-info"
-                title="The creation of this dataset has been paused." />
-            <FontAwesomeIcon v-else :icon="faCaretDown" class="dataset-icon" />
-
-            <span class="name">{{ getName }}</span>
-        </BLink>
-
-        <div class="dropdown-menu" aria-labelledby="dataset-dropdown">
-            <a class="dropdown-item" href="#" @click.prevent="copyDataset">
-                <FontAwesomeIcon :icon="faCopy" class="mr-1" />
-
-                <span>Copy to current History</span>
-            </a>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-.dataset-icon {
-    position: relative;
-    margin-left: -1rem;
-}
-</style>

From f5cccfdee0046239aeaa78493e3af9b721173948 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 23 Jan 2026 14:30:46 +0100
Subject: [PATCH 12/39] Refactor GTable sorting state and sort event API

Refactor GTable local sorting to use clearer sortBy/sortDesc
state with sensible defaults. Simplify the sort-changed event
signature to emit primitive values instead of an object, and
update all sorting logic and UI bindings to align with the new
state for more predictable behavior.
---
 client/src/components/Common/GTable.vue | 39 ++++++++++++-------------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/client/src/components/Common/GTable.vue b/client/src/components/Common/GTable.vue
index ba4a525b13cc..a39f2ad25272 100644
--- a/client/src/components/Common/GTable.vue
+++ b/client/src/components/Common/GTable.vue
@@ -168,7 +168,7 @@ const emit = defineEmits<{
     /** Emitted when sort changes
      * @event sort-changed
      */
-    (e: "sort-changed", event: SortChangeEvent): void;
+    (e: "sort-changed", sortBy: string, sortDesc: boolean): void;
 
     /** Emitted when a row is clicked
      * @event row-click
@@ -187,17 +187,17 @@ const emit = defineEmits<{
 }>();
 
 // Internal state for local sorting
-const localSortBy = ref<string | undefined>(props.sortBy);
-const localSortDesc = ref(props.sortDesc);
+const sortBy = ref<string>(props.sortBy || "update_time");
+const sortDesc = ref<boolean>(props.sortDesc || true);
 
 // Computed sorted items
 const sortedItems = computed(() => {
-    if (props.noLocalSorting || !localSortBy.value) {
+    if (props.noLocalSorting || !sortBy.value) {
         return props.items;
     }
 
     const sorted = [...props.items];
-    const sortKey = localSortBy.value;
+    const sortKey = sortBy.value;
 
     sorted.sort((a, b) => {
         const aVal = a[sortKey];
@@ -214,7 +214,7 @@ const sortedItems = computed(() => {
         }
 
         const comparison = aVal < bVal ? -1 : 1;
-        return localSortDesc.value ? -comparison : comparison;
+        return sortDesc.value ? -comparison : comparison;
     });
 
     return sorted;
@@ -238,25 +238,22 @@ function onHeaderClick(field: TableField) {
         return;
     }
 
-    if (localSortBy.value === field.key) {
-        if (!props.noSortReset && localSortDesc.value) {
+    if (sortBy.value === field.key) {
+        if (!props.noSortReset && sortDesc.value) {
             // Reset sort
-            localSortBy.value = undefined;
-            localSortDesc.value = false;
+            sortBy.value = undefined;
+            sortDesc.value = false;
         } else {
             // Toggle sort direction
-            localSortDesc.value = !localSortDesc.value;
+            sortDesc.value = !sortDesc.value;
         }
     } else {
         // New sort field
-        localSortBy.value = field.key;
-        localSortDesc.value = false;
+        sortBy.value = field.key;
+        sortDesc.value = false;
     }
 
-    emit("sort-changed", {
-        sortBy: localSortBy.value || "",
-        sortDesc: localSortDesc.value,
-    });
+    emit("sort-changed", sortBy.value || "", sortDesc.value);
 }
 
 /**
@@ -267,11 +264,11 @@ function getSortIcon(field: TableField) {
         return null;
     }
 
-    if (localSortBy.value !== field.key) {
+    if (sortBy.value !== field.key) {
         return faSort;
     }
 
-    return localSortDesc.value ? faSortDown : faSortUp;
+    return sortDesc.value ? faSortDown : faSortUp;
 }
 
 /**
@@ -368,7 +365,7 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
                                     field.headerClass,
                                     getAlignmentClass(field.align),
                                     { 'g-table-sortable': field.sortable },
-                                    { 'g-table-sorted': localSortBy === field.key },
+                                    { 'g-table-sorted': sortBy === field.key },
                                     { 'hide-on-small': field.hideOnSmall },
                                 ]"
                                 :style="field.width ? { width: field.width } : undefined"
@@ -380,7 +377,7 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
                                     <FontAwesomeIcon
                                         v-if="field.sortable && getSortIcon(field)"
                                         :icon="getSortIcon(field)"
-                                        :class="{ 'text-muted': localSortBy !== field.key }"
+                                        :class="{ 'text-muted': sortBy !== field.key }"
                                         class="ml-1" />
                                 </div>
                             </th>

From ff2f6fa45f693374e32b75faaba7367de8032a0e Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 23 Jan 2026 14:31:20 +0100
Subject: [PATCH 13/39] Remove header sort options and fix query ref usage

Clean up unused sorting logic by removing header sort options and
consolidating sort handling, simplifying the component API. Also fix
a bug where `query` was treated as a plain value instead of a ref to
ensure empty-state logic works correctly.
---
 client/src/components/Dataset/DatasetList.vue | 27 +++++--------------
 1 file changed, 7 insertions(+), 20 deletions(-)

diff --git a/client/src/components/Dataset/DatasetList.vue b/client/src/components/Dataset/DatasetList.vue
index cc85023ae39c..c1a580b689ec 100644
--- a/client/src/components/Dataset/DatasetList.vue
+++ b/client/src/components/Dataset/DatasetList.vue
@@ -44,6 +44,7 @@ const showDeleteModal = ref(false);
 const deleteModalPurge = ref(false);
 const deleteModalItem = ref<HDASummary | null>(null);
 const deleteModalBulk = ref(false);
+
 const allFields = [
     {
         key: "name",
@@ -76,12 +77,8 @@ const fields = computed(() => allFields.filter((field) => visibleColumns.value.i
 
 const columnOptions = allFields.map((field) => ({ key: field.key, label: field.label }));
 
-const sortOptions = allFields
-    .filter((field) => field.sortable)
-    .map((field) => ({ value: field.key, label: field.label }));
-
 const showNotFound = computed(() => {
-    return !loading.value && rows.value.length === 0 && query;
+    return !loading.value && rows.value.length === 0 && query.value;
 });
 const showNotAvailable = computed(() => {
     return !loading.value && rows.value.length === 0 && !query.value;
@@ -212,12 +209,12 @@ function onQuery(q: string) {
     load();
 }
 
-function onSort(event: { sortBy: string; sortDesc: boolean }) {
+function onSort(sortByValue: string, sortDescValue: boolean) {
     offset.value = 0;
-    sortBy.value = event.sortBy;
-    sortDesc.value = event.sortDesc;
+    sortBy.value = sortByValue;
+    sortDesc.value = sortDescValue;
 
-    load(false, true); // Use overlay loading for sorting
+    load(false, true);
 }
 
 function onScroll(scroll: Event) {
@@ -265,13 +262,6 @@ function onToggleColumn(key: string) {
     }
 }
 
-function onSortFromHeader(sortByValue: string, sortDescValue: boolean) {
-    sortBy.value = sortByValue;
-    sortDesc.value = sortDescValue;
-    offset.value = 0;
-    load(false, true); // Use overlay loading for sorting
-}
-
 function onBulkDelete() {
     deleteModalBulk.value = true;
     deleteModalItem.value = null;
@@ -376,17 +366,14 @@ onMounted(() => {
 
             <ListHeader
                 list-id="datasets"
-                show-sort-options
                 :show-select-all="true"
                 :select-all-disabled="loading || rows.length === 0"
                 :all-selected="allSelected"
                 :indeterminate-selected="indeterminateSelected"
                 :column-options="columnOptions"
                 :visible-columns="visibleColumns"
-                :sort-options="sortOptions"
                 @select-all="onSelectAll"
-                @toggle-column="onToggleColumn"
-                @sort-changed="onSortFromHeader" />
+                @toggle-column="onToggleColumn" />
         </div>
 
         <div v-if="loading" class="dataset-list-content">

From b4eef69112ca233132b3928885be92eb0921a0d4 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 23 Jan 2026 14:54:31 +0100
Subject: [PATCH 14/39] Remove unused sort reset prop and clean up types

Remove the unused `noSortReset` prop and `SortChangeEvent` import, and standardize JSDoc-style comments across GTable props and emits to improve clarity and maintainability without changing runtime behavior.
---
 client/src/components/Common/GTable.vue | 120 +++++++++++-------------
 1 file changed, 53 insertions(+), 67 deletions(-)

diff --git a/client/src/components/Common/GTable.vue b/client/src/components/Common/GTable.vue
index a39f2ad25272..ed53d706d51c 100644
--- a/client/src/components/Common/GTable.vue
+++ b/client/src/components/Common/GTable.vue
@@ -10,7 +10,6 @@ import type {
     FieldAlignment,
     RowClickEvent,
     RowSelectEvent,
-    SortChangeEvent,
     TableAction,
     TableEmptyState,
     TableField,
@@ -19,117 +18,134 @@ import type {
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 interface Props {
-    /** Unique identifier for the table
+    /**
+     * Unique identifier for the table
      * @default useUid("g-table-").value
      */
     id?: string;
 
-    /** Table field definitions
+    /**
+     * Table field definitions
      * @default []
      */
     fields?: TableField[];
 
-    /** Table data items
+    /**
+     * Table data items
      * @default []
      */
     items?: T[];
 
-    /** Whether to show striped rows
+    /**
+     * Whether to show striped rows
      * @default true
      */
     striped?: boolean;
 
-    /** Whether to show hover effect on rows
+    /**
+     * Whether to show hover effect on rows
      * @default true
      */
     hover?: boolean;
 
-    /** Whether to show borders
+    /**
+     * Whether to show borders
      * @default false
      */
     bordered?: boolean;
 
-    /** Whether rows are clickable
+    /**
+     * Whether rows are clickable
      * @default false
      */
     clickableRows?: boolean;
 
-    /** Whether to show selection checkboxes
+    /**
+     * Whether to show selection checkboxes
      * @default false
      */
     selectable?: boolean;
 
-    /** Array of selected item indices
+    /**
+     * Array of selected item indices
      * @default []
      */
     selectedItems?: number[];
 
-    /** Current sort field key
+    /**
+     * Current sort field key
      * @default ""
      */
     sortBy?: string;
 
-    /** Whether sorting in descending order
+    /**
+     * Whether sorting in descending order
      * @default false
      */
     sortDesc?: boolean;
 
-    /** Whether to disable local sorting (for server-side sorting)
+    /**
+     * Whether to disable local sorting (for server-side sorting)
      * @default false
      */
     noLocalSorting?: boolean;
 
-    /** Whether to reset sort on column click
-     * @default false
-     */
-    noSortReset?: boolean;
-
-    /** Whether the table is in loading state
+    /**
+     * Whether the table is in loading state
      * @default false
      */
     loading?: boolean;
 
-    /** Loading message to display
+    /**
+     * Loading message to display
      * @default "Loading..."
      */
     loadingMessage?: string;
 
-    /** Whether to show overlay loading (for sorting/filtering operations)
+    /**
+     * Whether to show overlay loading (for sorting/filtering operations)
      * @default false
      */
     overlayLoading?: boolean;
 
-    /** Whether to show load-more loading indicator at bottom (for pagination/scroll)
+    /**
+     * Whether to show load-more loading indicator at bottom (for pagination/scroll)
      * @default false
      */
     loadMoreLoading?: boolean;
 
-    /** Load-more loading message
+    /**
+     * Load-more loading message
      * @default "Loading more..."
      */
     loadMoreMessage?: string;
 
-    /** Empty state configuration
+    /**
+     * Empty state configuration
      * @default { message: "No data available" }
      */
     emptyState?: TableEmptyState;
 
-    /** Additional CSS classes for the table container
+    /**
+     * Additional CSS classes for the table container
      * @default ""
      */
     containerClass?: string | string[];
 
-    /** Additional CSS classes for the table element
+    /**
+     * Additional CSS classes for the table element
      * @default ""
      */
     tableClass?: string | string[];
 
-    /** Table actions displayed above the table
+    /**
+     * Table actions displayed above the table
      * @default []
      */
     actions?: TableAction[];
 
-    /** Whether to show select all checkbox in header
+    /**
+     * Whether to show select all checkbox in header
      * @default false
      */
     showSelectAll?: boolean;
@@ -148,7 +164,6 @@ const props = withDefaults(defineProps<Props>(), {
     sortBy: "",
     sortDesc: false,
     noLocalSorting: false,
-    noSortReset: false,
     loading: false,
     loadingMessage: "Loading...",
     overlayLoading: false,
@@ -165,32 +180,29 @@ const props = withDefaults(defineProps<Props>(), {
  * Events emitted by the GTable component
  */
 const emit = defineEmits<{
-    /** Emitted when sort changes
+    /**
+     * Emitted when sort changes
      * @event sort-changed
      */
     (e: "sort-changed", sortBy: string, sortDesc: boolean): void;
 
-    /** Emitted when a row is clicked
-     * @event row-click
-     */
-    (e: "row-click", event: RowClickEvent<T>): void;
-
-    /** Emitted when a row is selected/deselected
+    /**
+     * Emitted when a row is selected/deselected
      * @event row-select
      */
     (e: "row-select", event: RowSelectEvent<T>): void;
 
-    /** Emitted when select all is toggled
-     * @event select-all
+    /**
+     * Emitted when a row is clicked
+     * @event row-click
      */
-    (e: "select-all", selected: boolean): void;
+    (e: "row-click", event: RowClickEvent<T>): void;
 }>();
 
 // Internal state for local sorting
 const sortBy = ref<string>(props.sortBy || "update_time");
 const sortDesc = ref<boolean>(props.sortDesc || true);
 
-// Computed sorted items
 const sortedItems = computed(() => {
     if (props.noLocalSorting || !sortBy.value) {
         return props.items;
@@ -220,16 +232,6 @@ const sortedItems = computed(() => {
     return sorted;
 });
 
-// Check if all items are selected
-const allSelected = computed(() => {
-    return props.items.length > 0 && props.selectedItems.length === props.items.length;
-});
-
-// Check if some items are selected
-const someSelected = computed(() => {
-    return props.selectedItems.length > 0 && props.selectedItems.length < props.items.length;
-});
-
 /**
  * Handle column header click for sorting
  */
@@ -239,16 +241,8 @@ function onHeaderClick(field: TableField) {
     }
 
     if (sortBy.value === field.key) {
-        if (!props.noSortReset && sortDesc.value) {
-            // Reset sort
-            sortBy.value = undefined;
-            sortDesc.value = false;
-        } else {
-            // Toggle sort direction
-            sortDesc.value = !sortDesc.value;
-        }
+        sortDesc.value = !sortDesc.value;
     } else {
-        // New sort field
         sortBy.value = field.key;
         sortDesc.value = false;
     }
@@ -290,13 +284,6 @@ function onRowSelect(item: T, index: number) {
     emit("row-select", { item, index, selected: !isSelected });
 }
 
-/**
- * Handle select all toggle
- */
-function onSelectAll() {
-    emit("select-all", !allSelected.value);
-}
-
 /**
  * Get cell value with optional formatter
  */
@@ -330,7 +317,6 @@ function isRowSelected(index: number) {
 /**
  * Helper functions for generating consistent element IDs
  */
-const getElementId = (tableId: string, element: string) => `g-table-${element}-${tableId}`;
 const getFieldId = (tableId: string, fieldKey: string) => `g-table-field-${fieldKey}-${tableId}`;
 const getRowId = (tableId: string, index: number) => `g-table-row-${index}-${tableId}`;
 const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table-cell-${fieldKey}-${index}-${tableId}`;

From 63680108d72a168ca9724979ec9a5dca472f4973 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 23 Jan 2026 14:55:01 +0100
Subject: [PATCH 15/39] Reorganize props definitions and defaults
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reorder and group GTable props and default values for better clarity and consistency without changing behavior. Improves readability and maintainability of the component’s public API.
---
 client/src/components/Common/GTable.vue | 125 +++++++++++-------------
 1 file changed, 59 insertions(+), 66 deletions(-)

diff --git a/client/src/components/Common/GTable.vue b/client/src/components/Common/GTable.vue
index ed53d706d51c..cebc852e45b2 100644
--- a/client/src/components/Common/GTable.vue
+++ b/client/src/components/Common/GTable.vue
@@ -25,28 +25,10 @@ interface Props {
     id?: string;
 
     /**
-     * Table field definitions
-     * @default []
-     */
-    fields?: TableField[];
-
-    /**
-     * Table data items
+     * Table actions displayed above the table
      * @default []
      */
-    items?: T[];
-
-    /**
-     * Whether to show striped rows
-     * @default true
-     */
-    striped?: boolean;
-
-    /**
-     * Whether to show hover effect on rows
-     * @default true
-     */
-    hover?: boolean;
+    actions?: TableAction[];
 
     /**
      * Whether to show borders
@@ -61,34 +43,34 @@ interface Props {
     clickableRows?: boolean;
 
     /**
-     * Whether to show selection checkboxes
-     * @default false
+     * Additional CSS classes for the table container
+     * @default ""
      */
-    selectable?: boolean;
+    containerClass?: string | string[];
 
     /**
-     * Array of selected item indices
-     * @default []
+     * Empty state configuration
+     * @default { message: "No data available" }
      */
-    selectedItems?: number[];
+    emptyState?: TableEmptyState;
 
     /**
-     * Current sort field key
-     * @default ""
+     * Table field definitions
+     * @default []
      */
-    sortBy?: string;
+    fields?: TableField[];
 
     /**
-     * Whether sorting in descending order
-     * @default false
+     * Whether to show hover effect on rows
+     * @default true
      */
-    sortDesc?: boolean;
+    hover?: boolean;
 
     /**
-     * Whether to disable local sorting (for server-side sorting)
-     * @default false
+     * Table data items
+     * @default []
      */
-    noLocalSorting?: boolean;
+    items?: T[];
 
     /**
      * Whether the table is in loading state
@@ -102,12 +84,6 @@ interface Props {
      */
     loadingMessage?: string;
 
-    /**
-     * Whether to show overlay loading (for sorting/filtering operations)
-     * @default false
-     */
-    overlayLoading?: boolean;
-
     /**
      * Whether to show load-more loading indicator at bottom (for pagination/scroll)
      * @default false
@@ -121,28 +97,46 @@ interface Props {
     loadMoreMessage?: string;
 
     /**
-     * Empty state configuration
-     * @default { message: "No data available" }
+     * Whether to show overlay loading (for sorting/filtering operations)
+     * @default false
      */
-    emptyState?: TableEmptyState;
+    overlayLoading?: boolean;
 
     /**
-     * Additional CSS classes for the table container
-     * @default ""
+     * Whether to show striped rows
+     * @default true
      */
-    containerClass?: string | string[];
+    striped?: boolean;
 
     /**
-     * Additional CSS classes for the table element
-     * @default ""
+     * Whether to show selection checkboxes
+     * @default false
      */
-    tableClass?: string | string[];
+    selectable?: boolean;
 
     /**
-     * Table actions displayed above the table
+     * Array of selected item indices
      * @default []
      */
-    actions?: TableAction[];
+    selectedItems?: number[];
+
+    /**
+     * Current sort field key
+     * @default ""
+     */
+    sortBy?: string;
+
+    /**
+     * Whether sorting in descending order
+     * @default false
+     */
+    sortDesc?: boolean;
+
+    /**
+     * Additional CSS classes for the table element
+     * @default ""
+     */
+    tableClass?: string | string[];
 
     /**
      * Whether to show select all checkbox in header
@@ -153,27 +147,26 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
     id: () => useUid("g-table-").value,
-    fields: () => [],
-    items: () => [],
-    striped: true,
-    hover: true,
+    actions: () => [],
     bordered: false,
     clickableRows: false,
-    selectable: false,
-    selectedItems: () => [],
-    sortBy: "",
-    sortDesc: false,
-    noLocalSorting: false,
+    containerClass: "",
+    emptyState: () => ({ message: "No data available" }),
+    fields: () => [],
+    hover: true,
+    items: () => [],
     loading: false,
     loadingMessage: "Loading...",
-    overlayLoading: false,
     loadMoreLoading: false,
     loadMoreMessage: "Loading more...",
-    emptyState: () => ({ message: "No data available" }),
-    containerClass: "",
-    tableClass: "",
-    actions: () => [],
+    overlayLoading: false,
+    selectable: false,
+    selectedItems: () => [],
     showSelectAll: false,
+    sortBy: "",
+    sortDesc: false,
+    striped: true,
+    tableClass: "",
 });
 
 /**

From 6bd7086ab9be4886aef1f0cf2e953181b849beb6 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 23 Jan 2026 14:56:00 +0100
Subject: [PATCH 16/39] Remove local sorting and use items directly

Removes the internal computed sorting logic and replaces it with a
simple localItems reference to props.items. This ensures the table
renders data in the order provided by the parent, avoiding duplicate
or conflicting sorting when sorting is handled externally (e.g.
server-side or higher-level components).
---
 client/src/components/Common/GTable.vue | 36 +++----------------------
 1 file changed, 4 insertions(+), 32 deletions(-)

diff --git a/client/src/components/Common/GTable.vue b/client/src/components/Common/GTable.vue
index cebc852e45b2..ecdc9e6d80f6 100644
--- a/client/src/components/Common/GTable.vue
+++ b/client/src/components/Common/GTable.vue
@@ -192,38 +192,10 @@ const emit = defineEmits<{
     (e: "row-click", event: RowClickEvent<T>): void;
 }>();
 
-// Internal state for local sorting
 const sortBy = ref<string>(props.sortBy || "update_time");
 const sortDesc = ref<boolean>(props.sortDesc || true);
 
-const sortedItems = computed(() => {
-    if (props.noLocalSorting || !sortBy.value) {
-        return props.items;
-    }
-
-    const sorted = [...props.items];
-    const sortKey = sortBy.value;
-
-    sorted.sort((a, b) => {
-        const aVal = a[sortKey];
-        const bVal = b[sortKey];
-
-        if (aVal === bVal) {
-            return 0;
-        }
-        if (aVal === null || aVal === undefined) {
-            return 1;
-        }
-        if (bVal === null || bVal === undefined) {
-            return -1;
-        }
-
-        const comparison = aVal < bVal ? -1 : 1;
-        return sortDesc.value ? -comparison : comparison;
-    });
-
-    return sorted;
-});
+const localItems = computed(() => props.items || []);
 
 /**
  * Handle column header click for sorting
@@ -367,9 +339,9 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
                         </tr>
                     </thead>
 
-                    <tbody v-if="sortedItems.length > 0">
+                    <tbody v-if="localItems.length > 0">
                         <tr
-                            v-for="(item, index) in sortedItems"
+                            v-for="(item, index) in localItems"
                             :id="getRowId(props.id, index)"
                             :key="index"
                             :class="{
@@ -445,7 +417,7 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
                 </table>
 
                 <!-- Load more loading indicator -->
-                <div v-if="loadMoreLoading && sortedItems.length > 0" class="g-table-load-more py-3 text-center">
+                <div v-if="loadMoreLoading && localItems.length > 0" class="g-table-load-more py-3 text-center">
                     <LoadingSpan :message="props.loadMoreMessage" />
                 </div>
             </div>

From d6b9817a40fc3f76bbb2832bf80a1d2fd4c21b7c Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 23 Jan 2026 15:18:53 +0100
Subject: [PATCH 17/39] Reorder refs and computed fields

Reorganized reactive refs and moved the `fields` computed property
after its dependencies to improve readability and avoid referencing
state before declaration. Also removed redundant inline comments to
clean up the component logic.
---
 client/src/components/Dataset/DatasetList.vue | 53 +++++++++----------
 1 file changed, 24 insertions(+), 29 deletions(-)

diff --git a/client/src/components/Dataset/DatasetList.vue b/client/src/components/Dataset/DatasetList.vue
index c1a580b689ec..84221c3c2990 100644
--- a/client/src/components/Dataset/DatasetList.vue
+++ b/client/src/components/Dataset/DatasetList.vue
@@ -22,29 +22,6 @@ import LoadingSpan from "@/components/LoadingSpan.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 import UtcDate from "@/components/UtcDate.vue";
 
-const historyStore = useHistoryStore();
-const { currentHistoryId } = storeToRefs(historyStore);
-
-const query = ref("");
-const limit = ref(50);
-const offset = ref(0);
-const message = ref("");
-const loading = ref(true);
-const overlay = ref(false);
-const loadMoreLoading = ref(false);
-const sortDesc = ref(true);
-const sortBy = ref("update_time");
-const rows = ref<HDASummary[]>([]);
-const messageVariant = ref("danger");
-const selectedItemIds = ref<string[]>([]);
-const hasMoreItems = ref(true);
-const visibleColumns = ref<string[]>(["name", "tags", "history_id", "extension", "update_time"]);
-const bulkDeleteLoading = ref(false);
-const showDeleteModal = ref(false);
-const deleteModalPurge = ref(false);
-const deleteModalItem = ref<HDASummary | null>(null);
-const deleteModalBulk = ref(false);
-
 const allFields = [
     {
         key: "name",
@@ -73,10 +50,32 @@ const allFields = [
     },
 ];
 
-const fields = computed(() => allFields.filter((field) => visibleColumns.value.includes(field.key)));
-
 const columnOptions = allFields.map((field) => ({ key: field.key, label: field.label }));
 
+const historyStore = useHistoryStore();
+const { currentHistoryId } = storeToRefs(historyStore);
+
+const query = ref("");
+const limit = ref(50);
+const offset = ref(0);
+const message = ref("");
+const loading = ref(true);
+const overlay = ref(false);
+const loadMoreLoading = ref(false);
+const sortDesc = ref(true);
+const sortBy = ref("update_time");
+const rows = ref<HDASummary[]>([]);
+const messageVariant = ref("danger");
+const selectedItemIds = ref<string[]>([]);
+const hasMoreItems = ref(true);
+const visibleColumns = ref<string[]>(["name", "tags", "history_id", "extension", "update_time"]);
+const bulkDeleteLoading = ref(false);
+const showDeleteModal = ref(false);
+const deleteModalPurge = ref(false);
+const deleteModalItem = ref<HDASummary | null>(null);
+const deleteModalBulk = ref(false);
+
+const fields = computed(() => allFields.filter((field) => visibleColumns.value.includes(field.key)));
 const showNotFound = computed(() => {
     return !loading.value && rows.value.length === 0 && query.value;
 });
@@ -146,7 +145,6 @@ async function load(concat = false, showOverlay = false) {
             rows.value = datasets;
         }
 
-        // Check if there are more items to load
         hasMoreItems.value = datasets.length === limit.value;
     } catch (error: any) {
         onError(error);
@@ -253,7 +251,6 @@ function onRowSelect(event: { item: HDASummary; index: number; selected: boolean
 function onToggleColumn(key: string) {
     const index = visibleColumns.value.indexOf(key);
     if (index > -1) {
-        // Don't allow hiding all columns or the name column
         if (visibleColumns.value.length > 1 && key !== "name") {
             visibleColumns.value.splice(index, 1);
         }
@@ -283,7 +280,6 @@ async function confirmDelete() {
         overlay.value = true;
 
         if (deleteModalBulk.value) {
-            // Bulk delete
             const totalSelected = selectedItemIds.value.length;
             const tmpSelected = [...selectedItemIds.value];
             bulkDeleteLoading.value = true;
@@ -304,7 +300,6 @@ async function confirmDelete() {
             selectedItemIds.value = [];
             bulkDeleteLoading.value = false;
         } else if (deleteModalItem.value) {
-            // Single delete
             await deleteDataset(deleteModalItem.value.id, purge);
             Toast.success(`${purge ? "Permanently deleted" : "Deleted"} dataset "${deleteModalItem.value.name}".`);
         }

From 211a38ecd47b8a3bd222fea16b19832a0b6d2142 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 23 Jan 2026 15:19:02 +0100
Subject: [PATCH 18/39] Add title attribute to action component links

---
 client/src/components/Common/GTable.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/Common/GTable.vue b/client/src/components/Common/GTable.vue
index ecdc9e6d80f6..18b12ad967e8 100644
--- a/client/src/components/Common/GTable.vue
+++ b/client/src/components/Common/GTable.vue
@@ -402,6 +402,7 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
                                                 :size="ac.size || 'sm'"
                                                 :variant="ac.variant || 'link'"
                                                 :to="ac.to"
+                                                :title="ac.title"
                                                 :href="ac.href"
                                                 :target="ac.externalLink ? '_blank' : undefined"
                                                 @click.stop="ac.handler && ac.handler(item, index)">

From f93778bac5aa1051986a667b70b12849f2990cdb Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 23 Jan 2026 15:19:30 +0100
Subject: [PATCH 19/39] Add composable for dataset table actions

Creates a reusable composable that encapsulates all dataset table operations, including copying, displaying, deleting, and purging datasets.

This extraction improves code organization by centralizing dataset manipulation logic and makes it easier to share these actions across different components. The composable handles user confirmations, error messaging, and history store updates consistently.
---
 .../Dataset/useDatasetTableActions.ts         | 114 ++++++++++++++++++
 1 file changed, 114 insertions(+)
 create mode 100644 client/src/components/Dataset/useDatasetTableActions.ts

diff --git a/client/src/components/Dataset/useDatasetTableActions.ts b/client/src/components/Dataset/useDatasetTableActions.ts
new file mode 100644
index 000000000000..aa547853948b
--- /dev/null
+++ b/client/src/components/Dataset/useDatasetTableActions.ts
@@ -0,0 +1,114 @@
+import { faCopy, faEye, faFire, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { storeToRefs } from "pinia";
+
+import type { HDASummary } from "@/api";
+import { copyDataset, deleteDataset } from "@/api/datasets";
+import type { TableAction } from "@/components/Common/GTable.types";
+import { useConfirmDialog } from "@/composables/confirmDialog";
+import { Toast } from "@/composables/toast";
+import { useHistoryStore } from "@/stores/historyStore";
+
+export function useDatasetTableActions() {
+    const historyStore = useHistoryStore();
+    const { currentHistoryId } = storeToRefs(historyStore);
+
+    const { confirm } = useConfirmDialog();
+
+    async function onShowDataset(item: HDASummary) {
+        const { history_id } = item;
+        const filters = {
+            deleted: item.deleted,
+            visible: item.visible,
+            hid: item.hid,
+        };
+
+        try {
+            await historyStore.applyFilters(history_id, filters);
+        } catch (error) {
+            Toast.error("Failed to show dataset in history");
+        }
+    }
+
+    async function onCopyDataset(item: HDASummary) {
+        const dataset_id = item.id;
+
+        try {
+            if (!currentHistoryId.value) {
+                throw new Error("No current history found.");
+            }
+
+            await copyDataset(dataset_id, currentHistoryId.value);
+
+            historyStore.loadCurrentHistory();
+
+            Toast.success(`Dataset "${item.name}" copied to current history.`);
+        } catch (error) {
+            Toast.error("Failed to copy dataset");
+        }
+    }
+
+    async function confirmDeleteDataset(item: HDASummary, purge: boolean) {
+        const confirmed = await confirm(
+            `Are you sure you want to ${purge ? "purge" : "delete"} the dataset "${item.name}"?`,
+            {
+                title: purge ? "Purge Dataset" : "Delete Dataset",
+                okTitle: purge ? "Purge" : "Delete",
+                okVariant: "danger",
+            },
+        );
+
+        if (confirmed) {
+            try {
+                await deleteDataset(item.id, purge);
+
+                Toast.success(`Dataset "${item.name}" ${purge ? "purged" : "deleted"}.`);
+                historyStore.loadCurrentHistory();
+            } catch (error) {
+                Toast.error(`Failed to ${purge ? "purge" : "delete"} dataset.`);
+            }
+        }
+    }
+
+    async function onDeleteDataset(item: HDASummary) {
+        confirmDeleteDataset(item, false);
+    }
+
+    async function onPurgeDataset(item: HDASummary) {
+        confirmDeleteDataset(item, true);
+    }
+
+    const datasetTableActions: TableAction[] = [
+        {
+            id: "copy-dataset",
+            label: "Copy to current history",
+            title: "Copy Dataset to current history",
+            icon: faCopy,
+            handler: onCopyDataset,
+        },
+        {
+            id: "show-dataset",
+            label: "Show in history",
+            title: "Show dataset in history panel",
+            icon: faEye,
+            handler: onShowDataset,
+        },
+        {
+            id: "delete-dataset",
+            label: "Delete",
+            title: "Delete dataset",
+            icon: faTrash,
+            handler: onDeleteDataset,
+        },
+        {
+            id: "purge-dataset",
+            label: "Purge",
+            title: "Purge dataset",
+            icon: faFire,
+            handler: onPurgeDataset,
+        },
+    ];
+
+    return {
+        datasetTableActions,
+    };
+}

From 5a304e6c0cf80d011bf9cb22651659c21e83c245 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 23 Jan 2026 15:20:03 +0100
Subject: [PATCH 20/39] Use useDatasetTableActions composable

Move dataset table action definitions and handlers into a dedicated
useDatasetTableActions composable. This simplifies DatasetList.vue,
removes unused imports and state, and improves reuse and maintainability
of table action logic.
---
 client/src/components/Dataset/DatasetList.vue | 58 ++-----------------
 1 file changed, 6 insertions(+), 52 deletions(-)

diff --git a/client/src/components/Dataset/DatasetList.vue b/client/src/components/Dataset/DatasetList.vue
index 84221c3c2990..7417ee0736ba 100644
--- a/client/src/components/Dataset/DatasetList.vue
+++ b/client/src/components/Dataset/DatasetList.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { faCopy, faEye, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BFormCheckbox, BLink, BModal } from "bootstrap-vue";
-import { storeToRefs } from "pinia";
 import { computed, onMounted, ref } from "vue";
 
 import { GalaxyApi, type HDASummary } from "@/api";
-import { copyDataset, deleteDataset } from "@/api/datasets";
+import { deleteDataset } from "@/api/datasets";
 import { updateTags } from "@/api/tags";
-import type { TableAction } from "@/components/Common/GTable.types";
 import { Toast } from "@/composables/toast";
 import { useHistoryStore } from "@/stores/historyStore";
 import localize from "@/utils/localization";
 import { rethrowSimple } from "@/utils/simple-error";
 
+import { useDatasetTableActions } from "./useDatasetTableActions";
+
 import DelayedInput from "@/components/Common/DelayedInput.vue";
 import GTable from "@/components/Common/GTable.vue";
 import ListHeader from "@/components/Common/ListHeader.vue";
@@ -53,7 +53,6 @@ const allFields = [
 const columnOptions = allFields.map((field) => ({ key: field.key, label: field.label }));
 
 const historyStore = useHistoryStore();
-const { currentHistoryId } = storeToRefs(historyStore);
 
 const query = ref("");
 const limit = ref(50);
@@ -75,6 +74,8 @@ const deleteModalPurge = ref(false);
 const deleteModalItem = ref<HDASummary | null>(null);
 const deleteModalBulk = ref(false);
 
+const { datasetTableActions } = useDatasetTableActions();
+
 const fields = computed(() => allFields.filter((field) => visibleColumns.value.includes(field.key)));
 const showNotFound = computed(() => {
     return !loading.value && rows.value.length === 0 && query.value;
@@ -155,22 +156,6 @@ async function load(concat = false, showOverlay = false) {
     }
 }
 
-async function onCopyDataset(item: HDASummary) {
-    const dataset_id = item.id;
-
-    try {
-        if (!currentHistoryId.value) {
-            throw new Error("No current history found.");
-        }
-
-        await copyDataset(dataset_id, currentHistoryId.value);
-
-        historyStore.loadCurrentHistory();
-    } catch (error: any) {
-        onError(error);
-    }
-}
-
 async function onShowDataset(item: HDASummary) {
     const { history_id } = item;
     const filters = {
@@ -266,13 +251,6 @@ function onBulkDelete() {
     showDeleteModal.value = true;
 }
 
-function onDeleteDataset(item: HDASummary) {
-    deleteModalBulk.value = false;
-    deleteModalItem.value = item;
-    deleteModalPurge.value = false;
-    showDeleteModal.value = true;
-}
-
 async function confirmDelete() {
     const purge = deleteModalPurge.value;
 
@@ -317,30 +295,6 @@ async function confirmDelete() {
     }
 }
 
-const datasetTableActions: TableAction[] = [
-    {
-        id: "copy-dataset",
-        label: "Copy to current history",
-        title: "Copy Dataset to current history",
-        icon: faCopy,
-        handler: onCopyDataset,
-    },
-    {
-        id: "show-dataset",
-        label: "Show in history",
-        title: "Show dataset in history panel",
-        icon: faEye,
-        handler: onShowDataset,
-    },
-    {
-        id: "delete-dataset",
-        label: "Delete",
-        title: "Delete dataset",
-        icon: faTrash,
-        handler: onDeleteDataset,
-    },
-];
-
 function resetDeleteModal() {
     deleteModalPurge.value = false;
 }

From 9047c070b99afcb079fbca23985e829093e0f394 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 23 Jan 2026 15:24:10 +0100
Subject: [PATCH 21/39] Add breadcrumb navigation to dataset list view

Introduces a breadcrumb heading component to the dataset list page for improved navigation and user orientation.
---
 client/src/components/Dataset/DatasetList.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/src/components/Dataset/DatasetList.vue b/client/src/components/Dataset/DatasetList.vue
index 7417ee0736ba..41a6e3760e52 100644
--- a/client/src/components/Dataset/DatasetList.vue
+++ b/client/src/components/Dataset/DatasetList.vue
@@ -14,6 +14,7 @@ import { rethrowSimple } from "@/utils/simple-error";
 
 import { useDatasetTableActions } from "./useDatasetTableActions";
 
+import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
 import DelayedInput from "@/components/Common/DelayedInput.vue";
 import GTable from "@/components/Common/GTable.vue";
 import ListHeader from "@/components/Common/ListHeader.vue";
@@ -22,6 +23,8 @@ import LoadingSpan from "@/components/LoadingSpan.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 import UtcDate from "@/components/UtcDate.vue";
 
+const breadcrumbItems = [{ title: "Datasets", to: "/datasets/list" }];
+
 const allFields = [
     {
         key: "name",
@@ -306,6 +309,7 @@ onMounted(() => {
 
 <template>
     <div class="dataset-list-container h-100 d-flex flex-column">
+        <BreadcrumbHeading :items="breadcrumbItems" />
         <div class="dataset-list-header">
             <BAlert v-if="message" :variant="messageVariant" show class="m-2">
                 {{ message }}

From 5e69780982b8c4ad2a63b86a4417b1e7491f1d6e Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 26 Jan 2026 14:16:23 +0100
Subject: [PATCH 22/39] Add select-all checkbox and update actions menu UI

Introduce built-in select-all support in GTable with proper disabled,
indeterminate, and all-selected states, and emit a new select-all event
for bulk actions.
Update the header slot to render a default checkbox when enabled.
Also refresh the row actions menu by switching to an ellipsis icon and larger trigger size, and remove redundant show-select-all usage from DatasetList.
---
 client/src/components/Common/GTable.vue       | 38 +++++++++++++++++--
 client/src/components/Dataset/DatasetList.vue |  1 -
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Common/GTable.vue b/client/src/components/Common/GTable.vue
index 18b12ad967e8..0054b5b8f3ad 100644
--- a/client/src/components/Common/GTable.vue
+++ b/client/src/components/Common/GTable.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
-import { faCaretDown, faSort, faSortDown, faSortUp } from "@fortawesome/free-solid-svg-icons";
+import { faEllipsisV, faSort, faSortDown, faSortUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BDropdown, BDropdownItem, BFormCheckbox, BOverlay } from "bootstrap-vue";
 import { computed, ref } from "vue";
@@ -179,6 +179,12 @@ const emit = defineEmits<{
      */
     (e: "sort-changed", sortBy: string, sortDesc: boolean): void;
 
+    /**
+     * Emitted when select all checkbox is toggled
+     * @event select-all
+     */
+    (e: "select-all"): void;
+
     /**
      * Emitted when a row is selected/deselected
      * @event row-select
@@ -196,6 +202,15 @@ const sortBy = ref<string>(props.sortBy || "update_time");
 const sortDesc = ref<boolean>(props.sortDesc || true);
 
 const localItems = computed(() => props.items || []);
+const selectAllDisabled = computed(() => {
+    return props.selectable && localItems.value.length === 0;
+});
+const indeterminateSelected = computed(() => {
+    return props.selectable && props.selectedItems.length > 0 && props.selectedItems.length < localItems.value.length;
+});
+const allSelected = computed(() => {
+    return props.selectable && localItems.value.length > 0 && props.selectedItems.length === localItems.value.length;
+});
 
 /**
  * Handle column header click for sorting
@@ -241,6 +256,10 @@ function onRowClick(item: T, index: number, event: MouseEvent | KeyboardEvent) {
     emit("row-click", { item, index, event });
 }
 
+function onSelectAll(selected: boolean) {
+    emit("select-all");
+}
+
 /**
  * Handle row selection toggle
  */
@@ -304,7 +323,18 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
                     <thead>
                         <tr>
                             <th v-if="selectable" class="g-table-select-column">
-                                <slot name="head-select" />
+                                <slot name="head-select">
+                                    <BFormCheckbox
+                                        v-if="showSelectAll"
+                                        :id="`g-table-select-all-${props.id}`"
+                                        v-b-tooltip.hover.noninteractive
+                                        :disabled="selectAllDisabled"
+                                        :checked="allSelected"
+                                        :indeterminate="indeterminateSelected"
+                                        title="Select all for bulk actions"
+                                        @click.stop
+                                        @change="onSelectAll($event)" />
+                                </slot>
                             </th>
 
                             <!-- Field columns -->
@@ -386,11 +416,11 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
                                         right
                                         title="More actions"
                                         variant="link"
-                                        size="sm"
+                                        size="lg"
                                         toggle-class="text-decoration-none p-0"
                                         @click.stop>
                                         <template v-slot:button-content>
-                                            <FontAwesomeIcon :icon="faCaretDown" />
+                                            <FontAwesomeIcon :icon="faEllipsisV" fixed-width />
                                         </template>
 
                                         <template v-for="ac in props.actions">
diff --git a/client/src/components/Dataset/DatasetList.vue b/client/src/components/Dataset/DatasetList.vue
index 41a6e3760e52..8d0e033d341d 100644
--- a/client/src/components/Dataset/DatasetList.vue
+++ b/client/src/components/Dataset/DatasetList.vue
@@ -319,7 +319,6 @@ onMounted(() => {
 
             <ListHeader
                 list-id="datasets"
-                :show-select-all="true"
                 :select-all-disabled="loading || rows.length === 0"
                 :all-selected="allSelected"
                 :indeterminate-selected="indeterminateSelected"

From 3a1cb09a2ec3806ffa4368504d6fb2daa8e5d407 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 26 Jan 2026 14:46:51 +0100
Subject: [PATCH 23/39] Add loadDatasets helper with pagination and search

Introduce a new loadDatasets API helper that supports pagination, sorting, and text search.
The helper returns summarized dataset records along with a total match count parsed from response headers, enabling more efficient dataset listing and UI pagination.
---
 client/src/api/datasets.ts | 44 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/client/src/api/datasets.ts b/client/src/api/datasets.ts
index d4cdd3f08238..263fd6c8dedc 100644
--- a/client/src/api/datasets.ts
+++ b/client/src/api/datasets.ts
@@ -6,10 +6,54 @@ import {
     GalaxyApi,
     type GalaxyApiPaths,
     type HDADetailed,
+    type HDASummary,
 } from "@/api";
 import { withPrefix } from "@/utils/redirect";
 import { rethrowSimple } from "@/utils/simple-error";
 
+export interface LoadDatasetsOptions {
+    limit?: number;
+    offset?: number;
+    sortBy?: string;
+    sortDesc?: boolean;
+    search?: string;
+}
+
+export interface LoadDatasetsResult {
+    data: HDASummary[];
+    totalMatches: number;
+}
+
+export async function loadDatasets(options: LoadDatasetsOptions): Promise<LoadDatasetsResult> {
+    const { limit = 24, offset = 0, sortBy = "update_time", sortDesc = true, search = "" } = options;
+
+    const {
+        response,
+        data: datasets,
+        error,
+    } = await GalaxyApi().GET("/api/datasets", {
+        params: {
+            query: {
+                q: search ? ["name-contains"] : undefined,
+                qv: search ? [search] : undefined,
+                limit,
+                offset,
+                order: `${sortBy}${sortDesc ? "-dsc" : "-asc"}`,
+                view: "summary",
+            },
+        },
+    });
+
+    if (error) {
+        rethrowSimple(error);
+    }
+
+    const totalMatches = parseInt(response.headers.get("total_matches") ?? "0", 10) || 0;
+    const data = datasets as unknown as HDASummary[];
+
+    return { data, totalMatches };
+}
+
 export async function fetchDatasetTextContentDetails(params: { id: string }): Promise<DatasetTextContentDetails> {
     const { data, error } = await GalaxyApi().GET("/api/datasets/{dataset_id}/get_content_as_text", {
         params: {

From 52b530567dfccc97e555e2c951316079c4d5d71d Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 26 Jan 2026 14:48:00 +0100
Subject: [PATCH 24/39] Switch dataset list to paginated loading

Replace infinite scroll with pagination using BPagination and a dedicated loadDatasets API. Track total dataset count, adjust page size, reset selections on query/sort changes, and simplify loading state handling for clearer UX and maintainable data fetching.
---
 client/src/components/Dataset/DatasetList.vue | 114 +++++++-----------
 1 file changed, 44 insertions(+), 70 deletions(-)

diff --git a/client/src/components/Dataset/DatasetList.vue b/client/src/components/Dataset/DatasetList.vue
index 8d0e033d341d..9bfe42584de6 100644
--- a/client/src/components/Dataset/DatasetList.vue
+++ b/client/src/components/Dataset/DatasetList.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BFormCheckbox, BLink, BModal } from "bootstrap-vue";
+import { BAlert, BButton, BFormCheckbox, BLink, BModal, BPagination } from "bootstrap-vue";
 import { computed, onMounted, ref } from "vue";
 
-import { GalaxyApi, type HDASummary } from "@/api";
-import { deleteDataset } from "@/api/datasets";
+import type { HDASummary } from "@/api";
+import { deleteDataset, loadDatasets } from "@/api/datasets";
 import { updateTags } from "@/api/tags";
 import { Toast } from "@/composables/toast";
 import { useHistoryStore } from "@/stores/historyStore";
 import localize from "@/utils/localization";
-import { rethrowSimple } from "@/utils/simple-error";
 
 import { useDatasetTableActions } from "./useDatasetTableActions";
 
@@ -58,20 +57,19 @@ const columnOptions = allFields.map((field) => ({ key: field.key, label: field.l
 const historyStore = useHistoryStore();
 
 const query = ref("");
-const limit = ref(50);
+const limit = ref(24);
 const offset = ref(0);
 const message = ref("");
 const loading = ref(true);
 const overlay = ref(false);
-const loadMoreLoading = ref(false);
 const sortDesc = ref(true);
 const sortBy = ref("update_time");
 const rows = ref<HDASummary[]>([]);
 const messageVariant = ref("danger");
 const selectedItemIds = ref<string[]>([]);
-const hasMoreItems = ref(true);
+const totalDatasets = ref(0);
 const visibleColumns = ref<string[]>(["name", "tags", "history_id", "extension", "update_time"]);
-const bulkDeleteLoading = ref(false);
+const bulkDeleteOrRestoreLoading = ref(false);
 const showDeleteModal = ref(false);
 const deleteModalPurge = ref(false);
 const deleteModalItem = ref<HDASummary | null>(null);
@@ -79,6 +77,7 @@ const deleteModalBulk = ref(false);
 
 const { datasetTableActions } = useDatasetTableActions();
 
+const currentPage = computed(() => Math.floor(offset.value / limit.value) + 1);
 const fields = computed(() => allFields.filter((field) => visibleColumns.value.includes(field.key)));
 const showNotFound = computed(() => {
     return !loading.value && rows.value.length === 0 && query.value;
@@ -114,48 +113,29 @@ const deleteModalMessage = computed(() => {
     return "Are you sure you want to delete this dataset?";
 });
 
-async function load(concat = false, showOverlay = false) {
+async function load(showOverlay = false) {
     if (showOverlay) {
         overlay.value = true;
-    } else if (concat) {
-        loadMoreLoading.value = true;
     } else {
         loading.value = true;
     }
 
     try {
-        const { data, error } = await GalaxyApi().GET("/api/datasets", {
-            params: {
-                query: {
-                    q: ["name-contains"],
-                    qv: [query.value],
-                    limit: limit.value,
-                    offset: offset.value,
-                    order: `${sortBy.value}${sortDesc.value ? "-dsc" : "-asc"}`,
-                    view: "summary",
-                },
-            },
+        const { data, totalMatches } = await loadDatasets({
+            limit: limit.value,
+            offset: offset.value,
+            sortBy: sortBy.value,
+            sortDesc: sortDesc.value,
+            search: query.value,
         });
 
-        if (error) {
-            rethrowSimple(error);
-        }
-
-        const datasets = data as HDASummary[];
-
-        if (concat) {
-            rows.value = rows.value.concat(datasets);
-        } else {
-            rows.value = datasets;
-        }
-
-        hasMoreItems.value = datasets.length === limit.value;
+        rows.value = data;
+        totalDatasets.value = totalMatches;
     } catch (error: any) {
         onError(error);
     } finally {
         loading.value = false;
         overlay.value = false;
-        loadMoreLoading.value = false;
     }
 }
 
@@ -191,7 +171,7 @@ async function onTags(tags: string[], index: number) {
 function onQuery(q: string) {
     query.value = q;
     offset.value = 0;
-
+    selectedItemIds.value = [];
     load();
 }
 
@@ -199,20 +179,14 @@ function onSort(sortByValue: string, sortDescValue: boolean) {
     offset.value = 0;
     sortBy.value = sortByValue;
     sortDesc.value = sortDescValue;
-
-    load(false, true);
+    selectedItemIds.value = [];
+    load(true);
 }
 
-function onScroll(scroll: Event) {
-    const { scrollTop, clientHeight, scrollHeight } = scroll.target as HTMLElement;
-
-    if (scrollTop + clientHeight >= scrollHeight) {
-        if (offset.value + limit.value <= rows.value.length) {
-            offset.value += limit.value;
-
-            load(true);
-        }
-    }
+async function onPageChange(page: number) {
+    offset.value = (page - 1) * limit.value;
+    selectedItemIds.value = [];
+    await load(true);
 }
 
 function onError(msg: string) {
@@ -263,7 +237,7 @@ async function confirmDelete() {
         if (deleteModalBulk.value) {
             const totalSelected = selectedItemIds.value.length;
             const tmpSelected = [...selectedItemIds.value];
-            bulkDeleteLoading.value = true;
+            bulkDeleteOrRestoreLoading.value = true;
 
             for (const id of selectedItemIds.value) {
                 await deleteDataset(id, purge);
@@ -279,13 +253,13 @@ async function confirmDelete() {
             );
 
             selectedItemIds.value = [];
-            bulkDeleteLoading.value = false;
+            bulkDeleteOrRestoreLoading.value = false;
         } else if (deleteModalItem.value) {
             await deleteDataset(deleteModalItem.value.id, purge);
             Toast.success(`${purge ? "Permanently deleted" : "Deleted"} dataset "${deleteModalItem.value.name}".`);
         }
 
-        await load(true);
+        await load();
     } catch (error: any) {
         Toast.error(`Failed to delete dataset${deleteModalBulk.value ? "s" : ""}.`);
         onError(error);
@@ -343,7 +317,7 @@ onMounted(() => {
                 No matching entries found for: <span class="font-weight-bold">{{ query }}</span>
             </BAlert>
         </div>
-        <div v-else class="dataset-list-content overflow-auto" @scroll="onScroll">
+        <div v-else class="dataset-list-content overflow-auto">
             <GTable
                 id="dataset-table"
                 striped
@@ -356,7 +330,6 @@ onMounted(() => {
                 :sort-by="sortBy"
                 :sort-desc="sortDesc"
                 :overlay-loading="overlay"
-                :load-more-loading="loadMoreLoading"
                 :selected-items="selectedIndices"
                 :actions="datasetTableActions"
                 @sort-changed="onSort"
@@ -392,31 +365,32 @@ onMounted(() => {
                     <UtcDate :date="data.value" mode="elapsed" />
                 </template>
             </GTable>
-
-            <!-- End of list indicator -->
-            <div v-if="!loadMoreLoading && rows.length > 0 && !hasMoreItems" class="text-center py-3 text-muted">
-                - End of list -
-            </div>
         </div>
 
-        <!-- Bulk actions footer -->
-        <div v-if="selectedItemIds.length > 0" class="d-flex mt-1 align-items-center">
-            <div class="d-flex gap-1">
+        <div class="d-flex mt-1 align-items-center mt-2">
+            <div v-if="selectedItemIds.length > 0" class="d-flex gap-1 w-100 position-absolute">
                 <BButton
-                    id="dataset-list-footer-bulk-delete-button"
                     v-b-tooltip.hover
-                    :title="bulkDeleteLoading ? 'Deleting datasets' : 'Delete selected datasets'"
-                    :disabled="bulkDeleteLoading"
                     size="sm"
                     variant="primary"
+                    :disabled="bulkDeleteOrRestoreLoading"
+                    :title="bulkDeleteOrRestoreLoading ? 'Deleting datasets' : 'Delete selected datasets'"
                     @click="onBulkDelete">
-                    <span v-if="!bulkDeleteLoading">
-                        <FontAwesomeIcon :icon="faTrash" fixed-width />
-                        Delete ({{ selectedItemIds.length }})
-                    </span>
-                    <LoadingSpan v-else message="Deleting" />
+                    <FontAwesomeIcon :icon="faTrash" />
+                    {{ localize("Delete Selected") }} ({{ selectedItemIds.length }})
                 </BButton>
             </div>
+
+            <BPagination
+                class="mx-0 my-auto w-100"
+                :value="currentPage"
+                :total-rows="totalDatasets"
+                :per-page="limit"
+                align="right"
+                size="sm"
+                first-number
+                last-number
+                @change="onPageChange" />
         </div>
 
         <!-- Delete confirmation modal -->

From e84893cdfe4c4f712b018b3f3300d2d2c6921b27 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 26 Jan 2026 17:35:30 +0100
Subject: [PATCH 25/39] Replace delete modal with confirm dialog for bulk
 delete

Refactor dataset bulk deletion to use the shared confirm dialog
composable instead of a dedicated modal. This simplifies state
management, removes unused modal-related logic, and provides a
consistent confirmation UX while keeping deletion feedback and
error handling intact.
---
 client/src/components/Dataset/DatasetList.vue | 103 +++++-------------
 1 file changed, 27 insertions(+), 76 deletions(-)

diff --git a/client/src/components/Dataset/DatasetList.vue b/client/src/components/Dataset/DatasetList.vue
index 9bfe42584de6..922876c6ab1e 100644
--- a/client/src/components/Dataset/DatasetList.vue
+++ b/client/src/components/Dataset/DatasetList.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BFormCheckbox, BLink, BModal, BPagination } from "bootstrap-vue";
+import { BAlert, BButton, BLink, BPagination } from "bootstrap-vue";
 import { computed, onMounted, ref } from "vue";
 
 import type { HDASummary } from "@/api";
 import { deleteDataset, loadDatasets } from "@/api/datasets";
 import { updateTags } from "@/api/tags";
+import { useConfirmDialog } from "@/composables/confirmDialog";
 import { Toast } from "@/composables/toast";
 import { useHistoryStore } from "@/stores/historyStore";
 import localize from "@/utils/localization";
@@ -55,11 +56,11 @@ const allFields = [
 const columnOptions = allFields.map((field) => ({ key: field.key, label: field.label }));
 
 const historyStore = useHistoryStore();
+const { confirm } = useConfirmDialog();
 
 const query = ref("");
 const limit = ref(24);
 const offset = ref(0);
-const message = ref("");
 const loading = ref(true);
 const overlay = ref(false);
 const sortDesc = ref(true);
@@ -70,10 +71,6 @@ const selectedItemIds = ref<string[]>([]);
 const totalDatasets = ref(0);
 const visibleColumns = ref<string[]>(["name", "tags", "history_id", "extension", "update_time"]);
 const bulkDeleteOrRestoreLoading = ref(false);
-const showDeleteModal = ref(false);
-const deleteModalPurge = ref(false);
-const deleteModalItem = ref<HDASummary | null>(null);
-const deleteModalBulk = ref(false);
 
 const { datasetTableActions } = useDatasetTableActions();
 
@@ -96,22 +93,6 @@ const selectedIndices = computed(() => {
         .map((row, index) => (selectedItemIds.value.includes(row.id) ? index : -1))
         .filter((i) => i !== -1);
 });
-const deleteModalTitle = computed(() => {
-    if (deleteModalBulk.value) {
-        return `Delete ${selectedItemIds.value.length} dataset${selectedItemIds.value.length > 1 ? "s" : ""}?`;
-    } else if (deleteModalItem.value) {
-        return `Delete "${deleteModalItem.value.name}"?`;
-    }
-    return "Delete dataset?";
-});
-const deleteModalMessage = computed(() => {
-    if (deleteModalBulk.value) {
-        return `Are you sure you want to delete ${selectedItemIds.value.length} dataset${selectedItemIds.value.length > 1 ? "s" : ""}?`;
-    } else if (deleteModalItem.value) {
-        return `Are you sure you want to delete "${deleteModalItem.value.name}"?`;
-    }
-    return "Are you sure you want to delete this dataset?";
-});
 
 async function load(showOverlay = false) {
     if (showOverlay) {
@@ -221,26 +202,28 @@ function onToggleColumn(key: string) {
     }
 }
 
-function onBulkDelete() {
-    deleteModalBulk.value = true;
-    deleteModalItem.value = null;
-    deleteModalPurge.value = false;
-    showDeleteModal.value = true;
-}
-
-async function confirmDelete() {
-    const purge = deleteModalPurge.value;
-
-    try {
-        overlay.value = true;
+async function onBulkDelete() {
+    const totalSelected = selectedItemIds.value.length;
+
+    const confirmed = await confirm(`Are you sure you want to delete ${totalSelected} datasets?`, {
+        id: "bulk-delete-datasets-confirmation",
+        title: "Delete datasets",
+        okTitle: "Delete datasets",
+        okVariant: "danger",
+        cancelVariant: "outline-primary",
+        centered: true,
+    });
+
+    if (confirmed) {
+        try {
+            overlay.value = true;
+            bulkDeleteOrRestoreLoading.value = true;
 
-        if (deleteModalBulk.value) {
             const totalSelected = selectedItemIds.value.length;
             const tmpSelected = [...selectedItemIds.value];
-            bulkDeleteOrRestoreLoading.value = true;
 
             for (const id of selectedItemIds.value) {
-                await deleteDataset(id, purge);
+                await deleteDataset(id);
 
                 tmpSelected.splice(
                     tmpSelected.findIndex((s) => s === id),
@@ -248,34 +231,20 @@ async function confirmDelete() {
                 );
             }
 
-            Toast.success(
-                `${purge ? "Permanently deleted" : "Deleted"} ${totalSelected} dataset${totalSelected > 1 ? "s" : ""}.`,
-            );
+            Toast.success(`Deleted ${totalSelected} dataset${totalSelected > 1 ? "s" : ""}.`);
 
             selectedItemIds.value = [];
+        } catch (e: any) {
+            Toast.error(`Failed to delete some datasets: ${e}`);
+        } finally {
+            overlay.value = false;
             bulkDeleteOrRestoreLoading.value = false;
-        } else if (deleteModalItem.value) {
-            await deleteDataset(deleteModalItem.value.id, purge);
-            Toast.success(`${purge ? "Permanently deleted" : "Deleted"} dataset "${deleteModalItem.value.name}".`);
-        }
 
-        await load();
-    } catch (error: any) {
-        Toast.error(`Failed to delete dataset${deleteModalBulk.value ? "s" : ""}.`);
-        onError(error);
-    } finally {
-        overlay.value = false;
-        showDeleteModal.value = false;
-        deleteModalPurge.value = false;
-        deleteModalItem.value = null;
-        deleteModalBulk.value = false;
+            await load(true);
+        }
     }
 }
 
-function resetDeleteModal() {
-    deleteModalPurge.value = false;
-}
-
 onMounted(() => {
     load();
 });
@@ -392,24 +361,6 @@ onMounted(() => {
                 last-number
                 @change="onPageChange" />
         </div>
-
-        <!-- Delete confirmation modal -->
-        <BModal
-            v-model="showDeleteModal"
-            :title="deleteModalTitle"
-            title-tag="h2"
-            ok-title="Delete"
-            ok-variant="danger"
-            cancel-title="Cancel"
-            cancel-variant="outline-primary"
-            centered
-            @show="resetDeleteModal"
-            @ok="confirmDelete">
-            <p>{{ deleteModalMessage }}</p>
-            <BFormCheckbox id="purge-checkbox" v-model="deleteModalPurge">
-                Permanently delete (cannot be recovered)
-            </BFormCheckbox>
-        </BModal>
     </div>
 </template>
 

From f9f8dacc46af2dcfce434834626d374afadfe769 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 26 Jan 2026 17:37:09 +0100
Subject: [PATCH 26/39] Replace dataset error alerts with toast notifications

Remove local alert state and error handler in DatasetList and use Toast
notifications instead to surface load, history switch, and tag update
errors consistently across the UI.
---
 client/src/components/Dataset/DatasetList.vue | 21 ++++++-------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Dataset/DatasetList.vue b/client/src/components/Dataset/DatasetList.vue
index 922876c6ab1e..323ddf0f0ee6 100644
--- a/client/src/components/Dataset/DatasetList.vue
+++ b/client/src/components/Dataset/DatasetList.vue
@@ -66,7 +66,6 @@ const overlay = ref(false);
 const sortDesc = ref(true);
 const sortBy = ref("update_time");
 const rows = ref<HDASummary[]>([]);
-const messageVariant = ref("danger");
 const selectedItemIds = ref<string[]>([]);
 const totalDatasets = ref(0);
 const visibleColumns = ref<string[]>(["name", "tags", "history_id", "extension", "update_time"]);
@@ -112,8 +111,8 @@ async function load(showOverlay = false) {
 
         rows.value = data;
         totalDatasets.value = totalMatches;
-    } catch (error: any) {
-        onError(error);
+    } catch (e: any) {
+        Toast.error(`Failed to load datasets: ${e}`);
     } finally {
         loading.value = false;
         overlay.value = false;
@@ -130,8 +129,8 @@ async function onShowDataset(item: HDASummary) {
 
     try {
         await historyStore.applyFilters(history_id, filters);
-    } catch (error: any) {
-        onError(error);
+    } catch (e: any) {
+        Toast.error(`Failed to switch to history: ${e}`);
     }
 }
 
@@ -144,8 +143,8 @@ async function onTags(tags: string[], index: number) {
 
     try {
         await updateTags(item?.id as string, "HistoryDatasetAssociation", tags);
-    } catch (error: any) {
-        onError(error);
+    } catch (e: any) {
+        Toast.error(`Failed to update tags: ${e}`);
     }
 }
 
@@ -170,10 +169,6 @@ async function onPageChange(page: number) {
     await load(true);
 }
 
-function onError(msg: string) {
-    message.value = msg;
-}
-
 function onSelectAll() {
     if (allSelected.value) {
         selectedItemIds.value = [];
@@ -254,10 +249,6 @@ onMounted(() => {
     <div class="dataset-list-container h-100 d-flex flex-column">
         <BreadcrumbHeading :items="breadcrumbItems" />
         <div class="dataset-list-header">
-            <BAlert v-if="message" :variant="messageVariant" show class="m-2">
-                {{ message }}
-            </BAlert>
-
             <DelayedInput class="m-2 mb-3" placeholder="Search Datasets" @change="onQuery" />
 
             <ListHeader

From 19cc91e2cdddda46c7c7445fd6d7d363e519e20e Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 26 Jan 2026 18:41:17 +0100
Subject: [PATCH 27/39] Replace Columns text with cog dropdown and group

Update the list header column selector to use a cog icon button
without a caret, and group options under a clear header. This
creates a cleaner, more compact UI and improves clarity when
showing or hiding columns.
---
 client/src/components/Common/ListHeader.vue | 22 +++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Common/ListHeader.vue b/client/src/components/Common/ListHeader.vue
index ef270ed15b5a..650401bbb2ba 100644
--- a/client/src/components/Common/ListHeader.vue
+++ b/client/src/components/Common/ListHeader.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { faAngleDown, faAngleUp, faBars, faGripVertical } from "@fortawesome/free-solid-svg-icons";
+import { faAngleDown, faAngleUp, faBars, faCog, faGripVertical } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BDropdown, BDropdownItem, BFormCheckbox } from "bootstrap-vue";
+import { BDropdown, BDropdownGroup, BDropdownItem, BFormCheckbox } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import { type ListViewMode, useUserStore } from "@/stores/userStore";
@@ -136,8 +136,18 @@ defineExpose({
                 </GButtonGroup>
             </div>
 
-            <div v-if="columnOptions.length > 0">
-                <BDropdown text="Columns" size="sm" variant="outline-primary" right>
+            <BDropdown
+                v-if="columnOptions.length > 0"
+                text="Columns"
+                size="sm"
+                variant="outline-primary"
+                right
+                no-caret>
+                <template v-slot:button-content>
+                    <FontAwesomeIcon :icon="faCog" fixed-width />
+                </template>
+
+                <BDropdownGroup header="Show/Hide Columns">
                     <BDropdownItem
                         v-for="column in columnOptions"
                         :key="column.key"
@@ -150,8 +160,8 @@ defineExpose({
                             {{ column.label }}
                         </BFormCheckbox>
                     </BDropdownItem>
-                </BDropdown>
-            </div>
+                </BDropdownGroup>
+            </BDropdown>
 
             <slot name="extra-filter" />
         </div>

From f081998f13e85454ba399841ef1ba2992c579dbc Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 28 Jan 2026 19:21:27 +0100
Subject: [PATCH 28/39] Add RowIcon type and remove html field

Introduce a RowIcon interface to support configurable row status icons, including size, tooltip, and loading state. Remove the unused TableField `html` flag.
---
 client/src/components/Common/GTable.types.ts | 17 +++++++++++++++--
 client/src/components/Common/GTable.vue      |  3 +--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Common/GTable.types.ts b/client/src/components/Common/GTable.types.ts
index a65a392e3273..1ca5e6007bda 100644
--- a/client/src/components/Common/GTable.types.ts
+++ b/client/src/components/Common/GTable.types.ts
@@ -1,3 +1,4 @@
+import type { SizeProp } from "@fortawesome/fontawesome-svg-core";
 import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 
 import type { BootstrapVariant } from "@/components/Common";
@@ -33,8 +34,6 @@ export interface TableField {
     hideOnSmall?: boolean;
     /** Custom formatter function for cell values */
     formatter?: (value: any, key: string, item: any) => string;
-    /** Whether to render as HTML (use with caution) */
-    html?: boolean;
 }
 
 /** Sort change event payload */
@@ -104,3 +103,17 @@ export interface TableEmptyState {
     /** Bootstrap variant for styling */
     variant?: BootstrapVariant;
 }
+
+/** Row status icon configuration */
+export interface RowIcon {
+    /** FontAwesome icon (required) */
+    icon: IconDefinition;
+    /** Additional CSS classes */
+    class?: string;
+    /** Icon size (FontAwesome SizeProp) */
+    size?: SizeProp;
+    /** Tooltip text */
+    title?: string;
+    /** Whether icon should spin (loading state) */
+    spin?: boolean;
+}
diff --git a/client/src/components/Common/GTable.vue b/client/src/components/Common/GTable.vue
index 0054b5b8f3ad..e224323e911d 100644
--- a/client/src/components/Common/GTable.vue
+++ b/client/src/components/Common/GTable.vue
@@ -402,8 +402,7 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
                                     { 'hide-on-small': field.hideOnSmall },
                                 ]">
                                 <slot :name="`cell(${field.key})`" :value="item[field.key]" :item="item" :index="index">
-                                    <span v-if="field.html" v-html="getCellValue(item, field)" />
-                                    <span v-else>{{ getCellValue(item, field) }}</span>
+                                    <span>{{ getCellValue(item, field) }}</span>
                                 </slot>
                             </td>
 

From aa144bd0ea24ecfacd9bea8ab154b936e1196925 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 28 Jan 2026 19:32:02 +0100
Subject: [PATCH 29/39] Add optional row status icon support to GTable

Introduce a `statusIcon` prop to render an inline FontAwesome icon
in the first data column of each row.
---
 client/src/components/Common/GTable.vue | 56 +++++++++++++++++++++----
 1 file changed, 49 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Common/GTable.vue b/client/src/components/Common/GTable.vue
index e224323e911d..643bbffff45b 100644
--- a/client/src/components/Common/GTable.vue
+++ b/client/src/components/Common/GTable.vue
@@ -9,6 +9,7 @@ import { useUid } from "@/composables/utils/uid";
 import type {
     FieldAlignment,
     RowClickEvent,
+    RowIcon,
     RowSelectEvent,
     TableAction,
     TableEmptyState,
@@ -132,17 +133,24 @@ interface Props {
      */
     sortDesc?: boolean;
 
-    /**
-     * Additional CSS classes for the table element
-     * @default ""
-     */
-    tableClass?: string | string[];
-
     /**
      * Whether to show select all checkbox in header
      * @default false
      */
     showSelectAll?: boolean;
+
+    /**
+     * Row status icon getter - renders icon inline with first data column
+     * Return undefined to skip icon for a row
+     * @default undefined
+     */
+    statusIcon?: (item: T, index: number) => RowIcon | undefined;
+
+    /**
+     * Additional CSS classes for the table element
+     * @default ""
+     */
+    tableClass?: string | string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -166,6 +174,7 @@ const props = withDefaults(defineProps<Props>(), {
     sortBy: "",
     sortDesc: false,
     striped: true,
+    statusIcon: undefined,
     tableClass: "",
 });
 
@@ -298,6 +307,31 @@ function isRowSelected(index: number) {
     return props.selectedItems.includes(index);
 }
 
+/**
+ * Get status icon for a row
+ */
+function getStatusIcon(item: T, index: number): RowIcon | undefined {
+    return props.statusIcon?.(item, index);
+}
+
+/**
+ * Get icon props for FontAwesomeIcon component
+ * Computes icon attributes once per call
+ */
+function getIconProps(item: T, index: number) {
+    const icon = getStatusIcon(item, index);
+    if (!icon) {
+        return {};
+    }
+    return {
+        icon: icon.icon,
+        class: [icon.class],
+        title: icon.title,
+        spin: icon.spin,
+        size: icon.size,
+    };
+}
+
 /**
  * Helper functions for generating consistent element IDs
  */
@@ -392,7 +426,7 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
 
                             <!-- Data columns -->
                             <td
-                                v-for="field in props.fields"
+                                v-for="(field, fieldIndex) in props.fields"
                                 :id="getCellId(props.id, field.key, index)"
                                 :key="field.key"
                                 :class="[
@@ -401,6 +435,14 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
                                     getAlignmentClass(field.align),
                                     { 'hide-on-small': field.hideOnSmall },
                                 ]">
+                                <template v-if="fieldIndex === 0 && statusIcon">
+                                    <FontAwesomeIcon
+                                        v-if="getStatusIcon(item, index)"
+                                        v-b-tooltip.hover.noninteractive
+                                        v-bind="getIconProps(item, index)"
+                                        fixed-width />
+                                </template>
+
                                 <slot :name="`cell(${field.key})`" :value="item[field.key]" :item="item" :index="index">
                                     <span>{{ getCellValue(item, field) }}</span>
                                 </slot>

From f47c9386e07da55f9c87a94ad706c60f415e9eef Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 28 Jan 2026 19:33:36 +0100
Subject: [PATCH 30/39] Add dataset status icons to list rows

Display contextual status icons for datasets (purged, deleted,
successful, or in-progress) in the dataset list. This improves visual
feedback and makes it easier for users to quickly understand dataset
state at a glance.
---
 client/src/components/Dataset/DatasetList.vue | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Dataset/DatasetList.vue b/client/src/components/Dataset/DatasetList.vue
index 323ddf0f0ee6..03b932d26a44 100644
--- a/client/src/components/Dataset/DatasetList.vue
+++ b/client/src/components/Dataset/DatasetList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faBurn, faCheckCircle, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BLink, BPagination } from "bootstrap-vue";
 import { computed, onMounted, ref } from "vue";
@@ -7,6 +7,8 @@ import { computed, onMounted, ref } from "vue";
 import type { HDASummary } from "@/api";
 import { deleteDataset, loadDatasets } from "@/api/datasets";
 import { updateTags } from "@/api/tags";
+import type { RowIcon } from "@/components/Common/GTable.types";
+import { STATES } from "@/components/History/Content/model/states";
 import { useConfirmDialog } from "@/composables/confirmDialog";
 import { Toast } from "@/composables/toast";
 import { useHistoryStore } from "@/stores/historyStore";
@@ -240,6 +242,28 @@ async function onBulkDelete() {
     }
 }
 
+function getDatasetStatusIcon(item: HDASummary): RowIcon | undefined {
+    if (item.purged) {
+        return { icon: faBurn, class: "text-danger", title: "Purged" };
+    }
+    if (item.deleted) {
+        return { icon: faTrash, class: "text-muted", title: "Deleted" };
+    }
+    if (item.state === "ok") {
+        return { icon: faCheckCircle, class: "text-success", title: "Success" };
+    }
+    const state = item.state && STATES[item.state];
+    if (state?.icon) {
+        return {
+            icon: state.icon,
+            class: `text-${state.status}`,
+            title: state.displayName,
+            spin: state.spin,
+        };
+    }
+    return undefined;
+}
+
 onMounted(() => {
     load();
 });
@@ -292,6 +316,7 @@ onMounted(() => {
                 :overlay-loading="overlay"
                 :selected-items="selectedIndices"
                 :actions="datasetTableActions"
+                :status-icon="getDatasetStatusIcon"
                 @sort-changed="onSort"
                 @row-select="onRowSelect"
                 @select-all="onSelectAll">

From 2e69e7e28b0dfd655f306e77c479805457b929af Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 28 Jan 2026 19:34:41 +0100
Subject: [PATCH 31/39] Remove history navigation link

Remove the clickable dataset name that applied history filters and
clean up unused history store imports and logic.
---
 client/src/components/Dataset/DatasetList.vue | 26 ++-----------------
 1 file changed, 2 insertions(+), 24 deletions(-)

diff --git a/client/src/components/Dataset/DatasetList.vue b/client/src/components/Dataset/DatasetList.vue
index 03b932d26a44..a9a19f97d88b 100644
--- a/client/src/components/Dataset/DatasetList.vue
+++ b/client/src/components/Dataset/DatasetList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faBurn, faCheckCircle, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BLink, BPagination } from "bootstrap-vue";
+import { BAlert, BButton, BPagination } from "bootstrap-vue";
 import { computed, onMounted, ref } from "vue";
 
 import type { HDASummary } from "@/api";
@@ -11,7 +11,6 @@ import type { RowIcon } from "@/components/Common/GTable.types";
 import { STATES } from "@/components/History/Content/model/states";
 import { useConfirmDialog } from "@/composables/confirmDialog";
 import { Toast } from "@/composables/toast";
-import { useHistoryStore } from "@/stores/historyStore";
 import localize from "@/utils/localization";
 
 import { useDatasetTableActions } from "./useDatasetTableActions";
@@ -57,7 +56,6 @@ const allFields = [
 
 const columnOptions = allFields.map((field) => ({ key: field.key, label: field.label }));
 
-const historyStore = useHistoryStore();
 const { confirm } = useConfirmDialog();
 
 const query = ref("");
@@ -121,21 +119,6 @@ async function load(showOverlay = false) {
     }
 }
 
-async function onShowDataset(item: HDASummary) {
-    const { history_id } = item;
-    const filters = {
-        deleted: item.deleted,
-        visible: item.visible,
-        hid: item.hid,
-    };
-
-    try {
-        await historyStore.applyFilters(history_id, filters);
-    } catch (e: any) {
-        Toast.error(`Failed to switch to history: ${e}`);
-    }
-}
-
 async function onTags(tags: string[], index: number) {
     const item = rows.value[index];
 
@@ -321,12 +304,7 @@ onMounted(() => {
                 @row-select="onRowSelect"
                 @select-all="onSelectAll">
                 <template v-slot:cell(name)="row">
-                    <BLink
-                        v-b-tooltip.hover.noninteractive
-                        :title="localize('Show dataset in history panel')"
-                        @click.stop.prevent="onShowDataset(row.item)">
-                        {{ row.item.name }}
-                    </BLink>
+                    <span>{{ row.item.name }}</span>
                 </template>
 
                 <template v-slot:cell(history_id)="row">

From c283ac98c60c727fd4b864a9a4a78838668af8ba Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 28 Jan 2026 19:35:02 +0100
Subject: [PATCH 32/39] Refresh list after copy and delete actions

Pass a refresh callback into useDatasetTableActions and invoke it
after copy, delete, or purge operations so the dataset list stays
in sync with backend changes and reflects updates immediately.
---
 client/src/components/Dataset/DatasetList.vue           | 2 +-
 client/src/components/Dataset/useDatasetTableActions.ts | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Dataset/DatasetList.vue b/client/src/components/Dataset/DatasetList.vue
index a9a19f97d88b..8cc56ac74879 100644
--- a/client/src/components/Dataset/DatasetList.vue
+++ b/client/src/components/Dataset/DatasetList.vue
@@ -71,7 +71,7 @@ const totalDatasets = ref(0);
 const visibleColumns = ref<string[]>(["name", "tags", "history_id", "extension", "update_time"]);
 const bulkDeleteOrRestoreLoading = ref(false);
 
-const { datasetTableActions } = useDatasetTableActions();
+const { datasetTableActions } = useDatasetTableActions(() => load(true));
 
 const currentPage = computed(() => Math.floor(offset.value / limit.value) + 1);
 const fields = computed(() => allFields.filter((field) => visibleColumns.value.includes(field.key)));
diff --git a/client/src/components/Dataset/useDatasetTableActions.ts b/client/src/components/Dataset/useDatasetTableActions.ts
index aa547853948b..40395d151b77 100644
--- a/client/src/components/Dataset/useDatasetTableActions.ts
+++ b/client/src/components/Dataset/useDatasetTableActions.ts
@@ -8,7 +8,7 @@ import { useConfirmDialog } from "@/composables/confirmDialog";
 import { Toast } from "@/composables/toast";
 import { useHistoryStore } from "@/stores/historyStore";
 
-export function useDatasetTableActions() {
+export function useDatasetTableActions(refreshList: () => Promise<void>) {
     const historyStore = useHistoryStore();
     const { currentHistoryId } = storeToRefs(historyStore);
 
@@ -40,7 +40,7 @@ export function useDatasetTableActions() {
             await copyDataset(dataset_id, currentHistoryId.value);
 
             historyStore.loadCurrentHistory();
-
+            await refreshList();
             Toast.success(`Dataset "${item.name}" copied to current history.`);
         } catch (error) {
             Toast.error("Failed to copy dataset");
@@ -63,6 +63,7 @@ export function useDatasetTableActions() {
 
                 Toast.success(`Dataset "${item.name}" ${purge ? "purged" : "deleted"}.`);
                 historyStore.loadCurrentHistory();
+                await refreshList();
             } catch (error) {
                 Toast.error(`Failed to ${purge ? "purge" : "delete"} dataset.`);
             }

From 48c566ba5fb7f16e9d7af235f7c11d9d49418ef2 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 28 Jan 2026 19:36:23 +0100
Subject: [PATCH 33/39] Clarify switch link title for owned histories

Update the history switch link text to better explain that it switches to the selected history and displays the dataset, improving clarity for users who own the history.
---
 client/src/components/History/SwitchToHistoryLink.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/History/SwitchToHistoryLink.vue b/client/src/components/History/SwitchToHistoryLink.vue
index 223848e4226b..0c3f868e9d80 100644
--- a/client/src/components/History/SwitchToHistoryLink.vue
+++ b/client/src/components/History/SwitchToHistoryLink.vue
@@ -43,7 +43,7 @@ const canSwitch = computed(
 
 const linkTitle = computed(() => {
     if (props.filters && history.value && userOwnsHistory(userStore.currentUser, history.value)) {
-        return "Show in history";
+        return "Switch to history and view dataset";
     }
 
     if (historyStore.currentHistoryId === props.historyId) {

From dd79b52078b4dfddb1f3483e831b9256e20cd0a6 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 28 Jan 2026 19:36:46 +0100
Subject: [PATCH 34/39] Ensure default sort when no options

Adjust sort option handling to reliably fall back to the default
sort when no custom options are provided. This prevents undefined
initial sort values and ensures consistent list behavior.
---
 client/src/components/Common/ListHeader.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Common/ListHeader.vue b/client/src/components/Common/ListHeader.vue
index 650401bbb2ba..34134b4519cc 100644
--- a/client/src/components/Common/ListHeader.vue
+++ b/client/src/components/Common/ListHeader.vue
@@ -63,11 +63,11 @@ const defaultSortOptions: SortOption[] = [
 ];
 
 // Use provided sortOptions or fall back to defaults
-const effectiveSortOptions = computed(() => {
-    return props.sortOptions.length > 0 ? props.sortOptions : defaultSortOptions;
-});
+const effectiveSortOptions = computed(() => (props.sortOptions.length > 0 ? props.sortOptions : defaultSortOptions));
 
-const sortBy = ref<SortBy>(effectiveSortOptions.value[0]?.value || "update_time");
+const sortBy = ref<SortBy>(
+    props.sortOptions.length > 0 ? (effectiveSortOptions.value[0]?.value ?? "update_time") : "update_time",
+);
 const currentListViewMode = computed(() => userStore.currentListViewPreferences[props.listId] || "grid");
 
 function onSort(newSortBy: SortBy) {

From ab7baca09ddd41937e07d539d73ae4005e053087 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 28 Jan 2026 19:45:50 +0100
Subject: [PATCH 35/39] Add reset columns action to settings menu

Adds a reset columns control to the list header dropdown that appears when any column is hidden. This allows users to quickly restore the default column visibility, improving usability when managing column settings.
---
 client/src/components/Common/ListHeader.vue | 27 ++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Common/ListHeader.vue b/client/src/components/Common/ListHeader.vue
index 34134b4519cc..f65eae24ad16 100644
--- a/client/src/components/Common/ListHeader.vue
+++ b/client/src/components/Common/ListHeader.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { faAngleDown, faAngleUp, faBars, faCog, faGripVertical } from "@fortawesome/free-solid-svg-icons";
+import { faAngleDown, faAngleUp, faBars, faCog, faGripVertical, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BDropdown, BDropdownGroup, BDropdownItem, BFormCheckbox } from "bootstrap-vue";
+import { BDropdown, BDropdownGroup, BDropdownHeader, BDropdownItem, BFormCheckbox } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import { type ListViewMode, useUserStore } from "@/stores/userStore";
@@ -50,6 +50,7 @@ const emit = defineEmits<{
     (e: "select-all"): void;
     (e: "toggle-column", key: string): void;
     (e: "sort-changed", sortBy: string, sortDesc: boolean): void;
+    (e: "reset-columns"): void;
 }>();
 
 const userStore = useUserStore();
@@ -70,6 +71,10 @@ const sortBy = ref<SortBy>(
 );
 const currentListViewMode = computed(() => userStore.currentListViewPreferences[props.listId] || "grid");
 
+const isAColumnNotVisible = computed(() => {
+    return props.columnOptions.some((column) => !props.visibleColumns.includes(column.key));
+});
+
 function onSort(newSortBy: SortBy) {
     if (sortBy.value === newSortBy) {
         sortDesc.value = !sortDesc.value;
@@ -80,6 +85,10 @@ function onSort(newSortBy: SortBy) {
     emit("sort-changed", sortBy.value, sortDesc.value);
 }
 
+function onResetColumns() {
+    emit("reset-columns");
+}
+
 function isColumnVisible(key: string) {
     return props.visibleColumns.includes(key);
 }
@@ -147,7 +156,19 @@ defineExpose({
                     <FontAwesomeIcon :icon="faCog" fixed-width />
                 </template>
 
-                <BDropdownGroup header="Show/Hide Columns">
+                <BDropdownGroup>
+                    <BDropdownHeader>
+                        Show/Hide Columns
+                        <GButton
+                            v-if="isAColumnNotVisible"
+                            transparent
+                            tooltip
+                            title="Reset columns to default"
+                            @click="onResetColumns">
+                            <FontAwesomeIcon :icon="faUndo" fixed-width />
+                        </GButton>
+                    </BDropdownHeader>
+
                     <BDropdownItem
                         v-for="column in columnOptions"
                         :key="column.key"

From 72a5631e543d66cb17378a88c315d69134aea561 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 28 Jan 2026 19:46:07 +0100
Subject: [PATCH 36/39] Add reset columns handler to list view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add an `onResetColumns` handler to restore all dataset columns
to their default visibility and wire it to the table’s
`reset-columns` event, allowing users to quickly revert column
customizations.
---
 client/src/components/Dataset/DatasetList.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/client/src/components/Dataset/DatasetList.vue b/client/src/components/Dataset/DatasetList.vue
index 8cc56ac74879..c20881507ce4 100644
--- a/client/src/components/Dataset/DatasetList.vue
+++ b/client/src/components/Dataset/DatasetList.vue
@@ -171,6 +171,10 @@ function onRowSelect(event: { item: HDASummary; index: number; selected: boolean
     }
 }
 
+function onResetColumns() {
+    visibleColumns.value = allFields.map((field) => field.key);
+}
+
 function onToggleColumn(key: string) {
     const index = visibleColumns.value.indexOf(key);
     if (index > -1) {
@@ -266,6 +270,7 @@ onMounted(() => {
                 :column-options="columnOptions"
                 :visible-columns="visibleColumns"
                 @select-all="onSelectAll"
+                @reset-columns="onResetColumns"
                 @toggle-column="onToggleColumn" />
         </div>
 

From 386b950b22dd0397cc96633f407614d7745092fc Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 28 Jan 2026 19:55:52 +0100
Subject: [PATCH 37/39] Fix compute status icon per row in first cell

Update the first-column v-if condition to call getStatusIcon(item, index)
directly instead of relying on a shared statusIcon value, ensuring the
correct icon is evaluated and rendered for each row.
---
 client/src/components/Common/GTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Common/GTable.vue b/client/src/components/Common/GTable.vue
index 643bbffff45b..c4dbfad1264c 100644
--- a/client/src/components/Common/GTable.vue
+++ b/client/src/components/Common/GTable.vue
@@ -435,7 +435,7 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
                                     getAlignmentClass(field.align),
                                     { 'hide-on-small': field.hideOnSmall },
                                 ]">
-                                <template v-if="fieldIndex === 0 && statusIcon">
+                                <template v-if="fieldIndex === 0 && getStatusIcon(item, index)">
                                     <FontAwesomeIcon
                                         v-if="getStatusIcon(item, index)"
                                         v-b-tooltip.hover.noninteractive

From 936113eb76f5e1619acd8b8a13ace5c77a1ddf3d Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 28 Jan 2026 19:56:07 +0100
Subject: [PATCH 38/39] Update expected tooltip text for switch action

Update SwitchToHistoryLink tests to reflect the new tooltip
label "Switch to history and view dataset" when switching
histories with filters applied, ensuring assertions match
current UI behavior and intent.
---
 .../components/History/SwitchToHistoryLink.test.ts | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/client/src/components/History/SwitchToHistoryLink.test.ts b/client/src/components/History/SwitchToHistoryLink.test.ts
index e7b16cbaefa6..ea39c97cdea8 100644
--- a/client/src/components/History/SwitchToHistoryLink.test.ts
+++ b/client/src/components/History/SwitchToHistoryLink.test.ts
@@ -127,7 +127,11 @@ function mountSwitchToHistoryLinkForHistory(history: HistorySummaryExtended, has
  * @param setsFilters Whether filters are applied to the current history on click
  */
 async function expectActionForHistory(
-    tooltip: "Switch to this history" | "This is your current history" | "View in new tab" | "Show in history",
+    tooltip:
+        | "Switch to this history"
+        | "This is your current history"
+        | "View in new tab"
+        | "Switch to history and view dataset",
     history: HistorySummaryExtended,
     opensInNewTab = false,
     hasFilters = false,
@@ -192,7 +196,7 @@ describe("SwitchToHistoryLink", () => {
         await expectActionForHistory("Switch to this history", history, false, false, true, false);
 
         // Since history was not current, we switch to it AND apply filters
-        await expectActionForHistory("Show in history", history, false, true, true, true);
+        await expectActionForHistory("Switch to history and view dataset", history, false, true, true, true);
     });
 
     it("only applies filters when the history is the Current history", async () => {
@@ -209,7 +213,7 @@ describe("SwitchToHistoryLink", () => {
         await expectActionForHistory("This is your current history", history);
 
         // Since history is already current, we only apply filters
-        await expectActionForHistory("Show in history", history, false, true, false, true);
+        await expectActionForHistory("Switch to history and view dataset", history, false, true, false, true);
     });
 
     it("opens purged history in new tab or applies filters", async () => {
@@ -226,7 +230,7 @@ describe("SwitchToHistoryLink", () => {
         await expectActionForHistory("View in new tab", history, true);
 
         // We switch to the purged history and apply filters
-        await expectActionForHistory("Show in history", history, false, true, true, true);
+        await expectActionForHistory("Switch to history and view dataset", history, false, true, true, true);
     });
 
     it("opens archived history in new tab or applies filters", async () => {
@@ -243,7 +247,7 @@ describe("SwitchToHistoryLink", () => {
         await expectActionForHistory("View in new tab", history, true);
 
         // We switch to the archived history and apply filters
-        await expectActionForHistory("Show in history", history, false, true, true, true);
+        await expectActionForHistory("Switch to history and view dataset", history, false, true, true, true);
     });
 
     it("only opens an accessible unowned history in new tab", async () => {

From 5b7418668e9206b04e42fca799baa0314f1e42c4 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 28 Jan 2026 23:47:39 +0100
Subject: [PATCH 39/39] Update sort selector titles to match UI

Update Selenium test selectors to use correct selectors, ensuring tests correctly locate and interact with sort
controls after label changes.
---
 lib/galaxy_test/selenium/test_histories_list.py      | 4 ++--
 lib/galaxy_test/selenium/test_histories_published.py | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/galaxy_test/selenium/test_histories_list.py b/lib/galaxy_test/selenium/test_histories_list.py
index 338b5cc797c9..5839016deaf1 100644
--- a/lib/galaxy_test/selenium/test_histories_list.py
+++ b/lib/galaxy_test/selenium/test_histories_list.py
@@ -230,8 +230,8 @@ def test_sort_by_name(self):
         self._login()
         self.navigate_to_histories_page()
 
-        self.wait_for_and_click_selector('[data-title="Sort by name ascending"]')
-        self.wait_for_and_click_selector('[data-title="Sort by name ascending"]')
+        self.wait_for_and_click_selector('[data-title="Sort by Name ascending"]')
+        self.wait_for_and_click_selector('[data-title="Sort by Name ascending"]')
         self.sleep_for(self.wait_types.UX_RENDER)
 
         expected_histories = [self.history2_name, self.history3_name]
diff --git a/lib/galaxy_test/selenium/test_histories_published.py b/lib/galaxy_test/selenium/test_histories_published.py
index bf4915b9342d..ea486b1c180f 100644
--- a/lib/galaxy_test/selenium/test_histories_published.py
+++ b/lib/galaxy_test/selenium/test_histories_published.py
@@ -23,8 +23,8 @@ def test_published_histories_sort_by_name(self):
         self._login()
         self.navigate_to_published_histories()
 
-        self.wait_for_and_click_selector('[data-title="Sort by name ascending"]')
-        self.wait_for_and_click_selector('[data-title="Sort by name ascending"]')
+        self.wait_for_and_click_selector('[data-title="Sort by Name ascending"]')
+        self.wait_for_and_click_selector('[data-title="Sort by Name ascending"]')
         self.sleep_for(self.wait_types.UX_RENDER)
 
         sorted_histories = self.get_published_history_names_from_server(sort_by="name")
@@ -36,7 +36,7 @@ def test_published_histories_sort_by_last_update(self):
         self._login()
         self.navigate_to_published_histories()
 
-        self.wait_for_and_click_selector('[data-title="Sort by update time ascending"]')
+        self.wait_for_and_click_selector('[data-title="Sort by Update time ascending"]')
         self.sleep_for(self.wait_types.UX_RENDER)
 
         expected_history_names = self.get_published_history_names_from_server(sort_by="update_time")