[ANGULAR] keepExpandedOnLoad somehow affects print functionality

[namund]

When we create a Gantt object in our custom base class say - Ganttchart, we have the below configs for print/pdf export functionality -

        print: aPnGanttchartConfig.print,
        pdfExport: {
          exportDialog: {
            bbar: {
              items: {
                exportButton: { text: 'Print' },
              },
            },
          },
        },

private print() {
    this._gantt.scrollTo(0);
    this._gantt.features.print.showPrintDialog();
  }

We need the functionality of keeping the state of expanded when a child WBS item is extended or moved in of our child class say ProjectGanttchart of custom base class PnGanttchart, hence we upgraded the Bryntum version from 5.6.10 to 6.1.4 to use the keepExpandedOnLoad.

The issue we face post this upgrade is that, upon constantly extending/moving the items, and using the print functionality again and again, sometimes leads to failure of the print and we get "Export failed" pop up and we can't go back from this state.

export_fail.png (8.5 KiB) Viewed 420 times

This issue was not there in the 5.6.10 version but we would occasional encounter this error in the console but would not lead to a permanent crash.

Uncaught RangeError: Maximum call stack size exceeded
at ex.focus (comp.project.ganttchart.umd.min.js?ver=115.0.0.12:2:460841)
at Object.focusin (comp.project.ganttchart.umd.min.js?ver=115.0.0.12:2:187873)
at focusout (comp.project.ganttchart.umd.min.js?ver=115.0.0.12:2:188741)
at HTMLBodyElement.p (comp.project.ganttchart.umd.min.js?ver=115.0.0.12:2:150544)
at HTMLAnchorElement.handler (jquery-3.7.1.js?ver=115.0.0.12:2:37391)
at HTMLAnchorElement.dispatch (jquery-3.7.1.js?ver=115.0.0.12:2:40035)
at v.handle (jquery-3.7.1.js?ver=115.0.0.12:2:38006)
at Object.trigger (jquery-3.7.1.js?ver=115.0.0.12:2:70124)
at HTMLAnchorElement.<anonymous> (jquery-3.7.1.js?ver=115.0.0.12:2:70726)
at ce.each (jquery-3.7.1.js?ver=115.0.0.12:2:3129)

We need your help in figuring out how we can solve the issue post upgrade.

[marcio]

Hey namund,

Thanks for reaching out, and welcome to our forums!

We didn't receive any report similar to that error related to the upgrade, so it seems to be something specific about your configuration.

Please see this guide to have a clear output related to the export server - https://github.com/bryntum/pdf-export-server/blob/main/docs/troubleshooting.md. Enabling verbose would provide more info on what's happening there.

Would it be possible for you to share a runnable test case for us to check?

[Maxim Gorkovsky]

Hello.
It does not appear that keepExpandedOnLoad could affect print. That flag is only checked during store load which does not occur by default if you use print feature. Seeing "jquery" and focus in the "maximum call stack size exceeded" is more likely to be the problem. What kind of logic do you use JQuery for?

we get "Export failed" pop up and we can't go back from this state.

Please provide more details about this state. Do you mean toast message is always there? Or gantt chart is not responsive? Or print feature does not do anything?

What makes you think keepDataOnLoad could be related? Do you reload stores often? After each drag-drop?

It is very difficult to assume what could be the reason there and exception is hidden by the print dialog. We need more information on this error. To get you can try one of the following:

1. Enable "pause on caught exceptions" setting in debugger and try printing until you stop on exception.
2. Override dialog export button handler to see the exception:
   import { Override, Print } from '@bryntum/gantt';
   
   Override.apply(class {
     static target = { class : Print }
   
     onExportButtonClick({ values }) {
       this.export(values);
       this.exportDialog?.unmask();
     }
   });

[namund]

Thank you Marcio & Maxim, for your quick responses.

The export started failing when we upgraded the version from 5.6.10 to 6.1.4 in order to implement the keepExpandedOnLoad hence we were trying to figure out if its a upgrade issue or not.

The export fails only in certain conditions like - when startDate of the task is (Today-n) and the endDate is 10 years from (Today-n) and I am printing it with Today's date.

Like Maxim suggested, I am printing the error in console for onExportButtonClick, please find the error -
PDF Export error -

