Commit 46347409 authored by Leo P. Singer's avatar Leo P. Singer
Browse files

Add loading spinner to vega visualization

parent 471e681a
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha256-azvvU9xKluwHFJ0Cpgtf0CYzK7zgtOznnzxV4924X1w=" crossorigin="anonymous">
<title>GWCelery task times</title>
<div id="vis"></div>
<div id="vis">
<div class="m-5">
<div class="spinner-border" role="status"></div>
Loading your visualization.
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha256-63ld7aiYP6UxBifJWEzz87ldJyVnETUABZAYs5Qcsmc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/5.7.0/vega.min.js" integrity="sha256-PQIT4+snOH5mk7iwAQGYticYRaX7bB29LquVUQ0dfnY=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/3.4.0/vega-lite.min.js" integrity="sha256-ro+FWr16NboXJ5rSwInNli1P16ObUXnWUJMgKc8KnHI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/5.1.3/vega-embed.min.js" integrity="sha256-UbNbFcw0lpFXNoOZFgV/0jmJyVuSdnXgzzNfePpjNYA=" crossorigin="anonymous"></script>
<script type="text/javascript">
let url = '/flower/api/tasks';
(async() => {
const resp = await fetch('/flower/api/tasks');
const resp = await fetch(url);
if (!resp.ok)
{
let abs_url = new URL(url, document.baseURI);
$('#vis').html(
`
<div class="m-5 alert alert-danger" role=alert>
Failed to load JSON data. Try first visiting
<a href="${url}">${abs_url}</a>
to make sure that you have signed in with ligo.org credentials.
</div>
`
);
return;
}
const json = await resp.json();
const data = Object.values(json);
const spec = {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment