<commit_before>import React, { PropTypes } from 'react';
import { render } from 'react-dom';
import { AutoSizer } from 'react-virtualized';
import { CommonPropTypes, PureComponent } from '../../../utils';

import Button from '../../button';
import ExpansionContainer, { Expandable } from '../';

const expansionContainerStyle = {
  flex: '1',
  border: '1px solid black',
  display: 'flex',
};

const chartStyle = {
  border: '1px solid green',
  display: 'flex',
  flex: '1',
};

const chartStyle2 = {
  border: '1px solid blue',
  display: 'flex',
  flex: '1',
};

class Chart extends PureComponent {
  render() {
    const { props } = this;
    return (
      <Expandable style={props.style}>
        Chart{props.chartNumber}
      </Expandable>
    );
  }
}

Chart.propTypes = {
  children: CommonPropTypes.children,
  className: CommonPropTypes.className,
  style: CommonPropTypes.style,
  chartNumber: PropTypes.any,
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      clicks: 0,
    };
    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    this.setState({ clicks: this.state.clicks + 1 });
  }

  render() {
    return (
      <div style={{ width: '90%', height: '90%', display: 'flex', flexDirection: 'column' }}>
        <AutoSizer>
          {({ width, height }) => {
            console.log(width, height);
            if (width && height) {
              return (
                <div style={{ width, height, display: 'flex', flexDirection: 'column' }}>
                  <h3>Title</h3>
                  <Button clickHandler={this.onClick} text="+" />
                  <ExpansionContainer
                    style={expansionContainerStyle}
                  >
                    <Chart chartNumber={this.state.clicks} style={chartStyle} />
                    <div
                      style={{
                        border: '1px solid green',
                        display: 'flex',
                        flex: '1',
                        flexDirection: 'column',
                        backgroundColor: 'lightgreen',
                      }}
                    >
                      <Chart chartNumber={2} style={chartStyle2} />
                      <Chart chartNumber={3} style={chartStyle2} />
                    </div>
                  </ExpansionContainer>
                </div>
              );
            }
            return null;
          }}
        </AutoSizer>
      </div>
    );
  }
}

render(<App />, document.getElementById('app'));<commit_msg>update demo<commit_after>import React, { PropTypes } from 'react';
import { render } from 'react-dom';
import { AutoSizer } from 'react-virtualized';
import { CommonPropTypes, PureComponent } from '../../../utils';

import Button from '../../button';
import ExpansionContainer, { Expandable } from '../';

const expansionContainerStyle = {
  flex: '1',
  display: 'flex',
};

const chartStyle = {
  display: 'flex',
  flexDirection: 'column',
  flex: '1',
};

const expandableStyle = {
  border: '1px solid',
  margin: '4px',
};

class Chart extends PureComponent {
  render() {
    // log={props.chartNumber === 3}
    const { props } = this;
    return (
      <Expandable style={props.style} expandableStyle={expandableStyle}>
        Chart{props.chartNumber}
        <div
          style={{
            flex: '1',
            border: 'solid',
            borderWidth: '0 0 3px 3px',
            margin: '1em',
          }}
        ></div>
      </Expandable>
    );
  }
}

Chart.propTypes = {
  children: CommonPropTypes.children,
  className: CommonPropTypes.className,
  style: CommonPropTypes.style,
  chartNumber: PropTypes.any,
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      clicks: 0,
    };
    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    this.setState({ clicks: this.state.clicks + 1 });
  }

  render() {
    return (
      <div style={{ width: '100%', display: 'flex', flexDirection: 'column', flex: '1' }}>
        <AutoSizer>
          {({ width, height }) => {
            console.log(width, height);
            if (width && height) {
              return (
                <div style={{ width, height, display: 'flex', flexDirection: 'column' }}>
                  <h3>Title</h3>
                  <Button clickHandler={this.onClick} text="+" />
                  <ExpansionContainer
                    style={expansionContainerStyle}
                  >
                    <Chart chartNumber={this.state.clicks} style={chartStyle} />
                    <div
                      style={{
                        display: 'flex',
                        flex: '1',
                        flexDirection: 'column',
                        backgroundColor: 'lightgreen',
                      }}
                    >
                      <Chart chartNumber={2} style={chartStyle} />
                      <Chart chartNumber={3} style={chartStyle} />
                    </div>
                  </ExpansionContainer>
                </div>
              );
            }
            return null;
          }}
        </AutoSizer>
      </div>
    );
  }
}

render(<App />, document.getElementById('app'));
{'fraction_non_alphanumeric': 0.1418533991644512, 'fraction_numerical': 0.008165590581086214, 'mean_word_length': 1.6641375821952453, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 45, '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': '809389', 'n_tokens_mistral': 1495, 'n_tokens_neox': 1439, 'n_words': 326}