Add help text to workflow invocation states

client/src/components/Help/HelpText.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { hasHelp as hasHelpText, help as helpText } from "./terms";
+
+import ConfigurationMarkdown from "@/components/ObjectStore/ConfigurationMarkdown.vue";
+
+interface Props {
+    uri: string;
+    text: string;
+}
+
+const props = defineProps<Props>();
+
+const hasHelp = computed<boolean>(() => {
+    return hasHelpText(props.uri);
+});
+
+const help = computed<string>(() => {
+    return helpText(props.uri) as string;
+});
+</script>
+
+<template>
+    <span>
+        <b-popover
+            v-if="hasHelp"
+            :target="
+                () => {
+                    return $refs.helpTarget;
+                }
+            "
+            triggers="hover"
+            placement="bottom">
+            <ConfigurationMarkdown :markdown="help" :admin="true" />
+        </b-popover>
+        <span v-if="hasHelp" ref="helpTarget" class="help-text">{{ text }}</span>
+        <span v-else>{{ text }}</span>
+    </span>
+</template>
+
+<style scoped>
+/* Give visual indication of mouseover info */
+.help-text {
+    text-decoration-line: underline;
+    text-decoration-style: dashed;
+}
+</style>

client/src/components/Help/terms.js

@@ -0,0 +1,22 @@
+import terms from "./terms.yml";
+
+export function hasHelp(uri) {
+    const parts = uri.split(".");
+    let rest = terms;
+    for (const part of parts) {
+        rest = rest[part];
+        if (rest === undefined) {
+            return false;
+        }
+    }
+    return true;
+}
+
+export function help(uri) {
+    const parts = uri.split(".");
+    let rest = terms;
+    for (const part of parts) {
+        rest = rest[part];
+    }
+    return rest;
+}

client/src/components/Help/terms.yml

