<commit_before>var Boxxy = require('boxxy')
var React = require('react')

var LessonCode = require('./LessonCode')
var LessonHeader = require('./LessonHeader')
var LessonOutput = require('./LessonOutput')
var LessonText = require('./LessonText')

require('./Lesson.css')

var Lesson = React.createClass({
  componentDidMount() {
    this.boxxy = new Boxxy(React.findDOMNode(this.refs.boxxy), {
      columns: [
        {
          id: 'left',
          size: 50,
          children: [
            {id: 'lesson', size: 60},
            {id: 'output', size: 40}
          ]
        },
        {
          id: 'code',
          size: 50
        }
      ]
    })
    this.renderBoxxyContent()
  },
  componentWillReceiveProps(nextProps) {
    this.renderBoxxyContent(nextProps)
  },
  componentWillUnmount() {
    var {lesson, output, code} = this.boxxy.blocks
    React.unmountComponentAtNode(lesson)
    React.unmountComponentAtNode(output)
    React.unmountComponentAtNode(code)
  },
  render() {
    return <div className="Lesson">
      <LessonHeader {...this.props}/>
      <div className="Lesson__boxxy" ref="boxxy"/>
    </div>
  },
  renderBoxxyContent(props) {
    props = props || this.props
    var {lesson, output, code} = this.boxxy.blocks
    React.render(<LessonText {...props}/>, lesson)
    React.render(<LessonOutput {...props}/>, output)<commit_msg>Scroll lesson section back to the top when switching lessons/steps<commit_after>var Boxxy = require('boxxy')
var React = require('react')

var LessonCode = require('./LessonCode')
var LessonHeader = require('./LessonHeader')
var LessonOutput = require('./LessonOutput')
var LessonText = require('./LessonText')

require('./Lesson.css')

var Lesson = React.createClass({
  componentDidMount() {
    this.boxxy = new Boxxy(React.findDOMNode(this.refs.boxxy), {
      columns: [
        {
          id: 'left',
          size: 50,
          children: [
            {id: 'lesson', size: 60},
            {id: 'output', size: 40}
          ]
        },
        {
          id: 'code',
          size: 50
        }
      ]
    })
    this.renderBoxxyContent()
  },
  componentWillReceiveProps(nextProps) {
    if (this.props.currentLessonIndex !== nextProps.currentLessonIndex ||
        this.props.currentStepIndex !== nextProps.currentStepIndex) {
      this.boxxy.blocks.lesson.scrollTop = 0
    }
    this.renderBoxxyContent(nextProps)
  },
  componentWillUnmount() {
    var {lesson, output, code} = this.boxxy.blocks
    React.unmountComponentAtNode(lesson)
    React.unmountComponentAtNode(output)
    React.unmountComponentAtNode(code)
  },
  render() {
    return <div className="Lesson">
      <LessonHeader {...this.props}/>
      <div className="Lesson__boxxy" ref="boxxy"/>
    </div>
  },
  renderBoxxyContent(props) {
    props = props || this.props
    var {lesson, output, code} = this.boxxy.blocks
    React.render(<LessonText {...props}/>, lesson)
    React.render(<LessonOutput {...props}/>, output)
{'fraction_non_alphanumeric': 0.1470785762256548, 'fraction_numerical': 0.005708529214237743, 'mean_word_length': 2.7330827067669174, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 15, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1040929', 'n_tokens_mistral': 965, 'n_tokens_neox': 950, 'n_words': 177}