From 16d3ea9d535916c02fd587d6a908162ade18a4c1 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Mon, 29 May 2023 10:38:38 +0200
Subject: [PATCH] Added dependency graph viewer

---
 .../character/CharacterSheetToolbar.vue       |  16 +
 .../dependencyGraph/DependencyGraphDialog.vue | 191 +++++++++++
 .../ui/dialogStack/DialogComponentIndex.js    |   8 +-
 app/package-lock.json                         | 317 +++++++++++++++++-
 app/package.json                              |  13 +-
 5 files changed, 535 insertions(+), 10 deletions(-)
 create mode 100644 app/imports/client/ui/creature/dependencyGraph/DependencyGraphDialog.vue

diff --git a/app/imports/client/ui/creature/character/CharacterSheetToolbar.vue b/app/imports/client/ui/creature/character/CharacterSheetToolbar.vue
index 6878df30..c7ba4918 100644
--- a/app/imports/client/ui/creature/character/CharacterSheetToolbar.vue
+++ b/app/imports/client/ui/creature/character/CharacterSheetToolbar.vue
@@ -55,6 +55,13 @@
                     </v-icon> Delete
                   </v-list-item-title>
                 </v-list-item>
+                <v-list-item @click="showDependencyGraph">
+                  <v-list-item-title>
+                    <v-icon left>
+                      mdi-graph
+                    </v-icon> Dependency Graph
+                  </v-list-item-title>
+                </v-list-item>
                 <v-list-item @click="showCharacterForm">
                   <v-list-item-title>
                     <v-icon left>
@@ -237,6 +244,15 @@ export default {
         }
       });
     },
