d2aura 26.0.13 → 26.0.14

package/coreui/components/edaManagerComponent/edaDetail.js

@@ -1,37 +1,50 @@
-import React from "react";
-import { EdaSamplingType, StepType } from "./constants/edaTypes";
-import i18n from "d2core/i18n/i18n";
-import { Tabs } from "antd";
-import { EdaDetailPanel } from "./components/edaDetailPanel";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { createStyles } from "antd-style";
-import WithCss from "d2coreui/components/style/withCss";
-import { SharedSampleRangeContext } from "./context/sharedSampleRange";
+import { EdaSamplingType, StepType } from "./constants/edaTypes";
+import { SharedSampleRangeContext } from "./context/sharedSampleRangeContext";
 import dayjs from "d2core/dayjs";
+import { loadDetail, loadPreference, savePreference, stepToDayJsType } from "./utils/utils";
 import { getRange } from "./components/edaTimeWindowPickerPanel";
-import { loadDetail, loadPreference, savePreference } from "./utils/utils";
-import { EdaVectorDataProvider } from "./context/edaVectorDataProvider";
+import i18n from "d2core/i18n/i18n";
+import { EdaDetailPanel } from "./components/edaDetailPanel";
 import { EdaTablePanel } from "./components/edaTablePanel";
+import { EdaVectorDataProvider } from "./context/edaVectorDataProvider";
+import { Button, ConfigProvider, Space, Tabs } from "antd";
 import { EdaGraphPanel } from "./components/edaGraphPanel";
+import { ExportOutlined, FullscreenExitOutlined, FullscreenOutlined } from "@ant-design/icons";
+import { createPortal } from "react-dom";
+import { ModalDialog } from "d2coreui/components/modal/modalDialog";
+import { useEdaActions } from "./context/useEdaActions";
 const useStyles = createStyles(({ css }) => {
     return {
         baseLayout: css `
             height: 100%;
             overflow: hidden;
-            
+
             .ant-tabs-content {
                 height: 100%;
             }
+        `,
+        fullscreenLayout: css `
+            .ant-design-draggable-modal-title {
+                display: none;
+            }
         `
     };
 });
