jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Framework event table

Browse Source 
Summary: Very basic framework events table, quite useful for debugging will add more to this soon

Reviewed By: lblasa

Differential Revision: D47520035

fbshipit-source-id: 10f4572dd4ed3529324f03a969773c7e91fde030
This commit is contained in:
Luke De Feo
2023-07-21 07:17:31 -07:00
committed by Facebook GitHub Bot
parent db7aa9eeaf
commit 4df0ad4d35
5 changed files with 166 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
desktop/plugins/public/ui-debugger/components/main.tsx
View File

@@ -28,6 +28,7 @@ import {QueryClientProvider} from 'react-query';
import {Tree2} from './Tree';
import {StreamInterceptorErrorView} from './StreamInterceptorErrorView';
import {queryClient} from '../reactQuery';
import {FrameworkEventsTable} from './FrameworkEventsTable';
export function Component() {
const instance = usePlugin(plugin);
@@ -41,6 +42,7 @@ export function Component() {
useHotkeys('ctrl+i', () => setShowPerfStats((show) => !show));
const viewMode = useValue(instance.uiState.viewMode);
const [bottomPanelComponent, setBottomPanelComponent] = useState<
ReactNode | undefined
>();
@@ -96,49 +98,53 @@ export function Component() {
<Spin data-testid="loading-indicator" />
</Centered>
);
} else {
return (
<QueryClientProvider client={queryClient}>
<Layout.Container grow padh="small" padv="medium">
<Layout.Top>
<>
<Controls />
<Layout.Horizontal grow pad="small">
<Tree2 nodes={nodes} rootId={rootId} />
<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>
</>
<BottomPanel dismiss={dismissBottomPanel}>
{bottomPanelComponent}
</BottomPanel>
</Layout.Top>
</Layout.Container>
</QueryClientProvider>
);
}
if (viewMode.mode === 'frameworkEventsTable') {
return <FrameworkEventsTable rootTreeId={viewMode.treeRootId} />;
}
return (
<QueryClientProvider client={queryClient}>
<Layout.Container grow padh="small" padv="medium">
<Layout.Top>
<>
<Controls />
<Layout.Horizontal grow pad="small">
<Tree2 nodes={nodes} rootId={rootId} />
<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>
</>
<BottomPanel dismiss={dismissBottomPanel}>
{bottomPanelComponent}
</BottomPanel>
</Layout.Top>
</Layout.Container>
</QueryClientProvider>
);
}
export function Centered(props: {children: React.ReactNode}) {