Simulation run with progress polling

by TheAnyLogicCompany

HTML

<script src="https://cloud.anylogic.com/assets/js-client-8.5.0/cloud-client.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>AnyLogic Cloud API Example - Simulation with Progress indication</title>
    <script src="assets/cloud-client.js"></script> <!-- Cloud API Client -->
    <script src="js/main.js"></script> <!-- your own script -->
</head>
<body>
    <button id="run-button" onclick="runSimulation()">Run simulation</button>
    <progress id="progress" value="0" max="100"></progress>
    <div id="info">The simulation results will be displayed here</div>
</body>
</html>

JavaScript

let cloudClient = CloudClient.create("e05a6efa-ea5f-4adf-b090-ae0ca7d16c20");

let runButton = document.getElementById( "run-button" );
let progress = document.getElementById( "progress" );
let info = document.getElementById( "info" );

function runSimulation() {
    runButton.disabled = true;
    cloudClient.getLatestModelVersion( "Service System Demo" )
        .then( version => {
            let inputs = cloudClient.createDefaultInputs( version );
            inputs.setInput( "Server capacity", 21 );
            inputs.setInput( "{STOP_TIME}", 1000 );
            simulation = cloudClient.createSimulation(inputs);
            startPolling();
            return simulation.run();
        })
        .then( simulation => simulation.waitForCompletion() )
        .then( simulation => simulation.getOutputs() )
        .then( outputs => {
            let html = "Mean queue size = " + outputs.value( "Mean queue size|Mean queue size" ) + "<br>";
            html += "Server utilization = " + outputs.value( "Utilization|Server utilization" ) + "<br>";
            info.innerHTML = html;
        })
        .catch( error => {
            info.innerHTML = error.status + "<br>" + error.message;
            console.error( error );
        })
        .finally( () => {
            stopPolling();
            runButton.disabled = false;
        });
}

let pollingInterval;

function startPolling() {
    pollingInterval = setInterval(
        () => {
            simulation.getProgress()
                .then( progressinfo => {
                    if( progressinfo ) { //can be undefined in the beginning
                        progress.value = progressinfo.total;
                    }
                });
        },
        1000
    );
}

function stopPolling() {
    setTimeout( () => clearInterval( pollingInterval ), 2000 );
}