Merge branch 'master' of https://github.com/oslabs-beta/reactime

Pulled in team commits.

Author: hfox0290

src/app/components/Action.tsx

@@ -41,11 +41,14 @@ interface ActionProps {
 // index and delta props were removed from Action.jsx  */
 // viewIndex and handleonkeyDown added to props
 const Action = (props: ActionProps): JSX.Element => {
+
   const {
     selected, last, index, sliderIndex, dispatch, displayName, componentName,
     componentData, viewIndex, handleOnkeyDown,
   } = props;
 
+  // nathan test for props
+  console.log('componentName: ', componentName);
   /**
    * @function cleanTime: Displays render times for state changes
    * @returns render display time in seconds in miliseconds
@@ -91,7 +94,8 @@ const Action = (props: ActionProps): JSX.Element => {
       tabIndex={index}
     >
       <div className="action-component-text">
-        {`${displayName}:  ${componentName !== 'nameless' ? componentName : ''} `}
+        {/* {`${displayName}:  ${componentName !== 'nameless' ? componentName : ''} `} */}
+        {`displayName: ${displayName}`}
       </div>
       <button
         className="time-button"

src/app/components/App.tsx

@@ -12,6 +12,7 @@ const initialState:{port: null|number,
   };
 
 function App(): JSX.Element {
+  console.log("window")
   return (
     <StoreContext.Provider value={useReducer(mainReducer, initialState)}>
       <MainContainer />

src/app/components/BarGraphComparison.tsx

@@ -74,8 +74,9 @@ const BarGraphComparison = (props) => {
   const [maxRender, setMaxRender] = React.useState(data.maxTotalRender);
 
   function titleFilter(comparisonArray) {
+    console.log("titleFilter comparison array", comparisonArray)
     return comparisonArray.filter(
-      (elem) => elem.title === tabs[currentTab].title
+      (elem) => elem.title.split('-')[1] === tabs[currentTab].title.split('-')[1]
     );
   }
 
@@ -165,18 +166,22 @@ const BarGraphComparison = (props) => {
   const classes = useStyles();
 
   const handleChange = (event) => {
+    console.log('in handlechange function')
+    console.log('event.target.value', event.target.value)
     setSeries(event.target.value);
-    setXpoints();
+    // setXpoints();
   };
 
   const handleClose = () => {
+    console.log('in handleclose function')
     setOpen(false);
-    setXpoints();
+    // setXpoints();
   };
 
   const handleOpen = () => {
+    console.log('in handleopen function')
     setOpen(true);
-    setXpoints();
+    // setXpoints();
   };
 
   //manually assignin X -axis points with tab ID.

src/app/components/Diff.tsx

@@ -61,6 +61,8 @@ function Diff(props: DiffProps) {
   // diff function returns a comparison of two objects, one has an updated change
   // just displays stateful data
   const delta = diff(previousDisplay, snapshot);
+  // nathan test
+  console.log('delta', delta);
   // returns html in string
   // just displays stateful data
   const html = formatters.html.format(delta, previousDisplay);

src/app/components/PerformanceVisx.tsx

@@ -81,11 +81,13 @@ const allStorage = () => {
   const values = [];
   const keys = Object.keys(localStorage);
   let i = keys.length;
+  console.log('allstorage keys', keys)
 
   while (i--) {
     const series = localStorage.getItem(keys[i]);
     values.push(JSON.parse(series));
   }
+  console.log('allstorage values', values)
   return values;
 };
 

src/app/containers/ActionContainer.tsx

@@ -20,6 +20,8 @@ function ActionContainer(props) {
   let actionsArr = [];
   const hierarchyArr: any[] = [];
 
+  
+
   // function to traverse state from hiararchy and also getting information on display name and component name
   const displayArray = (obj: {
     stateSnapshot: { children: any[] };
@@ -38,7 +40,9 @@ function ActionContainer(props) {
         index: obj.index,
         displayName: `${obj.name}.${obj.branch}`,
         state: obj.stateSnapshot.children[0].state,
-        componentName: obj.stateSnapshot.children[0].name,
+        // componentName: obj.stateSnapshot.children[0].name,
+        // nathan testing new entries for component name, original above
+        componentName: obj.stateSnapshot,
         componentData:
           JSON.stringify(obj.stateSnapshot.children[0].componentData) === '{}'
             ? ''
@@ -60,7 +64,7 @@ function ActionContainer(props) {
   // handles keyboard presses, function passes an event and index of each action-component
   function handleOnKeyDown(e: KeyboardEvent, i: number) {
     let currIndex = i;
-    // up array key pressed
+    // up arrow key pressed
     if (e.keyCode === 38) {
       currIndex -= 1;
       if (currIndex < 0) return;
@@ -109,14 +113,14 @@ function ActionContainer(props) {
           viewIndex={viewIndex}
         />
       );
-    }
+    },
   );
   useEffect(() => {
     setActionView(true);
   }, []);
 
-  //the conditional logic below will cause ActionContainer.test.tsx to fail as it cannot find the Empty button
-  //UNLESS actionView={true} is passed into <ActionContainer /> in the beforeEach() call in ActionContainer.test.tsx
+  // the conditional logic below will cause ActionContainer.test.tsx to fail as it cannot find the Empty button
+  // UNLESS actionView={true} is passed into <ActionContainer /> in the beforeEach() call in ActionContainer.test.tsx
   return (
     <div id='action-id' className='action-container'>
       <div id='arrow'>

src/backend/linkFiber.ts

@@ -52,6 +52,9 @@ let recoilDomNode = {};
 if (window[`$recoilDebugStates`]) {
   isRecoil = true;
 }
+console.log('window', window);
+console.log('isrecoil', isRecoil)
+
 
 // This is deprecated Recoil code.  Recoil as of 01-03-2021
 // does not work well with Reactime.  Leaving any Recoil
@@ -89,6 +92,9 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
   if (!snap.tree) {
     snap.tree = new Tree('root', 'root');
   }
+  // nathan test breakpoint
+  console.log('snap: ', snap);
+
   const payload = snap.tree.cleanTreeCopy();
   // if it's Recoil - run different actions?
   if (isRecoil) {
@@ -105,6 +111,7 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
   // the postMessage action will be received on the content script to later update the tabsObj
   // this will fire off everytime there is a change in test application
   window.postMessage(
+
     {
       action: 'recordSnap',
       payload,
@@ -218,7 +225,7 @@ function createTree(
   tree: Tree = new Tree('root', 'root'),
   fromSibling = false
 ) {
-    console.log('currentFiber: ', currentFiber);
+
   // Base case: child or sibling pointed to null
   if (!currentFiber) return null;
   if (!tree) return tree;
@@ -239,6 +246,9 @@ function createTree(
     treeBaseDuration,
   } = currentFiber;
 
+  // console.log('currentFiber: ', currentFiber);
+  // console.log('tag', tag);
+
   //Checks Recoil Atom and Selector Relationships
   if (
     currentFiber.memoizedState &&
@@ -498,9 +508,16 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     console.log("exporting LinkFiber!")
     // react devtools global hook is a global object that was injected by the React Devtools content script, allows access to fiber nodes and react version
     const devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    // nathan test
+    console.log('devTools', devTools);
     const reactInstance = devTools ? devTools.renderers.get(1) : null;
+    // nathan test
+    console.log('reactInstance', reactInstance);
     fiberRoot = devTools.getFiberRoots(1).values().next().value;
-
+    // nathan test
+    console.log('devTools.getFiberRoots(1)', devTools.getFiberRoots(1));
+    console.log('devTools.getFiberRoots(1).values()', devTools.getFiberRoots(1).values());
+    console.log('fiberRoot: ', fiberRoot);
     const throttledUpdateSnapshot = throttle(
       () => updateSnapShotTree(snap, mode),
       70
@@ -510,6 +527,8 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     if (reactInstance && reactInstance.version) {
       devTools.onCommitFiberRoot = (function (original) {
         return function (...args) {
+          // nathan test
+          console.log('args', args);
           // eslint-disable-next-line prefer-destructuring
           fiberRoot = args[1];
           if (doWork) {

src/extension/background.js

@@ -12,7 +12,7 @@ const metrics = {};
 
 // This function will create the first instance of the test app's tabs object
 // which will hold test app's snapshots, link fiber tree info, chrome tab info, etc.
-//console.log("hello from background.js");
+// console.log("hello from background.js");
 function createTabObj(title) {
   // TO-DO for save button
     // Save State
@@ -135,6 +135,8 @@ chrome.runtime.onConnect.addListener((port) => {
   port.onMessage.addListener((msg) => {
     // msg is action denoting a time jump in devtools
 
+    // nathan tests below
+    console.log('msg: ', msg);
     // ---------------------------------------------------------------
     // message incoming from devTools should look like this:
     // {
@@ -195,8 +197,13 @@ chrome.runtime.onConnect.addListener((port) => {
   });
 });
 
+// nathan test
+console.log('top level log in background.js');
 // background.js listening for a message from contentScript.js
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  // nathan test
+  console.log('request: ', request);
+  console.log('sender: ', sender);
   // IGNORE THE AUTOMATIC MESSAGE SENT BY CHROME WHEN CONTENT SCRIPT IS FIRST LOADED
   if (request.type === 'SIGN_CONNECT') {
     return true;
@@ -437,6 +444,7 @@ chrome.runtime.onInstalled.addListener(() => {
 // when context menu is clicked, listen for the menuItemId,
 // if user clicked on reactime, open the devtools window
 chrome.contextMenus.onClicked.addListener(({ menuItemId }) => {
+  console.log('this is the menuItemId: ', menuItemId);
   const options = {
     type: 'panel',
     left: 0,