c7f24eb469
Summary: Split our the mega component into separate parts in preparation for the visualizer Reviewed By: lblasa Differential Revision: D39509406 fbshipit-source-id: 0f867c1f8a91b7592673ae47ba2b5db4f3500732
63 lines
1.4 KiB
TypeScript
63 lines
1.4 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, Typography} from 'antd';
|
|
import {DownOutlined} from '@ant-design/icons';
|
|
import React from 'react';
|
|
|
|
export function Tree(props: {
|
|
rootId: Id;
|
|
nodes: Map<Id, UINode>;
|
|
setSelectedNode: (id: Id) => void;
|
|
}) {
|
|
const [antTree, inactive] = nodesToAntTree(props.rootId, props.nodes);
|
|
|
|
return (
|
|
<AntTree
|
|
showIcon
|
|
showLine
|
|
onSelect={(selected) => {
|
|
props.setSelectedNode(selected[0] as Id);
|
|
}}
|
|
defaultExpandAll
|
|
expandedKeys={[...props.nodes.keys()].filter(
|
|
(key) => !inactive.includes(key),
|
|
)}
|
|
switcherIcon={<DownOutlined />}
|
|
treeData={[antTree]}
|
|
/>
|
|
);
|
|
}
|
|
|
|
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];
|
|
}
|