feat(preprod): Show image scale info on treemap tooltip if available (#104879)

Closes
https://linear.app/getsentry/issue/EME-665/include-scale-parameter-in-the-output-for-images-in-treemap

<img width="762" height="493" alt="Screenshot 2025-12-12 at 11 45 28 AM"
src="https://github.com/user-attachments/assets/6f6e748d-0757-455d-a073-f6b2b801fbc1"
/>

Pre-req PRs:
- getsentry/sentry-cli#3029
- getsentry/launchpad#524

Author: NicoHinderling

src/sentry/preprod/size_analysis/insight_models.py

@@ -155,15 +155,15 @@ class OptimizableImageFile(BaseModel):
 
     # Minification savings (optimizing current format)
     minify_savings: int
-    minified_size: int | None
+    minified_size: int | None = None
 
     # HEIC conversion savings (converting to HEIC format)
     conversion_savings: int
-    heic_size: int | None
+    heic_size: int | None = None
 
     # Asset catalog specific fields
-    idiom: str | None
-    colorspace: str | None
+    idiom: str | None = None
+    colorspace: str | None = None
 
     @property
     def potential_savings(self) -> int:

src/sentry/preprod/size_analysis/models.py

@@ -31,31 +31,39 @@
 
 
 class AndroidInsightResults(BaseModel):
-    duplicate_files: DuplicateFilesInsightResult | None
-    webp_optimization: WebPOptimizationInsightResult | None
-    large_images: LargeImageFileInsightResult | None
-    large_videos: LargeVideoFileInsightResult | None
-    large_audio: LargeAudioFileInsightResult | None
-    hermes_debug_info: HermesDebugInfoInsightResult | None
-    multiple_native_library_archs: MultipleNativeLibraryArchInsightResult | None
+    duplicate_files: DuplicateFilesInsightResult | None = None
+    webp_optimization: WebPOptimizationInsightResult | None = None
+    large_images: LargeImageFileInsightResult | None = None
+    large_videos: LargeVideoFileInsightResult | None = None
+    large_audio: LargeAudioFileInsightResult | None = None
+    hermes_debug_info: HermesDebugInfoInsightResult | None = None
+    multiple_native_library_archs: MultipleNativeLibraryArchInsightResult | None = None
 
 
 class AppleInsightResults(BaseModel):
-    duplicate_files: DuplicateFilesInsightResult | None
-    large_images: LargeImageFileInsightResult | None
-    large_audios: LargeAudioFileInsightResult | None
-    large_videos: LargeVideoFileInsightResult | None
-    strip_binary: StripBinaryInsightResult | None
-    localized_strings_minify: LocalizedStringCommentsInsightResult | None
-    small_files: SmallFilesInsightResult | None
-    loose_images: LooseImagesInsightResult | None
-    hermes_debug_info: HermesDebugInfoInsightResult | None
-    image_optimization: ImageOptimizationInsightResult | None
-    main_binary_exported_symbols: MainBinaryExportMetadataResult | None
-    unnecessary_files: UnnecessaryFilesInsightResult | None
-    audio_compression: AudioCompressionInsightResult | None
-    video_compression: VideoCompressionInsightResult | None
-    alternate_icons_optimization: ImageOptimizationInsightResult | None
+    duplicate_files: DuplicateFilesInsightResult | None = None
+    large_images: LargeImageFileInsightResult | None = None
+    large_audios: LargeAudioFileInsightResult | None = None
+    large_videos: LargeVideoFileInsightResult | None = None
+    strip_binary: StripBinaryInsightResult | None = None
+    localized_strings_minify: LocalizedStringCommentsInsightResult | None = None
+    small_files: SmallFilesInsightResult | None = None
+    loose_images: LooseImagesInsightResult | None = None
+    hermes_debug_info: HermesDebugInfoInsightResult | None = None
+    image_optimization: ImageOptimizationInsightResult | None = None
+    main_binary_exported_symbols: MainBinaryExportMetadataResult | None = None
+    unnecessary_files: UnnecessaryFilesInsightResult | None = None
+    audio_compression: AudioCompressionInsightResult | None = None
+    video_compression: VideoCompressionInsightResult | None = None
+    alternate_icons_optimization: ImageOptimizationInsightResult | None = None
+
+
+class TreemapElementMisc(BaseModel):
+    """Miscellaneous metadata for treemap elements."""
+
+    model_config = ConfigDict(frozen=True)
+
+    scale: int | None = None
 
 
 class TreemapElement(BaseModel):
@@ -64,11 +72,12 @@ class TreemapElement(BaseModel):
 
     name: str
     size: int
-    path: str | None
+    path: str | None = None
     is_dir: bool
-    type: str | None
+    type: str | None = None
     """ Some files (like zip files) are not directories but have children. """
     children: list[TreemapElement]
+    misc: TreemapElementMisc | None = None
 
 
 class TreemapResults(BaseModel):
@@ -125,7 +134,7 @@ class SizeAnalysisResults(BaseModel):
     download_size: int
     install_size: int
     treemap: TreemapResults | None = None
-    insights: AndroidInsightResults | AppleInsightResults | None
+    insights: AndroidInsightResults | AppleInsightResults | None = None
     analysis_version: str | None = None
     file_analysis: FileAnalysis | None = None
     app_components: list[AppComponent] | None = None
@@ -145,17 +154,17 @@ class DiffType(str, Enum):
 
 class DiffItem(BaseModel):
     size_diff: int
-    head_size: int | None
-    base_size: int | None
+    head_size: int | None = None
+    base_size: int | None = None
     path: str
-    item_type: str | None
+    item_type: str | None = None
     type: DiffType
-    diff_items: list[DiffItem] | None
+    diff_items: list[DiffItem] | None = None
 
 
 class SizeMetricDiffItem(BaseModel):
     metrics_artifact_type: PreprodArtifactSizeMetrics.MetricsArtifactType
-    identifier: str | None
+    identifier: str | None = None
     head_install_size: int
     head_download_size: int
     base_install_size: int
@@ -181,5 +190,5 @@ class ComparisonResults(BaseModel):
     insight_diff_items: list[InsightDiffItem]
     size_metric_diff_item: SizeMetricDiffItem
     skipped_diff_item_comparison: bool
-    head_analysis_version: str | None
-    base_analysis_version: str | None
+    head_analysis_version: str | None = None
+    base_analysis_version: str | None = None

static/app/views/preprod/buildComparison/main/sizeCompareItemDiffTable.tsx

@@ -233,9 +233,11 @@ export function SizeCompareItemDiffTable({
                 {capitalize(diffItem.item_type ?? '')}
               </SimpleTable.RowCell>
               <SimpleTable.RowCell>
-                {diffItem.head_size
+                {typeof diffItem.head_size === 'number'
                   ? formatBytesBase10(diffItem.head_size)
-                  : formatBytesBase10(diffItem.base_size!)}
+                  : typeof diffItem.base_size === 'number'
+                    ? formatBytesBase10(diffItem.base_size)
+                    : '-'}
               </SimpleTable.RowCell>
               <DiffTableChangeAmountCell changeType={diffItem.type}>
                 {diffItem.size_diff > 0 ? '+' : '-'}

static/app/views/preprod/buildDetails/main/insights/appSizeInsightsSidebarRow.tsx

@@ -315,9 +315,9 @@ function OptimizableImageFileRow({
   }
 
   const hasMinifySavings =
-    originalFile.minified_size !== null && originalFile.minify_savings > 0;
+    typeof originalFile.minified_size === 'number' && originalFile.minify_savings > 0;
   const hasHeicSavings =
-    originalFile.heic_size !== null && originalFile.conversion_savings > 0;
+    typeof originalFile.heic_size === 'number' && originalFile.conversion_savings > 0;
 
   const maxSavings = Math.max(
     originalFile.minify_savings || 0,

static/app/views/preprod/components/visualizations/appSizeTreemap.tsx

@@ -134,6 +134,7 @@ export function AppSizeTreemap(props: AppSizeTreemapProps) {
       value: element.size,
       path: element.path,
       category: element.type,
+      misc: element.misc,
       itemStyle: {
         color: 'transparent',
         borderColor,
@@ -309,6 +310,9 @@ export function AppSizeTreemap(props: AppSizeTreemapProps) {
       const pathElement = params.data?.path
         ? `<p style="font-size: 12px; margin-bottom: -4px;">${params.data.path}</p>`
         : null;
+      const scaleElement = params.data?.misc?.scale
+        ? `<span style="font-size: 10px; background-color: ${theme.tokens.background.secondary}; color: ${theme.tokens.content.primary}; padding: 4px; border-radius: 3px; font-weight: normal;">@${params.data.misc.scale}x</span>`
+        : '';
 
       return `
             <div style="font-family: Rubik;">
@@ -317,7 +321,10 @@ export function AppSizeTreemap(props: AppSizeTreemapProps) {
                 <span style="color: ${theme.tokens.content.primary}">${params.data?.category || 'Other'}</span>
               </div>
               <div style="display: flex; flex-direction: column; line-height: 1; gap: ${theme.space.sm}">
-                <p style="font-size: 14px; font-weight: bold; margin-bottom: -2px;">${params.name}</p>
+                <div style="display: flex; align-items: center; gap: 6px;">
+                  <span style="font-size: 14px; font-weight: bold;">${params.name}</span>
+                  ${scaleElement}
+                </div>
                 ${pathElement || ''}
                 <p style="font-size: 12px; margin-bottom: -4px;">${formatBytesBase10(value)} (${percent}%)</p>
               </div>

static/app/views/preprod/types/appSizeTypes.ts

@@ -21,13 +21,13 @@ export enum SizeAnalysisComparisonState {
 
 export interface SizeAnalysisComparison {
   base_size_metric_id: number;
-  comparison_id: number | null;
-  error_code: string | null;
-  error_message: string | null;
   head_size_metric_id: number;
   identifier: string;
   metrics_artifact_type: MetricsArtifactType;
   state: SizeAnalysisComparisonState;
+  comparison_id?: number | null;
+  error_code?: string | null;
+  error_message?: string | null;
 }
 
 export interface SizeComparisonApiResponse {
@@ -57,12 +57,17 @@ export interface TreemapResults {
   root: TreemapElement;
 }
 
+interface TreemapElementMisc {
+  scale?: number;
+}
+
 export interface TreemapElement {
   children: TreemapElement[];
   is_dir: boolean;
   name: string;
   size: number;
   type: TreemapType;
+  misc?: TreemapElementMisc;
   path?: string;
 }
 
@@ -158,14 +163,14 @@ interface LooseImagesInsightResult extends GroupsInsightResult {}
 interface MainBinaryExportMetadataResult extends FilesInsightResult {}
 
 export interface OptimizableImageFile {
-  colorspace: string | null;
   conversion_savings: number;
   current_size: number;
   file_path: string;
-  heic_size: number | null;
-  idiom: string | null;
-  minified_size: number | null;
   minify_savings: number;
+  colorspace?: string | null;
+  heic_size?: number | null;
+  idiom?: string | null;
+  minified_size?: number | null;
 }
 
 interface ImageOptimizationInsightResult extends BaseInsightResult {
@@ -222,13 +227,13 @@ export interface InsightResults {
 export type DiffType = 'added' | 'removed' | 'increased' | 'decreased';
 
 export interface DiffItem {
-  base_size: number | null;
-  head_size: number | null;
-  item_type: TreemapType | null;
   path: string;
   size_diff: number;
   type: DiffType;
+  base_size?: number | null;
   diff_items?: DiffItem[] | null;
+  head_size?: number | null;
+  item_type?: TreemapType | null;
 }
 
 // Keep in sync with https://github.com/getsentry/sentry/blob/a85090d7b81832982b43a35c30db9970a0258e99/src/sentry/preprod/models.py#L230
@@ -243,8 +248,8 @@ interface SizeMetricDiffItem {
   base_install_size: number;
   head_download_size: number;
   head_install_size: number;
-  identifier: string | null;
   metrics_artifact_type: MetricsArtifactType;
+  identifier?: string | null;
 }
 
 export type InsightStatus = 'new' | 'resolved' | 'unresolved';

static/app/views/preprod/types/listBuildsTypes.ts

@@ -3,11 +3,11 @@ import type {BuildDetailsApiResponse} from './buildDetailsTypes';
 interface PaginationInfo {
   has_next: boolean;
   has_prev: boolean;
-  next: number | null;
   page: number;
   per_page: number;
-  prev: number | null;
   total_count: number | string;
+  next?: number | null;
+  prev?: number | null;
 }
 
 export interface ListBuildsApiResponse {