feat: display arguments values in input nodes in run view

src/components/Editor/IOEditor/InputValueEditor/FormFields/FormFields.tsx

@@ -100,6 +100,7 @@ const TextField = ({
   disabled,
   inputName,
   actions,
+  isDefault = true,
 }: {
   inputValue: string;
   onInputChange: (value: string) => void;
@@ -108,22 +109,26 @@ const TextField = ({
   disabled: boolean;
   inputName: string;
   actions?: FormFieldAction[];
+  isDefault?: boolean;
 }) => (
   <FormField
     label="Value"
     id={`input-value-${inputName}`}
     actions={actions}
     labelSuffix={
-      <InlineStack gap="1" className="ml-2">
-        <Icon
-          name="SquareCheckBig"
-          size="sm"
-          className="text-muted-foreground"
-        />
-        <Paragraph tone="subdued" size="xs">
-          Use as default
-        </Paragraph>
-      </InlineStack>
+      isDefault ? (
+        <InlineStack gap="1" className="ml-2">
+          <Icon
+            name="SquareCheckBig"
+            size="sm"
+            className="text-muted-foreground"
+          />
+
+          <Paragraph tone="subdued" size="xs">
+            Use as default
+          </Paragraph>
+        </InlineStack>
+      ) : null
     }
   >
     <Textarea

src/components/Editor/IOEditor/InputValueEditor/InputValueEditor.tsx

@@ -25,10 +25,12 @@ import { InputValueDialog } from "./InputValueDialog";
 interface InputValueEditorProps {
   input: InputSpec;
   disabled?: boolean;
+  argumentValue?: string;
 }
 
 export const InputValueEditor = ({
   input,
+  argumentValue,
   disabled = false,
 }: InputValueEditorProps) => {
   const notify = useToastNotification();
@@ -49,7 +51,8 @@ export const InputValueEditor = ({
   const [isValueDialogOpen, setIsValueDialogOpen] = useState(false);
   const [triggerSave, setTriggerSave] = useState(false);
 
-  const initialInputValue = input.value ?? input.default ?? "";
+  const defaultInputValue = input.value ?? input.default ?? "";
+  const initialInputValue = argumentValue ?? defaultInputValue;
   const initialIsOptional = false; // When optional inputs are permitted again change to: input.optional ?? true
 
   const [inputValue, setInputValue] = useState(initialInputValue);
@@ -266,6 +269,7 @@ export const InputValueEditor = ({
         placeholder={placeholder}
         disabled={disabled}
         inputName={input.name}
+        isDefault={!argumentValue || argumentValue === defaultInputValue}
         actions={[
           {
             icon: "Maximize2",

src/components/shared/Execution/PipelineIO.tsx

@@ -11,6 +11,7 @@ import { Paragraph } from "@/components/ui/typography";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { useContextPanel } from "@/providers/ContextPanelProvider";
 import { type InputSpec, type OutputSpec } from "@/utils/componentSpec";
+import { getArgumentValue } from "@/utils/nodes/taskArguments";
 
 import { InputValueEditor } from "../../Editor/IOEditor/InputValueEditor";
 import { OutputNameEditor } from "../../Editor/IOEditor/OutputNameEditor";
@@ -174,14 +175,3 @@ function IORow({ spec, value, type, actions }: IORowProps) {
     </InlineStack>
   );
 }
-
-function getArgumentValue(
-  taskArguments: TaskSpecOutput["arguments"] | undefined,
-  inputName: string,
-) {
-  const argument = taskArguments?.[inputName];
-  if (typeof argument === "string") {
-    return argument;
-  }
-  return undefined;
-}

src/components/shared/ReactFlow/FlowCanvas/IONode/IONode.tsx

@@ -10,6 +10,8 @@ import { Paragraph } from "@/components/ui/typography";
 import { cn } from "@/lib/utils";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { useContextPanel } from "@/providers/ContextPanelProvider";
+import { useExecutionDataOptional } from "@/providers/ExecutionDataProvider";
+import { getArgumentValue } from "@/utils/nodes/taskArguments";
 import { isViewingSubgraph } from "@/utils/subgraphUtils";
 
 import { getGhostHandleId, GHOST_NODE_ID } from "../GhostNode/utils";
@@ -33,6 +35,10 @@ interface IONodeProps {
 const IONode = ({ id, type, data, selected = false }: IONodeProps) => {
   const { currentGraphSpec, currentSubgraphSpec, currentSubgraphPath } =
     useComponentSpec();
+
+  const executionData = useExecutionDataOptional();
+  const taskArguments = executionData?.rootDetails?.task_spec.arguments;
+
   const {
     setContent,
     clearContent,
@@ -62,6 +68,8 @@ const IONode = ({ id, type, data, selected = false }: IONodeProps) => {
     [currentSubgraphSpec.inputs, data.label],
   );
 
+  const inputTaskArgument = getArgumentValue(taskArguments, input?.name);
+
   const output = useMemo(
     () =>
       currentSubgraphSpec.outputs?.find((output) => output.name === data.label),
@@ -76,6 +84,7 @@ const IONode = ({ id, type, data, selected = false }: IONodeProps) => {
             input={input}
             key={input.name}
             disabled={readOnly}
+            argumentValue={inputTaskArgument}
           />,
         );
       }
@@ -118,11 +127,11 @@ const IONode = ({ id, type, data, selected = false }: IONodeProps) => {
 
   const handleClassName = isInput ? "translate-x-1.5" : "-translate-x-1.5";
 
-  const hasDataValue = !!data.value;
+  const hasDataValue = !!data.value || !!inputTaskArgument;
   const hasDataDefault = !!data.default;
 
   const inputValue = hasDataValue
-    ? data.value
+    ? (inputTaskArgument ?? data.value)
     : hasDataDefault
       ? data.default
       : isInSubgraph

src/utils/nodes/taskArguments.ts

@@ -0,0 +1,24 @@
+import type { TaskSpecOutput } from "@/api/types.gen";
+
+/**
+ * Gets the string value of a task argument.
+ *
+ * @param taskArguments
+ * @param inputName
+ * @returns
+ */
+export function getArgumentValue(
+  taskArguments: TaskSpecOutput["arguments"] | undefined,
+  inputName: string | undefined,
+) {
+  if (!inputName) {
+    return undefined;
+  }
+
+  const argument = taskArguments?.[inputName];
+  if (typeof argument === "string") {
+    return argument;
+  }
+
+  return undefined;
+}