<commit_before>import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { FeatureGroup, MapLayer, Marker, Popup } from 'react-leaflet'
import { Button, ButtonGroup } from 'react-bootstrap'
import { divIcon } from 'leaflet'

import { hasTransit } from '../../util/itinerary'
import { findStopsWithinBBox, clearStops } from '../../actions/api'
import { setLocation } from '../../actions/map'

class StopsOverlay extends MapLayer {
  static propTypes = {
    minZoom: PropTypes.number,
    queryMode: PropTypes.string,
    stops: PropTypes.array,
    refreshStops: PropTypes.func
  }

  static defaultProps = {
    minZoom: 15
  }

  componentDidMount () {
    // set up pan/zoom listeners
    this.context.map.on('zoomend', () => { this._refreshStops() })
    this.context.map.on('dragend', () => { this._refreshStops() })
  }

  _refreshStops () {
    if (this.context.map.getZoom() < this.props.minZoom) {
      this.props.clearStops()
      return
    }

    const bounds = this.context.map.getBounds()
    const params = {
      minLat: bounds.getSouth(),
      maxLat: bounds.getNorth(),
      minLon: bounds.getWest(),
      maxLon: bounds.getEast()
    }
    this.props.refreshStops(params)
  }

  createLeafletElement () {
  }

  updateLeafletElement () {
  }

  render () {
    const { minZoom, queryMode, setLocation, stops } = this.props

    // don't render if below zoom threshold or transit not currently selected
    if (this.context.map.getZoom() < minZoom || !hasTransit(queryMode)) return <FeatureGroup />

    return (
      <FeatureGroup>
        {stops.map((stop) => {
          const icon = divIcon({
            iconSize: [20, 20],
            iconAnchor: [12, 15],
            popupAnchor: [1, -6],
            html: `<span class="fa-stack" style="opacity: 1.0" style={{ background: #00f }}>
                    <i class="fa fa-circle fa-stack-1x" style="color: #ffffff"></i>
                    <i class="fa fa-circle-o fa-stack-1x" style="color: #000000"></i>
                  </span>`,
            className: ''
          })

          const idArr = stop.id.split(':')

          return (
            <Marker
              icon={icon}
              key={stop.id}
              position={[stop.lat, stop.lon]}
            >
              <Popup>
                <div>
                  <div style={{ fontWeight: 'bold', fontSize: 18 }}>{stop.name}</div>
                  <div><b>Agency:</b> {idArr[0]} | <b>Stop ID:</b> {idArr[1]}</div>
                  <div style={{ marginTop: '10px' }}>
                    <span>Set as: </span>
                    <ButtonGroup>
                      <Button bsSize='xsmall' bsStyle='success'
                        onClick={() => {
                          setLocation(constructPayload(stop, 'from'))
                          this.context.map.closePopup()
                        }}
                      >
                        <i className='fa fa-star' /> Start
                      </Button>
                      <Button bsSize='xsmall' bsStyle='danger'
                        onClick={() => {
                          setLocation(constructPayload(stop, 'to'))
                          this.context.map.closePopup()
                        }}
                      >
                        <i className='fa fa-map-marker' /> End
                      </Button>
                    </ButtonGroup>
                  </div>
                </div>
              </Popup>
            </Marker>
          )
        })}
      </FeatureGroup>
    )
  }
}

function constructPayload (stop, type) {
  return {
    type,
    location: {
      lat: stop.lat,
      lon: stop.lon,<commit_msg>fix(overlay): Fix conflict between stops-layer rendering and transitive overlay<commit_after>import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { FeatureGroup, MapLayer, Popup, CircleMarker } from 'react-leaflet'
import { Button, ButtonGroup } from 'react-bootstrap'
import { divIcon } from 'leaflet'

import { hasTransit } from '../../util/itinerary'
import { findStopsWithinBBox, clearStops } from '../../actions/api'
import { setLocation } from '../../actions/map'

class StopsOverlay extends MapLayer {
  static propTypes = {
    minZoom: PropTypes.number,
    queryMode: PropTypes.string,
    stops: PropTypes.array,
    refreshStops: PropTypes.func
  }

  static defaultProps = {
    minZoom: 15
  }

  componentDidMount () {
    // set up pan/zoom listeners
    this.context.map.on('zoomend', () => { this._refreshStops() })
    this.context.map.on('dragend', () => { this._refreshStops() })
  }

  _refreshStops () {
    if (this.context.map.getZoom() < this.props.minZoom) {
      this.forceUpdate()
      return
    }

    const bounds = this.context.map.getBounds()
    const params = {
      minLat: bounds.getSouth(),
      maxLat: bounds.getNorth(),
      minLon: bounds.getWest(),
      maxLon: bounds.getEast()
    }
    setTimeout(() => { this.props.refreshStops(params) }, 300)
  }

  createLeafletElement () {
  }

  updateLeafletElement () {
  }

  render () {
    const { minZoom, queryMode, setLocation, stops } = this.props

    // don't render if below zoom threshold or transit not currently selected
    if (this.context.map.getZoom() < minZoom || !hasTransit(queryMode)) return <FeatureGroup />

    return (
      <FeatureGroup>
        {stops.map((stop) => {
          const idArr = stop.id.split(':')

          return (
            <CircleMarker
              key={stop.id}
              center={[stop.lat, stop.lon]}
              radius={4}
              fillOpacity={1}
              fillColor='#fff'
              color='#000'
              weight={1.5}
            >
              <Popup>
                <div>
                  <div style={{ fontWeight: 'bold', fontSize: 18 }}>{stop.name}</div>
                  <div><b>Agency:</b> {idArr[0]} | <b>Stop ID:</b> {idArr[1]}</div>
                  <div style={{ marginTop: '10px' }}>
                    <span>Set as: </span>
                    <ButtonGroup>
                      <Button bsSize='xsmall' bsStyle='success'
                        onClick={() => {
                          setLocation(constructPayload(stop, 'from'))
                          this.context.map.closePopup()
                        }}
                      >
                        <i className='fa fa-star' /> Start
                      </Button>
                      <Button bsSize='xsmall' bsStyle='danger'
                        onClick={() => {
                          setLocation(constructPayload(stop, 'to'))
                          this.context.map.closePopup()
                        }}
                      >
                        <i className='fa fa-map-marker' /> End
                      </Button>
                    </ButtonGroup>
                  </div>
                </div>
              </Popup>
            </CircleMarker>
          )
        })}
      </FeatureGroup>
    )
  }
}

function constructPayload (stop, type) {
  return {
    type,
    location: {
      lat: stop.lat,
      lon: stop.lon,
{'fraction_non_alphanumeric': 0.13734567901234568, 'fraction_numerical': 0.006734006734006734, 'mean_word_length': 1.580166485703945, 'pattern_counts': {'":': 0, '<': 71, '<?xml version=': 0, '>': 78, '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': '3205225', 'n_tokens_mistral': 2082, 'n_tokens_neox': 2004, 'n_words': 419}