[Unified Histogram] Unified Histogram UX cleanup

[davismcphee]

The initial Lens integration was completed in #143117, but there are still some outstanding UX issues that should be addressed:

• Currently Unified Histogram displays a tooltip above the breakdown field selector on hover to see the full field name in case it's truncated:
  
  There are some concerns about this popover that should be addressed:

  • It would be preferred if the tooltip didn't show on hover when the field name is not truncated. Checking if the text is truncated should be possible, but would require a bit of work to implement.

  • Since the tooltip is only available on hover, it's unavailable to keyboard users.

  • It might be better not to have the tooltip at all:

    Keyboard users can open the combobox and cycle through the list items using arrow keys. Screen reader users can listen to the list items and select the one that suits them best ... using the titles that appear on hover automatically

    But we would need something like middle truncation to help differentiate between truncated field names, which isn't support by EuiComboBox yet: [EuiComboBox] Consider adding a prop to set truncation in beginning, middle, end eui#6448.

• The top bar above the histogram becomes very crammed on small screens, especially when there are additional items like the 'Reset search' button:
  
  We should consider options to free up space. Some ideas:
  • Move the 'Reset search' button somewhere else.
  • Hide the breakdown field selector behind a button on mobile, similar to this:
    

There are some other concerns we should keep track of, but that we currently can't address because they depend on upstream dependencies:

• The histogram often has inconsistent horizontal padding. This is a combination of how Elastic Charts works and limitations in the options exposed by the Lens embeddable (issue: [Lens] Allow customizing the whitespace in Lens visualizations #145926):
  
• The breakdown field selector truncates field names early and leaves a lot of unused whitespace. This is the default behaviour of the EuiComboBox, but there may be ways to improve this:
  
  

[elasticmachine]

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

[kertal]

Adding something about "Reset changes" ... initial thought to move it to Unsaved changes:

In the discussion offline by @yiyangliu9286 @davismcphee @kertal there was a tendency to move reset functionality to the `Unsaved changes` area, once available

[davismcphee]

@kertal This is definitely something I think we should do. Not only would it free up space, it's also more logical from a user perspective to show near an unsaved changes indicator -- and only when there are actual changes. Obviously design would need to weigh in on how this would look, but IMO it makes sense to do this once we have the unsaved changes badge work complete.

[davismcphee]

I'm going to close this one off because a lot has changed in Discover since the issue was created, and I think most of these concerns have been addressed at this point:

• The tooltip is still shown on the breakdown selector to view the full field name, but the tooltip is now keyboard accessible on focus since we switched the control from a combo box to a button, and the menu entries now use middle truncation to make it easier to differentiate long field names.
• The Unified Histogram top bar has been reworked to no longer include the total hits display, reset button, or chart options menu icon, providing more room for the other controls on small displays.
• In my local testing, the histogram now has more consistent and even padding, so there may not be any changes needed here anymore.
• The early truncation in EuiComboBox is no longer an issue since we replaced the combo box with a button.

If there are specific followups mentioned here that still seem necessary, I would suggest opening separate dedicated issues to track them.