mitai-jinkendo/frontend/src/utils/workflowSerializer.js

131 lines
4.0 KiB
JavaScript
Raw Normal View History

/**
* Workflow Serialization Utilities
*
* Konvertiert zwischen React Flow (Canvas) und Backend-Format (JSONB).
*/
/**
* Serialisiert React Flow Graph zu Backend-kompatiblem Format
*
* @param {Array} nodes - React Flow nodes
* @param {Array} edges - React Flow edges
* @param {Object} metadata - Zusätzliche Metadaten
* @returns {Object} JSONB-kompatibles Objekt für ai_prompts.graph_data
*/
export function serializeToWorkflowGraph(nodes, edges, metadata = {}) {
const workflowNodes = nodes.map(node => ({
id: node.id,
type: node.type,
label: node.data.label || node.type,
position: { x: node.position.x, y: node.position.y },
// Type-spezifische Felder
...(node.type === 'analysis' && {
prompt_slug: node.data.prompt_slug || null,
inline_template: node.data.inline_template || null, // Part 3: Inline Prompts
prompt_name: node.data.prompt_name || null,
question_augmentations: node.data.questions || [], // Backend erwartet question_augmentations
fallback_strategy: node.data.fallback_strategy || 'conservative_skip'
}),
...(node.type === 'logic' && {
condition: node.data.condition || null,
fallback_strategy: node.data.fallback_strategy || 'conservative_skip'
}),
...(node.type === 'join' && {
join_strategy: node.data.join_strategy || 'wait_all',
skip_handling: node.data.skip_handling || 'ignore_skipped',
min_paths: node.data.min_paths || 2
feat: Part 3 - End Node Template Editor **Neue Features:** - End Node Output Mode: AUTO vs. TEMPLATE - Jinja2 Template Editor mit Syntax-Beispiel - Placeholder Picker Modal (dynamische Node-Liste) - Template Serialisierung/Deserialisierung **Komponenten (NEU):** 1. EndNodeConfig.jsx (~150 Zeilen) - Output Mode Toggle (AUTO/TEMPLATE) - Template Textarea (monospace, 12 Zeilen) - Placeholder-Button (öffnet Picker) - Help-Text mit Beispiel-Syntax - Auto-Insert Default Template beim Wechsel zu TEMPLATE 2. PlaceholderPicker.jsx (~260 Zeilen) - Modal mit Suchfunktion - Dynamische Placeholder-Liste aus Workflow-Nodes - Kategorien: Global, Node Outputs, Signals - Click-to-Insert (schließt Modal automatisch) - Icons pro Node-Typ (🚀🤖⚡🔀🏁) **Integration:** - WorkflowEditorPage.jsx - EndNodeConfig im Config Panel (wenn type='end') - PlaceholderPicker State + Modal - handlePlaceholderSelect (fügt in Template ein) **Serialisierung:** - workflowSerializer.js - Serialize: output_mode + template für End Nodes - Deserialize: output_mode + template laden - Fallback: auto Mode wenn nicht gesetzt **Backend Status:** - ✅ Backend bereits fertig (execute_end_node() in workflow_executor.py) - ✅ Beide Modi (AUTO/TEMPLATE) funktionieren - ✅ Jinja2 Template Rendering implementiert **Part 3 Status:** Frontend Complete - ✅ End Node Config UI - ✅ Template Editor - ✅ Placeholder Picker - ⏸️ Testing ausstehend **Nächster Schritt:** Browser-Test auf dev.mitai.jinkendo.de Version: v0.9p Date: 2026-04-09 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-09 15:52:19 +02:00
}),
...(node.type === 'end' && {
output_mode: node.data.output_mode || 'auto',
template: node.data.template || null
})
}))
const workflowEdges = edges.map(edge => ({
id: edge.id,
source: edge.source,
target: edge.target,
label: edge.data?.label || null,
sourceHandle: edge.sourceHandle || null,
targetHandle: edge.targetHandle || null
}))
return {
nodes: workflowNodes,
edges: workflowEdges,
metadata: {
created_at: metadata.created_at || new Date().toISOString(),
updated_at: new Date().toISOString(),
version: metadata.version || '1.0'
}
}
}
/**
* Deserialisiert Backend-Format zu React Flow Graph
*
* @param {Object} jsonbData - ai_prompts.graph_data (JSONB)
* @returns {Object} { nodes, edges, metadata }
*/
export function deserializeFromWorkflowGraph(jsonbData) {
if (!jsonbData || !jsonbData.nodes || !jsonbData.edges) {
throw new Error('Invalid workflow graph data')
}
const reactFlowNodes = jsonbData.nodes.map(node => ({
id: node.id,
type: node.type,
position: { x: node.position.x, y: node.position.y },
data: {
label: node.label,
...(node.type === 'analysis' && {
prompt_slug: node.prompt_slug || node.prompt_id || null, // Fallback für alte Workflows mit prompt_id
inline_template: node.inline_template || null, // Part 3: Inline Prompts
prompt_name: node.prompt_name || null, // Falls vom Backend mitgeliefert
questions: node.question_augmentations || node.questions || [], // Backend sendet question_augmentations
fallback_strategy: node.fallback_strategy || 'conservative_skip'
}),
...(node.type === 'logic' && {
condition: node.condition || null,
fallback_strategy: node.fallback_strategy || 'conservative_skip'
}),
...(node.type === 'join' && {
join_strategy: node.join_strategy || 'wait_all',
skip_handling: node.skip_handling || 'ignore_skipped',
min_paths: node.min_paths || 2
feat: Part 3 - End Node Template Editor **Neue Features:** - End Node Output Mode: AUTO vs. TEMPLATE - Jinja2 Template Editor mit Syntax-Beispiel - Placeholder Picker Modal (dynamische Node-Liste) - Template Serialisierung/Deserialisierung **Komponenten (NEU):** 1. EndNodeConfig.jsx (~150 Zeilen) - Output Mode Toggle (AUTO/TEMPLATE) - Template Textarea (monospace, 12 Zeilen) - Placeholder-Button (öffnet Picker) - Help-Text mit Beispiel-Syntax - Auto-Insert Default Template beim Wechsel zu TEMPLATE 2. PlaceholderPicker.jsx (~260 Zeilen) - Modal mit Suchfunktion - Dynamische Placeholder-Liste aus Workflow-Nodes - Kategorien: Global, Node Outputs, Signals - Click-to-Insert (schließt Modal automatisch) - Icons pro Node-Typ (🚀🤖⚡🔀🏁) **Integration:** - WorkflowEditorPage.jsx - EndNodeConfig im Config Panel (wenn type='end') - PlaceholderPicker State + Modal - handlePlaceholderSelect (fügt in Template ein) **Serialisierung:** - workflowSerializer.js - Serialize: output_mode + template für End Nodes - Deserialize: output_mode + template laden - Fallback: auto Mode wenn nicht gesetzt **Backend Status:** - ✅ Backend bereits fertig (execute_end_node() in workflow_executor.py) - ✅ Beide Modi (AUTO/TEMPLATE) funktionieren - ✅ Jinja2 Template Rendering implementiert **Part 3 Status:** Frontend Complete - ✅ End Node Config UI - ✅ Template Editor - ✅ Placeholder Picker - ⏸️ Testing ausstehend **Nächster Schritt:** Browser-Test auf dev.mitai.jinkendo.de Version: v0.9p Date: 2026-04-09 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-09 15:52:19 +02:00
}),
...(node.type === 'end' && {
output_mode: node.output_mode || 'auto',
template: node.template || null
})
}
}))
const reactFlowEdges = jsonbData.edges.map(edge => ({
id: edge.id,
source: edge.source,
target: edge.target,
sourceHandle: edge.sourceHandle || null,
targetHandle: edge.targetHandle || null,
data: {
label: edge.label || null
},
type: 'default',
animated: false
}))
return {
nodes: reactFlowNodes,
edges: reactFlowEdges,
metadata: jsonbData.metadata || {}
}
}