Adding Hovering Feature Styling

Author: DennisLpz

package.json

@@ -38,13 +38,17 @@
   },
   "contributors": [
     "Abaas Khorrami",
+    "Ali Rahman",
     "Andy Wong",
     "Bryan Lee",
     "Becca Viner",
     "Caitlin Chan",
+    "Caner Demir",
     "Carlos Perez",
+    "Cole Styron",
     "Chris Flannery",
     "David Chai",
+    "Dennis Lopez",
     "Edwin Menendez",
     "Ergi Shehu",
     "Gabriela Jardim Aquino",
@@ -55,6 +59,7 @@
     "Josh Kim",
     "Joshua Howard",
     "Kevin Fey",
+    "Kevin Ngo",
     "Kim Mai Nguyen",
     "Nathanael Wa Mwenze",
     "Prasanna Malla",

src/app/components/StateRoute.tsx

@@ -141,7 +141,7 @@ const StateRoute = (props: StateRouteProps) => {
           }}
           label='LCP'
           name='Largest Contentful Paint'
-          description='Time website loads largest content on screen'
+          description='Measures loading performance. The benchmark is less than 2500 ms.'
         />
         <WebMetrics
           color={FIDColor}
@@ -151,23 +151,23 @@ const StateRoute = (props: StateRouteProps) => {
           }}
           label='FID'
           name='First Input Delay'
-          description='Time from when a user first interacts with your site'
+          description='Measures interactivity. The benchmark is less than 100 ms.'
         />
         <WebMetrics
           color={FCPColor}
           series={(webMetrics.FCP / 1000) * 100}
           formatted={(val) => ((val / 100) * 1000).toFixed(2) + ' ms'}
           label='FCP'
           name='First Contentful Paint'
-          description='How long it takes browser to render first piece of DOM content'
+          description='How long it takes browser to render first piece of DOM content.'
         />
         <WebMetrics
           color={TTFBColor}
           series={(webMetrics.TTFB / 10) * 100}
           formatted={(val) => ((val / 100) * 10).toFixed(2) + ' ms'}
           label='TTFB'
           name='Time to First Byte'
-          description = 'Time at which your server sends a response'
+          description='Measures the time it takes for a browser to receive the first byte of page content. The benchmark is 600 ms.'
         />
       </div>
     );

src/app/components/WebMetrics.tsx

@@ -104,9 +104,11 @@ const radialGraph = (props) => {
           </div>
         </Trigger>
         <Hover type='hover'>
-          <div id='hover-box'>
-            <p> Metric : {props.name}</p>
-            <p> Tracks : {props.description}</p>
+          <div style={{ padding: '0.5rem 1rem' }} id='hover-box'>
+            <p>
+              <strong>{props.name}</strong>
+            </p>
+            <p>{props.description}</p>
           </div>
         </Hover>
       </ReactHover>

src/app/styles/layout/_stateContainer.scss

@@ -190,7 +190,7 @@
   grid-template-columns: auto auto;
   align-items: center;
   justify-content: center;
-  margin-top: 1rem;
+  margin-top: 25%;
 }
 
 //container for metrics

src/backend/timeJump.ts

@@ -60,8 +60,10 @@ export default (origin, mode) => {
         );
         const hookState = Object.values(hook);
 
-        if (hooksComponent && hooksComponent.dispatch) {
-          hooksComponent.dispatch(hookState[0]);
+        if ( hooksComponent && hooksComponent.dispatch) {
+          if (Array.isArray(hookState[0]) && hookState[0].length > 0 || !Array.isArray(hookState[0])) {
+            hooksComponent.dispatch(hookState[0]);
+          }
         }
       });
     }