Fit graph into view after expand or drag-n-drop

[Rich5]

Moved to new discussion. See here for more context: #1461 (reply in thread)

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]

Is it possible for you to send us a reproducible use case, using the CodeSandbox template?

Also, I have an idea about what could explain your issue: Do you call sigma.setCustomBBox somewhere else in your code?

[Rich5]

I'll try to get a reproducible use case. The code base is large so let me see what I can do.

I do setCustomBBox as part of the drag-n-drop events. My drag-n-drop code is nearly identical to the example here: https://sim51.github.io/react-sigma/docs/example/drag_n_drop/

Which I admit did confuse me a little with this comment: // On mouse up, we reset the autoscale and the dragging mode
Mostly because I don't see how it will "reset the autoscale" in that code.

[jacomyal]

OK, I get it, that's where your issue comes from:

When you call if (!sigma.getCustomBBox()) sigma.setCustomBBox(sigma.getBBox());, it "locks" the boundaries of the graph within sigma. Basically, anytime sigma will use the boundaries (or "extents" of the graph, as it's called internally), it will use that custom bounding box instead. This remains true, until you flush that custom bounding box (with sigma.setCustomBBox(null);) or set it to something else.

Unfortunately, the getCameraStateToFitViewportToNodes function that is used by fitViewportToNodes has been designed so that is only works when sigma uses its "natural" graph bounding box.

Good catch! I'll create a new bug ticket about that specific bug.

Until I find time to address it, you can try to reset the custom bounding box before calling fitViewportToNodes, either by going back to sigma's default bounding box mode (with sigma.setCustomBBox(null); or by setting sigma's custom bounding box to the current natural bounding box (with sigma.setCustomBBox(sigma.getBBox());.

Thanks for the report!

[Rich5]

Thank you! That makes a lot of sense. I'll give that a try later today and report back.

[Rich5]

Setting sigma.setCustomBBox(null) seems to fix the problem after my initial test. I'll do some more testing, but so far it looks like that was indeed the issue

[Rich5]

Ok after some more testing this works but when fitting the whole graph into the view it doesn't adjust the size of the nodes and edges like with the zoom. At least that what it seems like. The result is the graph ends up looking very smashed together. I tried this with both sigma.setCustomBBox(sigma.getBBox()) and sigma.setCustomBBox(null). I think this is the right track though. I'll keep at it.

[jacomyal]

Hi, glad to see you've made progress!

Meanwhile, I've found some time to solve #1472 (there was indeed some issues to solve), so you can probably upgrade @sigma/utils version to 3.0.0-beta.4, and use fitViewportToNodes without resetting the custom bounding box. I hope it will work as you expect it.

[Rich5]

Hi, I just tested 3.0.0-beta.4 and it works as expected! Thank you!

If anyone ends up here using react-sigma like I am, my zoom control component now looks like this:

...
import { fitViewportToNodes } from "@sigma/utils";

export const ZoomControl: React.FC<ZoomControlProps> = ({
    animationDuration = 200,
    children,

}: ZoomControlProps) => {

    const sigma = useSigma()

    const { zoomIn, zoomOut, reset } = useCamera({ duration: animationDuration, factor: 1.5 });

    return (
        <>
            <div className="relative flex flex-col items-center space-y-2 mt-2">
                <Button plain
                    className="flex items-center"
                    onClick={() => zoomIn()} >
                    {children ? children[0] : <PlusIcon className=" h-5 w-5" />}
                </Button>

                <Button plain
                    className="flex items-center"
                    onClick={() => zoomOut()}>
                    {children ? children[1] : <MinusIcon className=" h-5 w-5" />}
                </Button>

                <Button plain
                    className="flex items-center"
                    onClick={() => {fitViewportToNodes(
                        sigma,
                        sigma.getGraph().nodes(),
                        { animate: true },
                      )}}>
                    {children ? children[2] : <ViewfinderCircleIcon className=" h-5 w-5" />}
                </Button>
            </div>
        </>
    );
}; 

The built-in reset from useCamera() will still function as it always did.

[Rich5]

@jacomyal I may have stumbled on an edge case with fitViewportToNodes. When there is only one node on the screen calling fitViewportToNodes makes the node disappear. Even zooming out I can't see the node. If I call reset() it centers back into view though. If there are 2 or more nodes in the view it works as expected for me.

[jacomyal]

Oh, you're right, good catch! I created issue #1473, and I'll fix it as soon as I can.
Thanks!

[jacomyal]

@Rich5 I published a fix in @sigma/[email protected]. Thanks again for the testing and the report!