g6.js ant : Can not switch back and forth between two layouts

Question

I am testing g6.js feasibility for a project. I am trying out G6 with React and so far looks good. One of the test is to switch between different layouts on button clicks. I coded where the visualization / layout switches forward (i.e. first time) between two layouts on button click. However, when I try to switch again, it doesn't work and gets stuck on "grid layout".

Here's gist for this problem: https://codesandbox.io/s/confident-thunder-xzmdyq

As seen: I am able to switch from original layout to "circular layout" to "grid layout" using button clicks.

But once I am on "grid layout" and I click again on "circular layout" button , the layout doesn't change.

I am suspecting something to do with ref , but not sure what.

Note: Curiously on code-sandbox it works perfectly, while same code on mac is exhibiting above issue.

Relevant Code:

import { useEffect, useRef } from "react";
import ReactDOM from "react-dom";
import G6 from "@antv/g6";

const graphData = {
nodes: [
  { id: "node1", label: "1" },
  { id: "node2", label: "2" },
  { id: "node3", label: "3" },
  { id: "node4", label: "4" },
  { id: "node5", label: "5" },
  { id: "node6", label: "6" },
  { id: "node7", label: "7" },
  { id: "node8", label: "8" },
],
edges: [
    { source: "node1", target: "node2" },
    { source: "node1", target: "node3" },
    { source: "node2", target: "node3" },
    { source: "node2", target: "node4" },
    { source: "node4", target: "node5" },
    { source: "node5", target: "node6" },
    { source: "node5", target: "node7" },
    { source: "node6", target: "node8" },
  ],
};

let graph = null;

const G6GraphTest = (props) => {
  console.dir(props);
  const ref = useRef(null);

  useEffect(() => {
    if (!graph) {
      graph =
        ref.current &&
        new G6.Graph({
          container: ReactDOM.findDOMNode(ref.current),
          width: 800,
          height: 600,
          fitView: true,
          modes: {
            default: ["drag-canvas", "zoom-canvas", "drag-node", "click-select"]
          },
          animate: true,
          layout: {
            type: "random"
          }
        });
    }

    graph.data(graphData);
    graph.render();
  }, [ref]);

  const handleClick1 = () => {
    graph.updateLayout({
      type: "circular",
      radius: 200,
      startAngle: Math.PI / 4,
      endAngle: Math.PI,
      divisions: 5,
      ordering: "degree"
    });
  };

  const handleClick2 = () => {
    graph.updateLayout({
      type: "grid",
      rows: 2,
      cols: 2,
      preventOverlap: true,
      preventOverlapPdding: 10
    });
  };

  return (
    <>
      <button onClick={handleClick1}> circular layout</button>
      <button onClick={handleClick2}>grid layout</button>
      <div ref={ref}> </div>
    </>
  );
};

export default G6GraphTest;

Any response is appreciated.

Answer 1

OK, finally its working as intended. I am able to switch back and forth between circular and grid layouts.

I had to add graph.render() below graph.updateLayout() for it to work. Interestingly, on code-sandbox it works without graph.render(). Wonder if it has to do with MacOS....

Here's changed code.

const handleClick1 = () => {
        graph.updateLayout({
            type: 'circular',
            center: [500, 300],
            radius: 200,
            startAngle: Math.PI / 4,
            endAngle: Math.PI,
            divisions: 5,
            ordering: 'degree',
          });
        graph.render(); // needed to add this line
      };