From 12488c7b40bbb8d060138760aa780dec4a1165fc Mon Sep 17 00:00:00 2001
From: Victor Chiapaikeo <vchiapaikeo@gmail.com>
Date: Fri, 3 Nov 2023 07:06:38 -0400
Subject: [PATCH 1/8] Add multiselect to run state in grid view

---
 airflow/www/static/js/dag/nav/FilterBar.tsx | 54 +++++++++++++++------
 airflow/www/static/js/dag/useFilters.tsx    | 25 ++++++++--
 airflow/www/views.py                        |  7 +--
 tests/www/views/test_views_grid.py          | 11 +++++
 4 files changed, 76 insertions(+), 21 deletions(-)

diff --git a/airflow/www/static/js/dag/nav/FilterBar.tsx b/airflow/www/static/js/dag/nav/FilterBar.tsx
index fc3a56f1d5a3f..15b15f989de15 100644
--- a/airflow/www/static/js/dag/nav/FilterBar.tsx
+++ b/airflow/www/static/js/dag/nav/FilterBar.tsx
@@ -20,9 +20,11 @@
 /* global moment */
 
 import { Box, Button, Flex, Input, Select } from "@chakra-ui/react";
+import MultiSelect from "src/components/MultiSelect";
 import React from "react";
 import type { DagRun, RunState, TaskState } from "src/types";
 import AutoRefresh from "src/components/AutoRefresh";
+import type { Size } from "chakra-react-select";
 
 import { useTimezone } from "src/context/timezone";
 import { isoFormatWithoutTZ } from "src/datetime_utils";
@@ -51,7 +53,10 @@ const FilterBar = () => {
   // @ts-ignore
   const formattedTime = time.tz(timezone).format(isoFormatWithoutTZ);
 
-  const inputStyles = { backgroundColor: "white", size: "lg" };
+  const inputStyles: { backgroundColor: string; size: Size } = {
+    backgroundColor: "white",
+    size: "lg",
+  };
 
   return (
     <Flex
@@ -100,21 +105,40 @@ const FilterBar = () => {
           </Select>
         </Box>
         <Box />
-        <Box px={2}>
-          <Select
+        <Box px={2} minWidth="max-content">
+          <MultiSelect
             {...inputStyles}
-            value={filters.runState || ""}
-            onChange={(e) => onRunStateChange(e.target.value)}
-          >
-            <option value="" key="all">
-              All Run States
-            </option>
-            {filtersOptions.dagStates.map((value) => (
-              <option value={value} key={value}>
-                {value}
-              </option>
-            ))}
-          </Select>
+            isMulti
+            value={
+              filters.runState === null
+                ? []
+                : filters.runState
+                    .split(",")
+                    .map((option) => ({ label: option, value: option }))
+            }
+            onChange={(stateOptions) =>
+              onRunStateChange(
+                stateOptions.map((stateOption) => stateOption.value).join(",")
+              )
+            }
+            options={
+              filters.runStateOptions === null
+                ? []
+                : filters.runStateOptions
+                    .split(",")
+                    .map((option) => ({ label: option, value: option }))
+            }
+            placeholder="All State Types"
+            hideSelectedOptions
+            tagVariant="solid"
+            isClearable={false}
+            chakraStyles={{
+              container: (provided) => ({
+                ...provided,
+                bg: "white",
+              }),
+            }}
+          />
         </Box>
         <Box px={2}>
           <Button
diff --git a/airflow/www/static/js/dag/useFilters.tsx b/airflow/www/static/js/dag/useFilters.tsx
index 7b8b998aac372..a8ae580729c25 100644
--- a/airflow/www/static/js/dag/useFilters.tsx
+++ b/airflow/www/static/js/dag/useFilters.tsx
@@ -21,9 +21,17 @@
 
 import { useSearchParams } from "react-router-dom";
 import URLSearchParamsWrapper from "src/utils/URLSearchParamWrapper";
+import type { DagRun, RunState, TaskState } from "src/types";
 
 declare const defaultDagRunDisplayNumber: number;
 
+declare const filtersOptions: {
+  dagStates: RunState[];
+  numRuns: number[];
+  runTypes: DagRun["runType"][];
+  taskStates: TaskState[];
+};
+
 export interface Filters {
   root: string | undefined;
   filterUpstream: boolean | undefined;
@@ -32,6 +40,7 @@ export interface Filters {
   numRuns: string | null;
   runType: string | null;
   runState: string | null;
+  runStateOptions: string | null;
 }
 
 export interface FilterTasksProps {
@@ -84,10 +93,12 @@ const useFilters = (): FilterHookReturn => {
   const numRuns =
     searchParams.get(NUM_RUNS_PARAM) || defaultDagRunDisplayNumber.toString();
   const runType = searchParams.get(RUN_TYPE_PARAM);
-  const runState = searchParams.get(RUN_STATE_PARAM);
+
+  const runStateOptions = filtersOptions.dagStates.join(",");
+  const runState = searchParams.get(RUN_STATE_PARAM) || runStateOptions;
 
   const makeOnChangeFn =
-    (paramName: string, formatFn?: (arg: string) => string) =>
+    (paramName: string, formatFn?: (arg: string) => string | null) =>
     (value: string) => {
       const formattedValue = formatFn ? formatFn(value) : value;
       const params = new URLSearchParamsWrapper(searchParams);
@@ -105,7 +116,14 @@ const useFilters = (): FilterHookReturn => {
   );
   const onNumRunsChange = makeOnChangeFn(NUM_RUNS_PARAM);
   const onRunTypeChange = makeOnChangeFn(RUN_TYPE_PARAM);
-  const onRunStateChange = makeOnChangeFn(RUN_STATE_PARAM);
+  const onRunStateChange = makeOnChangeFn(RUN_STATE_PARAM, (arg) => {
+    // With MultiSelect, delete uri param when arg length is equal to all of
+    // the options or when it is equal to none of the options
+    const argLength = arg.split(",").length;
+    return argLength === filtersOptions.dagStates.length || argLength === 0
+      ? null
+      : arg;
+  });
 
   const onFilterTasksChange = ({
     root: newRoot,
@@ -155,6 +173,7 @@ const useFilters = (): FilterHookReturn => {
       numRuns,
       runType,
       runState,
+      runStateOptions,
     },
     onBaseDateChange,
     onNumRunsChange,
diff --git a/airflow/www/views.py b/airflow/www/views.py
index 3e4ed75a5953c..69deb33516099 100644
--- a/airflow/www/views.py
+++ b/airflow/www/views.py
@@ -3531,9 +3531,10 @@ def grid_data(self):
         if run_type:
             query = query.where(DagRun.run_type == run_type)
 
-        run_state = request.args.get("run_state")
-        if run_state:
-            query = query.where(DagRun.state == run_state)
+        run_state_raw = request.args.get("run_state")
+        if run_state_raw:
+            run_states = {run_state.strip() for run_state in run_state_raw.split(",")}
+            query = query.where(DagRun.state.in_(run_states))
 
         dag_runs = wwwutils.sorted_dag_runs(
             query, ordering=dag.timetable.run_ordering, limit=num_runs, session=session
diff --git a/tests/www/views/test_views_grid.py b/tests/www/views/test_views_grid.py
index 4d0b6a7ffc04f..77a2fff5fd06f 100644
--- a/tests/www/views/test_views_grid.py
+++ b/tests/www/views/test_views_grid.py
@@ -162,6 +162,17 @@ def test_no_runs(admin_client, dag_without_runs):
     }
 
 
+def test_grid_data_filtered_on_run_state(admin_client, dag_with_runs):
+    for run_state_param, expected_states in [
+        ("run_state=success%2Cqueued", ["success"]),
+        ("run_state=running%2Cfailed", ["running"]),
+    ]:
+        resp = admin_client.get(f"/object/grid_data?dag_id={DAG_ID}&{run_state_param}", follow_redirects=True)
+        assert resp.status_code == 200, resp.json
+        actual_states = list(map(lambda x: x["state"], resp.json["dag_runs"]))
+        assert actual_states == expected_states
+
+
 # Create this as a fixture so that it is applied before the `dag_with_runs` fixture is!
 @pytest.fixture
 def freeze_time_for_dagruns(time_machine):

From d87d34f03f9e59a07fb4d6dbf3c33ac4a1069bd2 Mon Sep 17 00:00:00 2001
From: Victor Chiapaikeo <vchiapaikeo@gmail.com>
Date: Fri, 3 Nov 2023 07:51:33 -0400
Subject: [PATCH 2/8] Fix tests

---
 airflow/www/jest-setup.js                     |  4 ++++
 airflow/www/static/js/dag/useFilters.test.tsx | 10 +++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/airflow/www/jest-setup.js b/airflow/www/jest-setup.js
index 48b4e190699ca..d10d95c807231 100644
--- a/airflow/www/jest-setup.js
+++ b/airflow/www/jest-setup.js
@@ -58,6 +58,10 @@ global.stateColors = {
 
 global.defaultDagRunDisplayNumber = 245;
 
+global.filtersOptions = {
+  dagStates: ["success", "running", "queued", "failed"],
+};
+
 global.moment = moment;
 
 global.standaloneDagProcessor = true;
diff --git a/airflow/www/static/js/dag/useFilters.test.tsx b/airflow/www/static/js/dag/useFilters.test.tsx
index ce4a03d7b3ef0..e23b8728e4984 100644
--- a/airflow/www/static/js/dag/useFilters.test.tsx
+++ b/airflow/www/static/js/dag/useFilters.test.tsx
@@ -21,11 +21,15 @@
 import { act, renderHook } from "@testing-library/react";
 
 import { RouterWrapper } from "src/utils/testUtils";
+import type { RunState } from "src/types";
 
 declare global {
   namespace NodeJS {
     interface Global {
       defaultDagRunDisplayNumber: number;
+      filtersOptions: {
+        dagStates: RunState[];
+      };
     }
   }
 }
@@ -63,7 +67,7 @@ describe("Test useFilters hook", () => {
     expect(baseDate).toBe(date.toISOString());
     expect(numRuns).toBe(global.defaultDagRunDisplayNumber.toString());
     expect(runType).toBeNull();
-    expect(runState).toBeNull();
+    expect(runState).toBe(global.filtersOptions.dagStates.join(","));
     expect(root).toBeUndefined();
     expect(filterUpstream).toBeUndefined();
     expect(filterDownstream).toBeUndefined();
@@ -114,6 +118,10 @@ describe("Test useFilters hook", () => {
       expect(result.current.filters[paramName]).toBe(
         global.defaultDagRunDisplayNumber.toString()
       );
+    } else if (paramName === "runState") {
+      expect(result.current.filters[paramName]).toBe(
+        global.filtersOptions.dagStates.join(",")
+      );
     } else {
       expect(result.current.filters[paramName]).toBeNull();
     }

From eccd5f7056c7ac1e9a42443232bb87abd2b8cf1b Mon Sep 17 00:00:00 2001
From: Victor Chiapaikeo <vchiapaikeo@gmail.com>
Date: Fri, 17 Nov 2023 21:17:33 -0500
Subject: [PATCH 3/8] Multiselect for run types, UI nits, refactor

---
 airflow/www/static/js/dag/nav/FilterBar.tsx | 119 +++++++++++++-------
 airflow/www/static/js/dag/useFilters.tsx    |  31 +++--
 airflow/www/views.py                        |   7 +-
 3 files changed, 101 insertions(+), 56 deletions(-)

diff --git a/airflow/www/static/js/dag/nav/FilterBar.tsx b/airflow/www/static/js/dag/nav/FilterBar.tsx
index 15b15f989de15..5e807d1e5dff7 100644
--- a/airflow/www/static/js/dag/nav/FilterBar.tsx
+++ b/airflow/www/static/js/dag/nav/FilterBar.tsx
@@ -25,6 +25,7 @@ import React from "react";
 import type { DagRun, RunState, TaskState } from "src/types";
 import AutoRefresh from "src/components/AutoRefresh";
 import type { Size } from "chakra-react-select";
+import { useChakraSelectProps } from "chakra-react-select";
 
 import { useTimezone } from "src/context/timezone";
 import { isoFormatWithoutTZ } from "src/datetime_utils";
@@ -58,6 +59,45 @@ const FilterBar = () => {
     size: "lg",
   };
 
+  const multiSelectBoxStyle = { minWidth: "160px", zIndex: 3 };
+  const multiSelectStyles = useChakraSelectProps({
+    ...inputStyles,
+    isMulti: true,
+    tagVariant: "solid",
+    hideSelectedOptions: false,
+    isClearable: false,
+    selectedOptionStyle: "check",
+    chakraStyles: {
+      container: (provided) => ({
+        ...provided,
+        bg: "white",
+      }),
+    },
+  });
+
+  const transformCsvToMultiSelectOptions = (
+    options: string | null
+  ): { label: string; value: string }[] =>
+    options === null
+      ? []
+      : options.split(",").map((option) => ({ label: option, value: option }));
+  const transformCsvToMultiSelectValue = (
+    values: string | null
+  ): { label: string; value: string }[] =>
+    values === null
+      ? []
+      : values.split(",").map((option) => ({ label: option, value: option }));
+
+  const runTypeOptionsDeserialized = transformCsvToMultiSelectOptions(
+    filters.runTypeOptions
+  );
+  const runTypeDeserialized = transformCsvToMultiSelectValue(filters.runType);
+
+  const runStateOptionsDeserialized = transformCsvToMultiSelectOptions(
+    filters.runStateOptions
+  );
+  const runStateDeserialized = transformCsvToMultiSelectValue(filters.runState);
+
   return (
     <Flex
       backgroundColor="blackAlpha.200"
@@ -88,56 +128,49 @@ const FilterBar = () => {
             ))}
           </Select>
         </Box>
-        <Box px={2}>
-          <Select
-            {...inputStyles}
-            value={filters.runType || ""}
-            onChange={(e) => onRunTypeChange(e.target.value)}
-          >
-            <option value="" key="all">
-              All Run Types
-            </option>
-            {filtersOptions.runTypes.map((value) => (
-              <option value={value.toString()} key={value}>
-                {value}
-              </option>
-            ))}
-          </Select>
-        </Box>
-        <Box />
-        <Box px={2} minWidth="max-content">
+        <Box px={2} style={multiSelectBoxStyle}>
           <MultiSelect
-            {...inputStyles}
-            isMulti
+            {...multiSelectStyles}
             value={
-              filters.runState === null
+              runTypeDeserialized.length === runTypeOptionsDeserialized.length
                 ? []
-                : filters.runState
-                    .split(",")
-                    .map((option) => ({ label: option, value: option }))
-            }
-            onChange={(stateOptions) =>
-              onRunStateChange(
-                stateOptions.map((stateOption) => stateOption.value).join(",")
-              )
+                : runTypeDeserialized
             }
-            options={
-              filters.runStateOptions === null
+            onChange={(typeOptions) => {
+              if (
+                Array.isArray(typeOptions) &&
+                typeOptions.every((typeOption) => "value" in typeOption)
+              ) {
+                onRunTypeChange(
+                  typeOptions.map((typeOption) => typeOption.value).join(",")
+                );
+              }
+            }}
+            options={runTypeOptionsDeserialized}
+            placeholder="All Run Types"
+          />
+        </Box>
+        <Box />
+        <Box px={2} style={multiSelectBoxStyle}>
+          <MultiSelect
+            {...multiSelectStyles}
+            value={
+              runStateDeserialized.length === runStateOptionsDeserialized.length
                 ? []
-                : filters.runStateOptions
-                    .split(",")
-                    .map((option) => ({ label: option, value: option }))
+                : runStateDeserialized
             }
-            placeholder="All State Types"
-            hideSelectedOptions
-            tagVariant="solid"
-            isClearable={false}
-            chakraStyles={{
-              container: (provided) => ({
-                ...provided,
-                bg: "white",
-              }),
+            onChange={(stateOptions) => {
+              if (
+                Array.isArray(stateOptions) &&
+                stateOptions.every((stateOption) => "value" in stateOption)
+              ) {
+                onRunStateChange(
+                  stateOptions.map((stateOption) => stateOption.value).join(",")
+                );
+              }
             }}
+            options={runStateOptionsDeserialized}
+            placeholder="All Run States"
           />
         </Box>
         <Box px={2}>
diff --git a/airflow/www/static/js/dag/useFilters.tsx b/airflow/www/static/js/dag/useFilters.tsx
index a8ae580729c25..cbd3ee6bbb351 100644
--- a/airflow/www/static/js/dag/useFilters.tsx
+++ b/airflow/www/static/js/dag/useFilters.tsx
@@ -39,6 +39,7 @@ export interface Filters {
   baseDate: string | null;
   numRuns: string | null;
   runType: string | null;
+  runTypeOptions: string | null;
   runState: string | null;
   runStateOptions: string | null;
 }
@@ -92,7 +93,9 @@ const useFilters = (): FilterHookReturn => {
   const baseDate = searchParams.get(BASE_DATE_PARAM) || now;
   const numRuns =
     searchParams.get(NUM_RUNS_PARAM) || defaultDagRunDisplayNumber.toString();
-  const runType = searchParams.get(RUN_TYPE_PARAM);
+
+  const runTypeOptions = filtersOptions.runTypes.join(",");
+  const runType = searchParams.get(RUN_TYPE_PARAM) || runTypeOptions;
 
   const runStateOptions = filtersOptions.dagStates.join(",");
   const runState = searchParams.get(RUN_STATE_PARAM) || runStateOptions;
@@ -109,21 +112,28 @@ const useFilters = (): FilterHookReturn => {
       setSearchParams(params);
     };
 
+  const getMultiSelectFormatFn = (options: string[]) => {
+    const formatFn = (arg: string) => {
+      const argLength = arg.split(",").length;
+      return argLength === options.length || argLength === 0 ? null : arg;
+    };
+    return formatFn;
+  };
+
   const onBaseDateChange = makeOnChangeFn(
     BASE_DATE_PARAM,
     // @ts-ignore
     (localDate: string) => moment(localDate).utc().format()
   );
   const onNumRunsChange = makeOnChangeFn(NUM_RUNS_PARAM);
-  const onRunTypeChange = makeOnChangeFn(RUN_TYPE_PARAM);
-  const onRunStateChange = makeOnChangeFn(RUN_STATE_PARAM, (arg) => {
-    // With MultiSelect, delete uri param when arg length is equal to all of
-    // the options or when it is equal to none of the options
-    const argLength = arg.split(",").length;
-    return argLength === filtersOptions.dagStates.length || argLength === 0
-      ? null
-      : arg;
-  });
+  const onRunTypeChange = makeOnChangeFn(
+    RUN_TYPE_PARAM,
+    getMultiSelectFormatFn(filtersOptions.runTypes)
+  );
+  const onRunStateChange = makeOnChangeFn(
+    RUN_STATE_PARAM,
+    getMultiSelectFormatFn(filtersOptions.dagStates)
+  );
 
   const onFilterTasksChange = ({
     root: newRoot,
@@ -172,6 +182,7 @@ const useFilters = (): FilterHookReturn => {
       baseDate,
       numRuns,
       runType,
+      runTypeOptions,
       runState,
       runStateOptions,
     },
diff --git a/airflow/www/views.py b/airflow/www/views.py
index 69deb33516099..eb6bc033c2933 100644
--- a/airflow/www/views.py
+++ b/airflow/www/views.py
@@ -3527,9 +3527,10 @@ def grid_data(self):
         with create_session() as session:
             query = select(DagRun).where(DagRun.dag_id == dag.dag_id, DagRun.execution_date <= base_date)
 
-        run_type = request.args.get("run_type")
-        if run_type:
-            query = query.where(DagRun.run_type == run_type)
+        run_type_raw = request.args.get("run_type")
+        if run_type_raw:
+            run_types = {run_type.strip() for run_type in run_type_raw.split(",")}
+            query = query.where(DagRun.run_type.in_(run_types))
 
         run_state_raw = request.args.get("run_state")
         if run_state_raw:

From 2e4f505c9dcee7776beffbc359943f5ef0bb12e3 Mon Sep 17 00:00:00 2001
From: Victor Chiapaikeo <vchiapaikeo@gmail.com>
Date: Sat, 18 Nov 2023 08:20:12 -0500
Subject: [PATCH 4/8] Fix tests, refactor

---
 airflow/www/jest-setup.js                     |  2 ++
 airflow/www/static/js/dag/nav/FilterBar.tsx   | 21 +++++--------------
 airflow/www/static/js/dag/useFilters.test.tsx | 19 +++++++++++------
 airflow/www/static/js/dag/useFilters.tsx      | 15 +++++++++++--
 tests/www/views/test_views_grid.py            | 20 +++++++++++-------
 5 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/airflow/www/jest-setup.js b/airflow/www/jest-setup.js
index d10d95c807231..f5a269cfa2a5d 100644
--- a/airflow/www/jest-setup.js
+++ b/airflow/www/jest-setup.js
@@ -59,7 +59,9 @@ global.stateColors = {
 global.defaultDagRunDisplayNumber = 245;
 
 global.filtersOptions = {
+  // Must stay in sync with airflow/www/static/js/types/index.ts
   dagStates: ["success", "running", "queued", "failed"],
+  runTypes: ["manual", "backfill", "scheduled", "dataset_triggered"],
 };
 
 global.moment = moment;
diff --git a/airflow/www/static/js/dag/nav/FilterBar.tsx b/airflow/www/static/js/dag/nav/FilterBar.tsx
index 5e807d1e5dff7..4d85334e08806 100644
--- a/airflow/www/static/js/dag/nav/FilterBar.tsx
+++ b/airflow/www/static/js/dag/nav/FilterBar.tsx
@@ -46,6 +46,7 @@ const FilterBar = () => {
     onRunTypeChange,
     onRunStateChange,
     clearFilters,
+    transformCsvToMultiSelectOptions,
   } = useFilters();
 
   const { timezone } = useTimezone();
@@ -75,28 +76,16 @@ const FilterBar = () => {
     },
   });
 
-  const transformCsvToMultiSelectOptions = (
-    options: string | null
-  ): { label: string; value: string }[] =>
-    options === null
-      ? []
-      : options.split(",").map((option) => ({ label: option, value: option }));
-  const transformCsvToMultiSelectValue = (
-    values: string | null
-  ): { label: string; value: string }[] =>
-    values === null
-      ? []
-      : values.split(",").map((option) => ({ label: option, value: option }));
-
   const runTypeOptionsDeserialized = transformCsvToMultiSelectOptions(
     filters.runTypeOptions
   );
-  const runTypeDeserialized = transformCsvToMultiSelectValue(filters.runType);
-
+  const runTypeDeserialized = transformCsvToMultiSelectOptions(filters.runType);
   const runStateOptionsDeserialized = transformCsvToMultiSelectOptions(
     filters.runStateOptions
   );
-  const runStateDeserialized = transformCsvToMultiSelectValue(filters.runState);
+  const runStateDeserialized = transformCsvToMultiSelectOptions(
+    filters.runState
+  );
 
   return (
     <Flex
diff --git a/airflow/www/static/js/dag/useFilters.test.tsx b/airflow/www/static/js/dag/useFilters.test.tsx
index e23b8728e4984..5ecb7fb88785c 100644
--- a/airflow/www/static/js/dag/useFilters.test.tsx
+++ b/airflow/www/static/js/dag/useFilters.test.tsx
@@ -21,7 +21,7 @@
 import { act, renderHook } from "@testing-library/react";
 
 import { RouterWrapper } from "src/utils/testUtils";
-import type { RunState } from "src/types";
+import type { DagRun, RunState } from "src/types";
 
 declare global {
   namespace NodeJS {
@@ -29,6 +29,7 @@ declare global {
       defaultDagRunDisplayNumber: number;
       filtersOptions: {
         dagStates: RunState[];
+        runTypes: DagRun["runType"][];
       };
     }
   }
@@ -67,7 +68,7 @@ describe("Test useFilters hook", () => {
     expect(baseDate).toBe(date.toISOString());
     expect(numRuns).toBe(global.defaultDagRunDisplayNumber.toString());
     expect(runType).toBeNull();
-    expect(runState).toBe(global.filtersOptions.dagStates.join(","));
+    expect(runState).toBeNull();
     expect(root).toBeUndefined();
     expect(filterUpstream).toBeUndefined();
     expect(filterDownstream).toBeUndefined();
@@ -90,11 +91,21 @@ describe("Test useFilters hook", () => {
       paramName: "runType" as keyof Filters,
       paramValue: "manual",
     },
+    {
+      fnName: "onRunTypeChange" as keyof UtilFunctions,
+      paramName: "runType" as keyof Filters,
+      paramValue: "manual,backfill",
+    },
     {
       fnName: "onRunStateChange" as keyof UtilFunctions,
       paramName: "runState" as keyof Filters,
       paramValue: "success",
     },
+    {
+      fnName: "onRunStateChange" as keyof UtilFunctions,
+      paramName: "runState" as keyof Filters,
+      paramValue: "success,failed,queued",
+    },
   ])("Test $fnName functions", async ({ fnName, paramName, paramValue }) => {
     const { result } = renderHook<FilterHookReturn, undefined>(
       () => useFilters(),
@@ -118,10 +129,6 @@ describe("Test useFilters hook", () => {
       expect(result.current.filters[paramName]).toBe(
         global.defaultDagRunDisplayNumber.toString()
       );
-    } else if (paramName === "runState") {
-      expect(result.current.filters[paramName]).toBe(
-        global.filtersOptions.dagStates.join(",")
-      );
     } else {
       expect(result.current.filters[paramName]).toBeNull();
     }
diff --git a/airflow/www/static/js/dag/useFilters.tsx b/airflow/www/static/js/dag/useFilters.tsx
index cbd3ee6bbb351..5136456c13e3d 100644
--- a/airflow/www/static/js/dag/useFilters.tsx
+++ b/airflow/www/static/js/dag/useFilters.tsx
@@ -56,6 +56,9 @@ export interface UtilFunctions {
   onRunTypeChange: (value: string) => void;
   onRunStateChange: (value: string) => void;
   onFilterTasksChange: (args: FilterTasksProps) => void;
+  transformCsvToMultiSelectOptions: (
+    options: string | null
+  ) => { label: string; value: string }[];
   clearFilters: () => void;
   resetRoot: () => void;
 }
@@ -95,10 +98,10 @@ const useFilters = (): FilterHookReturn => {
     searchParams.get(NUM_RUNS_PARAM) || defaultDagRunDisplayNumber.toString();
 
   const runTypeOptions = filtersOptions.runTypes.join(",");
-  const runType = searchParams.get(RUN_TYPE_PARAM) || runTypeOptions;
+  const runType = searchParams.get(RUN_TYPE_PARAM);
 
   const runStateOptions = filtersOptions.dagStates.join(",");
-  const runState = searchParams.get(RUN_STATE_PARAM) || runStateOptions;
+  const runState = searchParams.get(RUN_STATE_PARAM);
 
   const makeOnChangeFn =
     (paramName: string, formatFn?: (arg: string) => string | null) =>
@@ -120,6 +123,13 @@ const useFilters = (): FilterHookReturn => {
     return formatFn;
   };
 
+  const transformCsvToMultiSelectOptions = (
+    options: string | null
+  ): { label: string; value: string }[] =>
+    options === null
+      ? []
+      : options.split(",").map((option) => ({ label: option, value: option }));
+
   const onBaseDateChange = makeOnChangeFn(
     BASE_DATE_PARAM,
     // @ts-ignore
@@ -193,6 +203,7 @@ const useFilters = (): FilterHookReturn => {
     onFilterTasksChange,
     clearFilters,
     resetRoot,
+    transformCsvToMultiSelectOptions,
   };
 };
 
diff --git a/tests/www/views/test_views_grid.py b/tests/www/views/test_views_grid.py
index 77a2fff5fd06f..3b5fb46999de1 100644
--- a/tests/www/views/test_views_grid.py
+++ b/tests/www/views/test_views_grid.py
@@ -162,15 +162,21 @@ def test_no_runs(admin_client, dag_without_runs):
     }
 
 
-def test_grid_data_filtered_on_run_state(admin_client, dag_with_runs):
-    for run_state_param, expected_states in [
-        ("run_state=success%2Cqueued", ["success"]),
-        ("run_state=running%2Cfailed", ["running"]),
+def test_grid_data_filtered_on_run_type_and_run_state(admin_client, dag_with_runs):
+    for uri_params, expected_run_types, expected_run_states in [
+        ("run_state=success%2Cqueued", ["scheduled"], ["success"]),
+        ("run_state=running%2Cfailed", ["scheduled"], ["running"]),
+        ("run_type=scheduled%2Cmanual", ["scheduled", "scheduled"], ["success", "running"]),
+        ("run_type=backfill%2Cmanual", [], []),
+        ("run_state=running%2Cfailed&run_type=backfill%2Cmanual", [], []),
+        ("run_state=running%2Cfailed&run_type=scheduled%2Cbackfill%2Cmanual", ["scheduled"], ["running"]),
     ]:
-        resp = admin_client.get(f"/object/grid_data?dag_id={DAG_ID}&{run_state_param}", follow_redirects=True)
+        resp = admin_client.get(f"/object/grid_data?dag_id={DAG_ID}&{uri_params}", follow_redirects=True)
         assert resp.status_code == 200, resp.json
-        actual_states = list(map(lambda x: x["state"], resp.json["dag_runs"]))
-        assert actual_states == expected_states
+        actual_run_types = list(map(lambda x: x["run_type"], resp.json["dag_runs"]))
+        actual_run_states = list(map(lambda x: x["state"], resp.json["dag_runs"]))
+        assert actual_run_types == expected_run_types
+        assert actual_run_states == expected_run_states
 
 
 # Create this as a fixture so that it is applied before the `dag_with_runs` fixture is!

From 58e0a4e1401886353940e3060e6589d5ac27d02c Mon Sep 17 00:00:00 2001
From: Victor Chiapaikeo <vchiapaikeo@gmail.com>
Date: Sat, 18 Nov 2023 11:13:30 -0500
Subject: [PATCH 5/8] Simplify multiselect value

---
 airflow/www/static/js/dag/nav/FilterBar.tsx | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/airflow/www/static/js/dag/nav/FilterBar.tsx b/airflow/www/static/js/dag/nav/FilterBar.tsx
index 4d85334e08806..ea5ab9dca755f 100644
--- a/airflow/www/static/js/dag/nav/FilterBar.tsx
+++ b/airflow/www/static/js/dag/nav/FilterBar.tsx
@@ -120,11 +120,7 @@ const FilterBar = () => {
         <Box px={2} style={multiSelectBoxStyle}>
           <MultiSelect
             {...multiSelectStyles}
-            value={
-              runTypeDeserialized.length === runTypeOptionsDeserialized.length
-                ? []
-                : runTypeDeserialized
-            }
+            value={runTypeDeserialized}
             onChange={(typeOptions) => {
               if (
                 Array.isArray(typeOptions) &&
@@ -143,11 +139,7 @@ const FilterBar = () => {
         <Box px={2} style={multiSelectBoxStyle}>
           <MultiSelect
             {...multiSelectStyles}
-            value={
-              runStateDeserialized.length === runStateOptionsDeserialized.length
-                ? []
-                : runStateDeserialized
-            }
+            value={runStateDeserialized}
             onChange={(stateOptions) => {
               if (
                 Array.isArray(stateOptions) &&

From 03c80bd7eac66c4c062370c9f63a5970c34d9027 Mon Sep 17 00:00:00 2001
From: Victor Chiapaikeo <vchiapaikeo@gmail.com>
Date: Sun, 19 Nov 2023 11:03:37 -0500
Subject: [PATCH 6/8] Nits and refactor

---
 airflow/www/static/js/dag/nav/FilterBar.tsx | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/airflow/www/static/js/dag/nav/FilterBar.tsx b/airflow/www/static/js/dag/nav/FilterBar.tsx
index ea5ab9dca755f..dc3136ab21fa4 100644
--- a/airflow/www/static/js/dag/nav/FilterBar.tsx
+++ b/airflow/www/static/js/dag/nav/FilterBar.tsx
@@ -76,17 +76,6 @@ const FilterBar = () => {
     },
   });
 
-  const runTypeOptionsDeserialized = transformCsvToMultiSelectOptions(
-    filters.runTypeOptions
-  );
-  const runTypeDeserialized = transformCsvToMultiSelectOptions(filters.runType);
-  const runStateOptionsDeserialized = transformCsvToMultiSelectOptions(
-    filters.runStateOptions
-  );
-  const runStateDeserialized = transformCsvToMultiSelectOptions(
-    filters.runState
-  );
-
   return (
     <Flex
       backgroundColor="blackAlpha.200"
@@ -120,7 +109,7 @@ const FilterBar = () => {
         <Box px={2} style={multiSelectBoxStyle}>
           <MultiSelect
             {...multiSelectStyles}
-            value={runTypeDeserialized}
+            value={transformCsvToMultiSelectOptions(filters.runType)}
             onChange={(typeOptions) => {
               if (
                 Array.isArray(typeOptions) &&
@@ -131,7 +120,7 @@ const FilterBar = () => {
                 );
               }
             }}
-            options={runTypeOptionsDeserialized}
+            options={transformCsvToMultiSelectOptions(filters.runTypeOptions)}
             placeholder="All Run Types"
           />
         </Box>
@@ -139,7 +128,7 @@ const FilterBar = () => {
         <Box px={2} style={multiSelectBoxStyle}>
           <MultiSelect
             {...multiSelectStyles}
-            value={runStateDeserialized}
+            value={transformCsvToMultiSelectOptions(filters.runState)}
             onChange={(stateOptions) => {
               if (
                 Array.isArray(stateOptions) &&
@@ -150,7 +139,7 @@ const FilterBar = () => {
                 );
               }
             }}
-            options={runStateOptionsDeserialized}
+            options={transformCsvToMultiSelectOptions(filters.runStateOptions)}
             placeholder="All Run States"
           />
         </Box>

From 69ac592d851a9b29c079c170d2974bc2ea5b4861 Mon Sep 17 00:00:00 2001
From: Victor Chiapaikeo <vchiapaikeo@gmail.com>
Date: Tue, 28 Nov 2023 23:04:39 -0500
Subject: [PATCH 7/8] Use arrays instead of serializing to csv

---
 airflow/www/static/js/api/useGridData.ts      |  1 +
 airflow/www/static/js/dag/nav/FilterBar.tsx   | 16 ++---
 airflow/www/static/js/dag/useFilters.test.tsx | 12 ++--
 airflow/www/static/js/dag/useFilters.tsx      | 59 ++++++++++---------
 airflow/www/views.py                          | 10 ++--
 tests/www/views/test_views_grid.py            | 16 +++--
 6 files changed, 63 insertions(+), 51 deletions(-)

diff --git a/airflow/www/static/js/api/useGridData.ts b/airflow/www/static/js/api/useGridData.ts
index a0cbfd6b76555..502877214c83b 100644
--- a/airflow/www/static/js/api/useGridData.ts
+++ b/airflow/www/static/js/api/useGridData.ts
@@ -105,6 +105,7 @@ const useGridData = () => {
       };
       const response = await axios.get<AxiosResponse, GridData>(gridDataUrl, {
         params,
+        paramsSerializer: { indexes: null },
       });
       // turn off auto refresh if there are no active runs
       if (!areActiveRuns(response.dagRuns)) stopRefresh();
diff --git a/airflow/www/static/js/dag/nav/FilterBar.tsx b/airflow/www/static/js/dag/nav/FilterBar.tsx
index dc3136ab21fa4..183f60e357d8c 100644
--- a/airflow/www/static/js/dag/nav/FilterBar.tsx
+++ b/airflow/www/static/js/dag/nav/FilterBar.tsx
@@ -46,7 +46,7 @@ const FilterBar = () => {
     onRunTypeChange,
     onRunStateChange,
     clearFilters,
-    transformCsvToMultiSelectOptions,
+    transformArrayToMultiSelectOptions,
   } = useFilters();
 
   const { timezone } = useTimezone();
@@ -109,18 +109,18 @@ const FilterBar = () => {
         <Box px={2} style={multiSelectBoxStyle}>
           <MultiSelect
             {...multiSelectStyles}
-            value={transformCsvToMultiSelectOptions(filters.runType)}
+            value={transformArrayToMultiSelectOptions(filters.runType)}
             onChange={(typeOptions) => {
               if (
                 Array.isArray(typeOptions) &&
                 typeOptions.every((typeOption) => "value" in typeOption)
               ) {
                 onRunTypeChange(
-                  typeOptions.map((typeOption) => typeOption.value).join(",")
+                  typeOptions.map((typeOption) => typeOption.value)
                 );
               }
             }}
-            options={transformCsvToMultiSelectOptions(filters.runTypeOptions)}
+            options={transformArrayToMultiSelectOptions(filters.runTypeOptions)}
             placeholder="All Run Types"
           />
         </Box>
@@ -128,18 +128,20 @@ const FilterBar = () => {
         <Box px={2} style={multiSelectBoxStyle}>
           <MultiSelect
             {...multiSelectStyles}
-            value={transformCsvToMultiSelectOptions(filters.runState)}
+            value={transformArrayToMultiSelectOptions(filters.runState)}
             onChange={(stateOptions) => {
               if (
                 Array.isArray(stateOptions) &&
                 stateOptions.every((stateOption) => "value" in stateOption)
               ) {
                 onRunStateChange(
-                  stateOptions.map((stateOption) => stateOption.value).join(",")
+                  stateOptions.map((stateOption) => stateOption.value)
                 );
               }
             }}
-            options={transformCsvToMultiSelectOptions(filters.runStateOptions)}
+            options={transformArrayToMultiSelectOptions(
+              filters.runStateOptions
+            )}
             placeholder="All Run States"
           />
         </Box>
diff --git a/airflow/www/static/js/dag/useFilters.test.tsx b/airflow/www/static/js/dag/useFilters.test.tsx
index 5ecb7fb88785c..72e1b42543e44 100644
--- a/airflow/www/static/js/dag/useFilters.test.tsx
+++ b/airflow/www/static/js/dag/useFilters.test.tsx
@@ -89,22 +89,22 @@ describe("Test useFilters hook", () => {
     {
       fnName: "onRunTypeChange" as keyof UtilFunctions,
       paramName: "runType" as keyof Filters,
-      paramValue: "manual",
+      paramValue: ["manual"],
     },
     {
       fnName: "onRunTypeChange" as keyof UtilFunctions,
       paramName: "runType" as keyof Filters,
-      paramValue: "manual,backfill",
+      paramValue: ["manual", "backfill"],
     },
     {
       fnName: "onRunStateChange" as keyof UtilFunctions,
       paramName: "runState" as keyof Filters,
-      paramValue: "success",
+      paramValue: ["success"],
     },
     {
       fnName: "onRunStateChange" as keyof UtilFunctions,
       paramName: "runState" as keyof Filters,
-      paramValue: "success,failed,queued",
+      paramValue: ["success", "failed", "queued"],
     },
   ])("Test $fnName functions", async ({ fnName, paramName, paramValue }) => {
     const { result } = renderHook<FilterHookReturn, undefined>(
@@ -113,7 +113,9 @@ describe("Test useFilters hook", () => {
     );
 
     await act(async () => {
-      result.current[fnName](paramValue as "string" & FilterTasksProps);
+      result.current[fnName](
+        paramValue as "string" & string[] & FilterTasksProps
+      );
     });
 
     expect(result.current.filters[paramName]).toBe(paramValue);
diff --git a/airflow/www/static/js/dag/useFilters.tsx b/airflow/www/static/js/dag/useFilters.tsx
index 5136456c13e3d..2d5d2eb321d1d 100644
--- a/airflow/www/static/js/dag/useFilters.tsx
+++ b/airflow/www/static/js/dag/useFilters.tsx
@@ -38,10 +38,10 @@ export interface Filters {
   filterDownstream: boolean | undefined;
   baseDate: string | null;
   numRuns: string | null;
-  runType: string | null;
-  runTypeOptions: string | null;
-  runState: string | null;
-  runStateOptions: string | null;
+  runType: string[] | null;
+  runTypeOptions: string[] | null;
+  runState: string[] | null;
+  runStateOptions: string[] | null;
 }
 
 export interface FilterTasksProps {
@@ -53,11 +53,11 @@ export interface FilterTasksProps {
 export interface UtilFunctions {
   onBaseDateChange: (value: string) => void;
   onNumRunsChange: (value: string) => void;
-  onRunTypeChange: (value: string) => void;
-  onRunStateChange: (value: string) => void;
+  onRunTypeChange: (values: string[]) => void;
+  onRunStateChange: (values: string[]) => void;
   onFilterTasksChange: (args: FilterTasksProps) => void;
-  transformCsvToMultiSelectOptions: (
-    options: string | null
+  transformArrayToMultiSelectOptions: (
+    options: string[] | null
   ) => { label: string; value: string }[];
   clearFilters: () => void;
   resetRoot: () => void;
@@ -97,14 +97,14 @@ const useFilters = (): FilterHookReturn => {
   const numRuns =
     searchParams.get(NUM_RUNS_PARAM) || defaultDagRunDisplayNumber.toString();
 
-  const runTypeOptions = filtersOptions.runTypes.join(",");
-  const runType = searchParams.get(RUN_TYPE_PARAM);
+  const runTypeOptions = filtersOptions.runTypes;
+  const runType = searchParams.getAll(RUN_TYPE_PARAM);
 
-  const runStateOptions = filtersOptions.dagStates.join(",");
-  const runState = searchParams.get(RUN_STATE_PARAM);
+  const runStateOptions = filtersOptions.dagStates;
+  const runState = searchParams.getAll(RUN_STATE_PARAM);
 
   const makeOnChangeFn =
-    (paramName: string, formatFn?: (arg: string) => string | null) =>
+    (paramName: string, formatFn?: (arg: string) => string) =>
     (value: string) => {
       const formattedValue = formatFn ? formatFn(value) : value;
       const params = new URLSearchParamsWrapper(searchParams);
@@ -115,20 +115,25 @@ const useFilters = (): FilterHookReturn => {
       setSearchParams(params);
     };
 
-  const getMultiSelectFormatFn = (options: string[]) => {
-    const formatFn = (arg: string) => {
-      const argLength = arg.split(",").length;
-      return argLength === options.length || argLength === 0 ? null : arg;
+  const makeMultiSelectOnChangeFn =
+    (paramName: string, options: string[]) => (values: string[]) => {
+      const params = new URLSearchParamsWrapper(searchParams);
+      if (values.length === options.length || values.length === 0) {
+        params.delete(paramName);
+      } else {
+        // Delete and reinsert anew each time; otherwise, there will be duplicates
+        params.delete(paramName);
+        values.forEach((value) => params.append(paramName, value));
+      }
+      setSearchParams(params);
     };
-    return formatFn;
-  };
 
-  const transformCsvToMultiSelectOptions = (
-    options: string | null
+  const transformArrayToMultiSelectOptions = (
+    options: string[] | null
   ): { label: string; value: string }[] =>
     options === null
       ? []
-      : options.split(",").map((option) => ({ label: option, value: option }));
+      : options.map((option) => ({ label: option, value: option }));
 
   const onBaseDateChange = makeOnChangeFn(
     BASE_DATE_PARAM,
@@ -136,13 +141,13 @@ const useFilters = (): FilterHookReturn => {
     (localDate: string) => moment(localDate).utc().format()
   );
   const onNumRunsChange = makeOnChangeFn(NUM_RUNS_PARAM);
-  const onRunTypeChange = makeOnChangeFn(
+  const onRunTypeChange = makeMultiSelectOnChangeFn(
     RUN_TYPE_PARAM,
-    getMultiSelectFormatFn(filtersOptions.runTypes)
+    filtersOptions.runTypes
   );
-  const onRunStateChange = makeOnChangeFn(
+  const onRunStateChange = makeMultiSelectOnChangeFn(
     RUN_STATE_PARAM,
-    getMultiSelectFormatFn(filtersOptions.dagStates)
+    filtersOptions.dagStates
   );
 
   const onFilterTasksChange = ({
@@ -203,7 +208,7 @@ const useFilters = (): FilterHookReturn => {
     onFilterTasksChange,
     clearFilters,
     resetRoot,
-    transformCsvToMultiSelectOptions,
+    transformArrayToMultiSelectOptions,
   };
 };
 
diff --git a/airflow/www/views.py b/airflow/www/views.py
index eb6bc033c2933..649440865c35c 100644
--- a/airflow/www/views.py
+++ b/airflow/www/views.py
@@ -3527,14 +3527,12 @@ def grid_data(self):
         with create_session() as session:
             query = select(DagRun).where(DagRun.dag_id == dag.dag_id, DagRun.execution_date <= base_date)
 
-        run_type_raw = request.args.get("run_type")
-        if run_type_raw:
-            run_types = {run_type.strip() for run_type in run_type_raw.split(",")}
+        run_types = request.args.getlist("run_type")
+        if run_types:
             query = query.where(DagRun.run_type.in_(run_types))
 
-        run_state_raw = request.args.get("run_state")
-        if run_state_raw:
-            run_states = {run_state.strip() for run_state in run_state_raw.split(",")}
+        run_states = request.args.getlist("run_state")
+        if run_states:
             query = query.where(DagRun.state.in_(run_states))
 
         dag_runs = wwwutils.sorted_dag_runs(
diff --git a/tests/www/views/test_views_grid.py b/tests/www/views/test_views_grid.py
index 3b5fb46999de1..0e6e92b23c843 100644
--- a/tests/www/views/test_views_grid.py
+++ b/tests/www/views/test_views_grid.py
@@ -164,12 +164,16 @@ def test_no_runs(admin_client, dag_without_runs):
 
 def test_grid_data_filtered_on_run_type_and_run_state(admin_client, dag_with_runs):
     for uri_params, expected_run_types, expected_run_states in [
-        ("run_state=success%2Cqueued", ["scheduled"], ["success"]),
-        ("run_state=running%2Cfailed", ["scheduled"], ["running"]),
-        ("run_type=scheduled%2Cmanual", ["scheduled", "scheduled"], ["success", "running"]),
-        ("run_type=backfill%2Cmanual", [], []),
-        ("run_state=running%2Cfailed&run_type=backfill%2Cmanual", [], []),
-        ("run_state=running%2Cfailed&run_type=scheduled%2Cbackfill%2Cmanual", ["scheduled"], ["running"]),
+        ("run_state=success&run_state=queued", ["scheduled"], ["success"]),
+        ("run_state=running&run_state=failed", ["scheduled"], ["running"]),
+        ("run_type=scheduled&run_type=manual", ["scheduled", "scheduled"], ["success", "running"]),
+        ("run_type=backfill&run_type=manual", [], []),
+        ("run_state=running&run_type=failed&run_type=backfill&run_type=manual", [], []),
+        (
+            "run_state=running&run_type=failed&run_type=scheduled&run_type=backfill&run_type=manual",
+            ["scheduled"],
+            ["running"],
+        ),
     ]:
         resp = admin_client.get(f"/object/grid_data?dag_id={DAG_ID}&{uri_params}", follow_redirects=True)
         assert resp.status_code == 200, resp.json

From 777580fd318f068fb5a83e60862ae4ed6b4c36e5 Mon Sep 17 00:00:00 2001
From: Victor Chiapaikeo <vchiapaikeo@gmail.com>
Date: Wed, 29 Nov 2023 10:06:11 -0500
Subject: [PATCH 8/8] Fix tests and global axios paramsSerializer to null

---
 airflow/www/static/js/api/index.ts            | 7 +++++++
 airflow/www/static/js/api/useGridData.ts      | 1 -
 airflow/www/static/js/dag/useFilters.test.tsx | 8 ++++----
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/airflow/www/static/js/api/index.ts b/airflow/www/static/js/api/index.ts
index 94ec52e8630bc..782a4f99a1acd 100644
--- a/airflow/www/static/js/api/index.ts
+++ b/airflow/www/static/js/api/index.ts
@@ -49,6 +49,13 @@ import useDags from "./useDags";
 import useDagRuns from "./useDagRuns";
 import useHistoricalMetricsData from "./useHistoricalMetricsData";
 
+axios.interceptors.request.use((config) => {
+  config.paramsSerializer = {
+    indexes: null,
+  };
+  return config;
+});
+
 axios.interceptors.response.use((res: AxiosResponse) =>
   res.data ? camelcaseKeys(res.data, { deep: true }) : res
 );
diff --git a/airflow/www/static/js/api/useGridData.ts b/airflow/www/static/js/api/useGridData.ts
index 502877214c83b..a0cbfd6b76555 100644
--- a/airflow/www/static/js/api/useGridData.ts
+++ b/airflow/www/static/js/api/useGridData.ts
@@ -105,7 +105,6 @@ const useGridData = () => {
       };
       const response = await axios.get<AxiosResponse, GridData>(gridDataUrl, {
         params,
-        paramsSerializer: { indexes: null },
       });
       // turn off auto refresh if there are no active runs
       if (!areActiveRuns(response.dagRuns)) stopRefresh();
diff --git a/airflow/www/static/js/dag/useFilters.test.tsx b/airflow/www/static/js/dag/useFilters.test.tsx
index 72e1b42543e44..87f50b5112217 100644
--- a/airflow/www/static/js/dag/useFilters.test.tsx
+++ b/airflow/www/static/js/dag/useFilters.test.tsx
@@ -67,8 +67,8 @@ describe("Test useFilters hook", () => {
 
     expect(baseDate).toBe(date.toISOString());
     expect(numRuns).toBe(global.defaultDagRunDisplayNumber.toString());
-    expect(runType).toBeNull();
-    expect(runState).toBeNull();
+    expect(runType).toEqual([]);
+    expect(runState).toEqual([]);
     expect(root).toBeUndefined();
     expect(filterUpstream).toBeUndefined();
     expect(filterDownstream).toBeUndefined();
@@ -118,7 +118,7 @@ describe("Test useFilters hook", () => {
       );
     });
 
-    expect(result.current.filters[paramName]).toBe(paramValue);
+    expect(result.current.filters[paramName]).toEqual(paramValue);
 
     // clearFilters
     await act(async () => {
@@ -132,7 +132,7 @@ describe("Test useFilters hook", () => {
         global.defaultDagRunDisplayNumber.toString()
       );
     } else {
-      expect(result.current.filters[paramName]).toBeNull();
+      expect(result.current.filters[paramName]).toEqual([]);
     }
   });