#292 Improve Population Diagram styling

frontend/src/components/ProofingTab/GraphDiagram/GraphDiagram.tsx

@@ -1,10 +1,9 @@
-import React, {useEffect, useRef, useState} from "react";
+import React, {useEffect, useLayoutEffect, useRef, useState} from "react";
 import InfoMenu from "./InfoMenu";
 import NavigationMenu from "./NavigationMenu";
 import createEngine, {
-  BasePositionModelOptions,
-  DiagramModel,
-} from '@projectstorm/react-diagrams';
+    BasePositionModelOptions, DagreEngine,
+    DiagramModel, PathFindingLinkFactory, DiagramEngine } from '@projectstorm/react-diagrams';
 import {CanvasWidget} from '@projectstorm/react-canvas-core';
 import {CustomNodeFactory} from "./Factories/CustomNodeFactory";
 import {
@@ -39,6 +38,34 @@ interface GraphDiagramProps {
 }
 
 
+function genDagreEngine() {
+    return new DagreEngine({
+        graph: {
+            rankdir: 'TB',
+            ranksep: 300,
+            nodesep: 250,
+            marginx: 50,
+            marginy: 50
+        },
+    });
+}
+function reroute(engine: DiagramEngine) {
+    engine.getLinkFactories().getFactory<PathFindingLinkFactory>(PathFindingLinkFactory.NAME).calculateRoutingMatrix();
+}
+function autoDistribute(engine: DiagramEngine) {
+    const model = engine.getModel();
+
+    if (!model || model.getNodes().length === 0) {
+        return;
+    }
+
+    const dagreEngine = genDagreEngine();
+    dagreEngine.redistribute(model);
+
+    reroute(engine);
+    engine.repaintCanvas();
+}
+
 const GraphDiagram: React.FC<GraphDiagramProps> = ({
                                                      origins,
                                                      vias,
@@ -105,8 +132,20 @@ const GraphDiagram: React.FC<GraphDiagramProps> = ({
       setModelFitted(true);
     }
   }, [modelUpdated, modelFitted, engine]);
-
-  return (
+
+    useLayoutEffect(() => {
+        autoDistribute(engine);
+    }, [engine, modelUpdated]);
+
+    useEffect(() => {
+        const currentContainer = containerRef.current;
+
+        if (modelUpdated && currentContainer) {
+            autoDistribute(engine);
+        }
+    }, [engine, modelUpdated, destinations, vias, origins]);
+
+    return (
     modelUpdated ? (
         <div ref={containerRef} className={"graphContainer"}>
           <NavigationMenu engine={engine} statementId={statementId || "-1"}/>