From c25a7a8e589711c18ad64b9956df52c269d90160 Mon Sep 17 00:00:00 2001
From: Sanjay <sanjaylavingia@gmail.com>
Date: Mon, 5 Oct 2020 11:05:24 -0700
Subject: [PATCH 01/27] hoverFeature comments and console.log testing

---
 src/app/components/ComponentMap.tsx  | 5 ++++-
 src/app/components/StateRoute.tsx    | 2 ++
 src/app/containers/MainContainer.tsx | 2 +-
 src/backend/index.ts                 | 6 ++++++
 src/backend/linkFiber.ts             | 8 +++++++-
 src/backend/masterState.ts           | 1 +
 src/backend/timeJump.ts              | 3 +++
 7 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/app/components/ComponentMap.tsx b/src/app/components/ComponentMap.tsx
index cad1de7df..8a78d0ca2 100644
--- a/src/app/components/ComponentMap.tsx
+++ b/src/app/components/ComponentMap.tsx
@@ -145,10 +145,11 @@ const ComponentMap = (props: componentMapProps) => {
 
         //TODO -> Alter incoming snapshots so there is useful data to show on hover.
         nodeEnter.on('mouseover', function (d: any, i: number): any {
-       
+            console.log('mousing over')
             d3.select(this)
               .append('text')
               .text(() => {
+                //i want to return to the node in d3 the values listed in a more readable way. Right now it's just a horizontal line of text
                 return JSON.stringify(d.data.state);
               })
               .attr('x', -25)
@@ -158,6 +159,8 @@ const ComponentMap = (props: componentMapProps) => {
               .attr('stroke', 'white')
               .attr('stroke-width', .5)
               .attr('id', `popup${i}`);
+
+              
           
         });
         nodeEnter.on('mouseout', function (d: any, i: number): any {
diff --git a/src/app/components/StateRoute.tsx b/src/app/components/StateRoute.tsx
index e8192f132..3c7136d18 100644
--- a/src/app/components/StateRoute.tsx
+++ b/src/app/components/StateRoute.tsx
@@ -15,6 +15,7 @@ import Tree from './Tree';
 import ComponentMap from './ComponentMap';
 import PerfView from './PerfView';
 import AtomsRelationship from './AtomsRelationship.jsx';
+import { Console } from 'console';
 
 const History = require('./History').default;
 
@@ -53,6 +54,7 @@ const StateRoute = (props: StateRouteProps) => {
 
   // Map
   const renderComponentMap = () => {
+    console.log('inside renderComponenetMap, inside State.Route.tsx')
     if (hierarchy) {
       return (
         <ComponentMap
diff --git a/src/app/containers/MainContainer.tsx b/src/app/containers/MainContainer.tsx
index 5a2243ae2..fb3ce000d 100644
--- a/src/app/containers/MainContainer.tsx
+++ b/src/app/containers/MainContainer.tsx
@@ -23,7 +23,7 @@ const mixpanel = require("mixpanel").init("12fa2800ccbf44a5c36c37bc9776e4c0", {
 function MainContainer(): any {
   const [store, dispatch] = useStoreContext();
   const { tabs, currentTab, port: currentPort } = store;
-
+  console.log('inside MainContainer'); 
   // add event listeners to background script
   useEffect(() => {
     // only open port once
diff --git a/src/backend/index.ts b/src/backend/index.ts
index f42c1b5b7..68cad011b 100644
--- a/src/backend/index.ts
+++ b/src/backend/index.ts
@@ -45,7 +45,13 @@ function getRouteURL(node: SnapshotNode): string {
 // * Event listener for time-travel actions
 window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
   switch (action) {
+    
+
     case 'jumpToSnap':
+      // console.log('action:', action); 
+      // console.log('payload', payload); 
+      // console.log('payload.name:', payload.name)
+      // console.log(test)
       timeJump(payload, true); // * This sets state with given payload
       // Get the pathname from payload and add new entry to browser history
       // MORE: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
diff --git a/src/backend/linkFiber.ts b/src/backend/linkFiber.ts
index 883ce04ec..70195a2ed 100644
--- a/src/backend/linkFiber.ts
+++ b/src/backend/linkFiber.ts
@@ -170,6 +170,9 @@ function createTree(
   fromSibling = false
 ) {
   // Base case: child or sibling pointed to null
+  if (currentFiber.tag === 5) {
+    console.log(currentFiber.stateNode)
+  }
   if (!currentFiber) return null;
   if (!tree) return tree;
 
@@ -226,6 +229,8 @@ function createTree(
       stateNode.state,
       stateNode
     );
+    console.log(componentData)
+    // console.log('stateNode inside of line 232:', stateNode)
     newState = stateNode.state;
     componentFound = true;
   }
@@ -342,6 +347,7 @@ function createTree(
     // so attach children to the newly appended child.
     // Otherwise, attach children to this same node.
     circularComponentTable.add(child);
+    // console.log(createTree(child, newNode))
     createTree(child, newNode);
   }
   // Recurse on siblings
@@ -369,7 +375,7 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     const devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     const reactInstance = devTools ? devTools.renderers.get(1) : null;
     fiberRoot = devTools.getFiberRoots(1).values().next().value;
-
+    console.log(fiberRoot); 
     const throttledUpdateSnapshot = throttle(() => updateSnapShotTree(snap, mode), 70);
     document.addEventListener('visibilitychange', onVisibilityChange);
     if (reactInstance && reactInstance.version) {
diff --git a/src/backend/masterState.ts b/src/backend/masterState.ts
index db20def04..72986ae78 100644
--- a/src/backend/masterState.ts
+++ b/src/backend/masterState.ts
@@ -16,6 +16,7 @@ let index = 0;
 
 export default {
   saveNew: (state, component): number => {
+    console.log('this is creating our snapshots of state, INSIDE MASTERSTATE, COMPONENTACTIONS RECORD:', componentActionsRecord)
     componentActionsRecord[index] = { state, component };
     index++;
     return index - 1;
diff --git a/src/backend/timeJump.ts b/src/backend/timeJump.ts
index adf1b1aa0..c2a03bd59 100644
--- a/src/backend/timeJump.ts
+++ b/src/backend/timeJump.ts
@@ -1,3 +1,4 @@
+import { Console } from 'console';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable max-len */
@@ -25,12 +26,14 @@ export default (origin, mode) => {
   // Recursively change state of tree
   // Set the state of the origin tree if the component is stateful
   function jump(target, firstCall = false) {
+    // console.log('INSIDE JUMP FUNCTION, TARGET', target)
     if (!target) return;
 
     if (target.state === 'stateless') {
       target.children.forEach(child => jump(child));
       return;
     }
+    console.log('COMPONENT ACTION RECORD:', circularComponentTable)
     const component = componentActionsRecord.getComponentByIndex(
       target.componentData.index,
     );

From 9a8984bcbace8ecdfe788956c95b99d715db0a81 Mon Sep 17 00:00:00 2001
From: SanjayLavingia <64515025+SanjayLavingia@users.noreply.github.com>
Date: Mon, 5 Oct 2020 12:46:04 -0700
Subject: [PATCH 02/27] (add) added  onHover case inside of the switch
 statement in index.ts

---
 src/backend/index.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/backend/index.ts b/src/backend/index.ts
index 68cad011b..cb7f11b2f 100644
--- a/src/backend/index.ts
+++ b/src/backend/index.ts
@@ -65,6 +65,9 @@ window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
     case 'setPause':
       mode.paused = payload;
       break;
+    case 'onHover':
+      console.log('WE MADE IT ALL THE WAY FROM THE FRONTEND! HERE\'S THE PAYLOAD:');
+      break;
     default:
       break;
   }

From ce05de7b8497f504da7124cf2aab71b7e5222a3f Mon Sep 17 00:00:00 2001
From: SanjayLavingia <64515025+SanjayLavingia@users.noreply.github.com>
Date: Mon, 5 Oct 2020 12:59:59 -0700
Subject: [PATCH 03/27] (delete) removed console.log's and commented some of
 them out.. Reminder: clean the files of console.logs

---
 src/backend/linkFiber.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/backend/linkFiber.ts b/src/backend/linkFiber.ts
index 70195a2ed..5053383e5 100644
--- a/src/backend/linkFiber.ts
+++ b/src/backend/linkFiber.ts
@@ -170,9 +170,9 @@ function createTree(
   fromSibling = false
 ) {
   // Base case: child or sibling pointed to null
-  if (currentFiber.tag === 5) {
-    console.log(currentFiber.stateNode)
-  }
+  // if (currentFiber.tag === 5) {
+  //   console.log(currentFiber.stateNode)
+  // }
   if (!currentFiber) return null;
   if (!tree) return tree;
 
@@ -229,7 +229,7 @@ function createTree(
       stateNode.state,
       stateNode
     );
-    console.log(componentData)
+    // console.log(componentData)
     // console.log('stateNode inside of line 232:', stateNode)
     newState = stateNode.state;
     componentFound = true;
@@ -347,7 +347,6 @@ function createTree(
     // so attach children to the newly appended child.
     // Otherwise, attach children to this same node.
     circularComponentTable.add(child);
-    // console.log(createTree(child, newNode))
     createTree(child, newNode);
   }
   // Recurse on siblings
@@ -375,7 +374,6 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     const devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     const reactInstance = devTools ? devTools.renderers.get(1) : null;
     fiberRoot = devTools.getFiberRoots(1).values().next().value;
-    console.log(fiberRoot); 
     const throttledUpdateSnapshot = throttle(() => updateSnapShotTree(snap, mode), 70);
     document.addEventListener('visibilitychange', onVisibilityChange);
     if (reactInstance && reactInstance.version) {

From 4e6cf380a27485496637b63662f61c2587e5606a Mon Sep 17 00:00:00 2001
From: SanjayLavingia <64515025+SanjayLavingia@users.noreply.github.com>
Date: Mon, 5 Oct 2020 13:06:19 -0700
Subject: [PATCH 04/27] removed console.logs from timeJump

---
 src/backend/timeJump.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/backend/timeJump.ts b/src/backend/timeJump.ts
index c2a03bd59..5ca41fd35 100644
--- a/src/backend/timeJump.ts
+++ b/src/backend/timeJump.ts
@@ -26,14 +26,12 @@ export default (origin, mode) => {
   // Recursively change state of tree
   // Set the state of the origin tree if the component is stateful
   function jump(target, firstCall = false) {
-    // console.log('INSIDE JUMP FUNCTION, TARGET', target)
     if (!target) return;
 
     if (target.state === 'stateless') {
       target.children.forEach(child => jump(child));
       return;
     }
-    console.log('COMPONENT ACTION RECORD:', circularComponentTable)
     const component = componentActionsRecord.getComponentByIndex(
       target.componentData.index,
     );

From 2f9460fc4da799107e15dfc1536c202880eb10ff Mon Sep 17 00:00:00 2001
From: SanjayLavingia <64515025+SanjayLavingia@users.noreply.github.com>
Date: Mon, 5 Oct 2020 13:08:44 -0700
Subject: [PATCH 05/27] (delete) removed all visible console.logs from backend
 except for frontend communication project

---
 src/backend/masterState.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/backend/masterState.ts b/src/backend/masterState.ts
index 72986ae78..db20def04 100644
--- a/src/backend/masterState.ts
+++ b/src/backend/masterState.ts
@@ -16,7 +16,6 @@ let index = 0;
 
 export default {
   saveNew: (state, component): number => {
-    console.log('this is creating our snapshots of state, INSIDE MASTERSTATE, COMPONENTACTIONS RECORD:', componentActionsRecord)
     componentActionsRecord[index] = { state, component };
     index++;
     return index - 1;

From 631ae4b0c677baedd869c10eb815ddd02a431ef5 Mon Sep 17 00:00:00 2001
From: SanjayLavingia <64515025+SanjayLavingia@users.noreply.github.com>
Date: Mon, 5 Oct 2020 16:27:12 -0700
Subject: [PATCH 06/27] (added) from laptop to desktop

---
 src/app/reducers/mainReducer.js | 5 ++++-
 src/extension/contentScript.ts  | 5 +++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/app/reducers/mainReducer.js b/src/app/reducers/mainReducer.js
index 634bd8009..d47196a06 100644
--- a/src/app/reducers/mainReducer.js
+++ b/src/app/reducers/mainReducer.js
@@ -45,13 +45,16 @@ export default (state, action) => produce(state, draft => {
         // eslint-disable-next-line max-len
         // finds the name by the newIndex parsing through the hierarchy to send to background.js the current name in the jump action
         const nameFromIndex = findName(newIndex, hierarchy);
-
+        port.postMessage({
+          test: 'heres a test from the reducer'
+        })
         port.postMessage({
           action: 'jumpToSnap',
           payload: snapshots[newIndex],
           index: newIndex,
           name: nameFromIndex,
           tabId: currentTab,
+          newProp: 'newPropFromReducer'
         });
         clearInterval(intervalId);
 
diff --git a/src/extension/contentScript.ts b/src/extension/contentScript.ts
index f95501487..9f388a4f3 100644
--- a/src/extension/contentScript.ts
+++ b/src/extension/contentScript.ts
@@ -25,8 +25,10 @@ window.addEventListener('message', msg => { // runs automatically every second
 chrome.runtime.onMessage.addListener(request => { // seems to never fire
   // send the message to npm package
   const { action }: { action: string } = request;
+  console.log(request); 
   switch (action) {
     case 'jumpToSnap':
+      console.log('This is the request inside of jumpToSnap inside of the contentScripts, request:', request); 
       chrome.runtime.sendMessage(request);
       window.postMessage(request, '*');
       break;
@@ -34,6 +36,9 @@ chrome.runtime.onMessage.addListener(request => { // seems to never fire
     case 'setPause':
       window.postMessage(request, '*');
       break;
+    case 'onHover': 
+      //wtf does this do??
+      window.postMessage(request, '*'); 
     default:
       break;
   }

From ca1814f0b81898fbbe3db7df94c06b23f20f8466 Mon Sep 17 00:00:00 2001
From: Sanjay <sanjaylavingia@gmail.com>
Date: Mon, 5 Oct 2020 16:45:54 -0700
Subject: [PATCH 07/27] (n/a) finished testing port messages from reducer

---
 src/app/reducers/mainReducer.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/app/reducers/mainReducer.js b/src/app/reducers/mainReducer.js
index d47196a06..83a493f13 100644
--- a/src/app/reducers/mainReducer.js
+++ b/src/app/reducers/mainReducer.js
@@ -45,9 +45,6 @@ export default (state, action) => produce(state, draft => {
         // eslint-disable-next-line max-len
         // finds the name by the newIndex parsing through the hierarchy to send to background.js the current name in the jump action
         const nameFromIndex = findName(newIndex, hierarchy);
-        port.postMessage({
-          test: 'heres a test from the reducer'
-        })
         port.postMessage({
           action: 'jumpToSnap',
           payload: snapshots[newIndex],

From 2bfc3fad6102dfa02ac06bc90ce70fe54d548a08 Mon Sep 17 00:00:00 2001
From: Sanjay <sanjaylavingia@gmail.com>
Date: Mon, 5 Oct 2020 19:56:41 -0700
Subject: [PATCH 08/27] (added) added ON_HOVER constant

---
 src/app/constants/actionTypes.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/constants/actionTypes.ts b/src/app/constants/actionTypes.ts
index 426090137..e9020d191 100644
--- a/src/app/constants/actionTypes.ts
+++ b/src/app/constants/actionTypes.ts
@@ -13,3 +13,4 @@ export const NEW_SNAPSHOTS = 'NEW_SNAPSHOTS';
 export const SET_TAB = 'SET_TAB';
 export const DELETE_TAB = 'DELETE_TAB';
 export const SLIDER_ZERO = 'SLIDER_ZERO';
+export const ON_HOVER = 'ON_HOVER'; 

From 449d9ca00d2860334dc458702db4713a737e93d8 Mon Sep 17 00:00:00 2001
From: Sanjay <sanjaylavingia@gmail.com>
Date: Mon, 5 Oct 2020 19:58:43 -0700
Subject: [PATCH 09/27] (added) added ON_HOVER action function in action.ts

---
 src/app/actions/actions.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/app/actions/actions.ts b/src/app/actions/actions.ts
index 9801b48ee..ed410e62f 100644
--- a/src/app/actions/actions.ts
+++ b/src/app/actions/actions.ts
@@ -77,3 +77,8 @@ export const deleteTab = tab => ({
 export const resetSlider = () => ({
   type: types.SLIDER_ZERO,
 });
+
+export const onHover = () => ({
+  type: types.ON_HOVER, 
+  payload: 'PAYLOAD FROM onHover inside of action.ts'
+})
\ No newline at end of file

From 5e64300f0fd48e60b04220aefad2a1c658bc630f Mon Sep 17 00:00:00 2001
From: Sanjay <sanjaylavingia@gmail.com>
Date: Mon, 5 Oct 2020 23:09:15 -0700
Subject: [PATCH 10/27] (added) added new action onHover which takes data from
 the frontend all the way to the backend

---
 src/app/reducers/mainReducer.js | 11 +++++++++++
 src/backend/index.ts            |  6 ++----
 src/extension/contentScript.ts  |  1 +
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/app/reducers/mainReducer.js b/src/app/reducers/mainReducer.js
index 83a493f13..0af46166c 100644
--- a/src/app/reducers/mainReducer.js
+++ b/src/app/reducers/mainReducer.js
@@ -39,6 +39,17 @@ export default (state, action) => produce(state, draft => {
   };
 
   switch (action.type) {
+    case types.ON_HOVER: {
+      console.log(currentTab);
+      console.log('onHover Firedin side of the reducer');
+      port.postMessage({
+        action: 'onHover',
+        payload: 'payload from Reducer ON_HOVER',
+        tabId: currentTab,
+      })
+      break; 
+    }
+
     case types.MOVE_BACKWARD: {
       if (snapshots.length > 0 && sliderIndex > 0) {
         const newIndex = sliderIndex - 1;
diff --git a/src/backend/index.ts b/src/backend/index.ts
index cb7f11b2f..f16b19726 100644
--- a/src/backend/index.ts
+++ b/src/backend/index.ts
@@ -45,11 +45,9 @@ function getRouteURL(node: SnapshotNode): string {
 // * Event listener for time-travel actions
 window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
   switch (action) {
-    
-
     case 'jumpToSnap':
       // console.log('action:', action); 
-      // console.log('payload', payload); 
+      console.log('payload', payload); 
       // console.log('payload.name:', payload.name)
       // console.log(test)
       timeJump(payload, true); // * This sets state with given payload
@@ -66,7 +64,7 @@ window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
       mode.paused = payload;
       break;
     case 'onHover':
-      console.log('WE MADE IT ALL THE WAY FROM THE FRONTEND! HERE\'S THE PAYLOAD:');
+      console.log('WE MADE IT ALL THE WAY FROM THE FRONTEND! HERE\'S THE PAYLOAD:', payload);
       break;
     default:
       break;
diff --git a/src/extension/contentScript.ts b/src/extension/contentScript.ts
index 9f388a4f3..65f4e5f7f 100644
--- a/src/extension/contentScript.ts
+++ b/src/extension/contentScript.ts
@@ -38,6 +38,7 @@ chrome.runtime.onMessage.addListener(request => { // seems to never fire
       break;
     case 'onHover': 
       //wtf does this do??
+      console.log('onHover fired inside of ContentScripts'); 
       window.postMessage(request, '*'); 
     default:
       break;

From f181f2daf74e0e1e08407dc140e4b983b0cd8c7b Mon Sep 17 00:00:00 2001
From: Sanjay <sanjaylavingia@gmail.com>
Date: Mon, 5 Oct 2020 23:18:45 -0700
Subject: [PATCH 11/27] (added) added onHover action to ComponentMap.tsx. Now,
 when you hover over a Node in the component map on the frontend, it runs the
 dummy function for onHover

---
 src/app/components/ComponentMap.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/app/components/ComponentMap.tsx b/src/app/components/ComponentMap.tsx
index 8a78d0ca2..4f72616ee 100644
--- a/src/app/components/ComponentMap.tsx
+++ b/src/app/components/ComponentMap.tsx
@@ -6,6 +6,8 @@
 
 import React, { useEffect, useCallback } from 'react';
 import * as d3 from 'd3';
+import { useStoreContext } from '../store'
+import { onHover } from '../actions/actions'
 
 interface componentMapProps {
   x: number;
@@ -34,6 +36,7 @@ const ComponentMap = (props: componentMapProps) => {
     return makeChart(data);
   }, [data]);
 
+  const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const makeChart = useCallback(
     (data) => {
       // Establish Constants
@@ -146,6 +149,7 @@ const ComponentMap = (props: componentMapProps) => {
         //TODO -> Alter incoming snapshots so there is useful data to show on hover.
         nodeEnter.on('mouseover', function (d: any, i: number): any {
             console.log('mousing over')
+            dispatch(onHover());
             d3.select(this)
               .append('text')
               .text(() => {

From c619bd08be5d3780b54cb22acbd3d4a16e5679cf Mon Sep 17 00:00:00 2001
From: Sanjay <sanjaylavingia@gmail.com>
Date: Mon, 5 Oct 2020 23:39:31 -0700
Subject: [PATCH 12/27] (delete) removed console.log from MainContainer

---
 src/app/containers/MainContainer.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/containers/MainContainer.tsx b/src/app/containers/MainContainer.tsx
index fb3ce000d..b2450be1e 100644
--- a/src/app/containers/MainContainer.tsx
+++ b/src/app/containers/MainContainer.tsx
@@ -23,7 +23,6 @@ const mixpanel = require("mixpanel").init("12fa2800ccbf44a5c36c37bc9776e4c0", {
 function MainContainer(): any {
   const [store, dispatch] = useStoreContext();
   const { tabs, currentTab, port: currentPort } = store;
-  console.log('inside MainContainer'); 
   // add event listeners to background script
   useEffect(() => {
     // only open port once

From cca03faf7915835bb0941625f9ee6893a4fe0201 Mon Sep 17 00:00:00 2001
From: Sanjay <sanjaylavingia@gmail.com>
Date: Mon, 5 Oct 2020 23:41:26 -0700
Subject: [PATCH 13/27] (add) added onHover event in Component Map invoking
 dummy function

---
 src/app/components/ComponentMap.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/ComponentMap.tsx b/src/app/components/ComponentMap.tsx
index 4f72616ee..551b077be 100644
--- a/src/app/components/ComponentMap.tsx
+++ b/src/app/components/ComponentMap.tsx
@@ -24,7 +24,7 @@ const ComponentMap = (props: componentMapProps) => {
   let lastSnap: number | null = null;
   if (viewIndex < 0) lastSnap = snapshots.length - 1;
   else lastSnap = viewIndex;
-
+  console.log('inside ComnponentMap, snapshots:', snapshots)
   //external constants
   const width: any = '100vw';
   const height: any = '100vh';

From 91b21228be8db405b86cab24946d5ccd36875487 Mon Sep 17 00:00:00 2001
From: Sanjay <sanjaylavingia@gmail.com>
Date: Mon, 5 Oct 2020 23:43:59 -0700
Subject: [PATCH 14/27] (delete) (add) deleted node values from fiber, added
 console.logs for dummy function onHover)

---
 src/backend/linkFiber.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/backend/linkFiber.ts b/src/backend/linkFiber.ts
index 5053383e5..18649e77a 100644
--- a/src/backend/linkFiber.ts
+++ b/src/backend/linkFiber.ts
@@ -173,6 +173,7 @@ function createTree(
   // if (currentFiber.tag === 5) {
   //   console.log(currentFiber.stateNode)
   // }
+
   if (!currentFiber) return null;
   if (!tree) return tree;
 

From 09326df5e47193ed43dc19830a17ecc5ab21bfa8 Mon Sep 17 00:00:00 2001
From: Sanjay <sanjaylavingia@gmail.com>
Date: Tue, 6 Oct 2020 09:15:52 -0700
Subject: [PATCH 15/27] (added) added console.logs ins Tree

---
 src/app/components/Tree.tsx          | 1 +
 src/app/containers/MainContainer.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/components/Tree.tsx b/src/app/components/Tree.tsx
index 56e42189a..951542c2f 100644
--- a/src/app/components/Tree.tsx
+++ b/src/app/components/Tree.tsx
@@ -49,6 +49,7 @@ interface TreeProps {
 
 const Tree = (props: TreeProps) => {
   const { snapshot } = props;
+  console.log('inside tree props:', props); 
 
   return (
     <>
diff --git a/src/app/containers/MainContainer.tsx b/src/app/containers/MainContainer.tsx
index b2450be1e..3d2d6b005 100644
--- a/src/app/containers/MainContainer.tsx
+++ b/src/app/containers/MainContainer.tsx
@@ -126,7 +126,7 @@ function MainContainer(): any {
     snapshots,
     hierarchy,
   } = tabs[currentTab];
-
+  console.log('inside MainContainer, hierarchy:', hierarchy)
   // if viewIndex is -1, then use the sliderIndex instead
   const snapshotView = viewIndex === -1 ? snapshots[sliderIndex] : snapshots[viewIndex];
   // cleaning hierarchy and snapshotView from stateless data

From d3616b022284e9c8d152ad593d003b4eaef166f3 Mon Sep 17 00:00:00 2001
From: SanjayLavingia <64515025+SanjayLavingia@users.noreply.github.com>
Date: Tue, 6 Oct 2020 11:54:12 -0700
Subject: [PATCH 16/27] (add) added console.log to the ComponentMap file

---
 src/app/components/ComponentMap.tsx | 2 +-
 src/backend/linkFiber.ts            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/ComponentMap.tsx b/src/app/components/ComponentMap.tsx
index 551b077be..15fb13d2e 100644
--- a/src/app/components/ComponentMap.tsx
+++ b/src/app/components/ComponentMap.tsx
@@ -29,7 +29,7 @@ const ComponentMap = (props: componentMapProps) => {
   const width: any = '100vw';
   const height: any = '100vh';
   let data: Object = snapshots[lastSnap];
-
+  console.log('inside ComponentMap, data', data)
   useEffect(() => {
     document.getElementById('canvas').innerHTML = '_';
     setZoomState(d3.zoomTransform(d3.select('#canvas').node()));
diff --git a/src/backend/linkFiber.ts b/src/backend/linkFiber.ts
index 18649e77a..5529f5ea1 100644
--- a/src/backend/linkFiber.ts
+++ b/src/backend/linkFiber.ts
@@ -341,7 +341,7 @@ function createTree(
   } else {
     newNode = tree;
   }
-
+  console.log('inside LinkFiber, circularComponentTable:',  circularComponentTable); 
   // Recurse on children
   if (child && !circularComponentTable.has(child)) {
     // If this node had state we appended to the children array,

From 3f2828bcfc9c2a2bd121f2a91d5ee3486ff8140a Mon Sep 17 00:00:00 2001
From: Sanjay <sanjaylavingia@gmail.com>
Date: Tue, 6 Oct 2020 14:45:55 -0700
Subject: [PATCH 17/27] (added) various console.logs, found KEY property on
 Fibernode, will use for connection between D3 and fiberNode

---
 src/app/components/ComponentMap.tsx |  3 ++-
 src/app/reducers/mainReducer.js     |  3 ++-
 src/backend/linkFiber.ts            | 15 +++++++++++----
 src/extension/background.js         |  1 +
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/app/components/ComponentMap.tsx b/src/app/components/ComponentMap.tsx
index 15fb13d2e..4d1071801 100644
--- a/src/app/components/ComponentMap.tsx
+++ b/src/app/components/ComponentMap.tsx
@@ -25,11 +25,12 @@ const ComponentMap = (props: componentMapProps) => {
   if (viewIndex < 0) lastSnap = snapshots.length - 1;
   else lastSnap = viewIndex;
   console.log('inside ComnponentMap, snapshots:', snapshots)
+  console.log('lastSnap:', lastSnap)
   //external constants
   const width: any = '100vw';
   const height: any = '100vh';
   let data: Object = snapshots[lastSnap];
-  console.log('inside ComponentMap, data', data)
+  console.log('INSIDE OF COMPONENTMAP, data:', data); 
   useEffect(() => {
     document.getElementById('canvas').innerHTML = '_';
     setZoomState(d3.zoomTransform(d3.select('#canvas').node()));
diff --git a/src/app/reducers/mainReducer.js b/src/app/reducers/mainReducer.js
index 0af46166c..79fc99dd0 100644
--- a/src/app/reducers/mainReducer.js
+++ b/src/app/reducers/mainReducer.js
@@ -2,7 +2,7 @@
 /* eslint-disable prefer-const */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable no-param-reassign */
-import produce from 'immer';
+import {produce, original} from 'immer';
 import * as types from '../constants/actionTypes.ts';
 
 export default (state, action) => produce(state, draft => {
@@ -202,6 +202,7 @@ export default (state, action) => produce(state, draft => {
     }
     case types.INITIAL_CONNECT: {
       const { payload } = action;
+      console.log('inside reducer INITIAL_CONNECT, payload:', payload);
       Object.keys(payload).forEach(tab => {
         // check if tab exists in memory
         // add new tab
diff --git a/src/backend/linkFiber.ts b/src/backend/linkFiber.ts
index 5529f5ea1..6c377c8bb 100644
--- a/src/backend/linkFiber.ts
+++ b/src/backend/linkFiber.ts
@@ -63,12 +63,12 @@ function getRecoilState(): any {
 function sendSnapshot(snap: Snapshot, mode: Mode): void {
   // Don't send messages while jumping or while paused
   if (mode.jumping || mode.paused) return;
-
   if (!snap.tree) {
     snap.tree = new Tree('root', 'root');
   }
-
+  // console.log('inside of inside of linkFiber.ts, before cleanTreeCopy(), snap:', snap);
   const payload = snap.tree.cleanTreeCopy();
+  // console.log('inside of linkFiber.ts, after cleanTreeCopy() payload:', payload);
   if (isRecoil) {
     getRecoilState();
     payload.AtomsRelationship = allAtomsRelationship;
@@ -96,6 +96,7 @@ function updateSnapShotTree(snap: Snapshot, mode: Mode): void {
     circularComponentTable.clear();
     snap.tree = createTree(current);
   }
+  console.log('SNAP.TREE:', snap.tree)
   sendSnapshot(snap, mode);
 }
 
@@ -171,7 +172,7 @@ function createTree(
 ) {
   // Base case: child or sibling pointed to null
   // if (currentFiber.tag === 5) {
-  //   console.log(currentFiber.stateNode)
+  //   console.log(currentFiber)
   // }
 
   if (!currentFiber) return null;
@@ -230,6 +231,7 @@ function createTree(
       stateNode.state,
       stateNode
     );
+
     // console.log(componentData)
     // console.log('stateNode inside of line 232:', stateNode)
     newState = stateNode.state;
@@ -325,6 +327,7 @@ function createTree(
   let newNode = null;
   // We want to add this fiber node to the snapshot
   if (componentFound || newState === 'stateless') {
+    console.log('INSIDE LINKFIBER, CURRENTFIBER:', currentFiber); 
     if (fromSibling) {
       newNode = tree.addSibling(
         newState,
@@ -341,17 +344,21 @@ function createTree(
   } else {
     newNode = tree;
   }
-  console.log('inside LinkFiber, circularComponentTable:',  circularComponentTable); 
+  // console.log('inside LinkFiber, circularComponentTable:',  circularComponentTable); 
   // Recurse on children
   if (child && !circularComponentTable.has(child)) {
+    // if (currentFiber.tag === 5) console.log('inside recursive call in linkFiber', currentFiber);
     // If this node had state we appended to the children array,
     // so attach children to the newly appended child.
     // Otherwise, attach children to this same node.
+    
     circularComponentTable.add(child);
+    // console.log(createTree(child, newNode))
     createTree(child, newNode);
   }
   // Recurse on siblings
   if (sibling && !circularComponentTable.has(sibling)) {
+    // if (currentFiber.tag === 5) console.log('inside recursive call in linkFiber', currentFiber);
     circularComponentTable.add(sibling);
     createTree(sibling, newNode, true);
   }
diff --git a/src/extension/background.js b/src/extension/background.js
index 106192b16..c111bebcd 100644
--- a/src/extension/background.js
+++ b/src/extension/background.js
@@ -324,6 +324,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
     default:
       break;
   }
+  console.log('inside background.js, tabsObj:', tabsObj); 
   return true; // attempt to fix close port error
 });
 

From 0b75d683533e20ae5d5fd73a393aa26cc11b2ed9 Mon Sep 17 00:00:00 2001
From: SanjayLavingia <64515025+SanjayLavingia@users.noreply.github.com>
Date: Tue, 6 Oct 2020 18:24:57 -0700
Subject: [PATCH 18/27] (delete) removed console.logs from linkFiber

---
 src/backend/linkFiber.ts | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/src/backend/linkFiber.ts b/src/backend/linkFiber.ts
index 6c377c8bb..17d02ea95 100644
--- a/src/backend/linkFiber.ts
+++ b/src/backend/linkFiber.ts
@@ -66,9 +66,7 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
   if (!snap.tree) {
     snap.tree = new Tree('root', 'root');
   }
-  // console.log('inside of inside of linkFiber.ts, before cleanTreeCopy(), snap:', snap);
   const payload = snap.tree.cleanTreeCopy();
-  // console.log('inside of linkFiber.ts, after cleanTreeCopy() payload:', payload);
   if (isRecoil) {
     getRecoilState();
     payload.AtomsRelationship = allAtomsRelationship;
@@ -96,7 +94,6 @@ function updateSnapShotTree(snap: Snapshot, mode: Mode): void {
     circularComponentTable.clear();
     snap.tree = createTree(current);
   }
-  console.log('SNAP.TREE:', snap.tree)
   sendSnapshot(snap, mode);
 }
 
@@ -171,9 +168,6 @@ function createTree(
   fromSibling = false
 ) {
   // Base case: child or sibling pointed to null
-  // if (currentFiber.tag === 5) {
-  //   console.log(currentFiber)
-  // }
 
   if (!currentFiber) return null;
   if (!tree) return tree;
@@ -232,16 +226,12 @@ function createTree(
       stateNode
     );
 
-    // console.log(componentData)
-    // console.log('stateNode inside of line 232:', stateNode)
     newState = stateNode.state;
     componentFound = true;
   }
 
   let hooksIndex;
 
-
-
   const atomArray = [];
   atomArray.push(memoizedProps);
 
@@ -327,7 +317,6 @@ function createTree(
   let newNode = null;
   // We want to add this fiber node to the snapshot
   if (componentFound || newState === 'stateless') {
-    console.log('INSIDE LINKFIBER, CURRENTFIBER:', currentFiber); 
     if (fromSibling) {
       newNode = tree.addSibling(
         newState,
@@ -344,21 +333,16 @@ function createTree(
   } else {
     newNode = tree;
   }
-  // console.log('inside LinkFiber, circularComponentTable:',  circularComponentTable); 
   // Recurse on children
   if (child && !circularComponentTable.has(child)) {
-    // if (currentFiber.tag === 5) console.log('inside recursive call in linkFiber', currentFiber);
     // If this node had state we appended to the children array,
     // so attach children to the newly appended child.
     // Otherwise, attach children to this same node.
-    
     circularComponentTable.add(child);
-    // console.log(createTree(child, newNode))
     createTree(child, newNode);
   }
   // Recurse on siblings
   if (sibling && !circularComponentTable.has(sibling)) {
-    // if (currentFiber.tag === 5) console.log('inside recursive call in linkFiber', currentFiber);
     circularComponentTable.add(sibling);
     createTree(sibling, newNode, true);
   }

From d3bbad57138d93a1997a751a02bd3b2390c8c639 Mon Sep 17 00:00:00 2001
From: SanjayLavingia <64515025+SanjayLavingia@users.noreply.github.com>
Date: Tue, 6 Oct 2020 18:29:31 -0700
Subject: [PATCH 19/27] (delete) removed console.log from onHover in index.ts
 for now

---
 src/backend/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/backend/index.ts b/src/backend/index.ts
index f16b19726..670aebcf2 100644
--- a/src/backend/index.ts
+++ b/src/backend/index.ts
@@ -64,7 +64,7 @@ window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
       mode.paused = payload;
       break;
     case 'onHover':
-      console.log('WE MADE IT ALL THE WAY FROM THE FRONTEND! HERE\'S THE PAYLOAD:', payload);
+      // console.log('WE MADE IT ALL THE WAY FROM THE FRONTEND! HERE\'S THE PAYLOAD:', payload);
       break;
     default:
       break;

From 46d9e57462a00b7de46fd75213a61ca1eedcaf85 Mon Sep 17 00:00:00 2001
From: SanjayLavingia <64515025+SanjayLavingia@users.noreply.github.com>
Date: Tue, 6 Oct 2020 18:30:58 -0700
Subject: [PATCH 20/27] (delete) cleaned index.ts in backend folder

---
 src/backend/index.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/backend/index.ts b/src/backend/index.ts
index 670aebcf2..0ceca1bd6 100644
--- a/src/backend/index.ts
+++ b/src/backend/index.ts
@@ -46,14 +46,9 @@ function getRouteURL(node: SnapshotNode): string {
 window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
   switch (action) {
     case 'jumpToSnap':
-      // console.log('action:', action); 
-      console.log('payload', payload); 
-      // console.log('payload.name:', payload.name)
-      // console.log(test)
       timeJump(payload, true); // * This sets state with given payload
       // Get the pathname from payload and add new entry to browser history
       // MORE: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
-
       // try to modify workInProgress tree from here
       // window.history.pushState('', '', getRouteURL(payload));
       break;

From 518c1b9322c195cdffc4c26feb35752fc997a3c8 Mon Sep 17 00:00:00 2001
From: SanjayLavingia <64515025+SanjayLavingia@users.noreply.github.com>
Date: Tue, 6 Oct 2020 18:35:10 -0700
Subject: [PATCH 21/27] (add) (delete) added onHover case to contentScripts.ts

---
 src/extension/contentScript.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/extension/contentScript.ts b/src/extension/contentScript.ts
index 65f4e5f7f..08da5d29c 100644
--- a/src/extension/contentScript.ts
+++ b/src/extension/contentScript.ts
@@ -25,10 +25,8 @@ window.addEventListener('message', msg => { // runs automatically every second
 chrome.runtime.onMessage.addListener(request => { // seems to never fire
   // send the message to npm package
   const { action }: { action: string } = request;
-  console.log(request); 
   switch (action) {
     case 'jumpToSnap':
-      console.log('This is the request inside of jumpToSnap inside of the contentScripts, request:', request); 
       chrome.runtime.sendMessage(request);
       window.postMessage(request, '*');
       break;
@@ -37,8 +35,6 @@ chrome.runtime.onMessage.addListener(request => { // seems to never fire
       window.postMessage(request, '*');
       break;
     case 'onHover': 
-      //wtf does this do??
-      console.log('onHover fired inside of ContentScripts'); 
       window.postMessage(request, '*'); 
     default:
       break;

From 9f18f2fc6faae29108d9caab5c87377437f698cf Mon Sep 17 00:00:00 2001
From: SanjayLavingia <64515025+SanjayLavingia@users.noreply.github.com>
Date: Tue, 6 Oct 2020 18:39:45 -0700
Subject: [PATCH 22/27] (add)(remove) added import of onHover from actions at
 the top, imported useStoreContext at the top, cleaned file of console.logs

---
 src/app/components/ComponentMap.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/app/components/ComponentMap.tsx b/src/app/components/ComponentMap.tsx
index 4d1071801..eef07230b 100644
--- a/src/app/components/ComponentMap.tsx
+++ b/src/app/components/ComponentMap.tsx
@@ -24,13 +24,11 @@ const ComponentMap = (props: componentMapProps) => {
   let lastSnap: number | null = null;
   if (viewIndex < 0) lastSnap = snapshots.length - 1;
   else lastSnap = viewIndex;
-  console.log('inside ComnponentMap, snapshots:', snapshots)
-  console.log('lastSnap:', lastSnap)
   //external constants
   const width: any = '100vw';
   const height: any = '100vh';
   let data: Object = snapshots[lastSnap];
-  console.log('INSIDE OF COMPONENTMAP, data:', data); 
+
   useEffect(() => {
     document.getElementById('canvas').innerHTML = '_';
     setZoomState(d3.zoomTransform(d3.select('#canvas').node()));
@@ -149,7 +147,7 @@ const ComponentMap = (props: componentMapProps) => {
 
         //TODO -> Alter incoming snapshots so there is useful data to show on hover.
         nodeEnter.on('mouseover', function (d: any, i: number): any {
-            console.log('mousing over')
+            //onHover is an action in progress 
             dispatch(onHover());
             d3.select(this)
               .append('text')

From 7e759b35e6ad3208b4da4245230d8b20735e143e Mon Sep 17 00:00:00 2001
From: SanjayLavingia <64515025+SanjayLavingia@users.noreply.github.com>
Date: Tue, 6 Oct 2020 18:42:14 -0700
Subject: [PATCH 23/27] (add) added comment explaining expectation for payload
 for ON_HOVER action

---
 src/app/actions/actions.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/actions/actions.ts b/src/app/actions/actions.ts
index ed410e62f..41aaa30f7 100644
--- a/src/app/actions/actions.ts
+++ b/src/app/actions/actions.ts
@@ -80,5 +80,6 @@ export const resetSlider = () => ({
 
 export const onHover = () => ({
   type: types.ON_HOVER, 
+  //the payload should be something to relate the component we're hovering and highlight that component on the DOM
   payload: 'PAYLOAD FROM onHover inside of action.ts'
 })
\ No newline at end of file

From c631487f2c2e15dfc50954431db91d5787441ef1 Mon Sep 17 00:00:00 2001
From: SanjayLavingia <64515025+SanjayLavingia@users.noreply.github.com>
Date: Tue, 6 Oct 2020 18:43:03 -0700
Subject: [PATCH 24/27] (delete) cleaned MainContainer

---
 src/app/containers/MainContainer.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/containers/MainContainer.tsx b/src/app/containers/MainContainer.tsx
index 3d2d6b005..45a32442d 100644
--- a/src/app/containers/MainContainer.tsx
+++ b/src/app/containers/MainContainer.tsx
@@ -126,7 +126,6 @@ function MainContainer(): any {
     snapshots,
     hierarchy,
   } = tabs[currentTab];
-  console.log('inside MainContainer, hierarchy:', hierarchy)
   // if viewIndex is -1, then use the sliderIndex instead
   const snapshotView = viewIndex === -1 ? snapshots[sliderIndex] : snapshots[viewIndex];
   // cleaning hierarchy and snapshotView from stateless data

From 7b277c3396253fb83986b701aca5b9160c2ed6cc Mon Sep 17 00:00:00 2001
From: SanjayLavingia <64515025+SanjayLavingia@users.noreply.github.com>
Date: Tue, 6 Oct 2020 19:01:32 -0700
Subject: [PATCH 25/27] (delete) cleaned tree.tsx

---
 src/app/components/Tree.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/components/Tree.tsx b/src/app/components/Tree.tsx
index 951542c2f..56e42189a 100644
--- a/src/app/components/Tree.tsx
+++ b/src/app/components/Tree.tsx
@@ -49,7 +49,6 @@ interface TreeProps {
 
 const Tree = (props: TreeProps) => {
   const { snapshot } = props;
-  console.log('inside tree props:', props); 
 
   return (
     <>

From 065daf63f528d336668392e47fef735547f0d183 Mon Sep 17 00:00:00 2001
From: Sanjay <sanjaylavingia@gmail.com>
Date: Tue, 6 Oct 2020 20:54:44 -0700
Subject: [PATCH 26/27] (add) (delete) added onHover switch case and cleaned
 file

---
 src/app/reducers/mainReducer.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/app/reducers/mainReducer.js b/src/app/reducers/mainReducer.js
index 79fc99dd0..05eb1e881 100644
--- a/src/app/reducers/mainReducer.js
+++ b/src/app/reducers/mainReducer.js
@@ -40,8 +40,6 @@ export default (state, action) => produce(state, draft => {
 
   switch (action.type) {
     case types.ON_HOVER: {
-      console.log(currentTab);
-      console.log('onHover Firedin side of the reducer');
       port.postMessage({
         action: 'onHover',
         payload: 'payload from Reducer ON_HOVER',
@@ -202,7 +200,6 @@ export default (state, action) => produce(state, draft => {
     }
     case types.INITIAL_CONNECT: {
       const { payload } = action;
-      console.log('inside reducer INITIAL_CONNECT, payload:', payload);
       Object.keys(payload).forEach(tab => {
         // check if tab exists in memory
         // add new tab

From c68d549f0aeab847d07f01cf25eab1f8accc473e Mon Sep 17 00:00:00 2001
From: Sanjay <sanjaylavingia@gmail.com>
Date: Tue, 6 Oct 2020 21:04:31 -0700
Subject: [PATCH 27/27] (delete) cleaned StateRoute.tsx component

---
 src/app/components/StateRoute.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/components/StateRoute.tsx b/src/app/components/StateRoute.tsx
index 3c7136d18..4d3f0ad2f 100644
--- a/src/app/components/StateRoute.tsx
+++ b/src/app/components/StateRoute.tsx
@@ -54,7 +54,6 @@ const StateRoute = (props: StateRouteProps) => {
 
   // Map
   const renderComponentMap = () => {
-    console.log('inside renderComponenetMap, inside State.Route.tsx')
     if (hierarchy) {
       return (
         <ComponentMap