d2aura 26.0.13 → 26.0.15

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

@@ -1 +1 @@
-{"version":3,"file":"edaDataBasePanel.js","sourceRoot":"","sources":["../../../../../../coreui/components/edaManagerComponent/components/edaDataBasePanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {FC, useContext} from \"react\";\r\nimport {Button, Card, Empty, Progress, Space, Spin, Typography} from \"antd\";\r\nimport {createStyles} from \"antd-style\";\r\nimport {EdaSamplingType, GroupData, IdType, ScenarioData, VectorData} from \"../constants/edaTypes\";\r\nimport i18n from \"d2core/i18n/i18n\";\r\nimport {EdaSampleRangePickerPanel} from \"./edaSampleRangePickerPanel\";\r\nimport {EdaTimeWindowPickerPanel} from \"./edaTimeWindowPickerPanel\";\r\nimport {SharedSampleRange} from \"../context/sharedSampleRange\";\r\nimport {EdaVectorDataContextValue} from \"../context/edaVectorDataContext\";\r\nimport EdaManagerApi from \"../../../../api/eda/edaManagerApi\";\r\nimport {SizeType} from \"antd/lib/config-provider/SizeContext\";\r\nimport {LoadingContext, LoadingContextValue} from \"../context/loadingContext\";\r\n\r\nconst useStyles = createStyles(({css, token}) => {\r\n    return {\r\n        baseLayout: css`\r\n            display: flex;\r\n            height: 100%;\r\n            flex-direction: column;\r\n            justify-content: space-between;\r\n            border-top-left-radius: 0;\r\n            border-top-right-radius: 0;\r\n\r\n            > .ant-card-body {\r\n                height: 100%;\r\n                padding: ${token.paddingXS}px;\r\n\r\n                > div {\r\n                    height: 100%;\r\n                    overflow-x: hidden;\r\n                    overflow-y: auto;\r\n                }\r\n            }\r\n\r\n            .ant-spin-nested-loading {\r\n                height: 100%;\r\n                width: 100%;\r\n            }\r\n\r\n            .ant-spin-container {\r\n                display: flex;\r\n                height: 100%;\r\n                width: 100%;\r\n                flex-direction: column;\r\n                justify-content: space-between;\r\n                gap: ${token.paddingXXS}px;\r\n            }\r\n\r\n            .ant-spin-container > div {\r\n                flex: 0 0 auto;\r\n                display: flex;\r\n                justify-content: space-between;\r\n\r\n                > .ant-space {\r\n                    width: 100%;\r\n                }\r\n            }\r\n\r\n            .ant-spin-container > div:last-child {\r\n                width: 100%;\r\n                flex: 1 1 auto;\r\n                position: relative;\r\n            }\r\n\r\n            .eda-detail-no-data {\r\n                padding: ${token.padding}px;\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center !important;\r\n                width: 100%;\r\n                height: 100%;\r\n            }\r\n\r\n            .progress {\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n            }\r\n            \r\n            .ant-space-item:last-child {\r\n                height: 100%;\r\n            }\r\n        `\r\n    }\r\n});\r\n\r\ninterface Props {\r\n    api: EdaManagerApi\r\n    data?: VectorData | GroupData | ScenarioData\r\n    type?: IdType\r\n    size?: SizeType\r\n    pageSize?: number\r\n    children?: React.ReactNode\r\n    range: SharedSampleRange\r\n    dataContext: EdaVectorDataContextValue\r\n    showTimeWindow?: boolean\r\n}\r\n\r\nexport const EdaDataBasePanel: FC<Props> = ({api, data, type, size, pageSize, range, dataContext, showTimeWindow, children}) => {\r\n    const css = useStyles();\r\n    const loadingContext = useContext(LoadingContext);\r\n    const renderEmpty = () => (<div className={\"eda-detail-no-data\"}><Empty description={i18n(\"No data provided\")}/></div>);\r\n    const renderPickers = () => (\r\n        <>\r\n            <div>\r\n                <EdaSampleRangePickerPanel\r\n                    bt={range.btTotal}\r\n                    et={range.etTotal}\r\n                    size={size}\r\n                    sampling={range.sampling}\r\n                    totalCount={dataContext.vectors.length}\r\n                    pageSize={pageSize ?? 10}\r\n                    loading={!!loadingContext?.loading}\r\n                    page={range.vectorPage}\r\n                    onChange={(bt, et, step, page) => {\r\n                        range.updateValues(bt, et, step, page);\r\n                    }}\r\n                />\r\n            </div>\r\n            {showTimeWindow &&\r\n                <div>\r\n                    <EdaTimeWindowPickerPanel\r\n                        start={range.btTotal}\r\n                        end={range.etTotal}\r\n                        bt={range.btWindow}\r\n                        et={range.etWindow}\r\n                        step={range.step}\r\n                        size={size}\r\n                        disabled={range.sampling === EdaSamplingType.Changes} // FIXME default -> ??\r\n                        onTimeWindowChanged={(bt, et, step) => {\r\n                            range.updateTimeWindow(bt, et, step);\r\n                        }}\r\n                    />\r\n                </div>\r\n            }\r\n        </>\r\n    );\r\n    const renderBody = () => (\r\n        <Space direction=\"vertical\" size={size}>\r\n            {renderPickers()}\r\n            {children}\r\n        </Space>\r\n    )\r\n\r\n    return (\r\n        <Card className={css.styles.baseLayout}>\r\n            <Spin spinning={loadingContext?.loading} indicator={<LoadingIndicator api={api} dataContext={dataContext} loadingContext={loadingContext} size={size}/>}>\r\n                <div>{(type === undefined || data === undefined) ? renderEmpty() : renderBody()}</div>\r\n            </Spin>\r\n        </Card>\r\n    )\r\n}\r\n\r\ninterface LoadingIndicatorProps {\r\n    api: EdaManagerApi\r\n    dataContext: EdaVectorDataContextValue\r\n    loadingContext?: LoadingContextValue\r\n    size: SizeType\r\n}\r\n\r\nconst LoadingIndicator: FC<LoadingIndicatorProps> = ({api, dataContext, loadingContext, size}) => {\r\n    if (!loadingContext) {\r\n        return undefined\r\n    }\r\n\r\n    const {loadingCount, loadingPercentage, loadingVector} = loadingContext;\r\n\r\n    return (\r\n        <div className={\"progress\"}>\r\n            <Space direction={\"vertical\"}>\r\n                <Progress\r\n                    type={\"dashboard\"}\r\n                    steps={loadingCount}\r\n                    percent={loadingPercentage}\r\n                    format={(percent) => Math.round(percent ?? 0) + \"%\"}\r\n                    trailColor=\"rgba(0, 0, 0, 0.06)\"\r\n                />\r\n                <Typography.Text style={{whiteSpace: \"nowrap\"}}>{loadingVector}</Typography.Text>\r\n                <Space.Compact>\r\n                    <Button\r\n                        size={size}\r\n                        type={\"primary\"}\r\n                        danger\r\n                        onClick={async () => {\r\n                            await api.cancelSession();\r\n                        }}\r\n                    >\r\n                        {i18n(\"Cancel\")}\r\n                    </Button>\r\n                    <Button\r\n                        size={size}\r\n                        type={\"primary\"}\r\n                        danger\r\n                        onClick={async () => {\r\n                            dataContext.cancelLoading();\r\n                        }}\r\n                    >\r\n                        {i18n(\"Cancel All\")}\r\n                    </Button>\r\n                </Space.Compact>\r\n            </Space>\r\n        </div>\r\n    )\r\n}"]}
+{"version":3,"file":"edaDataBasePanel.js","sourceRoot":"","sources":["../../../../../../coreui/components/edaManagerComponent/components/edaDataBasePanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {FC, useContext} from \"react\";\r\nimport {Card, Empty, Space} from \"antd\";\r\nimport {createStyles} from \"antd-style\";\r\nimport {EdaSamplingType, TypedData} from \"../constants/edaTypes\";\r\nimport i18n from \"d2core/i18n/i18n\";\r\nimport {EdaSampleRangePickerPanel} from \"./edaSampleRangePickerPanel\";\r\nimport {EdaTimeWindowPickerPanel} from \"./edaTimeWindowPickerPanel\";\r\nimport {SharedSampleRangeContext} from \"../context/sharedSampleRangeContext\";\r\nimport {EdaVectorDataContextValue} from \"../context/edaVectorDataContext\";\r\nimport EdaManagerApi from \"../../../../api/eda/edaManagerApi\";\r\nimport {LoadingContext} from \"../context/loadingContext\";\r\nimport {useEdaConfig} from \"../context/edaConfigContext\";\r\nimport {EdaLoadingOverlay} from \"./edaLoadingOverlay\";\r\n\r\nconst useStyles = createStyles(({css, token}) => {\r\n    return {\r\n        baseLayout: css`\r\n            display: flex;\r\n            height: 100%;\r\n            flex-direction: column;\r\n            justify-content: space-between;\r\n            border-top-left-radius: 0;\r\n            border-top-right-radius: 0;\r\n\r\n            > .ant-card-body {\r\n                height: 100%;\r\n                padding: ${token.paddingXS}px;\r\n\r\n                > div {\r\n                    height: 100%;\r\n                    overflow-x: hidden;\r\n                    overflow-y: auto;\r\n                }\r\n            }\r\n\r\n            .eda-detail-no-data {\r\n                padding: ${token.padding}px;\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center !important;\r\n                width: 100%;\r\n                height: 100%;\r\n            }\r\n            \r\n            .ant-space-item:last-child {\r\n                height: 100%;\r\n            }\r\n        `,\r\n    }\r\n});\r\n\r\ninterface Props {\r\n    api: EdaManagerApi\r\n    data?: TypedData\r\n    pageSize?: number\r\n    children?: React.ReactNode\r\n    range: SharedSampleRangeContext\r\n    dataContext: EdaVectorDataContextValue\r\n}\r\n\r\nexport const EdaDataBasePanel: FC<Props> = ({api, data, pageSize, range, dataContext, children}) => {\r\n    const {styles} = useStyles();\r\n    const {detail} = useEdaConfig();\r\n    const loadingContext = useContext(LoadingContext);\r\n\r\n    const hasData = data !== undefined;\r\n\r\n    return (\r\n        <Card className={styles.baseLayout}>\r\n            <EdaLoadingOverlay\r\n                onCancel={() => api.cancelSession()}\r\n                onCancelAll={() => dataContext.cancelLoading()}\r\n            />\r\n            {!hasData && <div className={\"eda-detail-no-data\"}><Empty description={i18n(\"No data provided\")}/></div>}\r\n            {hasData &&\r\n                <Space direction=\"vertical\" style={{width: '100%', height: '100%'}}>\r\n                    <EdaSampleRangePickerPanel\r\n                        api={api}\r\n                        data={data}\r\n                        bt={range.btTotal}\r\n                        et={range.etTotal}\r\n                        sampling={range.sampling}\r\n                        totalCount={range.totalCount}\r\n                        pageSize={pageSize ?? 10}\r\n                        loading={!!loadingContext?.loading}\r\n                        page={range.vectorPage}\r\n                        vectors={range.vectors}\r\n                        displayedVectors={dataContext.vectors}\r\n                        onChangeRange={range.updateValues}\r\n                        onChangePage={range.updatePage}\r\n                        onChangeVectors={range.updateVectors}\r\n                    />\r\n                    {detail?.showTimeWindow &&\r\n                        <EdaTimeWindowPickerPanel\r\n                            start={range.btTotal}\r\n                            end={range.etTotal}\r\n                            bt={range.btWindow}\r\n                            et={range.etWindow}\r\n                            step={range.step}\r\n                            disabled={range.sampling === EdaSamplingType.Changes} // FIXME default -> ??\r\n                            onTimeWindowChanged={range.updateTimeWindow}\r\n                        />\r\n                    }\r\n                    {children}\r\n                </Space>\r\n            }\r\n        </Card>\r\n    )\r\n}"]}

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

