mirror of
https://github.com/ail-project/ail-framework.git
synced 2024-11-10 08:38:28 +00:00
chg: [correlation graph UI] add json error handler + add loading status
This commit is contained in:
parent
218f1af241
commit
9ec610ecc3
1 changed files with 33 additions and 1 deletions
|
@ -116,10 +116,29 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body graph_panel">
|
<div class="card-body graph_panel">
|
||||||
|
<div id="graph_loading" class="ml-3 mt-3">
|
||||||
|
<div class="spinner-border text-secondary" role="status">
|
||||||
|
<span class="sr-only">Loading...</span>
|
||||||
|
</div>
|
||||||
|
<span>Loading...</span>
|
||||||
|
</div>
|
||||||
<div id="graph">
|
<div id="graph">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
|
||||||
|
<div class="toast-header">
|
||||||
|
<strong class="mr-auto">Bootstrap</strong>
|
||||||
|
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="toast-body">
|
||||||
|
Hello, world! This is a toast message.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-xl-2">
|
<div class="col-xl-2">
|
||||||
|
@ -283,6 +302,9 @@ var zoom = d3.zoom()
|
||||||
.scaleExtent([.2, 10])
|
.scaleExtent([.2, 10])
|
||||||
.on("zoom", zoomed);
|
.on("zoom", zoomed);
|
||||||
|
|
||||||
|
// Loading:
|
||||||
|
//$("#graph_loading").show()
|
||||||
|
|
||||||
//var transform = d3.zoomIdentity;
|
//var transform = d3.zoomIdentity;
|
||||||
|
|
||||||
var color = d3.scaleOrdinal(d3.schemeCategory10);
|
var color = d3.scaleOrdinal(d3.schemeCategory10);
|
||||||
|
@ -308,6 +330,7 @@ var container_graph = svg_node.append("g");
|
||||||
//.attr("transform", "translate(40,0)")
|
//.attr("transform", "translate(40,0)")
|
||||||
//.attr("transform", "scale(2)");
|
//.attr("transform", "scale(2)");
|
||||||
|
|
||||||
|
|
||||||
function create_graph(url){
|
function create_graph(url){
|
||||||
|
|
||||||
d3.json(url)
|
d3.json(url)
|
||||||
|
@ -384,6 +407,15 @@ d3.json(url)
|
||||||
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
|
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Loading ...
|
||||||
|
$("#graph_loading").remove();
|
||||||
|
|
||||||
|
})
|
||||||
|
.catch(function(error) {
|
||||||
|
$("#graph_loading").remove()
|
||||||
|
svg_node.remove();
|
||||||
|
d3.select("#graph").append("div")
|
||||||
|
.text(error);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue