062e87f50f
Summary: The Dom events for the divs that are very close together were not firing correctly causing the old implementation to not track the hovered node correctly. This was really frustrating trying to select a node amongst many close neighbours. The new approach uses the mouse x,y position and performs a hit test. Currently we do a dfs looking for the first deepest child that interests the mouse x,y. In a future diff we will extract a list when there are multiple candidates. Hovered node was removed from react props since both the tree and visualisor depend on it meaning when hover state changes the whole app is rerendered. Instead we have moved hover state to an atom which is subscribed to by each visualsation node. Only if the old or new value matches the particular nodes id do we set state. The viz nodes were memo'd to prevent children renderning. The result is that for a hover change at most 2 nodes out of the 500 or so will rerender. I attempted to do the same with the tree but it wasnt working with the controlled tree environment + focus state. The perf seems fine as is so will leave it for now Reviewed By: lblasa Differential Revision: D41218324 fbshipit-source-id: 7f80bcee256abad2689a88d7e209f92417aab672
77 lines
2.2 KiB
TypeScript
77 lines
2.2 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);
|
|
|
|
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}
|
|
onSelectNode={setSelectedNode}
|
|
nodes={nodes}
|
|
rootId={rootId}
|
|
/>
|
|
</Layout.ScrollContainer>
|
|
<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>;
|
|
}
|