@@ -1,18 +1,9 @@
-import React from "react";
-import { GroupData, IdType, ScenarioData, VectorData } from "../constants/edaTypes";
-import { SizeType } from "antd/lib/config-provider/SizeContext";
-import { BaseProps, BaseState, EdaBasePanel } from "./edaBasePanel";
-import { AliasToken } from "antd/es/theme/interface";
-import { Variant } from "antd/es/config-provider";
+import { FC } from "react";
+import { TypedData } from "../constants/edaTypes";
 import EdaManagerApi from "../../../../api/eda/edaManagerApi";
-interface Props extends BaseProps {
+interface Props {
     api: EdaManagerApi;
-    size?: SizeType;
-    variant?: Variant;
-}
-export declare class EdaDetailPanel extends EdaBasePanel<Props, BaseState> {
-    constructor(props: Readonly<Props>);
-    protected getDefaultBaseState(): BaseState;
-    protected renderPanel(_css: AliasToken, type: IdType, data: VectorData | GroupData | ScenarioData): React.ReactNode;
+    data?: TypedData;
 }
+export declare const EdaDetailPanel: FC<Props>;
 export {};

package/coreui/components/edaManagerComponent/components/edaDetailPanel.js

@@ -2,24 +2,85 @@ import React from "react";
 import { EdaVectorDetailPanel } from "./edaVectorDetailPanel";
 import { EdaGroupDetailPanel } from "./edaGroupDetailPanel";
 import { EdaScenarioDetailPanel } from "./edaScenarioDetailPanel";
-import { EdaBasePanel } from "./edaBasePanel";
-export class EdaDetailPanel extends EdaBasePanel {
-    constructor(props) {
-        super(props);
+import { Card, Empty } from "antd";
+import { createStyles } from "antd-style";
+import i18n from "d2core/i18n/i18n";
+const useStyles = createStyles(({ css, token }) => {
+    return {
+        baseLayout: css `
+            display: flex;
+            height: 100%;
+            flex-direction: column;
+            justify-content: space-between;
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+
+            > .ant-card-body {
+                height: 100%;
+                padding: ${token.paddingXS}px;
+
+                > div {
+                    height: 100%;
+                    overflow-x: hidden;
+                    overflow-y: auto;
+                }
+            }
+
+            .ant-spin-nested-loading {
+                height: 100%;
+                width: 100%;
+            }
+
+            .ant-spin-container {
+                display: flex;
+                height: 100%;
+                width: 100%;
+                flex-direction: column;
+                justify-content: space-between;
+                gap: ${token.paddingXXS}px;
+            }
+
+            .ant-spin-container > div {
+                flex: 0 0 auto;
+                display: flex;
+                justify-content: space-between;
+            }
+
+            .ant-spin-container > div:last-child {
+                width: 100%;
+                flex: 1 1 auto;
+                position: relative;
+            }
+
+            .eda-detail-no-data {
+                padding: ${token.padding}px;
+                display: flex;
+                align-items: center;
+                justify-content: center !important;
+                width: 100%;
+                height: 100%;
+            }
+
+            .progress {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        `
+    };
+});
+export const EdaDetailPanel = ({ api, data }) => {
+    const { styles } = useStyles();
+    if (data === undefined) {
+        return (React.createElement(Card, { className: styles.baseLayout },
+            React.createElement("div", null,
+                React.createElement("div", { className: "eda-detail-no-data" },
+                    React.createElement(Empty, { description: i18n("No data provided") })))));
     }
-    getDefaultBaseState() {
-        return {};
-    }
-    renderPanel(_css, type, data) {
-        const { api, size, variant } = this.props;
-        switch (type) {
-            case 0:
-                return React.createElement(EdaVectorDetailPanel, { api: api, data: data, size: size, variant: variant });
-            case 1:
-                return React.createElement(EdaGroupDetailPanel, { data: data, size: size, variant: variant });
-            case 2:
-                return React.createElement(EdaScenarioDetailPanel, { data: data, size: size, variant: variant });
-        }
-    }
-}
+    return (React.createElement(Card, { className: styles.baseLayout },
+        React.createElement("div", null,
+            data.type === 0 && React.createElement(EdaVectorDetailPanel, { api: api, data: data.data }),
+            data.type === 1 && React.createElement(EdaGroupDetailPanel, { data: data.data }),
+            data.type === 2 && React.createElement(EdaScenarioDetailPanel, { data: data.data }))));
+};
 //# sourceMappingURL=edaDetailPanel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"edaDetailPanel.js","sourceRoot":"","sources":["../../../../../../coreui/components/edaManagerComponent/components/edaDetailPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAC,sBAAsB,EAAC,MAAM,0BAA0B,CAAC;AAEhE,OAAO,EAAuB,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAWlE,MAAM,OAAO,cAAe,SAAQ,YAA8B;IAC9D,YAAY,KAAsB;QAC9B,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAES,mBAAmB;QACzB,OAAO,EAAE,CAAA;IACb,CAAC;IAES,WAAW,CAAC,IAAgB,EAAE,IAAY,EAAE,IAA2C;QAC7F,MAAM,EAAC,GAAG,EAAE,IAAI,EAAE,OAAO,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAExC,QAAQ,IAAI,EAAE,CAAC;YACX;gBACI,OAAO,oBAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAkB,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;YACtG;gBACI,OAAO,oBAAC,mBAAmB,IAAC,IAAI,EAAE,IAAiB,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;YAC1F;gBACI,OAAO,oBAAC,sBAAsB,IAAC,IAAI,EAAE,IAAoB,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;QACpG,CAAC;IACL,CAAC;CACJ","sourcesContent":["import React from \"react\";\r\nimport {GroupData, IdType, ScenarioData, VectorData} from \"../constants/edaTypes\";\r\nimport {EdaVectorDetailPanel} from \"./edaVectorDetailPanel\";\r\nimport {EdaGroupDetailPanel} from \"./edaGroupDetailPanel\";\r\nimport {EdaScenarioDetailPanel} from \"./edaScenarioDetailPanel\";\r\nimport {SizeType} from \"antd/lib/config-provider/SizeContext\";\r\nimport {BaseProps, BaseState, EdaBasePanel} from \"./edaBasePanel\";\r\nimport {AliasToken} from \"antd/es/theme/interface\";\r\nimport {Variant} from \"antd/es/config-provider\";\r\nimport EdaManagerApi from \"../../../../api/eda/edaManagerApi\";\r\n\r\ninterface Props extends BaseProps {\r\n    api: EdaManagerApi\r\n    size?: SizeType\r\n    variant?: Variant\r\n}\r\n\r\nexport class EdaDetailPanel extends EdaBasePanel<Props, BaseState> {\r\n    constructor(props: Readonly<Props>) {\r\n        super(props);\r\n    }\r\n\r\n    protected getDefaultBaseState(): BaseState {\r\n        return {}\r\n    }\r\n\r\n    protected renderPanel(_css: AliasToken, type: IdType, data: VectorData | GroupData | ScenarioData): React.ReactNode {\r\n        const {api, size, variant} = this.props;\r\n\r\n        switch (type) {\r\n            case IdType.VECTOR:\r\n                return <EdaVectorDetailPanel api={api} data={data as VectorData} size={size} variant={variant} />;\r\n            case IdType.GROUP:\r\n                return <EdaGroupDetailPanel data={data as GroupData} size={size} variant={variant} />;\r\n            case IdType.SCENARIO:\r\n                return <EdaScenarioDetailPanel data={data as ScenarioData} size={size} variant={variant} />;\r\n        }\r\n    }\r\n}"]}
+{"version":3,"file":"edaDetailPanel.js","sourceRoot":"","sources":["../../../../../../coreui/components/edaManagerComponent/components/edaDetailPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAW,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAC,sBAAsB,EAAC,MAAM,0BAA0B,CAAC;AAEhE,OAAO,EAAC,IAAI,EAAE,KAAK,EAAC,MAAM,MAAM,CAAC;AACjC,OAAO,EAAC,YAAY,EAAC,MAAM,YAAY,CAAC;AACxC,OAAO,IAAI,MAAM,kBAAkB,CAAC;AAEpC,MAAM,SAAS,GAAG,YAAY,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAC,EAAG,EAAE;IAC7C,OAAO;QACH,UAAU,EAAE,GAAG,CAAA;;;;;;;;;;2BAUI,KAAK,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;uBAoBnB,KAAK,CAAC,UAAU;;;;;;;;;;;;;;;;2BAgBZ,KAAK,CAAC,OAAO;;;;;;;;;;;;;SAa/B;KACJ,CAAA;AACL,CAAC,CAAC,CAAC;AAOH,MAAM,CAAC,MAAM,cAAc,GAAc,CAAC,EAAC,GAAG,EAAE,IAAI,EAAC,EAAE,EAAE;IACrD,MAAM,EAAC,MAAM,EAAC,GAAG,SAAS,EAAE,CAAC;IAE7B,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACrB,OAAO,CACH,oBAAC,IAAI,IAAC,SAAS,EAAE,MAAM,CAAC,UAAU;YAC9B;gBACI,6BAAK,SAAS,EAAE,oBAAoB;oBAChC,oBAAC,KAAK,IAAC,WAAW,EAAE,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAC7C,CACJ,CACH,CACV,CAAC;IACN,CAAC;IAED,OAAO,CACH,oBAAC,IAAI,IAAC,SAAS,EAAE,MAAM,CAAC,UAAU;QAC9B;YACK,IAAI,CAAC,IAAI,MAAkB,IAAI,oBAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG;YACjF,IAAI,CAAC,IAAI,MAAiB,IAAI,oBAAC,mBAAmB,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG;YACrE,IAAI,CAAC,IAAI,MAAoB,IAAI,oBAAC,sBAAsB,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,CAC1E,CACH,CACV,CAAC;AACN,CAAC,CAAA","sourcesContent":["import React, {FC} from \"react\";\r\nimport {IdType, TypedData} from \"../constants/edaTypes\";\r\nimport {EdaVectorDetailPanel} from \"./edaVectorDetailPanel\";\r\nimport {EdaGroupDetailPanel} from \"./edaGroupDetailPanel\";\r\nimport {EdaScenarioDetailPanel} from \"./edaScenarioDetailPanel\";\r\nimport EdaManagerApi from \"../../../../api/eda/edaManagerApi\";\r\nimport {Card, Empty} from \"antd\";\r\nimport {createStyles} from \"antd-style\";\r\nimport i18n from \"d2core/i18n/i18n\";\r\n\r\nconst useStyles = createStyles(({css, token},) => {\r\n    return {\r\n        baseLayout: css`\r\n            display: flex;\r\n            height: 100%;\r\n            flex-direction: column;\r\n            justify-content: space-between;\r\n            border-top-left-radius: 0;\r\n            border-top-right-radius: 0;\r\n\r\n            > .ant-card-body {\r\n                height: 100%;\r\n                padding: ${token.paddingXS}px;\r\n\r\n                > div {\r\n                    height: 100%;\r\n                    overflow-x: hidden;\r\n                    overflow-y: auto;\r\n                }\r\n            }\r\n\r\n            .ant-spin-nested-loading {\r\n                height: 100%;\r\n                width: 100%;\r\n            }\r\n\r\n            .ant-spin-container {\r\n                display: flex;\r\n                height: 100%;\r\n                width: 100%;\r\n                flex-direction: column;\r\n                justify-content: space-between;\r\n                gap: ${token.paddingXXS}px;\r\n            }\r\n\r\n            .ant-spin-container > div {\r\n                flex: 0 0 auto;\r\n                display: flex;\r\n                justify-content: space-between;\r\n            }\r\n\r\n            .ant-spin-container > div:last-child {\r\n                width: 100%;\r\n                flex: 1 1 auto;\r\n                position: relative;\r\n            }\r\n\r\n            .eda-detail-no-data {\r\n                padding: ${token.padding}px;\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center !important;\r\n                width: 100%;\r\n                height: 100%;\r\n            }\r\n\r\n            .progress {\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n            }\r\n        `\r\n    }\r\n});\r\n\r\ninterface Props {\r\n    api: EdaManagerApi\r\n    data?: TypedData\r\n}\r\n\r\nexport const EdaDetailPanel: FC<Props> = ({api, data}) => {\r\n    const {styles} = useStyles();\r\n\r\n    if (data === undefined) {\r\n        return (\r\n            <Card className={styles.baseLayout}>\r\n                <div>\r\n                    <div className={\"eda-detail-no-data\"}>\r\n                        <Empty description={i18n(\"No data provided\")}/>\r\n                    </div>\r\n                </div>\r\n            </Card>\r\n        );\r\n    }\r\n\r\n    return (\r\n        <Card className={styles.baseLayout}>\r\n            <div>\r\n                {data.type === IdType.VECTOR && <EdaVectorDetailPanel api={api} data={data.data}/>}\r\n                {data.type === IdType.GROUP && <EdaGroupDetailPanel data={data.data}/>}\r\n                {data.type === IdType.SCENARIO && <EdaScenarioDetailPanel data={data.data}/>}\r\n            </div>\r\n        </Card>\r\n    );\r\n}"]}

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

@@ -1,16 +1,11 @@
 import { FC } from "react";
 import EdaManagerApi from "../../../../api/eda/edaManagerApi";
-import { GroupData, IdType, ScenarioData, VectorData } from "../constants/edaTypes";
-import { SizeType } from "antd/lib/config-provider/SizeContext";
+import { TypedData } from "../constants/edaTypes";
 interface Props {
     api: EdaManagerApi;
     pageSize?: number;
-    data?: VectorData | GroupData | ScenarioData;
-    type?: IdType;
+    data?: TypedData;
     isActive: boolean;
-    showTimeWindow?: boolean;
-    showChartLegend?: boolean;
-    size?: SizeType;
 }
 export declare const EdaGraphPanel: FC<Props>;
 export {};

package/coreui/components/edaManagerComponent/components/edaGraphPanel.js

@@ -1,405 +1,37 @@
-import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
-import { SharedSampleRangeContext } from "../context/sharedSampleRange";
-import { EdaVectorDataContext } from "../context/edaVectorDataContext";
-import { Button, Checkbox, ConfigProvider, Space, theme } from "antd";
-import { LocaleHolder } from "d2core/i18n/localeHolder";
-import { createStyles } from "antd-style";
-import { DownloadOutlined, RetweetOutlined, StockOutlined, ZoomInOutlined } from "@ant-design/icons";
-import i18n from "d2core/i18n/i18n";
-import ReactEcharts from "echarts-for-react";
-import dayjs from "d2core/dayjs";
-import ExtendedDataGrid from "d2coreui/components/grid/extendedDataGrid";
+import React, { useEffect } from "react";
+import { useSampleRange } from "../context/sharedSampleRangeContext";
+import { useEdaVectorData } from "../context/edaVectorDataContext";
 import { EdaDataBasePanel } from "./edaDataBasePanel";
-import { formatValue } from "../utils/utils";
-const useStyles = createStyles(({ css, token }) => {
-    return {
-        baseLayout: css `
-            display: flex;
-            flex-direction: column;
-            gap: ${token.paddingXXS}px;
-            height: 100%;
-
-            > .chart {
-                display: flex;
-                flex-direction: column;
-                flex: 1 1 auto;
-                border: 1px solid ${token.colorBorder};
-                border-radius: ${token.borderRadius}px;
-                padding: ${token.paddingXXS}px;
-
-                > div:first-child {
-                    display: flex;
-                    justify-content: flex-end;
-                }
-                
-                > .echarts-for-react {
-                    flex: 1 1 auto;
-                }
-            }
-            
-            > .legend {
-                position: relative;
-            }
-        `
-    };
-});
-const rowSelection = {
-    mode: "multiRow",
-    headerCheckbox: false,
-    checkboxes: false,
-};
-const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
-export const EdaGraphPanel = ({ api, pageSize, type, data, isActive, showTimeWindow, showChartLegend, size }) => {
-    const mask = LocaleHolder.getDateTimeFormat(true, false, false, true);
-    const css = useStyles();
-    const range = useContext(SharedSampleRangeContext);
-    const dataContext = useContext(EdaVectorDataContext);
-    const chartInstance = useRef(null);
-    const chartContainerRef = useRef(null);
-    const gridApi = useRef(null);
-    const { token } = theme.useToken();
-    const [labelData, setLabelData] = useState(undefined);
-    const [showLegend, setShowLegend] = useState(!!showChartLegend);
-    const [dataZoom, setDataZoom] = useState(false);
-    const chartOptions = useMemo(() => ({
-        grid: {
-            bottom: 60 + 2 * token.paddingXXS + (!showLegend ? 30 : 0),
-            top: token.padding
-        },
-        tooltip: {
-            backgroundColor: token.colorBgElevated,
-            borderColor: token.colorBorder,
-            textStyle: { color: token.colorText },
-            extraCssText: `box-shadow: ${token.boxShadowSecondary}; border-radius: ${token.borderRadius}px;`,
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-            },
-            appendTo: 'body',
-            formatter: (p) => tooltipFormatter(p, mask, dataContext),
-        },
-        textStyle: {
-            fontFamily: token.fontFamily,
-            fontSize: token.fontSize,
-            color: token.colorText
-        },
-        xAxis: {
-            axisLine: { lineStyle: { color: token.colorTextSecondary } },
-            axisTick: { lineStyle: { color: token.colorTextTertiary } },
-            axisLabel: {
-                color: token.colorTextSecondary,
-                hideOverlap: true,
-            },
-            splitLine: { lineStyle: { color: token.colorBorder } },
-            type: 'time',
-            boundaryGap: [0, 0],
-            axisPointer: {
-                label: {
-                    formatter: (value) => dayjs(value.value).format(mask),
-                }
-            }
-        },
-        yAxis: {
-            axisLine: { lineStyle: { color: token.colorTextSecondary } },
-            axisTick: { lineStyle: { color: token.colorTextTertiary } },
-            axisLabel: { color: token.colorTextSecondary },
-            splitLine: { lineStyle: { color: token.colorBorder } },
-            type: 'value'
-        },
-        dataZoom: [
-            {
-                bottom: showLegend ? token.paddingXXS + 8 : 40,
-                left: 130,
-                right: 130,
-                type: 'slider',
-                show: true,
-                realtime: true,
-                labelFormatter: (value) => dayjs(value).format(mask),
-            },
-            {
-                type: 'inside',
-                realtime: true,
-            }
-        ],
-        legend: {
-            show: !showLegend,
-            type: "scroll",
-            bottom: 0,
-        },
-        toolbox: {
-            show: true,
-            itemSize: 0,
-            right: 9999,
-            feature: {
-                dataZoom: {
-                    yAxisIndex: 'none',
-                },
-                restore: {}
-            }
-        },
-        color: colors,
-    }), [token, showLegend, mask, dataContext?.vectors]);
-    const legendSelectChanged = (params) => {
-        if (chartInstance.current !== null) {
-            const name = params.name;
-            const row = dataContext?.vectors.find((r) => r.DisplayName === name);
-            if (row) {
-                dataContext?.toggleVectorVisibility(row.ID, params.selected[name]);
-            }
-        }
-    };
-    const legendSelectRef = useRef(legendSelectChanged);
-    useEffect(() => {
-        legendSelectRef.current = legendSelectChanged;
-    }, [legendSelectChanged]);
+import { EdaChartViewer } from "./edaChartViewer";
+import { useEdaConfig } from "../context/edaConfigContext";
+export const EdaGraphPanel = ({ api, pageSize, data, isActive }) => {
+    const { detail } = useEdaConfig();
+    const range = useSampleRange();
+    const dataContext = useEdaVectorData();
     useEffect(() => {
-        if (!chartContainerRef.current || !chartInstance.current) {
+        if (data === undefined) {
             return;
         }
-        const resizeObserver = new ResizeObserver(() => {
-            chartInstance.current?.resize();
-        });
-        resizeObserver.observe(chartContainerRef.current);
-        return () => resizeObserver.disconnect();
-    }, []);
-    const renderChart = () => (React.createElement(Space, { direction: "vertical", className: "chart" },
-        React.createElement(Space, null,
-            React.createElement(Button, { size: size, icon: React.createElement(StockOutlined, null), title: i18n("Show Legend"), type: showLegend ? "primary" : "default", onClick: () => setShowLegend(!showLegend) }),
-            React.createElement(Space.Compact, null,
-                React.createElement(Button, { size: size, icon: React.createElement(ZoomInOutlined, null), title: i18n("Zoom"), type: dataZoom ? "primary" : "default", onClick: () => setDataZoom(!dataZoom) }),
-                React.createElement(Button, { size: size, icon: React.createElement(RetweetOutlined, null), title: i18n("Restore"), onClick: () => {
-                        setDataZoom(false);
-                        chartInstance.current?.dispatchAction({ type: 'dataZoom', start: 0, end: 100 });
-                        chartInstance.current?.dispatchAction({ type: 'takeGlobalCursor', key: 'dataZoomSelect', dataZoomSelectActive: false });
-                    } })),
-            React.createElement(Button, { size: size, icon: React.createElement(DownloadOutlined, null), title: i18n("Export as PNG"), onClick: () => {
-                    if (chartInstance.current) {
-                        const img = chartInstance.current.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#fff', excludeComponents: ['dataZoom', 'toolbox'] });
-                        const link = document.createElement("a");
-                        link.href = img;
-                        link.download = "chart.png";
-                        document.body.appendChild(link);
-                        link.click();
-                        document.body.removeChild(link);
-                    }
-                } })),
-        React.createElement("div", { style: { width: "100%", height: "100%" }, ref: chartContainerRef },
-            React.createElement(ReactEcharts, { style: { width: "100%", height: "100%" }, option: chartOptions, lazyUpdate: true, onChartReady: (instance) => {
-                    chartInstance.current = instance;
-                    instance.on("legendselectchanged", (params) => legendSelectRef.current(params));
-                } }))));
-    const renderLegend = () => {
-        const height = 35 + 28 * (labelData ?? []).length + 15;
-        return (React.createElement("div", { className: "legend", style: { flex: `0 0 ${height}px` } },
-            React.createElement(ExtendedDataGrid, { columnDefs: columnDefs, onLoadData: callback => {
-                    callback(1);
-                }, defaultGridConfiguration: {
-                    pageSize: -1,
-                }, onGridReady: (params) => {
-                    gridApi.current = params.api;
-                }, rowData: labelData, tablePanelStyle: { marginTop: `0 ${token.paddingXXS}` }, panelStyle: { padding: `0 ${token.paddingXXS}px` }, toolbar: {
-                    hideRecordCount: true,
-                    renderToolbar: () => React.createElement(React.Fragment, null)
-                }, search: {
-                    hidden: true,
-                    searchButtonHidden: true,
-                }, noRecordsOverlayRenderer: () => React.createElement(React.Fragment, null), rowSelection: rowSelection })));
-    };
-    const onHeaderCheckboxToggle = async (checked) => {
-        dataContext?.setAllVectorVisibility(checked);
-    };
-    const checkboxCellRenderer = (params) => {
-        return (React.createElement(ColoredCheckbox, { index: params.data.id, checked: dataContext?.visible.has(params.data.ID), onChange: async (event) => {
-                const row = dataContext?.vectors.find((l) => l.ID === params.data.ID);
-                if (row) {
-                    dataContext?.toggleVectorVisibility(params.data.ID, event.target.checked);
-                }
-            } }));
-    };
-    const CustomHeader = (props) => {
-        return (React.createElement("div", { className: "custom-header-wrapper" },
-            React.createElement(Checkbox, { checked: dataContext?.allVectorsVisible() && !dataContext?.noVectorsVisible(), indeterminate: !dataContext?.allVectorsVisible() && !dataContext?.noVectorsVisible(), onChange: (e) => {
-                    props.onToggle(e.target.checked);
-                } })));
-    };
-    const getColumnDefs = () => ([
-        {
-            field: "checkbox",
-            headerName: i18n("Checkbox"),
-            headerComponent: CustomHeader,
-            headerComponentParams: {
-                onToggle: onHeaderCheckboxToggle
-            },
-            maxWidth: 32,
-            width: 32,
-            minWidth: 32,
-            cellRenderer: checkboxCellRenderer,
-            group: i18n("Basic Columns")
-        },
-        {
-            field: "DisplayName",
-            headerName: i18n("Name"),
-            group: i18n("Basic Columns")
-        },
-        {
-            field: "Min",
-            headerName: i18n("Min"),
-            valueGetter: (props) => dataContext?.visible.has(props.data.ID) ? props.data.Min : undefined,
-            valueFormatter: (props) => formatValue(props.value, props.data.RoundingType, props.data.RoundingPlaces),
-            type: ["alignRight"],
-            group: i18n("Basic Columns")
-        },
-        {
-            field: "Max",
-            headerName: i18n("Max"),
-            valueGetter: (props) => dataContext?.visible.has(props.data.ID) ? props.data.Max : undefined,
-            valueFormatter: (props) => formatValue(props.value, props.data.RoundingType, props.data.RoundingPlaces),
-            type: ["alignRight"],
-            group: i18n("Basic Columns")
-        },
-        {
-            field: "Sum",
-            headerName: i18n("Sum"),
-            valueGetter: (props) => dataContext?.visible.has(props.data.ID) ? props.data.Sum : undefined,
-            valueFormatter: (props) => formatValue(props.value, props.data.RoundingType, props.data.RoundingPlaces),
-            type: ["alignRight"],
-            group: i18n("Basic Columns")
-        },
-        {
-            field: "Avg",
-            headerName: i18n("Average"),
-            valueGetter: (props) => dataContext?.visible.has(props.data.ID) ? props.data.Avg : undefined,
-            valueFormatter: (props) => formatValue(props.value, props.data.RoundingType, props.data.RoundingPlaces),
-            type: ["alignRight"],
-            group: i18n("Basic Columns")
-        },
-        {
-            field: "Units",
-            headerName: i18n("Units"),
-            valueGetter: (props) => dataContext?.visible.has(props.data.ID) ? props.data.Units : undefined,
-            group: i18n("Basic Columns")
-        },
-    ]);
-    const columnDefs = useMemo(() => getColumnDefs(), [dataContext?.data, dataContext?.visible]);
-    useEffect(() => {
-        const selectedMap = {};
-        dataContext?.vectors.forEach((vector) => {
-            selectedMap[vector.DisplayName] = dataContext?.visible.has(vector.ID);
-        });
-        chartInstance.current?.setOption({ legend: { selected: selectedMap } });
-    }, [dataContext?.visible]);
-    useEffect(() => {
-        if (type === undefined || data === undefined || !range || !dataContext) {
-            return;
-        }
-        const dataSourceChanged = dataContext.loadedType !== type || dataContext.loadedData !== data;
+        const dataSourceChanged = dataContext.loadedData !== data;
         if (isActive) {
             if (dataSourceChanged) {
-                if (range.vectorPage !== 1) {
-                    range.updateValues(range.btTotal, range.etTotal, range.sampling, 1);
+                if (range.vectorPage !== 1 || range.vectors !== undefined) {
+                    range.updatePage(1);
+                }
+                else {
+                    dataContext.loadAllData(data);
                 }
-                setLabelData(undefined);
-                dataContext.loadAllData(type, data);
                 return;
             }
-            dataContext.loadSpecificVectors(dataContext.vectors.filter((v) => dataContext.visible.has(v.ID)));
-        }
-        else if (dataSourceChanged) {
-            setLabelData(undefined);
-        }
-    }, [isActive, type, data, showTimeWindow, range]);
-    useEffect(() => {
-        if (dataContext?.data && dataContext.initialized) {
-            if (labelData === undefined) {
-                const chartSeries = dataContext.vectors.map((v) => {
-                    const values = dataContext.data[v.ID] || [];
-                    return {
-                        name: v.DisplayName ?? String(v.ID),
-                        id: v.ID,
-                        type: 'line',
-                        symbol: 'none',
-                        sampling: "minmax",
-                        step: "end",
-                        lineStyle: {
-                            width: 1,
-                        },
-                        data: values.data?.data?.map((v) => [v.Value.valueTime, v.Value.value]) ?? [],
-                        animationDuration: 300,
-                        animationEasing: 'exponentialOut',
-                    };
-                });
-                const selectedMap = {};
-                const labels = dataContext.vectors.map((v, index) => {
-                    const stats = dataContext.data[v.ID]?.data?.stats;
-                    return {
-                        ...v,
-                        id: index,
-                        Min: stats?.Min.value,
-                        Max: stats?.Max.value,
-                        Sum: stats?.Sum.value,
-                        Avg: stats?.Avg.value,
-                    };
-                });
-                labels?.forEach((item) => {
-                    selectedMap[item.DisplayName] = dataContext.isVectorVisible(item.ID);
-                });
-                chartInstance.current?.setOption({ series: chartSeries, legend: { selected: selectedMap } }, { replaceMerge: ['series'] });
-                setLabelData(labels);
+            if (dataContext.loadedRange?.vectorPage !== range.vectorPage || dataContext.loadedRange?.vectors !== range.vectors) {
+                dataContext.loadAllData(data);
             }
             else {
-                const newLabelData = [...labelData];
-                newLabelData.forEach((row) => {
-                    const values = dataContext.data[row.ID]?.data;
-                    if (values?.data) {
-                        chartInstance.current?.setOption({ series: [{ name: row.DisplayName, id: row.ID, data: values.data.map(v => [v.Value.valueTime, v.Value.value]) }] });
-                        row.Min = values.stats?.Min.value;
-                        row.Max = values.stats?.Max.value;
-                        row.Sum = values.stats?.Sum.value;
-                        row.Avg = values.stats?.Avg.value;
-                    }
-                });
-                setLabelData(newLabelData);
+                dataContext.loadSpecificVectors(dataContext.vectors.filter((v) => dataContext.visible.has(v.ID)));
             }
         }
-    }, [dataContext?.data, dataContext?.vectors, dataContext?.initialized]);
-    useEffect(() => {
-        chartInstance.current?.dispatchAction({ type: 'takeGlobalCursor', key: 'dataZoomSelect', dataZoomSelectActive: dataZoom });
-    }, [dataZoom]);
-    if (range && dataContext) {
-        return (React.createElement(EdaDataBasePanel, { api: api, type: type, data: data, size: size, range: range, dataContext: dataContext, showTimeWindow: showTimeWindow, pageSize: pageSize },
-            React.createElement("div", { className: css.styles.baseLayout },
-                renderChart(),
-                showLegend && renderLegend())));
-    }
-    else {
-        return React.createElement("h1", null, "no data");
-    }
-};
-const ColoredCheckbox = ({ index, children, ...props }) => {
-    const theme = React.useMemo(() => ({
-        token: {
-            colorPrimary: colors[index % colors.length],
-        },
-        hashed: true,
-    }), [index]);
-    return (React.createElement(ConfigProvider, { theme: theme },
-        React.createElement(Checkbox, { ...props }, children)));
-};
-const tooltipFormatter = (p, mask, dataContext) => {
-    const params = p;
-    const values = params[0].value;
-    const date = dayjs(values[0]).format(mask);
-    let list = `<div style="margin-bottom: 4px;">${date}</div>`;
-    params.forEach((item) => {
-        const values = item.value;
-        const vectorInfo = dataContext?.vectors.find((v) => v.DisplayName === item.seriesName);
-        if (vectorInfo) {
-            const value = values[1] !== null ? (formatValue(values[1], vectorInfo.RoundingType, vectorInfo.RoundingPlaces) + " " + (vectorInfo.Units ?? "")) : "Invalid";
-            list += `<div style="display: flex; justify-content: space-between; align-items: center; min-width: 150px; gap: 20px;">`;
-            list += `<span style="display: flex; align-items: center;">${item.marker}<span style="margin-left: 5px;">${item.seriesName}</span></span>`;
-            list += `<span style="font-weight: bold;">${value}</span></div>`;
-        }
-    });
-    return list;
+    }, [isActive, data, dataContext, detail?.showTimeWindow, range]);
+    return (React.createElement(EdaDataBasePanel, { api: api, data: data, range: range, dataContext: dataContext, pageSize: pageSize },
+        React.createElement(EdaChartViewer, { vectors: dataContext.vectors, data: dataContext.data, visibleVectors: dataContext.visible, isDataInitialized: dataContext.initialized, onToggleVisibility: dataContext.toggleVectorVisibility, onToggleAllVisibility: dataContext.setAllVectorVisibility })));
 };
 //# sourceMappingURL=edaGraphPanel.js.map