Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Graphin doesn't work with global state library Jotai #449

Open
eakl opened this issue Sep 29, 2022 · 4 comments
Open

Graphin doesn't work with global state library Jotai #449

eakl opened this issue Sep 29, 2022 · 4 comments

Comments

@eakl
Copy link

eakl commented Sep 29, 2022

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
Copy link
Author

eakl commented Oct 3, 2022

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
Copy link
Author

eakl commented Oct 11, 2022

Has someone been able to test it?

@eakl
Copy link
Author

eakl commented Oct 14, 2022

This issue is related to this discussion: #415

@mikaelfs
Copy link

mikaelfs commented Nov 3, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants