Incorrect task non-working time rendering after filtering

[taauntik]

Forum Post

Similar to our previous post on taskNonWorkingTime (viewtopic.php?t=25882), we also notice incorrect rendering displayed for the calendars on filtering.

Steps to reproduce:

1. Open Bryntum Gantt big dataset example ( https://bryntum.com/products/gantt/examples/bigdataset/ )
2. Replace the below code in the code editor

import { Gantt, ProjectModel, AsyncHelper, PresetManager, ProjectGenerator, CalendarModel } from '../../build/gantt.module.js?469663';
import shared from '../_shared/shared.module.js?469663';

const
    toggleCustom  = show => {
        taskCountField.hidden = projectSizeField.hidden = !show;
    },
    applyPreset   = count => {
        toggleCustom(false);
        projectSizeField.value = 50;
        taskCountField.value = count;
        gantt.generateDataset();
    };
// extra start
PresetManager.registerPreset('threeMonths', {
    name            : '5 years',
    base            : 'weekAndDayLetter',
    tickSize        : 20,
    defaultSpan     : 265, // 3 changed to 265 (5 years)
    defaultSpanUnit : 'month'
});
// extra end
let busy = false;

const gantt = new Gantt({
features: {
 taskNonWorkingTime: true,
},
    appendTo : 'container',

emptyText : '',

dependencyIdField : 'sequenceNumber',

columns : [
    { type : 'name', field : 'name', text : 'Name', width : 200 },
    { type : 'startdate', text : 'Start date' },
    { type : 'duration', text : 'Duration' }
],

columnLines : false,

// If you try approach B or C below you need to define a project here
// project : {
//     taskStore       : { useRawData : true },
//     dependencyStore : { useRawData : true }
// },

async generateDataset(count = taskCountField.value) {
    // Bail out if we are already generating a dataset (it is async)
    if (busy) {
        return;
    }

busy = true;

if (count > 1000) {
    gantt.mask('Generating tasks');
}

// Required to allow browser to update DOM before task generation starts
// await AsyncHelper.sleep(100);

const config = await ProjectGenerator.generateAsync(count, projectSizeField.value);

// Required to allow browser to update DOM before calculations starts
// await AsyncHelper.sleep(10);

//
// Alternative approaches that should have similar performance:
//

// A) Replace entire project with a new project
gantt.project?.destroy();

gantt.project = new ProjectModel({
    // The `useRawData` settings below speeds record creation up a bit by not cloning the raw data objects,
    // instead uses them directly as is
    taskStore       : { useRawData : true },
    dependencyStore : { useRawData : true },
    ...config
});

// extra start

const calendar = new CalendarModel({
    name      : 'general',
    intervals : [
        {
            recurrentStartDate : 'on Fri at 0:00',
            recurrentEndDate   : 'on Tue at 0:00',
            isWorking          : false
        }
    ]
});

gantt.project.on('load', (source) => {
    gantt.taskStore.allRecords.forEach(task => {
        task.setCalendar(calendar);
    });
});
// extra end


gantt.startDate = gantt.project.startDate;

if (count > 1000) {
    gantt.unmask();
}

// B) Replace store data per store
// gantt.taskStore.data = config.tasksData;
// gantt.dependencyStore.data = config.dependenciesData;
// C) Replace store data via project
// gantt.project.loadInlineData(config);

gantt.project.on({
    dataReady() {
        busy = false;
    }
});
},

tbar : [
    'Presets',
    {
        type        : 'buttongroup',
        toggleGroup : true,
        items       : [
            {
                text    : '1K tasks',
                pressed : true,
                ref     : '1kButton',
                tasks   : 1000
            },
            {
                text  : '5K tasks',
                ref   : '5kButton',
                tasks : 5000
            },
            {
                text  : '10K tasks',
                ref   : '10kButton',
                tasks : 10000
            },
            {
                text : 'Custom',
                ref  : 'customButton',
                onClick() {
                    toggleCustom(true);
                }
            }
        ],
        onClick({ source : button }) {
            if (button.tasks) {
                applyPreset(button.tasks);
            }
        }
    },
    {
        type       : 'number',
        ref        : 'taskCountField',
        label      : 'Tasks',
        tooltip    : 'Enter number of tasks to generate and press [ENTER]. Tasks are divided into blocks of ten',
        value      : 1000,
        min        : 10,
        max        : 10000,
        width      : 'auto',
        inputWidth : '5em',
        step       : 10,
        hidden     : true,
        onChange({ userAction }) {
            if (userAction) {
                gantt.generateDataset();
            }
        }
    }, {
        type       : 'number',
        ref        : 'projectSizeField',
        label      : 'Project size',
        tooltip    : 'Enter number of tasks that should be connected into a "project" (multipliers of 10)',
        min        : 10,
        max        : 1000,
        value      : 50,
        width      : 'auto',
        inputWidth : '4em',
        step       : 10,
        hidden     : true,
        onChange({ userAction }) {
            if (userAction) {
                gantt.generateDataset();
            }
        }
    },
    '->',
    {
        type    : 'viewpresetcombo',
        presets : ['weekAndDay', 'dayAndMonth', 'threeMonths']
    }
]
});

const { taskCountField, projectSizeField } = gantt.widgetMap;

gantt.generateDataset();

3. On the top right, select Time Span of '5 years'
4. Right click on timeline header -> Filter tasks -> Type 'Task 123'
5. Task 123 is shown but it's calendar is still rendered 10 rows below

Attached is a video of the scenario that occurs. Is there any config to utilize to render the tasks accurately?

taskNonWorkingTime_incorrectRender.mp4