From 4ba686f179bdf61e1aee67dc0bc84757ad412f52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefanie=20J=C3=A4ger?= <stefijaeger@gmail.com>
Date: Wed, 20 Dec 2023 15:10:33 +0100
Subject: [PATCH] Brother let's go

---
 README.md                                     |  9 +++++++++
 .../ModuleDependencyGraph.vue                 | 20 ++++++++++++++++++-
 .../ModuleDependencyPage.vue                  |  4 +++-
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 8be495c..20f92bd 100644
--- a/README.md
+++ b/README.md
@@ -36,3 +36,12 @@ npm run lint-fix
 
 ### Customize configuration
 See [Configuration Reference](https://vitejs.dev/config/).
+
+## Stefi
+
+- [ ] Label of selected modules in graph different color
+- [ ] Popover on node click (select/unselect and adunis)
+- [ ] Maybe position selected modules differently in graph
+- [ ] Maybe style nodes differently. Rounded square with text, like planner?
+- [ ] Spread nodes, so no nodes, labels or edges overlap in weird way
+- [ ] Maybe get edges to not overlap when connecting to node (confusing)
diff --git a/src/components/module-dependency-graph/ModuleDependencyGraph.vue b/src/components/module-dependency-graph/ModuleDependencyGraph.vue
index f635acd..4d84663 100644
--- a/src/components/module-dependency-graph/ModuleDependencyGraph.vue
+++ b/src/components/module-dependency-graph/ModuleDependencyGraph.vue
@@ -57,13 +57,19 @@ export default defineComponent({
   },
   methods: {
     buildData(): { nodes: {  data: Node }[], edges:  { data: Edge }[] } {
-      const nodes: { data: Node }[] = [...this.modulesToDisplay.map(module => ({
+      const nodes1: { data: Node }[] = [...this.modulesToDisplay.map(module => ({
         data: {
           id: module.id,
           label: module.name,
           categoryColor: getCategoryColorForModule(module),
         }
       }))];
+      const nodes = nodes1.map(m => {
+        if(this.selectedModules.some(s => s.id === m.data.id)) {
+          m.data.labelColor = 'red';
+        }
+        return m;
+      });
       let edges = [...this.modulesToDisplay.flatMap(module =>
         module.recommendedModuleIds.map(recId =>
           ({ data: { source: recId, target: module.id } })
@@ -94,6 +100,17 @@ export default defineComponent({
               "label": "data(label)",
             }
           },
+          {
+            selector: "node[labelColor]",
+            style: {
+              "color": "data(labelColor)"
+            }
+          },
+          //   {selector: 'node[label][isSelectedModule]',
+          //   style: {
+          //     'color': 'pink',
+          //   }
+          // },
           {
             selector: "edge[label]",
             style: {
@@ -125,6 +142,7 @@ type Node = {
   id: string,
   label: string,
   categoryColor: string,
+  labelColor?: string,
 };
 
 type Edge = {
diff --git a/src/components/module-dependency-graph/ModuleDependencyPage.vue b/src/components/module-dependency-graph/ModuleDependencyPage.vue
index 51cd12c..274cada 100644
--- a/src/components/module-dependency-graph/ModuleDependencyPage.vue
+++ b/src/components/module-dependency-graph/ModuleDependencyPage.vue
@@ -53,11 +53,13 @@ export default defineComponent({
       }
 
       const recommending = <Module[]>[];
+      const recommended2 = <Module[]>[];
       for (const module of selectedModules) {
         this.getRecommendingModulesForModule(module, recommending);
+        this.getRecommendedModulesForModule(module, recommended2);
       }
 
-      this.modulesForGraph = [...selectedModules, ...recommended, ...recommending].filter((value, index, array) => array.indexOf(value) === index);
+      this.modulesForGraph = [...recommended, ...recommended2, ...selectedModules, ...recommending].filter((value, index, array) => array.indexOf(value) === index);
       this.selectedModules = selectedModules;
     },
     getRecommendedModulesForModule(module: Module, visited: Module[]): Module[] {