Updated solution with code review suggestions

Author: cdavalos7

tensorboard/webapp/metrics/views/card_renderer/card_lazy_loader_test.ts

@@ -109,9 +109,10 @@ describe('card view test', () => {
 
     dispatchedActions = [];
     store = TestBed.inject<Store<State>>(Store) as MockStore<State>;
-    spyOn(store, 'dispatch').and.callFake(((action: Action) => {
+    // Cast to jasmine.Spy for compatibility between NgRx dispatch signature overloads.
+    (spyOn(store, 'dispatch') as jasmine.Spy).and.callFake((action: Action) => {
       dispatchedActions.push(action);
-    }) as any);
+    });
 
     observeSpy = spyOn(IntersectionObserver.prototype, 'observe');
     unobserveSpy = spyOn(IntersectionObserver.prototype, 'unobserve');

tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ts

@@ -75,6 +75,8 @@ type ScalarTooltipDatum = TooltipDatum<
   }
 >;
 
+const MAX_TOOLTIP_ITEMS = 5;
+
 @Component({
   standalone: false,
   selector: 'scalar-card-component',
@@ -149,13 +151,11 @@ export class ScalarCardComponent<Downloader> {
   @ViewChild('dataTableContainer')
   dataTableContainer?: ElementRef;
 
-  readonly MAX_TOOLTIP_ITEMS = 5;
-
   constructor(private readonly ref: ElementRef, private dialog: MatDialog) {}
 
   yScaleType = ScaleType.LINEAR;
   isViewBoxOverridden: boolean = false;
-  tooltipTotalCount = 0;
+  additionalItemsCount = 0;
 
   toggleYScaleType() {
     this.yScaleType =
@@ -227,31 +227,26 @@ export class ScalarCardComponent<Downloader> {
       scalarTooltipData[minIndex].metadata.closest = true;
     }
 
-    let sortedData: ScalarTooltipDatum[];
     switch (this.tooltipSort) {
       case TooltipSort.ASCENDING:
-        sortedData = scalarTooltipData.sort(
-          (a, b) => a.dataPoint.y - b.dataPoint.y
-        );
+        scalarTooltipData.sort((a, b) => a.dataPoint.y - b.dataPoint.y);
         break;
       case TooltipSort.DESCENDING:
-        sortedData = scalarTooltipData.sort(
-          (a, b) => b.dataPoint.y - a.dataPoint.y
-        );
+        scalarTooltipData.sort((a, b) => b.dataPoint.y - a.dataPoint.y);
         break;
       case TooltipSort.NEAREST:
-        sortedData = scalarTooltipData.sort((a, b) => {
+        scalarTooltipData.sort((a, b) => {
           return a.metadata.distToCursorPixels - b.metadata.distToCursorPixels;
         });
         break;
       case TooltipSort.NEAREST_Y:
-        sortedData = scalarTooltipData.sort((a, b) => {
+        scalarTooltipData.sort((a, b) => {
           return a.metadata.distToCursorY - b.metadata.distToCursorY;
         });
         break;
       case TooltipSort.DEFAULT:
       case TooltipSort.ALPHABETICAL:
-        sortedData = scalarTooltipData.sort((a, b) => {
+        scalarTooltipData.sort((a, b) => {
           if (a.metadata.displayName < b.metadata.displayName) {
             return -1;
           }
@@ -263,12 +258,11 @@ export class ScalarCardComponent<Downloader> {
         break;
     }
 
-    this.tooltipTotalCount = sortedData.length;
-    return sortedData.slice(0, this.MAX_TOOLTIP_ITEMS);
-  }
-
-  get additionalItemsCount(): number {
-    return Math.max(0, this.tooltipTotalCount - this.MAX_TOOLTIP_ITEMS);
+    this.additionalItemsCount = Math.max(
+      0,
+      scalarTooltipData.length - MAX_TOOLTIP_ITEMS
+    );
+    return scalarTooltipData.slice(0, MAX_TOOLTIP_ITEMS);
   }
 
   openDataDownloadDialog(): void {