leaflet test: measure time after moving x markers y steps

src/helpers/measureTime.js

@@ -4,7 +4,7 @@
         console.log({profilerId, mode, actualTime, baseTime, startTime, commitTime});
         self.metricsRef.current.innerHTML = `
           Mode: ${mode}<br/>
-          Number of Maps: ${self.state.noOfMaps}<br/>
+          Number of Markers: ${self.state.noOfMarkers}<br/>
           Actual Time: ${actualTime}<br/>
           Base Time: ${baseTime}<br/>
           Start Time: ${startTime}<br/>

src/test/Leaflets.js

@@ -6,24 +6,37 @@ export default class Leaflets extends React.Component{
   constructor(props) {
     super(props)
     this.metricsRef = React.createRef()
+    this.metricsRef2 = React.createRef()
     this.state = {
       markers: [],
       markersFromTo: [],
       noOfMaps: 1,
       noOfMarkers: 10,
-      noOfSteps: 100,
+      noOfSteps: 500,
       currStep: 0,
     }
   }
 
   componentDidMount() {
     this.createRandomMarkers();
+    this.setState({startTime: performance.now()});
     this.timer = setInterval(() => {
       this.setState({currStep: this.state.currStep + 1});
       this.calcMarkerPosition()
     }, 10);
   }
 
+  componentDidUpdate() {
+    if(this.state.currStep===this.state.noOfSteps){
+      let endTime = performance.now();
+      let duration = endTime - this.state.startTime
+      let msg = "Duration " + duration + " for " + this.state.noOfSteps + " steps"
+      console.log(msg)
+      this.metricsRef2.current.innerHTML = msg
+      this.setState({currStep: this.state.currStep + 1});
+    }
+  }
+
   componentWillUnmount() {
     clearInterval(this.timer);
   }
@@ -74,11 +87,13 @@ export default class Leaflets extends React.Component{
   render(){
     return (
       <div>
-      <h1>{this.state.currStep}</h1>
-        <div ref={this.metricsRef} className="mapTime" >
+        <h1>{this.state.currStep}</h1>
+        <div ref={this.metricsRef2} className="mapTime">
+        </div>
+        <div ref={this.metricsRef} className="mapTime">
         </div>
         <Profiler id="leaflet" onRender={measureTime(this)}>
-              <Leaflet markers={this.state.markers}/>
+          <Leaflet markers={this.state.markers}/>
         </Profiler>
         <button onClick={this.createRandomMarkers}>test</button>
       </div>