feat(graph): better layout with cose-bilkent

4 files changed, 27 insertions, 2 deletions

diff --git a/app/class/Modelhome.php b/app/class/Modelhome.php
index f4b4a56..343a879 100644
--- a/app/class/Modelhome.php
+++ b/app/class/Modelhome.php
@@ -156,7 +156,7 @@ class Modelhome extends Modelpage
         }
         $datas['elements'] = array_merge($nodes, $edges);
 
-        $datas['layout']['name'] = 'random';
+        $datas['layout']['name'] = 'cose-bilkent';
         $datas['style'] = [
             [
                 'selector' => 'node',
diff --git a/package-lock.json b/package-lock.json
index 939fd83..5302d80 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1336,6 +1336,14 @@
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
       "dev": true
     },
+    "cose-base": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-1.0.1.tgz",
+      "integrity": "sha512-LErvsHUOzYseXGFKWGCAQBTePO1iYZ9JL+YZlmoyqZ7EDcBzrEMRSouOGszQl72J6VK0AVrJbnNCf3eciqy7SA==",
+      "requires": {
+        "layout-base": "^1.0.0"
+      }
+    },
     "cosmiconfig": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
@@ -1476,6 +1484,14 @@
         "lodash.debounce": "^4.0.8"
       }
     },
+    "cytoscape-cose-bilkent": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/cytoscape-cose-bilkent/-/cytoscape-cose-bilkent-4.1.0.tgz",
+      "integrity": "sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==",
+      "requires": {
+        "cose-base": "^1.0.0"
+      }
+    },
     "date-now": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
@@ -3566,6 +3582,11 @@
         "package-json": "^6.3.0"
       }
     },
+    "layout-base": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-1.0.2.tgz",
+      "integrity": "sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg=="
+    },
     "lcid": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
diff --git a/package.json b/package.json
index 5cec8c8..0448346 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,8 @@
   "license": "MIT",
   "dependencies": {
     "codemirror": "^5.49.0",
-    "cytoscape": "^3.14.1"
+    "cytoscape": "^3.14.1",
+    "cytoscape-cose-bilkent": "^4.1.0"
   },
   "devDependencies": {
     "@sentry/browser": "^5.9.0",
diff --git a/src/map.js b/src/map.js
index 5561250..5da0e57 100644
--- a/src/map.js
+++ b/src/map.js
@@ -1,4 +1,7 @@
 import cytoscape from 'cytoscape';
+import coseBilkent from 'cytoscape-cose-bilkent';
+
+cytoscape.use(coseBilkent);
 
 let options = {
     container: document.getElementById('graph'),