olga.smolyar
Posts: 1
Joined: Fri Jul 29, 2022 8:33 pm

Error when collapsing and re-expanding 2nd hierarchy level

The following error occurs when collapsing the Phase level (2nd level) in the resulting Gantt chart with data
    constructed with the following code:

    Code: Select all

    Error:
    TypeError: Cannot read properties of undefined (reading 'mark')
    a.onAfterRender
    D:/Users/olga.smolyar/OneDrive - BeiGene/Documents/GitHub/beigene_admin/gantt.src.js:1387
    (anonymous function)
    D:/Users/olga.smolyar/OneDrive - BeiGene/Documents/GitHub/beigene_admin/highcharts.src.js:2093
    f.fireEvent
    D:/Users/olga.smolyar/OneDrive - BeiGene/Documents/GitHub/beigene_admin/highcharts.src.js:2108
    u.render
    D:/Users/olga.smolyar/OneDrive - BeiGene/Documents/GitHub/beigene_admin/highcharts.src.js:17316
    u.redraw
    D:/Users/olga.smolyar/OneDrive - BeiGene/Documents/GitHub/beigene_admin/highcharts.src.js:17326
    (anonymous function)
    D:/Users/olga.smolyar/OneDrive - BeiGene/Documents/GitHub/beigene_admin/highcharts.src.js:28112
    f.redraw
    D:/Users/olga.smolyar/OneDrive - BeiGene/Documents/GitHub/beigene_admin/highcharts.src.js:28095
    c.setBreaks
    D:/Users/olga.smolyar/OneDrive - BeiGene/Documents/GitHub/beigene_admin/gantt.src.js:2088
    e.toggleCollapse
    D:/Users/olga.smolyar/OneDrive - BeiGene/Documents/GitHub/beigene_admin/gantt.src.js:503
    SVGTextElement.<anonymous>
    D:/Users/olga.smolyar/OneDrive - BeiGene/Documents/GitHub/beigene_admin/gantt.src.js:405
    This screen is visible only in development. It will not appear if the app crashes in production.
    The error doesn't occur if there is no 2nd level in the hierarchy -e.g., if obj2 is not added to the data by the code below and the obj items have the 1st level's id as a parent.

    Code constructing data:

    Code: Select all

     let { startDate, endDate } = request;
      let xAxisStartDateUTC = Date.UTC(
        new Date(startDate).getFullYear(),
        new Date(startDate).getMonth(),
        new Date(startDate).getDate()
      );
      let xAxisEndDateUTC = Date.UTC(
        new Date(endDate).getFullYear(),
        new Date(endDate).getMonth(),
        new Date(endDate).getDate()
      );
    
      let trialDiseases = request["disease"];
      let phases = request["trialPhase"];
    
      let dataArr = [];
      trialDiseases.forEach(trialDisease => {
        let obj1 = {
          name: trialDisease,
          id: trialDisease,
        };
        dataArr.push(obj1);
    
        phases.forEach(phase => {
          let obj2 = {
            name: phase,
            id: `${trialDisease}_${phase}`,
            parent: trialDisease,
            drugList: phase
          };
          dataArr.push(obj2);
    
          let dateName = {
            start: "",
            end: "",
            eu_approval_date: "triangle",
            eu_filing_date: "circle",
            us_filing_date: "square",
            us_approval_date: "triangle",
            first_results: "diamond",
          };
          let keyNames = [
            "eu_approval_date",
            "eu_filing_date",
            "us_filing_date",
            "us_approval_date",
            "first_results",
          ];
          let dateNameKeys = Object.keys(dateName);
          for (let item in data) {
            if (data[item]["trialDiseases"] === trialDisease && data[item]["trialPhase"] === phase) {
              let obj = {};
              let dateObj = {};
              for (let key in dateNameKeys) {
                let dateValue = data[item][dateNameKeys[key]];
                if (dateValue !== null) {
                  let dat = Date.UTC(
                    dateValue.getFullYear(),
                    dateValue.getMonth(),
                    dateValue.getDay()
                  );
                  dateObj = {
                    ...dateObj,
                    [dateNameKeys[key]]: dat,
                    [dateNameKeys[key] + "Icon"]: dateName[dateNameKeys[key]],
                  };
                }
                for (let key in keyNames) {
                  dateObj = transformXShift(dateObj, keyNames[key]);
                }
                if (dateNameKeys[key] === "end") {
                  if (dateValue !== null) {
                    let xAxisDateValueUTC = Date.UTC(
                      new Date(dateValue).getFullYear(),
                      new Date(dateValue).getMonth(),
                      new Date(dateValue).getDate()
                    );
                    if (xAxisDateValueUTC > xAxisEndDateUTC) {
                      xAxisEndDateUTC = xAxisDateValueUTC;
                    }
                  }
                }
              }
    
    
    
              obj = {
                name: data[item]["sponsor_trialname"],
                id: data[item]["sponsor_trialname"] + item,
                parent: `${trialDisease}_${phase}`,
                color: "#0C2D48",
                completed: {
                  amount:
                    data[item]["durationPct"] === null
                      ? 0
                      : Number((data[item]["durationPct"] / 100).toFixed(2)),
                  fill: "#2E8BC0",
                },
                trialName: data[item]["trialName"],
                trialPhase: data[item]["trialPhase"],
                mechanismOfAction: data[item]["mechanismOfAction"],
                drugList: data[item]["design_drugList"],
                trialTargetAccrualText: data[item]["trialTargetAccrualText"],
                trialTitle: data[item]["trialTitle"],
                trialPatientSegmentsList: data[item]["trialPatientSegments_List"],
                trialDiseases: data[item]["trialDiseases"],
                url: data[item]["recordUrl"],
              };
    
              dataArr.push({ ...obj, ...dateObj });
            }
          }
        })
      })
      
      let xAxis = {
        min: xAxisStartDateUTC,
        max: xAxisEndDateUTC,
        currentDateIndicator: true,
      };
    
      return { data: dataArr, xAxis: xAxis };
    michal.f
    Posts: 1114
    Joined: Thu Aug 12, 2021 12:04 pm

    Re: Error when collapsing and re-expanding 2nd hierarchy level

    Hello,

    It is hard to tell you what is not working and what could be done without taking look at your code. Could you reproduce the issue in an online editor that I could work on? You can start with this demo: https://jsfiddle.net/BlackLabel/3mjy60Lv/

    Best regards!
    Michał Filipiec
    Highcharts Developer
    https://blacklabel.pl/highcharts/

    Return to “Highcharts Gantt”