dce-reactkit 4.0.0-beta-date-and-time.1 → 4.0.0-beta-logreviewer.1

package/dist/cjs/index.js

@@ -6,6 +6,7 @@ var React = require('react');
 var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
 var freeRegularSvgIcons = require('@fortawesome/free-regular-svg-icons');
+var clone = require('nanoclone');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,6 +30,7 @@ function _interopNamespace(e) {
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var clone__default = /*#__PURE__*/_interopDefaultLegacy(clone);
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -55,7 +57,7 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
-// Highest error code = DRK36
+// Highest error code = DRK34
 /**
  * List of error codes built into the react kit
  * @author Gabe Abrams
@@ -66,8 +68,6 @@ var ReactKitErrorCode;
     ReactKitErrorCode["NoCode"] = "DRK2";
     ReactKitErrorCode["SessionExpired"] = "DRK3";
     ReactKitErrorCode["NoCACCLSendRequestFunction"] = "DRK7";
-    ReactKitErrorCode["SimpleDateChooserInvalidDateRange"] = "DRK35";
-    ReactKitErrorCode["SimpleDateChooserInvalidNumMonths"] = "DRK36";
 })(ReactKitErrorCode || (ReactKitErrorCode = {}));
 var ReactKitErrorCode$1 = ReactKitErrorCode;
 
@@ -2549,19 +2549,6 @@ const ButtonInputGroup = (props) => {
                 : children))));
 };
 
-// Constants
-const ORDINALS = ['th', 'st', 'nd', 'rd'];
-/**
- * Get a number's ordinal
- * @author Gabe Abrams
- * @param num the number being analyzed
- * @returns ordinal
- */
-const getOrdinal = (num) => {
-    var _a, _b;
-    return ((_b = (_a = ORDINALS[(num - 20) % 10]) !== null && _a !== void 0 ? _a : ORDINALS[num]) !== null && _b !== void 0 ? _b : ORDINALS[0]);
-};
-
 const monthNames = [
     { short: 'Jan', full: 'January' },
     { short: 'Feb', full: 'February' },
@@ -2590,6 +2577,19 @@ const getMonthName = (month) => {
     return ((_a = monthNames[month - 1]) !== null && _a !== void 0 ? _a : monthNames[0]);
 };
 
+// Constants
+const ORDINALS = ['th', 'st', 'nd', 'rd'];
+/**
+ * Get a number's ordinal
+ * @author Gabe Abrams
+ * @param num the number being analyzed
+ * @returns ordinal
+ */
+const getOrdinal = (num) => {
+    var _a, _b;
+    return ((_b = (_a = ORDINALS[(num - 20) % 10]) !== null && _a !== void 0 ? _a : ORDINALS[num]) !== null && _b !== void 0 ? _b : ORDINALS[0]);
+};
+
 /**
  * Get current time info in US Boston Eastern Time, independent of machine
  *   timezone
@@ -2653,7 +2653,6 @@ const getTimeInfoInET = (dateOrTimestamp) => {
 /**
  * A very simple, lightweight date chooser
  * @author Gabe Abrams
- * @author Gardeniu Liu
  */
 /*------------------------------------------------------------------------*/
 /* ------------------------------ Component ----------------------------- */
@@ -2663,7 +2662,7 @@ const SimpleDateChooser = (props) => {
     /* -------------------------------- Setup ------------------------------- */
     /*------------------------------------------------------------------------*/
     /* -------------- Props ------------- */
-    const { ariaLabel, name, onChange, numMonthsToShow = 6, dontAllowFuture, dontAllowPast, } = props;
+    const { ariaLabel, name, onChange, chooseFromPast, numMonthsToShow = 6, } = props;
     /*------------------------------------------------------------------------*/
     /* ------------------------------- Render ------------------------------- */
     /*------------------------------------------------------------------------*/
@@ -2675,28 +2674,14 @@ const SimpleDateChooser = (props) => {
     const choices = [];
     let startYear = today.year;
     let startMonth = today.month;
-    // Don't allow past or future dates
-    if (dontAllowPast && dontAllowFuture) {
-        throw new ErrorWithCode('No past or future dates allowed', ReactKitErrorCode$1.SimpleDateChooserInvalidDateRange);
-    }
-    // Require numMonthsToShow to be positive
-    if (numMonthsToShow <= 0) {
-        throw new ErrorWithCode('numMonthsToShow must be positive', ReactKitErrorCode$1.SimpleDateChooserInvalidNumMonths);
-    }
-    // Recalculate startMonth and startYear when allowing past dates
-    if (!dontAllowPast) {
+    if (chooseFromPast) {
         startMonth -= Math.max(0, numMonthsToShow - 1);
         while (startMonth <= 0) {
             startMonth += 12;
             startYear -= 1;
         }
     }
-    // Calculate total number of months to show
-    let totalMonthsToShow = numMonthsToShow;
-    if (!dontAllowPast && !dontAllowFuture) {
-        totalMonthsToShow = totalMonthsToShow * 2 - 1;
-    }
-    for (let i = 0; i < totalMonthsToShow; i++) {
+    for (let i = 0; i < numMonthsToShow; i++) {
         // Get month and year info
         const unmoddedMonth = (startMonth + i);
         let month = unmoddedMonth;
@@ -2715,25 +2700,23 @@ const SimpleDateChooser = (props) => {
         // Figure out which days are allowed
         const days = [];
         const numDaysInMonth = (new Date(year, month, 0)).getDate();
-        // Current month
-        if (month === today.month && year === today.year) {
-            // Past selection: add all previous days of the month
-            if (!dontAllowPast) {
-                for (let day = 1; day < today.day; day++) {
-                    days.push(day);
-                }
-            }
-            days.push(today.day); // Add current day
-            // Future selection: add all remaining days of the month
-            if (!dontAllowFuture) {
-                for (let day = today.day + 1; day <= numDaysInMonth; day++) {
-                    days.push(day);
-                }
+        if (chooseFromPast) {
+            // Past selection
+            const numDaysToAdd = ((month === today.month)
+                ? today.day // Current month, only add up to today
+                : numDaysInMonth // Past month, add all days
+            );
+            for (let day = 1; day <= numDaysToAdd; day++) {
+                days.push(day);
             }
         }
-        else { // Past or future month
-            // Include all days in the month
-            for (let day = 1; day <= numDaysInMonth; day++) {
+        else {
+            // Future selection: add all remaining days of the month
+            const firstDay = (month === today.month
+                ? today.day // Current month: start at current date
+                : 1 // Future month: start at beginning of month
+            );
+            for (let day = firstDay; day <= numDaysInMonth; day++) {
                 days.push(day);
             }
         }
@@ -2753,8 +2736,8 @@ const SimpleDateChooser = (props) => {
         monthOptions.push(React__default["default"].createElement("option", { key: `${choice.year}-${choice.month}`, value: `${choice.month}-${choice.year}`, "aria-label": `choose ${choice.choiceName}`, onSelect: () => {
                 onChange(choice.month, choice.days[0], choice.year);
             } }, choice.choiceName));
-        // This is the currently selected month
         if (month === choice.month) {
+            // This is the currently selected month
             // Create day options
             choice.days.forEach((dayChoice) => {
                 const ordinal = getOrdinal(dayChoice);
@@ -2776,125 +2759,6 @@ const SimpleDateChooser = (props) => {
             } }, dayOptions)));
 };
 
-/**
- * Pad a number with zeros on the left (e.g. 5 becomes 05 with 2 digit padding)
- * @author Gabe Abrams
- * @param num the number to pad
- * @param numDigits the minimum number of digits before the decimal
- * @returns padded number
- */
-const padZerosLeft = (num, numDigits) => {
-    // Convert to string
-    let out = String(num);
-    // Add zeros
-    while (out.split('.')[0].length < numDigits) {
-        out = `0${out}`;
-    }
-    // Return
-    return out;
-};
-
-/**
- * A very simple, lightweight time chooser
- * @author Gardenia Liu
- */
-/*------------------------------------------------------------------------*/
-/* ------------------------------ Constants ----------------------------- */
-/*------------------------------------------------------------------------*/
-// Allowed intervals between options
-const ALLOWED_INTERVALS = [15, 30, 60]; // min
-// Default interval to use if an unsupported interval is passed in
-const DEFAULT_INTERVAL = ALLOWED_INTERVALS[0]; // min
-/*------------------------------------------------------------------------*/
-/* ------------------------------ Component ----------------------------- */
-/*------------------------------------------------------------------------*/
-const SimpleTimeChooser = (props) => {
-    /*------------------------------------------------------------------------*/
-    /* -------------------------------- Setup ------------------------------- */
-    /*------------------------------------------------------------------------*/
-    /* -------------- Props ------------- */
-    const { ariaLabel, name, hour, minute, onChange, } = props;
-    let { intervalMin = DEFAULT_INTERVAL, } = props;
-    // Use default interval if not supported
-    if (ALLOWED_INTERVALS.includes(intervalMin)) {
-        intervalMin = DEFAULT_INTERVAL;
-    }
-    /*------------------------------------------------------------------------*/
-    /* ------------------------- Component Functions ------------------------ */
-    /*------------------------------------------------------------------------*/
-    /**
-     * Convert number of minutes since midnight into 24hour and minute format
-     * @author Gabe Abrams
-     * @param minSinceMidnight total minutes since midnight
-     * @returns hours (24) and minutes
-     */
-    const convertMinSinceMidnightToHoursAndMin = (minSinceMidnight) => {
-        return {
-            hours: Math.floor(minSinceMidnight / 60),
-            minutes: minSinceMidnight % 60,
-        };
-    };
-    /**
-     * Convert time in minutes into HH:MM format
-     * @author Gardenia Liu
-     * @param totalMinutes total minutes since midnight
-     * @returns formatted time string
-     */
-    const formatTime = (totalMinutes) => {
-        // Handle special cases
-        if (totalMinutes === 0) {
-            return '12:00 Midnight';
-        }
-        if (totalMinutes === 12 * 60) {
-            return '12:00 Noon';
-        }
-        // All normal cases:
-        const timeInfo = convertMinSinceMidnightToHoursAndMin(totalMinutes);
-        let { hours } = timeInfo;
-        const { minutes } = timeInfo;
-        // Process 24hr -> 12hr
-        const isAM = (hours < 12);
-        if (hours === 0) {
-            hours = 12;
-        }
-        else if (hours > 12) {
-            hours %= 12;
-        }
-        // Pad with zeros
-        const paddedMinutes = padZerosLeft(minutes, 2);
-        // Assemble time string
-        return `${hours}:${paddedMinutes} ${isAM ? 'AM' : 'PM'}`;
-    };
-    /*------------------------------------------------------------------------*/
-    /* ------------------------------- Render ------------------------------- */
-    /*------------------------------------------------------------------------*/
-    /*----------------------------------------*/
-    /* --------------- Main UI -------------- */
-    /*----------------------------------------*/
-    // Generate list of time options
-    const times = [];
-    for (let time = 0; time < 24 * 60; time += intervalMin) {
-        times.push(formatTime(time));
-    }
-    // Create choice options
-    const selectedTimeMin = hour * 60 + minute; // minutes since midnight
-    const timeOptions = times.map((timeString, timeIndex) => {
-        // Create time option
-        const numMinutesForChoice = timeIndex * intervalMin;
-        // Render the option
-        return (React__default["default"].createElement("option", { key: numMinutesForChoice, value: numMinutesForChoice, "aria-label": `choose ${timeString}` }, timeString));
-    });
-    return (React__default["default"].createElement("div", { className: "SimpleTimeChooser-container", "aria-label": `time chooser with selected time: ${formatTime(selectedTimeMin)}` },
-        React__default["default"].createElement("select", { "aria-label": `time for ${ariaLabel}`, className: "custom-select d-inline-block", style: { width: 'auto' }, id: `SimpleTimeChooser-${name}-time`, value: selectedTimeMin, onChange: (e) => {
-                // Parse selector value (string)
-                const newTime = Number.parseInt(e.target.value, 10);
-                // Convert minutes since midnight to hour and minute
-                const timeInfo = convertMinSinceMidnightToHoursAndMin(newTime);
-                // Notify parent of change
-                onChange(timeInfo.hours, timeInfo.minutes);
-            } }, timeOptions)));
-};
-
 /**
  * Drawer container
  * @author Gabe Abrams
@@ -3650,10 +3514,10 @@ const getHumanReadableDate = (dateOrTimestamp) => {
 };
 
 /**
- * Path of the route for storing client-side logs
+ * Path of the route for getting logs for log review
  * @author Gabe Abrams
  */
-const LOG_REVIEW_ROUTE_PATH_PREFIX = `/admin${ROUTE_PATH_PREFIX}/logs`;
+const LOG_REVIEW_GET_LOGS_ROUTE = `/admin${ROUTE_PATH_PREFIX}/logs`;
 
 /**
  * Source of a log event
@@ -4258,6 +4122,70 @@ const IntelliTable = (props) => {
             } }, table)));
 };
 
+// Import React
+/*------------------------------------------------------------------------*/
+/* ------------------------------ Component ----------------------------- */
+/*------------------------------------------------------------------------*/
+const Pagination = ({ currentPage, numPages, loading = false, onPageChanged, }) => {
+    /*------------------------------------------------------------------------*/
+    /* -------------------------------- Setup ------------------------------- */
+    /*------------------------------------------------------------------------*/
+    // Compute pages to display
+    const pages = [];
+    const delta = 2; // how many pages to show on either side of current
+    let start = Math.max(1, currentPage - delta);
+    let end = Math.min(numPages, currentPage + delta);
+    // If we are too close to the beginning or end, shift the window.
+    if (currentPage - delta < 1) {
+        end = Math.min(numPages, end + (1 - (currentPage - delta)));
+    }
+    if (currentPage + delta > numPages) {
+        start = Math.max(1, start - ((currentPage + delta) - numPages));
+    }
+    for (let i = start; i <= end; i++) {
+        pages.push(i);
+    }
+    /*------------------------------------------------------------------------*/
+    /* ------------------------------- Render ------------------------------- */
+    /*------------------------------------------------------------------------*/
+    return (React__default["default"].createElement("nav", { "aria-label": "Page navigation for logs", className: "mt-3" },
+        React__default["default"].createElement("ul", { className: "pagination justify-content-center" },
+            React__default["default"].createElement("li", { className: `page-item ${(currentPage <= 1 || loading) ? 'disabled' : ''}` },
+                React__default["default"].createElement("button", { type: "button", className: "page-link", onClick: () => { return onPageChanged(currentPage - 1); }, disabled: currentPage <= 1 || loading, "aria-label": "Go to previous page" },
+                    React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faArrowLeft }),
+                    ' ',
+                    "Prev")),
+            currentPage > 3
+                && pages[0] !== 1
+                && (React__default["default"].createElement("li", { className: "page-item" },
+                    React__default["default"].createElement("button", { type: "button", className: "page-link", onClick: () => { return onPageChanged(1); }, disabled: loading, "aria-label": "Go to page 1" }, "1"))),
+            currentPage > 4 && (React__default["default"].createElement("li", { className: "page-item disabled" },
+                React__default["default"].createElement("span", { className: "page-link" }, "..."))),
+            pages.map((pageNum) => {
+                return (React__default["default"].createElement("li", { key: pageNum, className: `page-item ${pageNum === currentPage ? 'active' : ''}` },
+                    React__default["default"].createElement("button", { type: "button", className: "page-link", onClick: () => { return onPageChanged(pageNum); }, disabled: loading, "aria-label": `Go to page ${pageNum}` }, pageNum)));
+            }),
+            currentPage < numPages - 3 && (React__default["default"].createElement("li", { className: "page-item disabled" },
+                React__default["default"].createElement("span", { className: "page-link" }, "..."))),
+            currentPage < numPages - 2
+                && pages[pages.length - 1] !== numPages
+                && (React__default["default"].createElement("li", { className: "page-item" },
+                    React__default["default"].createElement("button", { type: "button", className: "page-link", onClick: () => { return onPageChanged(numPages); }, disabled: loading, "aria-label": "Go to last page" }, numPages))),
+            React__default["default"].createElement("li", { className: `page-item ${(currentPage >= numPages || loading) ? 'disabled' : ''}` },
+                React__default["default"].createElement("button", { type: "button", className: "page-link", onClick: () => { return onPageChanged(currentPage + 1); }, disabled: currentPage >= numPages || loading, "aria-label": "Go to next page" },
+                    "Next",
+                    ' ',
+                    React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faArrowRight }))))));
+};
+
+/**
+ * Deeply clones an object
+ * @author Yuen Ler Chow
+ * @param obj the object to clone
+ * @returns a deep clone of the object
+ */
+const cloneDeep = clone__default["default"];
+
 /**
  * Log reviewer panel that allows users (must be approved admins) to
  *   review logs written by dce-reactkit
@@ -4613,7 +4541,7 @@ var ActionType$6;
 (function (ActionType) {
     // Show the loading bar
     ActionType["StartLoading"] = "start-loading";
-    // Finish loading one or more months of logs
+    // Finish loading logs
     ActionType["FinishLoading"] = "finish-loading";
     // Reset filters to initial values
     ActionType["ResetFilters"] = "reset-filters";
@@ -4631,6 +4559,14 @@ var ActionType$6;
     ActionType["UpdateActionErrorFilterState"] = "update-action-error-filter-state";
     // Update the advanced filter state
     ActionType["UpdateAdvancedFilterState"] = "update-advanced-filter-state";
+    // Set has another page
+    ActionType["SetHasAnotherPage"] = "set-has-another-page";
+    // Set the number of pages
+    ActionType["SetNumPages"] = "set-num-pages";
+    // Set page number
+    ActionType["SetPageNumber"] = "set-page-number";
+    // Reset user made filter change indicator
+    ActionType["ResetUserMadeFilterChange"] = "reset-user-made-filter-change";
 })(ActionType$6 || (ActionType$6 = {}));
 /**
  * Reducer that executes actions
@@ -4644,7 +4580,7 @@ const reducer$7 = (state, action) => {
             return Object.assign(Object.assign({}, state), { loading: true });
         }
         case ActionType$6.FinishLoading: {
-            return Object.assign(Object.assign({}, state), { loading: false, logMap: action.logMap });
+            return Object.assign(Object.assign({}, state), { loading: false, logs: action.logs });
         }
         case ActionType$6.ToggleFilterDrawer: {
             return Object.assign(Object.assign({}, state), { expandedFilterDrawer: (state.expandedFilterDrawer === action.filterDrawer
@@ -4655,22 +4591,34 @@ const reducer$7 = (state, action) => {
             return Object.assign(Object.assign({}, state), { expandedFilterDrawer: undefined });
         }
         case ActionType$6.ResetFilters: {
-            return Object.assign(Object.assign({}, state), { dateFilterState: action.initDateFilterState, contextFilterState: action.initContextFilterState, tagFilterState: action.initTagFilterState, actionErrorFilterState: action.initActionErrorFilterState, advancedFilterState: action.initAdvancedFilterState });
+            return Object.assign(Object.assign({}, state), { pendingDateFilterState: action.initDateFilterState, pendingContextFilterState: action.initContextFilterState, pendingTagFilterState: action.initTagFilterState, pendingActionErrorFilterState: action.initActionErrorFilterState, pendingAdvancedFilterState: action.initAdvancedFilterState, pageNumber: 1 });
         }
         case ActionType$6.UpdateDateFilterState: {
-            return Object.assign(Object.assign({}, state), { dateFilterState: action.dateFilterState });
+            return Object.assign(Object.assign({}, state), { pendingDateFilterState: action.dateFilterState, userMadeFilterChange: true });
         }
         case ActionType$6.UpdateContextFilterState: {
-            return Object.assign(Object.assign({}, state), { contextFilterState: action.contextFilterState });
+            return Object.assign(Object.assign({}, state), { pendingContextFilterState: action.contextFilterState, userMadeFilterChange: true });
         }
         case ActionType$6.UpdateTagFilterState: {
-            return Object.assign(Object.assign({}, state), { tagFilterState: action.tagFilterState });
+            return Object.assign(Object.assign({}, state), { pendingTagFilterState: action.tagFilterState, userMadeFilterChange: true });
         }
         case ActionType$6.UpdateActionErrorFilterState: {
-            return Object.assign(Object.assign({}, state), { actionErrorFilterState: action.actionErrorFilterState });
+            return Object.assign(Object.assign({}, state), { pendingActionErrorFilterState: action.actionErrorFilterState, userMadeFilterChange: true });
         }
         case ActionType$6.UpdateAdvancedFilterState: {
-            return Object.assign(Object.assign({}, state), { advancedFilterState: action.advancedFilterState });
+            return Object.assign(Object.assign({}, state), { pendingAdvancedFilterState: action.advancedFilterState, userMadeFilterChange: true });
+        }
+        case ActionType$6.SetHasAnotherPage: {
+            return Object.assign(Object.assign({}, state), { hasAnotherPage: action.hasAnotherPage });
+        }
+        case ActionType$6.SetNumPages: {
+            return Object.assign(Object.assign({}, state), { numPages: action.numPages });
+        }
+        case ActionType$6.SetPageNumber: {
+            return Object.assign(Object.assign({}, state), { pageNumber: action.pageNumber });
+        }
+        case ActionType$6.ResetUserMadeFilterChange: {
+            return Object.assign(Object.assign({}, state), { userMadeFilterChange: false });
         }
         default: {
             return state;
@@ -4741,7 +4689,7 @@ const LogReviewer = (props) => {
         else {
             // Case: subcontexts exist
             initContextFilterState[context] = {};
-            Object.values(contextMap[context]).forEach((subcontext) => {
+            Object.keys(contextMap[context]).forEach((subcontext) => {
                 // Skip self ("_")
                 if (subcontext === '_') {
                     return;
@@ -4789,125 +4737,105 @@ const LogReviewer = (props) => {
     // Initial state
     const initialState = {
         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
     const [state, dispatch] = React.useReducer(reducer$7, initialState);
     // Destructure common state
-    const { loading, logMap, expandedFilterDrawer, dateFilterState, contextFilterState, tagFilterState, actionErrorFilterState, advancedFilterState, } = state;
+    const { loading, logs, expandedFilterDrawer, pendingDateFilterState, pendingContextFilterState, pendingTagFilterState, pendingActionErrorFilterState, pendingAdvancedFilterState, pageNumber, numPages, userMadeFilterChange, } = state;
+    /* -------------- Refs -------------- */
+    // Initialize refs
+    const activeFiltersRef = React.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) => {
-        // List of year/month combos that need to be loaded
-        const toLoad = [];
-        // 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 = (newDateFilterState) => __awaiter(void 0, void 0, void 0, function* () {
-        // Update state
-        dispatch({
-            type: ActionType$6.UpdateDateFilterState,
-            dateFilterState: newDateFilterState,
-        });
-        // 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
+    const fetchLogs = (opts) => __awaiter(void 0, void 0, void 0, function* () {
+        const { filters, pageNum, filtersChanged, } = opts;
         dispatch({
             type: ActionType$6.StartLoading,
         });
-        // Load required months
         try {
-            for (let i = 0; i < toLoad.length; i++) {
-                // Destructure
-                const { year, month } = toLoad[i];
-                // Load
-                let logs = [];
-                let pageNumber = 1;
-                let hasAnotherPage = true;
-                while (hasAnotherPage) {
-                    const response = yield 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;
-                }
-                // Add to map
-                if (!logMap[year]) {
-                    logMap[year] = {};
-                }
-                logMap[year][month] = logs;
+            // Send filters to the server
+            let fetchedLogs = [];
+            // Get logs from server
+            const response = yield visitServerEndpoint({
+                path: LOG_REVIEW_GET_LOGS_ROUTE,
+                method: 'GET',
+                params: {
+                    pageNumber: pageNum,
+                    filters,
+                    countDocuments: filtersChanged,
+                },
+            });
+            fetchedLogs = fetchedLogs.concat(response.items);
+            dispatch({
+                type: ActionType$6.SetHasAnotherPage,
+                hasAnotherPage: response.hasAnotherPage,
+            });
+            if (filtersChanged && response.numPages !== undefined) {
+                dispatch({
+                    type: ActionType$6.SetNumPages,
+                    numPages: response.numPages,
+                });
             }
+            // Update logs in state
+            dispatch({
+                type: ActionType$6.FinishLoading,
+                logs: fetchedLogs,
+            });
+            // Update page number
+            dispatch({
+                type: ActionType$6.SetPageNumber,
+                pageNumber: pageNum,
+            });
         }
         catch (err) {
             return showFatalError(err);
         }
-        // Finish loading
-        dispatch({
-            type: ActionType$6.FinishLoading,
-            logMap,
-        });
     });
     /*------------------------------------------------------------------------*/
     /* ------------------------- Lifecycle Functions ------------------------ */
     /*------------------------------------------------------------------------*/
     /**
-     * Mount
-     * @author Gabe Abrams
+     * Fetch logs on mount
+     * @author Yuen Ler Chow
      */
     React.useEffect(() => {
-        // Perform initial load
-        handleDateRangeUpdated(dateFilterState);
+        fetchLogs({
+            filters: {
+                dateFilterState: pendingDateFilterState,
+                contextFilterState: pendingContextFilterState,
+                tagFilterState: pendingTagFilterState,
+                actionErrorFilterState: pendingActionErrorFilterState,
+                advancedFilterState: pendingAdvancedFilterState,
+            },
+            pageNum: 1,
+            filtersChanged: true,
+        });
     }, []);
     /*------------------------------------------------------------------------*/
     /* ------------------------------- Render ------------------------------- */
@@ -4915,718 +4843,534 @@ const LogReviewer = (props) => {
     /*----------------------------------------*/
     /* --------------- Main UI -------------- */
     /*----------------------------------------*/
-    // Body that will be filled with the contents of the panel
-    let body;
-    /* ------------- Loading ------------ */
-    if (loading) {
-        body = (React__default["default"].createElement("div", { className: "text-center p-5" },
-            React__default["default"].createElement(LoadingSpinner, null)));
-    }
-    /* ------------ Review UI ----------- */
-    if (!loading) {
-        /*----------------------------------------*/
-        /* --------------- Filters -------------- */
-        /*----------------------------------------*/
-        // Filter toggle
-        const filterToggles = (React__default["default"].createElement("div", { className: "LogReviewer-filter-toggles" },
-            React__default["default"].createElement("h3", { className: "m-0" }, "Filters:"),
-            React__default["default"].createElement("div", { className: "LogReviewer-filter-toggle-buttons alert alert-secondary p-2 m-0" },
-                React__default["default"].createElement("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$6.ToggleFilterDrawer,
-                            filterDrawer: FilterDrawer.Date,
-                        });
-                    } },
-                    React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCalendar, className: "me-2" }),
-                    "Date"),
-                React__default["default"].createElement("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$6.ToggleFilterDrawer,
-                            filterDrawer: FilterDrawer.Context,
-                        });
-                    } },
-                    React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCircle, className: "me-2" }),
-                    "Context"),
-                (LogMetadata.Tag && Object.keys(LogMetadata.Tag).length > 0) && (React__default["default"].createElement("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$6.ToggleFilterDrawer,
-                            filterDrawer: FilterDrawer.Tag,
-                        });
-                    } },
-                    React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faTag, className: "me-2" }),
-                    "Tag")),
-                React__default["default"].createElement("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$6.ToggleFilterDrawer,
-                            filterDrawer: FilterDrawer.Action,
-                        });
-                    } },
-                    React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faHammer, className: "me-2" }),
-                    "Action"),
-                React__default["default"].createElement("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: () => {
+    /*----------------------------------------*/
+    /* ------------ Pagination -------------- */
+    /*----------------------------------------*/
+    const paginationControls = logs.length > 0 && (React__default["default"].createElement(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,
+            });
+        } }));
+    /*----------------------------------------*/
+    /* --------------- Filters -------------- */
+    /*----------------------------------------*/
+    // Filter toggle
+    const filterToggles = (React__default["default"].createElement("div", { className: "LogReviewer-filter-toggles" },
+        React__default["default"].createElement("div", { className: "LogReviewer-filter-toggle-buttons alert alert-secondary p-2 m-0" },
+            React__default["default"].createElement("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$6.ToggleFilterDrawer,
+                        filterDrawer: FilterDrawer.Date,
+                    });
+                } },
+                React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCalendar, className: "me-2" }),
+                "Date"),
+            React__default["default"].createElement("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$6.ToggleFilterDrawer,
+                        filterDrawer: FilterDrawer.Context,
+                    });
+                } },
+                React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCircle, className: "me-2" }),
+                "Context"),
+            (LogMetadata.Tag && Object.keys(LogMetadata.Tag).length > 0) && (React__default["default"].createElement("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$6.ToggleFilterDrawer,
+                        filterDrawer: FilterDrawer.Tag,
+                    });
+                } },
+                React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faTag, className: "me-2" }),
+                "Tag")),
+            React__default["default"].createElement("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$6.ToggleFilterDrawer,
+                        filterDrawer: FilterDrawer.Action,
+                    });
+                } },
+                React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faHammer, className: "me-2" }),
+                "Action"),
+            React__default["default"].createElement("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$6.ToggleFilterDrawer,
+                        filterDrawer: FilterDrawer.Advanced,
+                    });
+                } },
+                React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faList, className: "me-2" }),
+                "Advanced"),
+            React__default["default"].createElement("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$6.ResetFilters,
+                        initActionErrorFilterState,
+                        initAdvancedFilterState,
+                        initContextFilterState,
+                        initDateFilterState,
+                        initTagFilterState,
+                    });
+                    dispatch({
+                        type: ActionType$6.HideFilterDrawer,
+                    });
+                } },
+                React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faTimes }),
+                ' ',
+                "Reset"),
+            userMadeFilterChange && (React__default["default"].createElement("button", { type: "button", id: "LogReviewer-submit-filters-button", className: "btn btn-primary ms-2", "aria-label": "submit filters", onClick: () => {
+                    dispatch({
+                        type: ActionType$6.HideFilterDrawer,
+                    });
+                    // Reset user made filter change indicator
+                    dispatch({
+                        type: ActionType$6.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,
+                    });
+                } },
+                React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faSearch }),
+                ' ',
+                "Apply Filters")))));
+    // Filter drawer
+    let filterDrawer;
+    if (expandedFilterDrawer) {
+        if (expandedFilterDrawer === FilterDrawer.Date) {
+            filterDrawer = (React__default["default"].createElement(TabBox, { title: "Date" },
+                React__default["default"].createElement(SimpleDateChooser, { ariaLabel: "filter start date", name: "filter-start-date", year: pendingDateFilterState.startDate.year, month: pendingDateFilterState.startDate.month, day: pendingDateFilterState.startDate.day, chooseFromPast: true, numMonthsToShow: 36, onChange: (month, day, year) => {
+                        const newDateFilterState = Object.assign(Object.assign({}, pendingDateFilterState), { startDate: { month, day, year } });
                         dispatch({
-                            type: ActionType$6.ToggleFilterDrawer,
-                            filterDrawer: FilterDrawer.Advanced,
+                            type: ActionType$6.UpdateDateFilterState,
+                            dateFilterState: newDateFilterState,
                         });
-                    } },
-                    React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faList, className: "me-2" }),
-                    "Advanced"),
-                React__default["default"].createElement("button", { type: "button", id: "LogReviewer-reset-filters-button", className: "btn btn-light", "aria-label": "reset filters", onClick: () => {
+                    } }),
+                ' ',
+                "to",
+                ' ',
+                React__default["default"].createElement(SimpleDateChooser, { ariaLabel: "filter end date", name: "filter-end-date", year: pendingDateFilterState.endDate.year, month: pendingDateFilterState.endDate.month, day: pendingDateFilterState.endDate.day, chooseFromPast: true, numMonthsToShow: 12, onChange: (month, day, year) => {
+                        if (year < pendingDateFilterState.startDate.year
+                            || (year === pendingDateFilterState.startDate.year
+                                && month < pendingDateFilterState.startDate.month)
+                            || (year === pendingDateFilterState.startDate.year
+                                && month === pendingDateFilterState.startDate.month
+                                && day < pendingDateFilterState.startDate.day)) {
+                            return alert('Invalid End Date', 'The end date cannot be before the start date.');
+                        }
+                        const newDateFilterState = Object.assign(Object.assign({}, pendingDateFilterState), { endDate: { month, day, year } });
                         dispatch({
-                            type: ActionType$6.ResetFilters,
-                            initActionErrorFilterState,
-                            initAdvancedFilterState,
-                            initContextFilterState,
-                            initDateFilterState,
-                            initTagFilterState,
+                            type: ActionType$6.UpdateDateFilterState,
+                            dateFilterState: newDateFilterState,
                         });
-                    } },
-                    React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faTimes }),
-                    ' ',
-                    "Reset"))));
-        // Filter drawer
-        let filterDrawer;
-        if (expandedFilterDrawer) {
-            if (expandedFilterDrawer === FilterDrawer.Date) {
-                filterDrawer = (React__default["default"].createElement(TabBox, { title: "Date" },
-                    React__default["default"].createElement(SimpleDateChooser, { ariaLabel: "filter start date", name: "filter-start-date", year: dateFilterState.startDate.year, month: dateFilterState.startDate.month, day: dateFilterState.startDate.day, dontAllowFuture: true, numMonthsToShow: 36, onChange: (month, day, year) => {
-                            dateFilterState.startDate = { month, day, year };
-                            handleDateRangeUpdated(dateFilterState);
-                        } }),
-                    ' ',
-                    "to",
-                    ' ',
-                    React__default["default"].createElement(SimpleDateChooser, { ariaLabel: "filter end date", name: "filter-end-date", year: dateFilterState.endDate.year, month: dateFilterState.endDate.month, day: dateFilterState.endDate.day, dontAllowFuture: true, numMonthsToShow: 12, onChange: (month, day, year) => {
-                            if (year < dateFilterState.startDate.year
-                                || (year === dateFilterState.startDate.year
-                                    && month < dateFilterState.startDate.month)
-                                || (year === dateFilterState.startDate.year
-                                    && month === dateFilterState.startDate.month
-                                    && day < dateFilterState.startDate.day)) {
-                                return alert('Invalid Start Date', 'The start date cannot be before the end date.');
-                            }
-                            dateFilterState.endDate = { month, day, year };
-                            handleDateRangeUpdated(dateFilterState);
-                        } })));
-            }
-            else if (expandedFilterDrawer === FilterDrawer.Context) {
-                // Create item picker items
-                const builtInPickableItem = {
-                    id: 'built-in-contexts',
-                    name: 'Auto-logged',
-                    isGroup: true,
-                    children: [],
-                };
-                const pickableItems = [];
-                Object.keys(contextMap)
-                    .forEach((context) => {
-                    const value = contextMap[context];
-                    if (typeof value === 'string') {
-                        // No subcategories
-                        const item = {
-                            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;
-                    }
-                    // Has subcategories
-                    const children = (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][subcontext],
-                        };
-                    }));
+                    } })));
+        }
+        else if (expandedFilterDrawer === FilterDrawer.Context) {
+            // Create item picker items
+            const builtInPickableItem = {
+                id: 'built-in-contexts',
+                name: 'Auto-logged',
+                isGroup: true,
+                children: [],
+            };
+            const pickableItems = [];
+            Object.keys(contextMap)
+                .forEach((context) => {
+                const value = contextMap[context];
+                if (typeof value === 'string') {
+                    // No subcategories
                     const item = {
                         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 = (React__default["default"].createElement(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
-                                            && subcontextItem.checked);
-                                    });
-                                }
-                                else {
-                                    // Not built-in
-                                    pickableItem.children.forEach((subcontextItem) => {
-                                        if (!subcontextItem.isGroup) {
-                                            contextFilterState[pickableItem.id][subcontextItem.id] = (subcontextItem.checked);
-                                        }
-                                    });
-                                }
+                    // 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 = (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][subcontext],
+                    };
+                }));
+                const item = {
+                    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 = (React__default["default"].createElement(ItemPicker, { title: "Context", items: pickableItems, onChanged: (updatedItems) => {
+                    // Update our state
+                    const newContextFilterState = Object.assign({}, 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 {
-                                // No subcontexts
-                                contextFilterState[pickableItem.id] = (pickableItem.checked);
+                                // Not built-in
+                                pickableItem.children.forEach((subcontextItem) => {
+                                    if (!subcontextItem.isGroup) {
+                                        newContextFilterState[pickableItem.id][subcontextItem.id] = (subcontextItem.checked);
+                                    }
+                                });
                             }
-                        });
-                        dispatch({
-                            type: ActionType$6.UpdateContextFilterState,
-                            contextFilterState,
-                        });
-                    } }));
-            }
-            else if (expandedFilterDrawer === FilterDrawer.Tag) {
-                // Create filter UI
-                filterDrawer = (React__default["default"].createElement(TabBox, { title: "Tags" },
-                    React__default["default"].createElement("div", null, "If any tags are selected, logs must contain at least one (but not necessarily all) of the selected tags."),
-                    React__default["default"].createElement("div", { className: "d-flex gap-1 flex-wrap" }, Object.keys((_d = LogMetadata.Tag) !== null && _d !== void 0 ? _d : {})
-                        .map((tag) => {
-                        const description = genHumanReadableName(tag);
-                        return (React__default["default"].createElement(CheckboxButton, { key: tag, id: `LogReviewer-tag-${tag}-checkbox`, text: description, ariaLabel: `require that logs be tagged with "${description}" or any other selected tag`, checked: tagFilterState[tag], onChanged: (checked) => {
-                                tagFilterState[tag] = checked;
+                        }
+                        else {
+                            // No subcontexts
+                            newContextFilterState[pickableItem.id] = (pickableItem.checked);
+                        }
+                    });
+                    // Update state
+                    dispatch({
+                        type: ActionType$6.UpdateContextFilterState,
+                        contextFilterState: newContextFilterState,
+                    });
+                } }));
+        }
+        else if (expandedFilterDrawer === FilterDrawer.Tag) {
+            // Create filter UI
+            filterDrawer = (React__default["default"].createElement(TabBox, { title: "Tags" },
+                React__default["default"].createElement("div", null, "If any tags are selected, logs must contain at least one (but not necessarily all) of the selected tags."),
+                React__default["default"].createElement("div", { className: "d-flex gap-1 flex-wrap" }, Object.keys((_d = LogMetadata.Tag) !== null && _d !== void 0 ? _d : {})
+                    .map((tag) => {
+                    const description = genHumanReadableName(tag);
+                    return (React__default["default"].createElement(CheckboxButton, { key: tag, id: `LogReviewer-tag-${tag}-checkbox`, text: description, ariaLabel: `require that logs be tagged with "${description}" or any other selected tag`, checked: pendingTagFilterState[tag], onChanged: (checked) => {
+                            const newTagFilterState = Object.assign(Object.assign({}, pendingTagFilterState), { [tag]: checked });
+                            dispatch({
+                                type: ActionType$6.UpdateTagFilterState,
+                                tagFilterState: newTagFilterState,
+                            });
+                        }, checkedVariant: Variant$1.Light, uncheckedVariant: Variant$1.Light }));
+                }))));
+        }
+        else if (expandedFilterDrawer === FilterDrawer.Action) {
+            // Create filter UI
+            filterDrawer = (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(TabBox, { title: "Log Type" },
+                    React__default["default"].createElement(RadioButton, { id: "LogReviewer-type-all", text: "All Logs", onSelected: () => {
+                            const newActionErrorFilterState = Object.assign(Object.assign({}, pendingActionErrorFilterState), { type: undefined });
+                            dispatch({
+                                type: ActionType$6.UpdateActionErrorFilterState,
+                                actionErrorFilterState: newActionErrorFilterState,
+                            });
+                        }, ariaLabel: "show logs of all types", selected: pendingActionErrorFilterState.type === undefined, unselectedVariant: Variant$1.Light }),
+                    React__default["default"].createElement(RadioButton, { id: "LogReviewer-type-action-only", text: "Action Logs Only", onSelected: () => {
+                            const newActionErrorFilterState = Object.assign(Object.assign({}, pendingActionErrorFilterState), { type: LogType$1.Action });
+                            dispatch({
+                                type: ActionType$6.UpdateActionErrorFilterState,
+                                actionErrorFilterState: newActionErrorFilterState,
+                            });
+                        }, ariaLabel: "only show action logs", selected: pendingActionErrorFilterState.type === LogType$1.Action, unselectedVariant: Variant$1.Light }),
+                    React__default["default"].createElement(RadioButton, { id: "LogReviewer-type-error-only", text: "Action Error Only", onSelected: () => {
+                            const newActionErrorFilterState = Object.assign(Object.assign({}, pendingActionErrorFilterState), { type: LogType$1.Error });
+                            dispatch({
+                                type: ActionType$6.UpdateActionErrorFilterState,
+                                actionErrorFilterState: newActionErrorFilterState,
+                            });
+                        }, ariaLabel: "only show error logs", selected: pendingActionErrorFilterState.type === LogType$1.Error, noMarginOnRight: true, selectedVariant: Variant$1.Light, unselectedVariant: Variant$1.Light })),
+                (pendingActionErrorFilterState.type === undefined
+                    || pendingActionErrorFilterState.type === LogType$1.Action) && (React__default["default"].createElement(TabBox, { title: "Action Log Details" },
+                    React__default["default"].createElement(ButtonInputGroup, { label: "Action", className: "mb-2", wrapButtonsAndAddGaps: true }, Object.keys(LogAction$1)
+                        .map((action) => {
+                        const description = genHumanReadableName(action);
+                        return (React__default["default"].createElement(CheckboxButton, { key: action, id: `LogReviewer-action-${action}-checkbox`, text: description, ariaLabel: `include logs with action type "${description}" in results`, noMarginOnRight: true, checked: pendingActionErrorFilterState.action[action], onChanged: (checked) => {
+                                const newActionErrorFilterState = Object.assign(Object.assign({}, pendingActionErrorFilterState), { action: Object.assign(Object.assign({}, pendingActionErrorFilterState.action), { [action]: checked }) });
                                 dispatch({
-                                    type: ActionType$6.UpdateTagFilterState,
-                                    tagFilterState,
+                                    type: ActionType$6.UpdateActionErrorFilterState,
+                                    actionErrorFilterState: newActionErrorFilterState,
                                 });
-                            } }));
-                    }))));
-            }
-            else if (expandedFilterDrawer === FilterDrawer.Action) {
-                // Create filter UI
-                filterDrawer = (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(TabBox, { title: "Log Type" },
-                        React__default["default"].createElement(RadioButton, { id: "LogReviewer-type-all", text: "All Logs", onSelected: () => {
-                                actionErrorFilterState.type = undefined;
+                            }, checkedVariant: Variant$1.Light, uncheckedVariant: Variant$1.Light }));
+                    })),
+                    React__default["default"].createElement(ButtonInputGroup, { label: "Target", wrapButtonsAndAddGaps: true }, Object.keys(targetMap)
+                        .map((target) => {
+                        const description = genHumanReadableName(target);
+                        return (React__default["default"].createElement(CheckboxButton, { key: target, id: `LogReviewer-target-${target}-checkbox`, text: description, ariaLabel: `include logs with target "${description}" in results`, checked: pendingActionErrorFilterState.target[target], noMarginOnRight: true, onChanged: (checked) => {
+                                const newActionErrorFilterState = Object.assign(Object.assign({}, pendingActionErrorFilterState), { target: Object.assign(Object.assign({}, pendingActionErrorFilterState.target), { [target]: checked }) });
                                 dispatch({
                                     type: ActionType$6.UpdateActionErrorFilterState,
-                                    actionErrorFilterState,
+                                    actionErrorFilterState: newActionErrorFilterState,
                                 });
-                            }, ariaLabel: "show logs of all types", selected: actionErrorFilterState.type === undefined }),
-                        React__default["default"].createElement(RadioButton, { id: "LogReviewer-type-action-only", text: "Action Logs Only", onSelected: () => {
-                                actionErrorFilterState.type = LogType$1.Action;
+                            }, checkedVariant: Variant$1.Light, uncheckedVariant: Variant$1.Light }));
+                    })))),
+                (pendingActionErrorFilterState.type === undefined
+                    || pendingActionErrorFilterState.type === LogType$1.Error) && (React__default["default"].createElement(TabBox, { title: "Error Log Details" },
+                    React__default["default"].createElement("div", { className: "input-group mb-2" },
+                        React__default["default"].createElement("span", { className: "input-group-text" }, "Error Message"),
+                        React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for error message", value: pendingActionErrorFilterState.errorMessage, placeholder: "e.g. undefined is not a function", onChange: (e) => {
+                                const newActionErrorFilterState = Object.assign(Object.assign({}, pendingActionErrorFilterState), { errorMessage: e.target.value });
                                 dispatch({
                                     type: ActionType$6.UpdateActionErrorFilterState,
-                                    actionErrorFilterState,
+                                    actionErrorFilterState: newActionErrorFilterState,
                                 });
-                            }, ariaLabel: "only show action logs", selected: actionErrorFilterState.type === LogType$1.Action }),
-                        React__default["default"].createElement(RadioButton, { id: "LogReviewer-type-error-only", text: "Action Error Only", onSelected: () => {
-                                actionErrorFilterState.type = LogType$1.Error;
+                            } })),
+                    React__default["default"].createElement("div", { className: "input-group mb-2" },
+                        React__default["default"].createElement("span", { className: "input-group-text" }, "Error Code"),
+                        React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for error code", value: pendingActionErrorFilterState.errorCode, placeholder: "e.g. GC22", onChange: (e) => {
+                                const newActionErrorFilterState = Object.assign(Object.assign({}, pendingActionErrorFilterState), { errorCode: ((e.target.value)
+                                        .trim()
+                                        .toUpperCase()) });
                                 dispatch({
                                     type: ActionType$6.UpdateActionErrorFilterState,
-                                    actionErrorFilterState,
+                                    actionErrorFilterState: newActionErrorFilterState,
                                 });
-                            }, ariaLabel: "only show error logs", selected: actionErrorFilterState.type === LogType$1.Error, noMarginOnRight: true })),
-                    (actionErrorFilterState.type === undefined
-                        || actionErrorFilterState.type === LogType$1.Action) && (React__default["default"].createElement(TabBox, { title: "Action Log Details" },
-                        React__default["default"].createElement(ButtonInputGroup, { label: "Action", className: "mb-2", wrapButtonsAndAddGaps: true }, Object.keys(LogAction$1)
-                            .map((action) => {
-                            const description = genHumanReadableName(action);
-                            return (React__default["default"].createElement(CheckboxButton, { key: action, id: `LogReviewer-action-${action}-checkbox`, text: description, ariaLabel: `include logs with action type "${description}" in results`, noMarginOnRight: true, checked: actionErrorFilterState.action[action], onChanged: (checked) => {
-                                    actionErrorFilterState.action[action] = checked;
-                                    dispatch({
-                                        type: ActionType$6.UpdateActionErrorFilterState,
-                                        actionErrorFilterState,
-                                    });
-                                } }));
-                        })),
-                        React__default["default"].createElement(ButtonInputGroup, { label: "Target", wrapButtonsAndAddGaps: true }, Object.keys(targetMap)
-                            .map((target) => {
-                            const description = genHumanReadableName(target);
-                            return (React__default["default"].createElement(CheckboxButton, { key: target, id: `LogReviewer-target-${target}-checkbox`, text: description, ariaLabel: `include logs with target "${description}" in results`, checked: actionErrorFilterState.target[target], noMarginOnRight: true, onChanged: (checked) => {
-                                    actionErrorFilterState.target[target] = checked;
-                                    dispatch({
-                                        type: ActionType$6.UpdateActionErrorFilterState,
-                                        actionErrorFilterState,
-                                    });
-                                } }));
-                        })))),
-                    (actionErrorFilterState.type === undefined
-                        || actionErrorFilterState.type === LogType$1.Error) && (React__default["default"].createElement(TabBox, { title: "Error Log Details" },
-                        React__default["default"].createElement("div", { className: "input-group mb-2" },
-                            React__default["default"].createElement("span", { className: "input-group-text" }, "Error Message"),
-                            React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for error message", value: actionErrorFilterState.errorMessage, placeholder: "e.g. undefined is not a function", onChange: (e) => {
-                                    actionErrorFilterState.errorMessage = e.target.value;
-                                    dispatch({
-                                        type: ActionType$6.UpdateActionErrorFilterState,
-                                        actionErrorFilterState,
-                                    });
-                                } })),
-                        React__default["default"].createElement("div", { className: "input-group mb-2" },
-                            React__default["default"].createElement("span", { className: "input-group-text" }, "Error Code"),
-                            React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for error code", value: actionErrorFilterState.errorCode, placeholder: "e.g. GC22", onChange: (e) => {
-                                    actionErrorFilterState.errorCode = ((e.target.value)
-                                        .trim()
-                                        .toUpperCase());
-                                    dispatch({
-                                        type: ActionType$6.UpdateActionErrorFilterState,
-                                        actionErrorFilterState,
-                                    });
-                                } }))))));
-            }
-            else if (expandedFilterDrawer === FilterDrawer.Advanced) {
-                // Create advanced filter ui
-                filterDrawer = (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(TabBox, { title: "User" },
-                        React__default["default"].createElement("div", { className: "input-group mb-2" },
-                            React__default["default"].createElement("span", { className: "input-group-text" }, "User First Name"),
-                            React__default["default"].createElement("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;
-                                    dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
-                                        advancedFilterState,
-                                    });
-                                } })),
-                        React__default["default"].createElement("div", { className: "input-group mb-2" },
-                            React__default["default"].createElement("span", { className: "input-group-text" }, "User Last Name"),
-                            React__default["default"].createElement("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$6.UpdateAdvancedFilterState,
-                                        advancedFilterState,
-                                    });
-                                } })),
-                        React__default["default"].createElement("div", { className: "input-group mb-2" },
-                            React__default["default"].createElement("span", { className: "input-group-text" }, "User Email"),
-                            React__default["default"].createElement("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$6.UpdateAdvancedFilterState,
-                                        advancedFilterState,
-                                    });
-                                } })),
-                        React__default["default"].createElement("div", { className: "input-group mb-2" },
-                            React__default["default"].createElement("span", { className: "input-group-text" }, "User Canvas Id"),
-                            React__default["default"].createElement("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 = ((e.target.value)
-                                            .trim());
-                                    }
-                                    dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
-                                        advancedFilterState,
-                                    });
-                                } })),
-                        React__default["default"].createElement(ButtonInputGroup, { label: "Role" },
-                            React__default["default"].createElement(CheckboxButton, { text: "Students", onChanged: (checked) => {
-                                    advancedFilterState.includeLearners = checked;
-                                    dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
-                                        advancedFilterState,
-                                    });
-                                }, checked: advancedFilterState.includeLearners, ariaLabel: "show logs from students" }),
-                            React__default["default"].createElement(CheckboxButton, { text: "Teaching Team Members", onChanged: (checked) => {
-                                    advancedFilterState.includeTTMs = checked;
+                            } }))))));
+        }
+        else if (expandedFilterDrawer === FilterDrawer.Advanced) {
+            // Create advanced filter ui
+            filterDrawer = (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(TabBox, { title: "User" },
+                    React__default["default"].createElement("div", { className: "input-group mb-2" },
+                        React__default["default"].createElement("span", { className: "input-group-text" }, "User First Name"),
+                        React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for user first name", value: pendingAdvancedFilterState.userFirstName, placeholder: "e.g. Divardo", onChange: (e) => {
+                                const newAdvancedFilterState = Object.assign(Object.assign({}, pendingAdvancedFilterState), { userFirstName: e.target.value });
+                                dispatch({
+                                    type: ActionType$6.UpdateAdvancedFilterState,
+                                    advancedFilterState: newAdvancedFilterState,
+                                });
+                            } })),
+                    React__default["default"].createElement("div", { className: "input-group mb-2" },
+                        React__default["default"].createElement("span", { className: "input-group-text" }, "User Last Name"),
+                        React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for user last name", value: pendingAdvancedFilterState.userLastName, placeholder: "e.g. Calicci", onChange: (e) => {
+                                const newAdvancedFilterState = Object.assign(Object.assign({}, pendingAdvancedFilterState), { userLastName: e.target.value });
+                                dispatch({
+                                    type: ActionType$6.UpdateAdvancedFilterState,
+                                    advancedFilterState: newAdvancedFilterState,
+                                });
+                            } })),
+                    React__default["default"].createElement("div", { className: "input-group mb-2" },
+                        React__default["default"].createElement("span", { className: "input-group-text" }, "User Email"),
+                        React__default["default"].createElement("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 = Object.assign(Object.assign({}, pendingAdvancedFilterState), { userEmail: ((e.target.value)
+                                        .trim()) });
+                                dispatch({
+                                    type: ActionType$6.UpdateAdvancedFilterState,
+                                    advancedFilterState: newAdvancedFilterState,
+                                });
+                            } })),
+                    React__default["default"].createElement("div", { className: "input-group mb-2" },
+                        React__default["default"].createElement("span", { className: "input-group-text" }, "User Canvas Id"),
+                        React__default["default"].createElement("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 = Object.assign(Object.assign({}, pendingAdvancedFilterState), { userId: ((e.target.value)
+                                            .trim()) });
                                     dispatch({
                                         type: ActionType$6.UpdateAdvancedFilterState,
-                                        advancedFilterState,
+                                        advancedFilterState: newAdvancedFilterState,
                                     });
