<!DOCTYPE html>
<html lang="en">


<!-- HEADER -->
<head>
  <!-- Bootstrap boilerplate -->
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css"/>
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.11.0/dist/bootstrap-vue.min.css"/>
  <script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=es2015%2CIntersectionObserver"></script>
  <script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
  <script src="https://unpkg.com/bootstrap-vue@2.11.0/dist/bootstrap-vue.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Quicksand:wght@400;700&display=swap" rel="stylesheet">
  <!-- Avenir is not available -->

  <!-- Customization -->
  <title>Covasim</title>
  <link rel="icon" href="data:;base64,iVBORw0KGgo="> <!-- Remove favicon.ico 404 -->
  <script src="https://unpkg.com/sciris-js@0.2.18/dist/sciris-js.js"></script>
  <script src="https://cdn.plot.ly/plotly-1.53.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script>

  <!-- Define styles -->
  <link rel="stylesheet" href="cova_app.css" type="text/css">
</head>


<!-- BODY -->
<body class="container-fluid">
<!-- All Vue template code has to within #app -->
<section id="app" class="row" @mousemove="resize_apply" @mouseup="resize_end">
  <header>
    <b-navbar type="dark" variant="dark">
      <b-navbar-brand href="#">
        <span class="logo-idm"></span>
        {{ app.title }}
      </b-navbar-brand>
      <b-navbar-nav class="ml-auto">
        <b-nav-item :href="app.docs_url" target="_blank">Documentation</b-nav-item>
        <b-nav-item :href="app.paper_url" target="_blank">Paper</b-nav-item>
        <b-nav-item v-b-modal.about>About</b-nav-item>
        <b-nav-item href="https://institutefordiseasemodeling.github.io/covasim-docs/whatsnew.html" target="_blank">{{app.version}}</b-nav-item>
      </b-navbar-nav>
    </b-navbar>

    <!-- About modal -->
    <b-modal id="about" ok-only ok-variant="secondary" ok-title="Close">
      <template v-slot:modal-title>About {{ app.title }}</template>
      <p>{{ app.title }} is an agent-based model that simulates the transmission of COVID-19 (novel coronavirus, SARS-CoV-2) in a population. Each individual in the model may pass through the following stages of COVID-19 infection: susceptible, exposed, infectious, and recovered (SEIR). The epidemiological parameter values are taken from literature.</p>
      <p>Viral transmission occurs on a fixed contact network with undirected edges. Each day, infectious individuals expose susceptible individuals to possible infection. By default, the daily probability of infection, number of contacts, and mean duration of infectiousness roughly equates to R0 = 2.5 and a doubling time of 6-7 days. For more information, please read the <a :href="app.paper_url" target="_blank">paper</a> or visit the <a :href="app.github_url" target="_blank">GitHub</a> repository.</p>
      <p><b>Note:</b> Models are only as good as the values of the parameters put into them. This is a rapidly changing situation, and we will update content as relevant information is received.</p>
      <p><b>Acknowledgements:</b> Covasim is currently under active development by IDM's COVID-19 Response Team. Model development is led by Daniel Klein, Cliff Kerr, Robyn Stuart, Romesh Abeysuriya, and Dina Mistry. UI design is led by Lauren George, William Chen, and Scott Ayers, inspired by a prototype from Brian Lovin. For the full list of contributors, please see our <a href="https://github.com/InstituteforDiseaseModeling/covasim/graphs/contributors" target="_blank">Contributors</a> page.</p>
    </b-modal>

    <!-- Disclaimer -->
    <b-modal id="disclaimer" ok-only ok-variant="secondary" ok-title="OK" visible>
      <template v-slot:modal-title>Disclaimer</template>
      <p>Note: the Covasim webapp is currently in development and is intended for illustrative explorations of COVID-19 epidemic dynamics only. It is not intended to be used as a policy or decision-making tool. For more detailed information on COVID-19 modeling, please contact us at <a href="mailto:covasim@idmod.org">covasim@idmod.org</a>.</p>
    </b-modal>

  </header>

  <div class="content" v-bind:class="{ 'sidebar-closed': !panel_open , 'sidebar-opened': panel_open}">

    <!--  Paramaters Accordion  -->
    <b-sidebar id="parameters" :visible="panel_open" v-model="panel_open" :width="panel_width+'vw'" @shown="dispatch_resize" @hidden="dispatch_resize" shadow  class="sidebar" title="Configuration">
      <template v-slot:header-close>
        <b-button-close content="" v-b-toggle.parameters v-b-tooltip.hover.right title="Hide configuration" class="ti-angle-double-left"></b-button-close>
      </template>

      <div role="tablist">
        <!--  General Parameters -->
        <b-card no-body>
          <b-card-header header-tag="header" class="p-0 rounded-0" role="tab" header-bg-variant="dark">
            <b-button block href="#" v-b-toggle.parameters-general variant="link">General options <span class="ti-angle-up"></span> <span class="ti-angle-down"></span></b-button>
          </b-card-header>
          <b-collapse id="parameters-general" visible role="tabpanel">
            <b-card-body>
              <!-- Presets -->
              <div class="form-row mb-3">
                <label for="examples" class="col-12">Choose simulation presets</label>
                <div class="col">
                  <select :disabled="running" id="examples" v-model="reset_choice" @change="resetPars()" class="form-control" aria-label="Example presets">
                    <option v-for="(item, index) in reset_options" :value="item">
                      {{ item }}
                    </option>
                  </select>
                  <b-tooltip target="examples">
                    Example parameter configurations
                  </b-tooltip>
                </div>
                <div class="col-auto">
                  <button id="reset_btn" :disabled="running" class="btn btn-primary" type="button" @click="resetPars">
                    Reset
                  </button>
                  <b-tooltip target="reset_btn">
                    Reset parameters to default values
                  </b-tooltip>
                </div>
                <div class="col-auto">
                  <button id="download-parameters-button" :disabled="running" class="btn btn-primary" type="button" @click="downloadPars">
                    <span class="ti-download"/>
                    <span class="sr-only"> Download parameters </span>
                  </button>
                  <b-tooltip target="download-parameters-button">
                    Download parameters
                  </b-tooltip>
                </div>
                <div class="col-auto">
                  <button id="upload-parameters-button" :disabled="running" class="btn btn-primary" type="button" @click="uploadPars">
                    <span class="ti-upload"/>
                    <span class="sr-only"> Upload parameters </span>
                  </button>
                  <b-tooltip target="upload-parameters-button">
                    Upload parameters
                  </b-tooltip>
                </div>
              </div>
              <div class="form-row mb-3">
                <div class="col">
                  <label for="n_days">Simulation duration (in days):</label>
                  <input id="n_days" type="number" :min="sim_length.min" :max="sim_length.max" :disabled="running" class="form-control" v-model.number="sim_length.best">
                  <span aria-live="assertive" v-if="paramError.sim_length" class="text-danger form-error">{{paramError.sim_length}}</span>

                  <b-tooltip target="n_days">
                    {{sim_length.tip}}
                  </b-tooltip>
                </div>
              </div>
              <div class="form-row mb-3">
                <!--                <label for="datafile" class="col-12">Upload data</label>-->
                <!--                <div class="col">-->
                <!--                  <b-form-file id="datafile" name="datafile" accept=".csv, .xlsx" placeholder="<none>" v-model="datafile.local_path" @change="upload_datafile" :disabled="running"></b-form-file>-->
                <!--                </div>-->
                <!--                <div class="col-auto">-->
                <!--                  <button id="reset-datafile" :disabled="running" class="btn btn-primary" type="button" @click="reset_datafile">-->
                <!--                    Clear-->
                <!--                  </button>-->
                <!--                  <b-tooltip target="reset-datafile">-->
                <!--                    Remove the input data file from the simulation-->
                <!--                  </b-tooltip>-->
                <!--                </div>-->

              </div>
            </b-card-body>
          </b-collapse>
        </b-card>

        <!--  Intervention Parameters -->
        <b-card no-body>
          <b-card-header header-tag="header" class="p-0 rounded-0" role="tab" header-bg-variant="dark">
            <b-button block v-b-toggle.parameters-intervention variant="link">Interventions <span class="ti-angle-up"></span> <span class="ti-angle-down"></span></b-button>
          </b-card-header>
          <b-collapse id="parameters-intervention" visible role="tabpanel">
            <b-card no-body class="border-0 rounded-0">
              <b-tabs fill card>
                <template v-for="(intervention, name, index) in interventionTableConfig">
                  <b-tab :class="[index === 0? 'active' : '']" :id="'intervention-'+name">
                    <template v-slot:title>
                      <span v-b-tooltip.hover :title="intervention.toolTip">
                        {{ intervention.formTitle }}
                      </span>
                    </template>
                    <fieldset>
                      <form @submit.prevent="(e) => addIntervention(name, e)">
                        <div class="form-group">
                          <div class="input-group mb-3">
                            <template v-for="field in intervention.fields">
                              <input :max="field.max || sim_length.max" :min="field.min || 0" :value="field.value" :name="field.key"
                                     :aria-label="field.label" class="form-control" v-if="field.type !== 'select'"
                                     :type="field.type" v-b-tooltip.hover :title="field.tooltip">
                              <select class="form-control" :name="field.key" v-else>
                                <option v-for="option in field.options" :value="option.value">{{option.value}}</option>
                              </select>
                              <div class="input-group-append" v-if="field.key === 'level'">
                                <span class="input-group-text">%</span>
                              </div>
                            </template>
                            <div class="input-group-append">
                              <button class="btn btn-outline-secondary" type="submit">Add intervention</button>
                            </div>
                          </div>
                        </div>
                      </form>
                      <span aria-live="assertive" v-if="scenarioError[name]" class="text-danger form-error">{{scenarioError[name]}}</span>
                      <div v-if="int_pars && int_pars[name] && int_pars[name].length > 0">
                        <table class="table">
                          <thead>
                          <tr>
                            <th scope="col" v-for="field in intervention.fields">{{field.label}}</th>
                            <th scope="col"></th>
                          </tr>
                          </thead>
                          <tbody>
                          <tr v-for="(par, index) in int_pars[name]">
                            <td v-for="field in intervention.fields" scope="row">
                              {{par[field.key]}}<span v-if="field.key=== 'level'">%</span>
                            </td>
                            <td>
                              <button @click="deleteIntervention(name, index)" class="btn btn-outline-danger" type="button">Delete</button>
                            </td>
                          </tr>
                          </tbody>
                        </table>
                      </div>
                    </fieldset>
                  </b-tab>
                </template>
              </b-tabs>
            </b-card>
            <plotly-chart v-if="intervention_figs && intervention_figs.id" :graph="intervention_figs" :key="intervention_figs.id" ></plotly-chart>
          </b-collapse>
        </b-card>

        <!--  Advanced Parameters -->
        <b-card no-body>
          <b-card-header header-tag="header" class="bg-dark p-0 rounded-0" role="tab" header-bg-variant="dark">
            <b-button block variant="link" v-b-toggle.parameters-advanced>Model parameters <span class="ti-angle-up"></span> <span class="ti-angle-down"></span></b-button>
          </b-card-header>
          <b-collapse id="parameters-advanced" role="tabpanel">
            <b-card-body>
              <div class="row">
                <fieldset class="col-md-6">
                  <legend>Population parameters</legend>
                  <div v-for="(par, key) in sim_pars" class="form-group">
                    <div v-if="key !== 'n_days'" :id="key+'-wpr'" v-b-tooltip.hover :title="par.tip">
                      <label :for="key">{{par.name}}:</label>
                      <input :id="key" :disabled="running" class="form-control" v-model="par.best">
                      <span aria-live="assertive" v-if="paramError[key]" class="text-danger form-error">{{paramError[key]}}</span>
                    </div>
                  </div>
                </fieldset>
                <fieldset class="col-md-6">
                  <legend>Epidemiological parameters</legend>
                  <div v-for="(par, key) in epi_pars" class="form-group">
                    <div :id="key+'-wpr'" v-b-tooltip.hover :title="par.tip">
                      <label :for="key">{{par.name}}:</label>
                      <input :id="key" :disabled="running" class="form-control" v-model="par.best">
                      <span aria-live="assertive" v-if="paramError[key]" class="text-danger form-error">{{paramError[key]}}</span>
                    </div>
                  </div>
                </fieldset>
              </div>
            </b-card-body>
          </b-collapse>
        </b-card>
      </div>





      <!-- Resize handle -->
      <div id="resize-handle" @mousedown="resize_start"></div>

      <!-- Run Button -->
      <b-form inline class="justify-content-end py-2 px-3">
        <b-form-checkbox class="mr-3" v-model="show_animation">Animate</b-form-checkbox>
        <b-button v-if="running" variant="success" size="lg" class="btn-run green" type="button" disabled>
          <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
          Running...
        </b-button>
        <b-button v-else id="run_btn" :disabled="isRunDisabled" variant="success" size="lg" class="btn-run green" type="button" @click="runSim">
          Run
        </b-button>
      </b-form>

      <!-- Sidebar Footer: Errors-->
      <template v-slot:footer>
        <div v-if="errs.length > 0" class="errorbox" role="tablist">
          <p>During the simulation, the following warning(s) were encountered:</p>
          <b-card v-for="(err, index) in errs" :value="err">
            <b-card-text>{{err.message}}</b-card-text>
            <pre v-if="is_debug">{{ err.exception }}</pre>
          </b-card>
        </div>
      </template>
    </b-sidebar>
    <button id="open-sidebar" class="btn btn-secondary rounded-0" v-b-toggle.parameters :hidden="panel_open" v-b-tooltip.hover.right title="Open configuration">
      <span class="sr-only">Open configuration</span>
      <span class="ti-angle-double-right"></span>
    </button>

    <!-- Show the actual graphs -->
    <div id="graphs" class="results" v-bind:class="{ empty: result.graphs.length === 0 }">
      <template v-if="result.graphs.length === 0">
        <p class="h5"><i>Click "Run" to display graphs</i></p>
      </template>
      <template v-else>
        <div class="row no-gutter">
          <template v-for="(x, index) in result.graphs">
            <div :class="{'col-md-6': (index + 1 < result.graphs.length) || !show_animation || result.graphs.length%2 === 0, 'col-md-12': (index + 1 === result.graphs.length) && show_animation && result.graphs.length%2 === 1 }">
              <plotly-chart :graph="x" :key="x.id"/>
            </div>
          </template>

          <!-- <b>After {{ result.summary.days }} days: {{ result.summary.cases }} cases, {{ result.summary.deaths }} deaths</b> -->

          <div class="w-100 mb-1 text-center">
            <button id="download_xlsx" class="btn btn-primary blueish" type="button" @click="downloadExcel">
              <span class="sr-only">Download</span> XLSX <span class="ti-download"/>
            </button>
            <button id="download_json" class="btn btn-primary blueish" type="button" @click="downloadJson">
              <span class="sr-only">Download</span> JSON <span class="ti-download"/>
            </button>
            <b-tooltip target="download_xlsx">
              Download results as an XLSX file
            </b-tooltip>
            <b-tooltip target="download_json">
              Download results as a JSON file
            </b-tooltip>
          </div>

        </div>
      </template>
    </div>

  </div>

  <footer>
    <b-navbar type="dark" variant="dark">
      <b-navbar-nav>
        <b-nav-item  :href="app.publisher_url" target="_blank">
          <img src="assets/bmgf-logo.png" class="logo img-fluid"/>
        </b-nav-item>
        <b-nav-text>&copy; {{ app.copyright_year }} {{ app.copyright_owner }}. All rights reserved.</b-nav-text>
      </b-navbar-nav>
      <b-navbar-nav class="ml-auto">
        <b-nav-item :href="app.github_url" target="_blank">
          <svg viewBox="0 0 16 16" version="1.1" width="20" aria-hidden="true" style="vertical-align: text-bottom">
            <path fill-rule="evenodd" fill="currentColor"
                  d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
          </svg>
          <span class="sr-only">View this project on GitHub</span>
        </b-nav-item>
        <b-nav-item v-b-modal.licenses><span class="nav-text">License</span></b-nav-item>
        <b-nav-item href="https://www.gatesfoundation.org/Terms-of-Use" target="_blank"><span class="nav-text">Terms of Use</span></b-nav-item>
        <b-nav-item href="https://www.gatesfoundation.org/Privacy-and-Cookies-Notice" target="_blank"><span class="nav-text">Privacy &amp; Cookies Notice</span></b-nav-item>
      </b-navbar-nav>
    </b-navbar>
    <b-modal id="licenses" ok-only ok-variant="secondary" ok-title="Close" title="Licenses" scrollable hide-footer size="lg" dialog-class="w-fit">
      <b-tabs>
        <b-tab title="Our License" active>
          <b-card-body>
            <pre><code>{{ app.license }}</code></pre>
          </b-card-body>
        </b-tab>
        <b-tab title="Library Licenses">
          <b-card-body>
            <pre><code>{{ app.notice }}</code></pre>
          </b-card-body>
        </b-tab>
      </b-tabs>
    </b-modal>
  </footer>
</section>
</body>


<!-- SCRIPTS -->
<script src="cova_app.js" type="text/javascript"></script>
</html>
