From c268a889adc9611cfac8cdfab40159b307b77624 Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Mon, 10 Feb 2025 22:55:41 -0800
Subject: [PATCH] fix: handle remove

---
 .../dashboard-renderer/sandbox/pages/RendererDemo.vue  |  3 +++
 .../src/components/layout/DraggableGridLayout.vue      | 10 ++--------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
index c8cf3ea571..d98f905409 100644
--- a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
@@ -407,6 +407,9 @@ const addTile = () => {
 
 const onRemoveTile = (tile: GridTile<TileDefinition>) => {
   console.log('@remove-tile', tile)
+  console.log('before:', dashboardConfig.value.tiles.length)
+  dashboardConfig.value.tiles = dashboardConfig.value.tiles.filter((_, i) => i !== tile.id)
+  console.log('after:', dashboardConfig.value.tiles.length)
 }
 </script>
 
diff --git a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
index a06004d85b..221a0a362b 100644
--- a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
+++ b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
@@ -106,14 +106,8 @@ watch(() => props.tiles.length, async (newLen, oldLen) => {
     })
     grid.load(nodesToAdd)
   } else if (newLen < oldLen && grid) {
-    const tileToRemove = props.tiles.slice(newLen)
-    const elementsToRemove = tileToRemove.map(e => {
-      return gridContainer.value?.querySelector(`[data-id="${e.id}"]`) as GridStackElement
-    })
-    elementsToRemove.forEach(e => {
-      grid?.removeWidget(e)
-    })
-
+    await nextTick()
+    grid.compact()
   }
 })
 </script>