hoverFeature comments and console.log testing

Author: SanjayLavingia

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 {

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

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

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

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) {

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;

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,
     );