Connected edge not rendered after hiding and showing node with `display: none`

[drauggres]

Environment info

• Cytoscape.js version : 3.23.0
• Browser/Node.js & version : Google Chrome 104.0.5112.81

Current (buggy) behaviour

When you hide nodes with style('display', 'none') and show them again with style('display', 'element') sometimes not all edges are rendered.

Note: If you move node with invisible edge it will trigger edge rendering and edge will become visible.

Desired behaviour

After hiding and showing nodes all connected edges should become visible.

Minimum steps to reproduce

What do you need to do to reproduce the issue?

https://jsbin.com/tucolapoqi

Attention to the bottom edge: from "ladybug" to "aphid".

UPD: Also you can reproduce same behavior by doing it in sequence:

• hide "bird"
• hide "ladybug"
• show "bird"
• show "ladybug"

For reviewers

Reviewers should ensure that the following tasks are carried out for incorporated issues:

• [ ] Ensure that the reporter has included a reproducible demo. They can easily fork this JSBin demo: http://jsbin.com/fiqugiq
• [ ] The issue has been associated with a corresponding milestone.
• [ ] The commits have been incorporated into the corresponding branches. Bug-fix patches go on
  • [ ] master,
  • [ ] unstable, and
  • [ ] the previous feature release branch (e.g. 1.1.x if the current release is 1.2).
• [ ] The issue has been labelled as a bug, if necessary.

[maxkfranz]

Thanks, @drauggres, for your reproducible demo. One thing that may help to expedite things would be to update your demo so that it could be done in manual steps, so that each step could be inspected.

Buttons that run each step, like these, would help:

• (1) hide "bird"
• (2) hide "ladybug"
• (3) show "bird"
• (4) show "ladybug"

[drauggres]

Thanks, @drauggres, for your reproducible demo. One thing that may help to expedite things would be to update your demo so that it could be done in manual steps, so that each step could be inspected.

Buttons that run each step, like these, would help:

• (1) hide "bird"
• (2) hide "ladybug"
• (3) show "bird"
• (4) show "ladybug"

Done. ~https://jsbin.com/pikuwamuve/edit?html,css,js,output~

UPD: https://jsbin.com/moqoboveri/1/edit Steps to reproduce:

1. click "hide bird"
2. click "hide ladybug"
3. click "show bird"
4. click "show ladybug"
5. BUG: the "ladybug -> aphid" edge is not visible
6. (optional) click "hide bird" and buggy edge will appear

[stale[bot]]

This issue has been automatically marked as stale, because it has not had activity within the past 14 days. It will be closed if no further activity occurs within the next 7 days. If a feature request is important to you, please consider making a pull request. Thank you for your contributions.

[maxkfranz]

@mikekucera, I've tagged you on this like we discussed. This might also be related to the sorted z-order draw cache that you worked with in the other issue.