Merge pull request #8 from oslabs-beta/PerfVisxTutorial

Performance tab tutorial complete, series name input box styling fixes

Author: bmichare

.eslintrc

@@ -12,7 +12,8 @@
     "import/extensions": "off",
     "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
     "react-hooks/exhaustive-deps": "warn", // Checks effect dependencies
-    "react/jsx-filename-extension": [0]
+    "react/jsx-filename-extension": [0],
+    "linebreak-style": "off"
   },
   "env": {
     "es6": true,

src/app/actions/actions.ts

@@ -118,4 +118,14 @@ export const onHoverExit = (rtid) => ({
 export const setCurrentLocation = (tabsObj) => ({
   type: types.SET_CURRENT_LOCATION,
   payload: tabsObj,
-})
+});
+
+export const setCurrentTabInApp = (currentTabInApp) => ({
+  type: types.SET_CURRENT_TAB_IN_APP,
+  payload: currentTabInApp,
+});
+
+export const tutorialSaveSeriesToggle = (toggleVal) => ({
+  type: types.TUTORIAL_SAVE_SERIES_TOGGLE,
+  payload: toggleVal,
+});

src/app/components/App.tsx

@@ -1,29 +1,44 @@
 import React, { useReducer, useState } from 'react';
+import {
+  MemoryRouter as Router,
+  Route,
+  NavLink,
+  Switch,
+  useLocation,
+} from 'react-router-dom';
 // import { Steps, Hints } from 'intro.js-react';
 import MainContainer from '../containers/MainContainer';
 import { StoreContext } from '../store';
 import mainReducer from '../reducers/mainReducer.js';
 
+
 // import 'intro.js/introjs.css';
 
+// currentTab is the current active tab within Google Chrome. This is used to decide what tab Reactime should be monitoring. This can be "locked"
+// currentTabInApp is the current active tab within Reactime (Map, Performance, History, etc). This is used to determine the proper tutorial to render when How To button is pressed.
+
 const initialState: {
   port: null | number,
   currentTab: null | number,
   currentTitle: null | string,
   split: null | boolean,
-  tabs: unknown; } = {
+  tabs: unknown,
+  currentTabInApp: null | string, } = {
     port: null,
     currentTab: null,
     currentTitle: 'No Target',
     split: false,
     tabs: {},
+    currentTabInApp: null,
   };
 
 function App(): JSX.Element {
   return (
-    <StoreContext.Provider value={useReducer(mainReducer, initialState)}>
-      <MainContainer />
-    </StoreContext.Provider>
+    <Router>
+      <StoreContext.Provider value={useReducer(mainReducer, initialState)}>
+        <MainContainer />
+      </StoreContext.Provider>
+    </Router>
   );
 }
 

src/app/components/BarGraph.tsx

@@ -62,7 +62,7 @@ const tooltipStyles = {
 const BarGraph = props => {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { width, height, data, comparison } = props;
-  const [seriesNameInput, setSeriesNameInput] = useState(`Series ${comparison.length}`);
+  const [ seriesNameInput, setSeriesNameInput ] = useState(`Series ${comparison.length + 1}`);
   const {
     tooltipOpen,
     tooltipLeft,

src/app/components/BarGraphComparison.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useEffect } from 'react';
 import { BarStack } from '@visx/shape';
 import { SeriesPoint } from '@visx/shape/lib/types';
 import { Group } from '@visx/group';
@@ -13,7 +13,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import Select from '@material-ui/core/Select';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
-import { onHover, onHoverExit, deleteSeries } from '../actions/actions';
+import { onHover, onHoverExit, deleteSeries, setCurrentTabInApp } from '../actions/actions';
 import { useStoreContext } from '../store';
 
 /* TYPESCRIPT */
@@ -75,6 +75,9 @@ const BarGraphComparison = props => {
   const [snapshots, setSnapshots] = React.useState(0);
   const [open, setOpen] = React.useState(false);
   const [picOpen, setPicOpen] = React.useState(false);
+  useEffect(() => {
+    dispatch(setCurrentTabInApp('performance-comparison'));
+  }, []);
 
   const currentIndex = tabs[currentTab].sliderIndex;
 
@@ -239,11 +242,10 @@ const BarGraphComparison = props => {
             Clear All Series
           </button>
           <h4 style={{ padding: '0 1rem' }}>Compare Series: </h4>
-          <FormControl variant="outlined" className={classes.formControl}>
+          <FormControl id="selectSeries" variant="outlined" className={classes.formControl}>
             <Select
               style={{ color: 'white' }}
               labelId="simple-select-outlined-label"
-              id="simple-select-outlined"
               className={classes.select}
               open={open}
               onClose={handleClose}

src/app/components/BarGraphComparisonActions.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useEffect } from 'react';
 import { BarStack } from '@visx/shape';
 import { SeriesPoint } from '@visx/shape/lib/types';
 import { Group } from '@visx/group';
@@ -13,7 +13,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import Select from '@material-ui/core/Select';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
-import { onHover, onHoverExit, deleteSeries } from '../actions/actions';
+import { onHover, onHoverExit, deleteSeries, setCurrentTabInApp } from '../actions/actions';
 import { useStoreContext } from '../store';
 
 /* TYPESCRIPT */
@@ -75,6 +75,9 @@ const BarGraphComparisonActions = props => {
   const [snapshots, setSnapshots] = React.useState(0);
   const [open, setOpen] = React.useState(false);
   const [picOpen, setPicOpen] = React.useState(false);
+  useEffect(() => {
+    dispatch(setCurrentTabInApp('performance-comparison'));
+  }, []);
 
   const {
     tooltipOpen,

src/app/components/ComponentMap.tsx

@@ -19,8 +19,9 @@ import {
 } from '@visx/tooltip';
 import LinkControls from './LinkControls';
 import getLinkComponent from './getLinkComponent';
-import { toggleExpanded } from '../actions/actions';
+import { toggleExpanded, setCurrentTabInApp } from '../actions/actions';
 import { useStoreContext } from '../store';
+import { useEffect } from 'react';
 
 const exclude = ['childExpirationTime', 'staticContext', '_debugSource', 'actualDuration', 'actualStartTime', 'treeBaseDuration', '_debugID', '_debugIsCurrentlyTiming', 'selfBaseDuration', 'expirationTime', 'effectTag', 'alternate', '_owner', '_store', 'get key', 'ref', '_self', '_source', 'firstBaseUpdate', 'updateQueue', 'lastBaseUpdate', 'shared', 'responders', 'pending', 'lanes', 'childLanes', 'effects', 'memoizedState', 'pendingProps', 'lastEffect', 'firstEffect', 'tag', 'baseState', 'baseQueue', 'dependencies', 'Consumer', 'context', '_currentRenderer', '_currentRenderer2', 'mode', 'flags', 'nextEffect', 'sibling', 'create', 'deps', 'next', 'destroy', 'parentSub', 'child', 'key', 'return', 'children', '$$typeof', '_threadCount', '_calculateChangedBits', '_currentValue', '_currentValue2', 'Provider', '_context', 'stateNode', 'elementType', 'type'];
 
@@ -74,6 +75,10 @@ export default function ComponentMap({
   const [selectedNode, setSelectedNode] = useState('root');
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
 
+  useEffect(() => {
+    dispatch(setCurrentTabInApp('map'))
+  }, []);
+
   // setting the margins for the Map to render in the tab window.
   const innerWidth = totalWidth - margin.left - margin.right;
   const innerHeight = totalHeight - margin.top - margin.bottom - 60;

src/app/components/History.tsx

@@ -5,7 +5,8 @@ import React, { useEffect } from 'react';
 import { diff, formatters } from 'jsondiffpatch';
 import * as d3 from 'd3';
 
-import { changeView, changeSlider } from '../actions/actions';
+import { changeView, changeSlider, setCurrentTabInApp } from '../actions/actions';
+import { useStoreContext } from '../store';
 
 const defaultMargin = {
   top: 30, left: 30, right: 55, bottom: 70,
@@ -23,6 +24,8 @@ function History(props: Record<string, unknown>): JSX.Element {
     currLocation,
     snapshots,
   } = props;
+  const [ store, dispatch] = useStoreContext();
+  
 
   const svgRef = React.useRef(null);
   const root = JSON.parse(JSON.stringify(hierarchy));
@@ -35,6 +38,10 @@ function History(props: Record<string, unknown>): JSX.Element {
     makeD3Tree();
   }, [root, currLocation]);
 
+  useEffect(() => {
+    dispatch(setCurrentTabInApp('history'));
+  }, []);
+
 
   function labelCurrentNode(d3root) {
     if (d3root.data.index === currLocation.index) {

src/app/components/PerformanceVisx.tsx

@@ -1,19 +1,21 @@
 /* eslint-disable guard-for-in */
 /* eslint-disable no-restricted-syntax */
 // @ts-nocheck
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   MemoryRouter as Router,
   Route,
   NavLink,
   Switch,
   useLocation,
+  Redirect,
 } from 'react-router-dom';
 import RenderingFrequency from './RenderingFrequency';
 import BarGraph from './BarGraph';
 import BarGraphComparison from './BarGraphComparison';
 import BarGraphComparisonActions from './BarGraphComparisonActions';
 import { useStoreContext } from '../store';
+import { setCurrentTabInApp } from '../actions/actions';
 /* 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
@@ -172,7 +174,7 @@ const getPerfMetrics = (snapshots, snapshotsIds): {} => {
 const PerformanceVisx = (props: BarStackProps) => {
   // hook used to dispatch onhover action in rect
   const { width, height, snapshots, hierarchy, } = props;
-  const [{ tabs, currentTab }, dispatch] = useStoreContext();
+  const [{ tabs, currentTab, currentTabInApp }, dispatch] = useStoreContext();
   const [detailsView, setDetailsView] = useState('barStack');
   const [comparisonView, setComparisonView] = useState('barStack');
   const [comparisonData, setComparisonData] = useState();
@@ -181,6 +183,10 @@ const PerformanceVisx = (props: BarStackProps) => {
   const [ series, setSeries ] = useState(true);
   const [ action, setAction ] = useState(false);
 
+  useEffect(() => {
+    dispatch(setCurrentTabInApp('performance'));
+  }, []);
+
   const getActions = () => {
     let seriesArr = localStorage.getItem('project')
     seriesArr = seriesArr === null ? [] : JSON.parse(seriesArr);
@@ -237,6 +243,14 @@ const PerformanceVisx = (props: BarStackProps) => {
     return <div className="noState">{NO_STATE_MSG}</div>;
   };
 
+  const renderForTutorial = () => {
+    console.log(currentTabInApp)
+    if (currentTabInApp === 'performance') return <Redirect to="/" />;
+    if (currentTabInApp === 'performance-comparison') return <Redirect to="/comparison" />;
+    
+    return null;
+  }
+
   return (
     <Router>
       <div className="performance-nav-bar-container">
@@ -251,6 +265,7 @@ const PerformanceVisx = (props: BarStackProps) => {
         </NavLink>
         <NavLink
           className="router-link-performance"
+          id="router-link-performance-comparison"
           // className="router-link"
           activeClassName="is-active"
           to="/comparison"
@@ -267,6 +282,8 @@ const PerformanceVisx = (props: BarStackProps) => {
         </NavLink>
       </div>
 
+      {renderForTutorial()}
+
       <Switch>
         <Route path="/comparison" render={renderComparisonBargraph} />
         <Route path="/componentdetails" render={renderComponentDetailsView} />

src/app/components/RenderingFrequency.tsx

@@ -1,13 +1,17 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable react/prop-types */
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { render } from 'react-dom';
-import { onHover, onHoverExit } from '../actions/actions';
+import { onHover, onHoverExit, setCurrentTabInApp } from '../actions/actions';
 import { useStoreContext } from '../store';
 
 const RenderingFrequency = props => {
   const perfData = props.data;
+  const [ store, dispatch] = useStoreContext();
+  useEffect(() => {
+    dispatch(setCurrentTabInApp('performance-comparison'));
+  }, []);
   return (
     <div>
       {Object.keys(perfData).map(componentName => {