+    showDependencyGraph() {
+      this.$store.commit('pushDialogStack', {
+        component: 'dependency-graph-dialog',
+        elementId: 'creature-menu',
+        data: {
+          creatureId: this.creatureId,
+        },
+      });
+    },
     unshareWithMe() {
       updateUserSharePermissions.call({
         docRef: {
diff --git a/app/imports/client/ui/creature/dependencyGraph/DependencyGraphDialog.vue b/app/imports/client/ui/creature/dependencyGraph/DependencyGraphDialog.vue
new file mode 100644
index 00000000..b97bac27
--- /dev/null
+++ b/app/imports/client/ui/creature/dependencyGraph/DependencyGraphDialog.vue
@@ -0,0 +1,191 @@
+<template lang="html">
+  <dialog-base class="dependency-graph">
+    <div slot="toolbar">
+      Dependency Graph
+    </div>
+    <div
+      id="dependency-graph-container"
+      slot="unwrapped-content"
+      ref="container"
+      class="graph-container"
+    />
+  </dialog-base>
+</template>
+
+<script lang="js">
+import buildCreatureComputation from '/imports/api/engine/computation/buildCreatureComputation.js';
+import DialogBase from '/imports/client/ui/dialogStack/DialogBase.vue';
+import computeCreatureComputation from '/imports/api/engine/computation/computeCreatureComputation.js';
+import cytoscape from 'cytoscape';
+import klay from 'cytoscape-klay';
+import PROPERTIES from '/imports/constants/PROPERTIES.js';
+
+cytoscape.use(klay);
+
+function getNodeName(node) {
+  let model = node.data;
+  if (!model) return node.id;
+  if (model.name) return model.name;
+  if (model.type === '_calculation') {
+    return model._key;
+  }
+  let prop = PROPERTIES[model.type]
+  if (model.type === 'classLevel' && model.name && model.level) {
+    return model.name + ' ' + model.level
+  }
+  return prop?.name || prop?.type || node.id;
+}
+
+function getLoopNodes(computation) {
+  const loopNodes = [];
+  if (!computation.errors) return loopNodes;
+  computation.errors.forEach(err => {
+    if (err.type !== 'dependencyLoop') return;
+    err.details?.nodes?.forEach(nodeId => loopNodes.push(nodeId));
+  });
+  return loopNodes;
+}
+
+export default {
+  components: {
+    DialogBase,
+  },
+  props: {
+    creatureId: {
+      type: String,
+      required: true,
+    }
+  },
+  mounted() {
+    // Convert ngraph to cytoscape
+    // Convert Nodes
+    const nodes = [];
+    console.log(this.computation);
+    const loopNodes = getLoopNodes(this.computation);
+    this.computation.dependencyGraph.forEachNode(function (node) {
+      nodes.push({
+        data: {
+          id: node.id,
+          label: getNodeName(node) || node.id,
+          variable: !node.data,
+          inLoop: loopNodes.includes(node.id),
+        },
+      });
+    });
+    // Convert edges
+    const edges = [];
+    this.computation.dependencyGraph.forEachLink(function (link) {
+      edges.push({
+        data: {
+          target: link.fromId,
+          source: link.toId,
+          linkType: link.data,
+          inLoop: loopNodes.includes(link.fromId) && loopNodes.includes(link.toId)
+        },
+        scratch: {
+        },
+      })
+      //{ data: { source: 'n0', target: 'n1' } }
+    });
+    this.cytoscape = cytoscape({
+      container: this.$refs.container,
+
+      boxSelectionEnabled: false,
+      autounselectify: true,
+
+      layout: {
+        name: 'klay',
+        nodeDimensionsIncludeLabels: false,
+        klay: {
+          // direction: 'RIGHT',
+          edgeRouting: 'ORTHOGONAL', //'ORTHOGONAL',
+          feedbackEdges: true,
+          compactComponents: true,
+          layoutHierarchy: true,
+          mergeEdges: true,
+          // mergeHierarchyCrossingEdges: true,
+          nodePlacement: 'LINEAR_SEGMENTS', //default 'BRANDES_KOEPF'
+          spacing: 20,//20,
+          edgeSpacingFactor: 2.0, //0.5,
+          thoroughness: 12,//7,
+          separateConnectedComponents: false,
+        },
+      },
+
+      style: [
+        {
+          selector: 'node',
+          style: {
+            'content': 'data(label)',
+            //'text-opacity': 0.5,
+            'text-valign': 'bottom',
+            'text-halign': 'center',
+            'background-color': '#11479e',
+            //'text-outline-color': '#888',
+            //'text-outline-width': 3,
+            'text-background-opacity': 1,
+            'text-background-color': '#888',
+            'text-background-shape': 'roundrectangle',
+            'shape': 'round-rectangle'
+          }
+        }, {
+          selector: ele => ele.data().variable,
+          style: {
+            'background-color': '#B71C1C',
+          }
+        }, {
+          selector: 'edge',
+          style: {
+            'width': 4,
+            'target-arrow-shape': 'triangle-backcurve',
+            'line-color': '#9dbaea',
+            'target-arrow-color': '#9dbaea',
+            'curve-style': 'unbundled-bezier',
+            'label': 'data(linkType)',
+            'text-rotation': 'autorotate',
+          }
+        }, {
+          selector: ele => ele.data().inLoop,
+          style: {
+            'background-color': '#FF6D00',
+            'line-color': '#FF6D00',
+            'target-arrow-color': '#FF6D00',
+          }
+        }, 
+      ],
+
+      elements: {
+        nodes,
+        edges,
+      },
+    });
+    this.cytoscape.on('tap', 'node', function(evt){
+      var node = evt.target;
+      console.log( 'tapped node', node.data() );
+    });
+    this.cytoscape.on('tap', 'edge', function(evt){
+      var edge = evt.target;
+      console.log( 'tapped edge', edge );
+    });
+  },
+  meteor: {
+    computation() {
+      const computation = buildCreatureComputation(this.creatureId);
+      computeCreatureComputation(computation);
+      return computation;
+    },
+  },
+}
+</script>
+
+<style lang="css">
+  .graph-container {
+    width: 100%;
+    height: 100%;
+  }
+
+  .graph-container svg {
+    width: 100%;
+    height: 100%;
+  }
+</style>
\ No newline at end of file
diff --git a/app/imports/client/ui/dialogStack/DialogComponentIndex.js b/app/imports/client/ui/dialogStack/DialogComponentIndex.js
index 87530412..afad9720 100644
--- a/app/imports/client/ui/dialogStack/DialogComponentIndex.js
+++ b/app/imports/client/ui/dialogStack/DialogComponentIndex.js
@@ -8,9 +8,9 @@ import CreaturePropertyDialog from '/imports/client/ui/creature/creatureProperti
 import CreaturePropertyFromLibraryDialog from '/imports/client/ui/creature/creatureProperties/CreaturePropertyFromLibraryDialog.vue';
 import CreatureRootDialog from '/imports/client/ui/creature/character/CreatureRootDialog.vue';
 import DeleteConfirmationDialog from '/imports/client/ui/dialogStack/DeleteConfirmationDialog.vue';
-import ExperienceInsertDialog from  '/imports/client/ui/creature/experiences/ExperienceInsertDialog.vue';
-import ExperienceListDialog from  '/imports/client/ui/creature/experiences/ExperienceListDialog.vue';
-import HelpDialog from  '/imports/client/ui/dialogStack/HelpDialog.vue';
+import ExperienceInsertDialog from '/imports/client/ui/creature/experiences/ExperienceInsertDialog.vue';
+import ExperienceListDialog from '/imports/client/ui/creature/experiences/ExperienceListDialog.vue';
+import HelpDialog from '/imports/client/ui/dialogStack/HelpDialog.vue';
 import LevelUpDialog from '/imports/client/ui/creature/slots/LevelUpDialog.vue';
 import SelectLibraryNodeDialog from '/imports/client/ui/library/SelectLibraryNodeDialog.vue';
 import SlotFillDialog from '/imports/client/ui/creature/slots/SlotFillDialog.vue';
@@ -20,6 +20,7 @@ import TransferOwnershipDialog from '/imports/client/ui/sharing/TransferOwnershi
 // Lazily load less common dialogs
 const ArchiveDialog = () => import('/imports/client/ui/creature/archive/ArchiveDialog.vue');
 const DeleteUserAccountDialog = () => import('/imports/client/ui/user/DeleteUserAccountDialog.vue');
+const DependencyGraphDialog = () => import('/imports/client/ui/creature/dependencyGraph/DependencyGraphDialog.vue');
 const InviteDialog = () => import('/imports/client/ui/user/InviteDialog.vue');
 const LibraryCollectionCreationDialog = () => import('/imports/client/ui/library/LibraryCollectionCreationDialog.vue');
 const LibraryCollectionEditDialog = () => import('/imports/client/ui/library/LibraryCollectionEditDialog.vue');
@@ -44,6 +45,7 @@ export default {
   CreatureRootDialog,
   DeleteConfirmationDialog,
   DeleteUserAccountDialog,
+  DependencyGraphDialog,
   ExperienceInsertDialog,
   ExperienceListDialog,
   HelpDialog,
diff --git a/app/package-lock.json b/app/package-lock.json
index 2432ac05..dee36e3a 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -49,6 +49,12 @@
         }
       }
     },
+    "@babel/parser": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.3.tgz",
+      "integrity": "sha512-vrukxyW/ep8UD1UDzOYpTKQ6abgjFoeG6L+4ar9+c5TN9QnlqiOi6QK7LSR5ewm/ERyGkT/Ai6VboNrxhbr9Uw==",
+      "dev": true
+    },
     "@babel/runtime": {
       "version": "7.21.5",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz",
@@ -387,6 +393,64 @@
         }
       }
     },
