VizTooltip: Scrollable content for long lists (#81524)

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { ReactElement } from 'react';
+import React, { CSSProperties, ReactElement } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
@@ -11,14 +11,22 @@ import { LabelValue } from './types';
 interface Props {
   contentLabelValue: LabelValue[];
   customContent?: ReactElement[];
+  scrollable?: boolean;
   isPinned: boolean;
 }
 
-export const VizTooltipContent = ({ contentLabelValue, customContent, isPinned }: Props) => {
+export const VizTooltipContent = ({ contentLabelValue, customContent, isPinned, scrollable = false }: Props) => {
   const styles = useStyles2(getStyles);
 
+  const scrollableStyle: CSSProperties = scrollable
+    ? {
+        maxHeight: 400,
+        overflowY: 'auto',
+      }
+    : {};
+
   return (
-    <div className={styles.wrapper}>
+    <div className={styles.wrapper} style={scrollableStyle}>
       <div>
         {contentLabelValue.map((labelValue, i) => {
           const { label, value, color, colorIndicator, colorPlacement, isActive } = labelValue;

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

@@ -61,11 +61,12 @@ export const TimeSeriesTooltip = ({
 
   const xFieldFmt = xField.display || getDisplayProcessor({ field: xField, theme });
   let xVal = xFieldFmt(xField!.values[dataIdxs[0]!]).text;
+
   let links: Array<LinkModel<Field>> = [];
   let contentLabelValue: LabelValue[] = [];
 
   // Single mode
-  if (mode === TooltipDisplayMode.Single || isPinned) {
+  if (mode === TooltipDisplayMode.Single) {
     const field = seriesFrame.fields[seriesIdx!];
     if (!field) {
       return null;
@@ -75,6 +76,7 @@ export const TimeSeriesTooltip = ({
     xVal = xFieldFmt(xField!.values[dataIdx]).text;
     const fieldFmt = field.display || getDisplayProcessor({ field, theme });
     const display = fieldFmt(field.values[dataIdx]);
+
     links = getDataLinks(field, dataIdx);
 
     contentLabelValue = [
@@ -88,7 +90,7 @@ export const TimeSeriesTooltip = ({
     ];
   }
 
-  if (mode === TooltipDisplayMode.Multi && !isPinned) {
+  if (mode === TooltipDisplayMode.Multi) {
     const fields = seriesFrame.fields;
     const sortIdx: unknown[] = [];
 
@@ -131,6 +133,12 @@ export const TimeSeriesTooltip = ({
         });
       }
     }
+
+    if (seriesIdx != null) {
+      const field = seriesFrame.fields[seriesIdx];
+      const dataIdx = dataIdxs[seriesIdx]!;
+      links = getDataLinks(field, dataIdx);
+    }
   }
 
   const getHeaderLabel = (): LabelValue => {
@@ -148,7 +156,11 @@ export const TimeSeriesTooltip = ({
     <div>
       <div className={styles.wrapper}>
         <VizTooltipHeader headerLabel={getHeaderLabel()} isPinned={isPinned} />
-        <VizTooltipContent contentLabelValue={getContentLabelValue()} isPinned={isPinned} />
+        <VizTooltipContent
+          contentLabelValue={getContentLabelValue()}
+          isPinned={isPinned}
+          scrollable={mode === TooltipDisplayMode.Multi}
+        />
         {isPinned && <VizTooltipFooter dataLinks={links} annotate={annotate} />}
       </div>
     </div>