Merge pull request #7 from oslabs-beta/brian/feature

Updated LinkControls.tsx, PerformanceVisx.tsx, RenderingFrequency.tsx, StateRoute.tsx, Tutorial.tsx.

Author: llam722

src/app/components/LinkControls.tsx

@@ -1,6 +1,4 @@
-import { List } from '@material-ui/core';
 import React from 'react';
-import snapshots from './snapshots';
 // Font size of the Controls label and Dropdowns
 const controlStyles = {
   fontSize: '12px',
@@ -53,10 +51,8 @@ const collectNodes = node => {
 
 export default function LinkControls({
   layout,
-  orientation,
   linkType,
   stepPercent,
-  selectedNode,
   setLayout,
   setOrientation,
   setLinkType,
@@ -71,7 +67,7 @@ export default function LinkControls({
 
       {/* Controls for the layout selection */}
       <label>Layout:</label>
-      &nbsp;
+      &nbsp; {/*This is a non-breaking space - Prevents an automatic line break at this position */}
       <select
         onClick={e => e.stopPropagation()}
         onChange={e => setLayout(e.target.value)}
@@ -89,7 +85,6 @@ export default function LinkControls({
       <select
         onClick={e => e.stopPropagation()}
         onChange={e => setOrientation(e.target.value)}
-        // value={orientation}/
         disabled={layout === 'polar'}
         style={dropDownStyle}
       >
@@ -113,7 +108,7 @@ export default function LinkControls({
 
       {/* Controls for the select selections. */}
       <label> Select:</label>
-      &nbsp; {/*This is a non-breaking space - Prevents an automatic line break at this position */}
+      &nbsp; 
       <input id='selectInput' list='nodeOptions' type='text' name="nodeOptions"
         onChange={e => setSelectedNode(e.target.value)}
         style={dropDownStyle}

src/app/components/PerformanceVisx.tsx

@@ -16,7 +16,7 @@ import BarGraphComparisonActions from './BarGraphComparisonActions';
 import { useStoreContext } from '../store';
 import { setCurrentTabInApp } from '../actions/actions';
 
-// typescript for PROPS from StateRoute.tsx
+
 interface BarStackProps {
   width: number;
   height: number;
@@ -87,7 +87,7 @@ const traverse = (snapshot, data, snapshots, currTotalRender = 0) => {
   if (!snapshot.children[0]) return;
 
   // loop through snapshots
-  snapshot.children.forEach((child, idx) => {
+  snapshot.children.forEach((child, idx: number) => {
     const componentName = child.name + -[idx + 1];
 
     // Get component Rendering Time
@@ -152,7 +152,7 @@ const getPerfMetrics = (snapshots, snapshotsIds): {} => {
     componentData: {},
     maxTotalRender: 0,
   };
-  snapshots.forEach((snapshot, i) => {
+  snapshots.forEach((snapshot, i: number) => {
     perfData.barStack.push({ snapshotId: snapshotsIds[i], route: snapshot.route.url });
     traverse(snapshot, perfData, snapshots);
   });

src/app/components/RenderingFrequency.tsx

@@ -2,7 +2,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable react/prop-types */
 import React, { useState, useEffect } from 'react';
-import { render } from 'react-dom';
 import { onHover, onHoverExit, setCurrentTabInApp } from '../actions/actions';
 import { useStoreContext } from '../store';
 
@@ -35,13 +34,12 @@ const RenderingFrequency = props => {
   );
 };
 
-const ComponentCard = props => {
+const ComponentCard = (props): JSX.Element => {
   const {
     componentName,
     stateType,
     averageRenderTime,
     renderFrequency,
-    rtid,
     information,
   } = props;
   const [{ tabs, currentTab }, dispatch] = useStoreContext();

src/app/components/StateRoute.tsx

@@ -5,13 +5,12 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable max-len */
 /* eslint-disable object-curly-newline */
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import {
   MemoryRouter as Router,
   Route,
   NavLink,
   Switch,
-  useLocation,
 } from 'react-router-dom';
 import { ParentSize } from '@visx/responsive';
 import Tree from './Tree';
@@ -24,7 +23,7 @@ import WebMetrics from './WebMetrics';
 const History = require('./History').default;
 
 const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
-// eslint-disable-next-line react/prop-types
+
 
 export interface StateRouteProps {
   snapshot: {
@@ -79,7 +78,6 @@ const StateRoute = (props: StateRouteProps) => {
               sliderIndex={sliderIndex}
               viewIndex={viewIndex}
               currLocation={currLocation}
-              // added snapshots 11/4 Rob
               snapshots={snapshots}
             />
           )}
@@ -99,8 +97,8 @@ const StateRoute = (props: StateRouteProps) => {
     return <div className="noState">{NO_STATE_MSG}</div>;
   };
   const renderWebMetrics = () => {
-    let LCPColor; let FIDColor; let FCPColor; let
-      TTFBColor;
+    let LCPColor: String; let FIDColor: String; let FCPColor: String; let
+      TTFBColor: String;
 
     if (webMetrics.LCP <= 2000) LCPColor = '#0bce6b';
     if (webMetrics.LCP > 2000 && webMetrics.LCP < 4000) LCPColor = '#E56543';

src/app/components/Tutorial.tsx

@@ -6,6 +6,7 @@ import 'intro.js/introjs.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faQuestion } from '@fortawesome/free-solid-svg-icons';
 import { tutorialSaveSeriesToggle, setCurrentTabInApp } from '../actions/actions';
+import { element } from 'prop-types';
 
 // This is the tutorial displayed when the "How to use" button is clicked
 // This needs to be a class component to be compatible with updateStepElement from intro.js
@@ -21,7 +22,7 @@ class Tutorial extends Component {
     const { currentTabInApp, dispatch } = this.props;
 
     // This updates the steps so that they can target dynamically rendered elements
-    const onChangeHandler = currentStepIndex => {
+    const onChangeHandler = (currentStepIndex: Number) => {
       if (currentTabInApp === 'performance' && currentStepIndex === 1) {
         dispatch(tutorialSaveSeriesToggle('inputBoxOpen'));
         this.steps.updateStepElement(currentStepIndex);
@@ -55,8 +56,17 @@ class Tutorial extends Component {
       }
       this.setState({ stepsEnabled: true });
     };
-    let steps = [];
 
+    interface stepsObj {
+      title: String,
+      element?: String,
+      intro: String,
+      position: String,
+    }
+
+    let steps: stepsObj[] = [];
+
+  
     switch (currentTabInApp) {
       case 'map':
         steps = [{
@@ -200,6 +210,9 @@ class Tutorial extends Component {
         break;
     }
 
+   
+
+
     return (
       <>
         <Steps