From c89ecb73e3de74f472214c38715b2202857e2a42 Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Mon, 10 Feb 2025 21:02:31 -0800
Subject: [PATCH 01/22] fix: handle added event

---
 .../components/layout/DraggableGridLayout.vue | 37 ++++++++++++-------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
index ace7b54fa7..bf845fc2c9 100644
--- a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
+++ b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
@@ -25,7 +25,7 @@
 
 <script lang='ts' setup generic="T">
 import { onMounted, onUnmounted, ref, watch } from 'vue'
-import { GridStack } from 'gridstack'
+import { GridStack, type GridStackNode } from 'gridstack'
 import type { GridSize, GridTile } from 'src/types'
 import 'gridstack/dist/gridstack.min.css'
 import 'gridstack/dist/gridstack-extra.min.css'
@@ -44,6 +44,22 @@ const emit = defineEmits<{
 const gridContainer = ref<HTMLDivElement | null>(null)
 let grid: GridStack | null = null
 
+const makeTilesFromGridstackNodes = (items: GridStackNode[]) => {
+  return props.tiles.map((tile, i) => {
+    const item = items.find(item => Number(item.el?.getAttribute('data-index')) === i)
+    if (item) {
+      return {
+        ...tile,
+        layout: {
+          position: { col: item.x, row: item.y },
+          size: { cols: item.w, rows: item.h },
+        },
+      } as GridTile<any>
+    }
+    return tile
+  })
+}
+
 onMounted(() => {
   if (gridContainer.value) {
     grid = GridStack.init({
@@ -54,19 +70,12 @@ onMounted(() => {
       handle: '.tile-header',
     }, gridContainer.value)
     grid.on('change', (_, items) => {
-      const updatedTiles: GridTile<any>[] = props.tiles.map((tile, i) => {
-        const item = items.find(item => Number(item.el?.getAttribute('data-index')) === i)
-        if (item) {
-          return {
-            ...tile,
-            layout: {
-              position: { col: item.x, row: item.y },
-              size: { cols: item.w, rows: item.h },
-            },
-          } as GridTile<any>
-        }
-        return tile
-      })
+      const updatedTiles = makeTilesFromGridstackNodes(items)
+      emit('update-tiles', updatedTiles)
+    })
+    grid.on('added', (_, items) => {
+      grid?.compact()
+      const updatedTiles = makeTilesFromGridstackNodes(items)
       emit('update-tiles', updatedTiles)
     })
   }

From 8766d82c182b8bb1cad65af767db443bc3f71099 Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Mon, 10 Feb 2025 22:22:42 -0800
Subject: [PATCH 02/22] feat: handle adding tiles

---
 .../sandbox/pages/RendererDemo.vue            | 41 +++++++++++++++++-
 .../components/layout/DraggableGridLayout.vue | 42 +++++++++----------
 2 files changed, 59 insertions(+), 24 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
index 5607268dc6..e289f0362a 100644
--- a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
@@ -17,6 +17,12 @@
       >
         refresh
       </KButton>
+      <KButton
+        size="small"
+        @click="addTile"
+      >
+        Add tile
+      </KButton>
       <DashboardRenderer
         ref="dashboardRendererRef"
         :class="{ 'custom-styling': isToggled}"
@@ -64,7 +70,7 @@ const context: DashboardRendererContext = {
   editable: true,
 }
 
-const dashboardConfig: DashboardConfig = {
+const dashboardConfig = ref <DashboardConfig>({
   gridSize: {
     cols: 6,
     rows: 7,
@@ -352,7 +358,7 @@ const dashboardConfig: DashboardConfig = {
       },
     } satisfies TileConfig,
   ],
-}
+})
 
 const isToggled = ref(false)
 
@@ -366,6 +372,37 @@ const dashboardRendererRef = ref<InstanceType<typeof DashboardRenderer> | null>(
 const refresh = () => {
   dashboardRendererRef.value?.refresh()
 }
+
+const addTile = () => {
+  dashboardConfig.value.tiles.push({
+    definition: {
+      chart: {
+        type: 'top_n',
+        chartTitle: 'Top N chart of mock data',
+        description: 'Description',
+      },
+      query: {
+        datasource: 'basic',
+        limit: 3,
+        time_range: {
+          type: 'relative',
+          time_range: 'current_month',
+        },
+      },
+    },
+    layout: {
+      position: {
+        col: -1,
+        row: -1,
+      },
+      size: {
+        cols: 3,
+        rows: 2,
+        fitToContent: true,
+      },
+    },
+  })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
index bf845fc2c9..798fb1d635 100644
--- a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
+++ b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
@@ -5,13 +5,14 @@
   >
     <div
       v-for="(tile, i) in tiles"
-      :key="'tile-' + i"
+      :key="i"
       class="grid-stack-item"
-      :data-index="i"
+      :data-id="tile.id"
       :gs-h="tile.layout.size.rows"
+      :gs-lazy-load="true"
       :gs-w="tile.layout.size.cols"
-      :gs-x="tile.layout.position.col"
-      :gs-y="tile.layout.position.row"
+      :gs-x="tile.layout.position.col >= 0 ? tile.layout.position.col : undefined"
+      :gs-y="tile.layout.position.row >= 0 ? tile.layout.position.row : undefined"
     >
       <div class="grid-stack-item-content">
         <slot
@@ -24,7 +25,7 @@
 </template>
 
 <script lang='ts' setup generic="T">
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
 import { GridStack, type GridStackNode } from 'gridstack'
 import type { GridSize, GridTile } from 'src/types'
 import 'gridstack/dist/gridstack.min.css'
@@ -45,8 +46,8 @@ const gridContainer = ref<HTMLDivElement | null>(null)
 let grid: GridStack | null = null
 
 const makeTilesFromGridstackNodes = (items: GridStackNode[]) => {
-  return props.tiles.map((tile, i) => {
-    const item = items.find(item => Number(item.el?.getAttribute('data-index')) === i)
+  return props.tiles.map((tile) => {
+    const item = items.find(item => Number(item.el?.getAttribute('data-id')) === tile.id)
     if (item) {
       return {
         ...tile,
@@ -74,7 +75,6 @@ onMounted(() => {
       emit('update-tiles', updatedTiles)
     })
     grid.on('added', (_, items) => {
-      grid?.compact()
       const updatedTiles = makeTilesFromGridstackNodes(items)
       emit('update-tiles', updatedTiles)
     })
@@ -87,21 +87,19 @@ onUnmounted(() => {
   }
 })
 
-watch(() => props.tiles, newTiles => {
-  if (grid && gridContainer.value) {
-    newTiles.forEach((tile, i) => {
-      const el = gridContainer.value?.querySelector(`[data-index="${i}"]`)
-      if (el) {
-        grid?.update(el as HTMLElement, {
-          x: tile.layout.position.col,
-          y: tile.layout.position.row,
-          w: tile.layout.size.cols,
-          h: tile.layout.size.rows,
-        })
-      }
-    })
+watch(() => props.tiles.length, async (newLen, oldLen) => {
+  if (newLen > oldLen && grid) {
+    await nextTick()
+    const tileToAdd = props.tiles[newLen - 1]
+    const el = gridContainer.value?.querySelector(`[data-id="${tileToAdd.id}"]`)
+    grid.load([{
+      w: tileToAdd.layout.size.cols,
+      h: tileToAdd.layout.size.rows,
+      autoPosition: true,
+      el: el as HTMLElement,
+    } as GridStackNode])
   }
-}, { deep: true })
+})
 </script>
 
 <style lang="scss" scoped>

From 4c14df694e9d2ed5e28d739bf2a502f3a687ec9c Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Mon, 10 Feb 2025 22:30:59 -0800
Subject: [PATCH 03/22] fix: handle if more than one tiles are added

---
 .../components/layout/DraggableGridLayout.vue  | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
index 798fb1d635..ec719cc178 100644
--- a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
+++ b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
@@ -90,14 +90,16 @@ onUnmounted(() => {
 watch(() => props.tiles.length, async (newLen, oldLen) => {
   if (newLen > oldLen && grid) {
     await nextTick()
-    const tileToAdd = props.tiles[newLen - 1]
-    const el = gridContainer.value?.querySelector(`[data-id="${tileToAdd.id}"]`)
-    grid.load([{
-      w: tileToAdd.layout.size.cols,
-      h: tileToAdd.layout.size.rows,
-      autoPosition: true,
-      el: el as HTMLElement,
-    } as GridStackNode])
+    const tileToAdd = props.tiles.slice(oldLen)
+    const nodesToAdd = tileToAdd.map(e => {
+      return {
+        w: e.layout.size.cols,
+        h: e.layout.size.rows,
+        autoPosition: true,
+        el: gridContainer.value?.querySelector(`[data-id="${e.id}"]`) as HTMLElement,
+      } as GridStackNode
+    })
+    grid.load(nodesToAdd)
   }
 })
 </script>

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

---
 .../sandbox/pages/RendererDemo.vue               |  5 +++++
 .../src/components/DashboardRenderer.vue         |  6 ++++++
 .../src/components/DashboardTile.vue             | 11 +++++++++++
 .../components/layout/DraggableGridLayout.vue    | 16 +++++++++++++++-
 .../dashboard-renderer/src/locales/en.json       |  3 ++-
 5 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
index e289f0362a..c8cf3ea571 100644
--- a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
@@ -30,6 +30,7 @@
         :context="context"
         draggable
         @edit-tile="onEditTile"
+        @remove-tile="onRemoveTile"
       >
         <template #slot-1>
           <div class="slot-container">
@@ -403,6 +404,10 @@ const addTile = () => {
     },
   })
 }
+
+const onRemoveTile = (tile: GridTile<TileDefinition>) => {
+  console.log('@remove-tile', tile)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
index 01962675ec..3353606538 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
@@ -31,6 +31,7 @@
           :refresh-counter="refreshCounter"
           :tile-id="tile.id"
           @edit-tile="onEditTile(tile)"
+          @remove-tile="onRemoveTile(tile)"
         />
       </template>
     </component>
@@ -65,6 +66,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
   (e: 'edit-tile', tile: GridTile<TileDefinition>): void
+  (e: 'remove-tile', tile: GridTile<TileDefinition>): void
   (e: 'update-tiles', tiles: TileConfig[]): void
 }>()
 
@@ -176,6 +178,10 @@ const onEditTile = (tile: GridTile<TileDefinition>) => {
   emit('edit-tile', tile)
 }
 
+const onRemoveTile = (tile: GridTile<TileDefinition>) => {
+  emit('remove-tile', tile)
+}
+
 const refreshTiles = () => {
   refreshCounter.value++
 }
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
index cee7560e0c..2c5cad4547 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
@@ -67,6 +67,12 @@
                 {{ i18n.t('csvExport.exportAsCsv') }}
               </span>
             </KDropdownItem>
+            <KDropdownItem
+              :data-testid="`remove-tile-${tileId}`"
+              @click="removeTile"
+            >
+              {{ i18n.t('renderer.remove') }}
+            </KDropdownItem>
           </template>
         </KDropdown>
       </div>
@@ -133,6 +139,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
   (e: 'edit-tile', tile: TileDefinition): void
+  (e: 'remove-tile', tile: TileDefinition): void
 }>()
 
 const queryBridge: AnalyticsBridge | undefined = inject(INJECT_QUERY_PROVIDER)
@@ -231,6 +238,10 @@ const editTile = () => {
   emit('edit-tile', props.definition)
 }
 
+const removeTile = () => {
+  emit('remove-tile', props.definition)
+}
+
 const onChartData = (data: ExploreResultV4) => {
   chartData.value = data
 }
diff --git a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
index ec719cc178..a06004d85b 100644
--- a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
+++ b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
@@ -26,7 +26,8 @@
 
 <script lang='ts' setup generic="T">
 import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
-import { GridStack, type GridStackNode } from 'gridstack'
+import { GridStack } from 'gridstack'
+import type { GridStackElement, GridStackNode } from 'gridstack'
 import type { GridSize, GridTile } from 'src/types'
 import 'gridstack/dist/gridstack.min.css'
 import 'gridstack/dist/gridstack-extra.min.css'
@@ -78,6 +79,10 @@ onMounted(() => {
       const updatedTiles = makeTilesFromGridstackNodes(items)
       emit('update-tiles', updatedTiles)
     })
+    grid.on('removed', async (_, items) => {
+      const updatedTiles = makeTilesFromGridstackNodes(items)
+      emit('update-tiles', updatedTiles)
+    })
   }
 })
 
@@ -100,6 +105,15 @@ watch(() => props.tiles.length, async (newLen, oldLen) => {
       } as GridStackNode
     })
     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)
+    })
+
   }
 })
 </script>
diff --git a/packages/analytics/dashboard-renderer/src/locales/en.json b/packages/analytics/dashboard-renderer/src/locales/en.json
index 147e8e63a8..c3837ae13b 100644
--- a/packages/analytics/dashboard-renderer/src/locales/en.json
+++ b/packages/analytics/dashboard-renderer/src/locales/en.json
@@ -6,7 +6,8 @@
       "7d": "Last 7-Day Summary",
       "30d": "Last 30-Day Summary"
     },
