<commit_before>import React, {Component} from 'react';
import {Button, Popover, Overlay, Table, Input} from 'react-bootstrap';
import SVG from 'react-inlinesvg';


export default class WellOverlay extends Component {
  renderWellContent() {
    const {well, removeSampleFromWell} = this.props;
    const {sample} = well;
    let name, svg, moleculeName, removeButton = '';
    const namesStyle= {textAlign: 'center', marginTop: 5};
    const svgContainerStyle = {
      borderRadius: '50%',
      height: 200,
      width: 200,
      border: '6px solid lightgray',
      textAlign: 'center',
      verticalAlign: 'middle',
      lineHeight: 2
    };
    if (sample) {
      svg = <SVG key={sample.id} className="molecule-mid" src={`/images/molecules/${sample.molecule.molecule_svg_file}`}/>;
      name = sample.name;
      moleculeName = sample.molecule.iupac_name;
      removeButton = (
        <div className="pull-right">
          <Button bsSize="xsmall" bsStyle="danger" onClick={() => removeSampleFromWell(well)}>
            <span className="fa fa-trash-o"></span>
          </Button>
        </div>
      );
    }
    return (
      <div>
        <div style={svgContainerStyle}>
          {svg}
        </div>
        <div style={namesStyle}>
          {name}<br/>
          {moleculeName}
        </div>
        {removeButton}
      </div>
    );
  }

  render() {
    const {show, well, target, handleClose, placement} = this.props;
    let title = (
      <div>
        Well Details
        <span className='pull-right' style={{marginRight: -8, marginTop: -3}}>
          <Button bsSize='xsmall' onClick={() => handleClose()}>
            <i className="fa fa-times"></i>
          </Button>
        </span>
      </div>
    );
    return (
      <div>
        <Overlay
          show={show}
          target={target}
          placement={placement}
          onHide={() => handleClose()}
          >
          <Popover title={title}>
            <div style={{width: 200, height: 420}}>
              {this.renderWellContent()}
              <div>
                <hr style={{marginTop: 28, marginBottom: 10}}/>
                <Input
                  type="textarea"
                  label="Readout"
                  disabled={true}
                  value={well.readout}
                  style={{height: 100}}
                  />
              </div>
            </div>
          </Popover>
        </Overlay>
      </div>
    );
  }
}<commit_msg>change wellOverlay to close when clicked outside<commit_after>import React, {Component} from 'react';
import {Button, Popover, Overlay, Table, Input} from 'react-bootstrap';
import SVG from 'react-inlinesvg';


export default class WellOverlay extends Component {
  renderWellContent() {
    const {well, removeSampleFromWell} = this.props;
    const {sample} = well;
    let name, svg, moleculeName, removeButton = '';
    const namesStyle= {textAlign: 'center', marginTop: 5};
    const svgContainerStyle = {
      borderRadius: '50%',
      height: 200,
      width: 200,
      border: '6px solid lightgray',
      textAlign: 'center',
      verticalAlign: 'middle',
      lineHeight: 2
    };
    if (sample) {
      svg = <SVG key={sample.id} className="molecule-mid" src={`/images/molecules/${sample.molecule.molecule_svg_file}`}/>;
      name = sample.name;
      moleculeName = sample.molecule.iupac_name;
      removeButton = (
        <div className="pull-right">
          <Button bsSize="xsmall" bsStyle="danger" onClick={() => removeSampleFromWell(well)}>
            <span className="fa fa-trash-o"></span>
          </Button>
        </div>
      );
    }
    return (
      <div>
        <div style={svgContainerStyle}>
          {svg}
        </div>
        <div style={namesStyle}>
          {name}<br/>
          {moleculeName}
        </div>
        {removeButton}
      </div>
    );
  }

  render() {
    const {show, well, target, handleClose, placement} = this.props;
    let title = (
      <div>
        Well Details
        <span className='pull-right' style={{marginRight: -8, marginTop: -3}}>
          <Button bsSize='xsmall' onClick={() => handleClose()}>
            <i className="fa fa-times"></i>
          </Button>
        </span>
      </div>
    );
    return (
      <div>
        <Overlay
          rootClose
          show={show}
          target={target}
          placement={placement}
          onHide={() => handleClose()}
          >
          <Popover title={title}>
            <div style={{width: 200, height: 420}}>
              {this.renderWellContent()}
              <div>
                <hr style={{marginTop: 28, marginBottom: 10}}/>
                <Input
                  type="textarea"
                  label="Readout"
                  disabled={true}
                  value={well.readout}
                  style={{height: 100}}
                  />
              </div>
            </div>
          </Popover>
        </Overlay>
      </div>
    );
  }
}
{'fraction_non_alphanumeric': 0.14357329055544416, 'fraction_numerical': 0.010427110487266893, 'mean_word_length': 1.8053993250843645, 'pattern_counts': {'":': 0, '<': 71, '<?xml version=': 0, '>': 77, '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': '4222306', 'n_tokens_mistral': 1514, 'n_tokens_neox': 1445, 'n_words': 327}