Undo grid changes

elastic · Dec 12, 2024 · c176992 · c176992
1 parent 8fbdd94
commit c176992
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 13 deletions.
diff --git 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
@@ -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/examples/grid_example/public/use_mock_dashboard_api.tsx b/examples/grid_example/public/use_mock_dashboard_api.tsx
@@ -62,8 +62,8 @@ export const useMockDashboardApi = ({
               row: 0,
               x: 0,
               y: 0,
-              w: 4,
-              h: 4,
+              w: DEFAULT_PANEL_WIDTH,
+              h: DEFAULT_PANEL_HEIGHT,
             },
           },
         });

diff --git 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;
-Original file line number
+Diff line change
@@ Expand Up / @@ -62,8 +62,8 @@ export const useMockDashboardApi = ({ @@
                   row: 0,
                   x: 0,
                   y: 0,
-                  w: 4,
-                  h: 4,
+                  w: DEFAULT_PANEL_WIDTH,
+                  h: DEFAULT_PANEL_HEIGHT,
                 },
               },
             });
@@ Expand Down @@