<commit_before>'use strict';
import React from 'react';
import _ from 'lodash';
import { Map, Layer, MapboxLayer, Marker, Popup } from 'mapbox-react';
import StationCluster from './StationCluster';
import StationMarker from './StationMarker.jsx';
import BoundingBox from '../lib/BoundingBox';

class VeloMap extends React.Component {

  static propTypes = {
    quadtree: React.PropTypes.any,
    map: React.PropTypes.any,
    config: React.PropTypes.any,
    i18n: React.PropTypes.any
  };

  constructor(props) {
    super(props);
    this.onAddRemove = _.throttle(() => {
      this.setState({
        list: this.listClusters()
      });
    }, 50);
    this.props.quadtree.on('changed', this.onAddRemove);

    this.props.map.on('moveend', function () {
      this.setState({
        list: this.listClusters()
      });
    }, this);
  }

  state = {
    list: []
  };

  componentWillUnmount() {
    this.props.quadtree.off('changed', this.onAddRemove);
  }

  listClusters() {
    var bounds = BoundingBox.fromLeafletMap(this.props.map);
    var depth_search = this.depthSearch();

    return this.props.quadtree.reduce(bounds, depth_search).map((models) => {
      return new StationCluster(models);
    });
  }

  depthSearch() {
    var zoom = this.props.map.getZoom();
    if (zoom < 12) {
      return 1;
    }
    return zoom - this.props.config.zoom_offset || 8;
  }

  popupStyle() {
    return { __html:
      `.station-popup .leaflet-popup-content-wrapper
      { background: url("../img/${this.props.config.popup.background_image}") no-repeat 0 0; }
      .station-popup h3
      { background: url("../img/${this.props.config.popup.logo}") no-repeat left center; }
      .station-popup .leaflet-popup-tip { border-top-color: ${this.props.config.colors.text}; }`
    };
  }

  render() {
    var dynamic_css = this.popupStyle();

    return <Map map={this.props.map}>
      <MapboxLayer url="mapbox.emerald"/>
      <Layer interactive>
        <style type="text/css" dangerouslySetInnerHTML={dynamic_css} />
        {
          this.state.list.map((stations) => {
            let key = stations.key();
            let coordinates = stations.coordinates();<commit_msg>fix(front): hack to hide a bug due to quadtree reduce error.<commit_after>'use strict';
import React from 'react';
import _ from 'lodash';
import { Map, Layer, MapboxLayer, Marker, Popup } from 'mapbox-react';
import StationCluster from './StationCluster';
import StationMarker from './StationMarker.jsx';
import BoundingBox from '../lib/BoundingBox';

class VeloMap extends React.Component {

  static propTypes = {
    quadtree: React.PropTypes.any,
    map: React.PropTypes.any,
    config: React.PropTypes.any,
    i18n: React.PropTypes.any
  };

  constructor(props) {
    super(props);
    this.onAddRemove = _.throttle(() => {
      this.setState({
        list: this.listClusters()
      });
    }, 50);
    this.props.quadtree.on('changed', this.onAddRemove);

    this.props.map.on('moveend', function () {
      this.setState({
        list: this.listClusters()
      });
    }, this);
  }

  state = {
    list: []
  };

  componentWillUnmount() {
    this.props.quadtree.off('changed', this.onAddRemove);
  }

  listClusters() {
    var bounds = BoundingBox.fromLeafletMap(this.props.map);
    var depth_search = this.depthSearch();

    return this.props.quadtree.reduce(bounds, depth_search)
      .filter((models) => {
        if (!models.length) { //this should not happen, but as long as the bug has not been reproduced, this hack will avoid errors
          console.error('a node from the quadtree has returned an empty set of items. This should not happen.');
          return false;
        }
        return true;
      }).map((models) => {
        return new StationCluster(models);
      });
  }

  depthSearch() {
    var zoom = this.props.map.getZoom();
    if (zoom < 12) {
      return 1;
    }
    return zoom - this.props.config.zoom_offset || 8;
  }

  popupStyle() {
    return { __html:
      `.station-popup .leaflet-popup-content-wrapper
      { background: url("../img/${this.props.config.popup.background_image}") no-repeat 0 0; }
      .station-popup h3
      { background: url("../img/${this.props.config.popup.logo}") no-repeat left center; }
      .station-popup .leaflet-popup-tip { border-top-color: ${this.props.config.colors.text}; }`
    };
  }

  render() {
    var dynamic_css = this.popupStyle();

    return <Map map={this.props.map}>
      <MapboxLayer url="mapbox.emerald"/>
      <Layer interactive>
        <style type="text/css" dangerouslySetInnerHTML={dynamic_css} />
        {
          this.state.list.map((stations) => {
            let key = stations.key();
            let coordinates = stations.coordinates();
{'fraction_non_alphanumeric': 0.14787547328565417, 'fraction_numerical': 0.004627681952040387, 'mean_word_length': 2.755924170616114, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 18, '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': '6586244', 'n_tokens_mistral': 1517, 'n_tokens_neox': 1476, 'n_words': 316}