d2aura 26.0.13 → 26.0.15

package/coreui/components/edaManagerComponent/components/edaTreeView.js

@@ -1,9 +1,8 @@
-import React from "react";
-import { Tree, Typography } from "antd";
-import { DownOutlined, FolderOpenOutlined, FunctionOutlined, LoadingOutlined, QuestionOutlined } from "@ant-design/icons";
-import WithCss from "d2coreui/components/style/withCss";
-import { createStyles } from "antd-style";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { EdaVectorType } from "../constants/edaTypes";
+import { createStyles } from "antd-style";
+import { Dropdown, Tree, Typography } from "antd";
+import { CheckCircleOutlined, CloseCircleOutlined, DownOutlined, FolderOpenOutlined, FunctionOutlined, LoadingOutlined, QuestionOutlined, StopOutlined } from "@ant-design/icons";
 import { NumberFifteenFilled } from "../icons/numberFifteenFilled";
 import { LetterHFilled } from "../icons/letterHFilled";
 import { LetterDFilled } from "../icons/letterDFilled";
@@ -12,13 +11,14 @@ import { LetterIFilled } from "../icons/letterIFilled";
 import { PairOutlined } from "../icons/pairOutlined";
 import { PeriodicOutlined } from "../icons/periodicOutlined";
 import i18n from "d2core/i18n/i18n";
