Refactor: refactor compare tab (#512)

* refactor: removed the jqx-widgets library and refactored the compare tab because of it

* refactor: process pr comments

* Test new CICD job

.github/workflows/testing.js.yml

@@ -69,6 +69,18 @@ jobs:
         run: pnpm install --frozen-lockfile
         working-directory: ladybug-frontend
 
+      - name: Install Cypress
+        run: npx cypress install
+        working-directory: ladybug-frontend
+
+      - uses: actions/cache@v4
+        name: Cache Cypress
+        with:
+          path: ~/.cache/Cypress
+          key: ${{ runner.os }}-cypress-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-cypress-
+
       - name: Set Cypress environment variables
         run: cp cypress.env.json.cicd cypress.env.json
         working-directory: ladybug-frontend

angular.json

@@ -55,8 +55,7 @@
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css",
-              "node_modules/font-awesome/css/font-awesome.css",
-              "./node_modules/jqwidgets-ng/jqwidgets/styles/jqx.base.css"
+              "node_modules/font-awesome/css/font-awesome.css"
             ],
             "scripts": []
           },
@@ -129,11 +128,7 @@
             "styles": [
               "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "src/styles.css",
-              "node_modules/jqwidgets-ng/jqwidgets/styles/jqx.base.css"
-            ],
-            "scripts": [
-              "node_modules/jquery/dist/jquery.slim.min.js"
+              "src/styles.css"
             ]
           }
         },

package.json

@@ -47,10 +47,8 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-unicorn": "^54.0.0",
     "font-awesome": "^4.7.0",
-    "jquery": "^3.7.1",
-    "jqwidgets-ng": "^14.1.17",
     "monaco-editor": "0.44.0",
-    "ng-simple-file-tree": "^0.1.13",
+    "ng-simple-file-tree": "^0.1.19",
     "ngx-monaco-editor-v2": "17.0.1",
     "path": "^0.12.7",
     "popper.js": "^1.16.1",

src/app/compare/compare-data.ts

@@ -1,9 +1,6 @@
-import { NodeLinkStrategy } from '../shared/enums/compare-method';
-
 export class CompareData {
   id!: string;
   originalReport: any;
   runResultReport: any;
   viewName: string = '';
-  nodeLinkStrategy: NodeLinkStrategy = NodeLinkStrategy.NONE;
 }

src/app/compare/compare-tree/compare-tree.component.css

@@ -1,18 +1,5 @@
-/*#tree-container {*/
-/*  background: linear-gradient(#e9ecef, #e9ecef) no-repeat center/2px 100%;*/
-/*}*/
-
-.compare-header {
-  display: flex;
-  align-items: center;
-  height: 50px;
-  border-bottom: 1px solid #dee2e6;
-}
-
 .trees-container {
+  display: flex;
+  flex-direction: row;
   height: 46vh;
 }
-
-label {
-  margin: 0;
-}

src/app/compare/compare-tree/compare-tree.component.html

@@ -1,20 +1,4 @@
-<div class="row" id="tree-container">
-  <div class="compare-header col-12 p-2">
-      <label class="p-2">
-        Compare method:
-      </label>
-      <select class="form-control w-fit" (change)="changeNodeLinkStrategy($event)">
-        <option value="PATH" [selected]="nodeLinkStrategy === NodeLinkStrategy.PATH">Path</option>
-        <option value="CHECKPOINT_NUMBER" [selected]="nodeLinkStrategy === NodeLinkStrategy.CHECKPOINT_NUMBER.toString()">Checkpoint number</option>
-        <option value="NONE" [selected]="nodeLinkStrategy === NodeLinkStrategy.NONE.toString()">None</option>
-      </select>
-  </div>
-  <div class="trees-container row col-12 p-2">
-    <div class="col-6 h-100">
-      <jqxTree #leftTreeReference [auto-create]="false" (onItemClick)="nodeSelected($event, true)"></jqxTree>
-    </div>
-    <div class="col-6 h-100">
-      <jqxTree #rightTreeReference [auto-create]="false" (onItemClick)="nodeSelected($event, false)"></jqxTree>
-    </div>
-  </div>
+<div class="trees-container row col-12 p-2">
+  <ng-simple-tree #leftTree class="w-50 h-fit" [options]="leftTreeOptions" (click)="syncTrees('left')"/>
+  <ng-simple-tree #rightTree class="w-50 h-fit" [options]="rightTreeOptions" (click)="syncTrees('right')"/>
 </div>

src/app/compare/compare-tree/compare-tree.component.spec.ts

@@ -1,16 +1,16 @@
 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;
   let fixture: ComponentFixture<CompareTreeComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [jqxTreeModule, CompareTreeComponent, HttpClientTestingModule],
+      imports: [NgSimpleFileTreeModule, CompareTreeComponent, HttpClientTestingModule],
     }).compileComponents();
   });