feature(webui): add tooltip explaining file or bundle sizes

webui/package.json

@@ -21,6 +21,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-tooltip": "^1.1.2",
     "@tailwindcss/typography": "^0.5.10",
     "@tanstack/react-query": "^5.22.2",
     "class-variance-authority": "^0.7.0",

webui/src/app/(atlas)/[bundle].tsx

@@ -3,6 +3,7 @@ import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import type { ModuleGraphResponse } from '~/app/--/bundles/[bundle]/modules/graph+api';
 import { BundleGraph } from '~/components/BundleGraph';
 import { BundleSelectForm } from '~/components/BundleSelectForm';
+import { FileSize } from '~/components/FileSize';
 import { ModuleFiltersForm } from '~/components/ModuleFilterForm';
 import { PropertySummary } from '~/components/PropertySummary';
 import {
@@ -17,7 +18,6 @@ import { Layout, LayoutHeader, LayoutNavigation, LayoutTitle } from '~/ui/Layout
 import { Tag } from '~/ui/Tag';
 import { fetchApi, handleApiError } from '~/utils/api';
 import { type ModuleFilters, moduleFiltersToParams } from '~/utils/filters';
-import { formatFileSize } from '~/utils/formatString';
 
 export default function BundlePage() {
   const { bundle } = useBundle();
@@ -40,14 +40,14 @@ export default function BundlePage() {
           <PropertySummary>
             <Tag variant={bundle.platform} />
             {!!modules.data && <span>{modules.data.bundle.moduleFiles} modules</span>}
-            {!!modules.data && <span>{formatFileSize(modules.data.bundle.moduleSize)}</span>}
+            {!!modules.data && <FileSize byteSize={modules.data.bundle.moduleSize} />}
             {!!modules.data && modulesAreFiltered && (
               <PropertySummary
                 className="text-tertiary italic"
                 prefix={<span className="select-none mr-2">visible:</span>}
               >
                 <span>{modules.data.filtered.moduleFiles} modules</span>
-                <span>{formatFileSize(modules.data.filtered.moduleSize)}</span>
+                <FileSize byteSize={modules.data.filtered.moduleSize} />
               </PropertySummary>
             )}
           </PropertySummary>

webui/src/app/(atlas)/[bundle]/folders/[path].tsx

@@ -5,6 +5,7 @@ import type { ModuleGraphResponse } from '~/app/--/bundles/[bundle]/modules/grap
 import { BreadcrumbLinks } from '~/components/BreadcrumbLinks';
 import { BundleGraph } from '~/components/BundleGraph';
 import { BundleSelectForm } from '~/components/BundleSelectForm';
+import { FileSize } from '~/components/FileSize';
 import { ModuleFiltersForm } from '~/components/ModuleFilterForm';
 import { PropertySummary } from '~/components/PropertySummary';
 import {
@@ -19,7 +20,6 @@ import { Layout, LayoutHeader, LayoutNavigation, LayoutTitle } from '~/ui/Layout
 import { Tag } from '~/ui/Tag';
 import { fetchApi, handleApiError } from '~/utils/api';
 import { type ModuleFilters, moduleFiltersToParams } from '~/utils/filters';
-import { formatFileSize } from '~/utils/formatString';
 
 export default function FolderPage() {
   const { path: relativePath } = useLocalSearchParams<{ path: string }>();
@@ -47,7 +47,7 @@ export default function FolderPage() {
               </span>
             )}
             {!!modules.data?.filtered.moduleSize && (
-              <span>{formatFileSize(modules.data.filtered.moduleSize)}</span>
+              <FileSize byteSize={modules.data.filtered.moduleSize} />
             )}
           </PropertySummary>
         </LayoutTitle>

webui/src/app/(atlas)/[bundle]/modules/[path].tsx

@@ -3,6 +3,7 @@ import { useLocalSearchParams } from 'expo-router';
 
 import { BreadcrumbLinks } from '~/components/BreadcrumbLinks';
 import { BundleSelectForm } from '~/components/BundleSelectForm';
+import { FileSize } from '~/components/FileSize';
 import { ModuleCode } from '~/components/ModuleCode';
 import { ModuleReference } from '~/components/ModuleReference';
 import { PropertySummary } from '~/components/PropertySummary';
@@ -12,7 +13,6 @@ import { Layout, LayoutHeader, LayoutNavigation, LayoutTitle } from '~/ui/Layout
 import { Skeleton } from '~/ui/Skeleton';
 import { Tag } from '~/ui/Tag';
 import { fetchApi, handleApiError } from '~/utils/api';
-import { formatFileSize } from '~/utils/formatString';
 import { type AtlasModule } from '~core/data/types';
 
 export default function ModulePage() {
@@ -32,7 +32,7 @@ export default function ModulePage() {
             <Tag variant={bundle.platform} />
             {!!module.data?.package && <span>{module.data.package}</span>}
             {!!module.data && <span>{getModuleType(module.data)}</span>}
-            {!!module.data && <span>{formatFileSize(module.data.size)}</span>}
+            {!!module.data && <FileSize byteSize={module.data.size} />}
           </PropertySummary>
         </LayoutTitle>
       </LayoutHeader>

webui/src/components/BundleGraph.tsx

@@ -8,7 +8,7 @@ import EchartsReact from 'echarts-for-react/lib/core';
 import { useRouter } from 'expo-router';
 import { useMemo } from 'react';
 
-import { formatFileSize } from '~/utils/formatString';
+import { formatByteSize } from '~/components/FileSize';
 import type { TreemapNode } from '~/utils/treemap';
 import type { PartialAtlasBundle } from '~core/data/types';
 
@@ -195,7 +195,7 @@ function getBundleGraphTooltip(
           <span>${formatNodeValue(node)}</span>
         </div>
         <hr class="border-t border-t-secondary my-2 mx-2" />
-        <span class="mx-3"><b>Size:</b> ${formatFileSize(size)}</span>
+        <span class="mx-3"><b>Size:</b> ${formatByteSize(size)}</span>
         ${
           files === 1
             ? `<span class="mx-3 text-quaternary">Files: ${files}</span>`

webui/src/components/FileSize.tsx

@@ -0,0 +1,54 @@
+// @ts-expect-error
+import AsteriskIcon from 'lucide-react/dist/esm/icons/asterisk';
+
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '~/ui/Tooltip';
+
+type BundleFileSizeProps = {
+  /** The size of the files or bundle, in bytes */
+  byteSize: number;
+};
+
+export function FileSize(props: BundleFileSizeProps) {
+  return (
+    <div className="inline-flex flex-row items-start">
+      {formatByteSize(props.byteSize)}
+      <TooltipProvider delayDuration={0}>
+        <Tooltip>
+          <TooltipTrigger className="group">
+            <AsteriskIcon
+              className="hover:color-info group-data-[state=delayed-open]:color-info group-data-[state=instant-open]:color-info"
+              size={12}
+            />
+          </TooltipTrigger>
+          <TooltipContent className="py-2 px-3 max-w-80 bg-screen border-2 border-info rounded-md text-quaternary leading-6 shadow-md">
+            <p className="mb-2">
+              All file sizes are calculated based on the transpiled JavaScript byte size.
+            </p>
+            <p className="">
+              While these sizes might differ from actual bundle size when using{' '}
+              <a
+                className="text-link hover:underline"
+                href="https://github.com/facebook/hermes/blob/main/doc/Design.md"
+                target="_blank"
+              >
+                Hermes Bytecode (HBC)
+              </a>
+              , the relative proportions are still correct.
+            </p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+  );
+}
+
+/** Format files or bundle size, from bytes to the nearest unit */
+export function formatByteSize(size: number) {
+  if (size < 1024) {
+    return size + 'B';
+  } else if (size < 1024 * 1024) {
+    return (size / 1024).toFixed(1) + 'KB';
+  } else {
+    return (size / 1024 / 1024).toFixed(1) + 'MB';
+  }
+}

webui/src/ui/Tooltip.tsx

@@ -0,0 +1,30 @@
+// see: https://ui.shadcn.com/docs/components/tooltip
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cx } from 'class-variance-authority';
+import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react';
+
+export const TooltipProvider = TooltipPrimitive.Provider;
+
+export const Tooltip = TooltipPrimitive.Root;
+
+export const TooltipTrigger = TooltipPrimitive.Trigger;
+
+export const TooltipContent = forwardRef<
+  ElementRef<typeof TooltipPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cx(
+      'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground',
+      'animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+      'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;