From 6286653dd4f296e0dee5ff326d2339121077780f Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Tue, 5 Nov 2024 19:42:51 +0000
Subject: [PATCH] Enhance DashboardBaseComponent to track component position
 using state and update on dashboard view changes

---
 .../Components/DashboardBaseComponent.tsx     | 46 +++++++++++++------
 .../Components/Dashboard/DashboardView.tsx    |  2 +-
 2 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx b/Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx
index 4d5ccaec04..5c847df60a 100644
--- a/Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx
+++ b/Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent, ReactElement } from "react";
+import React, { FunctionComponent, ReactElement, useEffect } from "react";
 import DashboardTextComponentType from "Common/Types/Dashboard/DashboardComponents/DashboardTextComponent";
 import DashboardChartComponentType from "Common/Types/Dashboard/DashboardComponents/DashboardChartComponent";
 import DashboardValueComponentType from "Common/Types/Dashboard/DashboardComponents/DashboardValueComponent";
@@ -53,6 +53,9 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
   const widthOfComponent: number = component.widthInDashboardUnits;
   const heightOfComponent: number = component.heightInDashboardUnits;
 
+  const [topInPx, setTopInPx] = React.useState<number>(0);
+  const [leftInPx, setLeftInPx] = React.useState<number>(0);
+
   let className: string = `relative rounded-md col-span-${widthOfComponent} row-span-${heightOfComponent} p-2 bg-white border-2 border-solid border-gray-100`;
 
   if (props.isEditMode) {
@@ -66,15 +69,32 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
   const dashboardComponentRef: React.RefObject<HTMLDivElement> =
     React.useRef<HTMLDivElement>(null);
 
+
+  const refreshTopAndLeftInPx: () => void = () => {
+    if (dashboardComponentRef.current === null) {
+      return;
+    }
+
+    const topInPx: number = dashboardComponentRef.current.getBoundingClientRect().top;
+    const leftInPx: number = dashboardComponentRef.current.getBoundingClientRect().left;
+
+    setTopInPx(topInPx);
+    setLeftInPx(leftInPx);
+  };
+
+
+  useEffect(() => {
+    refreshTopAndLeftInPx();
+  }, [props.dashboardViewConfig]);
+
   type MoveComponentFunction = (mouseEvent: MouseEvent) => void;
 
   const moveComponent: MoveComponentFunction = (
     mouseEvent: MouseEvent,
   ): void => {
-    const dashboardComponentOldTopInPx: number =
-      dashboardComponentRef.current?.getBoundingClientRect().top || 0;
+    const dashboardComponentOldTopInPx: number = topInPx;
     const dashboardComponentOldLeftInPx: number =
-      dashboardComponentRef.current?.getBoundingClientRect().left || 0;
+      leftInPx;
 
     const newMoveToTop: number = mouseEvent.pageY;
     const newMoveToLeft: number = mouseEvent.pageX;
@@ -272,8 +292,8 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
           stopResizeAndMove();
         }}
         className="move-element cursor-move absolute w-4 h-4 bg-blue-300 hover:bg-blue-400 rounded-full cursor-pointer"
-        onDragStart={(_event: React.DragEvent<HTMLDivElement>) => {}}
-        onDragEnd={(_event: React.DragEvent<HTMLDivElement>) => {}}
+        onDragStart={(_event: React.DragEvent<HTMLDivElement>) => { }}
+        onDragEnd={(_event: React.DragEvent<HTMLDivElement>) => { }}
       ></div>
     );
   };
@@ -334,16 +354,14 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
       }}
       style={{
         margin: `${MarginForEachUnitInPx}px`,
-        height: `${
-          GetDashboardUnitHeightInPx(props.totalCurrentDashboardWidthInPx) *
-            heightOfComponent +
+        height: `${GetDashboardUnitHeightInPx(props.totalCurrentDashboardWidthInPx) *
+          heightOfComponent +
           SpaceBetweenUnitsInPx * (heightOfComponent - 1)
-        }px`,
-        width: `${
-          GetDashboardUnitWidthInPx(props.totalCurrentDashboardWidthInPx) *
-            widthOfComponent +
+          }px`,
+        width: `${GetDashboardUnitWidthInPx(props.totalCurrentDashboardWidthInPx) *
+          widthOfComponent +
           (SpaceBetweenUnitsInPx - 2) * (widthOfComponent - 1)
-        }px`,
+          }px`,
       }}
       ref={dashboardComponentRef}
     >
diff --git a/Dashboard/src/Components/Dashboard/DashboardView.tsx b/Dashboard/src/Components/Dashboard/DashboardView.tsx
index 5d74032127..3072041cf4 100644
--- a/Dashboard/src/Components/Dashboard/DashboardView.tsx
+++ b/Dashboard/src/Components/Dashboard/DashboardView.tsx
@@ -90,7 +90,7 @@ const DashboardViewer: FunctionComponent<ComponentProps> = (
           return;
         }
 
-        setDashboardViewConfig(dashboard.dashboardViewConfig!);
+        setDashboardViewConfig(dashboard.dashboardViewConfig || DashboardViewConfigUtil.createDefaultDashboardViewConfig());
       } catch (err) {
         setError(API.getFriendlyErrorMessage(err as Error));
       }