fix(timeseries): Improve parsing of null groups (#102087)

Unlike `/events-timeseries/`, `/events-stats/` has an issue where a
`null` group gets converted to `"None"` by stringifying that key in
Python. This is a mismatch between the endpoints, and I'm resolving it
here by correctly accounting for `"None"` as a key. I've also taken this
opportunity to improve how `null` groups are handled. They are now
showns as `"(no value)"` in more places.

N.B. Checking for `"null"` in the `ModelName` is a hack, sorry! It's due
to how the code is arranged. `ModelName` is used in a field renderer,
which checks the data values beforehand. It's also used directly by some
table components, where checking the value is a little more annoying. I
opted to check for `"null"`, so it's all in once place.

We could make this situation a lot better by using the field renderers
in the table widgets!

With this fix, the values in the chart tooltips and table values in
Explore and the AI modules work correctly.

**e.g.,**
<img width="168" height="419" alt="Screenshot 2025-10-24 at 12 08 28 PM"
src="https://github.com/user-attachments/assets/70bf6f59-7981-475b-b042-3cad7e939db7"
/>
<img width="356" height="296" alt="Screenshot 2025-10-24 at 12 10 35 PM"
src="https://github.com/user-attachments/assets/ddc7c466-23dd-4ef4-aa79-78b29a0d7e90"
/>
<img width="178" height="216" alt="Screenshot 2025-10-24 at 12 54 15 PM"
src="https://github.com/user-attachments/assets/836e4478-fb5c-45f2-9922-d372124c56f7"
/>

Author: gggritso

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

@@ -6,6 +6,11 @@ describe('parseGroupBy', () => {
     expect(result).toBeNull();
   });
 
+  it('returns null for "None" group name', () => {
+    const result = parseGroupBy('None', ['field1']);
+    expect(result).toEqual([{key: 'field1', value: null}]);
+  });
+
   it('parses single field and value correctly', () => {
     const result = parseGroupBy('value1', ['field1']);
     expect(result).toEqual([{key: 'field1', value: 'value1'}]);

static/app/utils/timeSeries/parseGroupBy.tsx

@@ -6,6 +6,7 @@ export function parseGroupBy(
   groupName: string,
   fields: string[]
 ): TimeSeriesGroupBy[] | null {
+  // "Other", by definition, does not have any known group by values
   if (groupName === 'Other') {
     return null;
   }
@@ -15,6 +16,15 @@ export function parseGroupBy(
   }
 
   const groupKeys = fields;
+
+  // `/events-stats/` converts Python's `None` into `"None"`. Here, we do the reverse
+  if (groupName === 'None') {
+    return groupKeys.map(groupKey => ({
+      key: groupKey,
+      value: null,
+    }));
+  }
+
   const groupValues = groupName.split(DELIMITER);
 
   // If the `groupName` contains commas, that will result in more values than

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

@@ -91,7 +91,7 @@ describe('formatSeriesName', () => {
         'v0.0.2',
       ],
       ['p95(span.duration)', [{key: 'release', value: 'v0.0.2'}], 'v0.0.2'],
-      ['p95(span.duration)', [{key: 'gen_ai.request.model', value: null}], 'null'],
+      ['p95(span.duration)', [{key: 'gen_ai.request.model', value: null}], '(no value)'],
       [
         'p95(span.duration)',
         [

static/app/views/dashboards/widgets/timeSeriesWidget/formatters/formatTimeSeriesLabel.tsx

@@ -28,8 +28,10 @@ export function formatTimeSeriesLabel(timeSeries: TimeSeries): string {
           return formatVersion(groupBy.value);
         }
 
-        // String interpolation converts `null` to `"null"` and `undefined` to
-        // `"undefined"`, which is what we want, rather than an empty string
+        if (groupBy.value === null) {
+          return t('(no value)');
+        }
+
         return `${groupBy.value}`;
       })
       .join(',')}`;

static/app/views/insights/agents/components/modelName.tsx

@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import {PlatformIcon} from 'platformicons';
 
 import {Flex} from 'sentry/components/core/layout';
+import {t} from 'sentry/locale';
 import type {Space} from 'sentry/utils/theme/theme';
 
 interface ModelNameProps {
@@ -19,7 +20,7 @@ export function ModelName({modelId, provider, size = 16, gap = 'md'}: ModelNameP
       <IconWrapper>
         <PlatformIcon platform={platform ?? 'unknown'} size={size} />
       </IconWrapper>
-      <NameWrapper>{modelId}</NameWrapper>
+      <NameWrapper>{modelId === 'null' ? t('(no value)') : modelId}</NameWrapper>
     </Flex>
   );
 }