Kein Alignment vorhanden
diff --git a/frontend/src/app/diagram/diagram.component.spec.ts b/frontend/src/app/diagram/diagram.component.spec.ts
index 4b6a6b0285..dda3c6e3aa 100644
--- a/frontend/src/app/diagram/diagram.component.spec.ts
+++ b/frontend/src/app/diagram/diagram.component.spec.ts
@@ -64,7 +64,7 @@ describe('DiagramComponent', () => {
jest.spyOn(component, 'prepareDiagramData');
component.ngAfterViewInit();
- component.alignmentData.next(alignmentLists);
+ component.alignmentData$.next(alignmentLists);
expect(component.cleanUpDiagram).toHaveBeenCalled();
expect(component.prepareDiagramData).toHaveBeenCalledWith(alignmentLists);
@@ -104,7 +104,6 @@ describe('DiagramComponent', () => {
component.generateNodes(alignmentLists);
expect(component.generateConnections).toHaveBeenCalled();
- expect(component.generateDiagram).toHaveBeenCalled();
expect(component.diagramData).toEqual(diagramElements.concat(edges));
});
@@ -120,7 +119,6 @@ describe('DiagramComponent', () => {
component.generateNodes(alignmentListsKeyResult);
expect(component.generateConnections).toHaveBeenCalled();
- expect(component.generateDiagram).toHaveBeenCalled();
expect(component.diagramData).toEqual(diagramData);
});
@@ -136,7 +134,6 @@ describe('DiagramComponent', () => {
component.generateNodes(alignmentListsKeyResult);
expect(component.generateConnections).toHaveBeenCalled();
- expect(component.generateDiagram).toHaveBeenCalled();
expect(component.diagramData).toEqual(diagramData);
});
diff --git a/frontend/src/app/diagram/diagram.component.ts b/frontend/src/app/diagram/diagram.component.ts
index 4883cb248b..6d35f71bad 100644
--- a/frontend/src/app/diagram/diagram.component.ts
+++ b/frontend/src/app/diagram/diagram.component.ts
@@ -21,6 +21,7 @@ import { AlignmentObject } from '../shared/types/model/AlignmentObject';
import { AlignmentConnection } from '../shared/types/model/AlignmentConnection';
import { Zone } from '../shared/types/enums/Zone';
import { ObjectiveState } from '../shared/types/enums/ObjectiveState';
+import { RefreshDataService } from '../shared/services/refresh-data.service';
@Component({
selector: 'app-diagram',
@@ -28,39 +29,27 @@ import { ObjectiveState } from '../shared/types/enums/ObjectiveState';
styleUrl: './diagram.component.scss',
})
export class DiagramComponent implements AfterViewInit, OnDestroy {
- private alignmentData$: Subject
= new Subject();
+ @Input()
+ public alignmentData$: Subject = new Subject();
cy!: cytoscape.Core;
diagramData: any[] = [];
alignmentDataCache: AlignmentLists | null = null;
+ reloadRequired: boolean | null | undefined = false;
constructor(
private keyResultService: KeyresultService,
+ private refreshDataService: RefreshDataService,
private router: Router,
) {}
- @Input()
- get alignmentData(): Subject {
- return this.alignmentData$;
- }
-
- set alignmentData(alignmentData: AlignmentLists) {
- this.alignmentData$.next(alignmentData);
- }
-
ngAfterViewInit(): void {
- this.alignmentData.subscribe((alignmentData: AlignmentLists): void => {
- let lastAlignmentItem: AlignmentObject =
- alignmentData.alignmentObjectDtoList[alignmentData.alignmentObjectDtoList.length - 1];
-
- const diagramReloadRequired: boolean =
- lastAlignmentItem?.objectTitle === 'reload'
- ? lastAlignmentItem?.objectType === 'true'
- : JSON.stringify(this.alignmentDataCache) !== JSON.stringify(alignmentData);
+ this.refreshDataService.reloadAlignmentSubject.subscribe((value: boolean | null | undefined): void => {
+ this.reloadRequired = value;
+ });
- if (diagramReloadRequired) {
- if (lastAlignmentItem?.objectTitle === 'reload') {
- alignmentData.alignmentObjectDtoList.pop();
- }
+ this.alignmentData$.subscribe((alignmentData: AlignmentLists): void => {
+ if (this.reloadRequired == true || JSON.stringify(this.alignmentDataCache) !== JSON.stringify(alignmentData)) {
+ this.reloadRequired = undefined;
this.alignmentDataCache = alignmentData;
this.diagramData = [];
this.cleanUpDiagram();
@@ -71,7 +60,8 @@ export class DiagramComponent implements AfterViewInit, OnDestroy {
ngOnDestroy(): void {
this.cleanUpDiagram();
- this.alignmentData.unsubscribe();
+ this.alignmentData$.unsubscribe();
+ this.refreshDataService.reloadAlignmentSubject.unsubscribe();
}
generateDiagram(): void {
@@ -187,8 +177,8 @@ export class DiagramComponent implements AfterViewInit, OnDestroy {
}
});
- zip(observableArray).subscribe(() => {
- this.generateConnections(alignmentData, diagramElements);
+ zip(observableArray).subscribe(async () => {
+ await this.generateConnections(alignmentData, diagramElements);
});
}
@@ -223,7 +213,7 @@ export class DiagramComponent implements AfterViewInit, OnDestroy {
};
}
- generateConnections(alignmentData: AlignmentLists, diagramElements: any[]): void {
+ async generateConnections(alignmentData: AlignmentLists, diagramElements: any[]) {
let edges: any[] = [];
alignmentData.alignmentConnectionDtoList.forEach((alignmentConnection: AlignmentConnection) => {
let edge = {
@@ -238,7 +228,10 @@ export class DiagramComponent implements AfterViewInit, OnDestroy {
edges.push(edge);
});
this.diagramData = diagramElements.concat(edges);
- this.generateDiagram();
+
+ // Sometimes the DOM Element #cy is not ready when cytoscape tries to generate the diagram
+ // To avoid this, we use here a setTimeout()
+ setTimeout(() => this.generateDiagram(), 0);
}
generateObjectiveSVG(title: string, teamName: string, state: string): string {
diff --git a/frontend/src/app/overview/overview.component.html b/frontend/src/app/overview/overview.component.html
index f4929da899..5c46bf9c35 100644
--- a/frontend/src/app/overview/overview.component.html
+++ b/frontend/src/app/overview/overview.component.html
@@ -46,7 +46,7 @@