VizTooltip: Pass maxHeight setting to Exemplar tooltips (#100478)

Co-authored-by: Kristina Durivage <kristina.durivage@grafana.com>
Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

public/app/features/visualization/data-hover/DataHoverView.tsx

@@ -23,6 +23,7 @@ export interface Props {
   mode?: TooltipDisplayMode | null;
   header?: string;
   padding?: number;
+  maxHeight?: number;
 }
 
 export interface DisplayValue {
@@ -92,7 +93,16 @@ export function getDisplayValuesAndLinks(
   return { displayValues, links };
 }
 
-export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, header, padding = 0 }: Props) => {
+export const DataHoverView = ({
+  data,
+  rowIndex,
+  columnIndex,
+  sortOrder,
+  mode,
+  header,
+  padding = 0,
+  maxHeight,
+}: Props) => {
   const styles = useStyles2(getStyles, padding);
 
   if (!data || rowIndex == null) {
@@ -108,7 +118,7 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, he
   const { displayValues, links } = dispValuesAndLinks;
 
   if (header === 'Exemplar') {
-    return <ExemplarHoverView displayValues={displayValues} links={links} header={header} />;
+    return <ExemplarHoverView displayValues={displayValues} links={links} header={header} maxHeight={maxHeight} />;
   }
 
   return (

public/app/features/visualization/data-hover/ExemplarHoverView.tsx

@@ -11,10 +11,11 @@ export interface Props {
   displayValues: DisplayValue[];
   links?: LinkModel[];
   header?: string;
+  maxHeight?: number;
 }
 
-export const ExemplarHoverView = ({ displayValues, links, header = 'Exemplar' }: Props) => {
-  const styles = useStyles2(getStyles);
+export const ExemplarHoverView = ({ displayValues, links, header = 'Exemplar', maxHeight }: Props) => {
+  const styles = useStyles2(getStyles, 0, maxHeight);
 
   const time = displayValues.find((val) => val.name === 'Time');
   displayValues = displayValues.filter((val) => val.name !== 'Time'); // time?
@@ -49,7 +50,7 @@ export const ExemplarHoverView = ({ displayValues, links, header = 'Exemplar' }:
   );
 };
 
-const getStyles = (theme: GrafanaTheme2, padding = 0) => {
+const getStyles = (theme: GrafanaTheme2, padding = 0, maxHeight?: number) => {
   return {
     exemplarWrapper: css({
       display: 'flex',
@@ -79,6 +80,8 @@ const getStyles = (theme: GrafanaTheme2, padding = 0) => {
       gap: 4,
       borderTop: `1px solid ${theme.colors.border.medium}`,
       padding: theme.spacing(1),
+      overflowY: 'auto',
+      maxHeight: maxHeight,
     }),
     exemplarFooter: css({
       display: 'flex',

public/app/plugins/panel/heatmap/HeatmapTooltip.tsx

@@ -56,6 +56,7 @@ export const HeatmapTooltip = (props: HeatmapTooltipProps) => {
         rowIndex={props.dataIdxs[2]}
         header={'Exemplar'}
         padding={8}
+        maxHeight={props.maxHeight}
       />
     );
   }

public/app/plugins/panel/heatmap/module.tsx

@@ -1,4 +1,4 @@
-import { FieldConfigProperty, FieldType, identityOverrideProcessor, PanelPlugin } from '@grafana/data';
+import { DataFrame, FieldConfigProperty, FieldType, identityOverrideProcessor, PanelPlugin } from '@grafana/data';
 import { config } from '@grafana/runtime';
 import {
   AxisPlacement,
@@ -442,7 +442,9 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(HeatmapPanel)
       settings: {
         integer: true,
       },
-      showIf: (options) => options.tooltip?.mode === TooltipDisplayMode.Multi,
+      showIf: (options: Options, data: DataFrame[] | undefined, annotations: DataFrame[] | undefined) =>
+        options.tooltip?.mode === TooltipDisplayMode.Multi ||
+        annotations?.some((df) => df.meta?.custom?.resultType === 'exemplar'),
     });
 
     category = ['Legend'];
@@ -459,6 +461,8 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(HeatmapPanel)
       name: 'Color',
       defaultValue: defaultOptions.exemplars.color,
       category,
+      showIf: (options: Options, data: DataFrame[] | undefined, annotations: DataFrame[] | undefined) =>
+        annotations?.some((df) => df.meta?.custom?.resultType === 'exemplar'),
     });
   })
   .setSuggestionsSupplier(new HeatmapSuggestionsSupplier())

public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx

@@ -159,6 +159,7 @@ export const TimeSeriesPanel = ({
                     config={uplotConfig}
                     exemplars={data.annotations}
                     timeZone={timeZone}
+                    maxHeight={options.tooltip.maxHeight}
                   />
                 )}
                 {((canEditThresholds && onThresholdsChange) || showThresholds) && (

public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx

@@ -29,6 +29,7 @@ interface ExemplarMarkerProps {
   exemplarColor?: string;
   clickedExemplarFieldIndex: DataFrameFieldIndex | undefined;
   setClickedExemplarFieldIndex: React.Dispatch<DataFrameFieldIndex | undefined>;
+  maxHeight?: number;
 }
 
 export const ExemplarMarker = ({
@@ -39,6 +40,7 @@ export const ExemplarMarker = ({
   exemplarColor,
   clickedExemplarFieldIndex,
   setClickedExemplarFieldIndex,
+  maxHeight,
 }: ExemplarMarkerProps) => {
   const styles = useStyles2(getExemplarMarkerStyles);
   const [isOpen, setIsOpen] = useState(false);
@@ -163,7 +165,7 @@ export const ExemplarMarker = ({
     return (
       <div className={styles.tooltip} ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
         {isLocked && <ExemplarModalHeader onClick={onClose} style={exemplarHeaderCustomStyle} />}
-        <ExemplarHoverView displayValues={displayValues} links={links} />
+        <ExemplarHoverView displayValues={displayValues} links={links} maxHeight={maxHeight} />
       </div>
     );
   }, [
@@ -175,6 +177,7 @@ export const ExemplarMarker = ({
     floatingStyles,
     getFloatingProps,
     refs.setFloating,
+    maxHeight,
   ]);
 
   const seriesColor = config

public/app/plugins/panel/timeseries/plugins/ExemplarsPlugin.tsx

@@ -18,9 +18,10 @@ interface ExemplarsPluginProps {
   exemplars: DataFrame[];
   timeZone: TimeZone;
   visibleSeries?: VisibleExemplarLabels;
+  maxHeight?: number;
 }
 
-export const ExemplarsPlugin = ({ exemplars, timeZone, config, visibleSeries }: ExemplarsPluginProps) => {
+export const ExemplarsPlugin = ({ exemplars, timeZone, config, visibleSeries, maxHeight }: ExemplarsPluginProps) => {
   const plotInstance = useRef<uPlot>();
 
   const [lockedExemplarFieldIndex, setLockedExemplarFieldIndex] = useState<DataFrameFieldIndex | undefined>();
@@ -83,10 +84,11 @@ export const ExemplarsPlugin = ({ exemplars, timeZone, config, visibleSeries }:
           dataFrameFieldIndex={dataFrameFieldIndex}
           config={config}
           exemplarColor={markerColor}
+          maxHeight={maxHeight}
         />
       );
     },
-    [config, timeZone, visibleSeries, setLockedExemplarFieldIndex, lockedExemplarFieldIndex]
+    [config, timeZone, visibleSeries, setLockedExemplarFieldIndex, lockedExemplarFieldIndex, maxHeight]
   );
 
   return (