XYChart: Fix variable interpolation in datalinks/toggletip (#70195)

public/app/features/explore/utils/links.ts

@@ -187,7 +187,10 @@ export const getFieldLinksForExplore = (options: {
   return [];
 };
 
-function getTitleFromHref(href: string): string {
+/**
+ * @internal
+ */
+export function getTitleFromHref(href: string): string {
   // The URL constructor needs the url to have protocol
   if (href.indexOf('://') < 0) {
     // Doesn't really matter what protocol we use.

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

@@ -79,9 +79,7 @@ export const TimeSeriesPanel = ({
       options={options}
     >
       {(config, alignedDataFrame) => {
-        if (
-          alignedDataFrame.fields.filter((f) => f.config.links !== undefined && f.config.links.length > 0).length > 0
-        ) {
+        if (alignedDataFrame.fields.some((f) => Boolean(f.config.links?.length))) {
           alignedDataFrame = regenerateLinksSupplier(alignedDataFrame, frames, replaceVariables, timeZone);
         }
 

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

@@ -10,9 +10,9 @@ import {
   LinkModel,
   TimeRange,
 } from '@grafana/data';
-import { LinkButton, usePanelContext, useStyles2, VerticalGroup, VizTooltipOptions } from '@grafana/ui';
+import { LinkButton, useStyles2, VerticalGroup, VizTooltipOptions } from '@grafana/ui';
 import { findField } from 'app/features/dimensions';
-import { getFieldLinksForExplore } from 'app/features/explore/utils/links';
+import { getTitleFromHref } from 'app/features/explore/utils/links';
 
 import { ScatterSeriesConfig, SeriesMapping } from './models.gen';
 import { ScatterSeries } from './types';
@@ -53,7 +53,6 @@ export const TooltipView = ({
   range,
 }: Props) => {
   const style = useStyles2(getStyles);
-  const { onSplitOpen } = usePanelContext();
 
   if (!allSeries || rowIndex == null) {
     return null;
@@ -63,12 +62,20 @@ export const TooltipView = ({
   const frame = series.frame(data);
   const xField = series.x(frame);
   const yField = series.y(frame);
-  const links: Array<LinkModel<Field>> = getFieldLinksForExplore({
-    field: yField,
-    splitOpenFn: onSplitOpen,
-    rowIndex,
-    range,
-  });
+
+  let links: LinkModel[] | undefined = undefined;
+
+  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;
+    });
+  }
 
   let extraFields: Field[] = frame.fields.filter((f) => f !== xField && f !== yField);
 
@@ -131,7 +138,7 @@ export const TooltipView = ({
               <td>{fmt(field, field.values[rowIndex])}</td>
             </tr>
           ))}
-          {links.length > 0 && (
+          {links && links.length > 0 && (
             <tr>
               <td colSpan={2}>
                 <VerticalGroup>