Fix issue #86: Add legend

src/app/custom/report-tab/sub-report-tabs/report-commit/report-commit.component.ts

@@ -93,7 +93,7 @@ export class ReportCommitComponent implements OnInit {
   async performSelection() {
     this.comment.body = "[You can inspect artifact " + this.key + " from this link](http://" + window.location.hostname + ":" + window.location.port + "/?name=" + this.key + ")\n";
     if (this.commentInput.addGraph) {
-      this.saveAsPng(true);
+      this.saveAsPng(false);
     }
   }
 
@@ -150,11 +150,11 @@ export class ReportCommitComponent implements OnInit {
     modalRef.componentInstance.templateType = templateType;
   }
 
-  saveAsPng(isWholeGraph: boolean) {
+  async saveAsPng(isWholeGraph: boolean) {
     const options = { bg: 'white', scale: 2, full: isWholeGraph };
-    const base64png: string = this._g.cy.png(options);
+    const base64png =this._g.cy.pngFull(options, ['cy-context-menus-cxt-menu','cy-panzoom']);
     const image = new Image();
-    image.src = base64png;
+    image.src = await base64png;
     image.onload = async () => {
       const canvas = document.createElement('canvas');
       const ctx = canvas.getContext('2d');

src/app/custom/report-tab/sub-report-tabs/report-developer/report-developer.component.ts

@@ -128,7 +128,7 @@ export class ReportDeveloperComponent implements OnInit {
   async performSelection() {
     this.comment.body = "[You can inspect developer " + this.key + " from this link](http://" + window.location.hostname + ":" + window.location.port + "/?name=" +  this.key.replace(" ", "%20") + ")\n";
     if (this.commentInput.addGraph) {
-      this.saveAsPng(true);
+      this.saveAsPng(false);
     }
     if (this.commentInput.addGithub) {
       this.comment.header = "Report  @" + this.key.replace(" ", "") + " ";
@@ -217,11 +217,11 @@ export class ReportDeveloperComponent implements OnInit {
     modalRef.componentInstance.templateType = templateType;
   }
 
-  saveAsPng(isWholeGraph: boolean) {
+  async saveAsPng(isWholeGraph: boolean) {
     const options = { bg: 'white', scale: 2, full: isWholeGraph };
-    const base64png: string = this._g.cy.png(options);
+    const base64png =this._g.cy.pngFull(options, ['cy-context-menus-cxt-menu','cy-panzoom']);
     const image = new Image();
-    image.src = base64png;
+    image.src = await base64png;
     image.onload = async () => {
       const canvas = document.createElement('canvas');
       const ctx = canvas.getContext('2d');

src/app/custom/report-tab/sub-report-tabs/report-file/report-file.component.ts

@@ -93,7 +93,7 @@ export class ReportFileComponent implements OnInit {
   async performSelection() {
     this.comment.body = "[You can inspect artifact " + this.key + " from this link](http://" + window.location.hostname + ":" + window.location.port + "/?name=" + this.key + ")\n";
     if (this.commentInput.addGraph) {
-      this.saveAsPng(true);
+      this.saveAsPng(false);
     }
   }
 
@@ -150,11 +150,11 @@ export class ReportFileComponent implements OnInit {
     modalRef.componentInstance.templateType = templateType;
   }
 
-  saveAsPng(isWholeGraph: boolean) {
+  async saveAsPng(isWholeGraph: boolean) {
     const options = { bg: 'white', scale: 2, full: isWholeGraph };
-    const base64png: string = this._g.cy.png(options);
+    const base64png =this._g.cy.pngFull(options, ['cy-context-menus-cxt-menu','cy-panzoom']);
     const image = new Image();
-    image.src = base64png;
+    image.src = await base64png;
     image.onload = async () => {
       const canvas = document.createElement('canvas');
       const ctx = canvas.getContext('2d');

src/app/custom/report-tab/sub-report-tabs/report-issue/report-issue.component.ts

@@ -123,7 +123,7 @@ export class ReportIssueComponent implements OnInit {
   async performSelection() {
     this.comment.body = "[You can inspect artifact " + this.key + " from this link](http://" + window.location.hostname + ":" + window.location.port + "/?name=" + this.key + ")\n";
     if (this.commentInput.addGraph) {
-      this.saveAsPng(true);
+      this.saveAsPng(false);
     }
     if (this.commentInput.addAnomaly) {
       let commentAnomaly = "";
@@ -178,11 +178,14 @@ export class ReportIssueComponent implements OnInit {
     modalRef.componentInstance.templateType = templateType;
   }
 
-  saveAsPng(isWholeGraph: boolean) {
+  async saveAsPng(isWholeGraph: boolean) {
     const options = { bg: 'white', scale: 2, full: isWholeGraph };
-    const base64png: string = this._g.cy.png(options);
+    const base64png =this._g.cy.pngFull(options, ['cy-context-menus-cxt-menu','cy-panzoom']);
+
+
+
     const image = new Image();
-    image.src = base64png;
+    image.src = await base64png;
     image.onload = async () => {
       const canvas = document.createElement('canvas');
       const ctx = canvas.getContext('2d');

src/app/custom/report-tab/sub-report-tabs/report-pr/report-pr.component.ts

@@ -96,7 +96,7 @@ export class ReportPrComponent implements OnInit {
   async performSelection() {
     this.comment.body = "[You can inspect artifact " + this.key + " from this link](http://" + window.location.hostname + ":" + window.location.port + "/?name=" + this.key + ")\n";
     if (this.commentInput.addGraph) {
-      this.saveAsPng(true);
+      this.saveAsPng(false);
     }
     if (this.commentInput.addReviewer) {
       const cb = (x) => {
@@ -143,8 +143,7 @@ export class ReportPrComponent implements OnInit {
       }
       const cbSub3 = (x) => {
         let ignoredDevelopers = x.data[0][0]
-        console.log(possibleDevelopers, ignoredDevelopers)
-        possibleDevelopers.filter(dev => !ignoredDevelopers.includes(dev));
+        possibleDevelopers = possibleDevelopers.filter(dev => !ignoredDevelopers.includes(dev));
         if (possibleDevelopers.length > 0) {
           this._dbService.runQuery(`CALL findNodesWithMostPathBetweenTable(['${fileIds.join("','")}'], ['COMMENTED'],['${possibleDevelopers.join("','")}'],'recency',3,3, false,
        225, 1, null, false, 'score', 0,${timeMap}, ${d1}, ${d2}, ${inclusionType}, ${timeout}, null)`, cb, DbResponseType.table, false);
@@ -215,11 +214,11 @@ export class ReportPrComponent implements OnInit {
     modalRef.componentInstance.templateType = templateType;
   }
 
-  saveAsPng(isWholeGraph: boolean) {
+  async saveAsPng(isWholeGraph: boolean) {
     const options = { bg: 'white', scale: 2, full: isWholeGraph };
-    const base64png: string = this._g.cy.png(options);
+    const base64png =this._g.cy.pngFull(options, ['cy-context-menus-cxt-menu','cy-panzoom']);
     const image = new Image();
-    image.src = base64png;
+    image.src = await base64png;
     image.onload = async () => {
       const canvas = document.createElement('canvas');
       const ctx = canvas.getContext('2d');

src/app/visuall/app.module.ts

@@ -15,6 +15,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { CytoscapeComponent } from './cytoscape/cytoscape.component';
 import { SaveAsPngModalComponent } from './popups/save-as-png-modal/save-as-png-modal.component';
 import { QuickHelpModalComponent } from './popups/quick-help-modal/quick-help-modal.component';
+import { LegendModalComponent } from './popups/legend-modal/legend-modal.component';
 import { AboutModalComponent } from './popups/about-modal/about-modal.component';
 import {ProjectAboutModalComponent} from './popups/project-about-modal/project-about-modal-component';
 import { ObjectTabComponent } from './operation-tabs/object-tab/object-tab.component';
@@ -51,6 +52,7 @@ import {ProjectBuilderDialogComponent} from './navbar/project-builder/project-bu
     CytoscapeComponent,
     SaveAsPngModalComponent,
     QuickHelpModalComponent,
+    LegendModalComponent,
     AboutModalComponent,
     ProjectAboutModalComponent,
     ObjectTabComponent,

src/app/visuall/navbar/navbar.component.ts

@@ -6,6 +6,7 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { SaveAsPngModalComponent } from '../popups/save-as-png-modal/save-as-png-modal.component';
 import { AboutModalComponent } from '../popups/about-modal/about-modal.component';
 import { QuickHelpModalComponent } from '../popups/quick-help-modal/quick-help-modal.component';
+import { LegendModalComponent } from '../popups/legend-modal/legend-modal.component';
 import { NavbarCustomizationService } from '../../custom/navbar-customization.service';
 import { NavbarDropdown, NavbarAction } from './inavbar';
 import { UserProfileService } from '../user-profile.service';
@@ -80,7 +81,8 @@ export class NavbarComponent implements OnInit, OnDestroy {
       },
       {
         dropdown: 'Help', actions: [{ txt: 'Quick Help', id: 'nbi50', fn: 'openQuickHelp', isStd: true },
-        { txt: 'About', id: 'nbi51', fn: 'openAbout', isStd: true }]
+        { txt: 'Legend', id: 'nbi51', fn: 'openLegend', isStd: true },
+        { txt: 'About', id: 'nbi52', fn: 'openAbout', isStd: true }]
       },
       {
         dropdown: 'Data', actions: [{ txt: 'Sample Data', id: 'nbi60', fn: 'getSampleData', isStd: true },
@@ -185,6 +187,8 @@ export class NavbarComponent implements OnInit, OnDestroy {
 
   openQuickHelp() { this._modalService.open(QuickHelpModalComponent); }
 
+  openLegend() { this._modalService.open(LegendModalComponent); }
+
   openAbout() { this._modalService.open(AboutModalComponent); }
 
   collapseAllEdges() { this._cyService.collapseMultiEdges(); }

src/app/visuall/popups/legend-modal/legend-modal.component.css

@@ -0,0 +1,31 @@
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .modal-body {
+    padding: 20px; /* Adjust as needed */
+  }
+
+  .legend-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+
+  .legend-item {
+    text-align: center;
+  }
+
+
+  .legend-item2 img {
+    max-width: 100%; 
+    margin-bottom: 10px; 
+  }
+
+  .legend-item1 img {
+    max-width: 70%; 
+    margin-bottom: 10px; 
+  }
+

src/app/visuall/popups/legend-modal/legend-modal.component.html

@@ -0,0 +1,21 @@
+<!-- Modal legend -->
+<div class="modal-header">
+  <div class="modal-title va-heading1 text-center">Legend</div>
+  <div>
+    <button #closeBtn type="button" class="btn-close" data-dismiss="modal" aria-label="Close"
+      (click)="activeModal.dismiss('Cross click')"></button>
+  </div>
+</div>
+<div class="modal-body text-center">
+  <div class="legend-container">
+    <div class="legend-item1">
+      <div class="va-heading1">Nodes</div>
+      <img src="assets/img/legend/nodes.svg" title="Node types">
+
+    </div>
+    <div class="legend-item2">
+      <div class="va-heading1">Edges</div>
+      <img src="assets/img/legend/edges.svg" title="Edge types">
+    </div>
+  </div>
+</div>

src/app/visuall/popups/legend-modal/legend-modal.component.ts

@@ -0,0 +1,18 @@
+import { Component, ViewChild, AfterViewChecked, ElementRef } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'legend-modal',
+  templateUrl: './legend-modal.component.html',
+  styleUrls: ['./legend-modal.component.css']
+})
+export class LegendModalComponent implements AfterViewChecked {
+  @ViewChild('closeBtn', { static: false }) closeBtnRef: ElementRef;
+
+  constructor(public activeModal: NgbActiveModal) { }
+
+  ngAfterViewChecked() {
+    this.closeBtnRef.nativeElement.blur();
+  }
+
+}

src/app/visuall/toolbar/toolbar.component.ts

@@ -4,6 +4,7 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { SaveAsPngModalComponent } from '../popups/save-as-png-modal/save-as-png-modal.component';
 import { AboutModalComponent } from '../popups/about-modal/about-modal.component';
 import { QuickHelpModalComponent } from '../popups/quick-help-modal/quick-help-modal.component';
+import { LegendModalComponent } from '../popups/legend-modal/legend-modal.component';
 import { GlobalVariableService } from '../global-variable.service';
 import { getPropNamesFromObj } from '../constants';
 import { ToolbarCustomizationService } from '../../custom/toolbar-customization.service';
@@ -58,7 +59,8 @@ export class ToolbarComponent implements OnInit, AfterViewInit, OnDestroy {
         { imgSrc: 'assets/img/toolbar/layout-static.svg', title: 'Recalculate Layout', fn: 'reLayout', isStd: true, isRegular: true }]
       },
       {
-        div: 5, items: [{ imgSrc: 'assets/img/toolbar/quick-help.svg', title: 'Quick Help', fn: 'openQuickHelp', isStd: true, isRegular: true },
+        div: 5, items: [{ imgSrc: 'assets/img/toolbar/quick-help.svg', title: 'Quick Help', fn: 'openQuickHelp', isStd: true, isRegular: true }, 
+        { imgSrc: 'assets/img/toolbar/legend.svg', title: 'Legend', fn: 'openLegend', isStd: true, isRegular: true },
         { imgSrc: 'assets/img/toolbar/about.svg', title: 'About', fn: 'openAbout', isStd: true, isRegular: true }]
       },
     ];
@@ -188,6 +190,8 @@ export class ToolbarComponent implements OnInit, AfterViewInit, OnDestroy {
 
   openAbout() { this.modalService.open(AboutModalComponent); }
 
+  openLegend() { this.modalService.open(LegendModalComponent); }
+
   showHideGraphHistory() {
     const v = this._g.showHideGraphHistory.getValue();
     this._g.showHideGraphHistory.next(!v);