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

@@ -10,19 +10,21 @@ let root = {};
 let duration = 750;
 
 class Chart extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
     this.chartRef = React.createRef();
     this.maked3Tree = this.maked3Tree.bind(this);
   }
   componentDidMount() {
-    const { snapshot } = this.props;
+    const { snapshot, hierarchy } = this.props;
+    console.log('initial props', this.props)
     root = JSON.parse(JSON.stringify(snapshot));
     this.maked3Tree();
   }
 
   componentDidUpdate() {
-    const { snapshot } = this.props;
+    const { snapshot, hierarchy } = this.props;
+    console.log('updated props', this.props)
     root = JSON.parse(JSON.stringify(snapshot));
     this.maked3Tree();
   }
@@ -140,8 +142,6 @@ class Chart extends Component {
 
     let root = tree(hierarchy);
 
-    console.log('children', root.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(root.links())

src/app/components/StateRoute.jsx

@@ -7,7 +7,7 @@ import {
 import Chart from './Chart';
 import Tree from './Tree';
 
-const StateRoute = ({ snapshot }) => (
+const StateRoute = ({ snapshot, hierarchy }) => (
   <Router>
     <div className="navbar">
       <NavLink className="router-link" activeClassName="is-active" exact to="/">
@@ -18,7 +18,7 @@ const StateRoute = ({ snapshot }) => (
       </NavLink>
     </div>
     <Switch>
-      <Route path="/chart" render={() => <Chart snapshot={snapshot} />} />
+      <Route path="/chart" render={() => <Chart snapshot={snapshot} hierarchy={hierarchy} />} />
       <Route path="/" render={() => <Tree snapshot={snapshot} />} />
     </Switch>
   </Router>

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];
@@ -74,7 +77,7 @@ function MainContainer() {
       <HeadContainer />
       <div className="body-container">
         <ActionContainer />
-        {snapshots.length ? <StateContainer snapshot={snapshotView} /> : null}
+        {snapshots.length ? <StateContainer snapshot={snapshotView} hierarchy={hierarchy} /> : null}
         <TravelContainer snapshotsLength={snapshots.length} />
         <ButtonsContainer />
       </div>

src/app/containers/StateContainer.jsx

@@ -7,7 +7,8 @@ import StateRoute from '../components/StateRoute';
 import DiffRoute from '../components/DiffRoute';
 
 
-const StateContainer = ({ snapshot }) => {
+const StateContainer = ({ snapshot, hierarchy }) => {
+  console.log('passing?', hierarchy);
   const [Text, setText] = useState('State');
   return (
     <Router>
@@ -27,7 +28,7 @@ const StateContainer = ({ snapshot }) => {
         </div>
         <Switch>
           <Route path="/diff" render={() => { setText('Diff'); return <DiffRoute snapshot={snapshot} />; }} />
-          <Route path="/" render={() => { setText('State'); return <StateRoute snapshot={snapshot} />; }} />
+          <Route path="/" render={() => { setText('State'); return <StateRoute snapshot={snapshot} hierarchy={hierarchy} />; }} />
         </Switch>
       </div>
     </Router>

src/extension/background.js

@@ -12,7 +12,7 @@ function createTabObj(title) {
     // snapshots is an array of ALL state snapshots for the reactime tab working on a specific user application
     snapshots: [],
     //* this is our pointer so we know what the current state the user is checking (this accounts for time travel aka when user clicks jump on the UI)
-    currentStatePointer: null,
+    currLocation: null,
     //* inserting a new property to build out our hierarchy dataset for d3 
     hierarchy: null,
     mode: {
@@ -22,48 +22,46 @@ function createTabObj(title) {
     },
   };
 }
-// once state is modified (when user does something with app), a step appears in actionContainer.jsx column. That current state snapshot is added to our hierarchy object. That is what the buildHierarchy function is for. It takes in the entire tabObj, which has a hierarcy object as a property within it. Then we build this hierarchy object so that d3 can render graphs in our extension
-function buildHierarchy(obj, newNode) {
-  // whenever we receive a snapshot from contentScript.js via message, we execute this function
-  //* if empty on extension UI is clicked hierarchy needs to be reset to an object
-  let num = 1;
-  class d3Node {
-    constructor(num, obj) {
-      this.name = num++;
+
+const makeNewNode = () => {
+  let num = 0;
+
+  return class Node {
+    constructor(obj) {
+      this.index = num += 1;
       this.stateSnapshot = obj;
       this.children = [];
     }
-  }
-  
-  obj.hierarchy
-  /* properties inside this object absolutely requires:
-  name: string (the first state snapshot has to be a root)
-  stateSnapshot: object
-  currentStateSnapshot: boolean
-  */
- 
- // each time a statesnapshot is added, this gets incremented otherwise it will be decremented
- // we need to find a way to traverse through the object to know which node the user is on so we can add a new state snapshot in the right location
-// could we potentially have a variable in timejump function (timeJump.js in the package) that our function can work with --> contentScript.js has access to it --> we can access that variable message;
- stateCount = 1;
- 
-  class stateNode {
-
-    constructor() {
-      this.name = `state${stateCount}`;
-      this.stateSnapshot = {};
-      this.children = [];
-    }
-  }
+  };
+};
 
+const Node = makeNewNode();
 
-  // create a helper function that groups all the snapshots underneath each other
-  // current state snapshot
-  // needs to be supplied by the UI
-  // also need to figure out how we would traverse through the big ass object to find the current state
-  // Create a new object with name, 
+function sendToHierarchy (tabObj, newNode) {
+  if (!tabObj.currLocation) {
+    tabObj.currLocation = newNode;
+    tabObj.hierarchy = newNode;
+  } else {
+    tabObj.currLocation.children.push(newNode);
+    tabObj.currLocation = newNode;
+  }
+}
+function changeCurrLocation (tabObj, rootNode, index) {
+  // check if current node has the index wanted
+  if (rootNode.index === index) {
+    tabObj.currLocation = rootNode;
+    return;
+  }
+  // base case if no children
+  if (!rootNode.children.length) {
+    return;
+  } else {
+    // if not, recurse on each one of the children
+    hierarchy.children.forEach(child => {
+      changeCurrLocation(tabObj, child, index);
+    });
+  }
 }
-
 
 // establishing connection with devtools
 chrome.runtime.onConnect.addListener(port => {
@@ -74,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'},
     });
   }
 
@@ -150,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;
     }
@@ -171,14 +170,11 @@ chrome.runtime.onMessage.addListener((request, sender) => {
         reloaded[tabId] = false;
 
         tabsObj[tabId].snapshots.push(request.payload);
-        //! INVOKING buildHierarchy FIGURE OUT WHAT TO PASS IN!!!!
-        let currentStateObject = tabsObj[tabId]
-        buildHierarchy(tabsObj[tabId], request.payloadTurnedIntoNODE );
-        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;
@@ -190,7 +186,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
       } else {
         tabsObj[tabId].snapshots.push(request.payload);
         //! INVOKING buildHierarchy FIGURE OUT WHAT TO PASS IN!!!!
-        buildHierarchy();
+        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);
 });