Bryntum Scheduler Big data set demo with filtering

import { DateHelper, FunctionHelper, WidgetHelper, DataGenerator, Scheduler } from '../../build/scheduler.module.js?439592';
import shared from '../_shared/shared.module.js?439592';



//<debug>
// disable certain debugging code to make record generation faster
window.bryntum.DISABLE_DEBUG = true;
//</debug>

const [resourceCountField, , eventCountField] = WidgetHelper.append([
    {
        ref                  : 'resourceCountField',
        type                 : 'number',
        placeholder          : 'Number of resources',
        label                : 'Resources',
        tooltip              : 'Enter number of resource rows to generate and press [ENTER]',
        value                : 1000,
        width                : 200,
        keyStrokeChangeDelay : 500,
        changeOnSpin         : 500,
        onChange             : () => generateResources()
    }, {
        type  : 'widget',
        html  : 'X',
        width : 30,
        style : 'text-align: center'
    }, {
        ref                  : 'eventCountField',
        type                 : 'number',
        placeholder          : 'Number of events',
        label                : 'Events',
        tooltip              : 'Enter number of events per resource to generate and press [ENTER]',
        style                : 'margin-right: 0',
        min                  : 1,
        max                  : 100,
        value                : 5,
        width                : 180,
        keyStrokeChangeDelay : 500,
        changeOnSpin         : 500,
        onChange             : () => generateResources()
    }, {
        type        : 'button',
        toggleable  : true,
        color       : 'b-orange b-raised',
        icon        : 'b-fa-filter',
        pressedIcon : 'b-fa-filter',
        text        : 'Filter',
        onToggle({ pressed }) {
            if (pressed) {
                scheduler.resourceStore.filterBy((resource) => resource.score === 12345);
            } else {
                scheduler.resourceStore.clearFilters();
            };
        }
    }
], {
    insertFirst : document.getElementById('tools') || document.body,
    cls         : 'b-bright'
});

function generateResources() {
    const
        resourceCount = resourceCountField.value,
        eventCount    = eventCountField.value,
        today         = DateHelper.clearTime(new Date()),
        mask          = WidgetHelper.mask(scheduler.element, 'Generating records'),
        colors        = ['cyan', 'green', 'indigo'];

    let schedulerEndDate = today;

    // Timeout needed to allow mask time to show
    setTimeout(() => {
        const
            resources    = [],
            events       = [],
            dependencies = [],
            generator    = DataGenerator.generate(resourceCount),
            generate     = () => {
                for (let i = 0; i < 1000; i++) {
                    const res = generator.next();
                    if (!res.done) {
                        if (i === 0) { res.value.score = 12345; }
                        resources.push(res.value);

                        for (let j = 0; j < eventCount; j++) {
                            const
                                startDate = DateHelper.add(today, Math.round(Math.random() * (j + 1) * 20), 'days'),
                                duration  = Math.round(Math.random() * 9) + 2,
                                endDate   = DateHelper.add(startDate, duration, 'days'),
                                eventId = events.length + 1;

                            events.push({
                                id         : eventId,
                                name       : 'Task #' + (events.length + 1),
                                startDate,
                                duration,
                                endDate,
                                resourceId : res.value.id,
                                eventColor : colors[resources.length % 3]
                            });

                            if (j > 0) {
                                dependencies.push({
                                    id   : dependencies.length + 1,
                                    from : eventId - 1,
                                    to   : eventId
                                });
                            }

                            if (endDate > schedulerEndDate) schedulerEndDate = endDate;
                        }
                    }
                    else {
                        console.timeEnd('generate');
                        console.time('data');
                        scheduler.endDate = schedulerEndDate;
                        scheduler.eventStore.data = events;
                        scheduler.resourceStore.data = resources;
                        scheduler.dependencyStore.data = dependencies;
                        console.timeEnd('data');
                        mask.close();
                        return;
                    }
                }
                mask.text = `Generated ${resources.length * eventCount} of ${resourceCount * eventCount} records`;
                window.requestAnimationFrame(generate);
            };
        console.time('generate');
        generate();
    }, 10);
}

let scheduler = new Scheduler({
    adopt      : 'container',
    minHeight  : '20em',
    eventStyle : 'border',
    rowHeight  : 50,

    columns : [
        { type : 'rownumber' },
        { text : 'Id', field : 'id', width : 50, hidden : true },
        { text : 'First name', field : 'firstName', flex : 1 },
        { text : 'Surname', field : 'surName', flex : 1 },
        { text : 'Score', field : 'score', flex : 1 }
    ],

    features : {
        dependencies : {
            disabled : true
        }
    }
});

generateResources();