able to pull actions to compare in performance visx, need to fix rendering frequency

Author: bmichare

src/app/components/Action.tsx

@@ -113,7 +113,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}

src/app/components/BarGraph.tsx

@@ -123,15 +123,20 @@ const BarGraph = props => {
     }
   });
 
-  // const test = 0;
+  const saveSeriesClickHandler = () => {
+    const seriesName = document.getElementById('seriesname').value;
+    const actionNames = document.getElementsByClassName('actionname');
+    console.log("action names", actionNames);
+    // const testname = document.getElementsByClassName('actionname').value
+    // console.log(testname)
+    for (let i = 0; i < actionNames.length; i++ ) {
+      toStorage.data.barStack[i].name = actionNames[i].value;
+    }
+// displayName: ${componentName !== 'nameless' ? componentName :
 
-  // let textbox;
-  // function textboxCreator() {
-  //   if (test === 0) {
-  //     textbox = <input type="text" className="seriesname" placeholder="Series Name" />
-  //   }
-  //   test++;
-  // }
+    
+    dispatch(save(toStorage, seriesName));
+  }
 
   // const textbox = tabs[currentTab].seriesSavedStatus === 'inputBoxOpen' ? <input type="text" className="seriesname" placeholder="Series Name" /> : null
 
@@ -141,16 +146,7 @@ const BarGraph = props => {
       <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>

src/app/components/BarGraphComparison.tsx

@@ -235,6 +235,17 @@ 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.push(testList[i]);
+  }
+   console.log('Final List', finalList)
+  // )
+  
   return (
     <div>
       <div className="series-options-container">
@@ -248,7 +259,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' }}
@@ -273,7 +284,7 @@ const BarGraphComparison = props => {
               )}
             </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' }}
@@ -289,14 +300,13 @@ const BarGraphComparison = props => {
               {!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={index}>{elem}</MenuItem>
+                  <MenuItem value="test">Testing</MenuItem>
+                )
+              }
             </Select>
-          </FormControl> */}
+          </FormControl>
         </div>
       </div>
 
@@ -335,7 +345,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 +389,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}