Premium support for our pure JavaScript UI components


Post by aneventchin »

Hello,
I've noticed this sporadic error, that can be reproduced on both the Scheduler Pro and Gantt. After zooming out with ctrl + scroll or the zoom buttons and then drag or resize a task(change duration) the component freezes.

The whole browser tab freezes and I couldn't get any errors in the console.
Using latest version of Google Chrome / Windows 10. No scaling.


Post by mats »

You can reproduce this online in our examples?


Post by aneventchin »

No, here are some differences between the demo and our page.
We are saving the changes on 'taskDrop' event and updating the gantt once the changes were saved. Everything else should be like the advanced react demo with the gantt + scheduler pro.

Note: This happens sporadically. Maybe once in 10 tries.


Post by mats »

Ok, we will need a simple test case to be able to repro and debug


Post by aneventchin »

I was able to reproduce it with only the Bryntum Gantt that has project model with inline data in tree structure. Nothing more.

Zoom out -> drag a task -> the chrome browser tab freezes.

import React, { useRef, useEffect } from 'react';

import {
  BryntumGantt,
} from '@bryntum/gantt-react';
import { connect } from 'react-redux';

const WorkflowContentElement = ({
  dispatch,
  data,
}) => {

const projectModel = (data) => {
  return new ProjectModel({
    autoLoad: false,
    eventsData: data?.processes,
    assignmentsData: data?.assignments,
  });
};

  return (
      <BryntumGantt
        project={project}
        taskDragFeature={true}
      />
  );
};

const mapStateToProps = () => {
  return (state, props) => {
    return {
      data: state.workflow.data,
    };
  };
};

export default connect(mapStateToProps)(WorkflowContentElement);


Post by aneventchin »

And here is the data

processes:[
    {
        "processOrder": 0,
        "complete": true,
        "workflowProcessId": "5aba12c4-6071-4b18-ae0e-92c943158491",
        "name": "IBP S&OP Plan",
        "recurrenceType": 0,
        "currentPeriod": "2021-07-01T00:00:00",
        "workflowCalendarId": "f63a9cce-e965-4b43-9818-0dae43b2b223",
        "startDate": "2022-07-27T00:00:00",
        "endDate": "2022-07-31T00:00:00",
        "children": [
            {
                "workflowElementId": "11d7e9e2-884e-4d75-bf42-3eaae223ce69",
                "workflowProcessId": "5aba12c4-6071-4b18-ae0e-92c943158491",
                "period": "2021-07-01T00:00:00",
                "name": "123456789012345678901234567890123456789012345678901234567890",
                "elementType": 0,
                "startDate": "2022-07-27T00:00:00",
                "endDate": "2022-07-31T00:00:00",
                "complete": true,
                "duration": 4,
                "manuallyScheduled": false,
                "children": [
                    {
                        "workflowProcessId": "5aba12c4-6071-4b18-ae0e-92c943158491",
                        "workflowTaskId": "b2ef4011-c6a8-411e-9e34-c059b112db18",
                        "workflowElementId": "11d7e9e2-884e-4d75-bf42-3eaae223ce69",
                        "name": "TestTestTestTestTest",
                        "accountable": null,
                        "owner": "73ee136fa80941a29d7d86f6589c5c82",
                        "createdBy": "73ee136fa80941a29d7d86f6589c5c82",
                        "createdDate": "2021-07-16T07:55:22.280831",
                        "startDate": "2022-07-27T00:00:00",
                        "dueDate": "2022-07-31T00:00:00",
                        "percentComplete": 100,
                        "taskOrder": 2,
                        "duration": 4,
                        "manuallyScheduled": true,
                        "id": "b2ef4011-c6a8-411e-9e34-c059b112db18",
                        "participants": []
                    }
                ]
            }
        ]
    }
]

assignments: [
    {
        "event": "b2ef4011-c6a8-411e-9e34-c059b112db18",
        "resource": "73ee136fa80941a29d7d86f6589c5c82"
    }
]

Post by saki »

Hello @aneventchin, we would still need a showcase because your code above shows that you use redux which needs also reducers and actions. Post please a simplest possible showcase with data (and redux if it is necessary to trigger the error) so that we could run, investigate and debug it.

It is not happening always so it might be a race condition either in the application code or in our component.


Post by aneventchin »

Hello saki,
here is an extra simplified version that still has the same issue. No redux this time.

import React from 'react';

import { BryntumGantt } from '@bryntum/gantt-react';

