<commit_before>var React = require('react');

var step = React.createClass({
	render: function() {

		var data = this.props.data;

		var colWidth = Math.floor(100 / this.props.cols);
		var start = this.props.columnMap[this.props.prevCol];
		var end = this.props.columnMap[data.end];
		var dir = start < end ? 'R' : ((start > end) ? 'L' : 'D');
		var x1 = (start + 1) * colWidth - (colWidth / 2);
		var x2 = (end + 1) * colWidth - (colWidth / 2);

		var y1 = this.props.prevDuration + 170;
		var y2 = y1 + (data.duration * this.props.msPixels);

		var className = 'lineArrow' + dir;
		var style = {
			display: this.props.isVisible ? 'inline' : 'none'
		};

		var label = null;
		if (data.label) {
			var labelX = (x2 - x1) / 2 + x1;
			label = <text x={labelX + '%'} y={y1 - 14} textAnchor="middle">
				{data.label}
			</text>;
		}

		var duration = null;
		if (data.duration) {
			var durationX = (x2 - x1) / 2 + x1;
			duration = <text x={durationX + '%'} y={y1 + 19} textAnchor="middle">
				{data.duration + ' ms'}
			</text>;
		}

		return <g style={style} className="step">
				{label}
				<line ref="line" className={className} x1={x1 + '%'} y1={y1} x2={x2 + '%'} y2={y2} />
				{duration}
			</g>;

	}
});

module.exports = step;<commit_msg>slightly better text positioning based on direction, using <path>s would still be better (maybe)<commit_after>var React = require('react');

var step = React.createClass({
	render: function() {

		var data = this.props.data;

		var colWidth = Math.floor(100 / this.props.cols);
		var start = this.props.columnMap[this.props.prevCol];
		var end = this.props.columnMap[data.end];
		var dir = start < end ? 'R' : ((start > end) ? 'L' : 'D');
		var x1 = (start + 1) * colWidth - (colWidth / 2);
		var x2 = (end + 1) * colWidth - (colWidth / 2);

		var y1 = this.props.prevDuration + 170;
		var y2 = y1 + (data.duration * this.props.msPixels);

		var className = 'lineArrow' + dir;
		var style = {
			display: this.props.isVisible ? 'inline' : 'none'
		};

		var label = null;
		var duration = null;
		if (data.label) {
			var labelX = (x2 - x1) / 2 + x1;
			var labelY = (y2 - y1) / 2 + y1;
			var labelTextAnchor = 'middle';
			if (dir === 'R') {
				labelY = labelY - 14;
			} else if (dir === 'L') {
				labelY = labelY - 14;
			} else {
				labelX = labelX + 2;
				labelTextAnchor = 'start';
			}
			if (data.duration) {
				labelY = labelY - 20;
				duration = <text x={labelX + '%'} y={labelY + 25} textAnchor={labelTextAnchor}>{ data.duration + ' ms'}</text>;
			}
			label = <text x={labelX + '%'} y={labelY} textAnchor={labelTextAnchor}>
				{data.label}
			</text>;
		}

		return <g style={style} className="step">
				{label}{duration}
				<line ref="line" className={className} x1={x1 + '%'} y1={y1} x2={x2 + '%'} y2={y2} />
			</g>;

	}
});

module.exports = step;
{'fraction_non_alphanumeric': 0.18909348441926346, 'fraction_numerical': 0.02726628895184136, 'mean_word_length': 2.929068150208623, 'pattern_counts': {'":': 0, '<': 20, '<?xml version=': 0, '>': 20, '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': '4245915', 'n_tokens_mistral': 1227, 'n_tokens_neox': 1054, 'n_words': 270}