<commit_before>import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { trackEvent } from 'utils/analytics';

import { Tooltip } from 'react-tippy';
import Tip from 'components/ui/tip';
import Button from 'components/ui/button';

import Icon from 'components/ui/icon';
import arrowDownIcon from 'assets/icons/arrow-down.svg?sprite';
import helpIcon from 'assets/icons/help.svg?sprite';

import './styles.scss';

class LayerSelectMenu extends PureComponent {
  state = {
    menuActive: false
  };

  handleClickLayer(layer) {
    const { onSelectLayer } = this.props;
    onSelectLayer(layer);
    this.setState({ menuActive: false });
  }

  render() {
    const { className, layers, onInfoClick } = this.props;
    const { menuActive } = this.state;
    const activeLayer = layers && layers.find((l) => l.active);
    const layerList = layers.filter((l) => l.isSelector || l.default);

    if (layerList.length <= 1) return null;

    return (
      <div className={`c-layer-select-menu ${className || ''}`}>
        <div className="selector">
          <button onClick={() => this.setState({ menuActive: !menuActive })}>
            {activeLayer.name}
            <span className="citation">{activeLayer.description}</span>
            <Icon
              icon={arrowDownIcon}
              className={`icon-arrow ${menuActive ? 'reverse' : ''}`}
            />
          </button>
          {menuActive && (
            <ul className="options">
              {layers.map((l) =>
                l.isSelector || l.default ? (
                  <li
                    className={`layer-options ${
                      l.id === activeLayer.id ? 'active' : ''
                    }`}
                    key={`${l.id}-${l.name}`}
                  >
                    <button onClick={() => this.handleClickLayer(l)}>
                      <p>
                        {l.name}
                        <Tooltip
                          theme="tip"
                          hideOnClick
                          position="top"
                          animation="none"
                          html={<Tip className="dynamic-content" html={l.description} />}
                          onShow={() =>
                            trackEvent({
                              category: 'Open modal',
                              action: 'Hover modal button',
                              label: `${l.layer}: ${l?.applicationConfig?.metadata || l.description}`
                          })}
                        >
                          <Button
                            className="theme-button-tiny theme-button-grey-filled square info-button"
                            onClick={l?.applicationConfig?.metadata && (() => onInfoClick(l.applicationConfig.metadata))}
                          >
                            <Icon icon={helpIcon} />
                          </Button>
                        </Tooltip>
                      </p>
                      <span className="citation">
                        {l.citation}
                      </span>
                    </button>
                  </li>
                ) : null
              )}<commit_msg>use citation for active layer (layer menu)<commit_after>import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { trackEvent } from 'utils/analytics';

import { Tooltip } from 'react-tippy';
import Tip from 'components/ui/tip';
import Button from 'components/ui/button';

import Icon from 'components/ui/icon';
import arrowDownIcon from 'assets/icons/arrow-down.svg?sprite';
import helpIcon from 'assets/icons/help.svg?sprite';

import './styles.scss';

class LayerSelectMenu extends PureComponent {
  state = {
    menuActive: false,
  };

  handleClickLayer(layer) {
    const { onSelectLayer } = this.props;
    onSelectLayer(layer);
    this.setState({ menuActive: false });
  }

  render() {
    const { className, layers, onInfoClick } = this.props;
    const { menuActive } = this.state;
    const activeLayer = layers && layers.find((l) => l.active);
    const layerList = layers.filter((l) => l.isSelector || l.default);

    if (layerList.length <= 1) return null;
    return (
      <div className={`c-layer-select-menu ${className || ''}`}>
        <div className="selector">
          <button onClick={() => this.setState({ menuActive: !menuActive })}>
            {activeLayer.name}
            <span className="citation">{activeLayer.citation}</span>
            <Icon
              icon={arrowDownIcon}
              className={`icon-arrow ${menuActive ? 'reverse' : ''}`}
            />
          </button>
          {menuActive && (
            <ul className="options">
              {layers.map((l) =>
                l.isSelector || l.default ? (
                  <li
                    className={`layer-options ${
                      l.id === activeLayer.id ? 'active' : ''
                    }`}
                    key={`${l.id}-${l.name}`}
                  >
                    <button onClick={() => this.handleClickLayer(l)}>
                      <p>
                        {l.name}
                        <Tooltip
                          theme="tip"
                          hideOnClick
                          position="top"
                          animation="none"
                          html={(
                            <Tip
                              className="dynamic-content"
                              html={l.description}
                            />
                          )}
                          onShow={() =>
                            trackEvent({
                              category: 'Open modal',
                              action: 'Hover modal button',
                              label: `${l.layer}: ${
                                l?.applicationConfig?.metadata || l.description
                              }`,
                            })}
                        >
                          <Button
                            className="theme-button-tiny theme-button-grey-filled square info-button"
                            onClick={
                              l?.applicationConfig?.metadata &&
                              (() => onInfoClick(l.applicationConfig.metadata))
                            }
                          >
                            <Icon icon={helpIcon} />
                          </Button>
                        </Tooltip>
                      </p>
                      <span className="citation">{l.citation}</span>
                    </button>
                  </li>
                ) : null
              )}
{'fraction_non_alphanumeric': 0.12382515291660451, 'fraction_numerical': 0.0002983738624496494, 'mean_word_length': 1.2052631578947368, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 61, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '378044', 'n_tokens_mistral': 1630, 'n_tokens_neox': 1585, 'n_words': 316}