Fix Tree View Misbehavior

Summary: The misbehavior came from undefined height and width inside `Sidebar` component. This is fixed by put it in the container that expands through whole `Sidebar`.

Reviewed By: Andrey-Mishanin

Differential Revision: D23954008

fbshipit-source-id: 9c096a8f3141a012a2a1ab32c2d5e689e7bde396

desktop/plugins/sections/package.json

@@ -17,13 +17,10 @@
   ],
   "gatekeeper": "flipper_sections_plugin",
   "dependencies": {
-    "react-d3-tree": "^1.12.1"
+    "react-d3-tree": "^1.16.1"
   },
   "peerDependencies": {
     "flipper": "0.58.0",
     "flipper-plugin": "0.58.0"
-  },
-  "resolutions": {
-    "react-d3-tree/d3": "file:./d3"
   }
 }

desktop/plugins/sections/src/Tree.tsx

@@ -11,7 +11,14 @@ import type {SectionComponentHierarchy} from './Models';
 
 import {Glyph, PureComponent, styled, Toolbar, Spacer, colors} from 'flipper';
 import {Tree} from 'react-d3-tree';
-import React, {Fragment} from 'react';
+import React from 'react';
+
+const Container = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  width: '100%',
+});
 
 const Legend = styled.div((props) => ({
   color: colors.dark50,
@@ -43,9 +50,9 @@ const Label = styled.div({
   display: 'inline-block',
 });
 
-const Container = styled.div({
+const TreeContainer = styled.div({
+  flexGrow: 1,
   width: '100%',
-  height: '100%',
   overflow: 'hidden',
   background:
     'linear-gradient(-90deg,rgba(0,0,0,.02) 1px,transparent 0),linear-gradient(rgba(0,0,0,.02) 1px,transparent 0),linear-gradient(-90deg,rgba(0,0,0,.03) 1px,transparent 0),linear-gradient(rgba(0,0,0,.03) 1px,transparent 0)',
@@ -259,15 +266,16 @@ export default class extends PureComponent<Props, State> {
 
   render() {
     return (
-      <Fragment>
+      <Container>
-        <Container
+        <TreeContainer
           ref={(ref) => {
             this.treeContainer = ref;
           }}>
+          {this.state.tree && (
+            <>
               <style>
                 {'.rd3t-tree-container foreignObject {overflow: visible;}'}
               </style>
-          {this.state.tree && (
               <Tree
                 transitionDuration={0}
                 separation={{siblings: 0.5, nonSiblings: 0.5}}
@@ -294,8 +302,9 @@ export default class extends PureComponent<Props, State> {
                 }}
                 nodeSize={{x: 300, y: 100}}
               />
+            </>
           )}
-        </Container>
+        </TreeContainer>
         <Toolbar position="bottom" compact>
           <input
             type="range"
@@ -313,7 +322,7 @@ export default class extends PureComponent<Props, State> {
           <Legend color={colors.lemon}>Section triggered state update</Legend>
           <Legend color={colors.grape}>Section is dirty</Legend>
         </Toolbar>
-      </Fragment>
+      </Container>
     );
   }
 }

desktop/plugins/sections/src/index.tsx

@@ -62,6 +62,12 @@ const InfoBox = styled.div({
   textAlign: 'center',
 });
 
+const TreeContainer = styled.div({
+  width: '100%',
+  height: '100%',
+  overflow: 'hidden',
+});
+
 type Events = {
   addEvent: AddEventPayload;
   updateTreeGenerationHierarchyGeneration: UpdateTreeGenerationHierarchyGenerationPayload;
@@ -264,14 +270,16 @@ export function Component() {
               }}
             />
           </Sidebar>
-          <Layout.Top>
+          <Layout.Top scrollable={false}>
             <Sidebar position="top" minHeight={400} height={400}>
+              <TreeContainer>
                 <TreeHierarchy
                   generation={focusedTreeGeneration}
                   focusedChangeSet={focusedChangeSet}
                   setSelectedTreeNode={setSelectedTreeNode}
                   selectedNodeIndexPath={focusInfo?.treeNodeIndexPath}
                 />
+              </TreeContainer>
             </Sidebar>
             {focusedTreeGeneration && (
               <StackTrace

desktop/yarn.lock

@@ -10617,7 +10617,7 @@ react-color@^2.18.1:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
-react-d3-tree@^1.12.1:
+react-d3-tree@^1.16.1:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/react-d3-tree/-/react-d3-tree-1.16.1.tgz#fca2f1096fd3040841406f0d4efbf4e752479ee9"
   integrity sha512-LybzIZM4f4A+/ao6U5OEAZVQbQ08w0wmMYA7TZvPRYQ0QZnSImK9PFTiGR0PW8hVWQqOVJtSZyXlYyJ+M+Uh+A==