[
https://issues.apache.org/jira/browse/ATLAS-5376?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Brijesh Bhalala updated ATLAS-5376:
-----------------------------------
Description:
On the Entity Detail page, when viewing the "Relationships" tab for an entity,
several layout, truncation, and tooltip rendering issues occur when dealing
with extremely long relationship item names. These issues are present in both
the modern React UI and the classic UI.
*Steps to Reproduce:*
1. Navigate to the Entity Detail page for an entity containing relationship
items with massive string names (e.g., >300 characters without spaces) or an
entity with many relationship categories.
2. Switch to the *Relationships* tab in either the React UI or Classic UI.
3. Observe the layout of the relationship list, text truncation, and tooltip
hover behaviors.
*{*}Actual Behavior:{*}*
* *React UI:*
* The relationship cards grid fails to wrap dynamically, causing cards to
overlap and obscure subsequent items below them.
* Extremely long relationship names expand the invisible bounding box of the
links, which causes the tooltips to spawn wildly off-center and overlap other
UI elements when hovering.
* *Classic UI:*
* Long relationship item names do not cleanly truncate (no ellipsis),
stretching the UI or wrapping inappropriately.
* There is no tooltip support to view the full name if it is cut off.
* When tooltips are forced to render long strings without spaces, the base
tooltip lacks word-breaking logic, causing the text to shoot horizontally off
the screen.
* Double scrollbars appear on the page layout due to vertical height overflow
issues within the relationship tabs.
*Expected Behavior:*
Both UIs should cleanly render relationship categories in a responsive
flex/grid layout that expands and wraps cleanly without overlapping. Extremely
long entity names should cleanly truncate to a single line with an ellipsis
(`...`). Hovering over the truncated text should trigger a perfectly
positioned, word-wrapped tooltip that displays the full name without breaking
the viewport or overlapping the grid.
was:
On the Entity Detail page, when viewing the "Relationships" tab for an entity
(such as a {{{}hive_process{}}}), attributes that are rendered as cards (e.g.,
{{Inputs}} and {{{}Outputs{}}}) fail to push down the subsequent content. As a
result, the cards overlap and obscure the text of the relationship items below
them, making them unreadable and breaking the layout.
*Steps to Reproduce:*
# Navigate to the Entity Detail page for an entity that contains both
card-based relationships (like {{Inputs}} and {{{}Outputs{}}}) and standard
text relationships (e.g., a {{{}hive_process{}}}).
# Switch to the *Relationships* tab.
# Observe the layout of the relationship list.
*Expected Behavior:* The parent container or row for the relationship cards
should expand its height to accommodate the cards. Subsequent relationship
items should be pushed down so that no overlapping occurs.
*Actual Behavior:* The {{Inputs}} and {{Outputs}} cards overflow their vertical
space and visually overlap the relationship text directly below them (such as
the {{hive_column_lineage}} relationships).
*Environment/Context:*
* Component: {{RelationshipsTab}} / {{RelationshipCard}}
* The issue is likely caused by missing clearing elements, fixed heights on
rows, or absolute positioning on the card components.
> Atlas UI: Relationship cards layout breaking, overlapping, and tooltip
> placement issues with long entity names (React & Classic UI)
> -----------------------------------------------------------------------------------------------------------------------------------
>
> Key: ATLAS-5376
> URL: https://issues.apache.org/jira/browse/ATLAS-5376
> Project: Atlas
> Issue Type: Bug
> Components: atlas-core
> Affects Versions: 3.0.0, 2.5.0
> Reporter: Brijesh Bhalala
> Assignee: Brijesh Bhalala
> Priority: Major
> Labels: atlas-react
> Attachments: image.png
>
>
> On the Entity Detail page, when viewing the "Relationships" tab for an
> entity, several layout, truncation, and tooltip rendering issues occur when
> dealing with extremely long relationship item names. These issues are present
> in both the modern React UI and the classic UI.
> *Steps to Reproduce:*
> 1. Navigate to the Entity Detail page for an entity containing relationship
> items with massive string names (e.g., >300 characters without spaces) or an
> entity with many relationship categories.
> 2. Switch to the *Relationships* tab in either the React UI or Classic UI.
> 3. Observe the layout of the relationship list, text truncation, and tooltip
> hover behaviors.
> *{*}Actual Behavior:{*}*
> * *React UI:*
> * The relationship cards grid fails to wrap dynamically, causing cards to
> overlap and obscure subsequent items below them.
> * Extremely long relationship names expand the invisible bounding box of the
> links, which causes the tooltips to spawn wildly off-center and overlap other
> UI elements when hovering.
> * *Classic UI:*
> * Long relationship item names do not cleanly truncate (no ellipsis),
> stretching the UI or wrapping inappropriately.
> * There is no tooltip support to view the full name if it is cut off.
> * When tooltips are forced to render long strings without spaces, the base
> tooltip lacks word-breaking logic, causing the text to shoot horizontally off
> the screen.
> * Double scrollbars appear on the page layout due to vertical height
> overflow issues within the relationship tabs.
> *Expected Behavior:*
> Both UIs should cleanly render relationship categories in a responsive
> flex/grid layout that expands and wraps cleanly without overlapping.
> Extremely long entity names should cleanly truncate to a single line with an
> ellipsis (`...`). Hovering over the truncated text should trigger a perfectly
> positioned, word-wrapped tooltip that displays the full name without breaking
> the viewport or overlapping the grid.
--
This message was sent by Atlassian Jira
(v8.20.10#820010)
