<commit_before>import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';

import { compose } from 'recompose';
import React from 'react';
import { cloneDeep } from 'lodash';

import { genomeCollection } from '/imports/api/genomes/genomeCollection.js';

import { withEither, isLoading, Loading } from '/imports/ui/util/uiUtil.jsx';
import { Dropdown, DropdownButton, DropdownMenu } from '/imports/ui/util/Dropdown.jsx';

const genomeDataTracker = ({...props}) => {
  const genomeSub = Meteor.subscribe('genomes');
  const loading = !genomeSub.ready();
  const genomes = genomeCollection.find({ annotationTrack: { $exists: true } }).fetch();
  return {
    loading,
    genomes,
    ...props
  }
}

const withConditionalRendering = compose(
  withTracker(genomeDataTracker),
  withEither(isLoading, Loading)
)

class GenomeSelect extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      initialized: false,
      show: '',
      selectedGenomes: new Set()
    }
  }

  componentWillReceiveProps = newProps => {
    if (!this.state.initialized){
      const genomes = newProps.genomes.map(genome => genome._id);
      this.setState({
        selectedGenomes: new Set(genomes),
        initialized: true
      })
    }
  }

  open = () => {
    console.log('open')
    this.setState({
      show: 'show'
    });
    document.addEventListener('click', this.close);
  }

  close = () => {
    this.setState({
      show: ''
    });
    document.removeEventListener('click', this.close);
  }

  /*preventClose = event => {
    event.preventDefault();
    event.stopPropagation();
    event.nativeEvent.stopImmediatePropagation();
  }*/

  toggleGenomeSelect = event => {
    const selectedGenomes = cloneDeep(this.state.selectedGenomes);
    const query = cloneDeep(this.props.query);
    const genomeId = event.target.id;
    if (selectedGenomes.has(genomeId)){
      selectedGenomes.delete(genomeId)
    } else {
      selectedGenomes.add(genomeId)
    }
    
    this.setState({ selectedGenomes });

    if (selectedGenomes.size < this.props.genomes.length){
      query.genomeId = { $in: [...selectedGenomes]}
    } else if (query.hasOwnProperty('genomeId')){
      delete query.genomeId;
    }

    this.props.updateQuery(query);
  }

  selectAll = () => {
    const allGenomes = this.props.genomes.map(genome => genome._id);
    const selectedGenomes = new Set(allGenomes)
    const query = cloneDeep(this.props.query);
    this.setState({ selectedGenomes });

    if (query.hasOwnProperty('genomeId')){
      delete query.genomeId
    }
    this.props.updateQuery(query)
  }

  unselectAll = () => {
    const query = cloneDeep(this.props.query);
    const selectedGenomes = new Set([]);
    this.setState( selectedGenomes );
    query.genomeId = { $in: [] }
    this.props.updateQuery(query)
  }

  render(){
    const { genomes, ...props } = this.props;
    const { selectedGenomes } = this.state;
    return ( 
      <Dropdown>
        <DropdownButton className='btn btn-sm btn-outline-dark dropdown-toggle px-2 py-0 border'>
          Genomes&nbsp;
          <span className='badge badge-dark'>
            {`${selectedGenomes.size}/${genomes.length}`}
          </span>
        </DropdownButton>
        <DropdownMenu>
          <h6 className="dropdown-header">Select genomes</h6>
          {
            genomes.map(({ _id, name }) => {
              const checked = selectedGenomes.has(_id);
              return (
                <div key={`${_id}-${checked}`} className='form-check'>
                  <input type='checkbox' className='form-check-input' id={_id}
                    checked={checked} onChange={this.toggleGenomeSelect} />
                  <label className='form-check-label'>{name}</label>
                </div>
              )
            })
          }
          <div className="dropdown-divider" />
          <div className="btn-group mx-2" role="group">
            <button 
              type="button" 
              className="btn btn-sm btn-outline-dark" 
              onClick={this.selectAll}>
              Select all
            </button>
            <button 
              type="button" 
              className="btn btn-sm btn-outline-dark"
              onClick={this.unselectAll}><commit_msg>Fixed unselect all genomes button<commit_after>import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';

import { compose } from 'recompose';
import React from 'react';
import { cloneDeep } from 'lodash';

import { genomeCollection } from '/imports/api/genomes/genomeCollection.js';

import { withEither, isLoading, Loading } from '/imports/ui/util/uiUtil.jsx';
import { Dropdown, DropdownButton, DropdownMenu } from '/imports/ui/util/Dropdown.jsx';

const genomeDataTracker = ({...props}) => {
  const genomeSub = Meteor.subscribe('genomes');
  const loading = !genomeSub.ready();
  const genomes = genomeCollection.find({ 
    annotationTrack: { $exists: true } 
  }).fetch();
  return {
    loading,
    genomes,
    ...props
  }
}

const withConditionalRendering = compose(
  withTracker(genomeDataTracker),
  withEither(isLoading, Loading)
)

class GenomeSelect extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      initialized: false,
      show: '',
      selectedGenomes: new Set()
    }
  }

  componentWillReceiveProps = newProps => {
    if (!this.state.initialized){
      const genomes = newProps.genomes.map(genome => genome._id);
      this.setState({
        selectedGenomes: new Set(genomes),
        initialized: true
      })
    }
  }

  open = () => {
    console.log('open')
    this.setState({
      show: 'show'
    });
    document.addEventListener('click', this.close);
  }

  close = () => {
    this.setState({
      show: ''
    });
    document.removeEventListener('click', this.close);
  }

  /*preventClose = event => {
    event.preventDefault();
    event.stopPropagation();
    event.nativeEvent.stopImmediatePropagation();
  }*/

  toggleGenomeSelect = event => {
    const selectedGenomes = cloneDeep(this.state.selectedGenomes);
    const query = cloneDeep(this.props.query);
    const genomeId = event.target.id;
    if (selectedGenomes.has(genomeId)){
      selectedGenomes.delete(genomeId)
    } else {
      selectedGenomes.add(genomeId)
    }
    
    this.setState({ selectedGenomes });

    if (selectedGenomes.size < this.props.genomes.length){
      query.genomeId = { $in: [...selectedGenomes]}
    } else if (query.hasOwnProperty('genomeId')){
      delete query.genomeId;
    }

    this.props.updateQuery(query);
  }

  selectAll = () => {
    const allGenomes = this.props.genomes.map(genome => genome._id);
    const selectedGenomes = new Set(allGenomes)
    const query = cloneDeep(this.props.query);
    this.setState({ selectedGenomes });

    if (query.hasOwnProperty('genomeId')){
      delete query.genomeId
    }
    this.props.updateQuery(query)
  }

  unselectAll = () => {
    const query = cloneDeep(this.props.query);
    const selectedGenomes = new Set([]);
    this.setState({ selectedGenomes });
    query.genomeId = { $in: [] }
    this.props.updateQuery(query)
  }

  render(){
    const { genomes, ...props } = this.props;
    const { selectedGenomes } = this.state;
    return ( 
      <Dropdown>
        <DropdownButton 
          className='btn btn-sm btn-outline-dark dropdown-toggle px-2 py-0 border'>
          Genomes&nbsp;
          <span className='badge badge-dark'>
            {`${selectedGenomes.size}/${genomes.length}`}
          </span>
        </DropdownButton>
        <DropdownMenu>
          <h6 className="dropdown-header">Select genomes</h6>
          {
            genomes.map(({ _id, name }) => {
              const checked = selectedGenomes.has(_id);
              return (
                <div key={`${_id}-${checked}`} className='form-check'>
                  <input type='checkbox' className='form-check-input' id={_id}
                    checked={checked} onChange={this.toggleGenomeSelect} />
                  <label className='form-check-label'>{name}</label>
                </div>
              )
            })
          }
          <div className="dropdown-divider" />
          <div className="btn-group mx-2" role="group">
            <button 
              type="button" 
              className="btn btn-sm btn-outline-dark" 
              onClick={this.selectAll}>
              Select all
            </button>
            <button 
              type="button" 
              className="btn btn-sm btn-outline-dark"
              onClick={this.unselectAll}>
{'fraction_non_alphanumeric': 0.13891136022188835, 'fraction_numerical': 0.0011556685542586387, 'mean_word_length': 2.4560702875399363, 'pattern_counts': {'":': 0, '<': 41, '<?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': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1080629', 'n_tokens_mistral': 2634, 'n_tokens_neox': 2545, 'n_words': 477}