<commit_before>/* eslint-disable react/sort-comp  */

import React, { Component } from 'react';
import extentChanged from 'util/extentChanged';
import VesselsLayer from 'components/Layers/VesselsLayer';
import TrackLayer from 'components/Layers/TrackLayer';

class MapLayers extends Component {
  constructor(props) {
    super(props);
    this.state = {
      addedLayers: {}
    };
    this.onMapIdleBound = this.onMapIdle.bind(this);
    this.onMapClickBound = this.onMapClick.bind(this);
    this.onMapCenterChangedBound = this.onMapCenterChanged.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (!this.map && nextProps.map) {
      this.map = nextProps.map;
      this.build();
    } else {
      if (nextProps.viewportWidth !== this.props.viewportWidth || nextProps.viewportHeight !== this.props.viewportHeight) {
        this.vesselsLayer.updateViewportSize(nextProps.viewportWidth, nextProps.viewportHeight);
        // TODO update tracks layer viewport as well
      }
    }

    this.updateLayers(nextProps);
    this.updateFlag(nextProps);

    if (this.props.zoom !== nextProps.zoom) {
      this.vesselsLayer.setZoom(nextProps.zoom);
    }

    if (!nextProps.timelineOuterExtent || !nextProps.timelineInnerExtent) {
      return;
    }

    const innerExtentChanged = extentChanged(this.props.timelineInnerExtent, nextProps.timelineInnerExtent);
    const startTimestamp = nextProps.timelineInnerExtent[0].getTime();
    const endTimestamp = nextProps.timelineInnerExtent[1].getTime();

    if (!nextProps.vesselTrack) {
      this.trackLayer.clear();
    } else {
      // update tracks layer when:
      // - user selected a new vessel (seriesgroup or selectedSeries changed)
      // - zoom level changed (needs fetching of a new tileset)
      // - playing state changed
      // - user hovers on timeline to highlight a portion of the track, only if selectedSeries is set
      //    (redrawing is too slow when all series are shown)
      // - selected inner extent changed
      if (!this.props.vesselTrack ||
          this.props.vesselTrack.seriesgroup !== nextProps.vesselTrack.seriesgroup ||
          this.props.vesselTrack.selectedSeries !== nextProps.vesselTrack.selectedSeries ||
          this.props.zoom !== nextProps.zoom ||
          this.props.timelinePaused !== nextProps.timelinePaused ||
          (nextProps.vesselTrack.selectedSeries && extentChanged(this.props.timelineOverExtent, nextProps.timelineOverExtent)) ||
          innerExtentChanged) {
        this.updateTrackLayer({
          data: nextProps.vesselTrack.seriesGroupData,
          selectedSeries: nextProps.vesselTrack.selectedSeries,
          startTimestamp,
          endTimestamp,
          timelinePaused: nextProps.timelinePaused,
          timelineOverExtent: nextProps.timelineOverExtent
        });
      }
    }

    if (this.vesselsLayer) {
      // update vessels layer when:
      // - user selected a new flag
      // - selected inner extent changed
      // Vessels layer will update automatically on zoom and center changes, as the overlay will fetch tiles,
      //      then rendered by the vessel layer
      if (this.props.flag !== nextProps.flag ||
        innerExtentChanged) {
        this.vesselsLayer.renderTimeRange(startTimestamp, endTimestamp);
      }
    }

    this.updateVesselTransparency(nextProps);
    this.updateVesselColor(nextProps);
  }

  build() {
    this.map.addListener('idle', this.onMapIdleBound);
    this.map.addListener('click', this.onMapClickBound);
    this.map.addListener('center_changed', this.onMapCenterChangedBound);
  }

  componentWillUnmount() {
    this.map.removeListener('idle', this.onMapIdleBound);
    this.map.removeListener('click', this.onMapClickBound);
    this.map.removeListener('center_changed', this.onMapCenterChangedBound);
  }


