@flowuent-org/diagramming-core 1.3.10 → 1.4.1

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

@@ -1,657 +1,657 @@
-import React, { useState, useEffect } from 'react';
-import {
-  Box,
-  Typography,
-  TextField,
-  Button,
-  Tabs,
-  Tab,
-  Slider,
-  ToggleButtonGroup,
-  ToggleButton,
-  Divider,
-  IconButton,
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
-} from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt';
-import SettingsIcon from '@mui/icons-material/Settings';
-import AspectRatioIcon from '@mui/icons-material/AspectRatio';
-import LabelIcon from '@mui/icons-material/Label';
-import TimelineIcon from '@mui/icons-material/Timeline';
-import { CirclePicker } from 'react-color';
-import { Node, Edge } from 'reactflow';
-
-interface SettingsSidebarProps {
-  isOpen: boolean;
-  onClose: () => void;
-  selectedNode?: Node | null;
-  selectedEdge?: Edge | null;
-  onNodeUpdate: (
-    label: string,
-    sublabel?: string,
-    dimensions?: { width: number; height: number }
-  ) => void;
-  onNodeResize: (width: number, height: number) => void;
-  onEdgeUpdate: (settings: {
-    arrowDirection: 'source' | 'target' | 'both';
-    color?: string;
-    text?: string;
-  }) => void;
-}
-
-interface TabPanelProps {
-  children?: React.ReactNode;
-  index: number;
-  value: number;
-}
-
-function TabPanel({ children, value, index }: TabPanelProps) {
-  return (
-    <div
-      role="tabpanel"
-      hidden={value !== index}
-      id={`settings-tabpanel-${index}`}
-      aria-labelledby={`settings-tab-${index}`}
-    >
-      {value === index && <Box sx={{ py: 2 }}>{children}</Box>}
-    </div>
-  );
-}
-
-const SettingsSidebar: React.FC<SettingsSidebarProps> = ({
-  isOpen,
-  onClose,
-  selectedNode,
-  selectedEdge,
-  onNodeUpdate,
-  onNodeResize,
-  onEdgeUpdate,
-}) => {
-  const [activeTab, setActiveTab] = useState(0);
-  const [label, setLabel] = useState('');
-  const [sublabel, setSublabel] = useState('');
-  const [width, setWidth] = useState('500');
-  const [height, setHeight] = useState('300');
-  const [edgeText, setEdgeText] = useState('');
-  const [edgeDirection, setEdgeDirection] = useState<'source' | 'target' | 'both'>('target');
-  const [edgeColor, setEdgeColor] = useState('#61dafb');
-
-  // Update form values when selected items change
-  useEffect(() => {
-    if (selectedNode) {
-      setLabel(selectedNode.data?.label || '');
-      setSublabel(selectedNode.data?.sublabel || '');
-      setWidth((selectedNode.style?.width as number)?.toString() || '500');
-      setHeight((selectedNode.style?.height as number)?.toString() || '300');
-      setActiveTab(0); // Switch to node settings
-    }
-  }, [selectedNode]);
-
-  useEffect(() => {
-    if (selectedEdge) {
-      setEdgeText((selectedEdge.label as string) || '');
-      setEdgeColor((selectedEdge.style?.stroke as string) || '#61dafb');
-      const direction = selectedEdge.markerStart
-        ? selectedEdge.markerEnd
-          ? 'both'
-          : 'source'
-        : 'target';
-      setEdgeDirection(direction);
-      setActiveTab(1); // Switch to edge settings
-    }
-  }, [selectedEdge]);
-
-  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
-    setActiveTab(newValue);
-  };
-
-  const handleNodeSave = () => {
-    if (!selectedNode) return;
-    
-    const dimensions = selectedNode.type === 'subnetNode'
-      ? {
-          width: parseInt(width) || 500,
-          height: parseInt(height) || 300,
-        }
-      : undefined;
-
-    onNodeUpdate(label, sublabel || undefined, dimensions);
-  };
-
-  const handleResizeSave = () => {
-    if (!selectedNode) return;
-    onNodeResize(parseInt(width) || 500, parseInt(height) || 300);
-  };
-
-  const handleEdgeSave = () => {
-    if (!selectedEdge) return;
-    onEdgeUpdate({
-      arrowDirection: edgeDirection,
-      color: edgeColor,
-      text: edgeText,
-    });
-  };
-
-  const handleWidthChange = (value: string) => {
-    const numValue = parseInt(value);
-    if (!isNaN(numValue) && numValue >= 100 && numValue <= 1200) {
-      setWidth(value);
-    }
-  };
-
-  const handleHeightChange = (value: string) => {
-    const numValue = parseInt(value);
-    if (!isNaN(numValue) && numValue >= 100 && numValue <= 1200) {
-      setHeight(value);
-    }
-  };
-
-  if (!isOpen) return null;
-
-  const isSubnetOrVPC = selectedNode?.type === 'subnetNode';
-  const hasSelectedItem = selectedNode || selectedEdge;
-
-  return (
-    <Box
-      sx={{
-        position: 'fixed',
-        right: 0,
-        top: '56px',
-        width: 400,
-        height: 'calc(100vh - 56px)',
-        bgcolor: '#1a1a1a',
-        color: 'white',
-        borderLeft: '1px solid #333',
-        display: 'flex',
-        flexDirection: 'column',
-        zIndex: 1300,
-        // Custom scrollbar styling
-        '& ::-webkit-scrollbar': {
-          width: '6px',
-        },
-        '& ::-webkit-scrollbar-track': {
-          background: 'transparent',
-        },
-        '& ::-webkit-scrollbar-thumb': {
-          background: '#444',
-          borderRadius: '3px',
-          '&:hover': {
-            background: '#666',
-          },
-        },
-      }}
-    >
-      {/* Header */}
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          p: 2,
-          borderBottom: '1px solid #333',
-        }}
-      >
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-          <SettingsIcon sx={{ color: '#999', fontSize: '20px' }} />
-          <Typography variant="h6" sx={{ fontSize: '1.1rem', fontWeight: 600, color: '#999' }}>
-            Settings Panel
-          </Typography>
-        </Box>
-        <IconButton
-          onClick={onClose}
-          sx={{
-            color: '#999',
-            '&:hover': {
-              color: '#fff',
-              bgcolor: 'rgba(255, 255, 255, 0.1)',
-            },
-          }}
-        >
-          <CloseIcon />
-        </IconButton>
-      </Box>
-
-      {!hasSelectedItem ? (
-        <Box
-          sx={{
-            flex: 1,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexDirection: 'column',
-            gap: 2,
-            color: '#999',
-          }}
-        >
-          <SettingsIcon sx={{ fontSize: '48px', opacity: 0.5 }} />
-          <Typography variant="body1" textAlign="center">
-            Select a node or edge to view settings
-          </Typography>
-        </Box>
-      ) : (
-        <>
-          {/* Tabs */}
-          <Box sx={{ borderBottom: '1px solid #333' }}>
-            <Tabs
-              value={activeTab}
-              onChange={handleTabChange}
-              sx={{
-                '& .MuiTab-root': {
-                  color: '#999',
-                  textTransform: 'none',
-                  fontSize: '0.875rem',
-                  fontWeight: 500,
-                  minHeight: '48px',
-                  '&.Mui-selected': {
-                    color: '#999',
-                  },
-                },
-                '& .MuiTabs-indicator': {
-                  backgroundColor: '#999',
-                },
-              }}
-            >
-              {selectedNode && (
-                <Tab
-                  icon={<LabelIcon sx={{ fontSize: '18px' }} />}
-                  label="Node"
-                  iconPosition="start"
-                />
-              )}
-              {selectedEdge && (
-                <Tab
-                  icon={<TimelineIcon sx={{ fontSize: '18px' }} />}
-                  label="Edge"
-                  iconPosition="start"
-                />
-              )}
-            </Tabs>
-          </Box>
-
-          {/* Content */}
-          <Box
-            sx={{
-              flex: 1,
-              overflowY: 'auto',
-              px: 2,
-              // Custom scrollbar styling
-              '&::-webkit-scrollbar': {
-                width: '6px',
-              },
-              '&::-webkit-scrollbar-track': {
-                background: 'transparent',
-              },
-              '&::-webkit-scrollbar-thumb': {
-                background: '#444',
-                borderRadius: '3px',
-                '&:hover': {
-                  background: '#666',
-                },
-              },
-            }}
-          >
-            {/* Node Settings */}
-            {selectedNode && (
-              <TabPanel value={activeTab} index={0}>
-                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-                  {/* Node Info */}
-                  <Box>
-                    <Typography variant="subtitle2" sx={{ color: '#999', mb: 1 }}>
-                      Node Information
-                    </Typography>
-                    <Typography variant="body2" sx={{ color: '#999' }}>
-                      Type: {isSubnetOrVPC ? 'Container' : 'Service Node'}
-                    </Typography>
-                    <Typography variant="body2" sx={{ color: '#999' }}>
-                      Service: {selectedNode.data?.service || 'Unknown'}
-                    </Typography>
-                  </Box>
-
-                  <Divider sx={{ borderColor: '#333' }} />
-
-                  {/* Label Settings */}
-                  <Accordion defaultExpanded sx={{ bgcolor: 'transparent', boxShadow: 'none' }}>
-                    <AccordionSummary
-                      expandIcon={<ExpandMoreIcon sx={{ color: '#999' }} />}
-                      sx={{ px: 0, '& .MuiAccordionSummary-content': { margin: '8px 0' } }}
-                    >
-                      <Typography variant="subtitle2" sx={{ color: '#999' }}>
-                        Label Settings
-                      </Typography>
-                    </AccordionSummary>
-                    <AccordionDetails sx={{ px: 0, pt: 0 }}>
-                      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-                        <TextField
-                          label="Main Label"
-                          value={label}
-                          onChange={(e) => setLabel(e.target.value)}
-                          fullWidth
-                          size="small"
-                          sx={{
-                            '& .MuiInputLabel-root': { color: '#999' },
-                            '& .MuiOutlinedInput-root': {
-                              color: '#fff',
-                              '& fieldset': { borderColor: '#444' },
-                              '&:hover fieldset': { borderColor: '#999' },
-                              '&.Mui-focused fieldset': { borderColor: '#999' },
-                            },
-                          }}
-                        />
-
-                        {!isSubnetOrVPC && (
-                          <TextField
-                            label="Sublabel (optional)"
-                            value={sublabel}
-                            onChange={(e) => setSublabel(e.target.value)}
-                            fullWidth
-                            size="small"
-                            sx={{
-                              '& .MuiInputLabel-root': { color: '#999' },
-                              '& .MuiOutlinedInput-root': {
-                                color: '#fff',
-                                '& fieldset': { borderColor: '#444' },
-                                '&:hover fieldset': { borderColor: '#999' },
-                                '&.Mui-focused fieldset': { borderColor: '#999' },
-                              },
-                            }}
-                          />
-                        )}
-
-                        <Button
-                          onClick={handleNodeSave}
-                          variant="contained"
-                          size="small"
-                          sx={{
-                            bgcolor: '#666',
-                            color: '#fff',
-                            '&:hover': { bgcolor: '#555' },
-                          }}
-                        >
-                          Update Labels
-                        </Button>
-                      </Box>
-                    </AccordionDetails>
-                  </Accordion>
-
-                  {/* Resize Settings for Container Nodes */}
-                  {isSubnetOrVPC && (
-                    <Accordion sx={{ bgcolor: 'transparent', boxShadow: 'none' }}>
-                      <AccordionSummary
-                        expandIcon={<ExpandMoreIcon sx={{ color: '#999' }} />}
-                        sx={{ px: 0, '& .MuiAccordionSummary-content': { margin: '8px 0' } }}
-                      >
-                        <Typography variant="subtitle2" sx={{ color: '#999' }}>
-                          Resize Settings
-                        </Typography>
-                      </AccordionSummary>
-                      <AccordionDetails sx={{ px: 0, pt: 0 }}>
-                        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-                          {/* Width */}
-                          <Box>
-                            <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
-                              <Typography variant="body2" fontWeight={500}>
-                                Width
-                              </Typography>
-                              <Typography variant="body2" sx={{ color: '#999' }}>
-                                {width}px
-                              </Typography>
-                            </Box>
-                            <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
-                              <Slider
-                                value={Number(width)}
-                                onChange={(_, value) => handleWidthChange(value.toString())}
-                                min={100}
-                                max={1200}
-                                step={10}
-                                sx={{
-                                  flexGrow: 1,
-                                  color: '#999',
-                                  '& .MuiSlider-rail': { backgroundColor: '#333' },
-                                  '& .MuiSlider-track': { backgroundColor: '#999' },
-                                  '& .MuiSlider-thumb': { backgroundColor: '#999' },
-                                }}
-                              />
-                              <TextField
-                                type="number"
-                                value={width}
-                                onChange={(e) => handleWidthChange(e.target.value)}
-                                inputProps={{ min: 100, max: 1200, step: 10 }}
-                                size="small"
-                                sx={{
-                                  width: 80,
-                                  '& .MuiOutlinedInput-root': {
-                                    color: '#fff',
-                                    '& fieldset': { borderColor: '#444' },
-                                    '&:hover fieldset': { borderColor: '#999' },
-                                    '&.Mui-focused fieldset': { borderColor: '#999' },
-                                  },
-                                }}
-                              />
-                            </Box>
-                          </Box>
-
-                          {/* Height */}
-                          <Box>
-                            <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
-                              <Typography variant="body2" fontWeight={500}>
-                                Height
-                              </Typography>
-                              <Typography variant="body2" sx={{ color: '#999' }}>
-                                {height}px
-                              </Typography>
-                            </Box>
-                            <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
-                              <Slider
-                                value={Number(height)}
-                                onChange={(_, value) => handleHeightChange(value.toString())}
-                                min={100}
-                                max={1200}
-                                step={10}
-                                sx={{
-                                  flexGrow: 1,
-                                  color: '#999',
-                                  '& .MuiSlider-rail': { backgroundColor: '#333' },
-                                  '& .MuiSlider-track': { backgroundColor: '#999' },
-                                  '& .MuiSlider-thumb': { backgroundColor: '#999' },
-                                }}
-                              />
-                              <TextField
-                                type="number"
-                                value={height}
-                                onChange={(e) => handleHeightChange(e.target.value)}
-                                inputProps={{ min: 100, max: 1200, step: 10 }}
-                                size="small"
-                                sx={{
-                                  width: 80,
-                                  '& .MuiOutlinedInput-root': {
-                                    color: '#fff',
-                                    '& fieldset': { borderColor: '#444' },
-                                    '&:hover fieldset': { borderColor: '#999' },
-                                    '&.Mui-focused fieldset': { borderColor: '#999' },
-                                  },
-                                }}
-                              />
-                            </Box>
-                          </Box>
-
-                          <Button
-                            onClick={handleResizeSave}
-                            variant="contained"
-                            size="small"
-                            sx={{
-                              bgcolor: '#666',
-                              color: '#fff',
-                              '&:hover': { bgcolor: '#555' },
-                            }}
-                          >
-                            Apply Resize
-                          </Button>
-                        </Box>
-                      </AccordionDetails>
-                    </Accordion>
-                  )}
-                </Box>
-              </TabPanel>
-            )}
-
-            {/* Edge Settings */}
-            {selectedEdge && (
-              <TabPanel value={activeTab} index={selectedNode ? 1 : 0}>
-                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-                  {/* Edge Info */}
-                  <Box>
-                    <Typography variant="subtitle2" sx={{ color: '#999', mb: 1 }}>
-                      Edge Information
-                    </Typography>
-                    <Typography variant="body2" sx={{ color: '#999' }}>
-                      ID: {selectedEdge.id}
-                    </Typography>
-                    <Typography variant="body2" sx={{ color: '#999' }}>
-                      Source: {selectedEdge.source}
-                    </Typography>
-                    <Typography variant="body2" sx={{ color: '#999' }}>
-                      Target: {selectedEdge.target}
-                    </Typography>
-                  </Box>
-
-                  <Divider sx={{ borderColor: '#333' }} />
-
-                  {/* Edge Text */}
-                  <Accordion defaultExpanded sx={{ bgcolor: 'transparent', boxShadow: 'none' }}>
-                    <AccordionSummary
-                      expandIcon={<ExpandMoreIcon sx={{ color: '#999' }} />}
-                      sx={{ px: 0, '& .MuiAccordionSummary-content': { margin: '8px 0' } }}
-                    >
-                      <Typography variant="subtitle2" sx={{ color: '#999' }}>
-                        Edge Text
-                      </Typography>
-                    </AccordionSummary>
-                    <AccordionDetails sx={{ px: 0, pt: 0 }}>
-                      <TextField
-                        fullWidth
-                        value={edgeText}
-                        onChange={(e) => setEdgeText(e.target.value)}
-                        placeholder="Enter edge text"
-                        size="small"
-                        sx={{
-                          '& .MuiOutlinedInput-root': {
-                            color: '#fff',
-                            '& fieldset': { borderColor: '#444' },
-                            '&:hover fieldset': { borderColor: '#999' },
-                            '&.Mui-focused fieldset': { borderColor: '#999' },
-                          },
-                        }}
-                      />
-                    </AccordionDetails>
-                  </Accordion>
-
-                  {/* Arrow Direction */}
-                  <Accordion sx={{ bgcolor: 'transparent', boxShadow: 'none' }}>
-                    <AccordionSummary
-                      expandIcon={<ExpandMoreIcon sx={{ color: '#999' }} />}
-                      sx={{ px: 0, '& .MuiAccordionSummary-content': { margin: '8px 0' } }}
-                    >
-                      <Typography variant="subtitle2" sx={{ color: '#999' }}>
-                        Arrow Direction
-                      </Typography>
-                    </AccordionSummary>
-                    <AccordionDetails sx={{ px: 0, pt: 0 }}>
-                      <ToggleButtonGroup
-                        value={edgeDirection}
-                        exclusive
-                        onChange={(_, newDirection) => {
-                          if (newDirection !== null) {
-                            setEdgeDirection(newDirection);
-                          }
-                        }}
-                        size="small"
-                        sx={{
-                          width: '100%',
-                          '& .MuiToggleButton-root': {
-                            color: '#fff',
-                            borderColor: '#333',
-                            flex: 1,
-                            '&.Mui-selected': {
-                              bgcolor: 'rgba(153, 153, 153, 0.2)',
-                              color: '#999',
-                              '&:hover': { bgcolor: 'rgba(153, 153, 153, 0.3)' },
-                            },
-                            '&:hover': { bgcolor: 'rgba(153, 153, 153, 0.1)' },
-                          },
-                        }}
-                      >
-                        <ToggleButton value="source">
-                          <ArrowBackIcon sx={{ mr: 0.5 }} />
-                          Start
-                        </ToggleButton>
-                        <ToggleButton value="target">
-                          End
-                          <ArrowForwardIcon sx={{ ml: 0.5 }} />
-                        </ToggleButton>
-                        <ToggleButton value="both">
-                          <ArrowRightAltIcon />
-                          Both
-                        </ToggleButton>
-                      </ToggleButtonGroup>
-                    </AccordionDetails>
-                  </Accordion>
-
-                  {/* Edge Color */}
-                  <Accordion sx={{ bgcolor: 'transparent', boxShadow: 'none' }}>
-                    <AccordionSummary
-                      expandIcon={<ExpandMoreIcon sx={{ color: '#999' }} />}
-                      sx={{ px: 0, '& .MuiAccordionSummary-content': { margin: '8px 0' } }}
-                    >
-                      <Typography variant="subtitle2" sx={{ color: '#999' }}>
-                        Edge Color
-                      </Typography>
-                    </AccordionSummary>
-                    <AccordionDetails sx={{ px: 0, pt: 0 }}>
-                      <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-                        <CirclePicker
-                          color={edgeColor}
-                          onChange={(colorResult) => setEdgeColor(colorResult.hex)}
-                          colors={[
-                            '#61dafb',
-                            '#ff4444',
-                            '#4CAF50',
-                            '#FFC107',
-                            '#9C27B0',
-                            '#795548',
-                            '#607D8B',
-                          ]}
-                        />
-                      </Box>
-                    </AccordionDetails>
-                  </Accordion>
-
-                  <Button
-                    onClick={handleEdgeSave}
-                    variant="contained"
-                    size="small"
-                    sx={{
-                      bgcolor: '#666',
-                      color: '#fff',
-                      '&:hover': { bgcolor: '#555' },
-                      mt: 2,
-                    }}
-                  >
-                    Update Edge
-                  </Button>
-                </Box>
-              </TabPanel>
-            )}
-          </Box>
-        </>
-      )}
-    </Box>
-  );
-};
-
+import React, { useState, useEffect } from 'react';
+import {
+  Box,
+  Typography,
+  TextField,
+  Button,
+  Tabs,
+  Tab,
+  Slider,
+  ToggleButtonGroup,
+  ToggleButton,
+  Divider,
+  IconButton,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt';
+import SettingsIcon from '@mui/icons-material/Settings';
+import AspectRatioIcon from '@mui/icons-material/AspectRatio';
+import LabelIcon from '@mui/icons-material/Label';
+import TimelineIcon from '@mui/icons-material/Timeline';
+import { CirclePicker } from 'react-color';
+import { Node, Edge } from 'reactflow';
+
+interface SettingsSidebarProps {
+  isOpen: boolean;
+  onClose: () => void;
+  selectedNode?: Node | null;
+  selectedEdge?: Edge | null;
+  onNodeUpdate: (
+    label: string,
+    sublabel?: string,
+    dimensions?: { width: number; height: number }
+  ) => void;
+  onNodeResize: (width: number, height: number) => void;
+  onEdgeUpdate: (settings: {
+    arrowDirection: 'source' | 'target' | 'both';
+    color?: string;
+    text?: string;
+  }) => void;
+}
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel({ children, value, index }: TabPanelProps) {
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`settings-tabpanel-${index}`}
+      aria-labelledby={`settings-tab-${index}`}
+    >
+      {value === index && <Box sx={{ py: 2 }}>{children}</Box>}
+    </div>
+  );
+}
+
+const SettingsSidebar: React.FC<SettingsSidebarProps> = ({
+  isOpen,
+  onClose,
+  selectedNode,
+  selectedEdge,
+  onNodeUpdate,
+  onNodeResize,
+  onEdgeUpdate,
+}) => {
+  const [activeTab, setActiveTab] = useState(0);
+  const [label, setLabel] = useState('');
+  const [sublabel, setSublabel] = useState('');
+  const [width, setWidth] = useState('500');
+  const [height, setHeight] = useState('300');
+  const [edgeText, setEdgeText] = useState('');
+  const [edgeDirection, setEdgeDirection] = useState<'source' | 'target' | 'both'>('target');
+  const [edgeColor, setEdgeColor] = useState('#61dafb');
+
+  // Update form values when selected items change
+  useEffect(() => {
+    if (selectedNode) {
+      setLabel(selectedNode.data?.label || '');
+      setSublabel(selectedNode.data?.sublabel || '');
+      setWidth((selectedNode.style?.width as number)?.toString() || '500');
+      setHeight((selectedNode.style?.height as number)?.toString() || '300');
+      setActiveTab(0); // Switch to node settings
+    }
+  }, [selectedNode]);
+
+  useEffect(() => {
+    if (selectedEdge) {
+      setEdgeText((selectedEdge.label as string) || '');
+      setEdgeColor((selectedEdge.style?.stroke as string) || '#61dafb');
+      const direction = selectedEdge.markerStart
+        ? selectedEdge.markerEnd
+          ? 'both'
+          : 'source'
+        : 'target';
+      setEdgeDirection(direction);
+      setActiveTab(1); // Switch to edge settings
+    }
+  }, [selectedEdge]);
+
+  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
+    setActiveTab(newValue);
+  };
+
+  const handleNodeSave = () => {
+    if (!selectedNode) return;
+    
+    const dimensions = selectedNode.type === 'subnetNode'
+      ? {
+          width: parseInt(width) || 500,
+          height: parseInt(height) || 300,
+        }
+      : undefined;
+
+    onNodeUpdate(label, sublabel || undefined, dimensions);
+  };
+
+  const handleResizeSave = () => {
+    if (!selectedNode) return;
+    onNodeResize(parseInt(width) || 500, parseInt(height) || 300);
+  };
+
+  const handleEdgeSave = () => {
+    if (!selectedEdge) return;
+    onEdgeUpdate({
+      arrowDirection: edgeDirection,
+      color: edgeColor,
+      text: edgeText,
+    });
+  };
+
+  const handleWidthChange = (value: string) => {
+    const numValue = parseInt(value);
+    if (!isNaN(numValue) && numValue >= 100 && numValue <= 1200) {
+      setWidth(value);
+    }
+  };
+
+  const handleHeightChange = (value: string) => {
+    const numValue = parseInt(value);
+    if (!isNaN(numValue) && numValue >= 100 && numValue <= 1200) {
+      setHeight(value);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  const isSubnetOrVPC = selectedNode?.type === 'subnetNode';
+  const hasSelectedItem = selectedNode || selectedEdge;
+
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        right: 0,
+        top: '56px',
+        width: 400,
+        height: 'calc(100vh - 56px)',
+        bgcolor: '#1a1a1a',
+        color: 'white',
+        borderLeft: '1px solid #333',
+        display: 'flex',
+        flexDirection: 'column',
+        zIndex: 1300,
+        // Custom scrollbar styling
+        '& ::-webkit-scrollbar': {
+          width: '6px',
+        },
+        '& ::-webkit-scrollbar-track': {
+          background: 'transparent',
+        },
+        '& ::-webkit-scrollbar-thumb': {
+          background: '#444',
+          borderRadius: '3px',
+          '&:hover': {
+            background: '#666',
+          },
+        },
+      }}
+    >
+      {/* Header */}
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          p: 2,
+          borderBottom: '1px solid #333',
+        }}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <SettingsIcon sx={{ color: '#999', fontSize: '20px' }} />
+          <Typography variant="h6" sx={{ fontSize: '1.1rem', fontWeight: 600, color: '#999' }}>
+            Settings Panel
+          </Typography>
+        </Box>
+        <IconButton
+          onClick={onClose}
+          sx={{
+            color: '#999',
+            '&:hover': {
+              color: '#fff',
+              bgcolor: 'rgba(255, 255, 255, 0.1)',
+            },
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+      </Box>
+
+      {!hasSelectedItem ? (
+        <Box
+          sx={{
+            flex: 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
+            gap: 2,
+            color: '#999',
+          }}
+        >
+          <SettingsIcon sx={{ fontSize: '48px', opacity: 0.5 }} />
+          <Typography variant="body1" textAlign="center">
+            Select a node or edge to view settings
+          </Typography>
+        </Box>
+      ) : (
+        <>
+          {/* Tabs */}
+          <Box sx={{ borderBottom: '1px solid #333' }}>
+            <Tabs
+              value={activeTab}
+              onChange={handleTabChange}
+              sx={{
+                '& .MuiTab-root': {
+                  color: '#999',
+                  textTransform: 'none',
+                  fontSize: '0.875rem',
+                  fontWeight: 500,
+                  minHeight: '48px',
+                  '&.Mui-selected': {
+                    color: '#999',
+                  },
+                },
+                '& .MuiTabs-indicator': {
+                  backgroundColor: '#999',
+                },
+              }}
+            >
+              {selectedNode && (
+                <Tab
+                  icon={<LabelIcon sx={{ fontSize: '18px' }} />}
+                  label="Node"
+                  iconPosition="start"
+                />
+              )}
+              {selectedEdge && (
+                <Tab
+                  icon={<TimelineIcon sx={{ fontSize: '18px' }} />}
+                  label="Edge"
+                  iconPosition="start"
+                />
+              )}
+            </Tabs>
+          </Box>
+
+          {/* Content */}
+          <Box
+            sx={{
+              flex: 1,
+              overflowY: 'auto',
+              px: 2,
+              // Custom scrollbar styling
+              '&::-webkit-scrollbar': {
+                width: '6px',
+              },
+              '&::-webkit-scrollbar-track': {
+                background: 'transparent',
+              },
+              '&::-webkit-scrollbar-thumb': {
+                background: '#444',
+                borderRadius: '3px',
+                '&:hover': {
+                  background: '#666',
+                },
+              },
+            }}
+          >
+            {/* Node Settings */}
+            {selectedNode && (
+              <TabPanel value={activeTab} index={0}>
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+                  {/* Node Info */}
+                  <Box>
+                    <Typography variant="subtitle2" sx={{ color: '#999', mb: 1 }}>
+                      Node Information
+                    </Typography>
+                    <Typography variant="body2" sx={{ color: '#999' }}>
+                      Type: {isSubnetOrVPC ? 'Container' : 'Service Node'}
+                    </Typography>
+                    <Typography variant="body2" sx={{ color: '#999' }}>
+                      Service: {selectedNode.data?.service || 'Unknown'}
+                    </Typography>
+                  </Box>
+
+                  <Divider sx={{ borderColor: '#333' }} />
+
+                  {/* Label Settings */}
+                  <Accordion defaultExpanded sx={{ bgcolor: 'transparent', boxShadow: 'none' }}>
+                    <AccordionSummary
+                      expandIcon={<ExpandMoreIcon sx={{ color: '#999' }} />}
+                      sx={{ px: 0, '& .MuiAccordionSummary-content': { margin: '8px 0' } }}
+                    >
+                      <Typography variant="subtitle2" sx={{ color: '#999' }}>
+                        Label Settings
+                      </Typography>
+                    </AccordionSummary>
+                    <AccordionDetails sx={{ px: 0, pt: 0 }}>
+                      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+                        <TextField
+                          label="Main Label"
+                          value={label}
+                          onChange={(e) => setLabel(e.target.value)}
+                          fullWidth
+                          size="small"
+                          sx={{
+                            '& .MuiInputLabel-root': { color: '#999' },
+                            '& .MuiOutlinedInput-root': {
+                              color: '#fff',
+                              '& fieldset': { borderColor: '#444' },
+                              '&:hover fieldset': { borderColor: '#999' },
+                              '&.Mui-focused fieldset': { borderColor: '#999' },
+                            },
+                          }}
+                        />
+
+                        {!isSubnetOrVPC && (
+                          <TextField
+                            label="Sublabel (optional)"
+                            value={sublabel}
+                            onChange={(e) => setSublabel(e.target.value)}
+                            fullWidth
+                            size="small"
+                            sx={{
+                              '& .MuiInputLabel-root': { color: '#999' },
+                              '& .MuiOutlinedInput-root': {
+                                color: '#fff',
+                                '& fieldset': { borderColor: '#444' },
+                                '&:hover fieldset': { borderColor: '#999' },
+                                '&.Mui-focused fieldset': { borderColor: '#999' },
+                              },
+                            }}
+                          />
+                        )}
+
+                        <Button
+                          onClick={handleNodeSave}
+                          variant="contained"
+                          size="small"
+                          sx={{
+                            bgcolor: '#666',
+                            color: '#fff',
+                            '&:hover': { bgcolor: '#555' },
+                          }}
+                        >
+                          Update Labels
+                        </Button>
+                      </Box>
+                    </AccordionDetails>
+                  </Accordion>
+
+                  {/* Resize Settings for Container Nodes */}
+                  {isSubnetOrVPC && (
+                    <Accordion sx={{ bgcolor: 'transparent', boxShadow: 'none' }}>
+                      <AccordionSummary
+                        expandIcon={<ExpandMoreIcon sx={{ color: '#999' }} />}
+                        sx={{ px: 0, '& .MuiAccordionSummary-content': { margin: '8px 0' } }}
+                      >
+                        <Typography variant="subtitle2" sx={{ color: '#999' }}>
+                          Resize Settings
+                        </Typography>
+                      </AccordionSummary>
+                      <AccordionDetails sx={{ px: 0, pt: 0 }}>
+                        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+                          {/* Width */}
+                          <Box>
+                            <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
+                              <Typography variant="body2" fontWeight={500}>
+                                Width
+                              </Typography>
+                              <Typography variant="body2" sx={{ color: '#999' }}>
+                                {width}px
+                              </Typography>
+                            </Box>
+                            <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
+                              <Slider
+                                value={Number(width)}
+                                onChange={(_, value) => handleWidthChange(value.toString())}
+                                min={100}
+                                max={1200}
+                                step={10}
+                                sx={{
+                                  flexGrow: 1,
+                                  color: '#999',
+                                  '& .MuiSlider-rail': { backgroundColor: '#333' },
+                                  '& .MuiSlider-track': { backgroundColor: '#999' },
+                                  '& .MuiSlider-thumb': { backgroundColor: '#999' },
+                                }}
+                              />
+                              <TextField
+                                type="number"
+                                value={width}
+                                onChange={(e) => handleWidthChange(e.target.value)}
+                                inputProps={{ min: 100, max: 1200, step: 10 }}
+                                size="small"
+                                sx={{
+                                  width: 80,
+                                  '& .MuiOutlinedInput-root': {
+                                    color: '#fff',
+                                    '& fieldset': { borderColor: '#444' },
+                                    '&:hover fieldset': { borderColor: '#999' },
+                                    '&.Mui-focused fieldset': { borderColor: '#999' },
+                                  },
+                                }}
+                              />
+                            </Box>
+                          </Box>
+
+                          {/* Height */}
+                          <Box>
+                            <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
+                              <Typography variant="body2" fontWeight={500}>
+                                Height
+                              </Typography>
+                              <Typography variant="body2" sx={{ color: '#999' }}>
+                                {height}px
+                              </Typography>
+                            </Box>
+                            <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
+                              <Slider
+                                value={Number(height)}
+                                onChange={(_, value) => handleHeightChange(value.toString())}
+                                min={100}
+                                max={1200}
+                                step={10}
+                                sx={{
+                                  flexGrow: 1,
+                                  color: '#999',
+                                  '& .MuiSlider-rail': { backgroundColor: '#333' },
+                                  '& .MuiSlider-track': { backgroundColor: '#999' },
+                                  '& .MuiSlider-thumb': { backgroundColor: '#999' },
+                                }}
+                              />
+                              <TextField
+                                type="number"
+                                value={height}
+                                onChange={(e) => handleHeightChange(e.target.value)}
+                                inputProps={{ min: 100, max: 1200, step: 10 }}
+                                size="small"
+                                sx={{
+                                  width: 80,
+                                  '& .MuiOutlinedInput-root': {
+                                    color: '#fff',
+                                    '& fieldset': { borderColor: '#444' },
+                                    '&:hover fieldset': { borderColor: '#999' },
+                                    '&.Mui-focused fieldset': { borderColor: '#999' },
+                                  },
+                                }}
+                              />
+                            </Box>
+                          </Box>
+
+                          <Button
+                            onClick={handleResizeSave}
+                            variant="contained"
+                            size="small"
+                            sx={{
+                              bgcolor: '#666',
+                              color: '#fff',
+                              '&:hover': { bgcolor: '#555' },
+                            }}
+                          >
+                            Apply Resize
+                          </Button>
+                        </Box>
+                      </AccordionDetails>
+                    </Accordion>
+                  )}
+                </Box>
+              </TabPanel>
+            )}
+
+            {/* Edge Settings */}
+            {selectedEdge && (
+              <TabPanel value={activeTab} index={selectedNode ? 1 : 0}>
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+                  {/* Edge Info */}
+                  <Box>
+                    <Typography variant="subtitle2" sx={{ color: '#999', mb: 1 }}>
+                      Edge Information
+                    </Typography>
+                    <Typography variant="body2" sx={{ color: '#999' }}>
+                      ID: {selectedEdge.id}
+                    </Typography>
+                    <Typography variant="body2" sx={{ color: '#999' }}>
+                      Source: {selectedEdge.source}
+                    </Typography>
+                    <Typography variant="body2" sx={{ color: '#999' }}>
+                      Target: {selectedEdge.target}
+                    </Typography>
+                  </Box>
+
+                  <Divider sx={{ borderColor: '#333' }} />
+
+                  {/* Edge Text */}
+                  <Accordion defaultExpanded sx={{ bgcolor: 'transparent', boxShadow: 'none' }}>
+                    <AccordionSummary
+                      expandIcon={<ExpandMoreIcon sx={{ color: '#999' }} />}
+                      sx={{ px: 0, '& .MuiAccordionSummary-content': { margin: '8px 0' } }}
+                    >
+                      <Typography variant="subtitle2" sx={{ color: '#999' }}>
+                        Edge Text
+                      </Typography>
+                    </AccordionSummary>
+                    <AccordionDetails sx={{ px: 0, pt: 0 }}>
+                      <TextField
+                        fullWidth
+                        value={edgeText}
+                        onChange={(e) => setEdgeText(e.target.value)}
+                        placeholder="Enter edge text"
+                        size="small"
+                        sx={{
+                          '& .MuiOutlinedInput-root': {
+                            color: '#fff',
+                            '& fieldset': { borderColor: '#444' },
+                            '&:hover fieldset': { borderColor: '#999' },
+                            '&.Mui-focused fieldset': { borderColor: '#999' },
+                          },
+                        }}
+                      />
+                    </AccordionDetails>
+                  </Accordion>
+
+                  {/* Arrow Direction */}
+                  <Accordion sx={{ bgcolor: 'transparent', boxShadow: 'none' }}>
+                    <AccordionSummary
+                      expandIcon={<ExpandMoreIcon sx={{ color: '#999' }} />}
+                      sx={{ px: 0, '& .MuiAccordionSummary-content': { margin: '8px 0' } }}
+                    >
+                      <Typography variant="subtitle2" sx={{ color: '#999' }}>
+                        Arrow Direction
+                      </Typography>
+                    </AccordionSummary>
+                    <AccordionDetails sx={{ px: 0, pt: 0 }}>
+                      <ToggleButtonGroup
+                        value={edgeDirection}
+                        exclusive
+                        onChange={(_, newDirection) => {
+                          if (newDirection !== null) {
+                            setEdgeDirection(newDirection);
+                          }
+                        }}
+                        size="small"
+                        sx={{
+                          width: '100%',
+                          '& .MuiToggleButton-root': {
+                            color: '#fff',
+                            borderColor: '#333',
+                            flex: 1,
+                            '&.Mui-selected': {
+                              bgcolor: 'rgba(153, 153, 153, 0.2)',
+                              color: '#999',
+                              '&:hover': { bgcolor: 'rgba(153, 153, 153, 0.3)' },
+                            },
+                            '&:hover': { bgcolor: 'rgba(153, 153, 153, 0.1)' },
+                          },
+                        }}
+                      >
+                        <ToggleButton value="source">
+                          <ArrowBackIcon sx={{ mr: 0.5 }} />
+                          Start
+                        </ToggleButton>
+                        <ToggleButton value="target">
+                          End
+                          <ArrowForwardIcon sx={{ ml: 0.5 }} />
+                        </ToggleButton>
+                        <ToggleButton value="both">
+                          <ArrowRightAltIcon />
+                          Both
+                        </ToggleButton>
+                      </ToggleButtonGroup>
+                    </AccordionDetails>
+                  </Accordion>
+
+                  {/* Edge Color */}
+                  <Accordion sx={{ bgcolor: 'transparent', boxShadow: 'none' }}>
+                    <AccordionSummary
+                      expandIcon={<ExpandMoreIcon sx={{ color: '#999' }} />}
+                      sx={{ px: 0, '& .MuiAccordionSummary-content': { margin: '8px 0' } }}
+                    >
+                      <Typography variant="subtitle2" sx={{ color: '#999' }}>
+                        Edge Color
+                      </Typography>
+                    </AccordionSummary>
+                    <AccordionDetails sx={{ px: 0, pt: 0 }}>
+                      <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+                        <CirclePicker
+                          color={edgeColor}
+                          onChange={(colorResult) => setEdgeColor(colorResult.hex)}
+                          colors={[
+                            '#61dafb',
+                            '#ff4444',
+                            '#4CAF50',
+                            '#FFC107',
+                            '#9C27B0',
+                            '#795548',
+                            '#607D8B',
+                          ]}
+                        />
+                      </Box>
+                    </AccordionDetails>
+                  </Accordion>
+
+                  <Button
+                    onClick={handleEdgeSave}
+                    variant="contained"
+                    size="small"
+                    sx={{
+                      bgcolor: '#666',
+                      color: '#fff',
+                      '&:hover': { bgcolor: '#555' },
+                      mt: 2,
+                    }}
+                  >
+                    Update Edge
+                  </Button>
+                </Box>
+              </TabPanel>
+            )}
+          </Box>
+        </>
+      )}
+    </Box>
+  );
+};
+
 export default SettingsSidebar;