render parts of InvocationGraph only if Summary tab is active

Otherwise, this selenium fails:
`FAILED lib/galaxy_test/selenium/test_workflow_invocation_details.py::TestWorkflowInvocationDetails::test_job_details - selenium.common.exceptions.TimeoutException: Message: Timeout waiting on CSS selector [[data-step="1"] .step-title] to become visible.`
because even if you change tab from Summary to Details, the content is still in the template and the steps in the Summary conflicts with the steps in the Details tab; and are hence not detected in the selenium.

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

@@ -45,6 +45,8 @@ interface Props {
     initialX?: number;
     /** The initial y position for the graph */
     initialY?: number;
+    /** Whether the parent component is visible */
+    visible?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -53,6 +55,7 @@ const props = withDefaults(defineProps<Props>(), {
     showZoomControls: true,
     initialX: -40,
     initialY: -40,
+    visible: true,
 });
 
 const loadingGraph = ref(true);
@@ -168,7 +171,7 @@ function showStep(jobId: string) {
 </script>
 
 <template>
-    <div id="center" class="container-root m-3 w-100 overflow-auto d-flex flex-column">
+    <div class="container-root m-3 w-100 overflow-auto d-flex flex-column">
         <BAlert v-if="initialLoading" show variant="info">
             <LoadingSpan message="Loading Invocation Graph" />
         </BAlert>
@@ -178,7 +181,7 @@ function showStep(jobId: string) {
             </BAlert>
             <BAlert v-else show variant="danger"> Unknown Error </BAlert>
         </div>
-        <div v-else-if="steps && datatypesMapper">
+        <div v-else-if="visible && steps && datatypesMapper">
             <ExpandedItems
                 explicit-key="expanded-invocation-steps"
                 :scope-key="props.invocation.id"

client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue

@@ -20,6 +20,12 @@ import LoadingSpan from "@/components/LoadingSpan.vue";
 
 library.add(faArrowLeft);
 
+const TABS = {
+    SUMMARY: 0,
+    DETAILS: 1,
+    EXPORT: 2,
+};
+
 interface Props {
     invocationId: string;
     index?: number;
@@ -41,6 +47,7 @@ const invocationStore = useInvocationStore();
 
 const stepStatesInterval = ref<any>(undefined);
 const jobStatesInterval = ref<any>(undefined);
+const activeTab = ref(TABS.SUMMARY);
 
 const invocation = computed(
     () => invocationStore.getInvocationById(props.invocationId) as WorkflowInvocationElementView
@@ -101,8 +108,8 @@ function cancelWorkflowSchedulingLocal() {
 </script>
 
 <template>
-    <BTabs v-if="invocation" :class="{ 'position-relative': isInvocationRoute }">
-        <BTab title="Summary" active>
+    <BTabs v-if="invocation" v-model="activeTab" :class="{ 'position-relative': isInvocationRoute }">
+        <BTab title="Summary">
             <WorkflowInvocationSummary
                 class="invocation-summary"
                 :invocation="invocation"
@@ -111,6 +118,7 @@ function cancelWorkflowSchedulingLocal() {
                 :invocation-scheduling-terminal="invocationSchedulingTerminal"
                 :job-states-summary="jobStatesSummary"
                 :is-subworkflow="isSubworkflow"
+                :visible="activeTab === TABS.SUMMARY"
                 @invocation-cancelled="cancelWorkflowSchedulingLocal" />
         </BTab>
         <BTab title="Details">

client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue

@@ -33,6 +33,7 @@ interface Props {
     jobStatesSummary: InvocationJobsSummary;
     index?: number;
     isSubworkflow?: boolean;
+    visible?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -250,7 +251,8 @@ function onCancel() {
                     :invocation="invocation"
                     :workflow="workflow"
                     :is-terminal="invocationAndJobTerminal"
-                    :is-scheduled="invocationSchedulingTerminal" />
+                    :is-scheduled="invocationSchedulingTerminal"
+                    :visible="visible" />
             </div>
             <BAlert v-else-if="isSubworkflow" variant="secondary" show>
                 This subworkflow is