d2coreui 23.0.15 → 23.0.17

package/components/grid/extendedDataGrid.tsx

@@ -1,974 +0,0 @@
-import React, {ReactElement} from "react";
-import * as FlexLayout from "flexlayout-react";
-import {Actions} from "flexlayout-react";
-import {ExclamationOutlined, EyeInvisibleOutlined, EyeOutlined, FilterOutlined} from "@ant-design/icons";
-import {Badge, Button, Empty} from "antd";
-import DataGrid, {
-    DataGridFilterProps,
-    DataGridProps,
-    DataGridSearchProps,
-    DataGridViewportChangedEvent,
-    OnLoadDataCallback,
-    SortItem
-} from "./dataGrid";
-import debounce from "lodash/debounce";
-import i18n from "d2core/i18n/i18n";
-import isEqual from "lodash/isEqual"
-import isEqualWith from "lodash/isEqualWith"
-import cloneDeep from "lodash/cloneDeep";
-import tableDefaultRowStyleRules, {RowStyleRule} from "d2coreui/components/grid/cell/tableDefaultRowStyleRules";
-import {
-    ColDef,
-    ColumnState,
-    GridApi,
-    GridReadyEvent,
-    RowDataUpdatedEvent,
-    SelectionChangedEvent,
-    TextFilter,
-    TextFilterModel,
-    ViewportChangedEvent
-} from "ag-grid-community";
-import {Model} from "flexlayout-react/declarations/model/Model";
-import {ColumnUtils} from "./columnUtils";
-import {DataChangeStateEnum} from "d2core/types/dataChangeStateEnum";
-
-const CONFIGURATION_VERSION = 1;
-
-export interface GridConfiguration {
-    // version of configuration
-    version?: number
-    // current layout model of panels (filter, table, detail)
-    layoutModel?: any
-    // current state of table columns
-    columnModel?: ColumnState[]
-    //current page size of the table
-    pageSize: number
-    // default page size, applied when user reverts configuration
-    defaultPageSize?: number
-    // table scrolls to lastly added record automatically
-    followLastRecord?: boolean;
-    // table sort model applied/required for follow last record functionality
-    followLastRecordSortModel?: SortItem[]
-    // flag if follow last record feature could be turned on/off by user
-    followLastRecordEditable?: boolean
-    // allow showing floating column filters beneath column names
-    columnSearchVisible?: boolean
-    // rules which apply to table rows
-    rowStyleRules?: RowStyleRule[]
-    // default rules which apply to table rows
-    defaultRowStyleRules?: RowStyleRule[]
-    // show milliseconds in datetime, time columns
-    showMilliseconds?: boolean
-    defaultShowMilliseconds?: boolean
-    // hide year in date columns
-    hideYear?: boolean
-    defaultHideYear?: boolean
-}
-
-interface ExtendedDataGridSearchProps extends DataGridSearchProps {
-    initialSearchHistory?: string[]
-}
-
-interface ExtendedDataGridFilterProps extends DataGridFilterProps {
-    quickFilterEnabled?: boolean
-}
-
-export interface FilterPanelRendererParams {
-    defaultFilter?: any,
-    // flag if filter is different than default filter
-    filterChanged: boolean
-}
-
-export interface ExtendedDataGridProps extends Omit<DataGridProps, "paging"> {
-    defaultGridConfiguration: GridConfiguration
-
-    // handler called during changes to data grid configuration
-    onChangeConfiguration?(gridConfiguration: GridConfiguration): void
-
-    // allow changing configuration
-    disableConfigurationChange?: boolean
-
-    filter?: ExtendedDataGridFilterProps
-    search?: ExtendedDataGridSearchProps
-
-    paging?: {
-        /**
-         * Page size change handler
-         * @param currentPageSize - current page size represents number rows available
-         * @param definedPageSize -
-         */
-        onPaginationChanged?: (currentPageSize: number | null, definedPageSize: number) => void;
-    }
-    // configuration of filter panel on the left side
-    filterPanel?: {
-        // default width of filter panel
-        defaultWidth?: number
-        // flag if panel is hidden, by default it is shown
-        hidden?: boolean
-        // default filter parameters
-        defaultFilter?: any
-        // filter panel render function
-        renderer?(parameters: FilterPanelRendererParams): ReactElement
-    }
-    // configuration of detail panel on the right side
-    detailPanel?: {
-        // default width of detail panel on the left side
-        defaultWidth?: number
-        // detail panel render function
-        renderer(): ReactElement
-    }
-    // panel placed directly below table, usually contains context buttons
-    controlPanel?: {
-        // control panel render function
-        renderer?(): React.ReactElement | null
-    }
-
-    // handler notifying data of the table has changed
-    onDataChanged?(): void
-
-    // time between value updates in ms, 0 means no debounce
-    updateDataDebounceInterval?: number
-}
-
-interface ExtendedDataGridState {
-    // current layout model of panels (filter, table, detail)
-    layoutModel: Model
-    // current table configuration
-    gridConfiguration: GridConfiguration
-    // currently entered search string
-    searchString: string
-    // history of entered search strings
-    searchHistory: string[]
-    // default filter parameters
-    defaultFilter: any
-    // flag if advanced table configuration is visible
-    tableConfigVisible: boolean
-    // flag if filter has changed, so data doesn't correspond to current filter (color of search button changes to yellow)
-    filterChanged: boolean
-    // flag renders badge with exclamation after search button to notify user that table data are not actual
-    tableNeedToBeReloaded: boolean
-}
-
-/**
- * Transaction class (more correct than RowDataTransaction)
- */
-interface DataGridTransaction<T> {
-    addIndex?: number;
-    add: T[];
-    remove: T[];
-    update: T[];
-}
-
-export default class ExtendedDataGrid<T extends {
-    id: number | string
-}> extends React.Component<ExtendedDataGridProps, ExtendedDataGridState> {
-    public static defaultProps = {
-        rowStyleRules: tableDefaultRowStyleRules()
-    };
-
-    dataGrid?: DataGrid;
-    private gridApi?: GridApi;
-    // flag if data are loaded
-    private dataLoaded: boolean;
-    // transaction object used to update data from class
-    private dataTransaction: DataGridTransaction<T>;
-    private flexLayout: any = null;
-
-    private _updateDataDebounced?(): void;
-
-    constructor(props: Readonly<ExtendedDataGridProps>) {
-        super(props);
-        let gridConfiguration: GridConfiguration = {
-            version: CONFIGURATION_VERSION,
-            pageSize: 0
-        };
-        const gridConfigurationOk = props.defaultGridConfiguration && (!props.defaultGridConfiguration.version || props.defaultGridConfiguration.version === CONFIGURATION_VERSION);
-        const layoutModelExists = gridConfigurationOk && !!props.defaultGridConfiguration.layoutModel;
-        gridConfiguration.layoutModel = layoutModelExists ? props.defaultGridConfiguration.layoutModel : this._getInitialLayoutModel(props);
-        gridConfiguration.columnModel = gridConfigurationOk && props.defaultGridConfiguration.columnModel ? props.defaultGridConfiguration.columnModel : undefined;
-        gridConfiguration.pageSize = gridConfigurationOk && props.defaultGridConfiguration.pageSize ? props.defaultGridConfiguration.pageSize : 0;
-        gridConfiguration.defaultPageSize = gridConfigurationOk && props.defaultGridConfiguration.defaultPageSize ? props.defaultGridConfiguration.defaultPageSize : undefined;
-        gridConfiguration.followLastRecord = gridConfigurationOk && props.defaultGridConfiguration.followLastRecord;
-        gridConfiguration.followLastRecordSortModel = gridConfigurationOk && props.defaultGridConfiguration.followLastRecordSortModel ? props.defaultGridConfiguration.followLastRecordSortModel : undefined;
-        gridConfiguration.followLastRecordEditable = gridConfigurationOk && props.defaultGridConfiguration.followLastRecordEditable;
-        gridConfiguration.columnSearchVisible = gridConfigurationOk && props.defaultGridConfiguration.columnSearchVisible;
-        gridConfiguration.rowStyleRules = gridConfigurationOk && props.defaultGridConfiguration.rowStyleRules ? props.defaultGridConfiguration.rowStyleRules : tableDefaultRowStyleRules();
-        gridConfiguration.defaultRowStyleRules = gridConfigurationOk && props.defaultGridConfiguration.defaultRowStyleRules ? props.defaultGridConfiguration.defaultRowStyleRules : tableDefaultRowStyleRules();
-        gridConfiguration.showMilliseconds = gridConfigurationOk && props.defaultGridConfiguration.showMilliseconds ? props.defaultGridConfiguration.showMilliseconds : false;
-        gridConfiguration.defaultShowMilliseconds = gridConfigurationOk && props.defaultGridConfiguration.defaultShowMilliseconds ? props.defaultGridConfiguration.defaultShowMilliseconds : false;
-        gridConfiguration.hideYear = gridConfigurationOk && props.defaultGridConfiguration.hideYear ? props.defaultGridConfiguration.hideYear : false;
-        gridConfiguration.defaultHideYear = gridConfigurationOk && props.defaultGridConfiguration.defaultHideYear ? props.defaultGridConfiguration.defaultHideYear : false;
-
-        // nasty fix to define ids for tabsets due to react-flexlayout library fix: https://github.com/caplin/FlexLayout/commit/3a21b21f6cd5c2a7b52d46084dce6a3880f9af58#diff-92c133bf427754ff04deeab6751b083b7c97ca955e7cc57c740eef5433fd0129
-        const layoutLength = gridConfiguration.layoutModel?.layout?.children?.length ?? 0;
-        if (layoutLength > 0) {
-            for (let i = 0; i < layoutLength; i++) {
-                if (!gridConfiguration.layoutModel.layout.children[i].id) {
-                    gridConfiguration.layoutModel.layout.children[i].id = `#${(i + 1) * 2}`
-                }
-            }
-        }
-
-        this.state = {
-            layoutModel: FlexLayout.Model.fromJson(gridConfiguration.layoutModel),
-            gridConfiguration: gridConfiguration,
-            // search context
-            searchString: "",
-            searchHistory: props.search && props.search.initialSearchHistory ? [...props.search.initialSearchHistory] : [],
-            // visibility flags
-            tableConfigVisible: false,
-
-            defaultFilter: this.props.filterPanel && this.props.filterPanel.defaultFilter ? cloneDeep(this.props.filterPanel.defaultFilter) : undefined,
-            filterChanged: false,
-            tableNeedToBeReloaded: false
-        };
-
-        if (!layoutModelExists && props.filterPanel && props.filterPanel.hidden) {
-            // hide filter panel if it is not explicitly shown
-            this.state.layoutModel.doAction(FlexLayout.Actions.updateNodeAttributes("#2", {width: 0}));
-            this.state.gridConfiguration.layoutModel.layout.children[0].width = 0;
-        }
-        if (props.detailPanel) {
-            this.state.layoutModel.doAction(FlexLayout.Actions.updateNodeAttributes(props.filterPanel ? "#6" : "#4", {width: 0}));
-        }
-
-        this.dataLoaded = false;
-        this.dataTransaction = {add: [], remove: [], update: []};
-
-        const debounceInterval: number = props.updateDataDebounceInterval ?? 500;
-        if (debounceInterval > 0) {
-            this._updateDataDebounced = debounce(this._updateData.bind(this), debounceInterval, {maxWait: debounceInterval});
-        } else {
-            this._updateDataDebounced = this._updateData.bind(this);
-        }
-
-        this.renderToolbarButtons = this.renderToolbarButtons.bind(this);
-        this._onLoadData = this._onLoadData.bind(this);
-        this._onGridReady = this._onGridReady.bind(this);
-        this._onPaginationChanged = this._onPaginationChanged.bind(this);
-        this._onSearch = this._onSearch.bind(this);
-        this._onSearchStringChanged = this._onSearchStringChanged.bind(this);
-        this.renderToolbar = this.renderToolbar.bind(this);
-        this._followLastRecordDebounced = debounce(this._followLastRecordDebounced.bind(this), 500, {maxWait: 500});
-        this._onRowDataUpdated = this._onRowDataUpdated.bind(this);
-        this._onChangeRowStyleRules = this._onChangeRowStyleRules.bind(this);
-        this.showFilterPanel = this.showFilterPanel.bind(this);
-        this.showDetailPanel = this.showDetailPanel.bind(this);
-        this.selectNextPreviousRecord = this.selectNextPreviousRecord.bind(this);
-        this._onSelectionChanged = this._onSelectionChanged.bind(this);
-        this._onViewportChanged = this._onViewportChanged.bind(this);
-    }
-
-    _getInitialLayoutModel(props: ExtendedDataGridProps) {
-        const renderFilter = props.filterPanel && props.filterPanel.renderer;
-        const renderDetail = props.detailPanel;
-        const layoutModel: any = {
-            global: {
-                tabSetEnableTabStrip: false,
-                splitterSize: 4,
-            },
-            borders: [],
-            layout: {
-                "type": "row",
-                "weight": 100,
-                "children": [{
-                    "type": "tabset",
-                    "weight": 100,
-                    "selected": 0,
-                    "children": [
-                        {
-                            "type": "tab",
-                            "name": "Data",
-                            "component": "data-panel",
-                        }
-                    ]
-                }]
-            }
-        };
-        if (renderFilter) {
-            layoutModel.layout["children"].unshift({
-                "id": "#2",
-                "type": "tabset",
-                "width": props.filterPanel && props.filterPanel.defaultWidth ? props.filterPanel.defaultWidth : 228,
-                "selected": 0,
-                "children": [
-                    {
-                        "type": "tab",
-                        "name": "Filter",
-                        "component": "filter-panel",
-                    }
-                ]
-            });
-        }
-        if (renderDetail) {
-            layoutModel.layout["children"].push({
-                "id": props.filterPanel ? "#6" : "#4",
-                "type": "tabset",
-                "width": props.detailPanel ? (props.detailPanel.defaultWidth ? props.detailPanel.defaultWidth : 220) : 0,
-                "selected": 0,
-                "children": [
-                    {
-                        "type": "tab",
-                        "name": "Detail",
-                        "component": "detail-panel",
-                    }
-                ]
-            },);
-        }
-        return layoutModel;
-    }
-
-    getConfiguration(): GridConfiguration {
-        return this.state.gridConfiguration;
-    }
-
-    getSearchContext(): { searchString: string, searchHistory: string[] } {
-        // reverse searchHistory before storing it
-        const searchHistory = [...this.state.searchHistory];
-        searchHistory.reverse();
-        return {
-            searchString: this.state.searchString,
-            searchHistory: searchHistory
-        };
-    }
-
-    loadData(callback?: () => void): void {
-        this.dataGrid?.loadData(callback);
-    }
-
-    isActive(): boolean {
-        return !!this.dataGrid && this.dataGrid.isActive();
-    }
-
-    focus() {
-        this.dataGrid?.focus();
-    }
-
-    private _changeConfiguration(configuration: Partial<GridConfiguration>, callback?: () => void): void {
-        if (this.props.disableConfigurationChange) {
-            return;
-        }
-        const newConfiguration = Object.assign(this.state.gridConfiguration, configuration);
-        this.setState({gridConfiguration: newConfiguration}, callback);
-        if (this.props.onChangeConfiguration) {
-            this.props.onChangeConfiguration(this.state.gridConfiguration);
-        }
-    }
-
-    private _onGridReady(event: GridReadyEvent): void {
-        this.gridApi = event.api;
-        this._reloadTableConfiguration();
-        if (this.props.onGridReady) {
-            this.props.onGridReady(event);
-        }
-    }
-
-    private _onLoadData(callback: OnLoadDataCallback): void {
-        if (this.state.tableNeedToBeReloaded) {
-            this.setState({tableNeedToBeReloaded: false});
-        }
-        this.props.onLoadData((recordsCount) => {
-            this.dataLoaded = true;
-            // clear meanwhile dynamically added/removed/updated data records
-            this.dataTransaction = {add: [], remove: [], update: []};
-            this.followLastRecord();
-            callback(recordsCount);
-        })
-    }
-
-    private _onPaginationChanged(currentPageSize: number | null, definedPageSize: number): void {
-        if (this.dataLoaded) {
-            const definedPageSizeChanged = this.state.gridConfiguration.pageSize !== definedPageSize;
-            if (definedPageSizeChanged) {
-                this._changeConfiguration({pageSize: definedPageSize});
-                this._followLastRecordDebounced();
-            }
-            if (this.props.paging && this.props.paging.onPaginationChanged) {
-                this.props.paging.onPaginationChanged(currentPageSize, definedPageSize);
-            }
-        }
-    }
-
-    private _onSearchStringChanged(searchString: string): void {
-        this.setState({searchString: searchString});
-        if (this.props.search && this.props.search.onChange) {
-            this.props.search.onChange(searchString);
-        }
-    }
-
-    private _onSearch(): void {
-        const currentSearchString = this.state.searchString;
-        let searchHistory: string[] = this.state.searchHistory;
-
-        // remove search string from history
-        searchHistory = searchHistory.filter((searchString) => searchString !== currentSearchString);
-        // add new search string to first position in history
-        searchHistory.unshift(currentSearchString);
-        searchHistory = searchHistory.slice(0, 10);
-        this.setState({
-            searchHistory: searchHistory,
-        });
-        if (this.props.search && this.props.search.onSearch) {
-            this.props.search.onSearch();
-        }
-    }
-
-    private _reloadTableConfiguration(): void {
-        if (this.gridApi) {
-            if (this.state.gridConfiguration.columnModel) {
-                ColumnUtils.mergeColumnsState(this.state.gridConfiguration.columnModel, this.props.columnDefs as ColDef[]);
-                this.gridApi.applyColumnState({state: this.state.gridConfiguration.columnModel, applyOrder: true});
-            } else {
-                this.gridApi.resetColumnState();
-                const columnState = this.gridApi.getColumnState();
-                this._changeConfiguration({columnModel: columnState});
-            }
-        }
-    }
-
-    clearTransaction() {
-        this.dataTransaction.add = [];
-        this.dataTransaction.remove = [];
-        this.dataTransaction.update = [];
-        this.dataTransaction.addIndex = undefined;
-    }
-
-    removeFromTransaction(item: T) {
-        this.dataTransaction.add = this.dataTransaction.add.filter(value => value.id !== item.id);
-        this.dataTransaction.remove = this.dataTransaction.remove.filter(value => value.id !== item.id);
-        this.dataTransaction.update = this.dataTransaction.update.filter(value => value.id !== item.id);
-    }
-
-    addRecord(data: T, addIndex?: number): void {
-        const markedToRemove = this.dataTransaction.remove.find((value => value.id === data.id));
-        if (markedToRemove) {
-            this.removeFromTransaction(data);
-            this.dataTransaction.update.push(data);
-        } else {
-            this.removeFromTransaction(data);
-            this.dataTransaction.add.push(data);
-            if (addIndex !== undefined) {
-                this.dataTransaction.addIndex = addIndex;
-            }
-        }
-        if (this._updateDataDebounced) {
-            this._updateDataDebounced();
-        }
-    }
-
-    addRecords(dataArray: T[], addIndex?: number): void {
-        (addIndex ? dataArray.reverse() : dataArray).forEach(data => this.addRecord(data, addIndex));
-    }
-
-    /** Set new data to the grid */
-    setRowData(dataArray: T[]): void {
-        // reset transaction data received till this new data list is loaded,
-        // we can do it here, because communication is serialized in one thread
-        // and all push changes to new list data will come only after this method is finished
-        this.dataTransaction = {add: [], remove: [], update: []};
-        this.dataGrid?.setRowData(dataArray);
-    }
-
-    removeRecord(data: T): void {
-        const markedToAdd = this.dataTransaction.add.find((value => value.id === data.id));
-        if (markedToAdd) {
-            this.removeFromTransaction(data);
-        } else {
-            this.removeFromTransaction(data);
-            this.dataTransaction.remove.push(data);
-        }
-        if (this._updateDataDebounced) {
-            this._updateDataDebounced();
-        }
-    }
-
-    removeRecords(dataList: T[]): void {
-        dataList.forEach((data) => {
-            this.removeRecord(data);
-        })
-    }
-
-    updateRecord(data: (T & { dataChangeState?: DataChangeStateEnum })) {
-        switch (data.dataChangeState) {
-            case DataChangeStateEnum.CONFIGURED:
-                this.addRecord(data);
-                break;
-            case DataChangeStateEnum.REMOVED:
-                this.removeRecord(data);
-                break;
-            default:
-                const markedToAdd = this.dataTransaction.add.find((value => value.id === data.id));
-                if (markedToAdd) {
-                    this.addRecord(data);
-                } else {
-                    this.removeFromTransaction(data);
-                    this.dataTransaction.update.push(data);
-                    if (this._updateDataDebounced) {
-                        this._updateDataDebounced();
-                    }
-                }
-                break;
-        }
-    }
-
-    updateRecords(dataList: (T & { dataChangeState?: DataChangeStateEnum })[]) {
-        dataList.forEach((data) => {
-            this.updateRecord(data);
-        });
-    }
-
-    private _updateData(): void {
-        // remove duplicates, preserve last version of object
-        this.dataTransaction.update.forEach(data => {
-            const rowNode = this.gridApi ? this.gridApi.getRowNode(data.id + "") : null;
-            if (rowNode) {
-                rowNode.updateData(data);
-                if (this.props.filter && this.props.filter.quickFilterEnabled) {
-                    rowNode.resetQuickFilterAggregateText();
-                }
-            } else {
-                this.dataTransaction.add.push(data);
-            }
-        });
-        // we have already processed them
-        this.dataTransaction.update = [];
-        if (this.dataTransaction.add.length > 0 || this.dataTransaction.remove.length > 0) {
-            this.dataTransaction.remove.forEach((object) => {
-                const node = this.gridApi ? this.gridApi.getRowNode(object.id + "") : null;
-                if (node && node.isSelected()) {
-                    node.setSelected(false);
-                }
-            });
-            // upgrade grid
-            if (this.gridApi) {
-                this.gridApi.applyTransaction(this.dataTransaction);
-            }
-            if (this.props.rowData) {
-                // automatically updating client side array of records
-                if (this.dataTransaction.addIndex !== undefined) {
-                    this.props.rowData.splice(this.dataTransaction.addIndex, 0, ...this.dataTransaction.add);
-                } else {
-                    this.props.rowData.push(...this.dataTransaction.add);
-                }
-                this.dataTransaction.remove.forEach((object) => {
-                    const index = this.props.rowData ? this.props.rowData.indexOf(object) : -1;
-                    if (index >= 0 && this.props.rowData) {
-                        this.props.rowData.splice(index, 1);
-                    }
-                });
-            }
-            this.dataTransaction = {add: [], remove: [], update: []};
-        }
-        if (this.props.onDataChanged) {
-            this.props.onDataChanged();
-        }
-    }
-
-    enableFollowLastRecord(enable: boolean): void {
-        if (enable) {
-            if (this.gridApi && this.state.gridConfiguration.followLastRecordSortModel) {
-                this.dataGrid?.setSortModel(this.state.gridConfiguration.followLastRecordSortModel);
-                this.gridApi.onSortChanged();
-            }
-            this._changeConfiguration({followLastRecord: true});
-            this._followLastRecordDebounced();
-        } else {
-            if (this.state.gridConfiguration.followLastRecord) {
-                this._changeConfiguration({followLastRecord: false});
-            }
-        }
-    }
-
-    _followLastRecordDebounced(): void {
-        if (this.state.gridConfiguration.followLastRecord && this.props.rowData && this.props.rowData.length > 0) {
-            this.followLastRecord();
-        }
-    }
-
-    /**
-     * Scrolls table to last record added to the tail of the table
-     */
-    followLastRecord(): void {
-        if (this.state.gridConfiguration.followLastRecord && this.props.rowData && this.props.rowData.length > 0) {
-            if (this.gridApi) {
-                let lastIndex = -1;
-                this.gridApi.forEachNodeAfterFilterAndSort((_, index) => {
-                    lastIndex = index;
-                });
-                if (lastIndex >= 0) {
-                    this.gridApi.ensureIndexVisible(lastIndex);
-                }
-            }
-        }
-    }
-
-    public setColumnModel(columnModel: ColumnState[]) {
-        this.dataGrid?.setColumnState(columnModel);
-    }
-
-    public setSortModel(sortModel: SortItem[]) {
-        this.dataGrid?.setSortModel(sortModel);
-    }
-
-    public getSortModel(): SortItem[] {
-        return this.dataGrid?.getSortModel() ?? [];
-    }
-
-    _onRowDataUpdated(event: RowDataUpdatedEvent): void {
-        this._followLastRecordDebounced();
-        if (this.props.onRowDataUpdated) {
-            this.props.onRowDataUpdated(event);
-        }
-    }
-
-    showFilterPanel(show: boolean): void {
-        if (show) {
-            this.state.layoutModel.doAction(FlexLayout.Actions.updateNodeAttributes("#2", {width: this.props.filterPanel && this.props.filterPanel.defaultWidth ? this.props.filterPanel.defaultWidth : 250}));
-        } else {
-            this.state.layoutModel.doAction(FlexLayout.Actions.updateNodeAttributes("#2", {width: 0}));
-        }
-    }
-
-    showDetailPanel(show: boolean): void {
-        if (show) {
-            this.state.layoutModel.doAction(FlexLayout.Actions.updateNodeAttributes(this.props.filterPanel ? "#6" : "#4", {width: this.props.detailPanel && this.props.detailPanel.defaultWidth ? this.props.detailPanel.defaultWidth : 250}));
-        } else {
-            this.state.layoutModel.doAction(FlexLayout.Actions.updateNodeAttributes(this.props.filterPanel ? "#6" : "#4", {width: 0}));
-        }
-    }
-
-    selectNextPreviousRecord(previous: boolean): void {
-        let selectedNodes = this.gridApi?.getSelectedNodes();
-        if (selectedNodes && selectedNodes.length === 1) {
-            let selectedNode = selectedNodes[0];
-            if (this.props.rowData && this.props.rowData.length > 0) {
-                this.gridApi?.forEachNodeAfterFilterAndSort((node) => {
-                    if ((!previous && node.childIndex === (selectedNode.childIndex + 1)) || (previous && node.childIndex === (selectedNode.childIndex - 1))) {
-                        node.setSelected(true, true);
-                        this.gridApi?.ensureNodeVisible(node);
-                    }
-                });
-            } else if (this.props.rowModelType === "infinite" && selectedNode.rowIndex !== null) {
-                const nextRowIndex = !previous ? selectedNode.rowIndex + 1 : (selectedNode.rowIndex !== 0 ? selectedNode.rowIndex - 1 : 0);
-                const nextNode = this.gridApi?.getDisplayedRowAtIndex(nextRowIndex);
-                if (nextNode) {
-                    nextNode.setSelected(true, true);
-                    this.gridApi?.ensureNodeVisible(nextNode);
-                }
-            }
-        }
-    }
-
-    changeRowStyleRules(rowStyleRules: RowStyleRule[]): void {
-        this.state.gridConfiguration.rowStyleRules = rowStyleRules;
-        this.setState({gridConfiguration: this.state.gridConfiguration}, () => {
-            this.gridApi?.redrawRows();
-        });
-    }
-
-    _onChangeRowStyleRules(rowStyleRules: RowStyleRule[]): void {
-        this.changeRowStyleRules(rowStyleRules);
-        if (this.props.onChangeRowStyleRules) {
-            this.props.onChangeRowStyleRules(rowStyleRules);
-        }
-    }
-
-    onPanelFilterApplied(newFilter: any): void {
-        const filterChanged = !isEqualWith(newFilter, this.state.defaultFilter, this.equalValues);
-        if (filterChanged !== this.state.filterChanged) {
-            this.setState({filterChanged: filterChanged});
-        }
-    }
-
-    getUiColumnFilterValue(colId: string): string {
-        const nameFilterModel: TextFilterModel = this.gridApi?.getColumnFilterModel(colId) as TextFilterModel;
-        return nameFilterModel && nameFilterModel.filter ? nameFilterModel.filter : "";
-    }
-
-    async removeUiColumnFilterValue(colId: string) {
-        const filterInstance = await this.gridApi?.getColumnFilterInstance(colId);
-        const textFilterInstance = filterInstance as TextFilter;
-        const nameFilterModel: TextFilterModel = textFilterInstance.getModelFromUi() as TextFilterModel;
-        if (nameFilterModel) {
-            nameFilterModel.filter = "";
-            // we need to hack this typescript protected declaration
-            // @ts-ignore
-            textFilterInstance.resetUiToDefaults(false);
-        }
-    }
-
-    /**
-     * Applies UI column filter values silently without redrawing ag-grid
-     * @param colId
-     */
-    async applyUiColumnFilterValue(colId: string) {
-        const filterInstance = await this.gridApi?.getColumnFilterInstance(colId);
-        ((filterInstance) as TextFilter)?.applyModel?.();
-    }
-
-    private equalValues(value: any, otherValue: any): (boolean | undefined) {
-        if ((value === undefined || value === null) && (otherValue === undefined || otherValue === null)) {
-            return true;
-        }
-        return undefined;
-    }
-
-    private _onSelectionChanged(event: SelectionChangedEvent): void {
-        if (this.state.gridConfiguration.followLastRecord && this.gridApi && this.gridApi.getSelectedRows().length > 0) {
-            this.enableFollowLastRecord(false);
-        }
-        if (this.props.onSelectionChanged) {
-            this.props.onSelectionChanged(event);
-        }
-    }
-
-    private _onViewportChanged(event: ViewportChangedEvent) {
-        const dataGridEvent = event as DataGridViewportChangedEvent;
-        if (this.state.gridConfiguration.followLastRecord && dataGridEvent.rowsScrollingDelta < 0) {
-            this.enableFollowLastRecord(false);
-        }
-        if (this.props.onViewportChanged) {
-            this.props.onViewportChanged(dataGridEvent);
-        }
-    }
-
-    private renderToolbarButtons(): ReactElement {
-        const renderFilter = this.props.filterPanel && this.props.filterPanel.renderer;
-        const filterPanelVisible = renderFilter && this.isFilterPanelVisible();
-        return (
-            <React.Fragment>
-                {renderFilter && <Button type={filterPanelVisible ? "primary" : "default"} key="filter-button"
-                                         title={i18n("Show/Hide filter panel")}
-                                         onClick={() => {
-                                             this.showFilterPanel(!filterPanelVisible);
-                                         }}>
-                    <FilterOutlined/>
-                </Button>}
-                {this.props.toolbar?.toolbarButtons}
-                {this.state.gridConfiguration.followLastRecordEditable &&
-                    <Button key="track-button"
-                            title={i18n("Track last added record to table")}
-                            onClick={(e) => {
-                                this.enableFollowLastRecord(!this.state.gridConfiguration.followLastRecord);
-                                (e.target as HTMLButtonElement).blur();
-                            }}>
-                        {this.state.gridConfiguration.followLastRecord ? <EyeOutlined/> : <EyeInvisibleOutlined/>}
-                    </Button>}
-            </React.Fragment>
-        );
-    }
-
-    private renderToolbar(originalToolbar: ReactElement): ReactElement {
-        let toolbarToRender = originalToolbar;
-        if (this.props.toolbar && this.props.toolbar.renderToolbar) {
-            const searchBar = this.props.toolbar.renderToolbar(originalToolbar);
-            if (searchBar) {
-                toolbarToRender = searchBar;
-            }
-        }
-
-        const statsBadge = this.renderSearchBadge();
-        return (<div style={{whiteSpace: "nowrap", flexGrow: 1, display: "flex"}}>
-            {toolbarToRender}
-            {statsBadge}
-        </div>);
-    }
-
-    private renderSearchBadge(): ReactElement | undefined {
-        if (this.state.tableNeedToBeReloaded) {
-            return (
-                <Badge count={
-                    <span className="ant-badge-count"
-                          title={i18n("Records has been added or removed, table need to be reloaded in order to see actual records")}
-                          style={{color: "#fa541c", background: "#fff2e8", borderColor: "#ffbb96"}}>
-                        <ExclamationOutlined style={{color: '#fa541c'}}/>
-                </span>
-                } style={{cursor: "hand"}} offset={[10, -10]}/>
-            );
-        }
-        return undefined;
-    }
-
-    isFilterPanelVisible(): boolean {
-        return this.state.gridConfiguration.layoutModel ? this.state.gridConfiguration.layoutModel.layout.children[0].width > 0 : true;
-    }
-
-    renderDataGrid(): ReactElement {
-        const {
-            defaultGridConfiguration,
-            onGridReady, onLoadData, onSortChanged, onColumnsChanged, onSelectionChanged, onViewportChanged,
-            onTableConfigVisible, toolbar,
-            paging, filter, search, onChangeConfiguration, onDataChanged, onChangeRowStyleRules,
-            filterPanel, controlPanel,
-            ...rest
-        } = this.props;
-
-        return (
-            <DataGrid
-                {...rest}
-                ref={(dataGrid) => {
-                    this.dataGrid = dataGrid ? dataGrid : undefined;
-                }}
-                onLoadData={this._onLoadData}
-                onGridReady={this._onGridReady}
-                paging={{
-                    pageSize: this.state.gridConfiguration.pageSize,
-                    defaultPageSize: this.state.gridConfiguration.defaultPageSize,
-                    onPaginationChanged: this._onPaginationChanged,
-                }}
-                filter={{
-                    columnSearchVisible: this.state.gridConfiguration.columnSearchVisible,
-                    getFilterModel: filter ? filter.getFilterModel : undefined,
-                    onColumnSearchVisible: (visible) => {
-                        this._changeConfiguration({columnSearchVisible: visible});
-                        if (filter?.onColumnSearchVisible) {
-                            filter.onColumnSearchVisible(visible);
-                        }
-                    },
-                    onFilterModified: filter ? filter.onFilterModified : undefined,
-                    onFilterChanged: filter ? filter.onFilterChanged : undefined,
-                    onFilterConfirmed: filter ? filter.onFilterConfirmed : undefined,
-                }}
-                search={{
-                    hidden: !!search ? search.hidden : undefined,
-                    placeholder: !!search ? search.placeholder : undefined,
-                    searchString: !!search && search.searchString !== undefined ? search.searchString : this.state.searchString,
-                    stringFormatter: !!search ? search.stringFormatter : undefined,
-                    searchHistory: !!search && search.searchHistory !== undefined ? search.searchHistory : this.state.searchHistory,
-                    searchButtonClassName: !!search ? search.searchButtonClassName : undefined,
-                    searchButtonDisabled: !!search ? search.searchButtonDisabled : undefined,
-                    searchButtonHidden: !!search ? search.searchButtonHidden : undefined,
-                    searchRenderer: search?.searchRenderer,
-                    onChange: this._onSearchStringChanged,
-                    onSearch: this._onSearch
-                }}
-                toolbar={{
-                    renderToolbar: this.renderToolbar,
-                    toolbarButtons: this.renderToolbarButtons(),
-                    hideRecordCount: toolbar?.hideRecordCount
-                }}
-                onSortChanged={(event) => {
-                    const sortModel = this.dataGrid?.getSortModel();
-                    if (this.state.gridConfiguration.followLastRecord && this.state.gridConfiguration.followLastRecordSortModel && !isEqual(this.state.gridConfiguration.followLastRecordSortModel, sortModel)) {
-                        this.enableFollowLastRecord(false);
-                    }
-                    const columnState = this.gridApi?.getColumnState();
-                    this._changeConfiguration({columnModel: columnState});
-                    if (onSortChanged) {
-                        onSortChanged(event);
-                    }
-                }}
-                onColumnsChanged={(columnModel, event) => {
-                    this._changeConfiguration({columnModel: columnModel});
-                    if (onColumnsChanged) {
-                        onColumnsChanged(columnModel, event);
-                    }
-                }}
-                onRowDataUpdated={this._onRowDataUpdated}
-                tableConfigVisible={this.state.tableConfigVisible}
-                onTableConfigVisible={(visible) => {
-                    this.setState({tableConfigVisible: visible});
-                    if (onTableConfigVisible) {
-                        onTableConfigVisible(visible);
-                    }
-                }}
-                onSelectionChanged={this._onSelectionChanged}
-                rowStyleRules={this.state.gridConfiguration.rowStyleRules as RowStyleRule[]}
-                defaultRowStyleRules={this.state.gridConfiguration.defaultRowStyleRules}
-                onChangeRowStyleRules={this._onChangeRowStyleRules}
-                onViewportChanged={this._onViewportChanged}
-                showMilliseconds={this.state.gridConfiguration.showMilliseconds}
-                defaultShowMilliseconds={this.state.gridConfiguration.defaultShowMilliseconds}
-                onShowMilliseconds={(showMillis, callback) => {
-                    this._changeConfiguration({showMilliseconds: showMillis}, callback);
-                }}
-                hideYear={this.state.gridConfiguration.hideYear}
-                defaultHideYear={this.state.gridConfiguration.defaultHideYear}
-                onShowYear={(showYear, callback) => {
-                    this._changeConfiguration({hideYear: !showYear}, callback);
-                }}
-            />
-        );
-    }
-
-    private renderDataGridWithControlPanel() {
-        if (this.props.controlPanel && this.props.controlPanel.renderer) {
-            return (
-                <div key="table-with-control-panel" style={{
-                    display: "flex",
-                    flexFlow: "column",
-                    height: "100%",
-                    width: "100%"
-                }}>
-                    <div key="table-with-control-panel-wrapper" style={{flex: "1 1 auto", overflow: "auto"}}>
-                        {this.renderDataGrid()}
-                    </div>
-                    {this.props.controlPanel.renderer()}
-                </div>);
-        }
-        return this.renderDataGrid();
-    }
-
-    componentDidUpdate() {
-        // very important nasty fix with flexlayout
-        // in AlarmWindow or ObjectHistoryWindow there is ExtendedDataGrid(FlexLayout) placed in upper FlexLayout
-        // resize event handling doesn't work in inner FlexLayout(ExtendedDataGrid)
-        // I suppose it has something to do wit usage of multiple ResizeObservers, but I am not sure
-        // therefore here on any change of state/props we will invoke recalculation of flexlayout size
-        // internal logic of this method updateRect is fast and do resize only when it is needed
-        this.flexLayout?.updateRect();
-    }
-
-    render() {
-        const {filterPanel, detailPanel} = this.props;
-        if (filterPanel || detailPanel) {
-            return (
-                <FlexLayout.Layout
-                    ref={(flexLayout) => {
-                        this.flexLayout = flexLayout;
-                    }}
-                    model={this.state.layoutModel}
-                    onModelChange={(model) => {
-                        this._changeConfiguration({layoutModel: model.toJson()});
-                    }}
-                    onAction={(action) => {
-                        const node1 = action.data.node1;
-                        const node2 = action.data.node2;
-                        let tabset;
-                        // disable moving splitter if filter or detail panel is hidden (width=0)
-                        if (action.type === Actions.ADJUST_SPLIT) {
-                            if (node1 === "#4" && node2 === "#6") {
-                                tabset = this.state.layoutModel.getNodeById('#6');
-                            } else if (node1 === "#2" && node2 === "#4") {
-                                tabset = this.state.layoutModel.getNodeById('#2');
-                            }
-                            if (tabset) {
-                                const width = (tabset as any)?._attributes?.width;
-                                if (width === 0) {
-                                    return undefined;
-                                }
-                            }
-                        }
-                        return action;
-                    }}
-                    factory={(node) => {
-                        const component = node.getComponent();
-                        if (component === "filter-panel") {
-                            return filterPanel && filterPanel.renderer && filterPanel.renderer({
-                                defaultFilter: this.state.defaultFilter,
-                                filterChanged: this.state.filterChanged
-                            });
-                        } else if (component === "data-panel") {
-                            return this.renderDataGridWithControlPanel();
-                        } else if (component === "detail-panel") {
-                            return detailPanel && detailPanel.renderer();
-                        }
-                        return <Empty/>
-                    }}
-                />
-            );
-        } else {
-            return this.renderDataGridWithControlPanel();
-        }
-    }
-}