Uncaught (in promise) Error: Incorrect type for Rectangle.width, got "-1" (expected a positive Number) at _ObjectHelper.assertNumber (gantt.module.js13) at new _Rectangle (gantt.module.js:7936:20) at MultiPageVerticalExporter3.getEventBox (gantt.module.js:214303:16) at eval (gantt.module.js:170062:26) at Array.forEach (<anonymous>) at MultiPageVerticalExporter3.renderDependencies (gantt.module.js:170057:18) at MultiPageVerticalExporter3.buildDependenciesHtml (gantt.module.js:170075:45) at MultiPageVerticalExporter3.buildPageHtml (gantt.module.js:170005:15) at MultiPageVerticalExporter3.buildPageHtml (gantt.module.js:214335:22) at MultiPageVerticalExporter3.buildPage (gantt.module.js:105772:21)
assertNumber @ gantt.module.js:2498
_Rectangle @ gantt.module.js:6878
getEventBox @ gantt.module.js:213245
eval @ gantt.module.js:169004
renderDependencies @ gantt.module.js:168999
buildDependenciesHtml @ gantt.module.js:169017
buildPageHtml @ gantt.module.js:168947
buildPageHtml @ gantt.module.js:213277
buildPage @ gantt.module.js:104714
await in buildPage
pagesExtractor3 @ gantt.module.js:104754
getPages @ gantt.module.js:104072
export @ gantt.module.js:104060
await in export
export @ gantt.module.js:105373
onExportButtonClick @ PnGanttchartInterfaces.ts:101
trigger @ gantt.module.js:6653
onExportClick @ gantt.module.js:103741
callback @ gantt.module.js:3949
trigger @ gantt.module.js:6580
onInternalClick @ gantt.module.js:50829
handler @ gantt.module.js:8488

To answer this

Please provide more details about this state. Do you mean toast message is always there? Or gantt chart is not responsive? Or print feature does not do anything?

In certain cases, we get the pop up as "Export Failed" unless we change the dates, but if the date is set as Today. it fails with the above error.

Am I missing some additional configuration needed after the upgrade?

It seems like the scrollTo(0) in the print method, triggers timeAxis event, which also tries to make changes at the same time as the export is trying to adjust the layout, resulting in export failure in specific cases.

[alex.l]

Hi,

Please make sure you set https://bryntum.com/products/gantt/docs/#Gantt/model/ProjectModel#config-maxCalendarRange to be more than default 5 years.

[namund]

Hi,

I was able to reproduce the issue in the below example -
https://bryntum.com/products/gantt/examples/print/

Extend the "Run Tests" task under "Setup web server" till the end of the Project end line (To be precise - Mar 23, 2019).
Now make the startDate as "Feb 1, 2019".

const gantt = new Gantt({
    // We don't need to export demo header
    appendTo          : 'container',
    startDate         : new Date('2019-02-01'), 
    ...... ......... ... ......... ........

}

Click on Print, the export fails.

[alex.l]

Could you please post video with steps of reproducing, I can't reproduce this, it is just worked.

[namund]

Hi Alex,

Please find the recording attached.

[marcio]

Hey,

Thanks for the video, I was able to reproduce it.

Here's a ticket to track the fix progress - https://github.com/bryntum/support/issues/11243.

[namund]

Hey,

Until this issue is fixed, we would like to have a workaround for this issue. When debugging, what I discovered is when we extend the item and print on the given start date (like in the video), it tries to render the dependencies of this item which is not visible in the gantt chart, leading to export failure.

This is the code where it is unable to find the event Id in the eventBoxes. (Bryntum internal code)

getEventBox(event) {
    if (!event) {
      return;
    }
    let result = this.exportMeta.eventsBoxes.get(String(event.id));
    if (!result) {
      const {
        client,
        exactGridHeight
      } = this.exportMeta, startX = client.getCoordinateFromDate(DateHelper.max(event.startDate, client.startDate)), endX = client.getCoordinateFromDate(DateHelper.min(event.endDate, client.endDate)), { rows } = this.exportMeta.subGrids.normal, height = client.rowHeight, firstRowIndex = parseInt(rows[0].match(/data-index="(\d+)?"/)[1]), taskIndex = client.taskStore.indexOf(event), estimatedY = taskIndex < firstRowIndex ? -height * 2 : exactGridHeight + height * 2;
      result = new Rectangle(startX, estimatedY, endX - startX, height);
    }
    return result;
}

We figured that if we could just filter out the dependency which isn't available, below is our code for the construction of Gantt object-

this._gantt.on('beforePdfExport', ({ config }: { config: any }) => {
      

  const startDate = this.getSelectedDate() || {};

  if (!startDate) {
    console.warn('No selected start date found for PDF export.');
    return;
  }

  // Filter tasks based on the selected start date
  const visibleTaskIds = new Set(
    this._gantt.project.eventStore.records
      .filter((task: any) => {
        const taskStart = task.startDate;
        // Check if the task's start date is after or equal to the selected start date
        return taskStart >= startDate;
      })
      .map((task: any) => task.id) // Get task IDs that start after the selected start date
  );

  // Filter out dependencies that are connected to tasks not in the visible set
  const dependenciesToRemove = this._gantt.dependencies.filter(dep => {
  const fromId = dep.fromEvent;
  const toId = dep.toEvent;
  return !visibleTaskIds.has(fromId) || !visibleTaskIds.has(toId);
  });

  config.client.dependencyStore.dependenciesForRemoval = dependenciesToRemove.map(dep => dep.id);

  console.log('Dependencies removed from PDF export:', config.dependencyRemovalSet);
});

But this doesn't work and the export still fails.
I'd like your suggestion on how this can be handled.

Thanks in advance!
Nikitha.