ATLAS-5376: Atlas UI: Relationship cards layout breaking, overlapping, and tooltip placement issues with long entity names (React & Classic UI) - #737
Conversation
209457a to
6f6b52b
Compare
|
…, and tooltip placement issues with long entity names (React & Classic UI)
Brijesh619
changed the title
|
|
…, and tooltip placement issues with long entity names (React & Classic UI)
| margin-bottom: 5px; | ||
| text-align: left; | ||
|
|
||
| &.entity-list-item { |
There was a problem hiding this comment.
Ellipsis is applied to ul > li.entity-list-item, but buildListItem() in RelationshipLayoutView.js (~lines 359–361) puts long text inside . Ellipsis on
Consider moving truncation to .entity-list-item .entity-type-name (with display: inline-block; max-width: 100%) — same pattern used for .relationship-card-link in relationship.scss. Truncation on
confirm this, and update
| expect(screen.getByTestId('relationshipSVG')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should apply deleted-relation class for deleted entities', () => { |
There was a problem hiding this comment.
This test name implies class verification but only checks SVG rendering. Please assert text-deleted on the link and/or deleted-relation on the
| }); | ||
|
|
||
| describe('Tooltip Rendering', () => { | ||
| it('should render LightTooltip for relationship nodes in drawer', async () => { |
There was a problem hiding this comment.
Please add negative/edge cases: deleted status styling, missing typeName label, and at least one assertion that tooltip title matches full untruncated text. Classic UI tooltip lifecycle has zero automated coverage.
| interface CustomLinkProps { | ||
| href: string; | ||
| status: string; | ||
| guid: string; |
There was a problem hiding this comment.
guid is declared in the interface and destructured but never used.
Remove unused guid from CustomLinkProps and destructuring, or use it (e.g. as key / data-testid).
verify and update
| * limitations under the License. | ||
| */ | ||
|
|
||
| // @ts-nocheck |
There was a problem hiding this comment.
If adding types, consider removing @ts-nocheck incrementally — otherwise the type improvements provide limited value.
|
|
||
| .tooltip-inner { | ||
| max-width: none; | ||
| max-width: 300px; |
There was a problem hiding this comment.
Global Classic UI tooltip width change — possible regression
.tooltip-inner { max-width: 300px } is global. Other Classic UI tooltips that relied on max-width: none may now wrap/truncate unexpectedly.
Scope tooltip max-width to relationship views (e.g. .relationship-node-details .tooltip-inner) instead of changing the global .tooltip-inner rule.
| }.bind(this), | ||
| getdefault = function(options) { | ||
| return "<pre class='entity-type-name' style='color:" + options.color + "'>" + options.name + "</pre>"; | ||
| getdefault = function (options) { |
There was a problem hiding this comment.
Dead code
(~lines 274–336)
getdefault, getWithButton, getEntityTypelist, and getElement are defined but getElement is never called. The list uses buildListItem() (~lines 352–387). Refactored color-class logic in the unused path adds review noise without effect.
getElement/getEntityTypelist appear unused in searchNode. Consider removing dead code or clarifying if another code path uses it. Also, pre-existing return entityTypeHtml + ""; (~line 328) looks like a bug.
| return { nodes: nodes, links: links }; | ||
| }, | ||
| onRender: function() { | ||
| onRender: function () { |
There was a problem hiding this comment.
Large formatting-only diff
~160 lines are whitespace/function() → function () changes unrelated to the fix. Makes review harder.
update this in the changed files
| > | ||
| {name} ({typeName}) | ||
| </MUILink> | ||
| <LightTooltip title={displayLabel}> |
There was a problem hiding this comment.
(~lines 71–84, 541–549)
MUI Tooltip expects a child that holds a ref. MUILink + RouterLink can trigger console warnings. Wrapping in <span style={{ display: 'block', overflow: 'hidden' }}> is safer.
| .tooltip-inner { | ||
| max-width: none; | ||
| max-width: 300px; | ||
| word-wrap: break-word; |
There was a problem hiding this comment.
Deprecated CSS property
word-wrap: break-word is legacy; prefer overflow-wrap: break-word.
2 participants
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:
MUILinkfor relationship nodes in a<LightTooltip>component so that users can view the full name on hover.350pxto prevent overlap with the main graph canvas..relationship-node-linkclass to ensure long names truncate cleanly with...instead of stretching the container..text-active(#1976d2) and.text-deleted(#BB5838) utility classes indetailPage.scssto guarantee visual consistency between the modern React interface and the legacy Backbone interface (replacing the generic.text-bluewhich mismatched the hex code).Classic UI Changes:
min-width: 0to flex-column containers inrelationship.scssto allow relationship items to shrink properly below their flex-basis content size.white-space: nowrap; overflow: hidden; text-overflow: ellipsis;to.entity-list-itemand.relationship-card-linkingraph.scssandrelationship.scss..tooltip-innerintheme.scsswith amax-width: 300pxandword-wrap: break-word(preventing global typography issues) to ensure tooltip content wraps correctly rather than extending horizontally off-screen.RelationshipLayoutView.jsandRelationshipCardsLayoutView.js($.fn.tooltip) usingcontainer: 'body'to ensure tooltips are not clipped by parent containers..html()and within theonDestroylifecycle hooks to prevent accumulating orphaneddiv.tooltipelements in the DOM.titleattributes on parent wrapper tags (like<li>) to prevent overlapping, double-rendering tooltips on hover.How was this patch tested?
...and does not bleed out of its layout boundary or overlap the center graph.300pxbox, staying visible on the screen without splitting normal words in half.npm run testagainstRelationshipLineage.test.tsxto verify standard component rendering and the new<LightTooltip>interaction.npx tsc --noEmitto ensure type safety around the new React implementations.