feat(preprod): Add treemap diff UI

Author: chromy

static/app/components/events/eventXrayDiff.tsx

@@ -0,0 +1,96 @@
+import EmptyStateWarning from 'sentry/components/emptyStateWarning';
+import ErrorBoundary from 'sentry/components/errorBoundary';
+import LoadingIndicator from 'sentry/components/loadingIndicator';
+import {t} from 'sentry/locale';
+import type {Event} from 'sentry/types/event';
+import type {Project} from 'sentry/types/project';
+import {useApiQuery} from 'sentry/utils/queryClient';
+import useOrganization from 'sentry/utils/useOrganization';
+import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
+import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
+import {TreemapDiffSection} from 'sentry/views/preprod/buildComparison/main/treemapDiffSection';
+import type {SizeAnalysisComparisonResults} from 'sentry/views/preprod/types/appSizeTypes';
+
+type ContentProps = {
+  baseMetricId: string;
+  headMetricId: string;
+  project: Project;
+};
+
+function EventXrayDiffContent({baseMetricId, headMetricId, project}: ContentProps) {
+  const organization = useOrganization();
+
+  const query = useApiQuery<SizeAnalysisComparisonResults>(
+    [
+      `/projects/${organization.slug}/${project.id}/preprodartifacts/size-analysis/compare/${headMetricId}/${baseMetricId}/download/`,
+    ],
+    {
+      staleTime: 0,
+    }
+  );
+
+  if (query.isLoading) {
+    return <LoadingIndicator />;
+  }
+
+  const diffItems = query.data?.diff_items;
+
+  if (!diffItems || diffItems.length === 0) {
+    return <EmptyStateWarning small>No diff found.</EmptyStateWarning>;
+  }
+
+  return <TreemapDiffSection diffItems={diffItems} />;
+}
+
+type SectionProps = {
+  baseMetricId: string;
+  headMetricId: string;
+  project: Project;
+};
+
+function EventXrayDiffSection({baseMetricId, headMetricId, project}: SectionProps) {
+  return (
+    <InterimSection title={t('X-Ray diff')} type={SectionKey.XRAY_DIFF}>
+      <ErrorBoundary mini>
+        <EventXrayDiffContent
+          project={project}
+          headMetricId={headMetricId}
+          baseMetricId={baseMetricId}
+        />
+      </ErrorBoundary>
+    </InterimSection>
+  );
+}
+
+interface MetricIds {
+  baseMetricId: string;
+  headMetricId: string;
+}
+
+function getMetricIds(event: Event): MetricIds | undefined {
+  const headMetricId = event.occurrence?.evidenceData?.headSizeMetricId;
+  const baseMetricId = event.occurrence?.evidenceData?.baseSizeMetricId;
+
+  if (baseMetricId && headMetricId) {
+    return {
+      baseMetricId,
+      headMetricId,
+    };
+  }
+  return undefined;
+}
+
+type Props = {
+  event: Event;
+  project: Project;
+};
+
+function EventXrayDiff(props: Props) {
+  const ids = getMetricIds(props.event);
+  if (ids) {
+    return <EventXrayDiffSection {...props} {...ids} />;
+  }
+  return null;
+}
+
+export {EventXrayDiff};

static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx

@@ -29,6 +29,7 @@ import {EventTagsAndScreenshot} from 'sentry/components/events/eventTagsAndScree
 import {ScreenshotDataSection} from 'sentry/components/events/eventTagsAndScreenshot/screenshot/screenshotDataSection';
 import {EventTagsDataSection} from 'sentry/components/events/eventTagsAndScreenshot/tags';
 import {EventViewHierarchy} from 'sentry/components/events/eventViewHierarchy';
+import {EventXrayDiff} from 'sentry/components/events/eventXrayDiff';
 import {EventFeatureFlagSection} from 'sentry/components/events/featureFlags/eventFeatureFlagSection';
 import {EventGroupingInfoSection} from 'sentry/components/events/groupingInfo/groupingInfoSection';
 import HighlightsDataSection from 'sentry/components/events/highlights/highlightsDataSection';
@@ -414,6 +415,7 @@ export function EventDetailsContent({
       </ErrorBoundary>
       <EventExtraData event={event} />
       <EventViewHierarchy event={event} project={project} />
+      <EventXrayDiff event={event} project={project} />
       <EventPackageData event={event} />
       <EventDevice event={event} />
       <EventAttachments event={event} project={project} group={group} />

static/app/views/issueDetails/streamline/context.tsx

@@ -94,6 +94,8 @@ export const enum SectionKey {
   MCP_OUTPUT = 'mcp-output',
 
   SPAN_LINKS = 'span-links',
+
+  XRAY_DIFF = 'xray-diff',
 }
 
 /**