From 3e925c708792b959fa8feb764dfdaf640e8ab006 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mose=20M=C3=BCller?= <mosemueller@gmail.com>
Date: Wed, 2 Aug 2023 12:06:21 +0200
Subject: [PATCH] frontend: only display "render count" when in development
 mode

---
 frontend/src/components/AsyncMethodComponent.tsx | 4 +++-
 frontend/src/components/ButtonComponent.tsx      | 4 +++-
 frontend/src/components/EnumComponent.tsx        | 4 +++-
 frontend/src/components/ListComponent.tsx        | 6 ++++--
 frontend/src/components/MethodComponent.tsx      | 4 +++-
 frontend/src/components/NumberComponent.tsx      | 4 +++-
 frontend/src/components/SliderComponent.tsx      | 4 +++-
 frontend/src/components/StringComponent.tsx      | 4 +++-
 8 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/AsyncMethodComponent.tsx b/frontend/src/components/AsyncMethodComponent.tsx
index 9382937..3d6bf06 100644
--- a/frontend/src/components/AsyncMethodComponent.tsx
+++ b/frontend/src/components/AsyncMethodComponent.tsx
@@ -78,7 +78,9 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
     <div
       className="col-5 align-items-center method"
       id={parent_path.concat('.' + name)}>
-      <p>Render count: {renderCount.current}</p>
+      {process.env.NODE_ENV === 'development' && (
+        <p>Render count: {renderCount.current}</p>
+      )}
       <h5>
         Function: {name}
         <DocStringComponent docString={docString} />
diff --git a/frontend/src/components/ButtonComponent.tsx b/frontend/src/components/ButtonComponent.tsx
index 22b386d..826a8c1 100644
--- a/frontend/src/components/ButtonComponent.tsx
+++ b/frontend/src/components/ButtonComponent.tsx
@@ -32,7 +32,9 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
 
   return (
     <div className={'button'} id={parent_path.concat('.' + name)}>
-      <p>Render count: {renderCount.current}</p>
+      {process.env.NODE_ENV === 'development' && (
+        <p>Render count: {renderCount.current}</p>
+      )}
 
       <DocStringComponent docString={docString} />
       <ToggleButton
diff --git a/frontend/src/components/EnumComponent.tsx b/frontend/src/components/EnumComponent.tsx
index 06787c9..c39ed41 100644
--- a/frontend/src/components/EnumComponent.tsx
+++ b/frontend/src/components/EnumComponent.tsx
@@ -30,7 +30,9 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
 
   return (
     <div className={'component boolean'} id={parent_path.concat('.' + name)}>
-      <p>Render count: {renderCount.current}</p>
+      {process.env.NODE_ENV === 'development' && (
+        <p>Render count: {renderCount.current}</p>
+      )}
       <DocStringComponent docString={docString} />
       <Row>
         <Col className="col-5 d-flex align-items-center">
diff --git a/frontend/src/components/ListComponent.tsx b/frontend/src/components/ListComponent.tsx
index 91d0858..bb50071 100644
--- a/frontend/src/components/ListComponent.tsx
+++ b/frontend/src/components/ListComponent.tsx
@@ -19,8 +19,10 @@ export const ListComponent = React.memo((props: ListComponentProps) => {
   const { name, parent_path, value, docString } = props;
 
   return (
-    <div className={'component boolean'} id={parent_path.concat(name)}>
-      <p>Render count: {renderCount.current}</p>
+    <div className={'component list'} id={parent_path.concat(name)}>
+      {process.env.NODE_ENV === 'development' && (
+        <p>Render count: {renderCount.current}</p>
+      )}
       <DocStringComponent docString={docString} />
       {value.map((item, index) => {
         return (
diff --git a/frontend/src/components/MethodComponent.tsx b/frontend/src/components/MethodComponent.tsx
index 2bae8b8..b064d7c 100644
--- a/frontend/src/components/MethodComponent.tsx
+++ b/frontend/src/components/MethodComponent.tsx
@@ -64,7 +64,9 @@ export const MethodComponent = React.memo((props: MethodProps) => {
     <div
       className="col-5 align-items-center method"
       id={parent_path.concat('.' + name)}>
-      <p>Render count: {renderCount.current}</p>
+      {process.env.NODE_ENV === 'development' && (
+        <p>Render count: {renderCount.current}</p>
+      )}
       <h5 onClick={() => setHideOutput(!hideOutput)} style={{ cursor: 'pointer' }}>
         Function: {name}
         <DocStringComponent docString={docString} />
diff --git a/frontend/src/components/NumberComponent.tsx b/frontend/src/components/NumberComponent.tsx
index 81120a7..02e2d0b 100644
--- a/frontend/src/components/NumberComponent.tsx
+++ b/frontend/src/components/NumberComponent.tsx
@@ -207,7 +207,9 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
 
   return (
     <div className={'component boolean'} id={parent_path.concat(name)}>
-      <p>Render count: {renderCount.current}</p>
+      {process.env.NODE_ENV === 'development' && (
+        <p>Render count: {renderCount.current}</p>
+      )}
       <DocStringComponent docString={docString} />
       <div className="row">
         <div className="col-5 d-flex">
diff --git a/frontend/src/components/SliderComponent.tsx b/frontend/src/components/SliderComponent.tsx
index 0fcd399..9e97056 100644
--- a/frontend/src/components/SliderComponent.tsx
+++ b/frontend/src/components/SliderComponent.tsx
@@ -64,7 +64,9 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
 
   return (
     <div className={'slider'} id={parent_path.concat('.' + name)}>
-      <p>Render count: {renderCount.current}</p>
+      {process.env.NODE_ENV === 'development' && (
+        <p>Render count: {renderCount.current}</p>
+      )}
 
       <DocStringComponent docString={docString} />
       <Row>
diff --git a/frontend/src/components/StringComponent.tsx b/frontend/src/components/StringComponent.tsx
index ca80e1b..447d992 100644
--- a/frontend/src/components/StringComponent.tsx
+++ b/frontend/src/components/StringComponent.tsx
@@ -31,7 +31,9 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
 
   return (
     <div className={'component boolean'} id={parent_path.concat(name)}>
-      <p>Render count: {renderCount.current}</p>
+      {process.env.NODE_ENV === 'development' && (
+        <p>Render count: {renderCount.current}</p>
+      )}
       <DocStringComponent docString={docString} />
       <div className="row">
         <div className="col-5 d-flex">