Brijesh619 opened a new pull request, #737:
URL: https://github.com/apache/atlas/pull/737
## What changes were proposed in this pull request?
**ATLAS-5376: Atlas UI: Relationship cards layout breaking, overlapping, and
tooltip placement issues with long entity names (React & Classic UI)**
This patch addresses several layout and rendering issues on the Entity
Detail "Relationships" tab when dealing with extremely long relationship item
names (e.g., massive queries or Kafka topic names without spaces). These issues
were present in both the modern React UI and the classic UI.
**React UI Changes:**
- **Tooltip Implementation:** Wrapped the `MUILink` for relationship nodes
in a `<LightTooltip>` component so that users can view the full name on hover.
- **Max Width Adjustments:** Reduced the max-width of the React UI
relationship container to `350px` to prevent overlap with the main graph
canvas.
- **Text Truncation:** Inherited CSS ellipsis text-truncation from the
`.relationship-node-link` class to ensure long names truncate cleanly with
`...` instead of stretching the container.
**Classic UI Changes:**
- **Flexbox Blowout Fix:** Added `min-width: 0` to flex-column containers in
`relationship.scss` to allow relationship items to shrink properly below their
flex-basis content size.
- **Text Truncation:** Applied `white-space: nowrap; overflow: hidden;
text-overflow: ellipsis;` to `.entity-list-item` and `.relationship-card-link`
in `graph.scss` and `relationship.scss`.
- **Tooltip Initialization:**
- Standardized `.tooltip-inner` in `theme.scss` with a `max-width: 300px`
and `word-break: break-all` to ensure tooltip content wraps correctly rather
than extending horizontally off-screen.
- Dynamically initialized Bootstrap tooltips inside
`RelationshipLayoutView.js` (`$.fn.tooltip`) using `container: 'body'` to
ensure tooltips are not clipped by parent containers with `overflow: hidden`.
## How was this patch tested?
- **Manual Testing:**
- Created test entities with exceptionally long relationship names (over
300+ characters with no spaces).
- Navigated to the "Relationships" tab in both the React UI and the
Classic UI.
- Verified that the relationship side-panel list now properly truncates
the long names with `...` and does not bleed out of its layout boundary or
overlap the center graph.
- Hovered over the truncated items and verified that the tooltips (MUI
Tooltip in React; Bootstrap Tooltip in Classic) appear successfully.
- Verified that the tooltip itself wraps the extremely long text onto
multiple lines within a `300px` box, staying visible on the screen.
--
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]