+    "@vue/compiler-core": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
+      "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
+      "dev": true,
+      "requires": {
+        "@babel/parser": "^7.21.3",
+        "@vue/shared": "3.3.4",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "@vue/compiler-dom": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
+      "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
+      "dev": true,
+      "requires": {
+        "@vue/compiler-core": "3.3.4",
+        "@vue/shared": "3.3.4"
+      }
+    },
+    "@vue/reactivity": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
+      "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
+      "dev": true,
+      "requires": {
+        "@vue/shared": "3.3.4"
+      }
+    },
+    "@vue/runtime-core": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
+      "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
+      "dev": true,
+      "requires": {
+        "@vue/reactivity": "3.3.4",
+        "@vue/shared": "3.3.4"
+      }
+    },
+    "@vue/runtime-dom": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
+      "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
+      "dev": true,
+      "requires": {
+        "@vue/runtime-core": "3.3.4",
+        "@vue/shared": "3.3.4",
+        "csstype": "^3.1.1"
+      }
+    },
+    "@vue/shared": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
+      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==",
+      "dev": true
+    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -412,6 +476,11 @@
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
       "dev": true
     },
+    "add-event-listener": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/add-event-listener/-/add-event-listener-0.0.1.tgz",
+      "integrity": "sha512-hjRmkeDqFUWEFcDHP/Lp0Pa4MhIJk/oQX8B7lFiNrjBKHjf0q+ivCJrucY8d8UI5d0QkZgV2jGdAGXxEZcm3nA=="
+    },
     "agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -862,6 +931,46 @@
       "resolved": "https://registry.npmjs.org/css-box-shadow/-/css-box-shadow-1.0.0-3.tgz",
       "integrity": "sha512-9jaqR6e7Ohds+aWwmhe6wILJ99xYQbfmK9QQB9CcMjDbTxPZjwEmUQpU91OG05Xgm8BahT5fW+svbsQGjS/zPg=="
     },
