Flow Studio
Backend↔UI Translation
ProcessElementToNodeTranslator converts the backend's ProcessElement (database shape) to the frontend's WorkflowNode (React Flow shape) when a saved workflow is loaded. It is the reverse path of saving.
The Two Data Models
| ProcessElement (Backend/DB) | WorkflowNode (Frontend) | |
|---|---|---|
| Primary key | ElementId (int) | id (string: "http-request-x7k2") |
| Type identifier | TypeCode (string) | type (same string) |
| Position | PositionX, PositionY (int columns) | position: { x, y } |
| Config | ConfigJson (string) | data.config (object) |
| Label | Name | data.label |
ProcessElementToNodeTranslator
// packages/flow-studio-core/src/translators/ProcessElementToNodeTranslator.ts
export class ProcessElementToNodeTranslator {
translate(element: ProcessElement, nodeType: NodeType): WorkflowNode {
return {
id: element.ElementId.toString(),
type: element.TypeCode,
position: { x: element.PositionX, y: element.PositionY },
data: {
label: element.Name,
config: JSON.parse(element.ConfigJson ?? '{}'),
formId: nodeType.formId,
ports: nodeType.ports, // always taken from the live NodeType
nodeType: element.TypeCode,
icon: nodeType.icon,
color: nodeType.color,
}
};
}
}Why Port Data Comes from NodeType, Not ProcessElement
Port definitions are owned by the NodeType template, not by individual node instances. This means if a template's ports are updated (e.g., an error port is added), all existing workflow instances automatically get the new port on next load — without needing to migrate stored workflow data.
Port Addition Is Safe; Port Removal Is Breaking
Adding a new port to a NodeType is safe — existing instances just get the new port. Removing a port from a NodeType may break saved workflows that have edges connected to that port. Check for existing edge references before removing ports.