pseudocode added to Diff, DiffRoute, History, StateRoute, StateContainer, and store.

Author: EivindDelFierro

src/app/components/Diff.tsx

@@ -5,44 +5,62 @@ import { useStoreContext } from '../store';
 import { DiffProps, StatelessCleaning } from '../FrontendTypes';
 
 /**
- * Displays tree showing specific two versions of tree
+ * Displays tree showing two specific versions of tree:
  * one with specific state changes, the other the whole tree
  * @param props props from maincontainer
  * @returns a diff tree or a string stating no state changes have happened
  */
+
 function Diff(props: DiffProps): JSX.Element {
-  const { snapshot, show } = props;
-  const [mainState] = useStoreContext();
-  const { currentTab, tabs } = mainState; // k/v pairs of mainstate store object being created
+  const { 
+    snapshot, // snapshot from 'tabs[currentTab]' object in 'MainContainer'
+    show // boolean that is dependent on the 'Route' path
+  } = 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'
   const { snapshots, viewIndex, sliderIndex } = tabs[currentTab];
-  let previous: unknown;
 
-  // previous follows viewIndex or sliderIndex
-  if (viewIndex !== -1) {
-    // if tab isnt selected, view index is set to -1
-    previous = snapshots[viewIndex - 1];
+  let previous: unknown// = (viewIndex !== -1) ? snapshots[viewIndex - 1] : previous = snapshots[sliderIndex - 1]
+
+  if (viewIndex !== -1) { // snapshots should not have any property < 0. A viewIndex of '-1' means that we had a snapshot index that occurred before the initial snapshot of the application state... which is impossible. '-1' therefore means reset to the last/most recent snapshot.
+    previous = snapshots[viewIndex - 1]; // set previous to the snapshot that is before the one we are currently viewing
   } else {
-    previous = snapshots[sliderIndex - 1];
+    previous = snapshots[sliderIndex - 1]; // if viewIndex was an impossible index, we will get our snapshots index using 'sliderIndex.' sliderIndex should have already been reset to the latest snapshot index. Previous is then set to the snapshot that occurred immediately before our most recent snapshot.
   }
+ 
+  /*
+    State snapshot objects have the following structure: 
+    {
+      children: array of objects
+      componentData: object
+      isExpanded: Boolean
+      name: string
+      route: object
+      state: string
+    }
 
-  // cleaning preview from stateless data
+     // cleaning preview from stateless data
+  */
   const statelessCleaning = (obj: StatelessCleaning) => {
-    const newObj = { ...obj };
-    if (newObj.name === 'nameless') {
-      delete newObj.name;
+    const newObj = { ...obj }; // duplicate our input object into a new object
+
+    if (newObj.name === 'nameless') { // if our new object's name is nameless
+      delete newObj.name; // delete the name property
     }
-    if (newObj.componentData) {
-      delete newObj.componentData;
+    if (newObj.componentData) { // if our new object has a componentData property
+      delete newObj.componentData; // delete the componentData property
     }
-    if (newObj.state === 'stateless') {
-      delete newObj.state;
+    if (newObj.state === 'stateless') { // if if our new object's state is stateless
+      delete newObj.state; // delete the state property
     }
-    if (newObj.stateSnaphot) {
-      newObj.stateSnaphot = statelessCleaning(obj.stateSnaphot);
+
+    if (newObj.stateSnaphot) { // if our new object has a stateSnaphot property
+      newObj.stateSnaphot = statelessCleaning(obj.stateSnaphot); // run statelessCleaning on the stateSnapshot
     }
-    if (newObj.children) {
+    
+    if (newObj.children) { // if our new object has a children property
       newObj.children = [];
-      if (obj.children.length > 0) {
+      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.
         obj.children.forEach(
           (element: { state?: Record<string, unknown> | string; children?: [] }) => {
             if (element.state !== 'stateless' || element.children.length > 0) {
@@ -53,14 +71,15 @@ function Diff(props: DiffProps): JSX.Element {
         );
       }
     }
-    return newObj;
+    return newObj; // return the cleaned state snapshot(s)
   };
 
-  // displays stateful data
-  const previousDisplay: StatelessCleaning = statelessCleaning(previous);
+  const previousDisplay: StatelessCleaning = statelessCleaning(previous);  // displays stateful data
+
   // diff function returns a comparison of two objects, one has an updated change
   // just displays stateful data
   const delta: StatelessCleaning = diff(previousDisplay, snapshot);
+
   // returns html in string
   // just displays stateful data
   const html: StatelessCleaning = formatters.html.format(delta, previousDisplay);

src/app/components/DiffRoute.tsx

@@ -3,9 +3,14 @@ import { MemoryRouter as Router, Route, NavLink, Switch } from 'react-router-dom
 import Diff from './Diff';
 import { DiffRouteProps } from '../FrontendTypes';
 
+/*
+  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.
+*/
+
+// 'DiffRoute' only passed in prop is 'snapshot' from 'tabs[currentTab]' object in 'MainContainer'
 const DiffRoute = (props: DiffRouteProps): JSX.Element => (
   <Router>
-    <div className='navbar'>
+    <div className='navbar'> 
       <NavLink className='router-link' activeClassName='is-active' exact to='/'>
         Tree
       </NavLink>

src/app/components/StateRoute/History.tsx

@@ -23,10 +23,10 @@ function History(props: Record<string, unknown>): JSX.Element {
     width: totalWidth,
     height: totalHeight,
     margin = defaultMargin,
-    hierarchy,
-    dispatch,
-    currLocation,
-    snapshots,
+    hierarchy, // from 'tabs[currentTab]' object in 'MainContainer'
+    dispatch, // from useStoreContext in 'StateRoute'
+    currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
+    snapshots, // from 'tabs[currentTab].snapshotDisplay' object in 'MainContainer'
   } = props;
   const [, dispatch] = useStoreContext();
 

src/app/components/StateRoute/StateRoute.tsx

@@ -16,19 +16,27 @@ import PerformanceVisx from './PerformanceVisx/PerformanceVisx';
 import WebMetrics from '../WebMetrics';
 import { StateRouteProps } from '../../FrontendTypes'
 
-const History = require('./History').default;
-
-const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
+/*
+  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.
+*/
 
+const History = require('./History').default;
+const NO_STATE_MSG = 'No state change detected. Trigger an event to change state'; // message to be returned if there has been no state change detected in our hooked/target app
 
 const StateRoute = (props: StateRouteProps) => {
-  const { snapshot, hierarchy, snapshots, viewIndex, webMetrics, currLocation } = props;
+  const { 
+    snapshot, // from 'tabs[currentTab]' object in 'MainContainer'
+    hierarchy, // from 'tabs[currentTab]' object in 'MainContainer'
+    snapshots, // from 'tabs[currentTab].snapshotDisplay' object in 'MainContainer'
+    viewIndex, // from 'tabs[currentTab]' object in 'MainContainer'
+    webMetrics, // from 'tabs[currentTab]' object in 'MainContainer'
+    currLocation // from 'tabs[currentTab]' object in 'MainContainer'
+  } = props;
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
 
-  // Map
   const renderComponentMap = () => {
-    if (hierarchy) {
+    if (hierarchy) { // if hierarchy was initialized/created render the Map
       return (
         <ParentSize className='componentMapContainer'>
           {({ width, height }) => (
@@ -42,16 +50,11 @@ const StateRoute = (props: StateRouteProps) => {
         </ParentSize>
       );
     }
-    return <div className='noState'>{NO_STATE_MSG}</div>;
+    return <div className='noState'>{NO_STATE_MSG}</div>; // otherwise, inform the user that there has been no state change in the target/hooked application.
   };
 
-  // the hierarchy gets set upon the first click on the page
-  // when the page is refreshed we may not have a hierarchy, so we need to check if hierarchy was initialized
-  // if true, we invoke the D3 render chart with hierarchy
-  // by invoking History component, and passing in all the props required to render D3 elements and perform timeJump from clicking of node
-  // otherwise we send an alert to the user that no state was found.
   const renderHistory:JSX.Element = () => {
-    if (hierarchy) {
+    if (hierarchy) { // if hierarchy was initialized/created render the history
       return (
         <ParentSize>
           {({ width, height }) => (
@@ -69,24 +72,22 @@ const StateRoute = (props: StateRouteProps) => {
         </ParentSize>
       );
     }
-    return <div className='noState'>{NO_STATE_MSG}</div>;
+    return <div className='noState'>{NO_STATE_MSG}</div>; // otherwise, inform the user that there has been no state change in the target/hooked application.
   };
 
-  // the hierarchy gets set on the first click in the page
-  // when the page is refreshed we may not have a hierarchy, so we need to check if hierarchy was initialized
-  // if true invoke render Tree with snapshot
   const renderTree = () => {
-    if (hierarchy) {
+    if (hierarchy) { // if a hierarchy has been created/initialized, render the appropriate tree based on the active snapshot
       return <Tree snapshot={snapshot} snapshots={snapshots} currLocation={currLocation} />;
     }
-    return <div className='noState'>{NO_STATE_MSG}</div>;
+    return <div className='noState'>{NO_STATE_MSG}</div>; // otherwise, inform the user that there has been no state change in the target/hooked application.
   };
   const renderWebMetrics = () => {
     let LCPColor: String;
     let FIDColor: String;
     let FCPColor: String;
     let TTFBColor: String;
 
+    // adjust the strings that represent colors of the webmetrics performance bar for 'Largest Contentful Paint (LCP)', 'First Input Delay (FID)', 'First Contentfuly Paint (FCP)', and 'Time to First Byte (TTFB)' based on webMetrics outputs. 
     if (webMetrics.LCP <= 2000) LCPColor = '#0bce6b';
     if (webMetrics.LCP > 2000 && webMetrics.LCP < 4000) LCPColor = '#E56543';
     if (webMetrics.LCP > 4000) LCPColor = '#fc2000';
@@ -140,7 +141,7 @@ const StateRoute = (props: StateRouteProps) => {
   };
 
   const renderPerfView = () => {
-    if (hierarchy) {
+    if (hierarchy) { // if hierarchy was initialized/created render the PerformanceVisx
       return (
         <ParentSize>
           {({ width, height }) => (
@@ -156,7 +157,7 @@ const StateRoute = (props: StateRouteProps) => {
         </ParentSize>
       );
     }
-    return <div className='noState'>{NO_STATE_MSG}</div>;
+    return <div className='noState'>{NO_STATE_MSG}</div>; // otherwise, inform the user that there has been no state change in the target/hooked application.
   };
 
   return (

src/app/containers/StateContainer.tsx

@@ -11,12 +11,12 @@ import { StateContainerProps } from '../FrontendTypes';
 // eslint-disable-next-line react/prop-types
 const StateContainer = (props: StateContainerProps): JSX.Element => {
   const { 
-    snapshot, // from 'tabs[currentTab]' object from 'MainContainer'
-    hierarchy, // from 'tabs[currentTab]' object from 'MainContainer'
-    snapshots, // from 'tabs[currentTab].snapshotDisplay' object from 'MainContainer'
-    viewIndex, // from 'tabs[currentTab]' object from 'MainContainer'
-    webMetrics, // from 'tabs[currentTab]' object from 'MainContainer'
-    currLocation // from 'tabs[currentTab]' object from 'MainContainer'
+    snapshot, // from 'tabs[currentTab]' object in 'MainContainer'
+    hierarchy, // from 'tabs[currentTab]' object in 'MainContainer'
+    snapshots, // from 'tabs[currentTab].snapshotDisplay' object in 'MainContainer'
+    viewIndex, // from 'tabs[currentTab]' object in 'MainContainer'
+    webMetrics, // from 'tabs[currentTab]' object in 'MainContainer'
+    currLocation // from 'tabs[currentTab]' object in 'MainContainer'
   } = props;
 
   return (