From dd9a503dd0837d4b5b0c2d9eca0b840fa0b9ad9c Mon Sep 17 00:00:00 2001
From: Adela Almasan <88068998+adela-almasan@users.noreply.github.com>
Date: Wed, 24 Jan 2024 10:16:15 -0600
Subject: [PATCH] VizTooltip: No width limit on anchored tooltip (#81017)

---
 .../components/VizTooltip/VizTooltipRow.tsx   |  5 ++--
 .../uPlot/plugins/TooltipPlugin2.tsx          | 10 +++----
 .../data-hover/ExemplarHoverView.tsx          | 27 +++++++++++++------
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx
index e0690ed2fd2..f6f079c511e 100644
--- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx
+++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
@@ -10,7 +10,8 @@ import { Tooltip } from '../Tooltip';
 import { ColorIndicatorPosition, VizTooltipColorIndicator } from './VizTooltipColorIndicator';
 import { ColorPlacement, LabelValue } from './types';
 
-interface Props extends LabelValue {
+interface Props extends Omit<LabelValue, 'value'> {
+  value: string | number | null | ReactNode;
   justify?: string;
   isActive?: boolean; // for series list
   marginRight?: string;
diff --git a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx
index ce2f072ce6a..d7c2259b01a 100644
--- a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx
+++ b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx
@@ -45,7 +45,7 @@ interface TooltipPlugin2Props {
     viaSync: boolean
   ) => React.ReactNode;
 
-  maxWidth?: number;
+  maxWidth?: number | string;
   maxHeight?: number;
 }
 
@@ -115,7 +115,7 @@ export const TooltipPlugin2 = ({
 
   const sizeRef = useRef<TooltipContainerSize>();
 
-  maxWidth ??= DEFAULT_TOOLTIP_WIDTH;
+  maxWidth = isPinned ? 'none' : maxWidth ?? DEFAULT_TOOLTIP_WIDTH;
   maxHeight ??= DEFAULT_TOOLTIP_HEIGHT;
   const styles = useStyles2(getStyles, maxWidth, maxHeight);
 
@@ -503,7 +503,7 @@ export const TooltipPlugin2 = ({
   return null;
 };
 
-const getStyles = (theme: GrafanaTheme2, maxWidth: number, maxHeight: number) => ({
+const getStyles = (theme: GrafanaTheme2, maxWidth: number | string, maxHeight: number) => ({
   tooltipWrapper: css({
     top: 0,
     left: 0,
@@ -515,8 +515,8 @@ const getStyles = (theme: GrafanaTheme2, maxWidth: number, maxHeight: number) =>
     border: `1px solid ${theme.colors.border.weak}`,
     boxShadow: theme.shadows.z2,
     userSelect: 'text',
-    maxWidth: `${maxWidth}px`,
-    maxHeight: `${maxHeight}px`,
+    maxWidth: maxWidth,
+    maxHeight: maxHeight,
     overflowY: 'auto',
   }),
   pinned: css({
diff --git a/public/app/features/visualization/data-hover/ExemplarHoverView.tsx b/public/app/features/visualization/data-hover/ExemplarHoverView.tsx
index 87a36444c9c..4d92189204f 100644
--- a/public/app/features/visualization/data-hover/ExemplarHoverView.tsx
+++ b/public/app/features/visualization/data-hover/ExemplarHoverView.tsx
@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2, LinkModel } from '@grafana/data';
-import { HorizontalGroup, LinkButton, useStyles2 } from '@grafana/ui';
+import { LinkButton, useStyles2 } from '@grafana/ui';
+import { VizTooltipRow } from '@grafana/ui/src/components/VizTooltip/VizTooltipRow';
 import { renderValue } from 'app/plugins/panel/geomap/utils/uiUtils';
 
 import { DisplayValue } from './DataHoverView';
@@ -26,12 +27,17 @@ export const ExemplarHoverView = ({ displayValues, links, header = 'Exemplar' }:
         {time && <span className={styles.time}>{renderValue(time.valueString)}</span>}
       </div>
       <div className={styles.exemplarContent}>
-        {displayValues.map((displayValue, i) => (
-          <HorizontalGroup key={i} justify={'space-between'} align={'center'} spacing={'md'}>
-            <div className={styles.label}>{displayValue.name}</div>
-            <div className={styles.value}>{renderValue(displayValue.valueString)}</div>
-          </HorizontalGroup>
-        ))}
+        {displayValues.map((displayValue, i) => {
+          return (
+            <VizTooltipRow
+              key={i}
+              label={displayValue.name}
+              value={renderValue(displayValue.valueString)}
+              justify={'space-between'}
+              isPinned={false}
+            />
+          );
+        })}
       </div>
       {links && (
         <div className={styles.exemplarFooter}>
@@ -51,12 +57,13 @@ const getStyles = (theme: GrafanaTheme2, padding = 0) => {
     exemplarWrapper: css({
       display: 'flex',
       flexDirection: 'column',
+      flex: 1,
+      gap: 4,
       whiteSpace: 'pre',
       borderRadius: theme.shape.radius.default,
       background: theme.colors.background.primary,
       border: `1px solid ${theme.colors.border.weak}`,
       boxShadow: `0 4px 8px ${theme.colors.background.primary}`,
-      userSelect: 'text',
     }),
     exemplarHeader: css({
       display: 'flex',
@@ -83,6 +90,10 @@ const getStyles = (theme: GrafanaTheme2, padding = 0) => {
       flex: 1,
       borderTop: `1px solid ${theme.colors.border.medium}`,
       padding: theme.spacing(1),
+
+      overflowX: 'auto',
+      overflowY: 'hidden',
+      whiteSpace: 'nowrap',
     }),
     linkButton: css({
       width: 'fit-content',