Expand graph behavior differs by layout

[Rich5]

One of the features we implemented is to click on a node and expand its neighbors. The neighbors are pulled by running a database query and pulling new graph data. The expand function is fairly simple and looks like this:

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
    }

  })

  sigma.getGraph().import(new_graph, true);
  sigma.refresh()

Setting the second import parameter to true means to merge the two graph which is implemented in graphology.

The main layout we're using is forceAtlas2 with a worker running in the background. I then implemented a layout selector that gets the new positions, sets all the nodes fixed to true to freeze their positions and animates the graph. For example, the circular layout function looks like this:

  function circularLayout() {
    // stop fa2 if running
    stop()
    sigma.setCustomBBox(null)

    const circularPositions = circular(sigma.getGraph(), { scale: 100 });

    sigma.getGraph().forEachNode((key: string, attributes: Attributes): void => {

      attributes.fixed = true

    })

    animateNodes(sigma.getGraph(), circularPositions, { duration: 2000, easing: "linear" }, fit);

  }

When forceAtlas2 or circular layout is applied the expand function works as expected where the new nodes are merged with the existing graph and then forceAtlas2 lays them out as usual.

However, I recently tested out the graphology-layout-tree as mentioned in #1478 (comment) using this function below.

  function graphologyTreeLayout() {

    stop()
    sigma.setCustomBBox(null)
    sigma.setSetting("itemSizesReference", "positions")
    sigma.refresh()

    // Apply hierarchical layout:
    const layout = treeLayout(sigma.getGraph(), {
      xGroupsOffset: 400,
      yInGroupOffset: 300,
      yGroupsOffset: 50,
    });


    sigma.getGraph().forEachNode((key: string, attributes: Attributes): void => {

      attributes.fixed = true

    })

    animateNodes(sigma.getGraph(), layout, { duration: 2000, easing: "linear" }, fit);
    
    sigma.refresh()

  }

The problem is that once I run this layout the expand functionality clusters all the new nodes together instead of spreading them out as with the circular layout.

This also happens when I run the dagre layout function I mentioned here #1477 (reply in thread)

Any idea why this occurs? One guess I had was the worker has issues with new nodes being added, but if that's the case I don't know why circular, random, and forceAtlas2 work just fine.

[Rich5]

Actually I may have stumbled onto what I'm seeing. Based on the settings I gave the layout the bbox was very large relative to what the circular bbox would be. Experimenting with the xGroupsOffset, yInGroupOffset, and yGroupsOffset more and I get a better results. I also see that I need to be careful and when I set itemSizesReference for each layout.