<!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"/>
  <link type="text/css" rel="stylesheet" href="assets/themify-icons.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>

<section id="app" class="container-fluid" @mousemove="resize_apply" @mouseup="resize_end">
  <header class="row no-gutter">
    <b-navbar type="dark" variant="dark">
      <b-navbar-brand href="#">{{ app.title }}</b-navbar-brand>
      <b-navbar-nav class="nav-head">
        <b-nav-item :href="app.docs_url" target="_blank"><span class="nav-text">Documentation</span></b-nav-item>
        <b-nav-item v-b-modal.about><span class="nav-text">About</span></b-nav-item>
      </b-navbar-nav>
      <b-navbar-nav class="ml-auto">
        <b-nav-item :href="app.github_url" target="_blank"><span class="nav-text">{{app.version}}</span></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 visit the <a href="https://github.com/InstituteforDiseaseModeling/covasim" 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</a>.</p>
    </b-modal>


  </header>

  <div class="content">

    <b-sidebar id="parameters" :visible="panel_open" no-header class="sidebar" :width="panel_width+'vw'" shadow>
      <div class="px-3">
        <header class="d-flex justify-content-between">
          <h4 class="my-2">Simulation configuration</h4>
          <button class="close" id="hidepanel" @click="close_panel" aria-label="Left">
            <span aria-hidden="true">&#129092;</span>
          </button>
          <b-tooltip target="hidepanel">
            Hide configuration panel
          </b-tooltip>
        </header>
      </div>

      <div class="card mb-3">
        <div class="card-header">
          <button class="btn btn-block parheading" v-b-toggle.general>General options</button>
        </div>
        <b-collapse visible id="general">
          <div class="card-body">
            <div class="row">

              <!-- 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 blueish" 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 blueish" 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 blueish" 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>

            <div class="row">
              <div class="form-group">
                <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="row">
              <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 blueish" type="button" @click="reset_datafile">
                    Clear
                  </button>
                  <b-tooltip target="reset-datafile">
                    Remove the input data file from the simulation
                  </b-tooltip>
                </div>

              </div>
            </div>
          </div>
        </b-collapse>
      </div>

      <div class="card mb-3">
        <div class="card-header">
          <button class="btn btn-block parheading" v-b-toggle.intervention>Interventions</button>
        </div>
        <b-collapse visible id="intervention">
          <plotly-chart v-if="intervention_figs && intervention_figs.id" :graph="intervention_figs" :key="intervention_figs.id" ></plotly-chart>
          <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>
                    {{ intervention.formTitle }}
                  </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="sim_length.max" :min="sim_length.min" :placeholder="field.label" :name="field.key" :aria-label="field.label" class="form-control" v-if="field.type !== 'select'" :type="field.type">
                            <select class="form-control" :name="field.key" v-else>
                              <option v-for="option in field.options" :value="option.value">{{option.label}}</option>
                            </select>
                          </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]">
                          <th v-for="field in intervention.fields" scope="row">{{par[field.key]}}</th>
                          <td>
                            <button @click="deleteIntervention(name, index)" class="btn btn-outline-secondary" type="button">Delete</button>
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>
                  </fieldset>
                </b-tab>
              </template>
            </b-tabs>
          </b-card>
        </b-collapse>
      </div>

      <div class="card mb-3">
        <div class="card-header">
          <button class="btn btn-block parheading" v-b-toggle.advanced>Model parameters</button>
        </div>
        <b-collapse visible id="advanced">
          <div class="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 :id="key+'-wpr'" v-if="key !== 'n_days'">
                    <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>
                  <b-tooltip :target="key+'-wpr'" v-if="key !== 'n_days'">
                    {{par.tip}}
                  </b-tooltip>
                </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'">
                    <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>
                  <b-tooltip :target="key+'-wpr'">
                    {{par.tip}}
                  </b-tooltip>
                </div>
              </fieldset>

            </div>
          </div>
        </b-collapse>
      </div>


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

      <!-- Sidebar Footer: Run buttons -->
      <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>
        <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>
      </template>
    </b-sidebar>

    <!-- Show the actual graph -->
    <div id="graphs" class="graphs">
      <div class="form-inline">
        <button class="btn btn-primary blueish" @click="open_panel">
          Open configuration
        </button>
      </div>
    </div>

    <fieldset>
      <template v-if="result.graphs.length === 0">
        <p><i>Click "Run" to display graphs</i></p>
      </template>
      <template v-else>

        <div class="d-flex flex-wrap">
          <div class="w-50" v-for="x in result.graphs">
            <plotly-chart :graph="x" :key="x.id"/>
          </div>

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

          <div class="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>

    </fieldset>
  </div>

  <footer class="row no-gutter">
    <b-navbar type="dark" variant="dark">
      <a :href="app.org_url" target="_blank">
        <img src="assets/idm-logo.png" height="30px"/>
        <span class="nav-text" style="padding-left: 20px">
          &copy; {{ app.copyright_year }} Institute for Disease Modeling
        </span>
      </a>
      <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="app.org_url + '/terms'" target="_blank"><span class="nav-text">Terms</span></b-nav-item>
        <b-nav-item :href="app.org_url + '/privacy'" target="_blank"><span class="nav-text">Privacy</span></b-nav-item>
      </b-navbar-nav>
    </b-navbar>
  </footer>
  <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>
</section>
</body>


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