From fed481d2a9d849d41f1bb516c27cd72a293c5b13 Mon Sep 17 00:00:00 2001
From: Tuan Cao <caomanhtuanbsb@gmail.com>
Date: Fri, 15 Apr 2022 15:07:36 +0700
Subject: [PATCH] Improve Graph layout Some minor styling.

---
 components/Graph.js | 119 +++++++++++++++++++-------------------------
 1 file changed, 52 insertions(+), 67 deletions(-)

diff --git a/components/Graph.js b/components/Graph.js
index 277ac59..978dc9b 100644
--- a/components/Graph.js
+++ b/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",
-    fit: true,
-    circle: true,
-    directed: true,
-    padding: 50,
-    spacingFactor: 1.5,
-    animate: true,
-    // animationDuration: 300,
-    avoidOverlap: false,
-    nodeDimensionsIncludeLabels: true
+    name: 'circle',
+    fit: true, // whether to fit the viewport to the graph
+    padding: 32, // the padding on fit
+    boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
+    avoidOverlap: true, // prevents node overlap, may overflow boundingBox and radius if not enough space
+    nodeDimensionsIncludeLabels: false, // Excludes the label when calculating node bounding boxes for the layout algorithm
+    spacingFactor: 0.9, // Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up
+    radius: 150, // the radius of the circle
+    startAngle: -2 / 4 * Math.PI, // where nodes start in radians
+    //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 = [
-    {
-        selector: "node",
-        style: {
-            backgroundColor: "#4a56a6",
-            width: 10,
-            height: 10,
-            label: "data(label)",
-
-            // "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: "node:selected",
-        style: {
-            "border-width": "6px",
-            "border-color": "#AAD8FF",
-            "border-opacity": "0.5",
-            "background-color": "#77828C",
-            width: 50,
-            height: 50,
-            //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"
-        }
+const styleSheet = [{
+    selector: "node",
+    style: {
+        "background-color": "#666",
+        "font-size": "10px",
+        "width": "20px",
+        "height": "20px"
+        //"label": el => el.data("id") === current ? "" : el.data('title') ? el.data("title").slice(0,16) : el.data("id")
     }
-];
-
-
+}, {
+    selector: "label",
+    style: {"font-size": "12px"},
+},
+    {
+        selector: 'edge',
+        style: {
+            'width': 2,
+            "height": 200,
+            'line-color': '#9a9a9a',
+            'target-arrow-color': '#ccc',
+            // '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}