refactor: Simplify

app/components/chart-panel-layout-grid.tsx

@@ -1,14 +1,11 @@
 import clsx from "clsx";
 import { fold } from "fp-ts/lib/Either";
 import { pipe } from "fp-ts/lib/function";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Layouts } from "react-grid-layout";
 
 import { ChartPanelLayoutTypeProps } from "@/components/chart-panel";
-import ChartGridLayout, {
-  getInitialTileHeight,
-  getInitialTileWidth,
-} from "@/components/react-grid";
+import ChartGridLayout from "@/components/react-grid";
 import { ReactGridLayoutsType, hasChartConfigs } from "@/configurator";
 import { useConfiguratorState } from "@/src";
 import { assert } from "@/utils/assert";
@@ -66,19 +63,6 @@ const ChartPanelLayoutCanvas = (props: ChartPanelLayoutTypeProps) => {
     });
     setLayouts(layouts);
   };
-  const [initializeMap, setInitializeMap] = useState(
-    new Map<string, boolean>()
-  );
-  useEffect(() => {
-    const newMap = new Map<string, boolean>();
-    layouts["lg"].forEach(({ i, w, h }) => {
-      newMap.set(
-        i,
-        w === getInitialTileWidth() && h === getInitialTileHeight()
-      );
-    });
-    setInitializeMap(newMap);
-  }, [layouts]);
 
   return (
     <ChartGridLayout
@@ -88,7 +72,6 @@ const ChartPanelLayoutCanvas = (props: ChartPanelLayoutTypeProps) => {
       resize={state.state === "LAYOUTING"}
       draggableHandle={`.${chartPanelLayoutGridClasses.dragHandle}`}
       onLayoutChange={(_l, allLayouts) => handleChangeLayouts(allLayouts)}
-      initializeMap={initializeMap}
     >
       {chartConfigs.map((chartConfig) => props.renderChart(chartConfig))}
     </ChartGridLayout>

app/components/react-grid.stories.tsx

@@ -91,7 +91,6 @@ export const Example = () => {
         onLayoutChange={(_layouts, allLayouts) => setLayouts(allLayouts)}
         layouts={layouts}
         resize
-        initializeMap={new Map()}
       >
         {generateDOM({ count })}
       </ChartGridLayout>

app/components/react-grid.tsx

@@ -1,6 +1,7 @@
 import { Theme } from "@mui/material/styles";
 import { makeStyles } from "@mui/styles";
 import clsx from "clsx";
+import isEqual from "lodash/isEqual";
 import map from "lodash/map";
 import mapValues from "lodash/mapValues";
 import range from "lodash/range";
@@ -202,13 +203,11 @@ export const ChartGridLayout = ({
   className,
   layouts,
   resize,
-  initializeMap,
   ...rest
 }: {
   className: string;
   onLayoutChange: Function;
   resize?: boolean;
-  initializeMap: Map<string, boolean>;
 } & ComponentProps<typeof ResponsiveReactGridLayout>) => {
   const classes = useStyles();
   const [mounted, setMounted] = useState(false);
@@ -238,19 +237,12 @@ export const ChartGridLayout = ({
   }, []);
 
   useEffect(() => {
-    if (
-      !mountedForSomeTime ||
-      [...initializeMap.values()].every((v) => v === false)
-    ) {
+    if (!mountedForSomeTime) {
       return;
     }
 
     const newLayouts = mapValues(enhancedLayouts, (chartLayouts) => {
       return chartLayouts.map((chartLayout) => {
-        if (!initializeMap.get(chartLayout.i)) {
-          return chartLayout;
-        }
-
         let minH = MIN_H;
 
         const chartKey = chartLayout.i;
@@ -283,10 +275,11 @@ export const ChartGridLayout = ({
       });
     });
 
-    setEnhancedLayouts(newLayouts);
+    if (!isEqual(newLayouts, enhancedLayouts)) {
+      setEnhancedLayouts(newLayouts);
+    }
   }, [
     chartContainerClasses.chartContainer,
-    initializeMap,
     enhancedLayouts,
     mountedForSomeTime,
     resize,