CODEWITHSUNDEEP
cytoscape.js
Geoffrey Huntoon
Geoffrey Huntoon

Reputation: 25

Cytoscape.js lifecycle(?) issues when iterating through edge.data() for editing

I'm working on a feature to edit an edge's data in Cytoscape.js. I have the same for editing a node's data, and it's working perfectly! But when I try to do the same for an edge, it doesn't.

Chrome: 70.0.3538.110

Cytoscape.js: 3.2.16

Node.js: 8.10.0

Angular: 6.1.2

Here's my simplified code:

Node editing:

<form #form="ngForm" autocomplete="off">
  <div *ngFor="let field of buildDisplaySet(selectedElement) | keyvalue" class="search-input">          
  <label>
      {{field.key}}
  </label><br/>
  <input [name]="field.key"
         title="{{field.key}}"
         [value]="field.value"
         [(ngModel)]="field.value"/>
  </div>
</form>

This form iterates over the selectedElement (in this case a Cytoscape node)'s key/value pairs in node.data(), and creates an input field for each. When live, this template is rendered only once and allows for editing the values in the input fields (as expected).

Now, my attempt to do the same for a Cytoscape edge is exactly the same:

  1. Get the key/value pairs for edge.data() through buildDisplaySet()

  2. Put each key/value pair into an input element

When live, and dealing with edges, the above template renders, but is constantly recalculated in the browser such that I can't highlight an input or enter a new value.

Here are some screenshots of the console:

Working node data template

Constantly recalculating edge data template, that won't let me focus on input fields

I thought that maybe it had something to do with the way edges are drawn on the Cytoscape canvas (hence my lifecycle(?) in the title), but I'm at an absolute loss as to why it's not working. Any help would be greatly appreciated!

Upvotes: 1

Views: 103

Answers (1)

Geoffrey Huntoon
Geoffrey Huntoon

Reputation: 25

This situation was related to the custom pipe we were using and NOT anything Cytoscape.js related!! Thank you for looking anyway!

Upvotes: 1

Related Questions