diff --git a/src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_header_container.test.tsx b/src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_header_container.test.tsx
index 4458fb07c56cde..998c1f6dc3ffc4 100644
--- a/src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_header_container.test.tsx
+++ b/src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_header_container.test.tsx
@@ -63,7 +63,7 @@ beforeAll(() => {
           y: 1,
           w: 1,
           h: 1,
-          id: 'hi',
+          i: 'hi',
         },
       },
     })
diff --git a/src/core_plugins/kibana/public/dashboard/panel/panel_state.js b/src/core_plugins/kibana/public/dashboard/panel/panel_state.ts
similarity index 86%
rename from src/core_plugins/kibana/public/dashboard/panel/panel_state.js
rename to src/core_plugins/kibana/public/dashboard/panel/panel_state.ts
index f87b148c8c18f1..69a0ba24af543c 100644
--- a/src/core_plugins/kibana/public/dashboard/panel/panel_state.js
+++ b/src/core_plugins/kibana/public/dashboard/panel/panel_state.ts
@@ -17,8 +17,13 @@
  * under the License.
  */
 
-import { DASHBOARD_GRID_COLUMN_COUNT, DEFAULT_PANEL_WIDTH, DEFAULT_PANEL_HEIGHT } from '../dashboard_constants';
 import chrome from 'ui/chrome';
+import {
+  DASHBOARD_GRID_COLUMN_COUNT,
+  DEFAULT_PANEL_HEIGHT,
+  DEFAULT_PANEL_WIDTH,
+} from '../dashboard_constants';
+import { PanelState } from '../selectors';
 
 /**
  * Represents a panel on a grid. Keeps track of position in the grid and what visualization it
@@ -40,13 +45,12 @@ import chrome from 'ui/chrome';
  */
 
 // Look for the smallest y and x value where the default panel will fit.
-function findTopLeftMostOpenSpace(width, height, currentPanels) {
+function findTopLeftMostOpenSpace(width: number, height: number, currentPanels: PanelState[]) {
   let maxY = -1;
 
-  for (let i = 0; i < currentPanels.length; i++) {
-    const panel = currentPanels[i];
+  currentPanels.forEach(panel => {
     maxY = Math.max(panel.gridData.y + panel.gridData.h, maxY);
-  }
+  });
 
   // Handle case of empty grid.
   if (maxY < 0) {
@@ -58,14 +62,13 @@ function findTopLeftMostOpenSpace(width, height, currentPanels) {
     grid[y] = new Array(DASHBOARD_GRID_COLUMN_COUNT).fill(0);
   }
 
-  for (let i = 0; i < currentPanels.length; i++) {
-    const panel = currentPanels[i];
+  currentPanels.forEach(panel => {
     for (let x = panel.gridData.x; x < panel.gridData.x + panel.gridData.w; x++) {
       for (let y = panel.gridData.y; y < panel.gridData.y + panel.gridData.h; y++) {
         grid[y][x] = 1;
       }
     }
-  }
+  });
 
   for (let y = 0; y < maxY; y++) {
     for (let x = 0; x < DASHBOARD_GRID_COLUMN_COUNT; x++) {
@@ -104,21 +107,29 @@ function findTopLeftMostOpenSpace(width, height, currentPanels) {
  * @param {Array} currentPanels
  * @return {PanelState}
  */
-export function createPanelState(id, type, panelIndex, currentPanels) {
-  const { x, y } = findTopLeftMostOpenSpace(DEFAULT_PANEL_WIDTH, DEFAULT_PANEL_HEIGHT, currentPanels);
+export function createPanelState(
+  id: string,
+  type: string,
+  panelIndex: string,
+  currentPanels: PanelState[]
+) {
+  const { x, y } = findTopLeftMostOpenSpace(
+    DEFAULT_PANEL_WIDTH,
+    DEFAULT_PANEL_HEIGHT,
+    currentPanels
+  );
   return {
     gridData: {
       w: DEFAULT_PANEL_WIDTH,
       h: DEFAULT_PANEL_HEIGHT,
       x,
       y,
-      i: panelIndex.toString()
+      i: panelIndex.toString(),
     },
     version: chrome.getKibanaVersion(),
     panelIndex: panelIndex.toString(),
-    type: type,
-    id: id,
+    type,
+    id,
     embeddableConfig: {},
   };
 }
-
diff --git a/src/core_plugins/kibana/public/dashboard/reducers/embeddables.test.ts b/src/core_plugins/kibana/public/dashboard/reducers/embeddables.test.ts
index 6bc1140e1ebf87..e85d197315d686 100644
--- a/src/core_plugins/kibana/public/dashboard/reducers/embeddables.test.ts
+++ b/src/core_plugins/kibana/public/dashboard/reducers/embeddables.test.ts
@@ -26,7 +26,7 @@ beforeAll(() => {
     embeddableConfig: {},
     gridData: {
       h: 0,
-      id: '0',
+      i: '0',
       w: 0,
       x: 0,
       y: 0,
diff --git a/src/core_plugins/kibana/public/dashboard/reducers/panels.test.ts b/src/core_plugins/kibana/public/dashboard/reducers/panels.test.ts
index 6344f069cbac13..aa16dc2d4bd674 100644
--- a/src/core_plugins/kibana/public/dashboard/reducers/panels.test.ts
+++ b/src/core_plugins/kibana/public/dashboard/reducers/panels.test.ts
@@ -25,7 +25,7 @@ const originalPanelData = {
   embeddableConfig: {},
   gridData: {
     h: 0,
-    id: '0',
+    i: '0',
     w: 0,
     x: 0,
     y: 0,
@@ -47,7 +47,7 @@ describe('UpdatePanel', () => {
       ...originalPanelData,
       gridData: {
         h: 1,
-        id: '1',
+        i: '1',
         w: 10,
         x: 1,
         y: 5,
@@ -60,7 +60,7 @@ describe('UpdatePanel', () => {
     expect(panel.gridData.y).toBe(5);
     expect(panel.gridData.w).toBe(10);
     expect(panel.gridData.h).toBe(1);
-    expect(panel.gridData.id).toBe('1');
+    expect(panel.gridData.i).toBe('1');
   });
 
   test('should allow updating an array that contains fewer values', () => {
diff --git a/src/core_plugins/kibana/public/dashboard/selectors/types.ts b/src/core_plugins/kibana/public/dashboard/selectors/types.ts
index b453d2da0df3b7..a7cacf51f89adc 100644
--- a/src/core_plugins/kibana/public/dashboard/selectors/types.ts
+++ b/src/core_plugins/kibana/public/dashboard/selectors/types.ts
@@ -37,7 +37,7 @@ export interface GridData {
   readonly h: number;
   readonly x: number;
   readonly y: number;
-  readonly id: string;
+  readonly i: string;
 }
 
 export type PanelId = string;