Skip to content

Commit

Permalink
making rust command async and implemented UI locking with loading ani…
Browse files Browse the repository at this point in the history 
…mation (issue #12)
  • Loading branch information
Stefan Sidlovsky committed Oct 26, 2023
1 parent d37b20b commit 2420293
Show file tree
Hide file tree
Showing 14 changed files with 104 additions and 19 deletions.
8 changes: 8 additions & 0 deletions fe/computation-window.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,12 @@

<body onload="init()" style="background-color: #f5f5f5;">

<div id="loading-indicator" class="invisible">
<img src="img/progress.gif"/><br><br>Loading...
</div>

<div id="content">

<!-- Do not change it here, this is a placeholder. -->
<span id="version">v0.0.0</span>

Expand Down Expand Up @@ -98,6 +104,8 @@ <h2 style="margin: 0 auto; font-size: 20px; text-align: center;">Bifurcation Fun
</div>
</div>

</div>

</div>
</body>
</html>
8 changes: 8 additions & 0 deletions fe/explorer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,12 @@

<body onload="init()">

<div id="loading-indicator" class="invisible">
<img src="img/progress.gif"/><br><br>Loading...
</div>

<div id="content">

<h1 id='logo'>Aeon/<span id='title'>BIODIVINE</span></h1>

<!-- Do not change it here, this is a placeholder. -->
Expand Down Expand Up @@ -90,5 +96,7 @@ <h2 style="margin: 0 auto; font-size: 20px; text-align: center;">Witness update
</div>
</div>

</div>

</body>
</html>
8 changes: 7 additions & 1 deletion fe/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,12 @@

<body onload="init()">

<div id="loading-indicator" class="invisible">
<img src="img/progress.gif"/><br><br>Loading...
</div>

<div id="content">

<!-- Hosts the interactive model editor -->
<div id="cytoscape-editor">
</div>
Expand Down Expand Up @@ -191,8 +197,8 @@ <h4> ● Update Function</h4>
<span class="hint invisible">Apply Layout</span>
</div>
</div>
</div>

<div id="loading-indicator" class="invisible"><img src="img/progress.gif"/><br><br>Waiting for server...</div>
</div>

</body>
Expand Down
3 changes: 3 additions & 0 deletions fe/script/Results.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,10 @@ let Results = {
},

show() {
UI.isLoading(true)
ComputationEndpoints.getResults()
.then((resultsObject) => {
UI.isLoading(false)
let isPartial = resultsObject["isPartial"]
let isCancelled = resultsObject["isCancelled"]

Expand Down Expand Up @@ -68,6 +70,7 @@ let Results = {
}
})
.catch((errorMessage) => {
UI.isLoading(false)
Dialog.errorMessage(errorMessage)
})
},
Expand Down
17 changes: 15 additions & 2 deletions fe/script/UI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,10 +264,14 @@ let UI = {
},

isLoading(status) {
const windowContent = document.getElementById("content")
const loading = document.getElementById("loading-indicator")
if (status) {
document.getElementById("loading-indicator").classList.remove("invisible");
windowContent.classList.add("freeze")
loading.classList.remove("invisible")
} else {
document.getElementById("loading-indicator").classList.add("invisible");
windowContent.classList.remove("freeze")
loading.classList.add("invisible");
}
},

Expand Down Expand Up @@ -296,11 +300,14 @@ let UI = {
filename = "model";
}

this.isLoading(true)
ModelEndpoints.aeonToSbml(aeonModel)
.then((sbmlModel) => {
this.isLoading(false)
this._downloadFile(filename + ".sbml", sbmlModel);
})
.catch((errorMessage) => {
this.isLoading(false)
Dialog.errorMessage(errorMessage)
})
},
Expand All @@ -316,11 +323,14 @@ let UI = {
filename = "model";
}

