From 8cae1f0de6b7c64e7899bb029459363d067eb732 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Fri, 17 Feb 2023 02:45:05 -0800
Subject: [PATCH] On select expand ancestory

Summary: Previously when selecting from the visualiser nothing would happen in the tree if one of the parents was collapsed

Reviewed By: lblasa

Differential Revision: D43318177

fbshipit-source-id: 7bf9296dec2ca82e3f983b4cf2676ea8741a9d0e
---
 .../plugins/public/ui-debugger/components/Tree.tsx   |  1 +
 desktop/plugins/public/ui-debugger/index.tsx         | 12 ++++++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/Tree.tsx b/desktop/plugins/public/ui-debugger/components/Tree.tsx
index 9db93e2e8..18958877d 100644
--- a/desktop/plugins/public/ui-debugger/components/Tree.tsx
+++ b/desktop/plugins/public/ui-debugger/components/Tree.tsx
@@ -157,6 +157,7 @@ const MemoTreeItemContainer = React.memo(
     const id = nextProps.treeNode.id;
     return (
       prevProps.treeNode.id === nextProps.treeNode.id &&
+      prevProps.treeNode.isExpanded === nextProps.treeNode.isExpanded &&
       prevProps.isContextMenuOpen === nextProps.isContextMenuOpen &&
       prevProps.frameworkEvents === nextProps.frameworkEvents &&
       prevProps.highlightedNodes === nextProps.highlightedNodes &&
diff --git a/desktop/plugins/public/ui-debugger/index.tsx b/desktop/plugins/public/ui-debugger/index.tsx
index a319f8aa5..b75ac7f57 100644
--- a/desktop/plugins/public/ui-debugger/index.tsx
+++ b/desktop/plugins/public/ui-debugger/index.tsx
@@ -226,7 +226,7 @@ export function plugin(client: PluginClient<Events>) {
   return {
     rootId,
     uiState,
-    uiActions: uiActions(uiState),
+    uiActions: uiActions(uiState, nodes),
     nodes,
     frameworkEvents,
     snapshot,
@@ -262,7 +262,7 @@ type UIActions = {
   onCollapseNode: (node: Id) => void;
 };
 
-function uiActions(uiState: UIState): UIActions {
+function uiActions(uiState: UIState, nodes: Atom<Map<Id, UINode>>): UIActions {
   const onExpandNode = (node: Id) => {
     uiState.expandedNodes.update((draft) => {
       draft.add(node);
@@ -270,6 +270,14 @@ function uiActions(uiState: UIState): UIActions {
   };
   const onSelectNode = (node?: Id) => {
     uiState.selectedNode.set(node);
+    let cur = node;
+    //expand entire ancestory in case it has been manually collapsed
+    uiState.expandedNodes.update((expandedNodesDraft) => {
+      while (cur != null) {
+        expandedNodesDraft.add(cur);
+        cur = nodes.get().get(cur)?.parent;
+      }
+    });
   };
 
   const onCollapseNode = (node: Id) => {