diff --git a/airflow/www/static/css/tree.css b/airflow/www/static/css/grid.css
similarity index 100%
rename from airflow/www/static/css/tree.css
rename to airflow/www/static/css/grid.css
diff --git a/airflow/www/static/js/tree/Clipboard.jsx b/airflow/www/static/js/grid/Clipboard.jsx
similarity index 100%
rename from airflow/www/static/js/tree/Clipboard.jsx
rename to airflow/www/static/js/grid/Clipboard.jsx
diff --git a/airflow/www/static/js/tree/Tree.jsx b/airflow/www/static/js/grid/Grid.jsx
similarity index 97%
rename from airflow/www/static/js/tree/Tree.jsx
rename to airflow/www/static/js/grid/Grid.jsx
index b2d1c1dfb153a..6a252b30f5510 100644
--- a/airflow/www/static/js/tree/Tree.jsx
+++ b/airflow/www/static/js/grid/Grid.jsx
@@ -34,7 +34,7 @@ import {
   Button,
 } from '@chakra-ui/react';
 
-import { useTreeData } from './api';
+import { useGridData } from './api';
 import renderTaskRows from './renderTaskRows';
 import ResetRoot from './ResetRoot';
 import DagRuns from './dagRuns';
@@ -44,10 +44,10 @@ import { useAutoRefresh } from './context/autorefresh';
 
 const sidePanelKey = 'hideSidePanel';
 
-const Tree = () => {
+const Grid = () => {
   const scrollRef = useRef();
   const tableRef = useRef();
-  const { data: { groups, dagRuns } } = useTreeData();
+  const { data: { groups, dagRuns } } = useGridData();
   const { isRefreshOn, toggleRefresh, isPaused } = useAutoRefresh();
   const isPanelOpen = localStorage.getItem(sidePanelKey) !== 'true';
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: isPanelOpen });
@@ -141,4 +141,4 @@ const Tree = () => {
   );
 };
 
-export default Tree;
+export default Grid;
diff --git a/airflow/www/static/js/tree/InstanceTooltip.jsx b/airflow/www/static/js/grid/InstanceTooltip.jsx
similarity index 100%
rename from airflow/www/static/js/tree/InstanceTooltip.jsx
rename to airflow/www/static/js/grid/InstanceTooltip.jsx
diff --git a/airflow/www/static/js/tree/README.md b/airflow/www/static/js/grid/README.md
similarity index 100%
rename from airflow/www/static/js/tree/README.md
rename to airflow/www/static/js/grid/README.md
diff --git a/airflow/www/static/js/tree/ResetRoot.jsx b/airflow/www/static/js/grid/ResetRoot.jsx
similarity index 100%
rename from airflow/www/static/js/tree/ResetRoot.jsx
rename to airflow/www/static/js/grid/ResetRoot.jsx
diff --git a/airflow/www/static/js/tree/StatusBox.jsx b/airflow/www/static/js/grid/StatusBox.jsx
similarity index 100%
rename from airflow/www/static/js/tree/StatusBox.jsx
rename to airflow/www/static/js/grid/StatusBox.jsx
diff --git a/airflow/www/static/js/tree/Table.jsx b/airflow/www/static/js/grid/Table.jsx
similarity index 100%
rename from airflow/www/static/js/tree/Table.jsx
rename to airflow/www/static/js/grid/Table.jsx
diff --git a/airflow/www/static/js/tree/TaskName.jsx b/airflow/www/static/js/grid/TaskName.jsx
similarity index 100%
rename from airflow/www/static/js/tree/TaskName.jsx
rename to airflow/www/static/js/grid/TaskName.jsx
diff --git a/airflow/www/static/js/tree/Time.jsx b/airflow/www/static/js/grid/Time.jsx
similarity index 100%
rename from airflow/www/static/js/tree/Time.jsx
rename to airflow/www/static/js/grid/Time.jsx
diff --git a/airflow/www/static/js/tree/api/index.js b/airflow/www/static/js/grid/api/index.js
similarity index 97%
rename from airflow/www/static/js/tree/api/index.js
rename to airflow/www/static/js/grid/api/index.js
index 3543c97e2ef7b..3487ecd6eaff0 100644
--- a/airflow/www/static/js/tree/api/index.js
+++ b/airflow/www/static/js/grid/api/index.js
@@ -31,7 +31,7 @@ import useMarkFailedTask from './useMarkFailedTask';
 import useMarkSuccessTask from './useMarkSuccessTask';
 import useExtraLinks from './useExtraLinks';
 import useConfirmMarkTask from './useConfirmMarkTask';