this.isLoading(true)
ModelEndpoints.aeonToSbmlInstantiated(aeonModel)
.then((sbmlModel) => {
this.isLoading(false)
this._downloadFile(filename + "_instantiated.sbml", sbmlModel);
})
.catch((errorMessage) => {
this.isLoading(false)
Dialog.errorMessage(errorMessage);
})
},
Expand Down Expand Up @@ -378,11 +388,14 @@ let UI = {

const sbmlFileContent = await TAURI.fs.readTextFile(filePath);

this.isLoading(true)
ModelEndpoints.sbmlToAeon(sbmlFileContent)
.then((model) => {
this.isLoading(false)
LiveModel.handleAeonModelImport(model);
})
.catch((errorMessage) => {
this.isLoading(false)
Dialog.errorMessage(errorMessage);
})
},
Expand Down
9 changes: 9 additions & 0 deletions fe/script/Windows.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,31 +58,40 @@ let Windows = {
},

openWitnessWindow(witness) {
UI.isLoading(true)
ComputationResultsEndpoints.getWitness(witness)
.then((witness) => {
UI.isLoading(false)
this.newWitnessWindow(witness)
})
.catch((errorMessage) => {
UI.isLoading(false)
Dialog.errorMessage(errorMessage)
})
},

openTreeWitnessWindow(node) {
UI.isLoading(true)
ComputationResultsEndpoints.getTreeWitness(node)
.then((witness) => {
UI.isLoading(false)
this.newWitnessWindow(witness)
})
.catch((errorMessage) => {
UI.isLoading(false)
Dialog.errorMessage(errorMessage)
})
},

openStabilityWitnessWindow(node, behavior, variable, vector) {
UI.isLoading(true)
ComputationResultsEndpoints.getStabilityWitness(node, behavior, variable, vector)
.then((witness) => {
UI.isLoading(false)
this.newWitnessWindow(witness)
})
.catch((errorMessage) => {
UI.isLoading(false)
Dialog.errorMessage(errorMessage)
})
},
Expand Down
12 changes: 12 additions & 0 deletions fe/script/events/ExplorerWindowEvent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,15 @@ TAURI.event.listen('get-attractors', (event) => {
Computation.setWindowSessionKey(event.payload['windowSessionKey'])

const behavior = event.payload['behavior']

UI.isLoading(true)
ComputationResultsEndpoints.getAttractors(behavior)
.then((okJson) => {
UI.isLoading(false)
showInExplorer(okJson)
})
.catch((errorMessage) => {
UI.isLoading(false)
Dialog.errorMessage(errorMessage)
})
});
Expand All @@ -17,11 +21,15 @@ TAURI.event.listen('get-tree-attractors', (event) => {
Computation.setWindowSessionKey(event.payload['windowSessionKey'])

const node = event.payload['node']

UI.isLoading(true)
ComputationResultsEndpoints.getTreeAttractors(node)
.then((okJson) => {
UI.isLoading(false)
showInExplorer(okJson)
})
.catch((errorMessage) => {
UI.isLoading(false)
Dialog.errorMessage(errorMessage)
})
});
Expand All @@ -34,11 +42,15 @@ TAURI.event.listen('get-stability-attractors', (event) => {
const behavior = event.payload['behavior']
const variable = event.payload['variable']
const vector = event.payload['vector']

UI.isLoading(true)
ComputationResultsEndpoints.getStabilityAttractors(node, behavior, variable, vector)
.then((okJson) => {
UI.isLoading(false)
showInExplorer(okJson)
})
.catch((errorMessage) => {
UI.isLoading(false)
Dialog.errorMessage(errorMessage)
})
});
13 changes: 12 additions & 1 deletion fe/script/treeExplorerMain.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -286,8 +286,10 @@ function autoExpandBifurcationTree(nodeId, depth, fit = true) {
Dialog.errorMessage("No node selected.")
}

