dce-reactkit 3.2.2-beta.8 → 3.2.3

package/dist/cjs/index.js

@@ -519,14 +519,14 @@ const LOG_ROUTE_PATH = `${ROUTE_PATH_PREFIX}/log`;
 const LogBuiltInMetadata = {
     // Contexts
     Context: {
-        Uncategorized: 'n/a',
-        ServerRenderedErrorPage: '_server-rendered-error-page',
-        ServerEndpointError: '_server-endpoint-error',
-        ClientFatalError: '_client-fatal-error',
+        Uncategorized: 'Uncategorized',
+        ServerRenderedErrorPage: 'ServerRenderedErrorPage',
+        ServerEndpointError: 'ServerEndpointError',
+        ClientFatalError: 'ClientFatalError',
     },
     // Targets
     Target: {
-        NoSpecificTarget: 'n/a',
+        NoTarget: 'NoTarget',
     },
 };
 
@@ -682,7 +682,7 @@ const logClientEvent = (opts) => __awaiter(void 0, void 0, void 0, function* ()
                 ? opts.error.stack
                 : undefined),
             target: (opts.action
-                ? ((_g = opts.target) !== null && _g !== void 0 ? _g : LogBuiltInMetadata.Target.NoSpecificTarget)
+                ? ((_g = opts.target) !== null && _g !== void 0 ? _g : LogBuiltInMetadata.Target.NoTarget)
                 : undefined),
             action: (opts.action
                 ? opts.action
@@ -1202,7 +1202,7 @@ const ButtonInputGroup = (props) => {
                     borderTopRightRadius: 0,
                     borderBottomRightRadius: 0,
                 } }, label),
