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,49 +108,62 @@ export function Component() {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <Layout.Horizontal
-        grow
-        style={{
-          borderRadius: theme.borderRadius,
-          backgroundColor: theme.backgroundWash,
-        }}>
-        <Layout.Container
+      <Layout.Container grow>
+        <Layout.Horizontal
           grow
           style={{
             borderRadius: theme.borderRadius,
-            backgroundColor: theme.backgroundDefault,
+            backgroundColor: theme.backgroundWash,
           }}>
-          <TreeControls />
-          <Tree2 nodes={nodes} rootId={rootId} />
-        </Layout.Container>
+          <Layout.Container
+            grow
+            style={{
+              borderRadius: theme.borderRadius,
+              backgroundColor: theme.backgroundDefault,
+            }}>
+            <TreeControls />
+            <Tree2
+              additionalHeightOffset={
+                bottomPanelComponent != null ? bottomPanelHeight : 0
+              }
+              nodes={nodes}
+              rootId={rootId}
+            />
+          </Layout.Container>
 
-        <ResizablePanel
-          position="right"
-          minWidth={200}
-          width={visualiserWidth + theme.space.large}
-          maxWidth={800}
-          onResize={(width) => {
-            instance.uiActions.setVisualiserWidth(width);
-          }}
-          gutter>
-          <Visualization2D
-            width={visualiserWidth}
-            nodes={nodes}
-            onSelectNode={instance.uiActions.onSelectNode}
-          />
-        </ResizablePanel>
-        <DetailSidebar width={350}>
-          <Inspector
-            os={instance.os}
-            metadata={metadata}
-            nodes={nodes}
-            showExtra={openBottomPanelWithContent}
-          />
-        </DetailSidebar>
-        <BottomPanel dismiss={dismissBottomPanel}>
-          {bottomPanelComponent}
-        </BottomPanel>
-      </Layout.Horizontal>
+          <ResizablePanel
+            position="right"
+            minWidth={200}
+            width={visualiserWidth + theme.space.large}
+            maxWidth={800}
+            onResize={(width) => {
+              instance.uiActions.setVisualiserWidth(width);
+            }}
+            gutter>
+            <Visualization2D
+              width={visualiserWidth}
+              nodes={nodes}
+              onSelectNode={instance.uiActions.onSelectNode}
+            />
+          </ResizablePanel>
+          <DetailSidebar width={350}>
+            <Inspector
+              os={instance.os}
+              metadata={metadata}
+              nodes={nodes}
+              showExtra={openBottomPanelWithContent}
+            />
+          </DetailSidebar>
+        </Layout.Horizontal>
+        {bottomPanelComponent && (
+          <BottomPanel
+            height={bottomPanelHeight}
+            setHeight={setBottomPanelHeight}
+            dismiss={dismissBottomPanel}>
+            {bottomPanelComponent}
+          </BottomPanel>
+        )}
+      </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 - ${
-      boundingClientRect!!.top
-    }px - ${window.innerHeight - boundingClientRect!!.bottom}px )`;
-  }, []);
+    if (initialHeightOffset.current == null) {
+      //it is important to capture the initial height offset as we dont want to consider them again if elements are added dynamically later
+      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