feat(tracemetrics): Add column sorting to samples table

Wire up click-to-sort on metrics samples table headers and persist
sort state in the URL. The aggregates table already had sorting; this
brings the samples table to parity.

Author: nsdeschenes

static/app/views/explore/metrics/metricInfoTabs/metricsSamplesTableHeader.tsx

@@ -3,6 +3,7 @@ import type {ReactNode} from 'react';
 import {Tooltip} from '@sentry/scraps/tooltip';
 
 import {t} from 'sentry/locale';
+import type {Sort} from 'sentry/utils/discover/fields';
 import {
   StyledSimpleTableHeader,
   StyledSimpleTableHeaderCell,
@@ -13,7 +14,15 @@ import {
   type SampleTableColumnKey,
 } from 'sentry/views/explore/metrics/types';
 import {getMetricTableColumnType} from 'sentry/views/explore/metrics/utils';
-import {useQueryParamsSortBys} from 'sentry/views/explore/queryParams/context';
+import {
+  useQueryParamsSortBys,
+  useSetQueryParamsSortBys,
+} from 'sentry/views/explore/queryParams/context';
+
+const NON_SORTABLE_COLUMNS = new Set<SampleTableColumnKey>([
+  VirtualTableSampleColumnKey.EXPAND_ROW,
+  VirtualTableSampleColumnKey.PROJECT_BADGE,
+]);
 
 interface MetricsSamplesTableHeaderProps {
   columns: SampleTableColumnKey[];
@@ -25,6 +34,7 @@ export function MetricsSamplesTableHeader({
   embedded,
 }: MetricsSamplesTableHeaderProps) {
   const sorts = useQueryParamsSortBys();
+  const setSorts = useSetQueryParamsSortBys();
 
   return (
     <StyledSimpleTableHeader>
@@ -37,6 +47,7 @@ export function MetricsSamplesTableHeader({
             field={field}
             index={i}
             sort={sorts.find(s => s.field === field)?.kind}
+            setSorts={setSorts}
             embedded={embedded}
           >
             {label}
@@ -52,23 +63,32 @@ function FieldHeaderCellWrapper({
   children,
   index,
   sort,
+  setSorts,
   embedded = false,
 }: {
   children: ReactNode;
   field: SampleTableColumnKey;
   index: number;
+  setSorts: (sorts: Sort[]) => void;
   embedded?: boolean;
   sort?: 'asc' | 'desc';
 }) {
   const columnType = getMetricTableColumnType(field);
   const label = getFieldLabel(field);
   const hasPadding = field !== VirtualTableSampleColumnKey.EXPAND_ROW;
+  const canSort = !NON_SORTABLE_COLUMNS.has(field);
+
+  function handleSortClick() {
+    const kind = sort === 'desc' ? 'asc' : 'desc';
+    setSorts([{field, kind}]);
+  }
 
   if (columnType === 'metric_value') {
     return (
       <StyledSimpleTableHeaderCell
         key={index}
         sort={sort}
+        handleSortClick={canSort ? handleSortClick : undefined}
         style={{
           justifyContent: 'flex-end',
           paddingRight: 'calc(12px + 15px)', // 12px is the padding of the cell, 15px is the width of the scrollbar.
@@ -86,6 +106,7 @@ function FieldHeaderCellWrapper({
     <StyledSimpleTableHeaderCell
       key={index}
       sort={sort}
+      handleSortClick={canSort ? handleSortClick : undefined}
       noPadding={!hasPadding}
       embedded={embedded}
     >

static/app/views/explore/metrics/metricQuery.spec.tsx

@@ -112,5 +112,62 @@ describe('decodeMetricsQueryParams', () => {
     expect(decoded?.queryParams.aggregateFields).toEqual(
       original.queryParams.aggregateFields
     );
+    expect(decoded?.queryParams.sortBys).toEqual(original.queryParams.sortBys);
+  });
+
+  it('round-trips custom sortBys through encode/decode', () => {
+    const original = {
+      metric: {name: 'test_metric', type: 'counter'},
+      queryParams: new ReadableQueryParams({
+        extrapolate: true,
+        mode: Mode.SAMPLES,
+        query: '',
+        cursor: '',
+        fields: ['id', 'timestamp'],
+        sortBys: [{field: 'value', kind: 'asc' as const}],
+        aggregateCursor: '',
+        aggregateFields: [new VisualizeFunction('sum(value,test_metric,counter,-)')],
+        aggregateSortBys: [
+          {field: 'sum(value,test_metric,counter,-)', kind: 'desc' as const},
+        ],
+      }),
+    };
+
+    const encoded = encodeMetricQueryParams(original);
+    const decoded = decodeMetricsQueryParams(encoded);
+
+    expect(decoded).not.toBeNull();
+    expect(decoded?.queryParams.sortBys).toEqual([{field: 'value', kind: 'asc'}]);
+  });
+
+  it('falls back to default sortBys when missing from JSON', () => {
+    const json = JSON.stringify({
+      metric: {name: 'test_metric', type: 'counter'},
+      query: '',
+      aggregateFields: [{yAxes: ['sum(value,test_metric,counter,-)']}],
+      aggregateSortBys: [],
+      mode: 'samples',
+    });
+
+    const result = decodeMetricsQueryParams(json);
+
+    expect(result).not.toBeNull();
+    expect(result?.queryParams.sortBys).toEqual([{field: 'timestamp', kind: 'desc'}]);
+  });
+
+  it('falls back to default sortBys when format is invalid', () => {
+    const json = JSON.stringify({
+      metric: {name: 'test_metric', type: 'counter'},
+      query: '',
+      aggregateFields: [{yAxes: ['sum(value,test_metric,counter,-)']}],
+      aggregateSortBys: [],
+      sortBys: [{field: 'value', kind: 'invalid'}],
+      mode: 'samples',
+    });
+
+    const result = decodeMetricsQueryParams(json);
+
+    expect(result).not.toBeNull();
+    expect(result?.queryParams.sortBys).toEqual([{field: 'timestamp', kind: 'desc'}]);
   });
 });

static/app/views/explore/metrics/metricQuery.tsx

@@ -67,6 +67,8 @@ export function decodeMetricsQueryParams(value: string): BaseMetricQuery | null
   const groupBys = parseGroupBys(json.aggregateFields);
   const aggregateFields = [...visualizes, ...groupBys];
   const aggregateSortBys = parseAggregateSortBys(json.aggregateSortBys, aggregateFields);
+  const fields = defaultFields();
+  const sortBys = parseSortBys(json.sortBys, fields);
 
   return {
     metric,
@@ -76,8 +78,8 @@ export function decodeMetricsQueryParams(value: string): BaseMetricQuery | null
       query,
 
       cursor: '',
-      fields: defaultFields(),
-      sortBys: defaultSortBys(defaultFields()),
+      fields,
+      sortBys,
 
       aggregateCursor: '',
       aggregateFields,
@@ -99,6 +101,7 @@ export function encodeMetricQueryParams(metricQuery: BaseMetricQuery): string {
       return field;
     }),
     aggregateSortBys: metricQuery.queryParams.aggregateSortBys,
+    sortBys: metricQuery.queryParams.sortBys,
     mode: metricQuery.queryParams.mode,
   });
 }
@@ -219,3 +222,25 @@ function parseAggregateSortBys(
 
   return value;
 }
+
+function parseSortBys(value: unknown, fields: string[]): Sort[] {
+  if (!Array.isArray(value) || value.length === 0) {
+    return defaultSortBys(fields);
+  }
+
+  const isValid = value.every(
+    (v: unknown) =>
+      v !== null &&
+      typeof v === 'object' &&
+      'field' in v &&
+      typeof v.field === 'string' &&
+      'kind' in v &&
+      (v.kind === 'asc' || v.kind === 'desc')
+  );
+
+  if (!isValid) {
+    return defaultSortBys(fields);
+  }
+
+  return value as Sort[];
+}

static/app/views/explore/metrics/metricsQueryParams.tsx

@@ -62,6 +62,7 @@ export function MetricsQueryParamsProvider({
         query: getUpdatedValue(writableQueryParams.query, defaultQuery),
         aggregateFields: writableQueryParams.aggregateFields,
         aggregateSortBys: writableQueryParams.aggregateSortBys,
+        sortBys: writableQueryParams.sortBys,
         mode: writableQueryParams.mode,
       });