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
