@flowuent-org/diagramming-core 1.0.8 → 1.1.0

package/packages/diagrams/src/lib/templates/cloud-arch/components/PropertiesPanel.tsx

@@ -1,1063 +0,0 @@
-import React, { useState } from 'react';
-import {
-  Box,
-  Typography,
-  Select,
-  MenuItem,
-  Button,
-  FormControl,
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
-  InputBase,
-  InputAdornment,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  FormControlLabel,
-  Checkbox,
-  ButtonGroup,
-  Divider,
-  Alert,
-  InputLabel,
-} from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import SearchIcon from '@mui/icons-material/Search';
-import FileDownloadIcon from '@mui/icons-material/FileDownload';
-import ViewInArIcon from '@mui/icons-material/ViewInAr';
-import NetworkCheckIcon from '@mui/icons-material/NetworkCheck';
-import StorageIcon from '@mui/icons-material/Storage';
-import TableViewIcon from '@mui/icons-material/TableView';
-import SecurityIcon from '@mui/icons-material/Security';
-import BuildIcon from '@mui/icons-material/Build';
-import SmartToyIcon from '@mui/icons-material/SmartToy';
-import AnalyticsIcon from '@mui/icons-material/Analytics';
-import AppsIcon from '@mui/icons-material/Apps';
-import RouterIcon from '@mui/icons-material/Router';
-import SchemaIcon from '@mui/icons-material/Schema';
-import DataObjectIcon from '@mui/icons-material/DataObject';
-import { Node, XYPosition } from 'reactflow';
-import { getServiceIcon } from '../utils/serviceIcons';
-import {
-  AWS_SERVICE_ICONS,
-  AZURE_SERVICE_ICONS,
-  GCP_SERVICE_ICONS,
-} from '../utils/iconMapping';
-import { AWS_CATEGORIES } from '../utils/aws-icons';
-import { AZURE_CATEGORIES } from '../utils/azure-icons';
-import { GCP_CATEGORIES } from '../utils/gcp-icons';
-import VpcIcon from '@mui/icons-material/AccountTree';
-import SubnetIcon from '@mui/icons-material/Hub';
-import AzIcon from '@mui/icons-material/Domain';
-import SecurityGroupIcon from '@mui/icons-material/Security';
-import SubscriptionIcon from '@mui/icons-material/Subscriptions';
-import ResourceGroupIcon from '@mui/icons-material/Folder';
-import VNetIcon from '@mui/icons-material/Cloud';
-import ProjectIcon from '@mui/icons-material/Business';
-import FolderIcon from '@mui/icons-material/FolderOpen';
-import AccountIcon from '@mui/icons-material/AccountBalance';
-import LocationOnIcon from '@mui/icons-material/LocationOn';
-import {
-  extractNodeSemantics,
-  extractNodeRestrictions,
-  exportEnhancedDiagramData,
-} from '../utils/validationExtractor';
-import { CloudProvider } from '../types/validation';
-// Import data managers and validators
-import { diagramDataManager } from '../data/diagramManager';
-import { diagramValidator } from '../integration/diagramValidator';
-
-interface ServiceItem {
-  type: 'serviceNode' | 'subnetNode';
-  service: string;
-  label: string;
-  canBeChild?: boolean;
-  icon?: React.ReactNode;
-  description?: string;
-}
-
-interface PropertiesPanelProps {
-  onAddNode: (
-    type: string,
-    service: string,
-    position?: XYPosition,
-    cloudProvider?: 'aws' | 'azure' | 'gcp',
-  ) => void;
-  nodes: Node[];
-  edges?: any[];
-}
-
-type CategoryType =
-  | (typeof AWS_CATEGORIES)[keyof typeof AWS_CATEGORIES]
-  | (typeof AZURE_CATEGORIES)[keyof typeof AZURE_CATEGORIES]
-  | (typeof GCP_CATEGORIES)[keyof typeof GCP_CATEGORIES];
-
-const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
-  onAddNode,
-  nodes,
-  edges = [],
-}) => {
-  const [selectedProvider, setSelectedProvider] = useState<
-    'aws' | 'azure' | 'gcp' | ''
-  >('');
-  const [expandedProvider, setExpandedProvider] = useState<string | false>(
-    false,
-  );
-  const [expandedCategory, setExpandedCategory] = useState<string | false>(
-    false,
-  );
-  const [selectedAwsCategory, setSelectedAwsCategory] = useState<CategoryType>(
-    AWS_CATEGORIES.COMPUTE,
-  );
-  const [selectedAzureCategory, setSelectedAzureCategory] =
-    useState<CategoryType>(AZURE_CATEGORIES.COMPUTE);
-  const [selectedGcpCategory, setSelectedGcpCategory] =
-    useState<CategoryType>('Compute');
-  const [isExportDialogOpen, setIsExportDialogOpen] = useState(false);
-  const [exportOptions, setExportOptions] = useState({
-    includeMetadata: true,
-  });
-
-  const handleProviderChange =
-    (provider: string) =>
-    (event: React.SyntheticEvent, isExpanded: boolean) => {
-      setExpandedProvider(isExpanded ? provider : false);
-    };
-
-  const handleCategoryChange =
-    (category: string) =>
-    (event: React.SyntheticEvent, isExpanded: boolean) => {
-      setExpandedCategory(isExpanded ? category : false);
-    };
-
-  // Export diagram data functionality
-  const handleExport = () => {
-    const { includeMetadata } = exportOptions;
-
-    try {
-      // Export user diagram data only
-      exportDataFile(includeMetadata);
-      console.log('User diagram data exported successfully');
-      
-      setIsExportDialogOpen(false);
-    } catch (error) {
-      console.error('Export failed:', error);
-    }
-  };
-
-
-
-  const exportDataFile = (
-    includeMetadata: boolean,
-  ) => {
-    try {
-      // Use the enhanced diagram data export function
-      const diagramData = exportEnhancedDiagramData(nodes, edges || []);
-      
-      const finalData = includeMetadata ? diagramData : diagramData.diagram;
-      const content = JSON.stringify(finalData, null, 2);
-
-      downloadFile(
-        content,
-        `cloud-architecture-data.json`,
-        'application/json',
-      );
-    } catch (error) {
-      console.error('Error exporting data:', error);
-    }
-  };
-
-  const downloadFile = (
-    content: string,
-    filename: string,
-    mimeType: string,
-  ) => {
-    const blob = new Blob([content], { type: mimeType });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = filename;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  };
-
-  // Get icon for category
-  const getCategoryIcon = (category: string) => {
-    const lowerCategory = category.toLowerCase();
-    if (lowerCategory.includes('container'))
-      return <ViewInArIcon sx={{ color: 'gray', fontSize: '18px' }} />;
-    if (lowerCategory.includes('network'))
-      return <NetworkCheckIcon sx={{ color: 'gray', fontSize: '18px' }} />;
-    if (lowerCategory.includes('storage'))
-      return <StorageIcon sx={{ color: 'gray', fontSize: '18px' }} />;
-    if (lowerCategory.includes('database'))
-      return <TableViewIcon sx={{ color: 'gray', fontSize: '18px' }} />;
-    if (lowerCategory.includes('security'))
-      return <SecurityIcon sx={{ color: 'gray', fontSize: '18px' }} />;
-    if (lowerCategory.includes('compute'))
-      return <BuildIcon sx={{ color: 'gray', fontSize: '18px' }} />;
-    if (lowerCategory.includes('ai') || lowerCategory.includes('ml'))
-      return <SmartToyIcon sx={{ color: 'gray', fontSize: '18px' }} />;
-    if (lowerCategory.includes('analytics'))
-      return <AnalyticsIcon sx={{ color: 'gray', fontSize: '18px' }} />;
-    if (lowerCategory.includes('application'))
-      return <AppsIcon sx={{ color: 'gray', fontSize: '18px' }} />;
-    if (lowerCategory.includes('iot'))
-      return <RouterIcon sx={{ color: 'gray', fontSize: '18px' }} />;
-    return <AppsIcon sx={{ color: 'gray', fontSize: '18px' }} />;
-  };
-
-  // Get categories based on selected provider
-  const getProviderCategories = () => {
-    switch (selectedProvider) {
-      case 'aws':
-        return Object.values(AWS_CATEGORIES);
-      case 'azure':
-        return Object.values(AZURE_CATEGORIES);
-      case 'gcp':
-        return Object.values(GCP_CATEGORIES);
-      default:
-        return [];
-    }
-  };
-
-  // AWS Container Nodes - Following AWS hierarchy: Account → VPC → Subnet
-  const awsContainerNodes: ServiceItem[] = [
-    {
-      type: 'subnetNode',
-      service: 'account',
-      label: 'AWS Account',
-      canBeChild: false,
-      icon: <AccountIcon sx={{ color: '#FF9900' }} />,
-      description:
-        'Root container for all AWS resources - billing and access management boundary',
-    },
-    {
-      type: 'subnetNode',
-      service: 'vpc',
-      label: 'Virtual Private Cloud (VPC)',
-      canBeChild: true,
-      icon: <VpcIcon sx={{ color: '#FF9900' }} />,
-      description: 'Isolated network environment in AWS cloud',
-    },
-    {
-      type: 'subnetNode',
-      service: 'subnet',
-      label: 'Subnet',
-      canBeChild: true,
-      icon: <SubnetIcon sx={{ color: '#FF9900' }} />,
-      description: 'Range of IP addresses within a VPC',
-    },
-    {
-      type: 'subnetNode',
-      service: 'availability-zone',
-      label: 'Availability Zone',
-      canBeChild: true,
-      icon: <AzIcon sx={{ color: '#FF9900' }} />,
-      description: 'Distinct data center location within an AWS Region',
-    },
-    {
-      type: 'subnetNode',
-      service: 'local-zone',
-      label: 'Local Zone',
-      canBeChild: true,
-      icon: <LocationOnIcon sx={{ color: '#FF9900' }} />,
-      description: 'Edge location for ultra-low latency applications',
-    },
-    {
-      type: 'subnetNode',
-      service: 'security-group',
-      label: 'Security Group',
-      canBeChild: true,
-      icon: <SecurityGroupIcon sx={{ color: '#FF9900' }} />,
-      description:
-        'Virtual firewall for controlling inbound and outbound traffic',
-    },
-  ];
-
-  // Azure Container Nodes - Following Azure hierarchy: Subscription → Resource Group → Virtual Network → Subnet
-  const azureContainerNodes: ServiceItem[] = [
-    {
-      type: 'subnetNode',
-      service: 'subscription',
-      label: 'Azure Subscription',
-      canBeChild: false,
-      icon: <SubscriptionIcon sx={{ color: '#0078D4' }} />,
-      description:
-        'Root container for all Azure resources - billing and access management boundary',
-    },
-    {
-      type: 'subnetNode',
-      service: 'resource-group',
-      label: 'Resource Group',
-      canBeChild: true,
-      icon: <ResourceGroupIcon sx={{ color: '#0078D4' }} />,
-      description:
-        'Logical container for resources that share the same lifecycle',
-    },
-    {
-      type: 'subnetNode',
-      service: 'virtual-network',
-      label: 'Virtual Network (VNet)',
-      canBeChild: true,
-      icon: <VNetIcon sx={{ color: '#4099FF' }} />,
-      description: 'Isolated network in Azure cloud - similar to AWS VPC',
-    },
-    {
-      type: 'subnetNode',
-      service: 'subnet',
-      label: 'Subnet',
-      canBeChild: true,
-      icon: <SubnetIcon sx={{ color: '#4099FF' }} />,
-      description: 'Range of IP addresses within a Virtual Network',
-    },
-    {
-      type: 'subnetNode',
-      service: 'network-security-group',
-      label: 'Network Security Group',
-      canBeChild: true,
-      icon: <SecurityGroupIcon sx={{ color: '#FF6347' }} />,
-      description: 'Virtual firewall for controlling network traffic',
-    },
-  ];
-
-  // GCP Container Nodes - Following GCP hierarchy: Project → Folder → VPC → Subnet
-  const gcpContainerNodes: ServiceItem[] = [
-    {
-      type: 'subnetNode',
-      service: 'project',
-      label: 'GCP Project',
-      canBeChild: false,
-      icon: <ProjectIcon sx={{ color: '#4285F4' }} />,
-      description:
-        'Root container for all GCP resources - billing and access management boundary',
-    },
-    {
-      type: 'subnetNode',
-      service: 'folder',
-      label: 'Folder',
-      canBeChild: true,
-      icon: <FolderIcon sx={{ color: '#34A853' }} />,
-      description: 'Optional organization unit for grouping projects',
-    },
-    {
-      type: 'subnetNode',
-      service: 'vpc',
-      label: 'VPC Network',
-      canBeChild: true,
-      icon: <VpcIcon sx={{ color: '#4285F4' }} />,
-      description: 'Global virtual network in GCP - similar to AWS VPC',
-    },
-    {
-      type: 'subnetNode',
-      service: 'subnet',
-      label: 'Subnet',
-      canBeChild: true,
-      icon: <SubnetIcon sx={{ color: '#4285F4' }} />,
-      description: 'Regional IP range within a VPC Network',
-    },
-  ];
-
-  // Get services for a specific category and provider
-  const getServicesByCategory = (category: string) => {
-    if (!selectedProvider) return [];
-
-    let services: ServiceItem[] = [];
-    let containerNodes: ServiceItem[] = [];
-
-    switch (selectedProvider) {
-      case 'aws':
-        services = Object.entries(AWS_SERVICE_ICONS)
-          .filter(([_, service]) => service.category === category)
-          .map(([key, service]) => ({
-            type: 'serviceNode',
-            service: key,
-            label: service.name,
-          }));
-        containerNodes = awsContainerNodes;
-        break;
-      case 'azure':
-        services = Object.entries(AZURE_SERVICE_ICONS)
-          .filter(([_, service]) => service.category === category)
-          .map(([key, service]) => ({
-            type: 'serviceNode',
-            service: key,
-            label: service.name,
-          }));
-        containerNodes = azureContainerNodes;
-        break;
-      case 'gcp':
-        services = Object.entries(GCP_SERVICE_ICONS)
-          .filter(([_, service]) => service.category === category)
-          .map(([key, service]) => ({
-            type: 'serviceNode',
-            service: key,
-            label: service.name,
-          }));
-        containerNodes = gcpContainerNodes;
-        break;
-    }
-
-    // For container category, include container nodes
-    if (
-      category.toLowerCase().includes('container') ||
-      category.toLowerCase().includes('compute')
-    ) {
-      return [...containerNodes, ...services];
-    }
-
-    return services;
-  };
-
-  // Get all AWS services for the selected category
-  const awsServices: ServiceItem[] = Object.entries(AWS_SERVICE_ICONS)
-    .filter(([_, service]) => service.category === selectedAwsCategory)
-    .map(([key, service]) => ({
-      type: 'serviceNode',
-      service: key,
-      label: service.name,
-    }));
-
-  // Get all Azure services for the selected category
-  const azureServices: ServiceItem[] = Object.entries(AZURE_SERVICE_ICONS)
-    .filter(([_, service]) => service.category === selectedAzureCategory)
-    .map(([key, service]) => ({
-      type: 'serviceNode',
-      service: key,
-      label: service.name,
-    }));
-
-  // Get all GCP services for the selected category
-  const gcpServices: ServiceItem[] = Object.entries(GCP_SERVICE_ICONS)
-    .filter(([_, service]) => {
-      return service.category === selectedGcpCategory;
-    })
-    .map(([key, service]) => ({
-      type: 'serviceNode',
-      service: key,
-      label: service.name,
-    }));
-
-  // Filter out container services from regular services
-  const filteredAwsServices =
-    selectedAwsCategory === AWS_CATEGORIES.NETWORKING
-      ? awsServices.filter(
-          (service) =>
-            !['vpc', 'subnet', 'security-group'].includes(service.service),
-        )
-      : awsServices;
-
-  const filteredAzureServices =
-    selectedAzureCategory === AZURE_CATEGORIES.NETWORKING
-      ? azureServices.filter(
-          (service) => !['virtual-network', 'subnet'].includes(service.service),
-        )
-      : azureServices;
-
-  const filteredGcpServices =
-    selectedGcpCategory === 'Networking'
-      ? gcpServices.filter(
-          (service) => !['vpc', 'subnet'].includes(service.service),
-        )
-      : gcpServices;
-
-  // Render services grid
-  const renderServiceGrid = (
-    services: ServiceItem[],
-    cloudProvider: 'aws' | 'azure' | 'gcp' = 'aws',
-  ) => (
-    <Box
-      sx={{
-        display: 'grid',
-        gridTemplateColumns: 'repeat(2, 1fr)',
-        gap: 1.5,
-        mt: 1,
-      }}
-    >
-      {services.map((service) => {
-        const icon =
-          service.icon || getServiceIcon(service.service, cloudProvider);
-
-        return (
-          <Button
-            key={service.service}
-            draggable
-            onDragStart={(e) => {
-              const dragData = {
-                service: service.service,
-                nodeType: service.type,
-                cloudProvider: cloudProvider,
-                label: service.label,
-              };
-              e.dataTransfer.setData(
-                'application/json',
-                JSON.stringify(dragData),
-              );
-              e.dataTransfer.effectAllowed = 'copy';
-
-              // Add visual feedback
-              e.currentTarget.style.opacity = '0.5';
-              e.currentTarget.style.transform = 'scale(0.95)';
-            }}
-            onDragEnd={(e) => {
-              // Reset visual feedback
-              e.currentTarget.style.opacity = '1';
-              e.currentTarget.style.transform = 'scale(1)';
-            }}
-            onClick={() =>
-              onAddNode(service.type, service.service, undefined, cloudProvider)
-            }
-            sx={{
-              p: 1,
-              border: '1px solid #333',
-              borderRadius: '8px',
-              cursor: 'grab',
-              textAlign: 'center',
-              transition: 'all 0.2s ease',
-              bgcolor: '#2a2a2a',
-              '&:hover': {
-                borderColor: '#61dafb',
-                bgcolor: 'rgba(97, 218, 251, 0.1)',
-                transform: 'translateY(-2px)',
-              },
-              '&:active': {
-                cursor: 'grabbing',
-              },
-              display: 'flex',
-              alignItems: 'center',
-              gap: 1,
-              minHeight: '60px',
-              justifyContent: 'flex-start',
-              textTransform: 'none',
-              '& svg': {
-                width: '20px',
-                height: '20px',
-                flexShrink: 0,
-              },
-            }}
-          >
-            <Box
-              sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                width: '24px',
-                height: '24px',
-                flexShrink: 0,
-              }}
-            >
-              {icon}
-            </Box>
-            <Typography
-              variant="body2"
-              sx={{
-                flexGrow: 1,
-                textAlign: 'left',
-                fontSize: '0.875rem',
-                lineHeight: 1.2,
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-              }}
-            >
-              {service.label}
-            </Typography>
-          </Button>
-        );
-      })}
-    </Box>
-  );
-
-  // Render services grid for categories
-  const renderCategoryServices = (category: string) => {
-    const services = getServicesByCategory(category);
-
-    if (services.length === 0) {
-      return (
-        <Typography
-          variant="body2"
-          sx={{ color: '#666', textAlign: 'center', py: 2 }}
-        >
-          No services available for this category
-        </Typography>
-      );
-    }
-
-    return (
-      <Box
-        sx={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(2, 1fr)',
-          gap: 2,
-          mt: 1,
-        }}
-      >
-        {services.map((service) => (
-          <Box
-            key={service.service}
-            draggable
-            onDragStart={(e) => {
-              const dragData = {
-                service: service.service,
-                nodeType: service.type,
-                cloudProvider:
-                  selectedProvider !== '' ? selectedProvider : 'aws',
-                label: service.label,
-              };
-              e.dataTransfer.setData(
-                'application/json',
-                JSON.stringify(dragData),
-              );
-              e.dataTransfer.effectAllowed = 'copy';
-
-              // Add visual feedback
-              e.currentTarget.style.opacity = '0.5';
-              e.currentTarget.style.transform = 'scale(0.95)';
-            }}
-            onDragEnd={(e) => {
-              // Reset visual feedback
-              e.currentTarget.style.opacity = '1';
-              e.currentTarget.style.transform = 'scale(1)';
-            }}
-            onClick={() =>
-              onAddNode(
-                service.type,
-                service.service,
-                undefined, // Let automatic assignment choose position
-                selectedProvider !== '' ? selectedProvider : undefined,
-              )
-            }
-            sx={{
-              p: 1.5,
-              border: '1px solid #333',
-              borderRadius: '8px',
-              cursor: 'grab',
-              textAlign: 'center',
-              transition: 'all 0.2s ease',
-              bgcolor: '#2a2a2a',
-              '&:hover': {
-                borderColor: '#61dafb',
-                bgcolor: 'rgba(97, 218, 251, 0.1)',
-                transform: 'translateY(-2px)',
-              },
-              '&:active': {
-                cursor: 'grabbing',
-              },
-            }}
-          >
-            <Box
-              sx={{
-                width: 40,
-                height: 40,
-                mx: 'auto',
-                mb: 1,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                bgcolor: '#1a1a1a',
-                borderRadius: '4px',
-              }}
-            >
-              {service.icon ||
-                getServiceIcon(
-                  service.service,
-                  selectedProvider !== '' ? selectedProvider : 'aws',
-                )}
-            </Box>
-            <Typography
-              variant="caption"
-              sx={{
-                color: '#fff',
-                fontSize: '0.75rem',
-                fontWeight: 500,
-                lineHeight: 1.2,
-                display: 'block',
-              }}
-            >
-              {service.label}
-            </Typography>
-          </Box>
-        ))}
-      </Box>
-    );
-  };
-
-  // Render category accordions for selected provider
-  const renderCategoryAccordions = () => {
-    if (!selectedProvider) return null;
-
-    const categories = getProviderCategories();
-
-    return (
-      <Box sx={{ mt: 2 }}>
-        {categories.map((category) => (
-          <Accordion
-            key={category}
-            expanded={expandedCategory === category}
-            onChange={handleCategoryChange(category)}
-            sx={{
-              mb: 2,
-              bgcolor: 'transparent',
-              color: '#fff',
-              boxShadow: 'none',
-              '&:before': {
-                display: 'none',
-              },
-              border: 'none',
-              borderBottom: '1px solid #333',
-              borderRadius: '0 !important',
-              '&.Mui-expanded': {
-                margin: '0 0 16px 0',
-              },
-            }}
-          >
-            <AccordionSummary
-              expandIcon={
-                <ExpandMoreIcon sx={{ color: '#999', fontSize: '20px' }} />
-              }
-              sx={{
-                borderRadius: '0',
-                minHeight: '56px',
-                px: 0,
-                '&:hover': {
-                  bgcolor: 'transparent',
-                },
-                '& .MuiAccordionSummary-content': {
-                  margin: '12px 0',
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 2,
-                },
-              }}
-            >
-              {getCategoryIcon(category)}
-              <Typography
-                sx={{
-                  fontWeight: 400,
-                  color: '#fff',
-                  fontSize: '1rem',
-                }}
-              >
-                {category}
-              </Typography>
-            </AccordionSummary>
-            <AccordionDetails sx={{ padding: '16px' }}>
-              {renderCategoryServices(category)}
-            </AccordionDetails>
-          </Accordion>
-        ))}
-      </Box>
-    );
-  };
-
-  return (
-    <>
-      <Box
-        sx={{
-          width: '100%',
-          height: '100%',
-          overflow: 'auto',
-          bgcolor: '#1a1a1a',
-          color: 'common.white',
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-      >
-        {/* Scrollable Content */}
-        <Box
-          sx={{
-            flex: 1,
-            overflowY: 'auto',
-            px: 2,
-            pb: 2,
-            pt: 2,
-          }}
-        >
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 2,
-              mb: 2,
-            }}
-          >
-            <Button
-              variant="contained"
-              sx={{
-                bgcolor: '#4C4CFF',
-                color: 'white',
-                fontSize: '0.875rem',
-                fontWeight: 600,
-                textTransform: 'none',
-                borderRadius: '12px',
-                px: 3,
-                py: 0.5,
-                border: '2px solid #4C4CFF',
-                '&:hover': {
-                  bgcolor: '#3B3BFF',
-                  borderColor: '#3B3BFF',
-                },
-              }}
-            >
-              Templates
-            </Button>
-            <FormControl size="small" sx={{ minWidth: 140 }}>
-              <Select
-                value={selectedProvider}
-                onChange={(e) =>
-                  setSelectedProvider(
-                    e.target.value as 'aws' | 'azure' | 'gcp' | '',
-                  )
-                }
-                displayEmpty
-                sx={{
-                  color: '#fff',
-                  fontSize: '0.875rem',
-                  bgcolor: '#333',
-                  borderRadius: '12px',
-                  '& .MuiOutlinedInput-notchedOutline': {
-                    borderColor: '#444',
-                  },
-                  '&:hover .MuiOutlinedInput-notchedOutline': {
-                    borderColor: '#61dafb',
-                  },
-                  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                    borderColor: '#61dafb',
-                  },
-                  '& .MuiSelect-select': {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 1,
-                    py: 1.5,
-                    px: 2,
-                  },
-                }}
-              >
-                <MenuItem value="">
-                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                    <Typography>Select Provider</Typography>
-                  </Box>
-                </MenuItem>
-                <MenuItem value="aws">
-                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                    <Box
-                      component="img"
-                      src="/aws-icons/compute/EC2.svg"
-                      alt="AWS"
-                      sx={{ width: 20, height: 20 }}
-                    />
-                    <Typography>AWS</Typography>
-                  </Box>
-                </MenuItem>
-                <MenuItem value="azure">
-                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                    <Box
-                      component="img"
-                      src="/azure-icons/compute/00195-icon-service-Maintenance-Configuration.svg"
-                      alt="Azure"
-                      sx={{ width: 20, height: 20 }}
-                    />
-                    <Typography>Azure</Typography>
-                  </Box>
-                </MenuItem>
-                <MenuItem value="gcp">
-                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                    <Box
-                      component="img"
-                      src="/gcp-icons/compute/compute-engine.svg"
-                      alt="GCP"
-                      sx={{ width: 20, height: 20 }}
-                    />
-                    <Typography>GCP</Typography>
-                  </Box>
-                </MenuItem>
-              </Select>
-            </FormControl>
-          </Box>
-
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 2,
-              mb: 3,
-            }}
-          >
-            <InputBase
-              placeholder="Search design resources..."
-              startAdornment={
-                <InputAdornment position="start">
-                  <SearchIcon sx={{ color: '#999', fontSize: '20px' }} />
-                </InputAdornment>
-              }
-              sx={{
-                bgcolor: '#2a2a2a',
-                borderRadius: '12px',
-                px: 2,
-                py: 1.25,
-                color: 'white',
-                width: '100%',
-                fontSize: '14px',
-                border: '1px solid #333',
-                '& .MuiInputBase-input': {
-                  padding: 0,
-                  '&::placeholder': {
-                    color: '#999',
-                    opacity: 1,
-                  },
-                },
-                '& .MuiInputAdornment-root': {
-                  marginRight: 1,
-                },
-              }}
-            />
-            <Button
-              variant="contained"
-              onClick={() => setIsExportDialogOpen(true)}
-              sx={{
-                bgcolor: '#2a2a2a',
-                borderRadius: '12px',
-                px: 2,
-                py: 1.25,
-                color: 'white',
-                border: '1px solid #333',
-                minWidth: 'auto',
-                '&:hover': {
-                  bgcolor: '#333',
-                  borderColor: '#61dafb',
-                },
-              }}
-              title="Export with schema/data separation - choose what to export and format"
-            >
-              <FileDownloadIcon sx={{ color: '#61dafb', fontSize: '20px' }} />
-            </Button>
-          </Box>
-
-          {/* Render category accordions based on selected provider */}
-          {selectedProvider && renderCategoryAccordions()}
-
-          {/* Show message when no provider is selected */}
-          {!selectedProvider && (
-            <Box
-              sx={{
-                textAlign: 'center',
-                mt: 4,
-                p: 3,
-                border: '1px dashed #444',
-                borderRadius: '8px',
-                bgcolor: '#2a2a2a',
-              }}
-            >
-              <Typography
-                variant="body1"
-                sx={{
-                  color: '#999',
-                  mb: 1,
-                }}
-              >
-                Select a cloud provider to view services
-              </Typography>
-              <Typography
-                variant="caption"
-                sx={{
-                  color: '#666',
-                }}
-              >
-                Choose AWS, Azure, or GCP from the dropdown above
-              </Typography>
-            </Box>
-          )}
-        </Box>
-      </Box>
-
-      {/* Diagram Data Export Dialog */}
-      <Dialog
-        open={isExportDialogOpen}
-        onClose={() => setIsExportDialogOpen(false)}
-        maxWidth="sm"
-        fullWidth
-        PaperProps={{
-          sx: {
-            bgcolor: '#1a1a1a',
-            color: 'white',
-            border: '1px solid #333',
-          },
-        }}
-      >
-        <DialogTitle
-          sx={{
-            bgcolor: '#2a2a2a',
-            borderBottom: '1px solid #333',
-            display: 'flex',
-            alignItems: 'center',
-            gap: 2,
-          }}
-        >
-          <FileDownloadIcon sx={{ color: '#61dafb' }} />
-          Export Diagram Data
-        </DialogTitle>
-
-        <DialogContent sx={{ p: 3 }}>
-          <Box sx={{ mb: 3 }}>
-            <Typography variant="body1" sx={{ color: '#ccc', mb: 3 }}>
-              Export your diagram as JSON containing all the nodes and edges you've created.
-            </Typography>
-
-            <FormControlLabel
-              control={
-                <Checkbox
-                  checked={exportOptions.includeMetadata}
-                  onChange={(e) =>
-                    setExportOptions((prev) => ({
-                      ...prev,
-                      includeMetadata: e.target.checked,
-                    }))
-                  }
-                  sx={{ color: '#61dafb' }}
-                />
-              }
-              label="Include metadata (timestamps, counts, cloud providers)"
-              sx={{ color: '#ccc', mb: 2 }}
-            />
-
-            <Typography variant="body2" sx={{ color: '#999' }}>
-              <strong>File:</strong> cloud-architecture-data.json<br/>
-              <strong>Content:</strong> Nodes, edges, positions, and diagram data
-            </Typography>
-          </Box>
-        </DialogContent>
-
-        <DialogActions
-          sx={{
-            bgcolor: '#2a2a2a',
-            borderTop: '1px solid #333',
-            p: 2,
-          }}
-        >
-          <Button
-            onClick={() => setIsExportDialogOpen(false)}
-            sx={{ color: '#999' }}
-          >
-            Cancel
-          </Button>
-          <Button
-            onClick={handleExport}
-            variant="contained"
-            sx={{
-              bgcolor: '#61dafb',
-              color: '#000',
-              '&:hover': { bgcolor: '#4fc3f7' },
-            }}
-          >
-            Export Diagram Data
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </>
-  );
-};
-
-export default PropertiesPanel;