Merge branch 'master' into keyCommands

Author: edwinjmenendez

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

@@ -31,12 +31,13 @@ function ActionContainer() {
     hierarchyArr.push(newObj)
     if (obj.children) {
       obj.children.forEach((element) => {
-        displayArray(element);
-      });
+        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)
 
   // Edwin: handles keyboard presses, function passes an event and index of each action-component
   function handleOnKeyDown(e, i) {
@@ -59,7 +60,7 @@ function ActionContainer() {
       dispatch(changeSlider(currIndex));
     }
   }
-
+    
   actionsArr = hierarchyArr.map((snapshot, index) => {
     const selected = index === viewIndex;
     return (
@@ -78,7 +79,6 @@ function ActionContainer() {
     );
   });
 
-
   return (
     <div className="action-container">
       <div className="action-component exclude">

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;