Merge pull request #20721 from dannon/dsview-text-wrap (50d2eb39) · Commits · NDIP / Galaxy

client/src/components/Dataset/DatasetState.vue

+20 −3

Original line number	Diff line number	Diff line
		<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

+25 −10

Original line number	Diff line number	Diff line
		@@ -102,11 +102,15 @@ watch(
		class="flex-grow-1"
		:collapse="headerState"
		@click="toggleHeaderCollapse">
		<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

+18 −0

Original line number	Diff line number	Diff line
		@@ -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,
		},

Admin message