In project with nextJS and diagram component dynamicly imported and ssr:false. Huge performance issue

[dincho-kostadinov]

This is my diagram component

/ create an instance of the engine with all the defaults
const engine = createEngine();
engine.getNodeFactories().registerFactory(new NodeFactory());

// --- node source
const node1 = new NodeModel({
  color: "LemonChiffon",
  title: "OSIPI",
  content: "Source",
  source: true
});
node1.setPosition(100, 100);
// --- node data
const node2 = new NodeModel({
  color: "LightCyan",
  title: "some_source_data",
  content: "Data"
});
node2.setPosition(350, 100);
const node3 = new NodeModel({
  color: "LightCyan",
  title: "another_source_data",
  content: "Data"
});
node3.setPosition(350, 200);
const node4 = new NodeModel({
  color: "LightCyan",
  title: "uploaded_data",
  content: "Data",
  source: true
});
node4.setPosition(350, 300);
// --- node function
const node5 = new NodeModel({
  color: "Lavender",
  title: "some_function",
  inputs: ["Dataset", "Labels"],
  outputs: ["Model", "Error"]
});
node5.setPosition(650, 100);
// --- node outputs
const node6 = new NodeModel({
  color: "LightCyan",
  title: "generated_data",
  content: "Data"
});
node6.setPosition(900, 100);
const node7 = new NodeModel({
  color: "#E0FFE0",
  title: "generated_value",
  content: "= 0.8638"
});
node7.setPosition(900, 200);

// links
//const link = n1p2.link<DefaultLinkModel>(n2p1);
const link1 = new DefaultLinkModel();
link1.setSourcePort(node1.getPort("Out"));
link1.setTargetPort(node2.getPort("In"));
const link2 = new DefaultLinkModel();
link2.setSourcePort(node1.getPort("Out"));
link2.setTargetPort(node3.getPort("In"));
const link3 = new DefaultLinkModel();
link3.setSourcePort(node2.getPort("Out"));
link3.setTargetPort(node5.getPort("Dataset"));
const link4 = new DefaultLinkModel();
link4.setSourcePort(node4.getPort("Out"));
link4.setTargetPort(node5.getPort("Labels"));
const link5 = new DefaultLinkModel();
link5.setSourcePort(node5.getPort("Model"));
link5.setTargetPort(node6.getPort("In"));
const link6 = new DefaultLinkModel();
link6.setSourcePort(node5.getPort("Error"));
link6.setTargetPort(node7.getPort("In"));

// model
const model = new DiagramModel();
model.addAll(
  node1,
  node2,
  node3,
  node4,
  node5,
  node6,
  node7,
  link1,
  link2,
  link3,
  link4,
  link5,
  link6
);
engine.setModel(model);
  

  return (
    <Grid container position={'relative'} justifyContent={'center'} flexWrap={'wrap'}>
      <Grid item>a</Grid>
      {engine && <CanvasWidget className={styles.CanvasWidget} engine={engine} />}
      <Grid item>b</Grid>
    </Grid>
  );
};

And this is how I import the component

const DynamicProcessDiagram = dynamic(() => import("components/ProcessManagerDiagram/ProcessDiagram"), { ssr: false });

const Diagram: NextPage = () => {
	return (
		<Layout>
			<ProcessManagerProvider>

				<Suspense fallback={`Loading...`}>
					<h1>Diagram</h1>
					<DynamicProcessDiagram />
				</Suspense>

			</ProcessManagerProvider>
		</Layout>
	);
};

The diagram and the nodes moves work very slow. Any idea?

[smilhas]

Hey @dincho-kostadinov, have you managed to make react-diagrams work with nextjs? I am looking for an alternative to this library but I havent found nothing that has as many features as this one has.

[dincho-kostadinov]

No, Doesn't work with nextJs

На сб, 29.10.2022 г., 23:18 Sebastian Milhas @.***> написа:

Hey @dincho-kostadinov https://github.com/dincho-kostadinov, have you managed to make react-diagrams work with nextjs? I am looking for an alternative to this library but I havent found nothing that has as many features as this one has.

— Reply to this email directly, view it on GitHub https://github.com/projectstorm/react-diagrams/issues/953#issuecomment-1295961730, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKDDBSYN3P3FLPM4WANVOOTWFWBCXANCNFSM52JTMIWQ . You are receiving this because you were mentioned.Message ID: @.***>

[actraiser]

Has anyone managed to overcome the performance drop when using react-diagrams in a NextJS app? I use NextJS 13 with the experimental app directory enabled and dynamically importing a example widget with 10 nodes into my page. Dragging nodes is stuttering, so render updates are very slow. Animations work fine in a Create-React-App.

What is the underlying issue here?

Greets -act