elastic/kibana

[ML] Filter icons in anomaly charts rendered out of visible view

Open

#200778 opened on Nov 19, 2024

View on GitHub
 (3 comments) (0 reactions) (1 assignee)TypeScript (19,065 stars) (8,021 forks)batch import
:mlFeature:Anomaly Detectionbuggood first issuepapercutv9.5.0

Description

** Items to be completed **

  • ensure values (even long values) are always rendered within the visible area

Kibana version: latest

Describe the bug:

For anomaly charts in the explorer and in dashboard, the filter icons can sometimes be rendered out of the visible area when the field names/values are long.

Expected behavior:

The field names/values should be truncated to ensure the filter icons always show up. A tooltip can be added as a way for users to view the full field name/value.

Screenshots (if relevant):

Contributor guide

Tech stack
typescriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
blocked
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactCSSKibana plugin development basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
35
Research direction
First, locate the anomaly chart component in the Kibana codebase, likely under x pack/plugins/ml/public/application/explorer/ or a similar directory. The issue involves filter icons being cut off when field values are long. Implement CSS text overflow: ellipsis on the field value elements and ensure the filter icons remain visible. Add a title attribute or a tooltip for the full value. Check the existing styling and any related components like the anomaly chart legend. Review comments and any linked PRs for context. Maintain existing theming and accessibility.