From bb447e1747b82f6950bded4834bfd04b85d0a1b4 Mon Sep 17 00:00:00 2001 From: Dannon Baker Date: Wed, 30 Jul 2025 10:23:49 -0400 Subject: [PATCH 1/3] DatasetView header display improvements for small screens Use shorter names for state tag (only in datasetview currently) add a tooltip with the full state description Try to adjust wrapping for smaller screens. --- .../src/components/Dataset/DatasetState.vue | 32 +++++++++++++++++-- client/src/components/Dataset/DatasetView.vue | 10 +++--- 2 files changed, 33 insertions(+), 9 deletions(-) diff --git a/client/src/components/Dataset/DatasetState.vue b/client/src/components/Dataset/DatasetState.vue index 0da07aa17f2..c59ea22c838 100644 --- a/client/src/components/Dataset/DatasetState.vue +++ b/client/src/components/Dataset/DatasetState.vue @@ -1,10 +1,12 @@ diff --git a/client/src/components/Dataset/DatasetView.vue b/client/src/components/Dataset/DatasetView.vue index e351a401a84..87e68f03ffb 100644 --- a/client/src/components/Dataset/DatasetView.vue +++ b/client/src/components/Dataset/DatasetView.vue @@ -97,7 +97,7 @@ watch( separator inline size="lg" - class="flex-grow-1" + class="flex-grow-1 d-flex flex-wrap align-items-center" :collapse="headerState" @click="toggleHeaderCollapse"> {{ dataset?.hid }}: @@ -277,23 +277,21 @@ watch( opacity: 0; } -.dataset-hid, -.dataset-state-header { - white-space: nowrap; -} - .dataset-hid { + white-space: nowrap; margin-right: 0.25rem; } .dataset-name { word-break: break-word; + min-width: 0; // Allow flex item to shrink below content size } .dataset-state-header { font-size: $h5-font-size; vertical-align: middle; margin-left: 0.5rem; + flex-shrink: 0; // Prevent state badge from shrinking } .tab-content-panel { From b08984866d68204e6a13107d11231cd3673a7e2b Mon Sep 17 00:00:00 2001 From: Dannon Baker Date: Wed, 30 Jul 2025 10:38:08 -0400 Subject: [PATCH 2/3] Improve responsiveness of DatasetView header dataset name takes priority for horizontal space and state will now kick to a second line when needed. --- client/src/components/Dataset/DatasetView.vue | 37 ++++++++++++++----- 1 file changed, 27 insertions(+), 10 deletions(-) diff --git a/client/src/components/Dataset/DatasetView.vue b/client/src/components/Dataset/DatasetView.vue index 87e68f03ffb..ba59df0e5ad 100644 --- a/client/src/components/Dataset/DatasetView.vue +++ b/client/src/components/Dataset/DatasetView.vue @@ -97,14 +97,18 @@ watch( separator inline size="lg" - class="flex-grow-1 d-flex flex-wrap align-items-center" + class="flex-grow-1" :collapse="headerState" @click="toggleHeaderCollapse"> - {{ dataset?.hid }}: - {{ dataset?.name }} - - - +
+
+ {{ dataset?.hid }}: + {{ dataset?.name }} +
+ + + +
@@ -277,6 +281,20 @@ watch( opacity: 0; } +.dataset-header-content { + display: flex; + flex-wrap: wrap; + align-items: baseline; + gap: 0.5rem; +} + +.dataset-title-row { + display: flex; + align-items: baseline; + min-width: 0; // Allow to shrink below content + flex: 1 1 auto; // Allow to grow and shrink +} + .dataset-hid { white-space: nowrap; margin-right: 0.25rem; @@ -284,14 +302,13 @@ watch( .dataset-name { word-break: break-word; - min-width: 0; // Allow flex item to shrink below content size + min-width: 0; // Allow text to wrap } .dataset-state-header { font-size: $h5-font-size; - vertical-align: middle; - margin-left: 0.5rem; - flex-shrink: 0; // Prevent state badge from shrinking + flex: 0 0 auto; // Don't grow or shrink + white-space: nowrap; // Prevent state badge from wrapping internally } .tab-content-panel { From 14833d47fe73df319ffd548864380807c620056a Mon Sep 17 00:00:00 2001 From: Dannon Baker Date: Wed, 30 Jul 2025 14:15:39 -0400 Subject: [PATCH 3/3] Add explicit display names to dataset states, minor cleanup --- .../src/components/Dataset/DatasetState.vue | 19 +++++-------------- client/src/components/Dataset/DatasetView.vue | 10 +++++----- .../History/Content/model/states.ts | 18 ++++++++++++++++++ 3 files changed, 28 insertions(+), 19 deletions(-) diff --git a/client/src/components/Dataset/DatasetState.vue b/client/src/components/Dataset/DatasetState.vue index c59ea22c838..c37f0694e59 100644 --- a/client/src/components/Dataset/DatasetState.vue +++ b/client/src/components/Dataset/DatasetState.vue @@ -27,26 +27,17 @@ const contentCls = computed(() => { } }); -// Compute short display text - capitalize the state name const displayText = computed(() => { - if (!dataset.value) { - return "n/a"; - } - const state = dataset.value.state; - if (!state) { - return "n/a"; + if (contentState.value?.displayName) { + return contentState.value.displayName; } - // Capitalize first letter and replace underscores with spaces - return state.charAt(0).toUpperCase() + state.slice(1).replace(/_/g, " "); + const state = dataset.value?.state; + return state ? state.replace(/_/g, " ") : "n/a"; }); -// Get the full descriptive text for tooltip -const tooltipText = computed(() => { - return contentState.value?.text || null; -}); +const tooltipText = computed(() => contentState.value?.text || null); -// Ref for the state badge element const stateBadgeRef = ref(null); diff --git a/client/src/components/Dataset/DatasetView.vue b/client/src/components/Dataset/DatasetView.vue index ba59df0e5ad..1e50e009a30 100644 --- a/client/src/components/Dataset/DatasetView.vue +++ b/client/src/components/Dataset/DatasetView.vue @@ -291,8 +291,8 @@ watch( .dataset-title-row { display: flex; align-items: baseline; - min-width: 0; // Allow to shrink below content - flex: 1 1 auto; // Allow to grow and shrink + min-width: 0; + flex: 1 1 auto; } .dataset-hid { @@ -302,13 +302,13 @@ watch( .dataset-name { word-break: break-word; - min-width: 0; // Allow text to wrap + min-width: 0; } .dataset-state-header { font-size: $h5-font-size; - flex: 0 0 auto; // Don't grow or shrink - white-space: nowrap; // Prevent state badge from wrapping internally + flex: 0 0 auto; + white-space: nowrap; } .tab-content-panel { diff --git a/client/src/components/History/Content/model/states.ts b/client/src/components/History/Content/model/states.ts index eeef948f79f..5f2240c8358 100644 --- a/client/src/components/History/Content/model/states.ts +++ b/client/src/components/History/Content/model/states.ts @@ -14,6 +14,7 @@ type State = interface StateRepresentation { status: "success" | "warning" | "info" | "danger" | "secondary"; text?: string; + displayName?: string; icon?: string; spin?: boolean; nonDb?: boolean; @@ -31,28 +32,33 @@ export const STATES: StateMap = { /** has successfully completed running */ ok: { status: "success", + displayName: "ok", }, /** has no data */ empty: { status: "success", text: "No data.", + displayName: "empty", }, /** was created without a tool */ new: { status: "warning", text: "This is a new dataset and not all of its data are available yet.", + displayName: "new", icon: "clock", }, /** the job that will produce the dataset queued in the runner */ queued: { status: "warning", text: "This job is waiting to run.", + displayName: "queued", icon: "clock", }, /** the job that will produce the dataset is running */ running: { status: "warning", text: "This job is currently running.", + displayName: "running", icon: "spinner", spin: true, }, @@ -60,6 +66,7 @@ export const STATES: StateMap = { setting_metadata: { status: "warning", text: "Metadata is being auto-detected.", + displayName: "setting metadata", icon: "spinner", spin: true, }, @@ -67,6 +74,7 @@ export const STATES: StateMap = { upload: { status: "warning", text: "This dataset is currently uploading.", + displayName: "uploading", icon: "spinner", spin: true, }, @@ -74,41 +82,48 @@ export const STATES: StateMap = { deferred: { status: "info", text: "This dataset is remote, has not been ingested by Galaxy, and full metadata may not be available.", + displayName: "deferred", icon: "cloud", }, /** the job that will produce the dataset paused */ paused: { status: "info", text: "This job is paused. Use the 'Resume Paused Jobs' in the history menu to resume.", + displayName: "paused", icon: "pause", }, /** deleted while uploading */ discarded: { status: "danger", text: "This dataset is discarded - the job creating it may have been cancelled or it may have been imported without file data.", + displayName: "discarded", icon: "exclamation-triangle", }, /** the tool producing this dataset has errored */ error: { status: "danger", text: "An error occurred with this dataset.", + displayName: "error", icon: "exclamation-triangle", }, /** metadata discovery/setting failed or errored (but otherwise ok) */ failed_metadata: { status: "danger", text: "Metadata generation failed. Please retry.", + displayName: "failed metadata", icon: "exclamation-triangle", }, /** the job has failed, this is not a dataset but a job state used in the collection job state summary. */ failed: { status: "danger", + displayName: "failed", icon: "exclamation-triangle", }, /** the dataset is not yet loaded in the UI. This state is only visual and transitional, it does not exist in the database. */ placeholder: { status: "secondary", text: "This dataset is being fetched.", + displayName: "loading", icon: "spinner", spin: true, nonDb: true, @@ -117,6 +132,7 @@ export const STATES: StateMap = { failed_populated_state: { status: "danger", text: "Failed to populate the collection.", + displayName: "failed", icon: "exclamation-triangle", nonDb: true, }, @@ -124,12 +140,14 @@ export const STATES: StateMap = { new_populated_state: { status: "warning", text: "This is a new collection and not all of its data are available yet.", + displayName: "new", icon: "clock", nonDb: true, }, inaccessible: { status: "warning", text: "User not allowed to access this dataset.", + displayName: "inaccessible", icon: "lock", nonDb: true, },