Skip to content

feat(frontend): truncate long operator descriptions with ellipsis and tooltip#5677

Open
rbelavadi wants to merge 2 commits into
apache:mainfrom
rbelavadi:fix/4494-truncate-operator-description
Open

feat(frontend): truncate long operator descriptions with ellipsis and tooltip#5677
rbelavadi wants to merge 2 commits into
apache:mainfrom
rbelavadi:fix/4494-truncate-operator-description

Conversation

@rbelavadi

@rbelavadi rbelavadi commented Jun 13, 2026

Copy link
Copy Markdown

What changes were proposed in this PR?

Fixes the description truncation part of #4494 (operator name truncation was already addressed separately per maintainer comment).

Long operator descriptions in the property editor panel break the layout and make the panel harder to read. This change clamps the description text to 3 lines with an ellipsis, and shows the full description in a tooltip on hover using the existing nz-tooltip component already used throughout the project.

Before: long descriptions overflow with no limit
before

After: descriptions clamp to 3 lines with ..., full text visible on hover
after without hover

after with hover

Any related issues, documentation, discussions?

Fixes #4494

How was this PR tested?

Added 2 unit tests to operator-property-edit-frame.component.spec.ts:

  • should truncate text with CSS line-clamp when description is long
  • should show tooltip attribute on description container

All existing tests continue to pass.

Was this PR authored or co-authored using generative AI tooling?

Co-authored using Claude (Anthropic). Changes were reviewed and verified
by the author.

@github-actions github-actions Bot added fix frontend Changes related to the frontend GUI labels Jun 13, 2026
@github-actions

Copy link
Copy Markdown
Contributor

👋 Thanks for your first contribution to Texera, @rbelavadi!

If you're looking for a good place to start, browse issues labeled starter-task; they're scoped to be approachable for newcomers.

You can drive common housekeeping yourself by commenting one of these commands on its own line:

  • Issues. Comment /take to assign an open issue to yourself, or /untake to release it. You can find unclaimed work with the search filter is:issue is:open no:assignee.
  • Sub-issues. To link issues into a parent/child hierarchy, comment /sub-issue #5166 #5222 on the parent to attach those children (or /unsub-issue #5166 #5222 to detach them). From a child issue, comment /parent-issue #5166 to set its parent, or /unparent-issue to clear it (the current parent is detected automatically). References may be written as #5166 or as a bare 5166; cross-repository references are not supported.
  • Pull requests (author only). Comment /request-review @user to request a review from someone, or /unrequest-review @user to withdraw that request.

Each command must match exactly: /take this will not work, only /take does. For the full contribution flow, see CONTRIBUTING.md.

@xuang7

xuang7 commented Jun 13, 2026

Copy link
Copy Markdown
Contributor

Hi @rbelavadi, thanks for the PR! Since this PR includes a UI improvement, could you please add a screenshot to the PR description?

@Yicong-Huang

Copy link
Copy Markdown
Contributor

Hi @rbelavadi thanks for the PR. For UI changes, please include screenshot before and after so reviewer can understand the change. Also please add test cases to guard this behavior programmatically. Thanks.

@rbelavadi

Copy link
Copy Markdown
Author

Hi @rbelavadi thanks for the PR. For UI changes, please include screenshot before and after so reviewer can understand the change. Also please add test cases to guard this behavior programmatically. Thanks.

Hi, thank you for the feedback. I'm working on it right now.

@xuang7 xuang7 changed the title fix(frontend): truncate long operator descriptions with ellipsis and tooltip feat(frontend): truncate long operator descriptions with ellipsis and tooltip Jun 14, 2026
@rbelavadi

Copy link
Copy Markdown
Author

Hi @xuang7 and @Yicong-Huang,
I've updated the PR with before/after screenshots and added unit tests as requested. Also fixed a bug where the tooltip attributes were being rendered as plain text, they're now correctly placed as attributes on the container div.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

fix frontend Changes related to the frontend GUI

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Limit displayed operator name and description length in the UI

3 participants