Merge pull request #5 from kevinfey/map

Adding Visualization to Map Current Component State

Author: haejinjo

package-lock.json

@@ -12,15 +12,15 @@ const Map = (props) => {
   console.log('MAP SNAPSHOT', snapshot);
 
   // set the heights and width of the tree to be passed into treeMap function
-  const width: number = 600;
-  const height: number = 1100;
+  const width: number = 1100;
+  const height: number = 600;
 
   // this state allows the canvas to stay at the zoom level on multiple re-renders
   const [{ x, y, k }, setZoomState]: any = useState({ x: 0, y: 0, k: 0 });
 
   useEffect(() => {
     setZoomState(d3.zoomTransform(d3.select('#canvas').node()));
-  }, [snapshot]);
+  }, [snapshot.children]);
 
   // this only clears the canvas if Visualizer is already rendered on the extension
   useEffect(() => {
@@ -31,9 +31,9 @@ const Map = (props) => {
       .select('#canvas')
       .attr('width', width)
       .attr('height', height);
-
     // creating a pseudo-class for reusability
     const g: any = svgContainer
+
       .append('g')
       .attr('transform', `translate(${x}, ${y}), scale(${k})`); // sets the canvas to the saved zoomState
 
@@ -46,13 +46,12 @@ const Map = (props) => {
     //     childrenArr.push(el)
     //   );
     // }
-  
+
     // console.log('CHILDREN', childrenArr);
 
     const appState: any = {
       name: ' Root',
       // pass in parsed data here
-      // call the helper function passing in the most recent snapshot
       children: snapshot.children,
     };
 
@@ -96,6 +95,7 @@ const Map = (props) => {
     // returns a flat array of objects containing all the nodes and their information
     // renders nodes onto the canvas
     let nodes: any = hierarchyNodes.descendants();
+    console.log("NODES",nodes)
 
     // const node is used to create all the nodes
     // this segment places all the nodes on the canvas
@@ -111,13 +111,16 @@ const Map = (props) => {
       .attr('class', 'atomNodes');
 
     // for each node that got created, append a circle element
-    node.append('circle').attr('fill', '#c300ff').attr('r', 50);
+    node
+      .append('circle')
+      .attr('fill', (d: any) => (d.children ? '#3214db' : '#c300ff'))
+      .attr('r', 50);
 
     // for each node that got created, append a text element that displays the name of the node
     node
       .append('text')
       .attr('dy', '.31em')
-      .attr('x', (d: any) => (d.children ? -75 : 75))
+      .attr('x', (d: any) => (d.children ? -50 : 50))
       .attr('text-anchor', (d: any) => (d.children ? 'end' : 'start'))
       .text((d: any) => d.data.name)
       .style('font-size', `2rem`)
@@ -136,9 +139,10 @@ const Map = (props) => {
           .append('text')
           .text(JSON.stringify(d.data, undefined, 2))
           .style('fill', 'white')
-          .attr('x', 75)
-          .attr('y', 60)
+          .attr('x', -999)
+          .attr('y', 100)
           .style('font-size', '3rem')
+          .style('text-align', 'center')
           .attr('stroke', '#646464')
           .attr('id', `popup${i}`);
       }
@@ -166,7 +170,7 @@ const Map = (props) => {
           [0, 0],
           [width, height],
         ])
-        .scaleExtent([0, 8])
+        .scaleExtent([0, 5])
         .on('zoom', zoomed)
     );
 
@@ -192,7 +196,6 @@ const Map = (props) => {
     }
   });
 
-  console.log('208');
   return (
     <div data-testid="canvas">
       <div className="Visualizer">

src/app/components/Map.tsx

@@ -40,6 +40,7 @@ const PerfView = (props: PerfViewProps) => {
   // snapshots.forEach((snapshot) => snapshot.children[0].children.shift());
   // console.log('SNAPSHOTS -------------------------->', snapshots);
   // Figure out which snapshot index to use
+  
   let indexToDisplay: number | null = null;
   if (viewIndex < 0) indexToDisplay = snapshots.length - 1;
   else indexToDisplay = viewIndex;

src/app/components/PerfView.tsx

@@ -94,6 +94,7 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
           component: memoizedState.queue,
           state: memoizedState.memoizedState,
         });
+
       }
       memoizedState =
         memoizedState.next !== memoizedState ? memoizedState.next : null;
@@ -166,6 +167,7 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     //   });
     atomArray.push(memoizedProps);
 
+
     // console.log('1st ATOM ARRAY', atomArray);
 
     function traverseRecoilHooks(memoizedState: any): HookStates {
@@ -182,6 +184,7 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
               state: memoizedProps,
             });
           }
