Merge branch 'dev45' of github.com:oslabs-beta/reactime into dev45

Author: andytsou19

src/README.md

@@ -70,6 +70,8 @@ The general flow of data is described in the following steps:
 ![GENERAL DATA FLOW](../assets/dataflow.jpg)
 
 1. When the background bundle is loaded by the browser, it executes a script injection into the dom. (see section on *backend*). This script uses a technique called [throttle](https://medium.com/@bitupon.211/debounce-and-throttle-160affa5457b) to send state data from the app to the content script every specified milliseconds (in our case, this interval is 70ms).
+<!--  CHECK LINE 496 IN LINKFIBER.TS -->
+
 
 2. The content script always listens for messages being passed from the extension's target application. Upon receiving data from the target app, the content script will immediately forward this data to the background script which then updates an object called `tabsObj`. Each time `tabsObj` is updated, its latest version will be passed to Reactime, where it is processed for displaying to the user by the *app* folder scripts.
 

src/app/components/BarGraph.tsx

@@ -9,9 +9,8 @@ import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
 import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import { Text } from '@visx/text';
 import { schemeSet3 } from 'd3-scale-chromatic';
-import { onHover, onHoverExit } from '../actions/actions';
+import { onHover, onHoverExit, save } from '../actions/actions';
 import { useStoreContext } from '../store';
-import { save } from '../actions/actions';
 
 /* TYPESCRIPT */
 interface data {
@@ -45,7 +44,9 @@ interface TooltipData {
 }
 
 /* DEFAULTS */
-const margin = { top: 30, right: 30, bottom: 0, left: 50 };
+const margin = {
+  top: 30, right: 30, bottom: 0, left: 50,
+};
 const axisColor = '#62d6fb';
 const background = '#242529';
 const tooltipStyles = {
@@ -58,7 +59,7 @@ const tooltipStyles = {
   fontFamily: 'Roboto',
 };
 
-const BarGraph = (props) => {
+const BarGraph = props => {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { width, height, data } = props;
   const {
@@ -78,8 +79,8 @@ const BarGraph = (props) => {
 
   // data accessor (used to generate scales) and formatter (add units for on hover box)
   const getSnapshotId = (d: snapshot) => d.snapshotId;
-  const formatSnapshotId = (id) => `Snapshot ID: ${id}`;
-  const formatRenderTime = (time) => `${time} ms `;
+  const formatSnapshotId = id => `Snapshot ID: ${id}`;
+  const formatRenderTime = time => `${time} ms `;
 
   // create visualization SCALES with cleaned data
   const snapshotIdScale = scaleBand<string>({
@@ -105,7 +106,7 @@ const BarGraph = (props) => {
 
   const toStorage = {
     currentTab,
-    title: tabs[currentTab]['title'],
+    title: tabs[currentTab].title,
     data,
   };
 
@@ -119,14 +120,14 @@ const BarGraph = (props) => {
       } else {
         saveButtons[i].innerHTML = 'Save Series';
         saveButtons[i].classList.remove('animate');
-      };
-    };
+      }
+    }
   });
   return (
-    <div className='bargraph-position'>
+    <div className="bargraph-position">
       <button
-        className='save-series-button'
-        onClick={(e) => {
+        className="save-series-button"
+        onClick={e => {
           dispatch(save(toStorage));
         }}
       >
@@ -149,7 +150,7 @@ const BarGraph = (props) => {
           yScale={renderingScale}
           width={xMax}
           height={yMax}
-          stroke='black'
+          stroke="black"
           strokeOpacity={0.1}
           xOffset={snapshotIdScale.bandwidth() / 2}
         />
@@ -162,48 +163,44 @@ const BarGraph = (props) => {
             yScale={renderingScale}
             color={colorScale}
           >
-            {(barStacks) =>
-              barStacks.map((barStack) =>
-                barStack.bars.map((bar, idx) => {
-                  // Hides new components if components don't exist in previous snapshots.
-                  if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
-                    bar.height = 0;
-                  }
-                  return (
-                    <rect
-                      key={`bar-stack-${barStack.id}-${bar.id}`}
-                      x={bar.x}
-                      y={bar.y}
-                      height={bar.height === 0 ? null : bar.height}
-                      width={bar.width}
-                      fill={bar.color}
+            {barStacks => barStacks.map(barStack => barStack.bars.map((bar, idx) => {
+              // Hides new components if components don't exist in previous snapshots.
+              if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
+                bar.height = 0;
+              }
+              return (
+                <rect
+                  key={`bar-stack-${barStack.id}-${bar.id}`}
+                  x={bar.x}
+                  y={bar.y}
+                  height={bar.height === 0 ? null : bar.height}
+                  width={bar.width}
+                  fill={bar.color}
                       /* TIP TOOL EVENT HANDLERS */
                       // Hides tool tip once cursor moves off the current rect.
-                      onMouseLeave={() => {
-                        dispatch(
-                          onHoverExit(data.componentData[bar.key].rtid),
-                          (tooltipTimeout = window.setTimeout(() => {
-                            hideTooltip();
-                          }, 300))
-                        );
-                      }}
+                  onMouseLeave={() => {
+                    dispatch(
+                      onHoverExit(data.componentData[bar.key].rtid),
+                      (tooltipTimeout = window.setTimeout(() => {
+                        hideTooltip();
+                      }, 300)),
+                    );
+                  }}
                       // Cursor position in window updates position of the tool tip.
-                      onMouseMove={(event) => {
-                        dispatch(onHover(data.componentData[bar.key].rtid));
-                        if (tooltipTimeout) clearTimeout(tooltipTimeout);
-                        const top = event.clientY - margin.top - bar.height;
-                        const left = bar.x + bar.width / 2;
-                        showTooltip({
-                          tooltipData: bar,
-                          tooltipTop: top,
-                          tooltipLeft: left,
-                        });
-                      }}
-                    />
-                  );
-                })
-              )
-            }
+                  onMouseMove={event => {
+                    dispatch(onHover(data.componentData[bar.key].rtid));
+                    if (tooltipTimeout) clearTimeout(tooltipTimeout);
+                    const top = event.clientY - margin.top - bar.height;
+                    const left = bar.x + bar.width / 2;
+                    showTooltip({
+                      tooltipData: bar,
+                      tooltipTop: top,
+                      tooltipLeft: left,
+                    });
+                  }}
+                />
+              );
+            }))}
           </BarStack>
         </Group>
         <AxisLeft
@@ -235,15 +232,15 @@ const BarGraph = (props) => {
         />
         <Text
           x={-xMax / 2}
-          y='15'
-          transform='rotate(-90)'
+          y="15"
+          transform="rotate(-90)"
           fontSize={12}
-          fill='#FFFFFF'
+          fill="#FFFFFF"
         >
           Rendering Time (ms)
         </Text>
         <br />
-        <Text x={xMax / 2 + 15} y={yMax + 70} fontSize={12} fill='#FFFFFF'>
+        <Text x={xMax / 2 + 15} y={yMax + 70} fontSize={12} fill="#FFFFFF">
           Snapshot ID
         </Text>
       </svg>
@@ -257,10 +254,15 @@ const BarGraph = (props) => {
         >
           <div style={{ color: colorScale(tooltipData.key) }}>
             {' '}
-            <strong>{tooltipData.key}</strong>{' '}
+            <strong>{tooltipData.key}</strong>
+            {' '}
           </div>
           <div>{data.componentData[tooltipData.key].stateType}</div>
-          <div> {formatRenderTime(tooltipData.bar.data[tooltipData.key])} </div>
+          <div>
+            {' '}
+            {formatRenderTime(tooltipData.bar.data[tooltipData.key])}
+            {' '}
+          </div>
           <div>
             {' '}
             <small>