From f72514f238d3ab34477e9afbffb2e5a4d19111ae Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Mon, 19 Jun 2023 05:06:52 -0700
Subject: [PATCH] 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
---
 .../public/ui-debugger/components/Tree.tsx    | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/desktop/plugins/public/ui-debugger/components/Tree.tsx b/desktop/plugins/public/ui-debugger/components/Tree.tsx
index ee393e534..8cab6b398 100644
--- a/desktop/plugins/public/ui-debugger/components/Tree.tsx
+++ b/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);
+}