<commit_before>import React from 'react';
import { distance, modus } from './MathUtils';

import FieldStyles from './Field.less';

export default class Field extends React.Component {
  static displayName = 'Field';
  static propTypes = {
    classes: React.PropTypes.object,
    className: React.PropTypes.string,
    square: React.PropTypes.number,
    size: React.PropTypes.number,
    radius: React.PropTypes.number,
    padding: React.PropTypes.number,
    maxTileSize: React.PropTypes.number
  };
  static defaultProps = {
    classes: FieldStyles,
    square: 20,
    size: 5,
    radius: 140,
    padding: 20,
    maxTileSize: 80
  };
  constructor(props) {
    super(props);
    this.cache = [];
    this.current_tiles = [];
    this.affected_tiles = [];
    this.effectMouse = this.effectMouse.bind(this);
    this.effectTouch = this.effectTouch.bind(this);
    this.originalPosition = this.originalPosition.bind(this);
    this.effectObjects = this.effectObjects.bind(this);
  }

  componentDidMount() {
    window.addEventListener('mousemove', this.effectMouse);
    window.addEventListener('touchmove', this.effectTouch);
  }

  componentWillUnmount() {
    window.removeEventListener('mousemove', this.effectMouse);
    window.removeEventListener('touchmove', this.effectTouch);
  }

  effectMouse(event) {
    const mouseEvent = {
      x: event.clientX,
      y: event.clientY
    };
    this.effectObjects(mouseEvent);
  }

  effectTouch(event) {
    const mouseEvent = {
      x: Math.floor(event.changedTouches[0].clientX),
      y: Math.floor(event.changedTouches[0].clientY)
    };
    this.effectObjects(mouseEvent);
  }

  originalPosition(element) {
    return {
      left: parseInt(element.getAttribute('data-left'), 10),
      top: parseInt(element.getAttribute('data-top'), 10)
    };
  }

