Merge pull request #21 from oslabs-beta/staging

Staging

Author: crperezt

src/app/components/Action.jsx

@@ -18,7 +18,7 @@ const Action = props => {
         dispatch(changeView(index));
       }}
       role="presentation"
-      style={index > sliderIndex ? { color: '#5f6369' } : {}}
+      style={index >= sliderIndex ? { color: '#5f6369' } : {}}
       tabIndex={index}
     >
       <div className="action-component-text">

src/app/components/Chart.jsx

@@ -14,6 +14,8 @@
 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',]
+
 let root = {};
 class Chart extends Component {
   constructor(props) {
@@ -25,14 +27,12 @@ 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();
   }
@@ -54,7 +54,6 @@ 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)
@@ -92,7 +91,6 @@ class Chart extends Component {
       .attr('class', 'link')
       .attr('d', d3.linkRadial()
         .angle(d => {
-          console.log('d on line 92 chart', d)
           return d.x
         })
         .radius(d => d.y));
@@ -102,10 +100,23 @@ class Chart extends Component {
       .data(d3root.descendants())
       .enter()
       .append('g')
-      //  assigning class to the node based on whether node has children or not
-      .attr('class', function (d) {
-        return 'node' + (d.children ? ' node--internal' : ' node--leaf');
+      .style('fill', function (d) {
+        if(d.data.branch < colors.length){
+          return colors[d.data.branch]
+        } else {
+          let indexColors = d.data.branch - colors.length;
+          while(indexColors > colors.length){
+            indexColors = indexColors - colors.length;
+          }
+          return colors[indexColors]
+        }
       })
+      .attr('class', 'node--internal')
+      // })
+      //  assigning class to the node based on whether node has children or not
+      // .attr('class', function (d) {
+      //   return 'node' + (d.children ? ' node--internal' : ' node--leaf');
+      // })
       .attr('transform', function (d) {
         return 'translate(' + reinfeldTidierAlgo(d.x, d.y) + ')';
       });
@@ -151,8 +162,6 @@ 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) {
-        // 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}`;
       });

src/app/containers/ActionContainer.jsx

@@ -38,7 +38,6 @@ function ActionContainer() {
   }
   // gabi :: the hierarchy get set on the first click in the page, when page in refreshed we don't have a hierarchy so we need to check if hierarchy was inicialize involk displayArray to display the hierarchy  
   if (hierarchy) displayArray(hierarchy)
-  // console.log('this is hierarchyArr', hierarchyArr)
 
   // Edwin: handles keyboard presses, function passes an event and index of each action-component
   function handleOnKeyDown(e, i) {

src/app/containers/MainContainer.jsx

@@ -13,21 +13,22 @@ import { useStoreContext } from '../store';
 function MainContainer() {
   const [store, dispatch] = useStoreContext();
   const { tabs, currentTab, port: currentPort } = store;
-  // console.log('entered MainContainer');
 
   // add event listeners to background script
   useEffect(() => {
     // only open port once
     if (currentPort) return;
     // open connection with background script
-    // console.log('opening connection with background script');
     const port = chrome.runtime.connect();
-    // console.log('connection opened?');
 
     // listen for a message containing snapshots from the background script
     port.onMessage.addListener(message => {
-      // console.log('this is message from port', message)
       const { action, payload, sourceTab } = message;
+      let maxTab
+        if(!sourceTab){
+          let tabsArray = Object.keys(payload)
+          maxTab = Math.max(...tabsArray)
+        }
       switch (action) {
         case 'deleteTab': {
           dispatch(deleteTab(payload));
@@ -44,8 +45,8 @@ function MainContainer() {
           break;
         }
         case 'initialConnectSnapshots': {
+          dispatch(setTab(maxTab));
           dispatch(initialConnect(payload));
-          dispatch(setTab(sourceTab));
           break;
         }
         default:

src/app/index.js

@@ -4,5 +4,4 @@ import ReactDOM from 'react-dom';
 import App from './components/App';
 import './styles/main.scss';
 
-console.log('entered index.js, rendering App')
 ReactDOM.render(<App />, document.getElementById('root'));

src/app/reducers/mainReducer.js

@@ -214,7 +214,6 @@ export default (state, action) => produce(state, draft => {
       break;
     }
     case types.SET_TAB: {
-      // console.log('this is SET_TAB action.payload', action.payload)
       if (typeof action.payload === 'number') {
         draft.currentTab = action.payload;
         break;

src/app/styles/components/d3graph.css

@@ -6,41 +6,43 @@ body {
 
 .node {
   cursor: pointer;
+  fill-opacity: 0.8;
 }
 
 /*   this represents leaf nodes aka nodes with no children */
-.node circle {
+/* .node circle {
   fill: #5249f7;
-}
+} */
 
 /* .node circle:hover {
   fill: #320a5c;
 } */
 
 .node text {
+  fill: #fae6e4;
   font-size: 10px;
   font-family: "Overpass Mono", monospace;
 }
 
 
 /* this represents text for leaf nodes aka the ones with no children */
-.node--leaf {
+/* .node--leaf {
   fill: #71e9e1;
   fill-opacity: 0.8;
-}
+} */
 
 /*   this represents those nodes that have children */
-.node--internal circle {
+/* .node--internal circle {
   fill: #d317c9;
-}
+} */
 /*   modifies text of parent nodes (has children) */
 .node--internal text {
-  fill: #fae6e4;
+  fill: white;
   font-size: 10px;
 }
 .link {
   fill: none;
-  stroke: #3853ea;
+  stroke:#fae6e4;;
   stroke-opacity: 0.4;
   stroke-width: 3px;
 }

src/extension/background.js

@@ -9,7 +9,6 @@ const reloaded = {};
 const firstSnapshotReceived = {};
 // there will be the same number of objects in here as there are reactime tabs open for each user application being worked on
 const tabsObj = {};
-console.log('entered background.js');
 
 function createTabObj(title) {
   // update tabsObj
@@ -53,7 +52,6 @@ class Node {
     this.branch = tabObj.currBranch;
     this.stateSnapshot = obj;
     this.children = [];
-    console.log('created node in  background.js constructor');
   }
 }
 
@@ -145,8 +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
-        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: []};
         // gabi :: reset hierarchy
         tabsObj[tabId].hierarchy.children = [];
         // gabi :: reset hierarchy to page last state recorded
@@ -180,7 +179,9 @@ chrome.runtime.onConnect.addListener(port => {
 // background.js recieves message from contentScript.js
 chrome.runtime.onMessage.addListener((request, sender) => {
   // IGNORE THE AUTOMATIC MESSAGE SENT BY CHROME WHEN CONTENT SCRIPT IS FIRST LOADED
-  if (request.type === 'SIGN_CONNECT') return true;
+  if (request.type === 'SIGN_CONNECT'){
+    return true;
+  }
   const tabTitle = sender.tab.title;
   const tabId = sender.tab.id;
   const { action, index, name } = request;
@@ -222,14 +223,19 @@ chrome.runtime.onMessage.addListener((request, sender) => {
           // gabi :: reset snapshots to page initial state
           tabsObj[tabId].snapshots.splice(1);
           // gabi :: reset hierarchy to page initial state
-          tabsObj[tabId].hierarchy.children = [];
+          if(tabsObj[tabId].hierarchy){
+            tabsObj[tabId].hierarchy.children = [];
+            // gabi :: reset currParent plus current state
+            tabsObj[tabId].currParent = 1;
+          } else {
+            // gabi :: reset currParent
+            tabsObj[tabId].currParent = 0;
+          }
         }
       // 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;
 
@@ -317,7 +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
-  console.log('this is info.tabId from chrome.tabs.onActivated.addListener', info)
   if (portsArr.length > 0) {
     portsArr.forEach(bg =>
       bg.postMessage({

src/extension/build/devtools.js

@@ -1,2 +1 @@
-console.log('devtools.js, creating panel');
 chrome.devtools.panels.create('Reactime', null, 'panel.html', () => {});

src/extension/contentScript.js

@@ -39,5 +39,4 @@ chrome.runtime.onMessage.addListener(request => { // seems to never fire
   return true; // attempt to fix port closing console error
 });
 
-console.log('sending contentScriptStarted message to window');
 window.postMessage({ action: 'contentScriptStarted' });