bundle-analyzer: Add sizes to treemap, status bar (#86966)

![CleanShot 2025-12-08 at 19.58.55@2x.png](https://app.graphite.com/user-attachments/assets/43f13844-abe2-4a1b-bbc4-764554ca6634.png)

Author: wbinnssmith

apps/bundle-analyzer/app/page.tsx

@@ -11,12 +11,14 @@ import {
 import { Sidebar } from '@/components/sidebar'
 import { TreemapVisualizer } from '@/components/treemap-visualizer'
 
+import { Badge } from '@/components/ui/badge'
 import { Input } from '@/components/ui/input'
 import { TreemapSkeleton } from '@/components/ui/skeleton'
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 import { AnalyzeData, ModulesData } from '@/lib/analyze-data'
 import { computeActiveEntries, computeModuleDepthMap } from '@/lib/module-graph'
 import { fetchStrict } from '@/lib/utils'
+import { formatBytes } from '@/lib/utils'
 
 export default function Home() {
   const [selectedRoute, setSelectedRoute] = useState<string | null>(null)
@@ -65,6 +67,7 @@ export default function Home() {
   const [isMouseInTreemap, setIsMouseInTreemap] = useState(false)
   const [hoveredNodeInfo, setHoveredNodeInfo] = useState<{
     name: string
+    size: number
     server?: boolean
     client?: boolean
   } | null>(null)
@@ -284,30 +287,30 @@ export default function Home() {
 
       {analyzeData && (
         <div className="flex-none border-t border-border bg-background px-4 py-2 h-10">
-          <p className="text-sm text-muted-foreground">
+          <div className="text-sm text-muted-foreground">
             {hoveredNodeInfo ? (
               <>
                 <span className="font-medium text-foreground">
                   {hoveredNodeInfo.name}
                 </span>
+                <span className="ml-2 text-muted-foreground">
+                  {formatBytes(hoveredNodeInfo.size)}
+                </span>
                 {(hoveredNodeInfo.server || hoveredNodeInfo.client) && (
-                  <span className="ml-2 text-xs">
+                  <span className="ml-2 inline-flex gap-1">
                     {hoveredNodeInfo.client && (
-                      <span className="text-primary">[client]</span>
-                    )}
-                    {hoveredNodeInfo.server && hoveredNodeInfo.client && (
-                      <span> </span>
+                      <Badge variant="client">client</Badge>
                     )}
                     {hoveredNodeInfo.server && (
-                      <span className="text-primary">[server]</span>
+                      <Badge variant="server">server</Badge>
                     )}
                   </span>
                 )}
               </>
             ) : (
               'Hover over a file to see details'
             )}
-          </p>
+          </div>
         </div>
       )}
     </main>

apps/bundle-analyzer/components/sidebar.tsx

@@ -6,6 +6,7 @@ import { Skeleton } from '@/components/ui/skeleton'
 import { AnalyzeData, ModulesData } from '@/lib/analyze-data'
 import { SpecialModule } from '@/lib/types'
 import { getSpecialModuleType } from '@/lib/utils'
+import { Badge } from './ui/badge'
 
 interface SidebarProps {
   sidebarWidth: number
@@ -121,14 +122,16 @@ export function Sidebar({
           analyzeData.source(selectedSourceIndex) &&
           (specialModuleType === SpecialModule.POLYFILL_MODULE ||
             specialModuleType === SpecialModule.POLYFILL_NOMODULE) && (
-            <div className="flex items-center gap-2">
-              <dt className="inline-flex items-center rounded-md bg-polyfill/10 dark:bg-polyfill/30 px-2 py-1 text-xs font-medium text-polyfill dark:text-polyfill-foreground ring-1 ring-inset ring-polyfill/20 shrink-0">
-                Polyfill
-              </dt>
-              <dd className="text-xs text-muted-foreground">
-                Next.js built-in polyfills
-              </dd>
-            </div>
+            <dl>
+              <div className="flex items-center gap-2">
+                <dt className="inline-flex items-center">
+                  <Badge variant="polyfill">Polyfill</Badge>
+                </dt>
+                <dd className="text-xs text-muted-foreground">
+                  Next.js built-in polyfills
+                </dd>
+              </div>
+            </dl>
           )}
 
         {selectedSourceIndex != null &&

apps/bundle-analyzer/components/treemap-visualizer.tsx

@@ -10,6 +10,7 @@ import {
   type LayoutNodeInfo,
 } from '@/lib/treemap-layout'
 import { SpecialModule } from '@/lib/types'
+import { formatBytes } from '@/lib/utils'
 
 interface TreemapVisualizerProps {
   analyzeData: AnalyzeData
@@ -337,15 +338,24 @@ function drawTreemap(
     if (rect.width > 60 && rect.height > 30) {
       const textColor = readableColor(color)
       ctx.fillStyle = textColor
-      ctx.font = '12px sans-serif'
       ctx.textAlign = 'center'
       ctx.textBaseline = 'middle'
 
       const maxWidth = rect.width - 8
       let displayName = name
-      const metrics = ctx.measureText(displayName)
 
-      if (metrics.width > maxWidth) {
+      const sizeText = formatBytes(node.size)
+      const fontSize = 12
+      const sizeFontSize = 10
+      const lineHeight = fontSize + 2
+
+      // Check if we have space for both name and size
+      const hasSpaceForSize = rect.height > 50
+
+      ctx.font = `${fontSize}px sans-serif`
+      const nameMetrics = ctx.measureText(displayName)
+
+      if (nameMetrics.width > maxWidth) {
         while (
           displayName.length > 0 &&
           ctx.measureText(`${displayName}...`).width > maxWidth
@@ -355,11 +365,31 @@ function drawTreemap(
         displayName += '...'
       }
 
-      ctx.fillText(
-        displayName,
-        rect.x + rect.width / 2,
-        rect.y + rect.height / 2
-      )
+      if (hasSpaceForSize) {
+        ctx.font = `${fontSize}px sans-serif`
+        ctx.fillText(
+          displayName,
+          rect.x + rect.width / 2,
+          rect.y + rect.height / 2 - lineHeight / 2
+        )
+
+        ctx.globalAlpha = opacity * 0.75
+        ctx.font = `${sizeFontSize}px sans-serif`
+        ctx.fillText(
+          sizeText,
+          rect.x + rect.width / 2,
+          rect.y + rect.height / 2 + lineHeight / 2
+        )
+        ctx.globalAlpha = opacity
+      } else {
+        // Only name fits, draw it centered
+        ctx.font = `${fontSize}px sans-serif`
+        ctx.fillText(
+          displayName,
+          rect.x + rect.width / 2,
+          rect.y + rect.height / 2
+        )
+      }
     }
 
     ctx.globalAlpha = 1.0
@@ -797,6 +827,7 @@ export function TreemapVisualizer({
     if (node) {
       const nodeInfo = {
         name: node.name,
+        size: node.size,
         server: node.server,
         client: node.client,
       }

apps/bundle-analyzer/components/ui/badge.tsx

@@ -0,0 +1,42 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
+        client:
+          'border-transparent bg-blue-50 dark:bg-blue-950 text-blue-700 dark:text-blue-300 ring-1 ring-inset ring-blue-700/10 dark:ring-blue-300/20',
+        server:
+          'border-transparent bg-purple-50 dark:bg-purple-950 text-purple-700 dark:text-purple-300 ring-1 ring-inset ring-purple-700/10 dark:ring-purple-300/20',
+        polyfill:
+          'border-transparent bg-polyfill/10 dark:bg-polyfill/30 text-polyfill dark:text-polyfill-foreground ring-1 ring-inset ring-polyfill/20',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <span className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

apps/bundle-analyzer/lib/treemap-layout.ts

@@ -12,6 +12,7 @@ export interface LayoutRect {
 
 export interface LayoutNodeInfo {
   name: string
+  size: number
   server?: boolean
   client?: boolean
 }

apps/bundle-analyzer/lib/utils.ts

@@ -43,6 +43,15 @@ export function getSpecialModuleType(
   return null
 }
 
+export function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0 B'
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`
+  if (bytes < 1024 * 1024 * 1024)
+    return `${(bytes / (1024 * 1024)).toFixed(2)} MB`
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`
+}
+
 let IDENT_ATTRIBUTES_REGEXP =
   /^(.+?)(?: \{(.*)\})?(?: \[(.*)\])?(?: \((.*?)\))?(?: <(.*?)>)?$/