);
};
// Custom edge with animated arrow
const CustomEdge = ({ id, source, target, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style = {}, data, markerEnd }) => {
// For left-to-right data flow, use a gentler curve
const curvature = 0.2; // Reduced curvature for straighter, more horizontal flow
const [edgePath, labelX, labelY] = getBezierPath({
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
curvature
});
// Check if the process is active
const isActive = data?.isActive !== false; // Default to active if not specified
// Determine if this is a source or target edge
const isSourceEdge = data?.edgeType === 'source';
// Get the process name and mappings
const processName = data?.processName || 'Process';
const mappings = data?.mappings || [];
// Adjust label style based on active status
const labelBgColor = isActive ? 'white' : '#f5f5f5';
const labelOpacity = isActive ? 1 : 0.8;
return (
<>
{/* Process name in small text */}
{processName}
{!isActive && (
inactive
)}
{/* Column mappings - show fewer columns to save space */}
{mappings.length > 0 ? (
// Only show up to 3 mappings to save space
mappings.slice(0, 3).map((column, index) => (
{column}
))
) : (
No mappings
)}
{mappings.length > 3 && (
+{mappings.length - 3} more
)}
);
};
// Process Node (represents ETL or data transformation)
const ProcessNode = ({ data, id }) => {
// Function to handle process edit
const handleProcessEdit = () => {
// Find the process in the data
// We'll use the data that's passed to the component directly
if (data && data.fullProcessData) {
// We'll use window.processEditCallback which will be set in the main component
if (window.processEditCallback) {
window.processEditCallback(data.fullProcessData);
}
}
};
// Determine status color
const statusColor = data.status === 'active' ? '#52c41a' : '#ff4d4f';
const isActive = data.status === 'active';
// Define colors
const primaryColor = isActive ? '#fa8c16' : '#aaaaaa';
const secondaryColor = isActive ? '#ff4d4f' : '#cccccc';
// Determine which icon to use based on process type or other properties
const getProcessIcon = () => {
// You can customize this logic based on your data model
const processType = data.processType || 'default';
const iconSize = 40; // Reduced icon size to prevent overlapping
const iconColor = isActive ? primaryColor : '#cccccc';
switch(processType.toLowerCase()) {
case 'transform':
return ;
case 'filter':
return ;
case 'aggregate':
return ;
case 'sync':
return ;
case 'code':
return ;
case 'analytics':
return ;
case 'transfer':
return ;
case 'exchange':
return ;
default:
return ;
}
};
return (
{/* Connection handles */}
{/* Process Icon with integrated content */}
{getProcessIcon()}
{/* Status indicator (small dot) */}
{/* Process Label (below icon) */}
{data.label}
);
};
// Table Node
const TableNode = ({ data, id }) => {
// Set up drag functionality for new tables
const onDragStart = (event) => {
// Only allow dragging for tables that are not in a schema yet
if (!event.target.closest('.draggable-new-table')) {
return;
}
event.dataTransfer.setData('application/reactflow', id);
event.dataTransfer.effectAllowed = 'move';
};
// Determine table type
const isStage = data.type === 'stage';
const isFact = data.type === 'fact';
const isDim = data.type === 'dimension';
// Different colors for different table types
let tableColor, tableLabel, tableIcon;
if (isStage) {
tableColor = '#fa8c16'; // Orange for STAGE tables
tableLabel = 'STAGE';
tableIcon = ;
} else if (isFact) {
tableColor = '#1890ff'; // Blue for FACT tables
tableLabel = 'FACT';
tableIcon = ;
} else {
tableColor = '#52c41a'; // Green for DIM tables
tableLabel = 'DIM';
tableIcon = ;
}
const background = '#ffffff';
return (
{/* Connection handles */}
{/* Different icons for different table types */}
{tableIcon}
{data.label}