resolved merges from updated DEV branch

Author: KyEBell

package.json

@@ -33,6 +33,8 @@
   },
   "contributors": [
     "Abaas Khorrami",
+    "Alex Gomez",
+    "Alexander Landeros",
     "Ali Rahman",
     "Andy Tsou",
     "Andy Wong",
@@ -43,52 +45,71 @@
     "Caner Demir",
     "Carlos Perez",
     "Chris Flannery",
+    "Chris Guizzetti",
     "Christopher LeBrett",
     "Cole Styron",
+    "Daljit Gill",
+    "Dane Corpion",
+    "David Bernstein",
     "David Chai",
     "David Kim",
     "Dennis Lopez",
+    "Edar Liu",
     "Edwin Menendez",
+    "Eivind Del Fierro",
     "Ergi Shehu",
     "Eric Yun",
     "Freya Wu",
     "Gabriela Jardim Aquino",
     "Gregory Panciera",
     "Haejin Jo",
+    "Harry Fox",
     "Hien Nguyen",
     "Jack Crish",
     "Jackie Yuan",
     "James McCollough",
     "James Nghiem",
     "Jasmine Noor",
+    "Jason Victor",
     "Joseph Park",
+    "Joseph Stern",
     "Josh Kim",
     "Joshua Howard",
     "Kevin Fey",
     "Kevin HoEun Lee",
     "Kevin Ngo",
     "Kim Mai Nguyen",
+    "Kris Sorensen",
+    "Kristina Wallen",
+    "Kyle Bell",
     "Lance Ziegler",
     "Lina Shin",
     "Mark Teets",
     "Mike Bednarz",
     "Minzo Kim",
+    "Morah Geist",
     "Nathanael Wa Mwenze",
+    "Nathan Richardson",
     "Ngoc Zwolinski",
     "Nick Huemmer",
     "Peter Lam",
     "Prasanna Malla",
+    "Quan Le",
     "Rajeeb Banstola",
     "Raymond Kwan",
     "Robby Tipton",
+    "Robert Maeda",
     "Rocky Lin",
     "Ruth Anam",
     "Ryan Dang",
     "Sergei Liubchenko",
+    "Sean Kelly",
     "Sierra Swaby",
     "Tania Lind",
     "Viet Nguyen",
+    "Vincent Nguyen",
     "Wilton Lee",
+    "Yididia Ketema",
     "Yujin Kang",
     "Zachary Freeman"
   ],

src/app/components/Action.tsx

@@ -33,7 +33,7 @@ const Action = (props: ActionProps): JSX.Element => {
     last, // boolean on (whether the view index is less than 0) AND if (the index is the same as the last snapshot's index value in hierarchyArr) in 'ActionContainer'
     index, // from snapshot.index in "ActionContainer's" 'hierarchyArr'
     sliderIndex, // from tabs[currentTab] object in 'ActionContainer'
-    dispatch, // dispatch function from our storeContext in 'ActionContainer'
+    dispatch,
     displayName, // from snapshot.displayName in "ActionContainer's" 'hierarchyArr'
     componentData, // from snapshot.componentData in "ActionContainer's" 'hierarchyArr'
     viewIndex, // from tabs[currentTab] object in 'ActionContainer'

src/app/components/Loader.tsx

@@ -2,8 +2,8 @@
 
 import React from 'react';
 import { ClipLoader } from 'react-spinners';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCheck, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 
 /*
 This file is what decides what icon (loading, checkmark, exclamation point) is displayed next to the checks in the ErrorContainer loading screen:
@@ -15,9 +15,9 @@ This file is what decides what icon (loading, checkmark, exclamation point) is d
 
 const handleResult = (result: boolean): JSX.Element =>
   result ? (
-    <FontAwesomeIcon icon={faCheck} className='check' size='lg' /> // if result boolean is true, we display a checkmark icon
+    <CheckCircleOutlineIcon className='check'/> // if result boolean is true, we display a checkmark icon
   ) : (
-    <FontAwesomeIcon icon={faExclamationCircle} className='fail' size='lg' /> // if the result boolean is false, we display a fail icon
+    <ErrorOutlineIcon className='fail'/> // if the result boolean is false, we display a fail icon
   );
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types

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

@@ -39,7 +39,7 @@ export default function ComponentMap({
   const [layout, setLayout] = useState('cartesian'); // We create a local state "layout" and set it to a string 'cartesian'
   const [orientation, setOrientation] = useState('vertical'); // We create a local state "orientation" and set it to a string 'vertical'. 
   const [linkType, setLinkType] = useState('diagonal'); // We create a local state "linkType" and set it to a string 'diagonal'. 
-  const [stepPercent, setStepPercent] = useState(10); // We create a local state "stepPercent" and set it to a number '10'.
+  const [stepPercent, setStepPercent] = useState(0.5); // We create a local state "stepPercent" and set it to a number '0.5'. This will be used to scale the Map component's link: Step to 50%
   const [selectedNode, setSelectedNode] = useState('root'); // We create a local state "selectedNode" and set it to a string 'root'. 
   const [, dispatch] = useStoreContext(); // we destructure the returned context object from the invocation of the useStoreContext function to get access to our dispatch function
 

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

@@ -38,7 +38,7 @@ const collectNodes = (node: Node): void => {
 export default function LinkControls({
   layout, // from the layout local state (initially 'cartesian') in 'ComponentMap'
   linkType, // from linkType local state (initially 'vertical') in 'ComponentMap'
-  stepPercent, // from stepPercent local state (initially '10') in 'ComponentMap'
+  stepPercent, // from stepPercent local state (initially '0.5') in 'ComponentMap'
   setLayout, // from the layout local state in 'ComponentMap'
   setOrientation, // from the orientation local state in 'ComponentMap'
   setLinkType, // from the linkType local state in 'ComponentMap'
@@ -63,7 +63,8 @@ export default function LinkControls({
       </select>
       &nbsp;&nbsp;
 
-      <label>Orientation:</label> {/* Controls for the Orientation selection, this dropdown will be disabled when the polar layout is selected as it is not needed */}
+      <label>Orientation:</label> {/* Toggle record button to pause state changes on target application */}
+      {/* Controls for the Orientation selection, this dropdown will be disabled when the polar layout is selected as it is not needed */}
       &nbsp;
       <select
         onClick={(e) => e.stopPropagation()}

