merged with dev

Author: rydang

package-lock.json

@@ -3,8 +3,8 @@ import JSONTree from 'react-json-tree';
 
 const getItemString = (type, data, itemType, itemString) => (
   <span>
-    //
-    {type}
+    {/* //
+    {type} */}
   </span>
 );
 
@@ -18,7 +18,10 @@ const Tree = (props) => {
         <JSONTree
           data={snapshot}
           theme={{ tree: () => ({ className: 'json-tree' }) }}
+          shouldExpandNode={() => true}
           getItemString={getItemString}
+          // labelRenderer={raw => <strong>{raw}</strong>}
+          // valueRenderer={raw => <em>{raw}</em>}
         />
       )}
     </React.Fragment>

src/app/components/Tree.jsx

@@ -27,7 +27,7 @@ const ActionContainer = ({
   }
   return (
     <div className="action-container">
-      <div className="action-component">
+      <div className="action-component exclude">
         <div className="empty-button" onClick={emptySnapshot}>
           emptySnapshot
         </div>

src/app/containers/ActionContainer.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const HeadContainer = () => (
-  <div className="head-container">HeadContainer</div>
+  <div className="head-container" />
 );
 
 export default HeadContainer;

src/app/containers/HeadContainer.jsx

@@ -1,22 +1,26 @@
 import React from 'react';
-import { MemoryRouter as Router, Route, NavLink } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import {
+  MemoryRouter as Router, Route, NavLink, Switch,
+} from 'react-router-dom';
 import Tree from '../components/Tree';
 import Chart from '../components/Chart';
 
 const StateContainer = ({ snapshot }) => (
   <Router>
     <div className="state-container">
       <div className="navbar">
-        <NavLink className="router-link" activeClassName="is-active" to="/tree">
+        <NavLink className="router-link" activeClassName="is-active" to="/">
           Tree
         </NavLink>
         <NavLink className="router-link" activeClassName="is-active" to="/chart">
           Chart
         </NavLink>
       </div>
-      <Route path="/tree" render={() => <Tree snapshot={snapshot} />} />
-      <Route path="/chart" render={() => <Chart snapshot={snapshot} />} />
+      <Switch>
+        <Route path="/chart" render={() => <Chart snapshot={snapshot} />} />
+        <Route path="/" render={() => <Tree snapshot={snapshot} />} />
+      </Switch>
     </div>
   </Router>
 );

src/app/containers/StateContainer.jsx

@@ -21,6 +21,9 @@ $light-grey-three: rgb(101, 104, 110) !default;
 /// @type Color
 $navbar-color: rgb(68, 72, 78) !default;
 
+/// @type Color
+$head-color: #353b46 !default;
+
 /// @type Color
 $border-color: rgba(190, 190, 190, 0.5) !default;
 

src/app/styles/abstracts/_variables.scss

@@ -16,10 +16,15 @@
   background-color: $light-grey-one;
 }
 
-.action-component button {
-  position: relative;
+.action-component .empty-button {
+  // grid-column: 1 / span 4;
 }
 
 .action-component:hover .jump-button {
   visibility: visible;
 }
+
+.action-component.exclude {
+  display: flex;
+  justify-content: center;
+}

src/app/styles/components/_actionComponent.scss

@@ -1,8 +1,6 @@
 .json-tree {
-  position: absolute;
   margin: 10px;
   padding: 0;
   background-color: $brand-color;
   list-style: none;
-  // overflow: hidden;
 }

src/app/styles/components/_jsonTree.scss

@@ -0,0 +1,4 @@
+.head-container {
+  height: 5%;
+  background-color: $head-color;
+}

src/app/styles/layout/_headContainer.scss

@@ -7,7 +7,9 @@
 @import 'base/base', 'base/fonts', 'base/helpers', 'base/typography';
 
 // 4. Layout-related sections
-@import 'layout/actionContainer', 'layout/stateContainer', 'layout/travelContainer', 'layout/buttonsContainer';
+@import 'layout/actionContainer', 'layout/stateContainer',
+  'layout/travelContainer', 'layout/buttonsContainer',
+  'layout/headContainer.scss';
 
 // 5. Components
 @import 'components/buttons', 'components/actionComponent',