fix(ui): realign filtered bundle stats and only render when filters a…

…re enabled
expo · Oct 16, 2024 · 12918b2 · 12918b2
1 parent c7b1aa4
commit 12918b2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git a/packages/expo-atlas-ui/app/(atlas)/[bundle].tsx b/packages/expo-atlas-ui/app/(atlas)/[bundle].tsx
@@ -25,9 +25,6 @@ export default function BundlePage() {
   const modules = useModuleGraphData(bundle.id, filters);
 
   const treeHasData = !!modules.data?.data?.children?.length;
-  const modulesAreFiltered = modules.data
-    ? modules.data.filtered.moduleFiles !== modules.data.bundle.moduleFiles
-    : null;
 
   return (
     <Layout variant="viewport">
@@ -41,16 +38,16 @@ export default function BundlePage() {
             <BundleTag platform={bundle.platform} environment={bundle.environment} />
             {!!modules.data && <span>{modules.data.bundle.moduleFiles} modules</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>
-                <FileSize byteSize={modules.data.filtered.moduleSize} />
-              </PropertySummary>
-            )}
           </PropertySummary>
+          {!!modules.data && filtersEnabled && (
+            <PropertySummary
+              className="text-tertiary italic"
+              prefix={<span className="select-none mr-2">visible:</span>}
+            >
+              <span>{modules.data.filtered.moduleFiles} modules</span>
+              <FileSize byteSize={modules.data.filtered.moduleSize} />
+            </PropertySummary>
+          )}
         </LayoutTitle>
         <ModuleFiltersForm />
       </LayoutHeader>

diff --git a/packages/expo-atlas-ui/components/PropertySummary.tsx b/packages/expo-atlas-ui/components/PropertySummary.tsx
@@ -9,14 +9,19 @@ export function PropertySummary(
   props: PropsWithChildren<{ className?: string; prefix?: ReactNode }>
 ) {
   return (
-    <div className={cx('inline font-sm text-secondary', props.className)}>
+    <div
+      className={cx(
+        'inline-flex items-center font-sm text-secondary gap-2 text-nowrap',
+        props.className
+      )}
+    >
       {props.prefix}
       {Children.map(props.children, (child, index) => {
         if (index === 0) return child;
         if (!child) return null;
         return (
           <>
-            <span className="text-tertiary mx-2 select-none">-</span>
+            <span className="text-tertiary select-none">-</span>
             {child}
           </>
         );