From f665d18363baf1a0a101b02ccfcf7f5cf12b4dd7 Mon Sep 17 00:00:00 2001
From: k-fish <kevan.fisher@sentry.io>
Date: Thu, 4 Nov 2021 16:34:49 -0400
Subject: [PATCH] fix(perf): Fix vitalWidget request and bar

The updated events request has to transform the results, it was set to false before. Additionally, smoothing is currently causing some issues with some of the data in the series, so it's been removed.
---
 .../landing/widgets/widgets/vitalWidget.tsx          | 12 ++++++++----
 .../app/views/performance/vitalDetail/vitalChart.tsx |  6 ++----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/static/app/views/performance/landing/widgets/widgets/vitalWidget.tsx b/static/app/views/performance/landing/widgets/widgets/vitalWidget.tsx
index 84a1f5e23a3a00..c17127e08fb865 100644
--- a/static/app/views/performance/landing/widgets/widgets/vitalWidget.tsx
+++ b/static/app/views/performance/landing/widgets/widgets/vitalWidget.tsx
@@ -109,7 +109,7 @@ export function VitalWidget(props: Props) {
               currentSeriesNames={[field]}
               includePrevious={false}
               partial={false}
-              includeTransformedData={false}
+              includeTransformedData
               query={_eventView.getQueryWithAdditionalConditions()}
               interval={getInterval(
                 {
@@ -242,7 +242,7 @@ export function VitalWidget(props: Props) {
                     <GrowLink to={target}>
                       <Truncate value={transaction} maxLength={40} />
                     </GrowLink>
-                    <RightAlignedCell>
+                    <VitalBarCell>
                       <VitalBar
                         isLoading={provided.widgetData.list?.isLoading}
                         vital={settingToVital[props.chartSetting]}
@@ -250,9 +250,9 @@ export function VitalWidget(props: Props) {
                         showBar
                         showDurationDetail={false}
                         showDetail={false}
-                        barHeight={20}
+                        barHeight={24}
                       />
-                    </RightAlignedCell>
+                    </VitalBarCell>
                     <CloseContainer>
                       <StyledIconClose
                         onClick={() => {
@@ -293,6 +293,10 @@ function getVitalDataForListItem(listItem: TableDataRow) {
   return vitalData;
 }
 
+const VitalBarCell = styled(RightAlignedCell)`
+  width: 120px;
+  margin-right: ${space(1)};
+`;
 const EventsRequest = withApi(_EventsRequest);
 const Subtitle = styled('span')`
   color: ${p => p.theme.gray300};
diff --git a/static/app/views/performance/vitalDetail/vitalChart.tsx b/static/app/views/performance/vitalDetail/vitalChart.tsx
index 54ba00a2c0c7cd..b21526af229e67 100644
--- a/static/app/views/performance/vitalDetail/vitalChart.tsx
+++ b/static/app/views/performance/vitalDetail/vitalChart.tsx
@@ -327,10 +327,8 @@ function __VitalChart(props: _VitalChartProps) {
 
   const results = _results.filter(r => !!fieldToVital(r.seriesName));
 
-  const {smoothedResults} = transformEventStatsSmoothed(results);
-
-  const smoothedSeries = smoothedResults
-    ? smoothedResults.map(({seriesName, ...rest}) => {
+  const smoothedSeries = results?.length
+    ? results.map(({seriesName, ...rest}) => {
         return {
           seriesName: fieldToVital(seriesName) || 'count',
           ...rest,