-                                }, checked: advancedFilterState.includeTTMs, ariaLabel: "show logs from teaching team members" }),
-                            React__default["default"].createElement(CheckboxButton, { text: "Admins", onChanged: (checked) => {
-                                    advancedFilterState.includeAdmins = checked;
+                                }
+                            } })),
+                    React__default["default"].createElement(ButtonInputGroup, { label: "Role" },
+                        React__default["default"].createElement(CheckboxButton, { text: "Students", onChanged: (checked) => {
+                                const newAdvancedFilterState = Object.assign(Object.assign({}, pendingAdvancedFilterState), { includeLearners: checked });
+                                dispatch({
+                                    type: ActionType$6.UpdateAdvancedFilterState,
+                                    advancedFilterState: newAdvancedFilterState,
+                                });
+                            }, checked: pendingAdvancedFilterState.includeLearners, ariaLabel: "show logs from students", checkedVariant: Variant$1.Light, uncheckedVariant: Variant$1.Light }),
+                        React__default["default"].createElement(CheckboxButton, { text: "Teaching Team Members", onChanged: (checked) => {
+                                const newAdvancedFilterState = Object.assign(Object.assign({}, pendingAdvancedFilterState), { includeTTMs: checked });
+                                dispatch({
+                                    type: ActionType$6.UpdateAdvancedFilterState,
+                                    advancedFilterState: newAdvancedFilterState,
+                                });
+                            }, checked: pendingAdvancedFilterState.includeTTMs, ariaLabel: "show logs from teaching team members", checkedVariant: Variant$1.Light, uncheckedVariant: Variant$1.Light }),
+                        React__default["default"].createElement(CheckboxButton, { text: "Admins", onChanged: (checked) => {
+                                const newAdvancedFilterState = Object.assign(Object.assign({}, pendingAdvancedFilterState), { includeAdmins: checked });
+                                dispatch({
+                                    type: ActionType$6.UpdateAdvancedFilterState,
+                                    advancedFilterState: newAdvancedFilterState,
+                                });
+                            }, checked: pendingAdvancedFilterState.includeAdmins, ariaLabel: "show logs from admins", checkedVariant: Variant$1.Light, uncheckedVariant: Variant$1.Light }))),
+                React__default["default"].createElement(TabBox, { title: "Course" },
+                    React__default["default"].createElement("div", { className: "input-group mb-2" },
+                        React__default["default"].createElement("span", { className: "input-group-text" }, "Course Name"),
+                        React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for course name", value: pendingAdvancedFilterState.courseName, placeholder: "e.g. GLC 200", onChange: (e) => {
+                                const newAdvancedFilterState = Object.assign(Object.assign({}, pendingAdvancedFilterState), { courseName: e.target.value });
+                                dispatch({
+                                    type: ActionType$6.UpdateAdvancedFilterState,
+                                    advancedFilterState: newAdvancedFilterState,
+                                });
+                            } })),
+                    React__default["default"].createElement("div", { className: "input-group mb-2" },
+                        React__default["default"].createElement("span", { className: "input-group-text" }, "Course Canvas Id"),
+                        React__default["default"].createElement("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 = Object.assign(Object.assign({}, pendingAdvancedFilterState), { courseId: ((e.target.value)
+                                            .trim()) });
                                     dispatch({
                                         type: ActionType$6.UpdateAdvancedFilterState,
-                                        advancedFilterState,
+                                        advancedFilterState: newAdvancedFilterState,
                                     });