+    "csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
+      "dev": true
+    },
+    "cytoscape": {
+      "version": "3.25.0",
+      "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.25.0.tgz",
+      "integrity": "sha512-7MW3Iz57mCUo6JQCho6CmPBCbTlJr7LzyEtIkutG255HLVd4XuBg2I9BkTZLI/e4HoaOB/BiAzXuQybQ95+r9Q==",
+      "requires": {
+        "heap": "^0.2.6",
+        "lodash": "^4.17.21"
+      }
+    },
+    "cytoscape-dagre": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/cytoscape-dagre/-/cytoscape-dagre-2.5.0.tgz",
+      "integrity": "sha512-VG2Knemmshop4kh5fpLO27rYcyUaaDkRw+6PiX4bstpB+QFt0p2oauMrsjVbUamGWQ6YNavh7x2em2uZlzV44g==",
+      "requires": {
+        "dagre": "^0.8.5"
+      }
+    },
+    "cytoscape-klay": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/cytoscape-klay/-/cytoscape-klay-3.1.4.tgz",
+      "integrity": "sha512-VwPj0VR25GPfy6qXVQRi/MYlZM/zkdvRhHlgqbM//lSvstgM6fhp3ik/uM8Wr8nlhskfqz/M1fIDmR6UckbS2A==",
+      "requires": {
+        "klayjs": "^0.4.1"
+      }
+    },
+    "dagre": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz",
+      "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
+      "requires": {
+        "graphlib": "^2.1.8",
+        "lodash": "^4.17.15"
+      }
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -1219,6 +1328,12 @@
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "dev": true
     },
+    "estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true
+    },
     "esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -1414,6 +1529,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "gintersect": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/gintersect/-/gintersect-0.1.0.tgz",
+      "integrity": "sha512-jps8Ckj6u8yLxOYzBVJbPqvRdeHOINQgRtufaLHkunwNQcSEdZU0ejPBapSimXJEQ9mdQW4hsEUN7DfJEcTvQQ=="
+    },
     "github-from-package": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
@@ -1478,6 +1598,14 @@
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
       "dev": true
     },
+    "graphlib": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz",
+      "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==",
+      "requires": {
+        "lodash": "^4.17.15"
+      }
+    },
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
@@ -1537,6 +1665,11 @@
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ=="
     },
+    "heap": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/heap/-/heap-0.2.7.tgz",
+      "integrity": "sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg=="
+    },
     "http-signature": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
@@ -1750,6 +1883,11 @@
         "verror": "1.10.0"
       }
     },
+    "klayjs": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/klayjs/-/klayjs-0.4.1.tgz",
+      "integrity": "sha512-WUNxuO7O79TEkxCj6OIaK5TJBkaWaR/IKNTakgV9PwDn+mrr63MLHed34AcE2yTaDntgO6l0zGFIzhcoTeroTA=="
+    },
     "levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -2748,11 +2886,89 @@
         "randexp": "0.4.6"
       }
     },
+    "ngraph.centrality": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/ngraph.centrality/-/ngraph.centrality-0.3.0.tgz",
+      "integrity": "sha512-Qmu9dDHJAx+GAW2AMqmhaub1rINS+fHZGZJ3zPI36ENAXmVNQ/Jkq79br1sg6NUHz/pRBT9MXMuwDyYKmMt8Mw=="
+    },
     "ngraph.events": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ngraph.events/-/ngraph.events-1.2.1.tgz",
       "integrity": "sha512-D4C+nXH/RFxioGXQdHu8ELDtC6EaCiNsZtih0IvyGN81OZSUby4jXoJ5+RNWasfsd0FnKxxpAROyUMzw64QNsw=="
     },
