Merge pull request #13 from oslabs-beta/staging

Staging

Author: crperezt

src/app/components/Chart.jsx

@@ -23,14 +23,14 @@ class Chart extends Component {
 
   componentDidMount() {
     const { hierarchy } = this.props;
-    console.log('this is hierarchy on didMount chart', hierarchy)
+    // console.log('this is hierarchy on didMount chart', hierarchy)
     root = JSON.parse(JSON.stringify(hierarchy));
     this.maked3Tree();
   }
 
   componentDidUpdate() {
     const { hierarchy } = this.props;
-    console.log('this is hierarchy on didUpdate chart', hierarchy)
+    // console.log('this is hierarchy on didUpdate chart', hierarchy)
     root = JSON.parse(JSON.stringify(hierarchy));
     this.maked3Tree();
   }
@@ -52,7 +52,7 @@ class Chart extends Component {
     };
     const width = 600 - margin.right - margin.left;
     const height = 700 - margin.top - margin.bottom;
-    console.log('this is this.chartRef.current on chart', this.chartRef.current)
+    // console.log('this is this.chartRef.current on chart', this.chartRef.current)
     const chartContainer = d3.select(this.chartRef.current)
       .append('svg') // chartContainer is now pointing to svg
       .attr('width', width)
@@ -145,7 +145,7 @@ class Chart extends Component {
       // this arranges the angle of the text
       .attr('transform', function (d) { return 'rotate(' + (d.x < Math.PI ? d.x - Math.PI / 2 : d.x + Math.PI / 2) * 1 / Math.PI + ')'; })
       .text(function (d) {
-        console.log('this is d from text char line 148', d)
+        // console.log('this is d from text char line 148', d)
         // save d.data.index to variable
         // gabi and nate :: display the name of of specific patch
         return `${d.data.name}.${d.data.branch}`;

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,9 +34,10 @@ function ActionContainer() {
           displayArray(element)
         })
       }
-    }    
-    displayArray(hierarchy)
-    console.log('this is hierarchyArr', hierarchyArr)
+    }
+    // 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) => {
       const selected = index === viewIndex;

src/app/containers/MainContainer.jsx

