documentation and small fixes

compass/components/Table/ColumnHeader.tsx

@@ -14,8 +14,8 @@ import DataPoint from "@/utils/models/DataPoint";
 interface ColumnHeaderProps<T extends DataPoint> {
     header: Header<T, any>;
     details: Details | undefined;
-    hasHorizontalBorders: boolean;
     setFilterFn?: (field: string, filterFn: FilterFn) => void;
+    className?: string;
 }
 
 function DropdownCheckIcon({ className }: { className?: string }) {
@@ -27,12 +27,16 @@ function DropdownCheckIcon({ className }: { className?: string }) {
 /**
  * Component for rendering the header of a table column,
  * as well as the dropdown menu for sorting and filtering.
+ * @param props.header The header object from TanStack Table.
+ * @param props.details The details object containing metadata about the column.
+ * @param props.setFilterFn Include this state setter if the column has multiple filter options.
+ * @param props.className Optional additional class names for styling.
  */
 export function ColumnHeader<T extends DataPoint>({
     header,
     details,
-    hasHorizontalBorders,
     setFilterFn,
+    className
 }: ColumnHeaderProps<T>) {
     const { column } = header;
 
@@ -46,7 +50,6 @@ export function ColumnHeader<T extends DataPoint>({
     const isFiltered =
         column.getFilterValue() != null && column.getFilterValue() !== "";
 
-    const headerRef = useRef<HTMLTableCellElement>(null);
     const menuRef = useRef<HTMLDivElement>(null);
     const filterRef = useRef<HTMLDivElement>(null);
 
@@ -92,8 +95,7 @@ export function ColumnHeader<T extends DataPoint>({
             scope="col"
             className={`border-gray-200 border-y font-medium ${
                 isFiltered ? "bg-purple-50" : ""
-            } ${hasHorizontalBorders ? "border-x" : ""}`}
+            } ${className ?? ""}`}
-            ref={headerRef}
         >
             <div>
                 {header.isPlaceholder ? null : (

compass/components/Table/FilterDropdown.tsx

@@ -12,6 +12,12 @@ interface FilterDropdownProps<T extends DataPoint> {
     setFilterFn?: (field: string, filterFn: FilterFn) => void;
 }
 
+/**
+ * Component for rendering a dropdown menu when adding a filter to a column.
+ * @param props.details The details object containing metadata about the column.
+ * @param props.column The column object from TanStack Table.
+ * @param props.setFilterFn Include this state setter if the column has multiple filter options.
+ */
 export default function FilterDropdown<T extends DataPoint>({
     details,
     column,
@@ -26,10 +32,11 @@ export default function FilterDropdown<T extends DataPoint>({
     const [filter] = filterState;
     const { inputType, presetOptionsValues, presetOptionsSetter } = details;
 
+    // Update the column filter function when the state changes
     useEffect(() => {
         if (filter && setFilterFn) {
             setFilterFn(details.key, filter);
-            column.setFilterValue((prev: any) => prev);
+            column.setFilterValue((prev: any) => prev); // Trigger a re-render based on new filter value
         }
     }, [details.key, filter, setFilterFn, column]);
 

compass/components/Table/ServiceTable.tsx

@@ -4,7 +4,7 @@ import {
     ListBulletIcon,
     UserIcon,
 } from "@heroicons/react/24/solid";
-import { Dispatch, SetStateAction, useMemo, useState } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 import Table from "@/components/Table/Table";
 import { RowOpenAction } from "@/components/Table/RowOpenAction";
@@ -153,6 +153,7 @@ export default function ServiceTable({
                     </Tag>
                 </div>
             ),
+            // Filter by if the value is in the tags array
             filterFn: (row, columnId, filterValue) => {
                 const rowValue = row.getValue(columnId);
                 if (Array.isArray(filterValue)) {

compass/components/Table/Table.tsx

@@ -72,6 +72,8 @@ const fuzzyFilter = (
  * @param props.data Stateful list of data to be held in the table
  * @param props.setData State setter for the list of data
  * @param props.columns Column definitions made with Tanstack columnHelper
+ * @param props.setFilterFn This optional state setter should change the filter funciton of the provided column if possible.
+ * It should be included if the column has multiple filter options.
  */
 export default function Table<T extends DataPoint>({
     data,
@@ -116,20 +118,6 @@ export default function Table<T extends DataPoint>({
     const visibilitySort = (a: T, b: T) =>
         a.visible === b.visible ? 0 : a.visible ? -1 : 1;
 
-    // // Sort data on load
-    // useEffect(() => {
-    //     setData((prevData) => prevData.sort(visibilitySort));
-    // }, [setData]);
-
-    // // Data manipulation methods
-    // // TODO: Connect data manipulation methods to the database (deleteData, hideData, addData)
-    // const deleteData = (dataId: number) => {
-    //     console.log(data);
-    //     setData((currentData) =>
-    //         currentData.filter((data) => data.id !== dataId)
-    //     );
-    // };
-
     const hideData = (dataId: number) => {
         console.log(`Toggling visibility for data with ID: ${dataId}`);
         setData((currentData) => {
@@ -228,8 +216,10 @@ export default function Table<T extends DataPoint>({
                                         (d) => d.key === header.column.id
                                     )}
                                     setFilterFn={setFilterFn}
-                                    hasHorizontalBorders={
+                                    className={
                                         offset < i && i < columns.length - 1
+                                            ? "border-x"
+                                            : ""
                                     }
                                     key={header.id}
                                 />

compass/components/TagsInput/Index.tsx

@@ -36,7 +36,7 @@ const TagsInput: React.FC<TagsInputProps> = ({
     const dropdown = useRef<HTMLDivElement>(null);
 
     const handleClick = () => {
-        if (!cellSelectedPreset) {
+        if (!cellSelected) {
             setCellSelected(true);
             setTimeout(() => {
                 window.addEventListener("click", handleOutsideClick);
@@ -164,7 +164,7 @@ const TagsInput: React.FC<TagsInputProps> = ({
 
     return (
         <div className="cursor-pointer" onClick={handleClick}>
-            {!cellSelectedPreset ? (
+            {!cellSelected ? (
                 <>
                     <FilterSelect />
                     <TagsArray