various dope updates

package.json

@@ -48,5 +48,6 @@
       "./node_modules/.bin/prettier --write --no-semi --single-quote",
       "git add"
     ]
-  }
+  },
+  "dependencies": {}
 }

src/extension/components/Buttons.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-export function Buttons({ theme, clear, reload }) {
+export function Buttons({ theme, clear, reload, update }) {
   return (
     <React.Fragment>
       <button className={theme === 'dark' ? 'dark-btn' : 'btn'} onClick={clear}>
@@ -12,6 +12,12 @@ export function Buttons({ theme, clear, reload }) {
       >
         Reload
       </button>
+      <button
+        className={theme === 'dark' ? 'dark-btn' : 'btn'}
+        onClick={update}
+      >
+        update
+      </button>
     </React.Fragment>
   )
 }

src/extension/components/Graphics.js

@@ -4,8 +4,10 @@ export function Graphics(props) {
   return (
     <React.Fragment>
       <p>Overall time taken</p>
-      <canvas id="myChart" width="400" height="300" />
-      <p>
+      <div style={{ height: '50vh', width: '100vw', position: 'relative' }}>
+        <canvas id="myChart" />
+      </div>
+      <p style={{ marginTop: '60vh' }}>
         {' '}
         Total time taken combining all the phases -{' '}
         <strong>{props.totalTime} ms</strong>{' '}

src/extension/components/Measures.js

@@ -7,14 +7,15 @@ const theme = require('../theme')
 /**
   This component renders the data (measures of each component)
 */
+
 export function Measures(props) {
   return (
     <div>
       <h1 className="component-text">Components</h1>
       {props.measures.map((measure, index) => {
         return (
           <div
-            key={index}
+            key={measure.componentName}
             id={measure.componentName}
             className="container component-result"
           >
@@ -51,11 +52,50 @@ export function Measures(props) {
                 </td>
               </tr>
               <tr>
-                <td>Render (ms)</td>
+                <td>Cascading Updates (ms)</td>
+                <td>
+                  <strong>{measure.cascadingUpdate.totalTimeSpentMs}</strong>
+                </td>
+              </tr>
+              <tr>
+                <td>Cascading Updates (total)</td>
+                <td>
+                  <strong>{measure.cascadingUpdate.numberOfTimes}</strong>
+                </td>
+              </tr>
+
+              <tr>
+                <td> getSnapshotBeforeUpdate (total)</td>
+                <td>
+                  <strong>
+                    {measure.getSnapshotBeforeUpdate.numberOfTimes}
+                  </strong>
+                </td>
+              </tr>
+
+              <tr>
+                <td> getSnapshotBeforeUpdate (ms)</td>
                 <td>
-                  <strong>{measure.render.totalTimeSpentMs}</strong>
+                  <strong>
+                    {measure.getSnapshotBeforeUpdate.totalTimeSpentMs}
+                  </strong>
                 </td>
               </tr>
+
+              <tr>
+                <td>getChildContext (total)</td>
+                <td>
+                  <strong>{measure.getChildContext.numberOfTimes}</strong>
+                </td>
+              </tr>
+
+              <tr>
+                <td>getChildContext (ma)</td>
+                <td>
+                  <strong>{measure.getChildContext.totalTimeSpentMs}</strong>
+                </td>
+              </tr>
+
               <tr>
                 <td>Unmount (ms)</td>
                 <td>

src/extension/components/Metrics.js

@@ -13,7 +13,7 @@ export function Metrics(props) {
         <ul className="ctime">
           {props.measures.map((measure, index) => {
             return (
-              <li key={index}>
+              <li key={measure.componentName}>
                 <ComponentTime
                   componentname={measure.componentName}
                   percentage={parseInt(measure.percentTimeSpent)}