<commit_before>var setParam = require('mout/queryString/setParam');
var debounce = require('mout/function/debounce');

function buildSrc(src, lat, lon) {
  return src + `#/?lat=${lat}&lon=${lon}`;
}

const MIN_WIDTH = 300;
const MIN_HEIGHT = 300;
const MAX_WIDTH = 800;
const MAX_HEIGHT = 800;

module.exports = React.createClass({

  getInitialState: function() {
    return {
      width: this.props.defaultWidth,
      height: this.props.defaultHeight,
      lat: this.props.defaultLat,
      lon: this.props.defaultLon,
      providers: this.props.defaultProviders || [],
      providerId: this.props.defaultProviderId,
      categories: this.props.defaultCategory,
      src: buildSrc(this.props.defaultSrc, this.props.defaultLat, this.props.defaultLon),
      resource: this.props.defaultResource
    };
  },

  handleUpdate: function () {
    $.ajax({
      url: this.state.resource,
      dataType: 'json',
      type: 'POST',
      data: {
        widget: {
          height: this.state.height,
          width: this.state.width,
          lat: this.state.lat,
          lon: this.state.lon,
          categories: this.state.categories,
          provider_id: this.state.providerId
        }
      },
      success: () => {
        // @TODO reload only when necessary
        this.setState({ reload: (new Date).getTime() })
      },
      error: (xhr, status, err) => {
        console.error(status, err.toString());
      }
    });
  },

  componentWillMount: function() {
    this.debouncedUpdate = debounce(this.handleUpdate,300);
  },

  onWidthChange: function(width) {
    this.setState({ width }, this.debouncedUpdate);
  },

  onHeightChange: function(height) {
    this.setState({ height }, this.debouncedUpdate);
  },

  onLocationChange: function(item){
    let [ lon, lat ] = item.geometry.coordinates,
      src = buildSrc(this.props.defaultSrc, lat, lon);

    this.setState({ lat, lon, src }, this.debouncedUpdate);
  },

  onCategoriesChange: function(categories) {
    this.setState({ categories }, this.debouncedUpdate);
  },

  onProviderChange: function(providerId) {
    this.setState({ providerId }, this.debouncedUpdate);
  },

  render: function () {
    return (
      <div className="widget-panel">
        <WidgetForm
          defaultWidth={this.state.width}<commit_msg>Reload widget preview only when content changed.<commit_after>var setParam = require('mout/queryString/setParam');
var debounce = require('mout/function/debounce');

function buildSrc(src, lat, lon) {
  return src + `#/?lat=${lat}&lon=${lon}`;
}

const MIN_WIDTH = 300;
const MIN_HEIGHT = 300;
const MAX_WIDTH = 800;
const MAX_HEIGHT = 800;

module.exports = React.createClass({

  getInitialState: function() {
    return {
      width: this.props.defaultWidth,
      height: this.props.defaultHeight,
      lat: this.props.defaultLat,
      lon: this.props.defaultLon,
      providers: this.props.defaultProviders || [],
      providerId: this.props.defaultProviderId,
      categories: this.props.defaultCategory,
      src: buildSrc(this.props.defaultSrc, this.props.defaultLat, this.props.defaultLon),
      resource: this.props.defaultResource
    };
  },

  componentDidUpdate: function(prevProps, prevState) {
    this.debouncedUpdate(prevState);
  },

  handleUpdate: function (prevState) {
    let { height, width, lat, lon, categories, providerId } = this.state;

    $.ajax({
      url: this.state.resource,
      dataType: 'json',
      type: 'POST',
      data: {
        widget: {
          provider_id: providerId,
          height, width, lat, lon, categories
        }
      },
      success: () => {
        if (prevState.lat !== lat || prevState.lon !== lon ||
          prevState.categories !== categories || prevState.providerId !== providerId){
          this.setState({ reload: (new Date).getTime() });
        }
      },
      error: (xhr, status, err) => {
        console.error(status, err.toString());
      }
    });
  },

  componentWillMount: function() {
    this.debouncedUpdate = debounce(this.handleUpdate, 300);
  },

  onWidthChange: function(width) {
    this.setState({ width });
  },

  onHeightChange: function(height) {
    this.setState({ height });
  },

  onLocationChange: function(item){
    let [ lon, lat ] = item.geometry.coordinates,
      src = buildSrc(this.props.defaultSrc, lat, lon);

    this.setState({ lat, lon, src });
  },

  onCategoriesChange: function(categories) {
    this.setState({ categories });
  },

  onProviderChange: function(providerId) {
    this.setState({ providerId });
  },

  render: function () {
    return (
      <div className="widget-panel">
        <WidgetForm
          defaultWidth={this.state.width}
{'fraction_non_alphanumeric': 0.1407281243346817, 'fraction_numerical': 0.006387055567383436, 'mean_word_length': 2.9215358931552586, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 9, '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': '1077264', 'n_tokens_mistral': 1465, 'n_tokens_neox': 1411, 'n_words': 283}