commited changes from becca's pull

Author: caitlinchan23

src/app/components/LinkControls.tsx

@@ -7,7 +7,7 @@ const controlStyles = {
 };
 
 const dropDownStyle = {
-  margin: '0.5em',
+	margin: '0.5em',
   fontSize: '12px',
   borderRadius: '4px', 
   backgroundColor: 'rgb(231, 231, 231)'

src/app/containers/MainContainer.tsx

@@ -19,7 +19,6 @@ const mixpanel = require("mixpanel").init("12fa2800ccbf44a5c36c37bc9776e4c0", {
 });
 
 
-
 function MainContainer(): any {
   const [store, dispatch] = useStoreContext();
   const { tabs, currentTab, port: currentPort } = store;

src/backend/index.ts

@@ -60,31 +60,37 @@ window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
     case 'setPause':
       mode.paused = payload;
       break;
-    case 'onHover':    
+    case 'onHover':
+      // console.log("curr payload ", payload); 
       if (Array.isArray(payload)) {
+        // console.log('inside array is array if block')
         for (let i = 0; i < payload.length; i + 1) {
+          // console.log("current payload value: ", payload[i]);
           let element = document.getElementById(payload[i])
           if (element !== null) {
              element.style.backgroundColor = '#C0D9D9'; 
              }
         }
       } else {
-        let element = document.getElementById(payload)
+        let element = document.querySelector(`.${payload}`);
+        // console.log("element: ", element);
         if (element !== null) {
+          // console.log("element style: ", element.style)
           element.style.backgroundColor = '#C0D9D9'; 
         }
       }
       break;
     case 'onHoverExit': 
         if(Array.isArray(payload)){ 
         for (let i=0; i<payload.length;i++){
-          let element = document.getElementById(payload[i])
+          let element = document.querySelector(`.${payload}`);
           if (element !== null) {
-                element.style.backgroundColor = ''; 
-              }
+            element.style.backgroundColor = ''; 
+          }
         }
       } else {
-        let element = document.getElementById(payload)
+        let element = document.querySelector(`.${payload}`);
+        // console.log("element style: ", element.style)
         if (element !== null) {
           element.style.backgroundColor = ''; 
         }

src/backend/linkFiber.ts

@@ -356,7 +356,6 @@ function createTree(
     isRecoil === false
   ) {
     if (memoizedState.queue) {
-      // console.log("line 357...")
       // 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,
@@ -411,17 +410,37 @@ function createTree(
 
       while (pointer !== null) {
           if(pointer.stateNode !== null){
-          rtid = "fromLinkFiber" + rtidCounter++
-          recoilDomNode[currentFiber.elementType.name].push(rtid)
-          pointer.stateNode.setAttribute("id", rtid)
+            rtid = "fromLinkFiber" + rtidCounter++;
+            recoilDomNode[currentFiber.elementType.name].push(rtid)
+            // check if rtid is already present
+            //  remove existing rtid before adding a new one
+            if (pointer.stateNode.classList.length > 0) {
+              let lastClass = pointer.stateNode.classList[pointer.stateNode.classList.length -1];
+              // console.log("last class: ", lastClass, "linkFiber class? ",    lastClass.includes("fromLinkFiber"));
+              if (lastClass.includes("fromLinkFiber")) {
+                pointer.stateNode.classList.remove(lastClass);
+              }
+            }
+            
+            pointer.stateNode.classList.add(rtid)
         }
           pointer = pointer.child
         }
     } else {
       if (currentFiber.child && currentFiber.child.stateNode && currentFiber.child.stateNode.setAttribute) {
-        rtid = "fromLinkFiber" + rtidCounter
-          currentFiber.child.stateNode.setAttribute("id", rtid);
+
+        rtid = "fromLinkFiber" + rtidCounter;
+        // check if rtid is already present
+        //  remove existing rtid before adding a new one
+        if (currentFiber.child.stateNode.classList.length > 0) {
+          let lastClass = currentFiber.child.stateNode.classList[currentFiber.child.stateNode.classList.length -1];
+          // console.log("lastClass: ", lastClass, "linkFiber class? ", lastClass.includes("fromLinkFiber"));
+          if (lastClass.includes("fromLinkFiber")) {
+            currentFiber.child.stateNode.classList.remove(lastClass);
+          }
         }
+        currentFiber.child.stateNode.classList.add(rtid);
+      }
         rtidCounter++;
     }
     // checking if tree fromSibling is true