profiler: print number of maps; only show mount time

src/helpers/measureTime.js

@@ -1,12 +1,15 @@
   export const measureTime = (self) => {
     return (profilerId, mode, actualTime, baseTime, startTime, commitTime) => {
-      console.log({profilerId, mode, actualTime, baseTime, startTime, commitTime});
-      self.metricsRef.current.innerHTML = `
-            Mode: ${mode}<br/>
-            Actual Time: ${actualTime}<br/>
-            Base Time: ${baseTime}<br/>
-            Start Time: ${startTime}<br/>
-            Commit Time: ${commitTime}
-            `
+      if(mode==="mount"){
+        console.log({profilerId, mode, actualTime, baseTime, startTime, commitTime});
+        self.metricsRef.current.innerHTML = `
+          Mode: ${mode}<br/>
+          Number of Maps: ${self.state.noOfMaps}<br/>
+          Actual Time: ${actualTime}<br/>
+          Base Time: ${baseTime}<br/>
+          Start Time: ${startTime}<br/>
+          Commit Time: ${commitTime}
+          `
+      }
     }
   }

src/test/Googles.js

@@ -6,6 +6,9 @@ export default class Googles extends React.Component{
   constructor(props) {
     super(props)
     this.metricsRef = React.createRef()
+    this.state = {
+      noOfMaps: 100
+    }
   }
 
   render(){
@@ -14,7 +17,7 @@ export default class Googles extends React.Component{
         <div ref={this.metricsRef} className="mapTime" >
         </div>
         <Profiler id="google" onRender={measureTime(this)}>
-          { Array.from({length:30}, (_, index) =>
+          { Array.from({length: this.state.noOfMaps}, (_, index) =>
               <Google key={index}/>
           )}
         </Profiler>

src/test/Leaflets.js

@@ -6,6 +6,9 @@ export default class Leaflets extends React.Component{
   constructor(props) {
     super(props)
     this.metricsRef = React.createRef()
+    this.state = {
+      noOfMaps: 100
+    }
   }
 
   render(){
@@ -14,7 +17,7 @@ export default class Leaflets extends React.Component{
         <div ref={this.metricsRef} className="mapTime" >
         </div>
         <Profiler id="leaflet" onRender={measureTime(this)}>
-          { Array.from({length:30}, (_, index) =>
+          { Array.from({length: this.state.noOfMaps}, (_, index) =>
               <Leaflet key={index}/>
           )}
         </Profiler>

src/test/MapGLs.js

@@ -7,6 +7,9 @@ export default class MapGLs extends React.Component{
   constructor(props) {
     super(props)
     this.metricsRef = React.createRef()
+    this.state = {
+      noOfMaps: 100
+    }
   }
 
   render(){
@@ -15,7 +18,7 @@ export default class MapGLs extends React.Component{
         <div ref={this.metricsRef} className="mapTime" >
         </div>
         <Profiler id="mapgl" onRender={measureTime(this)}>
-          { Array.from({length:30}, (_, index) =>
+          { Array.from({length: this.state.noOfMaps}, (_, index) =>
               <MapGL key={index} />
           )}
         </Profiler>

src/test/Mapboxes.js

@@ -6,6 +6,9 @@ export default class MapGLs extends React.Component{
   constructor(props) {
     super(props)
     this.metricsRef = React.createRef()
+    this.state = {
+      noOfMaps: 100
+    }
   }
 
   render(){
@@ -14,7 +17,7 @@ export default class MapGLs extends React.Component{
         <div ref={this.metricsRef} className="mapTime" >
         </div>
         <Profiler id="mapbox" onRender={measureTime(this)}>
-          { Array.from({length:30}, (_, index) =>
+          { Array.from({length: this.state.noOfMaps}, (_, index) =>
               <Mapbox key={index}/>
           )}
         </Profiler>

src/test/Pigeons.js

@@ -12,6 +12,7 @@ export default class Pigeons extends React.Component{
     this.metricsRef = React.createRef()
 
     this.state = {
+      noOfMaps: 100,
       mapConfig: {
         zoom: 15,
         path: [],
@@ -42,7 +43,7 @@ export default class Pigeons extends React.Component{
         </div>
         <div>
           <Profiler id="pigeons" onRender={measureTime(this)}>
-            { Array.from({length:200}, (_, index) => <Pigeon
+            { Array.from({length: this.state.noOfMaps}, (_, index) => <Pigeon
               mapConfig={this.state.mapConfig}
               updateMapState={this.updateMapState}
               getDistance={this.getDistance}