-    "edit": "Edit"
+    "edit": "Edit",
+    "remove": "Remove"
   },
   "queryDataProvider": {
     "timeRangeExceeded":  "The time range for this report is outside of your organization's data retention period"

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

---
 packages/analytics/dashboard-renderer/package.json   |  2 +-
 .../sandbox/pages/RendererDemo.vue                   |  3 +++
 .../src/components/layout/DraggableGridLayout.vue    | 12 +++---------
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/package.json b/packages/analytics/dashboard-renderer/package.json
index f84753a225..e99399de95 100644
--- a/packages/analytics/dashboard-renderer/package.json
+++ b/packages/analytics/dashboard-renderer/package.json
@@ -66,7 +66,7 @@
     "extends": "../../../package.json"
   },
   "distSizeChecker": {
-    "errorLimit": "512KB"
+    "errorLimit": "600KB"
   },
   "peerDependencies": {
     "@kong-ui-public/analytics-chart": "workspace:^",
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..4627c50718 100644
--- a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
+++ b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
@@ -27,7 +27,7 @@
 <script lang='ts' setup generic="T">
 import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
 import { GridStack } from 'gridstack'
-import type { GridStackElement, GridStackNode } from 'gridstack'
+import type { GridStackNode } from 'gridstack'
 import type { GridSize, GridTile } from 'src/types'
 import 'gridstack/dist/gridstack.min.css'
 import 'gridstack/dist/gridstack-extra.min.css'
@@ -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>

From 9c385ff3976f756cff765a70f402203a3009bc2c Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Mon, 10 Feb 2025 23:39:35 -0800
Subject: [PATCH 06/22] fix: remove menu item behind dashboards-next ff

---
 .../dashboard-renderer/src/components/DashboardTile.vue         | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
index 2c5cad4547..6236fc3676 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
@@ -68,6 +68,7 @@
               </span>
             </KDropdownItem>
             <KDropdownItem
+              v-if="hasDashboardsNextAccess"
               :data-testid="`remove-tile-${tileId}`"
               @click="removeTile"
             >
@@ -146,6 +147,7 @@ const queryBridge: AnalyticsBridge | undefined = inject(INJECT_QUERY_PROVIDER)
 const { evaluateFeatureFlag } = composables.useEvaluateFeatureFlag()
 const { i18n } = composables.useI18n()
 const hasKebabMenuAccess = evaluateFeatureFlag('ma-3043-analytics-chart-kebab-menu', false)
+const hasDashboardsNextAccess = evaluateFeatureFlag('ma-3601-custom-dashboards-next', false)
 
 const chartData = ref<ExploreResultV4>()
 const exportModalVisible = ref<boolean>(false)

From be6eb5edd0adeff4989afbf807d2f2f6761a28fb Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Mon, 10 Feb 2025 23:51:58 -0800
Subject: [PATCH 07/22] fix: add prop to control if tiles can be removed

---
 .../dashboard-renderer/src/components/DashboardRenderer.vue  | 2 ++
 .../dashboard-renderer/src/components/DashboardTile.vue      | 5 +++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
index 3353606538..24263c8b2e 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
@@ -60,8 +60,10 @@ const props = withDefaults(defineProps<{
   context: DashboardRendererContext,
   config: DashboardConfig,
   draggable?: boolean,
+  canRemoveTiles?: boolean,
 }>(), {
   draggable: false,
+  canRemoveTiles: false,
 })
 
 const emit = defineEmits<{
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
index 6236fc3676..873f2b10cb 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
@@ -68,7 +68,7 @@
               </span>
             </KDropdownItem>
             <KDropdownItem
-              v-if="hasDashboardsNextAccess"
+              v-if="canRemoveTile"
               :data-testid="`remove-tile-${tileId}`"
               @click="removeTile"
             >
@@ -134,8 +134,10 @@ const props = withDefaults(defineProps<{
   queryReady: boolean,
   refreshCounter: number,
   tileId: string | number,
+  canRemoveTile?: boolean,
 }>(), {
   height: DEFAULT_TILE_HEIGHT,
+  canRemoveTile: false,
 })
 
 const emit = defineEmits<{
@@ -147,7 +149,6 @@ const queryBridge: AnalyticsBridge | undefined = inject(INJECT_QUERY_PROVIDER)
 const { evaluateFeatureFlag } = composables.useEvaluateFeatureFlag()
 const { i18n } = composables.useI18n()
 const hasKebabMenuAccess = evaluateFeatureFlag('ma-3043-analytics-chart-kebab-menu', false)
-const hasDashboardsNextAccess = evaluateFeatureFlag('ma-3601-custom-dashboards-next', false)
 
 const chartData = ref<ExploreResultV4>()
 const exportModalVisible = ref<boolean>(false)

From d586653877a2d6d51cad0b5f35ce3477bf9901ef Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Tue, 11 Feb 2025 10:48:29 -0800
Subject: [PATCH 08/22] fix: pass prop to dashboard tile

---
 .../analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue  | 1 +
 .../dashboard-renderer/src/components/DashboardRenderer.vue      | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
index d98f905409..9d4e0d7aad 100644
--- a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
@@ -25,6 +25,7 @@
       </KButton>
       <DashboardRenderer
         ref="dashboardRendererRef"
+        can-remove-tiles
         :class="{ 'custom-styling': isToggled}"
         :config="dashboardConfig"
         :context="context"
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
index 24263c8b2e..eee1ab0ddc 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
@@ -23,6 +23,7 @@
         </div>
         <DashboardTile
           v-else
+          :can-remove-tile="canRemoveTiles"
           class="tile-container"
           :context="mergedContext"
           :definition="tile.meta"

From fec0c5d9efd76234d8940b9d8a62c27e1f186d77 Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Tue, 11 Feb 2025 13:20:44 -0800
Subject: [PATCH 09/22] fix: tweak remove logic

---
 .../sandbox/pages/RendererDemo.vue            | 26 ++++++++++++-------
 .../src/components/DashboardRenderer.vue      | 10 +++----
 .../components/layout/DraggableGridLayout.vue | 26 ++++++++++++++-----
 3 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
index 9d4e0d7aad..0fa0ebf493 100644
--- a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
@@ -25,13 +25,13 @@
       </KButton>
       <DashboardRenderer
         ref="dashboardRendererRef"
-        can-remove-tiles
+        can-edit
         :class="{ 'custom-styling': isToggled}"
         :config="dashboardConfig"
         :context="context"
-        draggable
         @edit-tile="onEditTile"
         @remove-tile="onRemoveTile"
+        @update-tiles="onUpdateTiles"
       >
         <template #slot-1>
           <div class="slot-container">
@@ -379,16 +379,19 @@ const addTile = () => {
   dashboardConfig.value.tiles.push({
     definition: {
       chart: {
-        type: 'top_n',
-        chartTitle: 'Top N chart of mock data',
-        description: 'Description',
+        type: 'timeseries_line',
+        chartTitle: 'Timeseries line chart of mock data',
+        threshold: {
+          'request_count': 3200,
+        } as Record<ExploreAggregations, number>,
       },
       query: {
         datasource: 'basic',
-        limit: 3,
+        dimensions: ['time'],
         time_range: {
-          type: 'relative',
-          time_range: 'current_month',
+          type: 'absolute',
+          start: '2024-01-01',
+          end: '2024-02-01',
         },
       },
     },
@@ -408,9 +411,12 @@ 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)
+}
+
+const onUpdateTiles = (tiles: TileConfig[]) => {
+  console.log('@update-tiles', tiles)
+  dashboardConfig.value.tiles = tiles
 }
 </script>
 
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
index eee1ab0ddc..649740655c 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
@@ -7,7 +7,7 @@
       {{ i18n.t('renderer.noQueryBridge') }}
     </KAlert>
     <component
-      :is="draggable ? DraggableGridLayout : GridLayout"
+      :is="canEdit ? DraggableGridLayout : GridLayout"
       v-else
       :grid-size="config.gridSize"
       :tile-height="config.tileHeight"
@@ -23,7 +23,7 @@
         </div>
         <DashboardTile
           v-else
-          :can-remove-tile="canRemoveTiles"
+          :can-remove-tile="canEdit"
           class="tile-container"
           :context="mergedContext"
           :definition="tile.meta"
@@ -60,11 +60,9 @@ import { KUI_SPACE_70 } from '@kong/design-tokens'
 const props = withDefaults(defineProps<{
   context: DashboardRendererContext,
   config: DashboardConfig,
-  draggable?: boolean,
-  canRemoveTiles?: boolean,
+  canEdit?: boolean,
 }>(), {
-  draggable: false,
-  canRemoveTiles: false,
+  canEdit: false,
 })
 
 const emit = defineEmits<{
diff --git a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
index 4627c50718..9ce1d268a3 100644
--- a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
+++ b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
@@ -79,10 +79,6 @@ onMounted(() => {
       const updatedTiles = makeTilesFromGridstackNodes(items)
       emit('update-tiles', updatedTiles)
     })
-    grid.on('removed', async (_, items) => {
-      const updatedTiles = makeTilesFromGridstackNodes(items)
-      emit('update-tiles', updatedTiles)
-    })
   }
 })
 
@@ -105,11 +101,27 @@ watch(() => props.tiles.length, async (newLen, oldLen) => {
       } as GridStackNode
     })
     grid.load(nodesToAdd)
-  } else if (newLen < oldLen && grid) {
-    await nextTick()
-    grid.compact()
   }
 })
+
+watch(() => props.tiles, async (newTiles, oldTiles) => {
+  if (newTiles.length < oldTiles.length && grid) {
+
+    // We havn't actually added a concept of "unique ids" to the tiles yet, so the actual tile "id" is simply tied
+    // to the index by default. This works fine for modifying tiles, however, when it comes to identifying a tile
+    // that was removed, it gets a little tricky. Since the "layout" of a tile is unique, we can use that to uniquely
+    // identify tiles in order to detect what was removed.
+    const tileToRemove = oldTiles.find(oldTile => !newTiles.find(newTile => JSON.stringify(newTile.layout) === JSON.stringify(oldTile.layout)))
+
+    if (tileToRemove) {
+      const el = gridContainer.value?.querySelector(`[data-id="${tileToRemove.id}"]`) as HTMLElement
+      if (el) {
+        grid.removeWidget(el)
+      }
+    }
+  }
+})
+
 </script>
 
 <style lang="scss" scoped>

From b88f1d7b17aa89c2752096a7c7b3153378a19398 Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Tue, 11 Feb 2025 18:30:20 -0800
Subject: [PATCH 10/22] fix: more tweaks to remove logic

---
 .../sandbox/pages/DynamicDashboardDemo.vue    |  1 +
 .../components/layout/DraggableGridLayout.vue | 52 +++++++++----------
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/DynamicDashboardDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/DynamicDashboardDemo.vue
index 0ab1e67073..5e12fe1e51 100644
--- a/packages/analytics/dashboard-renderer/sandbox/pages/DynamicDashboardDemo.vue
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/DynamicDashboardDemo.vue
@@ -16,6 +16,7 @@
     <div class="sandbox-container">
       <DashboardRenderer
         v-if="definition.type === ValidationResultType.Success"
+        can-edit
         :config="definition.data"
         :context="context"
         draggable
diff --git a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
index 9ce1d268a3..12189ebf8e 100644
--- a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
+++ b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
@@ -4,15 +4,15 @@
     class="grid-stack"
   >
     <div
-      v-for="(tile, i) in tiles"
-      :key="i"
+      v-for="tile in tiles"
+      :id="`tile-${tile.id}`"
+      :key="tile.id"
       class="grid-stack-item"
