[BUG] Metric Visualization text value is not fully displayed/partly truncated (CSS line height issue)

Describe the bug

For metric visualizations, the displayed text is not displayed/truncated at the bottom.
It only affects letters that protrude downwards like @, p, q, j, ...

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Add new visualization'
2. Click on 'metric'
3. Create a new metric visualization and press save
4. Gather data (incls. values with letters that protrude downwards like @, p , q, j...)
5. See text value in metric visualization
6. See error

Expected behavior
Letters of values in metric visualizations should not be truncated and be fully displayed.

OpenSearch Version
Official Docker-image: opensearchproject/opensearch:1.3.2

Dashboards Version
Official Docker-image: opensearchproject/opensearch-dashboards:1.3.2

Plugins

Please list all plugins currently enabled.

Screenshots

Host/Environment (please complete the following information):

• OS: Linux/Debian
• Browser and version: Chrome/102.0.5005.61 (Official Build) (x86_64

Additional context

Add any other context about the problem here

From my point of view the problem exists due to a missing CSS line height setting in CSS class '.mtrVis__value'
It could be fixed by adapting the following CSS settings:

From current CSS values:
.mtrVis__value {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
font-weight: 700;
}

To new fixed CSS values:
.mtrVis__value {
max-width: 100%;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
word-wrap: normal !important;
font-weight: 700;
line-height: normal; # This is the fixing line
}

I hope I was able to support you at least a little and would like to thank you again for your commitment and the great product!

All the best
Patrick

[kavilla]

Hello @netimate,

I see you have the propose changes, did you want to raise a PR with these changes?

Will assign @joshuarrrr to follow-up if you prefer we take it over then let us know!

[Triage] We should follow-up if this is the correct class to target. And then let UX team know what the CSS values are because they are working on global spacing via tagging them on PR.
cc: @kgcreative @opensearch-project/opensearch-ux

[joshuarrrr]

I took a little time to look at the existing implementation of the metric visualization. While there are likely a number of other ways we could improve the rendering component itself, I think the proposed solution of setting line-height: normal; on either .mtrVis__value (or, alternatively, on .mtrVis__container) is the best short-term fix.

Findings

The metric visualization component has some quirks in the way it's currently implemented.

1. The visualization options panel allow the user to specify any font size for the metric value between 12 and 120 pts (why pts is chosen as the fixed unit is not explained).
2. The implementation doesn't use any EUI components, it just passes the user-configured options as inline styles:

   OpenSearch-Dashboards/src/plugins/vis_type_metric/public/components/metric_vis_value.tsx

   Lines 62 to 65 in 665424e

   	const metricValueStyle = {
   	fontSize: `${fontSize}pt`,
   	color: metric.color,
   	};

3. It also uses formatters to produce and inject raw HTML:

   OpenSearch-Dashboards/src/plugins/vis_type_metric/public/components/metric_vis_value.tsx

   Lines 86 to 94 in 665424e

   	/*
   	* Justification for dangerouslySetInnerHTML:
   	* This is one of the visualizations which makes use of the HTML field formatters.
   	* Since these formatters produce raw HTML, this visualization needs to be able to render them as-is, relying
   	* on the field formatter to only produce safe HTML.
   	* `metric.value` is set by the MetricVisComponent, so this component must make sure this value never contains
   	* any unsafe HTML (e.g. by bypassing the field formatter).
   	*/
   	dangerouslySetInnerHTML={{ __html: metric.value }} // eslint-disable-line react/no-danger

4. It appears the the metric value is intended to truncate long lines, but for that to work, we'd need to set a max-width on mtrVis__container (or otherwise set the parent width). Note that, even though we never effectively truncate, the inclusion of the truncation styles make the reported bug worse, by preventing wrapping and hiding overflow (what actually accounts for the descenders appearing clipped):

   OpenSearch-Dashboards/src/plugins/vis_type_metric/public/components/metric_vis.scss

   Lines 16 to 17 in 6d1675c

   	.mtrVis__value {
   	@include euiTextTruncate;

Because of 2. (and 4), absent any other styling, the line-height value falls back to the body reset value of 1, with all overflow hidden.

From the look of it, 3. also seems like a design decision we may want to revisit. The HTML formatter logic is fairly complex, and even allows for multiline output (if the values contain multiline text). If we want to continue to use this approach, the metric visualization should be able to nicely display anything the formatter may spit out. Edge cases include concatenation aggregates, such as this absurd configuration (shown with truncation disabled for illustration purposes):

Hello @kavilla @joshuarrrr ,

thanks in advance for your quick and competent action!

I would kindly ask you to take over the further steps in this case.

For future requests I will be happy to set up the project locally in order to be able to request PR directly.

Thank you for your support and time it is a pleasure to work with you

All the best
Patrick

[joshuarrrr]

Got it, thanks @netimate, I'll go ahead and make the PR.