Merge branch 'dev' into axMap-update

Author: ragad-mohammed

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':