+import { useEdaActions } from "../context/useEdaActions";
 const useStyles = createStyles(({ css }) => {
     return {
         baseLayout: css `
             position: relative;
             height: 100%;
             width: 100%;
-            
+
             .ant-tree {
                 height: 100%;
                 background-color: transparent;
@@ -32,7 +32,7 @@ const useStyles = createStyles(({ css }) => {
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 overflow: hidden;
-                
+
                 .ant-tree-title {
                     white-space: nowrap;
                 }
@@ -41,10 +41,7 @@ const useStyles = createStyles(({ css }) => {
         absoluteLayout: css `
             overflow: auto;
             position: absolute;
-            left: 0;
-            right: 0;
-            top: 0;
-            bottom: 0;
+            inset: 0;
         `
     };
 });
@@ -53,98 +50,113 @@ export var TreeViewType;
     TreeViewType["GROUP"] = "group";
     TreeViewType["SCENARIO"] = "scenario";
 })(TreeViewType || (TreeViewType = {}));
-export class EdaTreeView extends React.Component {
-    constructor(props) {
-        super(props);
-        this.childParentMap = new Map();
-        this.nodeMap = new Map();
-        this.divRef = React.createRef();
-        this.resizeObserver = null;
-        this.state = {
-            treeData: [],
-            expandedKeys: [],
-            selectedKeys: [],
-            height: 0,
-        };
-        this.onExpand = this.onExpand.bind(this);
-        this.onLoadData = this.onLoadData.bind(this);
-        this.onDoubleClick = this.onDoubleClick.bind(this);
-        this.titleRenderer = this.titleRenderer.bind(this);
-    }
-    async componentDidMount() {
-        await this.loadData(this.props.type);
-        if (this.divRef.current) {
-            this.resizeObserver = new ResizeObserver((entries) => {
-                const entry = entries[0];
-                if (entry) {
-                    const { height } = entry.contentRect;
-                    this.setState({ height });
-                }
-            });
-            this.resizeObserver.observe(this.divRef.current);
-        }
-    }
-    async componentDidUpdate(prevProps) {
-        if (prevProps.type !== this.props.type) {
-            await this.loadData(this.props.type);
-        }
-    }
-    componentWillUnmount() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
-    }
-    render() {
-        const { treeData, expandedKeys, selectedKeys } = this.state;
-        return (React.createElement(WithCss, { useStyles: useStyles }, (css) => React.createElement("div", { ref: this.divRef, className: css.styles.baseLayout },
-            React.createElement("div", { className: css.styles.absoluteLayout },
-                React.createElement(Tree, { blockNode: true, showLine: true, showIcon: true, switcherIcon: React.createElement(DownOutlined, null), height: this.state.height, loadData: this.onLoadData, onExpand: this.onExpand, onDoubleClick: this.onDoubleClick, expandedKeys: expandedKeys, selectedKeys: selectedKeys, titleRender: this.titleRenderer, treeData: treeData })))));
-    }
-    titleRenderer(node) {
-        if (node.key === this.state.loading) {
-            return React.createElement(Typography.Link, null,
-                React.createElement(LoadingOutlined, null),
-                " ",
-                i18n("Loading"),
-                "...");
+var GroupType;
+(function (GroupType) {
+    GroupType[GroupType["GROUPS"] = -1] = "GROUPS";
+    GroupType[GroupType["OMITTED_GROUPS"] = -2] = "OMITTED_GROUPS";
+    GroupType[GroupType["OMITTED_VECTORS"] = -3] = "OMITTED_VECTORS";
+})(GroupType || (GroupType = {}));
+var ScenarioType;
+(function (ScenarioType) {
+    ScenarioType[ScenarioType["SCENARIOS"] = -1] = "SCENARIOS";
+    ScenarioType[ScenarioType["OMITTED_SCENARIOS"] = -2] = "OMITTED_SCENARIOS";
+})(ScenarioType || (ScenarioType = {}));
+export const EdaTreeView = ({ api, type, disableVectorSelection, disableBranchSelection, showOmitted, hideVectors, hideContextMenu, onItemDoubleClick }) => {
+    const { styles } = useStyles();
+    const { triggerExportToXML, triggerIncludeToScenario, triggerIncludeToGroup, renderActionDialogs } = useEdaActions(api);
+    const childParentMap = useRef(new Map());
+    const nodeMap = useRef(new Map());
+    const [treeData, setTreeData] = useState([]);
+    const [expandedKeys, setExpandedKeys] = useState([]);
+    const [selectedKeys, setSelectedKeys] = useState([]);
+    const [height, setHeight] = useState(0);
+    const [loadingKey, setLoadingKey] = useState();
+    const [rightClickedNode, setRightClickedNode] = useState();
+    const divRef = useCallback((node) => {
+        if (!node) {
+            return;
         }
-        return node.title;
-    }
-    renderTitle(key, data, amount, total) {
-        return (React.createElement(Typography.Link, { onClick: () => this.onLoadData(data, key) }, i18n("Show %{n} more (of %{o})", { n: String(amount), o: String(total) })));
-    }
-    onExpand(keys) {
-        this.setState({ expandedKeys: (keys) });
-    }
-    async loadData(type) {
-        this.setState({ loading: "" });
-        try {
-            let treeData;
-            switch (type) {
-                case TreeViewType.GROUP:
-                    const rootGroups = await this.props.api.getGroupChildren(undefined);
-                    treeData = this.convertGroups(rootGroups.items, undefined);
-                    break;
-                case TreeViewType.SCENARIO:
-                    const rootScenarios = await this.props.api.getScenarioChildren(undefined);
-                    treeData = this.convertScenarios(rootScenarios.items, undefined);
-                    break;
+        new ResizeObserver((entries) => {
+            if (entries[0]) {
+                setHeight(entries[0].contentRect.height);
             }
-            this.setState({ treeData: treeData });
+        }).observe(node);
+    }, []);
+    const convertGroups = useCallback((groups, parentId) => {
+        return groups.map((group) => {
+            const node = {
+                key: group.ID,
+                title: group.DisplayName,
+                isLeaf: false,
+                icon: React.createElement(FolderOpenOutlined, null),
+                group: group,
+            };
+            childParentMap.current.set(group.ID, parentId);
+            nodeMap.current.set(group.ID, node);
+            return node;
+        });
+    }, []);
+    const convertScenarios = useCallback((scenarios, parentId) => {
+        return scenarios.map((scenario) => {
+            const node = {
+                key: scenario.ID,
+                title: scenario.DisplayName,
+                isLeaf: false,
+                icon: React.createElement(FolderOpenOutlined, null),
+                scenario: scenario,
+            };
+            childParentMap.current.set(scenario.ID, parentId);
+            nodeMap.current.set(scenario.ID, node);
+            return node;
+        });
+    }, []);
+    const convertVectors = useCallback((vectors, parentId) => {
+        return vectors.map((vector) => {
+            const id = `${parentId}_${vector.ID}`;
+            const node = {
+                key: id,
+                title: vector.DisplayName,
+                isLeaf: true,
+                icon: getVectorIcon(vector.Type),
+                vector: vector,
+            };
+            childParentMap.current.set(id, parentId);
+            nodeMap.current.set(id, node);
+            return node;
+        });
+    }, []);
+    const loadVectors = useCallback(async (data, id, nodes, vectors) => {
+        const amount = vectors.leftCount > api.pageSize ? api.pageSize : vectors.leftCount;
+        nodes.push(...convertVectors(vectors.items, id));
+        if (data.vectorOffset === undefined) {
+            data.vectorOffset = {
+                done: vectors.leftCount === 0,
+                offset: vectors.items.length,
+                total: vectors.items.length + vectors.leftCount,
+            };
         }
-        catch (e) {
-            console.warn("failed to load tree data", e);
+        else {
+            data.vectorOffset.done = vectors.leftCount === 0;
+            data.vectorOffset.offset += vectors.items.length;
         }
-        finally {
-            this.setState({ loading: undefined });
+        if (!data.vectorOffset.done) {
+            const key = `${id}_show_more`;
+            nodes.push({
+                key: key,
+                title: renderShowMoreTitle(key, data, amount, data.vectorOffset.total),
+                isLeaf: true,
+            });
         }
-    }
-    async loadGroups(data, id, nodes) {
-        const { api } = this.props;
-        if (!data.groupOffset?.done) {
-            const groups = await api.getGroupChildren(id, data.groupOffset?.offset);
+    }, [convertVectors]);
+    const loadGroups = useCallback(async (data, id, nodes) => {
+        const isSpecialId = id < 0;
+        const requestedId = isSpecialId ? undefined : id;
+        const showOmittedGroups = isSpecialId && id === -2;
+        const showOmittedVectors = isSpecialId && id === -3;
+        if (!data.groupOffset?.done && !showOmittedVectors) {
+            const groups = await api.getGroupChildren(requestedId, data.groupOffset?.offset, showOmittedGroups);
             const amount = groups.leftCount > api.pageSize ? api.pageSize : groups.leftCount;
-            nodes.push(...this.convertGroups(groups.items, id));
+            nodes.push(...convertGroups(groups.items, id));
             if (data.groupOffset === undefined) {
                 data.groupOffset = {
                     done: groups.leftCount === 0,
@@ -160,240 +172,397 @@ export class EdaTreeView extends React.Component {
                 const key = `${id}_show_more`;
                 nodes.push({
                     key: key,
-                    title: this.renderTitle(key, data, amount, data.groupOffset.total),
+                    title: renderShowMoreTitle(key, data, amount, data.groupOffset.total),
                     isLeaf: true,
                 });
             }
         }
-        if (data.groupOffset.done && !data.vectorOffset?.done) {
-            const vectors = await api.getGroupVectors(id, data.vectorOffset?.offset);
-            this.loadVectors(data, id, nodes, vectors);
+        if (!hideVectors && (data.groupOffset?.done || showOmittedVectors) && !data.vectorOffset?.done && (!isSpecialId || showOmittedVectors)) {
+            const vectors = await api.getGroupVectors(id, data.vectorOffset?.offset, showOmittedVectors);
+            await loadVectors(data, id, nodes, vectors);
         }
-    }
-    async loadScenarios(data, id, nodes) {
-        const { api } = this.props;
+    }, [convertGroups, loadVectors]);
+    const loadScenarios = useCallback(async (data, id, nodes) => {
+        const isSpecialId = id < 0;
+        const requestedId = isSpecialId ? undefined : id;
+        const showOmittedGroups = isSpecialId && id === -2;
         if (!data.scenarioOffset?.done) {
-            const groups = await api.getScenarioChildren(id, data.scenarioOffset?.offset);
-            const amount = groups.leftCount > api.pageSize ? api.pageSize : groups.leftCount;
-            nodes.push(...this.convertScenarios(groups.items, id));
+            const scenarios = await api.getScenarioChildren(requestedId, data.scenarioOffset?.offset, showOmittedGroups);
+            const amount = scenarios.leftCount > api.pageSize ? api.pageSize : scenarios.leftCount;
+            nodes.push(...convertScenarios(scenarios.items, id));
             if (data.scenarioOffset === undefined) {
                 data.scenarioOffset = {
-                    done: groups.leftCount === 0,
-                    offset: groups.items.length,
-                    total: groups.items.length + groups.leftCount,
+                    done: scenarios.leftCount === 0,
+                    offset: scenarios.items.length,
+                    total: scenarios.items.length + scenarios.leftCount,
                 };
             }
             else {
-                data.scenarioOffset.done = groups.leftCount === 0;
-                data.scenarioOffset.offset += groups.items.length;
+                data.scenarioOffset.done = scenarios.leftCount === 0;
+                data.scenarioOffset.offset += scenarios.items.length;
             }
             if (!data.scenarioOffset.done) {
                 const key = `${id}_show_more`;
                 nodes.push({
                     key: key,
-                    title: this.renderTitle(key, data, amount, data.scenarioOffset.total),
+                    title: renderShowMoreTitle(key, data, amount, data.scenarioOffset.total),
                     isLeaf: true,
                 });
             }
         }
-        if (data.scenarioOffset.done && !data.vectorOffset?.done) {
+        if (!hideVectors && data.scenarioOffset.done && !data.vectorOffset?.done && !isSpecialId) {
             const vectors = await api.getScenarioVectors(id, data.vectorOffset?.offset, undefined, true);
-            this.loadVectors(data, id, nodes, vectors);
+            await loadVectors(data, id, nodes, vectors);
         }
-    }
-    loadVectors(data, id, nodes, vectors) {
-        const { api } = this.props;
-        const amount = vectors.leftCount > api.pageSize ? api.pageSize : vectors.leftCount;
-        nodes.push(...this.convertVectors(vectors.items, id));
-        if (data.vectorOffset === undefined) {
-            data.vectorOffset = {
-                done: vectors.leftCount === 0,
-                offset: vectors.items.length,
-                total: vectors.items.length + vectors.leftCount,
-            };
+    }, [convertScenarios, loadVectors]);
+    const updateTreeState = useCallback((data, nodes, treeData, dataId, resolve, reject) => {
+        const index = treeData.findIndex((t) => (type === TreeViewType.GROUP ? t.group?.ID : t.scenario?.ID) === dataId);
+        if (index < 0) {
+            console.warn("Failed to find index");
+            reject();
+            return;
         }
-        else {
-            data.vectorOffset.done = vectors.leftCount === 0;
-            data.vectorOffset.offset += vectors.items.length;
+        treeData[index] = { ...data, children: treeData[index].children };
+        if (treeData[index].children) {
+            treeData[index].children.pop();
+            treeData[index].children.push(...nodes);
         }
-        if (!data.vectorOffset.done) {
-            const key = `${id}_show_more`;
-            nodes.push({
-                key: key,
-                title: this.renderTitle(key, data, amount, data.vectorOffset.total),
-                isLeaf: true,
-            });
+        else {
+            treeData[index].children = nodes;
         }
-    }
-    async onLoadData(data, id) {
+        nodeMap.current.set(dataId, treeData[index]);
+        resolve();
+    }, [type]);
+    const onLoadData = useCallback(async (data, id) => {
         if (data.children) {
             return Promise.resolve();
         }
-        this.setState({ loading: id });
+        setLoadingKey(id);
         try {
-            const { type } = this.props;
             let id;
             const nodes = [];
             switch (type) {
                 case TreeViewType.GROUP:
                     if (!data.group) {
                         console.warn("No group!");
-                        this.setState({ loading: undefined });
+                        setLoadingKey(undefined);
                         return;
                     }
                     id = data.group.ID;
-                    await this.loadGroups(data, id, nodes);
+                    await loadGroups(data, id, nodes);
                     break;
                 case TreeViewType.SCENARIO:
                     if (!data.scenario) {
                         console.warn("No scenario!");
-                        this.setState({ loading: undefined });
+                        setLoadingKey(undefined);
                         return;
                     }
                     id = data.scenario.ID;
-                    await this.loadScenarios(data, id, nodes);
+                    await loadScenarios(data, id, nodes);
                     break;
                 default:
-                    this.setState({ loading: undefined });
+                    setLoadingKey(undefined);
                     return;
             }
-            const parentId = this.childParentMap.get(id);
             await new Promise((resolve, reject) => {
-                if (parentId !== undefined) {
-                    const parentNode = this.nodeMap.get(parentId);
-                    if (parentNode?.children) {
-                        this.updateTree(data, nodes, parentNode.children, id, resolve, reject);
+                setTreeData((treeData) => {
+                    const parentId = childParentMap.current.get(id);
+                    if (parentId !== undefined) {
+                        const parentNode = nodeMap.current.get(parentId);
+                        if (parentNode?.children) {
+                            updateTreeState(data, nodes, parentNode.children, id, resolve, reject);
+                        }
+                        else {
+                            console.warn("No parent for node", id);
+                            reject();
+                        }
                     }
                     else {
-                        console.warn("No parent for node", id);
-                        reject();
+                        updateTreeState(data, nodes, treeData, id, resolve, reject);
                     }
-                }
-                else {
-                    this.updateTree(data, nodes, this.state.treeData, id, resolve, reject);
-                }
+                    return [...treeData];
+                });
             });
         }
         catch (e) {
             console.warn("Failed to load tree data", e);
         }
         finally {
-            this.setState({ loading: undefined });
+            setLoadingKey(undefined);
         }
-    }
-    onDoubleClick(_e, node) {
-        if (node.vector !== undefined) {
-            this.props.onItemDoubleClick?.({ id: node.vector.ID, type: 0 }, node.vector);
+    }, [api, type, convertGroups, convertScenarios, updateTreeState, loadGroups, loadScenarios]);
+    const renderShowMoreTitle = (key, data, amount, total) => (React.createElement(Typography.Link, { onClick: async (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            await onLoadData(data, key);
+        } }, i18n("Show %{n} more (of %{o})", { n: String(amount), o: String(total) })));
+    useEffect(() => {
+        const initLoad = async () => {
+            setLoadingKey("");
+            try {
+                let initialData;
+                if (showOmitted) {
+                    if (type === TreeViewType.GROUP) {
+                        initialData = [
+                            {
+                                key: -1,
+                                title: i18n("Vector Groups"),
+                                isLeaf: false,
+                                icon: React.createElement(CheckCircleOutlined, null),
+                                group: {
+                                    ID: -1,
+                                    Name: "",
+                                    DisplayName: "",
+                                    Type: 0,
+                                    RoundingPlaces: 0,
+                                    RoundingType: 0,
+                                }
+                            },
+                            {
+                                key: -2,
+                                title: i18n("Omitted Vector Groups"),
+                                isLeaf: false,
+                                icon: React.createElement(StopOutlined, null),
+                                group: {
+                                    ID: -2,
+                                    Name: "",
+                                    DisplayName: "",
+                                    Type: 0,
+                                    RoundingPlaces: 0,
+                                    RoundingType: 0,
+                                }
+                            },
+                            ...!hideVectors ? [{
+                                    key: -3,
+                                    title: i18n("Omitted Vectors"),
+                                    isLeaf: false,
+                                    icon: React.createElement(CloseCircleOutlined, null),
+                                    group: {
+                                        ID: -3,
+                                        Name: "",
+                                        DisplayName: "",
+                                        Type: 0,
+                                        RoundingPlaces: 0,
+                                        RoundingType: 0,
+                                    }
+                                }] : []
+                        ];
+                    }
+                    else {
+                        initialData = [
+                            {
+                                key: -1,
+                                title: i18n("Scenarios"),
+                                isLeaf: false,
+                                icon: React.createElement(CheckCircleOutlined, null),
+                                scenario: {
+                                    ID: -1,
+                                    Name: "",
+                                    DisplayName: "",
+                                    Type: 0,
+                                    RoundingPlaces: 0,
+                                    RoundingType: 0,
+                                }
+                            },
+                            {
+                                key: -2,
+                                title: i18n("Omitted Scenarios"),
+                                isLeaf: false,
+                                icon: React.createElement(StopOutlined, null),
+                                scenario: {
+                                    ID: -2,
+                                    Name: "",
+                                    DisplayName: "",
+                                    Type: 0,
+                                    RoundingPlaces: 0,
+                                    RoundingType: 0,
+                                }
+                            },
+                        ];
+                    }
+                }
+                else {
+                    if (type === TreeViewType.GROUP) {
+                        const res = await api.getGroupChildren(undefined);
+                        initialData = convertGroups(res.items, undefined);
+                    }
+                    else {
+                        const res = await api.getScenarioChildren(undefined);
+                        initialData = convertScenarios(res.items, undefined);
+                    }
+                }
+                setTreeData(initialData);
+            }
+            catch (e) {
+                console.warn("Failed to load tree data", e);
+            }
+            finally {
+                setLoadingKey(undefined);
+            }
+        };
+        initLoad();
+    }, [api, type, showOmitted, convertGroups, convertScenarios]);
+    const titleRenderer = useCallback((node) => {
+        if (node.key === loadingKey) {
+            return React.createElement(Typography.Link, null,
+                React.createElement(LoadingOutlined, null),
+                i18n("Loading"),
+                "...");
         }
-        else if (node.group !== undefined) {
-            this.props.onItemDoubleClick?.({ id: node.group.ID, type: 1 }, node.group);
+        return node.title;
+    }, [loadingKey]);
+    const onDoubleClick = useCallback((_e, node) => {
+        const type = getType(node);
+        if (type === undefined || type.id < 0) {
+            return;
         }
-        else if (node.scenario !== undefined) {
-            this.props.onItemDoubleClick?.({ id: node.scenario.ID, type: 2 }, node.scenario);
+        if (node.vector && type.type === 0 && !disableVectorSelection) {
+            onItemDoubleClick?.(type, node.vector);
+            setSelectedKeys([node.key]);
         }
-        this.setState({ selectedKeys: [node.key] });
-    }
-    updateTree(data, nodes, treeData, dataId, resolve, reject) {
-        const { type } = this.props;
-        const index = treeData.findIndex((t) => (type === TreeViewType.GROUP ? t.group?.ID : t.scenario?.ID) === dataId);
-        if (index < 0) {
-            console.warn("Failed to find index");
-            reject();
-            return;
+        else if (node.group && type.type === 1 && !disableBranchSelection) {
+            onItemDoubleClick?.(type, node.group);
+            setSelectedKeys([node.key]);
         }
-        treeData[index] = { ...data, children: treeData[index].children };
-        if (treeData[index].children) {
-            treeData[index].children.pop();
-            treeData[index].children.push(...nodes);
+        else if (node.scenario && type.type === 2 && !disableBranchSelection) {
+            onItemDoubleClick?.(type, node.scenario);
+            setSelectedKeys([node.key]);
         }
-        else {
-            treeData[index].children = nodes;
+    }, [onItemDoubleClick]);
+    const getMenuItems = useCallback((node) => {
+        if (typeof node.key === "number" && node.key < 0) {
+            return [];
         }
-        this.nodeMap.set(dataId, treeData[index]);
-        this.setState({ treeData: [...this.state.treeData] }, resolve);
-    }
-    convertGroups(groups, parentId) {
-        const data = [];
-        for (let group of groups) {
-            const node = {
-                key: group.ID,
-                title: group.DisplayName,
-                isLeaf: false,
-                icon: React.createElement(FolderOpenOutlined, null),
-                group: group,
-            };
-            data.push(node);
-            this.childParentMap.set(group.ID, parentId);
-            this.nodeMap.set(group.ID, node);
+        const result = [
+            { key: "EXPORT_TO_XML", label: i18n("Export to XML") },
+        ];
+        if (node.vector) {
+            result.push(...[
+                { key: "INCLUDE_TO_SCENARIO", label: i18n("Include vector to scenario") },
+                { key: "INCLUDE_TO_GROUP", label: i18n("Include vector to group") },
+            ]);
         }
-        return data;
-    }
-    convertScenarios(scenarios, parentId) {
-        const data = [];
-        for (let scenario of scenarios) {
-            const node = {
-                key: scenario.ID,
-                title: scenario.DisplayName,
-                isLeaf: false,
-                icon: React.createElement(FolderOpenOutlined, null),
-                scenario: scenario,
-            };
-            data.push(node);
-            this.childParentMap.set(scenario.ID, parentId);
-            this.nodeMap.set(scenario.ID, node);
+        if (node.group) {
+            result.push(...[
+                { key: "INCLUDE_TO_GROUP", label: i18n("Include vector to group") },
+            ]);
         }
-        return data;
-    }
-    convertVectors(vectors, parentId) {
-        const data = [];
-        for (let vector of vectors) {
-            const id = `${parentId}_${vector.ID}`;
-            const node = {
-                key: id,
-                title: vector.DisplayName,
-                isLeaf: true,
-                icon: this.getVectorIcon(vector.Type),
-                vector: vector,
-            };
-            data.push(node);
-            this.childParentMap.set(id, parentId);
-            this.nodeMap.set(id, node);
+        if (node.scenario) {
+            result.push(...[
+                { key: "INCLUDE_TO_SCENARIO", label: i18n("Include vector to scenario") },
+            ]);
         }
-        return data;
-    }
-    getVectorIcon(type) {
-        switch (type) {
-            case EdaVectorType.FifteenMinutes:
-                return React.createElement(NumberFifteenFilled, null);
-            case EdaVectorType.Hour:
-                return React.createElement(LetterHFilled, null);
-            case EdaVectorType.Day:
-                return React.createElement(LetterDFilled, null);
-            case EdaVectorType.Descriptive:
-                return React.createElement(LetterCFilled, null);
-            case EdaVectorType.Interval:
-                return React.createElement(LetterIFilled, null);
-            case EdaVectorType.FifteenMinutesCalc:
-                return React.createElement(NumberFifteenFilled, { style: { color: "orange" } });
-            case EdaVectorType.HourCalc:
-                return React.createElement(LetterHFilled, { style: { color: "orange" } });
-            case EdaVectorType.DayCalc:
-                return React.createElement(LetterDFilled, { style: { color: "orange" } });
-            case EdaVectorType.Change:
-                return React.createElement(LetterCFilled, null);
-            case EdaVectorType.ChangeCalc:
-                return React.createElement(LetterCFilled, { style: { color: "orange" } });
-            case EdaVectorType.Pair:
-                return React.createElement(PairOutlined, null);
-            case EdaVectorType.Periodic:
-                return React.createElement(PeriodicOutlined, null);
-            case EdaVectorType.PeriodicCalc:
-                return React.createElement(PeriodicOutlined, { style: { color: "orange" } });
-            case EdaVectorType.Functional:
-                return React.createElement(FunctionOutlined, null);
-            default:
-                return React.createElement(QuestionOutlined, null);
+        return result;
+    }, []);
+    const onRightClick = useCallback(({ node }) => {
+        setRightClickedNode(node);
+    }, []);
+    const handleContextMenuItemClicked = useCallback(async ({ key }) => {
+        const type = getType(rightClickedNode);
+        if (type === undefined) {
+            return;
         }
+        switch (key) {
+            case "EXPORT_TO_XML": {
+                let data = undefined;
+                switch (type.type) {
+                    case 0: {
+                        const result = await api.loadVectorData(type.id);
+                        if (!result) {
+                            return;
+                        }
+                        data = { type: type.type, data: result };
+                        break;
+                    }
+                    case 1: {
+                        const result = await api.loadGroupData(type.id);
+                        if (!result) {
+                            return;
+                        }
+                        data = { type: type.type, data: result };
+                        break;
+                    }
+                    case 2: {
+                        const result = await api.loadScenarioData(type.id);
+                        if (!result) {
+                            return;
+                        }
+                        data = { type: type.type, data: result };
+                        break;
+                    }
+                }
+                triggerExportToXML(data);
+                return;
+            }
+            case "INCLUDE_TO_SCENARIO":
+                triggerIncludeToScenario(type);
+                return;
+            case "INCLUDE_TO_GROUP":
+                triggerIncludeToGroup(type);
+                return;
+        }
+    }, [rightClickedNode]);
+    return (React.createElement(Dropdown, { menu: {
+            items: (rightClickedNode && !hideContextMenu) ? getMenuItems(rightClickedNode) : [],
+            onClick: handleContextMenuItemClicked,
+        }, trigger: ['contextMenu'] },
+        React.createElement("div", { ref: divRef, className: styles.baseLayout },
+            React.createElement("div", { className: styles.absoluteLayout },
+                React.createElement(Tree, { blockNode: true, showLine: true, showIcon: true, switcherIcon: React.createElement(DownOutlined, null), height: height, loadData: onLoadData, onRightClick: onRightClick, onExpand: setExpandedKeys, onDoubleClick: onDoubleClick, expandedKeys: expandedKeys, selectedKeys: selectedKeys, titleRender: titleRenderer, treeData: treeData }),
+                renderActionDialogs()))));
+};
+const getVectorIcon = (type) => {
+    switch (type) {
+        case EdaVectorType.FifteenMinutes:
+            return React.createElement(NumberFifteenFilled, null);
+        case EdaVectorType.Hour:
+            return React.createElement(LetterHFilled, null);
+        case EdaVectorType.Day:
+            return React.createElement(LetterDFilled, null);
+        case EdaVectorType.Descriptive:
+            return React.createElement(LetterCFilled, null);
+        case EdaVectorType.Interval:
+            return React.createElement(LetterIFilled, null);
+        case EdaVectorType.FifteenMinutesCalc:
+            return React.createElement(NumberFifteenFilled, { style: { color: "orange" } });
+        case EdaVectorType.HourCalc:
+            return React.createElement(LetterHFilled, { style: { color: "orange" } });
+        case EdaVectorType.DayCalc:
+            return React.createElement(LetterDFilled, { style: { color: "orange" } });
+        case EdaVectorType.Change:
+            return React.createElement(LetterCFilled, null);
+        case EdaVectorType.ChangeCalc:
+            return React.createElement(LetterCFilled, { style: { color: "orange" } });
+        case EdaVectorType.Pair:
+            return React.createElement(PairOutlined, null);
+        case EdaVectorType.Periodic:
+            return React.createElement(PeriodicOutlined, null);
+        case EdaVectorType.PeriodicCalc:
+            return React.createElement(PeriodicOutlined, { style: { color: "orange" } });
+        case EdaVectorType.Functional:
+            return React.createElement(FunctionOutlined, null);
+        default:
+            return React.createElement(QuestionOutlined, null);
+    }
+};
+const getType = (node) => {
+    let type = undefined;
+    let id = undefined;
+    if (node?.vector) {
+        type = 0;
+        id = node.vector.ID;
+    }
+    if (node?.group) {
+        type = 1;
+        id = node.group.ID;
+    }
+    if (node?.scenario) {
+        type = 2;
+        id = node.scenario.ID;
+    }
+    if (type === undefined || id === undefined) {
+        return undefined;
     }
-}
+    return { type, id };
+};
 //# sourceMappingURL=edaTreeView.js.map