changes

Author: starkspark

.gitignore

@@ -1,10 +1,7 @@
 node_modules
 .DS_Store
-dist/
-extension/bundle.js
-package/react-time-travel-1.0.1.tgz
+src/extension/build/bundles
+package/react-time-travel-*.tgz
 tictactoe
-tictactoe/build/bundle.js
-tictactoe/package-lock.json
 parents
 coverage

package-lock.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "webpack --mode production",
     "dev": "webpack --mode development --watch",
-    "test": "jest --verbose --coverage"
+    "test": "jest --verbose --coverage --watchAll"
   },
   "keywords": [
     "react",
@@ -37,6 +37,7 @@
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.14.2",
     "jest": "^24.8.0",
+    "jest-cli": "^24.8.0",
     "node-sass": "^4.12.0",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
@@ -46,6 +47,7 @@
   },
   "dependencies": {
     "auto-bind": "^2.1.0",
+    "d3": "^3.5.17",
     "prop-types": "^15.7.2",
     "rc-slider": "^8.6.13",
     "rc-tooltip": "^3.7.3",

package.json

@@ -4,7 +4,7 @@ class Tree {
     // give it a special state = 'root'
     // a setState function that just calls the callback instantly
     if (!useStateInstead) {
-      this.component = (component === 'root') ? { state: 'root', setState: (partial, callback) => callback() } : component;
+      this.component = (component === 'root') ? { state: 'root',  setState: (partial, callback) => callback() } : component;
     } else {
       this.state = component;
       this.name = name;

package/tree.js

@@ -10,41 +10,51 @@ describe('unit testing for Action.jsx', () => {
   const props = {
     selected: true,
     handleChangeSnapshot: jest.fn(),
-    handleSendSnapshot: jest.fn(),
+    handleJumpSnapshot: jest.fn(),
     index: 1,
   };
   beforeEach(() => {
     wrapper = shallow(<Action {...props} />);
   });
 
-  describe('<Action> component', () => {
-    it("<Action> should have a className 'action-component selected' if props.selected is true", () => {
+  describe('Component', () => {
+    test("should have a className 'action-component selected' if props.selected is true", () => {
       wrapper.setProps({ selected: true });
       expect(wrapper.hasClass('action-component selected')).toEqual(true);
     });
 
-    it("<Action> shouldn't have a className 'action-component selected' if props.selected is false", () => {
+    test("shouldn't have a className 'action-component selected' if props.selected is false", () => {
       wrapper.setProps({ selected: false });
       expect(wrapper.hasClass('action-component selected')).toEqual(false);
     });
 
-    it('<Action> should have a text that is equal to props.index', () => {
+    test('should have a text that is equal to props.index', () => {
       expect(wrapper.find('.action-component-text').text()).toEqual(props.index.toString());
     });
+
+    test('should invoke changeSnapshot method when clicked', () => {
+      wrapper.find('.action-component').simulate('click');
+      expect(props.handleChangeSnapshot).toHaveBeenCalled();
+    });
   });
 
-  describe('jump button', () => {
-    it('Should render a jump button', () => {
-      expect(wrapper.type()).toEqual('div');
-      expect(wrapper.find('button')).toHaveLength(1);
+  describe('Jump Button', () => {
+    test("should render a div with a className 'jump-button' inside action-component", () => {
+      expect(
+        wrapper
+          .find('.action-component')
+          .children()
+          .find('.jump-button'),
+      ).toHaveLength(1);
     });
 
-    it('Should invoke the sendSnapshot method when the jump button is clicked', () => {
+    test('should invoke jumpSnapshot method when clicked', () => {
       wrapper
-        .find('button')
-        .at(0)
+        .find('.action-component')
+        .children()
+        .find('.jump-button')
         .simulate('click');
-      expect(props.handleSendSnapshot).toHaveBeenCalled();
+      expect(props.handleJumpSnapshot).toHaveBeenCalled();
     });
   });
 });

src/app/__tests__/action.test.jsx

@@ -3,30 +3,37 @@ import PropTypes from 'prop-types';
 
 const Action = (props) => {
   const {
-    selected, handleChangeSnapshot, handleJumpSnapshot, index,
+    selected, handleChangeSnapshot, handleJumpSnapshot, index, sliderIndex,
   } = props;
+
   return (
     <div
       className={selected ? 'action-component selected' : 'action-component'}
       onClick={() => handleChangeSnapshot(index)}
       role="presentation"
+      style={index > sliderIndex ? { color: '#5f6369' } : {}}
     >
       <div className="action-component-text">{index}</div>
-      <div
+      <button
         className="jump-button"
-        onClick={() => handleJumpSnapshot(index)}
+        onClick={(e) => {
+          e.stopPropagation();
+          handleJumpSnapshot(index);
+        }}
         tabIndex={index}
-        role="button"
+        type="button"
       >
         Jump
-      </div>
+      </button>
     </div>
   );
 };
 
-// Action.propTypes = {
-//   selected: PropTypes.bool,
-//   index: PropTypes.number,
-// };
+Action.propTypes = {
+  selected: PropTypes.bool.isRequired,
+  index: PropTypes.number.isRequired,
+  handleChangeSnapshot: PropTypes.func.isRequired,
+  handleJumpSnapshot: PropTypes.func.isRequired,
+};
 
 export default Action;

src/app/components/Action.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import MainContainer from '../containers/MainContainer';
 
 const App = () => <MainContainer />;

src/app/components/App.jsx

@@ -1,5 +1,206 @@
-import React from 'react';
+import React, { Component } from 'react';
+import '../styles/components/_d3Tree.scss';
+import * as d3 from 'd3';
 
-const Chart = props => <div>Chart</div>;
+let root;
+
+class Chart extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    root = JSON.parse(JSON.stringify(this.props.snapshot));
+    this.maked3Tree();
+  }
+
+  componentWillUpdate(prevProps) {
+    if (this.props.snapshot !== prevProps.snapshot) {
+      root = JSON.parse(JSON.stringify(prevProps.snapshot));
+      this.maked3Tree();
+    }
+  }
+
+  removed3Tree() {
+    const { anchor } = this.refs;
+    while (anchor.hasChildNodes()) {
+      anchor.removeChild(anchor.lastChild);
+    }
+  }
+
+  maked3Tree() {
+    this.removed3Tree();
+
+    const margin = {
+      top: 20,
+      right: 120,
+      bottom: 20,
+      left: 120,
+    };
+    const width = 960 - margin.right - margin.left;
+    const height = 800 - margin.top - margin.bottom;
+
+    let i = 0;
+    const duration = 750;
+
+    const tree = d3.layout.tree().size([height, width]);
+
+    const diagonal = d3.svg.diagonal().projection(d => [d.y, d.x]);
+
+    const svg = d3
+      .select(this.refs.anchor)
+      .append('svg')
+      .attr('width', width + margin.right + margin.left)
+      .attr('height', height + margin.top + margin.bottom)
+      .append('g')
+      .attr('transform', `translate(${margin.left},${margin.top})`);
+
+    root.x0 = height / 2;
+    root.y0 = 0;
+
+    function update(source) {
+      // Compute the new tree layout.
+      const nodes = tree.nodes(root).reverse();
+      const links = tree.links(nodes);
+
+      // Normalize for fixed-depth.
+      nodes.forEach((d) => {
+        d.y = d.depth * 180;
+      });
+
+      // Update the nodes…
+      const node = svg.selectAll('g.node').data(nodes, d => d.id || (d.id = ++i));
+
+      // Enter any new nodes at the parent's previous position.
+      const nodeEnter = node
+        .enter()
+        .append('g')
+        .attr('class', 'node')
+        .attr('transform', d => `translate(${source.y0},${source.x0})`)
+        .on('click', click)
+        .on('mouseover', mouseover)
+        .on('mouseout', mouseout);
+
+      nodeEnter
+        .append('circle')
+        .attr('r', 1e-6)
+        .style('fill', d => (d._children ? 'lightsteelblue' : '#fff'));
+
+      nodeEnter
+        .append('text')
+        .attr('x', d => (d.children || d._children ? -10 : 10))
+        .attr('dy', '.35em')
+        .attr('text-anchor', d => (d.children || d._children ? 'end' : 'start'))
+        .text(d => d.name)
+        .style('fill-opacity', 1e-6);
+
+      // Transition nodes to their new position.
+      const nodeUpdate = node
+        .transition()
+        .duration(duration)
+        .attr('transform', d => `translate(${d.y},${d.x})`);
+
+      nodeUpdate
+        .select('circle')
+        .attr('r', 4.5)
+        .style('fill', d => (d._children ? 'lightsteelblue' : '#fff'));
+
+      nodeUpdate.select('text').style('fill-opacity', 1);
+
+      // Transition exiting nodes to the parent's new position.
+      const nodeExit = node
+        .exit()
+        .transition()
+        .duration(duration)
+        .attr('transform', d => `translate(${source.y},${source.x})`)
+        .remove();
+
+      nodeExit.select('circle').attr('r', 1e-6);
+
+      nodeExit.select('text').style('fill-opacity', 1e-6);
+
+      // Update the links…
+      const link = svg.selectAll('path.link').data(links, d => d.target.id);
+
+      // Enter any new links at the parent's previous position.
+      link
+        .enter()
+        .insert('path', 'g')
+        .attr('class', 'link')
+        .attr('d', (d) => {
+          const o = { x: source.x0, y: source.y0 };
+          return diagonal({ source: o, target: o });
+        });
+
+      // Transition links to their new position.
+      link
+        .transition()
+        .duration(duration)
+        .attr('d', diagonal);
+
+      // Transition exiting nodes to the parent's new position.
+      link
+        .exit()
+        .transition()
+        .duration(duration)
+        .attr('d', (d) => {
+          const o = { x: source.x, y: source.y };
+          return diagonal({ source: o, target: o });
+        })
+        .remove();
+
+      // Stash the old positions for transition.
+      nodes.forEach((d) => {
+        d.x0 = d.x;
+        d.y0 = d.y;
+      });
+    }
+
+    // Toggle children on click.
+    function click(d) {
+      if (d.children) {
+        d._children = d.children;
+        d.children = null;
+      } else {
+        d.children = d._children;
+        d._children = null;
+      }
+      update(d);
+    }
+
+    // Show state on mouse over
+    function mouseover(d) {
+      d3.select(this)
+        .append('text')
+        .attr('class', 'hover')
+        .attr('transform', d => 'translate(5, -10)')
+        .text(d.state === undefined ? '' : JSON.stringify(d.state));
+    }
+
+    // Toggle children on click.
+    function mouseout(d) {
+      d3.select(this)
+        .select('text.hover')
+        .remove();
+    }
+
+    function collapse(d) {
+      if (d.children) {
+        d._children = d.children;
+        d._children.forEach(collapse);
+        d.children = null;
+      }
+    }
+
+    // root.children.forEach(collapse);
+    update(root);
+
+    // d3.select(self.frameElement).style("height", "800px");
+  }
+
+  render() {
+    return <div ref="anchor" className="d3Container" width="100%" />;
+  }
+}
 
 export default Chart;