Skip to content

Conversation

@Pfannkuchensack
Copy link
Contributor

Summary

This PR adds a new Canvas Workflow Integration feature that allows users to execute workflows directly on canvas layers.

Type: Feature

What: Adds a new modal dialog accessible from raster layer context menu that enables users to:

  • Select workflows that have Form Builder enabled and at least one image input field
  • Automatically pass the current canvas layer as the image input
  • Adjust workflow parameters through an interactive form interface
  • Execute the workflow and have the result automatically added back to the canvas

Why: This integration streamlines the workflow execution process for canvas-based operations, eliminating the need to manually export layers, run workflows separately, and re-import results.

How: The implementation includes:

  • New canvasWorkflowIntegrationSlice Redux state management
  • Workflow filtering logic to identify compatible workflows (with Form Builder and image fields)
  • Dynamic form rendering that mirrors the Form Builder UI
  • Parameter validation and execution logic
  • Event handling to catch workflow results and add them to canvas
  • Full TypeScript implementation with ~1,640 lines of new code across 16 files

Related Issues / Discussions

QA Instructions

  1. Setup:

    • Ensure you have at least one workflow with Form Builder enabled
    • The workflow should have at least one image input field
  2. Testing the feature:

    • Create or select a raster layer on the canvas
    • Right-click on the layer to open the context menu
    • Click "Run Workflow" (or similar menu item)
    • Verify the modal opens with workflow selector
  3. Workflow selection:

    • Select a compatible workflow from the dropdown
    • Verify only workflows with Form Builder and image fields appear
    • Verify parameter form renders correctly
  4. Execution:

    • Adjust any workflow parameters as needed
    • Click "Execute Workflow"
    • Verify the modal shows processing state (disabled close, spinner)
    • Verify the result is added back to the canvas when complete
    • Verify the modal closes after successful execution
  5. Edge cases:

    • Test with workflows that have multiple image fields
    • Test canceling before execution
    • Test with invalid parameter values

Video Demo

Demo

Merge Plan

No special merge considerations. Standard merge to main is fine.

Checklist

  • The PR has a short but descriptive title, suitable for a changelog
  • Tests added / updated (if applicable)
  • ❗Changes to a redux slice have a corresponding migration
  • Documentation added / updated (if applicable)
  • Updated What's New copy (if doing a release after this PR)

claude and others added 6 commits November 12, 2025 01:18
This commit implements a new feature that allows users to run workflows
directly from the unified canvas. Users can now:

- Access a "Run Workflow" option from the canvas layer context menu
- Select a workflow with image parameters from a modal dialog
- Customize workflow parameters (non-image fields)
- Execute the workflow with the current canvas layer as input
- Have the result automatically added back to the canvas

Key changes:
- Added canvasWorkflowIntegrationSlice for state management
- Created CanvasWorkflowIntegrationModal and related UI components
- Added context menu item to raster layers
- Integrated workflow execution with canvas image extraction
- Added modal to global modal isolator

This integration enhances the canvas by allowing users to leverage
custom workflows for advanced image processing directly within the
canvas workspace.

Implements feature request for deeper workflow-canvas integration.
- Extract WorkflowFieldRenderer component for individual field rendering
- Add WorkflowFormPreview component to handle workflow parameter display
- Remove workflow compatibility filtering - allow all workflows
- Simplify workflow selector to use flattened workflow list
- Add comprehensive field type support (String, Integer, Float, Boolean, Enum, Scheduler, Board, Model, Image, Color)
- Implement image field selection UI with radio
- Add useFilteredWorkflows hook to filter workflows with ImageField inputs
- Add workflowHasImageField utility to check for ImageField in Form Builder
- Only show workflows that have Form Builder with at least one ImageField
- Add loading state while filtering workflows
- Improve error messages to clarify Form Builder requirement
- Update modal description to mention Form Builder and parameter adjustment
- Add fallback error message for workflows without Form Builder
…on state

- Add _version field (v1) to canvasWorkflowIntegrationState for future migrations
- Add persistConfig with migration function to handle version upgrades
- Add persistDenylist to exclude transient state (isOpen, isProcessing, sourceEntityIdentifier)
- Use es-toolkit isPlainObject and tsafe assert for type-safe migration
- Persist selectedWorkflowId and fieldValues across sessions
@github-actions github-actions bot added the frontend PRs that change frontend files label Nov 23, 2025
@Pfannkuchensack Pfannkuchensack changed the title Canvas Workflow Integration - Run Workflow on Raster Layer Feature(UI): Canvas Workflow Integration - Run Workflow on Raster Layer Nov 23, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

frontend PRs that change frontend files

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants