Brijesh619 opened a new pull request, #681:
URL: https://github.com/apache/atlas/pull/681
…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)*
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
