Merge branch 'dev' into feature/garrett

Author: garrettlchow

docs/assets/style.css

@@ -1267,6 +1267,7 @@ img {
     border: 0.25rem solid var(--color-icon-background);
 }
 
+
 /* mobile */
 @media (max-width: 769px) {
     .tsd-widget.options,

docs/classes/app_components_Buttons_Tutorial.default.html

@@ -10,13 +10,13 @@ module.exports = {
     'www',
     './src/backend/__tests__/ignore',
     './src/app/__tests__enzyme/ignore',
-    './src/backend/__tests__/linkFiber.test.ts',
+    // './src/backend/__tests__/linkFiber.test.ts',
     './src/app/slices/mainSlice.ts',
   ],
   coveragePathIgnorePatterns: [
     '/src/backend/__tests__/ignore/',
     '/src/app/__tests__enzyme/ignore',
-    './src/backend/__tests__/linkFiber.test.ts',
+    // './src/backend/__tests__/linkFiber.test.ts',
     './src/app/slices/mainSlice.ts',
   ],
   transformIgnorePatterns: ['/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)'],

jest.config.js

@@ -192,7 +192,7 @@ describe('unit testing for ActionContainer', () => {
 });
 
 describe('Integration testing for ActionContainer.tsx', () => {
-  xtest('renders the ActionContainer component', () => {
+  test('renders the ActionContainer component', () => {
     //tests that the clearButton is rendered by testing if we can get "Clear"
     //need to set actionView to true to correctly render clearbutton
     render(

src/app/__tests__/ActionContainer.test.tsx

@@ -108,6 +108,12 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
               '<ul><li>Toggle record button to pause state changes on target application</li></ul>',
             position: 'right',
           },
+          {
+            title: 'Dropdown Menu',
+            element: '.css-13cymwt-control',
+            intro: '<ul><li>Dropdown Menu for picking between Timejump and UseContext</li></ul>',
+            position: 'right',
+          },
           {
             element: '.individual-action',
             title: 'Snapshot',
@@ -176,6 +182,12 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
               '<ul><li>This tab visually displays a JSON Tree containing the different components and states</li></ul>',
             position: 'bottom',
           },
+          {
+            title: 'Accessibility Tree',
+            element: '.accessibility-tab',
+            intro: '<ul><li>This tab visually displays a Accessibility Tree</li></ul>',
+            position: 'bottom',
+          },
           {
             title: 'Tutorial Complete',
             intro:
@@ -195,45 +207,56 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
           },
         ];
         break;
-      case 'webmetrics':
+      case 'AxTree':
         steps = [
           {
-            title: 'Webmetrics Tab',
-            element: '.web-metrics-container',
-            intro: 'This section will show 4 webmetrics for your page when it loads.',
-            position: 'top',
-          },
-          {
-            title: 'LCP',
-            element: document.querySelectorAll('.metric')[0],
+            title: 'Accessibility Tree',
+            element: '.display',
             intro:
-              '<strong>Largest Contentful Paint</strong><br/>The amount of time it takes for the largest image, video or text block within the viewport to be fully rendered and interactive.',
+              '<ul><li>Nodes from the accessibility tree have either a role <strong>role</strong> or <strong>internalRole</strong><i><b>Role</b></i> refers to ARIA roles, which indicate the purpose of the element to assistive technologies, like screen readers.All of the nodes rendered in this tree have a role of Role.<i><b>internalRole</b></i> refers to browser-specific roles <strong> Chrome </strong> for its own accessibility processing.<p> Each node is given a property labeled <strong>ignored</strong>. Nodes read by the screen reader have their ignored property evaluate to <strong>false</strong>.Nodes not read by the screen reader evaluate to <strong>true</strong>.</p><p> Nodes labeled as <strong>no name</strong> are visible to a screen reader, but were not given a name label.</p></li></ul>',
             position: 'top',
           },
-
+        ];
+        break;
+      case 'webmetrics':
+        steps = [
           {
-            title: 'FID',
-            element: document.querySelectorAll('.metric')[1],
-            intro:
-              '<strong>First Input Delay</strong><br/>A measurement of load responsiveness, the time from the first user interaction (for example, a click) to the browser responding to that interaction.',
+            title: 'Webmetrics Tab',
+            element: '.web-metrics-container',
+            intro: 'Additional info can be found be hovering over desired metrics',
             position: 'top',
           },
+          // {
+          //   title: 'LCP',
+          //   element: document.querySelectorAll('.metric')[0],
+          //   intro:
+          //     '<strong>Largest Contentful Paint</strong><br/>The amount of time it takes for the largest image, video or text block within the viewport to be fully rendered and interactive.',
+          //   position: 'top',
+          // },
 
-          {
-            title: 'FCP',
-            element: document.querySelectorAll('.metric')[2],
-            intro:
-              '<strong>First Contentful Paint</strong><br/>The amount of time it takes to render the first DOM element of any variety',
-            position: 'top',
-          },
+          // {
+          //   title: 'FID',
+          //   element: document.querySelectorAll('.metric')[1],
+          //   intro:
+          //     '<strong>First Input Delay</strong><br/>A measurement of load responsiveness, the time from the first user interaction (for example, a click) to the browser responding to that interaction.',
+          //   position: 'top',
+          // },
 
-          {
-            title: 'TTFB',
-            element: document.querySelectorAll('.metric')[3],
-            intro:
-              "<strong>Time To First Byte</strong><br/>The amount of time it takes for a user's browser to receive the first byte of page content from the server.",
-            position: 'top',
-          },
+          // {
+          //   title: 'FCP',
+          //   element: document.querySelectorAll('.metric')[2],
+          //   intro:
+          //     '<strong>First Contentful Paint</strong><br/>The amount of time it takes to render the first DOM element of any variety',
+          //   position: 'top',
+          // },
+
+          // {
+          //   title: 'TTFB',
+          //   element: document.querySelectorAll('.metric')[3],
+          //   intro:
+          //     "<strong>Time To First Byte</strong><br/>The amount of time it takes for a user's browser to receive the first byte of page content from the server.",
+          //   position: 'top',
+          // },
         ];
         break;
       case 'history':
@@ -247,7 +270,7 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
           },
           {
             title: 'Viewing History Snapshot',
-            element: document.querySelectorAll('.snapshotNode')[0],
+            element: '.node active',//document.querySelectorAll('.snapshotNode')[0]
             intro:
               'Each node will represent a snapshot in the page. <ul><li>A single snapshot will show as a node while multiple snapshots will be represented as a timeline.</li><li>Highlighting over one will show any state changes compared to the previous snapshot. </li><li>Clicking a node will set the snapshot as the current one.</li></ul>',
             position: 'top',

src/app/components/Buttons/Tutorial.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { Group } from '@visx/group';
 import { hierarchy, Tree } from '@visx/hierarchy';
@@ -9,7 +9,7 @@ import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import ToolTipDataDisplay from './ToolTipDataDisplay';
 import { ToolTipStyles } from '../../../FrontendTypes';
 import { localPoint } from '@visx/event';
-import { toggleExpanded } from '../../../slices/mainSlice';
+import { toggleExpanded, setCurrentTabInApp } from '../../../slices/mainSlice';
 
 const defaultMargin = {
   top: 30,
@@ -93,6 +93,7 @@ export default function AxTree(props) {
     sizeHeight = innerWidth;
   }
 
+
   const LinkComponent = getLinkComponent({ linkType, orientation });
 
   const currAxSnapshot = JSON.parse(JSON.stringify(axSnapshots[currLocation.index]));
@@ -147,6 +148,10 @@ export default function AxTree(props) {
   // Conditionally render ax legend component (RTK)
   const dispatch = useDispatch();
 
+  useEffect(() => {
+    dispatch(setCurrentTabInApp('Axtree')); // dispatch sent at initial page load allowing changing
+  }, [dispatch]);
+
   return totalWidth < 10 ? null : (
     <div>
       <div className='axControls'>

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

@@ -15,7 +15,6 @@ const AxLinkControls = ({
   const dispatch = useDispatch();
   const disableAxTree = () => {
     dispatch(toggleAxTree('toggleAxRecord'));
-    dispatch(setCurrentTabInApp('AxTree'));
     setShowTree(false);
     setShowParagraph(true);
   };

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

@@ -42,7 +42,6 @@ const StateRoute = (props: StateRouteProps) => {
 
   const enableAxTreeButton = () => {
     dispatch(toggleAxTree('toggleAxRecord'));
-    dispatch(setCurrentTabInApp('AxTree'));
     setShowParagraph(false);
     setShowTree(true);
   };

src/app/components/StateRoute/StateRoute.tsx

@@ -13,8 +13,6 @@ import {
 import { useDispatch, useSelector } from 'react-redux';
 import { MainState, RootState, TravelContainerProps } from '../FrontendTypes';
 import { Button } from '@mui/material';
-import FastRewindIcon from '@mui/icons-material/FastRewind';
-import FastForwardIcon from '@mui/icons-material/FastForward';
 
 /*
   This container renders the time-travel play button, seek bar, playback controls, and the playback speed dropdown, located towards the bottom of the application, above the locked, download, upload, and tutorial buttons
@@ -87,27 +85,8 @@ function TravelContainer(props: TravelContainerProps): JSX.Element {
       >
         {playing ? 'Pause' : 'Play'}
       </Button>
-      <Button
-        variant='contained'
-        className='backward-button'
-        onClick={() => dispatch(moveBackward(false))}
-        type='button'
-        sx={{ height: 25, minWidth: 30, p: 0, mr: 1 }}
-        aria-label='Backward'
-      >
-        <FastRewindIcon className='backward-button-icon' />
-      </Button>
-      <Button
-        variant='contained'
-        className='forward-button'
-        onClick={() => dispatch(moveForward(false))}
-        type='button'
-        sx={{ height: 25, minWidth: 30, p: 0 }}
-        aria-label='Forward'
-      >
-        <FastForwardIcon className='forward-button-icon' />
-      </Button>
       <Dropdown speeds={speeds} selectedSpeed={selectedSpeed} setSpeed={setSpeed} />
+
     </div>
   );
 }

src/app/containers/TravelContainer.tsx

@@ -87,10 +87,10 @@
   border-radius: 5px;
 }
 
-.backward-button-icon,
-.forward-button-icon {
-  color: $scrub-icon;
-}
+// .backward-button-icon,
+// .forward-button-icon {
+//   color: $scrub-icon;
+// }
 
 .forward-button:hover,
 .backward-button:hover {