mitai-jinkendo/frontend/src/components/workflow/WorkflowCanvas.jsx
Lars ba773e677b
Some checks failed
Deploy Development / deploy (push) Successful in 1m1s
Build Test / pytest-backend (push) Failing after 4s
Build Test / lint-backend (push) Successful in 0s
Build Test / build-frontend (push) Successful in 16s
fix(workflow): Test-Suite Fixes - Issues #5, #8, #9, #11, #12
Addressed test results from Test_status_Wkf.md:

**Issue #5: End-Node Überschriften**
- Fixed aggregate_results to show node labels instead of "Node 10"
- Added graph lookup to get node.data.label from node objects
- Modified backend/workflow_executor.py (2 locations)

**Issue #8: Löschen-Taste funktioniert nicht**
- Added Delete key support to WorkflowCanvas
- Set deleteKeyCode={['Backspace', 'Delete']}
- Frontend: WorkflowCanvas.jsx

**Issue #9: Mehrere End-Nodes verhindern**
- Added validation error when multiple End-Nodes exist
- Backend supports only 1 End-Node (aggregate_results takes last)
- Frontend: workflowValidation.js

**Issue #11: Export Fehler "Internal Server Error"**
- Added missing fields to export-all endpoint:
  - graph_data (workflow node graph)
  - question_augmentations (analysis prompts)
- Added missing fields to import endpoint
- Proper JSON serialization for all JSONB fields
- Backend: routers/prompts.py

**Issue #12: Workflow duplizieren funktioniert nicht**
- Fixed duplicate endpoint to include all prompt fields:
  - type, stages, output_format, output_schema
  - question_augmentations, graph_data (critical for workflows!)
- Backend: routers/prompts.py

Files changed:
- backend/workflow_executor.py: Node label lookup in aggregate_results
- backend/routers/prompts.py: Export/import/duplicate fixes
- frontend/src/components/workflow/WorkflowCanvas.jsx: Delete key
- frontend/src/utils/workflowValidation.js: Max 1 End-Node validation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-11 14:15:57 +02:00

73 lines
1.8 KiB
JavaScript

import ReactFlow, { Background, Controls, MiniMap } from 'reactflow'
import 'reactflow/dist/style.css'
/**
* WorkflowCanvas - React Flow Wrapper Component
*
* Kapselt React Flow Setup (Background, Controls, MiniMap).
* Separation of Concerns: Canvas-Logik getrennt von Editor-Orchestrierung.
*
* Props:
* - nodes: Array of React Flow nodes
* - edges: Array of React Flow edges
* - nodeTypes: Object mapping node type to component
* - onNodesChange: Handler for node changes (drag, delete, etc.)
* - onEdgesChange: Handler for edge changes
* - onConnect: Handler for new edge connections
* - onNodeClick: Handler for node selection
*/
export function WorkflowCanvas({
nodes,
edges,
nodeTypes,
onNodesChange,
onEdgesChange,
onConnect,
onNodeClick
}) {
return (
<div style={{ width: '100%', height: '100%' }}>
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
onNodeClick={onNodeClick}
nodeTypes={nodeTypes}
fitView
className="workflow-canvas"
minZoom={0.2}
maxZoom={2}
deleteKeyCode={['Backspace', 'Delete']}
defaultEdgeOptions={{
animated: false,
style: { strokeWidth: 2 },
deletable: true
}}
>
<Background
variant="dots"
gap={16}
size={1}
color="var(--border)"
/>
<Controls
showZoom={true}
showFitView={true}
showInteractive={true}
/>
<MiniMap
nodeStrokeWidth={3}
zoomable
pannable
style={{
backgroundColor: 'var(--surface)',
border: '1px solid var(--border)'
}}
/>
</ReactFlow>
</div>
)
}