How do I calculate the camera state to zoom to a selection of nodes in the graph

[benny-noumena]

Hi

I would like to select a couple of nodes and then provide a method to zoom the camera so that the selected nodes are centered and all visible.

In the end I think I need to set the cameras state camera.setState({ x, y, ratio }).

So far I can calculate x and y but how do I calculate the right ratio?

Thanks for any help!

Ben

[jacomyal]

This is indeed a bit hard to do, so I'm planning to release it as a function exported from a new upcoming @sigma/utils package. I'll let you know in that thread as soon as it's released somewhere.

[benny-noumena]

Hey Alexis!

Thank you so much! That would be super convenient.

Many thanks for all your efforts!

Best Benny

[jacomyal]

Hi @benny-noumena,

You can now use the fitViewportToNodes helper from the new @sigma/utils package.
You can try it in this story.

[Rich5]

Hi @jacomyal, I was testing out the fitViewportToNodes functionality and if I pass all the nodes into the function I expected that it would fit the entire graph into view, but it doesn't seem to work that way for me. No matter what it sets the ratio back to 1. Is that intended?

What I was going for was to click a button to zoom out and fit the entire graph. Maybe this feature already exists and I've messed something up though.

[jacomyal]

This is the intended behavior, from what I understand:

• By default, today, sigma rescales the graph so that, with the default camera state (ratio 1, x and y 0.5) all nodes are in the viewport, and they take the most space as possible (doc here). It keeps some space around, though, relatively to the stagePadding setting value.
• fitViewportToNodes tries to achieve the exact same goal. So, when calling it with all the nodes, it goes back to the default camera state.

What do you exactly by "a button to zoom out and fit the entire graph"?

[Rich5]

Ah ok. I thought that was the case and this is actually helpful because it means I'm doing something to make the camera not bring all the nodes into view.

Also, I'm happy to move this to a new discussion if that's helpful but I'll explain what I'm doing here. I have a graph that initially loads from the database and displays as expected with a forceAtlas2 worker running. I'm using react-sigma camera controls and specifically the reset function that calls sigma.getCamera().animatedReset() https://github.com/sim51/react-sigma/blob/main/packages/core/src/hooks/useCamera.ts#L56

I then implemented an expand function that is similar to the linkcurious expand shown here: https://doc.linkurious.com/user-manual/latest/expand/

The way I implemented expand is when I click on a node it executes a query and merges the results with the existing graph. Here's a simplified snippet of the code below:

  const graph_object = GetNewGraph()
  const new_graph = new MultiDirectedGraph();
  new_graph.import(graph_object)

  random.assign(new_graph)
  forceAtlas2.assign(new_graph, { settings, iterations: 100 });

  // Loop through new nodes looking for overlaps before merge
  new_graph.forEachNode((new_node) => {

    // If we find an overlap then use the old x, y coords
    try {

      const original_attributes = sigma.getGraph().getNodeAttributes(new_node)
      new_graph.setNodeAttribute(new_node, "x", original_attributes.x);
      new_graph.setNodeAttribute(new_node, "y", original_attributes.y);

    } catch (err) {
      // Ignore errors here. NodeNotFound just means we go with random x,y assigned above
    }

  })

  const combined_graph = sigma.getGraph()
  combined_graph.import(new_graph, true)

  sigma.setGraph(combined_graph)
  sigma.refresh()

After the expand or even dragging a node a node outside of the view what I was hoping to have is a button that would zoom in or out to fit the entire graph in the view. How would I go about doing that? I'm still new to sigma so my apologies if this is obvious.

[jacomyal]

Hi @Rich5,

As I consider the initial question solved with the new @sigma/utils, I think it would be better indeed to move to a new discussion. But I'll be glad to help you with it, there might be some undetected bug with #setGraph, or something else. Your topic seems very interesting :)

[Rich5]

Sounds good. I really appreciate it. Moved to: #1471