Improve Graph layout

Some minor styling.

components/Graph.js

@@ -1,78 +1,63 @@
 import React, {useEffect, useRef, useState} from 'react';
+// import cytoscape from 'cytoscape';
+// import cola from 'cytoscape-cola';
+
+
 import CytoscapeComponent from "react-cytoscapejs";
 
+
 const layout = {
-    name: "breadthfirst",
+    name: 'circle',
-    fit: true,
+    fit: true, // whether to fit the viewport to the graph
-    circle: true,
+    padding: 32, // the padding on fit
-    directed: true,
+    boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
-    padding: 50,
+    avoidOverlap: true, // prevents node overlap, may overflow boundingBox and radius if not enough space
-    spacingFactor: 1.5,
+    nodeDimensionsIncludeLabels: false, // Excludes the label when calculating node bounding boxes for the layout algorithm
-    animate: true,
+    spacingFactor: 0.9, // Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up
-    // animationDuration: 300,
+    radius: 150, // the radius of the circle
-    avoidOverlap: false,
+    startAngle: -2 / 4 * Math.PI, // where nodes start in radians
-    nodeDimensionsIncludeLabels: true
+    //sweep: undefined, // how many radians should be between the first and last node (defaults to full circle)
+    clockwise: true, // whether the layout should go clockwise (true) or counterclockwise/anticlockwise (false)
+    sort: undefined, // a sorting function to order the nodes; e.g. function(a, b){ return a.data('weight') - b.data('weight') }
+    animate: false, // whether to transition the node positions
+    animationDuration: 500, // duration of animation in ms if enabled
+    animationEasing: undefined, // easing of animation if enabled
+    //animateFilter: function ( node, i ){ return true; }, // a function that determines whether the node should be animated.  All nodes animated by default on animate enabled.  Non-animated nodes are positioned immediately when the layout starts
+    ready: undefined, // callback on layoutready
+    stop: undefined, // callback on layoutstop
+    transform: function (node, position) {
+        return position;
+    } // transform a given node position. Useful for changing flow direction in discrete layouts
 };
 
-const styleSheet = [
+const styleSheet = [{
-    {
     selector: "node",
     style: {
-            backgroundColor: "#4a56a6",
+        "background-color": "#666",
-            width: 10,
+        "font-size": "10px",
-            height: 10,
+        "width": "20px",
-            label: "data(label)",
+        "height": "20px"
-
+        //"label": el => el.data("id") === current ? "" : el.data('title') ? el.data("title").slice(0,16) : el.data("id")
-            // "width": "mapData(score, 0, 0.006769776522008331, 20, 60)",
-            // "height": "mapData(score, 0, 0.006769776522008331, 20, 60)",
-            // "text-valign": "center",
-            // "text-halign": "center",
-            "overlay-padding": "6px",
-            "z-index": "10",
-            //text props
-            "text-outline-color": "#4a56a6",
-            "text-outline-width": "1px",
-            color: "red",
-            fontSize: 20
     }
-    },
+}, {
+    selector: "label",
+    style: {"font-size": "12px"},
+},
     {
-        selector: "node:selected",
+        selector: 'edge',
         style: {
-            "border-width": "6px",
+            'width': 2,
-            "border-color": "#AAD8FF",
+            "height": 200,
-            "border-opacity": "0.5",
+            'line-color': '#9a9a9a',
-            "background-color": "#77828C",
+            'target-arrow-color': '#ccc',
-            width: 50,
+            // 'target-arrow-shape': 'triangle',
-            height: 50,
+            'curve-style': 'bezier'
-            //text props
-            "text-outline-color": "#77828C",
-            "text-outline-width": 1
         }
-    },
+    }];
-    {
-        selector: "node[type='device']",
-        style: {
-            shape: "square"
-        }
-    },
-    {
-        selector: "edge",
-        style: {
-            width: 3,
-            // "line-color": "#6774cb",
-            "line-color": "#AAD8FF",
-            "target-arrow-color": "#6774cb",
-            "target-arrow-shape": "triangle",
-            "curve-style": "bezier"
-        }
-    }
-];
-
-
 
 function Graph({graph}) {
-    const [width, setWith] = useState("100%");
+
+    const [width, setWith] = useState("400px");
     const [height, setHeight] = useState("400px");
     const [graphData, setGraphData] = useState({
         nodes: graph.nodes,
@@ -94,7 +79,7 @@ function Graph({graph}) {
                     <CytoscapeComponent
                         elements={CytoscapeComponent.normalizeElements(graphData)}
                         // pan={{ x: 200, y: 200 }}
-                        style={{ width: width, height: height }}
+                        style={{width: width, height: height}}
                         zoomingEnabled={true}
                         maxZoom={2}
                         minZoom={0.5}