Merge pull request #20721 from dannon/dsview-text-wrap

[25.0] DatasetView Header - fixes text wrapping issues on small screens

Author: mvdbeek

client/src/components/Dataset/DatasetState.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 
 import { STATES } from "@/components/History/Content/model/states";
 import { useDatasetStore } from "@/stores/datasetStore";
 
+import GTooltip from "@/components/BaseComponents/GTooltip.vue";
+
 const datasetStore = useDatasetStore();
 
 const props = defineProps<{
@@ -24,13 +26,28 @@ const contentCls = computed(() => {
         return `alert-${status}`;
     }
 });
+
+const displayText = computed(() => {
+    if (contentState.value?.displayName) {
+        return contentState.value.displayName;
+    }
+
+    const state = dataset.value?.state;
+    return state ? state.replace(/_/g, " ") : "n/a";
+});
+
+const tooltipText = computed(() => contentState.value?.text || null);
+
+const stateBadgeRef = ref<HTMLElement | null>(null);
 </script>
 
 <template>
-    <span v-if="dataset && contentState" class="rounded px-2 py-1 ml-2" :class="contentCls">
+    <span v-if="dataset && contentState" ref="stateBadgeRef" class="rounded px-2 py-1 ml-2" :class="contentCls">
         <span v-if="contentState.icon" class="mr-1">
             <FontAwesomeIcon fixed-width :icon="contentState.icon" :spin="contentState.spin" />
         </span>
-        {{ contentState.text || dataset.state || "n/a" }}
+        {{ displayText }}
+
+        <GTooltip v-if="tooltipText" :reference="stateBadgeRef" :text="tooltipText" />
     </span>
 </template>

client/src/components/Dataset/DatasetView.vue

@@ -102,11 +102,15 @@ watch(
                     class="flex-grow-1"
                     :collapse="headerState"
                     @click="toggleHeaderCollapse">
-                    <span class="dataset-hid">{{ dataset?.hid }}:</span>
-                    <span class="dataset-name font-weight-bold">{{ dataset?.name }}</span>
-                    <span class="dataset-state-header">
-                        <DatasetState :dataset-id="datasetId" />
-                    </span>
+                    <div class="dataset-header-content">
+                        <div class="dataset-title-row">
+                            <span class="dataset-hid">{{ dataset?.hid }}:</span>
+                            <span class="dataset-name font-weight-bold">{{ dataset?.name }}</span>
+                        </div>
+                        <span class="dataset-state-header">
+                            <DatasetState :dataset-id="datasetId" />
+                        </span>
+                    </div>
                 </Heading>
             </div>
             <transition v-if="dataset" name="header">
@@ -279,23 +283,34 @@ watch(
     opacity: 0;
 }
 
-.dataset-hid,
-.dataset-state-header {
-    white-space: nowrap;
+.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;
+    flex: 1 1 auto;
 }
 
 .dataset-hid {
+    white-space: nowrap;
     margin-right: 0.25rem;
 }
 
 .dataset-name {
     word-break: break-word;
+    min-width: 0;
 }
 
 .dataset-state-header {
     font-size: $h5-font-size;
-    vertical-align: middle;
-    margin-left: 0.5rem;
+    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,
     },