const processes = [
  {
    processOrder: 0,
    complete: true,
    workflowProcessId: '5aba12c4-6071-4b18-ae0e-92c943158491',
    name: 'IBP S&OP Plan',
    recurrenceType: 0,
    currentPeriod: '2021-07-01T00:00:00',
    workflowCalendarId: 'f63a9cce-e965-4b43-9818-0dae43b2b223',
    startDate: '2022-07-27T00:00:00',
    endDate: '2022-07-31T00:00:00',
    children: [
      {
        workflowElementId: '11d7e9e2-884e-4d75-bf42-3eaae223ce69',
        workflowProcessId: '5aba12c4-6071-4b18-ae0e-92c943158491',
        period: '2021-07-01T00:00:00',
        name: '123456789012345678901234567890123456789012345678901234567890',
        elementType: 0,
        startDate: '2022-07-27T00:00:00',
        endDate: '2022-07-31T00:00:00',
        complete: true,
        duration: 4,
        manuallyScheduled: false,
        children: [
          {
            workflowProcessId: '5aba12c4-6071-4b18-ae0e-92c943158491',
            workflowTaskId: 'b2ef4011-c6a8-411e-9e34-c059b112db18',
            workflowElementId: '11d7e9e2-884e-4d75-bf42-3eaae223ce69',
            name: 'TestTestTestTestTest',
            accountable: null,
            owner: '73ee136fa80941a29d7d86f6589c5c82',
            createdBy: '73ee136fa80941a29d7d86f6589c5c82',
            createdDate: '2021-07-16T07:55:22.280831',
            startDate: '2022-07-27T00:00:00',
            dueDate: '2022-07-31T00:00:00',
            percentComplete: 100,
            taskOrder: 2,
            duration: 4,
            manuallyScheduled: true,
            id: 'b2ef4011-c6a8-411e-9e34-c059b112db18',
            participants: [],
          },
        ],
      },
    ],
  },
];

const assignments = [
  {
    event: 'b2ef4011-c6a8-411e-9e34-c059b112db18',
    resource: '73ee136fa80941a29d7d86f6589c5c82',
  },
];

export const WorkflowContentElement = () => {
  return (
    <BryntumGantt
      project={{
        autoLoad: false,
        eventsData: processes,
        assignmentsData: assignments,
      }}
      taskDragFeature={true}
    />
  );
};

Post by saki »

We must be doing something differently because I couldn't reproduce the problem. I have changed Gantt/examples/frameworks/react/javascript/basic/src/App.js to:

/**
 * Application
 */

import React from 'react';

import { BryntumGantt } from '@bryntum/gantt-react';

import './App.scss';
const processes = [
    {
        processOrder: 0,
        complete: true,
        workflowProcessId: '5aba12c4-6071-4b18-ae0e-92c943158491',
        name: 'IBP S&OP Plan',
        recurrenceType: 0,
        currentPeriod: '2021-07-01T00:00:00',
        workflowCalendarId: 'f63a9cce-e965-4b43-9818-0dae43b2b223',
        startDate: '2022-07-27T00:00:00',
        endDate: '2022-07-31T00:00:00',
        children: [
            {
                workflowElementId: '11d7e9e2-884e-4d75-bf42-3eaae223ce69',
                workflowProcessId: '5aba12c4-6071-4b18-ae0e-92c943158491',
                period: '2021-07-01T00:00:00',
                name: '123456789012345678901234567890123456789012345678901234567890',
                elementType: 0,
                startDate: '2022-07-27T00:00:00',
                endDate: '2022-07-31T00:00:00',
                complete: true,
                duration: 4,
                manuallyScheduled: false,
                children: [
                    {
                        workflowProcessId: '5aba12c4-6071-4b18-ae0e-92c943158491',
                        workflowTaskId: 'b2ef4011-c6a8-411e-9e34-c059b112db18',
                        workflowElementId: '11d7e9e2-884e-4d75-bf42-3eaae223ce69',
                        name: 'TestTestTestTestTest',
                        accountable: null,
                        owner: '73ee136fa80941a29d7d86f6589c5c82',
                        createdBy: '73ee136fa80941a29d7d86f6589c5c82',
                        createdDate: '2021-07-16T07:55:22.280831',
                        startDate: '2022-07-27T00:00:00',
                        dueDate: '2022-07-31T00:00:00',
                        percentComplete: 100,
                        taskOrder: 2,
                        duration: 4,
                        manuallyScheduled: true,
                        id: 'b2ef4011-c6a8-411e-9e34-c059b112db18',
                        participants: []
                    }
                ]
            }
        ]
    }
];

const assignments = [
    {
        event: 'b2ef4011-c6a8-411e-9e34-c059b112db18',
        resource: '73ee136fa80941a29d7d86f6589c5c82'
    }
];

const App = () => {
    return (
        <BryntumGantt
            project={{
                autoLoad: false,
                eventsData: processes,
                assignmentsData: assignments
            }}
            taskDragFeature={true}
        />
    );
};

export default App;

and it behaves as this:

zoom-resize.gif
zoom-resize.gif (658.4 KiB) Viewed 662 times

I'm on Chrome 91.0.4472.164 (Official Build) (x86_64) on MacOS Catalina - I have no windows machine around. I can ask a colleague to to check it on a Windows computer tomorrow.


Post by aneventchin »

We did some more testing, turns out that the bug disappears on chrome 92.0.4515.107.


Post Reply