Merge pull request #8 from aquinojardim/master

Reorganized chart display

Author: crperezt

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,7 +14,9 @@ const resetSlider = () => {
 
 function ActionContainer() {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
-  const { snapshots, sliderIndex, viewIndex } = tabs[currentTab];
+  const { hierarchy, snapshots, sliderIndex, viewIndex } = tabs[currentTab];
+  console.log('actionContainer tabs[currentTab];', tabs[currentTab])
+  console.log('actionContainer snapshots;', snapshots)
 
   let actionsArr = [];
   // build actions array

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 to be the length of the children array less one
+      tabObj.currBranch = tabObj.currLocation.children.length-1;
+    }
     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;
     }