draft for simplified workflow run

just syncs the active node id with the graph for now
ahmedhamidawan · Dec 5, 2024 · 4a2e6e5 · 4a2e6e5
1 parent aeff5aa
commit 4a2e6e5
Show file tree

Hide file tree

Showing 7 changed files with 311 additions and 205 deletions.
diff --git a/client/src/components/Form/FormDisplay.vue b/client/src/components/Form/FormDisplay.vue
@@ -12,7 +12,8 @@
         :collapsed-disable-icon="collapsedDisableIcon"
         :on-change="onChange"
         :on-change-form="onChangeForm"
-        :workflow-building-mode="workflowBuildingMode" />
+        :workflow-building-mode="workflowBuildingMode"
+        :active-node-id="activeNodeId" />
 </template>
 
 <script>
@@ -90,6 +91,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        activeNodeId: {
+            type: Number,
+            default: null,
+        },
     },
     data() {
         return {

diff --git a/client/src/components/Form/FormInputs.vue b/client/src/components/Form/FormInputs.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div v-for="(input, index) in inputs" :key="index">
+        <div v-for="(input, index) in inputs" :key="index" :class="{ 'bordered-input': activeNodeId === index }">
             <div v-if="input.type == 'conditional'" class="ui-portlet-section mt-3">
                 <div class="portlet-header">
                     <b>{{ input.test_param.label || input.test_param.name }}</b>
@@ -131,6 +131,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        activeNodeId: {
+            type: Number,
+            default: null,
+        },
     },
     methods: {
         getPrefix(name, index) {
@@ -170,3 +174,12 @@ export default {
     },
 };
 </script>
+
+<style scoped>
+.bordered-input {
+    border: 1px solid blue;
+    border-radius: 0.25rem;
+    padding: 0.5rem;
+    margin: 0.5rem 0;
+}
+</style>
diff --git a/client/src/components/Workflow/Editor/WorkflowGraph.vue b/client/src/components/Workflow/Editor/WorkflowGraph.vue
@@ -11,7 +11,7 @@
             id="canvas-container"
             ref="canvas"
             class="canvas-content"
-            :class="props.isInvocation ? 'fixed-window-height' : 'h-100'"
+            :class="props.fixedHeight ? 'fixed-window-height' : 'h-100'"
             @drop.prevent
             @dragover.prevent>
             <AdaptiveGrid
@@ -104,6 +104,7 @@ const props = defineProps({
     isInvocation: { type: Boolean, default: false },
     showMinimap: { type: Boolean, default: true },
     showZoomControls: { type: Boolean, default: true },
+    fixedHeight: { type: Boolean, default: false },
 });
 
 const { stateStore, stepStore } = useWorkflowStores();

diff --git a/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue b/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
@@ -180,6 +180,7 @@ function stepClicked(nodeId: number | null) {
                             :scroll-to-id="activeNodeId"
                             :show-minimap="props.showMinimap"
                             :show-zoom-controls="props.showZoomControls"
+                            fixed-height
                             is-invocation
                             readonly
                             @stepClicked="stepClicked" />

diff --git a/client/src/components/Workflow/Run/WorkflowRun.vue b/client/src/components/Workflow/Run/WorkflowRun.vue
@@ -179,7 +179,7 @@ defineExpose({
                 v-else-if="invocations.length > 0"
                 :invocations="invocations"
                 :workflow-name="workflowName" />
-            <div v-else class="ui-form-composite">
+            <div v-else>
                 <BAlert
                     v-if="hasUpgradeMessages || hasStepVersionChanges"
                     class="mb-4"