Merge pull request #10 from aquinojardim/chart

add branch notation to actions display

Author: crperezt

src/app/components/Action.jsx

@@ -2,9 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { changeView, changeSlider } from '../actions/actions';
 
+/* // gabi and nate :: index and delta props were removed from Action.jsx  */
 const Action = props => {
   const {
-    selected, index, delta, sliderIndex, dispatch,
+    selected, index, sliderIndex, dispatch, displayName, componentName, state
   } = props;
 
   return (
@@ -15,9 +16,7 @@ const Action = props => {
       style={index > sliderIndex ? { color: '#5f6369' } : {}}
     >
       <div className="action-component-text">
-        {`${index
-        }:   ${delta}`}
-
+        {`${displayName}:  ${componentName} `} 
       </div>
       <button
         className="jump-button"
@@ -34,13 +33,15 @@ const Action = props => {
     </div>
   );
 };
-
+// gabi and nate :: added displayName, componentName and State props to propTypes
 Action.propTypes = {
   sliderIndex: PropTypes.number.isRequired,
   selected: PropTypes.bool.isRequired,
   index: PropTypes.number.isRequired,
   dispatch: PropTypes.func.isRequired,
-  delta: PropTypes.string.isRequired,
+  displayName: PropTypes.string.isRequired, 
+  componentName: PropTypes.string.isRequired, 
+  state: PropTypes.object.isRequired
 };
 
 export default Action;

src/app/containers/ActionContainer.jsx

@@ -14,69 +14,46 @@ const resetSlider = () => {
 
 function ActionContainer() {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
-  const { hierarchy, snapshots, sliderIndex, viewIndex } = tabs[currentTab];
+  const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
   console.log('actionContainer tabs[currentTab];', tabs[currentTab])
-  console.log('actionContainer snapshots;', snapshots)
 
   let actionsArr = [];
-  // build actions array
-  if (snapshots.length > 0) {
-    // breadth  first function - take in an delta obj
-    function breadthFirst(delta) {
-      if (delta === undefined) return '';
-      // aux array = current and one called next
-      let current = Object.values(delta.children); // Object.keys(delta.children);
-      let next = [];
-      let result = '';
-      // return a string
-      while (current.length > 0) {
-        const shifted = current.shift();
-        if (shifted.state) {
-          // eslint-disable-next-line no-loop-func
-          Object.keys(shifted.state).forEach(key => {
-            result = result.concat(key, ', ');
-          });
-        }
-        if (shifted.children) {
-          // eslint-disable-next-line no-loop-func
-          Object.keys(shifted.children).forEach(el => {
-            next.push(shifted.children[el]);
-          });
-        }
-        if (current.length === 0) {
-          current = next;
-          next = [];
-        }
-      }
-      return result;
-    }
+  let hierarchyArr = [];
 
-    function truncate(newDiff, num = 15) {
-      if (newDiff.length <= num) return newDiff.replace(',', '');
-      const thisdiff = newDiff.slice(0, num);
-      return thisdiff.concat('...');
-    }
-    actionsArr = snapshots.map((snapshot, index) => {
-      const selected = index === viewIndex;
-      let newDiff = '';
-      // if index is greater than 0
-      if (index > 0) {
-        // calculate the diff
-        const delta = diff(snapshots[index - 1], snapshot);
-        newDiff = truncate(breadthFirst(delta));
+    // gabi and nate :: delete function to traverse state from snapshots, now we are tranversing state from hiararchy and alsog getting infromation on display name and component name
+    const displayArray = (obj) => {
+      const newObj = {
+        index: obj.index,
+        displayName : `${obj.name}.${obj.branch}`,
+        state: obj.stateSnapshot.children[0].state,
+        componentName: obj.stateSnapshot.children[0].name,
+      }
+      hierarchyArr.push(newObj)
+      if(obj.children){
+        obj.children.forEach((element) => {
+          displayArray(element)
+        })
       }
+    }    
+    displayArray(hierarchy)
+    console.log('this is hierarchyArr', hierarchyArr)
+    
+    actionsArr = hierarchyArr.map((snapshot, index) => {
+      const selected = index === viewIndex;
       return (
         <Action
           key={`action${index}`}
           index={index}
+          state={snapshot.state}
+          displayName={snapshot.displayName}
+          componentName={snapshot.componentName} 
           selected={selected}
           dispatch={dispatch}
           sliderIndex={sliderIndex}
-          delta={newDiff}
         />
       );
     });
-  }
+
   return (
     <div className="action-container">
       <div className="action-component exclude">

src/extension/background.js

@@ -62,8 +62,8 @@ function sendToHierarchy(tabObj, newNode) {
     if(tabObj.currLocation.children.length > 1){
       // gabi and nate :: increment the value of the nodes branch by 1 
       newNode.branch+=1
-      // gabi and nate :: reassign value of current branch to be the length of the children array less one
-      tabObj.currBranch = tabObj.currLocation.children.length-1;
+      // gabi and nate :: reassign value of current branch the newNode branch value
+      tabObj.currBranch = newNode.branch;
     }
     tabObj.currLocation = newNode;
   }