Edge marker only rendered on first flow when there are multiple flows and some are with display:"none"

[cmsmachado]

Describe the Bug

Edges markerEnd will not be rendered for all flows in cases where there are multiple flows and not all are visible from the start.
When having multiple flows and only showing one at a time, hiding the remaining with display:"none" only the first flow will have the expected markerEnd

Your Example Website or App

https://codesandbox.io/s/sandpack-project-forked-1620bm?file=/App.js

Steps to Reproduce the Bug or Issue

1. Ensure there are multiple flows, some not being displayed
2. Ensure there are edges with markerEnd defined on all flows
3. Switch between the different flows - the markerEnd will not be rendered in all flows

• On example provided edges to nodes 'Output 6' and 'Output 7' should have edges with

markerEnd: {
      type: MarkerType.Arrow,
    },

This markers are only visible on flow 1

Expected behavior

As a user I would expect for all edges to show the defined markerEnd

Screenshots or Videos

Platform

• OS: [macOS]
• Browser: [Chrome]
• Version: [10.3.4]

Additional context

No response

[moklick]

Thanks for the report @cmsmachado

[moklick]

@cmsmachado The easiest way for you to fix it, would not to render the hidden flow instead of setting display="none". Working example: https://codesandbox.io/s/sandpack-project-forked-tjpisr

The issue here is that we have two flows with the same marker ids on one page. The first flow is hidden, so are the markers of that flow. The second flow tries to display the markers (uses the ones from the first flow, because the ids are equal), but they are set to display none. A solution for this on the library side would be to generate unique ids for the markers.

[moklick]

Fixed in v10.3.8. You can now prevent this behaviour by passing a unique id to each flow: <ReactFlow id="flow-1" />, <ReactFlow id="flow-2" />, etc.