merging dev files into d3 implementation

Author: nusanam

src/app/components/Chart.jsx

@@ -8,7 +8,6 @@ import * as d3 from 'd3';
 import d3Tip from "d3-tip";
 
 let root = {};
-let duration = 750;
 class Chart extends Component {
   constructor(props) {
     super(props);
@@ -17,15 +16,13 @@ class Chart extends Component {
     this.removed3Tree = this.removed3Tree.bind(this);
   }
   componentDidMount() {
-    const { snapshot, hierarchy } = this.props;
-    console.log('initial props', this.props)
+    const { hierarchy } = this.props;
     root = JSON.parse(JSON.stringify(hierarchy));
     this.maked3Tree();
   }
 
   componentDidUpdate() {
-    const { snapshot, hierarchy } = this.props;
-    console.log('updated props', this.props)
+    const { hierarchy } = this.props;
     root = JSON.parse(JSON.stringify(hierarchy));
     this.maked3Tree();
   }

src/app/components/StateRoute.jsx

@@ -18,7 +18,7 @@ const StateRoute = ({ snapshot, hierarchy }) => (
       </NavLink>
     </div>
     <Switch>
-      <Route path="/chart" render={() => <Chart snapshot={snapshot} hierarchy={hierarchy} />} />
+      <Route path="/chart" render={() => <Chart hierarchy={hierarchy} />} />
       <Route path="/" render={() => <Tree snapshot={snapshot} />} />
     </Switch>
   </Router>

src/app/containers/MainContainer.jsx

@@ -24,8 +24,6 @@ function MainContainer() {
     // listen for a message containing snapshots from the background script
     port.onMessage.addListener(message => {
       const { action, payload, sourceTab } = message;
-      console.log('action message', action);
-      console.log('payload message', message)
       switch (action) {
         case 'deleteTab': {
           dispatch(deleteTab(payload));
@@ -68,7 +66,6 @@ function MainContainer() {
     );
   }
   const { viewIndex, sliderIndex, snapshots, hierarchy } = tabs[currentTab];
-  console.log('main container', tabs[currentTab]);
 
   // if viewIndex is -1, then use the sliderIndex instead
   const snapshotView = viewIndex === -1 ? snapshots[sliderIndex] : snapshots[viewIndex];

src/app/containers/StateContainer.jsx

@@ -8,7 +8,6 @@ import DiffRoute from '../components/DiffRoute';
 
 
 const StateContainer = ({ snapshot, hierarchy }) => {
-  console.log('passing?', hierarchy);
   const [Text, setText] = useState('State');
   return (
     <Router>

src/extension/background.js

@@ -11,7 +11,7 @@ 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,
+    index: -1,
     //* 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,
     //* inserting a new property to build out our hierarchy dataset for d3 
@@ -68,7 +68,7 @@ chrome.runtime.onConnect.addListener(port => {
   if (Object.keys(tabsObj).length > 0) {
     port.postMessage({
       action: 'initialConnectSnapshots',
-      payload: { ...tabsObj, msg: 'connection to devgools made' },
+      payload: tabsObj,
     });
   }
 
@@ -104,7 +104,7 @@ chrome.runtime.onConnect.addListener(port => {
         // reassigning pointer to the appropriate node to branch off of
         tabsObj[tabId].currLocation = tabsObj[tabId].hierarchy;
         // reset index
-        tabsObj[tabId].index = 1;
+        tabsObj[tabId].index = 0;
         return;
       case 'setLock':
         tabsObj[tabId].mode.locked = payload;
@@ -124,7 +124,6 @@ chrome.runtime.onConnect.addListener(port => {
 
 // background.js recieves message from contentScript.js
 chrome.runtime.onMessage.addListener((request, sender) => {
-  console.log('received request', request);
   // IGNORE THE AUTOMATIC MESSAGE SENT BY CHROME WHEN CONTENT SCRIPT IS FIRST LOADED
   if (request.type === 'SIGN_CONNECT') return;
   const tabTitle = sender.tab.title;
@@ -146,12 +145,10 @@ chrome.runtime.onMessage.addListener((request, sender) => {
 
   switch (action) {
     case 'jumpToSnap': {
-      console.log("im triggered")
       changeCurrLocation(tabsObj[tabId], tabsObj[tabId].hierarchy, index);
       break;
     }
     case 'tabReload': {
-      console.log("tabreload triggered")
       tabsObj[tabId].mode.locked = false;
       tabsObj[tabId].mode.paused = false;
       // dont remove snapshots if persisting
@@ -162,12 +159,12 @@ chrome.runtime.onMessage.addListener((request, sender) => {
         // reassigning pointer to the appropriate node to branch off of
         tabsObj[tabId].currLocation = tabsObj[tabId].hierarchy;
         // reset index
-        tabsObj[tabId].index = 1;
+        tabsObj[tabId].index = 0;
 
         // send a message to devtools
         portsArr.forEach(bg => bg.postMessage({
           action: 'initialConnectSnapshots',
-          payload: { ...tabsObj, msg: 'reload' },
+          payload: tabsObj,
         }));
       }
 
@@ -189,7 +186,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
         if (portsArr.length > 0) {
           portsArr.forEach(bg => bg.postMessage({
             action: 'initialConnectSnapshots',
-            payload: {...tabsObj, msg: 'firstsnapshotreceived'},
+            payload: tabsObj,
           }));
         }
         break;