UI.isLoading(true)
TreeExplorerEndpoints.autoExpandBifurcationTree(nodeId, depth)
.then((okResponseObject) => {
UI.isLoading(false)
if (okResponseObject.length > 0) {
for (node of okResponseObject) {
CytoscapeEditor.ensureNode(node);
Expand All @@ -305,15 +307,18 @@ function autoExpandBifurcationTree(nodeId, depth, fit = true) {
}
})
.catch((errorMessage) => {
UI.isLoading(false)
Dialog.errorMessage(errorMessage)
})

CytoscapeEditor.refreshSelection();
}

function loadBifurcationTree(fit = true) {
UI.isLoading(true)
ComputationResultsEndpoints.getBifurcationTree()
.then((okResponseObject) => {
UI.isLoading(false)
if (okResponseObject.length > 0) {
CytoscapeEditor.removeAll(); // remove old tree if present
for (node of okResponseObject) {
Expand All @@ -333,16 +338,20 @@ function loadBifurcationTree(fit = true) {
}
})
.catch((errorMessage) => {
UI.isLoading(false)
Dialog.errorMessage(errorMessage)
})
}

function setPrecision(precision) {
UI.isLoading(true)
TreeExplorerEndpoints.applyTreePrecision(precision)
.then((okResponse) => {
UI.isLoading(false)
loadBifurcationTree(false);
})
.catch((errorMessage) => {
UI.isLoading(false)
Dialog.errorMessage(errorMessage)
})
}
Expand Down Expand Up @@ -447,9 +456,10 @@ function vector_to_string(vector) {
function initStabilityButton(id, button, dropdown, container) {
button.onclick = function() {
let behaviour = dropdown.value;
console.log(id)
UI.isLoading(true)
TreeExplorerEndpoints.getStabilityData(id, behaviour)
.then((okResponseObject) => {
UI.isLoading(false)
let content = "<h4>Stability analysis:</h4>";
for (item of okResponseObject) {
let variableName = item.variable;
Expand All @@ -466,6 +476,7 @@ function initStabilityButton(id, button, dropdown, container) {
container.innerHTML = content;
})
.catch((errorMessage) => {
UI.isLoading(false)
Dialog.errorMessage("Cannot load stability data: " + errorMessage)
})
}
Expand Down
4 changes: 4 additions & 0 deletions fe/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,10 @@ body {
transition: 0.3s;
}

.freeze {
pointer-events: none
}

#logo {
width: fit-content;
width: -moz-fit-content;
Expand Down
13 changes: 12 additions & 1 deletion fe/tree_explorer.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!DOCTYPE html>

<html lang="en">
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<title>Biodivine/Aeon - Bifurcation tree</title>
<meta charset="utf-8">
Expand Down Expand Up @@ -39,6 +39,7 @@
<script src="script/endpoints/ComputationResultsEndpoints.js"></script>
<script src="script/endpoints/WindowsEndpoints.js"></script>
<script src="script/Windows.js"></script>
<script src="script/UI.js"></script>
<script src="script/CytoscapeTreeEditor.js"></script>
<script src="script/Computation.js"></script>
<script src="script/endpoints/TreeExplorerEndpoints.js"></script>
Expand All @@ -62,6 +63,13 @@

<body onload="init()" id="tree-explorer">

<div id="loading-indicator" class="invisible">
<img src="img/progress.gif" alt="loading"/><br><br>Loading...
</div>


<div id="content">

<!-- Do not change it here, this is a placeholder. -->
<span id="version">v0.0.0</span>

Expand Down Expand Up @@ -298,5 +306,8 @@ <h1 id='logo'>Aeon/<span id='title'>BIODIVINE</span></h1>
</div>



</div>

</body>
</html>
2 changes: 1 addition & 1 deletion src-tauri/src/computation_commands.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@ pub fn cancel_computation(window_session_key: &str) -> Result<String, String> {

/// Get result of computation.
#[tauri::command]
pub fn get_results(window_session_key: &str) -> Result<Value, ErrorMessage> {
pub async fn get_results(window_session_key: &str) -> Result<Value, ErrorMessage> {
let locked_computation: Arc<RwLock<Option<Computation>>> =
get_locked_computation(window_session_key);
let read_computation = locked_computation.read().unwrap();
Expand Down
Loading

0 comments on commit 2420293

Please sign in to comment.