+    "ngraph.expose": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/ngraph.expose/-/ngraph.expose-0.0.0.tgz",
+      "integrity": "sha512-Hr88MuhgoSLVGf2aaaXcKl22Rn95duWsjRcoeJMP9PtFmYHGFw/3ctDqBf5phnIyktm0P/Quxs5EGg6xgJcZAQ=="
+    },
+    "ngraph.forcelayout": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/ngraph.forcelayout/-/ngraph.forcelayout-0.5.0.tgz",
+      "integrity": "sha512-qOd1S9unFLw313+l0M/Dk1MePLDUSl4h9RyOtAbo0CyeefnN4PICiRz0LOewR5WuFmQD0/RmZLpjTKu0H7LTKQ==",
+      "requires": {
+        "ngraph.events": "0.0.4",
+        "ngraph.physics.simulator": "^0.3.0"
+      },
+      "dependencies": {
+        "ngraph.events": {
+          "version": "0.0.4",
+          "resolved": "https://registry.npmjs.org/ngraph.events/-/ngraph.events-0.0.4.tgz",
+          "integrity": "sha512-SY7MdNQoy5KyaVxg03PYCnGF6J7l4p8lEdmYm/5oIqFAmLhg0BmzZzlRqobJ0nEPT6xZlonUQbvCcXtarPZNrg=="
+        }
+      }
+    },
+    "ngraph.fromjson": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/ngraph.fromjson/-/ngraph.fromjson-0.1.9.tgz",
+      "integrity": "sha512-f3GLjbUq239wx4s5A0fDptj9dcNeaEIJU3gm74hWvYK7onD7sFtedP7jVHZA7UJ2FwkKgEhzbPeltv92ycuKZQ==",
+      "requires": {
+        "ngraph.graph": "0.0.14"
+      },
+      "dependencies": {
+        "ngraph.events": {
+          "version": "0.0.3",
+          "resolved": "https://registry.npmjs.org/ngraph.events/-/ngraph.events-0.0.3.tgz",
+          "integrity": "sha512-UrewofHOFk/05otBm9GD4DA3PTEY/yaElhCclmGC4IcmAYaSDRrC3lENQxJ00AzeBnz1GY2xH7Ct7AfIdhsdWA=="
+        },
+        "ngraph.graph": {
+          "version": "0.0.14",
+          "resolved": "https://registry.npmjs.org/ngraph.graph/-/ngraph.graph-0.0.14.tgz",
+          "integrity": "sha512-ERTLng4KrsGbR7iLZFvg5H+zJ7V+SY8RDqZKYCnOZib5W8M5LCvcil9/8eiJcTRUIPPXW3j8hqPCdLnBvgsn/A==",
+          "requires": {
+            "ngraph.events": "0.0.3"
+          }
+        }
+      }
+    },
+    "ngraph.generators": {
+      "version": "0.0.19",
+      "resolved": "https://registry.npmjs.org/ngraph.generators/-/ngraph.generators-0.0.19.tgz",
+      "integrity": "sha512-P3XqB1sH4zrzM6bMGTtuT/6K76Rnhf1qE8Zu7PkAvhQVCQzdLYiL2/8DwhcPLsetRJHNJv0uwpW9TpntBAqKrw==",
+      "requires": {
+        "ngraph.graph": "0.0.14",
+        "ngraph.random": "0.1.0"
+      },
+      "dependencies": {
+        "ngraph.events": {
+          "version": "0.0.3",
+          "resolved": "https://registry.npmjs.org/ngraph.events/-/ngraph.events-0.0.3.tgz",
+          "integrity": "sha512-UrewofHOFk/05otBm9GD4DA3PTEY/yaElhCclmGC4IcmAYaSDRrC3lENQxJ00AzeBnz1GY2xH7Ct7AfIdhsdWA=="
+        },
+        "ngraph.graph": {
+          "version": "0.0.14",
+          "resolved": "https://registry.npmjs.org/ngraph.graph/-/ngraph.graph-0.0.14.tgz",
+          "integrity": "sha512-ERTLng4KrsGbR7iLZFvg5H+zJ7V+SY8RDqZKYCnOZib5W8M5LCvcil9/8eiJcTRUIPPXW3j8hqPCdLnBvgsn/A==",
+          "requires": {
+            "ngraph.events": "0.0.3"
+          }
+        },
+        "ngraph.random": {
+          "version": "0.1.0",
+          "resolved": "https://registry.npmjs.org/ngraph.random/-/ngraph.random-0.1.0.tgz",
+          "integrity": "sha512-KXCfzk/ZB79BxQSWMvYPGayx3Mb+7n5GPnc8SW0rwysqRV/3QxEKrLU/UVC8eGjc2SYGofqX+uhUE6IXfqR5VA=="
+        }
+      }
+    },
     "ngraph.graph": {
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/ngraph.graph/-/ngraph.graph-19.1.0.tgz",
@@ -2761,11 +2977,59 @@
         "ngraph.events": "^1.2.1"
       }
     },
