Reworked the reducer to do the filtering

Author: matt-aitken

apps/webapp/app/components/primitives/TreeView/TreeView.tsx

@@ -128,12 +128,12 @@ export function TreeView<TData>({
   );
 }
 
-export type Filter<TData> = {
-  text?: string;
-  fn: (text: string, node: FlatTreeItem<TData>) => boolean;
+export type Filter<TData, TFilterValue> = {
+  value?: TFilterValue;
+  fn: (value: TFilterValue, node: FlatTreeItem<TData>) => boolean;
 };
 
-type TreeStateHookProps<TData> = {
+type TreeStateHookProps<TData, TFilterValue> = {
   tree: FlatTree<TData>;
   selectedId?: string;
   collapsedIds?: string[];
@@ -144,7 +144,7 @@ type TreeStateHookProps<TData> = {
     index: number;
   }) => number;
   parentRef: RefObject<any>;
-  filter?: Filter<TData>;
+  filter?: Filter<TData, TFilterValue>;
 };
 
 //this is so Framer Motion can be used to render the components
@@ -180,15 +180,15 @@ export type UseTreeStateOutput = {
   scrollToNode: (id: string) => void;
 };
 
-export function useTree<TData>({
+export function useTree<TData, TFilterValue>({
   tree,
   selectedId,
   collapsedIds,
   onSelectedIdChanged,
   parentRef,
   estimatedRowHeight,
   filter,
-}: TreeStateHookProps<TData>): UseTreeStateOutput {
+}: TreeStateHookProps<TData, TFilterValue>): UseTreeStateOutput {
   const previousNodeCount = useRef(tree.length);
   const previousSelectedId = useRef<string | undefined>(selectedId);
 
@@ -197,6 +197,7 @@ export function useTree<TData>({
     concreteStateFromInput({ tree, selectedId, collapsedIds, filter })
   );
 
+  //fire onSelectedIdChanged()
   useEffect(() => {
     const selectedId = selectedIdFromState(state.nodes);
     if (selectedId !== previousSelectedId.current) {
@@ -205,13 +206,30 @@ export function useTree<TData>({
     }
   }, [state.changes.selectedId]);
 
+  //update tree when the number of nodes changes
   useEffect(() => {
     if (tree.length !== previousNodeCount.current) {
       previousNodeCount.current = tree.length;
       dispatch({ type: "UPDATE_TREE", payload: { tree } });
     }
   }, [previousNodeCount.current, tree.length]);
 
+  //update the filter, if it's changed
+  const previousFilter = useRef(filter);
+  useEffect(() => {
+    //check if the value (not reference) of the filter is the same
+    const previousValue = previousFilter.current
+      ? JSON.stringify(previousFilter.current.value)
+      : undefined;
+    const newValue = filter ? JSON.stringify(filter.value) : undefined;
+
+    previousFilter.current = filter;
+
+    if (previousValue !== newValue) {
+      dispatch({ type: "UPDATE_FILTER", payload: { filter } });
+    }
+  }, [filter?.value]);
+
   const virtualizer = useVirtualizer({
     count: state.visibleNodeIds.length,
     getItemKey: (index) => state.visibleNodeIds[index],

apps/webapp/app/components/primitives/TreeView/reducer.ts

@@ -26,7 +26,7 @@ export type TreeState = {
   nodes: NodesState;
   filteredNodes: NodesState;
   changes: Changes;
-  filter: Filter<any> | undefined;
+  filter: Filter<any, any> | undefined;
   visibleNodeIds: string[];
 };
 
@@ -155,7 +155,7 @@ type SelectParentNodeAction = {
 type UpdateFilterAction = {
   type: "UPDATE_FILTER";
   payload: {
-    filter: Filter<any>;
+    filter: Filter<any, any> | undefined;
   };
 };
 
@@ -181,8 +181,6 @@ export type Action =
   | UpdateFilterAction;
 
 export function reducer(state: TreeState, action: Action): TreeState {
-  console.log(`reducer: ${action.type}`);
-
   switch (action.type) {
     case "SELECT_NODE": {
       //if the node was already selected, do nothing. The user needs to use deselectNode to deselect
@@ -532,6 +530,13 @@ export function reducer(state: TreeState, action: Action): TreeState {
       });
       return newState;
     }
+    case "UPDATE_FILTER": {
+      const newState = applyFilterToState({
+        ...state,
+        filter: action.payload.filter,
+      });
+      return newState;
+    }
   }
 
   throw new Error(`Unhandled action type: ${(action as any).type}`);

apps/webapp/app/components/primitives/TreeView/utils.ts

@@ -13,7 +13,7 @@ export function concreteStateFromInput({
   collapsedIds,
 }: {
   tree: FlatTree<any>;
-  filter: Filter<any> | undefined;
+  filter: Filter<any, any> | undefined;
   selectedId: string | undefined;
   collapsedIds: string[] | undefined;
 }): TreeState {
@@ -96,7 +96,7 @@ export function applyFilterToState<TData>({
   visibleNodeIds,
   changes,
 }: TreeState): TreeState {
-  if (!filter || !filter.text?.trim()) {
+  if (!filter || !filter.value) {
     return {
       tree,
       nodes,
@@ -110,7 +110,7 @@ export function applyFilterToState<TData>({
   //we need to do two passes, first collect all the nodes that are results
   const newFilteredOut = new Set<string>();
   for (const node of tree) {
-    if (!filter.fn(filter.text, node)) {
+    if (!filter.fn(filter.value, node)) {
       newFilteredOut.add(node.id);
     }
   }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx

@@ -266,13 +266,13 @@ function TasksTreeView({
     estimatedRowHeight: () => 32,
     parentRef,
     filter: {
-      text: filterText,
-      fn: (text, node) => {
-        const nodePassesErrorTest = (errorsOnly && node.data.isError) || !errorsOnly;
+      value: { text: filterText, errorsOnly },
+      fn: (value, node) => {
+        const nodePassesErrorTest = (value.errorsOnly && node.data.isError) || !value.errorsOnly;
         if (!nodePassesErrorTest) return false;
 
-        if (text === "") return true;
-        if (node.data.message.toLowerCase().includes(text.toLowerCase())) {
+        if (value.text === "") return true;
+        if (node.data.message.toLowerCase().includes(value.text.toLowerCase())) {
           return true;
         }
         return false;

apps/webapp/app/routes/storybook.tree-view/route.tsx

@@ -160,7 +160,7 @@ function TreeViewParent({
     estimatedRowHeight: () => 32,
     parentRef,
     filter: {
-      text: filterText,
+      value: filterText,
       fn: (text, node) => {
         if (text === "") return true;
         if (node.data.title.toLowerCase().includes(text.toLowerCase())) {