dce-reactkit 4.0.1 → 4.1.0

package/src/components/LogReviewer.tsx

@@ -5,7 +5,7 @@
  */
 
 // Import React
-import React, { useReducer, useEffect } from 'react';
+import React, { useEffect, useReducer, useRef } from 'react';
 
 // Import FontAwesome
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -16,6 +16,7 @@ import {
   faList,
   faTag,
   faTimes,
+  faSearch,
 } from '@fortawesome/free-solid-svg-icons';
 
 // Import shared helpers
@@ -25,7 +26,7 @@ import { alert, showFatalError } from './AppWrapper';
 import getHumanReadableDate from '../helpers/getHumanReadableDate';
 
 // Import shared constants
-import LOG_REVIEW_ROUTE_PATH_PREFIX from '../constants/LOG_REVIEW_ROUTE_PATH_PREFIX';
+import LOG_REVIEW_GET_LOGS_ROUTE from '../constants/LOG_REVIEW_GET_LOGS_ROUTE';
 
 // Import shared types
 import Log from '../types/Log';
@@ -38,6 +39,13 @@ import IntelliTableColumn from '../types/IntelliTableColumn';
 import LogBuiltInMetadata from '../types/LogBuiltInMetadata';
 import LogMetadataContextMap from '../types/LogMetadataContextMap';
 import LogMetadataTargetMap from '../types/LogMetadataTargetMap';
+import LogReviewerFilterState from '../types/LogReviewerFilterState';
+import DateFilterState from '../types/LogReviewerFilterState/DateFilterState';
+import ContextFilterState from '../types/LogReviewerFilterState/ContextFilterState';
+import TagFilterState from '../types/LogReviewerFilterState/TagFilterState';
+import ActionErrorFilterState from '../types/LogReviewerFilterState/ActionErrorFilterState';
+import AdvancedFilterState from '../types/LogReviewerFilterState/AdvancedFilterState';
+import Variant from '../types/Variant';
 
 // Import shared components
 import SimpleDateChooser from './SimpleDateChooser';
@@ -50,6 +58,8 @@ import TabBox from './TabBox';
 import RadioButton from './RadioButton';
 import ButtonInputGroup from './ButtonInputGroup';
 import IntelliTable from './IntelliTable';
+import Pagination from './Pagination';
+import cloneDeep from '../helpers/cloneDeep';
 
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Types ------------------------------- */
@@ -63,13 +73,6 @@ type Props = {
   onClose: () => void,
 };
 
