use FlexPanel for steps in InvocationGraph

client/src/components/Panels/FlexPanel.vue

@@ -3,7 +3,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useDebounce, useDraggable } from "@vueuse/core";
-import { computed, type PropType, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 
 import { useTimeoutThrottle } from "@/composables/throttle";
 
@@ -13,25 +13,25 @@ const { throttle } = useTimeoutThrottle(10);
 
 library.add(faChevronLeft, faChevronRight);
 
-const props = defineProps({
-    collapsible: {
-        type: Boolean,
-        default: true,
-    },
-    side: {
-        type: String as PropType<"left" | "right">,
-        default: "right",
-    },
+interface Props {
+    collapsible?: boolean;
+    side?: "left" | "right";
+    minWidth?: number;
+    maxWidth?: number;
+    defaultWidth?: number;
+}
+const props = withDefaults(defineProps<Props>(), {
+    collapsible: true,
+    side: "right",
+    minWidth: 200,
+    maxWidth: 800,
+    defaultWidth: 300,
 });
 
-const minWidth = 200;
-const maxWidth = 800;
-const defaultWidth = 300;
-
 const draggable = ref<HTMLElement | null>(null);
 const root = ref<HTMLElement | null>(null);
 
-const panelWidth = ref(defaultWidth);
+const panelWidth = ref(props.defaultWidth);
 const show = ref(true);
 
 const { position, isDragging } = useDraggable(draggable, {
@@ -79,10 +79,39 @@ watch(position, () => {
 
         const rectRoot = root.value.getBoundingClientRect();
         const rectDraggable = draggable.value.getBoundingClientRect();
-        panelWidth.value = determineWidth(rectRoot, rectDraggable, minWidth, maxWidth, props.side, position.value.x);
+        panelWidth.value = determineWidth(
+            rectRoot,
+            rectDraggable,
+            props.minWidth,
+            props.maxWidth,
+            props.side,
+            position.value.x
+        );
     });
 });
 
+/** If the the `maxWidth` changes, prevent the panel from exceeding it */
+watch(
+    () => props.maxWidth,
+    (newVal) => {
+        if (newVal && panelWidth.value > newVal) {
+            panelWidth.value = props.maxWidth;
+        }
+    },
+    { immediate: true }
+);
+
+/** If the `minWidth` changes, ensure the panel width is at least the `minWidth` */
+watch(
+    () => props.minWidth,
+    (newVal) => {
+        if (newVal && panelWidth.value < newVal) {
+            panelWidth.value = newVal;
+        }
+    },
+    { immediate: true }
+);
+
 function onKeyLeft() {
     if (props.side === "left") {
         decreaseWidth();
@@ -100,11 +129,11 @@ function onKeyRight() {
 }
 
 function increaseWidth(by = 50) {
-    panelWidth.value = Math.min(panelWidth.value + by, maxWidth);
+    panelWidth.value = Math.min(panelWidth.value + by, props.maxWidth);
 }
 
 function decreaseWidth(by = 50) {
-    panelWidth.value = Math.max(panelWidth.value - by, minWidth);
+    panelWidth.value = Math.max(panelWidth.value - by, props.minWidth);
 }
 
 const sideClasses = computed(() => ({

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

@@ -9,6 +9,7 @@ import {
     faTimes,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { useElementBounding } from "@vueuse/core";
 import { BAlert, BButton, BCard, BCardBody, BCardHeader } from "bootstrap-vue";
 import { computed, onUnmounted, ref, watch } from "vue";
 
@@ -28,6 +29,7 @@ import ExternalLink from "@/components/ExternalLink.vue";
 import JobInformation from "@/components/JobInformation/JobInformation.vue";
 import JobParameters from "@/components/JobParameters/JobParameters.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
+import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import WorkflowGraph from "@/components/Workflow/Editor/WorkflowGraph.vue";
 
 library.add(faArrowDown, faChevronDown, faChevronUp, faSignInAlt, faSitemap, faTimes);
@@ -145,6 +147,12 @@ if (props.isFullPage) {
     );
 }
 
+// properties for handling the flex-draggable steps panel
+const invocationContainer = ref<HTMLDivElement | null>(null);
+const { width: containerWidth } = useElementBounding(invocationContainer);
+const minWidth = computed(() => containerWidth.value * 0.3);
+const maxWidth = computed(() => 0.7 * containerWidth.value);
+
 onUnmounted(() => {
     clearTimeout(pollTimeout.value);
 });
@@ -222,8 +230,8 @@ function getStepKey(step: Step) {
                 explicit-key="expanded-invocation-steps"
                 :scope-key="props.invocation.id"
                 :get-item-key="getStepKey">
-                <div class="d-flex">
-                    <div v-if="!hideGraph" class="position-relative" style="width: 60%">
+                <div ref="invocationContainer" class="d-flex">
+                    <div v-if="!hideGraph" class="position-relative w-100">
                         <BCard no-body>
                             <WorkflowGraph
                                 :steps="steps"
@@ -254,16 +262,28 @@ function getStepKey(step: Step) {
                         <FontAwesomeIcon :icon="faSitemap" />
                         <div v-localize>Show Graph</div>
                     </BButton>
-                    <WorkflowInvocationSteps
-                        :steps="steps"
-                        :store-id="storeId"
-                        :invocation="invocationRef"
-                        :workflow="props.workflow"
-                        :is-full-page="props.isFullPage"
-                        :hide-graph="hideGraph"
-                        :showing-job-id="showingJobId || ''"
-                        @update:showing-job-id="(jobId) => (showingJobId = jobId)"
-                        @focus-on-step="toggleActiveStep" />
+                    <component
+                        :is="!hideGraph ? FlexPanel : 'div'"
+                        v-if="containerWidth"
+                        side="right"
+                        :collapsible="false"
+                        class="ml-2"
+                        :class="{ 'w-100': hideGraph }"
+                        :min-width="minWidth"
+                        :max-width="maxWidth"
+                        :default-width="containerWidth * 0.4">
+                        <WorkflowInvocationSteps
+                            class="graph-steps-aside"
+                            :steps="steps"
+                            :store-id="storeId"
+                            :invocation="invocationRef"
+                            :workflow="props.workflow"
+                            :is-full-page="props.isFullPage"
+                            :hide-graph="hideGraph"
+                            :showing-job-id="showingJobId || ''"
+                            @update:showing-job-id="(jobId) => (showingJobId = jobId)"
+                            @focus-on-step="toggleActiveStep" />
+                    </component>
                 </div>
             </ExpandedItems>
             <BCard v-if="!hideGraph" ref="jobCard" class="mt-1" no-body>
@@ -324,4 +344,10 @@ function getStepKey(step: Step) {
         opacity: 0.8;
     }
 }
+
+.graph-steps-aside {
+    overflow-y: scroll;
+    scroll-behavior: smooth;
+    max-height: 60vh;
+}
 </style>

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

@@ -84,7 +84,7 @@ function showJob(jobId: string | undefined) {
 </script>
 
 <template>
-    <div ref="stepsDiv" class="ml-2" :class="!props.hideGraph ? 'graph-steps-aside' : 'w-100'">
+    <div ref="stepsDiv" class="d-flex flex-column w-100">
         <!-- Input Steps grouped in a separate portlet -->
         <div v-if="workflowInputSteps.length > 1" class="ui-portlet-section w-100">
             <div
@@ -134,12 +134,3 @@ function showJob(jobId: string | undefined) {
             @update:expanded="emit('focus-on-step', step.id)" />
     </div>
 </template>
-
-<style scoped>
-.graph-steps-aside {
-    overflow-y: scroll;
-    scroll-behavior: smooth;
-    width: 40%;
-    max-height: 60vh;
-}
-</style>