<commit_before>import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import Map from 'components/map';
import Icon from 'components/icon';
import accordionArrow from 'assets/icons/accordion-arrow.svg';
import { Link } from 'react-router-dom';
import ReactTooltip from 'react-tooltip';
import ButtonGroup from 'components/button-group';
import { TabletLandscape } from 'components/responsive';
import tooltipTheme from 'styles/themes/map-tooltip/map-tooltip.scss';

import LegendRange from './legend-range';
import LegendSteps from './legend-steps';

import styles from './ndc-sdg-linkages-map-styles.scss';

class NdcSdgLinkagesMap extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      country: ''
    };
  }

  getTooltip() {
    const { country } = this.state;
    const targets =
      this.props.goal &&
      this.props.goal.locations &&
      this.props.goal.locations[country.id];
    const locations = targets && targets.numbers && targets.numbers.length;
    return (
      <Link className={tooltipTheme.container} to={`/countries/${country.id}`}>
        <div className={tooltipTheme.info}>
          <div className={tooltipTheme.countryName}>{country.name}</div>
          <p className={tooltipTheme.text}>{locations || '0'} targets linked</p>
        </div>
        <Icon icon={accordionArrow} className={tooltipTheme.icon} />
      </Link>
    );
  }

  getLegend() {
    const { goal } = this.props;
    const colour = goal ? goal.colour : '';

    if (!goal) return null;

    return this.props.targetHover ? (
      <LegendSteps className={styles.legend} colour={colour} />
    ) : (
      <LegendRange className={styles.legend} colour={colour} />
    );
  }

  handleMapInteraction = country =>
    this.setState({ country: country.properties });

  render() {
    return (
      <TabletLandscape>
        {isTablet => (
          <div
            className={cx(styles.container, this.props.className, {
              [styles.isOpen]: this.props.goalSelected !== ''
            })}
          >
            <div className={styles.row}>
              {isTablet ? (
                <h3 className={styles.title}>Global Linkage Overview</h3>
              ) : null}
              {isTablet ? (
                <ButtonGroup
                  className={styles.buttons}
                  buttonsConfig={[
                    {
                      type: 'info',
                      onClick: this.props.handleInfoClick
                    },
                    {
                      type: 'share',
                      shareUrl: '/embed/ndcs-sdg',
                      analyticsGraphName: 'Ndcs-Sdg'
                    },
                    {<commit_msg>Open Ndc Sdg Linkages Share Dropdown to the right<commit_after>import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import Map from 'components/map';
import Icon from 'components/icon';
import accordionArrow from 'assets/icons/accordion-arrow.svg';
import { Link } from 'react-router-dom';
import ReactTooltip from 'react-tooltip';
import ButtonGroup from 'components/button-group';
import { TabletLandscape } from 'components/responsive';
import tooltipTheme from 'styles/themes/map-tooltip/map-tooltip.scss';

import LegendRange from './legend-range';
import LegendSteps from './legend-steps';

import styles from './ndc-sdg-linkages-map-styles.scss';

class NdcSdgLinkagesMap extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      country: ''
    };
  }

  getTooltip() {
    const { country } = this.state;
    const targets =
      this.props.goal &&
      this.props.goal.locations &&
      this.props.goal.locations[country.id];
    const locations = targets && targets.numbers && targets.numbers.length;
    return (
      <Link className={tooltipTheme.container} to={`/countries/${country.id}`}>
        <div className={tooltipTheme.info}>
          <div className={tooltipTheme.countryName}>{country.name}</div>
          <p className={tooltipTheme.text}>{locations || '0'} targets linked</p>
        </div>
        <Icon icon={accordionArrow} className={tooltipTheme.icon} />
      </Link>
    );
  }

  getLegend() {
    const { goal } = this.props;
    const colour = goal ? goal.colour : '';

    if (!goal) return null;

    return this.props.targetHover ? (
      <LegendSteps className={styles.legend} colour={colour} />
    ) : (
      <LegendRange className={styles.legend} colour={colour} />
    );
  }

  handleMapInteraction = country =>
    this.setState({ country: country.properties });

  render() {
    return (
      <TabletLandscape>
        {isTablet => (
          <div
            className={cx(styles.container, this.props.className, {
              [styles.isOpen]: this.props.goalSelected !== ''
            })}
          >
            <div className={styles.row}>
              {isTablet ? (
                <h3 className={styles.title}>Global Linkage Overview</h3>
              ) : null}
              {isTablet ? (
                <ButtonGroup
                  className={styles.buttons}
                  buttonsConfig={[
                    {
                      type: 'info',
                      onClick: this.props.handleInfoClick
                    },
                    {
                      type: 'share',
                      shareUrl: '/embed/ndcs-sdg',
                      analyticsGraphName: 'Ndcs-Sdg',
                      positionRight: true
                    },
                    {
{'fraction_non_alphanumeric': 0.12867581536268044, 'fraction_numerical': 0.0010693281055070398, 'mean_word_length': 2.0920110192837464, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 39, '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': '3961659', 'n_tokens_mistral': 1593, 'n_tokens_neox': 1516, 'n_words': 316}