changes to diff test

Author: nmwenz90

src/app/components/Chart.jsx

@@ -14,7 +14,7 @@
 import React, { Component } from 'react';
 import * as d3 from 'd3';
 
-const colors = ['#2C4870','#519331','#AA5039','#8B2F5F','#C5B738','#858DFF', '#FF8D02','#FFCD51','#ACDAE6','#FC997E','#CF93AD','#AA3939','#AA6C39','#226666',]
+const colors = ['#2C4870', '#519331', '#AA5039', '#8B2F5F', '#C5B738', '#858DFF', '#FF8D02','#FFCD51','#ACDAE6','#FC997E','#CF93AD','#AA3939','#AA6C39','#226666',]
 
 let root = {};
 class Chart extends Component {
@@ -174,7 +174,7 @@ class Chart extends Component {
 
     chartContainer.call(d3.zoom()
       .extent([[0, 0], [width, height]])
-      .scaleExtent([0, 8]) //scaleExtent([minimum scale factor, maximum scale factor])
+      .scaleExtent([0, 8]) // scaleExtent([minimum scale factor, maximum scale factor])
       .on('zoom', zoomed));
 
     function dragstarted() {

src/app/components/Diff.jsx

@@ -7,24 +7,37 @@ import { useStoreContext } from '../store';
 
 function Diff({ snapshot, show }) {
   const [mainState] = useStoreContext();
+  console.log('this is the mainState variable -->', mainState);
   const { currentTab, tabs } = mainState; // Nate:: k/v pairs of mainstate store object being created
+  console.log('this is the currentTab variable -->', currentTab);
+  console.log('this is the tabs variable -->', tabs);
   const { snapshots, viewIndex, sliderIndex } = tabs[currentTab];
   let previous;
 
   // previous follows viewIndex or sliderIndex
-  if (viewIndex !== -1) {
+  if (viewIndex !== -1) { // if tab isnt selected, view index is set to -1
     previous = snapshots[viewIndex - 1];
+    console.log('previous with viewIndex - 1: ', previous)
   } else {
     previous = snapshots[sliderIndex - 1];
+    console.log('previous with sliderIndex - 1: ', previous)
   }
   // Nate:: diff function returns a comparaison of two objects, one has an updated change
-  const delta = diff(previous, snapshot);
+  const delta = diff(previous, snapshot); // initilly an array with one object, on state change becomes an object
+  console.log('delta: ', delta);
   // returns html in string
   const html = formatters.html.format(delta, previous);
-  if (show) formatters.html.showUnchanged();
-  else formatters.html.hideUnchanged();
-
+  // console.log('html   -->', html)
+  if (show){
+    console.log('showing unchanged values', formatters.html.showUnchanged() );
+    formatters.html.showUnchanged();
+  } else {
+    console.log('hiding unchanged values', formatters.html.hideUnchanged() );
+    formatters.html.hideUnchanged();
+  };
+  
   if (previous === undefined || delta === undefined) {
+    console.log('reacthtml parser -->', ReactHtmlParser(html), typeof ReactHtmlParser(html))
     return <div className='noState'> No state change detected. Trigger an event to change state </div>;
   }
   return <div>{ReactHtmlParser(html)}</div>;

src/extension/background.js

@@ -143,14 +143,9 @@ chrome.runtime.onConnect.addListener(port => {
         // gabi :: reset snapshots to page last state recorded
         tabsObj[tabId].snapshots = [tabsObj[tabId].snapshots[tabsObj[tabId].snapshots.length - 1]];
         // gabi :: record hierarchy of page initial state
-<<<<<<< HEAD
-        tabsObj[tabId].initialHierarchy = { ...tabsObj[tabId].hierarchy };
-        tabsObj[tabId].initialHierarchy.children = [];
-=======
         // tabsObj[tabId].initialHierarchy = {...tabsObj[tabId].hierarchy};
         // tabsObj[tabId].initialHierarchy.children = [];
         tabsObj[tabId].initialHierarchy = {...tabsObj[tabId].hierarchy, children: []};
->>>>>>> a2b5286dc42dfbdd12f5d26322b1ac238958ed05
         // gabi :: reset hierarchy
         tabsObj[tabId].hierarchy.children = [];
         // gabi :: reset hierarchy to page last state recorded
@@ -237,23 +232,12 @@ chrome.runtime.onMessage.addListener((request, sender) => {
             tabsObj[tabId].currParent = 0;
           }
         }
-<<<<<<< HEAD
-        // gabi :: reset currLocation to page initial 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;
-=======
       // gabi :: reset currLocation to page initial state
       tabsObj[tabId].currLocation = tabsObj[tabId].hierarchy;
       // gabi :: reset index
       tabsObj[tabId].index = 0;
       // gabi :: reset currBranch
       tabsObj[tabId].currBranch = 0;
->>>>>>> a2b5286dc42dfbdd12f5d26322b1ac238958ed05
 
         // send a message to devtools
         portsArr.forEach(bg =>
@@ -339,10 +323,6 @@ chrome.tabs.onRemoved.addListener(tabId => {
 // when tab is view change, put the tabid as the current tab
 chrome.tabs.onActivated.addListener(info => {
   // tell devtools which tab to be the current
-<<<<<<< HEAD
-  console.log('this is info.tabId from chrome.tabs.onActivated.addListener', info);
-=======
->>>>>>> a2b5286dc42dfbdd12f5d26322b1ac238958ed05
   if (portsArr.length > 0) {
     portsArr.forEach(bg =>
       bg.postMessage({