Merge pull request #21144 from ahmedhamidawan/change_invocation_step_state_display_selector

Change invocation step state display selector to fix styling

Author: mvdbeek

client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue

@@ -204,7 +204,9 @@ function stepClicked(nodeId: number | null) {
                     @mouseover="showSideOverlay = true"
                     @mouseleave="showSideOverlay = false">
                     <BCard no-body>
-                        <div v-if="activeNodeId !== null && showSideOverlay" class="overlay overlay-left" />
+                        <div
+                            v-if="activeNodeId !== null && showSideOverlay"
+                            class="graph-scroll-overlay overlay-left" />
                         <WorkflowGraph
                             ref="workflowGraph"
                             class="invocation-graph"
@@ -218,7 +220,9 @@ function stepClicked(nodeId: number | null) {
                             is-invocation
                             readonly
                             @stepClicked="stepClicked" />
-                        <div v-if="activeNodeId !== null && showSideOverlay" class="overlay overlay-right" />
+                        <div
+                            v-if="activeNodeId !== null && showSideOverlay"
+                            class="graph-scroll-overlay overlay-right" />
                     </BCard>
                 </div>
             </div>
@@ -289,11 +293,13 @@ function stepClicked(nodeId: number | null) {
     }
 }
 
-.overlay {
+.graph-scroll-overlay {
     bottom: 0;
     width: 1.5rem;
     background: $gray-200;
     opacity: 0.5;
+    position: absolute;
+    height: 100%;
     &.overlay-left {
         z-index: 1;
     }

client/src/components/WorkflowInvocationState/InvocationStepStateDisplay.vue

@@ -14,7 +14,7 @@ const props = defineProps<{
     <span
         class="d-flex align-items-center"
         data-description="invocation step state counter"
-        :data-state="state"
+        :data-step-state="state"
         :data-count="jobCount">
         <FontAwesomeIcon
             v-if="iconClasses[props.state]"

client/src/utils/navigation/navigation.yml

@@ -1052,7 +1052,7 @@ invocations:
       selector: '//span[contains(@class, "content-title name")][text()="${element_identifier}"]'
     step_output_collection_element_datatype: '[data-step="${order_index}"] .invocation-step-output-collection-details .not-loading .datatype .value'
     step_job_details: '[data-step="${order_index}"] .invocation-step-job-details'
-    step_job_details_state_counter: '[data-description="invocation step state counter"][data-state="${state}"]'
+    step_job_details_state_counter: '[data-description="invocation step state counter"][data-step-state="${state}"]'
     step_job_information: '[data-step="${order_index}"] .invocation-step-job-details .info_data_table'
     step_job_information_tool_id: '[data-step="${order_index}"] .invocation-step-job-details .info_data_table #galaxy-tool-id'
     export_tab: '.invocation-export-tab'