Dependency: Make node clickable, for navigation

Author: vbakke

src/app/component/activity-description/activity-description.component.html

@@ -62,7 +62,10 @@ <h1>
         </mat-panel-title>
       </mat-expansion-panel-header>
       <div *ngIf="currentActivity?.name">
-        <app-dependency-graph [activityName]="currentActivity?.name || ''"></app-dependency-graph>
+        <app-dependency-graph
+          [activityName]="currentActivity?.name || ''"
+          (activityClicked)="onActivityClicked($event)">
+        </app-dependency-graph>
       </div>
     </mat-expansion-panel>
 

src/app/component/activity-description/activity-description.component.spec.ts

@@ -2,6 +2,7 @@ import { HttpClient, HttpHandler } from '@angular/common/http';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ActivatedRoute } from '@angular/router';
+import { of } from 'rxjs';
 
 import { ActivityDescriptionComponent } from './activity-description.component';
 import { LoaderService } from 'src/app/service/loader/data-loader.service';
@@ -12,13 +13,11 @@ import { isEmptyObj } from 'src/app/util/util';
 
 let mockLoaderService: MockLoaderService;
 let mockActivatedRoute = {
-  snapshot: {
-    queryParams: { uuid: '00000000-1111-1111-1111-0000000000000' },
-  },
+  queryParams: of({ uuid: '00000000-1111-1111-1111-0000000000000' }),
 };
 let mockData = {
   'Dim 1': {
-    'SubDim 1.1': {
+    'SubDim-1.1': {
       'Activity 111': {
         uuid: '00000000-1111-1111-1111-0000000000000',
         level: 1,
@@ -77,19 +76,19 @@ describe('ActivityDescriptionComponent', () => {
     expect(isEmptyObj(component.currentActivity)).toBeFalsy();
   });
 
-  it('check if header is being generated', () => {
-    const testDimension = 'Dim 1';
-    const testSubDimension = 'SubDim 1.1';
+  it('check if header is being generated', async () => {
+    const testSubDimension = 'SubDim-1.1';
 
+    await fixture.whenStable();
     fixture.detectChanges();
+
     const HTMLElement: HTMLElement = fixture.nativeElement;
     const heading = HTMLElement.querySelector('h1')!;
 
-    expect(heading?.textContent).toContain(testDimension);
     expect(heading?.textContent).toContain(testSubDimension);
   });
 
-  it('check if content is displayed', () => {
+  it('check if content is displayed', async () => {
     // console.log(`${perfNow()}: ActivityDescription: "check if content is displayed"`);
     const testUUID = '00000000-1111-1111-1111-0000000000000';
     const testDesc = 'Description 111';
@@ -99,6 +98,7 @@ describe('ActivityDescriptionComponent', () => {
     const testComments = 'Comments 111';
     const testImplementationGuide = 'Implementation Guide 111';
 
+    await fixture.whenStable();
     fixture.detectChanges();
     const HTMLElement: HTMLElement = fixture.nativeElement;
 

src/app/component/activity-description/activity-description.component.ts

@@ -1,8 +1,8 @@
 import { Component, ViewChildren, QueryList, OnInit } from '@angular/core';
 import { MatAccordion } from '@angular/material/expansion';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { LoaderService } from '../../service/loader/data-loader.service';
-import { Activity } from '../../model/activity-store';
+import { Activity, ActivityStore } from '../../model/activity-store';
 import { DataStore } from 'src/app/model/data-store';
 
 @Component({
@@ -23,20 +23,29 @@ export class ActivityDescriptionComponent implements OnInit {
   openCREVersion: string = 'OpenCRE';
   @ViewChildren(MatAccordion) accordion!: QueryList<MatAccordion>;
 
-  constructor(private route: ActivatedRoute, private loader: LoaderService) {}
+  constructor(
+    private route: ActivatedRoute,
+    private loader: LoaderService,
+    private router: Router
+  ) {}
 
   ngOnInit() {
-    let uuid: string = this.route.snapshot.queryParams['uuid'];
-    let name: string = this.route.snapshot.queryParams['name'];
+    this.route.queryParams.subscribe(params => {
+      const uuid: string = params['uuid'];
+      const name: string = params['name'];
+      this.loadActivity(uuid, name);
+    });
+  }
 
-    // Load data
+  loadActivity(uuid?: string, name?: string) {
     this.loader
       .load()
       .then((dataStore: DataStore) => {
-        // Find the activity with matching UUID (or potentially name)
-        if (!dataStore.activityStore) throw Error('TODO: Must handle these');
-
-        let activity: Activity = dataStore.activityStore.getActivity(uuid, name);
+        if (!dataStore.activityStore) throw Error('DateStore not loaded');
+        // Ensure uuid and name are strings (fallback to empty string if undefined)
+        const uuidStr = uuid ?? '';
+        const nameStr = name ?? '';
+        let activity: Activity = dataStore.activityStore.getActivity(uuidStr, nameStr);
         if (!activity) {
           throw new Error('Activity not found');
         }
@@ -59,6 +68,22 @@ export class ActivityDescriptionComponent implements OnInit {
       });
   }
 
+  onActivityClicked(activityName: string) {
+    // Find the activity by name and update the view without reloading the page
+    const activityStore: ActivityStore = this.loader.datastore?.activityStore as ActivityStore;
+    const activity: Activity = activityStore?.getActivityByName(activityName) as Activity;
+
+    if (activity) {
+      // Update the URL query params (SPA style)
+      this.router.navigate([], {
+        relativeTo: this.route,
+        queryParams: { uuid: activity.uuid },
+        queryParamsHandling: 'merge',
+      });
+      this.loadActivity(activity.uuid, activity.name);
+    }
+  }
+
   // Expand all function
   openAll(): void {
     this.accordion.forEach(element => {

src/app/component/dependency-graph/dependency-graph.component.ts

@@ -5,6 +5,8 @@ import { Activity } from 'src/app/model/activity-store';
 import { DataStore } from 'src/app/model/data-store';
 import { ThemeService } from 'src/app/service/theme.service';
 
+import { Output, EventEmitter } from '@angular/core';
+
 export interface graphNodes {
   id: string;
   relativeLevel: number;
@@ -47,6 +49,8 @@ export class DependencyGraphComponent implements OnInit, OnChanges {
 
   @Input() activityName: string = '';
 
+  @Output() activityClicked = new EventEmitter<string>();
+
   constructor(private loader: LoaderService, private themeService: ThemeService) {
     this.theme = this.themeService.getTheme();
     this.setThemeColors(this.theme);
@@ -55,7 +59,6 @@ export class DependencyGraphComponent implements OnInit, OnChanges {
   ngOnInit(): void {
     this.loader.load().then((dataStore: DataStore) => {
       this.dataStore = dataStore;
-      console.log('Dep-graph: Setting datastore');
       if (!dataStore.activityStore) {
         throw Error('No activity store loaded');
       }
@@ -69,7 +72,6 @@ export class DependencyGraphComponent implements OnInit, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    console.log(changes);
     if (this.dataStore?.activityStore) {
       if (changes?.hasOwnProperty('activityName')) {
         this.populateGraph(changes['activityName'].currentValue);
@@ -157,11 +159,12 @@ export class DependencyGraphComponent implements OnInit, OnChanges {
   }
 
   initX(d: any): number {
-    let col: number = 8;
-    if (d.activityCount > col && d.activityCount < col * 2) {
-      col = Math.ceil(d.activityCount / 2);
+    let colSize: number = 8;
+    if (d.activityCount > colSize && d.activityCount <= colSize * 2.5) {
+      let colCount: number = Math.ceil(d.activityCount / colSize);
+      colSize = Math.ceil(d.activityCount / colCount);
     }
-    return d.relativeLevel * Math.ceil(d.activityIndex / col) * 300;
+    return d.relativeLevel * Math.ceil(d.activityIndex / colSize) * 300;
   }
   initY(d: any): number {
     return d.relativeLevel * 30;
@@ -176,15 +179,8 @@ export class DependencyGraphComponent implements OnInit, OnChanges {
     this.simulation = d3
       .forceSimulation()
       // .alphaMin(0.11)
-      .force(
-        'link',
-        d3.forceLink().id(function (d: any) {
-            return d.id;
-          }).strength(0.1)
-      )
-      .force('x', d3.forceX((d: any) => { return self.initX(d) }).strength(5)
-      )
-      // .force('y', d3.forceY( this.initY ).strength(5))
+      .force('link', d3.forceLink().id((d: any) => { return d.id; }).strength(0.1))
+      .force('x', d3.forceX((d: any) => { return self.initX(d) }).strength(5))
       .force('charge', d3.forceManyBody().strength(-30))
       .force('collide', d3.forceCollide((d: any) => 30))
       .force('center', d3.forceCenter(0, 0));
@@ -222,7 +218,24 @@ export class DependencyGraphComponent implements OnInit, OnChanges {
       .selectAll('g')
       .data(this.graphData['nodes'])
       .enter()
-      .append('g');
+      .append('g')
+      .on('click', (event: MouseEvent, d: any) => {
+        if (d.relativeLevel != 0) {
+          this.activityClicked.emit(d.id);
+        }
+      })
+      .on('mouseover', (event: MouseEvent, d: any) => {
+        if (this.activityClicked.observed) {
+          if (d.relativeLevel != 0) {
+            d3.select(event.currentTarget as Element).style('cursor', 'pointer');
+          } else {
+            d3.select(event.currentTarget as Element).style('cursor', 'default');
+          }
+        }
+      })
+      .on('mouseout', (event: MouseEvent, d: any) => {
+        d3.select(event.currentTarget as Element).style('cursor', 'default');
+      });
 
     const rectHeight = 30;
     const rectRx = 10;

src/app/model/activity-store.ts

@@ -257,7 +257,6 @@ export class ActivityStore {
         for (let i = 0; i < activity.dependsOn.length; i++) {
           if (activity.dependsOn[i].match(UUID)) {
             if (activityByUuid.hasOwnProperty(activity.dependsOn[i])) {
-              console.log(`Replaces ${activity.dependsOn[i]} with ${activityByUuid[activity.dependsOn[i]].name}`);
               activity.dependsOn[i] = activityByUuid[activity.dependsOn[i]].name;
             }
           }