feat(ddm): Add selected series to samples query (#63423)

- closes https://github.com/getsentry/sentry/issues/63103

static/app/utils/metrics/index.tsx

@@ -118,7 +118,10 @@ export type SortState = {
 
 export interface MetricWidgetQueryParams extends MetricsQuerySubject {
   displayType: MetricDisplayType;
-  focusedSeries?: string;
+  focusedSeries?: {
+    seriesName: string;
+    groupBy?: Record<string, string>;
+  };
   powerUserMode?: boolean;
   showSummaryTable?: boolean;
   sort?: SortState;

static/app/views/ddm/summaryTable.tsx

@@ -11,7 +11,11 @@ import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {getUtcDateString} from 'sentry/utils/dates';
-import {formatMetricsUsingUnitAndOp, SortState} from 'sentry/utils/metrics';
+import {
+  formatMetricsUsingUnitAndOp,
+  MetricWidgetQueryParams,
+  SortState,
+} from 'sentry/utils/metrics';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {DEFAULT_SORT_STATE} from 'sentry/views/ddm/constants';
@@ -26,7 +30,7 @@ export const SummaryTable = memo(function SummaryTable({
   sort = DEFAULT_SORT_STATE as SortState,
   setHoveredSeries,
 }: {
-  onRowClick: (seriesName: string) => void;
+  onRowClick: (series: MetricWidgetQueryParams['focusedSeries']) => void;
   onSortChange: (sortState: SortState) => void;
   series: Series[];
   operation?: string;
@@ -168,6 +172,7 @@ export const SummaryTable = memo(function SummaryTable({
           ({
             name,
             seriesName,
+            groupBy,
             color,
             hidden,
             unit,
@@ -183,7 +188,10 @@ export const SummaryTable = memo(function SummaryTable({
                 <CellWrapper
                   onClick={() => {
                     if (hasMultipleSeries) {
-                      onRowClick(seriesName);
+                      onRowClick({
+                        seriesName,
+                        groupBy,
+                      });
                     }
                   }}
                   onMouseEnter={() => {

static/app/views/ddm/widget.tsx

@@ -225,10 +225,11 @@ export const MetricWidgetBody = memo(
     }, []);
 
     const toggleSeriesVisibility = useCallback(
-      (seriesName: string) => {
+      (series: MetricWidgetQueryParams['focusedSeries']) => {
         setHoveredSeries('');
         onChange?.({
-          focusedSeries: focusedSeries === seriesName ? undefined : seriesName,
+          focusedSeries:
+            focusedSeries?.seriesName === series?.seriesName ? undefined : series,
         });
       },
       [focusedSeries, onChange, setHoveredSeries]
@@ -239,7 +240,7 @@ export const MetricWidgetBody = memo(
         data &&
         getChartSeries(data, {
           mri,
-          focusedSeries,
+          focusedSeries: focusedSeries?.seriesName,
           groupBy: metricsQuery.groupBy,
           displayType,
         })
@@ -331,6 +332,7 @@ export function getChartSeries(
     return {
       values: Object.values(g.series)[0],
       name: getSeriesName(g, data.groups.length === 1, groupBy),
+      groupBy: g.by,
       transaction: g.by.transaction,
       release: g.by.release,
     };
@@ -340,6 +342,7 @@ export function getChartSeries(
 
   return sortSeries(series, displayType).map((item, i) => ({
     seriesName: item.name,
+    groupBy: item.groupBy,
     unit,
     color: colorFn(colors[i % colors.length])
       .alpha(hoveredLegend && hoveredLegend !== item.name ? 0.1 : 1)
@@ -359,6 +362,7 @@ export function getChartSeries(
 
 function sortSeries(
   series: {
+    groupBy: Record<string, string>;
     name: string;
     release: string;
     transaction: string;
@@ -397,6 +401,7 @@ export type Series = {
   data: {name: number; value: number}[];
   seriesName: string;
   unit: string;
+  groupBy?: Record<string, string>;
   hidden?: boolean;
   release?: string;
   transaction?: string;

static/app/views/ddm/widgetDetails.tsx

@@ -15,6 +15,12 @@ enum Tab {
   CODE_LOCATIONS = 'codeLocations',
 }
 
+const constructQueryString = (queryObject: Record<string, string>) => {
+  return Object.entries(queryObject)
+    .map(([key, value]) => `${key}:"${value}"`)
+    .join(' ');
+};
+
 export function WidgetDetails() {
   const {selectedWidgetIndex, widgets, focusArea} = useDDMContext();
   const [selectedTab, setSelectedTab] = useState(Tab.SAMPLES);
@@ -54,7 +60,13 @@ export function WidgetDetails() {
             <TabPanels.Item key={Tab.SAMPLES}>
               <SampleTable
                 mri={selectedWidget?.mri}
-                query={selectedWidget?.query}
+                query={
+                  selectedWidget?.focusedSeries?.groupBy
+                    ? `${selectedWidget.query} ${constructQueryString(
+                        selectedWidget.focusedSeries.groupBy
+                      )}`.trim()
+                    : selectedWidget?.query
+                }
                 {...focusArea?.range}
               />
             </TabPanels.Item>