-      :data-id="tile.id"
       :gs-h="tile.layout.size.rows"
       :gs-lazy-load="true"
       :gs-w="tile.layout.size.cols"
-      :gs-x="tile.layout.position.col >= 0 ? tile.layout.position.col : undefined"
-      :gs-y="tile.layout.position.row >= 0 ? tile.layout.position.row : undefined"
+      :gs-x="tile.layout.position.col"
+      :gs-y="tile.layout.position.row"
     >
       <div class="grid-stack-item-content">
         <slot
@@ -48,7 +48,9 @@ let grid: GridStack | null = null
 
 const makeTilesFromGridstackNodes = (items: GridStackNode[]) => {
   return props.tiles.map((tile) => {
-    const item = items.find(item => Number(item.el?.getAttribute('data-id')) === tile.id)
+    const item = items.find(item => {
+      return item.el?.id === `tile-${tile.id}`
+    })
     if (item) {
       return {
         ...tile,
@@ -70,6 +72,7 @@ onMounted(() => {
       resizable: { handles: 'se' },
       lazyLoad: true,
       handle: '.tile-header',
+
     }, gridContainer.value)
     grid.on('change', (_, items) => {
       const updatedTiles = makeTilesFromGridstackNodes(items)
@@ -92,31 +95,28 @@ watch(() => props.tiles.length, async (newLen, oldLen) => {
   if (newLen > oldLen && grid) {
     await nextTick()
     const tileToAdd = props.tiles.slice(oldLen)
-    const nodesToAdd = tileToAdd.map(e => {
-      return {
-        w: e.layout.size.cols,
-        h: e.layout.size.rows,
+    for (const tile of tileToAdd) {
+      grid.makeWidget(`#tile-${tile.id}`, {
         autoPosition: true,
-        el: gridContainer.value?.querySelector(`[data-id="${e.id}"]`) as HTMLElement,
-      } as GridStackNode
-    })
-    grid.load(nodesToAdd)
+        w: tile.layout.size.cols,
+        h: tile.layout.size.rows,
+        lazyLoad: true,
+      })
+    }
   }
 })
 
-watch(() => props.tiles, async (newTiles, oldTiles) => {
-  if (newTiles.length < oldTiles.length && grid) {
-
-    // We havn't actually added a concept of "unique ids" to the tiles yet, so the actual tile "id" is simply tied
-    // to the index by default. This works fine for modifying tiles, however, when it comes to identifying a tile
-    // that was removed, it gets a little tricky. Since the "layout" of a tile is unique, we can use that to uniquely
-    // identify tiles in order to detect what was removed.
-    const tileToRemove = oldTiles.find(oldTile => !newTiles.find(newTile => JSON.stringify(newTile.layout) === JSON.stringify(oldTile.layout)))
-
-    if (tileToRemove) {
-      const el = gridContainer.value?.querySelector(`[data-id="${tileToRemove.id}"]`) as HTMLElement
+watch(() => props.tiles, async (tiles) => {
+  if (grid && gridContainer.value) {
+    for (const tile of tiles) {
+      const el = gridContainer.value.querySelector(`#tile-${tile.id}`) as HTMLElement
       if (el) {
-        grid.removeWidget(el)
+        grid.update(el, {
+          x: tile.layout.position.col,
+          y: tile.layout.position.row,
+          w: tile.layout.size.cols,
+          h: tile.layout.size.rows,
+        })
       }
     }
   }

From fdffa2ac4e99410e8dbe6a99746a03f1638cb39d Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Tue, 11 Feb 2025 23:27:35 -0800
Subject: [PATCH 11/22] fix: fix tweaks

---
 .../sandbox/pages/RendererDemo.vue            | 234 +++++++++---------
 .../components/layout/DraggableGridLayout.vue |   4 +-
 2 files changed, 119 insertions(+), 119 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
index 0fa0ebf493..926e4dd63e 100644
--- a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
@@ -101,58 +101,58 @@ const dashboardConfig = ref <DashboardConfig>({
         },
       },
     } satisfies TileConfig,
-    {
-      definition: {
-        chart: {
-          type: 'top_n',
-          chartTitle: 'Top N chart of mock data',
-          description: '{timeframe}',
-        },
-        query: {
-          datasource: 'basic',
-          limit: 1,
-        },
-      },
-      layout: {
-        position: {
-          col: 0,
-          row: 1,
-        },
-        size: {
-          cols: 3,
-          rows: 1,
-          fitToContent: true,
-        },
-      },
-    } satisfies TileConfig,
-    {
-      definition: {
-        chart: {
-          type: 'top_n',
-          chartTitle: 'Top N chart of mock data',
-          description: 'Description',
-        },
-        query: {
-          datasource: 'basic',
-          limit: 3,
-          time_range: {
-            type: 'relative',
-            time_range: 'current_month',
-          },
-        },
-      },
-      layout: {
-        position: {
-          col: 3,
-          row: 1,
-        },
-        size: {
-          cols: 3,
-          rows: 1,
-          fitToContent: true,
-        },
-      },
-    } satisfies TileConfig,
+    // {
+    //   definition: {
+    //     chart: {
+    //       type: 'top_n',
+    //       chartTitle: 'Top N chart of mock data',
+    //       description: '{timeframe}',
+    //     },
+    //     query: {
+    //       datasource: 'basic',
+    //       limit: 1,
+    //     },
+    //   },
+    //   layout: {
+    //     position: {
+    //       col: 0,
+    //       row: 1,
+    //     },
+    //     size: {
+    //       cols: 3,
+    //       rows: 1,
+    //       fitToContent: true,
+    //     },
+    //   },
+    // } satisfies TileConfig,
+    // {
+    //   definition: {
+    //     chart: {
+    //       type: 'top_n',
+    //       chartTitle: 'Top N chart of mock data',
+    //       description: 'Description',
+    //     },
+    //     query: {
+    //       datasource: 'basic',
+    //       limit: 3,
+    //       time_range: {
+    //         type: 'relative',
+    //         time_range: 'current_month',
+    //       },
+    //     },
+    //   },
+    //   layout: {
+    //     position: {
+    //       col: 3,
+    //       row: 1,
+    //     },
+    //     size: {
+    //       cols: 3,
+    //       rows: 1,
+    //       fitToContent: true,
+    //     },
+    //   },
+    // } satisfies TileConfig,
     {
       definition: {
         chart: {
@@ -211,71 +211,71 @@ const dashboardConfig = ref <DashboardConfig>({
         },
       },
     } satisfies TileConfig,
-    {
-      definition: {
-        chart: {
-          type: 'gauge',
-          metricDisplay: 'full',
-          reverseDataset: true,
-          numerator: 0,
-        },
-        query: {
-          datasource: 'basic',
-        },
-      },
-      layout: {
-        position: {
-          col: 0,
-          row: 4,
-        },
-        size: {
-          cols: 1,
-          rows: 1,
-        },
-      },
-    } satisfies TileConfig,
-    {
-      definition: {
-        chart: {
-          type: 'slottable',
-          id: 'slot-1',
-        },
-        query: {
-          datasource: 'basic',
-        },
-      },
-      layout: {
-        position: {
-          col: 1,
-          row: 4,
-        },
-        size: {
-          cols: 1,
-          rows: 1,
-        },
-      },
-    } satisfies TileConfig,
-    {
-      definition: {
-        chart: {
-          type: 'slottable',
-          id: 'slot-2',
-        },
-        query: {
-          datasource: 'basic',
-        },
-      },
-      layout: {
-        position: {
-          col: 2,
-          row: 4,
-        },
-        size: {
-          cols: 3,
-          rows: 1,
-        },
-      },
-    } satisfies TileConfig,
+    // {
+    //   definition: {
+    //     chart: {
+    //       type: 'gauge',
+    //       metricDisplay: 'full',
+    //       reverseDataset: true,
+    //       numerator: 0,
+    //     },
+    //     query: {
+    //       datasource: 'basic',
+    //     },
+    //   },
+    //   layout: {
+    //     position: {
+    //       col: 0,
+    //       row: 4,
+    //     },
+    //     size: {
+    //       cols: 1,
+    //       rows: 1,
+    //     },
+    //   },
+    // } satisfies TileConfig,
+    // {
+    //   definition: {
+    //     chart: {
+    //       type: 'slottable',
+    //       id: 'slot-1',
+    //     },
+    //     query: {
+    //       datasource: 'basic',
+    //     },
+    //   },
+    //   layout: {
+    //     position: {
+    //       col: 1,
+    //       row: 4,
+    //     },
+    //     size: {
+    //       cols: 1,
+    //       rows: 1,
+    //     },
+    //   },
+    // } satisfies TileConfig,
+    // {
+    //   definition: {
+    //     chart: {
+    //       type: 'slottable',
+    //       id: 'slot-2',
+    //     },
+    //     query: {
+    //       datasource: 'basic',
+    //     },
+    //   },
+    //   layout: {
+    //     position: {
+    //       col: 2,
+    //       row: 4,
+    //     },
+    //     size: {
+    //       cols: 3,
+    //       rows: 1,
+    //     },
+    //   },
+    // } satisfies TileConfig,
     {
       definition: {
         chart: {
diff --git a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
index 12189ebf8e..470afe1beb 100644
--- a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
+++ b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
@@ -11,8 +11,8 @@
       :gs-h="tile.layout.size.rows"
       :gs-lazy-load="true"
       :gs-w="tile.layout.size.cols"
-      :gs-x="tile.layout.position.col"
-      :gs-y="tile.layout.position.row"
+      :gs-x="tile.layout.position.col >= 0 ? tile.layout.position.col : undefined"
+      :gs-y="tile.layout.position.row >= 0 ? tile.layout.position.row : undefined"
     >
       <div class="grid-stack-item-content">
         <slot

From 5e166c47f8786eabf55ca0cde2b824eecae96305 Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Wed, 12 Feb 2025 10:19:41 -0800
Subject: [PATCH 12/22] fix: ui tweaks

---
 .../sandbox/pages/RendererDemo.vue            | 234 +++++++++---------
 .../src/components/DashboardRenderer.vue      |   3 +-
 .../src/components/DashboardTile.vue          |  17 +-
 .../components/layout/DraggableGridLayout.vue |  18 +-
 .../src/icons/arrows_more_down.svg            |   8 +
 5 files changed, 153 insertions(+), 127 deletions(-)
 create mode 100644 packages/analytics/dashboard-renderer/src/icons/arrows_more_down.svg

diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
index 926e4dd63e..0fa0ebf493 100644
--- a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
@@ -101,58 +101,58 @@ const dashboardConfig = ref <DashboardConfig>({
         },
       },
     } satisfies TileConfig,
-    // {
-    //   definition: {
-    //     chart: {
-    //       type: 'top_n',
-    //       chartTitle: 'Top N chart of mock data',
-    //       description: '{timeframe}',
-    //     },
-    //     query: {
-    //       datasource: 'basic',
-    //       limit: 1,
-    //     },
-    //   },
-    //   layout: {
-    //     position: {
-    //       col: 0,
-    //       row: 1,
-    //     },
-    //     size: {
-    //       cols: 3,
-    //       rows: 1,
-    //       fitToContent: true,
-    //     },
-    //   },
-    // } satisfies TileConfig,
-    // {
-    //   definition: {
-    //     chart: {
-    //       type: 'top_n',
-    //       chartTitle: 'Top N chart of mock data',
-    //       description: 'Description',
-    //     },
-    //     query: {
-    //       datasource: 'basic',
-    //       limit: 3,
-    //       time_range: {
-    //         type: 'relative',
-    //         time_range: 'current_month',
-    //       },
-    //     },
-    //   },
-    //   layout: {
-    //     position: {
-    //       col: 3,
-    //       row: 1,
-    //     },
-    //     size: {
-    //       cols: 3,
-    //       rows: 1,
-    //       fitToContent: true,
-    //     },
-    //   },
-    // } satisfies TileConfig,
+    {
+      definition: {
+        chart: {
+          type: 'top_n',
+          chartTitle: 'Top N chart of mock data',
+          description: '{timeframe}',
+        },
+        query: {
+          datasource: 'basic',
+          limit: 1,
+        },
+      },
+      layout: {
+        position: {
+          col: 0,
+          row: 1,
+        },
+        size: {
+          cols: 3,
+          rows: 1,
+          fitToContent: true,
+        },
+      },
+    } satisfies TileConfig,
+    {
+      definition: {
+        chart: {
+          type: 'top_n',
+          chartTitle: 'Top N chart of mock data',
+          description: 'Description',
+        },
+        query: {
+          datasource: 'basic',
+          limit: 3,
+          time_range: {
+            type: 'relative',
+            time_range: 'current_month',
+          },
+        },
+      },
+      layout: {
+        position: {
+          col: 3,
+          row: 1,
+        },
+        size: {
+          cols: 3,
+          rows: 1,
+          fitToContent: true,
+        },
+      },
+    } satisfies TileConfig,
     {
       definition: {
         chart: {
@@ -211,71 +211,71 @@ const dashboardConfig = ref <DashboardConfig>({
         },
       },
     } satisfies TileConfig,
-    // {
-    //   definition: {
-    //     chart: {
-    //       type: 'gauge',
-    //       metricDisplay: 'full',
-    //       reverseDataset: true,
-    //       numerator: 0,
-    //     },
-    //     query: {
-    //       datasource: 'basic',
-    //     },
-    //   },
-    //   layout: {
-    //     position: {
-    //       col: 0,
-    //       row: 4,
-    //     },
-    //     size: {
-    //       cols: 1,
-    //       rows: 1,
-    //     },
-    //   },
-    // } satisfies TileConfig,
-    // {
-    //   definition: {
-    //     chart: {
-    //       type: 'slottable',
-    //       id: 'slot-1',
-    //     },
-    //     query: {
-    //       datasource: 'basic',
-    //     },
-    //   },
-    //   layout: {
-    //     position: {
-    //       col: 1,
-    //       row: 4,
-    //     },
-    //     size: {
-    //       cols: 1,
-    //       rows: 1,
-    //     },
-    //   },
-    // } satisfies TileConfig,
-    // {
-    //   definition: {
-    //     chart: {
-    //       type: 'slottable',
-    //       id: 'slot-2',
-    //     },
-    //     query: {
-    //       datasource: 'basic',
-    //     },
-    //   },
-    //   layout: {
-    //     position: {
-    //       col: 2,
-    //       row: 4,
-    //     },
-    //     size: {
-    //       cols: 3,
-    //       rows: 1,
-    //     },
-    //   },
-    // } satisfies TileConfig,
+    {
+      definition: {
+        chart: {
+          type: 'gauge',
+          metricDisplay: 'full',
+          reverseDataset: true,
+          numerator: 0,
+        },
+        query: {
+          datasource: 'basic',
+        },
+      },
+      layout: {
+        position: {
+          col: 0,
+          row: 4,
+        },
+        size: {
+          cols: 1,
+          rows: 1,
+        },
+      },
+    } satisfies TileConfig,
+    {
+      definition: {
+        chart: {
+          type: 'slottable',
+          id: 'slot-1',
+        },
+        query: {
+          datasource: 'basic',
+        },
+      },
+      layout: {
+        position: {
+          col: 1,
+          row: 4,
+        },
+        size: {
+          cols: 1,
+          rows: 1,
+        },
+      },
+    } satisfies TileConfig,
+    {
+      definition: {
+        chart: {
+          type: 'slottable',
+          id: 'slot-2',
+        },
+        query: {
+          datasource: 'basic',
+        },
+      },
+      layout: {
+        position: {
+          col: 2,
+          row: 4,
+        },
+        size: {
+          cols: 3,
+          rows: 1,
+        },
+      },
+    } satisfies TileConfig,
     {
       definition: {
         chart: {
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
index 649740655c..29f9519dc8 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
@@ -23,10 +23,10 @@
         </div>
         <DashboardTile
           v-else
-          :can-remove-tile="canEdit"
           class="tile-container"
           :context="mergedContext"
           :definition="tile.meta"
+          :editable="canEdit"
           :height="tile.layout.size.rows * (config.tileHeight || DEFAULT_TILE_HEIGHT) + parseInt(KUI_SPACE_70, 10)"
           :query-ready="queryReady"
           :refresh-counter="refreshCounter"
@@ -208,7 +208,6 @@ defineExpose({ refresh: refreshTiles })
     border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
     border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
     height: 100%;
-    padding: 0 var(--kui-space-70, $kui-space-70) var(--kui-space-70, $kui-space-70) var(--kui-space-70, $kui-space-70);
   }
 }
 </style>
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
index 873f2b10cb..53e493afe9 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
@@ -68,7 +68,7 @@
               </span>
             </KDropdownItem>
             <KDropdownItem
-              v-if="canRemoveTile"
+              v-if="editable"
               :data-testid="`remove-tile-${tileId}`"
               @click="removeTile"
             >
@@ -134,10 +134,10 @@ const props = withDefaults(defineProps<{
   queryReady: boolean,
   refreshCounter: number,
   tileId: string | number,
-  canRemoveTile?: boolean,
+  editable?: boolean,
 }>(), {
   height: DEFAULT_TILE_HEIGHT,
-  canRemoveTile: false,
+  editable: false,
 })
 
 const emit = defineEmits<{
@@ -265,13 +265,17 @@ const exportCsv = () => {
   height: v-bind('`${height}px`');
   overflow: hidden;
 
+  &:hover {
+    .tile-header {
+      background: $kui-color-background-neutral-weakest;
+    }
+  }
+
   .tile-header {
     align-items: center;
     display: flex;
     justify-content: space-between;
-    margin-bottom: var(--kui-space-30, $kui-space-30);
-    // So any "handlers" for the tile header includes the padding
-    padding-top: var(--kui-space-70, $kui-space-70);
+    padding: var(--kui-space-70, $kui-space-70) var(--kui-space-30, $kui-space-30) var(--kui-space-70, $kui-space-70) var(--kui-space-70, $kui-space-70);
     right: 0;
     width: 100%;
 
@@ -334,6 +338,7 @@ const exportCsv = () => {
 
   .tile-content {
     flex-grow: 1;
+    margin: var(--kui-space-60, $kui-space-60);
     overflow: hidden;
   }
 }
diff --git a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
index 470afe1beb..6cba4dd4e8 100644
--- a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
+++ b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
@@ -69,7 +69,7 @@ onMounted(() => {
     grid = GridStack.init({
       column: props.gridSize.cols,
       cellHeight: props.tileHeight,
-      resizable: { handles: 'se' },
+      resizable: { handles: 'se, sw' },
       lazyLoad: true,
       handle: '.tile-header',
 
@@ -120,7 +120,7 @@ watch(() => props.tiles, async (tiles) => {
       }
     }
   }
-})
+}, { deep: true })
 
 </script>
 
@@ -128,4 +128,18 @@ watch(() => props.tiles, async (tiles) => {
 :deep(.tile-header) {
   cursor: move;
 }
+$rotate-values: (
+  'se': 0deg,
+  'sw': 90deg,
+);
+
+@each $direction, $rotate in $rotate-values {
+  :deep(.ui-resizable-#{$direction}) {
+    background-image: url('../../icons/arrows_more_down.svg');
+    cursor: se-resize;
+    margin: 5px;
+    transform: rotate($rotate);
+  }
+}
+
 </style>
diff --git a/packages/analytics/dashboard-renderer/src/icons/arrows_more_down.svg b/packages/analytics/dashboard-renderer/src/icons/arrows_more_down.svg
new file mode 100644
index 0000000000..68f24888d1
--- /dev/null
+++ b/packages/analytics/dashboard-renderer/src/icons/arrows_more_down.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4440_21061" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" transform="matrix(-1 0 0 1 24 0)" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4440_21061)">
+<path d="M19 21V10H17V19H8V21H19ZM14 16V5H12V14H3V16H14Z" fill="#3A3F51"/>
+</g>
+</svg>

From 1d3ffc57fcc90b5ca07a96718e4722780011a2f0 Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Wed, 12 Feb 2025 11:26:18 -0800
Subject: [PATCH 13/22] fix: styles

---
 .../dashboard-renderer/src/components/DashboardTile.vue       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
index 53e493afe9..9d425b5590 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
@@ -275,7 +275,7 @@ const exportCsv = () => {
     align-items: center;
     display: flex;
     justify-content: space-between;
-    padding: var(--kui-space-70, $kui-space-70) var(--kui-space-30, $kui-space-30) var(--kui-space-70, $kui-space-70) var(--kui-space-70, $kui-space-70);
+    padding: var(--kui-space-60, $kui-space-60) var(--kui-space-60, $kui-space-60) var(--kui-space-20, $kui-space-20) var(--kui-space-60, $kui-space-60);
     right: 0;
     width: 100%;
 
@@ -338,7 +338,7 @@ const exportCsv = () => {
 
   .tile-content {
     flex-grow: 1;
-    margin: var(--kui-space-60, $kui-space-60);
+    margin: var(--kui-space-20, $kui-space-20) var(--kui-space-60, $kui-space-60) var(--kui-space-60, $kui-space-60) var(--kui-space-60, $kui-space-60);
     overflow: hidden;
   }
 }

From 8ebfceba532dcb23232d3ad5155e15182273b311 Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Wed, 12 Feb 2025 12:51:39 -0800
Subject: [PATCH 14/22] fix: gridstack should drive removing widgets/tiles

---
 .../sandbox/pages/RendererDemo.vue            |  6 -----
 .../src/components/DashboardRenderer.vue      |  9 ++++++--
 .../components/layout/DraggableGridLayout.vue | 22 ++++++++++++++++---
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
index 0fa0ebf493..951f092a01 100644
--- a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
@@ -30,7 +30,6 @@
         :config="dashboardConfig"
         :context="context"
         @edit-tile="onEditTile"
-        @remove-tile="onRemoveTile"
         @update-tiles="onUpdateTiles"
       >
         <template #slot-1>
@@ -409,11 +408,6 @@ const addTile = () => {
   })
 }
 
-const onRemoveTile = (tile: GridTile<TileDefinition>) => {
-  console.log('@remove-tile', tile)
-  dashboardConfig.value.tiles = dashboardConfig.value.tiles.filter((_, i) => i !== tile.id)
-}
-
 const onUpdateTiles = (tiles: TileConfig[]) => {
   console.log('@update-tiles', tiles)
   dashboardConfig.value.tiles = tiles
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
index 29f9519dc8..d11286e6b5 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
@@ -9,6 +9,7 @@
     <component
       :is="canEdit ? DraggableGridLayout : GridLayout"
       v-else
+      ref="gridLayoutRef"
       :grid-size="config.gridSize"
       :tile-height="config.tileHeight"
       :tiles="gridTiles"
@@ -44,9 +45,11 @@ import type { DashboardRendererContext, DashboardRendererContextInternal, GridTi
 import type { DashboardConfig, TileConfig, TileDefinition } from '@kong-ui-public/analytics-utilities'
 import DashboardTile from './DashboardTile.vue'
 import { computed, inject, ref } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
 import composables from '../composables'
 import GridLayout from './layout/GridLayout.vue'
 import DraggableGridLayout from './layout/DraggableGridLayout.vue'
+import type { DraggableGridLayoutExpose } from './layout/DraggableGridLayout.vue'
 import type { AnalyticsBridge, TimeRangeV4 } from '@kong-ui-public/analytics-utilities'
 import {
   DEFAULT_TILE_HEIGHT,
@@ -67,12 +70,12 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
   (e: 'edit-tile', tile: GridTile<TileDefinition>): void
-  (e: 'remove-tile', tile: GridTile<TileDefinition>): void
   (e: 'update-tiles', tiles: TileConfig[]): void
 }>()
 
 const { i18n } = composables.useI18n()
 const refreshCounter = ref(0)
+const gridLayoutRef = ref<ComponentPublicInstance<DraggableGridLayoutExpose> | null>(null)
 
 // Note: queryBridge is not directly used by the DashboardRenderer component.  It is required by many of the
 // subcomponents that get rendered in the dashboard, however.  Check for its existence here in order to catch
@@ -180,7 +183,9 @@ const onEditTile = (tile: GridTile<TileDefinition>) => {
 }
 
 const onRemoveTile = (tile: GridTile<TileDefinition>) => {
-  emit('remove-tile', tile)
+  if (gridLayoutRef.value) {
+    gridLayoutRef.value.removeWidget(tile.id)
+  }
 }
 
 const refreshTiles = () => {
diff --git a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
index 6cba4dd4e8..8b668cfccd 100644
--- a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
+++ b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
@@ -32,6 +32,10 @@ import type { GridSize, GridTile } from 'src/types'
 import 'gridstack/dist/gridstack.min.css'
 import 'gridstack/dist/gridstack-extra.min.css'
 
+export type DraggableGridLayoutExpose = {
+  removeWidget: (id: number | string) => void
+}
+
 const props = withDefaults(defineProps<{
   tiles: GridTile<T>[],
   gridSize: GridSize,
@@ -55,10 +59,10 @@ const makeTilesFromGridstackNodes = (items: GridStackNode[]) => {
       return {
         ...tile,
         layout: {
-          position: { col: item.x, row: item.y },
-          size: { cols: item.w, rows: item.h },
+          position: { col: Number(item.x), row: Number(item.y) },
+          size: { cols: Number(item.w), rows: Number(item.h) },
         },
-      } as GridTile<any>
+      } satisfies GridTile<T>
     }
     return tile
   })
@@ -122,6 +126,18 @@ watch(() => props.tiles, async (tiles) => {
   }
 }, { deep: true })
 
+const removeWidget = (id: number | string) => {
+  if (grid && gridContainer.value) {
+    const el = gridContainer.value.querySelector(`#tile-${id}`) as HTMLElement
+    if (el) {
+      grid.removeWidget(el)
+      grid.compact('compact', false)
+    }
+  }
+}
+
+defineExpose({ removeWidget })
+
 </script>
 
 <style lang="scss" scoped>

From 9d8f1457c198c9b8e0e791178df91906738287c7 Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Wed, 12 Feb 2025 16:56:57 -0800
Subject: [PATCH 15/22] fix: do not use tile prop directly - make a copy
 instead

---
 .../components/layout/DraggableGridLayout.vue | 63 +++++++++++--------
 1 file changed, 38 insertions(+), 25 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
index 8b668cfccd..78e63ab2e5 100644
--- a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
+++ b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
@@ -4,7 +4,7 @@
     class="grid-stack"
   >
     <div
-      v-for="tile in tiles"
+      v-for="tile in tilesRef"
       :id="`tile-${tile.id}`"
       :key="tile.id"
       class="grid-stack-item"
@@ -27,6 +27,7 @@
 <script lang='ts' setup generic="T">
 import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
 import { GridStack } from 'gridstack'
+import { useDebounceFn } from '@vueuse/core'
 import type { GridStackNode } from 'gridstack'
 import type { GridSize, GridTile } from 'src/types'
 import 'gridstack/dist/gridstack.min.css'
@@ -48,10 +49,11 @@ const emit = defineEmits<{
 }>()
 
 const gridContainer = ref<HTMLDivElement | null>(null)
+const tilesRef = ref<GridTile<any>[]>(props.tiles)
 let grid: GridStack | null = null
 
 const makeTilesFromGridstackNodes = (items: GridStackNode[]) => {
-  return props.tiles.map((tile) => {
+  return tilesRef.value.map((tile: GridTile<any>) => {
     const item = items.find(item => {
       return item.el?.id === `tile-${tile.id}`
     })
@@ -68,6 +70,19 @@ const makeTilesFromGridstackNodes = (items: GridStackNode[]) => {
   })
 }
 
+const removeTile = (items: GridStackNode[]) => {
+  return tilesRef.value.filter(tile => {
+    return !items.find(item => {
+      return item.el?.id === `tile-${tile.id}`
+    })
+  }) as GridTile<T>[]
+}
+
+const changeHandler = useDebounceFn((_: Event, items: GridStackNode[]) => {
+  const updatedTiles = makeTilesFromGridstackNodes(items)
+  emit('update-tiles', updatedTiles)
+}, 200)
+
 onMounted(() => {
   if (gridContainer.value) {
     grid = GridStack.init({
@@ -78,13 +93,10 @@ onMounted(() => {
       handle: '.tile-header',
 
     }, gridContainer.value)
-    grid.on('change', (_, items) => {
-      const updatedTiles = makeTilesFromGridstackNodes(items)
-      emit('update-tiles', updatedTiles)
-    })
-    grid.on('added', (_, items) => {
-      const updatedTiles = makeTilesFromGridstackNodes(items)
-      emit('update-tiles', updatedTiles)
+    grid.on('change', changeHandler)
+    grid.on('added', changeHandler)
+    grid.on('removed', (_, items) => {
+      tilesRef.value = removeTile(items)
     })
   }
 })
@@ -97,9 +109,10 @@ onUnmounted(() => {
 
 watch(() => props.tiles.length, async (newLen, oldLen) => {
   if (newLen > oldLen && grid) {
-    await nextTick()
     const tileToAdd = props.tiles.slice(oldLen)
     for (const tile of tileToAdd) {
+      tilesRef.value.push(tile)
+      await nextTick()
       grid.makeWidget(`#tile-${tile.id}`, {
         autoPosition: true,
         w: tile.layout.size.cols,
@@ -110,21 +123,21 @@ watch(() => props.tiles.length, async (newLen, oldLen) => {
   }
 })
 
-watch(() => props.tiles, async (tiles) => {
-  if (grid && gridContainer.value) {
-    for (const tile of tiles) {
-      const el = gridContainer.value.querySelector(`#tile-${tile.id}`) as HTMLElement
-      if (el) {
-        grid.update(el, {
-          x: tile.layout.position.col,
-          y: tile.layout.position.row,
-          w: tile.layout.size.cols,
-          h: tile.layout.size.rows,
-        })
-      }
-    }
-  }
-}, { deep: true })
+// watch(() => props.tiles, async (tiles) => {
+//   if (grid && gridContainer.value) {
+//     for (const tile of tiles) {
+//       const el = gridContainer.value.querySelector(`#tile-${tile.id}`) as HTMLElement
+//       if (el) {
+//         grid.update(el, {
+//           x: tile.layout.position.col,
+//           y: tile.layout.position.row,
+//           w: tile.layout.size.cols,
+//           h: tile.layout.size.rows,
+//         })
+//       }
+//     }
+//   }
+// }, { deep: true })
 
 const removeWidget = (id: number | string) => {
   if (grid && gridContainer.value) {

From 077197245973ed4b6b41c7697de1c11a0ed2a8d2 Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Wed, 12 Feb 2025 17:20:28 -0800
Subject: [PATCH 16/22] fix: remove commented out code

---
 .../components/layout/DraggableGridLayout.vue    | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
index 78e63ab2e5..623af56441 100644
--- a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
+++ b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
@@ -123,22 +123,6 @@ watch(() => props.tiles.length, async (newLen, oldLen) => {
   }
 })
 
-// watch(() => props.tiles, async (tiles) => {
-//   if (grid && gridContainer.value) {
-//     for (const tile of tiles) {
-//       const el = gridContainer.value.querySelector(`#tile-${tile.id}`) as HTMLElement
-//       if (el) {
-//         grid.update(el, {
-//           x: tile.layout.position.col,
-//           y: tile.layout.position.row,
-//           w: tile.layout.size.cols,
-//           h: tile.layout.size.rows,
-//         })
-//       }
-//     }
-//   }
-// }, { deep: true })
-
 const removeWidget = (id: number | string) => {
   if (grid && gridContainer.value) {
     const el = gridContainer.value.querySelector(`#tile-${id}`) as HTMLElement

From ebe6ced7a994dfc8ae724d97fbf6a8caa349941c Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Wed, 12 Feb 2025 22:02:54 -0800
Subject: [PATCH 17/22] fix: this might be the last one

---
 .../dashboard-renderer/sandbox/index.ts       |   9 +
 .../sandbox/pages/EditableDashboardDemo.vue   | 242 ++++++++++++++++++
 .../sandbox/pages/RendererDemo.vue            | 131 +---------
 .../components/layout/DraggableGridLayout.vue |  37 ++-
 4 files changed, 286 insertions(+), 133 deletions(-)
 create mode 100644 packages/analytics/dashboard-renderer/sandbox/pages/EditableDashboardDemo.vue

diff --git a/packages/analytics/dashboard-renderer/sandbox/index.ts b/packages/analytics/dashboard-renderer/sandbox/index.ts
index 5698f2ef3c..11c25d0f20 100644
--- a/packages/analytics/dashboard-renderer/sandbox/index.ts
+++ b/packages/analytics/dashboard-renderer/sandbox/index.ts
@@ -20,6 +20,11 @@ const router = createRouter({
       name: 'home',
       component: () => import('./pages/RendererDemo.vue'),
     },
+    {
+      path: '/editable',
+      name: 'editable',
+      component: () => import('./pages/EditableDashboardDemo.vue'),
+    },
     {
       path: '/',
       name: 'dynamic',
@@ -39,6 +44,10 @@ const appLinks: SandboxNavigationItem[] = ([
     name: 'Static Dashboard',
     to: { name: 'home' },
   },
+  {
+    name: 'Editable Dashboard',
+    to: { name: 'editable' },
+  },
   {
     name: 'Dynamic Dashboard',
     to: { name: 'dynamic' },
diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/EditableDashboardDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/EditableDashboardDemo.vue
new file mode 100644
index 0000000000..99219ae158
--- /dev/null
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/EditableDashboardDemo.vue
@@ -0,0 +1,242 @@
+<template>
+  <SandboxLayout
+    :links="appLinks"
+    title="Editable Dashboard"
+  >
+    <div class="sandbox-container">
+      <br>
+      <div style="display: flex; gap: 5px; margin: 5px;">
+        <KButton
+          appearance="primary"
+          size="small"
+          @click="refresh"
+        >
+          refresh
+        </KButton>
+        <KButton
+          size="small"
+          @click="addTile"
+        >
+          Add tile
+        </KButton>
+      </div>
+      <DashboardRenderer
+        ref="dashboardRendererRef"
+        can-edit
+        :config="dashboardConfig"
+        :context="context"
+        @edit-tile="onEditTile"
+        @update-tiles="onUpdateTiles"
+      >
+        <template #slot-1>
+          <div class="slot-container">
+            <h3>Custom Slot</h3>
+            <p>This is a slotted tile</p>
+          </div>
+        </template>
+        <template #slot-2>
+          <div class="slot-container">
+            <h3>Custom Slot 2</h3>
+            <p>This is another slotted tile</p>
+          </div>
+        </template>
+      </DashboardRenderer>
+    </div>
+  </SandboxLayout>
+</template>
+
+<script setup lang="ts">
+import type { DashboardRendererContext, GridTile } from '../../src'
+import { DashboardRenderer } from '../../src'
+import { inject, ref } from 'vue'
+import type {
+  DashboardConfig,
+  DashboardTileType,
+  ExploreAggregations,
+  TileConfig,
+  TileDefinition,
+} from '@kong-ui-public/analytics-utilities'
+import type { SandboxNavigationItem } from '@kong-ui-public/sandbox-layout'
+import { SandboxLayout } from '@kong-ui-public/sandbox-layout'
+import '@kong-ui-public/sandbox-layout/dist/style.css'
+
+const appLinks: SandboxNavigationItem[] = inject('app-links', [])
+
+const context: DashboardRendererContext = {
+  filters: [],
+  refreshInterval: 0,
+  editable: true,
+}
+
+const dashboardConfig = ref <DashboardConfig>({
+  gridSize: {
+    cols: 6,
+    rows: 7,
+  },
+  tileHeight: 167,
+  tiles: [
+    {
+      definition: {
+        chart: {
+          type: 'horizontal_bar',
+          chartTitle: 'This is a really long title lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+          allowCsvExport: true,
+        },
+        query: {
+          datasource: 'advanced',
+          dimensions: ['route'],
+          metrics: ['request_count'],
+          time_range: {
+            type: 'relative',
+            time_range: '1h',
+          },
+        },
+      },
+      layout: {
+        position: {
+          col: 0,
+          row: 0,
+        },
+        size: {
+          cols: 3,
+          rows: 2,
+        },
+      },
+    } satisfies TileConfig,
+    {
+      definition: {
+        chart: {
+          type: 'timeseries_line',
+          chartTitle: 'Timeseries line chart of mock data',
+          threshold: {
+            'request_count': 3200,
+          } as Record<ExploreAggregations, number>,
+        },
+        query: {
+          datasource: 'basic',
+          dimensions: ['time'],
+          time_range: {
+            type: 'absolute',
+            start: '2024-01-01',
+            end: '2024-02-01',
+          },
+        },
+      },
+      layout: {
+        position: {
+          col: 3,
+          row: 0,
+        },
+        size: {
+          cols: 3,
+          rows: 2,
+        },
+      },
+    } satisfies TileConfig,
+    {
+      definition: {
+        chart: {
+          type: 'timeseries_bar',
+          chartTitle: 'Timeseries bar chart of mock data',
+          stacked: true,
+        },
+        query: {
+          datasource: 'basic',
+          dimensions: ['time'],
+        },
+      },
+      layout: {
+        position: {
+          col: 0,
+          row: 3,
+        },
+        size: {
+          cols: 3,
+          rows: 2,
+        },
+      },
+    } satisfies TileConfig,
+  ],
+})
+
+const onEditTile = (tile: GridTile<TileDefinition>) => {
+  console.log('@edit-tile', tile)
+
+  const chartTypeToggleMap = {
+    timeseries_line: 'timeseries_bar',
+    timeseries_bar: 'timeseries_line',
+    horizontal_bar: 'vertical_bar',
+    vertical_bar: 'horizontal_bar',
+    gauge: 'gauge',
+    golden_signals: 'golden_signals',
+    slottable: 'slottable',
+    top_n: 'top_n',
+  }
+
+  dashboardConfig.value.tiles = dashboardConfig.value.tiles.map((t, i) => {
+
+    const newType = chartTypeToggleMap[t.definition.chart.type] || t.definition.chart.type
+
+    if (i === tile.id) {
+      return {
+        ...t,
+        definition: {
+          ...t.definition,
+          chart: {
+            ...t.definition.chart,
+            type: newType as DashboardTileType,
+            chartTitle: `This is a ${newType} chart`,
+          } as any,
+        },
+      }
+    }
+    return t
+  })
+}
+
+const dashboardRendererRef = ref<InstanceType<typeof DashboardRenderer> | null>(null)
+
+
+const refresh = () => {
+  dashboardRendererRef.value?.refresh()
+}
+
+const addTile = () => {
+  dashboardConfig.value.tiles.push({
+    definition: {
+      chart: {
+        type: 'timeseries_line',
+        chartTitle: 'Timeseries line chart of mock data',
+        threshold: {
+          'request_count': 3200,
+        } as Record<ExploreAggregations, number>,
+      },
+      query: {
+        datasource: 'basic',
+        dimensions: ['time'],
+        time_range: {
+          type: 'absolute',
+          start: '2024-01-01',
+          end: '2024-02-01',
+        },
+      },
+    },
+    layout: {
+      position: {
+        col: -1,
+        row: -1,
+      },
+      size: {
+        cols: 3,
+        rows: 2,
+        fitToContent: true,
+      },
+    },
+  })
+}
+
+const onUpdateTiles = (tiles: TileConfig[]) => {
+  console.log('@update-tiles', tiles)
+  dashboardConfig.value.tiles = tiles
+}
+</script>
diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
index 951f092a01..be86aba94b 100644
--- a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
@@ -10,27 +10,20 @@
         :label="isToggled ? 'Custom styling' : 'Normal styling'"
       />
       <br>
-      <KButton
-        appearance="primary"
-        size="small"
-        @click="refresh"
-      >
-        refresh
-      </KButton>
-      <KButton
-        size="small"
-        @click="addTile"
-      >
-        Add tile
-      </KButton>
+      <div style="display: flex; gap: 5px; margin: 5px;">
+        <KButton
+          appearance="primary"
+          size="small"
+          @click="refresh"
+        >
+          refresh
+        </KButton>
+      </div>
       <DashboardRenderer
         ref="dashboardRendererRef"
-        can-edit
         :class="{ 'custom-styling': isToggled}"
         :config="dashboardConfig"
         :context="context"
-        @edit-tile="onEditTile"
-        @update-tiles="onUpdateTiles"
       >
         <template #slot-1>
           <div class="slot-container">
@@ -50,14 +43,13 @@
 </template>
 
 <script setup lang="ts">
-import type { DashboardRendererContext, GridTile } from '../../src'
+import type { DashboardRendererContext } from '../../src'
 import { DashboardRenderer } from '../../src'
 import { inject, ref } from 'vue'
 import type {
   DashboardConfig,
   ExploreAggregations,
   TileConfig,
-  TileDefinition,
 } from '@kong-ui-public/analytics-utilities'
 import type { SandboxNavigationItem } from '@kong-ui-public/sandbox-layout'
 import { SandboxLayout } from '@kong-ui-public/sandbox-layout'
@@ -298,120 +290,17 @@ const dashboardConfig = ref <DashboardConfig>({
         },
       },
     } satisfies TileConfig,
-    {
-      definition: {
-        chart: {
-          type: 'timeseries_line',
-          chartTitle: 'Timeseries line chart of mock data',
-          threshold: {
-            'request_count': 3200,
-          } as Record<ExploreAggregations, number>,
-        },
-        query: {
-          datasource: 'basic',
-          dimensions: ['time'],
-          time_range: {
-            type: 'absolute',
-            start: '2024-01-01',
-            end: '2024-02-01',
-          },
-        },
-      },
-      layout: {
-        position: {
-          col: 0,
-          row: 7,
-        },
-        size: {
-          cols: 3,
-          rows: 2,
-        },
-      },
-    } satisfies TileConfig,
-    {
-      definition: {
-        chart: {
-          type: 'timeseries_line',
-          chartTitle: 'Timeseries line chart of mock data',
-          threshold: {
-            'request_count': 3200,
-          } as Record<ExploreAggregations, number>,
-        },
-        query: {
-          datasource: 'basic',
-          dimensions: ['time'],
-          time_range: {
-            type: 'absolute',
-            start: '2024-01-01',
-            end: '2024-02-01',
-          },
-        },
-      },
-      layout: {
-        position: {
-          col: 0,
-          row: 9,
-        },
-        size: {
-          cols: 3,
-          rows: 2,
-        },
-      },
-    } satisfies TileConfig,
   ],
 })
 
 const isToggled = ref(false)
 
-const onEditTile = (tile: GridTile<TileDefinition>) => {
-  console.log('@edit-tile', tile)
-}
-
 const dashboardRendererRef = ref<InstanceType<typeof DashboardRenderer> | null>(null)
 
 
 const refresh = () => {
   dashboardRendererRef.value?.refresh()
 }
-
-const addTile = () => {
-  dashboardConfig.value.tiles.push({
-    definition: {
-      chart: {
-        type: 'timeseries_line',
-        chartTitle: 'Timeseries line chart of mock data',
-        threshold: {
-          'request_count': 3200,
-        } as Record<ExploreAggregations, number>,
-      },
-      query: {
-        datasource: 'basic',
-        dimensions: ['time'],
-        time_range: {
-          type: 'absolute',
-          start: '2024-01-01',
-          end: '2024-02-01',
-        },
-      },
-    },
-    layout: {
-      position: {
-        col: -1,
-        row: -1,
-      },
-      size: {
-        cols: 3,
-        rows: 2,
-        fitToContent: true,
-      },
-    },
-  })
-}
-
-const onUpdateTiles = (tiles: TileConfig[]) => {
-  console.log('@update-tiles', tiles)
-  dashboardConfig.value.tiles = tiles
-}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
index 623af56441..07c29df790 100644
--- a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
+++ b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
@@ -24,7 +24,7 @@
   </div>
 </template>
 
-<script lang='ts' setup generic="T">
+<script lang='ts' setup>
 import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
 import { GridStack } from 'gridstack'
 import { useDebounceFn } from '@vueuse/core'
@@ -32,20 +32,21 @@ import type { GridStackNode } from 'gridstack'
 import type { GridSize, GridTile } from 'src/types'
 import 'gridstack/dist/gridstack.min.css'
 import 'gridstack/dist/gridstack-extra.min.css'
+import type { TileDefinition } from '@kong-ui-public/analytics-utilities'
 
 export type DraggableGridLayoutExpose = {
   removeWidget: (id: number | string) => void
 }
 
 const props = withDefaults(defineProps<{
-  tiles: GridTile<T>[],
+  tiles: GridTile<TileDefinition>[],
   gridSize: GridSize,
   tileHeight?: number,
 }>(), {
   tileHeight: 200,
 })
 const emit = defineEmits<{
-  (e: 'update-tiles', tiles: GridTile<T>[]): void,
+  (e: 'update-tiles', tiles: GridTile<TileDefinition>[]): void,
 }>()
 
 const gridContainer = ref<HTMLDivElement | null>(null)
@@ -64,7 +65,7 @@ const makeTilesFromGridstackNodes = (items: GridStackNode[]) => {
           position: { col: Number(item.x), row: Number(item.y) },
           size: { cols: Number(item.w), rows: Number(item.h) },
         },
-      } satisfies GridTile<T>
+      } satisfies GridTile<TileDefinition>
     }
     return tile
   })
@@ -75,7 +76,7 @@ const removeTile = (items: GridStackNode[]) => {
     return !items.find(item => {
       return item.el?.id === `tile-${tile.id}`
     })
-  }) as GridTile<T>[]
+  }) as GridTile<TileDefinition>[]
 }
 
 const changeHandler = useDebounceFn((_: Event, items: GridStackNode[]) => {
@@ -107,6 +108,16 @@ onUnmounted(() => {
   }
 })
 
+const removeWidget = (id: number | string) => {
+  if (grid && gridContainer.value) {
+    const el = gridContainer.value.querySelector(`#tile-${id}`) as HTMLElement
+    if (el) {
+      grid.removeWidget(el)
+      grid.compact('compact', false)
+    }
+  }
+}
+
 watch(() => props.tiles.length, async (newLen, oldLen) => {
   if (newLen > oldLen && grid) {
     const tileToAdd = props.tiles.slice(oldLen)
@@ -123,15 +134,17 @@ watch(() => props.tiles.length, async (newLen, oldLen) => {
   }
 })
 
-const removeWidget = (id: number | string) => {
-  if (grid && gridContainer.value) {
-    const el = gridContainer.value.querySelector(`#tile-${id}`) as HTMLElement
-    if (el) {
-      grid.removeWidget(el)
-      grid.compact('compact', false)
+// Gridstack widgets are driven by a copy of props.tiles.
+// If the meta of a tile changes, we need to update the copy to keep it in sync.
+watch(() => props.tiles, (newTiles, oldTiles) => {
+  if (newTiles.length === oldTiles.length) {
+    for (const [i, tile] of newTiles.entries()) {
+      if (JSON.stringify(tile.meta) !== JSON.stringify(tilesRef.value[i].meta)) {
+        tilesRef.value[i].meta = tile.meta
+      }
     }
   }
-}
+})
 
 defineExpose({ removeWidget })
 

From 8ffa0000acc4a35db3d331128968d57c56032429 Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Wed, 12 Feb 2025 22:17:49 -0800
Subject: [PATCH 18/22] fix: make generic again

---
 .../src/components/layout/DraggableGridLayout.vue     | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
index 07c29df790..90f8c59068 100644
--- a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
+++ b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
@@ -24,7 +24,7 @@
   </div>
 </template>
 
-<script lang='ts' setup>
+<script lang='ts' setup generic="T">
 import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
 import { GridStack } from 'gridstack'
 import { useDebounceFn } from '@vueuse/core'
@@ -32,21 +32,20 @@ import type { GridStackNode } from 'gridstack'
 import type { GridSize, GridTile } from 'src/types'
 import 'gridstack/dist/gridstack.min.css'
 import 'gridstack/dist/gridstack-extra.min.css'
-import type { TileDefinition } from '@kong-ui-public/analytics-utilities'
 
 export type DraggableGridLayoutExpose = {
   removeWidget: (id: number | string) => void
 }
 
 const props = withDefaults(defineProps<{
-  tiles: GridTile<TileDefinition>[],
+  tiles: GridTile<T>[],
   gridSize: GridSize,
   tileHeight?: number,
 }>(), {
   tileHeight: 200,
 })
 const emit = defineEmits<{
-  (e: 'update-tiles', tiles: GridTile<TileDefinition>[]): void,
+  (e: 'update-tiles', tiles: GridTile<T>[]): void,
 }>()
 
 const gridContainer = ref<HTMLDivElement | null>(null)
@@ -65,7 +64,7 @@ const makeTilesFromGridstackNodes = (items: GridStackNode[]) => {
           position: { col: Number(item.x), row: Number(item.y) },
           size: { cols: Number(item.w), rows: Number(item.h) },
         },
-      } satisfies GridTile<TileDefinition>
+      } satisfies GridTile<T>
     }
     return tile
   })
@@ -76,7 +75,7 @@ const removeTile = (items: GridStackNode[]) => {
     return !items.find(item => {
       return item.el?.id === `tile-${tile.id}`
     })
-  }) as GridTile<TileDefinition>[]
+  })
 }
 
 const changeHandler = useDebounceFn((_: Event, items: GridStackNode[]) => {

From 9113a8a44ceabc76753b28f9803ad22c7ef95e12 Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Thu, 13 Feb 2025 10:00:38 -0800
Subject: [PATCH 19/22] fix: track unique IDs for tiles

---
 .../src/dashboardSchema.ts                    |  4 ++
 .../sandbox/pages/EditableDashboardDemo.vue   | 18 +++---
 .../src/components/DashboardRenderer.vue      | 11 +++-
 .../components/layout/DraggableGridLayout.vue | 55 ++++++++++---------
 4 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/packages/analytics/analytics-utilities/src/dashboardSchema.ts b/packages/analytics/analytics-utilities/src/dashboardSchema.ts
index 89897cf0a4..1ae6c8c38b 100644
--- a/packages/analytics/analytics-utilities/src/dashboardSchema.ts
+++ b/packages/analytics/analytics-utilities/src/dashboardSchema.ts
@@ -496,6 +496,10 @@ export const tileConfigSchema = {
   properties: {
     definition: tileDefinitionSchema,
     layout: tileLayoutSchema,
+    id: {
+      type: 'string',
+      description: 'Unique identifier for the tile.  If not provided, one will be generated.',
+    },
   },
   required: ['definition', 'layout'],
   additionalProperties: false,
diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/EditableDashboardDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/EditableDashboardDemo.vue
index 99219ae158..16d3744efd 100644
--- a/packages/analytics/dashboard-renderer/sandbox/pages/EditableDashboardDemo.vue
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/EditableDashboardDemo.vue
@@ -76,6 +76,7 @@ const dashboardConfig = ref <DashboardConfig>({
   tileHeight: 167,
   tiles: [
     {
+      id: crypto.randomUUID(),
       definition: {
         chart: {
           type: 'horizontal_bar',
@@ -104,6 +105,7 @@ const dashboardConfig = ref <DashboardConfig>({
       },
     } satisfies TileConfig,
     {
+      id: crypto.randomUUID(),
       definition: {
         chart: {
           type: 'timeseries_line',
@@ -134,6 +136,7 @@ const dashboardConfig = ref <DashboardConfig>({
       },
     } satisfies TileConfig,
     {
+      id: crypto.randomUUID(),
       definition: {
         chart: {
           type: 'timeseries_bar',
@@ -173,11 +176,11 @@ const onEditTile = (tile: GridTile<TileDefinition>) => {
     top_n: 'top_n',
   }
 
-  dashboardConfig.value.tiles = dashboardConfig.value.tiles.map((t, i) => {
+  dashboardConfig.value.tiles = dashboardConfig.value.tiles.map(t => {
 
     const newType = chartTypeToggleMap[t.definition.chart.type] || t.definition.chart.type
 
-    if (i === tile.id) {
+    if (t.id === tile.id) {
       return {
         ...t,
         definition: {
@@ -200,12 +203,14 @@ const dashboardRendererRef = ref<InstanceType<typeof DashboardRenderer> | null>(
 const refresh = () => {
   dashboardRendererRef.value?.refresh()
 }
-
+let last = 0
 const addTile = () => {
+  last = (last + 1) % 2
   dashboardConfig.value.tiles.push({
+    id: crypto.randomUUID(),
     definition: {
       chart: {
-        type: 'timeseries_line',
+        type: ['timeseries_line', 'timeseries_bar'][last] as any,
         chartTitle: 'Timeseries line chart of mock data',
         threshold: {
           'request_count': 3200,
@@ -223,13 +228,12 @@ const addTile = () => {
     },
     layout: {
       position: {
-        col: -1,
-        row: -1,
+        col: 0,
+        row: 0,
       },
       size: {
         cols: 3,
         rows: 2,
-        fitToContent: true,
       },
     },
   })
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
index d11286e6b5..a3ec6b0fa1 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
@@ -141,11 +141,19 @@ const gridTiles = computed(() => {
       }
     }
 
+    if (props.canEdit && !tile.id) {
+      console.warn(
+        'No id provided for tile. One will be generated automatically,',
+        'however tracking changes to this tile may not work as expected.',
+        tile,
+      )
+    }
+
     return {
       layout: tile.layout,
       meta: tileMeta,
       // Add a unique key to each tile internally.
-      id: i,
+      id: tile.id ?? crypto.randomUUID(),
     } as GridTile<TileDefinition>
   })
 })
@@ -195,6 +203,7 @@ const refreshTiles = () => {
 const handleUpdateTiles = (tiles: GridTile<TileDefinition>[]) => {
   const updatedTiles = tiles.map(tile => {
     return {
+      id: tile.id,
       layout: tile.layout,
       definition: tile.meta,
     } as TileConfig
diff --git a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
index 90f8c59068..33d2e50eef 100644
--- a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
+++ b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
@@ -11,8 +11,8 @@
       :gs-h="tile.layout.size.rows"
       :gs-lazy-load="true"
       :gs-w="tile.layout.size.cols"
-      :gs-x="tile.layout.position.col >= 0 ? tile.layout.position.col : undefined"
-      :gs-y="tile.layout.position.row >= 0 ? tile.layout.position.row : undefined"
+      :gs-x="tile.layout.position.col"
+      :gs-y="tile.layout.position.row"
     >
       <div class="grid-stack-item-content">
         <slot
@@ -27,8 +27,7 @@
 <script lang='ts' setup generic="T">
 import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
 import { GridStack } from 'gridstack'
-import { useDebounceFn } from '@vueuse/core'
-import type { GridStackNode } from 'gridstack'
+import type { GridItemHTMLElement, GridStackNode } from 'gridstack'
 import type { GridSize, GridTile } from 'src/types'
 import 'gridstack/dist/gridstack.min.css'
 import 'gridstack/dist/gridstack-extra.min.css'
@@ -52,17 +51,17 @@ const gridContainer = ref<HTMLDivElement | null>(null)
 const tilesRef = ref<GridTile<any>[]>(props.tiles)
 let grid: GridStack | null = null
 
-const makeTilesFromGridstackNodes = (items: GridStackNode[]) => {
+const makeTilesFromGridItemHtmlElements = (items: GridItemHTMLElement[]) => {
   return tilesRef.value.map((tile: GridTile<any>) => {
     const item = items.find(item => {
-      return item.el?.id === `tile-${tile.id}`
+      return item.id === `tile-${tile.id}`
     })
     if (item) {
       return {
         ...tile,
         layout: {
-          position: { col: Number(item.x), row: Number(item.y) },
-          size: { cols: Number(item.w), rows: Number(item.h) },
+          position: { col: Number(item.gridstackNode?.x), row: Number(item.gridstackNode?.y) },
+          size: { cols: Number(item.gridstackNode?.w), rows: Number(item.gridstackNode?.h) },
         },
       } satisfies GridTile<T>
     }
@@ -70,6 +69,20 @@ const makeTilesFromGridstackNodes = (items: GridStackNode[]) => {
   })
 }
 
+const updateTiles = () => {
+  if (grid) {
+    const items = grid.getGridItems()
+    tilesRef.value = makeTilesFromGridItemHtmlElements(items)
+    emit('update-tiles', tilesRef.value)
+  }
+}
+
+const removeHandler = (_: Event, items: GridStackNode[]) => {
+  tilesRef.value = removeTile(items)
+  emit('update-tiles', tilesRef.value)
+}
+
+
 const removeTile = (items: GridStackNode[]) => {
   return tilesRef.value.filter(tile => {
     return !items.find(item => {
@@ -78,11 +91,6 @@ const removeTile = (items: GridStackNode[]) => {
   })
 }
 
-const changeHandler = useDebounceFn((_: Event, items: GridStackNode[]) => {
-  const updatedTiles = makeTilesFromGridstackNodes(items)
-  emit('update-tiles', updatedTiles)
-}, 200)
-
 onMounted(() => {
   if (gridContainer.value) {
     grid = GridStack.init({
@@ -93,11 +101,9 @@ onMounted(() => {
       handle: '.tile-header',
 
     }, gridContainer.value)
-    grid.on('change', changeHandler)
-    grid.on('added', changeHandler)
-    grid.on('removed', (_, items) => {
-      tilesRef.value = removeTile(items)
-    })
+    grid.on('change', updateTiles)
+    grid.on('added', updateTiles)
+    grid.on('removed', removeHandler)
   }
 })
 
@@ -107,12 +113,11 @@ onUnmounted(() => {
   }
 })
 
-const removeWidget = (id: number | string) => {
+const removeWidget = async (id: number | string) => {
   if (grid && gridContainer.value) {
     const el = gridContainer.value.querySelector(`#tile-${id}`) as HTMLElement
     if (el) {
       grid.removeWidget(el)
-      grid.compact('compact', false)
     }
   }
 }
@@ -127,7 +132,6 @@ watch(() => props.tiles.length, async (newLen, oldLen) => {
         autoPosition: true,
         w: tile.layout.size.cols,
         h: tile.layout.size.rows,
-        lazyLoad: true,
       })
     }
   }
@@ -137,11 +141,12 @@ watch(() => props.tiles.length, async (newLen, oldLen) => {
 // If the meta of a tile changes, we need to update the copy to keep it in sync.
 watch(() => props.tiles, (newTiles, oldTiles) => {
   if (newTiles.length === oldTiles.length) {
-    for (const [i, tile] of newTiles.entries()) {
-      if (JSON.stringify(tile.meta) !== JSON.stringify(tilesRef.value[i].meta)) {
-        tilesRef.value[i].meta = tile.meta
+    tilesRef.value.forEach((tile, i) => {
+      const found = newTiles.find(t => t.id === tile.id)
+      if (found) {
+        tilesRef.value[i].meta = found.meta
       }
-    }
+    })
   }
 })
 

From d7b198477e6332d94fbb65b90a07be365cb351e6 Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Thu, 13 Feb 2025 10:35:35 -0800
Subject: [PATCH 20/22] fix: use map to track tiles internally

---
 .../components/layout/DraggableGridLayout.vue | 50 ++++++++++---------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
index 33d2e50eef..b1b19e3d60 100644
--- a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
+++ b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
@@ -4,8 +4,8 @@
     class="grid-stack"
   >
     <div
-      v-for="tile in tilesRef"
-      :id="`tile-${tile.id}`"
+      v-for="tile in tilesRef.values()"
+      :id="`${tile.id}`"
       :key="tile.id"
       class="grid-stack-item"
       :gs-h="tile.layout.size.rows"
@@ -48,13 +48,16 @@ const emit = defineEmits<{
 }>()
 
 const gridContainer = ref<HTMLDivElement | null>(null)
-const tilesRef = ref<GridTile<any>[]>(props.tiles)
+//const tilesRef = ref<GridTile<any>[]>(props.tiles)
+
+const tilesRef = ref<Map<string, GridTile<any>>>(new Map(props.tiles.map(t => [`${t.id}`, t])))
+
 let grid: GridStack | null = null
 
 const makeTilesFromGridItemHtmlElements = (items: GridItemHTMLElement[]) => {
-  return tilesRef.value.map((tile: GridTile<any>) => {
+  return Array.from(tilesRef.value.values()).map((tile: GridTile<any>) => {
     const item = items.find(item => {
-      return item.id === `tile-${tile.id}`
+      return item.id === `${tile.id}`
     })
     if (item) {
       return {
@@ -72,23 +75,19 @@ const makeTilesFromGridItemHtmlElements = (items: GridItemHTMLElement[]) => {
 const updateTiles = () => {
   if (grid) {
     const items = grid.getGridItems()
-    tilesRef.value = makeTilesFromGridItemHtmlElements(items)
-    emit('update-tiles', tilesRef.value)
+    const updates = makeTilesFromGridItemHtmlElements(items)
+    updates.forEach((tile, i) => {
+      tilesRef.value.set(`${tile.id}`, tile)
+    })
+    emit('update-tiles', Array.from(tilesRef.value.values()))
   }
 }
 
 const removeHandler = (_: Event, items: GridStackNode[]) => {
-  tilesRef.value = removeTile(items)
-  emit('update-tiles', tilesRef.value)
-}
-
-
-const removeTile = (items: GridStackNode[]) => {
-  return tilesRef.value.filter(tile => {
-    return !items.find(item => {
-      return item.el?.id === `tile-${tile.id}`
-    })
+  items.forEach(item => {
+    tilesRef.value.delete(`${item.el?.id}`)
   })
+  emit('update-tiles', Array.from(tilesRef.value.values()))
 }
 
 onMounted(() => {
@@ -115,7 +114,7 @@ onUnmounted(() => {
 
 const removeWidget = async (id: number | string) => {
   if (grid && gridContainer.value) {
-    const el = gridContainer.value.querySelector(`#tile-${id}`) as HTMLElement
+    const el = gridContainer.value.querySelector(`#${id}`) as HTMLElement
     if (el) {
       grid.removeWidget(el)
     }
@@ -126,9 +125,9 @@ watch(() => props.tiles.length, async (newLen, oldLen) => {
   if (newLen > oldLen && grid) {
     const tileToAdd = props.tiles.slice(oldLen)
     for (const tile of tileToAdd) {
-      tilesRef.value.push(tile)
+      tilesRef.value.set(`${tile.id}`, tile)
       await nextTick()
-      grid.makeWidget(`#tile-${tile.id}`, {
+      grid.makeWidget(`#${tile.id}`, {
         autoPosition: true,
         w: tile.layout.size.cols,
         h: tile.layout.size.rows,
@@ -141,10 +140,13 @@ watch(() => props.tiles.length, async (newLen, oldLen) => {
 // If the meta of a tile changes, we need to update the copy to keep it in sync.
 watch(() => props.tiles, (newTiles, oldTiles) => {
   if (newTiles.length === oldTiles.length) {
-    tilesRef.value.forEach((tile, i) => {
-      const found = newTiles.find(t => t.id === tile.id)
-      if (found) {
-        tilesRef.value[i].meta = found.meta
+    newTiles.forEach(tile => {
+      const current = tilesRef.value.get(`${tile.id}`)
+      if (current) {
+        tilesRef.value.set(`${tile.id}`, {
+          ...current,
+          meta: tile.meta,
+        })
       }
     })
   }

From 869eaba40b2f5f6190b8d04f70b9b2a7444b433d Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Thu, 13 Feb 2025 11:01:52 -0800
Subject: [PATCH 21/22] fix: use custom attribute as selector fix component
 test

---
 .../src/components/DashboardRenderer.cy.ts    |  4 ++++
 .../components/layout/DraggableGridLayout.vue | 19 +++++++++++--------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.cy.ts b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.cy.ts
index 8d55ca6443..1f33c2db16 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.cy.ts
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.cy.ts
@@ -603,6 +603,7 @@ describe('<DashboardRenderer />', () => {
         tileHeight: 167,
         tiles: [
           {
+            id: 0,
             definition: {
               chart: {
                 type: 'timeseries_line',
@@ -639,6 +640,7 @@ describe('<DashboardRenderer />', () => {
             },
           } as unknown as TileConfig, // TODO: MA-2987: Remove default datasource concept and associated tests.
           {
+            id: 1,
             definition: {
               chart: {
                 type: 'timeseries_line',
@@ -672,6 +674,7 @@ describe('<DashboardRenderer />', () => {
             },
           } as unknown as TileConfig, // TODO: MA-2987: Remove default datasource concept and associated tests.
           {
+            id: 2,
             definition: {
               chart: {
                 type: 'timeseries_line',
@@ -699,6 +702,7 @@ describe('<DashboardRenderer />', () => {
             },
           } as unknown as TileConfig, // TODO: MA-2987: Remove default datasource concept and associated tests.
           {
+            id: 3,
             definition: {
               chart: {
                 type: 'top_n',
diff --git a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
index b1b19e3d60..b6ead68d40 100644
--- a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
+++ b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
@@ -5,9 +5,9 @@
   >
     <div
       v-for="tile in tilesRef.values()"
-      :id="`${tile.id}`"
       :key="tile.id"
       class="grid-stack-item"
+      :data-id="`${tile.id}`"
       :gs-h="tile.layout.size.rows"
       :gs-lazy-load="true"
       :gs-w="tile.layout.size.cols"
@@ -48,16 +48,19 @@ const emit = defineEmits<{
 }>()
 
 const gridContainer = ref<HTMLDivElement | null>(null)
-//const tilesRef = ref<GridTile<any>[]>(props.tiles)
 
 const tilesRef = ref<Map<string, GridTile<any>>>(new Map(props.tiles.map(t => [`${t.id}`, t])))
 
 let grid: GridStack | null = null
 
+const makeSelector = (id: number | string) => {
+  return `[data-id="${id}"]`
+}
+
 const makeTilesFromGridItemHtmlElements = (items: GridItemHTMLElement[]) => {
   return Array.from(tilesRef.value.values()).map((tile: GridTile<any>) => {
     const item = items.find(item => {
-      return item.id === `${tile.id}`
+      return item.getAttribute('data-id') === `${tile.id}`
     })
     if (item) {
       return {
@@ -76,7 +79,7 @@ const updateTiles = () => {
   if (grid) {
     const items = grid.getGridItems()
     const updates = makeTilesFromGridItemHtmlElements(items)
-    updates.forEach((tile, i) => {
+    updates.forEach((tile) => {
       tilesRef.value.set(`${tile.id}`, tile)
     })
     emit('update-tiles', Array.from(tilesRef.value.values()))
@@ -85,7 +88,7 @@ const updateTiles = () => {
 
 const removeHandler = (_: Event, items: GridStackNode[]) => {
   items.forEach(item => {
-    tilesRef.value.delete(`${item.el?.id}`)
+    tilesRef.value.delete(`${item.el?.getAttribute('data-id')}`)
   })
   emit('update-tiles', Array.from(tilesRef.value.values()))
 }
@@ -114,7 +117,7 @@ onUnmounted(() => {
 
 const removeWidget = async (id: number | string) => {
   if (grid && gridContainer.value) {
-    const el = gridContainer.value.querySelector(`#${id}`) as HTMLElement
+    const el = gridContainer.value.querySelector(makeSelector(id)) as HTMLElement
     if (el) {
       grid.removeWidget(el)
     }
@@ -127,7 +130,7 @@ watch(() => props.tiles.length, async (newLen, oldLen) => {
     for (const tile of tileToAdd) {
       tilesRef.value.set(`${tile.id}`, tile)
       await nextTick()
-      grid.makeWidget(`#${tile.id}`, {
+      grid.makeWidget(makeSelector(tile.id), {
         autoPosition: true,
         w: tile.layout.size.cols,
         h: tile.layout.size.rows,
@@ -150,7 +153,7 @@ watch(() => props.tiles, (newTiles, oldTiles) => {
       }
     })
   }
-})
+}, { deep: true })
 
 defineExpose({ removeWidget })
 

From 63a656c1241246a59cf04afef2fab5f96ad1a735 Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Thu, 13 Feb 2025 13:08:33 -0800
Subject: [PATCH 22/22] fix: comments

---
 .../sandbox/pages/DynamicDashboardDemo.vue           |  2 +-
 .../sandbox/pages/EditableDashboardDemo.vue          |  1 -
 .../sandbox/pages/RendererDemo.vue                   |  1 -
 .../src/components/DashboardRenderer.vue             | 12 ++++--------
 .../src/components/DashboardTile.vue                 |  7 +++----
 .../src/components/layout/DraggableGridLayout.vue    |  2 +-
 6 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/DynamicDashboardDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/DynamicDashboardDemo.vue
index 5e12fe1e51..ffde761832 100644
--- a/packages/analytics/dashboard-renderer/sandbox/pages/DynamicDashboardDemo.vue
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/DynamicDashboardDemo.vue
@@ -16,7 +16,6 @@
     <div class="sandbox-container">
       <DashboardRenderer
         v-if="definition.type === ValidationResultType.Success"
-        can-edit
         :config="definition.data"
         :context="context"
         draggable
@@ -172,6 +171,7 @@ const context: DashboardRendererContext = {
     type: 'relative',
     time_range: '24h',
   },
+  editable: true,
 }
 
 const handleUpdateTiles = (tiles: any) => {
diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/EditableDashboardDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/EditableDashboardDemo.vue
index 16d3744efd..4d8ddfed3c 100644
--- a/packages/analytics/dashboard-renderer/sandbox/pages/EditableDashboardDemo.vue
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/EditableDashboardDemo.vue
@@ -22,7 +22,6 @@
       </div>
       <DashboardRenderer
         ref="dashboardRendererRef"
-        can-edit
         :config="dashboardConfig"
         :context="context"
         @edit-tile="onEditTile"
diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
index be86aba94b..58124da3ab 100644
--- a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
+++ b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
@@ -60,7 +60,6 @@ const appLinks: SandboxNavigationItem[] = inject('app-links', [])
 const context: DashboardRendererContext = {
   filters: [],
   refreshInterval: 0,
-  editable: true,
 }
 
 const dashboardConfig = ref <DashboardConfig>({
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
index a3ec6b0fa1..8c098576a0 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
@@ -7,7 +7,7 @@
       {{ i18n.t('renderer.noQueryBridge') }}
     </KAlert>
     <component
-      :is="canEdit ? DraggableGridLayout : GridLayout"
+      :is="context.editable ? DraggableGridLayout : GridLayout"
       v-else
       ref="gridLayoutRef"
       :grid-size="config.gridSize"
@@ -27,7 +27,6 @@
           class="tile-container"
           :context="mergedContext"
           :definition="tile.meta"
-          :editable="canEdit"
           :height="tile.layout.size.rows * (config.tileHeight || DEFAULT_TILE_HEIGHT) + parseInt(KUI_SPACE_70, 10)"
           :query-ready="queryReady"
           :refresh-counter="refreshCounter"
@@ -60,13 +59,10 @@ import {
 import { useAnalyticsConfigStore } from '@kong-ui-public/analytics-config-store'
 import { KUI_SPACE_70 } from '@kong/design-tokens'
 
-const props = withDefaults(defineProps<{
+const props = defineProps<{
   context: DashboardRendererContext,
   config: DashboardConfig,
-  canEdit?: boolean,
-}>(), {
-  canEdit: false,
-})
+}>()
 
 const emit = defineEmits<{
   (e: 'edit-tile', tile: GridTile<TileDefinition>): void
@@ -141,7 +137,7 @@ const gridTiles = computed(() => {
       }
     }
 
-    if (props.canEdit && !tile.id) {
+    if (props.context.editable && !tile.id) {
       console.warn(
         'No id provided for tile. One will be generated automatically,',
         'however tracking changes to this tile may not work as expected.',
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
index 9d425b5590..ccf12ab911 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="tile-boundary"
+    :class="{ 'editable': context.editable }"
     :data-testid="`tile-${tileId}`"
   >
     <div
@@ -68,7 +69,7 @@
               </span>
             </KDropdownItem>
             <KDropdownItem
-              v-if="editable"
+              v-if="context.editable"
               :data-testid="`remove-tile-${tileId}`"
               @click="removeTile"
             >
@@ -134,10 +135,8 @@ const props = withDefaults(defineProps<{
   queryReady: boolean,
   refreshCounter: number,
   tileId: string | number,
-  editable?: boolean,
 }>(), {
   height: DEFAULT_TILE_HEIGHT,
-  editable: false,
 })
 
 const emit = defineEmits<{
@@ -265,7 +264,7 @@ const exportCsv = () => {
   height: v-bind('`${height}px`');
   overflow: hidden;
 
-  &:hover {
+  &.editable:hover {
     .tile-header {
       background: $kui-color-background-neutral-weakest;
     }
diff --git a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
index b6ead68d40..6dc309c50e 100644
--- a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
+++ b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
@@ -115,7 +115,7 @@ onUnmounted(() => {
   }
 })
 
-const removeWidget = async (id: number | string) => {
+const removeWidget = (id: number | string) => {
   if (grid && gridContainer.value) {
     const el = gridContainer.value.querySelector(makeSelector(id)) as HTMLElement
     if (el) {