ref(dashboards): Extract breakdown table matching and support multi-groupBy

[DominikB2014]

Extract the inline logic that matches time series data to table rows in the breakdown legend into a dedicated matchTimeSeriesToTableRow function with tests.

Tested with following dashboards

The new implementation uses groupBy.every() to match all groupBy keys, enabling legend breakdown for widgets with multiple group-by columns. It also handles type coercion between numeric table values and string groupBy values (e.g., http.response_status_code: 200 in the table matching "200" from the backend) using Python's str() conversion rules.

Changes:

• New matchTimeSeriestoTableRow.tsx with the extracted matching logic and toPythonString helper
• Tests covering: no groupBy, single groupBy, multiple groupBy, numeric-to-string coercion, no match
• Removed the widget builder restriction that disabled legend breakdown for >1 group-by column
• Removed unused aggregates variable from visualizationWidget.tsx

Refs DAIN-1387

[linear-code]

DAIN-1387 Convert numeric table value to string

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Autofix Details

Bugbot Autofix prepared fixes for both issues found in the latest run.

• ✅ Fixed: toPythonString mishandles null as 'null' not 'None'
  • Added explicit null check that returns 'None' to match Python's str(None) output, ensuring table row matching works correctly for null groupBy values.
• ✅ Fixed: Array conversion in toPythonString doesn't match Python
  • Updated array formatting to match Python's str([...]) by adding spaces after commas, wrapping strings in quotes, and converting null elements to 'None'.

Or push these changes by commenting:

@cursor push a7e8608010

Preview (a7e8608010)

diff --git a/static/app/views/dashboards/widgetCard/matchTimeSeriesToTableRow.spec.tsx b/static/app/views/dashboards/widgetCard/matchTimeSeriesToTableRow.spec.tsx
--- a/static/app/views/dashboards/widgetCard/matchTimeSeriesToTableRow.spec.tsx
+++ b/static/app/views/dashboards/widgetCard/matchTimeSeriesToTableRow.spec.tsx
@@ -90,4 +90,64 @@
 
     expect(result).toBe(42);
   });
+
+  it('matches null groupBy values correctly', () => {
+    const result = matchTimeSeriesToTableRow({
+      tableDataRows: [
+        {id: '1', project: 'None', 'count()': 15},
+        {id: '2', project: 'my-project', 'count()': 25},
+      ],
+      timeSeries: TimeSeriesFixture({
+        yAxis: 'count()',
+        groupBy: [{key: 'project', value: null}],
+      }),
+    });
+
+    expect(result).toBe(15);
+  });
+
+  it('matches array groupBy values with strings correctly', () => {
+    const result = matchTimeSeriesToTableRow({
+      tableDataRows: [
+        {id: '1', 'error.type': "['ValueError', 'TypeError']", 'count()': 10},
+        {id: '2', 'error.type': "['Exception']", 'count()': 5},
+      ],
+      timeSeries: TimeSeriesFixture({
+        yAxis: 'count()',
+        groupBy: [{key: 'error.type', value: ['ValueError', 'TypeError']}],
+      }),
+    });
+
+    expect(result).toBe(10);
+  });
+
+  it('matches array groupBy values with null elements correctly', () => {
+    const result = matchTimeSeriesToTableRow({
+      tableDataRows: [
+        {id: '1', 'error.type': "['Exception', None, 'TypeError']", 'count()': 20},
+        {id: '2', 'error.type': "['ValueError']", 'count()': 8},
+      ],
+      timeSeries: TimeSeriesFixture({
+        yAxis: 'count()',
+        groupBy: [{key: 'error.type', value: ['Exception', null, 'TypeError']}],
+      }),
+    });
+
+    expect(result).toBe(20);
+  });
+
+  it('matches array groupBy values with numbers correctly', () => {
+    const result = matchTimeSeriesToTableRow({
+      tableDataRows: [
+        {id: '1', 'status_codes': '[200, 404]', 'count()': 30},
+        {id: '2', 'status_codes': '[500]', 'count()': 2},
+      ],
+      timeSeries: TimeSeriesFixture({
+        yAxis: 'count()',
+        groupBy: [{key: 'status_codes', value: [200, 404]}],
+      }),
+    });
+
+    expect(result).toBe(30);
+  });
 });

diff --git a/static/app/views/dashboards/widgetCard/matchTimeSeriestoTableRow.tsx b/static/app/views/dashboards/widgetCard/matchTimeSeriestoTableRow.tsx
--- a/static/app/views/dashboards/widgetCard/matchTimeSeriestoTableRow.tsx
+++ b/static/app/views/dashboards/widgetCard/matchTimeSeriestoTableRow.tsx
@@ -7,12 +7,36 @@
  * match that behavior for comparisons.
  */
 function toPythonString(value: unknown): string {
+  if (value === null) {
+    return 'None';
+  }
   if (typeof value === 'boolean') {
     return value ? 'True' : 'False';
   }
   if (Array.isArray(value)) {
-    return `[${value.join(',')}]`;
+    const elements = value.map(item => {
+      if (item === null) {
+        return 'None';
+      }
+      if (typeof item === 'string') {
+        return `'${item}'`;
+      }
+      if (typeof item === 'number') {
+        return item.toString();
+      }
+      // Fallback for unexpected types in array
+      return String(item);
+    });
+    return `[${elements.join(', ')}]`;
   }
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (typeof value === 'number') {
+    return value.toString();
+  }
+  // Fallback for unexpected types (should never be reached with valid GroupBy values)
+  // eslint-disable-next-line @typescript-eslint/no-base-to-string
   return String(value);
 }

_{This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.}

[gggritso]

Cool! Just two small comments

[DominikB2014]

@gggritso renamed the function name and moved toPythonString to a util file!

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

[cursor]

toPythonString mishandles top-level null and undefined

Medium Severity

toPythonString converts null/undefined inside arrays to 'None' but falls through to String(null) → "null" at the top level, whereas Python's str(None) returns "None". The GroupBy type allows value: string | null | ..., so when a groupBy value is null, toPythonString(null) produces "null", which won't match the table row's "None" string from the backend, causing the breakdown legend to fail to find the matching row.

Additional Locations (1)

• static/app/views/dashboards/widgetCard/matchTimeSeriesToTableRowValue.tsx#L27-L28

 

[gggritso]

That Bugbot comment is worth addressing IMO, but not blocking for this PR