@flowuent-org/diagramming-core 1.0.5

package/packages/diagrams/src/lib/templates/cloud-arch/utils/validationExtractor.ts

@@ -0,0 +1,342 @@
+import { Node } from 'reactflow';
+import { validateAWSPlacement } from './awsValidation';
+import { validateAzurePlacement } from './azureValidation';
+import { validateGCPPlacement } from './gcpValidation';
+
+// Define types for semantic and restriction properties (simplified)
+export interface NodeSemantics {
+  category: string;
+  resourceType: string;
+  description: string;
+  cloudProvider: 'aws' | 'azure' | 'gcp';
+  isContainer: boolean;
+  canContainServices: boolean;
+  validParents: string[];
+  suggestedParents: string[];
+  placement?: {
+    level:
+      | 'root'
+      | 'account'
+      | 'subscription'
+      | 'project'
+      | 'vpc'
+      | 'subnet'
+      | 'region';
+    requirements: string[];
+    recommendations: string[];
+  };
+}
+
+export interface NodeRestrictions {
+  canContain: string[];
+  cannotContain: string[];
+  mustBeIn: string[];
+  cannotBeIn: string[];
+  placementRules: string[];
+  validationRules: string[];
+  dependencies: string[];
+  conflicts: string[];
+  regionRequirements?: string[];
+  networkRequirements?: string[];
+  smartRestrictions?: {
+    containmentRules: Array<{
+      resourceType: string;
+      allowedParents: string[];
+      description: string;
+    }>;
+    placementRules: Array<{
+      condition: string;
+      description: string;
+    }>;
+    networkingRules: Array<{
+      requirement: string;
+      description: string;
+    }>;
+    securityRules: Array<{
+      requirement: string;
+      description: string;
+    }>;
+    costOptimizationRules: Array<{
+      recommendation: string;
+      description: string;
+    }>;
+  };
+}
+
+// Simplified function to extract semantics for a node without schema dependencies
+export function extractNodeSemantics(node: Node): NodeSemantics {
+  const cloudProvider = node.data?.cloudProvider as 'aws' | 'azure' | 'gcp';
+  const uiServiceName = node.data?.service;
+
+  if (!cloudProvider || !uiServiceName) {
+    return {
+      category: 'Unknown',
+      resourceType: 'Unknown Resource',
+      description: 'Resource type could not be determined',
+      cloudProvider: cloudProvider || 'aws',
+      isContainer: false,
+      canContainServices: false,
+      validParents: [],
+      suggestedParents: [],
+    };
+  }
+
+  // Basic service semantics without schema manager dependency
+  const isContainer = [
+    'account',
+    'vpc',
+    'availability-zone',
+    'local-zone',
+    'subnet',
+    'security-group',
+    'resource-group',
+    'subscription',
+    'project',
+  ].includes(uiServiceName);
+
+  return {
+    category: isContainer ? 'Container' : 'Service',
+    resourceType: uiServiceName,
+    description: `${cloudProvider} ${uiServiceName}`,
+    cloudProvider,
+    isContainer,
+    canContainServices: isContainer,
+    validParents: getValidParents(uiServiceName, cloudProvider),
+    suggestedParents: getValidParents(uiServiceName, cloudProvider),
+  };
+}
+
+// Simplified function to extract restrictions for a node without schema dependencies
+export function extractNodeRestrictions(
+  node: Node,
+  allNodes: Node[],
+): NodeRestrictions {
+  const cloudProvider = node.data?.cloudProvider as 'aws' | 'azure' | 'gcp';
+  const uiServiceName = node.data?.service;
+
+  if (!cloudProvider || !uiServiceName) {
+    return {
+      canContain: [],
+      cannotContain: [],
+      mustBeIn: [],
+      cannotBeIn: [],
+      placementRules: ['Resource type could not be determined'],
+      validationRules: ['No validation rules available'],
+      dependencies: [],
+      conflicts: [],
+    };
+  }
+
+  // Basic restrictions without schema manager dependency
+  const isContainer = [
+    'account',
+    'vpc',
+    'availability-zone',
+    'local-zone',
+    'subnet',
+    'security-group',
+    'resource-group',
+    'subscription',
+    'project',
+  ].includes(uiServiceName);
+
+  if (isContainer) {
+    return {
+      canContain: getValidChildren(uiServiceName, cloudProvider),
+      cannotContain: [],
+      mustBeIn: getValidParents(uiServiceName, cloudProvider),
+      cannotBeIn: [],
+      placementRules: [`${uiServiceName} can contain child resources`],
+      validationRules: ['Container resource validation'],
+      dependencies: [],
+      conflicts: [],
+    };
+  } else {
+    return {
+      canContain: [],
+      cannotContain: [],
+      mustBeIn: getValidParents(uiServiceName, cloudProvider),
+      cannotBeIn: [],
+      placementRules: [`${uiServiceName} must be placed in valid parent`],
+      validationRules: ['Service resource validation'],
+      dependencies: [],
+      conflicts: [],
+    };
+  }
+}
+
+// Helper function to get valid parents without schema dependencies
+function getValidParents(
+  service: string,
+  provider: 'aws' | 'azure' | 'gcp',
+): string[] {
+  switch (provider) {
+    case 'aws':
+      switch (service) {
+        case 'vpc':
+          return ['account'];
+        case 'availability-zone':
+          return ['vpc'];
+        case 'subnet':
+          return ['availability-zone', 'vpc'];
+        default:
+          return ['subnet', 'vpc'];
+      }
+    case 'azure':
+      switch (service) {
+        case 'resource-group':
+          return ['subscription'];
+        case 'virtual-network':
+          return ['resource-group'];
+        case 'subnet':
+          return ['virtual-network'];
+        default:
+          return ['resource-group'];
+      }
+    case 'gcp':
+      switch (service) {
+        case 'vpc':
+          return ['project'];
+        case 'subnet':
+          return ['vpc'];
+        default:
+          return ['project', 'vpc'];
+      }
+    default:
+      return [];
+  }
+}
+
+// Helper function to get valid children without schema dependencies
+function getValidChildren(
+  service: string,
+  provider: 'aws' | 'azure' | 'gcp',
+): string[] {
+  switch (provider) {
+    case 'aws':
+      switch (service) {
+        case 'account':
+          return ['vpc', 'availability-zone'];
+        case 'vpc':
+          return ['availability-zone', 'subnet', 'ec2', 's3', 'rds', 'lambda'];
+        case 'availability-zone':
+          return ['subnet'];
+        case 'subnet':
+          return ['ec2', 'rds', 'lambda'];
+        default:
+          return [];
+      }
+    case 'azure':
+      switch (service) {
+        case 'subscription':
+          return ['resource-group'];
+        case 'resource-group':
+          return ['virtual-network', 'virtual-machine', 'storage-account'];
+        case 'virtual-network':
+          return ['subnet'];
+        case 'subnet':
+          return ['virtual-machine'];
+        default:
+          return [];
+      }
+    case 'gcp':
+      switch (service) {
+        case 'project':
+          return ['vpc', 'compute-engine', 'cloud-storage'];
+        case 'vpc':
+          return ['subnet'];
+        case 'subnet':
+          return ['compute-engine'];
+        default:
+          return [];
+      }
+    default:
+      return [];
+  }
+}
+
+// Function to validate node placement using appropriate validation function
+function validateNodePlacement(node: Node, allNodes: Node[]) {
+  const cloudProvider = node.data?.cloudProvider;
+  const parentNode = node.parentNode
+    ? (allNodes.find((n) => n.id === node.parentNode) ?? null)
+    : null;
+
+  switch (cloudProvider) {
+    case 'aws':
+      return validateAWSPlacement(node, parentNode, allNodes);
+    case 'azure':
+      return validateAzurePlacement(node, parentNode, allNodes);
+    case 'gcp':
+      return validateGCPPlacement(node, parentNode, allNodes);
+    default:
+      return { isValid: false, message: 'Unknown cloud provider' };
+  }
+}
+
+// Enhanced nodes with validation (simplified)
+export function enhanceNodesWithValidation(nodes: Node[]): Node[] {
+  return nodes.map((node) => ({
+    ...node,
+    data: {
+      ...node.data,
+      semantics: extractNodeSemantics(node),
+      restrictions: extractNodeRestrictions(node, nodes),
+    },
+  }));
+}
+
+// Validate diagram with details (simplified)
+export function validateDiagramWithDetails(nodes: Node[]) {
+  const validationResults = nodes.map((node) => ({
+    nodeId: node.id,
+    validation: validateNodePlacement(node, nodes),
+  }));
+
+  const allValid = validationResults.every(
+    (result) => result.validation.isValid,
+  );
+
+  return {
+    isValid: allValid,
+    nodeValidations: validationResults,
+    summary: {
+      totalNodes: nodes.length,
+      validNodes: validationResults.filter((r) => r.validation.isValid).length,
+      invalidNodes: validationResults.filter((r) => !r.validation.isValid)
+        .length,
+    },
+  };
+}
+
+// Export enhanced diagram data (simplified - only client diagram JSON)
+export function exportEnhancedDiagramData(nodes: Node[], edges: any[]) {
+  return {
+    version: '1.0.0',
+    diagram: {
+      nodes: nodes.map((node) => ({
+        id: node.id,
+        type: node.type,
+        position: node.position,
+        data: {
+          service: node.data?.service,
+          cloudProvider: node.data?.cloudProvider,
+          label: node.data?.label,
+          description: node.data?.description,
+        },
+      })),
+      edges: edges.map((edge) => ({
+        id: edge.id,
+        source: edge.source,
+        target: edge.target,
+        type: edge.type || 'default',
+      })),
+    },
+    metadata: {
+      createdAt: new Date().toISOString(),
+      cloudProviders: [
+        ...new Set(nodes.map((n) => n.data?.cloudProvider).filter(Boolean)),
+      ],
+    },
+  };
+}

