feat(insights): update overview throughput/duration widgets to contain correct query (#97570)

Updates the frontend overview throughput and duration widgets (see
screenshot) so that it contain the same query as the table itself. This
query just tries to filter out non-frontend data.
<img width="822" height="613" alt="image"
src="https://github.com/user-attachments/assets/bee0e346-4365-4bb1-ad95-832e2baa8798"
/>

Author: DominikB2014

static/app/views/insights/common/components/widgets/overviewTransactionDurationChartWidget.tsx

@@ -1,19 +1,18 @@
 import {t} from 'sentry/locale';
-import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
 import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
 import {useSpanSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
 import {Referrer} from 'sentry/views/insights/pages/frontend/referrers';
-import {useTransactionNameQuery} from 'sentry/views/insights/pages/platform/shared/useTransactionNameQuery';
+import {useFrontendQuery} from 'sentry/views/insights/pages/frontend/useFrontendQuery';
 import {SpanFields} from 'sentry/views/insights/types';
 
 export default function OverviewTransactionDurationChartWidget(
   props: LoadableChartWidgetProps
 ) {
-  const {query} = useTransactionNameQuery();
-
+  const search = useFrontendQuery();
   const title = t('Duration');
-  const search = new MutableSearch(`${SpanFields.IS_TRANSACTION}:true ${query}`);
+
+  search.addFilterValue(SpanFields.IS_TRANSACTION, 'true');
   const referrer = Referrer.TRANSACTION_DURATION_CHART;
 
   const {data, isLoading, error} = useSpanSeries(

static/app/views/insights/common/components/widgets/overviewTransactionThroughputChartWidget.tsx

@@ -1,19 +1,18 @@
 import {t} from 'sentry/locale';
-import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
 import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
 import {useSpanSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
 import {Referrer} from 'sentry/views/insights/pages/frontend/referrers';
-import {useTransactionNameQuery} from 'sentry/views/insights/pages/platform/shared/useTransactionNameQuery';
+import {useFrontendQuery} from 'sentry/views/insights/pages/frontend/useFrontendQuery';
 import {SpanFields, type SpanProperty} from 'sentry/views/insights/types';
 
 export default function OverviewTransactionThroughputChartWidget(
   props: LoadableChartWidgetProps
 ) {
-  const {query} = useTransactionNameQuery();
-
+  const search = useFrontendQuery();
   const title = t('Throughput');
-  const search = new MutableSearch(`${SpanFields.IS_TRANSACTION}:true ${query}`);
+
+  search.addFilterValue(SpanFields.IS_TRANSACTION, 'true');
   const yAxis: SpanProperty = 'epm()';
   const referrer = Referrer.TRANSACTION_THROUGHPUT_CHART;
 

static/app/views/insights/pages/frontend/newFrontendOverviewPage.tsx

@@ -36,7 +36,6 @@ import {
   StackedWidgetWrapper,
   TripleRowWidgetWrapper,
 } from 'sentry/views/insights/pages/backend/backendOverviewPage';
-import {OVERVIEW_PAGE_ALLOWED_OPS as BACKEND_OVERVIEW_PAGE_ALLOWED_OPS} from 'sentry/views/insights/pages/backend/settings';
 import {
   FrontendOverviewTable,
   isAValidSort,
@@ -47,11 +46,11 @@ import type {PageSpanOps} from 'sentry/views/insights/pages/frontend/settings';
 import {
   DEFAULT_SORT,
   DEFAULT_SPAN_OP_SELECTION,
-  EAP_OVERVIEW_PAGE_ALLOWED_OPS,
   FRONTEND_LANDING_TITLE,
   PAGE_SPAN_OPS,
   SPAN_OP_QUERY_PARAM,
 } from 'sentry/views/insights/pages/frontend/settings';
+import {useFrontendQuery} from 'sentry/views/insights/pages/frontend/useFrontendQuery';
 import {InsightsSpanTagProvider} from 'sentry/views/insights/pages/insightsSpanTagProvider';
 import {WebVitalsWidget} from 'sentry/views/insights/pages/platform/nextjs/webVitalsWidget';
 import {IssuesWidget} from 'sentry/views/insights/pages/platform/shared/issuesWidget';
@@ -69,6 +68,8 @@ export function NewFrontendOverviewPage() {
   const onboardingProject = useOnboardingProject();
   const navigate = useNavigate();
   const {selection} = usePageFilters();
+  const search = useFrontendQuery();
+
   const cursor = decodeScalar(location.query?.[QueryParameterNames.PAGES_CURSOR]);
   const spanOp: PageSpanOps = getSpanOpFromQuery(
     decodeScalar(location.query?.[SPAN_OP_QUERY_PARAM])
@@ -85,34 +86,6 @@ export function NewFrontendOverviewPage() {
     otherProjects: selectedOtherProjects,
   } = categorizeProjects(getSelectedProjectList(selection.projects, projects));
 
-  const existingQuery = new MutableSearch(searchBarQuery);
-
-  // TODO - this query is getting complicated, once were on EAP, we should consider moving this to the backend
-  existingQuery.addOp('(');
-
-  if (spanOp === 'all') {
-    const spanOps = [...EAP_OVERVIEW_PAGE_ALLOWED_OPS, 'pageload', 'navigation'];
-    existingQuery.addFilterValue('span.op', `[${spanOps.join(',')}]`);
-    // add disjunction filter creates a very long query as it seperates conditions with OR, project ids are numeric with no spaces, so we can use a comma seperated list
-    if (selectedFrontendProjects.length > 0) {
-      existingQuery.addOp('OR');
-      existingQuery.addFilterValue(
-        'project.id',
-        `[${selectedFrontendProjects.map(({id}) => id).join(',')}]`
-      );
-    }
-  } else if (spanOp === 'pageload') {
-    const spanOps = [...EAP_OVERVIEW_PAGE_ALLOWED_OPS, 'pageload'];
-    existingQuery.addFilterValue('span.op', `[${spanOps.join(',')}]`);
-  } else if (spanOp === 'navigation') {
-    // navigation span ops doesn't work for web vitals, so we do need to filter for web vital spans
-    existingQuery.addFilterValue('span.op', 'navigation');
-  }
-
-  existingQuery.addOp(')');
-
-  existingQuery.addFilterValues('!span.op', BACKEND_OVERVIEW_PAGE_ALLOWED_OPS);
-
   const showOnboarding = onboardingProject !== undefined;
 
   const getFreeTextFromQuery = (query: string) => {
@@ -155,7 +128,7 @@ export function NewFrontendOverviewPage() {
 
   const response = useSpans(
     {
-      search: existingQuery,
+      search,
       sorts,
       cursor,
       useQueryOptions: {additonalQueryKey: STARRED_SEGMENT_TABLE_QUERY_KEY},

static/app/views/insights/pages/frontend/useFrontendQuery.tsx

@@ -0,0 +1,77 @@
+import {getSelectedProjectList} from 'sentry/utils/project/useSelectedProjectsHaveField';
+import {decodeScalar} from 'sentry/utils/queryString';
+import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import useLocationQuery from 'sentry/utils/url/useLocationQuery';
+import {useLocation} from 'sentry/utils/useLocation';
+import usePageFilters from 'sentry/utils/usePageFilters';
+import useProjects from 'sentry/utils/useProjects';
+import {OVERVIEW_PAGE_ALLOWED_OPS as BACKEND_OVERVIEW_PAGE_ALLOWED_OPS} from 'sentry/views/insights/pages/backend/settings';
+import {
+  DEFAULT_SPAN_OP_SELECTION,
+  EAP_OVERVIEW_PAGE_ALLOWED_OPS,
+  PAGE_SPAN_OPS,
+  type PageSpanOps,
+  SPAN_OP_QUERY_PARAM,
+} from 'sentry/views/insights/pages/frontend/settings';
+import {categorizeProjects} from 'sentry/views/insights/pages/utils';
+
+export function useFrontendQuery() {
+  const {projects} = useProjects();
+  const {selection} = usePageFilters();
+  const location = useLocation();
+
+  const {query: searchBarQuery} = useLocationQuery({
+    fields: {
+      query: decodeScalar,
+    },
+  });
+
+  const spanOp: PageSpanOps = getSpanOpFromQuery(
+    decodeScalar(location.query?.[SPAN_OP_QUERY_PARAM])
+  );
+
+  const query = new MutableSearch(searchBarQuery);
+
+  const {frontendProjects} = categorizeProjects(
+    getSelectedProjectList(selection.projects, projects)
+  );
+
+  // TODO - this query is getting complicated, once were on EAP, we should consider moving this to the backend
+  query.addOp('(');
+
+  if (spanOp === 'all') {
+    const spanOps = [...EAP_OVERVIEW_PAGE_ALLOWED_OPS, 'pageload', 'navigation'];
+    query.addFilterValue('span.op', `[${spanOps.join(',')}]`);
+    // add disjunction filter creates a very long query as it seperates conditions with OR, project ids are numeric with no spaces, so we can use a comma seperated list
+    if (frontendProjects.length > 0) {
+      query.addOp('OR');
+      query.addFilterValue(
+        'project.id',
+        `[${frontendProjects.map(({id}) => id).join(',')}]`
+      );
+    }
+  } else if (spanOp === 'pageload') {
+    const spanOps = [...EAP_OVERVIEW_PAGE_ALLOWED_OPS, 'pageload'];
+    query.addFilterValue('span.op', `[${spanOps.join(',')}]`);
+  } else if (spanOp === 'navigation') {
+    // navigation span ops doesn't work for web vitals, so we do need to filter for web vital spans
+    query.addFilterValue('span.op', 'navigation');
+  }
+
+  query.addOp(')');
+
+  query.addFilterValues('!span.op', BACKEND_OVERVIEW_PAGE_ALLOWED_OPS);
+
+  return query;
+}
+
+const isPageSpanOp = (op?: string): op is PageSpanOps => {
+  return PAGE_SPAN_OPS.includes(op as PageSpanOps);
+};
+
+const getSpanOpFromQuery = (op?: string): PageSpanOps => {
+  if (isPageSpanOp(op)) {
+    return op;
+  }
+  return DEFAULT_SPAN_OP_SELECTION;
+};