<commit_before>import {connect} from 'store'
import {selectFrom} from 'stateUtils'
import Portal from 'widget/portal'
import PropTypes from 'prop-types'
import React from 'react'
import _ from 'lodash'
import styles from './floatingBox.module.css'

const mapStateToProps = state => ({
    dimensions: selectFrom(state, 'dimensions') || []
})

class FloatingBox extends React.Component {
    subscriptions = []
    box = React.createRef()
    state = {
        dimensions: {}
    }

    render() {
        const {className, placement = 'below', children} = this.props
        const {dimensions: {height, top, bottom, left, right}} = this.state
        const style = {
            '--left': left,
            '--width': right - left,
            '--above-height': top,
            '--above-bottom': height - top,
            '--below-height': height - bottom,
            '--below-top': bottom
        }
        return (
            <Portal>
                <div
                    ref={this.box}
                    className={[styles.box, styles[placement], className].join(' ')}
                    style={style}>
                    {children}
                </div>
            </Portal>
        )
    }
<commit_msg>Adjusted position of FloatingBox (above).<commit_after>import {connect} from 'store'
import {selectFrom} from 'stateUtils'
import Portal from 'widget/portal'
import PropTypes from 'prop-types'
import React from 'react'
import _ from 'lodash'
import styles from './floatingBox.module.css'

const mapStateToProps = state => ({
    dimensions: selectFrom(state, 'dimensions') || []
})

class FloatingBox extends React.Component {
    subscriptions = []
    box = React.createRef()
    state = {
        dimensions: {}
    }

    render() {
        const {className, placement = 'below', children} = this.props
        const {dimensions: {height, top, bottom, left, right}} = this.state
        const style = {
            '--left': left,
            '--width': right - left,
            '--above-height': top,
            '--above-bottom': height - top - 2,
            '--below-height': height - bottom,
            '--below-top': bottom
        }
        return (
            <Portal>
                <div
                    ref={this.box}
                    className={[styles.box, styles[placement], className].join(' ')}
                    style={style}>
                    {children}
                </div>
            </Portal>
        )
    }

{'fraction_non_alphanumeric': 0.1343042071197411, 'fraction_numerical': 0.0004045307443365696, 'mean_word_length': 1.7631284916201118, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 13, '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': '520412', 'n_tokens_mistral': 690, 'n_tokens_neox': 667, 'n_words': 175}