Display nodes not works after switch the route

[mfigueredo]

Hello,

I have two mais routes in my Vue project:
- http://localhost:8080/
-http://localhost:8080/network

When i enter in the http://localhost:8080/network route for the first time, all the stuff I wourl like to do with my network, like add nodes and edgesm works fine. However, when I switch to the route http://localhost:8080/ and backs to the http://localhost:8080/networks, the component does not displays nodes addtions anymore.

    preConfig(cytoscape) {
      document.getElementById("cytoscape-div").style.minHeight='calc(100%)';
      document.getElementById("cytoscape-div").style.maxHeight='calc(100%)';
      if (!cytoscape("core", "cxtmenu")) {
        cytoscape.use(cxmenu);
        cytoscape.use(compoundDragAndDrop);
        cytoscape.use(coseBilkent);
        cytoscape.use(cise);
      }
    },
    afterCreated(cy) {
        cy.on("tap", "node", (e) => {
            this.isExpandFormActive = true;
            this.expandNode = e.target.data();
        });
    },

I suspect that maybe is a problem related to run preConfig and afterCreated everytime that I change the route. There is any solution to run these two methods only when the cytoscape component is created for the first time?

[ghost]

I've encountered the same bug as @mfigueredo, any update to the current route or navigating away from the page and returning causes the graph not to render, only solvable by a refresh.

[daddycocoaman]

This is definitely an issue, but I found that this particular cause is the cxtmenu (which you've misspelled as "cxmenu" by the way). If you check the console output, you see that it tries to re-register the extension that already exist.

I found that the solution to prevent some of these errors is to create a true/false flag in created() then have preConfig check to see if the flag exists before trying to readd cxtmenu. When I put the graph layouts in the conditional, the graph layout changes didn't work so you probably just need the cxtmenu in there like this:

data() {
    return {
      existingCytoscape: false,
    };
  },
  created() {
    this.existingCytoscape = true;
  },
  methods: {
    preConfig(cytoscape) {
      cytoscape.use(coseBilkent);
      cytoscape.use(klay);
      cytoscape.use(cola);
      cytoscape.use(dagre);
      if (!this.existingCytoscape) {
        cytoscape.use(cxtmenu);
      }
    },
}

[mfigueredo]

This is definitely an issue, but I found that this particular cause is the cxtmenu (which you've misspelled as "cxmenu" by the way). If you check the console output, you see that it tries to re-register the extension that already exist.

I found that the solution to prevent some of these errors is to create a true/false flag in created() then have preConfig check to see if the flag exists before trying to readd cxtmenu. When I put the graph layouts in the conditional, the graph layout changes didn't work so you probably just need the cxtmenu in there like this:

data() {
    return {
      existingCytoscape: false,
    };
  },
  created() {
    this.existingCytoscape = true;
  },
  methods: {
    preConfig(cytoscape) {
      cytoscape.use(coseBilkent);
      cytoscape.use(klay);
      cytoscape.use(cola);
      cytoscape.use(dagre);
      if (!this.existingCytoscape) {
        cytoscape.use(cxtmenu);
      }
    },
}

Thanks for the response!
Actually, the code line if (!cytoscape("core", "cxtmenu")) in my code ensures that the extension is registered only once.
But I tried your version without success. The issue persists.
Verifying my console, there is nothing being reported there, not even warnings.

This issue was very similar to our situation, however was closed without a real solution. Seems to be a recurrent situation.

[daddycocoaman]

I just tried implementing if (!cytoscape("core", "cxtmenu")) and it similarly seems to work only when putting the cxtmenu in the conditional similar to the code I posted above. So maybe try in preConfig:

cytoscape.use(compoundDragAndDrop);
cytoscape.use(coseBilkent);
cytoscape.use(cise);
if (!cytoscape("core", "cxtmenu")) {
        cytoscape.use(cxmenu);
      }

I still think the main issue is trying to put the layouts (like cose-bilkent) under the conditional. It doesn't look the component cares if you cytoscape.use(<layout>) multiple times.

[mfigueredo]

I tried removing all dependecies such as cxtmenu and coseBilkent from the project and the issue still persists. I will try rebuild the from scratch in this case.

[mfigueredo]

Just to update with my solution: The problem, in my case, is the network layout. In my application, the default layout was the cos layout. When using this layout, when switching the route and backing again for the network the Cytoscape was not able to render anything else.
I just replaced my default layout for anyone else, such as circle or random and everything goes fine.