From 1d2f271c9550a07fac68b7f176c06e48ed2f0b7d Mon Sep 17 00:00:00 2001 From: aishyandapalli Date: Thu, 27 Feb 2025 15:24:35 -0800 Subject: [PATCH] VizTooltip: Pass `maxHeight` setting to Exemplar tooltips (#100478) Co-authored-by: Kristina Durivage Co-authored-by: Leon Sorokin --- .../visualization/data-hover/DataHoverView.tsx | 14 ++++++++++++-- .../visualization/data-hover/ExemplarHoverView.tsx | 9 ++++++--- .../app/plugins/panel/heatmap/HeatmapTooltip.tsx | 1 + public/app/plugins/panel/heatmap/module.tsx | 8 ++++++-- .../plugins/panel/timeseries/TimeSeriesPanel.tsx | 1 + .../panel/timeseries/plugins/ExemplarMarker.tsx | 5 ++++- .../panel/timeseries/plugins/ExemplarsPlugin.tsx | 6 ++++-- 7 files changed, 34 insertions(+), 10 deletions(-) diff --git a/public/app/features/visualization/data-hover/DataHoverView.tsx b/public/app/features/visualization/data-hover/DataHoverView.tsx index adc593a9a14..79785c94eb2 100644 --- a/public/app/features/visualization/data-hover/DataHoverView.tsx +++ b/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 ; + return ; } return ( diff --git a/public/app/features/visualization/data-hover/ExemplarHoverView.tsx b/public/app/features/visualization/data-hover/ExemplarHoverView.tsx index b353b08abba..b2f17d17333 100644 --- a/public/app/features/visualization/data-hover/ExemplarHoverView.tsx +++ b/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', diff --git a/public/app/plugins/panel/heatmap/HeatmapTooltip.tsx b/public/app/plugins/panel/heatmap/HeatmapTooltip.tsx index 896dbeb1feb..d15b13cd50c 100644 --- a/public/app/plugins/panel/heatmap/HeatmapTooltip.tsx +++ b/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} /> ); } diff --git a/public/app/plugins/panel/heatmap/module.tsx b/public/app/plugins/panel/heatmap/module.tsx index 6ec45e27d9a..ff3dfb38214 100644 --- a/public/app/plugins/panel/heatmap/module.tsx +++ b/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(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(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()) diff --git a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx index f8866b705f3..e4124886ce2 100644 --- a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx +++ b/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) && ( diff --git a/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx b/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx index 54e79e06743..f41e5e3af7a 100644 --- a/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx +++ b/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx @@ -29,6 +29,7 @@ interface ExemplarMarkerProps { exemplarColor?: string; clickedExemplarFieldIndex: DataFrameFieldIndex | undefined; setClickedExemplarFieldIndex: React.Dispatch; + 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 (
{isLocked && } - +
); }, [ @@ -175,6 +177,7 @@ export const ExemplarMarker = ({ floatingStyles, getFloatingProps, refs.setFloating, + maxHeight, ]); const seriesColor = config diff --git a/public/app/plugins/panel/timeseries/plugins/ExemplarsPlugin.tsx b/public/app/plugins/panel/timeseries/plugins/ExemplarsPlugin.tsx index c741f821f88..673f2288dc7 100644 --- a/public/app/plugins/panel/timeseries/plugins/ExemplarsPlugin.tsx +++ b/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(); const [lockedExemplarFieldIndex, setLockedExemplarFieldIndex] = useState(); @@ -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 (