Add explicit display names to dataset states, minor cleanup

Author: dannon

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<HTMLElement | null>(null);
 </script>
 

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 {

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,84 +32,98 @@ 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,
     },
     /** metadata for the dataset is being discovered/set */
     setting_metadata: {
         status: "warning",
         text: "Metadata is being auto-detected.",
+        displayName: "setting metadata",
         icon: "spinner",
         spin: true,
     },
     /** is uploading and not ready */
     upload: {
         status: "warning",
         text: "This dataset is currently uploading.",
+        displayName: "uploading",
         icon: "spinner",
         spin: true,
     },
     /** remote dataset */
     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,19 +132,22 @@ export const STATES: StateMap = {
     failed_populated_state: {
         status: "danger",
         text: "Failed to populate the collection.",
+        displayName: "failed",
         icon: "exclamation-triangle",
         nonDb: true,
     },
     /** the `populated_state: new`. This state is only visual and transitional, it does not exist in the database. */
     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,
     },