Fixed merge conflicts between feature and main branch

Author: dgill05

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/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,
@@ -124,27 +125,23 @@ const BarGraph = props => {
   });
 
   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;
+    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
     }
-// displayName: ${componentName !== 'nameless' ? componentName :
-
-    
-    dispatch(save(toStorage, seriesName));
+    dispatch(save(toStorage))
   }
 
-  // const textbox = tabs[currentTab].seriesSavedStatus === 'inputBoxOpen' ? <input type="text" className="seriesname" placeholder="Series Name" /> : null
-
+  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">
-      <div className="tools-container">
-        <input type="text" id ="seriesname" placeholder="Series Name" />
-      </div>
+      {/* <input type="text" id ="seriesname" placeholder="Series Name" /> */}
+      {textbox}
       <button
         type="button"
         className="save-series-button"
@@ -153,7 +150,6 @@ const BarGraph = props => {
         Save Series
       </button>
       <svg ref={containerRef} width={width} height={height}>
-        {}
         <rect
           x={0}
           y={0}
@@ -189,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() {
@@ -237,14 +216,12 @@ const BarGraphComparison = props => {
   }
   const seriesList = comparison.map(elem => elem.data.barStack);
   const actionsList = seriesList.flat();
- const testList = actionsList.map(elem => elem.name);
+  const testList = actionsList.map(elem => elem.name);
 
   const finalList = [];
   for (let i = 0; i < testList.length; i++) {
-    if (testList[i] !== "") finalList.push(testList[i]);
+    if (testList[i] !== "" && !finalList.includes(testList[i])) finalList.push(testList[i]);
   }
-   console.log('Final List', finalList)
-  // )
 
   return (
     <div>
@@ -270,16 +247,13 @@ 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>
@@ -294,16 +268,16 @@ 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>
               ) : (
-                // finalList.map((elem, index) => (
-                  // <MenuItem value={index}>{elem}</MenuItem>
-                  <MenuItem value="test">Testing</MenuItem>
-                )
+                finalList.map((elem, index) => (
+                  <MenuItem value={elem}>{elem}</MenuItem>
+                  // <MenuItem value="test">{}</MenuItem>
+                )))
               }
             </Select>
           </FormControl>