ref(explore): Improve conversion to TimeSeries (#100532)

Explore makes requests to `/events-stats/` but immediately converts that
response to an array of `TimeSeries` objects, which are passed to charts
and so on. The way it's done right now is a _slight_ hack, which I'm
fixing. If the request is a "top events" grouped by environment, we end
up with `TimeSeries` objects that look like this:

```
{
  yAxis: "prod",
  values: [...
  meta: {
     ...
```

This works fine because `TimeSeriesWidgetVisualization` parses the
`yAxis` value and formats it correctly. A better approach is to actually
_parse_ the response properly, and create a full `TimeSeries` object
that looks like this:

```
{
  yAxis: "count(span.duration)",
  groupBy: [{key: "environment": value: "prod"}],
  meta: {
    isOther: false,
    ...
```

If we correctly populate `yAxis`, `groupBy`, and `isOther`, that allows
`TimeSeriesVisualization` to correctly label everything by default. This
removes the need for setting aliases, and improves compatibility.
Incidentally, it also fixes DAIN-119! With a proper `groupBy`, we don't
need to try and parse everything as a version, and cause false
positives.

Other than the fix for that small bug, this doesn't create any visible
changes in the UI. This also helps me prepare for replacing
`/events-stats/` with `/events-timeseries/` on this page.

**NOTE:** This change creates a bit of duplication when parsing
`groupBy`, but don't worry, it's temporary, since all this code will go
away once we use `/events-timeseries/` here.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Refactors timeseries transformation to populate yAxis/groupBy/isOther
and ordering, updates chart/formatter to use meta.isOther, adds
parseGroupBy, and removes legacy isTimeSeriesOther.
> 
> - **Explore timeseries transformation**:
> - Refactor `transformToSeriesMap` and
`convertEventsStatsToTimeSeriesData` to set `yAxis`, `groupBy` (via
`parseGroupBy`), `meta.isOther`, and `meta.order`; support grouped
multi-series; return series grouped by `yAxis` and sorted by `order`.
> - **Formatting and visualization**:
> - `formatTimeSeriesName` returns `"Other"` when `meta.isOther` and
continues existing measurement/version/equation formatting.
> - `chartVisualization` colors series using `s.meta.isOther` and
removes alias-based legend formatting.
> - **Types**:
>   - Export `TimeSeriesGroupBy` from `widgets/common/types`.
> - **Utilities/Tests**:
> - Add `parseGroupBy` with tests; remove `isTimeSeriesOther` and its
tests; add tests for `Other` handling in formatter.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
ea8e062. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: gggritso

static/app/utils/timeSeries/isTimeSeriesOther.spec.tsx

@@ -0,0 +1,52 @@
+import {parseGroupBy} from './parseGroupBy';
+
+describe('parseGroupBy', () => {
+  it('returns undefined for "Other" group name', () => {
+    const result = parseGroupBy('Other', ['field1', 'field2']);
+    expect(result).toBeUndefined();
+  });
+
+  it('parses single field and value correctly', () => {
+    const result = parseGroupBy('value1', ['field1']);
+    expect(result).toEqual([{key: 'field1', value: 'value1'}]);
+  });
+
+  it('parses multiple fields and values correctly', () => {
+    const result = parseGroupBy('value1,value2,value3', ['field1', 'field2', 'field3']);
+    expect(result).toEqual([
+      {key: 'field1', value: 'value1'},
+      {key: 'field2', value: 'value2'},
+      {key: 'field3', value: 'value3'},
+    ]);
+  });
+
+  it('handles more values than fields by using empty strings for extra values', () => {
+    const result = parseGroupBy('value1,value2', ['field1']);
+    expect(result).toEqual([
+      {key: 'field1', value: 'value1'},
+      {key: '', value: 'value2'},
+    ]);
+  });
+
+  it('handles more fields than values by using empty strings for missing values', () => {
+    const result = parseGroupBy('value1', ['field1', 'field2']);
+    expect(result).toEqual([
+      {key: 'field1', value: 'value1'},
+      {key: 'field2', value: ''},
+    ]);
+  });
+
+  it('handles empty strings in values', () => {
+    const result = parseGroupBy('value1,,value3', ['field1', 'field2', 'field3']);
+    expect(result).toEqual([
+      {key: 'field1', value: 'value1'},
+      {key: 'field2', value: ''},
+      {key: 'field3', value: 'value3'},
+    ]);
+  });
+
+  it('handles empty fields array', () => {
+    const result = parseGroupBy('', []);
+    expect(result).toBeUndefined();
+  });
+});

static/app/utils/timeSeries/isTimeSeriesOther.tsx

@@ -0,0 +1,26 @@
+import zipWith from 'lodash/zipWith';
+
+import type {TimeSeriesGroupBy} from 'sentry/views/dashboards/widgets/common/types';
+
+export function parseGroupBy(
+  groupName: string,
+  fields: string[]
+): TimeSeriesGroupBy[] | undefined {
+  if (groupName === 'Other') {
+    return undefined;
+  }
+
+  const groupKeys = fields;
+  const groupValues = groupName.split(',');
+
+  const groupBys = zipWith(groupKeys, groupValues, (key, value) => {
+    return {
+      key: key ?? '',
+      value: value ?? '',
+    };
+  }).filter(groupBy => {
+    return groupBy.key || groupBy.value;
+  });
+
+  return groupBys.length > 0 ? groupBys : undefined;
+}

static/app/utils/timeSeries/parseGroupBy.spec.tsx

@@ -65,7 +65,7 @@ export type TimeSeriesItem = {
  */
 type IncompleteReason = 'INCOMPLETE_BUCKET';
 
-type TimeSeriesGroupBy = {
+export type TimeSeriesGroupBy = {
   key: string;
   /**
    * The `value` of a `groupBy` can sometimes surprisingly be an array, because some datasets support array values. e.g., in the error dataset, the error type could be an array that looks like `["Exception", null, "TypeError"]`

static/app/utils/timeSeries/parseGroupBy.tsx

@@ -148,4 +148,16 @@ describe('formatSeriesName', () => {
       expect(formatTimeSeriesName(timeSeries)).toEqual(result);
     });
   });
+
+  describe('other', () => {
+    it('Formats "Other"', () => {
+      const timeSeries = TimeSeriesFixture();
+      timeSeries.meta = {
+        ...timeSeries.meta,
+        isOther: true,
+      };
+
+      expect(formatTimeSeriesName(timeSeries)).toBe('Other');
+    });
+  });
 });

static/app/views/dashboards/widgets/common/types.tsx

@@ -1,3 +1,4 @@
+import {t} from 'sentry/locale';
 import {
   getAggregateArg,
   getMeasurementSlug,
@@ -12,6 +13,10 @@ export function formatTimeSeriesName(timeSeries: TimeSeries): string {
   // If the timeSeries has `groupBy` information, the label is made by
   // concatenating the values of the groupBy, since there's no point repeating
   // the name of the Y axis multiple times in the legend.
+  if (timeSeries.meta.isOther) {
+    return t('Other');
+  }
+
   if (timeSeries.groupBy?.length && timeSeries.groupBy.length > 0) {
     return `${timeSeries.groupBy
       ?.map(groupBy => {

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

@@ -6,7 +6,6 @@ import styled from '@emotion/styled';
 import TransparentLoadingMask from 'sentry/components/charts/transparentLoadingMask';
 import {t} from 'sentry/locale';
 import type {ReactEchartsRef} from 'sentry/types/echarts';
-import {isTimeSeriesOther} from 'sentry/utils/timeSeries/isTimeSeriesOther';
 import {markDelayedData} from 'sentry/utils/timeSeries/markDelayedData';
 import usePrevious from 'sentry/utils/usePrevious';
 import {Area} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/area';
@@ -17,7 +16,6 @@ import {TimeSeriesWidgetVisualization} from 'sentry/views/dashboards/widgets/tim
 import {Widget} from 'sentry/views/dashboards/widgets/widget/widget';
 import type {ChartInfo} from 'sentry/views/explore/components/chart/types';
 import {SAMPLING_MODE} from 'sentry/views/explore/hooks/useProgressiveQuery';
-import {prettifyAggregation} from 'sentry/views/explore/utils';
 import {ChartType} from 'sentry/views/insights/common/components/chart';
 import {INGESTION_DELAY} from 'sentry/views/insights/settings';
 
@@ -38,8 +36,6 @@ export function ChartVisualization({
   const theme = useTheme();
 
   const plottables = useMemo(() => {
-    const formattedYAxis = prettifyAggregation(chartInfo.yAxis) ?? chartInfo.yAxis;
-
     const DataPlottableConstructor =
       chartInfo.chartType === ChartType.LINE
         ? Line
@@ -55,13 +51,12 @@ export function ChartVisualization({
       // values instead of the aggregate function.
       if (s.yAxis === chartInfo.yAxis) {
         return new DataPlottableConstructor(markDelayedData(s, INGESTION_DELAY), {
-          alias: formattedYAxis ?? chartInfo.yAxis,
-          color: isTimeSeriesOther(s) ? theme.chartOther : undefined,
+          color: s.meta.isOther ? theme.chartOther : undefined,
           stack: 'all',
         });
       }
       return new DataPlottableConstructor(markDelayedData(s, INGESTION_DELAY), {
-        color: isTimeSeriesOther(s) ? theme.chartOther : undefined,
+        color: s.meta.isOther ? theme.chartOther : undefined,
         stack: 'all',
       });
     });