feat: grouping nodes in graph

Author: manfredsteyer

backend/.forensic/config.json

@@ -1,7 +1,22 @@
 {
   "scopes": [
+    "src/app/domains/ticketing/feature-booking",
+    "src/app/domains/checkin/data",
+    "src/app/domains/checkin/feature-manage",
+    "src/app/domains/ticketing/data",
+    "src/app/domains/ticketing/feature-my-tickets",
+    "src/app/domains/ticketing/feature-next-flight",
+    "src/app/domains/ticketing/ui-common",
+    "src/app/shared/util-logger",
+    "src/app/shared/util-common",
+    "src/app/shared/util-auth"
+  ],
+  "groups": [
     "src/app/domains/checkin",
     "src/app/domains/ticketing",
-    "src/app/shared"
+    "src/app/domains",
+    "src/app/shared",
+    "src/app",
+    "src"
   ]
 }

backend/src/infrastructure/config.ts

@@ -4,7 +4,7 @@ import { Config } from "../model/config";
 import { Options } from "../options/options";
 import fs from "fs";
 
-export function loadConfig(options: Options) {
+export function loadConfig(options: Options): Config {
   const configPath = path.join(cwd(), options.config);
   const config = JSON.parse(fs.readFileSync(configPath, "utf-8")) as Config;
   return config;

backend/src/model/config.ts

@@ -1,3 +1,4 @@
 export type Config = {
     scopes: string[];
+    groups: string[];
 };

backend/src/services/coupling.ts

@@ -8,6 +8,7 @@ import { toPercent } from "../utils/round";
 
 // TODO: Restructure fileCount and cohesion into dimensions node
 export type CouplingResult = {
+  groups: string[];
   dimensions: string[];
   fileCount: number[];
   cohesion: number[];
@@ -43,6 +44,7 @@ export function calcCoupling(options: Options): CouplingResult {
   const cohesion = calcCohesion(moduleInfo, matrix);
 
   return {
+    groups: config.groups,
     dimensions: config.scopes,
     fileCount: moduleInfo.fileCount,
     cohesion,

frontend/src/app/coupling/chord/chord.component.ts

@@ -4,7 +4,6 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { CouplingService } from '../coupling.service';
 import { EventService } from '../../event.service';
 import { MatListModule } from '@angular/material/list';
-import { ModuleService } from '../module.service';
 
 type NodeDetails = {
   title: string;

frontend/src/app/coupling/coupling-result.ts

@@ -3,4 +3,5 @@ export type CouplingResult = {
   fileCount: number[];
   cohesion: number[];
   matrix: number[][];
+  groups: string[];
 };

frontend/src/app/coupling/graph/graph.component.css

@@ -13,6 +13,9 @@ svg {
     height: 100%;
 }
 
+.qtip-bootstrap {
+    max-width: 700px; 
+}
 
 .tooltip {
     position: absolute;
@@ -24,6 +27,8 @@ svg {
     border-radius: 8px;
     pointer-events: none;
     opacity: 0;
+    width: auto;
+    max-width: 700px; 
 }
 
 #network {

frontend/src/app/coupling/graph/graph.component.html

@@ -1,3 +1,4 @@
+<mat-checkbox [(ngModel)]="groupByFolder" (change)="groupByFolderChanged($event)">Group by folder</mat-checkbox>
 
 
 <div id="network"></div>