@@ -0,0 +1,83 @@
+unix:
+  commandLine: |
+    Galaxy typically runs a class of software called "command-line applications". A command
+    line is essentially a string that describes what application should be run and what parameters
+    it should be run with.
+
+    More information on command lines can be found on [Wikipedia](https://en.wikipedia.org/wiki/Command-line_interface).
+  exitCode: |
+    An exit code is a numeric representation of how an application execution has completed. An exit code of value 0 typically indicates successful execution of an application, while other values indicate a failure.
+
+    More information on exit codes can be found on [Wikipedia](https://en.wikipedia.org/wiki/Exit_status).
+  stdout: |
+    When an application is executed most of its reporting, diagnostic, and logging messages are printed to a stream of
+    data called the "standard output" (often abbreviated as stdout). Error messages are more typically
+    printed to an alternative stream called "standard error".
+
+    More information on standard output can be found on [Wikipedia](https://en.wikipedia.org/wiki/Standard_streams).
+  stderr: |
+    When an application is executed most of its error messages are typically printed to a stream of
+    data called the "standard error" (often abbreviated as stderr). Other reporting, diagnostic, and
+    logging messages are typically printed to an alternative stream called "standard output".
+
+    More information on standard error can be found on [Wikipedia](https://en.wikipedia.org/wiki/Standard_streams).
+  traceback: |
+    A "traceback" is also often called a "stack trace". This is typically used to describe what is
+    happening at various levels of an application at an instant in time and can sometimes be used to
+    debug what is wrong with the execution of an application.
+
+    More information on stack traces can be found on [Wikipedia](https://en.wikipedia.org/wiki/Stack_trace).
+
+galaxy:
+  jobs:
+    states:
+      # upload, waiting, failed, paused, deleting, deleted, stop, stopped, skipped.
+      ok: |
+        This state indicates the job completed normally and Galaxy did not detect any errors with execution. 
+      new: |
+        This state indicates the job is ready to be run. Typically this means a Galaxy job handler will schedule
+        the job and place it into a queued state on its next iteration.
+      queued: |
+        This state indicates that Galaxy has scheduled the job and some external resource has placed it in a queue.
+        Typically, once the job has reached the front of that queue it will be executed and transitioned to the
+        'running' state.
+      error: |
+        This state indicates that Galaxy has attempted to execute this job and there was some issue.
+      failed: |
+        This state indicates that Galaxy has attempted to execute this job and it completed but Galaxy
+        detected some issue with the execution.
+      running: |
+        This state indicates that Galaxy is currently running this job. After the job is complete, it will
+        likely be transitioned to a 'failed' or 'ok' state.
+      paused: |
+        This state indicates that Galaxy has paused attempts to execute this job. This can be because
+        upstream jobs have failed and so inputs will not become available or because job or quota limits
+        have been reached.
+
+  invocations:
+    states:
+      scheduled: |
+        This state indicates the workflow invocation has had all of its job scheduled. This means all the
+        datasets are likely created and Galaxy has created the stubs for the jobs in the workflow. *The jobs
+        themselves might not have been queued or running.*
+
+      ready: |
+        This state indicates the workflow invocation is ready for additional scheduling steps. This means
+        the workflow will likely result in additional datasets and jobs being created over time.
+
+      new: |
+        This state indicates the workflow invocation has been queued up but no datasets or jobs have been
+        created.
+
+      cancelled: |
+        This state indicates the workflow invocation has been cancelled and new jobs or datasets won't
+        be created for this workflow. Most cancellations are caused by user interactions. If problems
+        scheduling the workflow cause a failure that cannot be recovered from, the state will be failed
+        instead of cancelled.
+
+      cancelling: |
+        This state indicates the workflow invocation will be cancelled shortly by Galaxy.
+
+      failed: |
+        This state indicates there was a problem scheduling the workflow invocation. No additional datasets
+        or jobs will be created for this workflow invocation.

client/src/components/JobInformation/CodeRow.vue

@@ -6,7 +6,12 @@
         @mousemove="mouseIsDown ? (mouseMoved = true) : (mouseMoved = false)"
         @mouseup="toggleExpanded()">
         <td>
-            {{ codeLabel }}
+            <span v-if="helpUri">
+                <HelpText :uri="helpUri" :text="codeLabel" />
+            </span>
+            <span v-else>
+                {{ codeLabel }}
+            </span>
         </td>
         <td v-if="codeItem">
             <b-row align-v="center">
@@ -25,15 +30,18 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCompressAlt, faExpandAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import HelpText from "components/Help/HelpText";
 
 library.add(faCompressAlt, faExpandAlt);
 export default {
     components: {
         FontAwesomeIcon,
+        HelpText,
     },
     props: {
         codeLabel: String,
         codeItem: String,
+        helpUri: String,
     },
     data() {
         return {

client/src/components/JobInformation/JobInformation.vue

@@ -16,7 +16,9 @@
                 </tr>
                 <tr v-if="job && job.state">
                     <td>Job State</td>
-                    <td data-description="galaxy-job-state">{{ job.state }}</td>
+                    <td data-description="galaxy-job-state">
+                        <HelpText :uri="`galaxy.jobs.states.${job.state}`" :text="job.state" />
+                    </td>
                 </tr>
                 <tr v-if="job && job.tool_version">
                     <td>Galaxy Tool Version</td>
@@ -40,16 +42,32 @@
                         {{ runTime }}
                     </td>
                 </tr>
-                <CodeRow v-if="job" id="command-line" :code-label="'Command Line'" :code-item="job.command_line" />
-                <CodeRow v-if="job" id="stdout" :code-label="'Tool Standard Output'" :code-item="job.tool_stdout" />
-                <CodeRow v-if="job" id="stderr" :code-label="'Tool Standard Error'" :code-item="job.tool_stderr" />
+                <CodeRow
+                    v-if="job"
+                    id="command-line"
+                    help-uri="unix.commandLine"
+                    :code-label="'Command Line'"
+                    :code-item="job.command_line" />
+                <CodeRow
+                    v-if="job"
+                    id="stdout"
+                    help-uri="unix.stdout"
+                    :code-label="'Tool Standard Output'"
+                    :code-item="job.tool_stdout" />
+                <CodeRow
+                    v-if="job"
+                    id="stderr"
+                    help-uri="unix.stderr"
+                    :code-label="'Tool Standard Error'"
+                    :code-item="job.tool_stderr" />
                 <CodeRow
                     v-if="job && job.traceback"
                     id="traceback"
+                    help-uri="unix.traceback"
                     :code-label="'Unexpected Job Errors'"
                     :code-item="job.traceback" />
                 <tr v-if="job">
-                    <td>Tool Exit Code</td>
+                    <td>Tool <HelpText uri="unix.exitCode" text="Exit Code" /></td>
                     <td id="exit-code">{{ job.exit_code }}</td>
                 </tr>
                 <tr v-if="job && job.job_messages && job.job_messages.length > 0" id="job-messages">
@@ -78,6 +96,7 @@
 
 <script>
 import CopyToClipboard from "components/CopyToClipboard";
+import HelpText from "components/Help/HelpText";
 import { JobDetailsProvider } from "components/providers/JobProvider";
 import UtcDate from "components/UtcDate";
 import { formatDuration, intervalToDuration } from "date-fns";
@@ -92,6 +111,7 @@ export default {
         CodeRow,
         DecodedId,
         JobDetailsProvider,
+        HelpText,
         UtcDate,
         CopyToClipboard,
     },

client/src/components/Workflow/InvocationsList.vue

@@ -70,6 +70,9 @@
             <template v-slot:cell(update_time)="data">
                 <UtcDate :date="data.value" mode="elapsed" />
             </template>
+            <template v-slot:cell(state)="data">
+                <HelpText :uri="`galaxy.invocations.states.${data.value}`" :text="data.value" />
+            </template>
             <template v-slot:cell(execute)="data">
                 <WorkflowRunButton
                     v-if="getStoredWorkflowIdByInstanceId(data.item.workflow_id)"
@@ -87,6 +90,7 @@
 
 <script>
 import { getGalaxyInstance } from "app";
+import HelpText from "components/Help/HelpText";
 import { invocationsProvider } from "components/providers/InvocationsProvider";
 import UtcDate from "components/UtcDate";
 import WorkflowInvocationState from "components/WorkflowInvocationState/WorkflowInvocationState";
@@ -104,6 +108,7 @@ export default {
         UtcDate,
         WorkflowInvocationState,
         WorkflowRunButton,
+        HelpText,
     },
     mixins: [paginationMixin],
     props: {