3722ac1fea
Summary: Out of the box the library search has some issues. when search matches it steals focus from the input. Eventually we want to customise the rendering of the tree items anyway so this lays the foundation for taht Reviewed By: antonk52 Differential Revision: D41336524 fbshipit-source-id: 194f67023edd0675cd9bd8d6134260439c6b2785
85 lines
2.6 KiB
TypeScript
85 lines
2.6 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 {DetailSidebar, Layout, usePlugin, useValue} from 'flipper-plugin';
|
|
import {useHotkeys} from 'react-hotkeys-hook';
|
|
import {Id, Metadata, MetadataId, Snapshot, UINode} from '../types';
|
|
import {PerfStats} from './PerfStats';
|
|
import {Tree} from './Tree';
|
|
import {Visualization2D} from './Visualization2D';
|
|
import {useKeyboardModifiers} from '../hooks/useKeyboardModifiers';
|
|
import {Inspector} from './sidebar/Inspector';
|
|
import {Input} from 'antd';
|
|
|
|
export function Component() {
|
|
const instance = usePlugin(plugin);
|
|
const rootId = useValue(instance.rootId);
|
|
const nodes: Map<Id, UINode> = useValue(instance.nodes);
|
|
const metadata: Map<MetadataId, Metadata> = useValue(instance.metadata);
|
|
const snapshots: Map<Id, Snapshot> = useValue(instance.snapshots);
|
|
|
|
const [showPerfStats, setShowPerfStats] = useState(false);
|
|
const [selectedNode, setSelectedNode] = useState<Id | undefined>(undefined);
|
|
|
|
useHotkeys('ctrl+i', () => setShowPerfStats((show) => !show));
|
|
|
|
const searchTerm = useValue(instance.searchTerm);
|
|
const {ctrlPressed} = useKeyboardModifiers();
|
|
|
|
function renderSidebar(
|
|
node: UINode | undefined,
|
|
metadata: Map<MetadataId, Metadata>,
|
|
) {
|
|
if (!node) {
|
|
return;
|
|
}
|
|
return (
|
|
<DetailSidebar width={350}>
|
|
<Inspector metadata={metadata} node={node} />
|
|
</DetailSidebar>
|
|
);
|
|
}
|
|
|
|
if (showPerfStats) return <PerfStats events={instance.perfEvents} />;
|
|
|
|
if (rootId) {
|
|
return (
|
|
<Layout.Horizontal grow>
|
|
<Layout.Container grow pad="medium" gap="small">
|
|
<Input
|
|
value={searchTerm}
|
|
onChange={(e) => instance.searchTerm.set(e.target.value)}
|
|
/>
|
|
<Layout.ScrollContainer>
|
|
<Tree
|
|
selectedNode={selectedNode}
|
|
onSelectNode={setSelectedNode}
|
|
nodes={nodes}
|
|
rootId={rootId}
|
|
/>
|
|
</Layout.ScrollContainer>
|
|
</Layout.Container>
|
|
<Visualization2D
|
|
rootId={rootId}
|
|
nodes={nodes}
|
|
snapshots={snapshots}
|
|
selectedNode={selectedNode}
|
|
onSelectNode={setSelectedNode}
|
|
modifierPressed={ctrlPressed}
|
|
/>
|
|
{selectedNode && renderSidebar(nodes.get(selectedNode), metadata)}
|
|
</Layout.Horizontal>
|
|
);
|
|
}
|
|
|
|
return <div>Loading...</div>;
|
|
}
|