  /**
   * Handles and propagates layers changes
   * @param nextProps
   */
  updateLayers(nextProps) {
    const currentLayers = this.props.layers;
    const newLayers = nextProps.layers;
    const addedLayers = this.state.addedLayers;

    const updatedLayers = newLayers.map(
      (l, i) => {
        if (currentLayers[i] === undefined) return l;
        if (l.title !== currentLayers[i].title) return l;
        if (l.visible !== currentLayers[i].visible) return l;
        if (l.opacity !== currentLayers[i].opacity) return l;
        return false;
      }
    );
    // console.log(addedLayers)
    // console.log(updatedLayers)

    const promises = [];
    let callAddVesselLayer = null;

    for (let i = 0, j = updatedLayers.length; i < j; i++) {
      if (!updatedLayers[i]) continue;

      const newLayer = updatedLayers[i];
      const oldLayer = currentLayers[i];

      if (addedLayers[newLayer.title] && newLayer.visible && oldLayer.opacity !== newLayer.opacity) {
        this.setLayerOpacity(newLayer);
        continue;
      }
<commit_msg>Extract complex if clause<commit_after>/* eslint-disable react/sort-comp  */
import React, { Component } from 'react';
import extentChanged from 'util/extentChanged';
import VesselsLayer from 'components/Layers/VesselsLayer';
import TrackLayer from 'components/Layers/TrackLayer';

class MapLayers extends Component {
  constructor(props) {
    super(props);
    this.state = {
      addedLayers: {}
    };
    this.onMapIdleBound = this.onMapIdle.bind(this);
    this.onMapClickBound = this.onMapClick.bind(this);
    this.onMapCenterChangedBound = this.onMapCenterChanged.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (!this.map && nextProps.map) {
      this.map = nextProps.map;
      this.build();
    } else {
      if (nextProps.viewportWidth !== this.props.viewportWidth || nextProps.viewportHeight !== this.props.viewportHeight) {
        this.vesselsLayer.updateViewportSize(nextProps.viewportWidth, nextProps.viewportHeight);
        // TODO update tracks layer viewport as well
      }
    }

    this.updateLayers(nextProps);
    this.updateFlag(nextProps);

    if (this.props.zoom !== nextProps.zoom) {
      this.vesselsLayer.setZoom(nextProps.zoom);
    }

    if (!nextProps.timelineOuterExtent || !nextProps.timelineInnerExtent) {
      return;
    }

    const innerExtentChanged = extentChanged(this.props.timelineInnerExtent, nextProps.timelineInnerExtent);
    const startTimestamp = nextProps.timelineInnerExtent[0].getTime();
    const endTimestamp = nextProps.timelineInnerExtent[1].getTime();

    if (this.trackLayer && !nextProps.vesselTrack) {
      this.trackLayer.clear();
    } else if (this.shouldUpdateTrackLayer(nextProps, innerExtentChanged)) {
      this.updateTrackLayer({
        data: nextProps.vesselTrack.seriesGroupData,
        selectedSeries: nextProps.vesselTrack.selectedSeries,
        startTimestamp,
        endTimestamp,
        timelinePaused: nextProps.timelinePaused,
        timelineOverExtent: nextProps.timelineOverExtent
      });
    }

    if (this.vesselsLayer) {
      // update vessels layer when:
      // - user selected a new flag
      // - selected inner extent changed
      // Vessels layer will update automatically on zoom and center changes, as the overlay will fetch tiles,
      //      then rendered by the vessel layer
      if (this.props.flag !== nextProps.flag ||
        innerExtentChanged) {
        this.vesselsLayer.renderTimeRange(startTimestamp, endTimestamp);
      }
    }

    this.updateVesselTransparency(nextProps);
    this.updateVesselColor(nextProps);
  }

  /**
   * update tracks layer when:
   * - user selected a new vessel (seriesgroup or selectedSeries changed)
   * - zoom level changed (needs fetching of a new tileset)
   * - playing state changed
   * - user hovers on timeline to highlight a portion of the track, only if selectedSeries is set (redrawing is too
   * slow when all series are shown)
   * - selected inner extent changed
   *
   * @param nextProps
   * @param innerExtentChanged
   * @returns {boolean}
   */
  shouldUpdateTrackLayer(nextProps, innerExtentChanged) {
    if (!this.props.vesselTrack) {
      return true;
    }
    if (this.props.vesselTrack.seriesgroup !== nextProps.vesselTrack.seriesgroup) {
      return true;
    }
    if (this.props.vesselTrack.selectedSeries !== nextProps.vesselTrack.selectedSeries) {
      return true;
    }
    if (this.props.zoom !== nextProps.zoom) {
      return true;
    }
    if (this.props.timelinePaused !== nextProps.timelinePaused) {
      return true;
    }
    if (nextProps.vesselTrack.selectedSeries && extentChanged(this.props.timelineOverExtent, nextProps.timelineOverExtent)) {
      return true;
    }
    if (innerExtentChanged) {
      return true;
    }
    return false;
  }

  build() {
    this.map.addListener('idle', this.onMapIdleBound);
    this.map.addListener('click', this.onMapClickBound);
    this.map.addListener('center_changed', this.onMapCenterChangedBound);
  }

  componentWillUnmount() {
    this.map.removeListener('idle', this.onMapIdleBound);
    this.map.removeListener('click', this.onMapClickBound);
    this.map.removeListener('center_changed', this.onMapCenterChangedBound);
  }


  /**
   * Handles and propagates layers changes
   * @param nextProps
   */
  updateLayers(nextProps) {
    const currentLayers = this.props.layers;
    const newLayers = nextProps.layers;
    const addedLayers = this.state.addedLayers;

    const updatedLayers = newLayers.map(
      (layer, index) => {
        if (currentLayers[index] === undefined) return layer;
        if (layer.title !== currentLayers[index].title) return layer;
        if (layer.visible !== currentLayers[index].visible) return layer;
        if (layer.opacity !== currentLayers[index].opacity) return layer;
        return false;
      }
    );

    const promises = [];
    let callAddVesselLayer = null;

    for (let i = 0, j = updatedLayers.length; i < j; i++) {
      if (!updatedLayers[i]) continue;

      const newLayer = updatedLayers[i];
      const oldLayer = currentLayers[i];

      if (addedLayers[newLayer.title] && newLayer.visible && oldLayer.opacity !== newLayer.opacity) {
        this.setLayerOpacity(newLayer);
        continue;
      }

{'fraction_non_alphanumeric': 0.10975248989251553, 'fraction_numerical': 0.0005916576274529139, 'mean_word_length': 3.126118795768918, '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': '2219359', 'n_tokens_mistral': 3088, 'n_tokens_neox': 2971, 'n_words': 623}