diff --git a/desktop/plugins/sections/package.json b/desktop/plugins/sections/package.json index 5231def66..c3f63f5de 100644 --- a/desktop/plugins/sections/package.json +++ b/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" } } diff --git a/desktop/plugins/sections/src/Tree.tsx b/desktop/plugins/sections/src/Tree.tsx index e5029b8c2..8989a836c 100644 --- a/desktop/plugins/sections/src/Tree.tsx +++ b/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 { render() { return ( - - + { this.treeContainer = ref; }}> - {this.state.tree && ( - - ), - }} - allowForeignObjects - nodeSvgShape={{ - shape: 'circle', - shapeProps: { - stroke: 'rgba(0,0,0,0.2)', - strokeWidth: 1, - }, - }} - styles={{ - links: { - stroke: '#b3b3b3', - }, - }} - nodeSize={{x: 300, y: 100}} - /> + <> + + + ), + }} + allowForeignObjects + nodeSvgShape={{ + shape: 'circle', + shapeProps: { + stroke: 'rgba(0,0,0,0.2)', + strokeWidth: 1, + }, + }} + styles={{ + links: { + stroke: '#b3b3b3', + }, + }} + nodeSize={{x: 300, y: 100}} + /> + )} - + { Section triggered state update Section is dirty - + ); } } diff --git a/desktop/plugins/sections/src/index.tsx b/desktop/plugins/sections/src/index.tsx index 65d39ebbf..5e3a08662 100644 --- a/desktop/plugins/sections/src/index.tsx +++ b/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() { }} /> - + - + + + {focusedTreeGeneration && (