-export class EdaDetail extends React.Component {
-    constructor(props) {
-        super(props);
+export const EdaDetail = ({ api, item, className, style, size, variant }) => {
+    const { styles } = useStyles();
+    const { triggerExport, renderActionDialogs } = useEdaActions(api);
+    const [activeTabKey, setActiveTabKey] = useState("detail");
+    const [detailData, setDetailData] = useState();
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [portalTarget, setPortalTarget] = useState(null);
+    const [sampleRange, setSampleRange] = useState(() => {
         const btTotal = dayjs(loadPreference("EDA_DETAIL_BT", dayjs().startOf('day').toISOString()));
         const etTotal = dayjs(loadPreference("EDA_DETAIL_ET", dayjs().endOf('day').toISOString()));
         const step = loadPreference("EDA_DETAIL_STEP", StepType.Daily);
         const { bt, et } = getRange(btTotal, etTotal, step);
-        const context = {
+        return {
             btTotal,
             etTotal,
             btWindow: bt,
@@ -39,100 +52,105 @@ export class EdaDetail extends React.Component {
             sampling: EdaSamplingType.Default,
             step,
             vectorPage: 1,
-            updateValues: (bt, et, step, vectorPage) => this.updateSampleRange(bt, et, step, vectorPage),
-            updateTimeWindow: (bt, et, step) => this.updateTimeWindow(bt, et, step),
+            totalCount: 0,
         };
-        this.state = {
-            tabs: [],
-            activeTabKey: "detail",
-            context: context,
-        };
-        this.updateSampleRange = this.updateSampleRange.bind(this);
-        this.updateTimeWindow = this.updateTimeWindow.bind(this);
-        this.setContextState = this.setContextState.bind(this);
-    }
-    async componentDidMount() {
-        const { api, item } = this.props;
-        const { data, type } = this.state;
-        if (item && !Array.isArray(item)) {
-            const result = await loadDetail(api, item);
-            this.setState({
-                type: item.type,
-                data: result,
-                tabs: this.getTabs(result, item.type),
-            });
-        }
-        else {
-            this.setState({ tabs: this.getTabs(data, type) });
-        }
-    }
-    async componentDidUpdate(prevProps, prevState) {
-        const { data, type, activeTabKey, context } = this.state;
-        const { api, item, size, variant, showTimeWindow, showChartLegend } = this.props;
-        if (prevProps.item !== item) {
-            if (item && !Array.isArray(item)) {
-                const result = await loadDetail(api, item);
-                this.setState({
-                    type: item.type,
-                    data: result,
-                    tabs: this.getTabs(result, item.type),
-                });
+    });
+    const updateSampleRange = useCallback((bt, et, sampling, vectorPage) => {
+        setSampleRange((s) => {
+            let { btWindow, etWindow } = s;
+            const unit = stepToDayJsType(s.step);
+            if (unit) {
+                if (s.btWindow.isBefore(bt)) {
+                    btWindow = bt;
+                    etWindow = bt.endOf(unit);
+                }
+                if (s.etWindow.isAfter(et)) {
+                    btWindow = et.startOf(unit);
+                    etWindow = et;
+                }
             }
+            else {
+                btWindow = bt;
+                etWindow = et;
+            }
+            return { ...s, btTotal: bt, etTotal: et, btWindow, etWindow, sampling, vectorPage };
+        });
+    }, []);
+    const updateTimeWindow = useCallback((bt, et, step) => {
+        setSampleRange((s) => ({ ...s, btWindow: bt, etWindow: et, step }));
+    }, []);
+    const updateTotalCount = useCallback((totalCount) => {
+        setSampleRange((s) => ({ ...s, totalCount }));
+    }, []);
+    const contextValue = useMemo(() => ({
+        ...sampleRange,
+        updateValues: updateSampleRange,
+        updateTimeWindow,
+        updateTotalCount,
+    }), [sampleRange, updateSampleRange, updateTimeWindow, updateTotalCount]);
+    const handleToggleFullscreen = useCallback(() => {
+        setIsFullscreen(!isFullscreen);
+        if (isFullscreen) {
+            setPortalTarget(null);
         }
-        else if (prevProps.size !== size ||
-            prevProps.variant !== variant ||
-            prevState.activeTabKey !== activeTabKey ||
-            prevProps.showTimeWindow !== showTimeWindow ||
-            prevProps.showChartLegend !== showChartLegend) {
-            this.setState({ tabs: this.getTabs(data, type) });
-        }
-        if (!prevState.context.btTotal.isSame(context.btTotal)) {
-            savePreference("EDA_DETAIL_BT", context.btTotal);
-        }
-        if (!prevState.context.etTotal.isSame(context.etTotal)) {
-            savePreference("EDA_DETAIL_ET", context.etTotal);
-        }
-        if (prevState.context.step !== context.step) {
-            savePreference("EDA_DETAIL_STEP", context.step);
+    }, [isFullscreen]);
+    const tabItems = useMemo(() => [
+        {
+            key: "detail",
+            label: i18n("Detail"),
+            children: (React.createElement(EdaDetailPanel, { api: api, data: detailData })),
+        },
+        {
+            key: "table",
+            label: i18n("Table"),
+            children: (React.createElement(EdaTablePanel, { api: api, data: detailData, isActive: activeTabKey === "table" })),
+        },
+        {
+            key: "graph",
+            label: i18n("Graph"),
+            children: (React.createElement(EdaGraphPanel, { api: api, data: detailData, isActive: activeTabKey === "graph" })),
+        },
+    ], [api, detailData, activeTabKey]);
+    const renderTabs = (React.createElement("div", { style: { position: 'relative', height: '100%', width: '100%', display: 'flex', flexDirection: 'column' } },
+        React.createElement(Tabs, { type: "card", className: styles.baseLayout, onChange: setActiveTabKey, activeKey: activeTabKey, destroyOnHidden: false, items: tabItems, tabBarExtraContent: {
+                right: (React.createElement(Space.Compact, null,
+                    detailData !== undefined && (React.createElement(Button, { icon: React.createElement(ExportOutlined, null), onClick: () => triggerExport(detailData), title: i18n("Export") })),
+                    React.createElement(Button, { disabled: item === undefined, icon: isFullscreen ? React.createElement(FullscreenExitOutlined, null) : React.createElement(FullscreenOutlined, null), onClick: handleToggleFullscreen, title: i18n(isFullscreen ? "Restore" : "Fullscreen") }))),
+            } })));
+    useEffect(() => {
+        let isMounted = true;
+        if (item && !Array.isArray(item)) {
+            loadDetail(api, item).then((result) => {
+                if (isMounted && result) {
+                    setDetailData(result);
+                }
+            });
         }
-    }
-    render() {
-        const { api, className, style, size, showTimeWindow } = this.props;
-        const { context, activeTabKey } = this.state;
-        return (React.createElement("div", { className: className, style: style },
-            React.createElement(WithCss, { useStyles: useStyles }, (css) => React.createElement(SharedSampleRangeContext.Provider, { value: context },
-                React.createElement(EdaVectorDataProvider, { api: api, showTimeWindow: showTimeWindow },
-                    React.createElement(Tabs, { size: size, type: "card", className: css.styles.baseLayout, onChange: (key) => this.setState({ activeTabKey: key }), activeKey: activeTabKey, items: this.state.tabs }))))));
-    }
-    updateSampleRange(bt, et, step, vectorPage) {
-        this.setContextState({ btTotal: bt, etTotal: et, sampling: step, vectorPage: vectorPage });
-    }
-    updateTimeWindow(bt, et, step) {
-        this.setContextState({ btWindow: bt, etWindow: et, step: step });
-    }
-    getTabs(data, type) {
-        const { size, variant, api, showTimeWindow, showChartLegend } = this.props;
-        const { activeTabKey } = this.state;
-        return [
-            {
-                key: "detail",
-                label: i18n("Detail"),
-                children: (React.createElement(EdaDetailPanel, { api: api, data: data, type: type, size: size, variant: variant })),
-            },
-            {
-                key: "table",
-                label: i18n("Table"),
-                children: (React.createElement(EdaTablePanel, { api: api, data: data, type: type, size: size, isActive: activeTabKey === "table", showTimeWindow: showTimeWindow })),
-            },
-            {
-                key: "graph",
-                label: i18n("Graph"),
-                children: (React.createElement(EdaGraphPanel, { api: api, data: data, type: type, size: size, isActive: activeTabKey === "graph", showTimeWindow: showTimeWindow, showChartLegend: showChartLegend })),
-            },
-        ];
-    }
-    setContextState(partialContext) {
-        this.setState({ context: { ...this.state.context, ...partialContext } });
-    }
-}
+        return () => {
+            isMounted = false;
+        };
+    }, [api, item]);
+    useEffect(() => {
+        savePreference("EDA_DETAIL_BT", sampleRange.btTotal.toISOString());
+        savePreference("EDA_DETAIL_ET", sampleRange.etTotal.toISOString());
+        savePreference("EDA_DETAIL_STEP", sampleRange.step);
+    }, [sampleRange.btTotal, sampleRange.etTotal, sampleRange.step]);
+    return (React.createElement(ConfigProvider, { componentSize: size, variant: variant },
+        React.createElement("div", { className: className, style: style },
+            React.createElement(SharedSampleRangeContext.Provider, { value: contextValue },
+                React.createElement(EdaVectorDataProvider, { api: api },
+                    isFullscreen && portalTarget ? createPortal(renderTabs, portalTarget) : renderTabs,
+                    React.createElement(ModalDialog, { classNames: { header: styles.fullscreenLayout }, open: isFullscreen, onCancel: handleToggleFullscreen, footer: null, closable: false, initialWidth: window.innerWidth * 0.9, initialHeight: window.innerHeight * 0.9, destroyOnHidden: false, mode: "NO_BUTTONS", styles: {
+                            header: {
+                                padding: 0,
+                                margin: 0
+                            },
+                        } },
+                        React.createElement("div", { style: { width: '100%', height: '100%' }, ref: (el) => {
+                                if (el && !portalTarget) {
+                                    setPortalTarget(el);
+                                }
+                            } })),
+                    renderActionDialogs())))));
+};
 //# sourceMappingURL=edaDetail.js.map

package/coreui/components/edaManagerComponent/edaDetail.js.map

@@ -1 +1 @@
-{"version":3,"file":"edaDetail.js","sourceRoot":"","sources":["../../../../../coreui/components/edaManagerComponent/edaDetail.tsx"],"names":[],"mappings":"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","sourcesContent":["import EdaManagerApi from \"../../../api/eda/edaManagerApi\";\r\nimport React from \"react\";\r\nimport {SD_EM_Tree_Item} from \"../../../api/eda/generated/structures\";\r\nimport {EdaSamplingType, GroupData, IdType, ScenarioData, StepType, TypedIndex, VectorData} from \"./constants/edaTypes\";\r\nimport i18n from \"d2core/i18n/i18n\";\r\nimport {Tabs} from \"antd\";\r\nimport {Tab} from \"rc-tabs/lib/interface\"\r\nimport {EdaDetailPanel} from \"./components/edaDetailPanel\";\r\nimport {createStyles} from \"antd-style\";\r\nimport WithCss from \"d2coreui/components/style/withCss\";\r\nimport {SizeType} from \"antd/lib/config-provider/SizeContext\";\r\nimport {SharedSampleRange, SharedSampleRangeContext} from \"./context/sharedSampleRange\";\r\nimport dayjs from \"d2core/dayjs\";\r\nimport {getRange} from \"./components/edaTimeWindowPickerPanel\";\r\nimport {loadDetail, loadPreference, savePreference} from \"./utils/utils\";\r\nimport {StorageTypes} from \"./constants/storageTypes\";\r\nimport {Variant} from \"antd/es/config-provider\";\r\nimport {EdaVectorDataProvider} from \"./context/edaVectorDataProvider\";\r\nimport {EdaTablePanel} from \"./components/edaTablePanel\";\r\nimport {EdaGraphPanel} from \"./components/edaGraphPanel\";\r\n\r\nconst useStyles = createStyles(({css},) => {\r\n    return {\r\n        baseLayout: css`\r\n            height: 100%;\r\n            overflow: hidden;\r\n            \r\n            .ant-tabs-content {\r\n                height: 100%;\r\n            }\r\n        `\r\n    }\r\n});\r\n\r\nexport type ItemType = SD_EM_Tree_Item[] | TypedIndex\r\n\r\ninterface Props {\r\n    api: EdaManagerApi\r\n    item?: ItemType\r\n    className?: string\r\n    style?: React.CSSProperties\r\n\r\n    size?: SizeType\r\n    variant?: Variant\r\n\r\n    showTimeWindow?: boolean\r\n    showChartLegend?: boolean\r\n}\r\n\r\ninterface State {\r\n    type?: IdType\r\n    data?: VectorData | GroupData | ScenarioData\r\n    tabs: Tab[]\r\n    activeTabKey: string\r\n    context: SharedSampleRange\r\n}\r\n\r\nexport class EdaDetail extends React.Component<Props, State> {\r\n    constructor(props: Readonly<Props>) {\r\n        super(props);\r\n        const btTotal = dayjs(loadPreference(StorageTypes.EDA_DETAIL_BT, dayjs().startOf('day').toISOString()));\r\n        const etTotal = dayjs(loadPreference(StorageTypes.EDA_DETAIL_ET, dayjs().endOf('day').toISOString()));\r\n        const step = loadPreference(StorageTypes.EDA_DETAIL_STEP, StepType.Daily);\r\n        const {bt, et} = getRange(btTotal, etTotal, step);\r\n        const context: SharedSampleRange = {\r\n            btTotal,\r\n            etTotal,\r\n            btWindow: bt,\r\n            etWindow: et,\r\n            sampling: EdaSamplingType.Default,\r\n            step,\r\n            vectorPage: 1,\r\n            updateValues: (bt, et, step, vectorPage) => this.updateSampleRange(bt, et, step, vectorPage),\r\n            updateTimeWindow: (bt, et, step) => this.updateTimeWindow(bt, et, step),\r\n        }\r\n\r\n        this.state = {\r\n            tabs: [],\r\n            activeTabKey: \"detail\",\r\n            context: context,\r\n        }\r\n\r\n        this.updateSampleRange = this.updateSampleRange.bind(this);\r\n        this.updateTimeWindow = this.updateTimeWindow.bind(this);\r\n        this.setContextState = this.setContextState.bind(this);\r\n    }\r\n\r\n    async componentDidMount() {\r\n        const {api, item} = this.props;\r\n        const {data, type} = this.state;\r\n\r\n        if (item && !Array.isArray(item)) {\r\n            const result = await loadDetail(api, item);\r\n\r\n            this.setState({\r\n                type: item.type,\r\n                data: result,\r\n                tabs: this.getTabs(result, item.type),\r\n            });\r\n        } else {\r\n            this.setState({tabs: this.getTabs(data, type)});\r\n        }\r\n    }\r\n\r\n    async componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>) {\r\n        const {data, type, activeTabKey, context} = this.state;\r\n        const {api, item, size, variant, showTimeWindow, showChartLegend} = this.props;\r\n\r\n        if (prevProps.item !== item) {\r\n            if (item && !Array.isArray(item)) {\r\n                const result = await loadDetail(api, item);\r\n\r\n                this.setState({\r\n                    type: item.type,\r\n                    data: result,\r\n                    tabs: this.getTabs(result, item.type),\r\n                });\r\n            }\r\n        } else if (\r\n            prevProps.size !== size ||\r\n            prevProps.variant !== variant ||\r\n            prevState.activeTabKey !== activeTabKey ||\r\n            prevProps.showTimeWindow !== showTimeWindow ||\r\n            prevProps.showChartLegend !== showChartLegend\r\n        ) {\r\n            this.setState({tabs: this.getTabs(data, type)});\r\n        }\r\n\r\n        if (!prevState.context.btTotal.isSame(context.btTotal)) {\r\n            savePreference(StorageTypes.EDA_DETAIL_BT, context.btTotal);\r\n        }\r\n        if (!prevState.context.etTotal.isSame(context.etTotal)) {\r\n            savePreference(StorageTypes.EDA_DETAIL_ET, context.etTotal);\r\n        }\r\n        if (prevState.context.step !== context.step) {\r\n            savePreference(StorageTypes.EDA_DETAIL_STEP, context.step);\r\n        }\r\n    }\r\n\r\n    render() {\r\n        const {api, className, style, size, showTimeWindow} = this.props;\r\n        const {context, activeTabKey} = this.state;\r\n\r\n        return (\r\n            <div className={className} style={style}>\r\n                <WithCss useStyles={useStyles}>\r\n                    {(css) =>\r\n                        <SharedSampleRangeContext.Provider value={context}>\r\n                            <EdaVectorDataProvider\r\n                                api={api}\r\n                                showTimeWindow={showTimeWindow}\r\n                            >\r\n                                <Tabs\r\n                                    size={size}\r\n                                    type={\"card\"}\r\n                                    className={css.styles.baseLayout}\r\n                                    onChange={(key) => this.setState({activeTabKey: key})}\r\n                                    activeKey={activeTabKey}\r\n                                    items={this.state.tabs}/>\r\n                            </EdaVectorDataProvider>\r\n                        </SharedSampleRangeContext.Provider>\r\n                    }\r\n                </WithCss>\r\n            </div>\r\n        )\r\n    }\r\n\r\n    private updateSampleRange(bt: dayjs.Dayjs, et: dayjs.Dayjs, step: EdaSamplingType, vectorPage: number) {\r\n        this.setContextState({btTotal: bt, etTotal: et, sampling: step, vectorPage: vectorPage});\r\n    }\r\n\r\n    private updateTimeWindow(bt: dayjs.Dayjs, et: dayjs.Dayjs, step: StepType) {\r\n        this.setContextState({btWindow: bt, etWindow: et, step: step});\r\n    }\r\n\r\n    private getTabs(data?: VectorData | GroupData | ScenarioData, type?: IdType): Tab[] {\r\n        const {size, variant, api, showTimeWindow, showChartLegend} = this.props;\r\n        const {activeTabKey} = this.state;\r\n\r\n        return [\r\n            {\r\n                key: \"detail\",\r\n                label: i18n(\"Detail\"),\r\n                children: (\r\n                    <EdaDetailPanel\r\n                        api={api}\r\n                        data={data}\r\n                        type={type}\r\n                        size={size}\r\n                        variant={variant}\r\n                    />\r\n                ),\r\n            },\r\n            {\r\n                key: \"table\",\r\n                label: i18n(\"Table\"),\r\n                children: (\r\n                    <EdaTablePanel\r\n                        api={api}\r\n                        data={data}\r\n                        type={type}\r\n                        size={size}\r\n                        isActive={activeTabKey === \"table\"}\r\n                        showTimeWindow={showTimeWindow}\r\n                    />\r\n                ),\r\n            },\r\n            {\r\n                key: \"graph\",\r\n                label: i18n(\"Graph\"),\r\n                children: (\r\n                    <EdaGraphPanel\r\n                        api={api}\r\n                        data={data}\r\n                        type={type}\r\n                        size={size}\r\n                        isActive={activeTabKey === \"graph\"}\r\n                        showTimeWindow={showTimeWindow}\r\n                        showChartLegend={showChartLegend}\r\n                    />\r\n                ),\r\n            },\r\n        ]\r\n    }\r\n\r\n    private setContextState(partialContext: Partial<SharedSampleRange>) {\r\n        this.setState({context: {...this.state.context, ...partialContext}});\r\n    }\r\n}"]}
+{"version":3,"file":"edaDetail.js","sourceRoot":"","sources":["../../../../../coreui/components/edaManagerComponent/edaDetail.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {FC, useCallback, useEffect, useMemo, useState} from \"react\";\r\nimport {createStyles} from \"antd-style\";\r\nimport {EdaSamplingType, StepType, TypedData, TypedIndex} from \"./constants/edaTypes\";\r\nimport EdaManagerApi, {TreeItem} from \"../../../api/eda/edaManagerApi\";\r\nimport {SizeType} from \"antd/lib/config-provider/SizeContext\";\r\nimport {Variant} from \"antd/es/config-provider\";\r\nimport {SharedSampleRangeContext, SharedSampleRangeState} from \"./context/sharedSampleRangeContext\";\r\nimport dayjs from \"d2core/dayjs\";\r\nimport {loadDetail, loadPreference, savePreference, stepToDayJsType} from \"./utils/utils\";\r\nimport {StorageTypes} from \"./constants/storageTypes\";\r\nimport {getRange} from \"./components/edaTimeWindowPickerPanel\";\r\nimport i18n from \"d2core/i18n/i18n\";\r\nimport {EdaDetailPanel} from \"./components/edaDetailPanel\";\r\nimport {EdaTablePanel} from \"./components/edaTablePanel\";\r\nimport {EdaVectorDataProvider} from \"./context/edaVectorDataProvider\";\r\nimport {Button, ConfigProvider, Space, Tabs} from \"antd\";\r\nimport {EdaConfiguration} from \"./context/edaConfigContext\";\r\nimport {EdaGraphPanel} from \"./components/edaGraphPanel\";\r\nimport {ExportOutlined, FullscreenExitOutlined, FullscreenOutlined} from \"@ant-design/icons\";\r\nimport {createPortal} from \"react-dom\";\r\nimport {ModalDialog, ModalDialogMode} from \"d2coreui/components/modal/modalDialog\";\r\nimport {useEdaActions} from \"./context/useEdaActions\";\r\n\r\nconst useStyles = createStyles(({css},) => {\r\n    return {\r\n        baseLayout: css`\r\n            height: 100%;\r\n            overflow: hidden;\r\n\r\n            .ant-tabs-content {\r\n                height: 100%;\r\n            }\r\n        `,\r\n        fullscreenLayout: css`\r\n            .ant-design-draggable-modal-title {\r\n                display: none;\r\n            }\r\n        `\r\n    }\r\n});\r\n\r\nexport type ItemType = TreeItem[] | TypedIndex\r\n\r\ninterface Props {\r\n    api: EdaManagerApi\r\n    item?: ItemType\r\n    className?: string\r\n    style?: React.CSSProperties\r\n\r\n    size?: SizeType\r\n    variant?: Variant\r\n\r\n    // Eda detail configuration\r\n    configuration?: EdaConfiguration\r\n}\r\n\r\nexport const EdaDetail: FC<Props> = ({api, item, className, style, size, variant}) => {\r\n    const {styles} = useStyles();\r\n    const {triggerExport, renderActionDialogs} = useEdaActions(api);\r\n\r\n    const [activeTabKey, setActiveTabKey] = useState<string>(\"detail\");\r\n    const [detailData, setDetailData] = useState<TypedData>();\r\n\r\n    const [isFullscreen, setIsFullscreen] = useState<boolean>(false);\r\n    const [portalTarget, setPortalTarget] = useState<HTMLDivElement | null>(null);\r\n\r\n    const [sampleRange, setSampleRange] = useState<SharedSampleRangeState>(() => {\r\n        const btTotal = dayjs(loadPreference(StorageTypes.EDA_DETAIL_BT, dayjs().startOf('day').toISOString()));\r\n        const etTotal = dayjs(loadPreference(StorageTypes.EDA_DETAIL_ET, dayjs().endOf('day').toISOString()));\r\n        const step = loadPreference(StorageTypes.EDA_DETAIL_STEP, StepType.Daily);\r\n        const {bt, et} = getRange(btTotal, etTotal, step);\r\n\r\n        return {\r\n            btTotal,\r\n            etTotal,\r\n            btWindow: bt,\r\n            etWindow: et,\r\n            sampling: EdaSamplingType.Default,\r\n            step,\r\n            vectorPage: 1,\r\n            totalCount: 0,\r\n        }\r\n    });\r\n\r\n    const updateSampleRange = useCallback((bt: dayjs.Dayjs, et: dayjs.Dayjs, sampling: EdaSamplingType, vectorPage: number) => {\r\n        setSampleRange((s) => {\r\n            let {btWindow, etWindow} = s;\r\n            const unit = stepToDayJsType(s.step);\r\n\r\n            if (unit) {\r\n                if (s.btWindow.isBefore(bt)) {\r\n                    btWindow = bt;\r\n                    etWindow = bt.endOf(unit);\r\n                }\r\n\r\n                if (s.etWindow.isAfter(et)) {\r\n                    btWindow = et.startOf(unit);\r\n                    etWindow = et;\r\n                }\r\n            } else {\r\n                btWindow = bt;\r\n                etWindow = et;\r\n            }\r\n\r\n            return {...s, btTotal: bt, etTotal: et, btWindow, etWindow, sampling, vectorPage}\r\n        });\r\n    }, []);\r\n    const updateTimeWindow = useCallback((bt: dayjs.Dayjs, et: dayjs.Dayjs, step: StepType) => {\r\n        setSampleRange((s) => ({...s, btWindow: bt, etWindow: et, step}));\r\n    }, []);\r\n    const updateTotalCount = useCallback((totalCount: number) => {\r\n        setSampleRange((s) => ({...s, totalCount}));\r\n    }, []);\r\n    const contextValue: SharedSampleRangeContext = useMemo(() => ({\r\n        ...sampleRange,\r\n        updateValues: updateSampleRange,\r\n        updateTimeWindow,\r\n        updateTotalCount,\r\n    }), [sampleRange, updateSampleRange, updateTimeWindow, updateTotalCount]);\r\n\r\n    const handleToggleFullscreen = useCallback(() => {\r\n        setIsFullscreen(!isFullscreen);\r\n\r\n        if (isFullscreen) {\r\n            setPortalTarget(null);\r\n        }\r\n    }, [isFullscreen]);\r\n\r\n    const tabItems = useMemo(() => [\r\n        {\r\n            key: \"detail\",\r\n            label: i18n(\"Detail\"),\r\n            children: (\r\n                <EdaDetailPanel\r\n                    api={api}\r\n                    data={detailData}\r\n                />\r\n            ),\r\n        },\r\n        {\r\n            key: \"table\",\r\n            label: i18n(\"Table\"),\r\n            children: (\r\n                <EdaTablePanel\r\n                    api={api}\r\n                    data={detailData}\r\n                    isActive={activeTabKey === \"table\"}\r\n                />\r\n            ),\r\n        },\r\n        {\r\n            key: \"graph\",\r\n            label: i18n(\"Graph\"),\r\n            children: (\r\n                <EdaGraphPanel\r\n                    api={api}\r\n                    data={detailData}\r\n                    isActive={activeTabKey === \"graph\"}\r\n                />\r\n            ),\r\n        },\r\n    ], [api, detailData, activeTabKey]);\r\n\r\n    const renderTabs = (\r\n        <div style={{position: 'relative', height: '100%', width: '100%', display: 'flex', flexDirection: 'column'}}>\r\n            <Tabs\r\n                type={\"card\"}\r\n                className={styles.baseLayout}\r\n                onChange={setActiveTabKey}\r\n                activeKey={activeTabKey}\r\n                destroyOnHidden={false}\r\n                items={tabItems}\r\n                tabBarExtraContent={{\r\n                    right: (\r\n                        <Space.Compact>\r\n                            {detailData !== undefined && (\r\n                                <Button\r\n                                    icon={<ExportOutlined />}\r\n                                    onClick={() => triggerExport(detailData)}\r\n                                    title={i18n(\"Export\")}\r\n                                />\r\n                            )}\r\n                            <Button\r\n                                disabled={item === undefined}\r\n                                icon={isFullscreen ? <FullscreenExitOutlined/> : <FullscreenOutlined/>}\r\n                                onClick={handleToggleFullscreen}\r\n                                title={i18n(isFullscreen ? \"Restore\" : \"Fullscreen\")}\r\n                            />\r\n                        </Space.Compact>\r\n                    ),\r\n                }}\r\n            />\r\n        </div>\r\n    );\r\n\r\n    useEffect(() => {\r\n        let isMounted = true;\r\n\r\n        if (item && !Array.isArray(item)) {\r\n            loadDetail(api, item).then((result) => {\r\n                if (isMounted && result) {\r\n                    setDetailData(result);\r\n                }\r\n            });\r\n        }\r\n\r\n        return () => {\r\n            isMounted = false;\r\n        }\r\n    }, [api, item]);\r\n\r\n    useEffect(() => {\r\n        savePreference(StorageTypes.EDA_DETAIL_BT, sampleRange.btTotal.toISOString());\r\n        savePreference(StorageTypes.EDA_DETAIL_ET, sampleRange.etTotal.toISOString());\r\n        savePreference(StorageTypes.EDA_DETAIL_STEP, sampleRange.step);\r\n    }, [sampleRange.btTotal, sampleRange.etTotal, sampleRange.step]);\r\n\r\n    return (\r\n        <ConfigProvider componentSize={size} variant={variant}>\r\n            <div className={className} style={style}>\r\n                <SharedSampleRangeContext.Provider value={contextValue}>\r\n                    <EdaVectorDataProvider api={api}>\r\n                        {isFullscreen && portalTarget ? createPortal(renderTabs, portalTarget) : renderTabs}\r\n                        <ModalDialog\r\n                            classNames={{header: styles.fullscreenLayout}}\r\n                            open={isFullscreen}\r\n                            onCancel={handleToggleFullscreen}\r\n                            footer={null}\r\n                            closable={false}\r\n                            initialWidth={window.innerWidth * 0.9}\r\n                            initialHeight={window.innerHeight * 0.9}\r\n                            destroyOnHidden={false}\r\n                            mode={ModalDialogMode.NO_BUTTONS}\r\n                            styles={{\r\n                                header: {\r\n                                    padding: 0,\r\n                                    margin: 0\r\n                                },\r\n                            }}\r\n                        >\r\n                            <div\r\n                                style={{width: '100%', height: '100%'}}\r\n                                ref={(el) => {\r\n                                    if (el && !portalTarget) {\r\n                                        setPortalTarget(el);\r\n                                    }\r\n                                }}\r\n                            />\r\n                        </ModalDialog>\r\n                        {renderActionDialogs()}\r\n                    </EdaVectorDataProvider>\r\n                </SharedSampleRangeContext.Provider>\r\n            </div>\r\n        </ConfigProvider>\r\n    );\r\n}"]}

package/coreui/components/edaManagerComponent/edaManager.d.ts

@@ -1,20 +1,13 @@
-import React from "react";
-import { ItemType } from "./edaDetail";
+import { FC } from "react";
 import EdaManagerApi from "../../../api/eda/edaManagerApi";
 import { SizeType } from "antd/lib/config-provider/SizeContext";
 import { Variant } from "antd/es/config-provider";
+import { EdaConfiguration } from "./context/edaConfigContext";
 interface Props {
     api: EdaManagerApi;
     size?: SizeType;
     variant?: Variant;
-    showTimeWindow?: boolean;
-    showChartLegend?: boolean;
-}
-interface State {
-    selectedItem?: ItemType;
-}
-export declare class EdaManager extends React.Component<Props, State> {
-    constructor(props: Readonly<Props>);
-    render(): React.JSX.Element;
+    configuration?: EdaConfiguration;
 }
+export declare const EdaManager: FC<Props>;
 export {};

package/coreui/components/edaManagerComponent/edaManager.js

@@ -1,33 +1,40 @@
-import React from "react";
-import { Splitter } from "antd";
+import React, { useCallback, useState } from "react";
+import { ConfigProvider, Splitter } from "antd";
 import { EdaNavigator } from "./edaNavigator";
-import { EdaDetail } from "./edaDetail";
-import WithCss from "d2coreui/components/style/withCss";
 import { createStyles } from "antd-style";
+import { EdaDetail } from "./edaDetail";
+import { EdaConfigProvider } from "./context/edaConfigContext";
 const useStyles = createStyles(({ css, token }) => {
     return {
         baseLayout: css `
             width: 100%;
             height: 100%;
             padding: ${token.paddingXXS}px;
-        `
+        `,
+        navPanel: css `
+            height: 100%;
+            padding-inline-end: ${token?.paddingXXS}px;
+        `,
+        detailPanel: css `
+            height: 100%;
+            padding-inline-start: ${token?.paddingXXS}px;
+        `,
     };
 });
-export class EdaManager extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {};
-    }
-    render() {
-        const { selectedItem } = this.state;
-        const { size, variant, showTimeWindow } = this.props;
-        return (React.createElement(WithCss, { useStyles: useStyles }, (css) => React.createElement(Splitter, { className: css.styles.baseLayout },
-            React.createElement(Splitter.Panel, { defaultSize: "25%" },
-                React.createElement(EdaNavigator, { api: this.props.api, size: size, style: { paddingRight: css.theme.paddingXXS }, onDoubleClick: (item) => {
-                        this.setState({ selectedItem: item });
-                    } })),
-            React.createElement(Splitter.Panel, null,
-                React.createElement(EdaDetail, { api: this.props.api, item: selectedItem, size: size, variant: variant, showTimeWindow: showTimeWindow, showChartLegend: showTimeWindow, style: { width: '100%', height: '100%', paddingLeft: css.theme.paddingXXS } })))));
-    }
-}
+export const EdaManager = ({ api, size, variant, configuration }) => {
+    const { styles } = useStyles();
+    const [selectedItem, setSelectedItem] = useState();
+    const handleDoubleClick = useCallback((item) => {
+        setSelectedItem(item);
+    }, []);
+    return (React.createElement(EdaConfigProvider, { config: configuration },
+        React.createElement(ConfigProvider, { componentSize: size, variant: variant },
+            React.createElement(Splitter, { className: styles.baseLayout },
+                React.createElement(Splitter.Panel, { defaultSize: "25%" },
+                    React.createElement("div", { className: styles.navPanel },
+                        React.createElement(EdaNavigator, { api: api, onDoubleClick: handleDoubleClick }))),
+                React.createElement(Splitter.Panel, null,
+                    React.createElement("div", { className: styles.detailPanel },
+                        React.createElement(EdaDetail, { api: api, item: selectedItem, style: { width: '100%', height: '100%' } })))))));
+};
 //# sourceMappingURL=edaManager.js.map

package/coreui/components/edaManagerComponent/edaManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"edaManager.js","sourceRoot":"","sources":["../../../../../coreui/components/edaManagerComponent/edaManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,QAAQ,EAAC,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,SAAS,EAAW,MAAM,aAAa,CAAC;AAGhD,OAAO,OAAO,MAAM,mCAAmC,CAAC;AACxD,OAAO,EAAC,YAAY,EAAC,MAAM,YAAY,CAAC;AAGxC,MAAM,SAAS,GAAG,YAAY,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAC,EAAG,EAAE;IAC7C,OAAO;QACH,UAAU,EAAE,GAAG,CAAA;;;uBAGA,KAAK,CAAC,UAAU;SAC9B;KACJ,CAAA;AACL,CAAC,CAAC,CAAC;AAkBH,MAAM,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAuB;IACzD,YAAY,KAAsB;QAC9B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;IACnB,CAAC;IAED,MAAM;QACF,MAAM,EAAC,YAAY,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAClC,MAAM,EAAC,IAAI,EAAE,OAAO,EAAE,cAAc,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAEnD,OAAO,CACH,oBAAC,OAAO,IAAC,SAAS,EAAE,SAAS,IACxB,CAAC,GAAG,EAAE,EAAE,CACL,oBAAC,QAAQ,IAAC,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,UAAU;YACtC,oBAAC,QAAQ,CAAC,KAAK,IAAC,WAAW,EAAE,KAAK;gBAC9B,oBAAC,YAAY,IAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EACnB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,EAAC,YAAY,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,EAAC,EAC3C,aAAa,EAAE,CAAC,IAAI,EAAE,EAAE;wBACpB,IAAI,CAAC,QAAQ,CAAC,EAAC,YAAY,EAAE,IAAI,EAAC,CAAC,CAAC;oBACxC,CAAC,GACb,CACW;YACjB,oBAAC,QAAQ,CAAC,KAAK;gBACX,oBAAC,SAAS,IAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EACnB,IAAI,EAAE,YAAY,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,cAAc,EAC/B,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,EAAC,GAClF,CACW,CACV,CAET,CACb,CAAC;IACN,CAAC;CACJ","sourcesContent":["import React from \"react\";\r\nimport {Splitter} from \"antd\";\r\nimport {EdaNavigator} from \"./edaNavigator\";\r\nimport {EdaDetail, ItemType} from \"./edaDetail\";\r\nimport EdaManagerApi from \"../../../api/eda/edaManagerApi\";\r\nimport {SizeType} from \"antd/lib/config-provider/SizeContext\";\r\nimport WithCss from \"d2coreui/components/style/withCss\";\r\nimport {createStyles} from \"antd-style\";\r\nimport {Variant} from \"antd/es/config-provider\";\r\n\r\nconst useStyles = createStyles(({css, token},) => {\r\n    return {\r\n        baseLayout: css`\r\n            width: 100%;\r\n            height: 100%;\r\n            padding: ${token.paddingXXS}px;\r\n        `\r\n    }\r\n});\r\n\r\ninterface Props {\r\n    api: EdaManagerApi\r\n\r\n    // Size of AntD components\r\n    size?: SizeType\r\n    variant?: Variant\r\n    // Displaying of time window selector in Table and Graph panel\r\n    showTimeWindow?: boolean\r\n    // Default displayed chart legend\r\n    showChartLegend?: boolean\r\n}\r\n\r\ninterface State {\r\n    selectedItem?: ItemType\r\n}\r\n\r\nexport class EdaManager extends React.Component<Props, State> {\r\n    constructor(props: Readonly<Props>) {\r\n        super(props);\r\n        this.state = {}\r\n    }\r\n\r\n    render() {\r\n        const {selectedItem} = this.state;\r\n        const {size, variant, showTimeWindow} = this.props;\r\n\r\n        return (\r\n            <WithCss useStyles={useStyles}>\r\n                {(css) =>\r\n                    <Splitter className={css.styles.baseLayout}>\r\n                        <Splitter.Panel defaultSize={\"25%\"}>\r\n                            <EdaNavigator api={this.props.api}\r\n                                          size={size}\r\n                                          style={{paddingRight: css.theme.paddingXXS}}\r\n                                          onDoubleClick={(item) => {\r\n                                              this.setState({selectedItem: item});\r\n                                          }}\r\n                            />\r\n                        </Splitter.Panel>\r\n                        <Splitter.Panel>\r\n                            <EdaDetail api={this.props.api}\r\n                                       item={selectedItem}\r\n                                       size={size}\r\n                                       variant={variant}\r\n                                       showTimeWindow={showTimeWindow}\r\n                                       showChartLegend={showTimeWindow}\r\n                                       style={{width: '100%', height: '100%', paddingLeft: css.theme.paddingXXS}}\r\n                            />\r\n                        </Splitter.Panel>\r\n                    </Splitter>\r\n                }\r\n            </WithCss>\r\n        );\r\n    }\r\n}"]}
+{"version":3,"file":"edaManager.js","sourceRoot":"","sources":["../../../../../coreui/components/edaManagerComponent/edaManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAK,WAAW,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AACvD,OAAO,EAAC,cAAc,EAAE,QAAQ,EAAC,MAAM,MAAM,CAAC;AAC9C,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAG5C,OAAO,EAAC,YAAY,EAAC,MAAM,YAAY,CAAC;AAGxC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,iBAAiB,EAAmB,MAAM,4BAA4B,CAAC;AAE/E,MAAM,SAAS,GAAG,YAAY,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAC,EAAG,EAAE;IAC7C,OAAO;QACH,UAAU,EAAE,GAAG,CAAA;;;uBAGA,KAAK,CAAC,UAAU;SAC9B;QACD,QAAQ,EAAE,GAAG,CAAA;;kCAEa,KAAK,EAAE,UAAU;SAC1C;QACD,WAAW,EAAE,GAAG,CAAA;;oCAEY,KAAK,EAAE,UAAU;SAC5C;KACJ,CAAA;AACL,CAAC,CAAC,CAAC;AAYH,MAAM,CAAC,MAAM,UAAU,GAAc,CAAC,EAAC,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAC,EAAE,EAAE;IACzE,MAAM,EAAC,MAAM,EAAC,GAAG,SAAS,EAAE,CAAC;IAE7B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAc,CAAC;IAE/D,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,IAAgB,EAAE,EAAE;QACvD,eAAe,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,oBAAC,iBAAiB,IAAC,MAAM,EAAE,aAAa;QACpC,oBAAC,cAAc,IAAC,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO;YACjD,oBAAC,QAAQ,IAAC,SAAS,EAAE,MAAM,CAAC,UAAU;gBAClC,oBAAC,QAAQ,CAAC,KAAK,IAAC,WAAW,EAAE,KAAK;oBAC9B,6BAAK,SAAS,EAAE,MAAM,CAAC,QAAQ;wBAC3B,oBAAC,YAAY,IACT,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,iBAAiB,GAClC,CACA,CACO;gBACjB,oBAAC,QAAQ,CAAC,KAAK;oBACX,6BAAK,SAAS,EAAE,MAAM,CAAC,WAAW;wBAC9B,oBAAC,SAAS,IACN,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,YAAY,EAClB,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAC,GACxC,CACA,CACO,CACV,CACE,CACD,CACvB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import React, {FC, useCallback, useState} from \"react\";\r\nimport {ConfigProvider, Splitter} from \"antd\";\r\nimport {EdaNavigator} from \"./edaNavigator\";\r\nimport EdaManagerApi from \"../../../api/eda/edaManagerApi\";\r\nimport {SizeType} from \"antd/lib/config-provider/SizeContext\";\r\nimport {createStyles} from \"antd-style\";\r\nimport {Variant} from \"antd/es/config-provider\";\r\nimport {TypedIndex} from \"./constants/edaTypes\";\r\nimport {EdaDetail} from \"./edaDetail\";\r\nimport {EdaConfigProvider, EdaConfiguration} from \"./context/edaConfigContext\";\r\n\r\nconst useStyles = createStyles(({css, token},) => {\r\n    return {\r\n        baseLayout: css`\r\n            width: 100%;\r\n            height: 100%;\r\n            padding: ${token.paddingXXS}px;\r\n        `,\r\n        navPanel: css`\r\n            height: 100%;\r\n            padding-inline-end: ${token?.paddingXXS}px;\r\n        `,\r\n        detailPanel: css`\r\n            height: 100%;\r\n            padding-inline-start: ${token?.paddingXXS}px;\r\n        `,\r\n    }\r\n});\r\n\r\ninterface Props {\r\n    api: EdaManagerApi\r\n    // Size of AntD components\r\n    size?: SizeType\r\n    // Variant of AntD components\r\n    variant?: Variant\r\n    // Eda manager configuration\r\n    configuration?: EdaConfiguration\r\n}\r\n\r\nexport const EdaManager: FC<Props> = ({api, size, variant, configuration}) => {\r\n    const {styles} = useStyles();\r\n\r\n    const [selectedItem, setSelectedItem] = useState<TypedIndex>();\r\n\r\n    const handleDoubleClick = useCallback((item: TypedIndex) => {\r\n        setSelectedItem(item);\r\n    }, []);\r\n\r\n    return (\r\n        <EdaConfigProvider config={configuration}>\r\n            <ConfigProvider componentSize={size} variant={variant}>\r\n                <Splitter className={styles.baseLayout}>\r\n                    <Splitter.Panel defaultSize={\"25%\"}>\r\n                        <div className={styles.navPanel}>\r\n                            <EdaNavigator\r\n                                api={api}\r\n                                onDoubleClick={handleDoubleClick}\r\n                            />\r\n                        </div>\r\n                    </Splitter.Panel>\r\n                    <Splitter.Panel>\r\n                        <div className={styles.detailPanel}>\r\n                            <EdaDetail\r\n                                api={api}\r\n                                item={selectedItem}\r\n                                style={{width: '100%', height: '100%'}}\r\n                            />\r\n                        </div>\r\n                    </Splitter.Panel>\r\n                </Splitter>\r\n            </ConfigProvider>\r\n        </EdaConfigProvider>\r\n    );\r\n};"]}

package/coreui/components/edaManagerComponent/edaNavigator.d.ts

@@ -1,20 +1,12 @@
-import React from "react";
-import EdaManagerApi from "../../../api/eda/edaManagerApi";
+import React, { FC } from "react";
+import EdaManagerApi, { TreeItem } from "../../../api/eda/edaManagerApi";
 import { TypedIndex } from "./constants/edaTypes";
 import { SizeType } from "antd/lib/config-provider/SizeContext";
-import { SD_EM_Tree_Item } from "../../../api/eda/generated/structures";
 interface Props {
     api: EdaManagerApi;
     style?: React.CSSProperties;
     size?: SizeType;
-    onDoubleClick?: (id: TypedIndex, item: SD_EM_Tree_Item) => void;
-}
-interface State {
-}
-export declare class EdaNavigator extends React.Component<Props, State> {
-    constructor(props: Readonly<Props>);
-    renderGroups(): React.ReactNode;
-    renderScenarios(): React.ReactNode;
-    render(): React.ReactNode;
+    onDoubleClick?: (id: TypedIndex, item: TreeItem) => void;
 }
+export declare const EdaNavigator: FC<Props>;
 export {};

package/coreui/components/edaManagerComponent/edaNavigator.js

@@ -1,8 +1,7 @@
-import React from "react";
+import React, { memo, useMemo } from "react";
 import { EdaTreeView, TreeViewType } from "./components/edaTreeView";
-import { Button, Space, Tabs } from "antd";
+import { Button, ConfigProvider, Space, Tabs } from "antd";
 import { createStyles } from "antd-style";
-import WithCss from "d2coreui/components/style/withCss";
 import { SearchOutlined } from "@ant-design/icons";
 import i18n from "d2core/i18n/i18n";
 const useStyles = createStyles(({ css, token }) => {
@@ -20,45 +19,41 @@ const useStyles = createStyles(({ css, token }) => {
             .control-buttons {
                 padding: ${token.paddingXXS}px;
             }
+            
+            .tree {
+                flex: 1 1 auto;
+            }
+        `,
+        groupsLayout: css `
+            height: 100%;
+            display: flex;
+            flex-direction: column;
         `
     };
 });
-export class EdaNavigator extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {};
-    }
-    renderGroups() {
-        const { size, api, onDoubleClick } = this.props;
-        return (React.createElement("div", { style: { height: "100%", display: "flex", flexDirection: "column" } },
-            React.createElement("div", { className: "control-buttons" },
-                React.createElement(Space.Compact, { size: size },
-                    React.createElement(Button, { icon: React.createElement(SearchOutlined, null) }))),
-            React.createElement("div", { style: { flex: "1 1 auto" } },
-                React.createElement(EdaTreeView, { api: api, type: TreeViewType.GROUP, onItemDoubleClick: onDoubleClick }))));
-    }
-    renderScenarios() {
-        const { api, onDoubleClick } = this.props;
-        return (React.createElement(React.Fragment, null,
-            React.createElement(EdaTreeView, { api: api, type: TreeViewType.SCENARIO, onItemDoubleClick: onDoubleClick })));
-    }
-    render() {
-        const { style, size } = this.props;
-        return (React.createElement(WithCss, { useStyles: useStyles }, (css) => React.createElement("div", { className: css.styles.baseLayout, style: style },
-            React.createElement(Tabs, { type: "editable-card", size: size, style: { height: "100%" }, items: [
-                    {
-                        key: "groups",
-                        label: i18n("Groups"),
-                        closable: false,
-                        children: this.renderGroups(),
-                    },
-                    {
-                        key: "scenarios",
-                        label: i18n("Scenarios"),
-                        closable: false,
-                        children: this.renderScenarios(),
-                    },
-                ] }))));
-    }
-}
+export const EdaNavigator = memo(({ api, style, size, onDoubleClick }) => {
+    const { styles } = useStyles();
+    const tabs = useMemo(() => [
+        {
+            key: "groups",
+            label: i18n("Groups"),
+            closable: false,
+            children: (React.createElement("div", { className: styles.groupsLayout },
+                React.createElement("div", { className: "control-buttons" },
+                    React.createElement(Space.Compact, null,
+                        React.createElement(Button, { icon: React.createElement(SearchOutlined, null) }))),
+                React.createElement("div", { className: "tree" },
+                    React.createElement(EdaTreeView, { api: api, type: TreeViewType.GROUP, onItemDoubleClick: onDoubleClick })))),
+        },
+        {
+            key: "scenarios",
+            label: i18n("Scenarios"),
+            closable: false,
+            children: (React.createElement(EdaTreeView, { api: api, type: TreeViewType.SCENARIO, onItemDoubleClick: onDoubleClick })),
+        },
+    ], [api, styles, onDoubleClick]);
+    return (React.createElement(ConfigProvider, { componentSize: size },
+        React.createElement("div", { className: styles.baseLayout, style: style },
+            React.createElement(Tabs, { type: "editable-card", style: { height: "100%" }, destroyOnHidden: false, items: tabs }))));
+});
 //# sourceMappingURL=edaNavigator.js.map