fixed tutorial for map tab

Author: garrettlchow

src/app/components/Buttons/Tutorial.tsx

@@ -7,10 +7,8 @@ import { Component } from 'react';
 import 'intro.js/introjs.css';
 import { TutorialProps, TutorialState, StepsObj } from '../../FrontendTypes';
 import { Button } from '@mui/material';
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 const { Steps } = require('intro.js-react'); //Must be required in. This enables compatibility with TS. If imported in, throws ts error of not rendering steps as a class component correctly. The package 'intro.js-react' is small React wrapper around Intro.js. The wrapper provides support for both steps and hints. https://introjs.com/docs/
 import { setCurrentTabInApp, tutorialSaveSeriesToggle } from '../../slices/mainSlice';
-import { useDispatch, useSelector } from 'react-redux';
 import { HelpCircle } from 'lucide-react';
 
 /*
@@ -105,7 +103,7 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
           },
           {
             title: 'Toggle Record Button',
-            element: '#recordBtn',
+            element: '.record-button-container',
             intro:
               '<ul><li>Toggle record button to pause state changes on target application</li></ul>',
             position: 'right',
@@ -195,31 +193,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: '#seriesname',
-            intro: '<ul><li>We can now give our series a name or leave it at the default</li></ul>',
-            position: 'top',
-          },
-          {
-            title: 'Saving Series & Actions',
-            element: '.actionname',
-            intro:
-              '<ul><li>If we wish to save a specific action to compare later, give it a name here</li></ul>',
-            position: 'top',
-          },
-
-          {
-            title: 'Comparison Tab',
-            element: '#router-link-performance-comparison',
-            intro: "<ul><li>Now let's head over to the comparison tab</li></ul>",
-            position: 'top',
-          },
-          {
-            title: 'Comparing Series',
-            intro: '<ul><li>Here we can select a saved series or action to compare</li></ul>',
-            position: 'top',
-          },
         ];
         break;
       case 'webmetrics':

src/app/components/StateRoute/StateRoute.tsx

@@ -76,7 +76,7 @@ const StateRoute = (props: StateRouteProps) => {
           </NavLink>
           <NavLink
             className={(navData) =>
-              navData.isActive ? 'is-active router-link map-tab' : 'router-link map-tab'
+              navData.isActive ? 'is-active router-link performance' : 'router-link performance-tab'
             }
             to='/performance'
           >

src/app/styles/components/_buttons.scss

@@ -171,7 +171,6 @@
   display: flex;
   align-items: center;
   padding: 4px 16px;
-  width: 100%;
   background: transparent;
   gap: 8px;
 }