ATLAS-5329: Atlas React UI: Long classification names overflow and br…

[Brijesh619]

…eak the layout in the Classification Distribution

ATLAS-5329: UI: Long classification names break the layout in the Classification Distribution Chart

What changes were proposed in this pull request?

In the React UI dashboard, when a classification or entity with an exceptionally long, continuous name (without spaces) appears in the Classification Distribution Card, the Recharts SVG text fails to wrap, causing it to overflow and break the widget layout.

This PR fixes the issue by introducing a truncation mechanism specifically for the Recharts Y-axis:

1. Dynamic Y-Axis Width: Introduced getClassificationYAxisWidth to dynamically calculate the Y-axis width based on the length of the labels, ensuring no unnecessary dead space is left for short labels, while giving enough room for medium-length ones.
2. SVG Text Truncation: Created truncateClassificationYAxisLabel to cap labels at 30 characters and append an ellipsis (...).
3. Tooltip for Full Name: Updated the custom tick function on the <YAxis> to wrap the truncated label and conditionally render an SVG <title> tag when the label is truncated. This allows users to view the full classification name on hover while preserving the dashboard layout.

How was this patch tested?

• Manual tests:
  1. Created a classification with an exceptionally long name exceeding 30 characters without spaces.
  2. Assigned the classification to multiple entities to ensure it appears in the Classification Distribution Chart.
  3. Verified that the long classification name is correctly truncated with ... on the Y-axis.
  4. Verified that hovering over the truncated label successfully displays the full name via the tooltip.
  5. Verified that standard-length classifications continue to display normally and the chart layout remains intact.

(Please see attached screenshots demonstrating the fixed layout and the hover tooltip behavior)

[Brijesh619]

[Brijesh619]