-import useTreeData from './useTreeData';
+import useGridData from './useGridData';
 import useMappedInstances from './useMappedInstances';
 
 axios.interceptors.response.use(
@@ -52,6 +52,6 @@ export {
   useMarkSuccessTask,
   useExtraLinks,
   useConfirmMarkTask,
-  useTreeData,
+  useGridData,
   useMappedInstances,
 };
diff --git a/airflow/www/static/js/tree/api/useClearRun.js b/airflow/www/static/js/grid/api/useClearRun.js
similarity index 97%
rename from airflow/www/static/js/tree/api/useClearRun.js
rename to airflow/www/static/js/grid/api/useClearRun.js
index 52dcb21e5cfad..1994453c665db 100644
--- a/airflow/www/static/js/tree/api/useClearRun.js
+++ b/airflow/www/static/js/grid/api/useClearRun.js
@@ -49,7 +49,7 @@ export default function useClearRun(dagId, runId) {
     {
       onSuccess: () => {
         // Invalidating the query will force a new API request
-        queryClient.invalidateQueries('treeData');
+        queryClient.invalidateQueries('gridData');
         startRefresh();
       },
       onError: (error) => errorToast({ error }),
diff --git a/airflow/www/static/js/tree/api/useClearTask.js b/airflow/www/static/js/grid/api/useClearTask.js
similarity index 97%
rename from airflow/www/static/js/tree/api/useClearTask.js
rename to airflow/www/static/js/grid/api/useClearTask.js
index 0733b402b4bbe..b9a1b389acfd9 100644
--- a/airflow/www/static/js/tree/api/useClearTask.js
+++ b/airflow/www/static/js/grid/api/useClearTask.js
@@ -65,7 +65,7 @@ export default function useClearTask({
     },
     {
       onSuccess: () => {
-        queryClient.invalidateQueries('treeData');
+        queryClient.invalidateQueries('gridData');
         queryClient.invalidateQueries('mappedInstances', dagId, runId, taskId);
         startRefresh();
       },
diff --git a/airflow/www/static/js/tree/api/useConfirmMarkTask.js b/airflow/www/static/js/grid/api/useConfirmMarkTask.js
similarity index 100%
rename from airflow/www/static/js/tree/api/useConfirmMarkTask.js
rename to airflow/www/static/js/grid/api/useConfirmMarkTask.js
diff --git a/airflow/www/static/js/tree/api/useExtraLinks.js b/airflow/www/static/js/grid/api/useExtraLinks.js
similarity index 100%
rename from airflow/www/static/js/tree/api/useExtraLinks.js
rename to airflow/www/static/js/grid/api/useExtraLinks.js
diff --git a/airflow/www/static/js/tree/api/useTreeData.js b/airflow/www/static/js/grid/api/useGridData.js
similarity index 84%
rename from airflow/www/static/js/tree/api/useTreeData.js
rename to airflow/www/static/js/grid/api/useGridData.js
index 2a0468cac3ce4..8c16947c8cebb 100644
--- a/airflow/www/static/js/tree/api/useTreeData.js
+++ b/airflow/www/static/js/grid/api/useGridData.js
@@ -17,19 +17,19 @@
  * under the License.
  */
 
-/* global treeData, autoRefreshInterval */
+/* global gridData, autoRefreshInterval */
 
 import { useQuery } from 'react-query';
 import axios from 'axios';
 
 import { getMetaValue } from '../../utils';
 import { useAutoRefresh } from '../context/autorefresh';
-import { formatData, areActiveRuns } from '../utils/treeData';
+import { formatData, areActiveRuns } from '../utils/gridData';
 import useErrorToast from '../utils/useErrorToast';
 
 // dagId comes from dag.html
 const dagId = getMetaValue('dag_id');
-const treeDataUrl = getMetaValue('tree_data_url') || '';
+const gridDataUrl = getMetaValue('grid_data_url') || '';
 const numRuns = getMetaValue('num_runs');
 const urlRoot = getMetaValue('root');
 const baseDate = getMetaValue('base_date');
@@ -39,11 +39,11 @@ const emptyData = {
   groups: {},
 };
 
-const useTreeData = () => {
-  const initialData = formatData(treeData, emptyData);
+const useGridData = () => {
+  const initialData = formatData(gridData, emptyData);
   const { isRefreshOn, stopRefresh } = useAutoRefresh();
   const errorToast = useErrorToast();
-  return useQuery('treeData', async () => {
+  return useQuery('gridData', async () => {
     try {
       const params = new URLSearchParams({
         dag_id: dagId,
@@ -52,7 +52,7 @@ const useTreeData = () => {
       if (urlRoot) params.append('root', urlRoot);
       if (baseDate) params.append('base_date', baseDate);
 
-      const newData = await axios.get(treeDataUrl, { params });
+      const newData = await axios.get(gridDataUrl, { params });
       // turn off auto refresh if there are no active runs
       if (!areActiveRuns(newData.dagRuns)) stopRefresh();
       return newData;
@@ -72,4 +72,4 @@ const useTreeData = () => {
   });
 };
 
-export default useTreeData;
+export default useGridData;
diff --git a/airflow/www/static/js/tree/api/useTreeData.test.jsx b/airflow/www/static/js/grid/api/useGridData.test.jsx
similarity index 81%
rename from airflow/www/static/js/tree/api/useTreeData.test.jsx
rename to airflow/www/static/js/grid/api/useGridData.test.jsx
index 01c59ef346b2f..06a1cb9a08e35 100644
--- a/airflow/www/static/js/tree/api/useTreeData.test.jsx
+++ b/airflow/www/static/js/grid/api/useGridData.test.jsx
@@ -18,12 +18,12 @@
  */
 
 import { renderHook } from '@testing-library/react-hooks';
-import useTreeData from './useTreeData';
+import useGridData from './useGridData';
 import { Wrapper } from '../utils/testUtils';
 
 /* global describe, test, expect, beforeAll */
 
-const pendingTreeData = {
+const pendingGridData = {
   groups: {},
   dag_runs: [
     {
@@ -46,9 +46,9 @@ describe('Test useTreeData hook', () => {
   });
 
   test('data is valid camelcase json', () => {
-    global.treeData = JSON.stringify(pendingTreeData);
+    global.gridData = JSON.stringify(pendingGridData);
 
-    const { result } = renderHook(() => useTreeData(), { wrapper: Wrapper });
+    const { result } = renderHook(() => useGridData(), { wrapper: Wrapper });
     const { data } = result.current;
 
     expect(typeof data === 'object').toBe(true);
@@ -56,20 +56,20 @@ describe('Test useTreeData hook', () => {
     expect(data.dag_runs).toBeUndefined();
   });
 
-  test('Can handle no treeData', () => {
-    global.treeData = null;
+  test('Can handle no gridData', () => {
+    global.gridData = null;
 
-    const { result } = renderHook(() => useTreeData(), { wrapper: Wrapper });
+    const { result } = renderHook(() => useGridData(), { wrapper: Wrapper });
     const { data } = result.current;
 
     expect(data.dagRuns).toStrictEqual([]);
     expect(data.groups).toStrictEqual({});
   });
 
-  test('Can handle empty treeData object', () => {
-    global.treeData = {};
+  test('Can handle empty gridData object', () => {
+    global.gridData = {};
 
-    const { result } = renderHook(() => useTreeData(), { wrapper: Wrapper });
+    const { result } = renderHook(() => useGridData(), { wrapper: Wrapper });
     const { data } = result.current;
 
     expect(data.dagRuns).toStrictEqual([]);
diff --git a/airflow/www/static/js/tree/api/useMappedInstances.js b/airflow/www/static/js/grid/api/useMappedInstances.js
similarity index 100%
rename from airflow/www/static/js/tree/api/useMappedInstances.js
rename to airflow/www/static/js/grid/api/useMappedInstances.js
diff --git a/airflow/www/static/js/tree/api/useMarkFailedRun.js b/airflow/www/static/js/grid/api/useMarkFailedRun.js
similarity index 97%
rename from airflow/www/static/js/tree/api/useMarkFailedRun.js
rename to airflow/www/static/js/grid/api/useMarkFailedRun.js
index 697a49aa4dc34..6c5873a3ae051 100644
--- a/airflow/www/static/js/tree/api/useMarkFailedRun.js
+++ b/airflow/www/static/js/grid/api/useMarkFailedRun.js
@@ -48,7 +48,7 @@ export default function useMarkFailedRun(dagId, runId) {
     },
     {
       onSuccess: () => {
-        queryClient.invalidateQueries('treeData');
+        queryClient.invalidateQueries('gridData');
         startRefresh();
       },
       onError: (error) => errorToast({ error }),
diff --git a/airflow/www/static/js/tree/api/useMarkFailedTask.js b/airflow/www/static/js/grid/api/useMarkFailedTask.js
similarity index 97%
rename from airflow/www/static/js/tree/api/useMarkFailedTask.js
rename to airflow/www/static/js/grid/api/useMarkFailedTask.js
index 3c8f14c7d0e1b..5a5d8fbf508d2 100644
--- a/airflow/www/static/js/tree/api/useMarkFailedTask.js
+++ b/airflow/www/static/js/grid/api/useMarkFailedTask.js
@@ -61,7 +61,7 @@ export default function useMarkFailedTask({
     },
     {
       onSuccess: () => {
-        queryClient.invalidateQueries('treeData');
+        queryClient.invalidateQueries('gridData');
         queryClient.invalidateQueries('mappedInstances', dagId, runId, taskId);
         startRefresh();
       },
diff --git a/airflow/www/static/js/tree/api/useMarkSuccessRun.js b/airflow/www/static/js/grid/api/useMarkSuccessRun.js
similarity index 97%
rename from airflow/www/static/js/tree/api/useMarkSuccessRun.js
rename to airflow/www/static/js/grid/api/useMarkSuccessRun.js
index 0d171e2ed8412..1009d78ea2479 100644
--- a/airflow/www/static/js/tree/api/useMarkSuccessRun.js
+++ b/airflow/www/static/js/grid/api/useMarkSuccessRun.js
@@ -48,7 +48,7 @@ export default function useMarkSuccessRun(dagId, runId) {
     },
     {
       onSuccess: () => {
-        queryClient.invalidateQueries('treeData');
+        queryClient.invalidateQueries('gridData');
         startRefresh();
       },
       onError: (error) => errorToast({ error }),
diff --git a/airflow/www/static/js/tree/api/useMarkSuccessTask.js b/airflow/www/static/js/grid/api/useMarkSuccessTask.js
similarity index 97%
rename from airflow/www/static/js/tree/api/useMarkSuccessTask.js
rename to airflow/www/static/js/grid/api/useMarkSuccessTask.js
index 41d68fe24cc48..3c7ea1e42ae7c 100644
--- a/airflow/www/static/js/tree/api/useMarkSuccessTask.js
+++ b/airflow/www/static/js/grid/api/useMarkSuccessTask.js
@@ -62,7 +62,7 @@ export default function useMarkSuccessTask({
     },
     {
       onSuccess: () => {
-        queryClient.invalidateQueries('treeData');
+        queryClient.invalidateQueries('gridData');
         queryClient.invalidateQueries('mappedInstances', dagId, runId, taskId);
         startRefresh();
       },
diff --git a/airflow/www/static/js/tree/api/useQueueRun.js b/airflow/www/static/js/grid/api/useQueueRun.js
similarity index 97%
rename from airflow/www/static/js/tree/api/useQueueRun.js
rename to airflow/www/static/js/grid/api/useQueueRun.js
index 0acae341107a7..413a3ca5711c8 100644
--- a/airflow/www/static/js/tree/api/useQueueRun.js
+++ b/airflow/www/static/js/grid/api/useQueueRun.js
@@ -48,7 +48,7 @@ export default function useQueueRun(dagId, runId) {
     },
     {
       onSuccess: () => {
-        queryClient.invalidateQueries('treeData');
+        queryClient.invalidateQueries('gridData');
         startRefresh();
       },
       onError: (error) => errorToast({ error }),
diff --git a/airflow/www/static/js/tree/api/useRunTask.js b/airflow/www/static/js/grid/api/useRunTask.js
similarity index 97%
rename from airflow/www/static/js/tree/api/useRunTask.js
rename to airflow/www/static/js/grid/api/useRunTask.js
index 4616d2b1232c8..abfa34f8dc53d 100644
--- a/airflow/www/static/js/tree/api/useRunTask.js
+++ b/airflow/www/static/js/grid/api/useRunTask.js
@@ -59,7 +59,7 @@ export default function useRunTask(dagId, runId, taskId) {
     ),
     {
       onSuccess: () => {
-        queryClient.invalidateQueries('treeData');
+        queryClient.invalidateQueries('gridData');
         queryClient.invalidateQueries('mappedInstances', dagId, runId, taskId);
         startRefresh();
       },
diff --git a/airflow/www/static/js/tree/api/useTasks.js b/airflow/www/static/js/grid/api/useTasks.js
similarity index 100%
rename from airflow/www/static/js/tree/api/useTasks.js
rename to airflow/www/static/js/grid/api/useTasks.js
diff --git a/airflow/www/static/js/tree/context/autorefresh.jsx b/airflow/www/static/js/grid/context/autorefresh.jsx
similarity index 94%
rename from airflow/www/static/js/tree/context/autorefresh.jsx
rename to airflow/www/static/js/grid/context/autorefresh.jsx
index dc21552028607..ae242e5bf66aa 100644
--- a/airflow/www/static/js/tree/context/autorefresh.jsx
+++ b/airflow/www/static/js/grid/context/autorefresh.jsx
@@ -17,11 +17,11 @@
  * under the License.
  */
 
-/* global localStorage, treeData, document */
+/* global localStorage, gridData, document */
 
 import React, { useContext, useState, useEffect } from 'react';
 import { getMetaValue } from '../../utils';
-import { formatData, areActiveRuns } from '../utils/treeData';
+import { formatData, areActiveRuns } from '../utils/gridData';
 
 const autoRefreshKey = 'disabledAutoRefresh';
 
@@ -33,7 +33,7 @@ const AutoRefreshContext = React.createContext(null);
 export const AutoRefreshProvider = ({ children }) => {
   let dagRuns = [];
   try {
-    const data = JSON.parse(treeData);
+    const data = JSON.parse(gridData);
     if (data.dag_runs) dagRuns = formatData(data.dag_runs);
   } catch {
     dagRuns = [];
diff --git a/airflow/www/static/js/tree/context/containerRef.jsx b/airflow/www/static/js/grid/context/containerRef.jsx
similarity index 100%
rename from airflow/www/static/js/tree/context/containerRef.jsx
rename to airflow/www/static/js/grid/context/containerRef.jsx
diff --git a/airflow/www/static/js/grid/context/selection.jsx b/airflow/www/static/js/grid/context/selection.jsx
new file mode 100644
index 0000000000000..29fcece22370a
--- /dev/null
+++ b/airflow/www/static/js/grid/context/selection.jsx
@@ -0,0 +1,56 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useContext, useReducer } from 'react';
+
+const SelectionContext = React.createContext(null);
+
+const SELECT = 'SELECT';
+const DESELECT = 'DESELECT';
+
+const selectionReducer = (state, { type, payload }) => {
+  switch (type) {
+    case SELECT:
+      // Deselect if it is the same selection
+      if (payload.taskId === state.taskId && payload.runId === state.runId) {
+        return {};
+      }
+      return payload;
+    case DESELECT:
+      return {};
+    default:
+      return state;
+  }
+};
+
+// Expose the grid selection to any react component instead of passing around lots of props
+export const SelectionProvider = ({ children }) => {
+  const [selected, dispatch] = useReducer(selectionReducer, {});
+
+  const clearSelection = () => dispatch({ type: DESELECT });
+  const onSelect = (payload) => dispatch({ type: SELECT, payload });
+
+  return (
+    <SelectionContext.Provider value={{ selected, clearSelection, onSelect }}>
+      {children}
+    </SelectionContext.Provider>
+  );
+};
+
+export const useSelection = () => useContext(SelectionContext);
diff --git a/airflow/www/static/js/tree/context/timezone.jsx b/airflow/www/static/js/grid/context/timezone.jsx
similarity index 100%
rename from airflow/www/static/js/tree/context/timezone.jsx
rename to airflow/www/static/js/grid/context/timezone.jsx
diff --git a/airflow/www/static/js/tree/dagRuns/Bar.jsx b/airflow/www/static/js/grid/dagRuns/Bar.jsx
similarity index 100%
rename from airflow/www/static/js/tree/dagRuns/Bar.jsx
rename to airflow/www/static/js/grid/dagRuns/Bar.jsx
diff --git a/airflow/www/static/js/tree/dagRuns/Tooltip.jsx b/airflow/www/static/js/grid/dagRuns/Tooltip.jsx
similarity index 100%
rename from airflow/www/static/js/tree/dagRuns/Tooltip.jsx
rename to airflow/www/static/js/grid/dagRuns/Tooltip.jsx
diff --git a/airflow/www/static/js/tree/dagRuns/index.jsx b/airflow/www/static/js/grid/dagRuns/index.jsx
similarity index 97%
rename from airflow/www/static/js/tree/dagRuns/index.jsx
rename to airflow/www/static/js/grid/dagRuns/index.jsx
index 462fffc8e3cf6..5303dc8799dfd 100644
--- a/airflow/www/static/js/tree/dagRuns/index.jsx
+++ b/airflow/www/static/js/grid/dagRuns/index.jsx
@@ -26,7 +26,7 @@ import {
   Flex,
 } from '@chakra-ui/react';
 
-import { useTreeData } from '../api';
+import { useGridData } from '../api';
 import DagRunBar from './Bar';
 import { getDuration, formatDuration } from '../../datetime_utils';
 import useSelection from '../utils/useSelection';
@@ -38,7 +38,7 @@ const DurationTick = ({ children, ...rest }) => (
 );
 
 const DagRuns = () => {
-  const { data: { dagRuns } } = useTreeData();
+  const { data: { dagRuns } } = useGridData();
   const { selected, onSelect } = useSelection();
   const durations = [];
   const runs = dagRuns.map((dagRun) => {
diff --git a/airflow/www/static/js/tree/dagRuns/index.test.jsx b/airflow/www/static/js/grid/dagRuns/index.test.jsx
similarity index 97%
rename from airflow/www/static/js/tree/dagRuns/index.test.jsx
rename to airflow/www/static/js/grid/dagRuns/index.test.jsx
index 550504b0fcf97..7cc52355ebccb 100644
--- a/airflow/www/static/js/tree/dagRuns/index.test.jsx
+++ b/airflow/www/static/js/grid/dagRuns/index.test.jsx
@@ -52,7 +52,7 @@ const dagRuns = [
 
 describe('Test DagRuns', () => {
   test('Durations and manual run arrow render correctly, but without any date ticks', () => {
-    global.treeData = JSON.stringify({
+    global.gridData = JSON.stringify({
       groups: {},
       dagRuns,
     });
@@ -68,7 +68,7 @@ describe('Test DagRuns', () => {
   });
 
   test('Top date ticks appear when there are 4 or more runs', () => {
-    global.treeData = JSON.stringify({
+    global.gridData = JSON.stringify({
       groups: {},
       dagRuns: [
         ...dagRuns,
@@ -101,7 +101,7 @@ describe('Test DagRuns', () => {
   });
 
   test('Handles empty data correctly', () => {
-    global.treeData = null;
+    global.gridData = null;
     const { queryByTestId } = render(
       <DagRuns />, { wrapper: TableWrapper },
     );
diff --git a/airflow/www/static/js/tree/details/Header.jsx b/airflow/www/static/js/grid/details/Header.jsx
similarity index 97%
rename from airflow/www/static/js/tree/details/Header.jsx
rename to airflow/www/static/js/grid/details/Header.jsx
index 2bdaa47361237..e2041b36650ad 100644
--- a/airflow/www/static/js/tree/details/Header.jsx
+++ b/airflow/www/static/js/grid/details/Header.jsx
@@ -31,7 +31,7 @@ import { MdPlayArrow } from 'react-icons/md';
 import { getMetaValue } from '../../utils';
 import useSelection from '../utils/useSelection';
 import Time from '../Time';
-import { useTasks, useTreeData } from '../api';
+import { useTasks, useGridData } from '../api';
 
 const dagId = getMetaValue('dag_id');
 
@@ -43,7 +43,7 @@ const LabelValue = ({ label, value }) => (
 );
 
 const Header = () => {
-  const { data: { dagRuns } } = useTreeData();
+  const { data: { dagRuns } } = useGridData();
   const { selected: { taskId, runId }, onSelect, clearSelection } = useSelection();
   const { data: { tasks } } = useTasks();
   const dagRun = dagRuns.find((r) => r.runId === runId);
diff --git a/airflow/www/static/js/tree/details/content/ConfirmDialog.jsx b/airflow/www/static/js/grid/details/content/ConfirmDialog.jsx
similarity index 100%
rename from airflow/www/static/js/tree/details/content/ConfirmDialog.jsx
rename to airflow/www/static/js/grid/details/content/ConfirmDialog.jsx
diff --git a/airflow/www/static/js/tree/details/content/Dag.jsx b/airflow/www/static/js/grid/details/content/Dag.jsx
similarity index 98%
rename from airflow/www/static/js/tree/details/content/Dag.jsx
rename to airflow/www/static/js/grid/details/content/Dag.jsx
index 511844d72edb6..a6a48e78872d3 100644
--- a/airflow/www/static/js/tree/details/content/Dag.jsx
+++ b/airflow/www/static/js/grid/details/content/Dag.jsx
@@ -33,7 +33,7 @@ import { mean } from 'lodash';
 
 import { getDuration, formatDuration } from '../../../datetime_utils';
 import { finalStatesMap, getMetaValue } from '../../../utils';
-import { useTasks, useTreeData } from '../../api';
+import { useTasks, useGridData } from '../../api';
 import Time from '../../Time';
 import { SimpleStatus } from '../../StatusBox';
 
@@ -42,7 +42,7 @@ const dagDetailsUrl = getMetaValue('dag_details_url');
 
 const Dag = () => {
   const { data: taskData } = useTasks(dagId);
-  const { data: { dagRuns } } = useTreeData();
+  const { data: { dagRuns } } = useGridData();
   if (!taskData) return null;
   const { tasks = [], totalEntries = '' } = taskData;
 
diff --git a/airflow/www/static/js/tree/details/content/dagRun/ClearRun.jsx b/airflow/www/static/js/grid/details/content/dagRun/ClearRun.jsx
similarity index 100%
rename from airflow/www/static/js/tree/details/content/dagRun/ClearRun.jsx
rename to airflow/www/static/js/grid/details/content/dagRun/ClearRun.jsx
diff --git a/airflow/www/static/js/tree/details/content/dagRun/MarkFailedRun.jsx b/airflow/www/static/js/grid/details/content/dagRun/MarkFailedRun.jsx
similarity index 100%
rename from airflow/www/static/js/tree/details/content/dagRun/MarkFailedRun.jsx
rename to airflow/www/static/js/grid/details/content/dagRun/MarkFailedRun.jsx
diff --git a/airflow/www/static/js/tree/details/content/dagRun/MarkSuccessRun.jsx b/airflow/www/static/js/grid/details/content/dagRun/MarkSuccessRun.jsx
similarity index 100%
rename from airflow/www/static/js/tree/details/content/dagRun/MarkSuccessRun.jsx
rename to airflow/www/static/js/grid/details/content/dagRun/MarkSuccessRun.jsx
diff --git a/airflow/www/static/js/tree/details/content/dagRun/QueueRun.jsx b/airflow/www/static/js/grid/details/content/dagRun/QueueRun.jsx
similarity index 100%
rename from airflow/www/static/js/tree/details/content/dagRun/QueueRun.jsx
rename to airflow/www/static/js/grid/details/content/dagRun/QueueRun.jsx
diff --git a/airflow/www/static/js/tree/details/content/dagRun/index.jsx b/airflow/www/static/js/grid/details/content/dagRun/index.jsx
similarity index 97%
rename from airflow/www/static/js/tree/details/content/dagRun/index.jsx
rename to airflow/www/static/js/grid/details/content/dagRun/index.jsx
index bd096f15103f9..41bf4e5146f4e 100644
--- a/airflow/www/static/js/tree/details/content/dagRun/index.jsx
+++ b/airflow/www/static/js/grid/details/content/dagRun/index.jsx
@@ -35,7 +35,7 @@ import MarkFailedRun from './MarkFailedRun';
 import MarkSuccessRun from './MarkSuccessRun';
 import QueueRun from './QueueRun';
 import ClearRun from './ClearRun';
-import { useTreeData } from '../../../api';
+import { useGridData } from '../../../api';
 import { appendSearchParams, getMetaValue } from '../../../../utils';
 
 const dagId = getMetaValue('dag_id');
@@ -43,7 +43,7 @@ const graphUrl = getMetaValue('graph_url');
 const dagRunDetailsUrl = getMetaValue('dagrun_details_url');
 
 const DagRun = ({ runId }) => {
-  const { data: { dagRuns } } = useTreeData();
+  const { data: { dagRuns } } = useGridData();
   const run = dagRuns.find((dr) => dr.runId === runId);
   if (!run) return null;
   const {
diff --git a/airflow/www/static/js/tree/details/content/taskInstance/Details.jsx b/airflow/www/static/js/grid/details/content/taskInstance/Details.jsx
similarity index 100%
rename from airflow/www/static/js/tree/details/content/taskInstance/Details.jsx
rename to airflow/www/static/js/grid/details/content/taskInstance/Details.jsx
diff --git a/airflow/www/static/js/tree/details/content/taskInstance/ExtraLinks.jsx b/airflow/www/static/js/grid/details/content/taskInstance/ExtraLinks.jsx
similarity index 100%
rename from airflow/www/static/js/tree/details/content/taskInstance/ExtraLinks.jsx
rename to airflow/www/static/js/grid/details/content/taskInstance/ExtraLinks.jsx
diff --git a/airflow/www/static/js/tree/details/content/taskInstance/Logs.jsx b/airflow/www/static/js/grid/details/content/taskInstance/Logs.jsx
similarity index 100%
rename from airflow/www/static/js/tree/details/content/taskInstance/Logs.jsx
rename to airflow/www/static/js/grid/details/content/taskInstance/Logs.jsx
diff --git a/airflow/www/static/js/tree/details/content/taskInstance/MappedInstances.jsx b/airflow/www/static/js/grid/details/content/taskInstance/MappedInstances.jsx
similarity index 100%
rename from airflow/www/static/js/tree/details/content/taskInstance/MappedInstances.jsx
rename to airflow/www/static/js/grid/details/content/taskInstance/MappedInstances.jsx
diff --git a/airflow/www/static/js/tree/details/content/taskInstance/Nav.jsx b/airflow/www/static/js/grid/details/content/taskInstance/Nav.jsx
similarity index 100%
rename from airflow/www/static/js/tree/details/content/taskInstance/Nav.jsx
rename to airflow/www/static/js/grid/details/content/taskInstance/Nav.jsx
diff --git a/airflow/www/static/js/tree/details/content/taskInstance/index.jsx b/airflow/www/static/js/grid/details/content/taskInstance/index.jsx
similarity index 97%
rename from airflow/www/static/js/tree/details/content/taskInstance/index.jsx
rename to airflow/www/static/js/grid/details/content/taskInstance/index.jsx
index e40471f071bbe..d30f65acc20c2 100644
--- a/airflow/www/static/js/tree/details/content/taskInstance/index.jsx
+++ b/airflow/www/static/js/grid/details/content/taskInstance/index.jsx
@@ -35,7 +35,7 @@ import Logs from './Logs';
 import TaskNav from './Nav';
 import Details from './Details';
 
-import { useTreeData, useTasks } from '../../../api';
+import { useGridData, useTasks } from '../../../api';
 import MappedInstances from './MappedInstances';
 import { getMetaValue } from '../../../../utils';
 
@@ -56,7 +56,7 @@ const getTask = ({ taskId, runId, task }) => {
 
 const TaskInstance = ({ taskId, runId }) => {
   const [selectedRows, setSelectedRows] = useState([]);
-  const { data: { groups, dagRuns } } = useTreeData();
+  const { data: { groups, dagRuns } } = useGridData();
   const group = getTask({ taskId, runId, task: groups });
   const run = dagRuns.find((r) => r.runId === runId);
   const { executionDate } = run;
diff --git a/airflow/www/static/js/tree/details/content/taskInstance/taskActions/ActionButton.jsx b/airflow/www/static/js/grid/details/content/taskInstance/taskActions/ActionButton.jsx
similarity index 100%
rename from airflow/www/static/js/tree/details/content/taskInstance/taskActions/ActionButton.jsx
rename to airflow/www/static/js/grid/details/content/taskInstance/taskActions/ActionButton.jsx
diff --git a/airflow/www/static/js/tree/details/content/taskInstance/taskActions/Clear.jsx b/airflow/www/static/js/grid/details/content/taskInstance/taskActions/Clear.jsx
similarity index 100%
rename from airflow/www/static/js/tree/details/content/taskInstance/taskActions/Clear.jsx
rename to airflow/www/static/js/grid/details/content/taskInstance/taskActions/Clear.jsx
diff --git a/airflow/www/static/js/tree/details/content/taskInstance/taskActions/MarkFailed.jsx b/airflow/www/static/js/grid/details/content/taskInstance/taskActions/MarkFailed.jsx
similarity index 100%
rename from airflow/www/static/js/tree/details/content/taskInstance/taskActions/MarkFailed.jsx
rename to airflow/www/static/js/grid/details/content/taskInstance/taskActions/MarkFailed.jsx
diff --git a/airflow/www/static/js/tree/details/content/taskInstance/taskActions/MarkSuccess.jsx b/airflow/www/static/js/grid/details/content/taskInstance/taskActions/MarkSuccess.jsx
similarity index 100%
rename from airflow/www/static/js/tree/details/content/taskInstance/taskActions/MarkSuccess.jsx
rename to airflow/www/static/js/grid/details/content/taskInstance/taskActions/MarkSuccess.jsx
diff --git a/airflow/www/static/js/tree/details/content/taskInstance/taskActions/Run.jsx b/airflow/www/static/js/grid/details/content/taskInstance/taskActions/Run.jsx
similarity index 100%
rename from airflow/www/static/js/tree/details/content/taskInstance/taskActions/Run.jsx
rename to airflow/www/static/js/grid/details/content/taskInstance/taskActions/Run.jsx
diff --git a/airflow/www/static/js/tree/details/index.jsx b/airflow/www/static/js/grid/details/index.jsx
similarity index 100%
rename from airflow/www/static/js/tree/details/index.jsx
rename to airflow/www/static/js/grid/details/index.jsx
diff --git a/airflow/www/static/js/tree/index.jsx b/airflow/www/static/js/grid/index.jsx
similarity index 97%
rename from airflow/www/static/js/tree/index.jsx
rename to airflow/www/static/js/grid/index.jsx
index abe135bebbab7..15eaa4a6696fe 100644
--- a/airflow/www/static/js/tree/index.jsx
+++ b/airflow/www/static/js/grid/index.jsx
@@ -27,7 +27,7 @@ import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { QueryClient, QueryClientProvider } from 'react-query';
 
-import Tree from './Tree';
+import Grid from './Grid';
 import { ContainerRefProvider } from './context/containerRef';
 import { TimezoneProvider } from './context/timezone';
 import { AutoRefreshProvider } from './context/autorefresh';
@@ -78,7 +78,7 @@ function App() {
               <TimezoneProvider>
                 <AutoRefreshProvider>
                   <BrowserRouter>
-                    <Tree />
+                    <Grid />
                   </BrowserRouter>
                 </AutoRefreshProvider>
               </TimezoneProvider>
diff --git a/airflow/www/static/js/tree/renderTaskRows.jsx b/airflow/www/static/js/grid/renderTaskRows.jsx
similarity index 100%
rename from airflow/www/static/js/tree/renderTaskRows.jsx
rename to airflow/www/static/js/grid/renderTaskRows.jsx
diff --git a/airflow/www/static/js/tree/renderTaskRows.test.jsx b/airflow/www/static/js/grid/renderTaskRows.test.jsx
similarity index 94%
rename from airflow/www/static/js/tree/renderTaskRows.test.jsx
rename to airflow/www/static/js/grid/renderTaskRows.test.jsx
index 415f18b89d25e..baaa65c17e627 100644
--- a/airflow/www/static/js/tree/renderTaskRows.test.jsx
+++ b/airflow/www/static/js/grid/renderTaskRows.test.jsx
@@ -25,7 +25,7 @@ import { render, fireEvent } from '@testing-library/react';
 import renderTaskRows from './renderTaskRows';
 import { TableWrapper } from './utils/testUtils';
 
-const mockTreeData = {
+const mockGridData = {
   groups: {
     id: null,
     label: null,
@@ -90,9 +90,9 @@ const mockTreeData = {
 
 describe('Test renderTaskRows', () => {
   test('Group defaults to closed but clicking on the name will open a group', () => {
-    global.treeData = mockTreeData;
-    const dagRunIds = mockTreeData.dagRuns.map((dr) => dr.runId);
-    const task = mockTreeData.groups;
+    global.gridData = mockGridData;
+    const dagRunIds = mockGridData.dagRuns.map((dr) => dr.runId);
+    const task = mockGridData.groups;
 
     const { getByTestId, getByText, getAllByTestId } = render(
       <>{renderTaskRows({ task, dagRunIds })}</>,
@@ -113,7 +113,7 @@ describe('Test renderTaskRows', () => {
   });
 
   test('Still renders names if there are no instances', () => {
-    global.treeData = {
+    global.gridData = {
       groups: {
         id: null,
         label: null,
@@ -137,7 +137,7 @@ describe('Test renderTaskRows', () => {
       },
       dagRuns: [],
     };
-    const task = mockTreeData.groups;
+    const task = mockGridData.groups;
 
     const { queryByTestId, getByText } = render(
       <>{renderTaskRows({ task, dagRunIds: [] })}</>,
diff --git a/airflow/www/static/js/tree/utils/treeData.js b/airflow/www/static/js/grid/utils/gridData.js
similarity index 100%
rename from airflow/www/static/js/tree/utils/treeData.js
rename to airflow/www/static/js/grid/utils/gridData.js
diff --git a/airflow/www/static/js/tree/utils/testUtils.jsx b/airflow/www/static/js/grid/utils/testUtils.jsx
similarity index 100%
rename from airflow/www/static/js/tree/utils/testUtils.jsx
rename to airflow/www/static/js/grid/utils/testUtils.jsx
diff --git a/airflow/www/static/js/tree/utils/useErrorToast.js b/airflow/www/static/js/grid/utils/useErrorToast.js
similarity index 100%
rename from airflow/www/static/js/tree/utils/useErrorToast.js
rename to airflow/www/static/js/grid/utils/useErrorToast.js
diff --git a/airflow/www/static/js/tree/utils/useSelection.jsx b/airflow/www/static/js/grid/utils/useSelection.jsx
similarity index 100%
rename from airflow/www/static/js/tree/utils/useSelection.jsx
rename to airflow/www/static/js/grid/utils/useSelection.jsx
diff --git a/airflow/www/templates/airflow/chart.html b/airflow/www/templates/airflow/chart.html
index 3f34023428abe..040dcd98b73b6 100644
--- a/airflow/www/templates/airflow/chart.html
+++ b/airflow/www/templates/airflow/chart.html
@@ -23,7 +23,7 @@
 
 {% block head_css %}
   {{ super() }}
-  <link rel="stylesheet" type="text/css" href="{{ url_for_asset('tree.css') }}">
+  <link rel="stylesheet" type="text/css" href="{{ url_for_asset('grid.css') }}">
   <link rel="stylesheet" type="text/css" href="{{ url_for_asset('nv.d3.min.css') }}">
   <script src="{{ url_for_asset('d3.min.js') }}"></script>
   <script src="{{ url_for_asset('nv.d3.min.js') }}"></script>
diff --git a/airflow/www/templates/airflow/dag.html b/airflow/www/templates/airflow/dag.html
index 70adcf81d1f30..ee7dd64994c66 100644
--- a/airflow/www/templates/airflow/dag.html
+++ b/airflow/www/templates/airflow/dag.html
@@ -53,7 +53,7 @@
   <meta name="failed_url" content="{{ url_for('Airflow.failed') }}">
   <meta name="success_url" content="{{ url_for('Airflow.success') }}">
   <meta name="confirm_url" content="{{ url_for('Airflow.confirm') }}">
-  <meta name="tree_data_url" content="{{ url_for('Airflow.tree_data') }}">
+  <meta name="grid_data_url" content="{{ url_for('Airflow.grid_data') }}">
   <meta name="run_url" content="{{ url_for('Airflow.run') }}">
   <meta name="grid_url" content="{{ url_for('Airflow.grid', dag_id=dag.dag_id) }}">
   <meta name="grid_url_no_root" content="{{ url_for('Airflow.grid', dag_id=dag.dag_id, num_runs=num_runs_arg, base_date=base_date_arg) }}">
diff --git a/airflow/www/templates/airflow/duration_chart.html b/airflow/www/templates/airflow/duration_chart.html
index 7fdbb21b9ea0c..eddc4c334f8e3 100644
--- a/airflow/www/templates/airflow/duration_chart.html
+++ b/airflow/www/templates/airflow/duration_chart.html
@@ -22,7 +22,7 @@
 
 {% block head_css %}
   {{ super() }}
-  <link rel="stylesheet" type="text/css" href="{{ url_for_asset('tree.css') }}">
+  <link rel="stylesheet" type="text/css" href="{{ url_for_asset('grid.css') }}">
   <link rel="stylesheet" type="text/css" href="{{ url_for_asset('nv.d3.min.css') }}">
   <script src="{{ url_for_asset('d3.min.js') }}"></script>
   <script src="{{ url_for_asset('nv.d3.min.js') }}"></script>
diff --git a/airflow/www/templates/airflow/gantt.html b/airflow/www/templates/airflow/gantt.html
index 9e5606c3310b5..e6711749c7965 100644
--- a/airflow/www/templates/airflow/gantt.html
+++ b/airflow/www/templates/airflow/gantt.html
@@ -24,7 +24,7 @@
 {% block head_css %}
   {{ super() }}
   <link rel="stylesheet" type="text/css" href="{{ url_for_asset('gantt.css') }}">
-  <link rel="stylesheet" type="text/css" href="{{ url_for_asset('tree.css') }}">
+  <link rel="stylesheet" type="text/css" href="{{ url_for_asset('grid.css') }}">
   <style type="text/css">
     {% for state, state_color in state_color_mapping.items() %}
       rect.{{state}} {
diff --git a/airflow/www/templates/airflow/tree.html b/airflow/www/templates/airflow/grid.html
similarity index 97%
rename from airflow/www/templates/airflow/tree.html
rename to airflow/www/templates/airflow/grid.html
index 1394cbc61bc01..06461d42b46f6 100644
--- a/airflow/www/templates/airflow/tree.html
+++ b/airflow/www/templates/airflow/grid.html
@@ -78,9 +78,9 @@
 {% block tail_js %}
   {{ super() }}
   <script>
-    const treeData = {{ data|tojson }};
+    const gridData = {{ data|tojson }};
     const stateColors = {{ state_color_mapping|tojson }};
     const autoRefreshInterval = {{ auto_refresh_interval }};
   </script>
-  <script src="{{ url_for_asset('tree.js') }}"></script>
+  <script src="{{ url_for_asset('grid.js') }}"></script>
 {% endblock %}
diff --git a/airflow/www/views.py b/airflow/www/views.py
index 8777f4e1c46f2..f4c6fa974f030 100644
--- a/airflow/www/views.py
+++ b/airflow/www/views.py
@@ -231,7 +231,7 @@ def get_date_time_num_runs_dag_runs_form_data(www_request, session, dag):
     }
 
 
-def task_group_to_tree(task_item_or_group, dag, dag_runs, tis, session):
+def task_group_to_grid(task_item_or_group, dag, dag_runs, tis, session):
     """
     Create a nested dict representation of this TaskGroup and its children used to construct
     the Graph.
@@ -253,7 +253,7 @@ def task_group_to_tree(task_item_or_group, dag, dag_runs, tis, session):
     task_group = task_item_or_group
 
     children = [
-        task_group_to_tree(child, dag, dag_runs, tis, session) for child in task_group.topological_sort()
+        task_group_to_grid(child, dag, dag_runs, tis, session) for child in task_group.topological_sort()
     ]
 
     def get_summary(dag_run, children):
@@ -2613,7 +2613,7 @@ def grid(self, dag_id, session=None):
         tis = dag.get_task_instances(start_date=min_date, end_date=base_date, session=session)
 
         data = {
-            'groups': task_group_to_tree(dag.task_group, dag, dag_runs, tis, session),
+            'groups': task_group_to_grid(dag.task_group, dag, dag_runs, tis, session),
             'dag_runs': encoded_runs,
         }
 
@@ -2621,7 +2621,7 @@ def grid(self, dag_id, session=None):
         data = htmlsafe_json_dumps(data, separators=(',', ':'))
 
         return self.render_template(
-            'airflow/tree.html',
+            'airflow/grid.html',
             operators=sorted({op.task_type: op for op in dag.tasks}.values(), key=lambda x: x.task_type),
             root=root,
             form=form,
@@ -3444,15 +3444,15 @@ def task_instances(self):
 
         return json.dumps(task_instances, cls=utils_json.AirflowJsonEncoder)
 
-    @expose('/object/tree_data')
+    @expose('/object/grid_data')
     @auth.has_access(
         [
             (permissions.ACTION_CAN_READ, permissions.RESOURCE_DAG),
             (permissions.ACTION_CAN_READ, permissions.RESOURCE_TASK_INSTANCE),
         ]
     )
-    def tree_data(self):
-        """Returns tree data"""
+    def grid_data(self):
+        """Returns grid data"""
         dag_id = request.args.get('dag_id')
         dag = current_app.dag_bag.get_dag(dag_id)
 
@@ -3488,7 +3488,7 @@ def tree_data(self):
             min_date = min(dag_run_dates, default=None)
             tis = dag.get_task_instances(start_date=min_date, end_date=base_date, session=session)
             data = {
-                'groups': task_group_to_tree(dag.task_group, dag, dag_runs, tis, session),
+                'groups': task_group_to_grid(dag.task_group, dag, dag_runs, tis, session),
                 'dag_runs': encoded_runs,
             }
 
diff --git a/airflow/www/webpack.config.js b/airflow/www/webpack.config.js
index 548fbb09becb5..32d7e7370f047 100644
--- a/airflow/www/webpack.config.js
+++ b/airflow/www/webpack.config.js
@@ -73,7 +73,7 @@ const config = {
     task: `${JS_DIR}/task.js`,
     taskInstances: `${JS_DIR}/task_instances.js`,
     tiLog: `${JS_DIR}/ti_log.js`,
-    tree: [`${CSS_DIR}/tree.css`, `${JS_DIR}/tree/index.jsx`],
+    grid: [`${CSS_DIR}/grid.css`, `${JS_DIR}/grid/index.jsx`],
     calendar: [`${CSS_DIR}/calendar.css`, `${JS_DIR}/calendar.js`],
     durationChart: `${JS_DIR}/duration_chart.js`,
     trigger: `${JS_DIR}/trigger.js`,