Fix search now that tree is virtualised

Summary: Now the tree is virtualise the dom based scrolling effect doesnt work. Instead have to reimplement the search on the raw data and use the virtualiser to scroll, this isnt idea but it is still very fast and we can use this to later implement the browser style 4/8 results with ability to page through them.

Reviewed By: aigoncharov

Differential Revision: D46760491

fbshipit-source-id: 9c9b9961f084b39f86fd2aa94ab8e33ca476788b

desktop/plugins/public/ui-debugger/components/Tree.tsx

@@ -98,6 +98,14 @@ export function Tree2({nodes, rootId}: {nodes: Map<Id, UINode>; rootId: Id}) {
     overscan: 20,
   });
 
+  useEffect(() => {
+    const matchingIndexes = findSearchMatchingIndexes(treeNodes, searchTerm);
+
+    if (matchingIndexes.length > 0) {
+      rowVirtualizer.scrollToIndex(matchingIndexes[0], {align: 'start'});
+    }
+  }, [rowVirtualizer, searchTerm, treeNodes]);
+
   useKeyboardShortcuts(
     treeNodes,
     rowVirtualizer,
@@ -799,3 +807,23 @@ function extendKBControlLease(
   isUsingKBToScrollUntil.current =
     new Date().getTime() + KBScrollOverrideTimeMS;
 }
+
+//due to virtualisation the out of the box dom based scrolling doesnt work
+function findSearchMatchingIndexes(
+  treeNodes: TreeNode[],
+  searchTerm: string,
+): number[] {
+  if (!searchTerm) {
+    return [];
+  }
+  return treeNodes
+    .map((value, index) => [value, index] as [TreeNode, number])
+    .filter(
+      ([value, _]) =>
+        value.name.toLowerCase().includes(searchTerm) ||
+        Object.values(value.inlineAttributes).find((inlineAttr) =>
+          inlineAttr.toLocaleLowerCase().includes(searchTerm),
+        ),
+    )
+    .map(([_, index]) => index);
+}