Reafctor implementation

Author: joshdimanteto

package.json

@@ -5,6 +5,7 @@
   "private": true,
   "dependencies": {
     "@codecov/vite-plugin": "1.7.0",
+    "@dagrejs/dagre": "^1.1.4",
     "@date-io/date-fns": "3.2.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
@@ -33,7 +34,6 @@
     "blob-polyfill": "^9.0.20240710",
     "browserslist": "^4.23.0",
     "browserslist-to-esbuild": "^2.1.1",
-    "dagre": "^0.8.5",
     "date-fns": "4.1.0",
     "history": "^5.3.0",
     "loglevel": "^1.9.1",

src/systems/systemsNodeHeader.component.tsx

@@ -1,5 +1,5 @@
 import { MoreHoriz } from '@mui/icons-material';
-import { Grid, IconButton } from '@mui/material';
+import { Card, Divider, Grid, IconButton } from '@mui/material';
 import { Handle, Position } from '@xyflow/react';
 import React from 'react';
 import { OverflowTip } from '../utils';
@@ -9,92 +9,79 @@ interface SystemsNodeHeaderProps {
     title: string | React.ReactNode;
     label: string | React.ReactNode;
     direction?: 'TB' | 'LR';
-    setNodeDimensions: (nodeId: string, width: number, height: number) => void;
-    nodeId: string;
+    id: string;
   };
 }
 
 const SystemsNodeHeader = (props: SystemsNodeHeaderProps) => {
   const { data } = props;
 
-  const containerRef = React.useRef<HTMLDivElement | null>(null);
-
-  React.useEffect(() => {
-    if (containerRef.current) {
-      const { offsetWidth, offsetHeight } = containerRef.current;
-      data.setNodeDimensions(data.nodeId, offsetWidth, offsetHeight);
-    }
-  }, [data, containerRef]);
-
   const isHorizontal = data.direction === 'LR';
   return (
-    <Grid
-      ref={containerRef}
-      container
-      direction="column"
-      sx={{
-        border: '1px solid #ddd',
-        borderRadius: 1,
-        overflow: 'hidden',
-        boxShadow: 1,
-        width: '100%',
-        padding: 2,
-        backgroundColor: 'white',
-      }}
-    >
-      {/* Header Section */}
-      <Grid
-        item
+    <>
+      <Card
+        component={Grid}
         container
-        alignItems="center"
-        justifyContent="space-between"
+        direction="column"
         sx={{
-          borderBottom: '1px solid #ddd',
-          paddingBottom: 1,
-          marginBottom: 1,
+          padding: 2,
+          width: '100%',
         }}
       >
+        {/* Header Section */}
         <Grid
           item
-          sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
-          xs={8}
+          container
+          alignItems="center"
+          justifyContent="space-between"
+          sx={{
+            paddingBottom: 1,
+            marginBottom: 1,
+          }}
         >
-          <OverflowTip sx={{ fontWeight: 'bold', typography: 'h6' }}>
-            {data.title}
-          </OverflowTip>
+          <Grid
+            item
+            sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
+            xs={8}
+          >
+            <OverflowTip sx={{ fontWeight: 'bold', typography: 'h6' }}>
+              {data.title}
+            </OverflowTip>
+          </Grid>
+          <Grid
+            item
+            sx={{ display: 'flex', alignItems: 'center', margin: 1 }}
+            xs={2}
+          >
+            {/* Actions Menu */}
+            <IconButton size="small">
+              <MoreHoriz />
+            </IconButton>
+          </Grid>
         </Grid>
-        <Grid
-          item
-          sx={{ display: 'flex', alignItems: 'center', margin: 1 }}
-          xs={2}
-        >
-          {/* Actions Menu */}
-          <IconButton size="small">
-            <MoreHoriz />
-          </IconButton>
+        <Divider />
+        {/* Label Section */}
+        <Grid item>
+          {typeof data.label === 'string' ? (
+            <OverflowTip sx={{ fontWeight: 'bold', typography: 'body2' }}>
+              {data.label}
+            </OverflowTip>
+          ) : (
+            data.label
+          )}
         </Grid>
-      </Grid>
-
-      {/* Label Section */}
-      <Grid item>
-        {typeof data.label === 'string' ? (
-          <OverflowTip sx={{ fontWeight: 'bold', typography: 'body2' }}>
-            {data.label}
-          </OverflowTip>
-        ) : (
-          data.label
-        )}
-      </Grid>
-
+      </Card>
       <Handle
         type="source"
         position={isHorizontal ? Position.Right : Position.Bottom}
+        id={data.id}
       />
       <Handle
         type="target"
         position={isHorizontal ? Position.Left : Position.Top}
+        id={data.id}
       />
-    </Grid>
+    </>
   );
 };