Make search expand relevant nodes

Summary:
Previously we were searching the tree nodes which did not include all nodes since if a not was not expanded it isnt in the tree node list, so now we expand first then find the first tree node that matches

changelog: UIDebugger search now expands matching elements

Reviewed By: lblasa

Differential Revision: D51349213

fbshipit-source-id: 4eef436781ed6ec23187d1aec7633ee4b959d3fa

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

@@ -7,7 +7,7 @@
  * @format
  */
 
-import {Id, ClientNode, MetadataId, Metadata} from '../../ClientTypes';
+import {Id, ClientNode, NodeMap, MetadataId, Metadata} from '../../ClientTypes';
 import {Color, OnSelectNode} from '../../DesktopTypes';
 import React, {
   CSSProperties,
@@ -60,7 +60,7 @@ export function Tree2({
   additionalHeightOffset,
 }: {
   additionalHeightOffset: number;
-  nodes: Map<Id, ClientNode>;
+  nodes: NodeMap;
   metadata: Map<MetadataId, Metadata>;
   rootId: Id;
 }) {
@@ -125,12 +125,21 @@ export function Tree2({
       return;
     }
     prevSearchTerm.current = searchTerm;
-    const matchingIndexes = findSearchMatchingIndexes(treeNodes, searchTerm);
+    const matchingNodesIds = findMatchingNodes(nodes, searchTerm);
 
-    if (matchingIndexes.length > 0) {
+    matchingNodesIds.forEach((id) => {
-      rowVirtualizer.scrollToIndex(matchingIndexes[0], {align: 'start'});
+      instance.uiActions.ensureAncestorsExpanded(id);
+    });
+
+    if (matchingNodesIds.length > 0) {
+      const firstTreeNode = treeNodes.find(searchPredicate(searchTerm));
+
+      const idx = firstTreeNode?.idx;
+      if (idx != null) {
+        rowVirtualizer.scrollToIndex(idx, {align: 'start'});
+      }
     }
-  }, [rowVirtualizer, searchTerm, treeNodes]);
+  }, [instance.uiActions, nodes, rowVirtualizer, searchTerm, treeNodes]);
 
   useKeyboardControls(
     treeNodes,
@@ -638,22 +647,21 @@ const NodeIconImage = styled.img({...nodeiconStyle});
 
 const renderDepthOffset = 12;
 
-//due to virtualisation the out of the box dom based scrolling doesnt work
+function findMatchingNodes(nodes: NodeMap, searchTerm: string): Id[] {
-function findSearchMatchingIndexes(
-  treeNodes: TreeNode[],
-  searchTerm: string,
-): number[] {
   if (!searchTerm) {
     return [];
   }
-  return treeNodes
+  return [...nodes.values()]
-    .map((value, index) => [value, index] as [TreeNode, number])
+    .filter(searchPredicate(searchTerm))
-    .filter(
+    .map((node) => node.id);
-      ([value, _]) =>
+}
-        value.name.toLowerCase().includes(searchTerm) ||
+
-        Object.values(value.inlineAttributes).find((inlineAttr) =>
+function searchPredicate(
-          inlineAttr.toLocaleLowerCase().includes(searchTerm),
+  searchTerm: string,
-        ),
+): (node: ClientNode) => string | true | undefined {
-    )
+  return (node: ClientNode): string | true | undefined =>
-    .map(([_, index]) => index);
+    node.name.toLowerCase().includes(searchTerm) ||
+    Object.values(node.inlineAttributes).find((inlineAttr) =>
+      inlineAttr.toLocaleLowerCase().includes(searchTerm),
+    );
 }