bundle-analyzer: Show gzip and brotli sizes

This:

- Estimates these compressed sizes by applying the proportion a module takes from its uncompressed chunk to its compressed chunk
- Shows gzip and brotli sizes in the sidebar when either a file or directory is selected (directories use recursive sums of their compressed files)
- Shows gzipped file sizes by default in the treemap visualization and status bar for both files and directories
- Shows “All Route Modules” for the top-level directory

Author: wbinnssmith

Cargo.lock

@@ -1,6 +1,8 @@
 'use client'
 
 import type React from 'react'
+import type { SizeMode } from '@/lib/treemap-layout'
+
 import { useEffect, useMemo, useState } from 'react'
 import useSWR from 'swr'
 import { ErrorState } from '@/components/error-state'
@@ -69,6 +71,7 @@ export default function Home() {
     client?: boolean
   } | null>(null)
   const [searchQuery, setSearchQuery] = useState('')
+  const [sizeMode, setSizeMode] = useState<SizeMode>('compressed')
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -100,7 +103,7 @@ export default function Home() {
   }, [modulesData, analyzeData])
 
   const filterSource = useMemo(() => {
-    if (!analyzeData) return undefined
+    if (!analyzeData) return () => true
 
     return (sourceIndex: number) => {
       const flags = analyzeData.getSourceFlags(sourceIndex)
@@ -157,12 +160,27 @@ export default function Home() {
           />
         </div>
 
-        <div className="basis-2/3 flex justify-end">
+        <div className="basis-2/3 flex justify-end items-center space-x-4">
           {analyzeData && (
             <>
               <ToggleGroup
                 type="single"
-                className="mr-4"
+                value={sizeMode}
+                onValueChange={(value) => {
+                  if (value) setSizeMode(value as SizeMode)
+                }}
+                size="sm"
+              >
+                <ToggleGroupItem value="uncompressed">
+                  Uncompressed
+                </ToggleGroupItem>
+                <ToggleGroupItem value="compressed">Compressed</ToggleGroupItem>
+              </ToggleGroup>
+
+              <ControlDivider />
+
+              <ToggleGroup
+                type="single"
                 value={environmentFilter}
                 onValueChange={(value) => {
                   if (value) setEnvironmentFilter(value as 'client' | 'server')
@@ -173,9 +191,10 @@ export default function Home() {
                 <ToggleGroupItem value="server">Server</ToggleGroupItem>
               </ToggleGroup>
 
+              <ControlDivider />
+
               <ToggleGroup
                 type="multiple"
-                className="mr-4"
                 value={typeFilter}
                 onValueChange={(value) => {
                   if (value.length > 0) setTypeFilter(value)
@@ -188,6 +207,8 @@ export default function Home() {
                 <ToggleGroupItem value="asset">Asset</ToggleGroupItem>
               </ToggleGroup>
 
+              <ControlDivider />
+
               <FileSearch value={searchQuery} onChange={setSearchQuery} />
             </>
           )}
@@ -235,6 +256,7 @@ export default function Home() {
                 onHoveredNodeChange={setHoveredNodeInfo}
                 searchQuery={searchQuery}
                 filterSource={filterSource}
+                sizeMode={sizeMode}
               />
             </div>
 
@@ -252,6 +274,7 @@ export default function Home() {
               selectedSourceIndex={selectedSourceIndex}
               moduleDepthMap={moduleDepthMap}
               environmentFilter={environmentFilter}
+              filterSource={filterSource}
             />
           </>
         ) : null}
@@ -266,7 +289,9 @@ export default function Home() {
                   {hoveredNodeInfo.name}
                 </span>
                 <span className="ml-2 text-muted-foreground">
-                  {formatBytes(hoveredNodeInfo.size)}
+                  {`${formatBytes(hoveredNodeInfo.size)} ${
+                    sizeMode === 'compressed' ? 'compressed' : 'uncompressed'
+                  }`}
                 </span>
                 {(hoveredNodeInfo.server || hoveredNodeInfo.client) && (
                   <span className="ml-2 inline-flex gap-1">
@@ -289,6 +314,10 @@ export default function Home() {
   )
 }
 
+function ControlDivider() {
+  return <span className="h-6 w-px bg-muted-foreground/30" />
+}
+
 function getRootSourceIndex(analyzeData: AnalyzeData | undefined): number {
   if (!analyzeData) return 0
   const sourceRoots = analyzeData.sourceRoots()