fixed app crashing bug

Author: jguerrero35

src/app/components/StateRoute/AxContainer.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { ParentSize } from '@visx/responsive';
+import AxTree from "./AxMap/Ax";
+
+const AxContainer = (props) => {
+    const {
+        axSnapshots, // from 'tabs[currentTab]' object in 'MainContainer'
+        snapshot, // from 'tabs[currentTab]' object in 'MainContainer'
+        snapshots, // from 'tabs[currentTab].snapshotDisplay' object in 'MainContainer'
+        currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
+      } = props;
+      
+    return (
+    <div>
+      <ParentSize className='componentMapContainer'>
+        {({ width, height }) => {
+          // eslint-disable-next-line react/prop-types
+          const maxHeight: number = 1200;
+          const h = Math.min(height, maxHeight);
+          return (
+              <AxTree
+                axSnapshots={axSnapshots}
+                snapshot={snapshot}
+                snapshots={snapshots}
+                currLocation={currLocation}
+                width={width}
+                height={h}
+              />
+          );
+        }}
+      </ParentSize>
+    </div>
+    )
+}
+
+export default AxContainer;

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

@@ -166,11 +166,13 @@ export type LinkTypesProps = {
 export default function AxTree(props) {
   const { currLocation, axSnapshots, width, height } = props;
 
+
+
   let margin = defaultMargin;
   let totalWidth = width;
   let totalHeight = height;
 
-
+  if (axSnapshots[currLocation.index] === 'emptyAxSnap') return;
 
   const toolTipTimeoutID = useRef(null); //useRef stores stateful data that’s not needed for rendering.
   const {
@@ -181,7 +183,7 @@ export default function AxTree(props) {
     showTooltip, // function to set tooltip state
     hideTooltip, // function to close a tooltip
   } = useTooltip(); // returns an object with several properties that you can use to manage the tooltip state of your component
-  console.log('tool tip data: ', tooltipData);
+  
   // let nameVal = JSON.stringify(tooltipData)
   // console.log('nameVal', nameVal);
   const {
@@ -244,12 +246,9 @@ export default function AxTree(props) {
     }
   }
 
-  console.log('size width height ax: ', sizeWidth, sizeHeight);
-
   const LinkComponent = getLinkComponent({ layout, linkType, orientation });
 
   const currAxSnapshot = JSON.parse(JSON.stringify(axSnapshots[currLocation.index]));
-  console.log('currAxSnapshot: ', currAxSnapshot);
 
   // root node of currAxSnapshot
   const rootAxNode = JSON.parse(JSON.stringify(currAxSnapshot[0]));
@@ -295,8 +294,6 @@ export default function AxTree(props) {
 
   organizeAxTree(rootAxNode, currAxSnapshot);
 
-  console.log('rootAxNode: ', rootAxNode);
-
   // store each individual node, now with children property in nodeAxArr
   // need to consider order, iterate through the children property first?
   const populateNodeAxArr = (currNode) => {
@@ -316,7 +313,6 @@ export default function AxTree(props) {
   };
 
   populateNodeAxArr(rootAxNode);
-  console.log('nodeAxArr: ', nodeAxArr);
 
   // ax Legend
   const { axLegendButtonClicked } = useSelector((state: RootState) => state.axLegend);
@@ -468,7 +464,6 @@ export default function AxTree(props) {
                   const handleMouseAndClickOver = (event): void => {
                     const coords = localPoint(event.target.ownerSVGElement, event);
                     const tooltipObj = { ...node.data };
-                    console.log("tooltipobj: ", tooltipObj);
 
                     showTooltip({
                       tooltipLeft: coords.x,

src/app/components/StateRoute/StateRoute.tsx

@@ -16,6 +16,8 @@ import PerformanceVisx from './PerformanceVisx/PerformanceVisx';
 import WebMetricsContainer from './WebMetrics/WebMetricsContainer';
 import { MainState, RootState, StateRouteProps } from '../../FrontendTypes';
 import AxTree from './AxMap/Ax';
+import AxContainer from './AxContainer';
+import { divide } from 'lodash';
 
 /*
   Loads the appropriate StateRoute view and renders the Map, Performance, History, Webmetrics, and Tree navbar buttons after clicking on the 'State' button located near the top rightmost corner.
@@ -123,21 +125,15 @@ const StateRoute = (props: StateRouteProps) => {
             path='/accessibility'
             element={
               showTree ? (
-                <ParentSize className='componentMapContainer'>
-                  {({ width, height }) => {
-                    // eslint-disable-next-line react/prop-types
-                    const maxHeight: number = 1200;
-                    const h = Math.min(height, maxHeight);
-                    return (
-                      <div>
-                        <input
+                <div>
+                     <input
                           type='radio'
                           value='enable'
                           checked={selectedValue === 'enable'}
                           onChange={() => {
                             enableAxTreeButton();
                           }}
-                        />{' '}
+                        />
                         <label htmlFor='enable'>Enable</label>
                         <input
                           type='radio'
@@ -148,18 +144,10 @@ const StateRoute = (props: StateRouteProps) => {
                           }}
                         />
                         <label htmlFor='disable'>Disable</label>
-                        <AxTree
-                          axSnapshots={axSnapshots}
-                          snapshot={snapshot}
-                          snapshots={snapshots}
-                          currLocation={currLocation}
-                          width={width}
-                          height={h}
-                        />
-                      </div>
-                    );
-                  }}
-                </ParentSize>
+                    {showTree && <AxContainer
+                      axSnapshots={axSnapshots}
+                      currLocation={currLocation}/>} 
+                </div>
               ) : (
                 <div>
                   {showParagraph && (

src/app/containers/MainContainer.tsx

@@ -102,7 +102,7 @@ function MainContainer(): JSX.Element {
         break;
       }
       case 'sendSnapshots': {
-        dispatch(setTab(sourceTab));
+        dispatch(setTab(payload));
         // set state with the information received from the background script
         dispatch(addNewSnapshots(payload));
         break;
@@ -167,7 +167,6 @@ function MainContainer(): JSX.Element {
     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
-
   // cleaning hierarchy and snapshotView from stateless data
   const statelessCleaning = (obj: {
     name?: string;

src/app/slices/mainSlice.ts

@@ -119,8 +119,6 @@ export const mainSlice = createSlice({
         tabs[currentTab] || {};
       const { payload } = action;
 
-      // console.log('mainSlice.ts: axSnapshots:', tabs[currentTab].axSnapshots);
-
       Object.keys(payload).forEach((tab) => {
         // check if tab exists in memory
         // add new tab

src/extension/background.js

@@ -620,7 +620,11 @@ chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
           );
         }
       }
-
+      console.log('postMessage sending snapshots from background js:', {
+        action: 'sendSnapshots',
+        payload: tabsObj,
+        sourceTab,
+      })
       // sends new tabs obj to devtools
       if (portsArr.length > 0) {
         portsArr.forEach((bg) =>