Graphin doesn't work with global state library Jotai

[eakl]

trafficstars

Describe the bug

Using global state library such as Jotai or Zustend causes the following error:

TypeError: Cannot read properties of undefined (reading 'manipulateBehaviors')

However, using useState works as expected.

const [layout] = useAtom(layoutAtom);
// versus
const [layout] = useState("graphin-force");

Full code below:

import Graphin, { Utils, Behaviors } from "@antv/graphin";
import { atom, useAtom } from "jotai";
import "./styles.css";

const { ZoomCanvas } = Behaviors;

const data = Utils.mock(10).circle().graphin();
const layoutAtom = atom("graphin-force");

export default function App() {
  const [layout] = useAtom(layoutAtom);
  // const [layout] = useState("graphin-force");
  
  return (
    <div className="App">
      <Graphin data={data} layout={{ type: layout }}>
        <ZoomCanvas disabled />
      </Graphin>
    </div>
  );
}

Your Example Website or App

https://codesandbox.io/s/graphin-jotai-g2n4je?file=/src/App.tsx

Expected behavior

Graphin should work with Jotai

[eakl]

Seems like useEffect is causing problem

In the following code, <LayoutSelector /> calls setLayout() with the new layout

Without useEffect, the code works, with useEffect, it fails with the same error as above.

export default function App() {
  const [layout, setLayout] = useState('random')

  useEffect(() => {
    console.log('New Layout: ', layout)
  }, [layout])
  
  return (
    <div className="App">
      <Graphin data={data} layout={{ type: layout }}>
        <ZoomCanvas disabled />
        <LayoutSelector setLayout={setLayout} />
      </Graphin>
    </div>
  );
}

[eakl]

Has someone been able to test it?

[eakl]

This issue is related to this discussion: https://github.com/antvis/Graphin/discussions/415

[mikaelfs]

This can be an issue with React Strict mode. The graph is not rendered properly in strict mode. Note that in strict mode, components are rendered twice. Ref: https://stackoverflow.com/questions/61254372/my-react-component-is-rendering-twice-because-of-strict-mode

You may try to disable strict mode and see if the error disappears.