fix(dashboards-eap): Sort by arbitrary aggregate should render chart (#87186)

Navigating to explore with a widget that has an arbitrary aggregate
(i.e. not included in the fields or the aggregates) should add another
visualize chart so we have access to the arbitrary aggregate for sorting

I was trying to add this to where we process `eventViewFromWidget` but
because it assumes an aggregate alias, it was more complex than
necessary to properly expose it as a sort when we can just pick it off
the widget query like this. We can't convert back from an aggregate
alias to its original form anyways, so I'd have to pick the orderby off
of the widget to get the right value for explore.

Author: narsaynorath

static/app/views/dashboards/utils/getWidgetExploreUrl.spec.tsx

@@ -79,4 +79,28 @@ describe('getWidgetExploreUrl', () => {
       '/organizations/org-slug/traces/?dataset=spansRpc&field=avg%28span.duration%29&groupBy=&interval=30m&mode=aggregate&statsPeriod=14d&visualize=%7B%22chartType%22%3A2%2C%22yAxes%22%3A%5B%22avg%28span.duration%29%22%5D%7D'
     );
   });
+
+  it('returns the correct URL for chart widgets where the sort is not in the yAxes', () => {
+    // This is a widget plotting the avg(span.duration) for the most frequented spans
+    const widget = WidgetFixture({
+      displayType: DisplayType.LINE,
+      queries: [
+        {
+          fields: [],
+          aggregates: ['avg(span.duration)'],
+          columns: ['span.description'],
+          conditions: '',
+          orderby: '-count(span.duration)',
+          name: '',
+        },
+      ],
+    });
+
+    const url = getWidgetExploreUrl(widget, selection, organization);
+
+    // The URL should have the sort and another visualize to plot the sort
+    expect(url).toBe(
+      '/organizations/org-slug/traces/?dataset=spansRpc&field=span.description&field=avg%28span.duration%29&groupBy=span.description&interval=30m&mode=aggregate&sort=-count%28span.duration%29&statsPeriod=14d&visualize=%7B%22chartType%22%3A1%2C%22yAxes%22%3A%5B%22avg%28span.duration%29%22%5D%7D&visualize=%7B%22chartType%22%3A1%2C%22yAxes%22%3A%5B%22count%28span.duration%29%22%5D%7D'
+    );
+  });
 });

static/app/views/dashboards/utils/getWidgetExploreUrl.tsx

@@ -1,6 +1,9 @@
+import trimStart from 'lodash/trimStart';
+
 import type {PageFilters} from 'sentry/types/core';
 import type {Organization} from 'sentry/types/organization';
 import {defined} from 'sentry/utils';
+import toArray from 'sentry/utils/array/toArray';
 import {
   getAggregateAlias,
   isAggregateFieldOrEquation,
@@ -28,6 +31,11 @@ export function getWidgetExploreUrl(
     undefined
   );
 
+  // Inject the sort field for cases of arbitrary sorting
+  // The sort is not picked up by eventView unless it is
+  // injected into the fields
+  locationQueryParams.sort = widget.queries[0]!.orderby;
+
   // Pull a max of 3 valid Y-Axis from the widget
   const yAxisOptions = eventView.getYAxisOptions().map(({value}) => value);
   locationQueryParams.yAxes = [
@@ -109,14 +117,23 @@ export function getWidgetExploreUrl(
         chartType,
         yAxes: locationQueryParams.yAxes,
       },
+      // Explore widgets do not allow sorting by arbitrary aggregates
+      // so dashboard widgets need to inject another visualize to plot the sort
+      // and it available for sorting the main chart
+      ...(locationQueryParams.sort &&
+      !_isSortIncluded(locationQueryParams.sort, locationQueryParams.yAxes)
+        ? [
+            {
+              chartType,
+              yAxes: toArray(trimStart(locationQueryParams.sort, '-')),
+            },
+          ]
+        : []),
     ],
     groupBy,
     field: decodeList(locationQueryParams.field),
     query: decodeScalar(locationQueryParams.query),
-    sort:
-      defined(fields) && defined(locationQueryParams.sort)
-        ? _getSort(fields, locationQueryParams.sort as string)
-        : undefined,
+    sort: locationQueryParams.sort || undefined,
     interval:
       decodeScalar(locationQueryParams.interval) ??
       getWidgetInterval(widget.displayType, selection.datetime),
@@ -125,9 +142,7 @@ export function getWidgetExploreUrl(
   return getExploreUrl(queryParams);
 }
 
-function _getSort(fields: string[], sort: string) {
-  const descending = sort.startsWith('-');
-  const rawSort = descending ? sort.slice(1) : sort;
-  const sortedField = fields?.find(field => getAggregateAlias(field) === rawSort);
-  return descending ? `-${sortedField}` : sortedField;
+function _isSortIncluded(sort: string, yAxes: string[]) {
+  const rawSort = trimStart(sort, '-');
+  return yAxes.map(getAggregateAlias).includes(getAggregateAlias(rawSort));
 }