Skip to content

Instantly share code, notes, and snippets.

@Kineolyan

Kineolyan/index.html

Created June 22, 2017 20:56
Show Gist options
  • Save Kineolyan/3d572c173753c0622d5d41e1a011e493 to your computer and use it in GitHub Desktop.
Save Kineolyan/3d572c173753c0622d5d41e1a011e493 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/kohohuc
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<body>
<div id="root"></div>
<script id="jsbin-javascript">
const el = React.createElement;
const elp = (type, ...content) => el(type, null, ...content);
const roots = [
{
id: 'sync1',
name: 'Sync 1',
start: -1,
stop: 10,
children: [
{
id: 'cc11',
name: 'CC 11',
start: 20,
stop: 30,
children: []
}, {
id: 'cc12',
name: 'CC 12',
start: 25,
stop: 50,
children: [
{
id: 'cc121',
name: 'CC 121',
start: 30,
stop: 121,
children: []
}, {
id: 'cc122',
name: 'CC 122',
start: 40,
stop: 76,
children: []
}
]
}
]
},
{
id: 'sync2',
name: 'Sync 2',
start: 135,
stop: 209,
children: [
{
id: 'cc21',
name: 'CC 21',
start: 145,
stop: 456,
children: []
}, {
id: 'cc22',
name: 'CC 22',
start: 153,
stop: 178,
children: []
}
]
}
];
const nodes = {};
function processNodes(v) {
v.forEach(n => {
nodes[n.id] = n;
n.duration = n.start > 0 ? n.stop - n.start : 0;
processNodes(n.children);
});
}
processNodes(roots);
function exploreNodes(node, action) {
const nodes = [node];
let it;
while ((it = nodes.shift()) !== undefined) {
if (action(it) === false) {
return;
}
nodes.push(...it.children);
}
}
class Analysis extends React.Component {
renderNode(node) {
let start = Number.MAX_VALUE;
let stop = 0;
exploreNodes(node, n => {
if (n.start > 0 && n.start < start) {
start = n.start;
}
if (n.stop > stop) {
stop = n.stop;
}
});
return elp(
'div',
elp('b', node.name),
` (${node.id})`,
el('br'),
`${node.duration} ms [ ${node.start} -> ${node.stop} ]`,
el('br'),
node.children.length > 0
? `Operation ${stop - start} ms [ ${start} -> ${stop} ]`
: null);
}
renderNodes(nodes) {
if (nodes.length > 0) {
const items = nodes.map(node => el(
'li',
{key: node.id},
this.renderNode(node),
this.renderNodes(node.children)));
return elp('ul', items);
}
}
renderData() {
return elp(
'div',
'Data',
this.props.roots ? this.renderNodes(this.props.roots) : null);
}
render() {
return elp(
'div',
'Hello world',
this.renderData());
}
}
ReactDOM.render(
el(Analysis, {nodes, roots}),
document.getElementById('root'));
</script>
<script id="jsbin-source-javascript" type="text/javascript">const el = React.createElement;
const elp = (type, ...content) => el(type, null, ...content);
const roots = [
{
id: 'sync1',
name: 'Sync 1',
start: -1,
stop: 10,
children: [
{
id: 'cc11',
name: 'CC 11',
start: 20,
stop: 30,
children: []
}, {
id: 'cc12',
name: 'CC 12',
start: 25,
stop: 50,
children: [
{
id: 'cc121',
name: 'CC 121',
start: 30,
stop: 121,
children: []
}, {
id: 'cc122',
name: 'CC 122',
start: 40,
stop: 76,
children: []
}
]
}
]
},
{
id: 'sync2',
name: 'Sync 2',
start: 135,
stop: 209,
children: [
{
id: 'cc21',
name: 'CC 21',
start: 145,
stop: 456,
children: []
}, {
id: 'cc22',
name: 'CC 22',
start: 153,
stop: 178,
children: []
}
]
}
];
const nodes = {};
function processNodes(v) {
v.forEach(n => {
nodes[n.id] = n;
n.duration = n.start > 0 ? n.stop - n.start : 0;
processNodes(n.children);
});
}
processNodes(roots);
function exploreNodes(node, action) {
const nodes = [node];
let it;
while ((it = nodes.shift()) !== undefined) {
if (action(it) === false) {
return;
}
nodes.push(...it.children);
}
}
class Analysis extends React.Component {
renderNode(node) {
let start = Number.MAX_VALUE;
let stop = 0;
exploreNodes(node, n => {
if (n.start > 0 && n.start < start) {
start = n.start;
}
if (n.stop > stop) {
stop = n.stop;
}
});
return elp(
'div',
elp('b', node.name),
` (${node.id})`,
el('br'),
`${node.duration} ms [ ${node.start} -> ${node.stop} ]`,
el('br'),
node.children.length > 0
? `Operation ${stop - start} ms [ ${start} -> ${stop} ]`
: null);
}
renderNodes(nodes) {
if (nodes.length > 0) {
const items = nodes.map(node => el(
'li',
{key: node.id},
this.renderNode(node),
this.renderNodes(node.children)));
return elp('ul', items);
}
}
renderData() {
return elp(
'div',
'Data',
this.props.roots ? this.renderNodes(this.props.roots) : null);
}
render() {
return elp(
'div',
'Hello world',
this.renderData());
}
}
ReactDOM.render(
el(Analysis, {nodes, roots}),
document.getElementById('root'));</script></body>
</html>
Raw
jsbin.kohohuc.js
const el = React.createElement;
const elp = (type, ...content) => el(type, null, ...content);
const roots = [
{
id: 'sync1',
name: 'Sync 1',
start: -1,
stop: 10,
children: [
{
id: 'cc11',
name: 'CC 11',
start: 20,
stop: 30,
children: []
}, {
id: 'cc12',
name: 'CC 12',
start: 25,
stop: 50,
children: [
{
id: 'cc121',
name: 'CC 121',
start: 30,
stop: 121,
children: []
}, {
id: 'cc122',
name: 'CC 122',
start: 40,
stop: 76,
children: []
}
]
}
]
},
{
id: 'sync2',
name: 'Sync 2',
start: 135,
stop: 209,
children: [
{
id: 'cc21',
name: 'CC 21',
start: 145,
stop: 456,
children: []
}, {
id: 'cc22',
name: 'CC 22',
start: 153,
stop: 178,
children: []
}
]
}
];
const nodes = {};
function processNodes(v) {
v.forEach(n => {
nodes[n.id] = n;
n.duration = n.start > 0 ? n.stop - n.start : 0;
processNodes(n.children);
});
}
processNodes(roots);
function exploreNodes(node, action) {
const nodes = [node];
let it;
while ((it = nodes.shift()) !== undefined) {
if (action(it) === false) {
return;
}
nodes.push(...it.children);
}
}
class Analysis extends React.Component {
renderNode(node) {
let start = Number.MAX_VALUE;
let stop = 0;
exploreNodes(node, n => {
if (n.start > 0 && n.start < start) {
start = n.start;
}
if (n.stop > stop) {
stop = n.stop;
}
});
return elp(
'div',
elp('b', node.name),
` (${node.id})`,
el('br'),
`${node.duration} ms [ ${node.start} -> ${node.stop} ]`,
el('br'),
node.children.length > 0
? `Operation ${stop - start} ms [ ${start} -> ${stop} ]`
: null);
}
renderNodes(nodes) {
if (nodes.length > 0) {
const items = nodes.map(node => el(
'li',
{key: node.id},
this.renderNode(node),
this.renderNodes(node.children)));
return elp('ul', items);
}
}
renderData() {
return elp(
'div',
'Data',
this.props.roots ? this.renderNodes(this.props.roots) : null);
}
render() {
return elp(
'div',
'Hello world',
this.renderData());
}
}
ReactDOM.render(
el(Analysis, {nodes, roots}),
document.getElementById('root'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment