feat: performance upgrade (solves issue with nodes not being GC'd)

src/components/Grid/Grid.tsx

@@ -31,7 +31,9 @@ export const Grid = () => {
         sx={{
           position: 'absolute',
           width: '100%',
-          height: '100%',
+          height: '100%'
+        }}
+        style={{
           background: `repeat url("${gridTileSvg}")`,
           backgroundSize: `${projectedTileSize.width}px`,
           backgroundPosition: `calc(50% + ${

src/components/SceneLayers/ConnectorLabels/ConnectorLabel.tsx

@@ -30,18 +30,20 @@ export const ConnectorLabel = ({ connector }: Props) => {
     <Box
       sx={{
         position: 'absolute',
-        left: labelPosition.x,
-        top: labelPosition.y,
-        transform: `translate(-50%, -50%) scale(${zoom})`,
         pointerEvents: 'none',
         bgcolor: 'common.white',
         border: 1,
         py: 0.5,
         px: 1,
         borderRadius: 1,
-        maxWidth: projectedTileSize.width * (1 / zoom),
         borderColor: 'grey.200'
       }}
+      style={{
+        transform: `translate(-50%, -50%) scale(${zoom})`,
+        maxWidth: projectedTileSize.width * (1 / zoom),
+        left: labelPosition.x,
+        top: labelPosition.y
+      }}
     >
       <Typography color="text.secondary" variant="body2">
         {connector.label}

src/components/SceneLayers/Connectors/Connector.tsx

@@ -85,7 +85,7 @@ export const Connector = ({ connector }: Props) => {
   }, [connector.style, connectorWidthPx]);
 
   return (
-    <Box sx={css}>
+    <Box style={css}>
       <Svg
         style={{
           // TODO: The original x coordinates of each tile seems to be calculated wrongly.

src/components/SceneLayers/Nodes/Node/Node.tsx

@@ -34,13 +34,13 @@ export const Node = ({ node, order }: Props) => {
 
   return (
     <Box
-      sx={{
+      style={{
         position: 'absolute',
         zIndex: order
       }}
     >
       <Box
-        sx={{
+        style={{
           position: 'absolute',
           left: position.x,
           top: position.y
@@ -53,7 +53,7 @@ export const Node = ({ node, order }: Props) => {
             }}
           >
             <Box
-              sx={{
+              style={{
                 position: 'absolute',
                 top: -projectedTileSize.height
               }}

src/components/SceneLayers/Nodes/Nodes.tsx

@@ -11,11 +11,7 @@ export const Nodes = () => {
     <>
       {nodes.map((node) => {
         return (
-          <Node
-            key={node.id}
-            order={-node.tile.x - node.tile.y}
-            node={node}
-          />
+          <Node key={node.id} order={-node.tile.x - node.tile.y} node={node} />
         );
       })}
     </>

src/components/SceneLayers/TextBoxes/TextBox.tsx

@@ -26,7 +26,7 @@ export const TextBox = ({ textBox }: Props) => {
   });
 
   return (
-    <Box sx={css}>
+    <Box style={css}>
       <Box
         sx={{
           position: 'absolute',