VizTooltips: Optimize performance (grafana#80102)

leeoniya · web-flow · commit 200c71f5d60f · 2024-01-05T16:07:04.000-06:00
diff --git a/packages/grafana-ui/src/components/VizTooltip/HeaderLabel.tsx b/packages/grafana-ui/src/components/VizTooltip/HeaderLabel.tsx
@@ -5,12 +5,20 @@ import { LabelValue } from './types';
 
 interface Props {
   headerLabel: LabelValue;
+  isPinned: boolean;
 }
 
-export const HeaderLabel = ({ headerLabel }: Props) => {
+export const HeaderLabel = ({ headerLabel, isPinned }: Props) => {
   const { label, value, color, colorIndicator } = headerLabel;
 
   return (
-    <VizTooltipRow label={label} value={value} color={color} colorIndicator={colorIndicator} marginRight={'22px'} />
+    <VizTooltipRow
+      label={label}
+      value={value}
+      color={color}
+      colorIndicator={colorIndicator}
+      marginRight={'22px'}
+      isPinned={isPinned}
+    />
   );
 };
diff --git a/packages/grafana-ui/src/components/VizTooltip/SeriesList.tsx b/packages/grafana-ui/src/components/VizTooltip/SeriesList.tsx
diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx
@@ -11,9 +11,10 @@ import { LabelValue } from './types';
 interface Props {
   contentLabelValue: LabelValue[];
   customContent?: ReactElement[];
+  isPinned: boolean;
 }
 
-export const VizTooltipContent = ({ contentLabelValue, customContent }: Props) => {
+export const VizTooltipContent = ({ contentLabelValue, customContent, isPinned }: Props) => {
   const styles = useStyles2(getStyles);
 
   return (
@@ -31,6 +32,7 @@ export const VizTooltipContent = ({ contentLabelValue, customContent }: Props) =
               colorPlacement={colorPlacement}
               isActive={isActive}
               justify={'space-between'}
+              isPinned={isPinned}
             />
           );
         })}
diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipHeader.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipHeader.tsx
@@ -13,14 +13,15 @@ interface Props {
   headerLabel: LabelValue;
   keyValuePairs?: LabelValue[];
   customValueDisplay?: ReactElement | null;
+  isPinned: boolean;
 }
-export const VizTooltipHeader = ({ headerLabel, keyValuePairs, customValueDisplay }: Props) => {
+export const VizTooltipHeader = ({ headerLabel, keyValuePairs, customValueDisplay, isPinned }: Props) => {
   const styles = useStyles2(getStyles);
 
   return (
     <div className={styles.wrapper}>
-      <HeaderLabel headerLabel={headerLabel} />
-      {customValueDisplay || <VizTooltipHeaderLabelValue keyValuePairs={keyValuePairs} />}
+      <HeaderLabel headerLabel={headerLabel} isPinned={isPinned} />
+      {customValueDisplay || <VizTooltipHeaderLabelValue keyValuePairs={keyValuePairs} isPinned={isPinned} />}
     </div>
   );
 };
diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipHeaderLabelValue.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipHeaderLabelValue.tsx
@@ -5,9 +5,10 @@ import { LabelValue } from './types';
 
 interface Props {
   keyValuePairs?: LabelValue[];
+  isPinned: boolean;
 }
 
-export const VizTooltipHeaderLabelValue = ({ keyValuePairs }: Props) => (
+export const VizTooltipHeaderLabelValue = ({ keyValuePairs, isPinned }: Props) => (
   <>
     {keyValuePairs?.map((keyValuePair, i) => (
       <VizTooltipRow
@@ -17,6 +18,7 @@ export const VizTooltipHeaderLabelValue = ({ keyValuePairs }: Props) => (
         color={keyValuePair.color}
         colorIndicator={keyValuePair.colorIndicator!}
         justify={'space-between'}
+        isPinned={isPinned}
       />
     ))}
   </>
diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx
@@ -13,6 +13,7 @@ interface Props extends LabelValue {
   justify?: string;
   isActive?: boolean; // for series list
   marginRight?: string;
+  isPinned: boolean;
 }
 
 export const VizTooltipRow = ({
@@ -24,6 +25,7 @@ export const VizTooltipRow = ({
   justify = 'flex-start',
   isActive = false,
   marginRight = '0px',
+  isPinned,
 }: Props) => {
   const styles = useStyles2(getStyles, justify, marginRight);
 
@@ -53,27 +55,40 @@ export const VizTooltipRow = ({
           {color && colorPlacement === ColorPlacement.first && (
             <VizTooltipColorIndicator color={color} colorIndicator={colorIndicator} />
           )}
-          <Tooltip content={label} interactive={false} show={showLabelTooltip}>
-            <div
-              className={cx(styles.label, isActive && styles.activeSeries)}
-              onMouseEnter={onMouseEnterLabel}
-              onMouseLeave={onMouseLeaveLabel}
-            >
-              {label}
-            </div>
-          </Tooltip>
+          {!isPinned ? (
+            <div className={cx(styles.label, isActive && styles.activeSeries)}>{label}</div>
+          ) : (
+            <Tooltip content={label} interactive={false} show={showLabelTooltip}>
+              <div
+                className={cx(styles.label, isActive && styles.activeSeries)}
+                onMouseEnter={onMouseEnterLabel}
+                onMouseLeave={onMouseLeaveLabel}
+              >
+                {label}
+              </div>
+            </Tooltip>
+          )}
         </div>
       )}
 
       <div className={styles.valueWrapper}>
         {color && colorPlacement === ColorPlacement.leading && (
           <VizTooltipColorIndicator color={color} colorIndicator={colorIndicator} />
         )}
-        <Tooltip content={value ? value.toString() : ''} interactive={false} show={showValueTooltip}>
-          <div className={cx(styles.value, isActive)} onMouseEnter={onMouseEnterValue} onMouseLeave={onMouseLeaveValue}>
-            {value}
-          </div>
-        </Tooltip>
+        {!isPinned ? (
+          <div className={cx(styles.value, isActive)}>{value}</div>
+        ) : (
+          <Tooltip content={value ? value.toString() : ''} interactive={false} show={showValueTooltip}>
+            <div
+              className={cx(styles.value, isActive)}
+              onMouseEnter={onMouseEnterValue}
+              onMouseLeave={onMouseLeaveValue}
+            >
+              {value}
+            </div>
+          </Tooltip>
+        )}
+
         {color && colorPlacement === ColorPlacement.trailing && (
           <>
             &nbsp;
@@ -86,24 +101,13 @@ export const VizTooltipRow = ({
 };
 
 const getStyles = (theme: GrafanaTheme2, justify: string, marginRight: string) => ({
-  wrapper: css({
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    gap: 4,
-    borderTop: `1px solid ${theme.colors.border.medium}`,
-    padding: theme.spacing(1),
-  }),
   contentWrapper: css({
     display: 'flex',
     alignItems: 'center',
     justifyContent: justify,
     flexWrap: 'wrap',
     marginRight: marginRight,
   }),
-  customContentPadding: css({
-    padding: `${theme.spacing(1)} 0`,
-  }),
   label: css({
     color: theme.colors.text.secondary,
     fontWeight: 400,
diff --git a/public/app/plugins/panel/heatmap/HeatmapHoverView.tsx b/public/app/plugins/panel/heatmap/HeatmapHoverView.tsx
@@ -382,8 +382,12 @@ const HeatmapHoverCell = ({
 
   return (
     <div className={styles.wrapper}>
-      <VizTooltipHeader headerLabel={getHeaderLabel()} />
-      <VizTooltipContent contentLabelValue={getContentLabelValue()} customContent={getCustomContent()} />
+      <VizTooltipHeader headerLabel={getHeaderLabel()} isPinned={isPinned} />
+      <VizTooltipContent
+        contentLabelValue={getContentLabelValue()}
+        customContent={getCustomContent()}
+        isPinned={isPinned}
+      />
       {isPinned && <VizTooltipFooter dataLinks={links} canAnnotate={canAnnotate} />}
     </div>
   );
diff --git a/public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx b/public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx
@@ -180,8 +180,8 @@ export const StateTimelineTooltip2 = ({
 
   return (
     <div className={styles.wrapper}>
-      <VizTooltipHeader headerLabel={getHeaderLabel()} />
-      <VizTooltipContent contentLabelValue={getContentLabelValue()} />
+      <VizTooltipHeader headerLabel={getHeaderLabel()} isPinned={isPinned} />
+      <VizTooltipContent contentLabelValue={getContentLabelValue()} isPinned={isPinned} />
       {isPinned && <VizTooltipFooter dataLinks={links} canAnnotate={false} />}
     </div>
   );
diff --git a/public/app/plugins/panel/status-history/StatusHistoryTooltip2.tsx b/public/app/plugins/panel/status-history/StatusHistoryTooltip2.tsx
@@ -142,8 +142,8 @@ export const StatusHistoryTooltip2 = ({
 
   return (
     <div className={styles.wrapper}>
-      <VizTooltipHeader headerLabel={getHeaderLabel()} />
-      <VizTooltipContent contentLabelValue={getContentLabelValue()} />
+      <VizTooltipHeader headerLabel={getHeaderLabel()} isPinned={isPinned} />
+      <VizTooltipContent contentLabelValue={getContentLabelValue()} isPinned={isPinned} />
       {isPinned && <VizTooltipFooter dataLinks={links} canAnnotate={false} />}
     </div>
   );
diff --git a/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx b/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx
@@ -133,7 +133,7 @@ export const TimeSeriesTooltip = ({
 
   const getHeaderLabel = (): LabelValue => {
     return {
-      label: '',
+      label: xField.type === FieldType.time ? '' : getFieldDisplayName(xField, seriesFrame, frames),
       value: xVal,
     };
   };
@@ -145,8 +145,8 @@ export const TimeSeriesTooltip = ({
   return (
     <div>
       <div className={styles.wrapper}>
-        <VizTooltipHeader headerLabel={getHeaderLabel()} />
-        <VizTooltipContent contentLabelValue={getContentLabelValue()} />
+        <VizTooltipHeader headerLabel={getHeaderLabel()} isPinned={isPinned} />
+        <VizTooltipContent contentLabelValue={getContentLabelValue()} isPinned={isPinned} />
         {isPinned && <VizTooltipFooter dataLinks={links} canAnnotate={false} />}
       </div>
     </div>
diff --git a/public/app/plugins/panel/trend/TrendPanel.tsx b/public/app/plugins/panel/trend/TrendPanel.tsx
@@ -10,9 +10,9 @@ import { preparePlotFrame } from 'app/core/components/GraphNG/utils';
 import { TimeSeries } from 'app/core/components/TimeSeries/TimeSeries';
 import { findFieldIndex } from 'app/features/dimensions';
 
+import { TimeSeriesTooltip } from '../timeseries/TimeSeriesTooltip';
 import { prepareGraphableFields, regenerateLinksSupplier } from '../timeseries/utils';
 
-import { TrendTooltip } from './TrendTooltip';
 import { Options } from './panelcfg.gen';
 
 export const TrendPanel = ({
@@ -132,13 +132,13 @@ export const TrendPanel = ({
                     }
                     render={(u, dataIdxs, seriesIdx, isPinned = false) => {
                       return (
-                        <TrendTooltip
+                        <TimeSeriesTooltip
                           frames={info.frames!}
-                          data={alignedDataFrame}
-                          mode={options.tooltip.mode}
-                          sortOrder={options.tooltip.sort}
+                          seriesFrame={alignedDataFrame}
                           dataIdxs={dataIdxs}
                           seriesIdx={seriesIdx}
+                          mode={options.tooltip.mode}
+                          sortOrder={options.tooltip.sort}
                           isPinned={isPinned}
                         />
                       );
diff --git a/public/app/plugins/panel/trend/TrendTooltip.tsx b/public/app/plugins/panel/trend/TrendTooltip.tsx
diff --git a/public/app/plugins/panel/xychart/XYChartTooltip.tsx b/public/app/plugins/panel/xychart/XYChartTooltip.tsx