+
         }
         memoizedState =
           memoizedState.next !== memoizedState ? memoizedState.next : null;
@@ -202,20 +205,32 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
         // which includes the dispatch() function we use to change their state.
 
         const hooksStates = traverseRecoilHooks(memoizedState);
+
         const hooksNames = getHooksNames(elementType.toString());
         hooksStates.forEach((state, i) => {
+
           hooksIndex = componentActionsRecord.saveNew(
             state.state,
             state.component
           );
           componentData.hooksIndex = hooksIndex;
 
+          // if (newState && newState.hooksState) {
+          //   newState.hooksState.push({ [hooksNames[i]]: state.state });
+          // } else if (newState) {
+          //   newState.hooksState = [{ [hooksNames[i]]: state.state }];
+          // } else {
+          //   newState = { hooksState: [] };
+          //   newState.hooksState.push({ [hooksNames[i]]: state.state });
+          // }
+
+          //improves tree visualization but breaks jump
           if (newState && newState.hooksState) {
             newState.push(state.state);
           } else if (newState) {
-            newState = [ state.state ];
+            newState = [state.state];
           } else {
-            newState.push(state.state );
+            newState.push(state.state);
           }
           componentFound = true;
         });
@@ -224,8 +239,13 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
 
     // Check if node is a hooks useState function
     //REGULAR REACT HOOKS
-    if (memoizedState && (tag === 0 || tag === 1 || tag === 2 || tag === 10) && isRecoil === false) {
+    if (
+      memoizedState &&
+      (tag === 0 || tag === 1 || tag === 2 || tag === 10) &&
+      isRecoil === false
+    ) {
       if (memoizedState.queue) {
+
         // Hooks states are stored as a linked list using memoizedState.next,
         // so we must traverse through the list and get the states.
         // We then store them along with the corresponding memoizedState.queue,
@@ -309,6 +329,7 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
       snap.tree = createTree(current);
     }
 
+
     sendSnapshot();
   }
 

src/backend/linkFiber.ts

@@ -6,10 +6,11 @@ import 'core-js';
 
 const componentActionsRecord = {};
 let index = 0;
-
 // module.exports = {
 export default {
   saveNew: (state, component) => {
+  //console.log("COMPONENET ACTION RECORDS",componentActionsRecord)
+
     componentActionsRecord[index] = { state, component };
     index++;
     return index - 1;

src/backend/masterState.js

@@ -33,36 +33,44 @@ export default (origin, mode) => {
     if (!target) return;
 
     if (target.state === 'stateless') {
-      target.children.forEach(child => jump(child));
+      target.children.forEach((child) => jump(child));
       return;
     }
-    const component = componentActionsRecord.getComponentByIndex(target.componentData.index);
+    const component = componentActionsRecord.getComponentByIndex(
+      target.componentData.index
+    );
     if (component && component.setState) {
-      component.setState(prevState => {
-        Object.keys(prevState).forEach(key => {
-          if (target.state[key] === undefined) {
-            target.state[key] = undefined;
-          }
-        });
-        return target.state;
-        // Iterate through new children after state has been set
-      }, () => target.children.forEach(child => jump(child)));
+      component.setState(
+        (prevState) => {
+          Object.keys(prevState).forEach((key) => {
+            if (target.state[key] === undefined) {
+              target.state[key] = undefined;
+            }
+          });
+          return target.state;
+          // Iterate through new children after state has been set
+        },
+        () => target.children.forEach((child) => jump(child))
+      );
     }
 
     console.log('TARGET', target);
     // Check for hooks state and set it with dispatch()
     if (target.state && target.state.hooksState) {
-      target.state.hooksState.forEach(hook => {
-        const hooksComponent = componentActionsRecord.getComponentByIndex(target.componentData.hooksIndex);
+      target.state.hooksState.forEach((hook) => {
+        const hooksComponent = componentActionsRecord.getComponentByIndex(
+          target.componentData.hooksIndex
+        );
         const hookState = Object.values(hook);
+        console.log('target', target);
         if (hooksComponent && hooksComponent.dispatch) {
-          // console.log('attempt to dispatch this', hooksComponent, hookState[0]);
+
           hooksComponent.dispatch(hookState[0]);
         }
       });
     }
 
-    target.children.forEach(child => {
+    target.children.forEach((child) => {
       if (!circularComponentTable.has(child)) {
         circularComponentTable.add(child);
         jump(child);