adding refresh and debugging empty functionality

Author: aquinojardim

src/app/components/Diff.jsx

@@ -25,7 +25,7 @@ function Diff({ snapshot, show }) {
   else formatters.html.hideUnchanged();
 
   if (previous === undefined || delta === undefined) {
-    return <div> No state change detected. Trigger an event to change state </div>;
+    return <div className='noState'> No state change detected. Trigger an event to change state </div>;
   }
   return <div>{ReactHtmlParser(html)}</div>;
 }

src/app/components/StateRoute.jsx

@@ -8,7 +8,29 @@ import Chart from './Chart';
 import Tree from './Tree';
 
 // eslint-disable-next-line react/prop-types
-const StateRoute = ({ snapshot, hierarchy }) => (
+
+const StateRoute = ({ snapshot, hierarchy }) => {
+  // gabi :: the hierarchy get set on the first click in the page, when page in refreshed we don't have a hierarchy so we need to check if hierarchy was inicialize involk render chart  
+  const renderChart = () =>{ 
+    if (hierarchy){
+      return <Chart hierarchy={hierarchy} />
+    }
+    else{
+      return <div className='noState'> No state change detected. Trigger an event to change state </div>;
+    }
+  }
+
+  // gabi :: the snapshot get set on the first click in the page, when page in refreshed we don't have a hierarchy so we need to check if snapshot was inicialize involk render chart 
+  const renderTree = () => { 
+    if (hierarchy){
+      return <Tree snapshot={snapshot} />
+    }
+    else{
+      return <div className='noState'> No state change detected. Trigger an event to change state </div>;
+    }
+  }
+
+  return (
   <Router>
     <div className="navbar">
       <NavLink className="router-link" activeClassName="is-active" exact to="/">
@@ -19,11 +41,11 @@ const StateRoute = ({ snapshot, hierarchy }) => (
       </NavLink>
     </div>
     <Switch>
-      <Route path="/chart" render={() => <Chart hierarchy={hierarchy} />} />
-      <Route path="/" render={() => <Tree snapshot={snapshot} />} />
+      <Route path="/chart" render={renderChart} />
+      <Route path="/" render={renderTree} />
     </Switch>
   </Router>
-);
+)};
 
 StateRoute.propTypes = {
   snapshot: PropTypes.shape({

src/app/containers/ActionContainer.jsx

@@ -34,8 +34,9 @@ function ActionContainer() {
           displayArray(element)
         })
       }
-    }    
-    displayArray(hierarchy)
+    }
+    // gabi :: the hierarchy get set on the first click in the page, when page in refreshed we don't have a hierarchy so we need to check if hierarchy was inicialize involk displayArray to display the hierarchy  
+    if (hierarchy) displayArray(hierarchy)
     // console.log('this is hierarchyArr', hierarchyArr)
 
     actionsArr = hierarchyArr.map((snapshot, index) => {

src/app/reducers/mainReducer.js

@@ -11,22 +11,22 @@ export default (state, action) => produce(state, draft => {
 
 
   // gabi and nate :: function that find the index in the hiearachy and extract the name of the equivalent index to add to the post message
-    const findName = (index, hierarchy) => {
-      if(hierarchy.index == index){
-        return hierarchy.name;
+  const findName = (index, hierarchy) => {
+    if(hierarchy.index == index){
+      return hierarchy.name;
+    }
+    else {
+      const hierarchyChildArray = [];
+      for (let hierarchyChild of hierarchy.children){
+        hierarchyChildArray.push(findName(index, hierarchyChild));
       }
-      else {
-        const hierarchyChildArray = [];
-        for (let hierarchyChild of hierarchy.children){
-          hierarchyChildArray.push(findName(index, hierarchyChild));
+      for (let hierarchyChildName of hierarchyChildArray){
+        if(hierarchyChildName){
+          return hierarchyChildName
         }
-        for (let hierarchyChildName of hierarchyChildArray){
-          if(hierarchyChildName){
-            return hierarchyChildName
-          }
-        }
-      } 
-    }
+      }
+    } 
+  }
 
   switch (action.type) {
     case types.MOVE_BACKWARD: {
@@ -110,17 +110,27 @@ export default (state, action) => produce(state, draft => {
       tabs[currentTab].sliderIndex = 0;
       tabs[currentTab].viewIndex = -1;
       tabs[currentTab].playing = false;
-      tabs[currentTab].snapshots.splice(1);
-      // reset children in root node to reset graph
-      if (tabs[currentTab].hierarchy) tabs[currentTab].hierarchy.children = [];
-      // reassigning pointer to the appropriate node to branch off of
+      // gabi :: activate empty mode
+      tabs[currentTab].mode.empty = true 
+      // gabi :: record snapshot of page inicial state
+      tabs[currentTab].inicialSnapshot.push(tabs[currentTab].snapshots[0]);
+      // gabi :: reset snapshots to page last state recorded
+      tabs[currentTab].snapshots = [ tabs[currentTab].snapshots[tabs[currentTab].snapshots.length - 1] ];
+      // gabi :: record hierarchy of page inicial state
+      tabs[currentTab].inicialHierarchy = {...tabs[currentTab].hierarchy};
+      tabs[currentTab].inicialHierarchy.children = [];
+      // gabi :: reset hierarchy
+      tabs[currentTab].hierarchy.children = [];
+      // gabi :: reset hierarchy to page last state recorded
+      tabs[currentTab].hierarchy.stateSnapshot = tabs[currentTab].snapshots[0]
+      // gabi :: reset currLocation to page last state recorded
       tabs[currentTab].currLocation = tabs[currentTab].hierarchy;
-      // reset index
+      // gabi :: reset index
       tabs[currentTab].index = 0;
-      // gabi and nate :: reset name
-      tabs[currentTab].name = 0;
-      // gabi and nate :: reset branch
-      tabs[currentTab].branch = 0;
+      // gabi :: reset currParent plus current state
+      tabs[currentTab].currParent = 1;
+      // gabi :: reset currBranch
+      tabs[currentTab].currBranch = 0;
       break;
     }
     case types.SET_PORT: {

src/extension/background.js

@@ -17,6 +17,8 @@ function createTabObj(title) {
     title,
     // snapshots is an array of ALL state snapshots for the reactime tab working on a specific user application
     snapshots: [],
+    // gabi :: record inicial snapshot to refresh page in case empty function is called 
+    inicialSnapshot: [],
     // gabi and nate :: index here is the tab index that show total amount of state changes 
     index: 0, 
     //* 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)
@@ -27,10 +29,13 @@ function createTabObj(title) {
     currBranch: 0,
     //* inserting a new property to build out our hierarchy dataset for d3
     hierarchy: null,
+    // gabi :: record inicial hierarchy to refresh page in case empty function is called 
+    inicialHierarchy: null,
     mode: {
       persist: false,
       locked: false,
       paused: false,
+      empty: false,
     },
   };
 }
@@ -133,17 +138,27 @@ chrome.runtime.onConnect.addListener(port => {
         tabsObj[tabId].snapshots = payload;
         return true;
       case 'emptySnap':
-        tabsObj[tabId].snapshots.splice(1);
-        // reset children in root node to reset graph
+        // gabi :: activate empty mode
+        tabsObj[tabId].mode.empty = true 
+        // gabi :: record snapshot of page inicial state
+        tabsObj[tabId].inicialSnapshot.push(tabsObj[tabId].snapshots[0]);
+        // gabi :: reset snapshots to page last state recorded
+        tabsObj[tabId].snapshots = [tabsObj[tabId].snapshots[tabsObj[tabId].snapshots.length - 1] ];
+        // gabi :: record hierarchy of page inicial state
+        tabsObj[tabId].inicialHierarchy = {...tabsObj[tabId].hierarchy};
+        tabsObj[tabId].inicialHierarchy.children = [];
+        // gabi :: reset hierarchy
         tabsObj[tabId].hierarchy.children = [];
-        // reassigning pointer to the appropriate node to branch off of
+        // gabi :: reset hierarchy to page last state recorded
+        tabsObj[tabId].hierarchy.stateSnapshot = tabsObj[tabId].snapshots[0]
+        // gabi :: reset currLocation to page last state recorded
         tabsObj[tabId].currLocation = tabsObj[tabId].hierarchy;
-        // reset index
+        // gabi :: reset index
         tabsObj[tabId].index = 0;
-        // reset name
-        tabs[currentTab].name = 0;
-        // reset branch
-        tabs[currentTab].branch = 0;
+        // gabi :: reset currParent plus current state
+        tabsObj[tabId].currParent = 1;
+        // gabi :: reset currBranch
+        tabsObj[tabId].currBranch = 0;
         return true;
       case 'setLock':
         tabsObj[tabId].mode.locked = payload;
@@ -185,13 +200,10 @@ chrome.runtime.onMessage.addListener((request, sender) => {
     tabsObj[tabId] = createTabObj(tabTitle);
   }
 
-  const { persist } = tabsObj[tabId].mode;
+  const { persist, empty } = tabsObj[tabId].mode;
 
   switch (action) {
     case 'jumpToSnap': {
-      // console.log('this tabsObj[tabId] sent to changeCurrLocation', tabsObj[tabId])
-      // console.log('this tabsObj[tabId].hierarchy sent to changeCurrLocation', tabsObj[tabId].hierarchy)
-      // console.log('this index sent to changeCurrLocation', index)
       changeCurrLocation(tabsObj[tabId], tabsObj[tabId].hierarchy, index, name);
       break;
     }
@@ -201,20 +213,25 @@ chrome.runtime.onMessage.addListener((request, sender) => {
       tabsObj[tabId].mode.paused = false;
       // dont remove snapshots if persisting
       if (!persist) {
-        tabsObj[tabId].snapshots.splice(1);
-        // reset children in root node to reset graph
-        if (tabsObj[tabId].hierarchy)
+        if(empty){        
+          // gabi :: reset snapshots to page inicial state recorded when empted 
+          tabsObj[tabId].snapshots = tabsObj[tabId].inicialSnapshot;
+          // gabi :: reset hierarchy to page inicial state recorded when empted 
+          tabsObj[tabId].hierarchy = tabsObj[tabId].inicialHierarchy
+        } else {
+          // gabi :: reset snapshots to page inicial state
+          tabsObj[tabId].snapshots.splice(1);
+          // gabi :: reset hierarchy to page inicial state
           tabsObj[tabId].hierarchy.children = [];
-        // reassigning pointer to the appropriate node to branch off of
-        // tabsObj[tabId].hierarchy = null;
-        tabsObj[tabId].currLocation = tabsObj[tabId].hierarchy;
-        // tabsObj[tabId].currLocation = null;
-        // reset index
-        tabsObj[tabId].index = 0;
-        // reset currParent
-        tabsObj[tabId].currParent = 0;
-        // reset currBranch
-        tabsObj[tabId].currBranch = 0;
+        }
+      // gabi :: reset currLocation to page inicial state
+      tabsObj[tabId].currLocation = tabsObj[tabId].hierarchy;
+      // gabi :: reset index
+      tabsObj[tabId].index = 0;
+      // gabi :: reset currParent plus current state
+      tabsObj[tabId].currParent = 1;
+      // gabi :: reset currBranch
+      tabsObj[tabId].currBranch = 0;
 
         // send a message to devtools
         portsArr.forEach(bg =>