src/app/components/StateRoute/History.tsx

@@ -24,8 +24,8 @@ const defaultMargin: DefaultMargin = {
 // below we destructure the props
 function History(props: Record<string, unknown>): JSX.Element {
   const {
-    width: totalWidth,
-    height: totalHeight,
+    width: totalWidth, // from ParentSize provided in StateRoute
+    height: totalHeight, // from ParentSize provided in StateRoute
     margin = defaultMargin,
     hierarchy, // from 'tabs[currentTab]' object in 'MainContainer'
     dispatch, // from useStoreContext in 'StateRoute'

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

@@ -54,26 +54,28 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
     showTooltip // function to set tooltip state
   } = useTooltip<TooltipData>(); // returns an object with several properties that you can use to manage the tooltip state of your component
   let tooltipTimeout: number;
-  const {
+  const { 
     containerRef, // Access to the container's bounding box. This will be empty on first render. 
     TooltipInPortal // TooltipWithBounds in a Portal, outside of your component DOM tree
-  } = useTooltipInPortal({ // Visx hook
+   } = useTooltipInPortal({ // Visx hook
     detectBounds: true, // use TooltipWithBounds
     scroll: true, // when tooltip containers are scrolled, this will correctly update the Tooltip position
   });
 
   const keys = Object.keys(data.componentData);
   const getSnapshotId = (d: snapshot) => d.snapshotId; // data accessor (used to generate scales) and formatter (add units for on hover box). d comes from data.barstack post filtered data
 
+  const getSnapshotId = (d: snapshot) => d.snapshotId; // data accessor (used to generate scales) and formatter (add units for on hover box). d comes from data.barstack post filtered data
   const formatSnapshotId = (id) => `Snapshot ID: ${id}`; // returns snapshot id when invoked in tooltip section
   const formatRenderTime = (time) => `${time} ms `; // returns render time when invoked in tooltip section
 
+  
   const snapshotIdScale = scaleBand<string>({ // create visualization SCALES with cleaned data
     domain: data.barStack.map(getSnapshotId),
     padding: 0.2,
   });
 
-  const renderingScale = scaleLinear<number>({  // Adjusts y axis to match/ bar height
+  const renderingScale = scaleLinear<number>({ // Adjusts y axis to match/ bar height
     domain: [0, data.maxTotalRender],
     nice: true,
   });
@@ -94,7 +96,7 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
     title: tabs[currentTab].title,
     data,
   };
-  
+
   useEffect(() => { // Animates the save series button.
     const saveButtons = document.getElementsByClassName('save-series-button'); // finds the buttom in the DOM
     for (let i = 0; i < saveButtons.length; i++) {
@@ -108,19 +110,20 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
     }
   });
 
-  const saveSeriesClickHandler = () => { // CURRENTLY DOES NOT SAVE
+  const saveSeriesClickHandler = () => { // function to save the currently selected series
     if (tabs[currentTab].seriesSavedStatus === 'inputBoxOpen') {
       const actionNames = document.getElementsByClassName('actionname');
       for (let i = 0; i < actionNames.length; i += 1) {
         toStorage.data.barStack[i].name = actionNames[i].value;
       }
-      dispatch(save(toStorage, seriesNameInput));
-      setSeriesNameInput(`Series ${comparison.length}`);
+      dispatch(save(toStorage, seriesNameInput)); // saves the series under seriesName
+      setSeriesNameInput(`Series ${comparison.length}`); // sends a reducer that saves the series/toStorage object the user wants to chrome local storage
       return;
     }
     dispatch(save(toStorage)); // sends a reducer that saves the series/toStorage object the user wants to chrome local storage
   };
 
+  
   const textbox = // Need to change so textbox isn't empty before saving
     tabs[currentTab].seriesSavedStatus === 'inputBoxOpen' ? (
       <input
@@ -215,7 +218,6 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
                           }, 300)),
                         );
                       }}
-                      
                       onMouseMove={(event) => { // Cursor position in window updates position of the tool tip.
                         dispatch(onHover(data.componentData[bar.key].rtid));
                         if (tooltipTimeout) clearTimeout(tooltipTimeout);
@@ -294,8 +296,8 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
             {' '}
             <strong>{tooltipData.key}</strong>{' '}
           </div>
-          <div>{data.componentData[tooltipData.key].stateType}</div>
-          <div> {formatRenderTime(tooltipData.bar.data[tooltipData.key])} </div>
+          <div>{'State: ' + data.componentData[tooltipData.key].stateType}</div>
+          <div> {'Render time: ' + formatRenderTime(tooltipData.bar.data[tooltipData.key])} </div>
           <div>
             {' '}
             <small>{formatSnapshotId(getSnapshotId(tooltipData.bar.data))}</small>