From 4be0e12e00bf0e331791435cc6e5046bfeafa0dc Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 31 Mar 2026 14:43:01 -0500
Subject: [PATCH] use editor-format graphStep directly for step config form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The `graphStep` passed to `WorkflowInvocationStep` is already the full editor-format step loaded via `getWorkflowFull` (style=editor) in `useInvocationGraph`. It already has `config_form` populated with the correct parameter values, as well as `label`, `tool_state`, and `post_job_actions` — so there is no need to call `build_module` at all in the graph view.

`activeStepWithConfig` now returns `graphStep` directly when its `config_form` is present, rendering the form immediately with no network roundtrip and showing the actual values set in the workflow. The `build_module` fetch is kept as a fallback for non-graph contexts where `graphStep` is absent or incomplete, using `tool_state` (the proper editor-format) instead of the previously used `tool_inputs`.
---
 .../WorkflowInvocationStep.vue                   | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
index e8551cbd8ed..87f5fbb75b2 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
@@ -152,10 +152,15 @@ const jobsTabTitle = computed(() => {
 });
 
 const activeStepWithConfig = computed(() => {
+    // graphStep is the full editor-format step (already has config_form with correct values)
+    if (props.graphStep?.config_form) {
+        return props.graphStep as any;
+    }
+    // If the graphStep doesn't have config_form, we may be able to get it from stepConfigData (fetched when user clicks on Step Config tab)
     if (!stepConfigData.value) {
         return null;
     }
-    const step = props.workflowStep as any;
+    const step = props.graphStep ?? (props.workflowStep as any);
     return {
         ...step,
         config_form: stepConfigData.value.config_form,
@@ -165,16 +170,17 @@ const activeStepWithConfig = computed(() => {
 });
 
 async function fetchStepConfig() {
-    if (stepConfigData.value || loadingStepConfig.value) {
+    // graphStep already has config_form — no fetch needed
+    if (props.graphStep?.config_form || stepConfigData.value || loadingStepConfig.value) {
         return;
     }
     loadingStepConfig.value = true;
     try {
-        const step = props.workflowStep as any;
+        const step = props.graphStep ?? props.workflowStep;
         const { data } = await axios.post(`${getAppRoot()}api/workflows/build_module`, {
             type: step.type,
-            content_id: step.content_id ?? step.tool_id,
-            tool_state: step.tool_state ?? "{}",
+            content_id: "content_id" in step ? step.content_id : step.tool_id,
+            tool_state: "tool_state" in step ? step.tool_state : {},
         });
         stepConfigData.value = data;
     } finally {