Revert "feat(perf): Add landing widgets for most issues and errors (#…

…29209)"

This reverts commit a58a275.

Co-authored-by: kevan.fisher via Slack <kevan.fisher@sentry.io>

static/app/views/performance/data.tsx

@@ -50,8 +50,6 @@ export enum PERFORMANCE_TERM {
   SLOW_FRAMES = 'slowFrames',
   FROZEN_FRAMES = 'frozenFrames',
   STALL_PERCENTAGE = 'stallPercentage',
-  MOST_ISSUES = 'mostIssues',
-  MOST_ERRORS = 'mostErrors',
 }
 
 export type TooltipOption = SelectValue<string> & {
@@ -359,8 +357,6 @@ export const PERFORMANCE_TERMS: Record<PERFORMANCE_TERM, TermFormatter> = {
     t('Warm start is a measure of the application start up time while still in memory.'),
   slowFrames: () => t('The count of the number of slow frames in the transaction.'),
   frozenFrames: () => t('The count of the number of frozen frames in the transaction.'),
-  mostErrors: () => t('Transactions with the most associated errors.'),
-  mostIssues: () => t('The most instances of an issue for a related transaction.'),
   stallPercentage: () =>
     t(
       'The percentage of the transaction duration in which the application is in a stalled state.'

static/app/views/performance/landing/views/allTransactionsView.tsx

@@ -24,9 +24,12 @@ export function AllTransactionsView(props: BasePerformanceViewProps) {
       <DoubleChartRow
         {...props}
         allowedCharts={[
+          // TODO(k-fish): Temporarily adding extra charts here while trends widgets are in progress.
           PerformanceWidgetSetting.TPM_AREA,
-          PerformanceWidgetSetting.MOST_RELATED_ERRORS,
-          PerformanceWidgetSetting.MOST_RELATED_ISSUES,
+          PerformanceWidgetSetting.TPM_AREA,
+          PerformanceWidgetSetting.TPM_AREA,
+          PerformanceWidgetSetting.MOST_IMPROVED,
+          PerformanceWidgetSetting.MOST_REGRESSED,
         ]}
       />
       <Table {...props} setError={usePageError().setPageError} />

static/app/views/performance/landing/widgets/components/performanceWidget.tsx

@@ -26,21 +26,16 @@ export function GenericPerformanceWidget<T extends WidgetDataConstraint>(
   props: WidgetPropUnion<T>
 ) {
   const [widgetData, setWidgetData] = useState<T>({} as T);
-  const [nextWidgetData, setNextWidgetData] = useState<T>({} as T);
 
   const setWidgetDataForKey = useCallback(
     (dataKey: string, result?: WidgetDataResult) => {
       if (result) {
-        setNextWidgetData({...nextWidgetData, [dataKey]: result});
-      }
-      if (result?.hasData || result?.isErrored) {
-        setNextWidgetData({...nextWidgetData, [dataKey]: result});
         setWidgetData({...widgetData, [dataKey]: result});
       }
     },
-    [widgetData, nextWidgetData, setWidgetData, setNextWidgetData]
+    [setWidgetData]
   );
-  const widgetProps = {widgetData, nextWidgetData, setWidgetDataForKey};
+  const widgetProps = {widgetData, setWidgetDataForKey};
 
   const queries = Object.entries(props.Queries).map(([key, definition]) => ({
     ...definition,
@@ -49,8 +44,6 @@ export function GenericPerformanceWidget<T extends WidgetDataConstraint>(
 
   const api = useApi();
 
-  const totalHeight = props.Visualizations.reduce((acc, curr) => acc + curr.height, 0);
-
   return (
     <Fragment>
       <QueryHandler
@@ -60,34 +53,28 @@ export function GenericPerformanceWidget<T extends WidgetDataConstraint>(
         queries={queries}
         api={api}
       />
-      <_DataDisplay<T> {...props} {...widgetProps} totalHeight={totalHeight} />
+      <_DataDisplay<T> {...props} {...widgetProps} />
     </Fragment>
   );
 }
 
 function _DataDisplay<T extends WidgetDataConstraint>(
-  props: GenericPerformanceWidgetProps<T> &
-    WidgetDataProps<T> & {nextWidgetData: T; totalHeight: number}
+  props: GenericPerformanceWidgetProps<T> & WidgetDataProps<T>
 ) {
-  const {Visualizations, chartHeight, totalHeight, containerType} = props;
+  const {Visualizations, chartHeight, containerType} = props;
 
   const Container = getPerformanceWidgetContainer({
     containerType,
   });
 
-  const numberKeys = Object.keys(props.Queries).length;
-  const missingDataKeys = Object.values(props.widgetData).length !== numberKeys;
-  const missingNextDataKeys = Object.values(props.nextWidgetData).length !== numberKeys;
+  const missingDataKeys = !Object.values(props.widgetData).length;
   const hasData =
     !missingDataKeys && Object.values(props.widgetData).every(d => !d || d.hasData);
   const isLoading =
-    !missingNextDataKeys &&
-    Object.values(props.nextWidgetData).some(d => !d || d.isLoading);
+    !missingDataKeys && Object.values(props.widgetData).some(d => !d || d.isLoading);
   const isErrored =
     !missingDataKeys && Object.values(props.widgetData).some(d => d && d.isErrored);
 
-  const paddingOffset = 32; // space(2) * 2;
-
   return (
     <Container data-test-id="performance-widget-container">
       <ContentContainer>
@@ -97,7 +84,7 @@ function _DataDisplay<T extends WidgetDataConstraint>(
         isLoading={isLoading}
         isErrored={isErrored}
         hasData={hasData}
-        errorComponent={<DefaultErrorComponent height={totalHeight - paddingOffset} />}
+        errorComponent={<DefaultErrorComponent height={chartHeight} />}
         dataComponents={Visualizations.map((Visualization, index) => (
           <ContentContainer
             key={index}
@@ -112,7 +99,7 @@ function _DataDisplay<T extends WidgetDataConstraint>(
             />
           </ContentContainer>
         ))}
-        emptyComponent={<Placeholder height={`${totalHeight - paddingOffset}px`} />}
+        emptyComponent={<Placeholder height={`${chartHeight}px`} />}
       />
     </Container>
   );

static/app/views/performance/landing/widgets/components/queryHandler.tsx

@@ -39,11 +39,6 @@ export function QueryHandler<T extends WidgetDataConstraint>(
             project={globalSelection.projects}
             environment={globalSelection.environments}
             organization={props.queryProps.organization}
-            orgSlug={props.queryProps.organization.slug}
-            query={props.queryProps.eventView.getQueryWithAdditionalConditions()}
-            eventView={props.queryProps.eventView}
-            location={props.queryProps.location}
-            widgetData={props.widgetData}
           >
             {results => {
               return (

static/app/views/performance/landing/widgets/components/widgetChartRow.tsx

@@ -47,14 +47,14 @@ export const TripleChartRow = (props: ChartRowProps) => <ChartRow {...props} />;
 
 TripleChartRow.defaultProps = {
   chartCount: 3,
-  chartHeight: 120,
+  chartHeight: 160,
 };
 
 export const DoubleChartRow = (props: ChartRowProps) => <ChartRow {...props} />;
 
 DoubleChartRow.defaultProps = {
   chartCount: 2,
-  chartHeight: 220,
+  chartHeight: 300,
 };
 
 const StyledRow = styled(PerformanceLayoutBodyRow)`

static/app/views/performance/landing/widgets/components/widgetContainer.tsx

@@ -10,7 +10,6 @@ import ContextMenu from 'app/views/dashboardsV2/contextMenu';
 
 import {GenericPerformanceWidgetDataType} from '../types';
 import {PerformanceWidgetSetting, WIDGET_DEFINITIONS} from '../widgetDefinitions';
-import {LineChartListWidget} from '../widgets/lineChartListWidget';
 import {SingleFieldAreaWidget} from '../widgets/singleFieldAreaWidget';
 
 import {ChartRowProps} from './widgetChartRow';
@@ -76,7 +75,6 @@ const _WidgetContainer = (props: Props) => {
   };
 
   const widgetProps = {
-    chartSetting,
     ...WIDGET_DEFINITIONS({organization})[chartSetting],
     ContainerActions: containerProps => (
       <WidgetContainerActions
@@ -92,8 +90,6 @@ const _WidgetContainer = (props: Props) => {
       throw new Error('Trends not currently supported.');
     case GenericPerformanceWidgetDataType.area:
       return <SingleFieldAreaWidget {...props} {...widgetProps} />;
-    case GenericPerformanceWidgetDataType.line_list:
-      return <LineChartListWidget {...props} {...widgetProps} />;
     default:
       throw new Error(`Widget type "${widgetProps.dataType}" has no implementation.`);
   }

static/app/views/performance/landing/widgets/transforms/transformEventsToArea.tsx

@@ -31,7 +31,7 @@ export function transformEventsRequestToArea<T extends WidgetDataConstraint>(
     ...results,
     isLoading: results.loading,
     isErrored: results.errored,
-    hasData: defined(data) && !!data.length && !!data[0].data.length,
+    hasData: defined(data) && data.length && !!data[0].data.length,
     data,
     dataMean,
     previousData: results.previousTimeseriesData ?? undefined,

static/app/views/performance/landing/widgets/types.tsx

@@ -4,7 +4,7 @@ import {Location} from 'history';
 import {Client} from 'app/api';
 import BaseChart from 'app/components/charts/baseChart';
 import {RenderProps} from 'app/components/charts/eventsRequest';
-import {DateString, Organization, OrganizationSummary} from 'app/types';
+import {DateString, Organization} from 'app/types';
 import EventView from 'app/utils/discover/eventView';
 
 import {PerformanceWidgetContainerTypes} from './components/performanceWidgetContainer';
@@ -20,7 +20,6 @@ export enum GenericPerformanceWidgetDataType {
   histogram = 'histogram',
   area = 'area',
   vitals = 'vitals',
-  line_list = 'line_list',
   trends = 'trends',
 }
 
@@ -36,7 +35,7 @@ export interface WidgetDataConstraint {
 export type QueryChildren = {
   children: (props: any) => ReactNode; // TODO(k-fish): Fix any type.
 };
-export type QueryFC<T extends WidgetDataConstraint> = FunctionComponent<
+export type QueryFC = FunctionComponent<
   QueryChildren & {
     fields?: string | string[];
     yAxis?: string | string[];
@@ -46,20 +45,15 @@ export type QueryFC<T extends WidgetDataConstraint> = FunctionComponent<
     project?: Readonly<number[]>;
     environment?: Readonly<string[]>;
     team?: Readonly<string | string[]>;
-    query?: string;
-    orgSlug: string;
-    location: Location;
-    organization: OrganizationSummary;
-    eventView: EventView;
-    widgetData: T;
+    organization?: Organization;
   }
 >;
 
 export type QueryDefinition<
   T extends WidgetDataConstraint,
   S extends WidgetDataResult | undefined
 > = {
-  component: QueryFC<T>;
+  component: QueryFC;
   fields: string | string[];
   enabled?: (data: T) => boolean;
   transform: (

static/app/views/performance/landing/widgets/widgetDefinitions.tsx

@@ -30,8 +30,6 @@ export enum PerformanceWidgetSetting {
   WORST_LCP_VITALS = 'worst_lcp_vitals',
   MOST_IMPROVED = 'most_improved',
   MOST_REGRESSED = 'most_regressed',
-  MOST_RELATED_ERRORS = 'most_related_errors',
-  MOST_RELATED_ISSUES = 'most_related_issues',
 }
 
 const WIDGET_PALETTE = CHART_PALETTE[5];
@@ -124,20 +122,6 @@ export const WIDGET_DEFINITIONS: ({
     dataType: GenericPerformanceWidgetDataType.area,
     chartColor: WIDGET_PALETTE[0],
   },
-  [PerformanceWidgetSetting.MOST_RELATED_ERRORS]: {
-    title: t('Most Related Errors'),
-    titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.USER_MISERY),
-    fields: [`failure_count()`],
-    dataType: GenericPerformanceWidgetDataType.line_list,
-    chartColor: WIDGET_PALETTE[0],
-  },
-  [PerformanceWidgetSetting.MOST_RELATED_ISSUES]: {
-    title: t('Most Related Issues'),
-    titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.USER_MISERY),
-    fields: [`count()`],
-    dataType: GenericPerformanceWidgetDataType.line_list,
-    chartColor: WIDGET_PALETTE[0],
-  },
   [PerformanceWidgetSetting.MOST_IMPROVED]: {
     title: t('Most Improved'),
     titleTooltip: t(