search

dash14 / v-network-graph

An interactive network graph visualization component for Vue 3
https://dash14.github.io/v-network-graph/
MIT License
485 stars 44 forks source link

Events: Affecting other nodes and edges with node events #56

Closed chervontsev closed 2 years ago

chervontsev commented 2 years ago

Hi I'm building a social connections graph where, while hovering on a person, her closest friends (nodes/edges) are also highlighted.

I made a small demo but there's some glitchy behaviour with ForceLayout. https://codesandbox.io/s/github/chervontsev/vue-network-graph-test-v1/tree/main/?file=/src/App.vue

Is there a more optimal way to do this?

Test cases:

Case 1:

  1. Initial state, upper left checkbox OFF
  2. Hover mouse on any edge - edge thickens, adjacent nodes thicken
  3. Hover mouse on any node - closest related nodes thicken Result: in current setup all as expected

Case 2:

  1. Initial state, upper left checkbox ON
  2. Hover mouse on any edge - edge thickens, adjacent nodes thicken
  3. Hover mouse on any node - closest related nodes and edges thicken Result: in current setup, while hovering on a node, whole structure starts twitching and spinning

Assumptions

While the twitching and spinning version looks nice and smooth, a lot of elements are being recalculated and redrawn at the same time. Displaying 30-50 nodes, cranks up the CPU load drastically.

This effect happens when I mutate the widths that are set in the edge model. Presumably this change triggers the graph rebuild.

For nodes I used a custom template and access them via $ref. This way the data model is not affected and the structure stays in place.

Conclusion

Is there maybe a way to put refs on edges? Or a way to stop/restart forceSimulation outside of ForceLayout?

chervontsev commented 2 years ago

Fixed it : ) https://codesandbox.io/s/github/chervontsev/vue-network-graph-test-v2-fixed/tree/main/?file=/src/App.vue

The problem seems to have been in changing the model. But if you put your edge behaviour logic in the config everything works as expected!

The same solution can be propagated to other config parts if the need arises.

Quite an awesome library : )

dash14 commented 2 years ago

Hi @chervontsev, Thank you for your detailed report and sharing a workaround! You have already reached what I consider to be the optimal solution. However, I think that the behavior where changing any property of an edge triggers a recalculation of the force simulation is undesirable, so I have fixed the library. (v0.5.14) In the latest version, the recalculation is not performed only by changing the edge model as in the first code.

Thank you for using v-network-graph! Best Regards,

chervontsev commented 2 years ago

Thank you : ) I'll definitely check it out!