Merge pull request #16 from oslabs-beta/staging

Staging

Author: crperezt

src/app/components/Action.jsx

@@ -3,20 +3,26 @@ import PropTypes from 'prop-types';
 import { changeView, changeSlider } from '../actions/actions';
 
 /* // gabi and nate :: index and delta props were removed from Action.jsx  */
+// viewIndex and handleonkeyDown added to props
 const Action = props => {
   const {
-    selected, index, sliderIndex, dispatch, displayName, componentName, state
+    selected, index, sliderIndex, dispatch, displayName, componentName, state, viewIndex, handleOnkeyDown,
   } = props;
 
   return (
     <div
+      // Edwin: invoking keyboard functionality; functionality is in ActionContainer;
+      onKeyDown={e => handleOnkeyDown(e, viewIndex)}
       className={selected ? 'action-component selected' : 'action-component'}
-      onClick={() => dispatch(changeView(index))}
+      onClick={() => {
+        dispatch(changeView(index));
+      }}
       role="presentation"
       style={index > sliderIndex ? { color: '#5f6369' } : {}}
+      tabIndex={index}
     >
       <div className="action-component-text">
-        {`${displayName}:  ${componentName} `} 
+        {`${displayName}:  ${componentName} `}
       </div>
       <button
         className="jump-button"
@@ -41,7 +47,9 @@ Action.propTypes = {
   dispatch: PropTypes.func.isRequired,
   displayName: PropTypes.string.isRequired, 
   componentName: PropTypes.string.isRequired, 
-  state: PropTypes.object.isRequired
+  state: PropTypes.object.isRequired,
+  handleOnkeyDown: PropTypes.func.isRequired,
+  viewIndex: PropTypes.number.isRequired,
 };
 
 export default Action;

src/app/components/Chart.jsx

@@ -9,6 +9,8 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable no-use-before-define */
 /* eslint-disable react/no-string-refs */
+
+
 import React, { Component } from 'react';
 import * as d3 from 'd3';
 
@@ -72,9 +74,10 @@ class Chart extends Component {
 
     const tree = d3.tree()
       // this assigns width of tree to be 2pi
-      .size([2 * Math.PI, radius / 1.3])
+      // .size([2 * Math.PI, radius / 1.3])
+      .nodeSize([width/10, height/10])
       // .separation(function (a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
-      .separation(function (a, b) { return (a.parent == b.parent ? 1 : 2)});
+      .separation(function (a, b) { return (a.parent == b.parent ? 2 : 2)});
 
     const d3root = tree(hierarchy);
 
@@ -88,7 +91,10 @@ class Chart extends Component {
       .append('path')
       .attr('class', 'link')
       .attr('d', d3.linkRadial()
-        .angle(d => d.x)
+        .angle(d => {
+          console.log('d on line 92 chart', d)
+          return d.x
+        })
         .radius(d => d.y));
 
     const node = g.selectAll('.node')
@@ -105,12 +111,12 @@ class Chart extends Component {
       });
 
     node.append('circle')
-      .attr('r', 5)
+      .attr('r', 15)
       .on('mouseover', function (d) {
         d3.select(this)
           .transition(100)
           .duration(20)
-          .attr('r', 10);
+          .attr('r', 25);
 
         tooltipDiv.transition()
           .duration(50)
@@ -125,7 +131,7 @@ class Chart extends Component {
         d3.select(this)
           .transition()
           .duration(300)
-          .attr('r', 5);
+          .attr('r', 15);
 
         tooltipDiv.transition()
           .duration(400)
@@ -134,14 +140,14 @@ class Chart extends Component {
     node
       .append('text')
       // adjusts the y coordinates for the node text
-      .attr('dy', '-1.5em')
+      .attr('dy', '0.5em')
       .attr('x', function (d) {
         // this positions how far the text is from leaf nodes (ones without children)
         // negative number before the colon moves the text of rightside nodes,
         // positive number moves the text for the leftside nodes
-        return d.x < Math.PI === !d.children ? -4 : 5;
+        return d.x < Math.PI === !d.children ? 0 : 0;
       })
-      .attr('text-anchor', function (d) { return d.x < Math.PI === !d.children ? 'start' : 'end'; })
+      .attr('text-anchor', 'middle')
       // 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) {
@@ -159,7 +165,7 @@ class Chart extends Component {
 
     chartContainer.call(d3.zoom()
       .extent([[0, 0], [width, height]])
-      .scaleExtent([1, 8])
+      .scaleExtent([0, 8]) //scaleExtent([minimum scale factor, maximum scale factor])
       .on('zoom', zoomed));
 
     function dragstarted() {

src/app/components/StateRoute.jsx

@@ -10,7 +10,7 @@ import Tree from './Tree';
 // eslint-disable-next-line react/prop-types
 
 const StateRoute = ({ snapshot, hierarchy }) => {
-  // 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 render chart  
+  // 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 initialize involk render chart  
   const renderChart = () =>{ 
     if (hierarchy){
       return <Chart hierarchy={hierarchy} />
@@ -20,7 +20,7 @@ const StateRoute = ({ snapshot, hierarchy }) => {
     }
   }
 
-  // gabi :: the snapshot 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 snapshot was inicialize involk render chart 
+  // gabi :: the snapshot 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 snapshot was initialize involk render chart 
   const renderTree = () => { 
     if (hierarchy){
       return <Tree snapshot={snapshot} />

src/app/containers/ActionContainer.jsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { diff } from 'jsondiffpatch';
 import Action from '../components/Action';
 
-import { emptySnapshots } from '../actions/actions';
+import { emptySnapshots, changeView, changeSlider } from '../actions/actions';
 import { useStoreContext } from '../store';
 
 const resetSlider = () => {
@@ -20,40 +20,65 @@ function ActionContainer() {
   let actionsArr = [];
   let hierarchyArr = [];
 
-    // 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)
-        })
-      }
+  // 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,
     }
-    // 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)
+
+    hierarchyArr.push(newObj)
+    if (obj.children) {
+      obj.children.forEach((element) => {
+        displayArray(element)
+      })
+    }
+  }
+  // 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) {
+    let currIndex = i;
+    // up array key pressed
+    if (e.keyCode === 38) {
+      currIndex -= 1;
+      if (currIndex < 0) return;
+      dispatch(changeView(currIndex));
+    }
+    // down arrow key pressed
+    else if (e.keyCode === 40) {
+      currIndex += 1;
+      if (currIndex > hierarchyArr.length - 1) return;
+      dispatch(changeView(currIndex));
+    }
+    // enter key pressed
+    else if (e.keyCode === 13) {
+      e.stopPropagation();
+      dispatch(changeSlider(currIndex));
+    }
+  }
 
-    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}
-        />
-      );
-    });
+  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}
+        handleOnkeyDown={handleOnKeyDown}
+        viewIndex={viewIndex}
+      />
+    );
+  });
 
   return (
     <div className="action-container">

src/app/containers/HeadContainer.jsx

@@ -4,6 +4,7 @@ import SwitchAppDropdown from '../components/SwitchApp';
 function HeadContainer() {
   return (
     <div className="head-container">
+      <img src ="https://i.imgur.com/19jt84a.png" height= "30px"/>
       <SwitchAppDropdown />
     </div>
   );

src/app/containers/logo4.png

@@ -112,13 +112,13 @@ export default (state, action) => produce(state, draft => {
       tabs[currentTab].playing = false;
       // gabi :: activate empty mode
       tabs[currentTab].mode.empty = true 
-      // gabi :: record snapshot of page inicial state
-      tabs[currentTab].inicialSnapshot.push(tabs[currentTab].snapshots[0]);
+      // gabi :: record snapshot of page initial state
+      tabs[currentTab].initialSnapshot.push(tabs[currentTab].snapshots[0]);
       // gabi :: reset snapshots to page last state recorded
       tabs[currentTab].snapshots = [ tabs[currentTab].snapshots[tabs[currentTab].snapshots.length - 1] ];
-      // gabi :: record hierarchy of page inicial state
-      tabs[currentTab].inicialHierarchy = {...tabs[currentTab].hierarchy};
-      tabs[currentTab].inicialHierarchy.children = [];
+      // gabi :: record hierarchy of page initial state
+      tabs[currentTab].initialHierarchy = {...tabs[currentTab].hierarchy};
+      tabs[currentTab].initialHierarchy.children = [];
       // gabi :: reset hierarchy
       tabs[currentTab].hierarchy.children = [];
       // gabi :: reset hierarchy to page last state recorded
@@ -222,6 +222,7 @@ export default (state, action) => produce(state, draft => {
         draft.currentTab = action.payload.tabId;
         break;
       }
+      break;
     }
     case types.DELETE_TAB: {
       delete draft.tabs[action.payload];

src/app/reducers/mainReducer.js

@@ -13,14 +13,16 @@ body {
   fill: #5249f7;
 }
 
-.node circle:hover {
-  fill: #9cf4df;
-}
+/* .node circle:hover {
+  fill: #320a5c;
+} */
 
 .node text {
   font-size: 10px;
   font-family: "Overpass Mono", monospace;
 }
+
+
 /* this represents text for leaf nodes aka the ones with no children */
 .node--leaf {
   fill: #71e9e1;
@@ -34,7 +36,7 @@ body {
 /*   modifies text of parent nodes (has children) */
 .node--internal text {
   fill: #fae6e4;
-  font-size: 11px;
+  font-size: 10px;
 }
 .link {
   fill: none;

src/app/styles/components/d3graph.css

@@ -17,8 +17,8 @@ function createTabObj(title) {
     title,
     // snapshots is an array of ALL state snapshots for the reactime tab working on a specific user application
     snapshots: [],
-    // gabi :: record inicial snapshot to refresh page in case empty function is called 
-    inicialSnapshot: [],
+    // gabi :: record initial snapshot to refresh page in case empty function is called 
+    initialSnapshot: [],
     // 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)
@@ -29,8 +29,8 @@ function createTabObj(title) {
     currBranch: 0,
     //* inserting a new property to build out our hierarchy dataset for d3
     hierarchy: null,
-    // gabi :: record inicial hierarchy to refresh page in case empty function is called 
-    inicialHierarchy: null,
+    // gabi :: record initial hierarchy to refresh page in case empty function is called 
+    initialHierarchy: null,
     mode: {
       persist: false,
       locked: false,
@@ -140,13 +140,13 @@ chrome.runtime.onConnect.addListener(port => {
       case 'emptySnap':
         // gabi :: activate empty mode
         tabsObj[tabId].mode.empty = true 
-        // gabi :: record snapshot of page inicial state
-        tabsObj[tabId].inicialSnapshot.push(tabsObj[tabId].snapshots[0]);
+        // gabi :: record snapshot of page initial state
+        tabsObj[tabId].initialSnapshot.push(tabsObj[tabId].snapshots[0]);
         // gabi :: reset snapshots to page last state recorded
         tabsObj[tabId].snapshots = [tabsObj[tabId].snapshots[tabsObj[tabId].snapshots.length - 1] ];
-        // gabi :: record hierarchy of page inicial state
-        tabsObj[tabId].inicialHierarchy = {...tabsObj[tabId].hierarchy};
-        tabsObj[tabId].inicialHierarchy.children = [];
+        // gabi :: record hierarchy of page initial state
+        tabsObj[tabId].initialHierarchy = {...tabsObj[tabId].hierarchy};
+        tabsObj[tabId].initialHierarchy.children = [];
         // gabi :: reset hierarchy
         tabsObj[tabId].hierarchy.children = [];
         // gabi :: reset hierarchy to page last state recorded
@@ -214,17 +214,17 @@ chrome.runtime.onMessage.addListener((request, sender) => {
       // dont remove snapshots if persisting
       if (!persist) {
         if(empty){        
-          // gabi :: reset snapshots to page inicial state recorded when empted 
-          tabsObj[tabId].snapshots = tabsObj[tabId].inicialSnapshot;
-          // gabi :: reset hierarchy to page inicial state recorded when empted 
-          tabsObj[tabId].hierarchy = tabsObj[tabId].inicialHierarchy
+          // gabi :: reset snapshots to page initial state recorded when empted 
+          tabsObj[tabId].snapshots = tabsObj[tabId].initialSnapshot;
+          // gabi :: reset hierarchy to page initial state recorded when empted 
+          tabsObj[tabId].hierarchy = tabsObj[tabId].initialHierarchy;
         } else {
-          // gabi :: reset snapshots to page inicial state
+          // gabi :: reset snapshots to page initial state
           tabsObj[tabId].snapshots.splice(1);
-          // gabi :: reset hierarchy to page inicial state
+          // gabi :: reset hierarchy to page initial state
           tabsObj[tabId].hierarchy.children = [];
         }
-      // gabi :: reset currLocation to page inicial state
+      // gabi :: reset currLocation to page initial state
       tabsObj[tabId].currLocation = tabsObj[tabId].hierarchy;
       // gabi :: reset index
       tabsObj[tabId].index = 0;