945e26d0f1
Summary: ^ TODO: the snapshot corresponds to the referring subtree update. However, the snapshot is getting applied as if it was the current top view of the running app. This is true in most cases but it doesn't for some. To solve this, we need to use the rootId for the subtree and apply the snapshot only if appropriate. Having said that, is good enough for the current submission as we keep iterating on it. Reviewed By: LukeDefeo Differential Revision: D39813307 fbshipit-source-id: 33b6aff6e9dd085934150ebd2f247062447a59ff
91 lines
2.5 KiB
TypeScript
91 lines
2.5 KiB
TypeScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
*/
|
|
|
|
import React, {useState} from 'react';
|
|
import {plugin} from '../index';
|
|
import {
|
|
DataInspector,
|
|
DetailSidebar,
|
|
Layout,
|
|
usePlugin,
|
|
useValue,
|
|
} from 'flipper-plugin';
|
|
import {Typography} from 'antd';
|
|
|
|
import {useHotkeys} from 'react-hotkeys-hook';
|
|
import {Id, UINode} from '../types';
|
|
import {PerfStats} from './PerfStats';
|
|
import {Tree} from './Tree';
|
|
import {Visualization2D} from './Visualization2D';
|
|
import {useKeyboardModifiers} from '../hooks/useKeyboardModifiers';
|
|
|
|
export function Component() {
|
|
const instance = usePlugin(plugin);
|
|
const rootId = useValue(instance.rootId);
|
|
const nodes: Map<Id, UINode> = useValue(instance.nodes);
|
|
const snapshot: String | undefined = useValue(instance.snapshot);
|
|
|
|
const [showPerfStats, setShowPerfStats] = useState(false);
|
|
const [selectedNode, setSelectedNode] = useState<Id | undefined>(undefined);
|
|
const [hoveredNode, setHoveredNode] = useState<Id | undefined>(undefined);
|
|
|
|
useHotkeys('ctrl+i', () => setShowPerfStats((show) => !show));
|
|
|
|
const {ctrlPressed} = useKeyboardModifiers();
|
|
|
|
function renderAttributesInspector(node: UINode | undefined) {
|
|
if (!node) {
|
|
return;
|
|
}
|
|
return (
|
|
<>
|
|
<DetailSidebar>
|
|
<Layout.Container gap pad>
|
|
<Typography.Title level={2}>Attributes Inspector</Typography.Title>
|
|
<DataInspector data={node} expandRoot />
|
|
</Layout.Container>
|
|
</DetailSidebar>
|
|
</>
|
|
);
|
|
}
|
|
|
|
if (showPerfStats) return <PerfStats events={instance.perfEvents} />;
|
|
|
|
if (rootId) {
|
|
return (
|
|
<>
|
|
<Layout.ScrollContainer>
|
|
<Layout.Horizontal>
|
|
<Tree
|
|
selectedNode={selectedNode}
|
|
onSelectNode={setSelectedNode}
|
|
onHoveredNode={setHoveredNode}
|
|
nodes={nodes}
|
|
rootId={rootId}
|
|
/>
|
|
<Visualization2D
|
|
root={rootId}
|
|
nodes={nodes}
|
|
snapshot={snapshot}
|
|
hoveredNode={hoveredNode}
|
|
onHoverNode={setHoveredNode}
|
|
selectedNode={selectedNode}
|
|
onSelectNode={setSelectedNode}
|
|
modifierPressed={ctrlPressed}
|
|
/>
|
|
</Layout.Horizontal>
|
|
</Layout.ScrollContainer>
|
|
{selectedNode && renderAttributesInspector(nodes.get(selectedNode))}
|
|
</>
|
|
);
|
|
}
|
|
|
|
return <div>Nothing yet</div>;
|
|
}
|