<commit_before>import React from 'react';
import { connect } from 'react-redux';

// ACTIONS
import { getTopics, selectTopic, setTopic } from './SEARCH_ACTIONS.jsx';

// MATERIAL COMPONENTS
import IconButton from 'material-ui/IconButton';
import Subheader from 'material-ui/Subheader';
import TextField from 'material-ui/TextField';
import Searchbar from 'material-ui/AppBar';
import EyeGlass from 'material-ui/svg-icons/action/search';
import Backspace from 'material-ui/svg-icons/hardware/keyboard-backspace';
import FlatButton from 'material-ui/FlatButton';
import Loyalty from 'material-ui/svg-icons/action/loyalty';

import DropDownContainer from './DropDownContainer.jsx';

class Search extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      filtered: [],
      open: false,
      currentTopic: '',
      clickCount: '',
    };
    this.props.dispatch(getTopics());
    this._selectTopic = this._selectTopic.bind(this);
    this._textSearch = this._textSearch.bind(this);
    this._handleRequestClose = this._handleRequestClose.bind(this);
    this._check = this._check.bind(this);
    this._setCount = this._setCount.bind(this);
    this._removeTopic = this._removeTopic.bind(this);
  }

  _selectTopic(topic) {
    let selected = topic.name || topic;
    let mapBounds = this.props.mapBounds;

    // Function that checks the DB for the topic name
    selectTopic(selected, mapBounds);

    // Closes the dropdown
    this._handleRequestClose();

    // Set's the local state
    this.setState({
      currentTopic: selected,
    });
  }

  _check(e) {
    if(e.key === 'Enter') {
      this._selectTopic(e.target.value);
    }
  }
  
  _textSearch(e) {
    let text = e.target.value;
    let allTopics = this.props.allTopics;

    // Only try to filter if there are topics
    if(allTopics.length) {
      this.setState({
        filtered: allTopics.filter((topic) => {
          return topic.name.includes(text); 
        }),
      });
    }
    // Update state as topic changes
    this._handleTouchTap(e);
  }

  _handleTouchTap(e) {
    // This prevents ghost click.
    event.preventDefault();

    this.setState({
      open: true,
      anchorEl: e.currentTarget,
      currentTopic: e.target.value,
    });
  }

  _handleRequestClose() {
    this.setState({
      open: false,
    });
  }

  _setCount() {
    this.setState({
      clickCount: 0,
    })
  }

  _removeTopic(e) {
    this.setState({
      clickCount: this.state.clickCount+=1,
    });
    if(this.state.clickCount === 2) {
      this.props.dispatch(setTopic(0, this.props.mapBounds));
      this.setState({
        currentTopic: '',
      });
    }
  }
  
  render() {
    let activeElement;
    if(this.props.currentTopicId) {
      let topic;
      let icon;
      if(this.state.clickCount === 1) {
        topic = "REMOVE";
        icon = <Backspace />;
      } else {
        topic = this.state.currentTopic;
        icon = <Loyalty />;
      };
      activeElement = <FlatButton
                        label={topic}
                        labelPosition="before"
                        primary={true}
                        icon={icon}  
                        backgroundColor={'#627072'}
                        hoverColor={'#F65151'}
                        onMouseEnter={ this._setCount }
                        onTouchTap={ this._removeTopic }
                      />
    } else {
      activeElement = <TextField
                        hintText="Start typing to find a Topic!"
                        fullWidth={ true }
                        onChange={ this._textSearch }
                        onKeyDown={ this._check }
                        value= { this.state.currentTopic }
                        inputStyle={{ color : 'white' }}
                      />
    }
    return (
      <Searchbar 
          iconElementLeft={<IconButton><EyeGlass color="white" /></IconButton>}
          title={activeElement}
      >
        <DropDownContainer
          open={this.state.open}
          anchorEl={this.state.anchorEl}
          handleReqClose={this._handleRequestClose}
          filtered={this.state.filtered}
          selectTopic={this._selectTopic}>
        </DropDownContainer>
      </Searchbar>
    );
  }
}

// map the portion of the state tree desired
const mapStateToProps = (store) => {
  return {
    allTopics: store.pluribusReducer.allTopics,
    myTopics: store.pluribusReducer.myTopics,
    mapBounds: store.pluribusReducer.mapBounds,
    currentTopicId: store.pluribusReducer.currentTopicId
  };
};<commit_msg>(feat) Make topic removable with right x<commit_after>import React from 'react';
import { connect } from 'react-redux';

// ACTIONS
import { getTopics, selectTopic, setTopic } from './SEARCH_ACTIONS.jsx';

