Querying simulation results of a completed run

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 - Query outputs of a completed run</title>
    <script src="assets/cloud-client.js"></script>
    <script src="js/main.js"></script>
</head>
<body>
    Server capacity: <span id="parameter-value">5</span>
    <input id="parameter-range" type="range" min="2" max="10" step="1" value="5" onchange="changeValueText()">
    <button id="query-button" onclick="queryOutputs()">Query outputs</button>
    <div id="info">The simulation results will be displayed here</div>
</body>
</html>

JavaScript

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

let parameterValue = document.getElementById( "parameter-value" );
let parameterRange = document.getElementById( "parameter-range" );
let queryButton = document.getElementById( "query-button" );
let info = document.getElementById( "info" );

function queryOutputs() {
    parameterRange.disabled = true;
    queryButton.disabled = true;
    cloudClient.getModelByName( "Service System Demo" )
        .then( model => cloudClient.getLatestModelVersion( model ) )
        .then( version => {
            let inputs = cloudClient.createDefaultInputs( version );
            inputs.setInput( "Server capacity", parameterRange.value);
            let simulation = cloudClient.createSimulation(inputs);
            info.innerHTML = "Getting outputs...";
            return simulation.getOutputs();
        })
        .then( outputs => {
            let html = "Mean queue size = " + outputs.value( outputs.findNameIncluding("Mean Queue Size") ) + "<br>";
            html += "Server utilization = " + outputs.value( outputs.findNameIncluding("Server utilization") ) + "<br>";
            info.innerHTML = html;
        })
        .catch( error => {
            info.innerHTML = error.status + "<br>" + error.message;
            console.error( error );
        })
        .finally( () => {
            parameterRange.disabled = false;
            queryButton.disabled = false;
        });
}

function changeValueText() {
    parameterValue.innerText = parameterRange.value;
}