Improve and document the TableFilter component

frontend/src/components/molecules/ColumnMenuFilter/index.jsx

@@ -14,11 +14,16 @@ import { uid } from "@/utils/helper";
 import { useSelector } from "react-redux";
 
 /**
+ * A component that displays a list of columns available for the project
+ * ID type, and allows the user to select or deselect them.
+ * Selection changes are communicated through the callback.
+ * 
  * @param {*} props
- *  - type: The project ID type within the CPT Dashboard.
- *  - setColumns: A callback with two inputs, value and isAdding:
+ *  - type: The project ID type within the CPT Dashboard that as used in
+ *      the commonActions action file.
+ *  - setColumns: A callback with two inputs, `value` and `isAdding`:
  *   - value: The column to modify
- *   - isAdding: True if adding the column, False if removing it.
+ *   - isAdding: `true` if adding the column, `false` if removing it.
  */
 const ColumnMenuFilter = (props) => {
   const [isOpen, setIsOpen] = React.useState(false);

frontend/src/components/molecules/MultiSelectBox/index.jsx

@@ -12,6 +12,22 @@ import {
 import PropTypes from "prop-types";
 import { useState } from "react";
 
+/**
+ * A multi-select box that allows selecting values for a category.
+ *
+ * @param {*} props:
+ *  - options: an array of options that can be selected.
+ *  - onChange: a callback function that is called with inputs `category` and `value`
+ *   - `category`: The value from currCategory.
+ *   - `value`: The value that was selected.
+ *  - selected: The currently selected options in the form of an object with fields `name` and `value`
+ *   - `name`: The name of the category.
+ *   - `value`: An array of all selected values as strings.
+ *  - applyMethod: A callback that is called when it is time to apply the changes (like when
+ *      the multi-select is closed).
+ *  - currCategory: A string specifying the current category.
+ *  - width: the CSS value for the width of the outer sub-component.
+ */
 const MultiSelectBox = (props) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isDirty, setIsDirty] = useState(false);
@@ -31,6 +47,8 @@ const MultiSelectBox = (props) => {
     }
     setIsDirty(false);
   };
+  const message = props.options.length > 0 ? "Select a value" : "No values present";
+
   const toggle = (toggleRef) => {
     return (
       <MenuToggle
@@ -66,7 +84,7 @@ const MultiSelectBox = (props) => {
           </TextInputGroup>
         ) : (
           <TextInputGroup>
-            <TextInputGroupMain value={"Select a value"} />
+            <TextInputGroupMain value={message} />
           </TextInputGroup>
         )}
       </MenuToggle>

frontend/src/components/organisms/TableFilters/index.jsx

@@ -3,6 +3,7 @@ import "react-calendar/dist/Calendar.css";
 import "./index.less";
 
 import {
+  Banner,
   Chip,
   ChipGroup,
   Toolbar,
@@ -25,7 +26,9 @@ import SelectBox from "@/components/molecules/SelectBox";
 import { formatDate } from "@/utils/helper";
 
 /**
- * A component that provides a filter selector, a date selector, and navigation components.
+ * A component that provides an all-in-one toolbar for the tables in this project.
+ * 
+ * Includes a filter selector, a date selector, a column selector, and navigation components.
  * This component utilizes filterActions to modify the data store.
  *
  * @param {*} props:
@@ -64,15 +67,9 @@ const TableFilter = (props) => {
     updateSelectedFilter,
   } = props;
 
-
-  tableFilters.forEach(function(entry) {
-    console.log(entry);
-  });
-
-
   const getFilterID = (name) => {
     if (!(tableFilters?.length > 0)) {
-      return "no-filters";
+      return "";
     }
     const filterResults = tableFilters.filter((item) => item.name === name);
     if (filterResults.length == 0) {
@@ -110,7 +107,7 @@ const TableFilter = (props) => {
     <>
       <Toolbar id="filter-toolbar">
         {tableFilters != null && filterOptions != null && updateSelectedFilter != null && (
-          tableFilters.length > 0 && filterOptions.length > 0 ? (
+          tableFilters.length > 0 ? (
             <ToolbarContent className="field-filter">
               <ToolbarItem style={{ marginInlineEnd: 0 }}>
                 <SelectBox
@@ -122,18 +119,14 @@ const TableFilter = (props) => {
                 />
               </ToolbarItem>
               <ToolbarItem>
-                {category != false ? (
-                  <MultiSelectBox
-                    options={filterOptions}
-                    onChange={updateSelectedFilter}
-                    applyMethod={onOptionsChange}
-                    currCategory={category}
-                    selected={selectedFilters?.find((i) => i.name === category)}
-                    width={"300px"}
-                  />
-                ) :
-                  <Banner status="warning">No options for category "{category}"</Banner>
-                }
+                <MultiSelectBox
+                  options={filterOptions}
+                  onChange={updateSelectedFilter}
+                  applyMethod={onOptionsChange}
+                  currCategory={category}
+                  selected={selectedFilters?.find((i) => i.name === category)}
+                  width={"300px"}
+                />
               </ToolbarItem>
             </ToolbarContent>
           ) :