package/packages/diagrams/src/lib/templates/collaborationDiagram/CollaborationDiagram.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ReactFlowProvider } from '@xyflow/react';
+import CollaborationDiagramFlow from './components/CollaborationDiagramFlow';
+import { CollaborationDiagramProps } from '../../types/collaboration-types';
+
+const CollaborationDiagram: React.FC<CollaborationDiagramProps> = ({ collabNodes, collabEdges }) => {
+    return (
+        <div className="collaboration-diagram-container">
+            <ReactFlowProvider>
+                <CollaborationDiagramFlow collabNodes={collabNodes} collabEdges={collabEdges} />
+            </ReactFlowProvider>
+        </div>
+    );
+};
+
+export default React.memo(CollaborationDiagram); 

package/packages/diagrams/src/lib/templates/collaborationDiagram/components/AddCollabEdgeDialog.tsx

@@ -0,0 +1,182 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+    Box,
+    Button,
+    FormControl,
+    InputLabel,
+    Select,
+    MenuItem,
+    TextField,
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    SelectChangeEvent,
+    ToggleButton,
+    ToggleButtonGroup,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { CollaborationNode, CollaborationEdge, CollabEdgeVariant } from '../../../types/collaboration-types';
+
+interface AddCollabEdgeDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onAddEdge: (sourceId: string, targetId: string, variant: CollabEdgeVariant, label?: string, arrowHeadSource?: 'none' | 'v', arrowHeadTarget?: 'none' | 'v') => void;
+    nodes: CollaborationNode[];
+    initialSourceId?: string | null;
+    initialTargetId?: string | null;
+    editingEdge?: CollaborationEdge | null;
+    onDeleteEdge?: () => void;
+}
+
+const AddCollabEdgeDialog: React.FC<AddCollabEdgeDialogProps> = ({
+    open,
+    onClose,
+    onAddEdge,
+    nodes,
+    initialSourceId,
+    initialTargetId,
+    editingEdge,
+    onDeleteEdge,
+}) => {
+    const { t } = useTranslation();
+    const [sourceId, setSourceId] = useState('');
+    const [targetId, setTargetId] = useState('');
+    const [variant, setVariant] = useState<CollabEdgeVariant>('message');
+    const [edgeLabel, setEdgeLabel] = useState('');
+    const [arrowHeadSource, setArrowHeadSource] = useState<'none' | 'v'>('none');
+    const [arrowHeadTarget, setArrowHeadTarget] = useState<'none' | 'v'>('none');
+
+    useEffect(() => {
+        if (open) {
+            if (editingEdge) {
+                setSourceId(editingEdge.source);
+                setTargetId(editingEdge.target);
+                setVariant(editingEdge.data?.variant || 'message');
+                setEdgeLabel(editingEdge.data?.label || '');
+                setArrowHeadSource(editingEdge.data?.arrowHeadSource || 'none');
+                setArrowHeadTarget(editingEdge.data?.arrowHeadTarget || 'none');
+            } else if (nodes.length > 0) {
+                setSourceId(initialSourceId || nodes[0].id);
+                setTargetId(initialTargetId || (nodes.length > 1 ? nodes[1].id : nodes[0].id));
+                setVariant('message');
+                setEdgeLabel('');
+                setArrowHeadSource('none');
+                setArrowHeadTarget('none');
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+
+    const handleSubmit = useCallback(() => {
+        onAddEdge(sourceId, targetId, variant, edgeLabel, arrowHeadSource, arrowHeadTarget);
+        onClose();
+    }, [onAddEdge, sourceId, targetId, variant, edgeLabel, arrowHeadSource, arrowHeadTarget, onClose]);
+
+    return (
+        <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+            <DialogTitle>{editingEdge ? t('addCollabEdgeDialog.editEdge') : t('addCollabEdgeDialog.addEdge')}</DialogTitle>
+            <DialogContent>
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, my: 2 }}>
+                    <FormControl fullWidth>
+                        <InputLabel>{t('addCollabEdgeDialog.sourceNode')}</InputLabel>
+                        <Select
+                            value={sourceId}
+                            onChange={(e: SelectChangeEvent) => setSourceId(e.target.value as string)}
+                            label={t('addCollabEdgeDialog.sourceNode')}
+                        >
+                            {nodes.map((node) => (
+                                <MenuItem key={`source-${node.id}`} value={node.id}>
+                                    {String(node.data?.label) || node.id}
+                                </MenuItem>
+                            ))}
+                        </Select>
+                    </FormControl>
+
+                    <FormControl fullWidth>
+                        <InputLabel>{t('addCollabEdgeDialog.targetNode')}</InputLabel>
+                        <Select
+                            value={targetId}
+                            onChange={(e: SelectChangeEvent) => setTargetId(e.target.value as string)}
+                            label={t('addCollabEdgeDialog.targetNode')}
+                        >
+                            {nodes.map((node) => (
+                                <MenuItem key={`target-${node.id}`} value={node.id}>
+                                    {String(node.data?.label) || node.id}
+                                </MenuItem>
+                            ))}
+                        </Select>
+                    </FormControl>
+
+                    <FormControl fullWidth>
+                        <InputLabel>{t('addCollabEdgeDialog.edgeType')}</InputLabel>
+                        <Select
+                            value={variant}
+                            onChange={(e: SelectChangeEvent) => setVariant(e.target.value as CollabEdgeVariant)}
+                            label={t('addCollabEdgeDialog.edgeType')}
+                        >
+                            <MenuItem value="message">{t('addCollabEdgeDialog.message')}</MenuItem>
+                            <MenuItem value="return-message">{t('addCollabEdgeDialog.returnMessage')}</MenuItem>
+                        </Select>
+                    </FormControl>
+
+                    <TextField
+                        label={t('addCollabEdgeDialog.labelOptional')}
+                        value={edgeLabel}
+                        onChange={(e) => setEdgeLabel(e.target.value)}
+                        fullWidth
+                    />
+
+                    <Box mb={2}>
+                        <InputLabel shrink>{t('addCollabEdgeDialog.arrowHeadSource')}</InputLabel>
+                        <ToggleButtonGroup
+                            value={arrowHeadSource}
+                            exclusive
+                            onChange={(_, value) => value && setArrowHeadSource(value)}
+                            size="small"
+                        >
+                            <ToggleButton value="none">{t('addCollabEdgeDialog.none')}</ToggleButton>
+                            <ToggleButton value="v">
+                                <svg width="24" height="16"><polyline points="24,0 12,8 24,16" fill="none" stroke="black" strokeWidth="2" /></svg>
+                            </ToggleButton>
+                        </ToggleButtonGroup>
+                    </Box>
+                    <Box mb={2}>
+                        <InputLabel shrink>{t('addCollabEdgeDialog.arrowHeadTarget')}</InputLabel>
+                        <ToggleButtonGroup
+                            value={arrowHeadTarget}
+                            exclusive
+                            onChange={(_, value) => value && setArrowHeadTarget(value)}
+                            size="small"
+                        >
+                            <ToggleButton value="none">{t('addCollabEdgeDialog.none')}</ToggleButton>
+                            <ToggleButton value="v">
+                                <svg width="24" height="16"><polyline points="0,0 12,8 0,16" fill="none" stroke="black" strokeWidth="2" /></svg>
+                            </ToggleButton>
+                        </ToggleButtonGroup>
+                    </Box>
+                </Box>
+            </DialogContent>
+            <DialogActions>
+                {editingEdge && onDeleteEdge && (
+                    <Button onClick={onDeleteEdge} color="error">
+                        {t('addCollabEdgeDialog.delete')}
+                    </Button>
+                )}
+                <Button onClick={onClose} color="secondary">
+                    {t('addCollabEdgeDialog.cancel')}
+                </Button>
+                <Button
+                    onClick={handleSubmit}
+                    color="primary"
+                    variant="contained"
+                    disabled={!sourceId || !targetId}
+                >
+                    {editingEdge ? t('addCollabEdgeDialog.save') : t('addCollabEdgeDialog.addEdge')}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export default AddCollabEdgeDialog;