grid.js

import { getRowsData } from "./data/gridData.js";
import { getConfig } from "./config/gridConfig.js";
import { defineFooterContent } from "./config/gridFooterContent.js";
import { setScrollFPS, getScrollFPS, setTime } from "./metricsHelpers.js";

let startSortTime = 0;
let endSortTime = 0;
let startFilterTime = 0;
let endFilterTime = 0;

export function initGrid(id) {
    defineFooterContent();

    const grid = webix.grid({
        ...getConfig(),
        on: {
            onAfterScroll: () => {
                const fps = getScrollFPS();
                setScrollFPS(fps);
            },
            onBeforeSort: () => {
                startSortTime = performance.now();
            },
            onAfterSort: () => {
                endSortTime = performance.now();
                setTime("sort", startSortTime, endSortTime);
            },
            onBeforeFilter: () => {
                startFilterTime = performance.now();
            },
            onAfterFilter: () => {
                endFilterTime = performance.now();
                setTime("filter", startFilterTime, endFilterTime);
            },
        },
        container: id,
    });
    webix.extend(grid, webix.ProgressBar);

    const data = getRowsData(100);

    const startRenderTime = performance.now();
    grid.parse(data).then(() => {
        const endRenderTime = performance.now();
        setTime("render", startRenderTime, endRenderTime);
    });

    addSystemTick(grid);
    addResizeObserver(grid, id);

    return grid;
}

function addResizeObserver(widget, id, debounceMs = 50) {
    const container = document.getElementById(id);
    let resizeTimeout;
    new ResizeObserver(() => {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(() => {
            widget.adjust();
        }, debounceMs);
    }).observe(container);
}

function addSystemTick(grid) {
    setInterval(() => webix.callEvent("system:tick", []), 1000);
    webix.attachEvent("system:tick", () => {
        webix.ui.datafilter.systemStatus.update(grid);
    });
}