From 95be4fdcf4a3c9a01ec49ca899b68c5f417b4903 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefanie=20J=C3=A4ger?= <stefijaeger@gmail.com>
Date: Wed, 20 Dec 2023 14:06:26 +0100
Subject: [PATCH] Ooooh, get graph working

---
 package-lock.json                             |  28 ++-
 package.json                                  |   2 +
 .../ModuleDependencyDropdown.vue              |  28 +--
 .../ModuleDependencyGraph.vue                 | 177 +++++++++++-------
 .../ModuleDependencyPage.vue                  |   4 +-
 5 files changed, 154 insertions(+), 85 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7ea157c..dccc470 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,11 +17,13 @@
         "chart.js": "^4.4.0",
         "chartjs-chart-graph": "^4.2.6",
         "chartjs-plugin-datalabels": "^2.2.0",
+        "cytoscape": "^3.28.0",
         "vue": "^3.2.47",
         "vue-router": "^4.1.6",
         "vuedraggable": "^4.1.0"
       },
       "devDependencies": {
+        "@types/cytoscape": "^3.19.16",
         "@types/node": "^20.3.3",
         "@typescript-eslint/eslint-plugin": "^6.0.0",
         "@typescript-eslint/parser": "^6.0.0",
@@ -689,6 +691,12 @@
         "moment": "^2.10.2"
       }
     },
+    "node_modules/@types/cytoscape": {
+      "version": "3.19.16",
+      "resolved": "https://registry.npmjs.org/@types/cytoscape/-/cytoscape-3.19.16.tgz",
+      "integrity": "sha512-A3zkjaZ6cOGyqEvrVuC1YUgiRSJhDZOj8Qhd1ALH2/+YxH2za1BOmR4RWQsKYHsc+aMP/IWoqg1COuUbZ39t/g==",
+      "dev": true
+    },
     "node_modules/@types/d3-force": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.6.tgz",
@@ -1646,6 +1654,18 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
       "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
+    "node_modules/cytoscape": {
+      "version": "3.28.0",
+      "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.28.0.tgz",
+      "integrity": "sha512-x7+BHQXN90Audv5xXvdOECmiKuZdeKeoqOmDuYoht4zDKSdObC0Z9AdJXFkXEQvXU8UndI6WnTz47TRI7duReg==",
+      "dependencies": {
+        "heap": "^0.2.6",
+        "lodash": "^4.17.21"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/d3-dispatch": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
@@ -2801,6 +2821,11 @@
         "he": "bin/he"
       }
     },
+    "node_modules/heap": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/heap/-/heap-0.2.7.tgz",
+      "integrity": "sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg=="
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -3288,8 +3313,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
diff --git a/package.json b/package.json
index 21a1ede..b82b930 100644
--- a/package.json
+++ b/package.json
@@ -19,11 +19,13 @@
     "chart.js": "^4.4.0",
     "chartjs-chart-graph": "^4.2.6",
     "chartjs-plugin-datalabels": "^2.2.0",
+    "cytoscape": "^3.28.0",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
+    "@types/cytoscape": "^3.19.16",
     "@types/node": "^20.3.3",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
diff --git a/src/components/module-dependency-graph/ModuleDependencyDropdown.vue b/src/components/module-dependency-graph/ModuleDependencyDropdown.vue
index 3ff244c..4c68958 100644
--- a/src/components/module-dependency-graph/ModuleDependencyDropdown.vue
+++ b/src/components/module-dependency-graph/ModuleDependencyDropdown.vue
@@ -1,12 +1,4 @@
 <template>
-  <!-- <div class="has-dropdown is-hoverable">
-    <a>Module</a>
-    <div class="navbar-dropdown">
-      <a v-for="module in unselectedModules" :key="module.id" class="navbar-item" @click="onModuleSelected(module.id)"
-        v-text="module.name" />
-    </div>
-  </div> -->
-
   <div class="is-flex is-align-content-space-evenly is-justify-content-left">
     <label class="is-flex is-flex-direction-column is-justify-content-center" for="modules-select">
       <p>Module</p>
@@ -20,17 +12,30 @@
     </div>
   </div>
 
-  <div>
+  <div class="is-flex mt-2">
     <template v-for="module in selectedModules" :key="module.id">
