feat(benchmarking): add css and progress indicator

Author: stibel

apps/benchmarking/App.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { StyleSheet } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useKeepAwake } from 'expo-keep-awake';
 import html from './source';
@@ -21,7 +22,7 @@ const props = {
 export default function App() {
   useKeepAwake();
   return (
-    <SafeAreaView style={{ flexGrow: 1, padding: 16 }}>
+    <SafeAreaView style={styles.container}>
       <TRenderEngineProvider ignoredDomTags={config.ignoredTags}>
         <RenderHTMLConfigProvider {...props}>
           <Benchmark html={html} {...config} />
@@ -30,3 +31,10 @@ export default function App() {
     </SafeAreaView>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff'
+  }
+});

apps/benchmarking/Benchmark.js

@@ -1,53 +1,114 @@
 /* eslint-disable no-undef */
 import * as React from 'react';
-import { ScrollView, StyleSheet, View, Text, Button } from 'react-native';
+import {
+  ScrollView,
+  StyleSheet,
+  View,
+  Text,
+  Button,
+  ActivityIndicator
+} from 'react-native';
 import { mean } from 'ramda';
 import { match } from 'react-states';
 import useBenchmark from './useBenchmark';
 
 function Benchmarks({ benchmarks }) {
   return (
-    <View>
-      <Text>
-        Average Time to Render:{'\n'}
-        {benchmarks.map((e) => `${e.name}: ${mean(e.values).toFixed(2)}ms\n`)}
+    <View style={styles.resultsContainer}>
+      <Text style={styles.resultsTitle}>Average Time to Render:</Text>
+      {benchmarks.map((e) => (
+        <Text key={e.name} style={styles.resultItem}>
+          {e.name}: {mean(e.values).toFixed(2)}ms
+        </Text>
+      ))}
+    </View>
+  );
+}
+
+function ProgressIndicator({
+  runId,
+  runs,
+  profileId,
+  numOfProfiles,
+  profileName
+}) {
+  const overallProgress = (
+    ((profileId * runs + runId + 1) / (numOfProfiles * runs)) *
+    100
+  ).toFixed(0);
+
+  return (
+    <View style={styles.progressContainer}>
+      <ActivityIndicator size="large" color="#007AFF" />
+      <Text style={styles.progressTitle}>Benchmarking in Progress...</Text>
+      <Text style={styles.progressText}>
+        Profile: {profileName} ({profileId + 1}/{numOfProfiles})
+      </Text>
+      <Text style={styles.progressText}>
+        Run: {runId + 1}/{runs}
       </Text>
+      <Text style={styles.progressPercentage}>{overallProgress}% Complete</Text>
     </View>
   );
 }
 
 export default function Benchmark({ samples, html, ignoredTags }) {
-  const { onLayout, launch, ...state } = useBenchmark({
+  const {
+    onLayout,
+    launch,
+    profile: currentProfile,
+    ...state
+  } = useBenchmark({
     runs: samples
   });
   const renderHtml = React.useCallback(
-    ({ runId, profile }) => (
-      <View key={runId} onLayout={onLayout}>
-        <profile.component
-          ignoredTags={ignoredTags}
-          running={true}
-          html={html}
-          {...profile.props}
-        />
-      </View>
-    ),
-    [html, ignoredTags, onLayout]
+    ({ runId }) => {
+      if (!currentProfile) return null;
+      return (
+        <View key={runId} onLayout={onLayout}>
+          <currentProfile.component
+            ignoredTags={ignoredTags}
+            running={true}
+            html={html}
+            {...currentProfile.props}
+          />
+        </View>
+      );
+    },
+    [html, ignoredTags, onLayout, currentProfile]
   );
+
+  const isRunning = state.state === 'RUNNING' || state.state === 'WAIT_RUN';
+
   return (
-    <View>
-      <Button
-        style={{ marginTop: 40 }}
-        title="Run Benchmark"
-        onPress={launch}
-        disabled={state.state !== 'WAIT_BENCH'}
-      />
-      <ScrollView contentContainerStyle={styles.container}>
+    <View style={styles.wrapper}>
+      <View style={styles.buttonContainer}>
+        <Button
+          title="Run Benchmark"
+          onPress={launch}
+          disabled={state.state !== 'WAIT_BENCH'}
+        />
+      </View>
+
+      {isRunning && currentProfile && (
+        <ProgressIndicator
+          runId={state.runId}
+          runs={state.runs}
+          profileId={state.profileId}
+          numOfProfiles={state.numOfProfiles}
+          profileName={currentProfile.name}
+        />
+      )}
+
+      <ScrollView contentContainerStyle={styles.scrollContainer}>
         {match(state, {
           WAIT_BENCH: ({ benchmarks }) =>
             benchmarks ? (
               <Benchmarks benchmarks={benchmarks} />
             ) : (
-              <Text>Waiting for benchmark to launch</Text>
+              <Text style={styles.waitingText}>
+                Waiting for benchmark to launch
+              </Text>
             ),
           WAIT_RUN: renderHtml,
           RUNNING: renderHtml
@@ -59,11 +120,65 @@ export default function Benchmark({ samples, html, ignoredTags }) {
 
 const styles = StyleSheet.create({
   wrapper: {
-    flexGrow: 1,
-    padding: 16
+    flex: 1
   },
-  container: {
+  buttonContainer: {
+    marginBottom: 16,
+    paddingHorizontal: 16
+  },
+  scrollContainer: {
     flexGrow: 1,
-    padding: 16
+    paddingHorizontal: 16
+  },
+  progressContainer: {
+    backgroundColor: '#E3F2FD',
+    padding: 20,
+    marginHorizontal: 16,
+    marginBottom: 16,
+    borderRadius: 12,
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#90CAF9'
+  },
+  progressTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#1976D2',
+    marginTop: 12,
+    marginBottom: 8
+  },
+  progressText: {
+    fontSize: 14,
+    color: '#1565C0',
+    marginTop: 4
+  },
+  progressPercentage: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#0D47A1',
+    marginTop: 12
+  },
+  resultsContainer: {
+    backgroundColor: '#f5f5f5',
+    padding: 16,
+    borderRadius: 8,
+    marginBottom: 16
+  },
+  resultsTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 12,
+    color: '#333'
+  },
+  resultItem: {
+    fontSize: 16,
+    marginBottom: 8,
+    color: '#555'
+  },
+  waitingText: {
+    fontSize: 16,
+    color: '#888',
+    textAlign: 'center',
+    marginTop: 20
   }
 });