Now using dagre for network diagram layout

config/webpack.dev.js

@@ -47,6 +47,7 @@ module.exports = merge(common, {
       react: path.resolve(__dirname, '../', 'node_modules', 'react'),
       'react-router-dom': path.resolve('./node_modules/react-router-dom'),
       'ucentral-libs': path.resolve(__dirname, '../', 'node_modules', 'ucentral-libs', 'src'),
+      graphlib: path.resolve(__dirname, '../', 'node_modules', 'graphlib'),
     },
   },
   plugins: [new ReactRefreshWebpackPlugin()],

config/webpack.prod.js

@@ -5,6 +5,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
+const path = require('path');
 const paths = require('./paths');
 const common = require('./webpack.common');
 
@@ -71,6 +72,12 @@ module.exports = merge(common, {
       },
     },
   },
+  resolve: {
+    modules: [],
+    alias: {
+      graphlib: path.resolve(__dirname, '../', 'node_modules', 'graphlib'),
+    },
+  },
   performance: {
     hints: false,
     maxEntrypointSize: 512000,

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ucentral-client",
-  "version": "2.0.27",
+  "version": "2.0.28",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ucentral-client",
-      "version": "2.0.27",
+      "version": "2.0.28",
       "dependencies": {
         "@coreui/coreui": "^3.4.0",
         "@coreui/icons": "^2.0.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucentral-client",
-  "version": "2.0.27",
+  "version": "2.0.28",
   "dependencies": {
     "@coreui/coreui": "^3.4.0",
     "@coreui/icons": "^2.0.1",

src/components/NetworkDiagram/dagreAdapter.js

@@ -0,0 +1,34 @@
+import dagre from 'dagre';
+import { isNode } from 'react-flow-renderer';
+
+const setupDag = (elements, nodeWidth, nodeHeight) => {
+  const dagreGraph = new dagre.graphlib.Graph();
+  dagreGraph.setDefaultEdgeLabel(() => ({}));
+  dagreGraph.setGraph({ rankdir: 'TB' });
+
+  elements.forEach((el) => {
+    if (isNode(el)) {
+      dagreGraph.setNode(el.id, { width: nodeWidth, height: nodeHeight });
+    } else {
+      dagreGraph.setEdge(el.source, el.target);
+    }
+  });
+
+  dagre.layout(dagreGraph);
+
+  return elements.map((el) => {
+    const newElement = el;
+    if (isNode(newElement)) {
+      const nodeWithPosition = dagreGraph.node(newElement.id);
+      newElement.targetPosition = 'top';
+      newElement.sourcePosition = 'bottom';
+      newElement.position = {
+        x: nodeWithPosition.x - nodeWidth / 2 + Math.random() / 1000,
+        y: nodeWithPosition.y - nodeHeight / 2,
+      };
+    }
+    return newElement;
+  });
+};
+
+export default setupDag;

src/components/NetworkDiagram/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { CRow, CCol } from '@coreui/react';
 import { NetworkDiagram as Graph } from 'ucentral-libs';
 import { useTranslation } from 'react-i18next';
+import createLayoutedElements from './dagreAdapter';
 
 const associationStyle = {
   background: '#3399ff',
@@ -136,7 +137,13 @@ const NetworkDiagram = ({ radios, associations }) => {
     }
   }, [radios, associations]);
 
-  return <Graph loading={loading} elements={elements} setElements={setElements} />;
+  return (
+    <Graph
+      loading={loading}
+      elements={createLayoutedElements(elements, 220, 80)}
+      setElements={setElements}
+    />
+  );
 };
 
 NetworkDiagram.propTypes = {

src/layout/index.js

@@ -89,7 +89,7 @@ const TheLayout = () => {
             <PageContainer t={t} routes={routes} redirectTo="/devices" />
           </ToastProvider>
         </div>
-        <Footer t={t} version="2.0.26" />
+        <Footer t={t} version="2.0.28" />
       </div>
     </div>
   );