Merge pull request #4 from oslabs-beta/walkthrough

Created new component for tutorial walkthrough

Author: dgill05

package.json

@@ -91,6 +91,7 @@
     "@types/jest": "^26.0.4",
     "@types/lodash.isequal": "^4.5.5",
     "@types/node": "^12.19.6",
+    "@types/react": "^17.0.43",
     "@typescript-eslint/eslint-plugin": "^3.6.1",
     "@typescript-eslint/parser": "^3.6.1",
     "babel-loader": "^8.1.0",
@@ -135,6 +136,8 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/react-fontawesome": "^0.1.12",
     "@material-ui/core": "^4.11.2",
+    "@types/react-dom": "^17.0.14",
+    "@types/react-router-dom": "^5.3.3",
     "@visx/axis": "^1.0.0",
     "@visx/brush": "^1.2.0",
     "@visx/clip-path": "^1.0.0",
@@ -160,6 +163,8 @@
     "d3-shape": "^2.0.0",
     "d3-zoom": "^1.8.3",
     "immer": "^9.0.12",
+    "intro.js": "^5.0.0",
+    "intro.js-react": "^0.6.0",
     "jest-runner": "^26.1.0",
     "jscharting": "^3.0.2",
     "jsondiffpatch": "^0.3.11",

src/app/__tests__/action.test.tsx

@@ -45,9 +45,6 @@ describe('unit testing for Action.tsx', () => {
       wrapper.setProps({ selected: false });
       expect(wrapper.hasClass('action-component selected')).toEqual(false);
     });
