Only the first graph has edge markers, when multiple graphs are present

[xavieryao]

This will happen if two graphs have the same marker config.

The cause is a collision of marker ids. My temporary workaround is to append a random number to marker ids by changing: https://github.com/dash14/v-network-graph/blob/eb1e23bca72f298c5fb6e8d2b61ea8c6f6852728/src/composables/marker.ts#L94-L96

to

return `marker_${m.type}_${m.width}_${m.height}_${m.margin}_${converted}_${
  m.isSource ? “L” : “R”
}_${m.units === “strokeWidth” ? “rel” : “abs”}_${Math.floor(Math.random() * 217846132)}`

But apparently we'd welcome a better solution. 😃 Let me know if you need a minimal reproducible example.

[dash14]

Hi @xavieryao, Thank you for the report. I tried placing two v-network-graph components in a page and set the config to display the same marker on each. I also confirmed that the marker IDs are duplicated, but the same markers are displayed in both instances. I have tested this using latest Chrome and Firefox for PC. Could you please let me know what browser you are using? Or is there any other conditions for this to occur besides duplicate IDs? If possible, it would be helpful if you could give me the minimal reproducible example.

[dash14]

I checked again and cannot reproduce it on my end, so I will close the issue for the time being. If additional information is available, please reopen this issue.

[xavieryao]

Hi @dash14 ,

Thank you so much for your help and I apologize for the late reply.

After some testing, I found that the problem only persists when used together with el-collapse (from Element Plus) in accordion mode.

<template>
  <main>
    <el-collapse accordion>
      <el-collapse-item v-for="graph in graphs" :key="graph" :title="graph">
        <v-network-graph :nodes="nodes" :edges="edges" :configs="graphConfigs" />
      </el-collapse-item>
    </el-collapse>
  </main>
</template>

Tested with element-plus v2.2.0, v-network-graph v0.5.14, vue v3.2.33 and Chrome 101.0. For anyone encountering the same problem: the workaround I'm using now is to add a v-if to v-network-graph to only render it when it's visible.

So strictly speaking, this is not a v-network-graph issue. Thank you for all your help!

[dash14]

Hi @xavieryao,

Thank you very much for the detailed information. I was able to reproduce it! Further inspection of this condition revealed that it occurs when a forward v-network-graph instance with a marker of the same ID value is hidden by display:none.

Since this problem can occur in other combinations than with element-plus's el-collapse(accordion) component, and it was also observed in browsers other than Chrome, so I decided to address this problem. Fixed and released v0.5.16.

The detailed information was very helpful. Many thanks! Best Regards,