d2aura 26.0.13 → 26.0.15

package/coreui/components/edaManagerComponent/dialogs/edaDescriptiveVectorEditorDialog.js

@@ -0,0 +1,343 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ModalDialog } from "d2coreui/components/modal/modalDialog";
+import { Button, Space, Splitter, Tabs, Tree } from "antd";
+import { DownOutlined, SaveOutlined } from "@ant-design/icons";
+import i18n from "d2core/i18n/i18n";
+import { UndoIcon } from "d2coreui/components/icons/undoIcon";
+import { createStyles } from "antd-style";
+import { EdaPeriodType, EdaPeriodValueType } from "../constants/edaTypes";
+import { LocaleHolder } from "d2core/i18n/localeHolder";
+import dayjs from "d2core/dayjs";
+import ExtendedDataGrid from "d2coreui/components/grid/extendedDataGrid";
+import { DescriptiveVectorDetailPanel } from "./descriptiveVectorDialog/descriptiveVectorDetailPanel";
+import { FullPeriodType } from "./descriptiveVectorDialog/types";
+import { addEntry, addSubEntry, buildTable, buildTree, getFormattedPeriodTime, getPeriodName, removeEntry, removeSubEntries, reorder, toFullPeriodType } from "./descriptiveVectorDialog/utils";
+import { ControlButtons } from "./descriptiveVectorDialog/controlButtons";
+import { GraphPanel } from "./descriptiveVectorDialog/graphPanel";
+import { useSharedEdaData } from "./descriptiveVectorDialog/useSharedData";
+import { TablePanel } from "./descriptiveVectorDialog/tablePanel";
+const useStyles = createStyles(({ css, token }) => {
+    return {
+        baseLayout: css `
+            height: 100%;
+            width: 100%;
+
+            .ant-space-item:first-child {
+                height: 100%;
+            }
+
+            .ant-tree-node-content-wrapper {
+                user-select: none;
+                -webkit-user-select: none;
+                -moz-user-select: none;
+                -ms-user-select: none;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+
+                .ant-tree-title {
+                    white-space: nowrap;
+                }
+            }
+        `,
+        tabsLayout: css `
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+
+            .ant-tabs-content {
+                height: 100%;
+                background-color: ${token.colorBgContainer};
+                border-radius: ${token.borderRadius}px;
+                transition: background-color 0.3s;
+            }
+        `,
+        treeLayout: css `
+            .tree-splitter {
+                display: flex;
+                flex-direction: row;
+                gap: ${token.paddingXS}px;
+            }
+            
+            .tree-view {
+                width: 100%;
+                height: 100%;
+            }
+            
+            .tree-mover {
+                padding: ${token.paddingXS}px;
+                display: flex;
+                flex-direction: column;
+            }
+        `,
+        tableLayout: css `
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: row;
+            gap: ${token.paddingXS}px;
+
+            .tree-mover {
+                padding: ${token.paddingXS}px;
+                display: flex;
+                flex-direction: column;
+            }
+        `,
+        buttonsLayout: css `
+            width: 100%;
+            display: flex;
+            justify-content: center;
+        `
+    };
+});
+var TabType;
+(function (TabType) {
+    TabType["TREE"] = "tree";
+    TabType["TABLE"] = "table";
+    TabType["GRAPH"] = "graph";
+    TabType["VALUES"] = "values";
+})(TabType || (TabType = {}));
+export const EdaDescriptiveVectorEditorDialog = ({ api, vector, onCancel, onSaved, ...modalProps }) => {
+    const { styles } = useStyles();
+    const [originalData, setOriginalData] = useState([]);
+    const [tableData, setTableData] = useState([]);
+    const [dataModified, setDataModified] = useState(false);
+    const [selectedRow, setSelectedRow] = useState();
+    const [height, setHeight] = useState(0);
+    const [activeTab, setActiveTab] = useState(TabType.TREE);
+    const gridRef = useRef(null);
+    const { displayData, isLoading, params, setParams } = useSharedEdaData(api, originalData, tableData, activeTab === TabType.GRAPH || activeTab === TabType.VALUES);
+    const fullMask = useMemo(() => LocaleHolder.getDateTimeFormat(true, false, false), []);
+    const dateMask = useMemo(() => LocaleHolder.getDateFormat(false), []);
+    const handleSave = useCallback(() => {
+    }, [api, vector]);
+    const divRef = useCallback((node) => {
+        if (!node) {
+            return;
+        }
+        new ResizeObserver((entries) => {
+            if (entries[0]) {
+                setHeight(entries[0].contentRect.height);
+            }
+        }).observe(node);
+    }, []);
+    const loadData = useCallback(() => {
+        api.loadDescriptiveVectorData(vector.ID).then((result) => {
+            const descriptiveVector = result.map((r) => ({ ...r, timeFrom: dayjs(r.timeFrom), timeTo: dayjs(r.timeTo) }));
+            const data = buildTable(descriptiveVector);
+            gridRef.current?.showDetailPanel(false);
+            setOriginalData(data);
+            setTableData(data);
+            setDataModified(false);
+            setSelectedRow(undefined);
+        });
+    }, [api, vector]);
+    const handleRevert = useCallback(() => {
+        loadData();
+    }, [loadData]);
+    const handleDataChanged = useCallback((newData) => {
+        setTableData((prev) => {
+            return buildTable(prev.map((row) => row.idx === newData.idx ? { ...row, ...newData } : row));
+        });
+        setDataModified(true);
+    }, [fullMask, dateMask]);
+    const handleRowSelected = useCallback((row) => {
+        if (row.node.isSelected()) {
+            setSelectedRow(row.data);
+        }
+    }, []);
+    const handleRowDoubleClicked = useCallback(() => {
+        gridRef.current?.showDetailPanel(true);
+    }, []);
+    const handleMove = useCallback((direction) => {
+        if (!selectedRow) {
+            return;
+        }
+        setTableData((prev) => {
+            const { data, selected } = reorder(prev, selectedRow, direction);
+            setSelectedRow(selected);
+            return buildTable(data);
+        });
+        setDataModified(true);
+    }, [selectedRow, fullMask, dateMask]);
+    const handleAddEntry = useCallback(() => {
+        setTableData((prev) => {
+            const { data, selected } = addEntry(prev, selectedRow);
+            setSelectedRow(selected);
+            return buildTable(data);
+        });
+        setDataModified(true);
+    }, [selectedRow]);
+    const handleAddSubEntry = useCallback(() => {
+        if (selectedRow) {
+            setTableData((prev) => {
+                const { data, selected } = addSubEntry(prev, selectedRow);
+                setSelectedRow(selected);
+                return buildTable(data);
+            });
+            setDataModified(true);
+        }
+    }, [selectedRow]);
+    const handleRemoveEntry = useCallback(() => {
+        if (selectedRow) {
+            setTableData((prev) => {
+                const { data, selected } = removeEntry(prev, selectedRow);
+                setSelectedRow(selected);
+                return buildTable(data);
+            });
+            setDataModified(true);
+        }
+    }, [selectedRow]);
+    const handleRemoveSubEntries = useCallback(() => {
+        if (selectedRow) {
+            setTableData((prev) => {
+                const { data, selected } = removeSubEntries(prev, selectedRow);
+                setSelectedRow(selected);
+                return buildTable(data);
+            });
+            setDataModified(true);
+        }
+    }, [selectedRow]);
+    const valueFormatter = useCallback((props) => {
+        if (props.data && props.value) {
+            const data = props.data;
+            const formatted = getFormattedPeriodTime(data.periodType, props.value, fullMask, dateMask);
+            if (props.data.periodType === EdaPeriodType.Year) {
+                const fullPeriodType = toFullPeriodType(data);
+                switch (fullPeriodType) {
+                    case FullPeriodType.YearQuarter:
+                        return `${formatted}. ${i18n("Quarter")}`;
+                    case FullPeriodType.YearWeek:
+                        return `${formatted}. ${i18n("Week")}`;
+                }
+            }
+            return formatted;
+        }
+        return "";
+    }, []);
+    const selectGridRow = useCallback(() => {
+        if (selectedRow && gridRef.current) {
+            gridRef.current.dataGrid?.gridApi?.forEachNode((node) => {
+                if (node.data?.idx === selectedRow.idx && !node.isSelected()) {
+                    node.setSelected(true);
+                }
+            });
+        }
+        else if (!selectedRow) {
+            gridRef.current?.dataGrid?.gridApi?.deselectAll();
+        }
+    }, [selectedRow, tableData]);
+    const columnDefs = useMemo(() => [
+        {
+            field: "idx",
+            colId: "idx",
+            width: 100,
+            headerName: i18n("Index"),
+            group: i18n("Basic Columns")
+        },
+        {
+            field: "periodType",
+            colId: "periodType",
+            valueFormatter: (props) => getPeriodName(props.value),
+            headerName: i18n("Period Type"),
+            group: i18n("Basic Columns"),
+        },
+        {
+            field: "timeFrom",
+            colId: "timeFrom",
+            valueFormatter: valueFormatter,
+            headerName: i18n("Period From"),
+            group: i18n("Basic Columns")
+        },
+        {
+            field: "timeTo",
+            colId: "timeTo",
+            valueFormatter: valueFormatter,
+            headerName: i18n("Period To"),
+            group: i18n("Basic Columns")
+        },
+        {
+            field: "value",
+            colId: "value",
+            headerName: i18n("Value"),
+            group: i18n("Basic Columns"),
+        },
+        {
+            field: "valueType",
+            colId: "valueType",
+            valueFormatter: (props) => i18n("EdaPeriodValueType_" + EdaPeriodValueType[props.value]),
+            headerName: i18n("Value Type"),
+            group: i18n("Basic Columns"),
+        },
+        {
+            field: "parent",
+            colId: "parent",
+            valueFormatter: (props) => props.value > 0 ? props.value : "",
+            headerName: i18n("Parent"),
+            group: i18n("Basic Columns"),
+        },
+    ], []);
+    const treeData = useMemo(() => {
+        return buildTree(tableData, fullMask, dateMask);
+    }, [tableData, fullMask, dateMask]);
+    const items = useMemo(() => [
+        {
+            key: TabType.TREE,
+            label: i18n("Tree"),
+            children: (React.createElement(Splitter, { className: styles.treeLayout },
+                React.createElement(Splitter.Panel, { className: "tree-splitter" },
+                    React.createElement("div", { ref: divRef, className: "tree-view" },
+                        React.createElement(Tree, { showIcon: true, showLine: true, treeData: treeData, virtual: true, blockNode: true, switcherIcon: React.createElement(DownOutlined, null), height: height, selectedKeys: selectedRow?.idx ? [selectedRow.idx] : [], onSelect: (_, info) => {
+                                setSelectedRow(info.selected ? info.node.data : undefined);
+                            } })),
+                    React.createElement(ControlButtons, { tableData: tableData, onMove: handleMove, selectedRow: selectedRow, addEntry: handleAddEntry, addSubEntry: handleAddSubEntry, removeEntry: handleRemoveEntry, removeSubEntries: handleRemoveSubEntries })),
+                React.createElement(Splitter.Panel, { defaultSize: 350 }, selectedRow && (React.createElement(DescriptiveVectorDetailPanel, { data: selectedRow, onChange: handleDataChanged })))))
+        },
+        {
+            key: TabType.TABLE,
+            label: i18n("Table"),
+            children: (React.createElement("div", { className: styles.tableLayout },
+                React.createElement(ExtendedDataGrid, { ref: gridRef, defaultGridConfiguration: { pageSize: -1 }, columnDefs: columnDefs, onLoadData: (callback) => callback(1), detailPanel: {
+                        defaultWidth: 350,
+                        renderer: () => selectedRow ? (React.createElement(DescriptiveVectorDetailPanel, { data: selectedRow, onChange: handleDataChanged })) : React.createElement(React.Fragment, null),
+                    }, onGridReady: selectGridRow, onRowDoubleClicked: handleRowDoubleClicked, onRowSelected: handleRowSelected, rowSelection: "single", rowData: tableData }),
+                React.createElement(ControlButtons, { tableData: tableData, onMove: handleMove, selectedRow: selectedRow, addEntry: handleAddEntry, addSubEntry: handleAddSubEntry, removeEntry: handleRemoveEntry, removeSubEntries: handleRemoveSubEntries })))
+        },
+        {
+            key: TabType.GRAPH,
+            label: i18n("Graph"),
+            children: (React.createElement(GraphPanel, { displayData: displayData, isLoading: isLoading, params: params, onParamsChange: setParams }))
+        },
+        {
+            key: TabType.VALUES,
+            label: i18n("Values"),
+            children: (React.createElement(TablePanel, { displayData: displayData, isLoading: isLoading, params: params, onParamsChange: setParams }))
+        }
+    ], [treeData, columnDefs, originalData, tableData, selectedRow, height, handleRowSelected, handleDataChanged, displayData, isLoading, params, setParams, styles, activeTab]);
+    useEffect(() => {
+        loadData();
+    }, [loadData]);
+    useEffect(() => {
+        selectGridRow();
+    }, [selectGridRow]);
+    return (React.createElement(ModalDialog, { ...modalProps, mode: "NO_BUTTONS", footer: (React.createElement("div", { className: styles.buttonsLayout },
+            React.createElement(Space.Compact, null,
+                React.createElement(Button, { type: "primary", disabled: !dataModified, icon: React.createElement(SaveOutlined, null), onClick: handleSave }, i18n("Save")),
+                React.createElement(Button, { danger: true, disabled: !dataModified, icon: React.createElement(UndoIcon, null), onClick: handleRevert }, i18n("Revert"))))), onCancel: (event) => {
+            if (!dataModified) {
+                onCancel?.(event);
+            }
+            else {
+                ModalDialog.confirm({
+                    mode: "YES_NO",
+                    title: i18n("Discard unsaved changes?"),
+                    onOk: () => {
+                        onCancel?.(event);
+                    }
+                });
+            }
+        } },
+        React.createElement("div", { className: styles.tabsLayout },
+            React.createElement(Tabs, { type: "card", items: items, style: { height: "100%" }, destroyOnHidden: false, activeKey: activeTab, onChange: (key) => setActiveTab(key) }))));
+};
+//# sourceMappingURL=edaDescriptiveVectorEditorDialog.js.map

