Merge branch 'dev' into click-tab/ragad

Author: ragad-mohammed

src/app/components/Buttons/Tutorial.tsx

@@ -195,12 +195,6 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
               '<ul><li>Here we can analyze the render times of our app</li> <li>This is the current series of state changes within our app</li> <li>Mouse over the bargraph elements for details on each specific component</li></ul>',
             position: 'top',
           },
-          {
-            title: 'Saving Series & Actions',
-            element: '.save-series-button',
-            intro: '<ul><li>Click here to save your current series data</li></ul>',
-            position: 'top',
-          },
           {
             title: 'Saving Series & Actions',
             element: '#seriesname',
@@ -214,13 +208,7 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
               '<ul><li>If we wish to save a specific action to compare later, give it a name here</li></ul>',
             position: 'top',
           },
-          {
-            title: 'Saving Series & Actions',
-            element: '.save-series-button',
-            intro:
-              '<ul><li>Press save series again.</li> <li>Your series and actions are now saved!</li></ul>',
-            position: 'top',
-          },
+
           {
             title: 'Comparison Tab',
             element: '#router-link-performance-comparison',

src/app/components/DiffRoute/Diff.tsx

@@ -77,7 +77,7 @@ export default function AxTree(props) {
 
   const [orientation, setOrientation] = useState('horizontal');
   const [linkType, setLinkType] = useState('diagonal');
-  const [stepPercent, setStepPercent] = useState(0.5);
+  const [stepPercent, setStepPercent] = useState(0.0);
 
   const innerWidth: number = totalWidth - margin.left - margin.right;
   const innerHeight: number = totalHeight - margin.top - margin.bottom - 60;

src/app/components/DiffRoute/DiffRoute.tsx

@@ -58,8 +58,8 @@ export default function ComponentMap({
   currentSnapshot, // from 'tabs[currentTab].stateSnapshot object in 'MainContainer'
 }: LinkTypesProps): JSX.Element {
   const [orientation, setOrientation] = useState('vertical'); // We create a local state "orientation" and set it to a string 'vertical'.
-  const [linkType, setLinkType] = useState('diagonal'); // We create a local state "linkType" and set it to a string 'diagonal'.
-  const [stepPercent, setStepPercent] = useState(0.5); // We create a local state "stepPercent" and set it to a number '0.5'. This will be used to scale the Map component's link: Step to 50%
+  const [linkType, setLinkType] = useState('step'); // We create a local state "linkType" and set it to a string 'step'.
+  const [stepPercent, setStepPercent] = useState(0.0); // We create a local state "stepPercent" and set it to a number '0.0'. This will be used to scale the Map component's link: Step to 0%
   const [selectedNode, setSelectedNode] = useState('root'); // We create a local state "selectedNode" and set it to a string 'root'.
   const dispatch = useDispatch();
 
@@ -82,7 +82,6 @@ export default function ComponentMap({
     The default view sets the root nodes location either in the left middle *or top middle of the browser window relative to the size of the browser.
   */
 
-
   origin = { x: 0, y: 0 };
   if (orientation === 'vertical') {
     sizeWidth = innerWidth;
@@ -92,7 +91,7 @@ export default function ComponentMap({
     sizeWidth = innerHeight;
     sizeHeight = innerWidth;
   }
-//}
+  //}
   const {
     tooltipData, // value/data that tooltip may need to render
     tooltipLeft, // number used for tooltip positioning

src/app/components/StateRoute/AxMap/Ax.tsx

@@ -71,8 +71,8 @@ export default function LinkControls({
         onChange={(e) => setLinkType(e.target.value)}
         style={dropDownStyle}
       >
-        <option value='diagonal'>Diagonal</option>
         <option value='step'>Step</option>
+        <option value='diagonal'>Diagonal</option>
         <option value='line'>Line</option>
       </select>
       <label> Select:</label> {/* Controls for the select selections. */}

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -121,51 +121,9 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
     data,
   };
 
-  useEffect(() => {
-    // Animates the save series button.
-    const saveButtons = document.getElementsByClassName('save-series-button'); // finds the buttom in the DOM
-    for (let i = 0; i < saveButtons.length; i++) {
-      if (tabs[currentTab].seriesSavedStatus === 'saved') {
-        saveButtons[i].classList.add('animate');
-        saveButtons[i].innerHTML = 'Saved!';
-      } else {
-        saveButtons[i].innerHTML = 'Save Series';
-        saveButtons[i].classList.remove('animate');
-      }
-    }
-  });
-
-  const saveSeriesClickHandler = () => {
-    // function to save the currently selected series
-    if (tabs[currentTab].seriesSavedStatus === 'inputBoxOpen') {
-      const actionNames = document.getElementsByClassName('actionname');
-      for (let i = 0; i < actionNames.length; i += 1) {
-        toStorage.data.barStack[i].name = actionNames[i].value;
-      }
-      dispatch(save({ newSeries: toStorage, newSeriesName: seriesNameInput })); // saves the series under seriesName
-      setSeriesNameInput(`Series ${comparison.length}`); // sends a reducer that saves the series/toStorage object the user wants to chrome local storage
-      return;
-    }
-    //if for some reason, code doesn't hit in first conditional, we have error handling below to account it
-    dispatch(save({ newSeries: toStorage, newSeriesName: '' })); // or use a default value for newSeriesName
-  };
-
-  const textbox = // Need to change so textbox isn't empty before saving
-    tabs[currentTab].seriesSavedStatus === 'inputBoxOpen' ? (
-      <input
-        type='text'
-        id='seriesname'
-        placeholder='Enter Series Name'
-        onChange={(e) => setSeriesNameInput(e.target.value)}
-      />
-    ) : null;
   return (
     <div className='bargraph-position'>
       <div className='saveSeriesContainer'>
-        {textbox}
-        <button type='button' className='save-series-button' onClick={saveSeriesClickHandler}>
-          Save Series
-        </button>
         <form className='routesForm' id='routes-formcontrol'>
           <label id='routes-dropdown'>Select Route: </label>
           <select