merge dependencies branch with errors branch

Author: jrosengrant

src/app/FrontendTypes.ts

@@ -379,3 +379,7 @@ export interface Snapshots {
   component3: number;
   'all others': number;
 }
+
+export interface ErrorContainerProps {
+  port: chrome.runtime.Port | null;
+}

src/app/components/App.tsx

@@ -15,6 +15,7 @@ function App(): JSX.Element {
     <ThemeProvider theme={theme}>
       <Router>
         {/* we wrap our application with the <Router> tag so that all components that are nested will have the react-router context */}
+        {console.log('App reloaded', new Date().toLocaleString())}
         <MainContainer />
       </Router>
     </ThemeProvider>

src/app/components/Diff.tsx

@@ -80,6 +80,7 @@
 //     return newObj; // return the cleaned state snapshot(s)
 //   };
 
+<<<<<<< HEAD
 //   const previousDisplay: StatelessCleaning = statelessCleaning(previous); // displays stateful data from the first snapshot that was taken before our current snapshot.
 
 //   const delta: StatelessCleaning = diff(previousDisplay, snapshot); // diff function from 'jsondiffpatch' returns the difference in state between 'previousDisplay' and 'snapshot'
@@ -89,6 +90,24 @@
 //   if (show)
 //     formatters.html.showUnchanged(); // shows unchanged values if we're on the '/diffRaw' path
 //   else formatters.html.hideUnchanged(); // hides unchanged values
+=======
+  // console.log('previousDisplay before stateless cleaning: ', previous);
+  const previousDisplay: StatelessCleaning = statelessCleaning(previous); // displays stateful data from the first snapshot that was taken before our current snapshot.
+
+  // console.log('previousDisplay after stateless cleaning: ', previousDisplay);
+  const delta: StatelessCleaning = diff(previousDisplay, snapshot); // diff function from 'jsondiffpatch' returns the difference in state between 'previousDisplay' and 'snapshot'
+
+  // console.log('delta: ', delta);
+  const html: StatelessCleaning = formatters.html.format(delta, previousDisplay); // formatters function from 'jsondiffpatch' returns an html string that shows the difference between delta and the previousDisplay
+
+  // console.log('html: ', html);
+
+  console.log(show);
+  console.log(formatters.html.showUnchanged());
+  if (show)
+    formatters.html.showUnchanged(); // shows unchanged values if we're on the '/diffRaw' path
+  else formatters.html.hideUnchanged(); // hides unchanged values
+>>>>>>> errors
 
 //   if (previous === undefined || delta === undefined) {
 //     // if there has been no state changes on the target/hooked application, previous and delta would be undefined.

src/app/components/DiffRoute.tsx

@@ -7,6 +7,7 @@
 //   Loads the appropriate DiffRoute view and renders the 'Tree' and 'Raw' navbar buttons after clicking on the 'Diff' button located near the top rightmost corner.
 // */
 
+<<<<<<< HEAD
 // // 'DiffRoute' only passed in prop is 'snapshot' from 'tabs[currentTab]' object in 'MainContainer'
 // const DiffRoute = (props: DiffRouteProps): JSX.Element => (
 //   <Router>
@@ -24,5 +25,24 @@
 //     </Routes>
 //   </Router>
 // );
+=======
+// 'DiffRoute' only passed in prop is 'snapshot' from 'tabs[currentTab]' object in 'MainContainer'
+const DiffRoute = (props: DiffRouteProps): JSX.Element => (
+  <Router>
+    <div className='navbar'>
+      <NavLink className='router-link' activeClassName='is-active' exact to='/'>
+        Tree
+      </NavLink>
+      <NavLink className='router-link' activeClassName='is-active' to='/diffRaw'>
+        Raw
+      </NavLink>
+    </div>
+    <Switch>
+      <Route path='/diffRaw' render={() => <Diff snapshot={props.snapshot} />} />
+      <Route path='/' render={() => <Diff snapshot={props.snapshot} show={false} />} />
+    </Switch>
+  </Router>
+);
+>>>>>>> errors
 
 // export default DiffRoute;

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -127,7 +127,12 @@ export default function ComponentMap({
   };
 
   const formatRenderTime: string = (time: number): string => {
+<<<<<<< HEAD
     const renderTime = parseFloat(time).toFixed(3);
+=======
+    if (!time) return 'No time information';
+    const renderTime = time.toFixed(3);
+>>>>>>> errors
     return `${renderTime} ms `;
   };
 

src/app/components/StateRoute/History.tsx

@@ -42,7 +42,7 @@ function History(props: Record<string, unknown>): JSX.Element {
 
   const svgRef = React.useRef(null);
   const root = JSON.parse(JSON.stringify(hierarchy)); // why do we stringify and then parse our hierarchy back to JSON? (asked 7/31/23)
-
+  console.log('history root: ', root);
   // setting the margins for the Map to render in the tab window.
   const innerWidth: number = totalWidth - margin.left - margin.right;
   const innerHeight: number = totalHeight - margin.top - margin.bottom - 60;
@@ -171,14 +171,15 @@ function History(props: Record<string, unknown>): JSX.Element {
   const makeD3Tree = () => {
     const svg = d3.select(svgRef.current); // d3.select Selects the first element/node that matches svgRef.current. If no element/node match returns an empty selection. If multiple elements/nodes match the selector, only the first matching element/node (in document order) will be selected.
     svg.selectAll('*').remove(); // Selects all elements. The elements will be selected in document order (top-to-bottom). We then remove the selected elements/nodes from the DOM. This is important as to ensure that the SVG is empty before rendering the D3 based visualization to avoid interference/overlap with any previously rendered content.
-
+    console.log('makeD3Tree initial svgRef: ', svgRef);
     const tree = (data) => {
       // function that takes in data and turns it into a d3 tree.
       const treeRoot = d3.hierarchy(data); // 'd3.hierarchy' constructs a root node from the specified hierarchical data.
       return d3.tree().size([innerWidth, innerHeight])(treeRoot); // d3.tree creates a new tree layout with a size option of innerWidth (~line 41) and innerHeight (~line 42). We specify our new tree layout's root as 'treeRoot' which assigns an x and y property to each node to represent an [x, y] coordinate system.
     };
 
     const d3root = tree(root); // create a d3. tree from our root
+    console.log('d3root: ', d3root);
     const currNode = labelCurrentNode(d3root); // iterate through our nodes and apply a color property
 
     const g = svg //serves as a container for the nodes and links within the D3 Visualization of the tree
@@ -310,12 +311,13 @@ function History(props: Record<string, unknown>): JSX.Element {
   };
 
   useEffect(() => {
+    console.log('currLocation: ', currLocation);
     makeD3Tree();
-  }, [root, currLocation]); // if the 'root' or 'currLocation' changes, re-build the D3 Tree
+  }, [root /*, currLocation*/]); // if the 'root' or 'currLocation' changes, re-build the D3 Tree
 
-  useEffect(() => {
-    dispatch(setCurrentTabInApp('history')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'webmetrics' to facilitate render.
-  }, []);
+  // useEffect(() => {
+  //   dispatch(setCurrentTabInApp('history')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'webmetrics' to facilitate render.
+  // }, []);
 
   // then rendering each node in History tab to render using D3, which will share area with LegendKey
   return (

src/app/components/StateRoute/StateRoute.tsx

@@ -32,7 +32,9 @@ const StateRoute = (props: StateRouteProps) => {
     webMetrics, // from 'tabs[currentTab]' object in 'MainContainer'
     currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
   } = props;
-
+  console.log('snapshot from StateRoute props: ', snapshot);
+  console.log('snapshots from StateRoute props: ', snapshots);
+  console.log('currLocation from StateRoute props', currLocation);
   const { tabs, currentTab }: MainState = useSelector((state: RootState) => state.main);
   const { hierarchy: tabsHierarchy, sliderIndex, viewIndex: tabsViewIndex  } = tabs[currentTab];
   const hierarchy = propsHierarchy || tabsHierarchy; //JR: RETURN TO THIS: alias to deconstruct from props and tab with the same name, aliases were deleted above

src/app/components/SwitchApp.tsx

@@ -4,6 +4,7 @@ import { setTab } from '../slices/mainSlice';
 //importing these methods for RTK
 import { useSelector, useDispatch } from 'react-redux';
 import { MainState, RootState } from '../FrontendTypes';
+import { current } from '@reduxjs/toolkit';
 
 /*
   This is the dropdown menu on the left column above the 'clear' button and the state snapshots list. It allows us to switch between which website/application we are currently working on.
@@ -17,7 +18,7 @@ const SwitchAppDropdown = (): JSX.Element => {
   const { currentTab, tabs }: MainState = useSelector((state: RootState) => state.main);
 
   const tabsArray: {}[] = []; // tabsArray is an empty array that will take objects as it's elements
-
+  console.log('switchAppDropdown; currentTab: ', currentTab, 'tabs: ', tabs);
   Object.keys(tabs).forEach((tab) => {
     // We populate our 'tabsArray' with objects derived from the 'tab' that is currently being iterated on.
     tabsArray.unshift({ value: tab, label: tabs[tab].title });

src/app/components/theme.ts

@@ -2,7 +2,7 @@ import { createTheme } from '@mui/material/styles';
 const theme = createTheme({
   palette: {
     primary: {
-      main: '#8Fb5f9',
+      main: '#b2f7a1',
     },
     secondary: {
       main: '#BF6DD2',

src/app/containers/ActionContainer.tsx

@@ -146,9 +146,11 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
       );
     },
   );
-  useEffect(() => {
-    setActionView(true);
-  }, [setActionView]);
+
+  // JR: this is questionable, why would you always set it to true?
+  // useEffect(() => {
+  //   setActionView(true);
+  // }, [setActionView]);
 
   // Function sends message to background.js which sends message to the content script
   const toggleRecord = (): void => {
@@ -181,13 +183,25 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
       <div className='actionToolContainer'>
         <div id='arrow'>
           <aside className='aside'>
-            <a onClick={toggleActionContainer} className='toggle'>
+            <a
+              onClick={(e) => {
+                e.stopPropagation;
+                toggleActionContainer();
+              }}
+              className='toggle'
+            >
+              {' '}
+              {/* JR: updating onClick to stop propagation so that it detects the click only on the arrow and not the parent*/}
               <i />
             </a>
           </aside>
+          <div className='collapse'>Collapse</div>
         </div>
         <a type='button' id='recordBtn' onClick={toggleRecord}>
           <i />
+          <div style={{ display: 'flex', alignItems: 'center', textAlign: 'right' }}>
+            Toggle Record
+          </div>
           {recordingActions ? <Switch defaultChecked /> : <Switch />}
         </a>
       </div>