Fix NPE when activeChildIdx points to the non-existent entry

Summary:
Based on the stack trace in T145744183, `activeChildIdx` could point to a non-existent array element.
Previously, we used to:
1) Find the index of the activeChild in the non-filtered array of children
2) Filter the array

As a result, it could lead to some of the elements in the child array to be filtered and shifting activeChildIdx, making it invalid.

Now, we search activeChild in the already filtered array.

Reviewed By: LukeDefeo

Differential Revision: D44575170

fbshipit-source-id: 2cb9a0b24badc8509a859011694f77b048d93316

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

@@ -395,18 +395,32 @@ function toNestedNode(
   nodes: Map<Id, UINode>,
 ): NestedNode | undefined {
   function uiNodeToNestedNode(node: UINode): NestedNode {
+    const nonNullChildren = node.children.filter(
+      (childId) => nodes.get(childId) != null,
+    );
+
+    if (nonNullChildren.length !== node.children.length) {
+      console.error(
+        'Visualization2D.toNestedNode -> child is nullish!',
+        node.children,
+        nonNullChildren.map((childId) => {
+          const child = nodes.get(childId);
+          return child && uiNodeToNestedNode(child);
+        }),
+      );
+    }
+
     const activeChildIdx = node.activeChild
-      ? node.children.indexOf(node.activeChild)
+      ? nonNullChildren.indexOf(node.activeChild)
       : undefined;
 
     return {
       id: node.id,
       name: node.name,
       attributes: node.attributes,
-      children: node.children
-        .map((childId) => nodes.get(childId))
-        .filter((child) => child != null)
-        .map((child) => uiNodeToNestedNode(child!!)),
+      children: nonNullChildren.map((childId) =>
+        uiNodeToNestedNode(nodes.get(childId)!),
+      ),
       bounds: node.bounds,
       tags: node.tags,
       activeChildIdx: activeChildIdx,