-            React__default["default"].createElement("span", { className: "input-group-text flex-grow-1 rounded-right", style: {
+            React__default["default"].createElement("span", { className: "input-group-text flex-grow-1 rounded-right d-flex flex-wrap", style: {
                     backgroundColor: 'white',
                     borderTopLeftRadius: 0,
                     borderBottomLeftRadius: 0,
@@ -1307,18 +1307,6 @@ const getTimeInfoInET = (dateOrTimestamp) => {
     };
 };
 
-/**
- * Force a number to stay within specific bounds
- * @author Gabe Abrams
- * @param num the number to move into the bounds
- * @param min the minimum number in the bound
- * @param max the maximum number in the bound
- * @returns bounded number
- */
-const forceNumIntoBounds = (num, min, max) => {
-    return Math.max(min, Math.min(max, num));
-};
-
 /**
  * A very simple, lightweight date chooser
  * @author Gabe Abrams
@@ -1333,7 +1321,7 @@ const SimpleDateChooser = (props) => {
     var _a;
     /* -------------- Props ------------- */
     const { ariaLabel, name, month, day, year, onChange, chooseFromPast, } = props;
-    let numMonthsToShow = forceNumIntoBounds(((_a = props.numMonthsToShow) !== null && _a !== void 0 ? _a : 6), 1, 12);
+    const numMonthsToShow = ((_a = props.numMonthsToShow) !== null && _a !== void 0 ? _a : 6);
     /*------------------------------------------------------------------------*/
     /*                                 Render                                 */
     /*------------------------------------------------------------------------*/
@@ -1347,7 +1335,7 @@ const SimpleDateChooser = (props) => {
     let startMonth = today.month;
     if (chooseFromPast) {
         startMonth -= Math.max(0, numMonthsToShow - 1);
-        if (startMonth <= 0) {
+        while (startMonth <= 0) {
             startMonth += 12;
             startYear -= 1;
         }
@@ -1355,22 +1343,35 @@ const SimpleDateChooser = (props) => {
     for (let i = 0; i < numMonthsToShow; i++) {
         // Get month and year info
         const unmoddedMonth = (startMonth + i);
-        const month = (unmoddedMonth > 12
-            ? unmoddedMonth - 12
-            : unmoddedMonth);
+        let month = unmoddedMonth;
+        while (month > 12) {
+            month -= 12;
+        }
         const monthName = getMonthName(month).full;
-        const year = (unmoddedMonth > 12
-            ? startYear + 1
-            : startYear);
+        // Year is start year +1 for each 12 months
+        const year = (startYear + (Math.floor(unmoddedMonth / 12)));
         // Figure out which days are allowed
         const days = [];
         const numDaysInMonth = (new Date(year, month, 0)).getDate();
-        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);
+        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 {
+            // 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);
+            }
         }
         choices.push({
             choiceName: `${monthName} ${year}`,
@@ -1384,7 +1385,7 @@ const SimpleDateChooser = (props) => {
     const dayOptions = [];
     choices.forEach((choice) => {
         // Create month option
-        monthOptions.push(React__default["default"].createElement("option", { key: choice.month, value: choice.month, "aria-label": `choose ${choice.choiceName}`, onSelect: () => {
+        monthOptions.push(React__default["default"].createElement("option", { key: choice.month, value: `${choice.month}-${choice.year}`, "aria-label": `choose ${choice.choiceName}`, onSelect: () => {
                 onChange(choice.month, choice.days[0], choice.year);
             } }, choice.choiceName));
         if (month === choice.month) {
@@ -1399,7 +1400,7 @@ const SimpleDateChooser = (props) => {
         }
     });
     return (React__default["default"].createElement("div", { className: "SimpleDateChooser d-inline-block", "aria-label": `date chooser with selected date: ${month} ${day}, ${year}` },
-        React__default["default"].createElement("select", { "aria-label": `month for ${ariaLabel}`, className: "custom-select d-inline-block mr-1", style: { width: 'auto' }, id: `SimpleDateChooser-${name}-month`, value: month, onChange: (e) => {
+        React__default["default"].createElement("select", { "aria-label": `month for ${ariaLabel}`, className: "custom-select d-inline-block mr-1", style: { width: 'auto' }, id: `SimpleDateChooser-${name}-month`, value: `${month}-${year}`, onChange: (e) => {
                 const choice = choices[e.target.selectedIndex];
                 // Change day, month, and year
                 onChange(choice.month, choice.days[0], choice.year);
@@ -1441,14 +1442,16 @@ const Drawer = (props) => {
     /*------------------------------------------------------------------------*/
     /* -------------- Props ------------- */
     // Destructure all props
-    const { children, } = props;
+    const { customBackgroundColor, children, } = props;
     /*------------------------------------------------------------------------*/
     /*                                 Render                                 */
     /*------------------------------------------------------------------------*/
     /*----------------------------------------*/
     /*                 Main UI                */
     /*----------------------------------------*/
-    return (React__default["default"].createElement("div", { className: "Drawer-container" },
+    return (React__default["default"].createElement("div", { className: "Drawer-container", style: {
+            backgroundColor: (customBackgroundColor !== null && customBackgroundColor !== void 0 ? customBackgroundColor : undefined),
+        } },
         React__default["default"].createElement("style", null, style$4),
         children));
 };
@@ -1911,24 +1914,25 @@ const CopiableBox = (props) => {
 /**
  * Reusable nested item picker
  * @author Yuen Ler Chow
+ * @author Gabe Abrams
  */
 /* ------------- Actions ------------ */
 // Types of actions
 var ActionType$2;
 (function (ActionType) {
-    // Toggle whether the children are being shown
-    ActionType["ToggleItems"] = "toggle-items";
+    // Toggle whether a child are being shown
+    ActionType["ToggleChild"] = "toggle-child";
 })(ActionType$2 || (ActionType$2 = {}));
 /**
  * Reducer that executes actions
- * @author Yuen Ler Chow
+ * @author Gabe Abrams
  * @param state current state
  * @param action action to execute
  */
 const reducer$2 = (state, action) => {
     switch (action.type) {
-        case ActionType$2.ToggleItems: {
-            return { isShowingItems: !state.isShowingItems };
+        case ActionType$2.ToggleChild: {
+            return Object.assign(Object.assign({}, state), { childExpanded: Object.assign(Object.assign({}, state.childExpanded), { [String(action.id)]: !state.childExpanded[String(action.id)] }) });
         }
         default: {
             return state;
@@ -1946,14 +1950,19 @@ const NestableItemList = (props) => {
     // Destructure all props
     const { items, onChanged, } = props;
     /* -------------- State ------------- */
+    // Create initial map of child expanded booleans
+    const initChildExpanded = {};
+    items.forEach((item) => {
+        initChildExpanded[String(item.id)] = false;
+    });
     // Initial state
     const initialState = {
-        isShowingItems: false,
+        childExpanded: initChildExpanded,
     };
     // Initialize state
     const [state, dispatch] = React.useReducer(reducer$2, initialState);
     // Destructure common state
-    const { isShowingItems, } = state;
+    const { childExpanded, } = state;
     /*------------------------------------------------------------------------*/
     /*                           Component Functions                          */
     /*------------------------------------------------------------------------*/
@@ -2041,14 +2050,15 @@ const NestableItemList = (props) => {
                     backgroundColor: 'transparent',
                 }, type: "button", onClick: () => {
                     dispatch({
-                        type: ActionType$2.ToggleItems,
+                        type: ActionType$2.ToggleChild,
+                        id: item.id,
                     });
-                }, "aria-label": `${isShowingItems ? 'Hide' : 'Show'} items in ${item.name}` },
-                React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: isShowingItems ? freeSolidSvgIcons.faChevronDown : freeSolidSvgIcons.faChevronRight })))),
+                }, "aria-label": `${childExpanded[item.id] ? 'Hide' : 'Show'} items in ${item.name}` },
+                React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: childExpanded[item.id] ? freeSolidSvgIcons.faChevronDown : freeSolidSvgIcons.faChevronRight })))),
             React__default["default"].createElement(CheckboxButton, { className: `NestableItemList-CheckboxButton-${item.id}`, text: item.name, checked: item.isGroup ? allChecked(item.children) : item.checked, dashed: item.isGroup ? !noneChecked(item.children) : false, onChanged: (checked) => {
                     onChanged(changeChecked(item.id, checked, items));
                 }, ariaLabel: `Select ${item.name}`, checkedVariant: Variant$1.Light }),
-            item.isGroup && isShowingItems && (React__default["default"].createElement("div", { className: "NestableItemList-children-container", style: {
+            (item.isGroup && childExpanded[item.id]) && (React__default["default"].createElement("div", { className: "NestableItemList-children-container", style: {
                     paddingLeft: '2.2rem',
                 } },
                 React__default["default"].createElement(NestableItemList, { items: item.children, onChanged: (updatedItems) => {
@@ -2070,7 +2080,7 @@ const ItemPicker = (props) => {
     /*------------------------------------------------------------------------*/
     /* -------------- Props ------------- */
     // Destructure all props
-    const { title, items, onChanged, } = props;
+    const { title, items, onChanged, noBottomMargin, } = props;
     /*------------------------------------------------------------------------*/
     /*                           Component Functions                          */
     /*------------------------------------------------------------------------*/
@@ -2080,11 +2090,34 @@ const ItemPicker = (props) => {
     /*----------------------------------------*/
     /*                 Main UI                */
     /*----------------------------------------*/
-    return (React__default["default"].createElement(TabBox, { title: title },
+    return (React__default["default"].createElement(TabBox, { title: title, noBottomMargin: noBottomMargin },
         React__default["default"].createElement("div", { style: { overflowX: 'auto' } },
             React__default["default"].createElement(NestableItemList, { items: items, onChanged: onChanged }))));
 };
 
+// Import shared helpers
+/**
+ * Get a human-readable description of a date (all in ET)
+ * @author Gabe Abrams
+ * @param [dateOrTimestamp=today] the date or timestamp for the date to describe
+ * @returns human-readable description of the date
+ */
+const getHumanReadableDate = (dateOrTimestamp) => {
+    // Get the date info
+    const { month, day, year, } = getTimeInfoInET(dateOrTimestamp);
+    const currYear = getTimeInfoInET().year;
+    // Get the short month description
+    const monthName = getMonthName(month).short;
+    // Create start of description
+    let description = `${monthName} ${day}${getOrdinal(day)}`;
+    // Add on year if it's different
+    if (year !== currYear) {
+        description += ` ${year}`;
+    }
+    // Return description
+    return description;
+};
+
 /**
  * Path of the route for storing client-side logs
  * @author Gabe Abrams
@@ -2124,37 +2157,37 @@ var LogType$1 = LogType;
 var LogAction;
 (function (LogAction) {
     // Target was opened by the user (it was not on screen, but now it is)
-    LogAction["Open"] = "open";
+    LogAction["Open"] = "Open";
     // Target was closed by the user (it was on screen, but now it is not)
-    LogAction["Close"] = "close";
+    LogAction["Close"] = "Close";
     // Target was cancelled by the user (it was on closed without saving)
-    LogAction["Cancel"] = "cancel";
+    LogAction["Cancel"] = "Cancel";
     // Target was expanded by the user (it always remains on screen, but size was changed)
-    LogAction["Expand"] = "expand";
+    LogAction["Expand"] = "Expand";
     // Target was collapsed by the user (it always remains on screen, but size was changed)
-    LogAction["Collapse"] = "collapse";
+    LogAction["Collapse"] = "Collapse";
     // Target was viewed by the user (only for items that are not opened or closed, those must use Open/Close actions)
-    LogAction["View"] = "view";
+    LogAction["View"] = "View";
     // Target interrupted the user (popup, dialog, validation message, etc. appeared without user prompting)
-    LogAction["Interrupt"] = "interrupt";
+    LogAction["Interrupt"] = "Interrupt";
     // Target was created by the user (it did not exist before)
-    LogAction["Create"] = "create";
+    LogAction["Create"] = "Create";
     // Target was edited by the user (it existed and was changed)
-    LogAction["Edit"] = "edit";
+    LogAction["Edit"] = "Edit";
     // Target was deleted by the user (it existed and now it doesn't)
-    LogAction["Delete"] = "delete";
+    LogAction["Delete"] = "Delete";
     // Target was added by the user (it already existed and was added to another place)
-    LogAction["Add"] = "add";
+    LogAction["Add"] = "Add";
     // Target was removed by the user (it was removed from something but still exists)
-    LogAction["Remove"] = "remove";
+    LogAction["Remove"] = "Remove";
     // Target was activated by the user (click, check, tap, keypress, etc.)
-    LogAction["Activate"] = "activate";
+    LogAction["Activate"] = "Activate";
     // Target was deactivated by the user (click away, uncheck, tap outside of, tab away, etc.)
-    LogAction["Deactivate"] = "deactivate";
+    LogAction["Deactivate"] = "Deactivate";
     // User showed interest in a target (hover, peek, etc.)
-    LogAction["Peek"] = "peek";
+    LogAction["Peek"] = "Peek";
     // Unknown action
-    LogAction["Unknown"] = "unknown";
+    LogAction["Unknown"] = "Unknown";
 })(LogAction || (LogAction = {}));
 var LogAction$1 = LogAction;
 
@@ -2196,12 +2229,12 @@ const roundToNumDecimals = (num, numDecimals) => {
  * @returns escaped cell text
  */
 const escapeCellText = (text) => {
-    if (!text.includes(',')) {
+    if (!String(text).includes(',')) {
         // No need to escape
-        return text;
+        return String(text);
     }
     // Perform escape
-    return `"${text.replace(/"/g, '""')}`;
+    return `"${String(text).replace(/"/g, '""')}`;
 };
 /**
  * Generate a CSV file
@@ -2220,9 +2253,26 @@ const genCSV = (data, columns) => {
         .join(','));
     // Add each row
     data.forEach((datum) => {
+        csv += '\n';
         csv += (columns
             .map((column) => {
-            return escapeCellText(datum[column.param]);
+            let contents;
+            const cell = datum[column.param];
+            if (typeof cell === 'string'
+                || typeof cell === 'number') {
+                contents = String(cell);
+            }
+            else if (typeof cell === 'undefined'
+                || cell === null) {
+                contents = '';
+            }
+            else if (typeof cell === 'object') {
+                contents = JSON.stringify(cell);
+            }
+            else {
+                contents = '';
+            }
+            return escapeCellText(contents);
         })
             .join(','));
     });
@@ -2251,11 +2301,12 @@ const CSVDownloadButton = (props) => {
     /*                 Main UI                */
     /*----------------------------------------*/
     // Render the button
-    return (React__default["default"].createElement("a", { id: id, download: filename, href: `data:application/octet-stream,${csv}`, className: `CSVDownloadButton-button ${className !== null && className !== void 0 ? className : 'btn btn-secondary'}`, "aria-label": (ariaLabel
+    return (React__default["default"].createElement("a", { id: id, download: filename, href: `data:application/octet-stream,${encodeURIComponent(csv)}`, className: `CSVDownloadButton-button ${className !== null && className !== void 0 ? className : 'btn btn-secondary'}`, "aria-label": (ariaLabel
             ? `Click to download ${filename}`
             : ariaLabel), style: style, onClick: onClick },
         !children && (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCloudDownloadAlt, className: "mr-2" }),
+            React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCloudDownloadAlt }),
+            ' ',
             "Download CSV")),
         children));
 };
@@ -2279,9 +2330,13 @@ var ActionType$1;
     // Toggle sort column param
     ActionType["ToggleSortColumn"] = "toggle-sort-column";
     // Toggle the visibility of a column
-    ActionType["ToggleColumnVisibility"] = "toggle-column-visibility";
+    ActionType["UpdateColumnVisibility"] = "update-column-visibility";
     // Toggle the column visibility customization modal
     ActionType["ToggleColVisCusModalVisibility"] = "toggle-col-vis-cus-modal-visibility";
+    // Show all columns
+    ActionType["ShowAllColumns"] = "show-all-columns";
+    // Hide all columns
+    ActionType["HideAllColumns"] = "hide-all-columns";
 })(ActionType$1 || (ActionType$1 = {}));
 /**
  * Reducer that executes actions
@@ -2303,14 +2358,28 @@ const reducer$1 = (state, action) => {
             // Stop sorting by column
             return Object.assign(Object.assign({}, state), { sortColumnParam: undefined, sortType: SortType.Ascending });
         }
-        case ActionType$1.ToggleColumnVisibility: {
+        case ActionType$1.UpdateColumnVisibility: {
             const { columnVisibilityMap } = state;
-            columnVisibilityMap[action.param] = !columnVisibilityMap[action.param];
+            columnVisibilityMap[action.param] = action.visible;
             return Object.assign(Object.assign({}, state), { columnVisibilityMap });
         }
         case ActionType$1.ToggleColVisCusModalVisibility: {
             return Object.assign(Object.assign({}, state), { columnVisibilityCustomizationModalVisible: !state.columnVisibilityCustomizationModalVisible });
         }
+        case ActionType$1.ShowAllColumns: {
+            const { columnVisibilityMap } = state;
+            Object.keys(columnVisibilityMap).forEach((param) => {
+                columnVisibilityMap[param] = true;
+            });
+            return Object.assign(Object.assign({}, state), { columnVisibilityMap });
+        }
+        case ActionType$1.HideAllColumns: {
+            const { columnVisibilityMap } = state;
+            Object.keys(columnVisibilityMap).forEach((param) => {
+                columnVisibilityMap[param] = false;
+            });
+            return Object.assign(Object.assign({}, state), { columnVisibilityMap });
+        }
         default: {
             return state;
         }
@@ -2326,7 +2395,18 @@ const IntelliTable = (props) => {
     var _a;
     /* -------------- Props ------------- */
     // Destructure all props
-    const { title, id, data, columns, } = props;
+    const { title, id, columns, } = props;
+    // Get data, show empty row if none
+    const data = ((props.data && props.data.length > 0)
+        ? props.data
+        : [{ id: 'empty-row' }]);
+    // Get CSV filename
+    let filename = `${title}.csv`;
+    if (props.csvName) {
+        filename = (props.csvName.endsWith('.csv')
+            ? props.csvName
+            : `${props.csvName}.csv`);
+    }
     /* -------------- State ------------- */
     // Initial state
     const initColumnVisibilityMap = {};
@@ -2343,21 +2423,49 @@ const IntelliTable = (props) => {
     const [state, dispatch] = React.useReducer(reducer$1, initialState);
     // Destructure common state
     const { sortColumnParam, sortType, columnVisibilityMap, columnVisibilityCustomizationModalVisible, } = state;
+    /*------------------------------------------------------------------------*/
+    /*                                 Render                                 */
+    /*------------------------------------------------------------------------*/
+    /*----------------------------------------*/
+    /*                  Modal                 */
+    /*----------------------------------------*/
+    // Modal that may be defined
+    let modal;
     /* ------- Col Vis Customization Modal ------ */
     if (columnVisibilityCustomizationModalVisible) {
         // Create modal
-        (React__default["default"].createElement(Modal, { type: ModalType$1.Okay, title: "Choose columns to show:", onClose: () => {
+        modal = (React__default["default"].createElement(Modal, { type: ModalType$1.Okay, title: "Choose columns to show:", onClose: () => {
+                const noColumnsSelected = (Object.values(columnVisibilityMap)
+                    .every((isSelected) => {
+                    return !isSelected;
+                }));
+                if (noColumnsSelected) {
+                    return alert$1('Choose at least one column', 'To continue, you have to choose at least one column to show');
+                }
                 dispatch({
                     type: ActionType$1.ToggleColVisCusModalVisibility,
                 });
-            } }, columns.map((column) => {
-            return (React__default["default"].createElement(CheckboxButton, { key: column.param, id: `IntelliTable-${id}-toggle-visibility-${column.param}`, text: column.title, onChanged: () => {
+            }, okayVariant: Variant$1.Light },
+            columns.map((column) => {
+                return (React__default["default"].createElement(CheckboxButton, { key: column.param, id: `IntelliTable-${id}-toggle-visibility-${column.param}`, className: "mb-2", text: column.title, onChanged: (checked) => {
+                        dispatch({
+                            type: ActionType$1.UpdateColumnVisibility,
+                            param: column.param,
+                            visible: checked,
+                        });
+                    }, checked: columnVisibilityMap[column.param], ariaLabel: `show "${column.title}" column in the ${title} table`, checkedVariant: Variant$1.Light, uncheckedVariant: Variant$1.Secondary }));
+            }),
+            React__default["default"].createElement("div", { className: "mt-3" }, "Or you can:"),
+            React__default["default"].createElement("button", { type: "button", id: `IntelliTable-${id}-select-all-columns`, className: "btn btn-secondary me-2", "aria-label": `show all columns in the ${title} table`, onClick: () => {
                     dispatch({
-                        type: ActionType$1.ToggleColumnVisibility,
-                        param: column.param,
+                        type: ActionType$1.ShowAllColumns,
                     });
-                }, checked: columnVisibilityMap[column.param], ariaLabel: `show "${column.title}" column` }));
-        })));
+                } }, "Select All"),
+            React__default["default"].createElement("button", { type: "button", id: `IntelliTable-${id}-select-none-columns`, className: "btn btn-secondary", "aria-label": `hide all columns in the ${title} table`, onClick: () => {
+                    dispatch({
+                        type: ActionType$1.HideAllColumns,
+                    });
+                } }, "Deselect All")));
     }
     /*----------------------------------------*/
     /*                 Main UI                */
@@ -2371,6 +2479,7 @@ const IntelliTable = (props) => {
         // Custom info based on current sort type
         let sortButtonAriaLabel;
         let sortIcon = freeSolidSvgIcons.faSort;
+        let sortingByThisColumn = false;
         if (!sortColumnParam) {
             // Not being sorted yet
             sortButtonAriaLabel = `sort ascending by ${column.title}`;
@@ -2378,6 +2487,7 @@ const IntelliTable = (props) => {
         }
         else if (column.param === sortColumnParam) {
             // Already sorted by this column
+            sortingByThisColumn = true;
             if (sortType === SortType.Ascending) {
                 // Sorted ascending
                 sortButtonAriaLabel = `sort descending by ${column.title}`;
@@ -2395,11 +2505,14 @@ const IntelliTable = (props) => {
             sortIcon = freeSolidSvgIcons.faSort;
         }
         // Create the cell UI
-        return (React__default["default"].createElement("th", { key: column.param, scope: "col", id: `IntelliTable-${id}-header-${column.param}` },
-            React__default["default"].createElement("div", { className: "d-flex align-items-center justify-content-center flex-row h-100" },
+        return (React__default["default"].createElement("th", { key: column.param, scope: "col", id: `IntelliTable-${id}-header-${column.param}`, className: "text-start", style: {
+                borderRight: '0.05rem solid #555',
+                borderLeft: '0.05rem solid #555',
+            } },
+            React__default["default"].createElement("div", { className: "d-flex align-items-center justify-content-start flex-row h-100" },
                 React__default["default"].createElement("span", { className: "text-nowrap" }, column.title),
                 React__default["default"].createElement("div", null,
-                    React__default["default"].createElement("button", { type: "button", className: "btn btn-light btn-sm ms-1", "aria-label": sortButtonAriaLabel, onClick: () => {
+                    React__default["default"].createElement("button", { type: "button", id: `IntelliTable-${id}-sort-by-${column.param}-button`, className: `btn btn-${sortingByThisColumn ? 'light' : 'secondary'} btn-sm ms-1 ps-1 pe-1 pt-0 pb-0`, "aria-label": sortButtonAriaLabel, onClick: () => {
                             dispatch({
                                 type: ActionType$1.ToggleSortColumn,
                                 param: column.param,
@@ -2417,8 +2530,28 @@ const IntelliTable = (props) => {
     const descending = (sortType === SortType.Descending);
     if (sortColumnParam) {
         sortedData.sort((a, b) => {
+            var _a, _b;
             const aVal = a[sortColumnParam];
             const bVal = b[sortColumnParam];
+            // Tiebreaker sort by timestamp, most recent first (used if tied)
+            const tiebreaker = (((_a = b.timestamp) !== null && _a !== void 0 ? _a : 0)
+                - ((_b = a.timestamp) !== null && _b !== void 0 ? _b : 0));
+            // Auto-sort undefined and null to end of list
+            if ((aVal === undefined || aVal === null)
+                || (bVal === undefined || bVal === null)) {
+                // At least one was undefined
+                if ((aVal === undefined || aVal === null)
+                    && (bVal === undefined || bVal === null)) {
+                    // Both undefined
+                    return tiebreaker;
+                }
+                if (aVal === undefined || aVal === null) {
+                    // First was undefined
+                    return 1;
+                }
+                // Second was undefined
+                return -1;
+            }
             // Sort differently based on the data type
             // > Boolean
             if (paramType === ParamType$1.Boolean) {
@@ -2428,7 +2561,7 @@ const IntelliTable = (props) => {
                 if (!aVal && bVal) {
                     return (descending ? 1 : -1);
                 }
-                return 0;
+                return tiebreaker;
             }
             // > Number
             if (paramType === ParamType$1.Int
@@ -2440,12 +2573,12 @@ const IntelliTable = (props) => {
             // > String
             if (paramType === ParamType$1.String) {
                 if (aVal < bVal) {
-                    return (descending ? -1 : 1);
+                    return (descending ? 1 : -1);
                 }
                 if (aVal > bVal) {
-                    return (descending ? 1 : -1);
+                    return (descending ? -1 : 1);
                 }
-                return 0;
+                return tiebreaker;
             }
             // > JSON
             if (paramType === ParamType$1.JSON) {
@@ -2460,7 +2593,7 @@ const IntelliTable = (props) => {
                     : (aSize - bSize));
             }
             // No sort
-            return 0;
+            return tiebreaker;
         });
     }
     // Table body
@@ -2485,9 +2618,12 @@ const IntelliTable = (props) => {
                 const noValue = (value === undefined
                     || value === null);
                 visibleValue = (noValue
-                    ? (React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCheckCircle }))
-                    : (React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faXmarkCircle })));
+                    ? (React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faMinus }))
+                    : (React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: fullValue ? freeSolidSvgIcons.faCheckCircle : freeSolidSvgIcons.faXmarkCircle })));
                 title = (fullValue ? 'True' : 'False');
+                if (noValue) {
+                    title = 'Empty Cell';
+                }
             }
             else if (column.type === ParamType$1.Int) {
                 fullValue = Number.parseInt(value, 10);
@@ -2496,6 +2632,9 @@ const IntelliTable = (props) => {
                     ? (React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faMinus }))
                     : fullValue);
                 title = String(fullValue);
+                if (noValue) {
+                    title = 'Empty Cell';
+                }
             }
             else if (column.type === ParamType$1.Float) {
                 fullValue = Number.parseFloat(value);
@@ -2504,14 +2643,22 @@ const IntelliTable = (props) => {
                     ? (React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faMinus }))
                     : roundToNumDecimals(fullValue, 2));
                 title = String(fullValue);
+                if (noValue) {
+                    title = 'Empty Cell';
+                }
             }
             else if (column.type === ParamType$1.String) {
                 fullValue = String(value).trim();
-                const noValue = (value.trim().length) === 0;
+                const noValue = (value === undefined
+                    || value === null
+                    || String(fullValue).trim().length === 0);
                 visibleValue = (noValue
                     ? (React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faMinus }))
                     : fullValue);
                 title = `"${value}"`;
+                if (noValue) {
+                    title = 'Empty Cell';
+                }
             }
             else if (column.type === ParamType$1.JSON) {
                 fullValue = JSON.stringify(value);
@@ -2521,9 +2668,13 @@ const IntelliTable = (props) => {
                 visibleValue = (noValue
                     ? (React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faMinus }))
                     : fullValue);
+                title = "JSON Object";
             }
             // Create UI
-            return (React__default["default"].createElement("td", { key: `${datum.id}-${column.param}`, title: title }, visibleValue));
+            return (React__default["default"].createElement("td", { key: `${datum.id}-${column.param}`, title: title, style: {
+                    borderRight: '0.05rem solid #555',
+                    borderLeft: '0.05rem solid #555',
+                } }, visibleValue));
         }));
         // Add cells to a row
         return (React__default["default"].createElement("tr", { key: datum.id }, cells));
@@ -2540,13 +2691,16 @@ const IntelliTable = (props) => {
     })
         .length);
     // Build CSV
-    const csv = genCSV(data, columns);
+    const csv = genCSV(data, columns.filter((column) => {
+        return columnVisibilityMap[column.param];
+    }));
     // Build main UI
     return (React__default["default"].createElement("div", { className: `IntelliTable-container-${id}` },
-        React__default["default"].createElement("div", { className: "d-flex align-items-center justify-content-center" },
+        modal,
+        React__default["default"].createElement("div", { className: "d-flex align-items-center justify-content-start" },
             React__default["default"].createElement("h3", { className: "m-0" }, title),
             React__default["default"].createElement("div", { className: "flex-grow-1 text-end" },
-                React__default["default"].createElement(CSVDownloadButton, { "aria-label": `download data as csv for ${title}`, id: `IntelliTable-${id}-download-as-csv`, filename: `${title}.csv`, csv: csv }),
+                React__default["default"].createElement(CSVDownloadButton, { "aria-label": `download data as csv for ${title}`, id: `IntelliTable-${id}-download-as-csv`, filename: filename, csv: csv }),
                 React__default["default"].createElement("button", { type: "button", className: "btn btn-secondary ms-2", "aria-label": `show panel for customizing which columns show in table ${title}`, id: `IntelliTable-${id}-show-column-customization-modal`, onClick: () => {
                         dispatch({
                             type: ActionType$1.ToggleColVisCusModalVisibility,
@@ -2559,7 +2713,7 @@ const IntelliTable = (props) => {
                         numHiddenCols,
                         ' ',
                         "hidden)"))))),
-        React__default["default"].createElement("div", { className: `IntelliTable-table-${id}`, style: {
+        React__default["default"].createElement("div", { className: `IntelliTable-table-${id} mt-2`, style: {
                 overflowX: 'auto',
             } }, table)));
 };
@@ -2648,14 +2802,212 @@ const style = `
     background-color: transparent !important;
     padding-top: 0 !important;
     padding-bottom: 0 !important;
+    padding-right: 1em !important;
     margin: 0 !important;
-    color: #333 !important;
+    color: #444 !important;
+
+    right: 0 !important;
+    position: absolute !important;
   }
   .LogReviewer-header-close-button:hover {
+    border: 0 !important;
+    background-color: transparent !important;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    margin: 0 !important;
     color: #000 !important;
   }
 `;
 /*------------------------------------------------------------------------*/
+/*                                Constants                               */
+/*------------------------------------------------------------------------*/
+const columns = [
+    {
+        title: 'First Name',
+        param: 'userFirstName',
+        type: ParamType$1.String,
+    },
+    {
+        title: 'Last Name',
+        param: 'userLastName',
+        type: ParamType$1.String,
+    },
+    {
+        title: 'Email',
+        param: 'userEmail',
+        type: ParamType$1.String,
+    },
+    {
+        title: 'Canvas Id',
+        param: 'userId',
+        type: ParamType$1.Int,
+    },
+    {
+        title: 'Student?',
+        param: 'isLearner',
+        type: ParamType$1.Boolean,
+    },
+    {
+        title: 'Teaching Staff?',
+        param: 'isTTM',
+        type: ParamType$1.Boolean,
+        startsHidden: true,
+    },
+    {
+        title: 'Admin?',
+        param: 'isAdmin',
+        type: ParamType$1.Boolean,
+        startsHidden: true,
+    },
+    {
+        title: 'Course Canvas Id',
+        param: 'courseId',
+        type: ParamType$1.Int,
+        startsHidden: true,
+    },
+    {
+        title: 'Course Name',
+        param: 'courseName',
+        type: ParamType$1.String,
+    },
+    {
+        title: 'Browser Name',
+        param: 'browser.name',
+        type: ParamType$1.String,
+        startsHidden: true,
+    },
+    {
+        title: 'Browser Version',
+        param: 'browser.version',
+        type: ParamType$1.String,
+        startsHidden: true,
+    },
+    {
+        title: 'OS',
+        param: 'device.os',
+        type: ParamType$1.String,
+        startsHidden: true,
+    },
+    {
+        title: 'Mobile?',
+        param: 'device.isMobile',
+        type: ParamType$1.Boolean,
+        startsHidden: true,
+    },
+    {
+        title: 'Year',
+        param: 'year',
+        type: ParamType$1.Int,
+    },
+    {
+        title: 'Month',
+        param: 'month',
+        type: ParamType$1.Int,
+    },
+    {
+        title: 'Day',
+        param: 'day',
+        type: ParamType$1.Int,
+    },
+    {
+        title: 'Hour',
+        param: 'hour',
+        type: ParamType$1.Int,
+    },
+    {
+        title: 'Minute',
+        param: 'minute',
+        type: ParamType$1.Int,
+        startsHidden: true,
+    },
+    {
+        title: 'Timestamp',
+        param: 'timestamp',
+        type: ParamType$1.Int,
+        startsHidden: true,
+    },
+    {
+        title: 'Context',
+        param: 'context',
+        type: ParamType$1.String,
+    },
+    {
+        title: 'Subcontext',
+        param: 'subcontext',
+        type: ParamType$1.String,
+    },
+    {
+        title: 'Tags',
+        param: 'tags',
+        type: ParamType$1.JSON,
+        startsHidden: true,
+    },
+    {
+        title: 'Log Level',
+        param: 'level',
+        type: ParamType$1.String,
+        startsHidden: true,
+    },
+    {
+        title: 'Metadata',
+        param: 'metadata',
+        type: ParamType$1.JSON,
+        startsHidden: true,
+    },
+    {
+        title: 'Source',
+        param: 'source',
+        type: ParamType$1.String,
+    },
+    {
+        title: 'Server Route Path',
+        param: 'routePath',
+        type: ParamType$1.String,
+        startsHidden: true,
+    },
+    {
+        title: 'Server Route Template',
+        param: 'routeTemplate',
+        type: ParamType$1.String,
+        startsHidden: true,
+    },
+    {
+        title: 'Type',
+        param: 'type',
+        type: ParamType$1.String,
+    },
+    {
+        title: 'Error Message',
+        param: 'errorMessage',
+        type: ParamType$1.String,
+        startsHidden: true,
+    },
+    {
+        title: 'Error Code',
+        param: 'errorCode',
+        type: ParamType$1.String,
+        startsHidden: true,
+    },
+    {
+        title: 'Error Stack',
+        param: 'errorStack',
+        type: ParamType$1.String,
+        startsHidden: true,
+    },
+    {
+        title: 'Action Target',
+        param: 'target',
+        type: ParamType$1.String,
+        startsHidden: true,
+    },
+    {
+        title: 'Action Type',
+        param: 'action',
+        type: ParamType$1.String,
+        startsHidden: true,
+    },
+];
+/*------------------------------------------------------------------------*/
 /*                            Static Functions                            */
 /*------------------------------------------------------------------------*/
 /**
@@ -2755,10 +3107,35 @@ const LogReviewer = (props) => {
     /*------------------------------------------------------------------------*/
     /*                                  Setup                                 */
     /*------------------------------------------------------------------------*/
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
     /* -------------- Props ------------- */
     // Destructure props
     const { LogMetadata, onClose, } = props;
+    // Create complete map of contexts
+    const contextMap = {};
+    [
+        ((_a = LogMetadata.Context) !== null && _a !== void 0 ? _a : {}),
+        LogBuiltInMetadata.Context,
+    ].forEach((partialContextMap) => {
+        Object.keys(partialContextMap).forEach((context) => {
+            // Add context
+            contextMap[context] = partialContextMap[context];
+            // If context has children, add an "uncategorized" subcontext
+            if (typeof contextMap[context] !== 'string') {
+                contextMap[context][LogBuiltInMetadata.Context.Uncategorized] = (LogBuiltInMetadata.Context.Uncategorized);
+            }
+        });
+    });
+    // Create complete map of targets
+    const targetMap = {};
+    [
+        ((_b = LogMetadata.Target) !== null && _b !== void 0 ? _b : {}),
+        LogBuiltInMetadata.Target,
+    ].forEach((partialTargetMap) => {
+        Object.keys(partialTargetMap).forEach((target) => {
+            targetMap[target] = partialTargetMap[target];
+        });
+    });
     /* -------------- State ------------- */
     // Create initial date filter state
     const today = getTimeInfoInET();
@@ -2778,26 +3155,29 @@ const LogReviewer = (props) => {
     };
     // Create initial context filter state
     const initContextFilterState = {};
-    Object.keys((_a = LogMetadata.Context) !== null && _a !== void 0 ? _a : {}).forEach((context) => {
-        var _a, _b;
-        const contextValue = ((_a = LogMetadata.Context) !== null && _a !== void 0 ? _a : {})[context];
+    Object.keys(contextMap).forEach((context) => {
+        const contextValue = contextMap[context];
         if (typeof contextValue === 'string') {
-            // Case: no subcontexts
+            // Case: no subcontexts, init as checked
             initContextFilterState[contextValue] = true;
         }
         else {
             // Case: subcontexts exist
-            initContextFilterState[contextValue._] = {};
-            Object.values(((_b = LogMetadata.Context) !== null && _b !== void 0 ? _b : {})[context]).forEach((subcontext) => {
-                const subcontextValue = contextValue[subcontext];
-                initContextFilterState[contextValue._][subcontextValue] = true;
+            initContextFilterState[context] = {};
+            Object.values(contextMap[context]).forEach((subcontext) => {
+                // Skip self ("_")
+                if (subcontext === '_') {
+                    return;
+                }
+                // Initialize as checked
+                initContextFilterState[context][subcontext] = true;
             });
         }
     });
     // Create initial tag filter state
     const initTagFilterState = {};
-    Object.values((_b = LogMetadata.Tag) !== null && _b !== void 0 ? _b : {}).forEach((tagValue) => {
-        initTagFilterState[tagValue] = true;
+    Object.keys((_c = LogMetadata.Tag) !== null && _c !== void 0 ? _c : {}).forEach((tag) => {
+        initTagFilterState[tag] = false;
     });
     // Create advanced filter state
     const initAdvancedFilterState = {
@@ -2823,7 +3203,7 @@ const LogReviewer = (props) => {
         target: {},
         action: {},
     };
-    Object.values((_c = LogMetadata.Target) !== null && _c !== void 0 ? _c : {}).forEach((target) => {
+    Object.values(targetMap).forEach((target) => {
         initActionErrorFilterState.target[target] = true;
     });
     Object.values(LogAction$1).forEach((action) => {
@@ -2862,15 +3242,18 @@ const LogReviewer = (props) => {
         let month = newDateFilterState.startDate.month;
         while (
         // Earlier year
-        (year <= newDateFilterState.endDate.year)
+        (year < newDateFilterState.endDate.year)
             // Current year but included month
             || (year === newDateFilterState.endDate.year
                 && month <= newDateFilterState.endDate.month)) {
-            // Add to list
-            toLoad.push({
-                year,
-                month,
-            });
+            // Add to list if not already loaded
+            if (!logMap[year]
+                || !logMap[year][month]) {
+                toLoad.push({
+                    year,
+                    month,
+                });
+            }
             // Increment
             month += 1;
             if (month > 12) {
@@ -2958,10 +3341,10 @@ const LogReviewer = (props) => {
         /*                 Filters                */
         /*----------------------------------------*/
         // Filter toggle
-        const filterToggles = (React__default["default"].createElement("div", { className: "LogReviewer-filter-toggles mb-2" },
+        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" },
-                React__default["default"].createElement("button", { type: "button", id: "LogReviewer-toggle-date-filter-drawer", className: `btn btn-${FilterDrawer.Date === expandedFilterDrawer ? 'warning' : 'secondary'} me-2`, "aria-label": "toggle date filter drawer", onClick: () => {
+            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.ToggleFilterDrawer,
                             filterDrawer: FilterDrawer.Date,
@@ -2969,7 +3352,7 @@ const LogReviewer = (props) => {
                     } },
                     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' : 'secondary'} me-2`, "aria-label": "toggle context filter drawer", onClick: () => {
+                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.ToggleFilterDrawer,
                             filterDrawer: FilterDrawer.Context,
@@ -2977,7 +3360,7 @@ const LogReviewer = (props) => {
                     } },
                     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' : 'secondary'} me-2`, "aria-label": "toggle tag filter drawer", onClick: () => {
+                (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.ToggleFilterDrawer,
                             filterDrawer: FilterDrawer.Tag,
@@ -2985,7 +3368,7 @@ const LogReviewer = (props) => {
                     } },
                     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' : 'secondary'} me-2`, "aria-label": "toggle action and error filter drawer", onClick: () => {
+                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.ToggleFilterDrawer,
                             filterDrawer: FilterDrawer.Action,
@@ -2993,41 +3376,64 @@ const LogReviewer = (props) => {
                     } },
                     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' : 'secondary'}`, "aria-label": "toggle advanced filter drawer", onClick: () => {
+                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.ToggleFilterDrawer,
                             filterDrawer: FilterDrawer.Advanced,
                         });
                     } },
                     React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faList, className: "me-2" }),
-                    "Advanced"))));
+                    "Advanced"),
+                React__default["default"].createElement("button", { type: "button", id: "LogReviewer-reset-filters-button", className: "btn btn-light", "aria-label": "reset filters", onClick: () => {
+                        dispatch({
+                            type: ActionType.ResetFilters,
+                            initActionErrorFilterState,
+                            initAdvancedFilterState,
+                            initContextFilterState,
+                            initDateFilterState,
+                            initTagFilterState,
+                        });
+                    } },
+                    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, onChange: (month, day, year) => {
-                            dispatch({
-                                type: ActionType.UpdateDateFilterState,
-                                dateFilterState: Object.assign(Object.assign({}, dateFilterState), { startDate: { month, day, year } }),
-                            });
+                    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, chooseFromPast: 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, onChange: (month, day, year) => {
-                            dispatch({
-                                type: ActionType.UpdateDateFilterState,
-                                dateFilterState: Object.assign(Object.assign({}, dateFilterState), { endDate: { month, day, year } }),
-                            });
+                    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, chooseFromPast: 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$1('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 pickableItems = (Object.keys((_d = LogMetadata.Context) !== null && _d !== void 0 ? _d : {})
-                    .map((context) => {
-                    var _a;
-                    const value = ((_a = LogMetadata.Context) !== null && _a !== void 0 ? _a : {})[context];
+                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 = {
@@ -3036,38 +3442,65 @@ const LogReviewer = (props) => {
                             isGroup: false,
                             checked: !!contextFilterState[context],
                         };
-                        return item;
+                        // 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: `${context}-${subcontext}`,
+                            id: subcontext,
                             name: genHumanReadableName(subcontext),
                             isGroup: false,
-                            checked: !!value[subcontext],
+                            checked: contextFilterState[context][subcontext],
                         };
                     }));
                     const item = {
                         id: context,
-                        name: context,
+                        name: genHumanReadableName(context),
                         isGroup: true,
                         children,
                     };
-                    return item;
-                }));
+                    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
-                                pickableItem.children.forEach((subcontextItem) => {
-                                    contextFilterState[pickableItem.id][subcontextItem.id] = (subcontextItem.checked);
-                                });
+                                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);
+                                        }
+                                    });
+                                }
                             }
                             else {
                                 // No subcontexts
@@ -3082,13 +3515,19 @@ const LogReviewer = (props) => {
             }
             else if (expandedFilterDrawer === FilterDrawer.Tag) {
                 // Create filter UI
-                filterDrawer = (React__default["default"].createElement(TabBox, { title: "Tags" }, Object.keys(tagFilterState)
-                    .map((tag, i) => {
-                    const description = genHumanReadableName(tag);
-                    return (React__default["default"].createElement(CheckboxButton, { id: `LogReviewer-tag-${tag}-checkbox`, text: description, ariaLabel: `include logs tagged with "${description}" in results`, noMarginOnRight: i === Object.keys(tagFilterState).length - 1, onChanged: (checked) => {
-                            tagFilterState[tag] = checked;
-                        } }));
-                })));
+                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;
+                                dispatch({
+                                    type: ActionType.UpdateTagFilterState,
+                                    tagFilterState,
+                                });
+                            } }));
+                    }))));
             }
             else if (expandedFilterDrawer === FilterDrawer.Action) {
                 // Create filter UI
@@ -3117,36 +3556,35 @@ const LogReviewer = (props) => {
                             }, 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" }, Object.keys(LogAction$1)
-                            .map((action, i) => {
-                            const description = genHumanReadableName(action);
-                            return (React__default["default"].createElement(CheckboxButton, { id: `LogReviewer-action-${action}-checkbox`, text: description, ariaLabel: `include logs with action type "${description}" in results`, noMarginOnRight: i === Object.keys(LogAction$1).length - 1, onChanged: (checked) => {
-                                    actionErrorFilterState.action[action] = checked;
-                                    dispatch({
-                                        type: ActionType.UpdateActionErrorFilterState,
-                                        actionErrorFilterState,
-                                    });
-                                } }));
-                        })),
+                        React__default["default"].createElement(ButtonInputGroup, { label: "Action", className: "mb-2" },
+                            React__default["default"].createElement("div", { className: "d-flex gap-1 flex-wrap" }, 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.UpdateActionErrorFilterState,
+                                            actionErrorFilterState,
+                                        });
+                                    } }));
+                            }))),
                         React__default["default"].createElement(ButtonInputGroup, { label: "Target" },
-                            (Object.keys((_e = LogMetadata.Target) !== null && _e !== void 0 ? _e : {})) && (React__default["default"].createElement("div", null, "This app does not have any targets yet.")),
-                            Object.keys((_f = LogMetadata.Target) !== null && _f !== void 0 ? _f : {})
-                                .map((target, i) => {
-                                var _a;
+                            React__default["default"].createElement("div", { className: "d-flex gap-1 flex-wrap" }, Object.keys(targetMap)
+                                .map((target) => {
                                 const description = genHumanReadableName(target);
-                                return (React__default["default"].createElement(CheckboxButton, { id: `LogReviewer-target-${target}-checkbox`, text: description, ariaLabel: `include logs with target "${description}" in results`, onChanged: (checked) => {
+                                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.UpdateActionErrorFilterState,
                                             actionErrorFilterState,
                                         });
-                                    }, noMarginOnRight: i === Object.keys((_a = LogMetadata.Target) !== null && _a !== void 0 ? _a : {}).length - 1 }));
-                            })))),
+                                    } }));
+                            }))))),
                     (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, onChange: (e) => {
+                            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.UpdateActionErrorFilterState,
@@ -3155,7 +3593,7 @@ const LogReviewer = (props) => {
                                 } })),
                         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.errorMessage, onChange: (e) => {
+                            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());
@@ -3168,10 +3606,10 @@ const LogReviewer = (props) => {
             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 Info" },
+                    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, onChange: (e) => {
+                            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.UpdateAdvancedFilterState,
@@ -3180,7 +3618,7 @@ const LogReviewer = (props) => {
                                 } })),
                         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, onChange: (e) => {
+                            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.UpdateAdvancedFilterState,
@@ -3189,7 +3627,7 @@ const LogReviewer = (props) => {
                                 } })),
                         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, onChange: (e) => {
+                            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({
@@ -3199,7 +3637,7 @@ const LogReviewer = (props) => {
                                 } })),
                         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, onChange: (e) => {
+                            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)) {
@@ -3233,10 +3671,10 @@ const LogReviewer = (props) => {
                                         advancedFilterState,
                                     });
                                 }, checked: advancedFilterState.includeAdmins, ariaLabel: "show logs from admins" }))),
