Move show/hide field logic into EditNodeDialog

Author: j-sanaa

packages/agentflow/examples/src/demos/CustomNodeExample.tsx

@@ -127,7 +127,7 @@ const customNodeInputParams: InputParam[] = [
                 name: 'value',
                 label: 'Value',
                 type: 'string',
-                hide: { operation: 'isEmpty' }
+                hide: { 'conditions[$index].operation': 'isEmpty' }
             }
         ]
     },

packages/agentflow/src/atoms/ArrayInput.test.tsx

@@ -281,6 +281,32 @@ describe('ArrayInput', () => {
         expect(deleteButtons[1]).toBeDisabled()
     })
 
+    // Test 11: itemParameters prop overrides inputParam.array display flags
+    it('should use itemParameters prop for field visibility when provided, ignoring inputParam.array display flags', () => {
+        // inputParam.array has both fields with no display flag (both would show)
+        const dataWithItem: NodeData = {
+            ...mockNodeData,
+            inputValues: { testArray: [{ field1: 'value', field2: 10 }] }
+        } as NodeData
+
+        // Parent (EditNodeDialog) has evaluated field2 as hidden
+        const itemParameters: InputParam[][] = [
+            [
+                { id: 'field1', name: 'field1', label: 'Field 1', type: 'string', display: true } as InputParam,
+                { id: 'field2', name: 'field2', label: 'Field 2', type: 'number', display: false } as InputParam
+            ]
+        ]
+
+        render(
+            <ArrayInput inputParam={mockInputParam} data={dataWithItem} onDataChange={mockOnDataChange} itemParameters={itemParameters} />
+        )
+
+        // field1 visible per itemParameters
+        expect(screen.getByTestId('input-handler-field1')).toBeInTheDocument()
+        // field2 hidden per itemParameters even though inputParam.array has no display flag
+        expect(screen.queryByTestId('input-handler-field2')).not.toBeInTheDocument()
+    })
+
     // Test reading minItems from inputParam
     it('should read minItems from inputParam', () => {
         const inputParamWithMinItems: InputParam = {

packages/agentflow/src/atoms/ArrayInput.tsx

@@ -5,7 +5,6 @@ import { useTheme } from '@mui/material/styles'
 import { IconPlus, IconTrash } from '@tabler/icons-react'
 
 import type { InputParam, NodeData } from '@/core/types'
-import { evaluateFieldVisibility } from '@/core/utils/fieldVisibility'
 
 import { NodeInputHandler } from './NodeInputHandler'
 
@@ -14,17 +13,10 @@ export interface ArrayInputProps {
     data: NodeData
     disabled?: boolean
     onDataChange?: (params: { inputParam: InputParam; newValue: unknown }) => void
+    itemParameters?: InputParam[][]
 }
 
-/**
- * Array input component for managing lists of structured data
- *
- * @param inputParam - Array field definition with structure
- * @param data - Node data containing inputValues
- * @param onDataChange - Callback invoked when array is modified
- * @param disabled - Whether the input is disabled
- */
-export function ArrayInput({ inputParam, data, disabled = false, onDataChange }: ArrayInputProps) {
+export function ArrayInput({ inputParam, data, disabled = false, onDataChange, itemParameters: itemParametersProp }: ArrayInputProps) {
     const theme = useTheme()
 
     // Derive array items directly from props (single source of truth)
@@ -34,10 +26,11 @@ export function ArrayInput({ inputParam, data, disabled = false, onDataChange }:
         [data.inputValues, inputParam.name]
     )
 
-    // Derive item parameters for each array item
-    const itemParameters = useMemo(
-        () => arrayItems.map((itemValues, index) => evaluateFieldVisibility(inputParam.array || [], itemValues, index)),
-        [arrayItems, inputParam.array]
+    // Use pre-computed itemParameters
+    // Falls back to raw field definitions for nested arrays without show/hide conditions.
+    const itemParameters = useMemo<InputParam[][]>(
+        () => itemParametersProp ?? arrayItems.map(() => inputParam.array || []),
+        [itemParametersProp, arrayItems, inputParam.array]
     )
 
     // Handle changes to individual fields within array items

packages/agentflow/src/atoms/NodeInputHandler.tsx

@@ -24,6 +24,7 @@ export interface NodeInputHandlerProps {
     isAdditionalParams?: boolean
     disablePadding?: boolean
     onDataChange?: (params: { inputParam: InputParam; newValue: unknown }) => void
+    itemParameters?: InputParam[][]
 }
 
 /**
@@ -37,7 +38,8 @@ export function NodeInputHandler({
     disabled = false,
     isAdditionalParams = false,
     disablePadding = false,
-    onDataChange
+    onDataChange,
+    itemParameters
 }: NodeInputHandlerProps) {
     const theme = useTheme()
     const ref = useRef<HTMLDivElement>(null)
@@ -119,7 +121,15 @@ export function NodeInputHandler({
                     </Select>
                 )
             case 'array':
-                return <ArrayInput inputParam={inputParam} data={data} disabled={disabled} onDataChange={onDataChange} />
+                return (
+                    <ArrayInput
+                        inputParam={inputParam}
+                        data={data}
+                        disabled={disabled}
+                        onDataChange={onDataChange}
+                        itemParameters={itemParameters}
+                    />
+                )
 
             default:
                 // For unsupported types, render a basic text field

packages/agentflow/src/features/node-editor/EditNodeDialog.test.tsx

@@ -27,18 +27,20 @@ jest.mock('@/atoms', () => ({
     NodeInputHandler: ({
         inputParam,
         onDataChange,
-        data
+        data,
+        itemParameters
     }: {
         inputParam: InputParam
         data: NodeData
         onDataChange: (args: { inputParam: InputParam; newValue: unknown }) => void
+        itemParameters?: InputParam[][]
     }) => {
         // Handle array type inputs differently
         if (inputParam.type === 'array') {
             const currentArray = (data.inputValues?.[inputParam.name] as Record<string, unknown>[]) || []
 
             return (
-                <div data-testid={`input-handler-${inputParam.name}`}>
+                <div data-testid={`input-handler-${inputParam.name}`} data-item-params-count={itemParameters?.length ?? 'none'}>
                     <button
                         data-testid={`add-${inputParam.name}`}
                         onClick={() => {
@@ -426,5 +428,37 @@ describe('EditNodeDialog', () => {
             expect(lastCall[1].inputValues).toHaveProperty('connections')
             expect(Array.isArray(lastCall[1].inputValues.connections)).toBe(true)
         })
+
+        it('should compute and pass itemParameters to NodeInputHandler matching array item count', () => {
+            const arrayParams: InputParam[] = [
+                {
+                    name: 'items',
+                    label: 'Item',
+                    type: 'array',
+                    array: [
+                        { name: 'type', label: 'Type', type: 'string' } as InputParam,
+                        { name: 'detail', label: 'Detail', type: 'string', show: { 'items[$index].type': 'special' } } as InputParam
+                    ]
+                } as InputParam
+            ]
+
+            const propsWithArrayData = {
+                ...defaultProps,
+                dialogProps: {
+                    ...defaultProps.dialogProps,
+                    inputParams: arrayParams,
+                    data: {
+                        ...nodeData,
+                        inputValues: { items: [{ type: 'normal' }, { type: 'special' }] }
+                    }
+                }
+            }
+
+            render(<EditNodeDialog {...propsWithArrayData} />)
+
+            // itemParameters should have one entry per array item (2 items → count = 2)
+            const handler = screen.getByTestId('input-handler-items')
+            expect(handler).toHaveAttribute('data-item-params-count', '2')
+        })
     })
 })

packages/agentflow/src/features/node-editor/EditNodeDialog.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { useUpdateNodeInternals } from 'reactflow'
 
 import { Avatar, Box, ButtonBase, Dialog, DialogContent, Stack, TextField, Typography } from '@mui/material'
@@ -30,6 +30,22 @@ function EditNodeDialogComponent({ show, dialogProps, onCancel }: EditNodeDialog
     const [data, setData] = useState<NodeData | null>(null)
     const [isEditingNodeName, setEditingNodeName] = useState(false)
     const [nodeName, setNodeName] = useState('')
+    const [arrayItemParameters, setArrayItemParameters] = useState<Record<string, InputParam[][]>>({})
+
+    // Evaluate field visibility for each item in every array-type param.
+    const computeArrayItemParameters = useCallback(
+        (params: InputParam[], inputValues: Record<string, unknown>): Record<string, InputParam[][]> => {
+            const result: Record<string, InputParam[][]> = {}
+            for (const param of params) {
+                if (param.type === 'array' && param.array) {
+                    const items = (inputValues[param.name] as Record<string, unknown>[]) || []
+                    result[param.name] = items.map((_, index) => evaluateFieldVisibility(param.array!, inputValues, index))
+                }
+            }
+            return result
+        },
+        []
+    )
 
     const onNodeLabelChange = () => {
         if (!data || !nodeNameRef.current) return
@@ -50,6 +66,7 @@ function EditNodeDialogComponent({ show, dialogProps, onCancel }: EditNodeDialog
 
         const updatedParams = evaluateFieldVisibility(inputParams, updatedInputValues)
         setInputParams(updatedParams)
+        setArrayItemParameters(computeArrayItemParameters(inputParams, updatedInputValues))
         // Keep full inputValues in state — hidden field values are preserved so they
         // can be restored when visibility conditions change (e.g. toggling provider back).
         // Stripping should only happen on save/export, not on every keystroke.
@@ -62,12 +79,13 @@ function EditNodeDialogComponent({ show, dialogProps, onCancel }: EditNodeDialog
             const initialValues = dialogProps.data?.inputValues || {}
             const evaluatedParams = evaluateFieldVisibility(dialogProps.inputParams, initialValues)
             setInputParams(evaluatedParams)
+            setArrayItemParameters(computeArrayItemParameters(dialogProps.inputParams, initialValues))
         }
         if (dialogProps.data) {
             setData(dialogProps.data)
             if (dialogProps.data.label) setNodeName(dialogProps.data.label)
         }
-    }, [dialogProps])
+    }, [dialogProps, computeArrayItemParameters])
 
     if (!show) return null
 
@@ -233,6 +251,7 @@ function EditNodeDialogComponent({ show, dialogProps, onCancel }: EditNodeDialog
                                     data={data}
                                     isAdditionalParams={true}
                                     onDataChange={onCustomDataChange}
+                                    itemParameters={inputParam.type === 'array' ? arrayItemParameters[inputParam.name] : undefined}
                                 />
                             )
                         })}