feat(stat-detectors): Show all tags for event comparisons (#55543)

For now we will display all of the tags under the selected event. In the
future we will diff the tags in the side-by-side view.

static/app/components/events/eventStatisticalDetector/eventComparison/eventDisplay.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import {Button} from 'sentry/components/button';
 import {CompactSelect} from 'sentry/components/compactSelect';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
+import {EventTags} from 'sentry/components/events/eventTags';
 import {MINIMAP_HEIGHT} from 'sentry/components/events/interfaces/spans/constants';
 import {noFilter} from 'sentry/components/events/interfaces/spans/filter';
 import {ActualMinimap} from 'sentry/components/events/interfaces/spans/header';
@@ -13,6 +14,7 @@ import LoadingIndicator from 'sentry/components/loadingIndicator';
 import TextOverflow from 'sentry/components/textOverflow';
 import {IconEllipsis, IconJson, IconLink} from 'sentry/icons';
 import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
 import {EventTransaction, Project} from 'sentry/types';
 import {defined} from 'sentry/utils';
 import {useDiscoverQuery} from 'sentry/utils/discover/discoverQuery';
@@ -87,6 +89,7 @@ function EventDisplay({
   transaction,
   durationBaseline,
 }: EventDisplayProps) {
+  const location = useLocation();
   const organization = useOrganization();
   const [selectedEventId, setSelectedEventId] = useState<string>('');
 
@@ -130,54 +133,68 @@ function EventDisplay({
   }
 
   const waterfallModel = new WaterfallModel(eventData);
-
   return (
-    <div>
-      <StyledEventSelectorControlBar>
-        <CompactSelect
-          size="sm"
-          disabled={false}
-          options={eventIds.map(id => ({value: id, label: id}))}
-          value={selectedEventId}
-          onChange={({value}) => setSelectedEventId(value)}
-          triggerLabel={
-            <ButtonLabelWrapper>
-              <TextOverflow>
-                {eventSelectLabel}: {getShortEventId(selectedEventId)}
-              </TextOverflow>
-            </ButtonLabelWrapper>
-          }
-        />
-        <Button aria-label="icon" icon={<IconEllipsis />} size="sm" />
-        <Button aria-label="icon" icon={<IconJson />} size="sm" />
-        <Button aria-label="icon" icon={<IconLink />} size="sm" />
-      </StyledEventSelectorControlBar>
-      <ComparisonContentWrapper>
-        <MinimapContainer>
-          <MinimapPositioningContainer>
-            <ActualMinimap
-              spans={waterfallModel.getWaterfall({
-                viewStart: 0,
-                viewEnd: 1,
-              })}
-              generateBounds={waterfallModel.generateBounds({
-                viewStart: 0,
-                viewEnd: 1,
-              })}
-              dividerPosition={0}
-              rootSpan={waterfallModel.rootSpan.span}
-            />
-          </MinimapPositioningContainer>
-        </MinimapContainer>
-
-        <OpsBreakdown event={eventData} operationNameFilters={noFilter} hideHeader />
-      </ComparisonContentWrapper>
-    </div>
+    <EventDisplayContainer>
+      <div>
+        <StyledEventSelectorControlBar>
+          <CompactSelect
+            size="sm"
+            disabled={false}
+            options={eventIds.map(id => ({value: id, label: id}))}
+            value={selectedEventId}
+            onChange={({value}) => setSelectedEventId(value)}
+            triggerLabel={
+              <ButtonLabelWrapper>
+                <TextOverflow>
+                  {eventSelectLabel}: {getShortEventId(selectedEventId)}
+                </TextOverflow>
+              </ButtonLabelWrapper>
+            }
+          />
+          <Button aria-label="icon" icon={<IconEllipsis />} size="sm" />
+          <Button aria-label="icon" icon={<IconJson />} size="sm" />
+          <Button aria-label="icon" icon={<IconLink />} size="sm" />
+        </StyledEventSelectorControlBar>
+        <ComparisonContentWrapper>
+          <MinimapContainer>
+            <MinimapPositioningContainer>
+              <ActualMinimap
+                spans={waterfallModel.getWaterfall({
+                  viewStart: 0,
+                  viewEnd: 1,
+                })}
+                generateBounds={waterfallModel.generateBounds({
+                  viewStart: 0,
+                  viewEnd: 1,
+                })}
+                dividerPosition={0}
+                rootSpan={waterfallModel.rootSpan.span}
+              />
+            </MinimapPositioningContainer>
+          </MinimapContainer>
+
+          <OpsBreakdown event={eventData} operationNameFilters={noFilter} hideHeader />
+        </ComparisonContentWrapper>
+      </div>
+
+      <EventTags
+        event={eventData}
+        organization={organization}
+        projectSlug={project.slug}
+        location={location}
+      />
+    </EventDisplayContainer>
   );
 }
 
 export {EventDisplay};
 
+const EventDisplayContainer = styled('div')`
+  display: flex;
+  gap: ${space(1)};
+  flex-direction: column;
+`;
+
 const ButtonLabelWrapper = styled('span')`
   width: 100%;
   text-align: left;

static/app/components/events/eventStatisticalDetector/eventComparison/index.tsx

@@ -31,22 +31,26 @@ function EventComparison({event, project}: EventComparisonProps) {
       <strong>{t('Compare Events:')}</strong>
       <p>{COMPARISON_DESCRIPTION}</p>
       <StyledGrid>
-        <EventDisplay
-          eventSelectLabel={t('Baseline Event ID')}
-          project={project}
-          start={requestStart}
-          end={breakpoint}
-          transaction={transaction}
-          durationBaseline={aggregateRange1}
-        />
-        <EventDisplay
-          eventSelectLabel={t('Regressed Event ID')}
-          project={project}
-          start={breakpoint}
-          end={requestEnd}
-          transaction={transaction}
-          durationBaseline={aggregateRange2}
-        />
+        <div style={{gridColumnStart: 1}}>
+          <EventDisplay
+            eventSelectLabel={t('Baseline Event ID')}
+            project={project}
+            start={requestStart}
+            end={breakpoint}
+            transaction={transaction}
+            durationBaseline={aggregateRange1}
+          />
+        </div>
+        <div style={{gridColumnStart: 2}}>
+          <EventDisplay
+            eventSelectLabel={t('Regressed Event ID')}
+            project={project}
+            start={breakpoint}
+            end={requestEnd}
+            transaction={transaction}
+            durationBaseline={aggregateRange2}
+          />
+        </div>
       </StyledGrid>
     </DataSection>
   );