-                    React__default["default"].createElement(TabBox, { title: "Course Info" },
+                    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: advancedFilterState.courseName, onChange: (e) => {
+                            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;
                                     dispatch({
                                         type: ActionType.UpdateAdvancedFilterState,
@@ -3245,7 +3683,7 @@ const LogReviewer = (props) => {
                                 } })),
                         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, onChange: (e) => {
+                            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)) {
@@ -3257,7 +3695,7 @@ const LogReviewer = (props) => {
                                         advancedFilterState,
                                     });
                                 } }))),
-                    React__default["default"].createElement(TabBox, { title: "Device Info" },
+                    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;
@@ -3303,32 +3741,33 @@ const LogReviewer = (props) => {
                                         advancedFilterState,
                                     });
                                 }, noMarginOnRight: true })),
-                        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", placeholder: "e.g. /api/ttm/courses/12345", value: advancedFilterState.routePath, onChange: (e) => {
-                                    advancedFilterState.courseName = ((e.target.value)
-                                        .trim());
-                                    dispatch({
-                                        type: ActionType.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.UpdateAdvancedFilterState,
-                                        advancedFilterState,
-                                    });
-                                } })))));
+                        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.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.UpdateAdvancedFilterState,
+                                            advancedFilterState,
+                                        });
+                                    } })))))));
             }
         }
         // Filters UI
         const filters = (React__default["default"].createElement(React__default["default"].Fragment, null,
             filterToggles,
-            filterDrawer && (React__default["default"].createElement(Drawer, null, filterDrawer))));
+            filterDrawer && (React__default["default"].createElement(Drawer, { customBackgroundColor: "#eee" }, filterDrawer))));
         // Actually filter the logs
         // > Perform filters
         const logs = [];
