angular8 - ERROR TypeError: Cannot read property 'x1' of undefined. Cytoscape.js and Angular 8 project

Question

I have a stange issue in a creation of two different graph using cytoscape.js in angular 8 project. I have the same function called in two cases that create the needed graph. The stack of the error have as line the line that call 'this.cy.layout(this.layout).run()'. Here is the code

createGraph(...) function:

createGraph(data: any, mode: any){
const maxNode = {
  size : '0px',
  selector : ''
};

if (mode == 'topics'){
  this.addNodes(data, mode);
  this.addEdges(data, mode);

  this.cy.elements().forEach(function(elem: any) {
    if (elem.isNode()){
      console.log(elem.style().width > maxNode.size);
      if (elem.style().width > maxNode.size){
        maxNode.size = elem.style().width;
        maxNode.selector = elem.data().id;
      }
    }
  });

  /*this.cy.center(this.cy.getElementById(maxNode.selector));*/
  /*this.cy.fit(this.cy.getElementById(maxNode.selector));*/
  /*this.cy.center(this.cy.getElementById(maxNode.selector));*/
  this.cy.layout(this.layout).run();
}
else{
  this.addNodes(data, mode);
  this.addEdges(data, mode);

  this.cyJudges.elements().forEach(function(elem: any) {
    if (elem.isNode()){
      console.log(elem.style().width > maxNode.size);
      if (elem.style().width > maxNode.size){
        maxNode.size = elem.style().width;
        maxNode.selector = elem.data().id;
      }
    }
  });

  /*this.cy.center(this.cy.getElementById(maxNode.selector));*/
  this.cyJudges.layout(this.layout).run();
}

}

addNode(...) function:

addNodes(data: any, mode: any){
// tslint:disable-next-line:variable-name
const _this = this;
let count = 0;
// tslint:disable-next-line:only-arrow-functions typedef
this.cy.nodes().remove();
if (mode == 'topics'){
  data.forEach(function(elem: any){
    // tslint:disable-next-line:typedef max-line-length
    _this.cy.add({group: 'nodes', data: {id: elem.StandardForm, href: elem.OriginalUri, level: count}, position: {x: Math.floor(Math.random() * 600), y: Math.floor(Math.random() * 600)}});
    _this.cy.getElementById(elem.StandardForm).style('width', 10 * (data.length - count));
    _this.cy.getElementById(elem.StandardForm).style('height', 10 * (data.length - count));

    console.log(data.length, count, elem.StandardForm,  10 * (data.length - count));
    count++;

  });
}
else{
  data.forEach(function(elem: any){
    // tslint:disable-next-line:typedef max-line-length
    _this.cyJudges.add({group: 'nodes', data: {id: elem.StandardForm, href: elem.OriginalUri}, position: {x: Math.floor(Math.random() * 600), y: Math.floor(Math.random() * 600)}});
    _this.cyJudges.getElementById(elem.StandardForm).style('width', 10 * (data.length - count));
    _this.cyJudges.getElementById(elem.StandardForm).style('height', 10 * (data.length - count));

    console.log(data.length, count, elem.StandardForm,  10 * (data.length - count));
    count++;

  });
}

}

addEdges(...) function:

addEdges(data: any, mode: any){
const _this = this;
this.cy.edges().remove();
if (mode == 'topics'){
  data.forEach(function(elem: any){
    for (let i = 0; i < data.length; i++){
      elem.Topics.forEach(function(topic: any){
        data[i].Topics.forEach(function(innerTopic: any){
          if (elem.StandardForm != data[i].StandardForm && topic == innerTopic){
            // tslint:disable-next-line:max-line-length
            if (_this.cy.edges('[source = "' + elem.StandardForm + '"][target = "' + data[i].StandardForm + '"]').length == 0 && _this.cy.edges('[source = "' + data[i].StandardForm + '"][target = "' + elem.StandardForm + '"]').length == 0) {
              _this.cy.add({group: 'edges', data: {id: Math.random(), label: topic, source: elem.StandardForm, target: data[i].StandardForm}});
            }
          }
          else if (elem.StandardForm == data[i].StandardForm && topic != innerTopic) {
            // tslint:disable-next-line:max-line-length
            if (_this.cy.edges('[source = "' + elem.StandardForm + '"][target = "' + data[i].StandardForm + '"]').length == 0 || _this.cy.edges('[source = "' + data[i].StandardForm + '"][target = "' + elem.StandardForm + '"]').length == 0) {
              _this.cy.add({group: 'edges', data: {id: Math.random(), label: topic, source: elem.StandardForm, target: data[i].StandardForm}});
            }
          }
        });
      });
    }
  });
}
else{
  data.forEach(function(elem: any){
    for (let i = 0; i < data.length; i++){
      elem.Judges.forEach(function(judge: any){
        data[i].Judges.forEach(function(innerJudge: any){
          if (elem.StandardForm != data[i].StandardForm && judge.Name == innerJudge.Name){
            // tslint:disable-next-line:max-line-length
            if (_this.cyJudges.edges('[source = "' + elem.StandardForm + '"][target = "' + data[i].StandardForm + '"]').length == 0 && _this.cyJudges.edges('[source = "' + data[i].StandardForm + '"][target = "' + elem.StandardForm + '"]').length == 0) {
              _this.cyJudges.add({group: 'edges', data: {id: Math.random(), label: judge.Name, source: elem.StandardForm, target: data[i].StandardForm}});
            }
          }
          else if (elem.StandardForm == data[i].StandardForm && judge.Name != innerJudge.Name) {
            // tslint:disable-next-line:max-line-length
            if (_this.cyJudges.edges('[source = "' + elem.StandardForm + '"][target = "' + data[i].StandardForm + '"]').length == 0 || _this.cyJudges.edges('[source = "' + data[i].StandardForm + '"][target = "' + elem.StandardForm + '"]').length == 0) {
              _this.cyJudges.add({group: 'edges', data: {id: Math.random(), label: judge.Name, source: elem.StandardForm, target: data[i].StandardForm}});
            }
          }
        });
      });
    }
  });
}

}

And here is where i call the createGraph function:

... _this.createGraph(res, 'topics'); _this.createGraph(res, 'judges'); ...

Here the stack of the error:

ERROR TypeError: Cannot read property 'x1' of undefined at Layout.push.ROFb.CircleLayout.run (cytoscape.cjs.js:19335) at SemanticSearchComponent.createGraph (semantic-search.component.ts:221) at semantic-search.component.ts:403 at XMLHttpRequest.xhttp.onreadystatechange [as __zone_symbol__ON_PROPERTYreadystatechange] (request-service.service.ts:119) at XMLHttpRequest.wrapFn (zone-evergreen.js:1218) at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Object.onInvokeTask (core.js:28255) at ZoneDelegate.invokeTask (zone-evergreen.js:398) at Zone.runTask (zone-evergreen.js:167) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480)

I cannot figure out what can be the problem

question from:https://stackoverflow.com/questions/65923262/error-typeerror-cannot-read-property-x1-of-undefined-cytoscape-js-and-angula

Answer 1

Waitting for answers