<commit_before>import React, {
  Component
} from 'react';

import { connect } from 'react-redux';

import GoogleMap from 'google-map-react';

import Styles from "../assets/styles/app.css";
import App from "./App";
import {COLORS} from '../constants';
import {
  Navigation,
  Panel
} from 'react-toolbox';

const API_KEY = process.env.GMAP_API_KEY || "<KEY>";

class MapView extends Component {  

  constructor(props) {
    super(props);
    
    this.state = {
      currentPosition: undefined,
      center: { lat: -25.363882, lng: 131.044922 },
      zoom: 18
    };
    this.motionChangePolylines = [];
    this.selectedMarker = null;
    this.geofenceMarkers = {};
    this.geofenceHitMarkers = [];
    this.markers = [];
    this.gmap = undefined;

    let app = App.getInstance();  

    app.on('filter', this.onFilter.bind(this));
    app.on('selectlocation', this.onSelectLocation.bind(this));
  }

  componentDidUpdate() {
    
  }

  onMapLoaded(event) {
    this.gmap = event.map;

    // Route polyline
    let seq = {
      repeat: '50px',
      icon: {
        path: google.maps.SymbolPath.BACKWARD_OPEN_ARROW,
        scale: 1,
        fillOpacity: 0,
        strokeColor: COLORS.white,
        strokeWeight: 1,
        strokeOpacity: 1
      }
    };

    this.polyline = new google.maps.Polyline({
      map: this.gmap,
      zIndex: 1,
      geodesic: true,<commit_msg>Since polyline locations are rendered in reverse order, change polyline path icon to FORWARD_ARROW<commit_after>import React, {
  Component
} from 'react';

import { connect } from 'react-redux';

import GoogleMap from 'google-map-react';

import Styles from "../assets/styles/app.css";
import App from "./App";
import {COLORS} from '../constants';
import {
  Navigation,
  Panel
} from 'react-toolbox';

const API_KEY = process.env.GMAP_API_KEY || "<KEY>";

class MapView extends Component {  

  constructor(props) {
    super(props);
    
    this.state = {
      currentPosition: undefined,
      center: { lat: -25.363882, lng: 131.044922 },
      zoom: 18
    };
    this.motionChangePolylines = [];
    this.selectedMarker = null;
    this.geofenceMarkers = {};
    this.geofenceHitMarkers = [];
    this.markers = [];
    this.gmap = undefined;

    let app = App.getInstance();  

    app.on('filter', this.onFilter.bind(this));
    app.on('selectlocation', this.onSelectLocation.bind(this));
  }

  componentDidUpdate() {
    
  }

  onMapLoaded(event) {
    this.gmap = event.map;

    // Route polyline
    let seq = {
      repeat: '50px',
      icon: {
        path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
        scale: 1,
        fillOpacity: 0,
        strokeColor: COLORS.white,
        strokeWeight: 1,
        strokeOpacity: 1
      }
    };

    this.polyline = new google.maps.Polyline({
      map: this.gmap,
      zIndex: 1,
      geodesic: true,
{'fraction_non_alphanumeric': 0.13303072625698323, 'fraction_numerical': 0.018156424581005588, 'mean_word_length': 2.5902255639097747, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, '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': '3930412', 'n_tokens_mistral': 990, 'n_tokens_neox': 934, 'n_words': 206}