Tutorial completed for Performance Tab. Placeholder tutorials on history, web metrics, and tree tabs

Author: bmichare

src/app/actions/actions.ts

@@ -118,9 +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/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,
@@ -137,7 +137,7 @@ const BarGraph = props => {
     dispatch(save(toStorage))
   }
 
-  const textbox = tabs[currentTab].seriesSavedStatus === 'inputBoxOpen' ? <input type="text" id="seriesname" value={seriesNameInput} onChange={e => setSeriesNameInput(e.target.value)} /> : null;
+  const textbox = tabs[currentTab].seriesSavedStatus === 'inputBoxOpen' ? <input type="text" className="seriesNameInput" value={seriesNameInput} onChange={e => setSeriesNameInput(e.target.value)} /> : null;
   return (
     <div className="bargraph-position">
       {/* <input type="text" id ="seriesname" placeholder="Series Name" /> */}

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/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,20 +1,20 @@
 /* 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 { useEffect } from 'react';
 import { setCurrentTabInApp } from '../actions/actions';
 /* NOTES
 Issue - Not fully compatible with recoil apps. Reference the recoil-todo-test.
@@ -174,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();
@@ -243,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">
@@ -257,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"
@@ -273,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 => {

src/app/components/Tree.tsx

@@ -1,7 +1,10 @@
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import JSONTree from 'react-json-tree';
 
+import { setCurrentTabInApp } from '../actions/actions';
+import { useStoreContext } from '../store';
+
 const colors = {
   scheme: 'paraiso',
   author: 'jan t. sott',
@@ -47,6 +50,11 @@ interface TreeProps {
 
 const Tree = (props: TreeProps) => {
   const { snapshot } = props;
+  const [ store, dispatch] = useStoreContext();
+
+  useEffect(() => {
+    dispatch(setCurrentTabInApp('history'));
+  }, []);
 
   return (
     <>