(add) Successfully pass down recoilDomNode array into the props from our backend to the frontend, which will be used for our onMouseEnter event in our onHover feature in ComponentData

Co-authored-by: Sanjay Lavingia <[email protected]>
Co-authored-by: Alexander Landeros <[email protected]>

Author: 3 people

src/app/components/ComponentMap.tsx

@@ -35,6 +35,7 @@ export default function ComponentMap({
   // preparing the data to be used for render
   const lastNode = snapshots.length - 1;
   const data = snapshots[lastNode];
+
   const [layout, setLayout] = useState<string>('cartesian');
   const [orientation, setOrientation] = useState<string>('horizontal');
   const [linkType, setLinkType] = useState<string>('diagonal');
@@ -129,7 +130,7 @@ export default function ComponentMap({
                           fill="url('#links-gradient')"
                           onClick={() => {
                             node.data.isExpanded = !node.data.isExpanded;
-                            console.log(node);
+                            console.log('node',node);
                             forceUpdate();
                           }}
                         />
@@ -151,7 +152,7 @@ export default function ComponentMap({
                             console.log(node);
                             forceUpdate();
                           }}
-                          onMouseEnter={()=>dispatch(onHover(node.data.rtid))}
+                          onMouseEnter={()=> {dispatch(onHover(node.data.rtid))}
                         />
                       )}
                       <text

src/app/components/StateRoute.tsx

@@ -55,6 +55,7 @@ const StateRoute = (props: StateRouteProps) => {
 
   // Map
   const renderComponentMap = () => {
+    
     if (hierarchy) {
       return (
         <ParentSize>

src/backend/linkFiber.ts

@@ -38,7 +38,7 @@ let allAtomsRelationship = [];
 let initialstart = false;
 let rtidCounter = 0; 
 let rtid = null;
-let recoilStateNode = {};
+let recoilDomNode = {};
 
 // Simple check for whether our target app uses Recoil
 if (window[`$recoilDebugStates`]) {
@@ -80,9 +80,9 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
     // getRecoilState();
     payload.atomsComponents = atomsComponents;
     payload.atomSelectors = atomsSelectors;
+    payload.recoilDomNode = recoilDomNode
   }
 
-  console.log(recoilStateNode)
   window.postMessage(
     {
       action: 'recordSnap',
@@ -382,50 +382,56 @@ function createTree(
 
       if(isRecoil){
         if(currentFiber.elementType.name){
-          if(!recoilStateNode[currentFiber.elementType.name]){
-            recoilStateNode[currentFiber.elementType.name] = [];
+          if(!recoilDomNode[currentFiber.elementType.name]){
+            recoilDomNode[currentFiber.elementType.name] = [];
           }
         }
+
         let pointer = currentFiber
+
         while(pointer !== null){
             if(pointer.stateNode !== null){
             rtid = "fromLinkFiber" + rtidCounter++
-            recoilStateNode[currentFiber.elementType.name].push(pointer.stateNode)
+            recoilDomNode[currentFiber.elementType.name].push(rtid)
             pointer.stateNode.setAttribute("id", rtid)
           }
 
             pointer = pointer.child
           }
       }
+
       newNode = tree.addSibling(
         newState,
         elementType ? elementType.name : 'nameless',
         componentData,
-        rtid
+        rtid,
+        recoilDomNode
       );
     } else {
 
       if(isRecoil){
         if(currentFiber.elementType.name){
-          if(!recoilStateNode[currentFiber.elementType.name]){
-            recoilStateNode[currentFiber.elementType.name] = [];
+          if(!recoilDomNode[currentFiber.elementType.name]){
+            recoilDomNode[currentFiber.elementType.name] = [];
           }
         }
         let pointer = currentFiber
         while(pointer !== null){
             if(pointer.stateNode !== null){
             rtid = "fromLinkFiber" + rtidCounter++
-            recoilStateNode[currentFiber.elementType.name].push(pointer.stateNode)
+            recoilDomNode[currentFiber.elementType.name].push(rtid)
             pointer.stateNode.setAttribute("id", rtid)        
           }          
             pointer = pointer.child
           }
       }
+      
       newNode = tree.addChild(
         newState,
         elementType ? elementType.name : 'nameless',
         componentData,
-        rtid
+        rtid, 
+        recoilDomNode
       );
     }
   } else {

src/backend/tree.ts

@@ -51,24 +51,27 @@ class Tree {
 
   rtid: any; 
 
-  constructor(state: string | {}, name = 'nameless', componentData: {} = {}, rtid: any = null) {
+  recoilDomNode: any; 
+
+  constructor(state: string | {}, name = 'nameless', componentData: {} = {}, rtid: any = null, recoilDomNode:any = null) {
     this.state = state === 'root' ? 'root' : serializeState(state);
     this.name = name;
     this.componentData = componentData ? JSON.parse(JSON.stringify(componentData)) : {};
     this.children = [];
     this.parent = null; // ref to parent so we can add siblings
     this.rtid = rtid
+    this.recoilDomNode = recoilDomNode
   }
 
-  addChild(state: string | {}, name: string, componentData: {}, rtid: any): Tree {
-    const newChild: Tree = new Tree(state, name, componentData, rtid);
+  addChild(state: string | {}, name: string, componentData: {}, rtid: any, recoilDomNode:any): Tree {
+    const newChild: Tree = new Tree(state, name, componentData, rtid, recoilDomNode);
     newChild.parent = this;
     this.children.push(newChild);
     return newChild;
   }
 
-  addSibling(state: string | {}, name: string, componentData: {},  rtid: any): Tree {
-    const newSibling: Tree = new Tree(state, name, componentData, rtid);
+  addSibling(state: string | {}, name: string, componentData: {},  rtid: any, recoilDomNode:any): Tree {
+    const newSibling: Tree = new Tree(state, name, componentData, rtid,recoilDomNode);
     newSibling.parent = this.parent;
     this.parent.children.push(newSibling);
     return newSibling;
@@ -87,7 +90,7 @@ class Tree {
       circularComponentTable.clear();
     }
     // creates copy of present node
-    let copy: Tree = new Tree(this.state, this.name, this.componentData, this.rtid);
+    let copy: Tree = new Tree(this.state, this.name, this.componentData, this.rtid, this.recoilDomNode);
     delete copy.parent;
     circularComponentTable.add(this);
     copy = scrubUnserializableMembers(copy);

src/extension/background.js

@@ -4,6 +4,8 @@
 /* eslint-disable function-paren-newline */
 /* eslint-disable implicit-arrow-linebreak */
 
+import snapshots from "../app/components/snapshots";
+
 // store ports in an array
 const portsArr = [];
 const reloaded = {};
@@ -282,9 +284,12 @@ chrome.runtime.onMessage.addListener((request, sender) => {
       break;
     }
     case 'recordSnap': {
+      
       const sourceTab = tabId;
       // first snapshot received from tab
       if (!firstSnapshotReceived[tabId]) {
+
+
         firstSnapshotReceived[tabId] = true;
         reloaded[tabId] = false;
 
@@ -336,7 +341,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
     default:
       break;
   }
-  console.log('inside background.js, tabsObj:', tabsObj); 
+  // console.log('inside background.js, tabsObj:', tabsObj); 
   return true; // attempt to fix close port error
 });
 

src/extension/contentScript.ts

@@ -15,7 +15,6 @@ window.addEventListener('message', msg => { // runs automatically every second
 
   // post initial Message to background.js
   const { action }: { action: string } = msg.data;
-
   if (action === 'recordSnap') { // this is firing on page load
     chrome.runtime.sendMessage(msg.data);
   }