-      <div style="background-color: pink; margin-right: 1em;">{{ module.name }} <button
-          @click="onModuleDeselected(module.id)">X</button></div>
+      <div class="selected-module p-2" :style="{ 'background-color': getCategoryColorForModule(module), 'margin-right': '1em' }">
+        {{ module.name }}
+        <button
+          class="delete-button delete is-pulled-right ml-1"
+          type="button"
+          @click="onModuleDeselected(module.id)">X</button>
+      </div>
     </template>
   </div>
 </template>
 
+<style>
+.selected-module {
+  color: white;
+  border-radius: 5px;
+}
+</style>
+
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { Module } from '../../helpers/types';
+import { getCategoryColorForModule } from '../../helpers/color-helper';
 
 export default defineComponent({
   name: 'ModuleDependencyDropdown',
@@ -57,6 +62,7 @@ export default defineComponent({
     },
   },
   methods: {
+    getCategoryColorForModule,
     onModuleSelected(moduleId: string) {
       console.log('onModuleSelected', moduleId);
       const module = this.unselectedModules.find(f => f.id === moduleId);
diff --git a/src/components/module-dependency-graph/ModuleDependencyGraph.vue b/src/components/module-dependency-graph/ModuleDependencyGraph.vue
index c773d2b..f635acd 100644
--- a/src/components/module-dependency-graph/ModuleDependencyGraph.vue
+++ b/src/components/module-dependency-graph/ModuleDependencyGraph.vue
@@ -1,100 +1,135 @@
 <template>
-  <canvas id="chart" />
+  <div class="cy-wrapper">
+    <div id="cy"></div>
+  </div>
 </template>
 
+<style>
+.cy-wrapper {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+#cy {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  margin: auto;
+  background: #ececec;
+}
+</style>
+
 <script lang="ts">
-import { Chart, LinearScale, PointElement, type ChartOptions, type ChartTypeRegistry, type ChartConfiguration } from 'chart.js/auto';
 import { defineComponent } from 'vue';
-import { ForceDirectedGraphController, EdgeLine } from 'chartjs-chart-graph';
-import ChartDataLabels from 'chartjs-plugin-datalabels';
 import type { Module } from '../../helpers/types';
-
-type Node = { id: string, displayName: string };
-type Link = { source: string, target: string };
-
-Chart.register(ForceDirectedGraphController, EdgeLine, LinearScale, PointElement, ChartDataLabels);
-
-// todo: labels (should not hide arrow)
-// todo: no animation (faster render)
-// todo: keep things closer together (way too speard apart)
-
-const chartOptions: ChartOptions<'forceDirectedGraph' | ChartDataLabels> = {
-  tree: { orientation: 'radial' },
-  layout: { padding: 20 },
-  plugins: {
-    datalabels: {
-      display: (_: ChartDataLabels.Context) => {
-        return true;
-      },
-      align: (context: ChartDataLabels.Context) => {
-        const index = context.dataIndex;
-        const value = context.dataset.data[index] as { angle: number };
-        return (-value.angle / Math.PI) * 180;
-      },
-      rotation: (context: ChartDataLabels.Context) => {
-        const index = context.dataIndex;
-        const value = context.dataset.data[index] as { angle: number };
-        return (-value.angle / Math.PI) * 180;
-      },
-      backgroundColor: 'white',
-      formatter: (value: { displayName: string }) => {
-        return value.displayName;
-      },
-    },
-  },
-};
+import cytoscape from 'cytoscape';
+import { getCategoryColorForModule } from '../../helpers/color-helper';
 
 export default defineComponent({
   name: 'ModuleDependencyGraph',
   props: {
-    modules: {
+    modulesToDisplay: {
+      type: Array<Module>,
+      required: true,
+    },
+    selectedModules: {
       type: Array<Module>,
       required: true,
     },
   },
   data() {
     return {
-      chart: null as any | null,
-    };
+      cy: null as any | null,
+    }
+  },
+  mounted() {
+    this.create();
   },
   watch: {
-    modules: {
+    modulesToDisplay: {
       deep: true,
       immediate: false,
-      handler(newValue: Module[]) {
-        const nodes = [...newValue.map(module => ({ id: module.id, displayName: module.name }))];
-        let links = [...newValue.flatMap(module => module.recommendedModuleIds.map(recommendedId => ({ source: recommendedId, target: module.id })) ?? [])];
-        links = links.filter(link => nodes.some(node => node.id === link.source) && nodes.some(node => node.id === link.target));
-
-        console.log({ nodes, links });
-
-        this.createChart(nodes, links);
+      handler() {
+        this.create();
       },
     },
   },
   methods: {
-    createChart(nodes: Node[], links: Link[]) {
-      if (this.chart) {
-        this.chart.destroy();
-      }
-      const canvas = (document.getElementById('chart') as HTMLCanvasElement).getContext('2d') as CanvasRenderingContext2D;
-      const config: ChartConfiguration<'forceDirectedGraph' | ChartDataLabels> = {
-        type: ForceDirectedGraphController.id,
+    buildData(): { nodes: {  data: Node }[], edges:  { data: Edge }[] } {
+      const nodes: { data: Node }[] = [...this.modulesToDisplay.map(module => ({
         data: {
-          labels: nodes.map((d) => d.id),
-          datasets: [{
-            pointBackgroundColor: 'steelblue',
-            pointRadius: 5,
-            directed: true,
-            data: nodes,
-            edges: links,
-          }]
-        },
-        options: chartOptions,
-        plugins: [ChartDataLabels],
-      };
-      this.chart = new Chart(canvas, config);
+          id: module.id,
+          label: module.name,
+          categoryColor: getCategoryColorForModule(module),
+        }
+      }))];
+      let edges = [...this.modulesToDisplay.flatMap(module =>
+        module.recommendedModuleIds.map(recId =>
+          ({ data: { source: recId, target: module.id } })
+        ) ?? [])];
+      edges = edges.filter(edge =>
+        edge.data.source &&
+        edge.data.target &&
+        nodes.some(node => node.data.id === edge.data.source) &&
+        nodes.some(node => node.data.id === edge.data.target));
+
+      console.log({ nodes, edges });
+      return { nodes, edges };
     },
+    create() {
+      const { nodes, edges } = this.buildData();
+
+      this.cy = cytoscape({
+        container: document.getElementById('cy'),
+        elements: {
+          nodes,
+          edges
+        },
+        zoomingEnabled: false,
+        style: [
+          {
+            selector: "node[label]",
+            style: {
+              "label": "data(label)",
+            }
+          },
+          {
+            selector: "edge[label]",
+            style: {
+              "label": "data(label)",
+              "width": 3
+            }
+          },
+          {
+            selector: "edge",
+            style: {
+              "width": 1,
+              "target-arrow-shape": "triangle",
+              "curve-style": "straight",
+            }
+          },
+          {
+            selector: 'node[categoryColor]',
+            style: {
+              "background-color": "data(categoryColor)"
+            }
+          }
+        ],
+      });
+    }
   },
 });
+
+type Node = {
+  id: string,
+  label: string,
+  categoryColor: string,
+};
+
+type Edge = {
+  source: string,
+  target: string,
+};
+
 </script>
diff --git a/src/components/module-dependency-graph/ModuleDependencyPage.vue b/src/components/module-dependency-graph/ModuleDependencyPage.vue
index 1e1ff30..51cd12c 100644
--- a/src/components/module-dependency-graph/ModuleDependencyPage.vue
+++ b/src/components/module-dependency-graph/ModuleDependencyPage.vue
@@ -11,7 +11,7 @@
   </div>
   <div class="columns">
     <div class="column">
-          <ModuleDependencyGraph :modules="modulesForGraph"></ModuleDependencyGraph>
+          <ModuleDependencyGraph :selectedModules="selectedModules" :modulesToDisplay="modulesForGraph"></ModuleDependencyGraph>
         </div>
       </div>
 </template>
@@ -35,6 +35,7 @@ export default defineComponent({
     return {
       modulesForGraph: [] as Module[],
       allModules: [] as Module[],
+      selectedModules: [] as Module[],
     }
   },
   async mounted() {
@@ -57,6 +58,7 @@ export default defineComponent({
       }
 
       this.modulesForGraph = [...selectedModules, ...recommended, ...recommending].filter((value, index, array) => array.indexOf(value) === index);
+      this.selectedModules = selectedModules;
     },
     getRecommendedModulesForModule(module: Module, visited: Module[]): Module[] {
       const recommended = module.recommendedModuleIds.map(m => this.allModules.find(f => f.id === m));