package/coreui/components/edaManagerComponent/dialogs/edaDescriptiveVectorEditorDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"edaDescriptiveVectorEditorDialog.js","sourceRoot":"","sources":["../../../../../../coreui/components/edaManagerComponent/dialogs/edaDescriptiveVectorEditorDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {FC, useCallback, useEffect, useMemo, useRef, useState} from \"react\";\r\nimport {ModalDialog, ModalDialogMode, ModalDialogProps} from \"d2coreui/components/modal/modalDialog\";\r\nimport EdaManagerApi, {TreeItem} from \"../../../../api/eda/edaManagerApi\";\r\nimport {Button, Space, Splitter, Tabs, TabsProps, Tree} from \"antd\";\r\nimport {DownOutlined, SaveOutlined} from \"@ant-design/icons\";\r\nimport i18n from \"d2core/i18n/i18n\";\r\nimport {UndoIcon} from \"d2coreui/components/icons/undoIcon\";\r\nimport {createStyles} from \"antd-style\";\r\nimport {EdaPeriodType, EdaPeriodValueType} from \"../constants/edaTypes\";\r\nimport {LocaleHolder} from \"d2core/i18n/localeHolder\";\r\nimport dayjs from \"d2core/dayjs\";\r\nimport ExtendedDataGrid from \"d2coreui/components/grid/extendedDataGrid\";\r\nimport {RowSelectedEvent, ValueFormatterParams} from \"ag-grid-community\";\r\nimport {DataGridColDef} from \"d2coreui/components/grid/dataGrid\";\r\nimport {DescriptiveVectorDetailPanel} from \"./descriptiveVectorDialog/descriptiveVectorDetailPanel\";\r\nimport {DescriptiveVector, FullPeriodType, TableNode} from \"./descriptiveVectorDialog/types\";\r\nimport {addEntry, addSubEntry, buildTable, buildTree, getFormattedPeriodTime, getPeriodName, removeEntry, removeSubEntries, reorder, toFullPeriodType} from \"./descriptiveVectorDialog/utils\";\r\nimport {ControlButtons} from \"./descriptiveVectorDialog/controlButtons\";\r\nimport {GraphPanel} from \"./descriptiveVectorDialog/graphPanel\";\r\nimport {useSharedEdaData} from \"./descriptiveVectorDialog/useSharedData\";\r\nimport {TablePanel} from \"./descriptiveVectorDialog/tablePanel\";\r\n\r\nconst useStyles = createStyles(({css, token},) => {\r\n    return {\r\n        baseLayout: css`\r\n            height: 100%;\r\n            width: 100%;\r\n\r\n            .ant-space-item:first-child {\r\n                height: 100%;\r\n            }\r\n\r\n            .ant-tree-node-content-wrapper {\r\n                user-select: none;\r\n                -webkit-user-select: none;\r\n                -moz-user-select: none;\r\n                -ms-user-select: none;\r\n                white-space: nowrap;\r\n                text-overflow: ellipsis;\r\n                overflow: hidden;\r\n\r\n                .ant-tree-title {\r\n                    white-space: nowrap;\r\n                }\r\n            }\r\n        `,\r\n        tabsLayout: css`\r\n            height: 100%;\r\n            width: 100%;\r\n            overflow: hidden;\r\n\r\n            .ant-tabs-content {\r\n                height: 100%;\r\n                background-color: ${token.colorBgContainer};\r\n                border-radius: ${token.borderRadius}px;\r\n                transition: background-color 0.3s;\r\n            }\r\n        `,\r\n        treeLayout: css`\r\n            .tree-splitter {\r\n                display: flex;\r\n                flex-direction: row;\r\n                gap: ${token.paddingXS}px;\r\n            }\r\n            \r\n            .tree-view {\r\n                width: 100%;\r\n                height: 100%;\r\n            }\r\n            \r\n            .tree-mover {\r\n                padding: ${token.paddingXS}px;\r\n                display: flex;\r\n                flex-direction: column;\r\n            }\r\n        `,\r\n        tableLayout: css`\r\n            width: 100%;\r\n            height: 100%;\r\n            display: flex;\r\n            flex-direction: row;\r\n            gap: ${token.paddingXS}px;\r\n\r\n            .tree-mover {\r\n                padding: ${token.paddingXS}px;\r\n                display: flex;\r\n                flex-direction: column;\r\n            }\r\n        `,\r\n        buttonsLayout: css`\r\n            width: 100%;\r\n            display: flex;\r\n            justify-content: center;\r\n        `\r\n    };\r\n});\r\n\r\nenum TabType {\r\n    TREE = \"tree\",\r\n    TABLE = \"table\",\r\n    GRAPH = \"graph\",\r\n    VALUES = \"values\",\r\n}\r\n\r\ninterface Props extends Omit<ModalDialogProps, \"mode\" | \"onOk\"> {\r\n    api: EdaManagerApi\r\n    vector: TreeItem\r\n    onSaved: () => void\r\n}\r\n\r\nexport const EdaDescriptiveVectorEditorDialog: FC<Props> = ({api, vector, onCancel, onSaved, ...modalProps}) => {\r\n    const {styles} = useStyles();\r\n\r\n    const [originalData, setOriginalData] = useState<TableNode[]>([]);\r\n    const [tableData, setTableData] = useState<TableNode[]>([]);\r\n    const [dataModified, setDataModified] = useState<boolean>(false);\r\n    const [selectedRow, setSelectedRow] = useState<DescriptiveVector>();\r\n    const [height, setHeight] = useState<number>(0);\r\n    const [activeTab, setActiveTab] = useState<TabType>(TabType.TREE);\r\n\r\n    const gridRef = useRef<ExtendedDataGrid<TableNode>>(null);\r\n\r\n    const {\r\n        displayData,\r\n        isLoading,\r\n        params,\r\n        setParams\r\n    } = useSharedEdaData(api, originalData, tableData, activeTab === TabType.GRAPH || activeTab === TabType.VALUES);\r\n\r\n    const fullMask = useMemo(() => LocaleHolder.getDateTimeFormat(true, false, false), []);\r\n    const dateMask = useMemo(() => LocaleHolder.getDateFormat(false), []);\r\n\r\n    const handleSave = useCallback(() => {\r\n        //TODO handle save\r\n    }, [api, vector]);\r\n\r\n    const divRef = useCallback((node: HTMLDivElement | null) => {\r\n        if (!node) {\r\n            return;\r\n        }\r\n\r\n        new ResizeObserver((entries) => {\r\n            if (entries[0]) {\r\n                setHeight(entries[0].contentRect.height);\r\n            }\r\n        }).observe(node);\r\n    }, []);\r\n\r\n    const loadData = useCallback(() => {\r\n        api.loadDescriptiveVectorData(vector.ID).then((result) => {\r\n            const descriptiveVector = result.map((r): DescriptiveVector => ({...r, timeFrom: dayjs(r.timeFrom), timeTo: dayjs(r.timeTo)}));\r\n            const data: TableNode[] = buildTable(descriptiveVector);\r\n\r\n            gridRef.current?.showDetailPanel(false);\r\n            setOriginalData(data);\r\n            setTableData(data);\r\n            setDataModified(false);\r\n            setSelectedRow(undefined);\r\n        });\r\n    }, [api, vector]);\r\n\r\n    const handleRevert = useCallback(() => {\r\n        loadData();\r\n    }, [loadData]);\r\n\r\n    const handleDataChanged = useCallback((newData: DescriptiveVector) => {\r\n        setTableData((prev) => {\r\n            return buildTable(prev.map((row) => row.idx === newData.idx ? {...row, ...newData} : row));\r\n        });\r\n\r\n        setDataModified(true);\r\n    }, [fullMask, dateMask]);\r\n\r\n    const handleRowSelected = useCallback((row: RowSelectedEvent<TableNode>) => {\r\n        if (row.node.isSelected()) {\r\n            setSelectedRow(row.data);\r\n        }\r\n    }, []);\r\n\r\n    const handleRowDoubleClicked = useCallback(() => {\r\n        gridRef.current?.showDetailPanel(true);\r\n    }, []);\r\n\r\n    const handleMove = useCallback((direction: \"up\" | \"down\") => {\r\n        if (!selectedRow) {\r\n            return;\r\n        }\r\n\r\n        setTableData((prev) => {\r\n            const {data, selected} = reorder(prev, selectedRow, direction);\r\n\r\n            setSelectedRow(selected);\r\n            return buildTable(data);\r\n        });\r\n        setDataModified(true);\r\n    }, [selectedRow, fullMask, dateMask]);\r\n\r\n    const handleAddEntry = useCallback(() => {\r\n        setTableData((prev) => {\r\n            const {data, selected} = addEntry(prev, selectedRow);\r\n\r\n            setSelectedRow(selected);\r\n            return buildTable(data);\r\n        });\r\n        setDataModified(true);\r\n    }, [selectedRow]);\r\n\r\n    const handleAddSubEntry = useCallback(() => {\r\n        if (selectedRow) {\r\n            setTableData((prev) => {\r\n                const {data, selected} = addSubEntry(prev, selectedRow);\r\n\r\n                setSelectedRow(selected);\r\n                return buildTable(data);\r\n            });\r\n            setDataModified(true);\r\n        }\r\n    }, [selectedRow]);\r\n\r\n    const handleRemoveEntry = useCallback(() => {\r\n        if (selectedRow) {\r\n            setTableData((prev) => {\r\n                const {data, selected} = removeEntry(prev, selectedRow);\r\n                setSelectedRow(selected);\r\n                return buildTable(data);\r\n            });\r\n            setDataModified(true);\r\n        }\r\n    }, [selectedRow]);\r\n\r\n    const handleRemoveSubEntries = useCallback(() => {\r\n        if (selectedRow) {\r\n            setTableData((prev) => {\r\n                const {data, selected} = removeSubEntries(prev, selectedRow);\r\n                setSelectedRow(selected);\r\n                return buildTable(data);\r\n            })\r\n            setDataModified(true);\r\n        }\r\n    }, [selectedRow]);\r\n\r\n    const valueFormatter = useCallback((props: ValueFormatterParams<TableNode, dayjs.Dayjs>): string => {\r\n        if (props.data && props.value) {\r\n            const data: TableNode = props.data;\r\n            const formatted = getFormattedPeriodTime(data.periodType, props.value, fullMask, dateMask);\r\n\r\n            if (props.data.periodType === EdaPeriodType.Year) {\r\n                const fullPeriodType = toFullPeriodType(data);\r\n\r\n                switch (fullPeriodType) {\r\n                    case FullPeriodType.YearQuarter:\r\n                        return `${formatted}. ${i18n(\"Quarter\")}`;\r\n                    case FullPeriodType.YearWeek:\r\n                        return `${formatted}. ${i18n(\"Week\")}`;\r\n                }\r\n            }\r\n\r\n            return formatted\r\n        }\r\n\r\n        return \"\";\r\n    }, []);\r\n\r\n    const selectGridRow = useCallback(() => {\r\n        if (selectedRow && gridRef.current) {\r\n            gridRef.current.dataGrid?.gridApi?.forEachNode((node) => {\r\n                if (node.data?.idx === selectedRow.idx && !node.isSelected()) {\r\n                    node.setSelected(true);\r\n                }\r\n            });\r\n        } else if (!selectedRow) {\r\n            gridRef.current?.dataGrid?.gridApi?.deselectAll();\r\n        }\r\n    }, [selectedRow, tableData]);\r\n\r\n    const columnDefs = useMemo((): DataGridColDef[] => [\r\n        {\r\n            field: \"idx\",\r\n            colId: \"idx\",\r\n            width: 100,\r\n            headerName: i18n(\"Index\"),\r\n            group: i18n(\"Basic Columns\")\r\n        },\r\n        {\r\n            field: \"periodType\",\r\n            colId: \"periodType\",\r\n            valueFormatter: (props) => getPeriodName(props.value),\r\n            headerName: i18n(\"Period Type\"),\r\n            group: i18n(\"Basic Columns\"),\r\n        },\r\n        {\r\n            field: \"timeFrom\",\r\n            colId: \"timeFrom\",\r\n            valueFormatter: valueFormatter,\r\n            headerName: i18n(\"Period From\"),\r\n            group: i18n(\"Basic Columns\")\r\n        },\r\n        {\r\n            field: \"timeTo\",\r\n            colId: \"timeTo\",\r\n            valueFormatter: valueFormatter,\r\n            headerName: i18n(\"Period To\"),\r\n            group: i18n(\"Basic Columns\")\r\n        },\r\n        {\r\n            field: \"value\",\r\n            colId: \"value\",\r\n            headerName: i18n(\"Value\"),\r\n            group: i18n(\"Basic Columns\"),\r\n        },\r\n        {\r\n            field: \"valueType\",\r\n            colId: \"valueType\",\r\n            valueFormatter: (props) => i18n(\"EdaPeriodValueType_\" + EdaPeriodValueType[props.value]),\r\n            headerName: i18n(\"Value Type\"),\r\n            group: i18n(\"Basic Columns\"),\r\n        },\r\n        {\r\n            field: \"parent\",\r\n            colId: \"parent\",\r\n            valueFormatter: (props) => props.value > 0 ? props.value : \"\",\r\n            headerName: i18n(\"Parent\"),\r\n            group: i18n(\"Basic Columns\"),\r\n        },\r\n    ], []);\r\n\r\n    const treeData = useMemo(() => {\r\n        return buildTree(tableData, fullMask, dateMask);\r\n    }, [tableData, fullMask, dateMask]);\r\n\r\n    const items = useMemo((): TabsProps[\"items\"] => [\r\n        {\r\n            key: TabType.TREE,\r\n            label: i18n(\"Tree\"),\r\n            children: (\r\n                <Splitter className={styles.treeLayout}>\r\n                    <Splitter.Panel className={\"tree-splitter\"}>\r\n                        <div ref={divRef} className={\"tree-view\"}>\r\n                            <Tree\r\n                                showIcon\r\n                                showLine\r\n                                treeData={treeData}\r\n                                virtual\r\n                                blockNode\r\n                                switcherIcon={<DownOutlined/>}\r\n                                height={height}\r\n                                selectedKeys={selectedRow?.idx ? [selectedRow.idx] : []}\r\n                                onSelect={(_, info) => {\r\n                                    setSelectedRow(info.selected ? info.node.data : undefined);\r\n                                }}\r\n                            />\r\n                        </div>\r\n                        <ControlButtons\r\n                            tableData={tableData}\r\n                            onMove={handleMove}\r\n                            selectedRow={selectedRow}\r\n                            addEntry={handleAddEntry}\r\n                            addSubEntry={handleAddSubEntry}\r\n                            removeEntry={handleRemoveEntry}\r\n                            removeSubEntries={handleRemoveSubEntries}\r\n                        />\r\n                    </Splitter.Panel>\r\n                    <Splitter.Panel defaultSize={350}>\r\n                        {selectedRow && (\r\n                            <DescriptiveVectorDetailPanel\r\n                                data={selectedRow}\r\n                                onChange={handleDataChanged}\r\n                            />\r\n                        )}\r\n                    </Splitter.Panel>\r\n                </Splitter>\r\n            )\r\n        },\r\n        {\r\n            key: TabType.TABLE,\r\n            label: i18n(\"Table\"),\r\n            children: (\r\n                <div className={styles.tableLayout}>\r\n                    <ExtendedDataGrid<TableNode>\r\n                        ref={gridRef}\r\n                        defaultGridConfiguration={{pageSize: -1}}\r\n                        columnDefs={columnDefs}\r\n                        onLoadData={(callback) => callback(1)}\r\n                        detailPanel={{\r\n                            defaultWidth: 350,\r\n                            renderer: () => selectedRow ? (\r\n                                <DescriptiveVectorDetailPanel\r\n                                    data={selectedRow}\r\n                                    onChange={handleDataChanged}\r\n                                />\r\n                            ) : <></>,\r\n                        }}\r\n                        onGridReady={selectGridRow}\r\n                        onRowDoubleClicked={handleRowDoubleClicked}\r\n                        onRowSelected={handleRowSelected}\r\n                        rowSelection={\"single\"}\r\n                        rowData={tableData}\r\n                    />\r\n                    <ControlButtons\r\n                        tableData={tableData}\r\n                        onMove={handleMove}\r\n                        selectedRow={selectedRow}\r\n                        addEntry={handleAddEntry}\r\n                        addSubEntry={handleAddSubEntry}\r\n                        removeEntry={handleRemoveEntry}\r\n                        removeSubEntries={handleRemoveSubEntries}\r\n                    />\r\n                </div>\r\n            )\r\n        },\r\n        {\r\n            key: TabType.GRAPH,\r\n            label: i18n(\"Graph\"),\r\n            children: (\r\n                <GraphPanel\r\n                    displayData={displayData}\r\n                    isLoading={isLoading}\r\n                    params={params}\r\n                    onParamsChange={setParams}\r\n                />\r\n            )\r\n        },\r\n        {\r\n            key: TabType.VALUES,\r\n            label: i18n(\"Values\"),\r\n            children: (\r\n                <TablePanel\r\n                    displayData={displayData}\r\n                    isLoading={isLoading}\r\n                    params={params}\r\n                    onParamsChange={setParams}\r\n                />\r\n            )\r\n        }\r\n    ], [treeData, columnDefs, originalData, tableData, selectedRow, height, handleRowSelected, handleDataChanged, displayData, isLoading, params, setParams, styles, activeTab]);\r\n\r\n    useEffect(() => {\r\n        loadData();\r\n    }, [loadData]);\r\n\r\n    useEffect(() => {\r\n        selectGridRow();\r\n    }, [selectGridRow]);\r\n\r\n    return (\r\n        <ModalDialog\r\n            {...modalProps}\r\n            mode={ModalDialogMode.NO_BUTTONS}\r\n            footer={(\r\n                <div className={styles.buttonsLayout}>\r\n                    <Space.Compact>\r\n                        <Button\r\n                            type={\"primary\"}\r\n                            disabled={!dataModified}\r\n                            icon={<SaveOutlined/>}\r\n                            onClick={handleSave}\r\n                        >\r\n                            {i18n(\"Save\")}\r\n                        </Button>\r\n                        <Button\r\n                            danger\r\n                            disabled={!dataModified}\r\n                            icon={<UndoIcon/>}\r\n                            onClick={handleRevert}\r\n                        >\r\n                            {i18n(\"Revert\")}\r\n                        </Button>\r\n                    </Space.Compact>\r\n                </div>\r\n            )}\r\n            onCancel={(event) => {\r\n                if (!dataModified) {\r\n                    onCancel?.(event);\r\n                } else {\r\n                    ModalDialog.confirm({\r\n                        mode: ModalDialogMode.YES_NO,\r\n                        title: i18n(\"Discard unsaved changes?\"),\r\n                        onOk: () => {\r\n                            onCancel?.(event);\r\n                        }\r\n                    });\r\n                }\r\n            }}\r\n        >\r\n            <div className={styles.tabsLayout}>\r\n                <Tabs\r\n                    type={\"card\"}\r\n                    items={items}\r\n                    style={{height: \"100%\"}}\r\n                    destroyOnHidden={false}\r\n                    activeKey={activeTab}\r\n                    onChange={(key) => setActiveTab(key as TabType)}\r\n                />\r\n            </div>\r\n        </ModalDialog>\r\n    )\r\n}"]}

package/coreui/components/edaManagerComponent/dialogs/edaTableEditorDialog.d.ts

@@ -0,0 +1,12 @@
+import { FC } from "react";
+import EdaManagerApi, { TreeItem } from "../../../../api/eda/edaManagerApi";
+import { ModalDialogProps } from "d2coreui/components/modal/modalDialog";
+import { VectorDataState } from "../context/edaVectorDataContext";
+interface Props extends Omit<ModalDialogProps, "mode" | "onOk"> {
+    api: EdaManagerApi;
+    data: VectorDataState;
+    vector: TreeItem;
+    onSaved: () => void;
+}
+export declare const EdaTableEditorDialog: FC<Props>;
+export {};