Webmetrics pretty much done. Has one error. Working on History.tsx

Author: EivindDelFierro

src/app/components/Diff.tsx

@@ -14,7 +14,7 @@ import { DiffProps, StatelessCleaning } from '../FrontendTypes';
 function Diff(props: DiffProps): JSX.Element {
   const { 
     snapshot, // snapshot from 'tabs[currentTab]' object in 'MainContainer'
-    show // boolean that is dependent on the 'Route' path
+    show // boolean that is dependent on the 'Route' path; true if 'Route' path === '/diffRaw'
   } = props;
   const [mainState] = useStoreContext(); // useStoreContext() returns our global state object (which was initialized as 'initialState' in 'App.tsx')
   const { currentTab, tabs } = mainState; // 'currentTab' (type: number) and 'tabs' (type: object) are destructured from 'mainState'
@@ -60,7 +60,7 @@ function Diff(props: DiffProps): JSX.Element {
 
     if (newObj.children) { // if our new object has a children property
       newObj.children = [];
-      if (obj.children.length > 0) { // and if our input object's children property is non-empty, go through each children object and determine objects that need to be cleaned through statelessCleaning. Those that are cleaned through this process are then pushed to the new object's children array.
+      if (obj.children.length > 0) { // and if our input object's children property is non-empty, go through each children object from our input object and determine, if the object being iterated on either has a stateless state or has a children array with a non-zero amount of objects. Objects that fulfill the above that need to be cleaned through statelessCleaning. Those that are cleaned through this process are then pushed to the new object's children array.
         obj.children.forEach(
           (element: { state?: Record<string, unknown> | string; children?: [] }) => {
             if (element.state !== 'stateless' || element.children.length > 0) {
@@ -74,18 +74,16 @@ function Diff(props: DiffProps): JSX.Element {
     return newObj; // return the cleaned state snapshot(s)
   };
 
-  const previousDisplay: StatelessCleaning = statelessCleaning(previous);  // displays stateful data
+  const previousDisplay: StatelessCleaning = statelessCleaning(previous);  // displays stateful data from the first snapshot that was taken before our current snapshot.
 
-  // diff function returns a comparison of two objects, one has an updated change
-  // just displays stateful data
-  const delta: StatelessCleaning = diff(previousDisplay, snapshot);
+  const delta: StatelessCleaning = diff(previousDisplay, snapshot); // diff function from 'jsondiffpatch' returns the difference in state between 'previousDisplay' and 'snapshot' 
 
-  // returns html in string
-  // just displays stateful data
-  const html: StatelessCleaning = formatters.html.format(delta, previousDisplay);
-  if (show) formatters.html.showUnchanged();
-  else formatters.html.hideUnchanged();
-  if (previous === undefined || delta === undefined) {
+  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
+
+  if (show) formatters.html.showUnchanged(); // shows unchanged values if we're on the '/diffRaw' path
+  else formatters.html.hideUnchanged(); // hides unchanged values
+  
+  if (previous === undefined || delta === undefined) { // if there has been no state changes on the target/hooked application, previous and delta would be undefined.
     return (
       <div className='no-data-message'>
         {' '}
@@ -94,7 +92,7 @@ function Diff(props: DiffProps): JSX.Element {
       </div>
     );
   }
-  return <div>{ReactHtmlParser(html)}</div>;
+  return <div>{ReactHtmlParser(html)}</div>; // ReactHTMLParser from 'react-html-parser' package converts the HTML string into a react component.
 }
 
 export default Diff;

src/app/components/StateRoute/History.tsx

@@ -9,6 +9,10 @@ import { DefaultMargin } from '../../FrontendTypes';
 import { changeView, changeSlider, setCurrentTabInApp } from '../../actions/actions';
 import { useStoreContext } from '../../store';
 
+/*
+  Render's history page after history button has been selected. Allows user to traverse state history and relevant state branches.
+*/
+
 const defaultMargin: DefaultMargin = {
   top: 30,
   left: 30,
@@ -28,10 +32,10 @@ function History(props: Record<string, unknown>): JSX.Element {
     currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
     snapshots, // from 'tabs[currentTab].snapshotDisplay' object in 'MainContainer'
   } = props;
-  const [, dispatch] = useStoreContext();
+  const [, dispatch] = useStoreContext(); // use the dispatch that is connected with our storeContext
 
   const svgRef = React.useRef(null);
-  const root = JSON.parse(JSON.stringify(hierarchy));
+  const root = JSON.parse(JSON.stringify(hierarchy)); // why do we stringify and then parse our hierarchy back to JSON? (asked 7/31/23)
 
   // setting the margins for the Map to render in the tab window.
   const innerWidth: number = totalWidth - margin.left - margin.right;
@@ -128,6 +132,7 @@ function History(props: Record<string, unknown>): JSX.Element {
   /**
    * @method makeD3Tree :Creates a new D3 Tree
    */
+
   const makeD3Tree = () => {
     const svg = d3.select(svgRef.current);
     svg.selectAll('*').remove(); // Clear svg content before adding new elements

src/app/components/WebMetrics.tsx

@@ -5,11 +5,15 @@ import { OptionsCursorTrueWithMargin } from '../FrontendTypes';
 import { setCurrentTabInApp } from '../actions/actions';
 import { useStoreContext } from '../store';
 
+/*
+  Used to render a single radial graph on the 'Web Metrics' tab
+*/
+
 const radialGraph = (props) => {
   const state = {
-    series: [props.series],
+    series: [props.series], // series appears to be the scale at which data is displayed based on the type of webMetrics measured.
     options: {
-      colors: [props.color],
+      colors: [props.color], // color of the webmetrics performance bar from 'StateRoute'
       chart: {
         height: 100,
         width: 100,
@@ -88,8 +92,8 @@ const radialGraph = (props) => {
     },
   };
 
-  const [store, dispatch] = useStoreContext();
-  useEffect(() => {
+  const [store, dispatch] = useStoreContext(); // used to get the dispatch function from our storeContext
+  useEffect(() => { // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'webmetrics.' to facilitate render.
     dispatch(setCurrentTabInApp('webmetrics'));
   }, []);
 
@@ -100,8 +104,8 @@ const radialGraph = (props) => {
   };
 
   return (
-    <div className='metric'>
-      <ReactHover options={optionsCursorTrueWithMargin}>
+    <div className='metric'> 
+      <ReactHover options={optionsCursorTrueWithMargin}> 
         <Trigger type='trigger'>
           <div id='chart'>
             <Charts
@@ -114,10 +118,9 @@ const radialGraph = (props) => {
           </div>
         </Trigger>
         <Hover type='hover'>
-          <div style={{ zIndex: 1, position: 'relative', padding: '0.5rem 1rem' }} id='hover-box'>
-            <p>
-              <strong>{props.name}</strong>
-            </p>
+          <div style={{zIndex: 1, position: 'relative', padding: '0.5rem 1rem'}} id='hover-box'>
+          {/* <div style="zIndex: 1; position: relative; padding: 0.5rem 1rem;" id='hover-box'> */}
+            <p><strong>{props.name}</strong></p>
             <p>{props.description}</p>
           </div>
         </Hover>

src/backend/controllers/timeJump.ts

@@ -94,7 +94,17 @@ async function updateReactFiberTree(
     const functionalComponent = componentActionsRecord.getComponentByIndexHooks(hooksIndex);
     // Update component state
     for (let i in functionalComponent) {
-      await functionalComponent[i].dispatch(Object.values(hooksState)[i]);
+      try {
+        await functionalComponent[i].dispatch(Object.values(hooksState)[i])
+      } catch(err) {
+        console.log('error in timeJump')
+        console.log('hooksIndex', hooksIndex)
+        console.log('hookState', hooksState)
+        console.log('[i]', i)
+        console.log('functionalComponent', functionalComponent)
+        console.log('functionalComponent[i]', functionalComponent[i])
+        console.log(err)
+      }
     }
     // Iterate through new children after state has been set
     targetSnapshot.children.forEach((child) => updateReactFiberTree(child));

src/extension/background.js

@@ -187,6 +187,7 @@ chrome.runtime.onConnect.addListener((port) => {
         break;
       }
     }
+    return true // added 7/30/23
   });
 
   // listen for message containing a snapshot from devtools and send it to contentScript -
@@ -409,6 +410,7 @@ chrome.tabs.onRemoved.addListener((tabId) => {
   delete tabsObj[tabId];
   delete reloaded[tabId];
   delete firstSnapshotReceived[tabId];
+  return true; // added 7/30/23
 });
 
 // when a new url is loaded on the same tab,
@@ -436,6 +438,7 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
       tabsObj[tabId] = createTabObj(changeInfo.title);
     }
   }
+  return true; // added 7/30/23
 });
 
 // when tab view is changed, put the tabid as the current tab
@@ -455,6 +458,7 @@ chrome.tabs.onActivated.addListener((info) => {
       }
     }
   });
+  return true; // added 7/30/23
 });
 
 // when reactime is installed
@@ -465,6 +469,7 @@ chrome.runtime.onInstalled.addListener(() => {
     title: 'Reactime',
     contexts: ['page', 'selection', 'image', 'link'],
   });
+  return true; // added 7/30/23
 });
 
 // when context menu is clicked, listen for the menuItemId,
@@ -479,4 +484,5 @@ chrome.contextMenus.onClicked.addListener(({ menuItemId }) => {
     url: chrome.runtime.getURL('panel.html'),
   };
   if (menuItemId === 'reactime') chrome.windows.create(options);
+  return true; // added 7/30/23
 });

src/extension/contentScript.ts

@@ -10,6 +10,14 @@ let firstMessage = true;
 // Listens for window messages (from the injected script on the DOM)
 let isRecording = true;
 
+//event listener testing
+window.addEventListener("unhandledrejection", (event) => {
+  console.log('window event listener')
+  console.log('Promise error from message received from contentScript')
+  console.log('promise', event.promise)
+  console.log('reason', event.reason)
+})
+
 window.addEventListener('message', (msg) => {
   // Event listener runs constantly based on actions
   // recorded on the test application from backend files (linkFiber.ts).
@@ -35,6 +43,8 @@ window.addEventListener('message', (msg) => {
   if (action === 'aReactApp') {
     chrome.runtime.sendMessage(msg.data);
   }
+
+  return true // newest return true to determine if this solves current unhandled exceptions.
 });
 
 // Listening for messages from the UI of the Reactime extension.