From 68849b347c2a91d41e1b659aab55847bacacd41c Mon Sep 17 00:00:00 2001
From: Hannah Mudge <hannah.wright@elastic.co>
Date: Thu, 12 Dec 2024 14:33:45 -0700
Subject: [PATCH] Undo grid changes

---
 examples/grid_example/public/app.tsx          |  4 ++--
 .../public/serialized_grid_layout.ts          | 20 ++++++++++++++-----
 .../grid/utils/resolve_grid_row.ts            |  8 ++++----
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/examples/grid_example/public/app.tsx b/examples/grid_example/public/app.tsx
index 1f8e11a0eba2f..1a44d2cb4f8c1 100644
--- a/examples/grid_example/public/app.tsx
+++ b/examples/grid_example/public/app.tsx
@@ -250,8 +250,8 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
             layout={currentLayout}
             gridSettings={{
               gutterSize: DASHBOARD_MARGIN_SIZE,
-              rowHeight: 100,
-              columnCount: 8,
+              rowHeight: DASHBOARD_GRID_HEIGHT,
+              columnCount: DASHBOARD_GRID_COLUMN_COUNT,
             }}
             renderPanelContents={renderBasicPanel}
             onLayoutChange={(newLayout) => {
diff --git a/examples/grid_example/public/serialized_grid_layout.ts b/examples/grid_example/public/serialized_grid_layout.ts
index cf53dce49a88d..3e40380d91ac3 100644
--- a/examples/grid_example/public/serialized_grid_layout.ts
+++ b/examples/grid_example/public/serialized_grid_layout.ts
@@ -26,10 +26,20 @@ export function setSerializedGridLayout(state: MockSerializedDashboardState) {
 
 const initialState: MockSerializedDashboardState = {
   panels: {
-    panel1: { id: 'panel1', gridData: { i: 'panel1', x: 0, y: 0, w: 4, h: 3, row: 0 } },
-    panel2: { id: 'panel2', gridData: { i: 'panel2', x: 0, y: 3, w: 4, h: 2, row: 0 } },
-    panel3: { id: 'panel3', gridData: { i: 'panel3', x: 0, y: 5, w: 8, h: 1, row: 0 } },
-    panel4: { id: 'panel4', gridData: { i: 'panel4', x: 4, y: 0, w: 4, h: 5, row: 0 } },
+    panel1: { id: 'panel1', gridData: { i: 'panel1', x: 0, y: 0, w: 12, h: 6, row: 0 } },
+    panel2: { id: 'panel2', gridData: { i: 'panel2', x: 0, y: 6, w: 8, h: 4, row: 0 } },
+    panel3: { id: 'panel3', gridData: { i: 'panel3', x: 8, y: 6, w: 12, h: 4, row: 0 } },
+    panel4: { id: 'panel4', gridData: { i: 'panel4', x: 0, y: 10, w: 48, h: 4, row: 0 } },
+    panel5: { id: 'panel5', gridData: { i: 'panel5', x: 12, y: 0, w: 36, h: 6, row: 0 } },
+    panel6: { id: 'panel6', gridData: { i: 'panel6', x: 24, y: 6, w: 24, h: 4, row: 0 } },
+    panel7: { id: 'panel7', gridData: { i: 'panel7', x: 20, y: 6, w: 4, h: 2, row: 0 } },
+    panel8: { id: 'panel8', gridData: { i: 'panel8', x: 20, y: 8, w: 4, h: 2, row: 0 } },
+    panel9: { id: 'panel9', gridData: { i: 'panel9', x: 0, y: 0, w: 12, h: 16, row: 1 } },
+    panel10: { id: 'panel10', gridData: { i: 'panel10', x: 24, y: 0, w: 12, h: 6, row: 2 } },
   },
-  rows: [{ title: 'Large section', collapsed: false }],
+  rows: [
+    { title: 'Large section', collapsed: false },
+    { title: 'Small section', collapsed: false },
+    { title: 'Another small section', collapsed: false },
+  ],
 };
diff --git a/packages/kbn-grid-layout/grid/utils/resolve_grid_row.ts b/packages/kbn-grid-layout/grid/utils/resolve_grid_row.ts
index 14c7b0e537970..63ee33c5f90d6 100644
--- a/packages/kbn-grid-layout/grid/utils/resolve_grid_row.ts
+++ b/packages/kbn-grid-layout/grid/utils/resolve_grid_row.ts
@@ -41,14 +41,14 @@ export const getKeysInOrder = (panels: GridRowData['panels'], draggedId?: string
     const panelA = panels[panelKeyA];
     const panelB = panels[panelKeyB];
 
-    // if rows are the same. Is either panel being dragged?
-    if (panelA.id === draggedId) return -1;
-    if (panelB.id === draggedId) return 1;
-
     // sort by row first
     if (panelA.row > panelB.row) return 1;
     if (panelA.row < panelB.row) return -1;
 
+    // if rows are the same. Is either panel being dragged?
+    if (panelA.id === draggedId) return -1;
+    if (panelB.id === draggedId) return 1;
+
     // if rows are the same and neither panel is being dragged, sort by column
     if (panelA.column > panelB.column) return 1;
     if (panelA.column < panelB.column) return -1;