<commit_before>'use strict';

import React from 'react';
import PropTypes from 'prop-types';
import _ from 'underscore';
import * as d3 from 'd3';
import * as store from './../../../store';
import * as vizUtil from './../utilities';
import { barplot_color_cycler } from './../ColorCycler';
import ChartDetailCursor, { CursorViewBounds } from './../ChartDetailCursor';
import { console, object, isServerSide, expFxn, Filters, layout, navigate, analytics } from './../../util';

// Used for transitioning
var cachedBars = {},
    cachedPastBars = {},
    cachedBarSections = {},
    cachedPastBarSections = {};


/**
 * Outputs a section of a bar.
 * 
 * @class BarSection
 * @type {Component}
 */
class BarSection extends React.Component {

    constructor(props){
        super(props);
        this.isSelected = this.isSelected.bind(this);
        this.isHoveredOver = this.isHoveredOver.bind(this);
    }

    /**
     * Check if component (aka props.node) is selected.
     * Calls CursorViewBounds.isSelected(..) internally.
     * 
     * @returns {boolean} - True if selected.
     */
    isSelected(){
        return CursorViewBounds.isSelected(this.props.node, this.props.selectedTerm, this.props.selectedParentTerm);
    }

    isHoveredOver(){
        return CursorViewBounds.isSelected(this.props.node, this.props.hoverTerm, this.props.hoverParentTerm);
    }

    /**
     * @returns {Element} - A div element representing a bar section.
     */
    render(){
        var d               = this.props.node;
        var color           = d.color || barplot_color_cycler.colorForNode(d);
        var isSelected      = this.isSelected(),
            isHoveredOver   = this.isHoveredOver();

        var className = "bar-part";
        if (d.parent) className += ' multiple-parts';
        if (isSelected) className += ' selected';
        if (isHoveredOver) className += ' hover';
        if (!this.props.canBeHighlighted) className += ' no-highlight';
        else className += ' no-highlight-color';
        
        return (
            <div
                className={className}
                style={{
                    height : this.props.isNew || this.props.isRemoving ? '0%' : (d.attr.height / d.parent.attr.height) * 100 + '%',
                    //width: '100%', //(this.props.isNew && d.pastWidth) || (d.parent || d).attr.width,
                    backgroundColor : color
                }}
                ref={(r)=>{
                    if (this.props.isNew || this.props.transitioning) setTimeout(function(){
                        vizUtil.requestAnimationFrame(function(){
                            if (r && r.style && (r.style.height < d.attr.height)) r.style.height = d.attr.height + 'px';
                        });
                    }, 0);
                }}
                data-key={this.props['data-key'] || null}
                data-term={d.parent ? d.term : null}
                data-color={color}
                data-target-height={d.attr.height}
                key={'bar-part-' + (d.parent ? d.parent.term + '~' + d.term : d.term)}<commit_msg>Quickfix<commit_after>'use strict';

import React from 'react';
import PropTypes from 'prop-types';
import _ from 'underscore';
import * as d3 from 'd3';
import * as store from './../../../store';
import * as vizUtil from './../utilities';
import { barplot_color_cycler } from './../ColorCycler';
import ChartDetailCursor, { CursorViewBounds } from './../ChartDetailCursor';
import { console, object, isServerSide, expFxn, Filters, layout, navigate, analytics } from './../../util';

// Used for transitioning
var cachedBars = {},
    cachedPastBars = {},
    cachedBarSections = {},
    cachedPastBarSections = {};


/**
 * Outputs a section of a bar.
 * 
 * @class BarSection
 * @type {Component}
 */
class BarSection extends React.Component {

    constructor(props){
        super(props);
        this.isSelected = this.isSelected.bind(this);
        this.isHoveredOver = this.isHoveredOver.bind(this);
    }

    /**
     * Check if component (aka props.node) is selected.
     * Calls CursorViewBounds.isSelected(..) internally.
     * 
     * @returns {boolean} - True if selected.
     */
    isSelected(){
        return CursorViewBounds.isSelected(this.props.node, this.props.selectedTerm, this.props.selectedParentTerm);
    }

    isHoveredOver(){
        return CursorViewBounds.isSelected(this.props.node, this.props.hoverTerm, this.props.hoverParentTerm);
    }

    /**
     * @returns {Element} - A div element representing a bar section.
     */
    render(){
        var d               = this.props.node;
        var color           = d.color || barplot_color_cycler.colorForNode(d);
        var isSelected      = this.isSelected(),
            isHoveredOver   = this.isHoveredOver();

        var className = "bar-part";
        if (d.parent) className += ' multiple-parts';
        if (isSelected) className += ' selected';
        if (isHoveredOver) className += ' hover';
        if (!this.props.canBeHighlighted) className += ' no-highlight';
        else className += ' no-highlight-color';
        
        return (
            <div
                className={className}
                style={{
                    height : d.parent ? (d.attr.height / d.parent.attr.height) * 100 + '%' : '100%',
                    //width: '100%', //(this.props.isNew && d.pastWidth) || (d.parent || d).attr.width,
                    backgroundColor : color,
                    opacity : this.props.isNew ? 0 : 1
                }}
                data-key={this.props['data-key'] || null}
                data-term={d.parent ? d.term : null}
                data-color={color}
                data-target-height={d.attr.height}
                key={'bar-part-' + (d.parent ? d.parent.term + '~' + d.term : d.term)}
{'fraction_non_alphanumeric': 0.1451391274476125, 'fraction_numerical': 0.00395053246307111, 'mean_word_length': 2.034392912975508, 'pattern_counts': {'":': 0, '<': 6, '<?xml version=': 0, '>': 4, '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': '1690720', 'n_tokens_mistral': 1733, 'n_tokens_neox': 1644, 'n_words': 369}