-                                }, checked: advancedFilterState.includeAdmins, ariaLabel: "show logs from admins" }))),
-                    React__default["default"].createElement(TabBox, { title: "Course" },
+                                }
+                            } }))),
+                React__default["default"].createElement(TabBox, { title: "Device" },
+                    React__default["default"].createElement(ButtonInputGroup, { label: "Device Type" },
+                        React__default["default"].createElement(RadioButton, { text: "All Devices", ariaLabel: "show logs from all devices", selected: pendingAdvancedFilterState.isMobile === undefined, onSelected: () => {
+                                const newAdvancedFilterState = Object.assign(Object.assign({}, pendingAdvancedFilterState), { isMobile: undefined });
+                                dispatch({
+                                    type: ActionType$6.UpdateAdvancedFilterState,
+                                    advancedFilterState: newAdvancedFilterState,
+                                });
+                            }, selectedVariant: Variant$1.Light, unselectedVariant: Variant$1.Light }),
+                        React__default["default"].createElement(RadioButton, { text: "Mobile Only", ariaLabel: "show logs from mobile devices", selected: pendingAdvancedFilterState.isMobile === true, onSelected: () => {
+                                const newAdvancedFilterState = Object.assign(Object.assign({}, pendingAdvancedFilterState), { isMobile: true });
+                                dispatch({
+                                    type: ActionType$6.UpdateAdvancedFilterState,
+                                    advancedFilterState: newAdvancedFilterState,
+                                });
+                            }, selectedVariant: Variant$1.Light, unselectedVariant: Variant$1.Light }),
+                        React__default["default"].createElement(RadioButton, { text: "Desktop Only", ariaLabel: "show logs from desktop devices", selected: pendingAdvancedFilterState.isMobile === false, onSelected: () => {
+                                const newAdvancedFilterState = Object.assign(Object.assign({}, pendingAdvancedFilterState), { isMobile: false });
+                                dispatch({
+                                    type: ActionType$6.UpdateAdvancedFilterState,
+                                    advancedFilterState: newAdvancedFilterState,
+                                });
+                            }, noMarginOnRight: true, selectedVariant: Variant$1.Light, unselectedVariant: Variant$1.Light }))),
+                React__default["default"].createElement(TabBox, { title: "Source" },
+                    React__default["default"].createElement(ButtonInputGroup, { label: "Source Type" },
+                        React__default["default"].createElement(RadioButton, { text: "Both", ariaLabel: "show logs from all sources", selected: pendingAdvancedFilterState.source === undefined, onSelected: () => {
+                                const newAdvancedFilterState = Object.assign(Object.assign({}, pendingAdvancedFilterState), { source: undefined });
+                                dispatch({
+                                    type: ActionType$6.UpdateAdvancedFilterState,
+                                    advancedFilterState: newAdvancedFilterState,
+                                });
+                            }, selectedVariant: Variant$1.Light, unselectedVariant: Variant$1.Light }),
+                        React__default["default"].createElement(RadioButton, { text: "Client Only", ariaLabel: "show logs from client source", selected: pendingAdvancedFilterState.source === LogSource$1.Client, onSelected: () => {
+                                const newAdvancedFilterState = Object.assign(Object.assign({}, pendingAdvancedFilterState), { source: LogSource$1.Client });
+                                dispatch({
+                                    type: ActionType$6.UpdateAdvancedFilterState,
+                                    advancedFilterState: newAdvancedFilterState,
+                                });
+                            }, selectedVariant: Variant$1.Light, unselectedVariant: Variant$1.Light }),
+                        React__default["default"].createElement(RadioButton, { text: "Server Only", ariaLabel: "show logs from server source", selected: pendingAdvancedFilterState.source === LogSource$1.Server, onSelected: () => {
+                                const newAdvancedFilterState = Object.assign(Object.assign({}, pendingAdvancedFilterState), { source: LogSource$1.Server });
+                                dispatch({
+                                    type: ActionType$6.UpdateAdvancedFilterState,
+                                    advancedFilterState: newAdvancedFilterState,
+                                });
+                            }, noMarginOnRight: true, selectedVariant: Variant$1.Light, unselectedVariant: Variant$1.Light })),
+                    pendingAdvancedFilterState.source !== LogSource$1.Client && (React__default["default"].createElement("div", { className: "mt-2" },
                         React__default["default"].createElement("div", { className: "input-group mb-2" },
-                            React__default["default"].createElement("span", { className: "input-group-text" }, "Course Name"),
-                            React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for course name", value: advancedFilterState.courseName, placeholder: "e.g. GLC 200", onChange: (e) => {
-                                    advancedFilterState.courseName = e.target.value;
+                            React__default["default"].createElement("span", { className: "input-group-text" }, "Server Route Path"),
+                            React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for server route path", value: pendingAdvancedFilterState.routePath, placeholder: "e.g. /api/ttm/courses/12345", onChange: (e) => {
+                                    const newAdvancedFilterState = Object.assign(Object.assign({}, pendingAdvancedFilterState), { routePath: ((e.target.value)
+                                            .trim()) });
                                     dispatch({
                                         type: ActionType$6.UpdateAdvancedFilterState,
-                                        advancedFilterState,
+                                        advancedFilterState: newAdvancedFilterState,
                                     });
                                 } })),
                         React__default["default"].createElement("div", { className: "input-group mb-2" },
-                            React__default["default"].createElement("span", { className: "input-group-text" }, "Course Canvas Id"),
-                            React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for course canvas id", value: advancedFilterState.courseId, placeholder: "e.g. 15948", onChange: (e) => {
-                                    const { value } = e.target;
-                                    // Only update if value contains only numbers
-                                    if (/^\d+$/.test(value)) {
-                                        advancedFilterState.courseId = ((e.target.value)
-                                            .trim());
-                                    }
-                                    dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
-                                        advancedFilterState,
-                                    });
-                                } }))),
-                    React__default["default"].createElement(TabBox, { title: "Device" },
-                        React__default["default"].createElement(ButtonInputGroup, { label: "Device Type" },
-                            React__default["default"].createElement(RadioButton, { text: "All Devices", ariaLabel: "show logs from all devices", selected: advancedFilterState.isMobile === undefined, onSelected: () => {
-                                    advancedFilterState.isMobile = undefined;
-                                    dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
-                                        advancedFilterState,
-                                    });
-                                } }),
-                            React__default["default"].createElement(RadioButton, { text: "Mobile Only", ariaLabel: "show logs from mobile devices", selected: advancedFilterState.isMobile === true, onSelected: () => {
-                                    advancedFilterState.isMobile = true;
-                                    dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
-                                        advancedFilterState,
-                                    });
-                                } }),
-                            React__default["default"].createElement(RadioButton, { text: "Desktop Only", ariaLabel: "show logs from desktop devices", selected: advancedFilterState.isMobile === false, onSelected: () => {
-                                    advancedFilterState.isMobile = false;
-                                    dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
-                                        advancedFilterState,
-                                    });
-                                }, noMarginOnRight: true }))),
-                    React__default["default"].createElement(TabBox, { title: "Source" },
-                        React__default["default"].createElement(ButtonInputGroup, { label: "Source Type" },
-                            React__default["default"].createElement(RadioButton, { text: "Both", ariaLabel: "show logs from all sources", selected: advancedFilterState.source === undefined, onSelected: () => {
-                                    advancedFilterState.source = undefined;
-                                    dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
-                                        advancedFilterState,
-                                    });
-                                } }),
-                            React__default["default"].createElement(RadioButton, { text: "Client Only", ariaLabel: "show logs from client source", selected: advancedFilterState.source === LogSource$1.Client, onSelected: () => {
-                                    advancedFilterState.source = LogSource$1.Client;
+                            React__default["default"].createElement("span", { className: "input-group-text" }, "Server Route Template"),
+                            React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for server route template", value: pendingAdvancedFilterState.routeTemplate, placeholder: "e.g. /api/ttm/courses/:courseId", onChange: (e) => {
+                                    const newAdvancedFilterState = Object.assign(Object.assign({}, pendingAdvancedFilterState), { routeTemplate: ((e.target.value)
+                                            .trim()) });
                                     dispatch({
                                         type: ActionType$6.UpdateAdvancedFilterState,
-                                        advancedFilterState,
+                                        advancedFilterState: newAdvancedFilterState,
                                     });
-                                } }),
-                            React__default["default"].createElement(RadioButton, { text: "Server Only", ariaLabel: "show logs from server source", selected: advancedFilterState.source === LogSource$1.Server, onSelected: () => {
-                                    advancedFilterState.source = LogSource$1.Server;
-                                    dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
-                                        advancedFilterState,
-                                    });
-                                }, noMarginOnRight: true })),
-                        advancedFilterState.source !== LogSource$1.Client && (React__default["default"].createElement("div", { className: "mt-2" },
-                            React__default["default"].createElement("div", { className: "input-group mb-2" },
-                                React__default["default"].createElement("span", { className: "input-group-text" }, "Server Route Path"),
-                                React__default["default"].createElement("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$6.UpdateAdvancedFilterState,
-                                            advancedFilterState,
-                                        });
-                                    } })),
-                            React__default["default"].createElement("div", { className: "input-group mb-2" },
-                                React__default["default"].createElement("span", { className: "input-group-text" }, "Server Route Template"),
-                                React__default["default"].createElement("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$6.UpdateAdvancedFilterState,
-                                            advancedFilterState,
-                                        });
-                                    } })))))));
-            }
+                                } })))))));
         }
