Removing items from elements does not remove them from cytoscape instance

[MintyOrb]

Adding items to the elements array successfully creates them within the cytoscape instance:

this.elements.push({
                data: {
                    id: event.timeStamp,
                },
                 position: {
                        x: event.position.x,
                        y: event.position.y
                    }
            })

But removing them:

for(var i = 0; i < this.elements.length; i++) {
                if(this.elements[i].data.id == id) {
                    console.log('found')
                    this.elements.splice(i, 1);
                    break;
                }
            }

Does not remove them from the view, even after running a new layout.

Is this the incorrect way to update the instance? Why is vue-cytoscape not respecting the updated elements data?

[rcarcasses]

you are mutating the array here:

...
this.elements.splice(i, 1);

instead, reassign it and (I think) it should work:

this.elements = ....

[MintyOrb]

@rcarcasses

this.elements = this.elements.filter(function( obj ) {
                return obj.data.id !== id;
            });

Or even just

            this.elements = [];

Gives the same result.

FWIW, I would prefer to mutate the array though, to iteratively update the graph rather than be forced to re-initialize, if possible.

[MintyOrb]

This seems to be the same issue raised by @gioppoluca in #39 and #40, @rcarcasses

[rcarcasses]

is hard to know what could be wrong without a piece of testable code, can you provide such? also, are you using :key="`${def.data.id}`" in the cy-elements?

[MintyOrb]

Here is your codesandbox with the delete element implemented.. It just has the addition of

this.elements = this.elements.filter(function( obj ) {
          return obj.data.id !== id;
      });

I am using :key="`${def.data.id}`" in the cy-elements though I don't understand the "`${}`" notation.

[rcarcasses]

ok, I'll take a look later, this "`${var}`" notation is just template literals which allows for string interpolation.

[MintyOrb]

I see- thanks @rcarcasses!

[MintyOrb]

@rcarcasses have you looked into an/or resolved this? I've tried digging in to your source as well as cytoscope but getting quickly lost.

[rcarcasses]

@bornytm is your issue finally solved after updating?

[srisaiyeegharan]

Hi racarcasses!

I think I have run to the issue on this thread. Removing items from the elements does not remove them from Cytoscape instance.

This is my cyto instance
<cytoscape ref="cy" :config="config" :preConfig="preConfig" :afterCreated="afterCreated" > <cy-element v-for="def in elementsData" :key="def.data.id" :definition="def" /> </cytoscape>

I have a computed property which is the source for the elements:
computed: { elementsData: function() { console.log("Elements Data", this.$store.getters.elementsData) return this.$store.getters.elementsData },

I can see that my data source for the elements updates. For E.g. An Array of 149 elements to an array of 20 elements.
However, this is not reflected in the Cytoscape collection.

When I change my data source from 20 to 149 (Basically adding elements) the Cytoscape collection seems to pick it up.

Any help would be appreciated.

Thank you.

[ghost]

I am having a similar issue as @srisaiyeegharan, thought cytoscape does not pick up changes adding elements either.

In the component where I am using <cytoscape> and <cy-element> I can see that the elements property is correctly updated, however the cytoscape collection always remains empty. I am initalising the cytoscape instance without any elements and adding them later.

I can force an update explicitly by adding a watcher on the elements and directly adding the elements to the graph with cy.add() but this kind of defeats the purpose of the cy-instance.