// MATERIAL COMPONENTS
import Paper from 'material-ui/Paper';
import IconButton from 'material-ui/IconButton';
import Subheader from 'material-ui/Subheader';
import TextField from 'material-ui/TextField';
import Searchbar from 'material-ui/AppBar';
import EyeGlass from 'material-ui/svg-icons/action/search';
import Backspace from 'material-ui/svg-icons/hardware/keyboard-backspace';
import FlatButton from 'material-ui/FlatButton';
import Close from 'material-ui/svg-icons/navigation/close';

import DropDownContainer from './DropDownContainer.jsx';

class Search extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      filtered: [],
      open: false,
      currentTopic: '',
      clickCount: '',
    };
    this.props.dispatch(getTopics());
    this._selectTopic = this._selectTopic.bind(this);
    this._textSearch = this._textSearch.bind(this);
    this._handleRequestClose = this._handleRequestClose.bind(this);
    this._check = this._check.bind(this);
    this._setCount = this._setCount.bind(this);
    this._removeTopic = this._removeTopic.bind(this);
  }

  _selectTopic(topic) {
    let selected = topic.name || topic;
    let mapBounds = this.props.mapBounds;

    // Function that checks the DB for the topic name
    selectTopic(selected, mapBounds);

    // Closes the dropdown
    this._handleRequestClose();

    // Set's the local state
    this.setState({
      currentTopic: selected,
    });
  }

  _check(e) {
    if(e.key === 'Enter') {
      this._selectTopic(e.target.value);
    }
  }
  
  _textSearch(e) {
    let text = e.target.value;
    let allTopics = this.props.allTopics;

    // Only try to filter if there are topics
    if(allTopics.length) {
      this.setState({
        filtered: allTopics.filter((topic) => {
          return topic.name.includes(text); 
        }),
      });
    }
    // Update state as topic changes
    this._handleTouchTap(e);
  }

  _handleTouchTap(e) {
    // This prevents ghost click.
    event.preventDefault();

    this.setState({
      open: true,
      anchorEl: e.currentTarget,
      currentTopic: e.target.value,
    });
  }

  _handleRequestClose() {
    this.setState({
      open: false,
    });
  }

  _setCount() {
    this.setState({
      clickCount: 0,
    })
  }

  _removeTopic(e) {
    this.props.dispatch(setTopic(0, this.props.mapBounds));
    this.setState({
      currentTopic: '',
    });
  }
  
  render() {
    let element;      
    let topic = this.state.currentTopic;
    let icon = (<IconButton tooltip="Remove Topic" tooltipPosition="top-center" onTouchTap={this._removeTopic}>
                <Close />
              </IconButton>);
    if (this.props.currentTopicId) {
      element = (
      <Paper style={{'marginTop':'10px', 'display': 'inline-block'}}>
        <span style={{'display': 'inline-block', 'verticalAlign': 'middle', marginBottom: '16px', paddingLeft:'10px'}}>{topic}</span>
        <span>{icon}</span>
      </Paper>); 
    } else {
      element = (
      <TextField
        hintText="Start typing to search Topics!"
        fullWidth={ false }
        onChange={ this._textSearch }
        onKeyDown={ this._check }
        value= { this.state.currentTopic }
        inputStyle={{ color : 'white' }}
      />);
    }

    return (
      <div style={{'backgroundColor': '#00BCD4', 'width':'100%', paddingBottom:'10px'}}>
          <div style={{paddingLeft:'10px', 'display': 'inline-block', 'verticalAlign': 'middle'}}><EyeGlass color="white" /></div>
          <div style={{'display': 'inline-block', 'verticalAlign': 'middle', paddingLeft:'10px'}}>{element}</div>
        <DropDownContainer
          open={this.state.open}
          anchorEl={this.state.anchorEl}
          handleReqClose={this._handleRequestClose}
          filtered={this.state.filtered}
          selectTopic={this._selectTopic}>
        </DropDownContainer>
      </div>
    );
  }
}

// map the portion of the state tree desired
const mapStateToProps = (store) => {
  return {
    allTopics: store.pluribusReducer.allTopics,
    myTopics: store.pluribusReducer.myTopics,
    mapBounds: store.pluribusReducer.mapBounds,
    currentTopicId: store.pluribusReducer.currentTopicId
  };
};
{'fraction_non_alphanumeric': 0.1312861593235425, 'fraction_numerical': 0.004005340453938585, 'mean_word_length': 2.466640956421134, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 37, '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': '2484103', 'n_tokens_mistral': 2759, 'n_tokens_neox': 2678, 'n_words': 529}