Chore: Refactor tooltip scrollable prop (#87671)

packages/grafana-ui/src/options/builder/tooltip.tsx

@@ -76,6 +76,6 @@ export function addTooltipOptions<T extends OptionsWithTooltip>(
       settings: {
         integer: true,
       },
-      showIf: (options: T) => options.tooltip?.mode !== TooltipDisplayMode.None,
+      showIf: (options: T) => options.tooltip?.mode === TooltipDisplayMode.Multi,
     });
 }

public/app/plugins/panel/barchart/BarChartPanel.tsx

@@ -15,7 +15,6 @@ import {
 import { TooltipHoverMode } from '@grafana/ui/src/components/uPlot/plugins/TooltipPlugin2';
 
 import { TimeSeriesTooltip } from '../timeseries/TimeSeriesTooltip';
-import { isTooltipScrollable } from '../timeseries/utils';
 
 import { BarChartLegend, hasVisibleLegendSeries } from './BarChartLegend';
 import { Options } from './panelcfg.gen';
@@ -171,7 +170,6 @@ export const BarChartPanel = (props: PanelProps<Options>) => {
                     mode={options.tooltip.mode}
                     sortOrder={options.tooltip.sort}
                     isPinned={isPinned}
-                    scrollable={isTooltipScrollable(options.tooltip)}
                     maxHeight={options.tooltip.maxHeight}
                   />
                 );

public/app/plugins/panel/candlestick/CandlestickPanel.tsx

@@ -26,7 +26,6 @@ import { AnnotationsPlugin2 } from '../timeseries/plugins/AnnotationsPlugin2';
 import { ExemplarsPlugin } from '../timeseries/plugins/ExemplarsPlugin';
 import { OutsideRangePlugin } from '../timeseries/plugins/OutsideRangePlugin';
 import { ThresholdControlsPlugin } from '../timeseries/plugins/ThresholdControlsPlugin';
-import { isTooltipScrollable } from '../timeseries/utils';
 
 import { prepareCandlestickFields } from './fields';
 import { Options, defaultCandlestickColors, VizDisplayMode } from './types';
@@ -306,7 +305,6 @@ export const CandlestickPanel = ({
                       sortOrder={options.tooltip.sort}
                       isPinned={isPinned}
                       annotate={enableAnnotationCreation ? annotate : undefined}
-                      scrollable={isTooltipScrollable(options.tooltip)}
                       maxHeight={options.tooltip.maxHeight}
                     />
                   );

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

@@ -21,7 +21,6 @@ import { readHeatmapRowsCustomMeta } from 'app/features/transformers/calculateHe
 
 import { AnnotationsPlugin2 } from '../timeseries/plugins/AnnotationsPlugin2';
 import { OutsideRangePlugin } from '../timeseries/plugins/OutsideRangePlugin';
-import { isTooltipScrollable } from '../timeseries/utils';
 
 import { HeatmapTooltip } from './HeatmapTooltip';
 import { prepareHeatmapData } from './fields';
@@ -208,7 +207,6 @@ export const HeatmapPanel = ({
                       showColorScale={options.tooltip.showColorScale}
                       panelData={data}
                       annotate={enableAnnotationCreation ? annotate : undefined}
-                      scrollable={isTooltipScrollable(options.tooltip)}
                       maxHeight={options.tooltip.maxHeight}
                     />
                   );

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

@@ -23,6 +23,7 @@ import { DataHoverView } from 'app/features/visualization/data-hover/DataHoverVi
 
 import { getDataLinks } from '../status-history/utils';
 import { getStyles } from '../timeseries/TimeSeriesTooltip';
+import { isTooltipScrollable } from '../timeseries/utils';
 
 import { HeatmapData } from './fields';
 import { renderHistogram } from './renderHistogram';
@@ -39,7 +40,6 @@ interface HeatmapTooltipProps {
   dismiss: () => void;
   panelData: PanelData;
   annotate?: () => void;
-  scrollable?: boolean;
   maxHeight?: number;
 }
 
@@ -66,7 +66,6 @@ const HeatmapHoverCell = ({
   showColorScale = false,
   mode,
   annotate,
-  scrollable,
   maxHeight,
 }: HeatmapTooltipProps) => {
   const index = dataIdxs[1]!;
@@ -358,7 +357,12 @@ const HeatmapHoverCell = ({
   return (
     <div className={styles.wrapper}>
       <VizTooltipHeader item={headerItem} isPinned={isPinned} />
-      <VizTooltipContent items={contentItems} isPinned={isPinned} scrollable={scrollable} maxHeight={maxHeight}>
+      <VizTooltipContent
+        items={contentItems}
+        isPinned={isPinned}
+        scrollable={isTooltipScrollable({ mode, maxHeight })}
+        maxHeight={maxHeight}
+      >
         {customContent?.map((content, i) => (
           <div key={i} style={{ padding: `${theme.spacing(1)} 0` }}>
             {content}

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

@@ -432,7 +432,7 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(HeatmapPanel)
       settings: {
         integer: true,
       },
-      showIf: (options) => options.tooltip?.mode !== TooltipDisplayMode.None,
+      showIf: (options) => options.tooltip?.mode === TooltipDisplayMode.Multi,
     });
 
     category = ['Legend'];

public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx

@@ -13,7 +13,7 @@ import {
 
 import { AnnotationsPlugin2 } from '../timeseries/plugins/AnnotationsPlugin2';
 import { OutsideRangePlugin } from '../timeseries/plugins/OutsideRangePlugin';
-import { getTimezones, isTooltipScrollable } from '../timeseries/utils';
+import { getTimezones } from '../timeseries/utils';
 
 import { StateTimelineTooltip2 } from './StateTimelineTooltip2';
 import { Options } from './panelcfg.gen';
@@ -124,7 +124,6 @@ export const StateTimelinePanel = ({
                       timeRange={timeRange}
                       annotate={enableAnnotationCreation ? annotate : undefined}
                       withDuration={true}
-                      scrollable={isTooltipScrollable(options.tooltip)}
                       maxHeight={options.tooltip.maxHeight}
                     />
                   );

public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx

@@ -12,6 +12,7 @@ import { findNextStateIndex, fmtDuration } from 'app/core/components/TimelineCha
 
 import { getDataLinks } from '../status-history/utils';
 import { TimeSeriesTooltipProps, getStyles } from '../timeseries/TimeSeriesTooltip';
+import { isTooltipScrollable } from '../timeseries/utils';
 
 interface StateTimelineTooltip2Props extends TimeSeriesTooltipProps {
   timeRange: TimeRange;
@@ -24,7 +25,6 @@ export const StateTimelineTooltip2 = ({
   seriesIdx,
   mode = TooltipDisplayMode.Single,
   sortOrder = SortOrder.None,
-  scrollable = false,
   isPinned,
   annotate,
   timeRange,
@@ -83,7 +83,12 @@ export const StateTimelineTooltip2 = ({
   return (
     <div className={styles.wrapper}>
       <VizTooltipHeader item={headerItem} isPinned={isPinned} />
-      <VizTooltipContent items={contentItems} isPinned={isPinned} scrollable={scrollable} maxHeight={maxHeight} />
+      <VizTooltipContent
+        items={contentItems}
+        isPinned={isPinned}
+        scrollable={isTooltipScrollable({ mode, maxHeight })}
+        maxHeight={maxHeight}
+      />
       {footer}
     </div>
   );

public/app/plugins/panel/status-history/StatusHistoryPanel.tsx

@@ -13,7 +13,7 @@ import {
 import { StateTimelineTooltip2 } from '../state-timeline/StateTimelineTooltip2';
 import { AnnotationsPlugin2 } from '../timeseries/plugins/AnnotationsPlugin2';
 import { OutsideRangePlugin } from '../timeseries/plugins/OutsideRangePlugin';
-import { getTimezones, isTooltipScrollable } from '../timeseries/utils';
+import { getTimezones } from '../timeseries/utils';
 
 import { Options } from './panelcfg.gen';
 
@@ -129,7 +129,6 @@ export const StatusHistoryPanel = ({
                       timeRange={timeRange}
                       annotate={enableAnnotationCreation ? annotate : undefined}
                       withDuration={false}
-                      scrollable={isTooltipScrollable(options.tooltip)}
                       maxHeight={options.tooltip.maxHeight}
                     />
                   );

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

@@ -15,7 +15,7 @@ import { ExemplarsPlugin, getVisibleLabels } from './plugins/ExemplarsPlugin';
 import { OutsideRangePlugin } from './plugins/OutsideRangePlugin';
 import { ThresholdControlsPlugin } from './plugins/ThresholdControlsPlugin';
 import { getPrepareTimeseriesSuggestion } from './suggestions';
-import { getTimezones, isTooltipScrollable, prepareGraphableFields } from './utils';
+import { getTimezones, prepareGraphableFields } from './utils';
 
 interface TimeSeriesPanelProps extends PanelProps<Options> {}
 
@@ -130,7 +130,6 @@ export const TimeSeriesPanel = ({
                       sortOrder={options.tooltip.sort}
                       isPinned={isPinned}
                       annotate={enableAnnotationCreation ? annotate : undefined}
-                      scrollable={isTooltipScrollable(options.tooltip)}
                       maxHeight={options.tooltip.maxHeight}
                     />
                   );

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

@@ -13,6 +13,8 @@ import { getContentItems } from '@grafana/ui/src/components/VizTooltip/utils';
 import { getDataLinks } from '../status-history/utils';
 import { fmt } from '../xychart/utils';
 
+import { isTooltipScrollable } from './utils';
+
 // exemplar / annotation / time region hovering?
 // add annotation UI / alert dismiss UI?
 
@@ -31,7 +33,6 @@ export interface TimeSeriesTooltipProps {
   sortOrder?: SortOrder;
 
   isPinned: boolean;
-  scrollable?: boolean;
 
   annotate?: () => void;
   maxHeight?: number;
@@ -44,7 +45,6 @@ export const TimeSeriesTooltip = ({
   seriesIdx,
   mode = TooltipDisplayMode.Single,
   sortOrder = SortOrder.None,
-  scrollable = false,
   isPinned,
   annotate,
   maxHeight,
@@ -94,7 +94,12 @@ export const TimeSeriesTooltip = ({
   return (
     <div className={styles.wrapper}>
       {headerItem != null && <VizTooltipHeader item={headerItem} isPinned={isPinned} />}
-      <VizTooltipContent items={contentItems} isPinned={isPinned} scrollable={scrollable} maxHeight={maxHeight} />
+      <VizTooltipContent
+        items={contentItems}
+        isPinned={isPinned}
+        scrollable={isTooltipScrollable({ mode, maxHeight })}
+        maxHeight={maxHeight}
+      />
       {footer}
     </div>
   );

public/app/plugins/panel/trend/TrendPanel.tsx

@@ -11,7 +11,7 @@ import { TimeSeries } from 'app/core/components/TimeSeries/TimeSeries';
 import { findFieldIndex } from 'app/features/dimensions';
 
 import { TimeSeriesTooltip } from '../timeseries/TimeSeriesTooltip';
-import { isTooltipScrollable, prepareGraphableFields } from '../timeseries/utils';
+import { prepareGraphableFields } from '../timeseries/utils';
 
 import { Options } from './panelcfg.gen';
 
@@ -129,7 +129,6 @@ export const TrendPanel = ({
                       mode={options.tooltip.mode}
                       sortOrder={options.tooltip.sort}
                       isPinned={isPinned}
-                      scrollable={isTooltipScrollable(options.tooltip)}
                       maxHeight={options.tooltip.maxHeight}
                     />
                   );