feat(frontend): run steps from graph

[Guilhem-lm]

• Add possibility to run the flow steps from the graph
• Add an input popover

[cloudflare-workers-and-pages[bot]]

Deploying windmill with    Cloudflare Pages

Latest commit:	cc3cb90
Status:	✅  Deploy successful!
Preview URL:	https://1ed40db7.windmill.pages.dev
Branch Preview URL:	https://glm-feat-frontend-test-step.windmill.pages.dev

View logs

[diegoimbert]

/ai review the pr

[claude[bot]]

Claude finished @diegoimbert's task —— View job

---

PR Review Analysis

Reviewing PR: feat(frontend): run steps from graph

Todo List:

• [x] Read and analyze key changed files
• [x] Review new testing functionality implementation
• [x] Check graph integration and UI patterns
• [x] Examine Svelte 5 usage and reactivity patterns
• [x] Provide comprehensive review feedback

---

Overall Assessment: ✅ Strong Implementation

This PR successfully adds flow step testing functionality from the graph UI with well-architected components and good integration. The code quality is high with proper Svelte 5 patterns and clean separation of concerns.

Key Strengths

🎯 Excellent Architecture

• TestSteps class: Well-designed reactive state management with proper encapsulation using private $state fields
• Component separation: Clean separation between ModuleTest (logic), InputPickerInner (UI), and integration components
• Event flow: Proper event propagation from graph nodes → ModuleTest → TestSteps

⚡ Proper Svelte 5 Usage

• Consistent use of $state, $derived, $effect runes
• Proper $bindable props for two-way binding
• Good use of $state.snapshot() and structuredClone() for immutable updates
• Effective snippet usage for UI composition

🔗 Robust Integration

• Graph nodes properly pass through onTestUpTo and onEditInput callbacks
• Context system used effectively for sharing FlowEditorContext
• Popover positioning logic handles zoom levels and layout changes

Detailed Code Review

ModuleTest.svelte ✅

// Good: Module-level state for tracking test instances
let testModulesState = $state<Record<string, testModuleState>>({})

// Good: Clean exported API
export function runTestWithStepArgs() {
    runTest(testSteps.getStepArgs(mod.id))
}

Strengths:

• Instance counting prevents memory leaks
• Proper cleanup in onMount return function
• Good separation of test execution logic by module type
• Proper flow state updates on job completion

testSteps.svelte.ts ✅

// Excellent: Private reactive state with clean public API
#steps = $state<Record<string, any>>({})
#manuallySetArgs = $state<Record<string, Record<string, boolean>>>({})

Strengths:

• Tracks manual vs automatic argument setting
• Proper integration with evalValue and flow state
• Clean methods for step argument management
• Good use of structuredClone($state.snapshot()) for immutable updates

Input Popover Integration ✅

OutputPicker.svelte:

{#if showInput}
    <Popover 
        floatingConfig={{ placement: 'bottom', offset: { crossAxis: 69 * zoom } }}
        contentStyle="width: calc({MIN_WIDTH}px); height: calc({MIN_HEIGHT}px);"
    >

Strengths:

• Responsive to zoom levels in graph
• Proper popover positioning logic
• Clean integration with existing OutputPicker patterns

InputPickerInner.svelte:

{#snippet metaData(key: string)}
    {#if testSteps?.manuallySetArgs[id]?.[key]}
        <button onclick={() => testSteps?.updateArg(id, key, $flowStateStore, flowStore?.val, previewArgs?.val)}>
            <RefreshCw size={12} />
        </button>
    {/if}
{/snippet}

Strengths:

• Visual indicators for manual vs automatic args
• Re-evaluation functionality for manually set arguments
• Good use of snippets for composable UI

Minor Improvements Suggested

1. Error Handling Enhancement

frontend/src/lib/components/flows/testSteps.svelte.ts:85

// Consider adding error handling for evalValue
this.#steps[moduleId][argName] = evalValue(
    argName, modules[0], this.#steps[moduleId] ?? {}, pickableProperties, false
)

Suggestion: Wrap evalValue calls in try-catch to prevent UI crashes on invalid expressions.

2. Type Safety Improvement

frontend/src/lib/components/ModuleTest.svelte:44

// Consider stronger typing for step args
export function runTestWithStepArgs() {
    runTest(testSteps.getStepArgs(mod.id)) // any type
}

Suggestion: Define a more specific type for step arguments based on schema.

3. Performance Consideration

frontend/src/lib/components/flows/propPicker/OutputPicker.svelte:87

function updatePositioning(historyOpen: boolean, zoom: number) {
    inputPopover?.updatePositioning({...})
    popover?.updatePositioning({...})
}

Suggestion: Consider debouncing position updates to avoid excessive calculations during zoom changes.

Integration Quality

Graph Event Flow ✅

// FlowGraphV2.svelte → ModuleNode.svelte → MapItem.svelte → FlowModuleSchemaItem.svelte
onTestUpTo: (id: string) => {
    onTestUpTo?.(id)  // Clean callback propagation
}

The event flow is clean and well-traced through the component hierarchy.

Context Usage ✅

const { flowStore, flowStateStore, testSteps, previewArgs } = 
    getContext<FlowEditorContext>('FlowEditorContext')

Proper context usage avoids prop drilling and maintains clean component interfaces.

Testing & UX Considerations

User Experience ✅

• Visual feedback: Loading states, hover effects, proper button states
• Accessibility: Proper button titles and semantic markup
• Responsive: Zoom-aware positioning and responsive popover sizing

State Management ✅

• Consistency: Test state properly synchronized with flow state
• Cleanup: Proper component cleanup prevents memory leaks
• Reactivity: Changes properly propagate through the component tree

Security & Best Practices

No Security Issues Identified ✅

• No direct HTML injection or XSS vectors
• Proper event handling without unsafe operations
• Context isolation maintained

Follows Windmill Patterns ✅

• Consistent with existing flow editor patterns
• Proper use of existing UI components
• Maintains existing keyboard shortcuts and interactions

Conclusion

This is a well-implemented feature that successfully adds step testing functionality to the flow graph. The code demonstrates:

• Strong architectural decisions with clean separation of concerns
• Proper Svelte 5 usage following best practices
• Robust integration with existing flow editor systems
• Good user experience with responsive UI and proper feedback

The implementation is production-ready with only minor suggestions for improvement. The testing functionality integrates seamlessly with the existing flow editor without disrupting established patterns.

Recommendation: ✅ Approve with confidence

---