Chore: Refactor tooltip scrollable prop (#87671)

2025-02-25 18:55:37 -06:00 · 2024-05-10 18:19:42 -06:00
parent ddde7f1056
commit f706c78ea1
12 changed files with 28 additions and 24 deletions
--- a/public/app/plugins/panel/barchart/BarChartPanel.tsx
+++ b/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}
                  />
                );
--- a/public/app/plugins/panel/candlestick/CandlestickPanel.tsx
+++ b/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}
                    />
                  );
--- a/public/app/plugins/panel/heatmap/HeatmapPanel.tsx
+++ b/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}
                    />
                  );
--- a/public/app/plugins/panel/heatmap/HeatmapTooltip.tsx
+++ b/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}
--- a/public/app/plugins/panel/heatmap/module.tsx
+++ b/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'];
--- a/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
+++ b/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}
                    />
                  );
--- a/public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx
+++ b/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>
  );
--- a/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
+++ b/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}
                    />
                  );
--- a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
+++ b/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}
                    />
                  );
--- a/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx
+++ b/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>
  );
--- a/public/app/plugins/panel/trend/TrendPanel.tsx
+++ b/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}
                    />
                  );