Files
shiny/inst/www/reactive-graph.html
Barret Schloerke 9d5fa773f3 add classes and colors for different states of a graph
* reactive key value change until invalidate end has finished
* latest enter is darker green than others
* mousedown added to timeline click
* mousedown and mouse movement added to timeline
2018-05-01 10:08:37 -04:00

61 lines
1.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="rlog/rlog.css">
<style>
#cyto {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 999;
}
</style>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> -->
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.slim.min.js"></script>
<script src="https://unpkg.com/lodash@4.17.10/lodash.js"></script>
<script src="https://unpkg.com/heap@0.2.6/lib/heap.js"></script>
<script>
window.lodash = _;
window["lodash.debounce"] = _.debounce;
window.heap = Heap;
</script>
<script src="https://unpkg.com/cytoscape@3.2.11/dist/cytoscape.cjs.js"></script>
<script src="https://unpkg.com/dagre@0.8.2/dist/dagre.js"></script>
<script src="https://unpkg.com/cytoscape-dagre@2.2.1/cytoscape-dagre.js"></script>
<script src="rlog/default_log.js"></script>
<script src="rlog/react_graph.js"></script>
<!-- <script src="rlog/rlog.js"></script> -->
</head>
<body>
<div id="instructions">
Press right-arrow to advance
</div>
<div id="ended" style="display: none;">
<strong>You&rsquo;ve reached the end</strong><br/>Press the Home key 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>
<div id="timeline" style="z-index:1;">
<div id="timeline-bg">
<div id="timeline-fill"></div>
</div>
</div>
<div id="cyto" style="z-index:0;">
</div>
</body>
</html>