VizTooltip: Add sizing options (#80306)

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
Co-authored-by: Adela Almasan <adela.almasan@grafana.com>

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

@@ -295,6 +295,8 @@ export const CandlestickPanel = ({
                     />
                   );
                 }}
+                maxWidth={options.tooltip.maxWidth}
+                maxHeight={options.tooltip.maxHeight}
               />
             ) : (
               <>

public/app/plugins/panel/candlestick/panelcfg.cue

@@ -48,6 +48,7 @@ composableKinds: PanelCfg: {
 				} @cuetsy(kind="interface")
 				Options: {
 					common.OptionsWithLegend
+					common.OptionsWithTooltip
 
 					// Sets which dimensions are used for the visualization
 					mode: VizDisplayMode & (*"candles+volume" | _)

public/app/plugins/panel/candlestick/panelcfg.gen.ts

@@ -61,7 +61,7 @@ export const defaultCandlestickColors: Partial<CandlestickColors> = {
   up: 'green',
 };
 
-export interface Options extends common.OptionsWithLegend {
+export interface Options extends common.OptionsWithLegend, common.OptionsWithTooltip {
   /**
    * Sets the style of the candlesticks
    */

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

@@ -394,6 +394,5 @@ const getStyles = (theme: GrafanaTheme2) => ({
   wrapper: css({
     display: 'flex',
     flexDirection: 'column',
-    width: '280px',
   }),
 });

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

@@ -274,6 +274,8 @@ export const HeatmapPanel = ({
                         />
                       );
                     }}
+                    maxWidth={options.tooltip.maxWidth}
+                    maxHeight={options.tooltip.maxHeight}
                   />
                 )}
                 <AnnotationsPlugin2

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

@@ -422,6 +422,26 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(HeatmapPanel)
       showIf: (opts) => opts.tooltip.mode !== TooltipDisplayMode.None && config.featureToggles.newVizTooltips,
     });
 
+    builder.addNumberInput({
+      path: 'tooltip.maxWidth',
+      name: 'Max width',
+      category,
+      settings: {
+        integer: true,
+        placeholder: '300',
+      },
+    });
+
+    builder.addNumberInput({
+      path: 'tooltip.maxHeight',
+      name: 'Max height',
+      category,
+      settings: {
+        integer: true,
+        placeholder: '600',
+      },
+    });
+
     category = ['Legend'];
     builder.addBooleanSwitch({
       path: 'legend.show',

public/app/plugins/panel/heatmap/panelcfg.cue

@@ -79,7 +79,9 @@ composableKinds: PanelCfg: lineage: {
 			// Controls tooltip options
 			HeatmapTooltip: {
 				// Controls how the tooltip is shown
-				mode: ui.TooltipDisplayMode
+				mode:       ui.TooltipDisplayMode
+				maxHeight?: number
+				maxWidth?:  number
 				// Controls if the tooltip shows a histogram of the y-axis values
 				yHistogram?: bool
 				// Controls if the tooltip shows a color scale in header

public/app/plugins/panel/heatmap/panelcfg.gen.ts

@@ -126,6 +126,8 @@ export interface FilterValueRange {
  * Controls tooltip options
  */
 export interface HeatmapTooltip {
+  maxHeight?: number;
+  maxWidth?: number;
   /**
    * Controls how the tooltip is shown
    */

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

@@ -236,6 +236,8 @@ export const StateTimelinePanel = ({
                         />
                       );
                     }}
+                    maxWidth={options.tooltip.maxWidth}
+                    maxHeight={options.tooltip.maxHeight}
                   />
                 )}
                 {/* Renders annotations */}

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

@@ -19,7 +19,6 @@ import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTool
 import { VizTooltipFooter } from '@grafana/ui/src/components/VizTooltip/VizTooltipFooter';
 import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader';
 import { ColorIndicator, ColorPlacement, LabelValue } from '@grafana/ui/src/components/VizTooltip/types';
-import { DEFAULT_TOOLTIP_WIDTH } from '@grafana/ui/src/components/uPlot/plugins/TooltipPlugin2';
 import { findNextStateIndex, fmtDuration } from 'app/core/components/TimelineChart/utils';
 
 import { getDataLinks } from '../status-history/utils';
@@ -193,6 +192,5 @@ const getStyles = (theme: GrafanaTheme2) => ({
   wrapper: css({
     display: 'flex',
     flexDirection: 'column',
-    width: DEFAULT_TOOLTIP_WIDTH,
   }),
 });

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

@@ -263,6 +263,8 @@ export const StatusHistoryPanel = ({
                         />
                       );
                     }}
+                    maxWidth={options.tooltip.maxWidth}
+                    maxHeight={options.tooltip.maxHeight}
                   />
                 )}
                 <AnnotationsPlugin2

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

@@ -154,6 +154,5 @@ const getStyles = (theme: GrafanaTheme2) => ({
   wrapper: css({
     display: 'flex',
     flexDirection: 'column',
-    width: '280px',
   }),
 });

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

@@ -141,6 +141,8 @@ export const TimeSeriesPanel = ({
                         />
                       );
                     }}
+                    maxWidth={options.tooltip.maxWidth}
+                    maxHeight={options.tooltip.maxHeight}
                   />
                 ) : (
                   <>

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

@@ -19,7 +19,6 @@ import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTool
 import { VizTooltipFooter } from '@grafana/ui/src/components/VizTooltip/VizTooltipFooter';
 import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader';
 import { ColorIndicator, ColorPlacement, LabelValue } from '@grafana/ui/src/components/VizTooltip/types';
-import { DEFAULT_TOOLTIP_WIDTH } from '@grafana/ui/src/components/uPlot/plugins/TooltipPlugin2';
 
 import { getDataLinks } from '../status-history/utils';
 
@@ -160,6 +159,5 @@ const getStyles = (theme: GrafanaTheme2) => ({
   wrapper: css({
     display: 'flex',
     flexDirection: 'column',
-    width: DEFAULT_TOOLTIP_WIDTH,
   }),
 });

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

@@ -145,6 +145,8 @@ export const TrendPanel = ({
                         />
                       );
                     }}
+                    maxWidth={options.tooltip.maxWidth}
+                    maxHeight={options.tooltip.maxHeight}
                   />
                 ) : (
                   <TooltipPlugin

public/app/plugins/panel/xychart/XYChartPanel.tsx

@@ -240,6 +240,8 @@ export const XYChartPanel = (props: Props) => {
                     />
                   );
                 }}
+                maxWidth={props.options.tooltip.maxWidth}
+                maxHeight={props.options.tooltip.maxHeight}
               />
             )}
           </UPlotChart>

public/app/plugins/panel/xychart/XYChartTooltip.tsx

@@ -131,6 +131,5 @@ const getStyles = (theme: GrafanaTheme2) => ({
   wrapper: css({
     display: 'flex',
     flexDirection: 'column',
-    width: '280px',
   }),
 });