Brother let's go

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)

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 = {

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[] {