[REACT] Performance issues with SchedulerPro Dependencies

Post by **tso** » Mon Oct 12, 2020 12:37 pm

I managed to resolve the problem by creating a project and an event store as well as passing an empty object for features.timeRanges. Code below.

    const events = ... derived from scheduler.eventStore 
    const eventStore = new EventStore();
    eventStore.data = events;

    const project = new ProjectModel({
        eventStore
    });
    this.viewport = new Timeline({
        appendTo: this.viewportRef,
        project: project,
        eventLayout: 'pack',
        features: {
            eventTooltip: {
                template: ({eventRecord, startDate, endDate}) => {
                    return `
                        <table>
                            <tr><td colspan="2"><strong>${eventRecord.name}</strong></td></tr>
                            <tr><td>Start:</td><td>${renderDate(startDate, this.state.useGmtFormat)}</td></tr>
                            <tr><td>End:</td><td>${renderDate(endDate, this.state.useGmtFormat)}</td></tr>
                        </table>`;
                },
            },
            timeRanges: {},
        },
        listeners: {
            eventClick: ({event, source}) => scrollToCoordinate(source, this.scheduler, event.x),
            scheduleClick: ({event, source}) => scrollToCoordinate(source, this.scheduler, event.x),
        },
        eventRenderer: () => '', // hide event name
    });
};

Off topic: Can you please make the login redirect to the previous thread with the content intact? (I'm typing a response, my session has expired and I log in through the prompt. I now have to navigate back to the thread and re-type my comment.) Thanks

Post by **alex.l** » Mon Oct 12, 2020 2:21 pm

Hi tso,

Glad to hear you were able to resolve the problem on your end. But it still looks unclear to us and we want to investigate this issue deeply. You don't really need to pass an empty object to make it work.
Could you please create a test case to us and attach it here, so we will be able to check it and fix?

Thanks,
Alex

Post by **tso** » Mon Oct 12, 2020 2:30 pm

<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <script type="module" src="https://www.bryntum.com/examples/build/gantt.module.js"></script>
        <link rel="stylesheet" type="text/css" href="https://www.bryntum.com/examples/build/gantt.classic-light.css"/>
    

    <script type="module">
        import {Gantt, Timeline} from 'https://www.bryntum.com/examples/build/gantt.module.js';

        const gantt = new Gantt({
            height: '1000px',
            appendTo: 'gantt',
            features: {
                dependencies: true,  
                projectLines: false,
                pan: true,
            },
            taskRenderer: function({taskRecord, tplData}) {
                // console.log(taskRecord.incomingDeps);
                // Do something with it
            }
        });

        gantt.taskStore.data = [
              {
                "id": "e312b80f-e387-4a52-a1a4-cca6bc84f7df",
                "name": "GRIP Crew-1 Hopkins",
                "startDate": "2019-10-02T00:00:00.000000Z",
                "endDate": "2020-07-01T00:00:00.000000Z",
                "expanded": false,
                "manuallyMaintained": true,
                "children": [
                  {
                    "id": "883260c2-f008-4ed7-b028-feb853d44af0",
                    "name": "pre-flight BDC #1",
                    "startDate": "2019-10-02T00:00:00+00:00",
                    "endDate": "2019-10-03T00:00:00+00:00",
                    "expanded": false,
                    "manuallyMaintained": true,
                    "children": [
                      {
                        "id": "ec414592-0d4c-4a4e-acd3-11a566f50c38",
                        "name": "pre-flight BDC#1",
                        "startDate": "2019-10-02T00:00:00+00:00",
                        "endDate": "2019-10-03T00:00:00+00:00",
                        "expanded": false,
                        "manuallyMaintained": true,
                      }
                    ]
                  },
                  {
                    "id": "bca367d0-3854-476f-bbd9-6728b1f7eb0c",
                    "name": "pre-flight BDC #2",
                    "startDate": "2020-04-02T00:00:00+00:00",
                    "endDate": "2020-04-03T00:00:00+00:00",
                    "expanded": false,
                    "manuallyMaintained": true,
                    "children": [
                      {
                        "id": "c17103c1-5dbe-44cc-866e-f3d50ca5e665",
                        "name": "pre-flight BDC#2",
                        "startDate": "2020-04-02T00:00:00+00:00",
                        "endDate": "2020-04-03T00:00:00+00:00",
                        "expanded": false,
                        "manuallyMaintained": true,
                      }
                    ]
                  },
                  {
                    "id": "52f32e80-5a12-479e-9d78-9d71411e767b",
                    "name": "Launch",
                    "startDate": "2020-07-01T00:00:00+00:00",
                    "endDate": "2020-07-01T00:00:00+00:00",
                    "expanded": false,
                    "manuallyMaintained": true,
                    "children": [
                      {
                        "id": "921562af-8ad4-48f7-bd67-d9e542371ad3",
                        "name": "Launch of Crew-1",
                        "startDate": "2020-07-01T00:00:00+00:00",
                        "endDate": "2020-07-01T00:00:00+00:00",
                        "expanded": false,
                        "manuallyMaintained": true,
                      }
                    ]
                  }
                ],
              }
        ];
        gantt.dependencyStore.data = [
          {
            "id": "ff9c4fce-9eca-4d32-8bfe-62cfb591f07a",
            "from": "921562af-8ad4-48f7-bd67-d9e542371ad3",
            "dependency_type": 0,
            "desired_duration": null,
            "net_duration": -15552000.0,
            "nlt_duration": -7776000.0,
            "desired_duration_unit": "d",
            "net_duration_unit": "d",
            "nlt_duration_unit": "d",
            "to": "bca367d0-3854-476f-bbd9-6728b1f7eb0c"
          },
          {
            "id": "7804338a-735a-4540-a3f1-fb1a94f55b9b",
            "from": "921562af-8ad4-48f7-bd67-d9e542371ad3",
            "dependency_type": 0,
            "desired_duration": null,
            "net_duration": -31104000.0,
            "nlt_duration": -15552000.0,
            "desired_duration_unit": "d",
            "net_duration_unit": "d",
            "nlt_duration_unit": "d",
            "to": "883260c2-f008-4ed7-b028-feb853d44af0"
          },
        ]
        gantt.zoomToFit();

     new Timeline({
            appendTo:'gantt',
            project: gantt.project,
            eventLayout: 'pack',
            features: {
                eventTooltip: {
                    template: ({eventRecord, startDate, endDate}) => {
                        return `
                            <table>
                                <tr><td colspan="2"><strong>${eventRecord.name}</strong></td></tr>
                            </table>`;
                    },
                },
                // timeRanges: {},
            },
            eventRenderer: () => '', // hide event name
        });
    </script>
</head>

<body>
    <div id="gantt"></div>
</body>
</html>

Uncomment the // timeRanges: {}, to stop the error from appearing.

Post by **mats** » Mon Oct 12, 2020 3:16 pm

We'll get that fixed right away, thanks for reporting! https://github.com/bryntum/support/issues/1668

Support Forum

[REACT] Performance issues with SchedulerPro Dependencies