-        // Filters UI
-        const filters = (React__default["default"].createElement(React__default["default"].Fragment, null,
-            filterToggles,
-            filterDrawer && (React__default["default"].createElement(Drawer, { customBackgroundColor: "#eee" }, filterDrawer))));
-        // Actually filter the logs
-        // > Perform filters
-        const logs = [];
-        Object.keys(logMap).forEach((year) => {
-            Object.keys(logMap[year]).forEach((month) => {
-                logMap[year][month].forEach((log) => {
-                    /* ----------- Date Filter ---------- */
-                    var _a;
-                    // 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((_a = contextFilterState[log.context]) !== null && _a !== void 0 ? _a : {})
-                                .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[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$1.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$1.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$1.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$1.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);
-                });
-            });
-        });
-        /*----------------------------------------*/
-        /* ---------------- Data ---------------- */
-        /*----------------------------------------*/
-        // Nothing to show notice
-        const noLogsNotice = (logs.length === 0
-            ? (React__default["default"].createElement("div", { className: "alert alert-warning text-center mt-2" },
-                React__default["default"].createElement("h4", { className: "m-1" }, "No Logs to Show"),
-                React__default["default"].createElement("div", null, "Either your filters are too strict or no matching logs have been created yet.")))
-            : undefined);
-        // Create intelliTable
-        const dataTable = (React__default["default"].createElement(IntelliTable, { title: "Matching Logs:", csvName: `Logs from ${getHumanReadableDate()}`, id: "logs", data: logs, columns: columns }));
-        // Main body
-        body = (React__default["default"].createElement(React__default["default"].Fragment, null,
-            filters,
-            React__default["default"].createElement("div", { className: "mt-2" },
-                dataTable,
-                noLogsNotice)));
     }
