search

dash14 / v-network-graph

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

Is it possible to access a hover event on summarized edges? #11

Closed markus-ebner closed 2 years ago

markus-ebner commented 2 years ago

Hi @dash14,

I'm working with the summarized edges feature at the moment. I got two questions for you :)

Thanks for your amazing stuff 🥇

dash14 commented 2 years ago

Hi @markus-ebner, Thank you very much for using the v-network-graph. Such feedbacks motivate me.

Thanks for your question about summarized edges. The summarized edge remained a low priority because there was no UI to select only some of the multiple edges that were summarized, and it was hard to implement. As a rush job, I implemented the following (v0.3.3):

Fire events of summarized edges

I have implemented firing events, but I have not implemented changing the appearance by mouse operation. I added a class to the element in case you want to change the appearance such as the color of the line by selecting or hovering the summarized edge. In the future, I may implement changing the appearance, but for the time being, please specify the style as follows.

.v-network-graph .v-line-summarized > path {
  cursor: pointer;

  transition: stroke-width 0.1s linear;
}
.v-network-graph .v-line-summarized.hovered > path {
  stroke: red;
  stroke-width: 8px;
  vector-effect: non-scaling-stroke;
}
.v-network-graph .v-line-summarized.selected > path {
  stroke: green;
  stroke-width: 8px;
  vector-effect: non-scaling-stroke;
}

Slot for draw labels for summarized edges

Please see the sample below. https://dash14.github.io/v-network-graph/examples/labels.html#summarized-edge-labels

markus-ebner commented 2 years ago

Oh thanks so much for your work, @dash14!!! It works and it is so fancy.

One minor thing that I've found is that when you hover on the circle or rect of the summarized-edge, it doesn't fire the event. Or at least in my case. Can you reproduce the same behaviour?

dash14 commented 2 years ago

Hi @markus-ebner,

One minor thing that I've found is that when you hover on the circle or rect of the summarized-edge, it doesn't fire the event. Or at least in my case. Can you reproduce the same behaviour?

Oops... Thanks a lot for pointing this out!

I've released a version that fixes that problem, so please check it out. (v0.3.4)

I'm very sorry, but this release has incompatible changes regarding summarized edges. In the previous version, when a summarized edge was mouseover, an event was fired for all the edges in the summarized edge, but now it only fires once. The edge IDs being summarized is now included in the event object. Please see the Reference for more details.

markus-ebner commented 2 years ago

Oh thanks very much for the quick fix. It works as expected ;)

You are the best @dash14 🥇