Commit 4d8c96bc authored by Kautsar, Satria's avatar Kautsar, Satria
Browse files

Merge branch 'html_visualization' into 'master'

Implemented loading screen (with html5 defer attribute)

See merge request medema-group/BiG-SCAPE!29
parents 5ab491fe 48287d86
......@@ -1427,6 +1427,7 @@ def clusterJsonBatch(bgcs, pathBase, className, matrix, pos_alignments, cutoffs=
create_directory(module_html_path, "Network HTML", False)
with open(os.path.join(module_html_path, "bs_data.js"), "w") as bs_data_js:
bs_data_js.write("var bs_data={};\n".format(json.dumps(bs_data, indent=4, separators=(',', ':'), sort_keys=True)))
bs_data_js.write("dataLoaded('bs_data');\n")
shutil.copy(os.path.join(os.path.realpath(os.path.dirname(__file__)), "html_template", "index_html"), os.path.join(module_html_path, "index.html"))
# Create network
......@@ -1898,6 +1899,8 @@ def clusterJsonBatch(bgcs, pathBase, className, matrix, pos_alignments, cutoffs=
bs_networks_js.write("var bs_similarity_families={};\n".format(json.dumps(bs_similarity_families, indent=4, separators=(',', ':'), sort_keys=True)))
if len(clanLabels) > 0:
bs_networks_js.write("var bs_clans={};\n".format(json.dumps(bs_clans, indent=4, separators=(',', ':'), sort_keys=True)))
bs_networks_js.write("dataLoaded('bs_networks');\n")
if len(clanLabels) > 0:
if verbose:
......@@ -3216,6 +3219,7 @@ if __name__=="__main__":
run_data["duration"] = "{}h{}m{}s".format((duration // 3600), ((duration % 3600) // 60), ((duration % 3600) % 60))
with open(os.path.join(network_html_folder, "run_data.js"), "w") as run_data_js:
run_data_js.write("var run_data={};\n".format(json.dumps(run_data, indent=4, separators=(',', ':'), sort_keys=True)))
run_data_js.write("dataLoaded();\n");
# update bgc_results.js
add_to_bigscape_results_js(run_name, html_subs, os.path.join(output_folder, "html_content", "js", "bigscape_results.js"))
......
......@@ -6,10 +6,20 @@
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<title>BiG-SCAPE Result</title>
<link rel="stylesheet" type="text/css" href="../../../css/w3.css">
<link rel="stylesheet" type="text/css" href="../../../css/style.css">
</head>
<body>
<div id="network-container" style="position: fixed; top: 0px; bottom: 0px; right: 0px; left: 0px;">
<div id="loadingWindow" class="w3-modal">
<div class="w3-modal-content" style="width: 300px; text-align: center; padding: 2em;">
<div class="w3-container">
<img src="../../../img/loading.gif"></img>
<br /><br />
Loading data...
</div>
</div>
</div>
</body>
<!-- javascripts -->
<script type="text/javascript" src="../../../js/jquery-3.2.1.min.js"></script>
......@@ -20,10 +30,22 @@
<script type="text/javascript" src="../../../js/pfams.js"></script>
<script type="text/javascript" src="../../../js/arrower.js"></script>
<script type="text/javascript" src="../../../js/bigscape.js"></script>
<script type="text/javascript" src="bs_data.js"></script>
<script type="text/javascript" src="bs_networks.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function showLoading(enable) {
if (enable) {
$("#loadingWindow").css("display", "block");
} else {
$("#loadingWindow").css("display", "none");
}
}
var loadedData = {};
showLoading(true);
function dataLoaded(name) {
loadedData[name] = true;
if (!loadedData.hasOwnProperty("bs_data") || !loadedData.hasOwnProperty("bs_networks")) {
return;
}
showLoading(false);
var bs_alignment = [];
for (var a in bs_similarity) {
bs_alignment.push([]);
......@@ -33,6 +55,8 @@
}
var bs = new Bigscape(bs_data, bs_families, bs_alignment, bs_similarity, "network-container", "desc-container", {});
$(".loadingtext").addClass("hidden");
});
}
</script>
<script type="text/javascript" src="bs_data.js" defer></script>
<script type="text/javascript" src="bs_networks.js" defer></script>
</html>
\ No newline at end of file
......@@ -16,7 +16,6 @@
<script src="../../js/biojs-io-newick.min.js"></script>
<script src="../../js/clusterfck-0.1-satria.js"></script>
<script src="../../js/inchlib-1.2.0.1-satria.js"></script>
<script src="./run_data.js"></script>
<div class="overviewpage">
<div class="overviewleft">
<div class="infocontainer">
......@@ -119,9 +118,25 @@
</div>
</div>
</div>
<div id="loadingWindow" class="w3-modal">
<div class="w3-modal-content" style="width: 300px; text-align: center; padding: 2em;">
<div class="w3-container">
<img src="../../img/loading.gif"></img>
<br /><br />
Loading data...
</div>
</div>
</div>
</body>
<!-- javascripts -->
<script type="text/javascript">
function showLoading(enable) {
if (enable) {
$("#loadingWindow").css("display", "block");
} else {
$("#loadingWindow").css("display", "none");
}
}
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
......@@ -130,7 +145,9 @@
}
return color;
}
$(document).ready(function(){
showLoading(true);
function dataLoaded() {
showLoading(false);
// run information
$("#analysis_started").html(run_data["start_time"]);
$("#analysis_completed").html(run_data["end_time"] + " (" + run_data["duration"] + ")");
......@@ -211,7 +228,7 @@
var selector = $("<div>" + run_data["networks"][i]["label"] + "</div>").addClass("tablink w3-bottombar w3-hover-light-grey w3-padding").appendTo($("<a href='##' onclick='javascript:viewNetwork(" + i + ");'></a>").appendTo($("#network_selection")));
}
viewNetwork(0);
});
}
function viewNetwork(idx) {
$("#network_selection .tablink").removeClass("w3-border-red");
......@@ -699,4 +716,5 @@
}
}
</script>
<script src="./run_data.js" defer></script>
</html>
\ No newline at end of file
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