merged

Author: mylee1995

package-lock.json

@@ -45,13 +45,15 @@
     "webpack-cli": "^3.3.6"
   },
   "dependencies": {
+    "auto-bind": "^2.1.0",
     "prop-types": "^15.7.2",
     "rc-slider": "^8.6.13",
     "rc-tooltip": "^3.7.3",
     "react": "^16.8.6",
     "react-16-dropdown": "^0.3.1",
     "react-dom": "^16.8.6",
     "react-json-tree": "^0.11.2",
+    "react-router-dom": "^5.0.1",
     "redux-devtools-themes": "^1.0.0",
     "sass": "^1.22.7"
   }

package.json

@@ -1,6 +1,6 @@
 const snapShot = { tree: null };
 
-const mode = { jumping: false };
+const mode = { jumping: false, paused: false, locked: false };
 
 const linkFiber = require('./linkFiber')(snapShot, mode);
 const timeJump = require('./timeJump')(snapShot, mode);
@@ -12,11 +12,12 @@ window.addEventListener('message', ({ data: { action, payload } }) => {
     case 'jumpToSnap':
       timeJump(payload);
       break;
-    case 'stepToSnap': {
-      const { steps, speed } = payload;
-      console.log('i would like to step through here');
+    case 'setLock':
+      mode.locked = payload;
+      break;
+    case 'setPause':
+      mode.paused = payload;
       break;
-    }
     default:
   }
 });

package/index.js

@@ -6,8 +6,8 @@ module.exports = (snap, mode) => {
   let fiberRoot = null;
 
   function sendSnapshot() {
-    // don't send messages while jumping
-    if (mode.jumping) return;
+    // don't send messages while jumping or while paused
+    if (mode.jumping || mode.paused) return;
     const payload = snap.tree.getCopy();
     window.postMessage({
       action: 'recordSnap',
@@ -23,6 +23,8 @@ module.exports = (snap, mode) => {
     const oldSetState = component.setState.bind(component);
 
     function newSetState(state, callback = () => { }) {
+      // dont do anything if state is locked
+      if (mode.locked) return;
       // continue normal setState functionality, except add sending message middleware
       oldSetState(state, () => {
         updateSnapShotTree();

package/linkFiber.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const Chart = props => <div>Chart</div>;
+
+export default Chart;

src/app/components/Chart.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import JSONTree from 'react-json-tree';
+
+const getItemString = (type, data, itemType, itemString) => (
+  <span>
+    //
+    {type}
+  </span>
+);
+
+const Tree = (props) => {
+  const { snapshot } = props;
+  console.log('TREE COMPONENT IS PRINTED');
+  console.log(snapshot);
+  return (
+    <React.Fragment>
+      {snapshot && (
+        <JSONTree
+          data={snapshot}
+          theme={{ tree: () => ({ className: 'json-tree' }) }}
+          getItemString={getItemString}
+        />
+      )}
+    </React.Fragment>
+  );
+};
+export default Tree;

src/app/components/Tree.jsx

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+
+const autoBind = require('auto-bind');
+
+class ButtonsContainer extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      paused: false,
+      locked: false,
+    };
+
+    autoBind(this);
+  }
+
+  togglePause(port) {
+    const { paused } = this.state;
+    port.postMessage({ action: 'setPause', payload: !paused });
+    this.setState({ paused: !paused });
+  }
+
+  toggleLock(port) {
+    const { locked } = this.state;
+    port.postMessage({ action: 'setLock', payload: !locked });
+    this.setState({ locked: !locked });
+  }
+
+  render() {
+    const { paused, locked } = this.state;
+    const { port } = this.props;
+    return (
+      <div className="buttons-container">
+        <div className="pause-button" onClick={() => this.togglePause(port)}>{(paused) ? 'Resume' : 'Pause'}</div>
+        <div className="lock-button" onClick={() => this.toggleLock(port)}>{(locked) ? 'Unlock' : 'Lock'}</div>
+      </div>
+    );
+  }
+}
+export default ButtonsContainer;