+    // Filters UI
+    const filters = (React__default["default"].createElement(React__default["default"].Fragment, null,
+        filterToggles,
+        filterDrawer && (React__default["default"].createElement(Drawer, { customBackgroundColor: "#eee" }, filterDrawer))));
+    // Body that will be filled with the contents of the panel
+    const body = (React__default["default"].createElement(React__default["default"].Fragment, null,
+        loading && (React__default["default"].createElement("div", { className: "text-center p-5" },
+            React__default["default"].createElement(LoadingSpinner, null))),
+        !loading && (React__default["default"].createElement("div", null, filters)),
+        !loading && logs.length === 0 && (React__default["default"].createElement("div", { className: "alert alert-warning text-center mt-2" },
+            React__default["default"].createElement("h4", { className: "m-1" }, "No Logs to Show"),
+            React__default["default"].createElement("div", null, "Either your filters are too strict or no matching logs have been created yet."))),
+        React__default["default"].createElement("div", { className: loading || logs.length === 0 ? 'd-none' : undefined },
+            React__default["default"].createElement(IntelliTable, { title: "Matching Logs", csvName: `Logs from ${getHumanReadableDate()}`, id: "logs", data: logs, columns: columns })),
+        !loading && logs.length > 0 && paginationControls));
     /* ---------- Wrap in Modal --------- */
     return (React__default["default"].createElement("div", { className: "LogReviewer-outer-container" },
         React__default["default"].createElement("style", null, style$2),
         React__default["default"].createElement("div", { className: "LogReviewer-inner-container" },
             React__default["default"].createElement("div", { className: "LogReviewer-header" },
                 React__default["default"].createElement("div", { className: "LogReviewer-header-title" },
-                    React__default["default"].createElement("h3", { className: "text-center m-0" }, "Log Review Dashboard")),
+                    React__default["default"].createElement("h3", { className: "text-center" }, "Log Review Dashboard")),
                 React__default["default"].createElement("div", { style: { width: 0 } },
                     React__default["default"].createElement("button", { type: "button", className: "LogReviewer-header-close-button btn btn-dark btn-lg pe-0", "aria-label": "close log reviewer panel", onClick: onClose },
                         React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faTimes })))),