@@ -3369,16 +3808,22 @@ const LogReviewer = (props) => {
                     // Whole context is deselected
                     contextFilterState[log.context] === false
                         // None of the subcontexts are selected
-                        || (Object.values((_a = contextFilterState[log.context]) !== null && _a !== void 0 ? _a : {})
-                            .every((isSelected) => {
-                            return !isSelected;
-                        }))) {
+                        || (
+                        // 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 has a subcontext
-                    log.subcontext
+                    // 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
@@ -3390,12 +3835,16 @@ const LogReviewer = (props) => {
                     /* -------------- Tags -------------- */
                     // No tags match
                     if (
-                    // Log has at least one tag
-                    log.tags.length > 0
+                    // At least one tag is required
+                    Object.values(tagFilterState)
+                        .filter((isSelected) => {
+                        return isSelected;
+                    })
+                        .length > 0
                         // No tags match
-                        && (log.tags.every((tag) => {
+                        && log.tags.every((tag) => {
                             return !tagFilterState[tag];
-                        }))) {
+                        })) {
                         return;
                     }
                     /* ------- Actions and Errors ------- */
@@ -3529,7 +3978,7 @@ const LogReviewer = (props) => {
                         // Device info exists
                         && log.device
                         // Mobile filter doesn't match
-                        && (advancedFilterState.isMobile === log.device.isMobile)) {
+                        && (advancedFilterState.isMobile !== log.device.isMobile)) {
                         return;
                     }
                     // Log source doesn't match
@@ -3571,203 +4020,20 @@ const LogReviewer = (props) => {
         /*----------------------------------------*/
         /*                  Data                  */
         /*----------------------------------------*/
-        // Create data table
-        const columns = [
-            {
-                title: 'First Name',
-                param: 'userFirstName',
-                type: ParamType$1.String,
-            },
-            {
-                title: 'Last Name',
-                param: 'userLastName',
-                type: ParamType$1.String,
-            },
-            {
-                title: 'Email',
-                param: 'userEmail',
-                type: ParamType$1.String,
-            },
-            {
-                title: 'Canvas Id',
-                param: 'userId',
-                type: ParamType$1.Int,
-            },
-            {
-                title: 'Student',
-                param: 'isLearner',
-                type: ParamType$1.Boolean,
-            },
-            {
-                title: 'Teaching Staff',
-                param: 'isTTM',
-                type: ParamType$1.Boolean,
-                startsHidden: true,
-            },
-            {
-                title: 'Admin',
-                param: 'isAdmin',
-                type: ParamType$1.Boolean,
-                startsHidden: true,
-            },
-            {
-                title: 'Course Canvas Id',
-                param: 'courseId',
-                type: ParamType$1.Int,
-                startsHidden: true,
-            },
-            {
-                title: 'Course Name',
-                param: 'courseName',
-                type: ParamType$1.String,
-            },
-            {
-                title: 'Browser Name',
-                param: 'browser.name',
-                type: ParamType$1.String,
-                startsHidden: true,
-            },
-            {
-                title: 'Browser Version',
-                param: 'browser.version',
-                type: ParamType$1.String,
-                startsHidden: true,
-            },
-            {
-                title: 'OS',
-                param: 'device.os',
-                type: ParamType$1.String,
-                startsHidden: true,
-            },
-            {
-                title: 'Mobile',
-                param: 'device.isMobile',
-                type: ParamType$1.Boolean,
-                startsHidden: true,
-            },
-            {
-                title: 'Year',
-                param: 'year',
-                type: ParamType$1.Int,
-            },
-            {
-                title: 'Month',
-                param: 'month',
-                type: ParamType$1.Int,
-            },
-            {
-                title: 'Day',
-                param: 'day',
-                type: ParamType$1.Int,
-            },
-            {
-                title: 'Hour',
-                param: 'hour',
-                type: ParamType$1.Int,
-            },
-            {
-                title: 'Minute',
-                param: 'minute',
-                type: ParamType$1.Int,
-                startsHidden: true,
-            },
-            {
-                title: 'Timestamp',
-                param: 'timestamp',
-                type: ParamType$1.Int,
-                startsHidden: true,
-            },
-            {
-                title: 'Context',
-                param: 'context',
-                type: ParamType$1.String,
-            },
-            {
-                title: 'Subcontext',
-                param: 'subcontext',
-                type: ParamType$1.String,
-            },
-            {
-                title: 'Tags',
-                param: 'tags',
-                type: ParamType$1.JSON,
-                startsHidden: true,
-            },
-            {
-                title: 'Log Level',
-                param: 'level',
-                type: ParamType$1.String,
-                startsHidden: true,
-            },
-            {
-                title: 'Metadata',
-                param: 'metadata',
-                type: ParamType$1.JSON,
-                startsHidden: true,
-            },
-            {
-                title: 'Source',
-                param: 'source',
-                type: ParamType$1.String,
-            },
-            {
-                title: 'Server Route Path',
-                param: 'routePath',
-                type: ParamType$1.String,
-                startsHidden: true,
-            },
-            {
-                title: 'Server Route Template',
-                param: 'routeTemplate',
-                type: ParamType$1.String,
-                startsHidden: true,
-            },
-            {
-                title: 'Type',
-                param: 'type',
-                type: ParamType$1.String,
-            },
-            {
-                title: 'Error Message',
-                param: 'errorMessage',
-                type: ParamType$1.String,
-                startsHidden: true,
-            },
-            {
-                title: 'Error Code',
-                param: 'errorCode',
-                type: ParamType$1.String,
-                startsHidden: true,
-            },
-            {
-                title: 'Error Stack',
-                param: 'errorStack',
-                type: ParamType$1.String,
-                startsHidden: true,
-            },
-            {
-                title: 'Action Target',
-                param: 'target',
-                type: ParamType$1.String,
-                startsHidden: true,
-            },
-            {
-                title: 'Action Type',
-                param: 'action',
-                type: ParamType$1.String,
-                startsHidden: true,
-            },
-        ];
-        // Create intelliTable
-        const dataTable = (logs.length === 0
-            ? (React__default["default"].createElement("div", { className: "alert alert-warning" },
+        // 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.")))
-            : (React__default["default"].createElement(IntelliTable, { title: "Matching Logs", id: "logs", data: logs, columns: columns })));
+            : 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,
-            dataTable));
+            React__default["default"].createElement("div", { className: "mt-2" },
+                dataTable,
+                noLogsNotice)));
     }
     /* ---------- Wrap in Modal --------- */
     return (React__default["default"].createElement("div", { className: "LogReviewer-outer-container" },
@@ -3775,9 +4041,10 @@ const LogReviewer = (props) => {
         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: "m-0" }, "Log Review Dashboard")),
-                React__default["default"].createElement("button", { type: "button", className: "LogReviewer-header-close-button btn btn-dark btn-lg", "aria-label": "close log reviewer panel", onClick: onClose },
-                    React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faTimes }))),
+                    React__default["default"].createElement("h3", { className: "text-center m-0" }, "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 })))),
             React__default["default"].createElement("div", { className: "LogReviewer-contents" }, body))));
 };
 
