feat(react-components): adding a fps display

awslabs · Jan 5, 2024 · 48cd9ef · 48cd9ef
1 parent 1bff986
commit 48cd9ef
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
@@ -119,6 +119,7 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-dnd-touch-backend": "^16.0.1",
     "react-error-boundary": "^4.0.10",
+    "react-fps": "^1.0.6",
     "react-hook-form": "^7.46.1",
     "react-hotkeys": "^2.0.0",
     "react-popper": "^2.3.0",

diff --git a/packages/dashboard/src/components/dashboard/index.tsx b/packages/dashboard/src/components/dashboard/index.tsx
@@ -20,6 +20,7 @@ import '../../styles/variables.css';
 import { queryClient } from '~/data/query-client';
 import { PropertiesPanel } from '~/customization/propertiesSections';
 import { useDashboardViewport } from '~/hooks/useDashboardViewport';
+import { FpsView } from 'react-fps';
 
 export type DashboardProperties = {
   onSave: DashboardSave;
@@ -28,6 +29,7 @@ export type DashboardProperties = {
   initialViewMode?: 'preview' | 'edit';
   name?: string;
 };
+const showFPSMonitor = localStorage.getItem('DASHBOARD_SHOW_FPS');
 
 const Dashboard: React.FC<DashboardProperties> = ({
   onSave,
@@ -41,24 +43,27 @@ const Dashboard: React.FC<DashboardProperties> = ({
 
   const readOnly = initialViewMode && initialViewMode === 'preview';
   return (
-    <ClientContext.Provider value={getClients(clientConfiguration)}>
-      <QueryContext.Provider value={getQueries(clientConfiguration)}>
-        <QueryClientProvider client={queryClient}>
-          <Provider store={configureDashboardStore({ ...toDashboardState(dashboardConfiguration), readOnly })}>
-            <DndProvider
-              backend={TouchBackend}
-              options={{
-                enableMouseEvents: true,
-                enableKeyboardEvents: true,
-              }}
-            >
-              <InternalDashboard onSave={onSave} editable={true} name={name} propertiesPanel={<PropertiesPanel />} />
-            </DndProvider>
-          </Provider>
-          <ReactQueryDevtools initialIsOpen={false} />
-        </QueryClientProvider>
-      </QueryContext.Provider>
-    </ClientContext.Provider>
+    <>
+      {showFPSMonitor && <FpsView height={50} width={80} />}
+      <ClientContext.Provider value={getClients(clientConfiguration)}>
+        <QueryContext.Provider value={getQueries(clientConfiguration)}>
+          <QueryClientProvider client={queryClient}>
+            <Provider store={configureDashboardStore({ ...toDashboardState(dashboardConfiguration), readOnly })}>
+              <DndProvider
+                backend={TouchBackend}
+                options={{
+                  enableMouseEvents: true,
+                  enableKeyboardEvents: true,
+                }}
+              >
+                <InternalDashboard onSave={onSave} editable={true} name={name} propertiesPanel={<PropertiesPanel />} />
+              </DndProvider>
+            </Provider>
+            <ReactQueryDevtools initialIsOpen={false} />
+          </QueryClientProvider>
+        </QueryContext.Provider>
+      </ClientContext.Provider>
+    </>
   );
 };