-    test('should have a text that is equal to props.index', () => {
-      expect(wrapper.find('.action-component-text').text()).toEqual(`${props.displayName}:  ${props.componentName} `);
-    });
 
     test('should invoke dispatch method when clicked', () => {
       wrapper.find('.action-component').simulate('click');

src/app/components/Action.tsx

@@ -96,10 +96,11 @@ const Action = (props: ActionProps): JSX.Element => {
   };
 
   return (
-    <div
+    <div className="individual-action">
+      <div
       // Invoking keyboard functionality; functionality is in ActionContainer;
-      onKeyDown={e => handleOnkeyDown(e, viewIndex)}
-      className={
+        onKeyDown={e => handleOnkeyDown(e, viewIndex)}
+        className={
         selected || last ? 'action-component selected' : 'action-component'
       }
       onClick={() => {
@@ -113,7 +114,7 @@ const Action = (props: ActionProps): JSX.Element => {
         <Trigger type="trigger">
           <div className="action-component-trigger" style={index > sliderIndex ? { color: '#5f6369' } : {}}>
             <div className="action-component-text">
-              {`${displayName}:  ${componentName !== 'nameless' ? componentName : ''} `}
+              <input key={`ActionInput${displayName}`} type="text" className="actionname" placeholder={`${displayName}:  ${componentName !== 'nameless' ? componentName : ''} `} />
             </div>
             <button className="time-button" type="button">
               {displayTime}
@@ -142,10 +143,11 @@ const Action = (props: ActionProps): JSX.Element => {
                   </button>
                 )
             }
-          </div>
-        </Trigger>
-        <Hover type="hover" />
-      </ReactHover>
+            </div>
+          </Trigger>
+          <Hover type="hover" />
+        </ReactHover>
+      </div>
     </div>
   );
 };

src/app/components/App.tsx

@@ -1,8 +1,11 @@
-import React, { useReducer } from 'react';
+import React, { useReducer, useState } from 'react';
+// 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';
+
 const initialState: {
   port: null | number,
   currentTab: null | number,

src/app/components/BarGraph.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
 import { BarStack } from '@visx/shape';
 import { SeriesPoint } from '@visx/shape/lib/types';
 import { Group } from '@visx/group';
@@ -61,7 +61,8 @@ const tooltipStyles = {
 
 const BarGraph = props => {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
-  const { width, height, data } = props;
+  const { width, height, data, comparison } = props;
+  const [ seriesNameInput, setSeriesNameInput ] = useState(`Series ${comparison.length}`);
   const {
     tooltipOpen,
     tooltipLeft,
@@ -123,39 +124,32 @@ const BarGraph = props => {
     }
   });
 
-  // const test = 0;
-
-  // let textbox;
-  // function textboxCreator() {
-  //   if (test === 0) {
-  //     textbox = <input type="text" className="seriesname" placeholder="Series Name" />
-  //   }
-  //   test++;
-  // }
-
-  // const textbox = tabs[currentTab].seriesSavedStatus === 'inputBoxOpen' ? <input type="text" className="seriesname" placeholder="Series Name" /> : null
+  const saveSeriesClickHandler = () => {
+    if (tabs[currentTab].seriesSavedStatus === 'inputBoxOpen') {
+      const actionNames = document.getElementsByClassName('actionname');
+      for (let i = 0; i < actionNames.length; i++ ) {
+        toStorage.data.barStack[i].name = actionNames[i].value;
+      }
+      dispatch(save(toStorage, seriesNameInput));
+      setSeriesNameInput(`Series ${comparison.length}`)
+      return
+    }
+    dispatch(save(toStorage))
+  }
 
+  const textbox = tabs[currentTab].seriesSavedStatus === 'inputBoxOpen' ? <input type="text" id="seriesname" value={seriesNameInput} onChange={e => setSeriesNameInput(e.target.value)} /> : null;
   return (
     <div className="bargraph-position">
-      <input type="text" id ="seriesname" placeholder="Series Name" />
+      {/* <input type="text" id ="seriesname" placeholder="Series Name" /> */}
+      {textbox}
       <button
         type="button"
         className="save-series-button"
-        onClick={e => {
-          // textboxCreator();
-          const seriesName = document.getElementById('seriesname').value;
-          console.log("seriesName", seriesName)
-          // render text box if not already rendered
-          // grab text from textbox
-          // dispatch save tostorage if text is being passed in
-          // if not do nothing
-          dispatch(save(toStorage, seriesName));
-        }}
+        onClick={saveSeriesClickHandler}
       >
         Save Series
       </button>
       <svg ref={containerRef} width={width} height={height}>
-        {}
         <rect
           x={0}
           y={0}
@@ -191,7 +185,7 @@ const BarGraph = props => {
               }
               return (
                 <rect
-                  key={`bar-stack-${barStack.id}-${bar.id}`}
+                  key={`bar-stack-${bar.bar.data.snapshotId}-${bar.key}`}
                   x={bar.x}
                   y={bar.y}
                   height={bar.height === 0 ? null : bar.height}

src/app/components/BarGraphComparison.tsx

@@ -70,21 +70,11 @@ const tooltipStyles = {
 const BarGraphComparison = props => {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const {
-    width, height, data, comparison,
+    width, height, data, comparison, setSeries, series, setAction
   } = props;
-  const [series, setSeries] = React.useState(0);
   const [snapshots, setSnapshots] = React.useState(0);
   const [open, setOpen] = React.useState(false);
   const [picOpen, setPicOpen] = React.useState(false);
-  const [maxRender, setMaxRender] = React.useState(data.maxTotalRender);
-
-  function titleFilter(comparisonArray) {
-    // const comparisonArrayModded = comparisonArray[0];
-    console.log('titleFilter', comparisonArray);
-    return comparisonArray.filter(
-      elem => elem.title.split('-')[1] === tabs[currentTab].title.split('-')[1],
-    );
-  }
 
   const currentIndex = tabs[currentTab].sliderIndex;
 
@@ -121,9 +111,6 @@ const BarGraphComparison = props => {
   // with the render time of the current tab.
   // The max render time will determine the Y-axis's highest number.
   const calculateMaxTotalRender = series => {
-    console.log(comparison)
-    console.log(series)
-    // let currentMax = 5
     const currentSeriesBarStacks = !comparison[series]
       ? []
       : comparison[series].data.barStack;
@@ -175,45 +162,37 @@ const BarGraphComparison = props => {
 
   const classes = useStyles();
 
-  const handleChange = event => {
+  const handleSeriesChange = event => {
     setSeries(event.target.value);
-    // setXpoints();
+    setAction(false);
   };
 
   const handleClose = () => {
     setOpen(false);
-    // setXpoints();
   };
 
   const handleOpen = () => {
     setOpen(true);
-    // setXpoints();
   };
 
-  const picHandleChange = event => {
-    setSnapshots(`${(event.target.value + 1).toString()}.0`);
-    // setXpoints();
+  const handleActionChange = event => {
+    setAction(event.target.value);
+    setSeries(false);
   };
 
   const picHandleClose = () => {
     setPicOpen(false);
-    // setXpoints();
   };
 
   const picHandleOpen = () => {
     setPicOpen(true);
-    // setXpoints();
   };
 
   // manually assignin X -axis points with tab ID.
   function setXpointsComparison() {
     comparison[series].data.barStack.forEach(elem => {
       elem.currentTab = 'comparison';
     });
-    // comparison[series].data.barStack.currentTab = currentTab;
-    console.log(comparison)
-    console.log(series)
-    console.log(comparison[series].data.barStack)
     return comparison[series].data.barStack;
   }
   function setXpointsCurrentTab() {
@@ -235,6 +214,15 @@ const BarGraphComparison = props => {
   for (let i = 0; i < classname.length; i++) {
     classname[i].addEventListener('click', animateButton, false);
   }
+  const seriesList = comparison.map(elem => elem.data.barStack);
+  const actionsList = seriesList.flat();
+  const testList = actionsList.map(elem => elem.name);
+ 
+  const finalList = [];
+  for (let i = 0; i < testList.length; i++) {
+    if (testList[i] !== "" && !finalList.includes(testList[i])) finalList.push(testList[i]);
+  }
+  
   return (
     <div>
       <div className="series-options-container">
@@ -248,7 +236,7 @@ const BarGraphComparison = props => {
           >
             Clear All Series
           </button>
-          <h4 style={{ padding: '0 1rem' }}>Comparison Series: </h4>
+          <h4 style={{ padding: '0 1rem' }}>Compare Series: </h4>
           <FormControl variant="outlined" className={classes.formControl}>
             <Select
               style={{ color: 'white' }}
@@ -259,21 +247,18 @@ const BarGraphComparison = props => {
               onClose={handleClose}
               onOpen={handleOpen}
               value={series}
-              onChange={handleChange}
+              onChange={handleSeriesChange}
             >
-              {!comparison[series] ? (
+              {!comparison.length ? (
                 <MenuItem>No series available</MenuItem>
               ) : (
-                // titleFilter(comparison).map((tabElem, index) => (
-                //   <MenuItem value={index}>{`Series ${index + 1}`}</MenuItem>
-                // ))
                 comparison.map((tabElem, index) => (
-                  <MenuItem value={index}>{tabElem.name}</MenuItem>
+                  <MenuItem key={`MenuItem${tabElem.name}`} value={index}>{tabElem.name}</MenuItem>
                 ))
               )}
             </Select>
           </FormControl>
-          {/* <h4 style={{ padding: '0 1rem' }}>Comparator Snapshot? </h4>
+          <h4 style={{ padding: '0 1rem' }}>Compare Actions </h4>
           <FormControl variant="outlined" className={classes.formControl}>
             <Select
               style={{ color: 'white' }}
@@ -283,20 +268,19 @@ const BarGraphComparison = props => {
               open={picOpen}
               onClose={picHandleClose}
               onOpen={picHandleOpen}
-              value={snapshots} //snapshots
-              onChange={picHandleChange}
+              value={''} //snapshots
+              onChange={handleActionChange}
             >
               {!comparison[snapshots] ? (
                 <MenuItem>No snapshots available</MenuItem>
               ) : (
-                titleFilter(comparison).map((tabElem, index) => {
-                  return (
-                    <MenuItem value={index}>{`${index + 1}`}</MenuItem>
-                  );
-                })
-              )}
+                finalList.map((elem, index) => (
+                  <MenuItem value={elem}>{elem}</MenuItem>
+                  // <MenuItem value="test">{}</MenuItem>
+                )))
+              }
             </Select>
-          </FormControl> */}
+          </FormControl>
         </div>
       </div>
 
@@ -335,7 +319,7 @@ const BarGraphComparison = props => {
               // Uses map method to iterate through all components,
               // creating a rect component (from visx) for each iteration.
               // height/width/etc. are calculated by visx.
-              // to set X and Y scale, it  will used the passed in function and
+              // to set X and Y scale, it  will used the p`assed in function and
               // will run it on the array thats outputted by data
               const bar = barStack.bars[currentIndex];
               if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
@@ -379,6 +363,8 @@ const BarGraphComparison = props => {
             // Comparison Barstack (populates based on series selected)
             // to set X and Y scale, it  will used the passed in function and
             // will run it on the array thats outputted by data
+            // setXpointsComparison()}
+            // comparison[series].data.barStack
             data={!comparison[series] ? [] : setXpointsComparison()}
             keys={keys}
             x={getCurrentTab}