<commit_before>import React from 'react'
import PropTypes from 'prop-types'
import cx from 'classnames'

import styles from './Ribbon.css'

class Ribbon extends React.Component {
    static propTypes = {
        destroy: PropTypes.func.isRequired,
        sidebarURL: PropTypes.string.isRequired,
    }

    state = {
        isSidebarActive: false,
    }

    toggleSidebar = () => {
        const isSidebarActive = !this.state.isSidebarActive
        this.setState({
            isSidebarActive,
        })
    }

    render() {
        const { isSidebarActive } = this.state
        const { destroy, sidebarURL } = this.props
        return (
            <div>
                <div
                    className={cx(styles.ribbon, {
                        [styles.ribbonSidebarActive]: isSidebarActive,
                    })}
                >
                    <div className={styles.logo} onClick={this.toggleSidebar} />
                    <span className={styles.cancel} onClick={destroy} />
                    <span className={styles.settings} />
                </div>
                <iframe
                    src={sidebarURL}
                    height={window.innerHeight}
                    id="memex_annotations_sidebar"
                    width={340}
                    className={cx(styles.sidebarFrame, {
                        [styles.sidebarActive]: isSidebarActive,
                    })}
                />
            </div>
        )
    }
}

Ribbon.propTypes = {
    destroy: PropTypes.func.isRequired,
    sidebarURL: PropTypes.string.isRequired,
}

export default Ribbon
<commit_msg>Close Sidebar Overlay when clicked anywhere on the website.<commit_after>import React from 'react'
import PropTypes from 'prop-types'
import cx from 'classnames'
import onClickOutside from 'react-onclickoutside'

import styles from './Ribbon.css'

class Ribbon extends React.Component {
    static propTypes = {
        destroy: PropTypes.func.isRequired,
        sidebarURL: PropTypes.string.isRequired,
    }

    state = {
        isSidebarActive: false,
    }

    toggleSidebar = () => {
        const isSidebarActive = !this.state.isSidebarActive
        this.setState({
            isSidebarActive,
        })
    }

    handleClickOutside = () => {
        this.setState({
            isSidebarActive: false,
        })
    }

    render() {
        const { isSidebarActive } = this.state
        const { destroy, sidebarURL } = this.props
        return (
            <div>
                <div
                    className={cx(styles.ribbon, {
                        [styles.ribbonSidebarActive]: isSidebarActive,
                    })}
                >
                    <div className={styles.logo} onClick={this.toggleSidebar} />
                    <span className={styles.cancel} onClick={destroy} />
                    <span className={styles.settings} />
                </div>
                <iframe
                    src={sidebarURL}
                    height={window.innerHeight}
                    id="memex_annotations_sidebar"
                    width={340}
                    className={cx(styles.sidebarFrame, {
                        [styles.sidebarActive]: isSidebarActive,
                    })}
                />
            </div>
        )
    }
}

export default onClickOutside(Ribbon)

{'fraction_non_alphanumeric': 0.09773539928486293, 'fraction_numerical': 0.0017878426698450535, 'mean_word_length': 1.477490774907749, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 22, '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': '3387132', 'n_tokens_mistral': 886, 'n_tokens_neox': 831, 'n_words': 161}