<commit_before>import { connect } from 'react-redux'
import { MapRef, useMap } from 'react-map-gl'
import { Popup } from '@opentripplanner/base-map'
import { Search } from '@styled-icons/fa-solid/Search'
import { useIntl, WrappedComponentProps } from 'react-intl'
import FromToLocationPicker from '@opentripplanner/from-to-location-picker'
import React, { useCallback } from 'react'
import styled from 'styled-components'
import type { Location } from '@opentripplanner/types'

import * as mapActions from '../../actions/map'
import { Icon } from '../util/styledIcon'
import { renderCoordinates } from '../form/user-settings'

const PopupTitleWrapper = styled.div`
  align-items: flex-start;
  display: flex;
  margin-bottom: 6px;
  width: 100%;
`

const PopupTitle = styled.div`
  flex-grow: 1;
  font-size: 14px;
`

const ZoomButton = styled.button`
  background: none;
  border: none;
  margin-top: -1px;
  padding-top: 0;
`

type Props = {
  clearMapPopupLocation: () => void
  mapPopupLocation: Location
  setLocation: (arg: unknown) => void
  zoomToPlace: (
    map?: MapRef,
    place?: { lat: number; lon: number },
    zoom?: number
  ) => void
} & WrappedComponentProps

const DEFAULT_ZOOM = 15

function MapPopup({
  clearMapPopupLocation,
  mapPopupLocation,
  setLocation,
  zoomToPlace
}: Props): JSX.Element | null {
  const intl = useIntl()
  const { current: map } = useMap()

  // Memoize callbacks that shouldn't change from one render to the next.
  const onSetLocationFromPopup = useCallback(
    (payload) => {
      clearMapPopupLocation()
      setLocation(payload)
    },
    [setLocation, clearMapPopupLocation]
  )

  if (!mapPopupLocation) return null

  const popupName =
    mapPopupLocation.name ||
    intl.formatMessage(
      { id: 'common.coordinates' },
      renderCoordinates(intl, mapPopupLocation)
    )

  return (
    <Popup
      closeButton={false}
      closeOnClick
      latitude={mapPopupLocation.lat}
      longitude={mapPopupLocation.lon}
      onClose={clearMapPopupLocation}
      // Override inline style supplied by react-map-gl to accommodate long "plan a trip" translations.
      style={{ maxWidth: '260px', width: '260px' }}
    >
      <PopupTitleWrapper>
        <PopupTitle>
          {typeof popupName === 'string' && popupName.split(',').length > 3
            ? popupName.split(',').splice(0, 3).join(',')
            : popupName}
        </PopupTitle>
        <ZoomButton
          // className="pull-right"
          onClick={() => zoomToPlace(map, mapPopupLocation, DEFAULT_ZOOM)}
          title={intl.formatMessage({
            id: 'components.PointPopup.zoomToLocation'
          })}
        >
          <Icon Icon={Search} />
        </ZoomButton>
      </PopupTitleWrapper>
      <div>
        <FromToLocationPicker
          label
          location={{ ...mapPopupLocation, name: popupName }}
          setLocation={onSetLocationFromPopup}
        />
      </div>
    </Popup>
  )
}

// connect to the redux store

const mapStateToProps = (state: any) => {
  return {
    mapPopupLocation: state.otp.ui.mapPopupLocation
  }
}

const mapDispatchToProps = {
  clearMapPopupLocation: mapActions.clearMapPopupLocation,
  setLocation: mapActions.setLocation,
  zoomToPlace: mapActions.zoomToPlace
}

export default connect(mapStateToProps, mapDispatchToProps)(MapPopup)
<commit_msg>refactor(PointPopup): Remove unused comment, add aria-label.<commit_after>import { connect } from 'react-redux'
import { MapRef, useMap } from 'react-map-gl'
import { Popup } from '@opentripplanner/base-map'
import { Search } from '@styled-icons/fa-solid/Search'
import { useIntl, WrappedComponentProps } from 'react-intl'
import FromToLocationPicker from '@opentripplanner/from-to-location-picker'
import React, { useCallback } from 'react'
import styled from 'styled-components'
import type { Location } from '@opentripplanner/types'

import * as mapActions from '../../actions/map'
import { Icon } from '../util/styledIcon'
import { renderCoordinates } from '../form/user-settings'

const PopupTitleWrapper = styled.div`
  align-items: flex-start;
  display: flex;
  margin-bottom: 6px;
  width: 100%;
`

const PopupTitle = styled.div`
  flex-grow: 1;
  font-size: 14px;
`

const ZoomButton = styled.button`
  background: none;
  border: none;
  margin-top: -1px;
  padding-top: 0;
`

type Props = {
  clearMapPopupLocation: () => void
  mapPopupLocation: Location
  setLocation: (arg: unknown) => void
  zoomToPlace: (
    map?: MapRef,
    place?: { lat: number; lon: number },
    zoom?: number
  ) => void
} & WrappedComponentProps

const DEFAULT_ZOOM = 15

function MapPopup({
  clearMapPopupLocation,
  mapPopupLocation,
  setLocation,
  zoomToPlace
}: Props): JSX.Element | null {
  const intl = useIntl()
  const { current: map } = useMap()

  // Memoize callbacks that shouldn't change from one render to the next.
  const onSetLocationFromPopup = useCallback(
    (payload) => {
      clearMapPopupLocation()
      setLocation(payload)
    },
    [setLocation, clearMapPopupLocation]
  )

  if (!mapPopupLocation) return null

  const popupName =
    mapPopupLocation.name ||
    intl.formatMessage(
      { id: 'common.coordinates' },
      renderCoordinates(intl, mapPopupLocation)
    )
  const zoomButtonLabel = intl.formatMessage({
    id: 'components.PointPopup.zoomToLocation'
  })

  return (
    <Popup
      closeButton={false}
      closeOnClick
      latitude={mapPopupLocation.lat}
      longitude={mapPopupLocation.lon}
      onClose={clearMapPopupLocation}
      // Override inline style supplied by react-map-gl to accommodate long "plan a trip" translations.
      style={{ maxWidth: '260px', width: '260px' }}
    >
      <PopupTitleWrapper>
        <PopupTitle>
          {typeof popupName === 'string' && popupName.split(',').length > 3
            ? popupName.split(',').splice(0, 3).join(',')
            : popupName}
        </PopupTitle>
        <ZoomButton
          aria-label={zoomButtonLabel}
          onClick={() => zoomToPlace(map, mapPopupLocation, DEFAULT_ZOOM)}
          title={zoomButtonLabel}
        >
          <Icon Icon={Search} />
        </ZoomButton>
      </PopupTitleWrapper>
      <div>
        <FromToLocationPicker
          label
          location={{ ...mapPopupLocation, name: popupName }}
          setLocation={onSetLocationFromPopup}
        />
      </div>
    </Popup>
  )
}

// connect to the redux store

const mapStateToProps = (state: any) => {
  return {
    mapPopupLocation: state.otp.ui.mapPopupLocation
  }
}

const mapDispatchToProps = {
  clearMapPopupLocation: mapActions.clearMapPopupLocation,
  setLocation: mapActions.setLocation,
  zoomToPlace: mapActions.zoomToPlace
}

export default connect(mapStateToProps, mapDispatchToProps)(MapPopup)

{'fraction_non_alphanumeric': 0.11965181469460018, 'fraction_numerical': 0.005901445854234287, 'mean_word_length': 3.1871525633106854, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 41, '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': '1192369', 'n_tokens_mistral': 2121, 'n_tokens_neox': 2128, 'n_words': 482}