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,43 +266,45 @@ export default class extends PureComponent<Props, State> {
 
   render() {
     return (
-      <Fragment>
-        <Container
+      <Container>
+        <TreeContainer
           ref={(ref) => {
             this.treeContainer = ref;
           }}>
-          <style>
-            {'.rd3t-tree-container foreignObject {overflow: visible;}'}
-          </style>
           {this.state.tree && (
-            <Tree
-              transitionDuration={0}
-              separation={{siblings: 0.5, nonSiblings: 0.5}}
-              data={this.state.tree}
-              translate={this.state.translate}
-              zoom={this.state.zoom}
-              nodeLabelComponent={{
-                render: (
-                  <NodeLabel onLabelClicked={this.props.nodeClickHandler} />
-                ),
-              }}
-              allowForeignObjects
-              nodeSvgShape={{
-                shape: 'circle',
-                shapeProps: {
-                  stroke: 'rgba(0,0,0,0.2)',
-                  strokeWidth: 1,
-                },
-              }}
-              styles={{
-                links: {
-                  stroke: '#b3b3b3',
-                },
-              }}
-              nodeSize={{x: 300, y: 100}}
-            />
+            <>
+              <style>
+                {'.rd3t-tree-container foreignObject {overflow: visible;}'}
+              </style>
+              <Tree
+                transitionDuration={0}
+                separation={{siblings: 0.5, nonSiblings: 0.5}}
+                data={this.state.tree}
+                translate={this.state.translate}
+                zoom={this.state.zoom}
+                nodeLabelComponent={{
+                  render: (
+                    <NodeLabel onLabelClicked={this.props.nodeClickHandler} />
+                  ),
+                }}
+                allowForeignObjects
+                nodeSvgShape={{
+                  shape: 'circle',
+                  shapeProps: {
+                    stroke: 'rgba(0,0,0,0.2)',
+                    strokeWidth: 1,
+                  },
+                }}
+                styles={{
+                  links: {
+                    stroke: '#b3b3b3',
+                  },
+                }}
+                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}>
-              <TreeHierarchy
-                generation={focusedTreeGeneration}
-                focusedChangeSet={focusedChangeSet}
-                setSelectedTreeNode={setSelectedTreeNode}
-                selectedNodeIndexPath={focusInfo?.treeNodeIndexPath}
-              />
+              <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==