Merge branch 'master' into keyCommands

Author: edwinjmenendez

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;
 
   // function arrowKeys(event, indexx) {
@@ -35,9 +36,7 @@ const Action = props => {
       tabIndex={index}
     >
       <div className="action-component-text">
-        {`${index
-        }:   ${delta}`}
-
+        {`${displayName}:  ${componentName} `} 
       </div>
       <button
         className="jump-button"
@@ -54,13 +53,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/components/Chart.jsx

@@ -23,12 +23,14 @@ class Chart extends Component {
 
   componentDidMount() {
     const { hierarchy } = this.props;
+    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)
     root = JSON.parse(JSON.stringify(hierarchy));
     this.maked3Tree();
   }
@@ -50,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)
     const chartContainer = d3.select(this.chartRef.current)
       .append('svg') // chartContainer is now pointing to svg
       .attr('width', width)
@@ -71,7 +73,8 @@ class Chart extends Component {
     const tree = d3.tree()
       // this assigns width of tree to be 2pi
       .size([2 * Math.PI, radius / 1.3])
-      .separation(function (a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
+      // .separation(function (a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
+      .separation(function (a, b) { return (a.parent == b.parent ? 1 : 2)});
 
     const d3root = tree(hierarchy);
 
@@ -142,7 +145,10 @@ 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) {
-        return d.data.index;
+        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}`;
       });
 
     // allows svg to be dragged around

src/app/containers/ActionContainer.jsx

@@ -14,67 +14,46 @@ const resetSlider = () => {
 
 function ActionContainer() {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
-  const { snapshots, sliderIndex, viewIndex } = tabs[currentTab];
+  const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
+  console.log('actionContainer tabs[currentTab];', tabs[currentTab])
 
   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/app/styles/components/d3graph.css

@@ -58,7 +58,7 @@ div.tooltip {
   pointer-events: none;
 }
 
-/* .d3-tip {
+ .d3-tip {
   line-height: 1;
   padding: 6px;
   background: #9cf4df;
@@ -68,9 +68,9 @@ div.tooltip {
   max-width: 400px;
   overflow-wrap: break-word;
   font-family: "Overpass Mono", monospace;
-} */
+}
 
-/* Creates a small triangle extender for the tooltip
+/* Creates a small triangle extender for the tooltip */
 .d3-tip:after {
   box-sizing: border-box;
   display: inline;
@@ -80,11 +80,11 @@ div.tooltip {
   content: "\25BC";
   position: absolute;
   text-align: center;
-} */
+}
 
 /* Style northward tooltips specifically */
-/* .d3-tip.n:after {
+.d3-tip.n:after {
   margin: -2px 0 0 0;
   top: 100%;
   left: 0;
-} */
+}

src/extension/background.js

@@ -17,9 +17,14 @@ function createTabObj(title) {
     title,
     // snapshots is an array of ALL state snapshots for the reactime tab working on a specific user application
     snapshots: [],
-    index: 0,
+    // 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)
     currLocation: null,
+    // gabi and nate :: point the node that will generate the next child set by newest node or jump
+    currParent: 0,
+    // gabi and nate :: points to the current branch                     
+    currBranch: 0,
     //* inserting a new property to build out our hierarchy dataset for d3
     hierarchy: null,
     mode: {
@@ -35,7 +40,12 @@ class Node {
     // eslint-disable-next-line no-param-reassign
     // eslint-disable-next-line no-multi-assign
     // eslint-disable-next-line no-plusplus
+    // gabi and nate :: continue the order of number of total state changes
     this.index = tabObj.index++;
+    // gabi and nate :: continue the order of number of states changed from that parent
+    this.name = tabObj.currParent+=1;
+    // gabi and nate :: mark from what branch this node is originated
+    this.branch = tabObj.currBranch;
     this.stateSnapshot = obj;
     this.children = [];
     console.log('created node in  background.js constructor');
@@ -48,14 +58,24 @@ function sendToHierarchy(tabObj, newNode) {
     tabObj.hierarchy = newNode;
   } else {
     tabObj.currLocation.children.push(newNode);
+    // gabi and nate :: if the node's children's array is empty
+    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 the newNode branch value
+      tabObj.currBranch = newNode.branch;
+    }
     tabObj.currLocation = newNode;
   }
 }
 
 function changeCurrLocation(tabObj, rootNode, index) {
+  // 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) {
+  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;
     return;
   }
   // base case if no children
@@ -165,6 +185,9 @@ chrome.runtime.onMessage.addListener((request, sender) => {
 
   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);
       break;
     }