From 41f139fdf1a3ed9a0141cccd8bb48c24dc2c01b8 Mon Sep 17 00:00:00 2001
From: BourqueCharles <charles.bourque96@gmail.com>
Date: Mon, 16 Aug 2021 16:01:11 -0400
Subject: [PATCH] Now using dagre for network diagram layout

---
 config/webpack.dev.js                         |  1 +
 config/webpack.prod.js                        |  7 ++++
 package-lock.json                             |  4 +--
 package.json                                  |  2 +-
 src/components/NetworkDiagram/dagreAdapter.js | 34 +++++++++++++++++++
 src/components/NetworkDiagram/index.js        |  9 ++++-
 src/layout/index.js                           |  2 +-
 7 files changed, 54 insertions(+), 5 deletions(-)
 create mode 100644 src/components/NetworkDiagram/dagreAdapter.js

diff --git a/config/webpack.dev.js b/config/webpack.dev.js
index 596bc59..b1b0417 100644
--- a/config/webpack.dev.js
+++ b/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()],
diff --git a/config/webpack.prod.js b/config/webpack.prod.js
index cb33b3b..c83396a 100644
--- a/config/webpack.prod.js
+++ b/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,
diff --git a/package-lock.json b/package-lock.json
index 0b9a476..2c7a807 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 654c6e0..2a331bc 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/NetworkDiagram/dagreAdapter.js b/src/components/NetworkDiagram/dagreAdapter.js
new file mode 100644
index 0000000..a63a8c5
--- /dev/null
+++ b/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;
diff --git a/src/components/NetworkDiagram/index.js b/src/components/NetworkDiagram/index.js
index e534925..cc31740 100644
--- a/src/components/NetworkDiagram/index.js
+++ b/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 = {
diff --git a/src/layout/index.js b/src/layout/index.js
index d98c94b..ce5e747 100644
--- a/src/layout/index.js
+++ b/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>
   );