make it obvious that jobs are clickable and viewable at the bottom

By always showing the card at the bottom, with instructions on how to view a job.
galaxyproject · Apr 25, 2024 · 9736c8c · 9736c8c
1 parent 255ae1b
commit 9736c8c
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 23 deletions.
diff --git a/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue b/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
@@ -260,34 +260,46 @@ function getStepKey(step: Step) {
                         @focus-on-step="toggleActiveStep" />
                 </div>
             </ExpandedItems>
-            <BCard v-if="showingJobId" ref="jobCard" class="mt-1" no-body :data-index="showingJobId">
+            <BCard v-if="!hideGraph" ref="jobCard" class="mt-1" no-body>
                 <BCardHeader class="d-flex justify-content-between align-items-center">
                     <Heading inline size="md">
-                        Showing Job Details for
-                        <ExternalLink :href="withPrefix(`/jobs/${showingJobId}/view`)">
-                            <code>{{ showingJobId }}</code>
-                        </ExternalLink>
+                        <span v-if="showingJobId">
+                            Showing Job Details for
+                            <ExternalLink :href="withPrefix(`/jobs/${showingJobId}/view`)">
+                                <code>{{ showingJobId }}</code>
+                            </ExternalLink>
+                        </span>
+                        <span v-else>No Job Selected</span>
                     </Heading>
                     <div>
-                        <BButton v-b-tooltip.hover.noninteractive title="Scroll to Job" @click="scrollJobToView()">
+                        <BButton
+                            v-if="showingJobId"
+                            v-b-tooltip.hover.noninteractive
+                            title="Scroll to Job"
+                            @click="scrollJobToView()">
                             <FontAwesomeIcon :icon="faArrowDown" />
                         </BButton>
-                        <BButton v-b-tooltip.hover.noninteractive title="Hide Job" @click="showingJobId = undefined">
+                        <BButton
+                            v-if="showingJobId"
+                            v-b-tooltip.hover.noninteractive
+                            title="Hide Job"
+                            @click="showingJobId = undefined">
                             <FontAwesomeIcon :icon="faTimes" />
                         </BButton>
                     </div>
                 </BCardHeader>
                 <BCardBody>
-                    <JobProvider :id="showingJobId" v-slot="{ item, loading }">
-                        <div v-if="loading">
+                    <JobProvider v-if="showingJobId" :id="showingJobId" v-slot="{ item, loading }">
+                        <BAlert v-if="loading" show>
                             <LoadingSpan message="Loading Job Information" />
-                        </div>
+                        </BAlert>
                         <div v-else ref="loadedJobInfo">
                             <JobInformation v-if="item" :job_id="item.id" />
                             <p></p>
                             <JobParameters v-if="item" :job-id="item.id" :include-title="false" />
                         </div>
                     </JobProvider>
+                    <BAlert v-else show>Select a job from a step in the invocation to view its details here.</BAlert>
                 </BCardBody>
             </BCard>
         </div>

diff --git a/client/src/components/WorkflowInvocationState/JobStep.vue b/client/src/components/WorkflowInvocationState/JobStep.vue
@@ -1,6 +1,5 @@
 <template>
     <b-card v-if="jobs">
-        <div>Click on any job to expand its details below:</div>
         <b-table
             small
             caption-top
@@ -11,19 +10,28 @@
             :striped="!invocationGraph"
             @row-clicked="rowClicked">
             <template v-slot:cell(showing_job)="data">
-                <FontAwesomeIcon
-                    v-if="showingJobId === data.item.id || data.item._showDetails"
-                    icon="caret-down"
-                    size="lg" />
-                <FontAwesomeIcon v-else icon="caret-right" size="lg" />
+                <span v-if="showingJobId === data.item.id || data.item._showDetails">
+                    <FontAwesomeIcon v-if="!invocationGraph" icon="caret-down" size="lg" />
+                    <span v-else>
+                        <FontAwesomeIcon class="text-primary" icon="fa-eye" />
+                    </span>
+                </span>
+                <span v-else>
+                    <FontAwesomeIcon v-if="!invocationGraph" icon="caret-right" size="lg" />
+                    <span v-else>
+                        <FontAwesomeIcon icon="fa-eye" />
+                    </span>
+                </span>
             </template>
             <template v-slot:row-details="row">
                 <JobProvider :id="row.item.id" v-slot="{ item, loading }">
                     <div v-if="loading"><b-spinner label="Loading Job..."></b-spinner></div>
                     <div v-else>
-                        <JobInformation v-if="item" :job_id="item.id" />
-                        <p></p>
-                        <JobParameters v-if="item" :job-id="item.id" :include-title="false" />
+                        <b-card>
+                            <JobInformation v-if="item" :job_id="item.id" />
+                            <p></p>
+                            <JobParameters v-if="item" :job-id="item.id" :include-title="false" />
+                        </b-card>
                     </div>
                 </JobProvider>
             </template>
@@ -106,9 +114,6 @@ export default {
             }
         },
         showingJobCls(item, type) {
-            if (!this.invocationGraph) {
-                return "";
-            }
             let cls = "job-tr-class cursor-pointer unselectable";
             if (this.showingJobId === item.id) {
                 cls += " showing-job";

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
@@ -60,7 +60,9 @@
                                     v-if="workflowStepType == 'tool'"
                                     class="invocation-step-job-details"
                                     :open="inGraphView">
-                                    <summary><b>Jobs</b></summary>
+                                    <summary>
+                                        <b>Jobs <i>(Click on any job to view its details)</i></b>
+                                    </summary>
                                     <JobStep
                                         v-if="stepDetails.jobs?.length"
                                         :key="inGraphView"