<commit_before>/*globals require: false, module: false */

'use strict';

var React = require('react');
//var Rx = require('rx');
var Col = require('react-bootstrap/lib/Col');
var Row = require('react-bootstrap/lib/Row');
var Button = require('react-bootstrap/lib/Button');
var ColumnEdit = require('./columnEdit');
var Sortable = require('./Sortable');
require('react-resizable/css/styles.css');
var _ = require('./underscore_ext');
var L = require('./lenses/lens');
var widgets = require('./columnWidgets');
require('./Columns.css');
require('./YAxisLabel.css');

var YAxisLabel = React.createClass({
    render: function () {
		var height = _.getIn(this.props, ['zoom', 'height']),
			index = _.getIn(this.props, ['zoom', 'index']) || 0,
			count = _.getIn(this.props, ['zoom', 'count']) || 0,
			length = _.getIn(this.props, ['samples', 'length']) || 0,
			fraction = count === length ? '' :
				`, showing ${ index } - ${ index + count - 1 }`,
			 text = `Samples (N=${ length }) ${ fraction }`;

        return (
			<div style={{height: height}} className="YAxisWrapper">
				<p style={{width: height}} className="YAxisLabel">{text}</p>
			</div>
		);
    }
});

var Columns = React.createClass({
    setOrder: function (order) {
		L.over(this.props.lens, s => _.assoc(s, 'columnOrder', order));
    },
	render: function () {
		var {data, lens, samples} = this.props;
		var {zoom, columnOrder} = L.view(lens);
		var height = zoom.height;
		var editor = _.getIn(this.state, ['columnEdit']) ?
			<ColumnEdit
				{...this.props}
				onRequestHide={() => this.setState({columnEdit: false})}
			/> : '';

		// XXX Create per-column lens for column menu?
		//     Pass rending in the lens? Yes, we'll need to updated
		//     rendering.
		var columns = _.map(columnOrder, id => widgets.column({
			ref: id,
			key: id,
			id: id,
			data: data[id],
			samples: samples,
			zoom: zoom,
			lens: lens,
			rendering: _.getIn(L.view(lens), ['columnRendering', id])
		}));

        return (
			<div className="Columns">
                <Sortable setOrder={this.setOrder}>
                    {columns}
                </Sortable>
				<div
					style={{height: height}}
					className='addColumn Column'>

					<Button
						onClick={() => this.setState({columnEdit: true})}
						className='Column-add-button'
						title='Add a column'>
						+
					</Button>
				</div>
				<div className='crosshairH crosshair' />
				{editor}<commit_msg>comments & whitespace.<commit_after>/*globals require: false, module: false */

'use strict';

var React = require('react');
var Col = require('react-bootstrap/lib/Col');
var Row = require('react-bootstrap/lib/Row');
var Button = require('react-bootstrap/lib/Button');
var ColumnEdit = require('./columnEdit');
var Sortable = require('./Sortable');
require('react-resizable/css/styles.css');
var _ = require('./underscore_ext');
var L = require('./lenses/lens');
var widgets = require('./columnWidgets');
require('./Columns.css');
require('./YAxisLabel.css');

var YAxisLabel = React.createClass({
    render: function () {
		// XXX would prefer to enforce that these keys are present & destructure
		var height = _.getIn(this.props, ['zoom', 'height']),
			index = _.getIn(this.props, ['zoom', 'index']) || 0,
			count = _.getIn(this.props, ['zoom', 'count']) || 0,
			length = _.getIn(this.props, ['samples', 'length']) || 0,
			fraction = count === length ? '' :
				`, showing ${ index } - ${ index + count - 1 }`,
			 text = `Samples (N=${ length }) ${ fraction }`;

        return (
			<div style={{height: height}} className="YAxisWrapper">
				<p style={{width: height}} className="YAxisLabel">{text}</p>
			</div>
		);
    }
});

var Columns = React.createClass({
    setOrder: function (order) {
		L.over(this.props.lens, s => _.assoc(s, 'columnOrder', order));
    },
	render: function () {
		var {data, lens, samples} = this.props;
		var {zoom, columnOrder} = L.view(lens);
		var height = zoom.height;
		var editor = _.getIn(this.state, ['columnEdit']) ?
			<ColumnEdit
				{...this.props}
				onRequestHide={() => this.setState({columnEdit: false})}
			/> : '';

		// XXX Create per-column lens for column menu?
		//     Pass rending in the lens? Yes, we'll need it to update
		//     rendering.
		var columns = _.map(columnOrder, id => widgets.column({
			ref: id,
			key: id,
			id: id,
			data: data[id],
			samples: samples,
			zoom: zoom,
			lens: lens,
			rendering: _.getIn(L.view(lens), ['columnRendering', id])
		}));

        return (
			<div className="Columns">
				<Sortable setOrder={this.setOrder}>
					{columns}
				</Sortable>
				<div
					style={{height: height}}
					className='addColumn Column'>

					<Button
						onClick={() => this.setState({columnEdit: true})}
						className='Column-add-button'
						title='Add a column'>
						+
					</Button>
				</div>
				<div className='crosshairH crosshair' />
				{editor}
{'fraction_non_alphanumeric': 0.18986306969139588, 'fraction_numerical': 0.0016349887594522788, 'mean_word_length': 3.2008583690987122, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 37, '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': '184766', 'n_tokens_mistral': 1811, 'n_tokens_neox': 1552, 'n_words': 385}