select multiple nodes with rectangle/lasso -- suggested feature

[John-Boik]

This might be beyond the aims of v-network-graph, but I am attempting to use v-network-graph to create a graph editor for Neo4j. It would allow a user to create/edit graphs in the browser, and these would be saved in Neo4j on the backend. Likewise, a graph stored in Neo4j could be converted to v-network-graph on the frontend for viewing and additional editing.

This project suggests some potential new features for v-network-graph. One would be the ability to select multiple nodes by dragging a rectangle or lasso around existing nodes. Once selected, the nodes could be removed from the graph, if that is the intent. Or, more interesting, the selected nodes could be included into a group by writing a node property on each.

In the latter case, there could be an option to keep the rectangle or other boundary visible, to denote the group. It could even have an optional visible text label somewhere in the boundary, (e.g., "Group 1"). Finally, the nodes within the boundary could be arranged by some force method, and the group could be treated as a whole when using a force method to arrange all other nodes. I imagine all this would involve creating a subgroup within the SVG that includes the rectangle as a border.

Is the ability to select multiple nodes in this way of interest to the developers? If you do not foresee adding this as a feature, could you provide a short description as to how this might be best accomplished in the existing v-network-graph framework?

[dash14]

Thank you for your suggestion!

The ability to select multiple nodes by dragging is a feature that I have been thinking about since the beginning of development, but haven't gotten around to it yet.
I hope to implement it in the not-too-distant future.

The ability to group nodes was also an idea, but it was not the target yet, because I was focusing on simplicity and extendibility first.

What you have suggested is interesting. I might break it down into several small features and implement them little by little.
By combining them, your requirements may be realized someday.
However, it is difficult to promise when all the implementations will be ready...

If you are in a hurry, please refer to the following:

If you do not foresee adding this as a feature, could you provide a short description as to how this might be best accomplished in the existing v-network-graph framework?

1. the ability to select multiple nodes by dragging a rectangle or lasso around existing nodes
   • Capture the drag event, extract the nodes with positional information within that range from the layouts prop, add these nodes to the selected-nodes prop.
     • ref: https://dash14.github.io/v-network-graph/examples/operation.html#select-nodes
2. keep the rectangle or other boundary visible , to denote the group
   • Add a custom layer and draw the boundary into that layer.
     • https://dash14.github.io/v-network-graph/examples/layer.html#custom-layer
3. the nodes within the boundary could be arranged by some force method
   • It's a little difficult, but create a class that can handle multiple forces, referring to ForceLayout.
     • https://dash14.github.io/v-network-graph/examples/layout.html#position-nodes-with-d3-force
     • https://github.com/dash14/v-network-graph/blob/main/src/layouts/force.ts

[John-Boik]

Great @dash14, thanks. I look forward to the changes. I'm sure you are familiar with vis.js, which writes to a HTML canvas rather than SVG. (In my case, an SVG is preferred.) As you add features, vis.js might offer some inspiration. In particular, it has:

• A means to group/cluster and visually collapse nodes. I did not mention node collapse in my original post, but that is a very nice feature.
• A means to write arbitrary objects to the canvas. It sounds like v-network-graph can do the same, by writing to a custom SVG layer.
• People have discussed how to create a lasso select for vis.js.

[dash14]

Hi @John-Boik,
Thanks for your reply and sharing the vis.js precedent. I would like to refer to it.
I think it will take some time, I will report here when the development progresses.

[happylilem]

Hi @dash14, I am willing to add a selection by rectangle feature but have a few questions regarding which functions to add/modify.

• I need to restrict the rectangle drag within the SVG graph element as the viewport, but I found a few functions that might be useful and I cannot determine which one works in this case. How do I distinguish between getOrCreateViewPort, getViewBox and getViewArea?
• Also related to the viewport issue, I am encountering trouble when trying to get the x-y positions of the nodes in the SVG box. When I use ClientX/ClientY, the viewport still seems to be reading the whole screen as the viewport. How can I only read positions within the graph element?
• Just to check if I targeted the correct function --
  • Adding an else if statement under the mouseAndTouchNormalize should allow me to add a click-drag event for creating the rectangle;
  • handleNodeClickEvent is used to select nodes by click events, so I might be able to group the multiple nodes selected by the rectangle also under this function?

There're too many functions in the source code so I could have omitted some important functions. I would really appreciate it if you could kindly correct me if I should look for other functions to accomplish the above steps!

[dash14]

Hi @happylilem,
Thank you for your consideration of the feature of node selection by rectangle!
In order to answer your question in detail, I myself need to think about how to implement this feature. And as a result, I implemented this feature.
I had originally planned to implement it and decided to expedite its timing. Thank you for the impetus.

Release: v0.6.0
Example: https://dash14.github.io/v-network-graph/examples/operation.html#select-nodes-at-once-with-a-rectangle

The implementation is briefly described below.

• Added the function to change to a mode different from normal ("box-selection" mode) in order to distinguish it from pan operation drag. In this mode, to simplify implementation, processing is not written in the same place as the nodes pointer events, but is implemented as intercepting events and processing.
• By drawing <rect> on <svg> outside the viewport, the coordinates is not affected by zooming.
• For the coordinate conversion, there is a function provided that performs conversion in the DOM and in the viewport, which was used. (Please see the example for more details)

Thank you very much for the detailed look inside!
Please keep up your supports!

[happylilem]

Hi @dash14 ,
I was playing around with this new feature, such an awesome addition to this library! Thank you!

And just a little suggestion: I noticed some other network libraries have selection by rectangle function by holding the ctrl/cmd key; while releasing the key allows normal pan. This might be more convenient than using one or more buttons when there are already bunch of buttons on the page. But the current feature is good enough for me.

The using experience of your network library so far is great, love the appearance of the graphs and the smoothness of the operations. Please keep up the good work!

[dash14]

Hi @happylilem,
Thank you for your reply and suggestions!

I have added the feature you suggested in v0.6.1.
If enabled in the configs, it is possible to select nodes by rectangle with the ctrl/cmd key.
The example has also been extended to include the new feature.
https://dash14.github.io/v-network-graph/examples/operation.html#select-nodes-at-once-with-a-rectangle

Thank you for your positive feedback!
Please continue to support this library!

[happylilem]

Hi @dash14 ,
Thanks for adding this function!

I just tried this new feature on the example, and discovered a little issue there -- it works perfectly fine when I release the mouse before releasing the cmd key after the selection; but if the cmd key is released before the mouse, the selection box would remain on the graph, and clicking on the background would not eliminate the rectangle. Meanwhile I can pan the graph, so the network can be moved freely around regardless of the rectangle. To eliminate the rectangle I'll have to press the key again and start a new selection.

[dash14]

Hi @happylilem,
Thank you for trying it and for reporting the bug!
I've fixed and released. (v0.6.2)
Your detailed report was very helpful. Thank you so much!