@@ -3799,6 +4066,50 @@ const HOUR_IN_MS = 3600000;
  */
 const DAY_IN_MS = 86400000;
 
+/**
+ * Check if the user is on mobile
+ * from https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser
+ * @returns true if user is on a mobile device
+ */
+const checkIfMobileOrTablet = () => {
+    var _a;
+    try {
+        let check = false;
+        ((a) => { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4)))
+            check = true; })((navigator !== null && navigator !== void 0 ? navigator : {}).userAgent || (navigator !== null && navigator !== void 0 ? navigator : {}).vendor || ((_a = window) !== null && _a !== void 0 ? _a : {}).opera);
+        return check;
+    }
+    catch (err) {
+        // Probably this code is being executed on a server
+        return false;
+    }
+};
+const isMobileOrTablet = checkIfMobileOrTablet();
+/**
+ * Dynamic words determined by the user's platform
+ * @author Gabe Abrams
+ */
+const DynamicWord = {
+    Click: (isMobileOrTablet
+        ? 'tap'
+        : 'click'),
+    ClickCapitalized: (isMobileOrTablet
+        ? 'Tap'
+        : 'Click'),
+    App: (isMobileOrTablet
+        ? 'app'
+        : 'application'),
+    AppCapitalized: (isMobileOrTablet
+        ? 'App'
+        : 'Application'),
+    Device: (isMobileOrTablet
+        ? 'device'
+        : 'computer'),
+    DeviceCapitalized: (isMobileOrTablet
+        ? 'Device'
+        : 'Computer'),
+};
+
 /**
  * Shorten text so it fits into a certain number of chars
  * @author Gabe Abrams
@@ -3873,6 +4184,18 @@ const floorToNumDecimals = (num, numDecimals) => {
     return (Math.floor(num * rounder) / rounder);
 };
 
+/**
+ * Force a number to stay within specific bounds
+ * @author Gabe Abrams
+ * @param num the number to move into the bounds
+ * @param min the minimum number in the bound
+ * @param max the maximum number in the bound
+ * @returns bounded number
+ */
+const forceNumIntoBounds = (num, min, max) => {
+    return Math.max(min, Math.min(max, num));
+};
+
 /**
  * Pad a number's decimal with zeros on the right
  *   (e.g. 5.2 becomes 5.20 with 2 digit padding)
@@ -4108,15 +4431,17 @@ const initServer = (opts) => {
         },
         handler: ({ params }) => __awaiter(void 0, void 0, void 0, function* () {
             // Get user info
-            const { userId, isAdmin } = params;
+            const { year, month, userId, isAdmin, } = params;
             // Validate user
-            // isAdmin is already checked because path starts with '/admin'
             const canReview = yield canReviewLogs(userId, isAdmin);
             if (!canReview) {
                 throw new ErrorWithCode('You cannot access this resource because you do not have the appropriate permissions.', ReactKitErrorCode$1.NotAllowedToReviewLogs);
             }
             // Query for logs
-            const logs = yield _logCollection.find({ userId });
+            const logs = yield _logCollection.find({
+                year,
+                month,
+            });
             // Return logs
             return logs;
         }),
@@ -4765,7 +5090,7 @@ const genRouteHandler = (opts) => {
                     isAdmin: !!launchInfo.isAdmin,
                     isTTM: !!launchInfo.isTTM,
                     courseId: launchInfo.courseId,
-                    courseName: launchInfo.courseName,
+                    courseName: launchInfo.contextLabel,
                     browser,
                     device,
                     year,
@@ -4792,7 +5117,7 @@ const genRouteHandler = (opts) => {
                     }
                     : {
                         type: LogType$1.Action,
-                        target: ((_m = opts.target) !== null && _m !== void 0 ? _m : LogBuiltInMetadata.Target.NoSpecificTarget),
+                        target: ((_m = opts.target) !== null && _m !== void 0 ? _m : LogBuiltInMetadata.Target.NoTarget),
                         action: ((_o = opts.action) !== null && _o !== void 0 ? _o : LogAction$1.Unknown),
                     });
                 // Source-specific info
@@ -5005,29 +5330,6 @@ const startMinWait = (minWaitMs) => {
     });
 };
 
-// Import shared helpers
-/**
- * Get a human-readable description of a date (all in ET)
- * @author Gabe Abrams
- * @param [dateOrTimestamp=today] the date or timestamp for the date to describe
- * @returns human-readable description of the date
- */
-const getHumanReadableDate = (dateOrTimestamp) => {
-    // Get the date info
-    const { month, day, year, } = getTimeInfoInET(dateOrTimestamp);
-    const currYear = getTimeInfoInET().year;
-    // Get the short month description
-    const monthName = getMonthName(month).short;
-    // Create start of description
-    let description = `${monthName} ${day}${getOrdinal(day)}`;
-    // Add on year if it's different
-    if (year !== currYear) {
-        description += ` ${year}`;
-    }
-    // Return description
-    return description;
-};
-
 /**
  * Get the current part of day (morning, evening, etc.)
  * @author Gabe Abrams
@@ -5208,6 +5510,7 @@ exports.CopiableBox = CopiableBox;
 exports.DAY_IN_MS = DAY_IN_MS;
 exports.DayOfWeek = DayOfWeek$1;
 exports.Drawer = Drawer;
+exports.DynamicWord = DynamicWord;
 exports.ErrorBox = ErrorBox;
 exports.ErrorWithCode = ErrorWithCode;
 exports.HOUR_IN_MS = HOUR_IN_MS;