<commit_before>import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
import './Harta.css';
import * as traseuLung from './constants/traseu_lung.json';
import { isActive, culoareParticipant } from './helpers'

export default class Harta extends Component {
  constructor(props) {
    super(props);
    this.state = {
      culoriParticipanti: []
    };
    this.schimbaStateHover = this.props.schimbaStateHover.bind(this);
  }

  static defaultProps = {
    center: {lat: 47.6401534, lng: 26.2572495},
    zoom: 6,
    participanti: {},
  };
  render() {
    const Participant = ({ idParticipant, numeParticipant, active, color }) => {
      return (
        <div
          onMouseEnter={(e) => {
            this.schimbaStateHover(idParticipant)
            e.target.closest('.avatar-participant').parentElement.classList.add('avatar-index')
          }}
          onMouseLeave={(e) => {
            this.schimbaStateHover(-1)
            e.target.closest('.avatar-participant').parentElement.classList.remove('avatar-index')
          }}
          style={{ borderColor: `${culoareParticipant(numeParticipant)}` }}
          className={`avatar-participant ${isActive(active)}`}>
          <span>{idParticipant}</span>
        </div>
      );
    };

    const createMapOptions = maps => {
      return {
        mapTypeId: maps.MapTypeId.SATELLITE
      }
    }

    const participant = this.props.participanti.map((p, index) => {
      return <Participant key={index}
        lat={p.lastLocation.latitude}
        lng={p.lastLocation.longitude}
        idParticipant={p.id}
        numeParticipant={p.name}
        active={parseInt(p.id, 10) === this.props.participantHovered}
      />;
    });
  
    const PolylineDot = () => {
      return <div className={`avatar-participant`}></div>
    }

    const traseuLungPolyline = traseuLung.features["0"].geometry.coordinates["0"].map((t, index) => {
      if (index % 100 === 0) // Test, there are 7000 elements in the coordinates array
        return (<PolylineDot key={index}
          lng={t[0]}
          lat={t[1]}
        />);
    });

    return (
      <GoogleMapReact
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
        options={createMapOptions}
      >
        {participant}
        {traseuLungPolyline}
      </GoogleMapReact>
    );
  }
}
<commit_msg>Added polyline<commit_after>import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
import './Harta.css';
import * as traseuLung from './constants/traseu_lung.json';
import { isActive, culoareParticipant } from './helpers'

export default class Harta extends Component {
  constructor(props) {
    super(props);
    this.state = {
      culoriParticipanti: []
    };
    this.schimbaStateHover = this.props.schimbaStateHover.bind(this);
  }

  static defaultProps = {
    center: {lat: 47.6401534, lng: 26.2572495},
    zoom: 6,
    participanti: {},
  };

  render() {
    const Participant = ({ idParticipant, numeParticipant, active, color }) => {
      return (
        <div
          onMouseEnter={(e) => {
            this.schimbaStateHover(idParticipant)
            e.target.closest('.avatar-participant').parentElement.classList.add('avatar-index')
          }}
          onMouseLeave={(e) => {
            this.schimbaStateHover(-1)
            e.target.closest('.avatar-participant').parentElement.classList.remove('avatar-index')
          }}
          style={{ borderColor: `${culoareParticipant(numeParticipant)}` }}
          className={`avatar-participant ${isActive(active)}`}>
          <span>{idParticipant}</span>
        </div>
      );
    };

    const createMapOptions = maps => {
      return {
        mapTypeId: maps.MapTypeId.SATELLITE
      }
    }

    const participant = this.props.participanti.map((p, index) => {
      return <Participant key={index}
        lat={p.lastLocation.latitude}
        lng={p.lastLocation.longitude}
        idParticipant={p.id}
        numeParticipant={p.name}
        active={parseInt(p.id, 10) === this.props.participantHovered}
      />;
    });

    const loadedGMapsApi = ({map, maps}) => {
      const traseuLungPolyline = traseuLung.features["0"].geometry.coordinates["0"]
      .map((coord, index) => {
          return {lng: coord[0], lat: coord[1]}
      });
    
      const GMapsPolyline = new maps.Polyline({
        path: traseuLungPolyline,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 5
      });

      GMapsPolyline.setMap(map);
    }

    return (
      <GoogleMapReact
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
        options={createMapOptions}
        onGoogleApiLoaded={loadedGMapsApi}
                       yesIWantToUseGoogleMapApiInternals
      >
        {participant}
      </GoogleMapReact>
    );
  }
}

{'fraction_non_alphanumeric': 0.14087947882736157, 'fraction_numerical': 0.013640065146579805, 'mean_word_length': 2.47208480565371, 'pattern_counts': {'":': 0, '<': 20, '<?xml version=': 0, '>': 34, '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': '1590971', 'n_tokens_mistral': 1615, 'n_tokens_neox': 1538, 'n_words': 244}