VizTooltips: Show data links without anchoring (#83638)

packages/grafana-ui/src/components/VizTooltip/VizTooltipFooter.tsx

@@ -6,14 +6,14 @@ import { Field, GrafanaTheme2, LinkModel } from '@grafana/data';
 import { Button, ButtonProps, DataLinkButton, HorizontalGroup } from '..';
 import { useStyles2 } from '../../themes';
 
-interface Props {
+interface VizTooltipFooterProps {
   dataLinks: Array<LinkModel<Field>>;
   annotate?: () => void;
 }
 
 export const ADD_ANNOTATION_ID = 'add-annotation-button';
 
-export const VizTooltipFooter = ({ dataLinks, annotate }: Props) => {
+export const VizTooltipFooter = ({ dataLinks, annotate }: VizTooltipFooterProps) => {
   const styles = useStyles2(getStyles);
 
   const renderDataLinks = () => {
@@ -33,7 +33,7 @@ export const VizTooltipFooter = ({ dataLinks, annotate }: Props) => {
   return (
     <div className={styles.wrapper}>
       {dataLinks.length > 0 && <div className={styles.dataLinks}>{renderDataLinks()}</div>}
-      {annotate && (
+      {annotate != null && (
         <div className={styles.addAnnotations}>
           <Button icon="comment-alt" variant="secondary" size="sm" id={ADD_ANNOTATION_ID} onClick={annotate}>
             Add annotation

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

@@ -377,7 +377,9 @@ const HeatmapHoverCell = ({
           </div>
         ))}
       </VizTooltipContent>
-      {isPinned && <VizTooltipFooter dataLinks={links} annotate={annotate} />}
+      {(links.length > 0 || isPinned) && (
+        <VizTooltipFooter dataLinks={links} annotate={isPinned ? annotate : undefined} />
+      )}
     </div>
   );
 };

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

@@ -83,7 +83,9 @@ export const StateTimelineTooltip2 = ({
       <div className={styles.wrapper}>
         <VizTooltipHeader item={headerItem} isPinned={isPinned} />
         <VizTooltipContent items={contentItems} isPinned={isPinned} scrollable={scrollable} />
-        {isPinned && <VizTooltipFooter dataLinks={links} annotate={annotate} />}
+        {(links.length > 0 || isPinned) && (
+          <VizTooltipFooter dataLinks={links} annotate={isPinned ? annotate : undefined} />
+        )}
       </div>
     </div>
   );

public/app/plugins/panel/status-history/utils.ts

@@ -1,13 +1,13 @@
 import { Field, LinkModel } from '@grafana/data';
 
-export const getDataLinks = (field: Field, datapointIdx: number) => {
+export const getDataLinks = (field: Field, rowIdx: number) => {
   const links: Array<LinkModel<Field>> = [];
   const linkLookup = new Set<string>();
 
   if (field.getLinks) {
-    const v = field.values[datapointIdx];
+    const v = field.values[rowIdx];
     const disp = field.display ? field.display(v) : { text: `${v}`, numeric: +v };
-    field.getLinks({ calculatedValue: disp, valueRowIndex: datapointIdx }).forEach((link) => {
+    field.getLinks({ calculatedValue: disp, valueRowIndex: rowIdx }).forEach((link) => {
       const key = `${link.title}/${link.href}`;
       if (!linkLookup.has(key)) {
         links.push(link);

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

@@ -77,7 +77,9 @@ export const TimeSeriesTooltip = ({
       <div className={styles.wrapper}>
         <VizTooltipHeader item={headerItem} isPinned={isPinned} />
         <VizTooltipContent items={contentItems} isPinned={isPinned} scrollable={scrollable} />
-        {isPinned && <VizTooltipFooter dataLinks={links} annotate={annotate} />}
+        {(links.length > 0 || isPinned) && (
+          <VizTooltipFooter dataLinks={links} annotate={isPinned ? annotate : undefined} />
+        )}
       </div>
     </div>
   );

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

@@ -1,14 +1,14 @@
 import React from 'react';
 
-import { DataFrame, Field, getFieldDisplayName, LinkModel } from '@grafana/data';
+import { DataFrame, Field, getFieldDisplayName } from '@grafana/data';
 import { alpha } from '@grafana/data/src/themes/colorManipulator';
 import { useStyles2 } from '@grafana/ui';
 import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent';
 import { VizTooltipFooter } from '@grafana/ui/src/components/VizTooltip/VizTooltipFooter';
 import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader';
 import { ColorIndicator, VizTooltipItem } from '@grafana/ui/src/components/VizTooltip/types';
-import { getTitleFromHref } from 'app/features/explore/utils/links';
 
+import { getDataLinks } from '../status-history/utils';
 import { getStyles } from '../timeseries/TimeSeriesTooltip';
 
 import { Options } from './panelcfg.gen';
@@ -83,27 +83,13 @@ export const XYChartTooltip = ({ dataIdxs, seriesIdx, data, allSeries, dismiss,
     });
   }
 
-  const getLinks = (): Array<LinkModel<Field>> => {
-    let links: Array<LinkModel<Field>> = [];
-    if (yField.getLinks) {
-      const v = yField.values[rowIndex];
-      const disp = yField.display ? yField.display(v) : { text: `${v}`, numeric: +v };
-      links = yField.getLinks({ calculatedValue: disp, valueRowIndex: rowIndex }).map((linkModel) => {
-        if (!linkModel.title) {
-          linkModel.title = getTitleFromHref(linkModel.href);
-        }
-
-        return linkModel;
-      });
-    }
-    return links;
-  };
+  const links = getDataLinks(yField, rowIndex);
 
   return (
     <div className={styles.wrapper}>
       <VizTooltipHeader item={headerItem} isPinned={isPinned} />
       <VizTooltipContent items={contentItems} isPinned={isPinned} />
-      {isPinned && <VizTooltipFooter dataLinks={getLinks()} />}
+      {(links.length > 0 || isPinned) && <VizTooltipFooter dataLinks={links} />}
     </div>
   );
 };