01dc22b1ab
Summary: Before this change, attributes and attribute metadata were intermingled and sent as one unit via subtree update event. This represented a few issues: - Repetitiveness. For each declared and dynamic attribute, metadata was included on each value unit. - Metadata can vary in size and thus can have a negative impact on payload size. - The attribute name which is part of metadata is a string which always overhead on processing. - Metadata instantiation is not cheap thus this also incurs in processing overhead i.e. even instantiating a single string can have an impact. The proposal is to separate metadata of attributes from the actual node reported attributes. This solves the problems mentioned above. Reviewed By: LukeDefeo Differential Revision: D40674156 fbshipit-source-id: 0788551849fbce53065f819ba503e7e4afc03cc0
82 lines
2.5 KiB
TypeScript
82 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 {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';
|
|
|
|
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);
|
|
const [hoveredNode, setHoveredNode] = useState<Id | undefined>(undefined);
|
|
|
|
useHotkeys('ctrl+i', () => setShowPerfStats((show) => !show));
|
|
|
|
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.ScrollContainer>
|
|
<Tree
|
|
selectedNode={selectedNode}
|
|
hoveredNode={hoveredNode}
|
|
onSelectNode={setSelectedNode}
|
|
onHoveredNode={setHoveredNode}
|
|
nodes={nodes}
|
|
rootId={rootId}
|
|
/>
|
|
</Layout.ScrollContainer>
|
|
<Visualization2D
|
|
rootId={rootId}
|
|
nodes={nodes}
|
|
snapshots={snapshots}
|
|
hoveredNode={hoveredNode}
|
|
onHoverNode={setHoveredNode}
|
|
selectedNode={selectedNode}
|
|
onSelectNode={setSelectedNode}
|
|
modifierPressed={ctrlPressed}
|
|
/>
|
|
{selectedNode && renderSidebar(nodes.get(selectedNode), metadata)}
|
|
</Layout.Horizontal>
|
|
);
|
|
}
|
|
|
|
return <div>Loading...</div>;
|
|
}
|