chore: Remove Percentage of Total widget (#68362)

This is currently found in the sidebar of transaction summary, it's
unclear what exactly it is and somewhat awkward, so let's just remove
it.

![Screenshot 2024-04-05 at 1 56
01 PM](https://github.com/getsentry/sentry/assets/63818634/87528a6d-9011-44f0-acaa-3e7058be52fb)

static/app/views/performance/transactionSummary/transactionOverview/content.tsx

@@ -40,7 +40,6 @@ import type {Actions} from 'sentry/views/discover/table/cellAction';
 import {updateQuery} from 'sentry/views/discover/table/cellAction';
 import type {TableColumn} from 'sentry/views/discover/table/types';
 import Tags from 'sentry/views/discover/tags';
-import {TransactionPercentage} from 'sentry/views/performance/transactionSummary/transactionOverview/transactionPercentage';
 import {canUseTransactionMetricsData} from 'sentry/views/performance/transactionSummary/transactionOverview/utils';
 import {
   PERCENTILE as VITAL_PERCENTILE,
@@ -85,7 +84,6 @@ type Props = {
   spanOperationBreakdownFilter: SpanOperationBreakdownFilter;
   totalValues: Record<string, number> | null;
   transactionName: string;
-  unfilteredTotalValues?: Record<string, number> | null;
 };
 
 function SummaryContent({
@@ -100,7 +98,6 @@ function SummaryContent({
   projectId,
   transactionName,
   onChangeFilter,
-  unfilteredTotalValues,
 }: Props) {
   const routes = useRoutes();
   const mepDataContext = useMEPDataContext();
@@ -449,12 +446,6 @@ function SummaryContent({
         />
       </Layout.Main>
       <Layout.Side>
-        <TransactionPercentage
-          isLoading={isLoading}
-          error={error}
-          totals={totalValues}
-          unfilteredTotals={unfilteredTotalValues}
-        />
         <UserStats
           organization={organization}
           location={location}

static/app/views/performance/transactionSummary/transactionOverview/index.spec.tsx

@@ -595,14 +595,6 @@ describe('Performance > TransactionSummary', function () {
       // Renders Failure Rate widget
       expect(screen.getByRole('heading', {name: 'Failure Rate'})).toBeInTheDocument();
       expect(screen.getByTestId('failure-rate-summary-value')).toHaveTextContent('100%');
-
-      // Renders TPM widget
-      expect(
-        screen.getByRole('heading', {name: 'Percentage of Total Transactions'})
-      ).toBeInTheDocument();
-      expect(screen.getByTestId('count-percentage-summary-value')).toHaveTextContent(
-        '100%'
-      );
     });
 
     it('renders project picker modal when no url does not have project id', async function () {
@@ -1138,14 +1130,6 @@ describe('Performance > TransactionSummary', function () {
       expect(screen.getByRole('heading', {name: 'Failure Rate'})).toBeInTheDocument();
       expect(screen.getByTestId('failure-rate-summary-value')).toHaveTextContent('100%');
 
-      // Renders TPM widget
-      expect(
-        screen.getByRole('heading', {name: 'Percentage of Total Transactions'})
-      ).toBeInTheDocument();
-      expect(screen.getByTestId('count-percentage-summary-value')).toHaveTextContent(
-        '100%'
-      );
-
       expect(
         screen.queryByTestId('search-metrics-fallback-warning')
       ).not.toBeInTheDocument();
@@ -1196,14 +1180,6 @@ describe('Performance > TransactionSummary', function () {
           }),
         })
       );
-
-      // Renders TPM widget
-      expect(
-        screen.getByRole('heading', {name: 'Percentage of Total Transactions'})
-      ).toBeInTheDocument();
-      expect(screen.getByTestId('count-percentage-summary-value')).toHaveTextContent(
-        '100%'
-      );
     });
 
     it('uses MEP dataset for stats query and shows fallback warning', async function () {
@@ -1292,15 +1268,6 @@ describe('Performance > TransactionSummary', function () {
       // Renders Failure Rate widget
       expect(screen.getByRole('heading', {name: 'Failure Rate'})).toBeInTheDocument();
       expect(screen.getByTestId('failure-rate-summary-value')).toHaveTextContent('100%');
-
-      // Renders TPM widget
-      expect(
-        screen.getByRole('heading', {name: 'Percentage of Total Transactions'})
-      ).toBeInTheDocument();
-      expect(screen.getByTestId('count-percentage-summary-value')).toHaveTextContent(
-        '100%'
-      );
-
       expect(screen.getByTestId('search-metrics-fallback-warning')).toBeInTheDocument();
     });
   });

static/app/views/performance/transactionSummary/transactionOverview/index.tsx

@@ -28,10 +28,7 @@ import useApi from 'sentry/utils/useApi';
 import withOrganization from 'sentry/utils/withOrganization';
 import withPageFilters from 'sentry/utils/withPageFilters';
 import withProjects from 'sentry/utils/withProjects';
-import {
-  getTransactionMEPParamsIfApplicable,
-  getUnfilteredTotalsEventView,
-} from 'sentry/views/performance/transactionSummary/transactionOverview/utils';
+import {getTransactionMEPParamsIfApplicable} from 'sentry/views/performance/transactionSummary/transactionOverview/utils';
 
 import {addRoutePerformanceContext} from '../../utils';
 import {
@@ -143,28 +140,12 @@ function OverviewContentWrapper(props: ChildProps) {
     referrer: 'api.performance.transaction-summary',
   });
 
-  // Unfiltered count has to be total indexed events count because it's only used
-  // in indexed events contexts
-  const additionalQueryData = useDiscoverQuery({
-    eventView: getUnfilteredTotalsEventView(eventView, location, ['count']),
-    orgSlug: organization.slug,
-    location,
-    transactionThreshold,
-    transactionThresholdMetric,
-    referrer: 'api.performance.transaction-summary',
-  });
-
   useEffect(() => {
     const isMetricsData = getIsMetricsDataFromResults(queryData.data);
     mepContext.setIsMetricsData(isMetricsData);
   }, [mepContext, queryData.data]);
 
   const {data: tableData, isLoading, error} = queryData;
-  const {
-    data: unfilteredTableData,
-    isLoading: isAdditionalQueryLoading,
-    error: additionalQueryError,
-  } = additionalQueryData;
   const {
     data: totalCountTableData,
     isLoading: isTotalCountQueryLoading,
@@ -205,9 +186,6 @@ function OverviewContentWrapper(props: ChildProps) {
   // while other fields could be either metrics or index based
   totals = {...totals, ...totalCountData};
 
-  const unfilteredTotals: TotalValues | null =
-    (unfilteredTableData?.data?.[0] as {[k: string]: number}) ?? null;
-
   return (
     <SummaryContent
       location={location}
@@ -215,12 +193,11 @@ function OverviewContentWrapper(props: ChildProps) {
       eventView={eventView}
       projectId={projectId}
       transactionName={transactionName}
-      isLoading={isLoading || isAdditionalQueryLoading || isTotalCountQueryLoading}
-      error={error || additionalQueryError || totalCountQueryError}
+      isLoading={isLoading || isTotalCountQueryLoading}
+      error={error || totalCountQueryError}
       totalValues={totals}
       onChangeFilter={onChangeFilter}
       spanOperationBreakdownFilter={spanOperationBreakdownFilter}
-      unfilteredTotalValues={unfilteredTotals}
     />
   );
 }

static/app/views/performance/transactionSummary/transactionOverview/transactionPercentage.tsx

@@ -1,87 +0,0 @@
-import {Fragment} from 'react';
-import styled from '@emotion/styled';
-import clamp from 'lodash/clamp';
-
-import {SectionHeading} from 'sentry/components/charts/styles';
-import Placeholder from 'sentry/components/placeholder';
-import {t, tct} from 'sentry/locale';
-import type {QueryError} from 'sentry/utils/discover/genericDiscoverQuery';
-import {formatPercentage} from 'sentry/utils/formatters';
-import {SidebarSpacer} from 'sentry/views/performance/transactionSummary/utils';
-
-interface TransactionPercentageProps {
-  error: QueryError | null;
-  isLoading: boolean;
-  totals: Record<string, number> | null;
-  unfilteredTotals?: Record<string, number> | null;
-}
-
-export function TransactionPercentage({
-  isLoading,
-  error,
-  totals,
-  unfilteredTotals,
-}: TransactionPercentageProps) {
-  function getValueFromTotals(field, totalValues, unfilteredTotalValues) {
-    if (totalValues && unfilteredTotalValues) {
-      // clamp handles rare cases when % > 1
-      const volumeRatio = clamp(
-        // handles 0 case to avoid diving by 0
-        unfilteredTotalValues[field] > 0
-          ? totalValues[field] / unfilteredTotalValues[field]
-          : 0,
-        0,
-        1
-      );
-      const formattedPercentage =
-        volumeRatio > 0 && volumeRatio < 0.0001
-          ? '<0.01%'
-          : formatPercentage(volumeRatio);
-      return tct('[value]', {
-        value: formattedPercentage,
-      });
-    }
-    return null;
-  }
-
-  return (
-    <Fragment>
-      <SectionHeading>{t('Percentage of Total Transactions')}</SectionHeading>
-      <SectionSummaryValue
-        data-test-id="count-percentage-summary-value"
-        isLoading={isLoading}
-        error={error}
-        value={getValueFromTotals('count()', totals, unfilteredTotals)}
-      />
-      <SidebarSpacer />
-    </Fragment>
-  );
-}
-
-type SectionSummaryValueProps = {
-  'data-test-id': string;
-  error: QueryError | null;
-  isLoading: boolean;
-  value: React.ReactNode;
-};
-
-function SectionSummaryValue({
-  error,
-  isLoading,
-  value,
-  ...props
-}: SectionSummaryValueProps) {
-  if (error) {
-    return <div {...props}>{'\u2014'}</div>;
-  }
-
-  if (isLoading) {
-    return <Placeholder height="24px" {...props} />;
-  }
-
-  return <SectionValue {...props}>{value}</SectionValue>;
-}
-
-const SectionValue = styled('div')`
-  font-size: ${p => p.theme.fontSizeExtraLarge};
-`;

static/app/views/performance/transactionSummary/transactionOverview/utils.tsx

@@ -1,17 +1,8 @@
-import type {Location} from 'history';
-
 import type {Organization} from 'sentry/types';
-import type EventView from 'sentry/utils/discover/eventView';
-import type {
-  AggregationKeyWithAlias,
-  QueryFieldValue,
-} from 'sentry/utils/discover/fields';
 import type {MetricsCardinalityContext} from 'sentry/utils/performance/contexts/metricsCardinality';
 import type {MetricsEnhancedPerformanceDataContext} from 'sentry/utils/performance/contexts/metricsEnhancedPerformanceDataContext';
 import type {MetricsEnhancedSettingContext} from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
 import {canUseMetricsData} from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
-import {decodeScalar} from 'sentry/utils/queryString';
-import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {getMEPQueryParams} from 'sentry/views/performance/landing/widgets/utils';
 
 export function canUseTransactionMetricsData(
@@ -46,27 +37,3 @@ export function getTransactionMEPParamsIfApplicable(
 
   return getMEPQueryParams(mepSetting, true);
 }
-
-export function getUnfilteredTotalsEventView(
-  eventView: EventView,
-  location: Location,
-  fields: AggregationKeyWithAlias[]
-): EventView {
-  const totalsColumns: QueryFieldValue[] = fields.map(field => ({
-    kind: 'function',
-    function: [field, '', undefined, undefined],
-  }));
-
-  const transactionName = decodeScalar(location.query.transaction);
-  const conditions = new MutableSearch('');
-
-  conditions.setFilterValues('event.type', ['transaction']);
-  if (transactionName) {
-    conditions.setFilterValues('transaction', [transactionName]);
-  }
-
-  const unfilteredEventView = eventView.withColumns([...totalsColumns]);
-  unfilteredEventView.query = conditions.formatString();
-
-  return unfilteredEventView;
-}