@@ -15302,6 +15046,12 @@ const HOUR_IN_MS = 3600000;
  */
 const DAY_IN_MS = 86400000;
 
+/**
+ * Path of the route for storing client-side logs
+ * @author Gabe Abrams
+ */
+const LOG_REVIEW_ROUTE_PATH_PREFIX = `/admin${ROUTE_PATH_PREFIX}/logs`;
+
 /**
  * Route for checking the status of the current user's
  *   access to log review
@@ -15476,6 +15226,24 @@ const padDecimalZeros = (num, numDigits) => {
     return out;
 };
 
+/**
+ * Pad a number with zeros on the left (e.g. 5 becomes 05 with 2 digit padding)
+ * @author Gabe Abrams
+ * @param num the number to pad
+ * @param numDigits the minimum number of digits before the decimal
+ * @returns padded number
+ */
+const padZerosLeft = (num, numDigits) => {
+    // Convert to string
+    let out = String(num);
+    // Add zeros
+    while (out.split('.')[0].length < numDigits) {
+        out = `0${out}`;
+    }
+    // Return
+    return out;
+};
+
 /**
  * Stub a server endpoint response
  * @author Gabe Abrams
@@ -16365,6 +16133,7 @@ exports.ErrorWithCode = ErrorWithCode;
 exports.HOUR_IN_MS = HOUR_IN_MS;
 exports.IntelliTable = IntelliTable;
 exports.ItemPicker = ItemPicker;
+exports.LOG_REVIEW_GET_LOGS_ROUTE = LOG_REVIEW_GET_LOGS_ROUTE;
 exports.LOG_REVIEW_ROUTE_PATH_PREFIX = LOG_REVIEW_ROUTE_PATH_PREFIX;
 exports.LOG_REVIEW_STATUS_ROUTE = LOG_REVIEW_STATUS_ROUTE;
 exports.LOG_ROUTE_PATH = LOG_ROUTE_PATH;
@@ -16388,7 +16157,6 @@ exports.PopSuccessMark = PopSuccessMark;
 exports.RadioButton = RadioButton;
 exports.ReactKitErrorCode = ReactKitErrorCode$1;
 exports.SimpleDateChooser = SimpleDateChooser;
-exports.SimpleTimeChooser = SimpleTimeChooser;
 exports.TabBox = TabBox;
 exports.ToggleSwitch = ToggleSwitch;
 exports.Tooltip = Tooltip;
@@ -16400,6 +16168,7 @@ exports.avg = avg;
 exports.canReviewLogs = canReviewLogs;
 exports.capitalize = capitalize;
 exports.ceilToNumDecimals = ceilToNumDecimals;
+exports.cloneDeep = cloneDeep;
 exports.combineClassNames = combineClassNames;
 exports.compareArraysByProp = compareArraysByProp;
 exports.confirm = confirm;