commented diff back out bc i couldn't get it to load formatters correctly. Got pages to stop expanding infinitely by removing unstyled parent divs where possible. Got performance tab to render by commenting out the useEffect that is needed for the tutorial. Now have issue where sub-paths are not rendering, rather it pushes you back out to component map.

Author: jrosengrant

src/app/components/Diff.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { diff } from 'jsondiffpatch';
-const jsondiffpatch = require('jsondiffpatch')
+import { diff, formatters} from 'jsondiffpatch';
+const jsondiffpatch = require('jsondiffpatch');
 import ReactHtmlParser from 'html-react-parser';
 import { CurrentTab, DiffProps, MainState, RootState, StatelessCleaning } from '../FrontendTypes';
 import { useSelector } from 'react-redux';
@@ -83,9 +83,9 @@ function Diff(props: DiffProps): JSX.Element {
 
   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'
+  const delta = diff(previousDisplay, snapshot); // diff function from 'jsondiffpatch' returns the difference in state between 'previousDisplay' and 'snapshot'
 
-  const html: StatelessCleaning = jsondiffpatch.formatters(delta, previousDisplay); // formatters function from 'jsondiffpatch' returns an html string that shows the difference between delta and the previousDisplay
+  const html = jsondiffpatch.formatters.format(delta, previousDisplay); // formatters function from 'jsondiffpatch' returns an html string that shows the difference between delta and the previousDisplay
 
   if (show)
     jsondiffpatch.formatters.showUnchanged(); // shows unchanged values if we're on the '/diffRaw' path

src/app/components/DiffRoute.tsx

@@ -11,16 +11,16 @@ import { DiffRouteProps } from '../FrontendTypes';
 const DiffRoute = (props: DiffRouteProps): JSX.Element => (
   <div className='diff-container'>
     <div className='navbar'>
-      <NavLink className='router-link' activeClassName='is-active' to='/'>
+      <NavLink className='router-link' to='/'>
         Tree
       </NavLink>
-      <NavLink className='router-link' activeClassName='is-active' to='/diffRaw'>
+      <NavLink className='router-link' to='/diffRaw'>
         Raw
       </NavLink>
     </div>
     <Routes>
-      <Route path='/diffRaw' element={() => <Diff snapshot={props.snapshot} show />} />
-      <Route path='/' element={() => <Diff snapshot={props.snapshot} show={false} />} />
+      <Route path='/diffRaw' element={<Diff snapshot={props.snapshot} show />} />
+      <Route path='/' element={<Diff snapshot={props.snapshot} show={false} />} />
     </Routes>
   </div>
 );

src/app/components/StateRoute/PerformanceVisx/PerformanceVisx.tsx

@@ -195,9 +195,9 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
 
   getActions();
 
-  useEffect(() => {
-    dispatch(setCurrentTabInApp('performance')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'performance' to facilitate render.
-  }, [dispatch]);
+  // useEffect(() => {
+  //   dispatch(setCurrentTabInApp('performance')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'performance' to facilitate render.
+  // }, [dispatch]);
 
   const allRoutes = []; // create allRoutes variable to hold urls
   const filteredSnapshots = [];
@@ -270,7 +270,7 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
 
       <Routes>
         <Route
-          path='comparison'
+          path='/comparison'
           element={
             hierarchy && series !== false ? (
               <BarGraphComparison

src/app/components/StateRoute/StateRoute.tsx

@@ -6,7 +6,7 @@
 /* eslint-disable max-len */
 /* eslint-disable object-curly-newline */
 import React from 'react';
-import { MemoryRouter as Router, Route, NavLink, Routes } from 'react-router-dom';
+import { MemoryRouter as Router, Route, NavLink, Routes, Outlet, Link } from 'react-router-dom';
 import { ParentSize } from '@visx/responsive';
 import Tree from './Tree';
 import ComponentMap from './ComponentMap/ComponentMap';
@@ -41,158 +41,15 @@ const StateRoute = (props: StateRouteProps) => {
   const hierarchy = propsHierarchy || tabsHierarchy; //JR: RETURN TO THIS: alias to deconstruct from props and tab with the same name, aliases were deleted above
   const viewIndex = propsViewIndex || tabsViewIndex;
 
-  // const renderComponentMap = () => {
-  //   if (hierarchy) {
-  //     // if hierarchy was initialized/created render the Map
-  //     return (
-  //       <ParentSize className='componentMapContainer'>
-  //         {({ width, height }) => (
-  //           // eslint-disable-next-line react/prop-types
-  //           <ComponentMap
-  //             currentSnapshot={currLocation.stateSnapshot}
-  //             width={width}
-  //             height={height}
-  //           />
-  //         )}
-  //       </ParentSize>
-  //     );
-  //   }
-  //   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 renderTree = () => {
-  //   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>; // otherwise, inform the user that there has been no state change in the target/hooked application.
-  // };
-
-    // let LCPColor: String;
-    // let FIDColor: String;
-    // let FCPColor: String;
-    // let TTFBColor: String;
-    // let CLSColor: String;
-    // let INPColor: 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)', 'Time to First Byte (TTFB)', 'Cumulative Layout Shift (CLS)', and 'Interaction to Next Paint (INP)' based on webMetrics outputs.
-    // if (webMetrics.LCP <= 2500) LCPColor = '#0bce6b';
-    // if (webMetrics.LCP > 2500 && webMetrics.LCP <= 4000) LCPColor = '#fc5a03';
-    // if (webMetrics.LCP > 4000) LCPColor = '#fc2000';
-
-    // if (webMetrics.FID <= 100) FIDColor = '#0bce6b';
-    // if (webMetrics.FID > 100 && webMetrics.FID <= 300) FIDColor = '#fc5a03';
-    // if (webMetrics.FID > 300) FIDColor = '#fc2000';
-
-    // if (webMetrics.FCP <= 1800) FCPColor = '#0bce6b';
-    // if (webMetrics.FCP > 1800 && webMetrics.FCP <= 3000) FCPColor = '#fc5a03';
-    // if (webMetrics.FCP > 3000) FCPColor = '#fc2000';
-
-    // if (webMetrics.TTFB <= 800) TTFBColor = '#0bce6b';
-    // if (webMetrics.TTFB > 800 && webMetrics.TTFB <= 1800) TTFBColor = '#fc5a03';
-    // if (webMetrics.TTFB > 1800) TTFBColor = '#fc2000';
-
-    // if (webMetrics.CLS <= 0.1) CLSColor = '#0bce6b';
-    // if (webMetrics.CLS > 0.1 && webMetrics.CLS <= 0.25) CLSColor = '#fc5a03';
-    // if (webMetrics.CLS > 0.25) CLSColor = '#fc2000';
-
-    // if (webMetrics.INP <= 200) INPColor = '#0bce6b';
-    // if (webMetrics.INP > 200 && webMetrics.INP <= 500) INPColor = '#fc5a03';
-    // if (webMetrics.INP > 500) INPColor = '#fc2000';
-
-    // return (
-    //   <div className='web-metrics-container'>
-    //     <WebMetrics
-    //       color={LCPColor}
-    //       series={webMetrics.LCP ? [webMetrics.LCP / 70 < 100 ? webMetrics.LCP / 70 : 100] : 0}
-    //       formatted={(_) =>
-    //         typeof webMetrics.LCP !== 'number' ? '- ms' : `${webMetrics.LCP.toFixed(2)} ms`
-    //       }
-    //       score={['2500 ms', '4000 ms']}
-    //       overLimit={webMetrics.LCP > 7000}
-    //       label='Largest Contentful Paint'
-    //       name='Largest Contentful Paint'
-    //       description='Measures loading performance.'
-    //     />
-    //     <WebMetrics
-    //       color={FIDColor}
-    //       series={webMetrics.FID ? [webMetrics.FID / 5 < 100 ? webMetrics.FID / 5 : 100] : 0}
-    //       formatted={(_) =>
-    //         typeof webMetrics.FID !== 'number' ? '- ms' : `${webMetrics.FID.toFixed(2)} ms`
-    //       }
-    //       score={['100 ms', '300 ms']}
-    //       overLimit={webMetrics.FID > 500}
-    //       label='First Input Delay'
-    //       name='First Input Delay'
-    //       description='Measures interactivity.'
-    //     />
-    //     <WebMetrics
-    //       color={FCPColor}
-    //       series={webMetrics.FCP ? [webMetrics.FCP / 50 < 100 ? webMetrics.FCP / 50 : 100] : 0}
-    //       formatted={(_) =>
-    //         typeof webMetrics.FCP !== 'number' ? '- ms' : `${webMetrics.FCP.toFixed(2)} ms`
-    //       }
-    //       score={['1800 ms', '3000 ms']}
-    //       overLimit={webMetrics.FCP > 5000}
-    //       label='First Contentful Paint'
-    //       name='First Contentful Paint'
-    //       description='Measures the time it takes the browser to render the first piece of DOM content.'
-    //     />
-    //     <WebMetrics
-    //       color={TTFBColor}
-    //       series={webMetrics.TTFB ? [webMetrics.TTFB / 30 < 100 ? webMetrics.TTFB / 30 : 100] : 0}
-    //       formatted={(_) =>
-    //         typeof webMetrics.TTFB !== 'number' ? '- ms' : `${webMetrics.TTFB.toFixed(2)} ms`
-    //       }
-    //       score={['800 ms', '1800 ms']}
-    //       overLimit={webMetrics.TTFB > 3000}
-    //       label='Time To First Byte'
-    //       name='Time to First Byte'
-    //       description='Measures the time it takes for a browser to receive the first byte of page content.'
-    //     />
-    //     <WebMetrics
-    //       color={CLSColor}
-    //       series={webMetrics.CLS ? [webMetrics.CLS * 200 < 100 ? webMetrics.CLS * 200 : 100] : 0}
-    //       formatted={(_) =>
-    //         `CLS Score: ${
-    //           typeof webMetrics.CLS !== 'number'
-    //             ? 'N/A'
-    //             : `${webMetrics.CLS < 0.01 ? '~0' : webMetrics.CLS.toFixed(2)}`
-    //         }`
-    //       }
-    //       score={['0.1', '0.25']}
-    //       overLimit={webMetrics.CLS > 0.5}
-    //       label='Cumulative Layout Shift'
-    //       name='Cumulative Layout Shift'
-    //       description={`Quantifies the visual stability of a web page by measuring layout shifts during the application's loading and interaction.`}
-    //     />
-    //     <WebMetrics
-    //       color={INPColor}
-    //       series={webMetrics.INP ? [webMetrics.INP / 7 < 100 ? webMetrics.INP / 7 : 100] : 0}
-    //       formatted={(_) =>
-    //         typeof webMetrics.INP !== 'number' ? '- ms' : `${webMetrics.INP.toFixed(2)} ms`
-    //       }
-    //       score={['200 ms', '500 ms']}
-    //       overLimit={webMetrics.INP > 700}
-    //       label='Interaction to Next Paint'
-    //       name='Interaction to Next Paint'
-    //       description={`Assesses a page's overall responsiveness to user interactions by observing the latency of all click, tap, and keyboard interactions that occur throughout the lifespan of a user's visit to a page`}
-    //     />
-    //   </div>
-    // );
-  
-
   return (
     <div className='app-body'>
       <div className='navbar'>
         <NavLink to='/' className='router-link map-tab' end>
           Map
         </NavLink>
-        <NavLink className='router-link performance-tab' to='performance'>
+        <Link className='router-link performance-tab' to='/performance'>
           Performance
-        </NavLink>
+        </Link>
         <NavLink className='router-link history-tab' to='/history'>
           History
         </NavLink>
@@ -205,21 +62,7 @@ const StateRoute = (props: StateRouteProps) => {
       </div>
       <div className='app-content'>
         <Routes>
-          <Route path='performance' element={hierarchy ? 
-            <ParentSize>
-              {({ width, height }) => (
-                <PerformanceVisx
-                  width={width}
-                  height={height}
-                  snapshots={snapshots}
-                  // note: is propdrilled within Performance Visx, but doesn't seem to be used
-                  changeSlider={changeSlider}
-                  changeView={changeView}
-                  hierarchy={hierarchy}
-                />
-              )}
-            </ParentSize> : <div className='noState'>{NO_STATE_MSG}</div>
-        } />
+          
           <Route path='/history' element={ hierarchy ?
             <ParentSize>
               {({ width, height }) => (
@@ -236,20 +79,41 @@ const StateRoute = (props: StateRouteProps) => {
                 />
               )}
             </ParentSize> : <div className='noState'>{NO_STATE_MSG}</div>} />
+            <Route path='/performance/*' element={hierarchy ? 
+            <div style={{height: "100%"}}>
+              <ParentSize className='performanceContainer'>
+                {({ width, height }) => (
+                  <PerformanceVisx
+                    width={width}
+                    height={height}
+                    snapshots={snapshots}
+                    // note: is propdrilled within Performance Visx, but doesn't seem to be used
+                    changeSlider={changeSlider}
+                    changeView={changeView}
+                    hierarchy={hierarchy}
+                  />
+                )}
+              </ParentSize>
+              <Outlet/>
+            </div>
+            : <div className='noState'>{NO_STATE_MSG}</div>
+        } />
           <Route path='/webMetrics' element={<WebMetricsContainer webMetrics={webMetrics} />} />
           <Route path='/tree' element={<Tree snapshot={snapshot} snapshots={snapshots} currLocation={currLocation} />} />
-          <Route path='*' element={hierarchy ? <div>
-            {/* <ParentSize className='componentMapContainer'>
-              {({ width, height }) => (
-                // eslint-disable-next-line react/prop-types */}
-                <ComponentMap
+          <Route path='*' element={hierarchy ?
+            <ParentSize className='componentMapContainer'>
+              {({ width, height }) => {
+                // eslint-disable-next-line react/prop-types
+                const maxHeight: number = 1200;
+                const h = Math.min(height, maxHeight)
+                return (<ComponentMap
                   currentSnapshot={currLocation.stateSnapshot}
-                  // width={width}
-                  // height={height}
-                />
-              {/* )} */}
-            {/* </ParentSize> */}
-            </div> : null} />
+                  width={width}
+                  height={h}
+                />)
+                }}
+            </ParentSize>
+             : null} />
         </Routes>
       </div>
     </div>

src/app/containers/StateContainer.tsx

@@ -22,7 +22,7 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
 
   return (
     <div className='state-container'>
-      <div className='main-navbar-container'>
+      {/* <div className='main-navbar-container'>
             <div className='main-navbar-text' />
             <div className='main-navbar'>
               <NavLink className='main-router-link' to='/'>
@@ -34,10 +34,15 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
             </div>
           </div>
           <Routes>
-            <Route path='/diff' element={<DiffRoute snapshot={snapshot} />} />
+            <Route path='/diff/*' element={
+            <div>
+              <DiffRoute snapshot={snapshot} />
+              <Outlet/>
+            </div>} />
             <Route
-              path='/'
-              element={
+              path='*'
+              element={ 
+              <div>*/}
               <StateRoute
                 webMetrics={webMetrics}
                 viewIndex={viewIndex}
@@ -46,9 +51,11 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
                 snapshots={snapshots}
                 currLocation={currLocation}
               />
-              }
+              <Outlet/>
+              {/*</div>
+               }
            />
-          </Routes>
+          </Routes> */}
     </div>
   );
 };

src/app/jsondiffpatch.d.ts

@@ -0,0 +1,3 @@
+declare module 'jsondiffpatch/formatters/html' {
+  export * as formatters from 'jsondiffpatch/lib/formatters/html';
+}

src/app/styles/layout/_stateContainer.scss

@@ -113,7 +113,7 @@
     align-items: center;
     height: 30px;
     position: sticky;
-    top: 40px; //JR 12.16.23 @12:15pm: this hardcoding is not best practice, should revisit to figure out a more dynamic way of sticking the navbar to the bottom of the main-navbar
+    top: 0px; //JR 12.16.23 @12:15pm: this hardcoding is not best practice, should revisit to figure out a more dynamic way of sticking the navbar to the bottom of the main-navbar
     left: 0px;
     z-index: 1;
     @extend %disable-highlight;
@@ -249,3 +249,11 @@
 .tooltipData-JSONTree::-webkit-scrollbar-track {
   background: #51565e;
 }
+
+.app-body {
+  height: 100%;
+}
+
+.app-content {
+  height: 100%;
+}