Enhance stats comparison menu and refactor item fetching

Improved the UI for the stats comparison dropdown menu by adding icons and adjusting styling for clarity. Refactored the item fetching logic to use the `ItemsApiService` and simplified parameter subscription handling in components. Additionally, fixed various issues related to comparison data state management.

src/app/item-detail/request-stats/request-stats.component.ts

@@ -2,15 +2,12 @@ import { Component, Input, OnInit, OnDestroy, ViewChild, ElementRef, ChangeDetec
 import { ItemParams } from "src/app/scenario/item-controls/item-controls.model";
 import { bytesToMbps, roundNumberTwoDecimals } from "../calculations";
 import { AnalyzeChartService } from "../../analyze-chart.service";
-import { ItemsApiService } from "src/app/items-api.service";
-import { ToastrService } from "ngx-toastr";
+
 import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
 import html2canvas from "html2canvas";
 import { ExcelService } from "src/app/_services/excel.service";
 import { ItemDetail, ItemStatistics } from "../../items.service.model";
-import { ComparisonChartService } from "../../_services/comparison-chart.service";
 import { ComparisonStatsService } from "../../_services/comparison-stats.service";
-import {ItemStatusValue} from '../item-detail.model';
 
 
 @Component({
@@ -29,6 +26,7 @@ export class RequestStatsComponent implements OnInit, OnDestroy {
   @ViewChild('canvas') canvas: ElementRef;
   @ViewChild('downloadLink') downloadLink: ElementRef;
 
+  comparingData;
   comparedData;
   comparedDataMs;
   labelsData;
@@ -86,6 +84,7 @@ export class RequestStatsComponent implements OnInit, OnDestroy {
         this.comparedData = diffValues
         this.labelsData = diffValues
         this.comparedDataMs = diffValues
+        this.comparingData = data
       }
     });
 
@@ -99,6 +98,7 @@ export class RequestStatsComponent implements OnInit, OnDestroy {
 
   ngOnDestroy() {
     this.analyzeChartService.changeMessage(null);
+    this.comparisonStatsService.setRequestStats(null)
   }
 
   search(query: string) {
@@ -161,7 +161,8 @@ export class RequestStatsComponent implements OnInit, OnDestroy {
   switchComparisonDataUnit() {
     if (this.defaultUnit) {
       this.comparedData = this.labelsData.map((_) => {
-        const labelToBeCompared = this.comparedDataMs.find((__) => __.label === _.label);
+        const labelToBeCompared = this.comparingData.find((__) => __.label === _.label);
+        console.log(labelToBeCompared)
         if (labelToBeCompared) {
           return {
             ..._,

src/app/item-detail/stats-compare/stats-compare.component.css

@@ -29,3 +29,7 @@ thead {
 .compare {
   margin-left: 10px;
 }
+
+.compare-menu-item {
+  margin-left: 10px;
+}

src/app/item-detail/stats-compare/stats-compare.component.html

@@ -1,19 +1,15 @@
 <div ngbDropdown class="d-inline-block">
   <button class="btn btn-sm jtl-btn-primary compare" id="dropdownBasic1" ngbDropdownToggle>Compare</button>
   <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-    <button class="btn btn-sm" (click)="open(content)"><span class="compare-desc">Select Test Report</span></button>
+    <button class="btn btn-sm" (click)="open(content)" ngbDropdownItem><i class="fas fa-exchange-alt"></i><span class="compare-menu-item"> Select Test Report</span></button>
     <button class="btn btn-sm"
-            *ngIf="(itemData.baseId && itemData.baseId !== params.id)"
+            *ngIf="(itemData.baseId && itemData.baseId !== params.id) && !comparingData"
             (click)="quickBaseComparison(itemData.baseId)"
-            ngbDropdownItem>
-      Compare to base run
-<!--      <span class="comparison-desc" *ngIf="comparedData">Comparing to test: <a-->
-<!--        href="/project/{{params.projectName}}/scenario/{{params.scenarioName}}/item/{{comparedMetadata.id}}">{{ comparedMetadata.id }}-->
-<!--        with-->
-<!--        {{ comparedMetadata.maxVu }} VU</a></span>-->
+            ngbDropdownItem><i class="far fa-file"></i>
+      <span class="compare-menu-item"> Compare To Baseline</span>
     </button>
-    <button *ngIf="comparingData" class="btn btn-sm" (click)="resetStatsData()"><span class="compare-desc">Remove Comparison</span></button>
-
+    <button *ngIf="comparingData" class="btn btn-sm" (click)="resetStatsData()" ngbDropdownItem><i class="fas fa-undo-alt"></i><span class="compare-menu-item"> Remove Comparison</span></button>
+    <a *ngIf="comparingData" class="btn btn-sm" ngbDropdownItem target="_blank" href="/project/{{params.projectName}}/scenario/{{params.scenarioName}}/item/{{comparedMetadata.id}}"><i class="fas fa-external-link-alt"></i><span class="compare-menu-item"> Open Comparing Report</span></a>
   </div>
 </div>
 

src/app/item-detail/stats-compare/stats-compare.component.ts

@@ -38,6 +38,7 @@ export class StatsCompareComponent implements OnInit {
     private toastr: ToastrService,
     private modalService: NgbModal,
     private itemsService: ItemsService,
+    private itemApiService: ItemsApiService,
     private itemsApiService: ItemsApiService,
     private route: ActivatedRoute,
     private comparisonChartService: ComparisonChartService,
@@ -46,14 +47,15 @@ export class StatsCompareComponent implements OnInit {
 
   ngOnInit() {
     this.items$ = this.itemsService.items$;
+    this.route.params.subscribe(_ => {
+      this.params = _;
+    });
   }
 
   open(content) {
     this.modalService.open(content, { size: "xl" });
-    this.route.params.subscribe(_ => {
-      this.params = _;
-      this.itemsService.fetchItems(this.params.projectName, this.params.scenarioName, { limit: LIMIT, offset: 0 });
-    });
+    this.itemsService.fetchItems(this.params.projectName, this.params.scenarioName, { limit: LIMIT, offset: 0 });
+
   }
 
   loadMore() {
@@ -85,18 +87,18 @@ export class StatsCompareComponent implements OnInit {
   }
 
   quickBaseComparison(id) {
-    // this.itemsService.fetchItemDetail(
-    //   this.params.projectName,
-    //   this.params.scenarioName,
-    //   id).subscribe(_ => this.itemToCompare({
-    //   statistics: _.statistics,
-    //   maxVu: _.overview.maxVu,
-    //   environment: _.environment,
-    //   plot: _.plot,
-    //   histogramPlotData: _.histogramPlotData,
-    //   extraPlotData: _.extraPlotData,
-    //   id
-    // }));
+    this.itemApiService.fetchItemDetail(
+      this.params.projectName,
+      this.params.scenarioName,
+      id).subscribe(_ => this.itemToCompare({
+      statistics: _.statistics,
+      maxVu: _.overview.maxVu,
+      environment: _.environment,
+      plot: _.plot,
+      histogramPlotData: _.histogramPlotData,
+      extraPlotData: _.extraPlotData,
+      id
+    }));
   }
 
   itemToCompare(data) {