<commit_before>/* eslint-disable no-unused-vars */
import _ from "lodash";
import React from "react";
import {
	Link,
	ReactServerAgent,
	RootContainer,
} from "react-server";

require('./playground.css');

const ROWS = _.range(32);
const BASE = "/navigation/playground";

function GET(row) {
	const ms  = row*16;
	const val = JSON.stringify({row, ms});
	return ReactServerAgent
		.get('/data/delay', {ms, val})
		.then(res => _.assign({}, this, res.body));
}

const RowIndex = ({row}) => <div className="row-index">Row {row}</div>;

const RowMS = ({ms}) => <div className="row-ms">{ms}ms</div>;

const PagePointer = ({page, row}) => <div className="page-pointer">
	{+page === +row ? "➟" : ""}
</div>;

const NormalLink = ({row}) => <a href={`${BASE}?page=${row}`}>Normal Link</a>

const ClientTransitionLink = ({row}) => <Link path={`${BASE}?page=${row}`}>Client Transition</Link>

class ClientRenderIndicator extends React.Component {
	constructor(props){
		super(props);
		this.state = {emoji: "⌛️"};
	}
	componentDidMount() {
		this.setState({emoji: "✓"});
	}
	render() {
		return <div className="render-indicator">
			{this.state.emoji}
		</div>
	}
}

export default class NavigationPlaygroundPage {
	handleRoute(next) {
		const {page} = this.getRequest().getQuery();
		this.data = ROWS.map(GET.bind({page}));

		return next();
	}
	getElements() {
		return this.data.map(promise => <RootContainer when={promise} className="row">
			<PagePointer />
			<RowIndex />
			<RowMS />
			<ClientRenderIndicator />
			<NormalLink />
			<ClientTransitionLink />
		</RootContainer>);
	}
}<commit_msg>Add frameback links to nav playground<commit_after>/* eslint-disable no-unused-vars */
import _ from "lodash";
import React from "react";
import {
	Link,
	ReactServerAgent,
	RootContainer,
} from "react-server";

require('./playground.css');

const ROWS = _.range(32);
const BASE = "/navigation/playground";

function GET(row) {
	const ms  = row*16;
	const val = JSON.stringify({row, ms});
	return ReactServerAgent
		.get('/data/delay', {ms, val})
		.then(res => _.assign({}, this, res.body));
}

const RowIndex = ({row}) => <div className="row-index">Row {row}</div>;

const RowMS = ({ms}) => <div className="row-ms">{ms}ms</div>;

const PagePointer = ({page, row}) => <div className="page-pointer">
	{+page === +row ? "➟" : ""}
</div>;

const NormalLink = ({row}) => <a href={`${BASE}?page=${row}`}>Normal Link</a>

const ClientTransitionLink = ({row}) => <Link path={`${BASE}?page=${row}`}>Client Transition</Link>

const FramebackLink = ({row}) => <Link frameback={true} path={`${BASE}?page=${row}`}>Frameback</Link>

class ClientRenderIndicator extends React.Component {
	constructor(props){
		super(props);
		this.state = {emoji: "⌛️"};
	}
	componentDidMount() {
		this.setState({emoji: "✓"});
	}
	render() {
		return <div className="render-indicator">
			{this.state.emoji}
		</div>
	}
}

export default class NavigationPlaygroundPage {
	handleRoute(next) {
		const {page} = this.getRequest().getQuery();
		this.data = ROWS.map(GET.bind({page}));

		return next();
	}
	getElements() {
		return this.data.map(promise => <RootContainer when={promise} className="row">
			<PagePointer />
			<RowIndex />
			<RowMS />
			<ClientRenderIndicator />
			<NormalLink />
			<ClientTransitionLink />
			<FramebackLink/>
		</RootContainer>);
	}
}
{'fraction_non_alphanumeric': 0.20419790104947527, 'fraction_numerical': 0.0023988005997001498, 'mean_word_length': 4.6256323777403034, 'pattern_counts': {'":': 0, '<': 46, '<?xml version=': 0, '>': 61, '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': '1217602', 'n_tokens_mistral': 1220, 'n_tokens_neox': 1163, 'n_words': 246}