  effectObjects(mouseEvent) {
    const { radius, size, padding, maxTileSize } = this.props;
    // Mouse positions, current tiles array
    this.container = this.refs.container.getBoundingClientRect();
    const _x = mouseEvent.x - this.container.left;
    const _y = mouseEvent.y - this.container.top;

    // Mod the min/max of x/y for cache look up
    const min = {
      x: modus(_x - radius, size + padding),
      y: modus(_y - radius, size + padding)
    };
    const max = {
      x: modus(_x + radius, size + padding),
      y: modus(_y + radius, size + padding)
    };
    // console.log(min.x, min.y, max.x, max.y);
    // Reset tiles that are no longer in the hit area
    for (let x = 0; x < this.affected_tiles.length; x++) {
      if (!this.cache[this.affected_tiles[x]]) {
        continue;
      }
      const tileElement = this.refs[this.cache[this.affected_tiles[x]].id];
      const original = this.originalPosition(tileElement);
      tileElement.style = {
        left: `${original.left}px`,
        top: `${original.top}px`,
        width: `${size}px`,
        height: `${size}px`,
        backgroundColor: `#EEE`
      };
    }
    this.affected_tiles = [];

    for (let x = min.x; x <= max.x; x = x + size + padding) {
      for (let y = min.y; y <= max.y; y = y + size + padding) {
        const cacheID = `${x}_${y}`;
        this.current_tiles.push(cacheID);
        this.affected_tiles.push(cacheID);
      }
    }

    // Loop through current tiles
    for (let x = 0; x < this.current_tiles.length; x++) {
      if (!this.cache[this.current_tiles[x]]) {
        continue;
      }
      // Get the numbers
      const tileObject = this.refs[this.cache[this.current_tiles[x]].id];

      const original = this.originalPosition(tileObject);
      // Calc distance from center of tiles
      const d = distance(_x, original.left + (size / 2), _y, original.top + (size / 2));
      const newSize = maxTileSize - (maxTileSize - size) * (d / radius);

      if (d < radius && newSize > size) {
        tileObject.style = {
          left: `${(original.left - ~~(newSize / 2) + (size / 2))}px`,
          top: `${(original.top - ~~(newSize / 2) + (size / 2))}px`,
          width: `${newSize}px`,
          height: `${newSize}px`,
          // zIndex: `${~~newSize}`,
          backgroundColor: `#333`
        };
      } else {
        tileObject.style = {
          left: `${original.left}px`,
          top: `${original.top}px`,
          width: `${size}px`,
          height: `${size}px`,
          // zIndex: `${1}`,
          backgroundColor: `#EEE`
        };
      }
    }
  }
  render() {
    const { classes, size, square, padding } = this.props;
    const tiles = [];<commit_msg>field dynamic style optimization<commit_after>import React from 'react';
import { distance, modus } from './MathUtils';

import FieldStyles from './Field.less';

export default class Field extends React.Component {
  static displayName = 'Field';
  static propTypes = {
    classes: React.PropTypes.object,
    className: React.PropTypes.string,
    square: React.PropTypes.number,
    size: React.PropTypes.number,
    radius: React.PropTypes.number,
    padding: React.PropTypes.number,
    maxTileSize: React.PropTypes.number
  };
  static defaultProps = {
    classes: FieldStyles,
    square: 20,
    size: 5,
    radius: 140,
    padding: 20,
    maxTileSize: 80
  };
  constructor(props) {
    super(props);
    this.cache = [];
    this.current_tiles = [];
    this.affected_tiles = [];
    this.effectMouse = this.effectMouse.bind(this);
    this.effectTouch = this.effectTouch.bind(this);
    this.originalPosition = this.originalPosition.bind(this);
    this.effectObjects = this.effectObjects.bind(this);
  }

  componentDidMount() {
    window.addEventListener('mousemove', this.effectMouse);
    window.addEventListener('touchmove', this.effectTouch);
  }

  componentWillUnmount() {
    window.removeEventListener('mousemove', this.effectMouse);
    window.removeEventListener('touchmove', this.effectTouch);
  }

  effectMouse(event) {
    const mouseEvent = {
      x: event.clientX,
      y: event.clientY
    };
    this.effectObjects(mouseEvent);
  }

  effectTouch(event) {
    const mouseEvent = {
      x: Math.floor(event.changedTouches[0].clientX),
      y: Math.floor(event.changedTouches[0].clientY)
    };
    this.effectObjects(mouseEvent);
  }

  originalPosition(element) {
    return {
      left: parseInt(element.getAttribute('data-left'), 10),
      top: parseInt(element.getAttribute('data-top'), 10)
    };
  }

  effectObjects(mouseEvent) {
    const { radius, size, padding, maxTileSize } = this.props;
    // Mouse positions, current tiles array
    this.container = this.refs.container.getBoundingClientRect();
    const _x = mouseEvent.x - this.container.left;
    const _y = mouseEvent.y - this.container.top;

    // Mod the min/max of x/y for cache look up
    const min = {
      x: modus(_x - radius, size + padding),
      y: modus(_y - radius, size + padding)
    };
    const max = {
      x: modus(_x + radius, size + padding),
      y: modus(_y + radius, size + padding)
    };
    // console.log(min.x, min.y, max.x, max.y);
    // Reset tiles that are no longer in the hit area
    for (let x = 0; x < this.affected_tiles.length; x++) {
      if (!this.cache[this.affected_tiles[x]]) {
        continue;
      }
      const tileElement = this.refs[this.cache[this.affected_tiles[x]].id];
      const original = this.originalPosition(tileElement);
      tileElement.style.left = `${original.left}px`;
      tileElement.style.top = `${original.top}px`;
      tileElement.style.width = `${size}px`;
      tileElement.style.height = `${size}px`;
      // tileElement.style.zIndex = `${1}`;
      tileElement.style.backgroundColor = `#EEE`;
    }
    this.affected_tiles = [];

    for (let x = min.x; x <= max.x; x = x + size + padding) {
      for (let y = min.y; y <= max.y; y = y + size + padding) {
        const cacheID = `${x}_${y}`;
        this.current_tiles.push(cacheID);
        this.affected_tiles.push(cacheID);
      }
    }

    // Loop through current tiles
    for (let x = 0; x < this.current_tiles.length; x++) {
      if (!this.cache[this.current_tiles[x]]) {
        continue;
      }
      // Get the numbers
      const tileObject = this.refs[this.cache[this.current_tiles[x]].id];

      const original = this.originalPosition(tileObject);
      // Calc distance from center of tiles
      const d = distance(_x, original.left + (size / 2), _y, original.top + (size / 2));
      const newSize = maxTileSize - (maxTileSize - size) * (d / radius);

      if (d < radius && newSize > size) {
        tileObject.style.left = `${(original.left - ~~(newSize / 2) + (size / 2))}px`;
        tileObject.style.top = `${(original.top - ~~(newSize / 2) + (size / 2))}px`;
        tileObject.style.width = `${newSize}px`;
        tileObject.style.height = `${newSize}px`;
        // tileObject.style.zIndex = `${~~newSize}`;
        tileObject.style.backgroundColor = `#333`;
      } else {
        tileObject.style.left = `${original.left}px`;
        tileObject.style.top = `${original.top}px`;
        tileObject.style.width = `${size}px`;
        tileObject.style.height = `${size}px`;
        // tileObject.style.zIndex = `${1}`;
        tileObject.style.backgroundColor = `#EEE`;
      }
    }
  }
  render() {
    const { classes, size, square, padding } = this.props;
    const tiles = [];
{'fraction_non_alphanumeric': 0.14948342660352992, 'fraction_numerical': 0.006134309083082221, 'mean_word_length': 2.6443137254901963, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 5, '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': '886707', 'n_tokens_mistral': 3028, 'n_tokens_neox': 2981, 'n_words': 634}