Fix bottom panel and make it resizable

Summary: The bottom panel got broken during the virtualisation+ panel refactor, we need to tell the tree how much height is taken by the panel so it can size itself accordingly.

Reviewed By: lblasa

Differential Revision: D48313766

fbshipit-source-id: 849886101eb0869cc068fd0ad6dc1d053233043e

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

@@ -53,6 +53,8 @@ export function Component() {
     setBottomPanelComponent(undefined);
   };
 
+  const [bottomPanelHeight, setBottomPanelHeight] = useState(400);
+
   if (showPerfStats)
     return (
       <PerfStats
@@ -106,6 +108,7 @@ export function Component() {
 
   return (
     <QueryClientProvider client={queryClient}>
+      <Layout.Container grow>
         <Layout.Horizontal
           grow
           style={{
@@ -119,7 +122,13 @@ export function Component() {
               backgroundColor: theme.backgroundDefault,
             }}>
             <TreeControls />
-          <Tree2 nodes={nodes} rootId={rootId} />
+            <Tree2
+              additionalHeightOffset={
+                bottomPanelComponent != null ? bottomPanelHeight : 0
+              }
+              nodes={nodes}
+              rootId={rootId}
+            />
           </Layout.Container>
 
           <ResizablePanel
@@ -145,10 +154,16 @@ export function Component() {
               showExtra={openBottomPanelWithContent}
             />
           </DetailSidebar>
-        <BottomPanel dismiss={dismissBottomPanel}>
+        </Layout.Horizontal>
+        {bottomPanelComponent && (
+          <BottomPanel
+            height={bottomPanelHeight}
+            setHeight={setBottomPanelHeight}
+            dismiss={dismissBottomPanel}>
             {bottomPanelComponent}
           </BottomPanel>
-      </Layout.Horizontal>
+        )}
+      </Layout.Container>
     </QueryClientProvider>
   );
 }
@@ -166,8 +181,15 @@ export function Centered(props: {children: React.ReactNode}) {
 type BottomPanelProps = {
   dismiss: () => void;
   children: React.ReactNode;
+  height: number;
+  setHeight: (height: number) => void;
 };
-export function BottomPanel({dismiss, children}: BottomPanelProps) {
+export function BottomPanel({
+  dismiss,
+  children,
+  height,
+  setHeight,
+}: BottomPanelProps) {
   const bottomPanelRef = useRef<any>(null);
 
   useEffect(() => {
@@ -191,9 +213,15 @@ export function BottomPanel({dismiss, children}: BottomPanelProps) {
   if (!children) {
     return <></>;
   }
+
   return (
     <div ref={bottomPanelRef}>
-      <ResizablePanel position="bottom" minHeight={200} height={400} gutter>
+      <ResizablePanel
+        position="bottom"
+        minHeight={200}
+        height={height}
+        onResize={(_, height) => setHeight(height)}
+        gutter>
         <Layout.ScrollContainer>{children}</Layout.ScrollContainer>
         <div style={{margin: 10}}>
           <Button type="ghost" style={{float: 'right'}} onClick={dismiss}>

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

@@ -55,7 +55,9 @@ export type TreeNode = ClientNode & {
 export function Tree2({
   nodes,
   rootId,
+  additionalHeightOffset,
 }: {
+  additionalHeightOffset: number;
   nodes: Map<Id, ClientNode>;
   rootId: Id;
 }) {
@@ -139,16 +141,22 @@ export function Tree2({
     isUsingKBToScrollUtill,
   );
 
+  const initialHeightOffset = useRef<number | null>(null);
   useLayoutEffect(() => {
     //the grand parent gets its size correclty via flex box, we use its initial
     //position to size the scroll parent ref for react virtual, It uses vh which accounts for window size changes
     //However  if we dynamically add content above or below we may need to revisit this approach
     const boundingClientRect = grandParentRef?.current?.getBoundingClientRect();
 
-    parentRef.current!!.style.height = `calc(100vh - ${
+    if (initialHeightOffset.current == null) {
-      boundingClientRect!!.top
+      //it is important to capture the initial height offset as we dont want to consider them again if elements are added dynamically later
-    }px - ${window.innerHeight - boundingClientRect!!.bottom}px )`;
+      initialHeightOffset.current =
-  }, []);
+        boundingClientRect!!.top +
+        (window.innerHeight - boundingClientRect!!.bottom) -
+        additionalHeightOffset;
+    }
+    parentRef.current!!.style.height = `calc(100vh - ${initialHeightOffset.current}px - ${additionalHeightOffset}px )`;
+  }, [additionalHeightOffset]);
 
   useLayoutEffect(() => {
     //scroll width is the width of the element including overflow, we grab the scroll width