Fixes and further debugging

Co-authored-by: Ruth Anam <[email protected]>
Co-authored-by: David Chai <[email protected]>

Author: davidchai717

package.json

@@ -25,7 +25,7 @@
     "Bryan Lee",
     "David Chai",
     "Josh Kim",
-    "Ruthba Anam",
+    "Ruth Anam",
     "Ryan Dang",
     "Sierra Swaby",
     "Yujin Kang"

src/app/components/Chart.jsx

@@ -15,15 +15,16 @@ class Chart extends Component {
     this.maked3Tree = this.maked3Tree.bind(this);
   }
   componentDidMount() {
-    const { hierarchy } = this.props;
-    root = JSON.parse(JSON.stringify(hierarchy));
-    console.log('props', this.props)
+    const { snapshot, hierarchy } = this.props;
+    console.log('initial props', this.props)
+    root = JSON.parse(JSON.stringify(snapshot));
     this.maked3Tree();
   }
 
   componentDidUpdate() {
-    const { hierarchy } = this.props;
-    root = JSON.parse(JSON.stringify(hierarchy));
+    const { snapshot, hierarchy } = this.props;
+    console.log('updated props', this.props)
+    root = JSON.parse(JSON.stringify(snapshot));
     this.maked3Tree();
   }
 
@@ -60,8 +61,6 @@ class Chart extends Component {
 
     let d3root = tree(hierarchy);
 
-    console.log('children', d3root.descendants());
-
     g.selectAll('.link')
       // root.links() gets an array of all the links, where each element is an object containing a source property, which represents the link's source node, and a target property, which represents the link's target node.
       .data(d3root.links())

src/app/containers/MainContainer.jsx

@@ -24,6 +24,8 @@ function MainContainer() {
     // listen for a message containing snapshots from the background script
     port.onMessage.addListener(message => {
       const { action, payload, sourceTab } = message;
+      console.log('action message', action);
+      console.log('payload message', message)
       switch (action) {
         case 'deleteTab': {
           dispatch(deleteTab(payload));
@@ -65,7 +67,8 @@ function MainContainer() {
       </div>
     );
   }
-  const { viewIndex, sliderIndex, snapshots } = tabs[currentTab];
+  const { viewIndex, sliderIndex, snapshots, hierarchy } = tabs[currentTab];
+  console.log('main container', tabs[currentTab]);
 
   // if viewIndex is -1, then use the sliderIndex instead
   const snapshotView = viewIndex === -1 ? snapshots[sliderIndex] : snapshots[viewIndex];

src/app/containers/StateContainer.jsx

@@ -6,7 +6,9 @@ import {
 import StateRoute from '../components/StateRoute';
 import DiffRoute from '../components/DiffRoute';
 
+
 const StateContainer = ({ snapshot, hierarchy }) => {
+  console.log('passing?', hierarchy);
   const [Text, setText] = useState('State');
   return (
     <Router>

src/extension/background.js

@@ -33,31 +33,31 @@ const makeNewNode = () => {
       this.children = [];
     }
   };
-}
+};
+
 const Node = makeNewNode();
 
-function buildHierachy(tabObj, newNode) {
+function sendToHierarchy (tabObj, newNode) {
   if (!tabObj.currLocation) {
     tabObj.currLocation = newNode;
-    tabObj.hierachy = newNode;
+    tabObj.hierarchy = newNode;
   } else {
     tabObj.currLocation.children.push(newNode);
     tabObj.currLocation = newNode;
   }
 }
-
-function changeCurrLocation(tabObj, currNode, index) {
+function changeCurrLocation (tabObj, rootNode, index) {
   // check if current node has the index wanted
-  if (currNode.index === index) {
-    tabObj.currLocation = currNode;
+  if (rootNode.index === index) {
+    tabObj.currLocation = rootNode;
     return;
   }
   // base case if no children
-  if (!currNode.children.length) {
+  if (!rootNode.children.length) {
     return;
   } else {
     // if not, recurse on each one of the children
-    currNode.children.forEach(child => {
+    rootNode.children.forEach(child => {
       changeCurrLocation(tabObj, child, index);
     });
   }
@@ -72,7 +72,7 @@ chrome.runtime.onConnect.addListener(port => {
   if (Object.keys(tabsObj).length > 0) {
     port.postMessage({
       action: 'initialConnectSnapshots',
-      payload: tabsObj,
+      payload: {...tabsObj, msg: 'connection to devgools made'},
     });
   }
 
@@ -148,15 +148,16 @@ chrome.runtime.onMessage.addListener((request, sender) => {
       // dont remove snapshots if persisting
       if (!persist) {
         tabsObj[tabId].snapshots.splice(1);
-
+        
         // send a message to devtools
         portsArr.forEach(bg => bg.postMessage({
           action: 'initialConnectSnapshots',
-          payload: tabsObj,
+          payload: { ...tabsObj, msg: 'reload' },
         }));
       }
 
       reloaded[tabId] = true;
+      
 
       break;
     }
@@ -169,15 +170,11 @@ chrome.runtime.onMessage.addListener((request, sender) => {
         reloaded[tabId] = false;
 
         tabsObj[tabId].snapshots.push(request.payload);
-        // invoking function to place a new d3 tree node in the right location
-        const newNode = new Node(request.payload)
-        buildHierarchy(tabsObj[tabId], newNode);
-
-        console.log(tabsObj[tabId].snapshots);
+        sendToHierarchy(tabsObj[tabId], new Node(request.payload));
         if (portsArr.length > 0) {
           portsArr.forEach(bg => bg.postMessage({
             action: 'initialConnectSnapshots',
-            payload: tabsObj,
+            payload: {...tabsObj, msg: 'firstsnapshotreceived'},
           }));
         }
         break;
@@ -188,9 +185,8 @@ chrome.runtime.onMessage.addListener((request, sender) => {
         reloaded[tabId] = false;
       } else {
         tabsObj[tabId].snapshots.push(request.payload);
-        // invoking function to place a new d3 tree node in the right location
-        const newNode = new Node(request.payload)
-        buildHierarchy(tabsObj[tabId], newNode);
+        //! INVOKING buildHierarchy FIGURE OUT WHAT TO PASS IN!!!!
+        sendToHierarchy(tabsObj[tabId], new Node(request.payload));
       }
       // send message to devtools
       if (portsArr.length > 0) {

src/extension/contentScript.js

@@ -11,7 +11,7 @@ window.addEventListener('message', msg => {
     firstMessage = false;
   }
 
-  // post initial Message to npm package
+  // post initial Message to background.js
   const { action } = msg.data;
   if (action === 'recordSnap') chrome.runtime.sendMessage(msg.data);
 });