fix: move viewport height to graph page only

webui/.gitattributes

@@ -0,0 +1 @@
+webui/fixture/*.jsonl filter=lfs diff=lfs merge=lfs -text

webui/metro.config.js

@@ -15,4 +15,12 @@ config.cacheStores = [
   new FileStore({ root: path.join(__dirname, 'node_modules', '.cache', 'metro') }),
 ];
 
+// Initialize the Expo Atlas global data source in development
+if (process.env.NODE_ENV === 'development') {
+  const { StatsFileSource } = require('../build/src/data/StatsFileSource');
+  const statsFile = path.resolve(__dirname, './fixture/stats-tabs-50.jsonl');
+
+  global.EXPO_ATLAS_SOURCE = new StatsFileSource(statsFile);
+}
+
 module.exports = config;

webui/package.json

@@ -35,7 +35,7 @@
     "prism-react-renderer": "^2.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.73.4",
+    "react-native": "0.73.5",
     "react-native-reanimated": "~3.6.2",
     "react-native-safe-area-context": "4.8.2",
     "react-native-svg": "14.1.0",
@@ -47,5 +47,10 @@
     "@types/picomatch": "^2.3.3",
     "@types/react": "~18.2.45",
     "typescript": "^5.3.0"
+  },
+  "expo": {
+    "install": {
+      "exclude": ["expo-router"]
+    }
   }
 }

webui/src/app/_layout.tsx

@@ -2,11 +2,9 @@ import { Slot } from 'expo-router';
 import { useColorScheme } from 'nativewind';
 import { useEffect } from 'react';
 
-import { StatsEntrySelect } from '~/components/forms/StatsEntrySelect';
 import { ModuleFilterProvider } from '~/providers/modules';
 import { QueryProvider } from '~/providers/query';
 import { StatsEntryProvider } from '~/providers/stats';
-import { Page, PageContent, PageNav } from '~/ui/Page';
 
 // Import the Expo-required radix styles
 import '@radix-ui/colors/green.css';
@@ -39,14 +37,7 @@ export default function RootLayout() {
     <QueryProvider>
       <StatsEntryProvider>
         <ModuleFilterProvider>
-          <Page>
-            <PageNav>
-              <StatsEntrySelect />
-            </PageNav>
-            <PageContent>
-              <Slot />
-            </PageContent>
-          </Page>
+          <Slot />
         </ModuleFilterProvider>
       </StatsEntryProvider>
     </QueryProvider>

webui/src/app/index.tsx

@@ -2,6 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'expo-router';
 
 import type { EntryGraphData } from '~/app/api/stats/[entry]/modules/index+api';
+import { Page, PageHeader, PageTitle } from '~/components/Page';
 import { StatsModuleFilter } from '~/components/forms/StatsModuleFilter';
 import { TreemapGraph } from '~/components/graphs/TreemapGraph';
 import {
@@ -10,7 +11,6 @@ import {
   filtersToUrlParams,
 } from '~/providers/modules';
 import { useStatsEntryContext } from '~/providers/stats';
-import { PageHeader, PageTitle } from '~/ui/Page';
 import { Tag } from '~/ui/Tag';
 import { formatFileSize } from '~/utils/formatString';
 
@@ -29,20 +29,22 @@ export default function GraphScreen() {
   }
 
   return (
-    <div className="flex flex-1 flex-col">
-      <PageHeader>
-        <PageTitle>
-          <h1 className="text-lg font-bold mr-4">Bundle</h1>
-          {!!graph.data && <BundleSummary data={graph.data} />}
-        </PageTitle>
-        <StatsModuleFilter />
-      </PageHeader>
-      <TreemapGraph
-        key={`bundle-graph-${entryId}`}
-        modules={graph.data?.data?.modules ?? []}
-        onModuleClick={onInspectModule}
-      />
-    </div>
+    <Page variant="viewport">
+      <div className="flex flex-1 flex-col">
+        <PageHeader>
+          <PageTitle>
+            <h1 className="text-lg font-bold mr-4">Bundle</h1>
+            {!!graph.data && <BundleSummary data={graph.data} />}
+          </PageTitle>
+          <StatsModuleFilter />
+        </PageHeader>
+        <TreemapGraph
+          key={`bundle-graph-${entryId}`}
+          modules={graph.data?.data?.modules ?? []}
+          onModuleClick={onInspectModule}
+        />
+      </div>
+    </Page>
   );
 }
 

webui/src/app/modules/[path].tsx

@@ -1,9 +1,9 @@
 import { useQuery } from '@tanstack/react-query';
 import { Link, useLocalSearchParams } from 'expo-router';
 
+import { Page, PageHeader, PageTitle } from '~/components/Page';
 import { useStatsEntryContext } from '~/providers/stats';
 import { CodeBlock, CodeBlockSectionWithPrettier, guessLanguageFromPath } from '~/ui/CodeBlock';
-import { PageHeader, PageTitle } from '~/ui/Page';
 import { Skeleton } from '~/ui/Skeleton';
 import { Tag } from '~/ui/Tag';
 import { formatFileSize } from '~/utils/formatString';
@@ -30,7 +30,7 @@ export default function ModulePage() {
   }
 
   return (
-    <div className="flex flex-1 flex-col overflow-auto">
+    <Page>
       <PageHeader>
         <PageTitle>
           <h1 className="text-slate-50 font-bold text-lg mr-4" title={module.data.path}>
@@ -71,7 +71,7 @@ export default function ModulePage() {
           </CodeBlockSectionWithPrettier>
         </CodeBlock>
       </div>
-    </div>
+    </Page>
   );
 }
 

webui/src/components/Page.tsx

@@ -0,0 +1,38 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import cn from 'classnames';
+import { forwardRef, type HTMLAttributes } from 'react';
+
+import { StatsEntrySelect } from '~/components/forms/StatsEntrySelect';
+import { LayoutContent, LayoutNavigation } from '~/ui/Layout';
+
+export { LayoutHeader as PageHeader, LayoutTitle as PageTitle } from '~/ui/Layout';
+
+const pageVariants = cva('', {
+  variants: {
+    variant: {
+      default: '',
+      viewport: 'flex flex-col h-full',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+type PageProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof pageVariants>;
+
+export const Page = forwardRef<HTMLDivElement, PageProps>(
+  ({ className, variant, children, ...props }, ref) => (
+    <div className={cn(pageVariants({ variant, className }))} ref={ref} {...props}>
+      <LayoutNavigation>
+        <StatsEntrySelect />
+      </LayoutNavigation>
+      {variant === 'viewport' ? (
+        <LayoutContent>{children}</LayoutContent>
+      ) : (
+        <div className="overflow-auto">{children}</div>
+      )}
+    </div>
+  )
+);
+Page.displayName = 'Page';

webui/src/ui/Page.tsx → webui/src/ui/Layout.tsx

@@ -2,11 +2,7 @@ import cn from 'classnames';
 import { Link } from 'expo-router';
 import { HTMLAttributes, PropsWithChildren } from 'react';
 
-export function Page({ children }: PropsWithChildren) {
-  return <div className="flex flex-col h-full">{children}</div>;
-}
-
-export function PageNav({ children }: PropsWithChildren) {
+export function LayoutNavigation({ children }: PropsWithChildren) {
   return (
     <header className="h-15 flex flex-shrink-0 items-center justify-between gap-2 border-b border-b-secondary bg-default px-4">
       <Link href="/" aria-label="Go back to graph">
@@ -18,15 +14,15 @@ export function PageNav({ children }: PropsWithChildren) {
   );
 }
 
-export function PageHeader({ children }: PropsWithChildren) {
+export function LayoutHeader({ children }: PropsWithChildren) {
   return <div className="flex flex-row justify-between my-6 px-8">{children}</div>;
 }
 
-export function PageTitle({ children }: PropsWithChildren) {
+export function LayoutTitle({ children }: PropsWithChildren) {
   return <div className="flex flex-row items-center">{children}</div>;
 }
 
-export function PageContent({ children }: PropsWithChildren) {
+export function LayoutContent({ children }: PropsWithChildren) {
   return <main className="flex flex-grow">{children}</main>;
 }
 

webui/src/utils/atlas.ts

@@ -1,13 +1,13 @@
-import { type StatsSource } from '~core/data/types';
-
-declare global {
-  var EXPO_ATLAS_SOURCE: StatsSource; // eslint-disable-line no-var
-}
+import '~core/utils/global';
 
+/**
+ * Get the Expo Atlas data source, from global property.
+ * When running in development, the `metro.config.js` initializes a fixture source.
+ */
 export function getSource() {
-  if (!global['EXPO_ATLAS_SOURCE']) {
+  if (!global.EXPO_ATLAS_SOURCE) {
     throw new Error('Expo Atlas data source is not initialized');
   }
 
-  return global['EXPO_ATLAS_SOURCE'];
+  return global.EXPO_ATLAS_SOURCE;
 }