+    "ngraph.merge": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/ngraph.merge/-/ngraph.merge-0.0.1.tgz",
+      "integrity": "sha512-iXchI5xMjYzA96mee//O7I7gtd4cCakWaSTu11aMTxRDbvBK2qpDDytYg58jO3usAUkjFxBdy1gxYppKmBDuRQ=="
+    },
     "ngraph.path": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/ngraph.path/-/ngraph.path-1.4.0.tgz",
       "integrity": "sha512-yJZay4tP0wcjqkkf8zlMQ/T+JOgU+EWfdE4w4TG8OS94B12J/+Z44UOYxVJErE8E6/wFunX1hMZEB1/GHsBYHg=="
     },
+    "ngraph.physics.primitives": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/ngraph.physics.primitives/-/ngraph.physics.primitives-0.0.7.tgz",
+      "integrity": "sha512-7jPm14fYcuJ9kytOVNOKxFy6r/Uu9Dnj++uT3iR9XkBcsBahn2xcYJkV6vF1bIb1fQ5XrDCRjRIOcMwEum6jwQ=="
+    },
+    "ngraph.physics.simulator": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/ngraph.physics.simulator/-/ngraph.physics.simulator-0.3.0.tgz",
+      "integrity": "sha512-ObW+HL+hQBIIdc6xG/+qrLe8qv+Sf0X3lq/l2hsjFrIwWtpRKLrSvUUoXiNIeFqRmY/C+PkGo3U+XY523lJ+Fw==",
+      "requires": {
+        "ngraph.events": "0.0.3",
+        "ngraph.expose": "0.0.0",
+        "ngraph.merge": "0.0.1",
+        "ngraph.physics.primitives": "0.0.7",
+        "ngraph.quadtreebh": "0.0.4",
+        "ngraph.random": "0.0.1"
+      },
+      "dependencies": {
+        "ngraph.events": {
+          "version": "0.0.3",
+          "resolved": "https://registry.npmjs.org/ngraph.events/-/ngraph.events-0.0.3.tgz",
+          "integrity": "sha512-UrewofHOFk/05otBm9GD4DA3PTEY/yaElhCclmGC4IcmAYaSDRrC3lENQxJ00AzeBnz1GY2xH7Ct7AfIdhsdWA=="
+        }
+      }
+    },
+    "ngraph.quadtreebh": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/ngraph.quadtreebh/-/ngraph.quadtreebh-0.0.4.tgz",
+      "integrity": "sha512-xTIkWGXt5Ajnoq9VOr0xDOI9ZL+q4sPhD0Z7vxvn4MCa+l0wf43rg0C7qv0t+RIOgbQBAp0xDpn568hpXAckJA==",
+      "requires": {
+        "ngraph.random": "0.0.1"
+      }
+    },
+    "ngraph.random": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/ngraph.random/-/ngraph.random-0.0.1.tgz",
+      "integrity": "sha512-QPKU7ChXF/VrvMQxVo9aWcvXCXp98VfL4nKUteTW/olDqeUqQ61t7m+jvFb8Dj7kKvlKlnsbDA1aWLJGmm17XA=="
+    },
+    "ngraph.tojson": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/ngraph.tojson/-/ngraph.tojson-0.1.4.tgz",
+      "integrity": "sha512-Ii2BTqi8zBRMLH8vTc8pMUKQFJaqbgttG9DKUaazoPVpwC/ww4jyTOHe2ZKaGGZRepnGLqSZ27wZUm7n8MjIgA=="
+    },
     "node-abi": {
       "version": "3.26.0",
       "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.26.0.tgz",
@@ -3199,6 +3463,14 @@
         "is-arrayish": "^0.3.1"
       }
     },
