Improve UX reducing timeseries tooltip to max 5 items

[cdavalos7]

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

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:

   bazel test //tensorboard/webapp:karma_test_chromium-local
   

[arcra]

I think this is to suppress the errors we were getting internally, but this looks like a hack, rather than a proper solution.

Do we know why this is necessary? If so, at least adding comments to clarify would be useful.

[arcra]

The sort method sorts the data in place, so I don't think we need this additional array, and it could be a bit misleading.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

[arcra]

nit: could this be just a top-level constant, instead of being defined inside this class?

[arcra]

nit/optional: Instead of keeping the total count and separately the getter below, consider simply storing the "additional items" and use it directly.

[arcra]

To be honest, I don't quite understand what they were doing here. I don't know why these "test" components are reimplementing a good part of what the component is doing, but this seems like it's not testing the components following best practices.

I think this is just testing that the tooltip template can be specified from outside the component, but then it's not really testing the behavior of the actual tooltip, but the behavior of the "test implementation" (?).

Since this is old code, I'm ok not cleaning this up, but I also don't think there's much point in making changes here if we believe it's kind of weird. (Or perhaps you have a better understanding of the way they're testing this).

I suggest we revert these changes. If you'd like to add tests, we can add separate tests, that are better set up, but also ok omitting tests for this tooltip change. We have internal screen-diff tests that could be sufficient.

Having said that, since you already did all this work, if you prefer to keep what you have, I guess it's fine.