Improve UX reducing timeseries tooltip to max 5 items (#7046)

## Motivation for features / changes

Limits tooltip display to 5 items and adds a legend indicating
additional items when there are more than 5 series.
This prevents tooltips from becoming too large and improves readability
and usability when many series are present.



## Technical description of changes

- Tooltip data is limited to a maximum of 5 items to avoid oversized
tooltips.
- When more than 5 items exist, a legend row is added showing the count
of additional items.
  - Example: “3 additional items” when 8 total items exist.
  - Correctly handles singular and plural cases (“1 item” vs “2 items”).
- Updated tooltip templates in the following components:
  - **Scalar Card Component**: Custom tooltip template updated.
  - **Line Chart Interactive View**: Default tooltip template updated.
- Tooltip data is pre-computed during data updates instead of calling
functions from templates.
  - This reduces change detection overhead and improves performance.
- Handles edge cases such as empty data, exactly 5 items, and different
numbers of columns in the tooltip table.
- Removes the tooltip scroll, which was not providing useful
interaction.



## Screenshots of UI changes

<img width="859" height="659" alt="Screenshot 2025-12-12 at 1 33 32 p m"
src="https://github.com/user-attachments/assets/1d663f89-b6b4-4331-a156-b1cc5aca99aa"
/>


## Detailed steps to verify changes work correctly

1. Load a timeseries chart with 5 or fewer series.
   - Verify the tooltip displays all items without a legend.
2. Load a timeseries chart with more than 5 series.
   - Verify the tooltip displays only the first 5 items.
- Verify a legend row appears indicating the number of additional items.
3. Test scenarios with exactly 6 items and more than 10 items.
   - Confirm correct singular/plural text is displayed.
4. Verify behavior in both:
   - Scalar cards
   - Default line chart tooltips
5. Confirm the tooltip no longer shows a scroll and remains readable.
6. Run tests:
   ```bash
   bazel test //tensorboard/webapp:karma_test_chromium-local

Author: cdavalos7

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

@@ -109,7 +109,8 @@ 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);
     });
 

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

@@ -65,7 +65,8 @@ 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);
     });
     store.overrideSelector(selectors.getRunColorMap, {});

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

@@ -267,9 +267,12 @@ describe('histogram card', () => {
       provideMockCardSeriesData(selectSpy, PluginType.HISTOGRAMS, 'card1');
 
       dispatchedActions = [];
-      spyOn(store, 'dispatch').and.callFake((action: Action) => {
-        dispatchedActions.push(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);
+        }
+      );
     });
 
     it('dispatches metricsCardFullSizeToggled on full size toggle', () => {
@@ -301,9 +304,12 @@ describe('histogram card', () => {
       const fixture = createHistogramCardContainer();
       fixture.detectChanges();
       const dispatchedActions: Action[] = [];
-      spyOn(store, 'dispatch').and.callFake((action: Action) => {
-        dispatchedActions.push(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);
+        }
+      );
 
       const histogramWidget = fixture.debugElement.query(
         By.directive(TestableHistogramWidget)
@@ -584,9 +590,12 @@ describe('histogram card', () => {
         const fixture = createHistogramCardContainer();
         fixture.detectChanges();
         const dispatchedActions: Action[] = [];
-        spyOn(store, 'dispatch').and.callFake((action: Action) => {
-          dispatchedActions.push(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);
+          }
+        );
 
         const histogramWidget = fixture.debugElement.query(
           By.directive(TestableHistogramWidget)

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

@@ -107,7 +107,8 @@ describe('image card', () => {
     store = TestBed.inject<Store<State>>(Store) as MockStore<State>;
     dataSource = TestBed.inject<MetricsDataSource>(MetricsDataSource);
     selectSpy = spyOn(store, 'select').and.callThrough();
-    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);
     });
 

tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html

@@ -178,6 +178,12 @@
               </td>
             </tr>
           </ng-container>
+          <tr class="legend" *ngIf="additionalItemsCount > 0">
+            <td colspan="100">
+              {{ additionalItemsCount }} additional {{ additionalItemsCount ===
+              1 ? 'item' : 'items' }}
+            </td>
+          </tr>
         </tbody>
       </table>
     </ng-template>

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

@@ -115,13 +115,21 @@ $_data_table_initial_height: 100px;
 }
 
 .tooltip {
-  border-spacing: 4px;
+  border-spacing: 8px;
   font-size: 13px;
 
   th {
     text-align: left;
   }
 
+  td {
+    text-align: justify;
+
+    .legend {
+      font-weight: 500;
+    }
+  }
+
   $_circle-size: 12px;
 
   .tooltip-row {

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',
@@ -153,6 +155,7 @@ export class ScalarCardComponent<Downloader> {
 
   yScaleType = ScaleType.LINEAR;
   isViewBoxOverridden: boolean = false;
+  additionalItemsCount = 0;
 
   toggleYScaleType() {
     this.yScaleType =
@@ -226,20 +229,24 @@ export class ScalarCardComponent<Downloader> {
 
     switch (this.tooltipSort) {
       case TooltipSort.ASCENDING:
-        return scalarTooltipData.sort((a, b) => a.dataPoint.y - b.dataPoint.y);
+        scalarTooltipData.sort((a, b) => a.dataPoint.y - b.dataPoint.y);
+        break;
       case TooltipSort.DESCENDING:
-        return scalarTooltipData.sort((a, b) => b.dataPoint.y - a.dataPoint.y);
+        scalarTooltipData.sort((a, b) => b.dataPoint.y - a.dataPoint.y);
+        break;
       case TooltipSort.NEAREST:
-        return scalarTooltipData.sort((a, b) => {
+        scalarTooltipData.sort((a, b) => {
           return a.metadata.distToCursorPixels - b.metadata.distToCursorPixels;
         });
+        break;
       case TooltipSort.NEAREST_Y:
-        return scalarTooltipData.sort((a, b) => {
+        scalarTooltipData.sort((a, b) => {
           return a.metadata.distToCursorY - b.metadata.distToCursorY;
         });
+        break;
       case TooltipSort.DEFAULT:
       case TooltipSort.ALPHABETICAL:
-        return scalarTooltipData.sort((a, b) => {
+        scalarTooltipData.sort((a, b) => {
           if (a.metadata.displayName < b.metadata.displayName) {
             return -1;
           }
@@ -248,7 +255,14 @@ export class ScalarCardComponent<Downloader> {
           }
           return 0;
         });
+        break;
     }
+
+    this.additionalItemsCount = Math.max(
+      0,
+      scalarTooltipData.length - MAX_TOOLTIP_ITEMS
+    );
+    return scalarTooltipData.slice(0, MAX_TOOLTIP_ITEMS);
   }
 
   openDataDownloadDialog(): void {

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

@@ -461,7 +461,8 @@ describe('scalar card line chart', () => {
     store.overrideSelector(selectors.getMetricsCardUserViewBox, null);
 
     dispatchedActions = [];
-    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);
     });
   });

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

@@ -408,7 +408,8 @@ describe('scalar card', () => {
     store.overrideSelector(selectors.getMetricsCardUserViewBox, null);
 
     dispatchedActions = [];
-    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);
     });
   });
@@ -1885,6 +1886,107 @@ describe('scalar card', () => {
         ['', 'world', '-500', '1,000', anyString, anyString],
       ]);
     }));
+
+    describe('tooltip item limiting and legend', () => {
+      const colors = [
+        '#00f',
+        '#0f0',
+        '#f00',
+        '#ff0',
+        '#0ff',
+        '#f0f',
+        '#fff',
+        '#000',
+      ];
+
+      function buildTooltipData(count: number) {
+        return Array.from({length: count}, (_, i) =>
+          buildTooltipDatum({
+            id: `row${i + 1}`,
+            type: SeriesType.ORIGINAL,
+            displayName: `Row ${i + 1}`,
+            alias: null,
+            visible: true,
+            color: colors[i % colors.length],
+          })
+        );
+      }
+
+      function getLegendRow(fixture: ComponentFixture<ScalarCardContainer>) {
+        return fixture.debugElement.query(By.css('table.tooltip tr.legend'));
+      }
+
+      it('displays all items when there are 5 or fewer', fakeAsync(() => {
+        store.overrideSelector(selectors.getMetricsScalarSmoothing, 0);
+        const fixture = createComponent('card1');
+        setTooltipData(fixture, buildTooltipData(5));
+        fixture.detectChanges();
+
+        expect(fixture.debugElement.queryAll(Selector.TOOLTIP_ROW).length).toBe(
+          5
+        );
+        expect(getLegendRow(fixture)).toBeNull();
+      }));
+
+      it('limits tooltip to 5 items when there are more than 5', fakeAsync(() => {
+        store.overrideSelector(selectors.getMetricsScalarSmoothing, 0);
+        const fixture = createComponent('card1');
+        setTooltipData(fixture, buildTooltipData(7));
+        fixture.detectChanges();
+
+        expect(fixture.debugElement.queryAll(Selector.TOOLTIP_ROW).length).toBe(
+          5
+        );
+      }));
+
+      it('shows legend with singular text for 1 additional item', fakeAsync(() => {
+        store.overrideSelector(selectors.getMetricsScalarSmoothing, 0);
+        const fixture = createComponent('card1');
+        setTooltipData(fixture, buildTooltipData(6));
+        fixture.detectChanges();
+
+        const legendRow = getLegendRow(fixture);
+        expect(legendRow).not.toBeNull();
+        expect(legendRow.nativeElement.textContent.trim()).toBe(
+          '1 additional item'
+        );
+      }));
+
+      it('shows legend with plural text for multiple additional items', fakeAsync(() => {
+        store.overrideSelector(selectors.getMetricsScalarSmoothing, 0);
+        const fixture = createComponent('card1');
+        setTooltipData(fixture, buildTooltipData(8));
+        fixture.detectChanges();
+
+        const legendRow = getLegendRow(fixture);
+        expect(legendRow).not.toBeNull();
+        expect(legendRow.nativeElement.textContent.trim()).toBe(
+          '3 additional items'
+        );
+      }));
+
+      it('does not show legend when there are exactly 5 items', fakeAsync(() => {
+        store.overrideSelector(selectors.getMetricsScalarSmoothing, 0);
+        const fixture = createComponent('card1');
+        setTooltipData(fixture, buildTooltipData(5));
+        fixture.detectChanges();
+
+        expect(getLegendRow(fixture)).toBeNull();
+      }));
+
+      it('shows legend with correct colspan when smoothing is enabled', fakeAsync(() => {
+        store.overrideSelector(selectors.getMetricsScalarSmoothing, 0.5);
+        const fixture = createComponent('card1');
+        setTooltipData(fixture, buildTooltipData(6));
+        fixture.detectChanges();
+
+        const legendRow = getLegendRow(fixture);
+        expect(legendRow).not.toBeNull();
+        expect(
+          legendRow.query(By.css('td')).nativeElement.getAttribute('colspan')
+        ).toBe('100');
+      }));
+    });
   });
 
   describe('non-monotonic increase in x-axis', () => {