Added tutorial, action comparison functionality, ability to name actions & series, component details also now no longer crashing app

Author: bmichare

src/app/components/BarGraphComparison.tsx

@@ -163,6 +163,7 @@ const BarGraphComparison = props => {
   const classes = useStyles();
 
   const handleSeriesChange = event => {
+    if (!event) return
     setSeries(event.target.value);
     setAction(false);
   };
@@ -176,6 +177,7 @@ const BarGraphComparison = props => {
   };
 
   const handleActionChange = event => {
+    if(!event.target.value) return
     setAction(event.target.value);
     setSeries(false);
   };

src/app/components/BarGraphComparisonActions.tsx

@@ -156,6 +156,7 @@ const BarGraphComparisonActions = props => {
   const classes = useStyles();
 
   const handleSeriesChange = event => {
+    if (!event) return
     setSeries(event.target.value);
     setAction(false);
     // setXpoints();
@@ -172,6 +173,7 @@ const BarGraphComparisonActions = props => {
   };
 
   const handleActionChange = event => {
+    if (!event) return
     setAction(event.target.value);
     setSeries(false);
     // setXpoints();
@@ -217,6 +219,8 @@ const BarGraphComparisonActions = props => {
           <button
             className="delete-button"
             onClick={e => {
+              setAction(false);
+              setSeries(true);
               dispatch(deleteSeries());
             }}
           >

src/app/components/PerformanceVisx.tsx

@@ -1,36 +1,19 @@
 /* eslint-disable guard-for-in */
 /* eslint-disable no-restricted-syntax */
 // @ts-nocheck
-<<<<<<< HEAD
-import React, { useState, useEffect } from 'react';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import { ParentSize } from '@visx/responsive';
-=======
 import React, { useState } from 'react';
->>>>>>> Reactime13.0
 import {
   MemoryRouter as Router,
   Route,
   NavLink,
   Switch,
   useLocation,
 } from 'react-router-dom';
-<<<<<<< HEAD
-import { Component } from 'react';
-import { render } from 'react-dom';
-import { Component } from 'react';
-=======
->>>>>>> Reactime13.0
 import RenderingFrequency from './RenderingFrequency';
 import BarGraph from './BarGraph';
 import BarGraphComparison from './BarGraphComparison';
 import BarGraphComparisonActions from './BarGraphComparisonActions';
 import { useStoreContext } from '../store';
-<<<<<<< HEAD
-// import snapshots from './snapshots';
-=======
-
->>>>>>> Reactime13.0
 /* NOTES
 Issue - Not fully compatible with recoil apps. Reference the recoil-todo-test.
 Barstacks display inconsistently...however, almost always displays upon initial test app load or
@@ -97,11 +80,6 @@ const collectNodes = (snaps, componentName) => {
       }
     }
   }
-<<<<<<< HEAD
-  // console.log('componentsResult looks like: ', componentsResult);
-  return componentsResult;
-};
-=======
 
   const finalResults = componentsResult.map((e, index) => {
     const name = Object.keys(e)[0];
@@ -111,7 +89,6 @@ const collectNodes = (snaps, componentName) => {
   return finalResults;
 };
 
->>>>>>> Reactime13.0
 /* DATA HANDLING HELPER FUNCTIONS */
 const traverse = (snapshot, data, snapshots, currTotalRender = 0) => {
   if (!snapshot.children[0]) return;
@@ -159,14 +136,7 @@ const traverse = (snapshot, data, snapshots, currTotalRender = 0) => {
 
 // Retrieve snapshot series data from Chrome's local storage.
 const allStorage = () => {
-<<<<<<< HEAD
-  // const values = [];
-  // const keys = Object.keys(localStorage);
-  let values = localStorage.getItem('project');
-  // values === null ? values = [] : values = JSON.parse(values) ;
-=======
   let values = localStorage.getItem('project')
->>>>>>> Reactime13.0
   values = values === null ? [] : JSON.parse(values);
   return values;
 };
@@ -201,14 +171,7 @@ const getPerfMetrics = (snapshots, snapshotsIds): {} => {
 /* EXPORT COMPONENT */
 const PerformanceVisx = (props: BarStackProps) => {
   // hook used to dispatch onhover action in rect
-<<<<<<< HEAD
-
-  const {
-    width, height, snapshots, hierarchy,
-  } = props;
-=======
   const { width, height, snapshots, hierarchy, } = props;
->>>>>>> Reactime13.0
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const [detailsView, setDetailsView] = useState('barStack');
   const [comparisonView, setComparisonView] = useState('barStack');

src/app/styles/components/_performanceVisx.scss

@@ -18,3 +18,7 @@
 .MuiTypography-body1 {
 	font-size: 1em !important;
 	}
+
+#seriesname {
+	background-color: white;
+}