added cose-bilkent extension for correct node layout placement

package.json

@@ -33,6 +33,7 @@
   "license": "MIT",
   "dependencies": {
     "cytoscape": "^3.15.0",
+    "cytoscape-cose-bilkent": "^4.1.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   },

src/RootContainer.js

@@ -15,7 +15,16 @@ const RootContainer = ({ serviceUrl, entity }) => {
 
 	return (
 		<div className="rootContainer">
-			{data.length ? <GenePathwayNetwork data={data} /> : <h1>Loading...</h1>}
+			<div className="innerContainer">
+				<div className="graph">
+					<span className="chart-title">Pathway Network</span>
+					{data.length ? (
+						<GenePathwayNetwork data={data} />
+					) : (
+						<h1>Loading...</h1>
+					)}
+				</div>
+			</div>
 		</div>
 	);
 };

src/components/GenePathwayNetwork.js

@@ -1,7 +1,10 @@
 import React, { useEffect } from 'react';
 import cytoscape from 'cytoscape';
+import coseBilkent from 'cytoscape-cose-bilkent';
 import { getGraphData, createCytoscapeConfig } from '../utils';
 
+cytoscape.use(coseBilkent);
+
 function GenePathwayNetwork({ data }) {
 	useEffect(() => {
 		cytoscape(createCytoscapeConfig(getGraphData(data || [])));

src/style.less

@@ -13,10 +13,27 @@
 	.rootContainer {
 		border: 1px solid black;
     padding: 20px;
-
-    .cyContainer {
-      position: relative !important;
-      height: 500px !important;
+
+    .innerContainer {
+      display: flex;
+
+      .graph {
+				width: calc(100vw - 15rem);
+
+				.chart-title {
+					font-weight: 300;
+					font-size: 24px;
+					font-family: sans-serif;
+					display: flex;
+					justify-content: center;
+					margin: 12px;
+				}
+
+				.cyContainer {
+					position: relative !important;
+					height: 500px !important;
+				}
+      }
     }
 	}
 }

src/utils.js

@@ -59,7 +59,14 @@ function createCytoscapeConfig(elements) {
 					'line-color': '#ccc'
 				}
 			}
-		]
+		],
+		layout: {
+			name: 'cose-bilkent',
+			quality: 'draft',
+			fit: true,
+			padding: 20,
+			idealEdgeLength: 150
+		}
 	};
 }