added ax array to accessibility tab

Author: jguerrero35

src/app/components/StateRoute/Ax.tsx

@@ -3,16 +3,6 @@ import { JSONTree } from 'react-json-tree'; // React JSON Viewer Component;
 import { setCurrentTabInApp } from '../../slices/mainSlice';
 import { useDispatch } from 'react-redux';
 
-// const getItemString = (
-//     type: any,
-//     data: { state?: object | string; name: string; children: [] },
-//   ) => {
-//     // function that allows the customization of how arrays, objects, and iterable nodes are displayed.
-//     if (data && data.name) {
-//       return <span>{data.name}</span>;
-//     }
-//     return <span />;
-//   };
 const theme = {
     scheme: 'monokai',
     author: 'wimer hazenberg (http://www.monokai.nl)',
@@ -39,27 +29,21 @@ const AxTree = (props) => {
         snapshot, // from 'tabs[currentTab]' object in 'MainContainer'
         snapshots, // from 'tabs[currentTab].snapshotDisplay' object in 'MainContainer'
         currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
+        axSnapshots,
       } = props;
 
       const dispatch = useDispatch();
 
       useEffect(() => {
         dispatch(setCurrentTabInApp('AxTree')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'tree' to facilitate render.
       }, []);
-    // const json = {
-    //     array: [1, 2, 3],
-    //     bool: true,
-    //     object: {
-    //     foo: 'bar',
-    //     },
-    // };
 
     //removing/adding snapshot at beginning of return statement didn't change anything
     return(
         <> {snapshot && (
             <JSONTree 
-            data={snapshots[currLocation.index] || snapshot} 
-            shouldExpandNodeInitially={() => true}
+            data={axSnapshots}
+            // shouldExpandNodeInitially={() => true}
             theme = {theme}
             />
                 )}

src/app/components/StateRoute/StateRoute.tsx

@@ -26,6 +26,7 @@ const NO_STATE_MSG = 'No state change detected. Trigger an event to change state
 
 const StateRoute = (props: StateRouteProps) => {
   const {
+    axSnapshots, // from 'tabs[currentTab]' object in 'MainContainer'
     snapshot, // from 'tabs[currentTab]' object in 'MainContainer'
     hierarchy: propsHierarchy, // from 'tabs[currentTab]' object in 'MainContainer'
     snapshots, // from 'tabs[currentTab].snapshotDisplay' object in 'MainContainer'
@@ -99,6 +100,7 @@ const StateRoute = (props: StateRouteProps) => {
           <Route
             path = '/accessibility'
             element = {<AxTree
+              axSnapshots={axSnapshots}
               snapshot={snapshot} 
               snapshots={snapshots} 
               currLocation={currLocation}/>}

src/app/containers/MainContainer.tsx

@@ -163,8 +163,10 @@ function MainContainer(): JSX.Element {
 
   // }, 5000);
 
-  const { currLocation, viewIndex, sliderIndex, snapshots, hierarchy, webMetrics } =
-    tabs[currentTab]; // we destructure the currentTab object
+  console.log(tabs[currentTab]);
+
+  const { axSnapshots, currLocation, viewIndex, sliderIndex, snapshots, hierarchy, webMetrics } =
+    tabs[currentTab]; // we destructure the currentTab object which is passed in from background.js
   //@ts-ignore
   const snapshotView = viewIndex === -1 ? snapshots[sliderIndex] : snapshots[viewIndex]; // if viewIndex is -1, then use the sliderIndex instead
 
@@ -227,6 +229,7 @@ function MainContainer(): JSX.Element {
               snapshots={snapshots}
               // @ts-ignore
               currLocation={currLocation}
+              axSnapshots={axSnapshots}
             />
           </div>
         ) : null}

src/app/containers/StateContainer.tsx

@@ -18,6 +18,7 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
     viewIndex, // from 'tabs[currentTab]' object in 'MainContainer'
     webMetrics, // from 'tabs[currentTab]' object in 'MainContainer'
     currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
+    axSnapshots,// from 'tabs[currentTab]' object in 'MainContainer'
   } = props;
 
   return (
@@ -58,6 +59,7 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
           element={
             <div style={{ height: '100%' }}>
               <StateRoute
+                axSnapshots={axSnapshots}
                 webMetrics={webMetrics}
                 viewIndex={viewIndex}
                 snapshot={snapshot}