feat(explore): heatmap tooltip trace links

static/app/components/charts/baseChart.tsx

@@ -764,6 +764,11 @@ const getTooltipStyles = (p: {theme: Theme}) => css`
     justify-content: flex-start;
     align-items: baseline;
   }
+  .tooltip-label-centered {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
   .tooltip-code-no-margin {
     padding-left: 0;
     margin-left: 0;

static/app/components/charts/components/tooltip.tsx

@@ -3,6 +3,7 @@ import 'echarts/lib/component/tooltip';
 import type {Theme} from '@emotion/react';
 import {useTheme} from '@emotion/react';
 import type {TooltipComponentFormatterCallback} from 'echarts';
+import type {CallbackDataParams} from 'echarts/types/dist/shared';
 import moment from 'moment-timezone';
 
 import type {BaseChart, BaseChartProps} from 'sentry/components/charts/baseChart';
@@ -11,6 +12,7 @@ import {t} from 'sentry/locale';
 import type {DataPoint} from 'sentry/types/echarts';
 import {toArray} from 'sentry/utils/array/toArray';
 import {getFormattedDate, getTimeFormat} from 'sentry/utils/dates';
+import {formatAbbreviatedNumber} from 'sentry/utils/formatters';
 
 export const CHART_TOOLTIP_VIEWPORT_OFFSET = 20;
 
@@ -74,7 +76,7 @@ function defaultMarkerFormatter(value: string) {
   return value;
 }
 
-function getSeriesValue(series: any, offset: number) {
+export function getSeriesValue(series: any, offset: number) {
   if (!series.data) {
     return;
   }
@@ -113,6 +115,10 @@ export type FormatterOptions = Pick<
      * If true seconds will be added to the Axis label time format
      */
     addSecondsToTimeFormat?: boolean;
+    /**
+     * Content that IS NOT part of the series data but is shown on the tooltip.
+     */
+    extraContent?: (seriesParams: CallbackDataParams) => string | null;
     /**
      * Limit the number of series rendered in the tooltip and display "+X more".
      */
@@ -138,6 +144,7 @@ export function getFormatter({
   valueFormatter = defaultValueFormatter,
   nameFormatter = defaultNameFormatter,
   markerFormatter = defaultMarkerFormatter,
+  extraContent,
   subLabels = [],
   addSecondsToTimeFormat = false,
   limit,
@@ -244,16 +251,28 @@ export function getFormatter({
         );
 
         if (serie.seriesType === 'heatmap') {
-          const zAxisCountValue = (getSeriesValue(serie, 2) ?? 0).toString();
+          const zAxisCountValue = formatAbbreviatedNumber(
+            getSeriesValue(serie, 2) ?? 0,
+            4,
+            false
+          );
           const yAxisValue = valueFormatter(
             getSeriesValue(serie, 1),
             serie.seriesName,
             serie
           );
 
-          acc.series.push(
-            `<div><span class="tooltip-label"><strong>${yAxisValue}</strong></span> ${zAxisCountValue}</div>`
-          );
+          const additionalContent = extraContent ? extraContent(serie) : null;
+
+          if (additionalContent) {
+            acc.series.push(
+              `<div><span class="tooltip-label"><strong>${yAxisValue}</strong></span> ${zAxisCountValue}</div><div><span class="tooltip-label tooltip-label-centered">${additionalContent}</span></div>`
+            );
+          } else {
+            acc.series.push(
+              `<div><span class="tooltip-label"><strong>${yAxisValue}</strong></span> ${zAxisCountValue}</div>`
+            );
+          }
 
           return acc;
         }

static/app/views/dashboards/widgets/heatMapWidget/heatMapWidgetVisualization.tsx

@@ -6,20 +6,24 @@ import type {
   TooltipFormatterCallback,
   TopLevelFormatterParams,
 } from 'echarts/types/dist/shared';
+import type {LocationDescriptor} from 'history';
 
 import {Flex} from '@sentry/scraps/layout';
 
 import {BaseChart} from 'sentry/components/charts/baseChart';
-import {getFormatter} from 'sentry/components/charts/components/tooltip';
+import {getFormatter, getSeriesValue} from 'sentry/components/charts/components/tooltip';
 import {isChartHovered, truncationFormatter} from 'sentry/components/charts/utils';
 import {usePageFilters} from 'sentry/components/pageFilters/usePageFilters';
+import {t} from 'sentry/locale';
 import type {ReactEchartsRef} from 'sentry/types/echarts';
+import {useOrganization} from 'sentry/utils/useOrganization';
 import {NO_PLOTTABLE_VALUES} from 'sentry/views/dashboards/widgets/common/settings';
 import {plottablesCanBeVisualized} from 'sentry/views/dashboards/widgets/plottablesCanBeVisualized';
 import {formatTooltipValue} from 'sentry/views/dashboards/widgets/timeSeriesWidget/formatters/formatTooltipValue';
 import {formatXAxisTimestamp} from 'sentry/views/dashboards/widgets/timeSeriesWidget/formatters/formatXAxisTimestamp';
 import {formatYAxisValue} from 'sentry/views/dashboards/widgets/timeSeriesWidget/formatters/formatYAxisValue';
 import {FALLBACK_TYPE} from 'sentry/views/dashboards/widgets/timeSeriesWidget/settings';
+import {getExploreUrl, type GetExploreUrlArgs} from 'sentry/views/explore/utils';
 
 import {HeatMap} from './plottables/heatMap';
 import type {HeatMapPlottable} from './plottables/heatMapPlottable';
@@ -34,11 +38,16 @@ interface HeatMapWidgetVisualizationProps {
    * Experimental! Specify the Z-axis scale type. Logarithmic scales can be much more useful for values with a high range.
    */
   scale?: 'linear' | 'log';
+  /**
+   * getExploreUrl props that will be used to generate an explore link for the tooltip. Omitting this will not generate an explore link.
+   */
+  tooltipExploreUrlArgs?: Omit<GetExploreUrlArgs, 'organization'>;
 }
 
 export function HeatMapWidgetVisualization(props: HeatMapWidgetVisualizationProps) {
   const {plottables} = props;
   const theme = useTheme();
+  const organization = useOrganization();
 
   const pageFilters = usePageFilters();
   const {start, end, period, utc} = pageFilters.selection.datetime;
@@ -94,6 +103,11 @@ export function HeatMapWidgetVisualization(props: HeatMapWidgetVisualizationProp
           fieldType,
           heatMapPlottable.yAxisValueUnit ?? undefined
         );
+
+        if (bucketSize === 0) {
+          return yAxisMinValueFormatted;
+        }
+
         const yAxisMaxValueFormatted = formatTooltipValue(
           value + bucketSize,
           fieldType,
@@ -102,6 +116,50 @@ export function HeatMapWidgetVisualization(props: HeatMapWidgetVisualizationProp
 
         return `${yAxisMinValueFormatted} – ${yAxisMaxValueFormatted}`;
       },
+      extraContent: props.tooltipExploreUrlArgs
+        ? function (contentParams) {
+            // TODO(nikki): the y axis values might have to be changed if it's on a log scale :(
+            const yAxisBucketSize = heatMapPlottable.heatMapSeries.meta.yAxis.bucketSize;
+            const yAxisMinValue = getSeriesValue(contentParams, 1) as number;
+            const yAxisMaxValue = yAxisMinValue + yAxisBucketSize;
+
+            const xAxisBucketSize = heatMapPlottable.heatMapSeries.meta.xAxis.bucketSize;
+            const xAxisMinValue = getSeriesValue(contentParams, 0) as number;
+            const xAxisMaxValue = xAxisMinValue + xAxisBucketSize * 1000;
+
+            const exploreUrlProps: GetExploreUrlArgs = {
+              selection: {
+                ...pageFilters.selection,
+                datetime: {
+                  ...pageFilters.selection.datetime,
+                  start: new Date(xAxisMinValue),
+                  end: new Date(xAxisMaxValue),
+                  period: null,
+                },
+              },
+              organization,
+              // TODO(nikki): we're only handling metrics for now but if we're looking to support other explore
+              // surfaces then we'll need to add more logic here
+              ...props.tooltipExploreUrlArgs,
+              crossEvents: props.tooltipExploreUrlArgs?.crossEvents?.map(crossEvent => {
+                if (crossEvent.type === 'metrics') {
+                  return {
+                    ...crossEvent,
+                    query:
+                      yAxisBucketSize === 0
+                        ? `value:<=${yAxisMinValue}`
+                        : `value:>=${yAxisMinValue} value:<${yAxisMaxValue}`,
+                  };
+                }
+                return crossEvent;
+              }),
+            };
+
+            const tracesLink = getExploreUrl(exploreUrlProps);
+
+            return `<a href="${toHref(tracesLink)}">${t('View related traces')}</a>`;
+          }
+        : undefined,
       truncate: false,
       utc: utc ?? false,
     })(params, asyncTicket);
@@ -118,6 +176,8 @@ export function HeatMapWidgetVisualization(props: HeatMapWidgetVisualizationProp
         ref={chartRef}
         tooltip={{
           show: true,
+          enterable: true,
+          extraCssText: 'pointer-events: auto !important;',
           axisPointer: {
             show: false,
           },
@@ -197,3 +257,11 @@ export function HeatMapWidgetVisualization(props: HeatMapWidgetVisualizationProp
     </Flex>
   );
 }
+
+function toHref(to: LocationDescriptor): string {
+  if (typeof to === 'string') {
+    return to;
+  }
+  const {pathname = '', search = '', hash = ''} = to;
+  return `${pathname}${search}${hash}`;
+}

static/app/views/dashboards/widgets/heatMapWidget/plottables/heatMap.tsx

@@ -49,7 +49,7 @@ export class HeatMap implements HeatMapPlottable {
 
   toSeries(plottingOptions: HeatMapPlottingOptions): SeriesOption[] {
     const {heatMapSeries} = this;
-    const {scale = 'linear'} = plottingOptions;
+    const {scale = 'linear', theme} = plottingOptions;
 
     return [
       {
@@ -64,7 +64,10 @@ export class HeatMap implements HeatMapPlottable {
           ];
         }),
         emphasis: {
-          disabled: true,
+          itemStyle: {
+            borderColor: theme.tokens.content.primary,
+            borderWidth: 2,
+          },
         },
       },
     ];

static/app/views/explore/metrics/metricsHeatMap.tsx

@@ -1,3 +1,4 @@
+import {useMemo} from 'react';
 import type {UseQueryResult} from '@tanstack/react-query';
 
 import {t} from 'sentry/locale';
@@ -12,9 +13,10 @@ import {
   useMetricName,
   useMetricVisualize,
   useMetricVisualizes,
+  useTraceMetric,
 } from 'sentry/views/explore/metrics/metricsQueryParams';
 import {STACKED_GRAPH_HEIGHT} from 'sentry/views/explore/metrics/settings';
-import {prettifyAggregation} from 'sentry/views/explore/utils';
+import {prettifyAggregation, type GetExploreUrlArgs} from 'sentry/views/explore/utils';
 
 interface MetricsHeatMapProps {
   actions: React.ReactNode;
@@ -27,6 +29,7 @@ export function MetricsHeatMap({heatmapResult, actions, title}: MetricsHeatMapPr
   const visualizes = useMetricVisualizes();
   const metricLabel = useMetricLabel();
   const metricName = useMetricName();
+  const metric = useTraceMetric();
 
   const {data: heatMapSeries, isPending, error} = heatmapResult;
 
@@ -36,6 +39,18 @@ export function MetricsHeatMap({heatmapResult, actions, title}: MetricsHeatMapPr
       ? metricName
       : (title ?? metricLabel ?? prettifyAggregation(aggregate) ?? aggregate);
 
+  const tooltipExploreUrlArgs: Omit<GetExploreUrlArgs, 'organization'> = useMemo(() => {
+    return {
+      crossEvents: [
+        {
+          type: 'metrics',
+          query: '',
+          metric,
+        },
+      ],
+    };
+  }, [metric]);
+
   return (
     <WidgetWrapper>
       <Widget
@@ -52,6 +67,7 @@ export function MetricsHeatMap({heatmapResult, actions, title}: MetricsHeatMapPr
             <HeatMapWidgetVisualization
               plottables={[new HeatMap(heatMapSeries)]}
               scale="log"
+              tooltipExploreUrlArgs={tooltipExploreUrlArgs}
             />
           )
         }