From 573e16a80d28d5ccdd076ac41291fad241f16954 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Fri, 27 Sep 2024 16:55:47 +0200
Subject: [PATCH 1/2] feat: Allow duplicating charts in layouting step

---
 app/configurator/configurator-state/reducer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/configurator/configurator-state/reducer.tsx b/app/configurator/configurator-state/reducer.tsx
index bedde8ea4..486b01b95 100644
--- a/app/configurator/configurator-state/reducer.tsx
+++ b/app/configurator/configurator-state/reducer.tsx
@@ -889,7 +889,7 @@ const reducer_: Reducer<ConfiguratorState, ConfiguratorStateAction> = (
       return draft;
 
     case "CHART_CONFIG_ADD":
-      if (isConfiguring(draft)) {
+      if (isConfiguring(draft) || isLayouting(draft)) {
         const chartConfig =
           createDraft(action.value.chartConfig) ?? getChartConfig(draft);
         const dataCubesComponents = getCachedComponents({

From 9e1ea812c84587a673afabb667ab92052c497194 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Fri, 27 Sep 2024 16:56:46 +0200
Subject: [PATCH 2/2] fix: Height initialization of duplicated charts

---
 app/components/chart-preview.tsx                | 16 ++++++++++------
 app/configurator/configurator-state/reducer.tsx | 14 ++++++++------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx
index 7d8bc6cc0..32d07a9b1 100644
--- a/app/components/chart-preview.tsx
+++ b/app/components/chart-preview.tsx
@@ -158,12 +158,16 @@ const DashboardPreview = ({
 
   if (layoutType === "canvas") {
     return (
-      <ChartPanelLayout
-        chartConfigs={state.chartConfigs}
-        renderChart={renderChart}
-        layoutType={layoutType}
-        className={classes.canvasChartPanelLayout}
-      />
+      // Force re-rendering of the canvas layout when the chart configs change
+      // to properly initialize the height of the new charts
+      <div key={state.chartConfigs.map((c) => c.key).join(",")}>
+        <ChartPanelLayout
+          chartConfigs={state.chartConfigs}
+          renderChart={renderChart}
+          layoutType={layoutType}
+          className={classes.canvasChartPanelLayout}
+        />
+      </div>
     );
   }
 
diff --git a/app/configurator/configurator-state/reducer.tsx b/app/configurator/configurator-state/reducer.tsx
index 486b01b95..491a43e28 100644
--- a/app/configurator/configurator-state/reducer.tsx
+++ b/app/configurator/configurator-state/reducer.tsx
@@ -1175,20 +1175,21 @@ export function ensureDashboardLayoutIsCorrect(
     draft.layout.type === "dashboard" &&
     draft.layout.layout === "canvas"
   ) {
+    const layouts = draft.layout.layouts;
     const chartConfigKeys = draft.chartConfigs.map((c) => c.key).sort();
 
     const breakpoints = Object.keys(FREE_CANVAS_BREAKPOINTS);
-    const xlCanvasLayouts = draft.layout.layouts[breakpoints[0]];
-    const xlLayoutConfigKeys = xlCanvasLayouts.map((c) => c.i).sort();
+    const layoutConfigKeys = Array.from(
+      new Set(breakpoints.flatMap((bp) => layouts[bp].map((c) => c.i)))
+    ).sort();
 
     const newConfigs = draft.chartConfigs.filter(
-      (x) => !xlLayoutConfigKeys.includes(x.key)
+      (x) => !layoutConfigKeys.includes(x.key)
     );
 
-    if (!isEqual(chartConfigKeys, xlLayoutConfigKeys)) {
+    if (!isEqual(chartConfigKeys, layoutConfigKeys)) {
       for (const bp of breakpoints) {
-        const canvasLayouts = draft.layout.layouts[bp];
-        draft.layout.layouts[bp] = canvasLayouts.filter((c) =>
+        const canvasLayouts = draft.layout.layouts[bp].filter((c) =>
           chartConfigKeys.includes(c.i)
         );
 
@@ -1216,6 +1217,7 @@ export function ensureDashboardLayoutIsCorrect(
             curY += chartH;
           }
         }
+
         draft.layout.layouts[bp] = canvasLayouts;
       }
     }