fix(dashboards): Charts displaying count(span.duration) (#97502)

Adds the prettify function call to:
- rendering the sort options for tables properly
- These render as a full string option in the dropdown because tables
only allow current selections. It was showing `count(span.duration)`
- rendering in charts
- Updating the widget legend name decoder provides a single point that
has the effect we want. This is essentially the deserialization layer
from the URL params to the names used in the series. I use a regex match
because as we add groupings or aliases, the series name is no longer
simply `count(span.duration)`
- Had to update the delimiter from `;` to something more unique because
`>` was escaped to `>` which caused issues with the hover text. I
went with something that was going to likely be more unique with `|~|`

Author: narsaynorath

static/app/components/modals/widgetViewerModal.spec.tsx

@@ -425,7 +425,7 @@ describe('Modals -> WidgetViewerModal', function () {
           expect.objectContaining({
             option: expect.objectContaining({
               legend: expect.objectContaining({
-                selected: {[`Query Name;${mockWidget.id}`]: false},
+                selected: {[`Query Name|~|${mockWidget.id}`]: false},
               }),
             }),
           })

static/app/components/modals/widgetViewerModal.tsx

@@ -45,6 +45,8 @@ import {
   isAggregateField,
   isEquation,
   isEquationAlias,
+  parseFunction,
+  prettifyParsedFunction,
 } from 'sentry/utils/discover/fields';
 import {
   createOnDemandFilterWarning,
@@ -1324,6 +1326,14 @@ function ViewerTableV2({
       : {}
   );
 
+  // Inject any prettified function names that aren't currently aliased into the aliases
+  for (const column of tableColumns) {
+    const parsedFunction = parseFunction(column.key);
+    if (!aliases[column.key] && parsedFunction) {
+      aliases[column.key] = prettifyParsedFunction(parsedFunction);
+    }
+  }
+
   if (loading) {
     return (
       <TableWidgetVisualization.LoadingPlaceholder

static/app/utils/discover/fields.tsx

@@ -900,7 +900,7 @@ export function getMeasurementSlug(field: string): string | null {
 
 const AGGREGATE_PATTERN = /^(\w+)\((.*)?\)$/;
 // Identical to AGGREGATE_PATTERN, but without the $ for newline, or ^ for start of line
-const AGGREGATE_BASE = /(\w+)\((.*)?\)/g;
+export const AGGREGATE_BASE = /(\w+)\((.*)?\)/g;
 
 export function getAggregateArg(field: string): string | null {
   // only returns the first argument if field is an aggregate

static/app/views/dashboards/datasetConfig/errorsAndTransactions.tsx

@@ -33,6 +33,8 @@ import {
   isEquation,
   isEquationAlias,
   isLegalYAxisType,
+  parseFunction,
+  prettifyParsedFunction,
   SPAN_OP_BREAKDOWN_FIELDS,
   stripEquationPrefix,
 } from 'sentry/utils/discover/fields';
@@ -176,13 +178,18 @@ export function getTableSortOptions(
     .filter(field => !!field)
     .forEach(field => {
       let alias: any;
-      const label = stripEquationPrefix(field);
+      let label = stripEquationPrefix(field);
       // Equations are referenced via a standard alias following this pattern
       if (isEquation(field)) {
         alias = `equation[${equations}]`;
         equations += 1;
       }
 
+      const parsedFunction = parseFunction(field);
+      if (parsedFunction) {
+        label = prettifyParsedFunction(parsedFunction);
+      }
+
       options.push({label, value: alias ?? field});
     });
 

static/app/views/dashboards/widgetCard/chart.tsx

@@ -50,6 +50,8 @@ import {
   isAggregateField,
   isEquation,
   maybeEquationAlias,
+  parseFunction,
+  prettifyParsedFunction,
   stripDerivedMetricsPrefix,
   stripEquationPrefix,
 } from 'sentry/utils/discover/fields';
@@ -195,6 +197,14 @@ class WidgetCardChart extends Component<WidgetCardChartProps> {
       const tableData = convertTableDataToTabularData(tableResults?.[i]);
       const sort = decodeSorts(widget.queries[0]?.orderby)?.[0];
 
+      // Inject any prettified function names that aren't currently aliased into the aliases
+      for (const column of columns) {
+        const parsedFunction = parseFunction(column.key);
+        if (!aliases[column.key] && parsedFunction) {
+          aliases[column.key] = prettifyParsedFunction(parsedFunction);
+        }
+      }
+
       return (
         <TableWrapper key={`table:${result.title}`}>
           {organization.features.includes('dashboards-use-widget-table-visualization') ? (
@@ -481,7 +491,7 @@ class WidgetCardChart extends Component<WidgetCardChartProps> {
     };
 
     const nameFormatter = (name: string) => {
-      return WidgetLegendNameEncoderDecoder.decodeSeriesNameForLegend(name)!;
+      return WidgetLegendNameEncoderDecoder.decodeSeriesNameForLegend(name);
     };
 
     const chartOptions = {

static/app/views/dashboards/widgetLegendNameEncoderDecoder.tsx

@@ -1,15 +1,34 @@
 import type {Series} from 'sentry/types/echarts';
+import {
+  AGGREGATE_BASE,
+  parseFunction,
+  prettifyParsedFunction,
+} from 'sentry/utils/discover/fields';
 import type {Widget} from 'sentry/views/dashboards/types';
 
-const SERIES_NAME_DELIMITER = ';';
+const SERIES_NAME_DELIMITER = '|~|';
 
 const WidgetLegendNameEncoderDecoder = {
   encodeSeriesNameForLegend(seriesName: string, widgetId?: string) {
     return `${seriesName}${SERIES_NAME_DELIMITER}${widgetId}`;
   },
 
   decodeSeriesNameForLegend(encodedSeriesName: string) {
-    return encodedSeriesName.split(SERIES_NAME_DELIMITER)[0];
+    let seriesName = encodedSeriesName.split(SERIES_NAME_DELIMITER)[0];
+    if (!seriesName) {
+      return '';
+    }
+
+    // If the series name contains an aggregate function, prettify it
+    const functionMatch = seriesName.match(AGGREGATE_BASE);
+    if (functionMatch?.[0] && parseFunction(functionMatch[0])) {
+      seriesName = seriesName.replace(
+        functionMatch[0],
+        prettifyParsedFunction(parseFunction(functionMatch[0])!)
+      );
+    }
+
+    return seriesName;
   },
 
   // change timeseries names to SeriesName:widgetID

static/app/views/dashboards/widgetLegendSelectionState.spec.tsx

@@ -10,7 +10,7 @@ import {DisplayType, WidgetType} from 'sentry/views/dashboards/types';
 import WidgetLegendSelectionState from './widgetLegendSelectionState';
 
 const WIDGET_ID_DELIMITER = ':';
-const SERIES_NAME_DELIMITER = ';';
+const SERIES_NAME_DELIMITER = '|~|';
 
 describe('WidgetLegend functions util', () => {
   let legendFunctions: WidgetLegendSelectionState;

static/app/views/dashboards/widgetLegendSelectionState.tsx

@@ -177,7 +177,7 @@ class WidgetLegendSelectionState {
         .filter(key => !selected[key])
         .map(series =>
           encodeURIComponent(
-            WidgetLegendNameEncoderDecoder.decodeSeriesNameForLegend(series)!
+            WidgetLegendNameEncoderDecoder.decodeSeriesNameForLegend(series)
           )
         )
         .join(SERIES_LIST_DELIMITER)

static/app/views/dashboards/widgets/timeSeriesWidget/formatters/formatTimeSeriesName.spec.tsx

@@ -5,8 +5,8 @@ import {formatTimeSeriesName} from './formatTimeSeriesName';
 describe('formatSeriesName', () => {
   describe('releases', () => {
     it.each([
-      ['p75(span.duration);11762', 'p75(span.duration)'],
-      ['Releases;', 'Releases'],
+      ['p75(span.duration)|~|11762', 'p75(span.duration)'],
+      ['Releases|~|', 'Releases'],
     ])('Formats %s as %s', (name, result) => {
       const timeSeries = TimeSeriesFixture({
         yAxis: name,
@@ -72,8 +72,8 @@ describe('formatSeriesName', () => {
 
   describe('combinations', () => {
     it.each([
-      ['equation|p75(measurements.cls) + 1;76123', 'p75(measurements.cls) + 1'],
-      ['equation|p75(measurements.cls);76123', 'p75(measurements.cls)'],
+      ['equation|p75(measurements.cls) + 1|~|76123', 'p75(measurements.cls) + 1'],
+      ['equation|p75(measurements.cls)|~|76123', 'p75(measurements.cls)'],
     ])('Formats %s as %s', (name, result) => {
       const timeSeries = TimeSeriesFixture({
         yAxis: name,
@@ -86,7 +86,7 @@ describe('formatSeriesName', () => {
   describe('groupBy', () => {
     it.each([
       [
-        'equation|p75(measurements.cls);76123',
+        'equation|p75(measurements.cls)|~|76123',
         [{key: 'release', value: 'v0.0.2'}],
         'v0.0.2',
       ],