<commit_before>import React from 'react';
import { WindowResizeListener } from 'react-window-resize-listener'
WindowResizeListener.DEBOUNCE_TIME = 20;

export default class FunctionBox extends React.Component{
  constructor(props){
    super(props);
    this.state = { width: window.innerWidth };
  }
  render(){
    // console.log('state', this.state);
    let { width } = this.state, calc = `${this.state.width}`;
    return (
      <div className='functionBox'>
        <div className='calc'>
          <div className='calcLeft'>f(x) =</div>
          <div className='calcRight'>
            <div className='calcTop' style={ width > 1199 ? {color: 'black'} : {color: 'grey'}}>48px</div>
            <div className='calcMid'>{ calc }</div>
            <div className='calcBot' style={ width < 481 ? {color: 'black'} : {color: 'grey'}}>24px</div>
          </div>
        </div>
        <WindowResizeListener onResize={windowSize => {
          {/*console.log('Window height', windowSize.windowHeight)*/}
          {/*console.log('Window width', windowSize.windowWidth)*/}
          this.setState({ width: windowSize.windowWidth });
        }}/>
      </div>
    )
  }
}<commit_msg>equation on page<commit_after>import React from 'react';
import { WindowResizeListener } from 'react-window-resize-listener'
WindowResizeListener.DEBOUNCE_TIME = 20;

export default class FunctionBox extends React.Component{
  constructor(props){
    super(props);
    this.state = { width: window.innerWidth };
  }
  render(){
    // console.log('state', this.state);
    let { width } = this.state, calc = `24px + ((${width}px - 480px) / (1200px - 480px)) / (48px - 24px) = ` + (24 + (width - 480) / (1200 - 480) / (48 - 24)).toString().split('.')[0] + 'px';
    return (
      <div className='functionBox'>
        <div className='currentWidth'>{width}</div>
        <div className='calc'>
          <div className='calcLeft'>f(x) =</div>
          <div className='calcRight'>
            <div className='calcTop' style={ width > 1199 ? {color: 'black'} : {color: 'grey'}}>48px</div>
            <div className='calcMid'>{ calc }</div>
            <div className='calcBot' style={ width < 481 ? {color: 'black'} : {color: 'grey'}}>24px</div>
          </div>
        </div>
        <WindowResizeListener onResize={windowSize => {
          {/*console.log('Window height', windowSize.windowHeight)*/}
          {/*console.log('Window width', windowSize.windowWidth)*/}
          this.setState({ width: windowSize.windowWidth });
        }}/>
      </div>
    )
  }
}
{'fraction_non_alphanumeric': 0.17718541748333988, 'fraction_numerical': 0.023128185025480204, 'mean_word_length': 2.837593984962406, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 39, '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': '7461197', 'n_tokens_mistral': 824, 'n_tokens_neox': 782, 'n_words': 168}