@@ -13,20 +13,20 @@ import { useStoreContext } from '../store';
 function MainContainer() {
   const [store, dispatch] = useStoreContext();
   const { tabs, currentTab, port: currentPort } = store;
-  console.log('entered MainContainer');
+  // console.log('entered MainContainer');
 
   // add event listeners to background script
   useEffect(() => {
     // only open port once
     if (currentPort) return;
     // open connection with background script
-    console.log('opening connection with background script');
+    // console.log('opening connection with background script');
     const port = chrome.runtime.connect();
-    console.log('connection opened?');
+    // console.log('connection opened?');
 
     // listen for a message containing snapshots from the background script
     port.onMessage.addListener(message => {
-      console.log('this is message from port', message)
+      // console.log('this is message from port', message)
       const { action, payload, sourceTab } = message;
       switch (action) {
         case 'deleteTab': {

src/app/reducers/mainReducer.js

@@ -2,21 +2,44 @@
 import produce from 'immer';
 import * as types from '../constants/actionTypes';
 
+
 export default (state, action) => produce(state, draft => {
   const { port, currentTab, tabs } = draft;
   const {
-    snapshots, mode, intervalId, viewIndex, sliderIndex,
+    hierarchy, snapshots, mode, intervalId, viewIndex, sliderIndex,
   } = tabs[currentTab] || {};
+  
+  
+  // 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;
+    }
+    else {
+      const hierarchyChildArray = [];
+      for (let hierarchyChild of hierarchy.children){
+        hierarchyChildArray.push(findName(index, hierarchyChild));
+      }
+      for (let hierarchyChildName of hierarchyChildArray){
+        if(hierarchyChildName){
+          return hierarchyChildName
+        }
+      }
+    } 
+  }
 
   switch (action.type) {
     case types.MOVE_BACKWARD: {
       if (snapshots.length > 0 && sliderIndex > 0) {
         const newIndex = sliderIndex - 1;
+        // gabi and nate :: find the name by the newIndex parsing through the hierarchy to send to background.js the current name in the jump action
+        const nameFromIndex = findName(newIndex, hierarchy)
 
         port.postMessage({
           action: 'jumpToSnap',
           payload: snapshots[newIndex],
           index: newIndex,
+          name: nameFromIndex,
           tabId: currentTab,
         });
         clearInterval(intervalId);
@@ -29,10 +52,13 @@ export default (state, action) => produce(state, draft => {
     case types.MOVE_FORWARD: {
       if (sliderIndex < snapshots.length - 1) {
         const newIndex = sliderIndex + 1;
+        // gabi and nate :: find the name by the newIndex parsing through the hierarchy to send to background.js the current name in the jump action
+        const nameFromIndex = findName(newIndex, hierarchy)
 
         port.postMessage({
           action: 'jumpToSnap',
           index: newIndex,
+          name: nameFromIndex,
           payload: snapshots[newIndex],
           tabId: currentTab,
         });
@@ -48,9 +74,11 @@ export default (state, action) => produce(state, draft => {
       break;
     }
     case types.SLIDER_ZERO: {
+      // gabi and nate :: reset name to 0 to send to background.js the current name in the jump action
       port.postMessage({
         action: 'jumpToSnap',
         index: 0,
+        name: 0,
         payload: snapshots[0],
         tabId: currentTab,
       });
@@ -64,10 +92,14 @@ export default (state, action) => produce(state, draft => {
       break;
     }
     case types.CHANGE_SLIDER: {
+      // gabi and nate :: finds the name by the action.payload, parsing through the hierarchy to send to background.js the current name in the jump action
+      const nameFromIndex = findName(action.payload, hierarchy)
+
       port.postMessage({
         action: 'jumpToSnap',
         payload: snapshots[action.payload],
         index: action.payload,
+        name: nameFromIndex,
         tabId: currentTab,
       });
       tabs[currentTab].sliderIndex = action.payload;
@@ -78,13 +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 :: reset currParent plus current state
+      tabs[currentTab].currParent = 1;
+      // gabi :: reset currBranch
+      tabs[currentTab].currBranch = 0;
       break;
     }
     case types.SET_PORT: {
@@ -168,7 +214,7 @@ export default (state, action) => produce(state, draft => {
       break;
     }
     case types.SET_TAB: {
-      console.log('this is action.payload', action.payload)
+      // console.log('this is SET_TAB action.payload', action.payload)
       if (typeof action.payload === 'number') {
         draft.currentTab = action.payload;
         break;

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,
     },
   };
 }
@@ -69,13 +74,13 @@ function sendToHierarchy(tabObj, newNode) {
   }
 }
 
-function changeCurrLocation(tabObj, rootNode, index) {
+function changeCurrLocation(tabObj, rootNode, index, name) {
   // gabi and nate :: index comes from the app's main reducer to locate the right current location on tabObj 
   // check if current node has the index wanted
   if (rootNode.index === index) { 
     tabObj.currLocation = rootNode;
     // gabi and nate :: index of current location from where the next node will be a child
-    tabObj.currParent = index;
+    tabObj.currParent = name;
     return;
   }
   // base case if no children
@@ -85,7 +90,7 @@ function changeCurrLocation(tabObj, rootNode, index) {
   }
   if (rootNode.children) {
     rootNode.children.forEach(child => {
-      changeCurrLocation(tabObj, child, index);
+      changeCurrLocation(tabObj, child, index, name);
     });
   }
 }
@@ -133,13 +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
-        tabsObj[tabId].index = 1;
+        // gabi :: reset index
+        tabsObj[tabId].index = 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;
@@ -164,7 +183,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
   if (request.type === 'SIGN_CONNECT') return true;
   const tabTitle = sender.tab.title;
   const tabId = sender.tab.id;
-  const { action, index } = request;
+  const { action, index, name } = request;
   let isReactTimeTravel = false;
 
   // Filter out tabs that don't have reactime
@@ -181,14 +200,11 @@ 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);
+      changeCurrLocation(tabsObj[tabId], tabsObj[tabId].hierarchy, index, name);
       break;
     }
     // this case causes d3 graph to display 1 instead of 0
@@ -197,15 +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 (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].currLocation = tabsObj[tabId].hierarchy;
-        // reset index
-        tabsObj[tabId].index = 1;
+        }
+      // 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 =>