Graph renders correctly in development mode but not in production build

[hafen]

I have a React app that is set up using create-react-app, and my graph renders correctly when I'm in development mode (yarn start), but when I create a production build, the layout is completely different (and incorrect).

In development mode, here's a screenshot of the relevant portion of the screen on initial render (after zooming to fit):

This is also how the graph renders when I use 3d-force-graph to render the graph outside of React.

However, after running yarn build and running the production app, the initial render (after zooming to fit) looks like this:

This is a completely different layout (same nodes). It's not just a different rotation.

No code has changed between the two outputs - just development vs. production. The data objects are the same in both cases. I can't figure out what would be causing the initial layout to be incorrect. Note that with further interactions with the graph - changing to a different dataset and back - it will eventually show the correct layout in the production build. So something is going wrong with the initial render.

Here is my code for creating the graph:

<ForceGraph3D
  ref={fgRef}
  graphData={data}
  linkVisibility={linksVisible}
  backgroundColor={"white"}
  nodeColor={getNodeColor}
  nodeRelSize={12}
  nodeResolution={15}
  nodeOpacity={0.9}
  enableNodeDrag={false}
  warmupTicks={50}
  cooldownTicks={1}
  showNavInfo={false}
  width={width}
  height={height}
/>

I know this is difficult to debug without more information, but I'm curious if anyone else has encountered this issue or if some idea sticks out that would help me try to track it down.

I'm using react-force-graph-3d v1.18.4 and have the issue in any web browser.

[diragb]

hey @hafen i've encountered this before. not an expert but i've been using this package for some time. i believe that the structure of the 3dgraph is different after every single re-render. (try reloading the graph and see if it changes shape.)

perhaps it has something to do with the selected forceEngine (?).. just my 2c.

[Bones5]

I'm seeing this behaviour in the production build. Same setup, CRA and react-force-graph-3d.

Runs really well in development using npm start but isn't performing well on the server and when I serve a production build locally I get a slower render and +50% memory usage.

I've removed any customisations I've made to the graph and just rendering the dataset I can still see a clear difference. This is then being amplified with any extra performance requirements

https://user-images.githubusercontent.com/4920132/226336789-80ce4aa6-6044-4927-8547-f07945652d08.mov

(dev build on the left, production on the right)