-// Map of loaded logs (year => month => Log[])
-type LogMap = {
-  [k: string]: {
-    [k: string]: Log[]
-  }
-};
-
 // Triple of year/month/day
 type DateTriple = {
   // Full year
@@ -89,93 +92,6 @@ enum FilterDrawer {
   Advanced = 'advanced',
 }
 
-// Date filter state
-type DateFilterState = {
-  // Current start date
-  startDate: {
-    // Full year
-    year: number,
-    // 1-indexed month
-    month: number,
-    // 1-indexed day
-    day: number,
-  },
-  // Current end date
-  endDate: {
-    // Full year
-    year: number,
-    // 1-indexed month
-    month: number,
-    // 1-indexed day
-    day: number,
-  },
-};
-
-// Context filter state
-type ContextFilterState = {
-  [k: string]: (
-    // No subcontexts
-    | boolean // True if selected
-    // Includes subcontexts
-    | {
-      [k: string]: boolean // True if selected
-    }
-  )
-};
-
-// Tag filter state
-type TagFilterState = {
-  [k: string]: boolean // tag => true if in the list of tags to show
-};
-
-// Action filter state (only relevant for action logs)
-type ActionErrorFilterState = {
-  // Required type of log
-  type: LogType | undefined, // If undefined, no filter applied
-  // Query for error message (only relevant if type is error)
-  errorMessage: string, // If empty, no filter applied
-  // Query for error code (only relevant if type is error)
-  errorCode: string, // If empty, no filter applied
-  // Action targets to include (only relevant if type is action)
-  target: {
-    [k: string]: boolean
-  },
-  // Action types to include (only relevant if type is action)
-  action: {
-    [k: string]: boolean
-  },
-};
-
-// Advanced filter state
-type AdvancedFilterState = {
-  // Query for user first name (case insensitive)
-  userFirstName: string, // If empty, no filter applied
-  // Query for user last name (case insensitive)
-  userLastName: string, // If empty, no filter applied
-  // Query for user email (case insensitive)
-  userEmail: string, // If empty, no filter applied
-  // Match for userId (numerical)
-  userId: string, // If empty, no filter applied
-  // If true, include students
-  includeLearners: boolean,
-  // If true, include ttms
-  includeTTMs: boolean,
-  // If true, include admins
-  includeAdmins: boolean,
-  // Match for courseId (numerical)
-  courseId: string, // If empty, no filter applied
-  // Query for course name (case insensitive)
-  courseName: string, // If empty, no filter applied
-  // Required isMobile value
-  isMobile: (true | false | undefined), // If undefined, no filter applied
-  // Required log source value
-  source: LogSource | undefined, // If undefined, no filter applied
-  // Query for route path (only relevant if source is server)
-  routePath: string, // If empty, no filter applied
-  // Query for route template (only relevant if source is server)
-  routeTemplate: string, // If empty, no filter applied
-};
-
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Style ------------------------------- */
 /*------------------------------------------------------------------------*/
@@ -530,23 +446,31 @@ const genHumanReadableName = (machineReadableName: string) => {
 
 type State = {
   /* -------------- Logs -------------- */
-  // True if currently loading
+  // True if currently loading new logs
   loading: boolean,
-  // Loaded logs (year => month => Log[])
-  logMap: LogMap,
+  // Loaded logs
+  logs: Log[],
   /* ------------- Filters ------------ */
   // Current expanded filter drawer
   expandedFilterDrawer: FilterDrawer | undefined,
   // State of date filters
-  dateFilterState: DateFilterState,
+  pendingDateFilterState: DateFilterState,
   // State of context filters
-  contextFilterState: ContextFilterState,
+  pendingContextFilterState: ContextFilterState,
   // State of tag filters
-  tagFilterState: TagFilterState,
+  pendingTagFilterState: TagFilterState,
   // State of the action and error filter
-  actionErrorFilterState: ActionErrorFilterState,
+  pendingActionErrorFilterState: ActionErrorFilterState,
   // State of the advanced filter
-  advancedFilterState: AdvancedFilterState,
+  pendingAdvancedFilterState: AdvancedFilterState,
+  // Current page number
+  pageNumber: number,
+  // If true, there is another page to load
+  hasAnotherPage: boolean,
+  // Total number of pages
+  numPages: number,
+  // If true, filters have changed
+  userMadeFilterChange: boolean,
 };
 
 /* ------------- Actions ------------ */
@@ -555,7 +479,7 @@ type State = {
 enum ActionType {
   // Show the loading bar
   StartLoading = 'start-loading',
-  // Finish loading one or more months of logs
+  // Finish loading logs
   FinishLoading = 'finish-loading',
   // Reset filters to initial values
   ResetFilters = 'reset-filters',
@@ -573,6 +497,14 @@ enum ActionType {
   UpdateActionErrorFilterState = 'update-action-error-filter-state',
   // Update the advanced filter state
   UpdateAdvancedFilterState = 'update-advanced-filter-state',
+  // Set has another page
+  SetHasAnotherPage = 'set-has-another-page',
+  // Set the number of pages
+  SetNumPages = 'set-num-pages',
+  // Set page number
+  SetPageNumber = 'set-page-number',
+  // Reset user made filter change indicator
+  ResetUserMadeFilterChange = 'reset-user-made-filter-change',
 }
 
 // Action definitions
@@ -580,8 +512,8 @@ type Action = (
   | {
     // Action type
     type: ActionType.FinishLoading,
-    // Updated logMap
-    logMap: LogMap,
+    // Updated logs
+    logs: Log[],
   }
   | {
     // Action type
@@ -629,11 +561,26 @@ type Action = (
     // New advanced filter state
     advancedFilterState: AdvancedFilterState,
   }
+  | {
+    type: ActionType.SetHasAnotherPage,
+    hasAnotherPage: boolean,
+  }
+  | {
+    type: ActionType.SetNumPages,
+    numPages: number,
+  }
+  | {
+    type: ActionType.SetPageNumber,
+    pageNumber: number,
+  }
+  | {
+    type: ActionType.StartLoading,
+  }
   | {
     // Action type
     type: (
-      | ActionType.StartLoading
       | ActionType.HideFilterDrawer
+      | ActionType.ResetUserMadeFilterChange
     ),
   }
 );
@@ -656,7 +603,7 @@ const reducer = (state: State, action: Action): State => {
       return {
         ...state,
         loading: false,
-        logMap: action.logMap,
+        logs: action.logs,
       };
     }
     case ActionType.ToggleFilterDrawer: {
@@ -678,41 +625,71 @@ const reducer = (state: State, action: Action): State => {
     case ActionType.ResetFilters: {
       return {
         ...state,
-        dateFilterState: action.initDateFilterState,
-        contextFilterState: action.initContextFilterState,
-        tagFilterState: action.initTagFilterState,
-        actionErrorFilterState: action.initActionErrorFilterState,
-        advancedFilterState: action.initAdvancedFilterState,
+        pendingDateFilterState: action.initDateFilterState,
+        pendingContextFilterState: action.initContextFilterState,
+        pendingTagFilterState: action.initTagFilterState,
+        pendingActionErrorFilterState: action.initActionErrorFilterState,
+        pendingAdvancedFilterState: action.initAdvancedFilterState,
+        pageNumber: 1,
       };
     }
     case ActionType.UpdateDateFilterState: {
       return {
         ...state,
-        dateFilterState: action.dateFilterState,
+        pendingDateFilterState: action.dateFilterState,
+        userMadeFilterChange: true,
       };
     }
     case ActionType.UpdateContextFilterState: {
       return {
         ...state,
-        contextFilterState: action.contextFilterState,
+        pendingContextFilterState: action.contextFilterState,
+        userMadeFilterChange: true,
       };
     }
     case ActionType.UpdateTagFilterState: {
       return {
         ...state,
-        tagFilterState: action.tagFilterState,
+        pendingTagFilterState: action.tagFilterState,
+        userMadeFilterChange: true,
       };
     }
     case ActionType.UpdateActionErrorFilterState: {
       return {
         ...state,
-        actionErrorFilterState: action.actionErrorFilterState,
+        pendingActionErrorFilterState: action.actionErrorFilterState,
+        userMadeFilterChange: true,
       };
     }
     case ActionType.UpdateAdvancedFilterState: {
       return {
         ...state,
-        advancedFilterState: action.advancedFilterState,
+        pendingAdvancedFilterState: action.advancedFilterState,
+        userMadeFilterChange: true,
+      };
+    }
+    case ActionType.SetHasAnotherPage: {
+      return {
+        ...state,
+        hasAnotherPage: action.hasAnotherPage,
+      };
+    }
+    case ActionType.SetNumPages: {
+      return {
+        ...state,
+        numPages: action.numPages,
+      };
+    }
+    case ActionType.SetPageNumber: {
+      return {
+        ...state,
+        pageNumber: action.pageNumber,
+      };
+    }
+    case ActionType.ResetUserMadeFilterChange: {
+      return {
+        ...state,
+        userMadeFilterChange: false,
       };
     }
     default: {
@@ -750,7 +727,9 @@ const LogReviewer: React.FC<Props> = (props) => {
 
       // If context has children, add an "uncategorized" subcontext
       if (typeof contextMap[context] !== 'string') {
-        (contextMap[context] as any)[LogBuiltInMetadata.Context.Uncategorized] = (
+        (contextMap[context] as any)[
+          LogBuiltInMetadata.Context.Uncategorized
+        ] = (
           LogBuiltInMetadata.Context.Uncategorized
         );
       }
@@ -797,7 +776,7 @@ const LogReviewer: React.FC<Props> = (props) => {
     } else {
       // Case: subcontexts exist
       initContextFilterState[context] = {};
-      Object.values(contextMap[context]).forEach((subcontext) => {
+      Object.keys(contextMap[context]).forEach((subcontext) => {
         // Skip self ("_")
         if (subcontext === '_') {
           return;
@@ -850,13 +829,17 @@ const LogReviewer: React.FC<Props> = (props) => {
   // Initial state
   const initialState: State = {
     loading: true,
-    logMap: {},
+    logs: [],
     expandedFilterDrawer: undefined,
-    dateFilterState: initDateFilterState,
-    contextFilterState: initContextFilterState,
-    tagFilterState: initTagFilterState,
-    actionErrorFilterState: initActionErrorFilterState,
-    advancedFilterState: initAdvancedFilterState,
+    pendingDateFilterState: initDateFilterState,
+    pendingContextFilterState: initContextFilterState,
+    pendingTagFilterState: initTagFilterState,
+    pendingActionErrorFilterState: initActionErrorFilterState,
+    pendingAdvancedFilterState: initAdvancedFilterState,
+    pageNumber: 1,
+    hasAnotherPage: false,
+    numPages: 1,
+    userMadeFilterChange: false,
   };
 
   // Initialize state
@@ -865,133 +848,100 @@ const LogReviewer: React.FC<Props> = (props) => {
   // Destructure common state
   const {
     loading,
-    logMap,
+    logs,
     expandedFilterDrawer,
-    dateFilterState,
-    contextFilterState,
-    tagFilterState,
-    actionErrorFilterState,
-    advancedFilterState,
+    pendingDateFilterState,
+    pendingContextFilterState,
+    pendingTagFilterState,
+    pendingActionErrorFilterState,
+    pendingAdvancedFilterState,
+    pageNumber,
+    numPages,
+    userMadeFilterChange,
   } = state;
 
+  /* -------------- Refs -------------- */
+
+  // Initialize refs
+  const activeFiltersRef = useRef({
+    dateFilterState: JSON.parse(JSON.stringify(pendingDateFilterState)),
+    contextFilterState: JSON.parse(JSON.stringify(pendingContextFilterState)),
+    tagFilterState: JSON.parse(JSON.stringify(pendingTagFilterState)),
+    actionErrorFilterState: JSON.parse(JSON.stringify(pendingActionErrorFilterState)),
+    advancedFilterState: JSON.parse(JSON.stringify(pendingAdvancedFilterState)),
+  });
+
   /*------------------------------------------------------------------------*/
   /* ------------------------- Component Functions ------------------------ */
   /*------------------------------------------------------------------------*/
 
   /**
-   * Get the list of year/month combos that need to be loaded given a new
-   *   start or end date and the existing logMap
-   * @author Gabe Abrams
-   * @param newDateFilterState the new date filter state
-   * @returns list of year/month combos that need to be loaded
-   */
-  const listMonthsToLoad = (
-    newDateFilterState: DateFilterState,
-  ): { year: number, month: number }[] => {
-    // List of year/month combos that need to be loaded
-    const toLoad: { year: number, month: number }[] = [];
-
-    // Loop through dates
-    let { year, month } = newDateFilterState.startDate;
-    while (
-      // Earlier year
-      (year < newDateFilterState.endDate.year)
-      // Current year but included month
-      || (
-        year === newDateFilterState.endDate.year
-        && month <= newDateFilterState.endDate.month
-      )
-    ) {
-      // Add to list if not already loaded
-      if (
-        !logMap[year]
-        || !logMap[year][month]
-      ) {
-        toLoad.push({
-          year,
-          month,
-        });
-      }
-
-      // Increment
-      month += 1;
-      if (month > 12) {
-        month -= 12;
-        year += 1;
-      }
-    }
-
-    // Return
-    return toLoad;
-  };
-
-  /**
-   * Handle updated start/end dates (updates state, loads if necessary)
-   * @author Gabe Abrams
-   * @param newDateFilterState the new date filter state
+   * Fetch logs from the server based on current filters
+   * @author Yuen Ler Chow
+   * @param opts object containing all arguments
+   * @param opts.filters the filters to apply
+   * @param opts.pageNum the page number to fetch
+   * @param opts.filtersChanged if true, the filters have changed
    */
-  const handleDateRangeUpdated = async (
-    newDateFilterState: DateFilterState,
+  const fetchLogs = async (
+    opts: {
+      filters: LogReviewerFilterState,
+      pageNum: number,
+      filtersChanged: boolean,
+    },
   ) => {
-    // Update state
-    dispatch({
-      type: ActionType.UpdateDateFilterState,
-      dateFilterState: newDateFilterState,
-    });
+    const {
+      filters,
+      pageNum,
+      filtersChanged,
+    } = opts;
 
-    // Check which year/month combos we need to load
-    const toLoad = listMonthsToLoad(newDateFilterState);
-
-    // If nothing to load, finished
-    if (toLoad.length === 0) {
-      return;
-    }
-
-    // Start loading
     dispatch({
       type: ActionType.StartLoading,
     });
 
-    // Load required months
     try {
-      for (let i = 0; i < toLoad.length; i++) {
-        // Destructure
-        const { year, month } = toLoad[i];
-
-        // Load
-        let logs: Log[] = [];
-        let pageNumber = 1;
-        let hasAnotherPage = true;
-
-        while (hasAnotherPage) {
-          const response = await visitServerEndpoint({
-            path: `${LOG_REVIEW_ROUTE_PATH_PREFIX}/years/${year}/months/${month}`,
-            method: 'GET',
-            params: {
-              pageNumber,
-            },
-          });
-
-          logs = logs.concat(response.items);
-          hasAnotherPage = response.hasAnotherPage;
-          pageNumber += 1;
-        }
+      // Send filters to the server
+      let fetchedLogs: Log[] = [];
+
+      // Get logs from server
+      const response = await visitServerEndpoint({
+        path: LOG_REVIEW_GET_LOGS_ROUTE,
+        method: 'GET',
+        params: {
+          pageNumber: pageNum,
+          filters,
+          countDocuments: filtersChanged,
+        },
+      });
 
-        // Add to map
-        if (!logMap[year]) {
-          logMap[year] = {};
-        }
-        logMap[year][month] = logs;
+      fetchedLogs = fetchedLogs.concat(response.items);
+      dispatch({
+        type: ActionType.SetHasAnotherPage,
+        hasAnotherPage: response.hasAnotherPage,
+      });
+
+      if (filtersChanged && response.numPages !== undefined) {
+        dispatch({
+          type: ActionType.SetNumPages,
+          numPages: response.numPages,
+        });
       }
+
+      // Update logs in state
+      dispatch({
+        type: ActionType.FinishLoading,
+        logs: fetchedLogs,
+      });
+
+      // Update page number
+      dispatch({
+        type: ActionType.SetPageNumber,
+        pageNumber: pageNum,
+      });
     } catch (err) {
       return showFatalError(err);
     }
-
-    // Finish loading
-    dispatch({
-      type: ActionType.FinishLoading,
-      logMap,
-    });
   };
 
   /*------------------------------------------------------------------------*/
@@ -999,350 +949,454 @@ const LogReviewer: React.FC<Props> = (props) => {
   /*------------------------------------------------------------------------*/
 
   /**
-   * Mount
-   * @author Gabe Abrams
+   * Fetch logs on mount
+   * @author Yuen Ler Chow
    */
-  useEffect(
-    () => {
-      // Perform initial load
-      handleDateRangeUpdated(dateFilterState);
-    },
-    [],
-  );
+  useEffect(() => {
+    fetchLogs({
+      filters: {
+        dateFilterState: pendingDateFilterState,
+        contextFilterState: pendingContextFilterState,
+        tagFilterState: pendingTagFilterState,
+        actionErrorFilterState: pendingActionErrorFilterState,
+        advancedFilterState: pendingAdvancedFilterState,
+      },
+      pageNum: 1,
+      filtersChanged: true,
+    });
+  }, []);
 
   /*------------------------------------------------------------------------*/
   /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
-
   /*----------------------------------------*/
   /* --------------- Main UI -------------- */
   /*----------------------------------------*/
 
-  // Body that will be filled with the contents of the panel
-  let body: React.ReactNode;
+  /*----------------------------------------*/
+  /* ------------ Pagination -------------- */
+  /*----------------------------------------*/
+
+  const paginationControls = logs.length > 0 && (
+    <Pagination
+      currentPage={pageNumber}
+      numPages={numPages}
+      loading={loading}
+      onPageChanged={(targetPage) => {
+        const { current: activeFilters } = activeFiltersRef;
+        fetchLogs({
+          filters: {
+            dateFilterState: activeFilters.dateFilterState,
+            contextFilterState: activeFilters.contextFilterState,
+            tagFilterState: activeFilters.tagFilterState,
+            actionErrorFilterState: activeFilters.actionErrorFilterState,
+            advancedFilterState: activeFilters.advancedFilterState,
+          },
+          pageNum: targetPage,
+          filtersChanged: false,
+        });
+      }}
+    />
+  );
 
-  /* ------------- Loading ------------ */
+  /*----------------------------------------*/
+  /* --------------- Filters -------------- */
+  /*----------------------------------------*/
 
-  if (loading) {
-    body = (
-      <div className="text-center p-5">
-        <LoadingSpinner />
+  // Filter toggle
+  const filterToggles = (
+    <div className="LogReviewer-filter-toggles">
+      <div className="LogReviewer-filter-toggle-buttons alert alert-secondary p-2 m-0">
+        {/* Date */}
+        <button
+          type="button"
+          id="LogReviewer-toggle-date-filter-drawer"
+          className={`btn btn-${FilterDrawer.Date === expandedFilterDrawer ? 'warning' : 'light'} me-2`}
+          aria-label="toggle date filter drawer"
+          onClick={() => {
+            dispatch({
+              type: ActionType.ToggleFilterDrawer,
+              filterDrawer: FilterDrawer.Date,
+            });
+          }}
+        >
+          <FontAwesomeIcon
+            icon={faCalendar}
+            className="me-2"
+          />
+          Date
+        </button>
+        {/* Context */}
+        <button
+          type="button"
+          id="LogReviewer-toggle-context-filter-drawer"
+          className={`btn btn-${FilterDrawer.Context === expandedFilterDrawer ? 'warning' : 'light'} me-2`}
+          aria-label="toggle context filter drawer"
+          onClick={() => {
+            dispatch({
+              type: ActionType.ToggleFilterDrawer,
+              filterDrawer: FilterDrawer.Context,
+            });
+          }}
+        >
+          <FontAwesomeIcon
+            icon={faCircle}
+            className="me-2"
+          />
+          Context
+        </button>
+        {/* Tag */}
+        {(LogMetadata.Tag && Object.keys(LogMetadata.Tag).length > 0) && (
+        <button
+          type="button"
+          id="LogReviewer-toggle-tag-filter-drawer"
+          className={`btn btn-${FilterDrawer.Tag === expandedFilterDrawer ? 'warning' : 'light'} me-2`}
+          aria-label="toggle tag filter drawer"
+          onClick={() => {
+            dispatch({
+              type: ActionType.ToggleFilterDrawer,
+              filterDrawer: FilterDrawer.Tag,
+            });
+          }}
+        >
+          <FontAwesomeIcon
+            icon={faTag}
+            className="me-2"
+          />
+          Tag
+        </button>
+        )}
+        {/* Action */}
+        <button
+          type="button"
+          id="LogReviewer-toggle-action-filter-drawer"
+          className={`btn btn-${FilterDrawer.Action === expandedFilterDrawer ? 'warning' : 'light'} me-2`}
+          aria-label="toggle action and error filter drawer"
+          onClick={() => {
+            dispatch({
+              type: ActionType.ToggleFilterDrawer,
+              filterDrawer: FilterDrawer.Action,
+            });
+          }}
+        >
+          <FontAwesomeIcon
+            icon={faHammer}
+            className="me-2"
+          />
+          Action
+        </button>
+        {/* Advanced */}
+        <button
+          type="button"
+          id="LogReviewer-toggle-advanced-filter-drawer"
+          className={`btn btn-${FilterDrawer.Advanced === expandedFilterDrawer ? 'warning' : 'light'} me-2`}
+          aria-label="toggle advanced filter drawer"
+          onClick={() => {
+            dispatch({
+              type: ActionType.ToggleFilterDrawer,
+              filterDrawer: FilterDrawer.Advanced,
+            });
+          }}
+        >
+          <FontAwesomeIcon
+            icon={faList}
+            className="me-2"
+          />
+          Advanced
+        </button>
+        {/* Reset */}
+        <button
+          type="button"
+          id="LogReviewer-reset-filters-button"
+          className="btn btn-light"
+          aria-label="reset filters"
+          onClick={() => {
+            // Save active filters
+            // Deep clone the initial filter states to avoid any reference issues
+            // if the filter states are modified later
+            activeFiltersRef.current = cloneDeep({
+              dateFilterState: initDateFilterState,
+              contextFilterState: initContextFilterState,
+              tagFilterState: initTagFilterState,
+              actionErrorFilterState: initActionErrorFilterState,
+              advancedFilterState: initAdvancedFilterState,
+            });
+            fetchLogs(
+              {
+                filters: {
+                  dateFilterState: initDateFilterState,
+                  contextFilterState: initContextFilterState,
+                  tagFilterState: initTagFilterState,
+                  actionErrorFilterState: initActionErrorFilterState,
+                  advancedFilterState: initAdvancedFilterState,
+                },
+                pageNum: 1,
+                filtersChanged: true,
+              },
+            );
+            dispatch({
+              type: ActionType.ResetFilters,
+              initActionErrorFilterState,
+              initAdvancedFilterState,
+              initContextFilterState,
+              initDateFilterState,
+              initTagFilterState,
+            });
+            dispatch({
+              type: ActionType.HideFilterDrawer,
+            });
+          }}
+        >
+          <FontAwesomeIcon
+            icon={faTimes}
+          />
+          {' '}
+          Reset
+        </button>
+
+        {/* Submit filter changes */}
+        { userMadeFilterChange && (
+        <button
+          type="button"
+          id="LogReviewer-submit-filters-button"
+          className="btn btn-primary ms-2"
+          aria-label="submit filters"
+          onClick={() => {
+            dispatch({
+              type: ActionType.HideFilterDrawer,
+            });
+
+            // Reset user made filter change indicator
+            dispatch({
+              type: ActionType.ResetUserMadeFilterChange,
+            });
+
+            // Save active filters
+            // Deep clone the pending filter states to avoid any reference issues
+            // if the filter states are modified later
+            activeFiltersRef.current = cloneDeep({
+              dateFilterState: pendingDateFilterState,
+              contextFilterState: pendingContextFilterState,
+              tagFilterState: pendingTagFilterState,
+              actionErrorFilterState: pendingActionErrorFilterState,
+              advancedFilterState: pendingAdvancedFilterState,
+            });
+
+            fetchLogs(
+              {
+                filters: {
+                  dateFilterState: pendingDateFilterState,
+                  contextFilterState: pendingContextFilterState,
+                  tagFilterState: pendingTagFilterState,
+                  actionErrorFilterState: pendingActionErrorFilterState,
+                  advancedFilterState: pendingAdvancedFilterState,
+                },
+                pageNum: 1,
+                filtersChanged: true,
+              },
+            );
+          }}
+        >
+          <FontAwesomeIcon
+            icon={faSearch}
+          />
+          {' '}
+          Apply Filters
+        </button>
+        )}
       </div>
-    );
-  }
+    </div>
+  );
 
-  /* ------------ Review UI ----------- */
-
-  if (!loading) {
-    /*----------------------------------------*/
-    /* --------------- Filters -------------- */
-    /*----------------------------------------*/
-
-    // Filter toggle
-    const filterToggles = (
-      <div className="LogReviewer-filter-toggles">
-        <h3 className="m-0">
-          Filters:
-        </h3>
-        <div className="LogReviewer-filter-toggle-buttons alert alert-secondary p-2 m-0">
-          {/* Date */}
-          <button
-            type="button"
-            id="LogReviewer-toggle-date-filter-drawer"
-            className={`btn btn-${FilterDrawer.Date === expandedFilterDrawer ? 'warning' : 'light'} me-2`}
-            aria-label="toggle date filter drawer"
-            onClick={() => {
-              dispatch({
-                type: ActionType.ToggleFilterDrawer,
-                filterDrawer: FilterDrawer.Date,
-              });
-            }}
-          >
-            <FontAwesomeIcon
-              icon={faCalendar}
-              className="me-2"
-            />
-            Date
-          </button>
-          {/* Context */}
-          <button
-            type="button"
-            id="LogReviewer-toggle-context-filter-drawer"
-            className={`btn btn-${FilterDrawer.Context === expandedFilterDrawer ? 'warning' : 'light'} me-2`}
-            aria-label="toggle context filter drawer"
-            onClick={() => {
-              dispatch({
-                type: ActionType.ToggleFilterDrawer,
-                filterDrawer: FilterDrawer.Context,
-              });
-            }}
-          >
-            <FontAwesomeIcon
-              icon={faCircle}
-              className="me-2"
-            />
-            Context
-          </button>
-          {/* Tag */}
-          {/* Skip if no tags are used */}
-          {(LogMetadata.Tag && Object.keys(LogMetadata.Tag).length > 0) && (
-            <button
-              type="button"
-              id="LogReviewer-toggle-tag-filter-drawer"
-              className={`btn btn-${FilterDrawer.Tag === expandedFilterDrawer ? 'warning' : 'light'} me-2`}
-              aria-label="toggle tag filter drawer"
-              onClick={() => {
-                dispatch({
-                  type: ActionType.ToggleFilterDrawer,
-                  filterDrawer: FilterDrawer.Tag,
-                });
-              }}
-            >
-              <FontAwesomeIcon
-                icon={faTag}
-                className="me-2"
-              />
-              Tag
-            </button>
-          )}
-          {/* Action */}
-          <button
-            type="button"
-            id="LogReviewer-toggle-action-filter-drawer"
-            className={`btn btn-${FilterDrawer.Action === expandedFilterDrawer ? 'warning' : 'light'} me-2`}
-            aria-label="toggle action and error filter drawer"
-            onClick={() => {
-              dispatch({
-                type: ActionType.ToggleFilterDrawer,
-                filterDrawer: FilterDrawer.Action,
-              });
-            }}
-          >
-            <FontAwesomeIcon
-              icon={faHammer}
-              className="me-2"
-            />
-            Action
-          </button>
-          {/* Advanced */}
-          <button
-            type="button"
-            id="LogReviewer-toggle-advanced-filter-drawer"
-            className={`btn btn-${FilterDrawer.Advanced === expandedFilterDrawer ? 'warning' : 'light'} me-2`}
-            aria-label="toggle advanced filter drawer"
-            onClick={() => {
-              dispatch({
-                type: ActionType.ToggleFilterDrawer,
-                filterDrawer: FilterDrawer.Advanced,
-              });
-            }}
-          >
-            <FontAwesomeIcon
-              icon={faList}
-              className="me-2"
-            />
-            Advanced
-          </button>
-          {/* Reset */}
-          <button
-            type="button"
-            id="LogReviewer-reset-filters-button"
-            className="btn btn-light"
-            aria-label="reset filters"
-            onClick={() => {
+  // Filter drawer
+  let filterDrawer: React.ReactNode;
+  if (expandedFilterDrawer) {
+    if (expandedFilterDrawer === FilterDrawer.Date) {
+      filterDrawer = (
+        <TabBox title="Date">
+          <SimpleDateChooser
+            ariaLabel="filter start date"
+            name="filter-start-date"
+            year={pendingDateFilterState.startDate.year}
+            month={pendingDateFilterState.startDate.month}
+            day={pendingDateFilterState.startDate.day}
+            dontAllowFuture
+            numMonthsToShow={36}
+            onChange={(month, day, year) => {
+              const newDateFilterState = {
+                ...pendingDateFilterState,
+                startDate: { month, day, year },
+              };
               dispatch({
-                type: ActionType.ResetFilters,
-                initActionErrorFilterState,
-                initAdvancedFilterState,
-                initContextFilterState,
-                initDateFilterState,
-                initTagFilterState,
+                type: ActionType.UpdateDateFilterState,
+                dateFilterState: newDateFilterState,
               });
             }}
-          >
-            <FontAwesomeIcon
-              icon={faTimes}
-            />
-            {' '}
-            Reset
-          </button>
-        </div>
-      </div>
-    );
-
-    // Filter drawer
-    let filterDrawer: React.ReactNode;
-    if (expandedFilterDrawer) {
-      if (expandedFilterDrawer === FilterDrawer.Date) {
-        filterDrawer = (
-          <TabBox title="Date">
-            <SimpleDateChooser
-              ariaLabel="filter start date"
-              name="filter-start-date"
-              year={dateFilterState.startDate.year}
-              month={dateFilterState.startDate.month}
-              day={dateFilterState.startDate.day}
-              dontAllowFuture
-              numMonthsToShow={36}
-              onChange={(month, day, year) => {
-                dateFilterState.startDate = { month, day, year };
-                handleDateRangeUpdated(dateFilterState);
-              }}
-            />
-            {' '}
-            to
-            {' '}
-            <SimpleDateChooser
-              ariaLabel="filter end date"
-              name="filter-end-date"
-              year={dateFilterState.endDate.year}
-              month={dateFilterState.endDate.month}
-              day={dateFilterState.endDate.day}
-              dontAllowFuture
-              numMonthsToShow={12}
-              onChange={(month, day, year) => {
-                if (
-                  year < dateFilterState.startDate.year
+          />
+          {' '}
+          to
+          {' '}
+          <SimpleDateChooser
+            ariaLabel="filter end date"
+            name="filter-end-date"
+            year={pendingDateFilterState.endDate.year}
+            month={pendingDateFilterState.endDate.month}
+            day={pendingDateFilterState.endDate.day}
+            dontAllowFuture
+            numMonthsToShow={12}
+            onChange={(month, day, year) => {
+              if (
+                year < pendingDateFilterState.startDate.year
                   || (
-                    year === dateFilterState.startDate.year
-                    && month < dateFilterState.startDate.month
+                    year === pendingDateFilterState.startDate.year
+                    && month < pendingDateFilterState.startDate.month
                   )
                   || (
-                    year === dateFilterState.startDate.year
-                    && month === dateFilterState.startDate.month
-                    && day < dateFilterState.startDate.day
+                    year === pendingDateFilterState.startDate.year
+                    && month === pendingDateFilterState.startDate.month
+                    && day < pendingDateFilterState.startDate.day
                   )
-                ) {
-                  return alert(
-                    'Invalid Start Date',
-                    'The start date cannot be before the end date.',
-                  );
-                }
-                dateFilterState.endDate = { month, day, year };
-                handleDateRangeUpdated(dateFilterState);
-              }}
-            />
-          </TabBox>
-        );
-      } else if (expandedFilterDrawer === FilterDrawer.Context) {
-        // Create item picker items
-        const builtInPickableItem: PickableItem = {
-          id: 'built-in-contexts',
-          name: 'Auto-logged',
-          isGroup: true,
-          children: [],
-        };
-        const pickableItems: PickableItem[] = [];
-        Object.keys(contextMap)
-          .forEach((context) => {
-            const value = contextMap[context];
-            if (typeof value === 'string') {
-              // No subcategories
-              const item: PickableItem = {
-                id: context,
-                name: genHumanReadableName(context),
-                isGroup: false,
-                checked: !!contextFilterState[context],
-              };
-
-              // Add built-in items to its own folder
-              const isBuiltIn = context in LogBuiltInMetadata.Context;
-              if (isBuiltIn) {
-                // Add to built-in pickable item
-                builtInPickableItem.children.push(item);
-              } else {
-                // Add to pickable items list
-                pickableItems.push(item);
+              ) {
+                return alert(
+                  'Invalid End Date',
+                  'The end date cannot be before the start date.',
+                );
               }
-              return;
-            }
-
-            // Has subcategories
-            const children: PickableItem[] = (
-              Object.keys(value)
-                // Remove parent name
-                .filter((subcontext) => {
-                  return subcontext !== '_';
-                })
-                // Create child pickable items
-                .map((subcontext) => {
-                  return {
-                    id: subcontext,
-                    name: genHumanReadableName(subcontext),
-                    isGroup: false,
-                    checked: (contextFilterState[context] as any)[subcontext],
-                  };
-                })
-            );
+              const newDateFilterState = {
+                ...pendingDateFilterState,
+                endDate: { month, day, year },
+              };
+              dispatch({
+                type: ActionType.UpdateDateFilterState,
+                dateFilterState: newDateFilterState,
+              });
+            }}
+          />
+        </TabBox>
+      );
+    } else if (expandedFilterDrawer === FilterDrawer.Context) {
+      // Create item picker items
+      const builtInPickableItem: PickableItem = {
+        id: 'built-in-contexts',
+        name: 'Auto-logged',
+        isGroup: true,
+        children: [],
+      };
+      const pickableItems: PickableItem[] = [];
+      Object.keys(contextMap)
+        .forEach((context) => {
+          const value = contextMap[context];
+          if (typeof value === 'string') {
+            // No subcategories
             const item: PickableItem = {
               id: context,
               name: genHumanReadableName(context),
-              isGroup: true,
-              children,
+              isGroup: false,
+              checked: !!pendingContextFilterState[context],
             };
-            pickableItems.push(item);
-          });
-        // Add built-in contexts to end ofl ist
-        pickableItems.push(builtInPickableItem);
-
-        // Create filter UI
-        filterDrawer = (
-          <ItemPicker
-            title="Context"
-            items={pickableItems}
-            onChanged={(updatedItems) => {
-              // Update our state
-              updatedItems.forEach((pickableItem) => {
-                if (pickableItem.isGroup) {
-                  // Has subcontexts
-
-                  if (pickableItem.id === 'built-in-contexts') {
-                    // Built-in
-
-                    // Treat as if these were top-level contexts
-                    pickableItem.children.forEach((subcontextItem) => {
-                      contextFilterState[subcontextItem.id] = (
-                        'checked' in subcontextItem
+
+            // Add built-in items to its own folder
+            const isBuiltIn = context in LogBuiltInMetadata.Context;
+            if (isBuiltIn) {
+              // Add to built-in pickable item
+              builtInPickableItem.children.push(item);
+            } else {
+              // Add to pickable items list
+              pickableItems.push(item);
+            }
+            return;
+          }
+
+          // Has subcategories
+          const children: PickableItem[] = (
+            Object.keys(value)
+            // Remove parent name
+              .filter((subcontext) => {
+                return (subcontext !== '_');
+              })
+            // Create child pickable items
+              .map((subcontext) => {
+                return {
+                  id: subcontext,
+                  name: genHumanReadableName(subcontext),
+                  isGroup: false,
+                  checked: (pendingContextFilterState[context] as any)[subcontext],
+                };
+              })
+          );
+          const item: PickableItem = {
+            id: context,
+            name: genHumanReadableName(context),
+            isGroup: true,
+            children,
+          };
+          pickableItems.push(item);
+        });
+      // Add built-in contexts to end of list
+      pickableItems.push(builtInPickableItem);
+
+      // Create filter UI
+      filterDrawer = (
+        <ItemPicker
+          title="Context"
+          items={pickableItems}
+          onChanged={(updatedItems) => {
+            // Update our state
+            const newContextFilterState = { ...pendingContextFilterState };
+            updatedItems.forEach((pickableItem) => {
+              if (pickableItem.isGroup) {
+                // Has subcontexts
+
+                if (pickableItem.id === 'built-in-contexts') {
+                  // Built-in
+
+                  // Treat as if these were top-level contexts
+                  pickableItem.children.forEach((subcontextItem) => {
+                    newContextFilterState[subcontextItem.id] = (
+                      'checked' in subcontextItem
                         && subcontextItem.checked
-                      );
-                    });
-                  } else {
-                    // Not built-in
-                    pickableItem.children.forEach((subcontextItem) => {
-                      if (!subcontextItem.isGroup) {
-                        (
-                          contextFilterState[pickableItem.id] as { [k: string]: boolean }
-                        )[subcontextItem.id] = (
-                          subcontextItem.checked
-                        );
-                      }
-                    });
-                  }
+                    );
+                  });
                 } else {
-                  // No subcontexts
-                  (contextFilterState as any)[pickableItem.id] = (
-                    pickableItem.checked
-                  );
+                  // Not built-in
+                  pickableItem.children.forEach((subcontextItem) => {
+                    if (!subcontextItem.isGroup) {
+                      (
+                        newContextFilterState[pickableItem.id] as {
+                          [k: string]: boolean
+                        }
+                      )[subcontextItem.id] = (
+                        subcontextItem.checked
+                      );
+                    }
+                  });
                 }
-              });
-              dispatch({
-                type: ActionType.UpdateContextFilterState,
-                contextFilterState,
-              });
-            }}
-          />
-        );
-      } else if (expandedFilterDrawer === FilterDrawer.Tag) {
-        // Create filter UI
-        filterDrawer = (
-          <TabBox title="Tags">
-            <div>
-              If any tags are selected, logs must contain at least one
-              (but not necessarily all) of the
-              selected tags.
-            </div>
-            <div className="d-flex gap-1 flex-wrap">
-              {
+              } else {
+                // No subcontexts
+                (newContextFilterState as any)[pickableItem.id] = (
+                  pickableItem.checked
+                );
+              }
+            });
+
+            // Update state
+            dispatch({
+              type: ActionType.UpdateContextFilterState,
+              contextFilterState: newContextFilterState,
+            });
+          }}
+        />
+      );
+    } else if (expandedFilterDrawer === FilterDrawer.Tag) {
+      // Create filter UI
+      filterDrawer = (
+        <TabBox title="Tags">
+          <div>
+            If any tags are selected, logs must contain at least one
+            (but not necessarily all) of the selected tags.
+          </div>
+          <div className="d-flex gap-1 flex-wrap">
+            {
                 Object.keys(LogMetadata.Tag ?? {})
                   .map((tag) => {
                     const description = genHumanReadableName(tag);
@@ -1352,73 +1406,91 @@ const LogReviewer: React.FC<Props> = (props) => {
                         id={`LogReviewer-tag-${tag}-checkbox`}
                         text={description}
                         ariaLabel={`require that logs be tagged with "${description}" or any other selected tag`}
-                        checked={tagFilterState[tag]}
+                        checked={pendingTagFilterState[tag]}
                         onChanged={(checked) => {
-                          tagFilterState[tag] = checked;
+                          const newTagFilterState = {
+                            ...pendingTagFilterState,
+                            [tag]: checked,
+                          };
                           dispatch({
                             type: ActionType.UpdateTagFilterState,
-                            tagFilterState,
+                            tagFilterState: newTagFilterState,
                           });
                         }}
+                        checkedVariant={Variant.Light}
+                        uncheckedVariant={Variant.Light}
                       />
                     );
                   })
               }
-            </div>
+          </div>
+        </TabBox>
+      );
+    } else if (expandedFilterDrawer === FilterDrawer.Action) {
+      // Create filter UI
+      filterDrawer = (
+        <>
+          {/* Log Type */}
+          <TabBox title="Log Type">
+            <RadioButton
+              id="LogReviewer-type-all"
+              text="All Logs"
+              onSelected={() => {
+                const newActionErrorFilterState = {
+                  ...pendingActionErrorFilterState,
+                  type: undefined,
+                };
+                dispatch({
+                  type: ActionType.UpdateActionErrorFilterState,
+                  actionErrorFilterState: newActionErrorFilterState,
+                });
+              }}
+              ariaLabel="show logs of all types"
+              selected={pendingActionErrorFilterState.type === undefined}
+              unselectedVariant={Variant.Light}
+            />
+            <RadioButton
+              id="LogReviewer-type-action-only"
+              text="Action Logs Only"
+              onSelected={() => {
+                const newActionErrorFilterState = {
+                  ...pendingActionErrorFilterState,
+                  type: LogType.Action,
+                };
+                dispatch({
+                  type: ActionType.UpdateActionErrorFilterState,
+                  actionErrorFilterState: newActionErrorFilterState,
+                });
+              }}
+              ariaLabel="only show action logs"
+              selected={pendingActionErrorFilterState.type === LogType.Action}
+              unselectedVariant={Variant.Light}
+            />
+            <RadioButton
+              id="LogReviewer-type-error-only"
+              text="Action Error Only"
+              onSelected={() => {
+                const newActionErrorFilterState = {
+                  ...pendingActionErrorFilterState,
+                  type: LogType.Error,
+                };
+                dispatch({
+                  type: ActionType.UpdateActionErrorFilterState,
+                  actionErrorFilterState: newActionErrorFilterState,
+                });
+              }}
+              ariaLabel="only show error logs"
+              selected={pendingActionErrorFilterState.type === LogType.Error}
+              noMarginOnRight
+              selectedVariant={Variant.Light}
+              unselectedVariant={Variant.Light}
+            />
           </TabBox>
-        );
-      } else if (expandedFilterDrawer === FilterDrawer.Action) {
-        // Create filter UI
-        filterDrawer = (
-          <>
-            {/* Log Type */}
-            <TabBox title="Log Type">
-              <RadioButton
-                id="LogReviewer-type-all"
-                text="All Logs"
-                onSelected={() => {
-                  actionErrorFilterState.type = undefined;
-                  dispatch({
-                    type: ActionType.UpdateActionErrorFilterState,
-                    actionErrorFilterState,
-                  });
-                }}
-                ariaLabel="show logs of all types"
-                selected={actionErrorFilterState.type === undefined}
-              />
-              <RadioButton
-                id="LogReviewer-type-action-only"
-                text="Action Logs Only"
-                onSelected={() => {
-                  actionErrorFilterState.type = LogType.Action;
-                  dispatch({
-                    type: ActionType.UpdateActionErrorFilterState,
-                    actionErrorFilterState,
-                  });
-                }}
-                ariaLabel="only show action logs"
-                selected={actionErrorFilterState.type === LogType.Action}
-              />
-              <RadioButton
-                id="LogReviewer-type-error-only"
-                text="Action Error Only"
-                onSelected={() => {
-                  actionErrorFilterState.type = LogType.Error;
-                  dispatch({
-                    type: ActionType.UpdateActionErrorFilterState,
-                    actionErrorFilterState,
-                  });
-                }}
-                ariaLabel="only show error logs"
-                selected={actionErrorFilterState.type === LogType.Error}
-                noMarginOnRight
-              />
-            </TabBox>
-            {/* Actions */}
-            {
+          {/* Actions */}
+          {
               (
-                actionErrorFilterState.type === undefined
-                || actionErrorFilterState.type === LogType.Action
+                pendingActionErrorFilterState.type === undefined
+                || pendingActionErrorFilterState.type === LogType.Action
               ) && (
                 <TabBox title="Action Log Details">
                   {/* Action */}
@@ -1438,14 +1510,22 @@ const LogReviewer: React.FC<Props> = (props) => {
                               text={description}
                               ariaLabel={`include logs with action type "${description}" in results`}
                               noMarginOnRight
-                              checked={actionErrorFilterState.action[action]}
+                              checked={pendingActionErrorFilterState.action[action]}
                               onChanged={(checked) => {
-                                actionErrorFilterState.action[action] = checked;
+                                const newActionErrorFilterState = {
+                                  ...pendingActionErrorFilterState,
+                                  action: {
+                                    ...pendingActionErrorFilterState.action,
+                                    [action]: checked,
+                                  },
+                                };
                                 dispatch({
                                   type: ActionType.UpdateActionErrorFilterState,
-                                  actionErrorFilterState,
+                                  actionErrorFilterState: newActionErrorFilterState,
                                 });
                               }}
+                              checkedVariant={Variant.Light}
+                              uncheckedVariant={Variant.Light}
                             />
                           );
                         })
@@ -1467,15 +1547,23 @@ const LogReviewer: React.FC<Props> = (props) => {
                               id={`LogReviewer-target-${target}-checkbox`}
                               text={description}
                               ariaLabel={`include logs with target "${description}" in results`}
-                              checked={actionErrorFilterState.target[target]}
+                              checked={pendingActionErrorFilterState.target[target]}
                               noMarginOnRight
                               onChanged={(checked) => {
-                                actionErrorFilterState.target[target] = checked;
+                                const newActionErrorFilterState = {
+                                  ...pendingActionErrorFilterState,
+                                  target: {
+                                    ...pendingActionErrorFilterState.target,
+                                    [target]: checked,
+                                  },
+                                };
                                 dispatch({
                                   type: ActionType.UpdateActionErrorFilterState,
-                                  actionErrorFilterState,
+                                  actionErrorFilterState: newActionErrorFilterState,
                                 });
                               }}
+                              checkedVariant={Variant.Light}
+                              uncheckedVariant={Variant.Light}
                             />
                           );
                         })
@@ -1484,11 +1572,11 @@ const LogReviewer: React.FC<Props> = (props) => {
                 </TabBox>
               )
             }
-            {/* Errors */}
-            {
+          {/* Errors */}
+          {
               (
-                actionErrorFilterState.type === undefined
-                || actionErrorFilterState.type === LogType.Error
+                pendingActionErrorFilterState.type === undefined
+                || pendingActionErrorFilterState.type === LogType.Error
               ) && (
                 <TabBox title="Error Log Details">
                   {/* Message */}
@@ -1500,13 +1588,16 @@ const LogReviewer: React.FC<Props> = (props) => {
                       type="text"
                       className="form-control"
                       aria-label="query for error message"
-                      value={actionErrorFilterState.errorMessage}
+                      value={pendingActionErrorFilterState.errorMessage}
                       placeholder="e.g. undefined is not a function"
                       onChange={(e) => {
-                        actionErrorFilterState.errorMessage = e.target.value;
+                        const newActionErrorFilterState = {
+                          ...pendingActionErrorFilterState,
+                          errorMessage: e.target.value,
+                        };
                         dispatch({
                           type: ActionType.UpdateActionErrorFilterState,
-                          actionErrorFilterState,
+                          actionErrorFilterState: newActionErrorFilterState,
                         });
                       }}
                     />
@@ -1520,17 +1611,20 @@ const LogReviewer: React.FC<Props> = (props) => {
                       type="text"
                       className="form-control"
                       aria-label="query for error code"
-                      value={actionErrorFilterState.errorCode}
+                      value={pendingActionErrorFilterState.errorCode}
                       placeholder="e.g. GC22"
                       onChange={(e) => {
-                        actionErrorFilterState.errorCode = (
-                          (e.target.value)
-                            .trim()
-                            .toUpperCase()
-                        );
+                        const newActionErrorFilterState = {
+                          ...pendingActionErrorFilterState,
+                          errorCode: (
+                            (e.target.value)
+                              .trim()
+                              .toUpperCase()
+                          ),
+                        };
                         dispatch({
                           type: ActionType.UpdateActionErrorFilterState,
-                          actionErrorFilterState,
+                          actionErrorFilterState: newActionErrorFilterState,
                         });
                       }}
                     />
@@ -1538,722 +1632,460 @@ const LogReviewer: React.FC<Props> = (props) => {
                 </TabBox>
               )
             }
-          </>
-        );
-      } else if (expandedFilterDrawer === FilterDrawer.Advanced) {
-        // Create advanced filter ui
-        filterDrawer = (
-          <>
-            {/* User Info */}
-            <TabBox title="User">
-              {/* First Name */}
-              <div className="input-group mb-2">
-                <span className="input-group-text">
-                  User First Name
-                </span>
-                <input
-                  type="text"
-                  className="form-control"
-                  aria-label="query for user first name"
-                  value={advancedFilterState.userFirstName}
-                  placeholder="e.g. Divardo"
-                  onChange={(e) => {
-                    advancedFilterState.userFirstName = e.target.value;
+        </>
+      );
+    } else if (expandedFilterDrawer === FilterDrawer.Advanced) {
+      // Create advanced filter ui
+      filterDrawer = (
+        <>
+          {/* User Info */}
+          <TabBox title="User">
+            {/* First Name */}
+            <div className="input-group mb-2">
+              <span className="input-group-text">
+                User First Name
+              </span>
+              <input
+                type="text"
+                className="form-control"
+                aria-label="query for user first name"
+                value={pendingAdvancedFilterState.userFirstName}
+                placeholder="e.g. Divardo"
+                onChange={(e) => {
+                  const newAdvancedFilterState = {
+                    ...pendingAdvancedFilterState,
+                    userFirstName: e.target.value,
+                  };
+                  dispatch({
+                    type: ActionType.UpdateAdvancedFilterState,
+                    advancedFilterState: newAdvancedFilterState,
+                  });
+                }}
+              />
+            </div>
+            {/* Last Name */}
+            <div className="input-group mb-2">
+              <span className="input-group-text">
+                User Last Name
+              </span>
+              <input
+                type="text"
+                className="form-control"
+                aria-label="query for user last name"
+                value={pendingAdvancedFilterState.userLastName}
+                placeholder="e.g. Calicci"
+                onChange={(e) => {
+                  const newAdvancedFilterState = {
+                    ...pendingAdvancedFilterState,
+                    userLastName: e.target.value,
+                  };
+                  dispatch({
+                    type: ActionType.UpdateAdvancedFilterState,
+                    advancedFilterState: newAdvancedFilterState,
+                  });
+                }}
+              />
+            </div>
+            {/* Email */}
+            <div className="input-group mb-2">
+              <span className="input-group-text">
+                User Email
+              </span>
+              <input
+                type="text"
+                className="form-control"
+                aria-label="query for user email"
+                value={pendingAdvancedFilterState.userEmail}
+                placeholder="e.g. calicci@fas.harvard.edu"
+                onChange={(e) => {
+                  const newAdvancedFilterState = {
+                    ...pendingAdvancedFilterState,
+                    userEmail: (
+                      (e.target.value)
+                        .trim()
+                    ),
+                  };
+                  dispatch({
+                    type: ActionType.UpdateAdvancedFilterState,
+                    advancedFilterState: newAdvancedFilterState,
+                  });
+                }}
+              />
+            </div>
+            {/* Canvas Id */}
+            <div className="input-group mb-2">
+              <span className="input-group-text">
+                User Canvas Id
+              </span>
+              <input
+                type="text"
+                className="form-control"
+                aria-label="query for user canvas id"
+                value={pendingAdvancedFilterState.userId}
+                placeholder="e.g. 104985"
+                onChange={(e) => {
+                  const { value } = e.target;
+                  // Only update if value contains only numbers
+                  if (/^\d+$/.test(value) || value === '') {
+                    const newAdvancedFilterState = {
+                      ...pendingAdvancedFilterState,
+                      userId: (
+                        (e.target.value)
+                          .trim()
+                      ),
+                    };
                     dispatch({
                       type: ActionType.UpdateAdvancedFilterState,
-                      advancedFilterState,
+                      advancedFilterState: newAdvancedFilterState,
                     });
-                  }}
-                />
-              </div>
-              {/* Last Name */}
-              <div className="input-group mb-2">
-                <span className="input-group-text">
-                  User Last Name
-                </span>
-                <input
-                  type="text"
-                  className="form-control"
-                  aria-label="query for user last name"
-                  value={advancedFilterState.userLastName}
-                  placeholder="e.g. Calicci"
-                  onChange={(e) => {
-                    advancedFilterState.userLastName = e.target.value;
-                    dispatch({
-                      type: ActionType.UpdateAdvancedFilterState,
-                      advancedFilterState,
-                    });
-                  }}
-                />
-              </div>
-              {/* Email */}
-              <div className="input-group mb-2">
-                <span className="input-group-text">
-                  User Email
-                </span>
-                <input
-                  type="text"
-                  className="form-control"
-                  aria-label="query for user email"
-                  value={advancedFilterState.userEmail}
-                  placeholder="e.g. calicci@fas.harvard.edu"
-                  onChange={(e) => {
-                    advancedFilterState.userEmail = (
-                      (e.target.value)
-                        .trim()
-                    );
-                    dispatch({
-                      type: ActionType.UpdateAdvancedFilterState,
-                      advancedFilterState,
-                    });
-                  }}
-                />
-              </div>
-              {/* Canvas Id */}
-              <div className="input-group mb-2">
-                <span className="input-group-text">
-                  User Canvas Id
-                </span>
-                <input
-                  type="text"
-                  className="form-control"
-                  aria-label="query for user canvas id"
-                  value={advancedFilterState.userId}
-                  placeholder="e.g. 104985"
-                  onChange={(e) => {
-                    const { value } = e.target;
-                    // Only update if value contains only numbers
-                    if (/^\d+$/.test(value)) {
-                      advancedFilterState.userId = (
+                  }
+                }}
+              />
+            </div>
+            {/* Role */}
+            <ButtonInputGroup label="Role">
+              <CheckboxButton
+                text="Students"
+                onChanged={(checked) => {
+                  const newAdvancedFilterState = {
+                    ...pendingAdvancedFilterState,
+                    includeLearners: checked,
+                  };
+                  dispatch({
+                    type: ActionType.UpdateAdvancedFilterState,
+                    advancedFilterState: newAdvancedFilterState,
+                  });
+                }}
+                checked={pendingAdvancedFilterState.includeLearners}
+                ariaLabel="show logs from students"
+                checkedVariant={Variant.Light}
+                uncheckedVariant={Variant.Light}
+              />
+              <CheckboxButton
+                text="Teaching Team Members"
+                onChanged={(checked) => {
+                  const newAdvancedFilterState = {
+                    ...pendingAdvancedFilterState,
+                    includeTTMs: checked,
+                  };
+                  dispatch({
+                    type: ActionType.UpdateAdvancedFilterState,
+                    advancedFilterState: newAdvancedFilterState,
+                  });
+                }}
+                checked={pendingAdvancedFilterState.includeTTMs}
+                ariaLabel="show logs from teaching team members"
+                checkedVariant={Variant.Light}
+                uncheckedVariant={Variant.Light}
+              />
+              <CheckboxButton
+                text="Admins"
+                onChanged={(checked) => {
+                  const newAdvancedFilterState = {
+                    ...pendingAdvancedFilterState,
+                    includeAdmins: checked,
+                  };
+                  dispatch({
+                    type: ActionType.UpdateAdvancedFilterState,
+                    advancedFilterState: newAdvancedFilterState,
+                  });
+                }}
+                checked={pendingAdvancedFilterState.includeAdmins}
+                ariaLabel="show logs from admins"
+                checkedVariant={Variant.Light}
+                uncheckedVariant={Variant.Light}
+              />
+            </ButtonInputGroup>
+          </TabBox>
+
+          {/* Course Info */}
+          <TabBox title="Course">
+            {/* Name */}
+            <div className="input-group mb-2">
+              <span className="input-group-text">
+                Course Name
+              </span>
+              <input
+                type="text"
+                className="form-control"
+                aria-label="query for course name"
+                value={pendingAdvancedFilterState.courseName}
+                placeholder="e.g. GLC 200"
+                onChange={(e) => {
+                  const newAdvancedFilterState = {
+                    ...pendingAdvancedFilterState,
+                    courseName: e.target.value,
+                  };
+                  dispatch({
+                    type: ActionType.UpdateAdvancedFilterState,
+                    advancedFilterState: newAdvancedFilterState,
+                  });
+                }}
+              />
+            </div>
+            {/* Canvas Id */}
+            <div className="input-group mb-2">
+              <span className="input-group-text">
+                Course Canvas Id
+              </span>
+              <input
+                type="text"
+                className="form-control"
+                aria-label="query for course canvas id"
+                value={pendingAdvancedFilterState.courseId}
+                placeholder="e.g. 15948"
+                onChange={(e) => {
+                  const { value } = e.target;
+                  // Only update if value contains only numbers
+                  if (/^\d+$/.test(value) || value === '') {
+                    const newAdvancedFilterState = {
+                      ...pendingAdvancedFilterState,
+                      courseId: (
                         (e.target.value)
                           .trim()
-                      );
-                    }
-                    dispatch({
-                      type: ActionType.UpdateAdvancedFilterState,
-                      advancedFilterState,
-                    });
-                  }}
-                />
-              </div>
-              {/* Role */}
-              <ButtonInputGroup label="Role">
-                <CheckboxButton
-                  text="Students"
-                  onChanged={(checked) => {
-                    advancedFilterState.includeLearners = checked;
+                      ),
+                    };
                     dispatch({
                       type: ActionType.UpdateAdvancedFilterState,
-                      advancedFilterState,
+                      advancedFilterState: newAdvancedFilterState,
                     });
-                  }}
-                  checked={advancedFilterState.includeLearners}
-                  ariaLabel="show logs from students"
-                />
-                <CheckboxButton
-                  text="Teaching Team Members"
-                  onChanged={(checked) => {
-                    advancedFilterState.includeTTMs = checked;
-                    dispatch({
-                      type: ActionType.UpdateAdvancedFilterState,
-                      advancedFilterState,
-                    });
-                  }}
-                  checked={advancedFilterState.includeTTMs}
-                  ariaLabel="show logs from teaching team members"
-                />
-                <CheckboxButton
-                  text="Admins"
-                  onChanged={(checked) => {
-                    advancedFilterState.includeAdmins = checked;
-                    dispatch({
-                      type: ActionType.UpdateAdvancedFilterState,
-                      advancedFilterState,
-                    });
-                  }}
-                  checked={advancedFilterState.includeAdmins}
-                  ariaLabel="show logs from admins"
-                />
-              </ButtonInputGroup>
-            </TabBox>
+                  }
+                }}
+              />
+            </div>
+          </TabBox>
+
+          {/* Device Info */}
+          <TabBox title="Device">
+            <ButtonInputGroup label="Device Type">
+              <RadioButton
+                text="All Devices"
+                ariaLabel="show logs from all devices"
+                selected={pendingAdvancedFilterState.isMobile === undefined}
+                onSelected={() => {
+                  const newAdvancedFilterState = {
+                    ...pendingAdvancedFilterState,
+                    isMobile: undefined,
+                  };
+                  dispatch({
+                    type: ActionType.UpdateAdvancedFilterState,
+                    advancedFilterState: newAdvancedFilterState,
+                  });
+                }}
+                selectedVariant={Variant.Light}
+                unselectedVariant={Variant.Light}
+              />
+              <RadioButton
+                text="Mobile Only"
+                ariaLabel="show logs from mobile devices"
+                selected={pendingAdvancedFilterState.isMobile === true}
+                onSelected={() => {
+                  const newAdvancedFilterState = {
+                    ...pendingAdvancedFilterState,
+                    isMobile: true,
+                  };
+                  dispatch({
+                    type: ActionType.UpdateAdvancedFilterState,
+                    advancedFilterState: newAdvancedFilterState,
+                  });
+                }}
+                selectedVariant={Variant.Light}
+                unselectedVariant={Variant.Light}
+              />
+              <RadioButton
+                text="Desktop Only"
+                ariaLabel="show logs from desktop devices"
+                selected={pendingAdvancedFilterState.isMobile === false}
+                onSelected={() => {
+                  const newAdvancedFilterState = {
+                    ...pendingAdvancedFilterState,
+                    isMobile: false,
+                  };
+                  dispatch({
+                    type: ActionType.UpdateAdvancedFilterState,
+                    advancedFilterState: newAdvancedFilterState,
+                  });
+                }}
+                noMarginOnRight
+                selectedVariant={Variant.Light}
+                unselectedVariant={Variant.Light}
+              />
+            </ButtonInputGroup>
+          </TabBox>
 
-            {/* Course Info */}
-            <TabBox title="Course">
-              {/* Name */}
+          {/* Source */}
+          <TabBox title="Source">
+            <ButtonInputGroup label="Source Type">
+              <RadioButton
+                text="Both"
+                ariaLabel="show logs from all sources"
+                selected={pendingAdvancedFilterState.source === undefined}
+                onSelected={() => {
+                  const newAdvancedFilterState = {
+                    ...pendingAdvancedFilterState,
+                    source: undefined,
+                  };
+                  dispatch({
+                    type: ActionType.UpdateAdvancedFilterState,
+                    advancedFilterState: newAdvancedFilterState,
+                  });
+                }}
+                selectedVariant={Variant.Light}
+                unselectedVariant={Variant.Light}
+              />
+              <RadioButton
+                text="Client Only"
+                ariaLabel="show logs from client source"
+                selected={pendingAdvancedFilterState.source === LogSource.Client}
+                onSelected={() => {
+                  const newAdvancedFilterState = {
+                    ...pendingAdvancedFilterState,
+                    source: LogSource.Client,
+                  };
+                  dispatch({
+                    type: ActionType.UpdateAdvancedFilterState,
+                    advancedFilterState: newAdvancedFilterState,
+                  });
+                }}
+                selectedVariant={Variant.Light}
+                unselectedVariant={Variant.Light}
+              />
+              <RadioButton
+                text="Server Only"
+                ariaLabel="show logs from server source"
+                selected={pendingAdvancedFilterState.source === LogSource.Server}
+                onSelected={() => {
+                  const newAdvancedFilterState = {
+                    ...pendingAdvancedFilterState,
+                    source: LogSource.Server,
+                  };
+                  dispatch({
+                    type: ActionType.UpdateAdvancedFilterState,
+                    advancedFilterState: newAdvancedFilterState,
+                  });
+                }}
+                noMarginOnRight
+                selectedVariant={Variant.Light}
+                unselectedVariant={Variant.Light}
+              />
+            </ButtonInputGroup>
+
+            {/* Server filters */}
+            {pendingAdvancedFilterState.source !== LogSource.Client && (
+            <div className="mt-2">
+              {/* Route path */}
               <div className="input-group mb-2">
                 <span className="input-group-text">
-                  Course Name
+                  Server Route Path
                 </span>
                 <input
                   type="text"
                   className="form-control"
-                  aria-label="query for course name"
-                  value={advancedFilterState.courseName}
-                  placeholder="e.g. GLC 200"
+                  aria-label="query for server route path"
+                  value={pendingAdvancedFilterState.routePath}
+                  placeholder="e.g. /api/ttm/courses/12345"
                   onChange={(e) => {
-                    advancedFilterState.courseName = e.target.value;
+                    const newAdvancedFilterState = {
+                      ...pendingAdvancedFilterState,
+                      routePath: (
+                        (e.target.value)
+                          .trim()
+                      ),
+                    };
                     dispatch({
                       type: ActionType.UpdateAdvancedFilterState,
-                      advancedFilterState,
+                      advancedFilterState: newAdvancedFilterState,
                     });
                   }}
                 />
               </div>
-              {/* Canvas Id */}
+
+              {/* Route template */}
               <div className="input-group mb-2">
                 <span className="input-group-text">
-                  Course Canvas Id
+                  Server Route Template
                 </span>
                 <input
                   type="text"
                   className="form-control"
-                  aria-label="query for course canvas id"
-                  value={advancedFilterState.courseId}
-                  placeholder="e.g. 15948"
+                  aria-label="query for server route template"
+                  value={pendingAdvancedFilterState.routeTemplate}
+                  placeholder="e.g. /api/ttm/courses/:courseId"
                   onChange={(e) => {
-                    const { value } = e.target;
-                    // Only update if value contains only numbers
-                    if (/^\d+$/.test(value)) {
-                      advancedFilterState.courseId = (
+                    const newAdvancedFilterState = {
+                      ...pendingAdvancedFilterState,
+                      routeTemplate: (
                         (e.target.value)
                           .trim()
-                      );
-                    }
+                      ),
+                    };
                     dispatch({
                       type: ActionType.UpdateAdvancedFilterState,
-                      advancedFilterState,
+                      advancedFilterState: newAdvancedFilterState,
                     });
                   }}
                 />
               </div>
-            </TabBox>
-
-            {/* Device Info */}
-            <TabBox title="Device">
-              <ButtonInputGroup label="Device Type">
-                <RadioButton
-                  text="All Devices"
-                  ariaLabel="show logs from all devices"
-                  selected={advancedFilterState.isMobile === undefined}
-                  onSelected={() => {
-                    advancedFilterState.isMobile = undefined;
-                    dispatch({
-                      type: ActionType.UpdateAdvancedFilterState,
-                      advancedFilterState,
-                    });
-                  }}
-                />
-                <RadioButton
-                  text="Mobile Only"
-                  ariaLabel="show logs from mobile devices"
-                  selected={advancedFilterState.isMobile === true}
-                  onSelected={() => {
-                    advancedFilterState.isMobile = true;
-                    dispatch({
-                      type: ActionType.UpdateAdvancedFilterState,
-                      advancedFilterState,
-                    });
-                  }}
-                />
-                <RadioButton
-                  text="Desktop Only"
-                  ariaLabel="show logs from desktop devices"
-                  selected={advancedFilterState.isMobile === false}
-                  onSelected={() => {
-                    advancedFilterState.isMobile = false;
-                    dispatch({
-                      type: ActionType.UpdateAdvancedFilterState,
-                      advancedFilterState,
-                    });
-                  }}
-                  noMarginOnRight
-                />
-              </ButtonInputGroup>
-            </TabBox>
-
-            {/* Source */}
-            <TabBox title="Source">
-              <ButtonInputGroup label="Source Type">
-                <RadioButton
-                  text="Both"
-                  ariaLabel="show logs from all sources"
-                  selected={advancedFilterState.source === undefined}
-                  onSelected={() => {
-                    advancedFilterState.source = undefined;
-                    dispatch({
-                      type: ActionType.UpdateAdvancedFilterState,
-                      advancedFilterState,
-                    });
-                  }}
-                />
-                <RadioButton
-                  text="Client Only"
-                  ariaLabel="show logs from client source"
-                  selected={advancedFilterState.source === LogSource.Client}
-                  onSelected={() => {
-                    advancedFilterState.source = LogSource.Client;
-                    dispatch({
-                      type: ActionType.UpdateAdvancedFilterState,
-                      advancedFilterState,
-                    });
-                  }}
-                />
-                <RadioButton
-                  text="Server Only"
-                  ariaLabel="show logs from server source"
-                  selected={advancedFilterState.source === LogSource.Server}
-                  onSelected={() => {
-                    advancedFilterState.source = LogSource.Server;
-                    dispatch({
-                      type: ActionType.UpdateAdvancedFilterState,
-                      advancedFilterState,
-                    });
-                  }}
-                  noMarginOnRight
-                />
-              </ButtonInputGroup>
-
-              {/* Server filters */}
-              {advancedFilterState.source !== LogSource.Client && (
-                <div className="mt-2">
-                  {/* Route path */}
-                  <div className="input-group mb-2">
-                    <span className="input-group-text">
-                      Server Route Path
-                    </span>
-                    <input
-                      type="text"
-                      className="form-control"
-                      aria-label="query for server route path"
-                      value={advancedFilterState.routePath}
-                      placeholder="e.g. /api/ttm/courses/12345"
-                      onChange={(e) => {
-                        advancedFilterState.courseName = (
-                          (e.target.value)
-                            .trim()
-                        );
-                        dispatch({
-                          type: ActionType.UpdateAdvancedFilterState,
-                          advancedFilterState,
-                        });
-                      }}
-                    />
-                  </div>
-
-                  {/* Route template */}
-                  <div className="input-group mb-2">
-                    <span className="input-group-text">
-                      Server Route Template
-                    </span>
-                    <input
-                      type="text"
-                      className="form-control"
-                      aria-label="query for server route template"
-                      value={advancedFilterState.routeTemplate}
-                      placeholder="e.g. /api/ttm/courses/:courseId"
-                      onChange={(e) => {
-                        advancedFilterState.courseName = (
-                          (e.target.value)
-                            .trim()
-                        );
-                        dispatch({
-                          type: ActionType.UpdateAdvancedFilterState,
-                          advancedFilterState,
-                        });
-                      }}
-                    />
-                  </div>
-                </div>
-              )}
-            </TabBox>
-          </>
-        );
-      }
+            </div>
+            )}
+          </TabBox>
+        </>
+      );
     }
+  }
 
-    // Filters UI
-    const filters = (
-      <>
-        {filterToggles}
-        {filterDrawer && (
-          <Drawer customBackgroundColor="#eee">
-            {filterDrawer}
-          </Drawer>
-        )}
-      </>
-    );
-
-    // Actually filter the logs
-    // > Perform filters
-    const logs: Log[] = [];
-    Object.keys(logMap).forEach((year) => {
-      Object.keys(logMap[year]).forEach((month) => {
-        logMap[year][month].forEach((log) => {
-          /* ----------- Date Filter ---------- */
-
-          // Before start date
-          if (
-            // Previous year
-            log.year < dateFilterState.startDate.year
-            // Same year, earlier month
-            || (
-              (log.year === dateFilterState.startDate.year)
-              && (log.month < dateFilterState.startDate.month)
-            )
-            // Same year, same month, earlier day
-            || (
-              (log.year === dateFilterState.startDate.year)
-              && (log.month === dateFilterState.startDate.month)
-              && (log.day < dateFilterState.startDate.day)
-            )
-          ) {
-            return;
-          }
-
-          // After end date
-          if (
-            // Later year
-            log.year > dateFilterState.endDate.year
-            // Same year, later month
-            || (
-              (log.year === dateFilterState.endDate.year)
-              && (log.month > dateFilterState.endDate.month)
-            )
-            // Same year, same month, later day
-            || (
-              (log.year === dateFilterState.endDate.year)
-              && (log.month === dateFilterState.endDate.month)
-              && (log.day > dateFilterState.endDate.day)
-            )
-          ) {
-            return;
-          }
-
-          /* --------- Context Filter --------- */
-
-          // Context doesn't match
-          if (
-            // Whole context is deselected
-            contextFilterState[log.context] === false
-            // None of the subcontexts are selected
-            || (
-              // Has subcontexts
-              typeof contextFilterState[log.context] !== 'boolean'
-              // None of the subcontexts are selected
-              && Object.values(contextFilterState[log.context] ?? {})
-                .every((isSelected) => {
-                  return !isSelected;
-                })
-            )
-          ) {
-            return;
-          }
-
-          // Subcontext doesn't match
-          if (
-            // Log context is not "uncategorized" (no point in further filters)
-            log.context !== LogBuiltInMetadata.Context.Uncategorized
-            // Log has a subcontext
-            && log.subcontext
-            // Context has subcontexts
-            && (
-              contextFilterState[log.context]
-              && contextFilterState[log.context] !== false
-              && contextFilterState[log.context] !== true
-            )
-            // Subcontext is not selected
-            && !(contextFilterState as any)[log.context][log.subcontext]
-          ) {
-            return;
-          }
-
-          /* -------------- Tags -------------- */
-
-          // No tags match
-          if (
-            // At least one tag is required
-            Object.values(tagFilterState)
-              .filter((isSelected) => {
-                return isSelected;
-              })
-              .length > 0
-            // No tags match
-            && log.tags.every((tag) => {
-              return !tagFilterState[tag];
-            })
-          ) {
-            return;
-          }
-
-          /* ------- Actions and Errors ------- */
-
-          // Log type doesn't match
-          if (
-            // Filter won't allow all types
-            actionErrorFilterState.type !== undefined
-            // Log type doesn't match
-            && actionErrorFilterState.type !== log.type
-          ) {
-            return;
-          }
-
-          // Filter errors
-          if (log.type === LogType.Error) {
-            // Message doesn't match
-            if (
-              // Message exists
-              log.errorMessage
-              // Message filter exists
-              && actionErrorFilterState.errorMessage.trim().length > 0
-              // Message doesn't match
-              && log.errorMessage.toLowerCase().includes(
-                actionErrorFilterState.errorMessage.trim().toLowerCase(),
-              )
-            ) {
-              return;
-            }
-
-            // Code doesn't match
-            if (
-              // Code exists
-              log.errorCode
-              // Code filter exists
-              && actionErrorFilterState.errorCode.trim().length > 0
-              // Code doesn't match
-              && log.errorCode.toUpperCase().includes(
-                actionErrorFilterState.errorCode.trim().toUpperCase(),
-              )
-            ) {
-              return;
-            }
-          }
-
-          // Filter actions
-          if (log.type === LogType.Action) {
-            // Target isn't selected
-            if (
-              // Target exists
-              log.target
-              // Target isn't selected
-              && !actionErrorFilterState.target[log.target]
-            ) {
-              return;
-            }
-
-            // Action
-            if (
-              // Action exists
-              log.action
-              // Action isn't selected
-              && !actionErrorFilterState.action[log.action]
-            ) {
-              return;
-            }
-          }
-
-          /* --------- Advanced Filter -------- */
-
-          // First name doesn't match
-          if (
-            // First name exists
-            log.userFirstName
-            // First name query doesn't match
-            && !log.userFirstName.toLowerCase().includes(
-              advancedFilterState.userFirstName.toLowerCase().trim(),
-            )
-          ) {
-            return;
-          }
-
-          // Last name doesn't match
-          if (
-            // Last name exists
-            log.userLastName
-            // Last name query doesn't match
-            && !log.userLastName.toLowerCase().includes(
-              advancedFilterState.userLastName.toLowerCase().trim(),
-            )
-          ) {
-            return;
-          }
-
-          // Email doesn't match
-          if (
-            // Email exists
-            log.userEmail
-            // Email query doesn't match
-            && !log.userEmail.toLowerCase().includes(
-              advancedFilterState.userEmail.toLowerCase().trim(),
-            )
-          ) {
-            return;
-          }
-
-          // User id doesn't match
-          if (
-            // User id exists
-            log.userId
-            // User id doesn't match
-            && !String(log.userId).includes(
-              advancedFilterState.userId.trim(),
-            )
-          ) {
-            return;
-          }
-
-          // Learner not allowed
-          if (
-            // User is a learner
-            log.isLearner
-            // Learners aren't included
-            && !advancedFilterState.includeLearners
-          ) {
-            return;
-          }
-
-          // TTM not allowed
-          if (
-            // User is a ttm
-            log.isTTM
-            // TTMs aren't included
-            && !advancedFilterState.includeTTMs
-          ) {
-            return;
-          }
-
-          // Admin not allowed
-          if (
-            // User is an admin
-            log.isAdmin
-            // Admins aren't included
-            && !advancedFilterState.includeAdmins
-          ) {
-            return;
-          }
-
-          // Course Id doesn't match
-          if (
-            // Course Id exists
-            log.courseId
-            // Course Id doesn't match
-            && !String(log.courseId).includes(
-              advancedFilterState.courseId.trim(),
-            )
-          ) {
-            return;
-          }
-
-          // Course name doesn't match
-          if (
-            // Course name exists
-            log.courseName
-            // Course name doesn't match
-            && !String(log.courseName).includes(
-              advancedFilterState.courseName.trim(),
-            )
-          ) {
-            return;
-          }
-
-          // Mobile filter doesn't match
-          if (
-            // Mobile filter exists
-            advancedFilterState.isMobile !== undefined
-            // Device info exists
-            && log.device
-            // Mobile filter doesn't match
-            && (advancedFilterState.isMobile !== log.device.isMobile)
-          ) {
-            return;
-          }
-
-          // Log source doesn't match
-          if (
-            // Source filter exists
-            advancedFilterState.source !== undefined
-            // Source info exists
-            && log.source
-            // Source filter doesn't match
-            && (advancedFilterState.source !== log.source)
-          ) {
-            return;
-          }
-
-          // Route path doesn't match (Only for server source)
-          if (
-            // Source is server
-            (log.source === LogSource.Server)
-            // Route path is being filtered
-            && (advancedFilterState.routePath.trim().length)
-            // Route path doesn't match
-            && !(log.routePath.includes(advancedFilterState.routePath.trim()))
-          ) {
-            return;
-          }
-
-          // Route template doesn't match (Only for server source)
-          if (
-            // Source is server
-            (log.source === LogSource.Server)
-            // Route template is being filtered
-            && (advancedFilterState.routeTemplate.trim().length)
-            // Route template doesn't match
-            && !(log.routeTemplate.includes(advancedFilterState.routeTemplate.trim()))
-          ) {
-            return;
-          }
-
-          /* -------------- Done -------------- */
-
-          // Made it past all filters. Add to the list
-          logs.push(log);
-        });
-      });
-    });
+  // Filters UI
+  const filters = (
+    <>
+      {filterToggles}
+      {filterDrawer && (
+      <Drawer customBackgroundColor="#eee">
+        {filterDrawer}
+      </Drawer>
+      )}
+    </>
+  );
 
-    /*----------------------------------------*/
-    /* ---------------- Data ---------------- */
-    /*----------------------------------------*/
-
-    // Nothing to show notice
-    const noLogsNotice = (
-      logs.length === 0
-        ? (
-          <div className="alert alert-warning text-center mt-2">
-            <h4 className="m-1">
-              No Logs to Show
-            </h4>
-            <div>
-              Either your filters are too strict or no matching logs have been
-              created yet.
-            </div>
+  // Body that will be filled with the contents of the panel
+  const body: React.ReactNode = (
+    <>
+      {
+        loading && (
+          <div className="text-center p-5">
+            <LoadingSpinner />
           </div>
         )
-        : undefined
-    );
-
-    // Create intelliTable
-    const dataTable = (
-      <IntelliTable
-        title="Matching Logs:"
-        csvName={`Logs from ${getHumanReadableDate()}`}
-        id="logs"
-        data={logs}
-        columns={columns}
-      />
-    );
-
-    // Main body
-    body = (
-      <>
-        {filters}
-        <div className="mt-2">
-          {dataTable}
-          {noLogsNotice}
+      }
+      {!loading && (
+        <div>
+          {filters}
         </div>
-      </>
-    );
-  }
+      )}
+      {
+      !loading && logs.length === 0 && (
+        <div className="alert alert-warning text-center mt-2">
+          <h4 className="m-1">No Logs to Show</h4>
+          <div>
+            Either your filters are too strict or no matching logs have been
+            created yet.
+          </div>
+        </div>
+      )
+    }
+      <div
+        className={loading || logs.length === 0 ? 'd-none' : undefined}
+      >
+        <IntelliTable
+          title="Matching Logs"
+          csvName={`Logs from ${getHumanReadableDate()}`}
+          id="logs"
+          data={logs}
+          columns={columns}
+        />
+      </div>
+      {!loading && logs.length > 0 && paginationControls}
+    </>
+  );
 
   /* ---------- Wrap in Modal --------- */
 
@@ -2265,9 +2097,7 @@ const LogReviewer: React.FC<Props> = (props) => {
       <div className="LogReviewer-inner-container">
         <div className="LogReviewer-header">
           <div className="LogReviewer-header-title">
-            <h3 className="text-center m-0">
-              Log Review Dashboard
-            </h3>
+            <h3 className="text-center">Log Review Dashboard</h3>
           </div>
           <div style={{ width: 0 }}>
             <button
@@ -2276,15 +2106,11 @@ const LogReviewer: React.FC<Props> = (props) => {
               aria-label="close log reviewer panel"
               onClick={onClose}
             >
-              <FontAwesomeIcon
-                icon={faTimes}
-              />
+              <FontAwesomeIcon icon={faTimes} />
             </button>
           </div>
         </div>
-        <div className="LogReviewer-contents">
-          {body}
-        </div>
+        <div className="LogReviewer-contents">{body}</div>
       </div>
     </div>
   );