d2aura 26.0.15 → 26.0.16

package/coreui/components/advancedFilter/conditionList/advancedFilterConditionDetailPanel.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
 import { AdvancedFilterCondition } from "../../../../api/advancedFilterApi";
-import { AdvancedFilterColumnDefinition } from "../../../../api/types/advancedFilter";
+import { AdvancedFilterColumnContext } from "../../../../api/types/advancedFilter";
 interface Props {
     editedCondition: AdvancedFilterCondition;
-    columnDefinitions: AdvancedFilterColumnDefinition[];
+    columnDefinitions: AdvancedFilterColumnContext[];
     onClose(): void;
     onNextRecord(): void;
     onPrevRecord(): void;

package/coreui/components/advancedFilter/conditionList/advancedFilterConditionDetailPanel.js

@@ -43,7 +43,7 @@ export default class AdvancedFilterConditionDetailPanel extends React.Component
                             editedCondition.operator = newAllowedOperators[0];
                             this.props.onChange(editedCondition);
                         } }, this.props.columnDefinitions.map(value => {
-                        return (React.createElement(Select.Option, { value: value.columnName, key: value.columnName }, value.columnName));
+                        return (React.createElement(Select.Option, { value: value.columnName, key: value.columnName }, value.displayName));
                     }))),
                 React.createElement(Form.Item, { label: i18n("Operator") },
                     React.createElement(AdvancedFilterOperatorSelect, { operator: editedCondition.operator, value: editedCondition.value, valueType: editedCondition.value_type, onChange: (operator, value) => {

package/coreui/components/advancedFilter/conditionList/advancedFilterConditionDetailPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"advancedFilterConditionDetailPanel.js","sourceRoot":"","sources":["../../../../../../coreui/components/advancedFilter/conditionList/advancedFilterConditionDetailPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\r\nimport {Button, Form, Select} from \"antd\";\r\nimport i18n from \"d2core/i18n/i18n\";\r\nimport {AdvancedFilterCondition, AdvancedFilterLogicalOperator,} from \"../../../../api/advancedFilterApi\";\r\nimport AdvancedFilterUtils from \"../advancedFilterUtils\";\r\nimport {getAdvancedFilterErrorInfo} from \"../advancedFilterValidationUtils\";\r\nimport AdvancedFilterOperatorSelect from \"../components/advancedFilterOperatorSelect\";\r\nimport AdvancedFilterValueInput from \"../components/advancedFilterValueInput\";\r\nimport {AdvancedFilterColumnDefinition, AdvancedFilterConditionError} from \"../../../../api/types/advancedFilter\";\r\nimport DetailHeaderPanel from \"../../grid/detailHeaderPanel\";\r\n\r\ninterface Props {\r\n    editedCondition: AdvancedFilterCondition\r\n    columnDefinitions: AdvancedFilterColumnDefinition[]\r\n\r\n    // conditionList close handler\r\n    onClose(): void\r\n\r\n    // next record handler\r\n    onNextRecord(): void\r\n\r\n    // previous record handler\r\n    onPrevRecord(): void\r\n\r\n    onChange(editedCondition: AdvancedFilterCondition): void\r\n}\r\n\r\nexport default class AdvancedFilterConditionDetailPanel extends React.Component<Props> {\r\n    constructor(props: Readonly<Props>) {\r\n        super(props);\r\n    }\r\n\r\n    renderConfigHeader() {\r\n        return (\r\n            <DetailHeaderPanel\r\n                onPrevRecord={this.props.onPrevRecord}\r\n                onNextRecord={this.props.onNextRecord}\r\n                onClose={this.props.onClose}\r\n            />\r\n        );\r\n    }\r\n\r\n    private renderConfigForm() {\r\n        const editedCondition = this.props.editedCondition;\r\n        const columnDefinition = this.props.columnDefinitions.find(value => value.columnName === editedCondition.column_name);\r\n\r\n        const [valueValidateStatus, valueErrorMessage] = getAdvancedFilterErrorInfo([AdvancedFilterConditionError.VALUE_REQUIRED], editedCondition._errors ?? []);\r\n        const [logicalOperatorValidateStatus, logicalOperatorErrorMessage] = getAdvancedFilterErrorInfo([AdvancedFilterConditionError.LOGICAL_OPERATOR_REQUIRED, AdvancedFilterConditionError.LOGICAL_OPERATOR_UNNECESSARY], editedCondition._errors ?? []);\r\n\r\n        return (\r\n            <Form\r\n                className=\"record-config-form\"\r\n                layout=\"horizontal\"\r\n                labelCol={{sm: 24, md: 24, lg: 24, xl: 24, xxl: 24}}\r\n            >\r\n                <div style={{display: \"flex\", marginTop: 8}}>\r\n                    <Button\r\n                        type={editedCondition.not_flag ? \"primary\" : \"default\"}\r\n                        onClick={() => {\r\n                            editedCondition.not_flag = editedCondition.not_flag === 1 ? 0 : 1;\r\n                            this.props.onChange(editedCondition);\r\n                        }}\r\n                    >\r\n                        {i18n(\"Negation\")}\r\n                    </Button>\r\n                    <Button\r\n                        style={{marginLeft: 8}}\r\n                        type={editedCondition.left_par ? \"primary\" : \"default\"}\r\n                        onClick={() => {\r\n                            editedCondition.left_par = editedCondition.left_par === 1 ? 0 : 1;\r\n                            this.props.onChange(editedCondition);\r\n                        }}\r\n                    >\r\n                        (\r\n                    </Button>\r\n                </div>\r\n                <div style={{marginLeft: 32}}>\r\n                    <Form.Item label={i18n(\"Column\")}>\r\n                        <Select\r\n                            value={editedCondition.column_name}\r\n                            onChange={value => {\r\n                                const newValueType = this.props.columnDefinitions.find(columnDefinition => columnDefinition.columnName === value)!.valueType;\r\n\r\n                                if (editedCondition.value_type !== newValueType) {\r\n                                    editedCondition.value = undefined;\r\n                                }\r\n\r\n                                editedCondition.column_name = value;\r\n                                editedCondition.value_type = newValueType;\r\n\r\n                                const newAllowedOperators = AdvancedFilterUtils.getOperatorsForValueType(newValueType);\r\n                                editedCondition.operator = newAllowedOperators[0];\r\n\r\n                                this.props.onChange(editedCondition);\r\n                            }}\r\n                        >\r\n                            {this.props.columnDefinitions.map(value => {\r\n                                return (\r\n                                    <Select.Option value={value.columnName} key={value.columnName}>\r\n                                        {value.columnName}\r\n                                    </Select.Option>\r\n                                );\r\n                            })}\r\n                        </Select>\r\n                    </Form.Item>\r\n                    <Form.Item label={i18n(\"Operator\")}>\r\n                        <AdvancedFilterOperatorSelect\r\n                            operator={editedCondition.operator}\r\n                            value={editedCondition.value}\r\n                            valueType={editedCondition.value_type}\r\n                            onChange={(operator, value) => {\r\n                                editedCondition.operator = operator;\r\n                                editedCondition.value = value;\r\n                                this.props.onChange(editedCondition);\r\n                            }}\r\n                        />\r\n                    </Form.Item>\r\n                    <Form.Item\r\n                        label={i18n(\"Value\")}\r\n                        validateStatus={valueValidateStatus}\r\n                        help={valueErrorMessage}\r\n                    >\r\n                        {columnDefinition &&\r\n                            <AdvancedFilterValueInput\r\n                                operator={editedCondition.operator}\r\n                                editedValue={editedCondition.value}\r\n                                columnDefinition={columnDefinition}\r\n                                onChange={value => {\r\n                                    editedCondition.value = value;\r\n                                    this.props.onChange(editedCondition);\r\n                                }}\r\n                            />\r\n                        }\r\n                    </Form.Item>\r\n                </div>\r\n                <div style={{display: \"flex\", marginTop: 12}}>\r\n                    <Button\r\n                        type={editedCondition.right_par ? \"primary\" : \"default\"}\r\n                        onClick={() => {\r\n                            editedCondition.right_par = editedCondition.right_par === 1 ? 0 : 1;\r\n                            this.props.onChange(editedCondition);\r\n                        }}\r\n                    >\r\n                        )\r\n                    </Button>\r\n                    <Form.Item\r\n                        style={{width: 160, marginLeft: 8}}\r\n                        validateStatus={logicalOperatorValidateStatus}\r\n                        help={logicalOperatorErrorMessage}\r\n                    >\r\n                        <Select\r\n                            value={editedCondition.logical_operator ?? undefined}\r\n                            onChange={value => {\r\n                                editedCondition.logical_operator = value ?? null;\r\n                                this.props.onChange(editedCondition);\r\n                            }}\r\n                            allowClear\r\n                        >\r\n                            {Object.values(AdvancedFilterLogicalOperator).map(value => {\r\n                                return <Select.Option value={value} key={value}>{value}</Select.Option>\r\n                            })}\r\n                        </Select>\r\n                    </Form.Item>\r\n                </div>\r\n            </Form>\r\n        );\r\n    }\r\n\r\n    render() {\r\n        const editedCondition = this.props.editedCondition;\r\n\r\n        return (\r\n            <div style={{display: \"flex\", flexDirection: \"column\", overflow: \"hidden\", height: \"100%\"}}>\r\n                {this.renderConfigHeader()}\r\n                <div style={{flex: \"1 1 auto\", overflow: \"hidden\"}}>\r\n                    <div style={{height: \"calc(100% - 8px)\"}}>\r\n                        <div style={{height: \"100%\", overflow: \"auto\"}}>\r\n                            <div style={{margin: \"0px 12px 16px\"}}>\r\n                                {editedCondition && this.renderConfigForm()}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n\r\n}"]}
+{"version":3,"file":"advancedFilterConditionDetailPanel.js","sourceRoot":"","sources":["../../../../../../coreui/components/advancedFilter/conditionList/advancedFilterConditionDetailPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\r\nimport {Button, Form, Select} from \"antd\";\r\nimport i18n from \"d2core/i18n/i18n\";\r\nimport {AdvancedFilterCondition, AdvancedFilterLogicalOperator,} from \"../../../../api/advancedFilterApi\";\r\nimport AdvancedFilterUtils from \"../advancedFilterUtils\";\r\nimport {getAdvancedFilterErrorInfo} from \"../advancedFilterValidationUtils\";\r\nimport AdvancedFilterOperatorSelect from \"../components/advancedFilterOperatorSelect\";\r\nimport AdvancedFilterValueInput from \"../components/advancedFilterValueInput\";\r\nimport {AdvancedFilterColumnContext, AdvancedFilterConditionError} from \"../../../../api/types/advancedFilter\";\r\nimport DetailHeaderPanel from \"../../grid/detailHeaderPanel\";\r\n\r\ninterface Props {\r\n    editedCondition: AdvancedFilterCondition\r\n    columnDefinitions: AdvancedFilterColumnContext[]\r\n\r\n    // conditionList close handler\r\n    onClose(): void\r\n\r\n    // next record handler\r\n    onNextRecord(): void\r\n\r\n    // previous record handler\r\n    onPrevRecord(): void\r\n\r\n    onChange(editedCondition: AdvancedFilterCondition): void\r\n}\r\n\r\nexport default class AdvancedFilterConditionDetailPanel extends React.Component<Props> {\r\n    constructor(props: Readonly<Props>) {\r\n        super(props);\r\n    }\r\n\r\n    renderConfigHeader() {\r\n        return (\r\n            <DetailHeaderPanel\r\n                onPrevRecord={this.props.onPrevRecord}\r\n                onNextRecord={this.props.onNextRecord}\r\n                onClose={this.props.onClose}\r\n            />\r\n        );\r\n    }\r\n\r\n    private renderConfigForm() {\r\n        const editedCondition = this.props.editedCondition;\r\n        const columnDefinition = this.props.columnDefinitions.find(value => value.columnName === editedCondition.column_name);\r\n\r\n        const [valueValidateStatus, valueErrorMessage] = getAdvancedFilterErrorInfo([AdvancedFilterConditionError.VALUE_REQUIRED], editedCondition._errors ?? []);\r\n        const [logicalOperatorValidateStatus, logicalOperatorErrorMessage] = getAdvancedFilterErrorInfo([AdvancedFilterConditionError.LOGICAL_OPERATOR_REQUIRED, AdvancedFilterConditionError.LOGICAL_OPERATOR_UNNECESSARY], editedCondition._errors ?? []);\r\n\r\n        return (\r\n            <Form\r\n                className=\"record-config-form\"\r\n                layout=\"horizontal\"\r\n                labelCol={{sm: 24, md: 24, lg: 24, xl: 24, xxl: 24}}\r\n            >\r\n                <div style={{display: \"flex\", marginTop: 8}}>\r\n                    <Button\r\n                        type={editedCondition.not_flag ? \"primary\" : \"default\"}\r\n                        onClick={() => {\r\n                            editedCondition.not_flag = editedCondition.not_flag === 1 ? 0 : 1;\r\n                            this.props.onChange(editedCondition);\r\n                        }}\r\n                    >\r\n                        {i18n(\"Negation\")}\r\n                    </Button>\r\n                    <Button\r\n                        style={{marginLeft: 8}}\r\n                        type={editedCondition.left_par ? \"primary\" : \"default\"}\r\n                        onClick={() => {\r\n                            editedCondition.left_par = editedCondition.left_par === 1 ? 0 : 1;\r\n                            this.props.onChange(editedCondition);\r\n                        }}\r\n                    >\r\n                        (\r\n                    </Button>\r\n                </div>\r\n                <div style={{marginLeft: 32}}>\r\n                    <Form.Item label={i18n(\"Column\")}>\r\n                        <Select\r\n                            value={editedCondition.column_name}\r\n                            onChange={value => {\r\n                                const newValueType = this.props.columnDefinitions.find(columnDefinition => columnDefinition.columnName === value)!.valueType;\r\n\r\n                                if (editedCondition.value_type !== newValueType) {\r\n                                    editedCondition.value = undefined;\r\n                                }\r\n\r\n                                editedCondition.column_name = value;\r\n                                editedCondition.value_type = newValueType;\r\n\r\n                                const newAllowedOperators = AdvancedFilterUtils.getOperatorsForValueType(newValueType);\r\n                                editedCondition.operator = newAllowedOperators[0];\r\n\r\n                                this.props.onChange(editedCondition);\r\n                            }}\r\n                        >\r\n                            {this.props.columnDefinitions.map(value => {\r\n                                return (\r\n                                    <Select.Option value={value.columnName} key={value.columnName}>\r\n                                        {value.displayName}\r\n                                    </Select.Option>\r\n                                );\r\n                            })}\r\n                        </Select>\r\n                    </Form.Item>\r\n                    <Form.Item label={i18n(\"Operator\")}>\r\n                        <AdvancedFilterOperatorSelect\r\n                            operator={editedCondition.operator}\r\n                            value={editedCondition.value}\r\n                            valueType={editedCondition.value_type}\r\n                            onChange={(operator, value) => {\r\n                                editedCondition.operator = operator;\r\n                                editedCondition.value = value;\r\n                                this.props.onChange(editedCondition);\r\n                            }}\r\n                        />\r\n                    </Form.Item>\r\n                    <Form.Item\r\n                        label={i18n(\"Value\")}\r\n                        validateStatus={valueValidateStatus}\r\n                        help={valueErrorMessage}\r\n                    >\r\n                        {columnDefinition &&\r\n                            <AdvancedFilterValueInput\r\n                                operator={editedCondition.operator}\r\n                                editedValue={editedCondition.value}\r\n                                columnDefinition={columnDefinition}\r\n                                onChange={value => {\r\n                                    editedCondition.value = value;\r\n                                    this.props.onChange(editedCondition);\r\n                                }}\r\n                            />\r\n                        }\r\n                    </Form.Item>\r\n                </div>\r\n                <div style={{display: \"flex\", marginTop: 12}}>\r\n                    <Button\r\n                        type={editedCondition.right_par ? \"primary\" : \"default\"}\r\n                        onClick={() => {\r\n                            editedCondition.right_par = editedCondition.right_par === 1 ? 0 : 1;\r\n                            this.props.onChange(editedCondition);\r\n                        }}\r\n                    >\r\n                        )\r\n                    </Button>\r\n                    <Form.Item\r\n                        style={{width: 160, marginLeft: 8}}\r\n                        validateStatus={logicalOperatorValidateStatus}\r\n                        help={logicalOperatorErrorMessage}\r\n                    >\r\n                        <Select\r\n                            value={editedCondition.logical_operator ?? undefined}\r\n                            onChange={value => {\r\n                                editedCondition.logical_operator = value ?? null;\r\n                                this.props.onChange(editedCondition);\r\n                            }}\r\n                            allowClear\r\n                        >\r\n                            {Object.values(AdvancedFilterLogicalOperator).map(value => {\r\n                                return <Select.Option value={value} key={value}>{value}</Select.Option>\r\n                            })}\r\n                        </Select>\r\n                    </Form.Item>\r\n                </div>\r\n            </Form>\r\n        );\r\n    }\r\n\r\n    render() {\r\n        const editedCondition = this.props.editedCondition;\r\n\r\n        return (\r\n            <div style={{display: \"flex\", flexDirection: \"column\", overflow: \"hidden\", height: \"100%\"}}>\r\n                {this.renderConfigHeader()}\r\n                <div style={{flex: \"1 1 auto\", overflow: \"hidden\"}}>\r\n                    <div style={{height: \"calc(100% - 8px)\"}}>\r\n                        <div style={{height: \"100%\", overflow: \"auto\"}}>\r\n                            <div style={{margin: \"0px 12px 16px\"}}>\r\n                                {editedCondition && this.renderConfigForm()}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n\r\n}"]}

package/coreui/components/advancedFilter/conditionList/advancedFilterConditionListModalDialog.d.ts

@@ -1,10 +1,10 @@
 import React from "react";
 import { AdvancedFilterCondition } from "../../../../api/advancedFilterApi";
-import { AdvancedFilterColumnDefinition } from "../../../../api/types/advancedFilter";
+import { AdvancedFilterColumnContext } from "../../../../api/types/advancedFilter";
 interface AdvancedFilterConditionListModalDialogProps {
     visible: boolean;
     filterConditions: AdvancedFilterCondition[];
-    columnDefinitions: AdvancedFilterColumnDefinition[];
+    columnDefinitions: AdvancedFilterColumnContext[];
     onOk(filterConditions: AdvancedFilterCondition[]): void;
     onCancel(): void;
 }

package/coreui/components/advancedFilter/conditionList/advancedFilterConditionListModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"advancedFilterConditionListModalDialog.js","sourceRoot":"","sources":["../../../../../../coreui/components/advancedFilter/conditionList/advancedFilterConditionListModalDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\r\nimport {ModalDialog, ModalDialogMode} from \"d2coreui/components/modal/modalDialog\";\r\nimport i18n from \"d2core/i18n/i18n\";\r\nimport AdvancedFilterConditionListPanel from \"./advancedFilterConditionListPanel\";\r\nimport {AdvancedFilterCondition} from \"../../../../api/advancedFilterApi\";\r\nimport cloneDeep from \"lodash/cloneDeep\";\r\nimport isEqual from \"lodash/isEqual\";\r\nimport AdvancedFilterValidationUtils from \"../advancedFilterValidationUtils\";\r\nimport {AdvancedFilterColumnDefinition} from \"../../../../api/types/advancedFilter\";\r\n\r\ninterface AdvancedFilterConditionListModalDialogProps {\r\n    visible: boolean\r\n    filterConditions: AdvancedFilterCondition[]\r\n    columnDefinitions: AdvancedFilterColumnDefinition[]\r\n\r\n    onOk(filterConditions: AdvancedFilterCondition[]): void\r\n\r\n    onCancel(): void\r\n}\r\n\r\ninterface AdvancedFilterConditionListModalDialogState {\r\n    editedFilterConditions: AdvancedFilterCondition[]\r\n    validateOnChange: boolean\r\n    isConditionError: boolean\r\n    isParenthesisError: boolean\r\n}\r\n\r\nexport default class AdvancedFilterConditionListModalDialog extends React.Component<AdvancedFilterConditionListModalDialogProps, AdvancedFilterConditionListModalDialogState> {\r\n    private advancedFilterConditionListPanel: AdvancedFilterConditionListPanel | null = null;\r\n\r\n    constructor(props: Readonly<AdvancedFilterConditionListModalDialogProps>) {\r\n        super(props);\r\n\r\n        this.state = {\r\n            editedFilterConditions: cloneDeep(props.filterConditions),\r\n            validateOnChange: false,\r\n            isConditionError: false,\r\n            isParenthesisError: false,\r\n        }\r\n    }\r\n\r\n    componentDidUpdate(prevProps: Readonly<AdvancedFilterConditionListModalDialogProps>) {\r\n        if (!isEqual(prevProps.filterConditions, this.props.filterConditions)) {\r\n            this.setState({editedFilterConditions: cloneDeep(this.props.filterConditions)});\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <ModalDialog\r\n                mode={ModalDialogMode.OK_CANCEL}\r\n                open={this.props.visible}\r\n                title={i18n(\"Condition List\")}\r\n                initialWidth={window.innerWidth * 0.9}\r\n                initialHeight={window.innerHeight * 0.75}\r\n                styles={{body: {padding: 0}}}\r\n                okText={i18n(\"Apply Filter\")}\r\n                okButtonProps={{disabled: this.state.editedFilterConditions.length === 0 || this.state.isConditionError || this.state.isParenthesisError}}\r\n                onOk={() => {\r\n                    const validationResult = AdvancedFilterValidationUtils.validade(this.state.editedFilterConditions);\r\n                    this.setState({\r\n                        isConditionError: validationResult.isConditionError,\r\n                        isParenthesisError: validationResult.isParenthesisError,\r\n                        validateOnChange: true,\r\n                    });\r\n\r\n                    this.advancedFilterConditionListPanel?.refreshData();\r\n                    if (!validationResult.isConditionError && !validationResult.isParenthesisError) {\r\n                        this.props.onOk(this.state.editedFilterConditions);\r\n                    }\r\n                }}\r\n                onCancel={() => {\r\n                    this.setState({\r\n                        editedFilterConditions: cloneDeep(this.props.filterConditions),\r\n                        validateOnChange: false,\r\n                        isConditionError: false,\r\n                        isParenthesisError: false,\r\n                    });\r\n                    this.props.onCancel();\r\n                }}\r\n            >\r\n                <AdvancedFilterConditionListPanel\r\n                    ref={instance => this.advancedFilterConditionListPanel = instance}\r\n                    columnDefinitions={this.props.columnDefinitions}\r\n                    filterConditions={this.state.editedFilterConditions}\r\n                    isParenthesisError={this.state.isParenthesisError}\r\n                    onChange={filterConditions => {\r\n                        if (this.state.validateOnChange) {\r\n                            const validationResult = AdvancedFilterValidationUtils.validade(filterConditions);\r\n                            this.advancedFilterConditionListPanel?.refreshData();\r\n\r\n                            this.setState({\r\n                                isConditionError: validationResult.isConditionError,\r\n                                isParenthesisError: validationResult.isParenthesisError,\r\n                            });\r\n                        }\r\n\r\n                        this.setState({editedFilterConditions: filterConditions});\r\n                    }}\r\n                />\r\n            </ModalDialog>\r\n        );\r\n    }\r\n\r\n}"]}
+{"version":3,"file":"advancedFilterConditionListModalDialog.js","sourceRoot":"","sources":["../../../../../../coreui/components/advancedFilter/conditionList/advancedFilterConditionListModalDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\r\nimport {ModalDialog, ModalDialogMode} from \"d2coreui/components/modal/modalDialog\";\r\nimport i18n from \"d2core/i18n/i18n\";\r\nimport AdvancedFilterConditionListPanel from \"./advancedFilterConditionListPanel\";\r\nimport {AdvancedFilterCondition} from \"../../../../api/advancedFilterApi\";\r\nimport cloneDeep from \"lodash/cloneDeep\";\r\nimport isEqual from \"lodash/isEqual\";\r\nimport AdvancedFilterValidationUtils from \"../advancedFilterValidationUtils\";\r\nimport {AdvancedFilterColumnContext} from \"../../../../api/types/advancedFilter\";\r\n\r\ninterface AdvancedFilterConditionListModalDialogProps {\r\n    visible: boolean\r\n    filterConditions: AdvancedFilterCondition[]\r\n    columnDefinitions: AdvancedFilterColumnContext[]\r\n\r\n    onOk(filterConditions: AdvancedFilterCondition[]): void\r\n\r\n    onCancel(): void\r\n}\r\n\r\ninterface AdvancedFilterConditionListModalDialogState {\r\n    editedFilterConditions: AdvancedFilterCondition[]\r\n    validateOnChange: boolean\r\n    isConditionError: boolean\r\n    isParenthesisError: boolean\r\n}\r\n\r\nexport default class AdvancedFilterConditionListModalDialog extends React.Component<AdvancedFilterConditionListModalDialogProps, AdvancedFilterConditionListModalDialogState> {\r\n    private advancedFilterConditionListPanel: AdvancedFilterConditionListPanel | null = null;\r\n\r\n    constructor(props: Readonly<AdvancedFilterConditionListModalDialogProps>) {\r\n        super(props);\r\n\r\n        this.state = {\r\n            editedFilterConditions: cloneDeep(props.filterConditions),\r\n            validateOnChange: false,\r\n            isConditionError: false,\r\n            isParenthesisError: false,\r\n        }\r\n    }\r\n\r\n    componentDidUpdate(prevProps: Readonly<AdvancedFilterConditionListModalDialogProps>) {\r\n        if (!isEqual(prevProps.filterConditions, this.props.filterConditions)) {\r\n            this.setState({editedFilterConditions: cloneDeep(this.props.filterConditions)});\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <ModalDialog\r\n                mode={ModalDialogMode.OK_CANCEL}\r\n                open={this.props.visible}\r\n                title={i18n(\"Condition List\")}\r\n                initialWidth={window.innerWidth * 0.9}\r\n                initialHeight={window.innerHeight * 0.75}\r\n                styles={{body: {padding: 0}}}\r\n                okText={i18n(\"Apply Filter\")}\r\n                okButtonProps={{disabled: this.state.editedFilterConditions.length === 0 || this.state.isConditionError || this.state.isParenthesisError}}\r\n                onOk={() => {\r\n                    const validationResult = AdvancedFilterValidationUtils.validade(this.state.editedFilterConditions);\r\n                    this.setState({\r\n                        isConditionError: validationResult.isConditionError,\r\n                        isParenthesisError: validationResult.isParenthesisError,\r\n                        validateOnChange: true,\r\n                    });\r\n\r\n                    this.advancedFilterConditionListPanel?.refreshData();\r\n                    if (!validationResult.isConditionError && !validationResult.isParenthesisError) {\r\n                        this.props.onOk(this.state.editedFilterConditions);\r\n                    }\r\n                }}\r\n                onCancel={() => {\r\n                    this.setState({\r\n                        editedFilterConditions: cloneDeep(this.props.filterConditions),\r\n                        validateOnChange: false,\r\n                        isConditionError: false,\r\n                        isParenthesisError: false,\r\n                    });\r\n                    this.props.onCancel();\r\n                }}\r\n            >\r\n                <AdvancedFilterConditionListPanel\r\n                    ref={instance => this.advancedFilterConditionListPanel = instance}\r\n                    columnDefinitions={this.props.columnDefinitions}\r\n                    filterConditions={this.state.editedFilterConditions}\r\n                    isParenthesisError={this.state.isParenthesisError}\r\n                    onChange={filterConditions => {\r\n                        if (this.state.validateOnChange) {\r\n                            const validationResult = AdvancedFilterValidationUtils.validade(filterConditions);\r\n                            this.advancedFilterConditionListPanel?.refreshData();\r\n\r\n                            this.setState({\r\n                                isConditionError: validationResult.isConditionError,\r\n                                isParenthesisError: validationResult.isParenthesisError,\r\n                            });\r\n                        }\r\n\r\n                        this.setState({editedFilterConditions: filterConditions});\r\n                    }}\r\n                />\r\n            </ModalDialog>\r\n        );\r\n    }\r\n\r\n}"]}

package/coreui/components/advancedFilter/conditionList/advancedFilterConditionListPanel.d.ts

@@ -2,10 +2,10 @@ import React from "react";
 import { DataGridColDef } from "d2coreui/components/grid/dataGrid";
 import { AdvancedFilterCondition } from "../../../../api/advancedFilterApi";
 import { SelectionChangedEvent } from "ag-grid-community";
-import { AdvancedFilterColumnDefinition } from "../../../../api/types/advancedFilter";
+import { AdvancedFilterColumnContext } from "../../../../api/types/advancedFilter";
 interface AdvancedFilterConditionListPanelProps {
     filterConditions: AdvancedFilterCondition[];
-    columnDefinitions: AdvancedFilterColumnDefinition[];
+    columnDefinitions: AdvancedFilterColumnContext[];
     isParenthesisError: boolean;
     onChange(filterConditions: AdvancedFilterCondition[]): void;
 }

package/coreui/components/advancedFilter/conditionList/advancedFilterConditionListPanel.js

@@ -60,7 +60,15 @@ export default class AdvancedFilterConditionListPanel extends React.Component {
                     headerName: i18n("Column"),
                     colId: "column_name",
                     field: "column_name",
-                    initialWidth: 120,
+                    initialWidth: 220,
+                    cellRenderer: (params) => {
+                        const data = params.data;
+                        const columnDefinition = this.props.columnDefinitions.find(value => value.columnName === data.column_name);
+                        if (columnDefinition) {
+                            return columnDefinition.displayName;
+                        }
+                        return null;
+                    },
                     enableCellChangeFlash: true,
                     group: i18n("Basic Columns"),
                 }, {
@@ -181,7 +189,7 @@ export default class AdvancedFilterConditionListPanel extends React.Component {
                 }, search: {
                     hidden: true,
                     searchButtonHidden: true,
-                }, controlPanel: {
+                }, rowSelection: "single", controlPanel: {
                     renderer: this.renderControlPanel
                 }, onSelectionChanged: this.onSelectionChanged, onRowDoubleClicked: (event) => {
                     this.setState({ selectedCondition: event.data });

package/coreui/components/advancedFilter/conditionList/advancedFilterConditionListPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"advancedFilterConditionListPanel.js","sourceRoot":"","sources":["../../../../../../coreui/components/advancedFilter/conditionList/advancedFilterConditionListPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\r\nimport {DataGridColDef} from \"d2coreui/components/grid/dataGrid\";\r\nimport ExtendedDataGrid from \"d2coreui/components/grid/extendedDataGrid\";\r\nimport {AdvancedFilterCondition, getAdvancedFilterOperatorString} from \"../../../../api/advancedFilterApi\";\r\nimport {GridApi, GridReadyEvent, RowDragEndEvent, SelectionChangedEvent} from \"ag-grid-community\";\r\nimport i18n from \"d2core/i18n/i18n\";\r\nimport {Button} from \"antd\";\r\nimport {CloseCircleOutlined, ExclamationCircleOutlined, PlusCircleOutlined} from \"@ant-design/icons\";\r\nimport AdvancedFilterConditionDetailPanel from \"./advancedFilterConditionDetailPanel\";\r\nimport {AdvancedFilterColumnDefinition} from \"../../../../api/types/advancedFilter\";\r\nimport AdvancedFilterUtils from \"../advancedFilterUtils\";\r\nimport ColorTag from \"../../colorTag/colorTag\";\r\n\r\ninterface AdvancedFilterConditionListPanelProps {\r\n    filterConditions: AdvancedFilterCondition[]\r\n    columnDefinitions: AdvancedFilterColumnDefinition[]\r\n    isParenthesisError: boolean\r\n\r\n    onChange(filterConditions: AdvancedFilterCondition[]): void\r\n}\r\n\r\ninterface AdvancedFilterConditionListPanelState {\r\n    selectedCondition: AdvancedFilterCondition | null\r\n    loading: boolean\r\n}\r\n\r\nexport default class AdvancedFilterConditionListPanel extends React.Component<AdvancedFilterConditionListPanelProps, AdvancedFilterConditionListPanelState> {\r\n    private initialColumnDefs?: DataGridColDef[];\r\n    private dataGrid: ExtendedDataGrid<AdvancedFilterCondition> | null = null;\r\n    private gridApi?: GridApi;\r\n\r\n    constructor(props: Readonly<AdvancedFilterConditionListPanelProps>) {\r\n        super(props);\r\n\r\n        this.state = {\r\n            selectedCondition: null,\r\n            loading: false,\r\n        }\r\n\r\n        this.onSelectionChanged = this.onSelectionChanged.bind(this);\r\n        this.renderDetailPanel = this.renderDetailPanel.bind(this);\r\n        this.renderControlPanel = this.renderControlPanel.bind(this);\r\n        this.onAddNewCondition = this.onAddNewCondition.bind(this);\r\n    }\r\n\r\n    componentDidMount() {\r\n        if (this.props.filterConditions.length === 0) {\r\n            this.onAddNewCondition();\r\n        }\r\n    }\r\n\r\n    refreshData() {\r\n        this.gridApi?.applyTransaction({update: this.props.filterConditions});\r\n\r\n        const selectedRows = this.gridApi?.getSelectedRows();\r\n        this.setState({selectedCondition: selectedRows?.[0] ?? null});\r\n    }\r\n\r\n    getInitialColumnDefs(): DataGridColDef[] {\r\n        if (!this.initialColumnDefs) {\r\n            this.initialColumnDefs = [\r\n                {\r\n                    headerName: i18n(\"Negation\"),\r\n                    colId: \"not_flag\",\r\n                    field: \"not_flag\",\r\n                    initialWidth: 80,\r\n                    cellRenderer: (params: any) => {\r\n                        const data = params.data as AdvancedFilterCondition;\r\n                        return data.not_flag === 1 ? \"NOT\" : \"\";\r\n                    },\r\n                    enableCellChangeFlash: true,\r\n                    group: i18n(\"Basic Columns\"),\r\n                    rowDrag: true,\r\n                }, {\r\n                    headerName: \"(\",\r\n                    colId: \"left_par\",\r\n                    field: \"left_par\",\r\n                    initialWidth: 44,\r\n                    cellRenderer: (params: any) => {\r\n                        const data = params.data as AdvancedFilterCondition;\r\n                        return data.left_par === 1 ? \"(\" : \"\";\r\n                    },\r\n                    enableCellChangeFlash: true,\r\n                    group: i18n(\"Basic Columns\"),\r\n                }, {\r\n                    headerName: i18n(\"Column\"),\r\n                    colId: \"column_name\",\r\n                    field: \"column_name\",\r\n                    initialWidth: 120,\r\n                    enableCellChangeFlash: true,\r\n                    group: i18n(\"Basic Columns\"),\r\n                }, {\r\n                    headerName: i18n(\"Operator\"),\r\n                    colId: \"operator\",\r\n                    field: \"operator\",\r\n                    cellRenderer: (params: any) => {\r\n                        const data = params.data as AdvancedFilterCondition;\r\n                        return getAdvancedFilterOperatorString(data.operator);\r\n                    },\r\n                    initialWidth: 120,\r\n                    enableCellChangeFlash: true,\r\n                    group: i18n(\"Basic Columns\"),\r\n                }, {\r\n                    headerName: i18n(\"Value\"),\r\n                    colId: \"value\",\r\n                    field: \"value\",\r\n                    initialWidth: 160,\r\n                    cellRenderer: (params: any) => {\r\n                        const data = params.data as AdvancedFilterCondition;\r\n                        const columnDefinition = this.props.columnDefinitions.find(value => value.columnName === data.column_name);\r\n                        if (columnDefinition) {\r\n                            return AdvancedFilterUtils.humanizeCondition(columnDefinition, false, data);\r\n                        }\r\n                        return \"\";\r\n                    },\r\n                    enableCellChangeFlash: true,\r\n                    group: i18n(\"Basic Columns\"),\r\n                }, {\r\n                    headerName: \")\",\r\n                    colId: \"right_par\",\r\n                    field: \"right_par\",\r\n                    initialWidth: 44,\r\n                    cellRenderer: (params: any) => {\r\n                        const data = params.data as AdvancedFilterCondition;\r\n                        return data.right_par === 1 ? \")\" : \"\";\r\n                    },\r\n                    enableCellChangeFlash: true,\r\n                    group: i18n(\"Basic Columns\"),\r\n                }, {\r\n                    headerName: i18n(\"Logical Operator\"),\r\n                    colId: \"logical_operator\",\r\n                    field: \"logical_operator\",\r\n                    initialWidth: 120,\r\n                    enableCellChangeFlash: true,\r\n                    group: i18n(\"Basic Columns\"),\r\n                }\r\n            ]\r\n        }\r\n\r\n        return this.initialColumnDefs;\r\n    }\r\n\r\n    onSelectionChanged(event: SelectionChangedEvent): void {\r\n        const selectedRows = event.api.getSelectedRows();\r\n        if (selectedRows.length > 0) {\r\n            this.setState({selectedCondition: selectedRows[0]});\r\n        } else {\r\n            this.setState({selectedCondition: null});\r\n            this.dataGrid?.showDetailPanel(false);\r\n        }\r\n    }\r\n\r\n    private onAddNewCondition() {\r\n        const filterConditions = this.props.filterConditions;\r\n        const newId = filterConditions.length === 0 ? 0 : Math.max(...filterConditions.map(value => value.id)) + 1;\r\n        const newCondition = AdvancedFilterUtils.newCondition(this.props.columnDefinitions[0]);\r\n        newCondition.id = newId;\r\n\r\n        filterConditions.push(newCondition);\r\n        this.setState({selectedCondition: newCondition});\r\n\r\n        this.props.onChange(filterConditions);\r\n\r\n        // add new expression to grid and preselect new row\r\n        this.gridApi?.applyTransaction({add: [newCondition]});\r\n        const rowNode = this.gridApi?.getRowNode(newCondition.id.toString());\r\n        rowNode?.setSelected(true, true);\r\n        this.gridApi?.ensureNodeVisible(rowNode);\r\n\r\n        // show conditionList panel\r\n        this.dataGrid?.showDetailPanel(true);\r\n    }\r\n\r\n    renderToolbarButtons() {\r\n        const operationsDisabled = this.state.loading;\r\n\r\n        return <>\r\n            <Button\r\n                title={i18n(\"New Condition\")}\r\n                disabled={operationsDisabled}\r\n                onClick={this.onAddNewCondition}\r\n            >\r\n                <PlusCircleOutlined/>\r\n            </Button>\r\n            <Button\r\n                title={i18n(\"Remove Expression\")}\r\n                disabled={operationsDisabled || this.state.selectedCondition === null}\r\n                onClick={() => {\r\n                    const conditionToRemove = this.state.selectedCondition;\r\n                    if (conditionToRemove) {\r\n                        let filterConditions = this.props.filterConditions;\r\n                        filterConditions = filterConditions.filter(value => value.id !== conditionToRemove.id);\r\n\r\n                        this.props.onChange(filterConditions);\r\n\r\n                        // remove expression from grid\r\n                        this.gridApi?.applyTransaction({remove: [conditionToRemove]});\r\n\r\n                        // show conditionList panel\r\n                        this.dataGrid?.showDetailPanel(false);\r\n                    }\r\n                }}\r\n            >\r\n                <CloseCircleOutlined/>\r\n            </Button>\r\n        </>\r\n    }\r\n\r\n    renderDetailPanel() {\r\n        if (this.state.selectedCondition) {\r\n            return (\r\n                <AdvancedFilterConditionDetailPanel\r\n                    editedCondition={this.state.selectedCondition}\r\n                    columnDefinitions={this.props.columnDefinitions}\r\n                    onClose={() => this.dataGrid?.showDetailPanel(false)}\r\n                    onNextRecord={() => this.dataGrid?.selectNextPreviousRecord(false)}\r\n                    onPrevRecord={() => this.dataGrid?.selectNextPreviousRecord(true)}\r\n                    onChange={editedCondition => {\r\n                        this.setState({selectedCondition: editedCondition});\r\n                        this.gridApi?.applyTransaction({update: [editedCondition]});\r\n                        this.props.onChange(this.props.filterConditions);\r\n                    }}\r\n                />\r\n            );\r\n        }\r\n        return <div/>;\r\n    }\r\n\r\n    renderControlPanel() {\r\n        if (this.props.isParenthesisError) {\r\n            return (\r\n                <div style={{display: \"flex\", justifyContent: \"center\", padding: \"0px 12px 8px\"}}>\r\n                    <ColorTag icon={<ExclamationCircleOutlined/>} color=\"error\">\r\n                        {i18n(\"Parentheses match error\")}\r\n                    </ColorTag>\r\n                </div>\r\n            );\r\n        }\r\n\r\n        return <div/>;\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div style={{position: \"relative\", width: \"100%\", height: \"100%\"}}>\r\n                <ExtendedDataGrid<AdvancedFilterCondition>\r\n                    ref={(dataGrid) => {\r\n                        this.dataGrid = dataGrid;\r\n                    }}\r\n                    defaultGridConfiguration={{pageSize: -1}}\r\n                    onGridReady={(params: GridReadyEvent) => {\r\n                        this.gridApi = params.api;\r\n                    }}\r\n                    columnDefs={this.getInitialColumnDefs()}\r\n                    onLoadData={callback => callback(this.props.filterConditions.length)}\r\n                    rowData={this.props.filterConditions}\r\n                    toolbar={{\r\n                        toolbarButtons: this.renderToolbarButtons(),\r\n                    }}\r\n                    search={{\r\n                        hidden: true,\r\n                        searchButtonHidden: true,\r\n                    }}\r\n                    controlPanel={{\r\n                        renderer: this.renderControlPanel\r\n                    }}\r\n                    onSelectionChanged={this.onSelectionChanged}\r\n                    onRowDoubleClicked={(event) => {\r\n                        this.setState({selectedCondition: event.data});\r\n                        this.dataGrid?.showDetailPanel(true);\r\n                    }}\r\n                    detailPanel={{\r\n                        defaultWidth: 400,\r\n                        renderer: this.renderDetailPanel\r\n                    }}\r\n                    suppressMovableColumns\r\n                    rowDragManaged\r\n                    animateRows\r\n                    onRowDragEnd={(event: RowDragEndEvent) => {\r\n                        const draggedCondition = event.node.data as AdvancedFilterCondition;\r\n                        const filterConditions = this.props.filterConditions;\r\n\r\n                        const toIndex = event.overIndex !== -1 ? event.overIndex : filterConditions.length;\r\n                        const fromIndex = filterConditions.findIndex(value => value.id === draggedCondition.id);\r\n\r\n                        filterConditions.splice(toIndex, 0, filterConditions.splice(fromIndex, 1)[0]);\r\n\r\n                        this.props.onChange(filterConditions);\r\n                    }}\r\n                    noRecordsOverlayRenderer={() =>\r\n                        <div>\r\n                            <Button\r\n                                type=\"primary\"\r\n                                onClick={this.onAddNewCondition}\r\n                            >\r\n                                <PlusCircleOutlined/> {i18n(\"Add Condition\")}\r\n                            </Button>\r\n                        </div>\r\n                    }\r\n                    getRowStyle={params => {\r\n                        const data = params.data as AdvancedFilterCondition;\r\n                        if (data._errors && data._errors.length > 0) {\r\n                            return {color: \"#d4380d\", background: \"#fff2e8\"}\r\n                        }\r\n                        return;\r\n                    }}\r\n                />\r\n            </div>\r\n        );\r\n    }\r\n\r\n}"]}
+{"version":3,"file":"advancedFilterConditionListPanel.js","sourceRoot":"","sources":["../../../../../../coreui/components/advancedFilter/conditionList/advancedFilterConditionListPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\r\nimport {DataGridColDef} from \"d2coreui/components/grid/dataGrid\";\r\nimport ExtendedDataGrid from \"d2coreui/components/grid/extendedDataGrid\";\r\nimport {AdvancedFilterCondition, getAdvancedFilterOperatorString} from \"../../../../api/advancedFilterApi\";\r\nimport {GridApi, GridReadyEvent, RowDragEndEvent, SelectionChangedEvent} from \"ag-grid-community\";\r\nimport i18n from \"d2core/i18n/i18n\";\r\nimport {Button} from \"antd\";\r\nimport {CloseCircleOutlined, ExclamationCircleOutlined, PlusCircleOutlined} from \"@ant-design/icons\";\r\nimport AdvancedFilterConditionDetailPanel from \"./advancedFilterConditionDetailPanel\";\r\nimport {AdvancedFilterColumnContext} from \"../../../../api/types/advancedFilter\";\r\nimport AdvancedFilterUtils from \"../advancedFilterUtils\";\r\nimport ColorTag from \"../../colorTag/colorTag\";\r\n\r\ninterface AdvancedFilterConditionListPanelProps {\r\n    filterConditions: AdvancedFilterCondition[]\r\n    columnDefinitions: AdvancedFilterColumnContext[]\r\n    isParenthesisError: boolean\r\n\r\n    onChange(filterConditions: AdvancedFilterCondition[]): void\r\n}\r\n\r\ninterface AdvancedFilterConditionListPanelState {\r\n    selectedCondition: AdvancedFilterCondition | null\r\n    loading: boolean\r\n}\r\n\r\nexport default class AdvancedFilterConditionListPanel extends React.Component<AdvancedFilterConditionListPanelProps, AdvancedFilterConditionListPanelState> {\r\n    private initialColumnDefs?: DataGridColDef[];\r\n    private dataGrid: ExtendedDataGrid<AdvancedFilterCondition> | null = null;\r\n    private gridApi?: GridApi;\r\n\r\n    constructor(props: Readonly<AdvancedFilterConditionListPanelProps>) {\r\n        super(props);\r\n\r\n        this.state = {\r\n            selectedCondition: null,\r\n            loading: false,\r\n        }\r\n\r\n        this.onSelectionChanged = this.onSelectionChanged.bind(this);\r\n        this.renderDetailPanel = this.renderDetailPanel.bind(this);\r\n        this.renderControlPanel = this.renderControlPanel.bind(this);\r\n        this.onAddNewCondition = this.onAddNewCondition.bind(this);\r\n    }\r\n\r\n    componentDidMount() {\r\n        if (this.props.filterConditions.length === 0) {\r\n            this.onAddNewCondition();\r\n        }\r\n    }\r\n\r\n    refreshData() {\r\n        this.gridApi?.applyTransaction({update: this.props.filterConditions});\r\n\r\n        const selectedRows = this.gridApi?.getSelectedRows();\r\n        this.setState({selectedCondition: selectedRows?.[0] ?? null});\r\n    }\r\n\r\n    getInitialColumnDefs(): DataGridColDef[] {\r\n        if (!this.initialColumnDefs) {\r\n            this.initialColumnDefs = [\r\n                {\r\n                    headerName: i18n(\"Negation\"),\r\n                    colId: \"not_flag\",\r\n                    field: \"not_flag\",\r\n                    initialWidth: 80,\r\n                    cellRenderer: (params: any) => {\r\n                        const data = params.data as AdvancedFilterCondition;\r\n                        return data.not_flag === 1 ? \"NOT\" : \"\";\r\n                    },\r\n                    enableCellChangeFlash: true,\r\n                    group: i18n(\"Basic Columns\"),\r\n                    rowDrag: true,\r\n                }, {\r\n                    headerName: \"(\",\r\n                    colId: \"left_par\",\r\n                    field: \"left_par\",\r\n                    initialWidth: 44,\r\n                    cellRenderer: (params: any) => {\r\n                        const data = params.data as AdvancedFilterCondition;\r\n                        return data.left_par === 1 ? \"(\" : \"\";\r\n                    },\r\n                    enableCellChangeFlash: true,\r\n                    group: i18n(\"Basic Columns\"),\r\n                }, {\r\n                    headerName: i18n(\"Column\"),\r\n                    colId: \"column_name\",\r\n                    field: \"column_name\",\r\n                    initialWidth: 220,\r\n                    cellRenderer: (params: any) => {\r\n                        const data = params.data as AdvancedFilterCondition;\r\n                        const columnDefinition = this.props.columnDefinitions.find(value => value.columnName === data.column_name);\r\n\r\n                        if (columnDefinition) {\r\n                            return columnDefinition.displayName;\r\n                        }\r\n\r\n                        return null;\r\n                    },\r\n                    enableCellChangeFlash: true,\r\n                    group: i18n(\"Basic Columns\"),\r\n                }, {\r\n                    headerName: i18n(\"Operator\"),\r\n                    colId: \"operator\",\r\n                    field: \"operator\",\r\n                    cellRenderer: (params: any) => {\r\n                        const data = params.data as AdvancedFilterCondition;\r\n                        return getAdvancedFilterOperatorString(data.operator);\r\n                    },\r\n                    initialWidth: 120,\r\n                    enableCellChangeFlash: true,\r\n                    group: i18n(\"Basic Columns\"),\r\n                }, {\r\n                    headerName: i18n(\"Value\"),\r\n                    colId: \"value\",\r\n                    field: \"value\",\r\n                    initialWidth: 160,\r\n                    cellRenderer: (params: any) => {\r\n                        const data = params.data as AdvancedFilterCondition;\r\n                        const columnDefinition = this.props.columnDefinitions.find(value => value.columnName === data.column_name);\r\n                        if (columnDefinition) {\r\n                            return AdvancedFilterUtils.humanizeCondition(columnDefinition, false, data);\r\n                        }\r\n                        return \"\";\r\n                    },\r\n                    enableCellChangeFlash: true,\r\n                    group: i18n(\"Basic Columns\"),\r\n                }, {\r\n                    headerName: \")\",\r\n                    colId: \"right_par\",\r\n                    field: \"right_par\",\r\n                    initialWidth: 44,\r\n                    cellRenderer: (params: any) => {\r\n                        const data = params.data as AdvancedFilterCondition;\r\n                        return data.right_par === 1 ? \")\" : \"\";\r\n                    },\r\n                    enableCellChangeFlash: true,\r\n                    group: i18n(\"Basic Columns\"),\r\n                }, {\r\n                    headerName: i18n(\"Logical Operator\"),\r\n                    colId: \"logical_operator\",\r\n                    field: \"logical_operator\",\r\n                    initialWidth: 120,\r\n                    enableCellChangeFlash: true,\r\n                    group: i18n(\"Basic Columns\"),\r\n                }\r\n            ]\r\n        }\r\n\r\n        return this.initialColumnDefs;\r\n    }\r\n\r\n    onSelectionChanged(event: SelectionChangedEvent): void {\r\n        const selectedRows = event.api.getSelectedRows();\r\n        if (selectedRows.length > 0) {\r\n            this.setState({selectedCondition: selectedRows[0]});\r\n        } else {\r\n            this.setState({selectedCondition: null});\r\n            this.dataGrid?.showDetailPanel(false);\r\n        }\r\n    }\r\n\r\n    private onAddNewCondition() {\r\n        const filterConditions = this.props.filterConditions;\r\n        const newId = filterConditions.length === 0 ? 0 : Math.max(...filterConditions.map(value => value.id)) + 1;\r\n        const newCondition = AdvancedFilterUtils.newCondition(this.props.columnDefinitions[0]);\r\n        newCondition.id = newId;\r\n\r\n        filterConditions.push(newCondition);\r\n        this.setState({selectedCondition: newCondition});\r\n\r\n        this.props.onChange(filterConditions);\r\n\r\n        // add new expression to grid and preselect new row\r\n        this.gridApi?.applyTransaction({add: [newCondition]});\r\n        const rowNode = this.gridApi?.getRowNode(newCondition.id.toString());\r\n        rowNode?.setSelected(true, true);\r\n        this.gridApi?.ensureNodeVisible(rowNode);\r\n\r\n        // show conditionList panel\r\n        this.dataGrid?.showDetailPanel(true);\r\n    }\r\n\r\n    renderToolbarButtons() {\r\n        const operationsDisabled = this.state.loading;\r\n\r\n        return <>\r\n            <Button\r\n                title={i18n(\"New Condition\")}\r\n                disabled={operationsDisabled}\r\n                onClick={this.onAddNewCondition}\r\n            >\r\n                <PlusCircleOutlined/>\r\n            </Button>\r\n            <Button\r\n                title={i18n(\"Remove Expression\")}\r\n                disabled={operationsDisabled || this.state.selectedCondition === null}\r\n                onClick={() => {\r\n                    const conditionToRemove = this.state.selectedCondition;\r\n                    if (conditionToRemove) {\r\n                        let filterConditions = this.props.filterConditions;\r\n                        filterConditions = filterConditions.filter(value => value.id !== conditionToRemove.id);\r\n\r\n                        this.props.onChange(filterConditions);\r\n\r\n                        // remove expression from grid\r\n                        this.gridApi?.applyTransaction({remove: [conditionToRemove]});\r\n\r\n                        // show conditionList panel\r\n                        this.dataGrid?.showDetailPanel(false);\r\n                    }\r\n                }}\r\n            >\r\n                <CloseCircleOutlined/>\r\n            </Button>\r\n        </>\r\n    }\r\n\r\n    renderDetailPanel() {\r\n        if (this.state.selectedCondition) {\r\n            return (\r\n                <AdvancedFilterConditionDetailPanel\r\n                    editedCondition={this.state.selectedCondition}\r\n                    columnDefinitions={this.props.columnDefinitions}\r\n                    onClose={() => this.dataGrid?.showDetailPanel(false)}\r\n                    onNextRecord={() => this.dataGrid?.selectNextPreviousRecord(false)}\r\n                    onPrevRecord={() => this.dataGrid?.selectNextPreviousRecord(true)}\r\n                    onChange={editedCondition => {\r\n                        this.setState({selectedCondition: editedCondition});\r\n                        this.gridApi?.applyTransaction({update: [editedCondition]});\r\n                        this.props.onChange(this.props.filterConditions);\r\n                    }}\r\n                />\r\n            );\r\n        }\r\n        return <div/>;\r\n    }\r\n\r\n    renderControlPanel() {\r\n        if (this.props.isParenthesisError) {\r\n            return (\r\n                <div style={{display: \"flex\", justifyContent: \"center\", padding: \"0px 12px 8px\"}}>\r\n                    <ColorTag icon={<ExclamationCircleOutlined/>} color=\"error\">\r\n                        {i18n(\"Parentheses match error\")}\r\n                    </ColorTag>\r\n                </div>\r\n            );\r\n        }\r\n\r\n        return <div/>;\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div style={{position: \"relative\", width: \"100%\", height: \"100%\"}}>\r\n                <ExtendedDataGrid<AdvancedFilterCondition>\r\n                    ref={(dataGrid) => {\r\n                        this.dataGrid = dataGrid;\r\n                    }}\r\n                    defaultGridConfiguration={{pageSize: -1}}\r\n                    onGridReady={(params: GridReadyEvent) => {\r\n                        this.gridApi = params.api;\r\n                    }}\r\n                    columnDefs={this.getInitialColumnDefs()}\r\n                    onLoadData={callback => callback(this.props.filterConditions.length)}\r\n                    rowData={this.props.filterConditions}\r\n                    toolbar={{\r\n                        toolbarButtons: this.renderToolbarButtons(),\r\n                    }}\r\n                    search={{\r\n                        hidden: true,\r\n                        searchButtonHidden: true,\r\n                    }}\r\n                    rowSelection=\"single\"\r\n                    controlPanel={{\r\n                        renderer: this.renderControlPanel\r\n                    }}\r\n                    onSelectionChanged={this.onSelectionChanged}\r\n                    onRowDoubleClicked={(event) => {\r\n                        this.setState({selectedCondition: event.data});\r\n                        this.dataGrid?.showDetailPanel(true);\r\n                    }}\r\n                    detailPanel={{\r\n                        defaultWidth: 400,\r\n                        renderer: this.renderDetailPanel\r\n                    }}\r\n                    suppressMovableColumns\r\n                    rowDragManaged\r\n                    animateRows\r\n                    onRowDragEnd={(event: RowDragEndEvent) => {\r\n                        const draggedCondition = event.node.data as AdvancedFilterCondition;\r\n                        const filterConditions = this.props.filterConditions;\r\n\r\n                        const toIndex = event.overIndex !== -1 ? event.overIndex : filterConditions.length;\r\n                        const fromIndex = filterConditions.findIndex(value => value.id === draggedCondition.id);\r\n\r\n                        filterConditions.splice(toIndex, 0, filterConditions.splice(fromIndex, 1)[0]);\r\n\r\n                        this.props.onChange(filterConditions);\r\n                    }}\r\n                    noRecordsOverlayRenderer={() =>\r\n                        <div>\r\n                            <Button\r\n                                type=\"primary\"\r\n                                onClick={this.onAddNewCondition}\r\n                            >\r\n                                <PlusCircleOutlined/> {i18n(\"Add Condition\")}\r\n                            </Button>\r\n                        </div>\r\n                    }\r\n                    getRowStyle={params => {\r\n                        const data = params.data as AdvancedFilterCondition;\r\n                        if (data._errors && data._errors.length > 0) {\r\n                            return {color: \"#d4380d\", background: \"#fff2e8\"}\r\n                        }\r\n                        return;\r\n                    }}\r\n                />\r\n            </div>\r\n        );\r\n    }\r\n\r\n}"]}

package/coreui/components/d2Chart/d2ChartAdvancedZoom.d.ts

@@ -0,0 +1,25 @@
+import { EChartsInstance } from "echarts-for-react";
+export default class D2ChartAdvancedZoom {
+    private static RECT_ID;
+    private static START_LABEL_ID;
+    private static END_LABEL_ID;
+    private static DURATION_LABEL_ID;
+    private static MIN_WIDTH_PIXELS;
+    private static LABEL_FONT;
+    private static MILLISECONDS_PER_DAY;
+    private static MILLISECONDS_PER_YEAR;
+    private static measureContext;
+    private readonly chartInstance;
+    private startPixelX;
+    constructor(chartInstance: EChartsInstance);
+    register(): void;
+    private getGridRect;
+    private onClick;
+    private static measureLabel;
+    private static getTimestampFormat;
+    private static formatDuration;
+    private getLabel;
+    private updateSelection;
+    private clearSelection;
+    private finishZoom;
+}

package/coreui/components/d2Chart/d2ChartAdvancedZoom.js

@@ -0,0 +1,197 @@
+import dayjs from "d2core/dayjs";
+import { LocaleHolder } from "d2core/i18n/localeHolder";
+class D2ChartAdvancedZoom {
+    constructor(chartInstance) {
+        this.startPixelX = null;
+        this.chartInstance = chartInstance;
+    }
+    register() {
+        const zr = this.chartInstance.getZr();
+        zr.on("click", (e) => this.onClick(e));
+        zr.on("mousemove", (e) => {
+            if (this.startPixelX !== null) {
+                this.updateSelection(e.offsetX, e.offsetY);
+            }
+        });
+        zr.on("globalout", () => this.clearSelection());
+    }
+    getGridRect() {
+        try {
+            return this.chartInstance.getModel().getComponent("grid", 0).coordinateSystem.getRect();
+        }
+        catch {
+            return null;
+        }
+    }
+    onClick(e) {
+        if (!this.chartInstance.containPixel("grid", [e.offsetX, e.offsetY])) {
+            this.clearSelection();
+            return;
+        }
+        if (this.startPixelX === null) {
+            this.startPixelX = e.offsetX;
+            this.updateSelection(e.offsetX, e.offsetY);
+        }
+        else {
+            this.finishZoom(e.offsetX);
+        }
+    }
+    static measureLabel(text) {
+        if (!D2ChartAdvancedZoom.measureContext) {
+            D2ChartAdvancedZoom.measureContext = document.createElement("canvas").getContext("2d");
+        }
+        const context = D2ChartAdvancedZoom.measureContext;
+        if (!context) {
+            return text.length * 7;
+        }
+        context.font = D2ChartAdvancedZoom.LABEL_FONT;
+        return context.measureText(text).width;
+    }
+    static getTimestampFormat(visibleSpanMillis) {
+        const timeFormat = LocaleHolder.getTimeFormat(false, false);
+        if (visibleSpanMillis < D2ChartAdvancedZoom.MILLISECONDS_PER_DAY) {
+            return timeFormat;
+        }
+        return `${timeFormat} ${LocaleHolder.getDateFormat(visibleSpanMillis >= D2ChartAdvancedZoom.MILLISECONDS_PER_YEAR)}`;
+    }
+    static formatDuration(durationMillis) {
+        const duration = dayjs.duration(durationMillis);
+        const format = LocaleHolder.getDurationFormat(duration.asDays() >= 1, false).replace("DDDDD", "D");
+        return duration.format(format);
+    }
+    getLabel(id, text, x, y, accentColor, visible) {
+        return {
+            id: id,
+            type: "text",
+            z: 1001,
+            silent: true,
+            invisible: !visible,
+            x: x,
+            y: y,
+            style: {
+                text: text,
+                font: D2ChartAdvancedZoom.LABEL_FONT,
+                fill: "#333",
+                backgroundColor: "rgba(255, 255, 255, 0.85)",
+                borderColor: accentColor,
+                borderWidth: 1,
+                borderRadius: 2,
+                padding: [2, 4],
+            },
+        };
+    }
+    updateSelection(currentPixelX, currentPixelY) {
+        const gridRect = this.getGridRect();
+        if (!gridRect || this.startPixelX === null) {
+            return;
+        }
+        const startPixelX = this.startPixelX;
+        const gridRightPixelX = gridRect.x + gridRect.width;
+        const clampedPixelX = Math.min(Math.max(currentPixelX, gridRect.x), gridRightPixelX);
+        const clampedPixelY = Math.min(Math.max(currentPixelY, gridRect.y), gridRect.y + gridRect.height);
+        const zoomIn = clampedPixelX >= startPixelX;
+        const accentColor = zoomIn ? "rgba(64, 150, 255, 0.8)" : "rgba(255, 77, 79, 0.8)";
+        const leftPixelX = Math.min(startPixelX, clampedPixelX);
+        const rightPixelX = Math.max(startPixelX, clampedPixelX);
+        const leftValue = this.chartInstance.convertFromPixel({ xAxisIndex: 0 }, leftPixelX);
+        const rightValue = this.chartInstance.convertFromPixel({ xAxisIndex: 0 }, rightPixelX);
+        const visibleStartValue = this.chartInstance.convertFromPixel({ xAxisIndex: 0 }, gridRect.x);
+        const visibleEndValue = this.chartInstance.convertFromPixel({ xAxisIndex: 0 }, gridRightPixelX);
+        const timestampFormat = D2ChartAdvancedZoom.getTimestampFormat(visibleEndValue - visibleStartValue);
+        const labelMargin = 6;
+        const labelPaddingWidth = 10;
+        const labelHeight = 22;
+        const labelY = gridRect.y + 4;
+        const leftLabelText = dayjs(leftValue).format(timestampFormat);
+        const leftLabelWidth = D2ChartAdvancedZoom.measureLabel(leftLabelText) + labelPaddingWidth;
+        let leftLabelX = leftPixelX - labelMargin - leftLabelWidth;
+        if (leftLabelX < gridRect.x) {
+            leftLabelX = leftPixelX + labelMargin;
+        }
+        const rightLabelText = dayjs(rightValue).format(timestampFormat);
+        const rightLabelWidth = D2ChartAdvancedZoom.measureLabel(rightLabelText) + labelPaddingWidth;
+        let rightLabelX = rightPixelX + labelMargin;
+        if (rightLabelX + rightLabelWidth > gridRightPixelX) {
+            rightLabelX = rightPixelX - labelMargin - rightLabelWidth;
+        }
+        const labelsOverlap = leftLabelX < rightLabelX + rightLabelWidth + labelMargin
+            && rightLabelX < leftLabelX + leftLabelWidth + labelMargin;
+        const rightLabelY = labelsOverlap ? labelY + labelHeight : labelY;
+        const durationLabelText = D2ChartAdvancedZoom.formatDuration(rightValue - leftValue);
+        const durationLabelWidth = D2ChartAdvancedZoom.measureLabel(durationLabelText) + labelPaddingWidth;
+        let durationLabelX = clampedPixelX + 2 * labelMargin;
+        if (durationLabelX + durationLabelWidth > gridRightPixelX) {
+            durationLabelX = clampedPixelX - 2 * labelMargin - durationLabelWidth;
+        }
+        this.chartInstance.setOption({
+            graphic: [{
+                    id: D2ChartAdvancedZoom.RECT_ID,
+                    type: "rect",
+                    z: 1000,
+                    silent: true,
+                    shape: {
+                        x: leftPixelX,
+                        y: gridRect.y,
+                        width: rightPixelX - leftPixelX,
+                        height: gridRect.height,
+                    },
+                    style: {
+                        fill: zoomIn ? "rgba(64, 150, 255, 0.15)" : "rgba(255, 77, 79, 0.15)",
+                        stroke: accentColor,
+                        lineWidth: 1,
+                    },
+                },
+                this.getLabel(D2ChartAdvancedZoom.START_LABEL_ID, leftLabelText, leftLabelX, labelY, accentColor, zoomIn),
+                this.getLabel(D2ChartAdvancedZoom.END_LABEL_ID, rightLabelText, rightLabelX, rightLabelY, accentColor, zoomIn),
+                this.getLabel(D2ChartAdvancedZoom.DURATION_LABEL_ID, durationLabelText, durationLabelX, clampedPixelY - 10, accentColor, zoomIn),
+            ]
+        });
+    }
+    clearSelection() {
+        if (this.startPixelX !== null) {
+            this.startPixelX = null;
+            this.chartInstance.setOption({
+                graphic: [
+                    D2ChartAdvancedZoom.RECT_ID,
+                    D2ChartAdvancedZoom.START_LABEL_ID,
+                    D2ChartAdvancedZoom.END_LABEL_ID,
+                    D2ChartAdvancedZoom.DURATION_LABEL_ID,
+                ].map(id => ({ id: id, $action: "remove" }))
+            });
+        }
+    }
+    finishZoom(endPixelX) {
+        const startPixelX = this.startPixelX;
+        this.clearSelection();
+        const selectionWidthPixels = Math.abs(endPixelX - startPixelX);
+        const gridRect = this.getGridRect();
+        if (!gridRect || selectionWidthPixels < D2ChartAdvancedZoom.MIN_WIDTH_PIXELS) {
+            return;
+        }
+        if (endPixelX > startPixelX) {
+            this.chartInstance.dispatchAction({
+                type: "dataZoom",
+                startValue: this.chartInstance.convertFromPixel({ xAxisIndex: 0 }, startPixelX),
+                endValue: this.chartInstance.convertFromPixel({ xAxisIndex: 0 }, endPixelX),
+            });
+        }
+        else {
+            this.chartInstance.dispatchAction({
+                type: "dataZoom",
+                start: 0,
+                end: 100,
+            });
+        }
+    }
+}
+D2ChartAdvancedZoom.RECT_ID = "__advanced-zoom-rect";
+D2ChartAdvancedZoom.START_LABEL_ID = "__advanced-zoom-start-label";
+D2ChartAdvancedZoom.END_LABEL_ID = "__advanced-zoom-end-label";
+D2ChartAdvancedZoom.DURATION_LABEL_ID = "__advanced-zoom-duration-label";
+D2ChartAdvancedZoom.MIN_WIDTH_PIXELS = 3;
+D2ChartAdvancedZoom.LABEL_FONT = "12px sans-serif";
+D2ChartAdvancedZoom.MILLISECONDS_PER_DAY = 24 * 60 * 60 * 1000;
+D2ChartAdvancedZoom.MILLISECONDS_PER_YEAR = 365 * D2ChartAdvancedZoom.MILLISECONDS_PER_DAY;
+D2ChartAdvancedZoom.measureContext = null;
+export default D2ChartAdvancedZoom;
+//# sourceMappingURL=d2ChartAdvancedZoom.js.map

package/coreui/components/d2Chart/d2ChartAdvancedZoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"d2ChartAdvancedZoom.js","sourceRoot":"","sources":["../../../../../coreui/components/d2Chart/d2ChartAdvancedZoom.ts"],"names":[],"mappings":"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","sourcesContent":["import {EChartsInstance} from \"echarts-for-react\";\r\nimport dayjs from \"d2core/dayjs\";\r\nimport {LocaleHolder} from \"d2core/i18n/localeHolder\";\r\n\r\n/**\r\n * Click-move-click mouse zoom for a D2 chart.\r\n *\r\n * The first click inside the chart grid starts an interval selection; while the mouse moves,\r\n * the selected interval is visualized together with its boundary timestamps and duration.\r\n * A second click to the right of the first one zooms into the selected interval,\r\n * a second click to the left resets the zoom to the full data range.\r\n *\r\n * The selection is cancelled by clicking outside the chart grid or by leaving the chart area.\r\n * All visuals are transient ECharts `graphic` elements identified by the `*_ID` constants,\r\n * positioned in pixel coordinates and removed when the selection ends.\r\n */\r\nexport default class D2ChartAdvancedZoom {\r\n    private static RECT_ID = \"__advanced-zoom-rect\";\r\n    private static START_LABEL_ID = \"__advanced-zoom-start-label\";\r\n    private static END_LABEL_ID = \"__advanced-zoom-end-label\";\r\n    private static DURATION_LABEL_ID = \"__advanced-zoom-duration-label\";\r\n    /** Selections narrower than this are treated as an accidental double click and ignored. */\r\n    private static MIN_WIDTH_PIXELS = 3;\r\n    private static LABEL_FONT = \"12px sans-serif\";\r\n    private static MILLISECONDS_PER_DAY = 24 * 60 * 60 * 1000;\r\n    private static MILLISECONDS_PER_YEAR = 365 * D2ChartAdvancedZoom.MILLISECONDS_PER_DAY;\r\n    /** Shared off-screen canvas context used to measure label widths, created lazily. */\r\n    private static measureContext: CanvasRenderingContext2D | null = null;\r\n\r\n    private readonly chartInstance: EChartsInstance;\r\n    /** X pixel of the first click; null means no selection is in progress. */\r\n    private startPixelX: number | null = null;\r\n\r\n    constructor(chartInstance: EChartsInstance) {\r\n        this.chartInstance = chartInstance;\r\n    }\r\n\r\n    /**\r\n     * Attaches the mouse handlers to the chart's zrender instance.\r\n     * The handlers live as long as the chart instance, no explicit cleanup is needed.\r\n     */\r\n    register() {\r\n        const zr = this.chartInstance.getZr();\r\n        zr.on(\"click\", (e: { offsetX: number, offsetY: number }) => this.onClick(e));\r\n        zr.on(\"mousemove\", (e: { offsetX: number, offsetY: number }) => {\r\n            if (this.startPixelX !== null) {\r\n                this.updateSelection(e.offsetX, e.offsetY);\r\n            }\r\n        });\r\n        // cancel the selection when the mouse leaves the chart canvas\r\n        zr.on(\"globalout\", () => this.clearSelection());\r\n    }\r\n\r\n    /** Pixel rectangle of the chart grid (plotting area), null when the chart is not laid out yet. */\r\n    private getGridRect(): { x: number, y: number, width: number, height: number } | null {\r\n        try {\r\n            return this.chartInstance.getModel().getComponent(\"grid\", 0).coordinateSystem.getRect();\r\n        } catch {\r\n            return null;\r\n        }\r\n    }\r\n\r\n    /** First click starts the selection, second click finishes it; a click outside the grid cancels it. */\r\n    private onClick(e: { offsetX: number, offsetY: number }) {\r\n        if (!this.chartInstance.containPixel(\"grid\", [e.offsetX, e.offsetY])) {\r\n            this.clearSelection();\r\n            return;\r\n        }\r\n\r\n        if (this.startPixelX === null) {\r\n            this.startPixelX = e.offsetX;\r\n            this.updateSelection(e.offsetX, e.offsetY);\r\n        } else {\r\n            this.finishZoom(e.offsetX);\r\n        }\r\n    }\r\n\r\n    /** Width of the label text in pixels, measured with the label font. */\r\n    private static measureLabel(text: string): number {\r\n        if (!D2ChartAdvancedZoom.measureContext) {\r\n            D2ChartAdvancedZoom.measureContext = document.createElement(\"canvas\").getContext(\"2d\");\r\n        }\r\n\r\n        const context = D2ChartAdvancedZoom.measureContext;\r\n        if (!context) {\r\n            return text.length * 7;\r\n        }\r\n\r\n        context.font = D2ChartAdvancedZoom.LABEL_FONT;\r\n        return context.measureText(text).width;\r\n    }\r\n\r\n    /**\r\n     * Locale timestamp format for the boundary labels (time first, then date), chosen by the span\r\n     * of the interval currently visible in the chart: time only when less than a day is visible,\r\n     * time and date without the year when less than a year is visible, time and full date otherwise.\r\n     */\r\n    private static getTimestampFormat(visibleSpanMillis: number): string {\r\n        const timeFormat = LocaleHolder.getTimeFormat(false, false);\r\n        if (visibleSpanMillis < D2ChartAdvancedZoom.MILLISECONDS_PER_DAY) {\r\n            return timeFormat;\r\n        }\r\n\r\n        return `${timeFormat} ${LocaleHolder.getDateFormat(visibleSpanMillis >= D2ChartAdvancedZoom.MILLISECONDS_PER_YEAR)}`;\r\n    }\r\n\r\n    /**\r\n     * Formats a millisecond duration with the locale duration format provided by d2core's\r\n     * LocaleHolder; the days part is included only when the duration is at least one day long\r\n     * and is rendered without leading zeros.\r\n     */\r\n    private static formatDuration(durationMillis: number): string {\r\n        const duration = dayjs.duration(durationMillis);\r\n        const format = LocaleHolder.getDurationFormat(duration.asDays() >= 1, false).replace(\"DDDDD\", \"D\");\r\n        return duration.format(format);\r\n    }\r\n\r\n    /** ECharts graphic definition of one selection label (timestamp or duration). */\r\n    private getLabel(id: string, text: string, x: number, y: number, accentColor: string, visible: boolean) {\r\n        return {\r\n            id: id,\r\n            type: \"text\",\r\n            z: 1001,\r\n            silent: true, // labels must not steal mouse events from the chart\r\n            invisible: !visible,\r\n            x: x,\r\n            y: y,\r\n            style: {\r\n                text: text,\r\n                font: D2ChartAdvancedZoom.LABEL_FONT,\r\n                fill: \"#333\",\r\n                backgroundColor: \"rgba(255, 255, 255, 0.85)\",\r\n                borderColor: accentColor,\r\n                borderWidth: 1,\r\n                borderRadius: 2,\r\n                padding: [2, 4],\r\n            },\r\n        };\r\n    }\r\n\r\n    /**\r\n     * Redraws the selection visuals for the current mouse position: the selection rectangle,\r\n     * the boundary timestamp labels at the top of the grid and the duration label next to the cursor.\r\n     *\r\n     * Labels are placed outside the selection by default and flip to the other side of their\r\n     * boundary line when they would not fit into the grid; when the two timestamp labels would\r\n     * overlap each other, the end label moves one row lower. The labels are hidden while the\r\n     * selection direction means a zoom reset (mouse to the left of the start), because the\r\n     * selected interval has no meaning then.\r\n     */\r\n    private updateSelection(currentPixelX: number, currentPixelY: number) {\r\n        const gridRect = this.getGridRect();\r\n        if (!gridRect || this.startPixelX === null) {\r\n            return;\r\n        }\r\n\r\n        // keep the selection rectangle and the labels inside the grid even when the cursor is outside\r\n        const startPixelX = this.startPixelX;\r\n        const gridRightPixelX = gridRect.x + gridRect.width;\r\n        const clampedPixelX = Math.min(Math.max(currentPixelX, gridRect.x), gridRightPixelX);\r\n        const clampedPixelY = Math.min(Math.max(currentPixelY, gridRect.y), gridRect.y + gridRect.height);\r\n        const zoomIn = clampedPixelX >= startPixelX;\r\n        const accentColor = zoomIn ? \"rgba(64, 150, 255, 0.8)\" : \"rgba(255, 77, 79, 0.8)\";\r\n\r\n        const leftPixelX = Math.min(startPixelX, clampedPixelX);\r\n        const rightPixelX = Math.max(startPixelX, clampedPixelX);\r\n        const leftValue = this.chartInstance.convertFromPixel({xAxisIndex: 0}, leftPixelX) as number;\r\n        const rightValue = this.chartInstance.convertFromPixel({xAxisIndex: 0}, rightPixelX) as number;\r\n\r\n        // boundary label format depends on how long an interval is currently visible in the chart\r\n        const visibleStartValue = this.chartInstance.convertFromPixel({xAxisIndex: 0}, gridRect.x) as number;\r\n        const visibleEndValue = this.chartInstance.convertFromPixel({xAxisIndex: 0}, gridRightPixelX) as number;\r\n        const timestampFormat = D2ChartAdvancedZoom.getTimestampFormat(visibleEndValue - visibleStartValue);\r\n\r\n        const labelMargin = 6;\r\n        const labelPaddingWidth = 10; // padding [2, 4] + border\r\n        const labelHeight = 22;\r\n        const labelY = gridRect.y + 4;\r\n\r\n        // interval start label - to the left of the selection, flipped right when there is no room\r\n        const leftLabelText = dayjs(leftValue).format(timestampFormat);\r\n        const leftLabelWidth = D2ChartAdvancedZoom.measureLabel(leftLabelText) + labelPaddingWidth;\r\n        let leftLabelX = leftPixelX - labelMargin - leftLabelWidth;\r\n        if (leftLabelX < gridRect.x) {\r\n            leftLabelX = leftPixelX + labelMargin;\r\n        }\r\n\r\n        // interval end label - to the right of the selection, flipped left when there is no room\r\n        const rightLabelText = dayjs(rightValue).format(timestampFormat);\r\n        const rightLabelWidth = D2ChartAdvancedZoom.measureLabel(rightLabelText) + labelPaddingWidth;\r\n        let rightLabelX = rightPixelX + labelMargin;\r\n        if (rightLabelX + rightLabelWidth > gridRightPixelX) {\r\n            rightLabelX = rightPixelX - labelMargin - rightLabelWidth;\r\n        }\r\n\r\n        // when the labels would overlap horizontally, move the end label one row lower\r\n        const labelsOverlap = leftLabelX < rightLabelX + rightLabelWidth + labelMargin\r\n            && rightLabelX < leftLabelX + leftLabelWidth + labelMargin;\r\n        const rightLabelY = labelsOverlap ? labelY + labelHeight : labelY;\r\n\r\n        // duration label follows the cursor, flipped to its left when there is no room on the right\r\n        const durationLabelText = D2ChartAdvancedZoom.formatDuration(rightValue - leftValue);\r\n        const durationLabelWidth = D2ChartAdvancedZoom.measureLabel(durationLabelText) + labelPaddingWidth;\r\n        let durationLabelX = clampedPixelX + 2 * labelMargin;\r\n        if (durationLabelX + durationLabelWidth > gridRightPixelX) {\r\n            durationLabelX = clampedPixelX - 2 * labelMargin - durationLabelWidth;\r\n        }\r\n\r\n        this.chartInstance.setOption({\r\n            graphic: [{\r\n                id: D2ChartAdvancedZoom.RECT_ID,\r\n                type: \"rect\",\r\n                z: 1000,\r\n                silent: true,\r\n                shape: {\r\n                    x: leftPixelX,\r\n                    y: gridRect.y,\r\n                    width: rightPixelX - leftPixelX,\r\n                    height: gridRect.height,\r\n                },\r\n                style: {\r\n                    fill: zoomIn ? \"rgba(64, 150, 255, 0.15)\" : \"rgba(255, 77, 79, 0.15)\",\r\n                    stroke: accentColor,\r\n                    lineWidth: 1,\r\n                },\r\n            },\r\n                this.getLabel(D2ChartAdvancedZoom.START_LABEL_ID, leftLabelText, leftLabelX, labelY, accentColor, zoomIn),\r\n                this.getLabel(D2ChartAdvancedZoom.END_LABEL_ID, rightLabelText, rightLabelX, rightLabelY, accentColor, zoomIn),\r\n                this.getLabel(D2ChartAdvancedZoom.DURATION_LABEL_ID, durationLabelText, durationLabelX, clampedPixelY - 10, accentColor, zoomIn),\r\n            ]\r\n        });\r\n    }\r\n\r\n    /** Ends the selection and removes all its graphic elements from the chart. */\r\n    private clearSelection() {\r\n        if (this.startPixelX !== null) {\r\n            this.startPixelX = null;\r\n            this.chartInstance.setOption({\r\n                graphic: [\r\n                    D2ChartAdvancedZoom.RECT_ID,\r\n                    D2ChartAdvancedZoom.START_LABEL_ID,\r\n                    D2ChartAdvancedZoom.END_LABEL_ID,\r\n                    D2ChartAdvancedZoom.DURATION_LABEL_ID,\r\n                ].map(id => ({id: id, $action: \"remove\"}))\r\n            });\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Applies the zoom on the second click: a selection made to the right zooms into the\r\n     * selected interval, a selection made to the left resets the zoom to the full data range.\r\n     */\r\n    private finishZoom(endPixelX: number) {\r\n        const startPixelX = this.startPixelX!;\r\n        this.clearSelection();\r\n\r\n        const selectionWidthPixels = Math.abs(endPixelX - startPixelX);\r\n        const gridRect = this.getGridRect();\r\n        if (!gridRect || selectionWidthPixels < D2ChartAdvancedZoom.MIN_WIDTH_PIXELS) {\r\n            return;\r\n        }\r\n\r\n        if (endPixelX > startPixelX) {\r\n            this.chartInstance.dispatchAction({\r\n                type: \"dataZoom\",\r\n                startValue: this.chartInstance.convertFromPixel({xAxisIndex: 0}, startPixelX) as number,\r\n                endValue: this.chartInstance.convertFromPixel({xAxisIndex: 0}, endPixelX) as number,\r\n            });\r\n        } else {\r\n            this.chartInstance.dispatchAction({\r\n                type: \"dataZoom\",\r\n                start: 0,\r\n                end: 100,\r\n            });\r\n        }\r\n    }\r\n}\r\n"]}

package/coreui/components/d2Chart/d2ChartPanel.d.ts

@@ -10,6 +10,7 @@ export interface D2ChartPanelProps {
     markArea?: MarkArea;
     compact?: boolean;
     yAxisLabel?: string;
+    advancedMouseZoom?: boolean;
     tableHeight: number | "auto";
     tableWrapperStyle?: Omit<React.CSSProperties, "height">;
 }
@@ -27,6 +28,7 @@ export default class D2ChartPanel extends React.Component<D2ChartPanelProps, Sta
     private d2ChartPanelInModal;
     private d2ChartTablePanel;
     constructor(props: Readonly<D2ChartPanelProps>);
+    private get advancedMouseZoomEnabled();
     componentDidUpdate(prevProps: Readonly<D2ChartPanelProps>): void;
     private onSwitchLegend;
     private onSwitchCalendarData;