-
-
+
+
+
diff --git a/src/app/compare/compare-tree/compare-tree.component.spec.ts b/src/app/compare/compare-tree/compare-tree.component.spec.ts
index bdb1ab0a..aea8b069 100644
--- a/src/app/compare/compare-tree/compare-tree.component.spec.ts
+++ b/src/app/compare/compare-tree/compare-tree.component.spec.ts
@@ -1,8 +1,8 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CompareTreeComponent } from './compare-tree.component';
-import { jqxTreeModule } from 'jqwidgets-ng/jqxtree';
import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { NgSimpleFileTreeModule } from 'ng-simple-file-tree';
describe('CompareTreeComponent', () => {
let component: CompareTreeComponent;
@@ -10,7 +10,7 @@ describe('CompareTreeComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- imports: [jqxTreeModule, CompareTreeComponent, HttpClientTestingModule],
+ imports: [NgSimpleFileTreeModule, CompareTreeComponent, HttpClientTestingModule],
}).compileComponents();
});
diff --git a/src/app/compare/compare-tree/compare-tree.component.ts b/src/app/compare/compare-tree/compare-tree.component.ts
index 3fc66fbf..11024438 100644
--- a/src/app/compare/compare-tree/compare-tree.component.ts
+++ b/src/app/compare/compare-tree/compare-tree.component.ts
@@ -1,209 +1,156 @@
-import { Component, EventEmitter, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { Report } from '../../shared/interfaces/report';
-import { HelperService } from '../../shared/services/helper.service';
-import { jqxTreeComponent, jqxTreeModule } from 'jqwidgets-ng/jqxtree';
-import { NodeLinkStrategy } from '../../shared/enums/compare-method';
-import { ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TitleCasePipe } from '@angular/common';
+
+import { ReportHierarchyTransformer } from '../../shared/classes/report-hierarchy-transformer';
+import { ReportUtil } from '../../shared/util/report-util';
+import { CompareData } from '../compare-data';
+import { Checkpoint } from '../../shared/interfaces/checkpoint';
+import { NodeLinkStrategy } from '../../shared/enums/node-link-strategy';
+import {
+ CreateTreeItem,
+ FileTreeItem,
+ FileTreeOptions,
+ NgSimpleFileTree,
+ NgSimpleFileTreeModule,
+ OptionalParameters,
+} from 'ng-simple-file-tree';
+
+export const treeSideConst = ['left', 'right'] as const;
+export type TreeSide = (typeof treeSideConst)[number];
@Component({
selector: 'app-compare-tree',
templateUrl: './compare-tree.component.html',
styleUrls: ['./compare-tree.component.css'],
standalone: true,
- imports: [ReactiveFormsModule, jqxTreeModule],
+ imports: [ReactiveFormsModule, TitleCasePipe, FormsModule, NgSimpleFileTreeModule],
})
export class CompareTreeComponent {
- constructor(private helperService: HelperService) {}
- @Output() compareEvent = new EventEmitter
();
- @Output() changeNodeLinkStrategyEvent = new EventEmitter();
- @ViewChild('leftTreeReference') leftTreeReference!: jqxTreeComponent;
- @ViewChild('rightTreeReference') rightTreeReference!: jqxTreeComponent;
- nodeLinkStrategy: NodeLinkStrategy = NodeLinkStrategy.NONE;
- viewName: string = '';
- leftReport: any;
- rightReport: any;
-
- public get NodeLinkStrategy(): typeof NodeLinkStrategy {
- return NodeLinkStrategy;
- }
-
- nodeSelected(data: any, left: boolean) {
- this.selectOtherNode(data, left);
- this.compareEvent.emit({
- leftReport: this.leftReport,
- rightReport: this.rightReport,
- });
+ @Output() compareEvent: EventEmitter = new EventEmitter();
+ @ViewChild('leftTree') leftTree!: NgSimpleFileTree;
+ @ViewChild('rightTree') rightTree!: NgSimpleFileTree;
+ @Input({ required: true }) nodeLinkStrategy!: NodeLinkStrategy;
+ @Input({ required: true }) compareData!: CompareData;
+ leftReport?: Report;
+ rightReport?: Report;
+ left?: Report;
+ leftTreeOptions: FileTreeOptions = {
+ highlightOpenFolders: false,
+ folderBehaviourOnClick: 'select',
+ expandAllFolders: true,
+ };
+
+ rightTreeOptions: FileTreeOptions = {
+ highlightOpenFolders: false,
+ folderBehaviourOnClick: 'select',
+ expandAllFolders: true,
+ determineFontColor: (item: CreateTreeItem) => this.setRedLabels(item),
+ };
+
+ createTrees(leftReport: Report, rightReport: Report): void {
+ this.leftReport = new ReportHierarchyTransformer().transform(leftReport);
+ this.rightReport = new ReportHierarchyTransformer().transform(rightReport);
+ const optional: OptionalParameters = { childrenKey: 'checkpoints' };
+ this.leftTree.addItem(this.leftReport, optional);
+ this.rightTree.addItem(this.rightReport, optional);
+ this.selectFirstItem();
}
- selectOtherNode(data: any, left: boolean) {
- if (this.nodeLinkStrategy === 'NONE') {
- this.compareOnNothing(data, left);
- } else {
- this.compareOnSomething(this.nodeLinkStrategy, data, left);
+ setRedLabels(item: CreateTreeItem): string {
+ if (ReportUtil.isReport(item)) {
+ return this.namesMatch(item.name, this.leftReport?.name);
}
- }
- compareOnSomething(method: string, data: any, left: boolean) {
- let treeReference: jqxTreeComponent = left ? this.rightTreeReference : this.leftTreeReference;
- let selectedReport = data.owner.selectedItem;
-
- let otherReport =
- method === 'PATH'
- ? this.getOtherReportBasedOnPath(selectedReport, treeReference)
- : this.getOtherReportBasedOnCheckpointNumber(selectedReport, treeReference);
-
- if (otherReport) {
- this.unfoldTree(treeReference, otherReport, otherReport.parentId);
- treeReference.selectItem(otherReport);
- } else {
- treeReference.selectItem(null);
+ if (ReportUtil.isCheckPoint(item)) {
+ const checkpoint: Checkpoint | null = this.findCorrespondingCheckpoint(item, this.leftReport);
+ return this.namesMatch(item.name, checkpoint?.name);
}
-
- this.leftReport = left ? selectedReport : otherReport;
- this.rightReport = left ? otherReport : selectedReport;
- }
-
- getOtherReportBasedOnCheckpointNumber(selectedReport: any, treeReference: jqxTreeComponent) {
- let checkpointNumber = selectedReport.value.index;
- return treeReference.getItems().find((item: any) => checkpointNumber == item.value.index);
- }
-
- getOtherReportBasedOnPath(selectedReport: any, treeReference: jqxTreeComponent) {
- let path = this.getFullPath(selectedReport, [selectedReport.value.name]);
- return this.matchFullPath(treeReference.getItems()[0], path);
- }
- compareOnNothing(data: any, left: boolean) {
- left ? (this.leftReport = data.owner.selectedItem) : (this.rightReport = data.owner.selectedItem);
- }
-
- changeNodeLinkStrategy(event: any) {
- this.nodeLinkStrategy = event.target.value;
- this.changeNodeLinkStrategyEvent.next(this.nodeLinkStrategy);
- localStorage.setItem(this.viewName + '.NodeLinkStrategy', this.nodeLinkStrategy);
- }
- getParent(checkpoint: any, parentId: string): any {
- let items = checkpoint.treeInstance.items;
- return items.find((item: any) => item.id == parentId);
+ return '';
}
- unfoldTree(treeReference: any, checkpoint: any, parentId: string) {
- while (parentId.toString() !== '0') {
- treeReference.expandItem(checkpoint);
- parentId = checkpoint.parentId;
- checkpoint = this.getParent(checkpoint, checkpoint.parentId);
+ selectFirstItem(): void {
+ if (ReportUtil.isReport(this.leftReport!)) {
+ this.leftTree.selectItem(this.leftReport.path);
+ }
+ if (ReportUtil.isReport(this.rightReport)) {
+ this.rightTree.selectItem(this.rightReport.path);
}
+ this.compareEvent.emit();
}
- getFullPath(checkpoint: any, pathSoFar: string[]): string[] {
- let parent = this.getParent(checkpoint, checkpoint.parentId);
- if (parent) {
- pathSoFar.push(parent.value.name);
- return this.getFullPath(parent, pathSoFar);
+ syncTrees(treeSide: TreeSide): void {
+ if (treeSide === 'left') {
+ this.selectItem(this.rightTree, this.leftTree.getSelected());
+ } else if (treeSide === 'right') {
+ this.selectItem(this.leftTree, this.rightTree.getSelected());
}
-
- return pathSoFar;
}
- matchFullPath(checkpoint: any, path: string[]): any {
- if (path.length === 0) return checkpoint;
-
- let toBeSelected = null;
- let firstPart = path.shift();
- checkpoint.treeInstance.items.every((item: any) => {
- if (item.value.name === firstPart) {
- let result = this.checkIfSameParents(item, item.parentId, path);
- if (result) {
- toBeSelected = item;
- return false; //Breaking since we found him;
- }
+ selectItem(otherSide: NgSimpleFileTree, treeItem: FileTreeItem): void {
+ switch (this.nodeLinkStrategy) {
+ case 'PATH': {
+ otherSide.selectItem(treeItem.path);
+ break;
+ }
+ case 'CHECKPOINT_NUMBER': {
+ this.selectByCheckPointNumber(otherSide, treeItem.originalValue as Report | Checkpoint);
}
- return true;
- });
-
- return toBeSelected;
- }
-
- checkIfSameParents(checkpoint: string, parentId: string, path: string[]): boolean {
- if (path.length === 0) return true;
- let parent = this.getParent(checkpoint, parentId);
- if (parent && parent.value.name == path[0]) {
- path.shift();
- return this.checkIfSameParents(parent, parent.parentId, path);
}
- return false;
+ this.compareEvent.emit();
}
- createTrees(viewName: string, nodeLinkStrategy: NodeLinkStrategy, leftReport: Report, rightReport: Report) {
- this.viewName = viewName;
- this.nodeLinkStrategy = nodeLinkStrategy;
- let nls = localStorage.getItem(this.viewName + '.NodeLinkStrategy');
- if (nls) {
- this.nodeLinkStrategy = NodeLinkStrategy[nls as keyof typeof NodeLinkStrategy];
+ selectByCheckPointNumber(tree: NgSimpleFileTree, treeItem: Report | Checkpoint): void {
+ if (ReportUtil.isReport(treeItem)) {
+ tree.selectItem(tree.getItems()[0].path);
+ } else if (ReportUtil.isCheckPoint(treeItem)) {
+ this.selectCheckpoint(tree, tree.getItems()[0], treeItem);
}
- const leftTree = this.helperService.convertReportToJqxTree(leftReport);
- const rightTree = this.helperService.convertReportToJqxTree(rightReport);
- const both = this.iterateToMakeLabelsRed(leftTree, rightTree);
-
- this.leftTreeReference.createComponent({
- height: '100%',
- source: [both.left],
- });
- this.rightTreeReference.createComponent({
- height: '100%',
- source: [both.right],
- });
-
- this.selectFirstItem();
- }
-
- selectFirstItem() {
- this.leftReport = this.leftTreeReference.getItems()[0];
- this.rightReport = this.rightTreeReference.getItems()[0];
- this.leftTreeReference.selectItem(this.leftReport);
- this.rightTreeReference.selectItem(this.rightReport);
- this.compareEvent.emit({
- leftReport: this.leftReport,
- rightReport: this.rightReport,
- });
- }
-
- makeLabelsRed(left: any, right: any) {
- this.redLabel(left);
- this.redLabel(right);
- }
-
- redLabel(item: any) {
- item.label = `${item.label}`;
}
- iterateToMakeLabelsRed(leftItem: any, rightItem: any) {
- let result = this.checkIfLabelsDifferent(leftItem, rightItem);
- const shortestTreeLength = Math.min(leftItem.items.length, rightItem.items.length);
- this.makeRestOfTreesRed(shortestTreeLength, rightItem.items, leftItem.items);
-
- for (let i = 0; i < shortestTreeLength; i++) {
- let both = this.iterateToMakeLabelsRed(leftItem.items[i], rightItem.items[i]);
- leftItem.items[i] = both.left;
- rightItem.items[i] = both.right;
+ selectCheckpoint(tree: NgSimpleFileTree, item: FileTreeItem, checkpointToMatch: Checkpoint): void {
+ if (item.children) {
+ for (const child of item.children) {
+ const checkpoint = child.originalValue as Checkpoint;
+ if (this.getCheckpointId(checkpoint.uid) === this.getCheckpointId(checkpointToMatch.uid)) {
+ tree.selectItem(child.path);
+ return;
+ } else {
+ this.selectCheckpoint(tree, child, checkpointToMatch);
+ }
+ }
}
-
- return result;
}
- makeRestOfTreesRed(startPoint: number, leftItems: any[], rightItems: any[]) {
- let items = leftItems;
- if (rightItems.length > leftItems.length) items = rightItems;
- for (let i = startPoint; i < items.length; i++) {
- this.redLabel(items[i]);
+ namesMatch(name1: string | undefined, name2?: string | undefined): string {
+ if (name1 && name2 && name1 === name2) {
+ return '';
}
- }
-
- checkIfLabelsDifferent(left: any, right: any): { left: any; right: any } {
- if (left.level > -1) {
- if (left.value.message !== right.value.message) this.makeLabelsRed(left, right);
- } else {
- if (left.value.xml !== right.value.xml) this.makeLabelsRed(left, right);
+ return 'red';
+ }
+
+ findCorrespondingCheckpoint(
+ itemToMatch: Checkpoint | Report,
+ report: Report | Checkpoint | undefined,
+ ): Checkpoint | null {
+ if (report) {
+ const checkpoints: Checkpoint[] = report.checkpoints ?? [];
+ for (let checkpoint of checkpoints) {
+ if (
+ ReportUtil.isCheckPoint(itemToMatch) &&
+ this.getCheckpointId(checkpoint.uid) === this.getCheckpointId(itemToMatch.uid)
+ ) {
+ return checkpoint;
+ }
+ if (checkpoint.checkpoints) {
+ return this.findCorrespondingCheckpoint(itemToMatch, checkpoint);
+ }
+ }
}
+ return null;
+ }
- return { left: left, right: right };
+ getCheckpointId(uid: string): string {
+ return uid.split('#')[1];
}
}
diff --git a/src/app/compare/compare.component.css b/src/app/compare/compare.component.css
index 2d2ecfd0..f5bd78c9 100644
--- a/src/app/compare/compare.component.css
+++ b/src/app/compare/compare.component.css
@@ -5,6 +5,17 @@
height: 94vh;
}
+.compare-header {
+ display: flex;
+ align-items: center;
+ height: 50px;
+ border-bottom: 1px solid #dee2e6;
+
+ & > label {
+ margin: 0;
+ }
+}
+
.trees {
resize: vertical;
overflow: auto;
diff --git a/src/app/compare/compare.component.html b/src/app/compare/compare.component.html
index 4c699d07..249258a2 100644
--- a/src/app/compare/compare.component.html
+++ b/src/app/compare/compare.component.html
@@ -1,21 +1,36 @@
+
+
@if (compareData) {
-
-
+ [compareData]="compareData"
+ [nodeLinkStrategy]="nodeLinkStrategy"
+ (compareEvent)="showDifference()"
+ />
+ }
+
+ @if (compareData) {
-
-
- }
+ }
+
+
+