AVL Search Tree - 2

by jessekinsman

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine-html.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine.css">
<link rel="stylesheet" href="https://codepen.io/btholt/pen/WrwzJZ.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/boot.js"></script>
<div id='target'>no snapshots</div>

Babel + JSX

let render;
const range = length => Array.apply(null, {length: length+1}).map(Number.call, Number);

(function() {
  render = (root, nums) => {
    const newDiv = document.createElement('div');
    ReactDOM.render(<TreeViz length={nums.length} root={root} />, newDiv);
    target.appendChild(newDiv);
  };
  const nodeStyle = {
    width: "50%"
  };

  const nullChildStyle = _.assign({}, nodeStyle, {
  });

  const treeStyle = {
    boxSizing: "border-box",
    textAlign: 'center'
  };

  const childrenStyle = {
    display: 'flex',
    flexWrap: 'nowrap'
  };

  const diag = {
    backgroundRepeat: "no-repeat",
    backgroundPosition: "center center",
    backgroundSize: "100% 100%, auto",
    padding: "20px 0 0",
    margin: 0,
    fontSize: '12px'
  };

  const diagLeft = _.merge({background: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 1 L99 0 L49 49 L50 50' fill='black' /></svg>\")"}, diag);
  const diagRight = _.merge({background: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M1 0 L0 1 L49 50 L50 49' fill='black' /></svg>\")"}, diag);

  const target = document.getElementById('target');

  const findMaxDepth = (node) => {
    if (!node) return 0;
    const left = findMaxDepth(node.left);
    const right = findMaxDepth(node.right);
    return (left > right) ? left+1 : right+1;   
  };

  class TreeViz extends React.Component {
    render() {
      const maxDepth = findMaxDepth(this.props.root);
      const localTreeStyle = _.merge({width: `${Math.pow(2, maxDepth+1) * 5}px`}, treeStyle);
      return (
        <div>
          <h1>Max Depth: {maxDepth}</h1>
          <div style={localTreeStyle} className="tree">
            <NodeViz {...this.props.root} level={1} isRoot={true} pruneLeft />
          </div>
        </div>
      );
    }
  }

  class NodeViz extends...