67ff09563c
Summary: Improved the 2 way relationship between tree and vizualiser. There are 3 states. 1. Select, this is when you click on either tree node or view. View is highlighted darker colour, sidebar shows up for that node and select is persisted when you mouse away 2. Hover, this is when you hover over a tree node or in the vizualizer, the node is highlighted a lighter colur 3. Hover while holding control - same as hover but we dont draw any children, this lets you see how parent nodes appear without their children Reviewed By: lblasa Differential Revision: D39695661 fbshipit-source-id: 623e479fb03567e9f15a4a4f9201b2c7884cabe4
82 lines
2.0 KiB
TypeScript
82 lines
2.0 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 {Id, UINode} from '../types';
|
|
import {DataNode} from 'antd/es/tree';
|
|
import {Tree as AntTree} from 'antd';
|
|
import {DownOutlined} from '@ant-design/icons';
|
|
import React from 'react';
|
|
|
|
export function Tree(props: {
|
|
rootId: Id;
|
|
nodes: Map<Id, UINode>;
|
|
selectedNode?: Id;
|
|
onSelectNode: (id: Id) => void;
|
|
onHoveredNode: (id?: Id) => void;
|
|
}) {
|
|
const [antTree, inactive] = nodesToAntTree(props.rootId, props.nodes);
|
|
|
|
return (
|
|
<div
|
|
onMouseLeave={() => {
|
|
//This div exists so when mouse exits the entire tree then unhover
|
|
props.onHoveredNode(undefined);
|
|
}}>
|
|
<AntTree
|
|
showIcon
|
|
showLine
|
|
titleRender={(node) => {
|
|
return (
|
|
<div
|
|
onMouseEnter={() => {
|
|
props.onHoveredNode(node.key as Id);
|
|
}}>
|
|
{node.title}
|
|
</div>
|
|
);
|
|
}}
|
|
selectedKeys={[props.selectedNode ?? '']}
|
|
onSelect={(selected) => {
|
|
props.onSelectNode(selected[0] as Id);
|
|
}}
|
|
defaultExpandAll
|
|
expandedKeys={[...props.nodes.keys()].filter(
|
|
(key) => !inactive.includes(key),
|
|
)}
|
|
switcherIcon={<DownOutlined />}
|
|
treeData={[antTree]}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function nodesToAntTree(root: Id, nodes: Map<Id, UINode>): [DataNode, Id[]] {
|
|
const inactive: Id[] = [];
|
|
|
|
function uiNodeToAntNode(id: Id): DataNode {
|
|
const node = nodes.get(id);
|
|
|
|
if (node?.activeChild) {
|
|
for (const child of node.children) {
|
|
if (child !== node?.activeChild) {
|
|
inactive.push(child);
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
key: id,
|
|
title: node?.name,
|
|
children: node?.children.map((id) => uiNodeToAntNode(id)),
|
|
};
|
|
}
|
|
|
|
return [uiNodeToAntNode(root), inactive];
|
|
}
|