<commit_before>import React from 'react';
import Lifespan from 'lifespan';
import Classnames from 'classnames';
import PureRenderMixin from 'react-addons-pure-render-mixin';

import LocalClient from '~/stores/local-client.stores.jsx';
import Log from '~/services/log.services.js';

import ArianneThread from './arianne-thread.components.jsx';
import IndividualizeButton from './individualize-button.components.jsx';

export default class Toolbar extends React.Component {
	constructor(props) {
		super(props);
		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
	}

	render() {

		return (
			<div className="toolbar">
				<div className="toolbar-left">
					<ArianneThread />
				</div>
				<div className="toolbar-right">
					<IndividualizeButton/>
					<ViewButtons />
				</div>
			</div>
		);
	}
}

class ViewButtons extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			mode: [],
		};
		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
	}

	componentWillMount() {
		this.client = LocalClient.instance();
		this.lifespan = new Lifespan();

		this.client.getStore('/prototypoStore', this.lifespan)
			.onUpdate(({head}) => {
				this.setState({
					mode: head.toJS().uiMode,
				});
			})
			.onDelete(() => {
				this.setState(undefined);
			});
	}

	componentWillUnmount() {
		this.lifespan.release();
	}

	toggleView(name) {
		const newViewMode = _.xor(this.state.mode, [name]);

		if (newViewMode.length > 0) {
			this.client.dispatchAction('/store-value', {uiMode: newViewMode});
			Log.ui('Topbar.toggleView', name);
		}
	}

	render() {
		return (
			<div className="view-buttons">
				<div className="view-buttons-label">Views</div>
				<ViewButton name="glyph" state={this.state.mode.indexOf('glyph') !== -1} click={this.toggleView.bind(this)}/>
				<ViewButton name="word" state={this.state.mode.indexOf('word') !== -1} click={this.toggleView.bind(this)}/>
				<ViewButton name="text" state={this.state.mode.indexOf('text') !== -1} click={this.toggleView.bind(this)}/>
			</div>
		);
	}
}

class ViewButton extends React.Component {
	constructor(props) {
		super(props);
		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
	}

	render() {
		const img = `assets/images/${this.props.name + (this.props.state ? '-hover-active' : '-base')}.svg`;
		const classes = Classnames({
			'view-button': true,
			'is-active': this.props.state,
		});

		return (
			<div className={classes} onClick={() => {this.props.click(this.props.name);}}>
				<img className="view-button-img" src={img}/>
			</div>
		);
	}
}
<commit_msg>added toolbar viewbuttons individual classnames<commit_after>import React from 'react';
import Lifespan from 'lifespan';
import Classnames from 'classnames';
import PureRenderMixin from 'react-addons-pure-render-mixin';

import LocalClient from '~/stores/local-client.stores.jsx';
import Log from '~/services/log.services.js';

import ArianneThread from './arianne-thread.components.jsx';
import IndividualizeButton from './individualize-button.components.jsx';

export default class Toolbar extends React.Component {
	constructor(props) {
		super(props);
		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);

		//fonction binding to avoid unnecessary re-render
		this.toggleView = this.toggleView.bind(this);
	}

	render() {

		return (
			<div className="toolbar">
				<div className="toolbar-left">
					<ArianneThread />
				</div>
				<div className="toolbar-right">
					<IndividualizeButton/>
					<ViewButtons />
				</div>
			</div>
		);
	}
}

class ViewButtons extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			mode: [],
		};
		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
	}

	componentWillMount() {
		this.client = LocalClient.instance();
		this.lifespan = new Lifespan();

		this.client.getStore('/prototypoStore', this.lifespan)
			.onUpdate(({head}) => {
				this.setState({
					mode: head.toJS().uiMode,
				});
			})
			.onDelete(() => {
				this.setState(undefined);
			});
	}

	componentWillUnmount() {
		this.lifespan.release();
	}

	toggleView(name) {
		const newViewMode = _.xor(this.state.mode, [name]);

		if (newViewMode.length > 0) {
			this.client.dispatchAction('/store-value', {uiMode: newViewMode});
			Log.ui('Topbar.toggleView', name);
		}
	}

	render() {
		return (
			<div className="view-buttons">
				<div className="view-buttons-label">Views</div>
				<ViewButton name="glyph" state={this.state.mode.indexOf('glyph') !== -1} click={this.toggleView}/>
				<ViewButton name="word" state={this.state.mode.indexOf('word') !== -1} click={this.toggleView}/>
				<ViewButton name="text" state={this.state.mode.indexOf('text') !== -1} click={this.toggleView}/>
			</div>
		);
	}
}

class ViewButton extends React.Component {
	constructor(props) {
		super(props);
		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
	}

	render() {
		const img = `assets/images/${this.props.name + (this.props.state ? '-hover-active' : '-base')}.svg`;
		const classes = Classnames({
			'view-button': true,
			'is-active': this.props.state,
		});

		return (
			<div className={classes + ` view-button-${this.props.name}`} onClick={() => {this.props.click(this.props.name);}}>
				<img className="view-button-img" src={img}/>
			</div>
		);
	}
}

{'fraction_non_alphanumeric': 0.17078113485630067, 'fraction_numerical': 0.0014738393515106854, 'mean_word_length': 4.069094304388422, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 49, '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': '4622387', 'n_tokens_mistral': 2044, 'n_tokens_neox': 1786, 'n_words': 309}