<commit_before>var React = require('react/addons');

var store = require('../store');
var actions = require('../actions');

function clamp(val, min, max){
  return val < min? min : (val > max? max : val);
}

var Map = React.createClass({

  getInitialState: function () {
    return {
      active: false
    };
  },

  handleMouseDown: function (e) {
    e.preventDefault();
    this.setState({
      active: true
    });
  },

  handleMouseMove: function (e) {
    if (! this.state.active) return;
    var el = this.getDOMNode();
    var rect = el.getBoundingClientRect();
    var x = (e.clientX - rect.left) / rect.width;
    var y = (rect.bottom - e.clientY) / rect.height;

    x = clamp(x, 0, 1);
    y = clamp(y, 0, 1);

    actions.setSaturation(x);
    actions.setValue(y);
  },

  handleMouseUp: function () {
    if (! this.state.active) return;
    this.setState({
      active: false
    });
  },

  render: function () {
    var rawHsv = store.toRawHsv();
    var lightness = store.toLum();

    var classes = React.addons.classSet({
      map: true,
      dark: lightness <= 0.5,
      light: lightness > 0.5,
      active: this.state.active
    });

    return (
      /* jshint ignore: start */
      <div
        className={classes}
        onMouseDown={this.handleMouseDown}
        onMouseMove={this.handleMouseMove}
        onMouseUp={this.handleMouseUp}
      >
        <div className="background" style={{
          backgroundColor: store.toHue()
        }} />
        <div className="pointer" style={{
          top: (100 - rawHsv.v * 100) + '%',
          left: rawHsv.s * 100 + '%'
        }} />
      </div>
      /* jshint ignore: end */
    );
  }

});

module.exports = Map;<commit_msg>update hue/value on mouse down<commit_after>var React = require('react/addons');

var store = require('../store');
var actions = require('../actions');

function clamp(val, min, max){
  return val < min? min : (val > max? max : val);
}

var Map = React.createClass({

  getInitialState: function () {
    return {
      active: false
    };
  },

  handleMouseDown: function (e) {
    this.setState({ active : true });
    this.updateHueValue(e.clientX, e.clientY);
  },

  handleMouseMove: function (e) {
    if (this.state.active) {
      this.updateHueValue(e.clientX, e.clientY);
    }
  },

  handleMouseUp: function () {
    this.setState({ active : false });
  },

  updateHueValue : function(clientX, clientY) {
    var el = this.getDOMNode();
    var rect = el.getBoundingClientRect();
    var x = (clientX - rect.left) / rect.width;
    var y = (rect.bottom - clientY) / rect.height;

    x = clamp(x, 0, 1);
    y = clamp(y, 0, 1);

    actions.setSaturation(x);
    actions.setValue(y);
  },

  render: function () {
    var rawHsv = store.toRawHsv();
    var lightness = store.toLum();

    var classes = React.addons.classSet({
      map: true,
      dark: lightness <= 0.5,
      light: lightness > 0.5,
      active: this.state.active
    });

    return (
      <div
        className={classes}
        onMouseDown={this.handleMouseDown}
        onMouseMove={this.handleMouseMove}
        onMouseUp={this.handleMouseUp}
      >
        <div className="background" style={{
          backgroundColor: store.toHue()
        }} />
        <div className="pointer" style={{
          top: (100 - rawHsv.v * 100) + '%',
          left: rawHsv.s * 100 + '%'
        }} />
      </div>
    );
  }

});

module.exports = Map;
{'fraction_non_alphanumeric': 0.1582608695652174, 'fraction_numerical': 0.009855072463768115, 'mean_word_length': 2.283539486203616, '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': '1334459', 'n_tokens_mistral': 1188, 'n_tokens_neox': 1141, 'n_words': 253}