Files
shiny/inst/www/reactive-graph.html
Barret Schloerke eb9f251e34 add nav buttons
2018-05-02 10:58:15 -04:00

95 lines
2.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="moveButtons" style="z-index:1;">
<table>
<tr>
<td style="text-align:right;">
<button id="startStepButton" title="Go to beginning of log
shortcut: 'home' key">Log Start</button>
</td>
<td>
<button id="endStepButton" title="Go to end of log
shotcut: 'end' key">Log End</button>
</td>
</tr>
<tr>
<td style="text-align:right;">
<button id="prevCycleButton" title="Go to previous computation cycle
shortcut: alt + left arrow">Previous Cycle</button>
</td>
<td>
<button id="nextCycleButton" title="Go to next computation cycle
shortcut: alt + right arrow">Next Cycle</button>
</td>
</tr>
<tr>
<td style="text-align:right;">
<button id="prevStepButton" title="Go to the previous step
shortcut: left arrow">Previous Step</button>
</td>
<td>
<button id="nextStepButton" title="Go to the next step
shortcut: right arrow">Next Step</button>
</td>
</tr>
</table>
<div id="instructions">
Press right-arrow to advance
</div>
</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>