+    "simplesvg": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/simplesvg/-/simplesvg-0.0.10.tgz",
+      "integrity": "sha512-iCVx1A/kI4U3cGPRMRQaGLbIFNDXuB8rsaAsO2mM5wYFDs/MrfmHhrSCqNbOylgt9MhhZU3uMsSQnZM853kwXQ==",
+      "requires": {
+        "add-event-listener": "0.0.1"
+      }
+    },
     "slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -3258,6 +3530,12 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
     },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true
+    },
     "source-map-support": {
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
@@ -3536,9 +3814,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
+      "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
       "dev": true
     },
     "uri-js": {
@@ -3603,6 +3881,39 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "vivagraphjs": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/vivagraphjs/-/vivagraphjs-0.12.0.tgz",
+      "integrity": "sha512-Air+vUHXAWj8NTWUnbU800yKC7SiHpCVwpKIPfDtr5436YoMd7cpg8blt6Fn9xarx+sz1osRxGHBHTaHvcsR6Q==",
+      "requires": {
+        "gintersect": "0.1.0",
+        "ngraph.centrality": "0.3.0",
+        "ngraph.events": "0.0.3",
+        "ngraph.forcelayout": "0.5.0",
+        "ngraph.fromjson": "0.1.9",
+        "ngraph.generators": "0.0.19",
+        "ngraph.graph": "0.0.14",
+        "ngraph.merge": "0.0.1",
+        "ngraph.random": "0.0.1",
+        "ngraph.tojson": "0.1.4",
+        "simplesvg": "0.0.10"
+      },
+      "dependencies": {
+        "ngraph.events": {
+          "version": "0.0.3",
+          "resolved": "https://registry.npmjs.org/ngraph.events/-/ngraph.events-0.0.3.tgz",
+          "integrity": "sha512-UrewofHOFk/05otBm9GD4DA3PTEY/yaElhCclmGC4IcmAYaSDRrC3lENQxJ00AzeBnz1GY2xH7Ct7AfIdhsdWA=="
+        },
+        "ngraph.graph": {
+          "version": "0.0.14",
+          "resolved": "https://registry.npmjs.org/ngraph.graph/-/ngraph.graph-0.0.14.tgz",
+          "integrity": "sha512-ERTLng4KrsGbR7iLZFvg5H+zJ7V+SY8RDqZKYCnOZib5W8M5LCvcil9/8eiJcTRUIPPXW3j8hqPCdLnBvgsn/A==",
+          "requires": {
+            "ngraph.events": "0.0.3"
+          }
+        }
+      }
+    },
     "vue": {
       "version": "2.6.14",
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
diff --git a/app/package.json b/app/package.json
index 7fe0ef3d..e92fb1b9 100644
--- a/app/package.json
+++ b/app/package.json
@@ -27,6 +27,10 @@
     "bcrypt": "^5.1.0",
     "chroma-js": "^2.4.2",
     "css-box-shadow": "^1.0.0-3",
+    "cytoscape": "^3.25.0",
+    "cytoscape-dagre": "^2.5.0",
+    "cytoscape-klay": "^3.1.4",
+    "dagre": "^0.8.5",
     "date-fns": "^1.30.1",
     "ddp-rate-limiter-mixin": "^1.1.10",
     "discord.js": "^12.5.3",
@@ -48,6 +52,7 @@
     "simpl-schema": "^1.13.1",
     "source-map-support": "^0.5.21",
     "speakingurl": "^14.0.1",
+    "vivagraphjs": "^0.12.0",
     "vue": "2.6.14",
     "vue-meteor-tracker": "^2.0.0",
     "vue-reactive-provide": "^0.3.0",
@@ -61,13 +66,13 @@
     "@types/mocha": "^10.0.1",
     "@typescript-eslint/eslint-plugin": "^5.59.2",
     "@typescript-eslint/parser": "^5.59.2",
-    "@vue/compiler-dom": "^2.6.10",
-    "@vue/runtime-dom": "^2.6.10",
+    "@vue/compiler-dom": "^3.3.4",
+    "@vue/runtime-dom": "^3.3.4",
     "chai": "^4.3.7",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^7.20.0",
     "eslint-plugin-vuetify": "^1.1.0",
-    "typescript": "^4.9.5"
+    "typescript": "^5.0"
   },
   "eslintConfig": {
     "extends": [
@@ -120,4 +125,4 @@
       ]
     }
   }
-}
\ No newline at end of file
+}