mirror of
https://github.com/rstudio/shiny.git
synced 2026-01-13 00:48:09 -05:00
Compare commits
1 Commits
updateSele
...
reactlog
| Author | SHA1 | Date | |
|---|---|---|---|
|
53c05128b3 |
@@ -2,27 +2,50 @@
|
|||||||
<html>
|
<html>
|
||||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
|
||||||
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
|
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
|
||||||
|
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,600' rel='stylesheet' type='text/css'>
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
body {
|
html, body {
|
||||||
|
font-family: 'Source Sans Pro', sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
-moz-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-o-user-select: none;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
#instructions, #ended {
|
||||||
|
position: relative;
|
||||||
|
font-weight: 200;
|
||||||
|
color: #444;
|
||||||
|
top: 20px;
|
||||||
|
font-size: 30px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#ended strong {
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
svg {
|
svg {
|
||||||
border: 1px solid silver;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
width: 100%;
|
||||||
bottom: 0;
|
height: 100%;
|
||||||
z-index: -1;
|
|
||||||
}
|
}
|
||||||
.node {
|
.node {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.node text {
|
.node text {
|
||||||
font-family: 'Source Code Pro', monospace;
|
font-family: 'Source Code Pro', monospace;
|
||||||
|
font-weight: normal;
|
||||||
text-anchor: start;
|
text-anchor: start;
|
||||||
fill: #999;
|
fill: #999;
|
||||||
transform: scale(0.3);
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: fill 0.75s ease;
|
transition: fill 0.75s ease;
|
||||||
}
|
}
|
||||||
@@ -36,7 +59,6 @@ svg {
|
|||||||
white-space: pre;
|
white-space: pre;
|
||||||
}
|
}
|
||||||
.node path {
|
.node path {
|
||||||
z-index: 1;
|
|
||||||
fill: white;
|
fill: white;
|
||||||
stroke: #777;
|
stroke: #777;
|
||||||
stroke-width: 7.5px;
|
stroke-width: 7.5px;
|
||||||
@@ -55,6 +77,27 @@ svg {
|
|||||||
.node.running path {
|
.node.running path {
|
||||||
fill: #61B97E;
|
fill: #61B97E;
|
||||||
}
|
}
|
||||||
|
#legend {
|
||||||
|
font-size: 22px;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 10px;
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
.color {
|
||||||
|
display: inline-block;
|
||||||
|
border: 1px solid #777;
|
||||||
|
height: 14px;
|
||||||
|
width: 14px;
|
||||||
|
}
|
||||||
|
.color.normal {
|
||||||
|
background-color: #white;
|
||||||
|
}
|
||||||
|
.color.invalidated {
|
||||||
|
background-color: #E0E0E0;
|
||||||
|
}
|
||||||
|
.color.running {
|
||||||
|
background-color: #61B97E;
|
||||||
|
}
|
||||||
#triangle {
|
#triangle {
|
||||||
fill: #CCC;
|
fill: #CCC;
|
||||||
}
|
}
|
||||||
@@ -62,7 +105,6 @@ svg {
|
|||||||
fill: none;
|
fill: none;
|
||||||
stroke: #CCC;
|
stroke: #CCC;
|
||||||
stroke-width: 0.5px;
|
stroke-width: 0.5px;
|
||||||
z-index: 0;
|
|
||||||
}
|
}
|
||||||
#description {
|
#description {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@@ -70,6 +112,7 @@ svg {
|
|||||||
left: 630px;
|
left: 630px;
|
||||||
top: 36px;
|
top: 36px;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
@@ -267,11 +310,13 @@ function update() {
|
|||||||
var newG = node.enter().append('g')
|
var newG = node.enter().append('g')
|
||||||
.attr('class', function(n) {return 'node ' + n.type;})
|
.attr('class', function(n) {return 'node ' + n.type;})
|
||||||
.attr('r', 5)
|
.attr('r', 5)
|
||||||
|
// don't show until next tick
|
||||||
|
.style('display', 'none')
|
||||||
.on('mousedown', function() {
|
.on('mousedown', function() {
|
||||||
d3.event.stopPropagation();
|
d3.event.stopPropagation();
|
||||||
})
|
})
|
||||||
.on('mouseover', function(n) {
|
.on('mouseover', function(n) {
|
||||||
$('#description').text(n.title);
|
$('#description').text(n.label);
|
||||||
})
|
})
|
||||||
.on('mouseout', function(d, i) {
|
.on('mouseout', function(d, i) {
|
||||||
$('#description').html('');
|
$('#description').html('');
|
||||||
@@ -304,7 +349,13 @@ function update() {
|
|||||||
else
|
else
|
||||||
return null;
|
return null;
|
||||||
});
|
});
|
||||||
var tspan = node.selectAll('text').selectAll('tspan')
|
var tspan = node.selectAll('text').filter(function(n) {
|
||||||
|
// This filter is used to disregard all nodes whose labels have
|
||||||
|
// not changed since the last time we updated them.
|
||||||
|
var changed = n.label !== this.label;
|
||||||
|
this.label = n.label;
|
||||||
|
return changed;
|
||||||
|
}).selectAll('tspan')
|
||||||
.data(function(n) {
|
.data(function(n) {
|
||||||
var lines = n.label.split('\n');
|
var lines = n.label.split('\n');
|
||||||
if (lines.length > MAX_LINES) {
|
if (lines.length > MAX_LINES) {
|
||||||
@@ -339,6 +390,7 @@ function update() {
|
|||||||
|
|
||||||
function onTick() {
|
function onTick() {
|
||||||
node
|
node
|
||||||
|
.style('display', null)
|
||||||
.attr('transform', function(n) {
|
.attr('transform', function(n) {
|
||||||
return 'translate(' + n.x + ' ' + n.y + ')';
|
return 'translate(' + n.x + ' ' + n.y + ')';
|
||||||
});
|
});
|
||||||
@@ -451,8 +503,8 @@ function doNext() {
|
|||||||
while (log.length)
|
while (log.length)
|
||||||
if (!processMessage(log.shift()))
|
if (!processMessage(log.shift()))
|
||||||
break;
|
break;
|
||||||
if (log.length === 0)
|
if (!log.length)
|
||||||
document.getElementById('processNext').setAttribute('disabled', 'disabled');
|
$('#ended').fadeIn(1500);
|
||||||
}
|
}
|
||||||
|
|
||||||
function zoom() {
|
function zoom() {
|
||||||
@@ -466,13 +518,19 @@ $(function() {
|
|||||||
$(document.body).on('keydown', function(e) {
|
$(document.body).on('keydown', function(e) {
|
||||||
if (e.which === 39 || e.which === 32)
|
if (e.which === 39 || e.which === 32)
|
||||||
doNext();
|
doNext();
|
||||||
|
if (e.which === 35) {
|
||||||
|
while (log.length) {
|
||||||
|
doNext();
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
doNext();
|
doNext();
|
||||||
|
executeBeforeNextCommand.push(function() {
|
||||||
|
$('#instructions').fadeOut(1000);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<body>
|
<body>
|
||||||
<button id="processNext" onclick="doNext();">Next</button>
|
|
||||||
<br/>
|
|
||||||
<svg>
|
<svg>
|
||||||
<defs>
|
<defs>
|
||||||
<marker id="triangle"
|
<marker id="triangle"
|
||||||
@@ -495,6 +553,18 @@ $(function() {
|
|||||||
<g id="nodes"></g>
|
<g id="nodes"></g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
<div id="instructions">
|
||||||
|
Press right-arrow to advance
|
||||||
|
</div>
|
||||||
|
<div id="ended" style="display: none;">
|
||||||
|
<strong>You’ve reached the end</strong><br/>Reload the page to start over
|
||||||
|
</div>
|
||||||
|
<div id="legend">
|
||||||
|
<div class="color normal"></div> Normal<br/>
|
||||||
|
<div class="color invalidated"></div> Invalidated<br/>
|
||||||
|
<div class="color running"></div> Running<br/>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
<pre id="description"><br/></pre>
|
<pre id="description"><br/></pre>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user