{/* No parent selectors needed since we only have database */}
{/* Only Database Form */}
{/* Guidance message when no parents are available */}
{activeEntityType === 'schema' && availableDatabases.length === 0 && (
You need to create a database first before creating a schema.
);
};
// Create a unique ID for edges that should be animated
const SERVICE_EDGE_CLASS = 'service-db-connection';
// Add the CSS for the animated connections directly to the stylesheet
// This avoids potential issues with React's rendering cycle
const style = document.createElement('style');
style.textContent = `
@keyframes dashdraw {
from {
stroke-dashoffset: 10;
}
to {
stroke-dashoffset: 0;
}
}
.${SERVICE_EDGE_CLASS} .react-flow__edge-path {
animation: dashdraw 0.5s linear infinite;
}
`;
// Add the style element only once
if (!document.getElementById('react-flow-animation')) {
style.id = 'react-flow-animation';
document.head.appendChild(style);
}
// Hierarchical Edge for connecting service to databases
const HierarchicalEdge = ({ id, source, target, sourceX, sourceY, targetX, targetY, style = {} }) => {
// Calculate the path points for a stepped edge with orthogonal lines
const [path] = getSmoothStepPath({
sourceX,
sourceY,
sourcePosition: Position.Bottom, // Always start from bottom
targetX,
targetY,
targetPosition: Position.Top, // Always connect to top
borderRadius: 20, // Smoother corners for longer connections
stepSize: 30, // Increased step size for longer connections
});
// Enhanced style for hierarchical connections with animated dotted line
const hierarchyStyle = {
strokeWidth: 2,
stroke: '#00a99d',
strokeDasharray: '5, 5', // Create dotted/dashed line effect
...style,
};
return (
);
};
// Custom node types
const ServiceNode = ({ data = {} }) => {
// Safety check for undefined data
if (!data) {
console.error('ServiceNode received undefined data');
data = {}; // Provide a default empty object
}
return (
{/* Logo and text container */}
Plan+
{/* Connected databases count */}
Connected Databases: {data.databases || 0}
{/* Handles for connections - explicit id for targeting */}
);
};
const DatabaseNode = ({ data = {} }) => {
// Safety check for undefined data
if (!data) {
console.error('DatabaseNode received undefined data');
data = {}; // Provide a default empty object
}
// Enhanced styles for handles used in hierarchy connections
// Debug: Log the data being received by the component
// console.log('DatabaseNode data:', data);
// Assign different colors to different databases
const colorMap = {
'my_dwh': '#00a99d', // First database - teal
'my_dwh2': '#1890ff', // Second database - blue
'default': '#9c27b0' // Default - purple
};
// Get the database slug from the id (format: db-{slug})
// Add a safety check for undefined data.id
// Use data.id if available, otherwise fall back to the node's id
const nodeId = (data && data.id) ? data.id : 'default';
const dbSlug = (nodeId && typeof nodeId === 'string' && nodeId.startsWith && nodeId.startsWith('db-'))
? nodeId.substring(3)
: 'default';
// Use the color from the map or default to a fallback color
const borderColor = colorMap[dbSlug] || '#ff9800';
const handleColor = borderColor;
const bgColor = '#1a1a1a';
// Create a safe gradient ID by removing any special characters
const safeDbSlug = (dbSlug && typeof dbSlug === 'string')
? dbSlug.replace(/[^a-zA-Z0-9]/g, '_')
: 'default';
const gradientId = `db_paint0_linear_${safeDbSlug}`;
// Database SVG icon
const DatabaseIcon = () => (
);
return (
{/* Connection handles */}
{/* Display the database name from the API response */}
{data.name || data.label || 'Unknown Database'}
Plan+
{/* Connected databases count */}