{% extends "report_base.html" %}

{% block title %}{{ title }}{% endblock %}
{% block items %}mappings{% endblock %}
{% block heading %}{{ fit_id }}{% endblock %}
{% block subtitle %}{{ opid }}{% endblock %}
{% block placeholder %}Search parameters, mappings, metrics …{% endblock %}

{% block badges %}{% for badge in badges %}<span class="badge">{{ badge.label }} <b>{{ badge.value }}</b></span>{% endfor %}{% endblock %}

{#
  Two tabs: "Report" is the report document (methods, results, references)
  followed by the overview, the results and the identifiability of the fit,
  "Fit mappings" the figures of the cost and weight and of the residuals of
  every fit mapping, the table of the metrics of every fit mapping and a card
  per fit mapping. A tab is a link with `data-tab`, its
  panel a `.tab-panel` with `data-panel`; the page opens on the report, or on
  the tab of the element its address names.
#}
{% block head %}
<style>
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* the groupings of the evaluation, one shown at a time */
.grouping-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.grouping-tab {
  border: 1px solid var(--line); background: var(--bg-soft); color: var(--fg-soft);
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer;
}
.grouping-tab.active { background: var(--accent); border-color: transparent; color: #fff; }
.grouping-panel { display: none; }
.grouping-panel.active { display: block; }
.warn.card { border-color: var(--outlier); }
/* a long id of a fit mapping breaks, its table stays in its card */
.wrap { overflow-wrap: anywhere; min-width: 12em; }

/* the report document: a text to read, numbered tables, equations, figures;
   its card has the width of the other cards, its lines a width to read */
.document { padding: 24px 32px; line-height: 1.6; overflow-x: auto; }
.document > * { max-width: 960px; }
.document .doc-head { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; margin-bottom: 12px; }
.document .doc-title { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
.document .downloads { margin-left: auto; color: var(--fg-soft); font-size: 13px; }
.document section { margin-bottom: 28px; }
.document section section { margin-bottom: 18px; }
.document h3 { margin: 24px 0 8px; color: var(--fg); font-size: 15.5px; font-weight: 650;
               text-transform: none; letter-spacing: 0; }
.document h4 { margin: 18px 0 6px; font-size: 14.5px; font-weight: 600; }
.document p { margin: 8px 0; }
.document table { width: auto; min-width: 60%; margin: 18px 0; }
.document caption { caption-side: top; text-align: left; color: var(--fg-soft);
                    font-size: 13px; line-height: 1.5; padding-bottom: 8px; }
.document th, .document td { padding: 5px 16px 5px 0; }
.document .equation { display: flex; gap: 16px; align-items: center; margin: 14px 0; overflow-x: auto; }
.document .equation math { flex: 1; }
.document .eqno { color: var(--fg-soft); }
.document figure { margin: 20px 0; }
.document figure img { width: auto; max-width: 100%; }
.document #references ol { margin: 0; padding-left: 1.8em; font-size: 13.5px; }
.document #references li { margin-bottom: 4px; }
@media (max-width: 700px) {
  .document { padding: 16px; }
  .document .downloads { margin-left: 0; }
}
</style>
{% endblock %}

{% block nav %}
    <a href="#report" data-tab="report" class="active">Report</a>
    <a href="#mappings" data-tab="mappings">Fit mappings</a>
{% endblock %}

{% block chips %}
    {% for kind in kinds %}
    <button class="chip" data-kind="{{ kind }}" aria-pressed="true">{{ kind }}</button>
    {% endfor %}
{% endblock %}

{% block footer %}{% for file in files %}<a href="{{ file.href }}">{{ file.label }}</a>{% if not loop.last %} · {% endif %}{% endfor %}{% endblock %}

{% block content %}
<div id="report" class="tab-panel active" data-panel="report">
{% if pdf_error %}
<p class="card warn">The PDF could not be created: {{ pdf_error }}. The Typst source <code>report.typ</code> is kept, every other output was written.</p>
{% endif %}
<article class="card document">
  <header class="doc-head">
    <p class="doc-title">{{ document_title }}</p>
    {% if downloads %}<span class="downloads">{% for file in downloads %}<a href="{{ file.href }}">{{ file.label }}</a>{% if not loop.last %} · {% endif %}{% endfor %}</span>{% endif %}
  </header>
  {{ report_html | safe }}
</article>

<section id="overview">
  <h2>Overview</h2>

  <h3>Fit</h3>
  <div class="card">
    <dl class="kv">
      {% for key, value in fit_info.items() %}
      <dt>{{ key }}</dt><dd class="mono">{{ value }}</dd>
      {% endfor %}
    </dl>
  </div>

  {% if parameters %}
  <h3>Parameters</h3>
  <div class="card">
    <table data-filter="row">
      <thead><tr>
        <th data-sort="text">parameter</th>
        {% if versioned_parameters %}<th data-sort="text">target</th>{% endif %}
        {% for pset in parameter_set_ids %}<th class="num" data-sort="num">{{ pset }}</th>{% endfor %}
        <th class="num" data-sort="num">lower</th><th class="num" data-sort="num">upper</th>
        <th data-sort="text">unit</th>
      </tr></thead>
      <tbody>
      {% for row in parameters %}
      <tr>
        <td class="mono">{{ row.pid }}</td>
        {% if versioned_parameters %}<td class="mono">{{ row.target }}</td>{% endif %}
        {% for value in row.set_values %}<td class="num mono">{{ value }}</td>{% endfor %}
        <td class="num mono">{{ row.lower }}</td><td class="num mono">{{ row.upper }}</td>
        <td>{{ row.unit }}</td>
      </tr>
      {% endfor %}
      </tbody>
    </table>
    {% if bound_warnings %}
    <p class="warn">{% for message in bound_warnings %}{{ message }}<br>{% endfor %}</p>
    {% endif %}
  </div>
  {% endif %}
  {% if hooks %}

  <h3>Networks</h3>
  <div class="card">
    <table data-filter="row">
      <thead><tr>
        <th data-sort="text">network</th><th data-sort="text">pattern</th>
        <th data-sort="text">layers</th><th data-sort="text">targets</th>
      </tr></thead>
      <tbody>
      {% for hook in hooks %}
      <tr><td class="mono">{{ hook.name }}</td><td>{{ hook.kind }}</td><td class="mono">{{ hook.description }}</td><td class="mono">{{ hook.targets }}</td></tr>
      {% endfor %}
      </tbody>
    </table>
    <table data-filter="row">
      <thead><tr>
        <th data-sort="text">array</th>
        <th class="num" data-sort="num">elements<span class="hint" tabindex="0" data-tip="{{ hints['elements'] }}">?</span></th>
        <th class="num" data-sort="num">estimated<span class="hint" tabindex="0" data-tip="{{ hints['estimated'] }}">?</span></th>
        {% for pset in parameter_set_ids %}<th class="num" data-sort="num">{{ pset }} min</th><th class="num" data-sort="num">{{ pset }} max</th><th class="num" data-sort="num">{{ pset }} norm<span class="hint" tabindex="0" data-tip="{{ hints['norm'] }}">?</span></th>{% endfor %}
        <th class="num" data-sort="num">lower</th><th class="num" data-sort="num">upper</th>
      </tr></thead>
      <tbody>
      {% for row in arrays %}
      <tr>
        <td class="mono">{{ row.label }}</td>
        <td class="num mono">{{ row.elements }}</td><td class="num mono">{{ row.estimated }}</td>
        {% for values in row.set_values %}{% for value in values %}<td class="num mono">{{ value }}</td>{% endfor %}{% endfor %}
        <td class="num mono">{{ row.lower }}</td><td class="num mono">{{ row.upper }}</td>
      </tr>
      {% endfor %}
      </tbody>
    </table>
    {% if array_bound_warnings %}
    <p class="warn">{% for message in array_bound_warnings %}{{ message }}<br>{% endfor %}</p>
    {% endif %}
  </div>
  {% endif %}

  <h3>Settings</h3>
  <div class="card">
    <table data-filter="row">
      <thead><tr><th data-sort="text">setting</th><th data-sort="text">value</th></tr></thead>
      <tbody>
      {% for key, value in settings.items() %}
      <tr><td>{{ key }}</td><td class="mono">{{ value }}</td></tr>
      {% endfor %}
      </tbody>
    </table>
  </div>

  <h3>Data</h3>
  <div class="card">
    <table>
      <thead><tr>
        <th data-sort="text">experiment</th>
        {% for kind in kinds %}<th class="num" data-sort="num">{{ kind }}</th>{% endfor %}
        <th class="num" data-sort="num">mappings</th>
      </tr></thead>
      <tbody>
      {% for row in data_summary %}
      <tr><td>{{ row.experiment }}</td>
        {% for count in row.counts %}<td class="num">{{ count }}</td>{% endfor %}
        <td class="num">{{ row.total }}</td></tr>
      {% endfor %}
      </tbody>
      <tfoot><tr class="total"><td>total</td>
        {% for count in data_total.counts %}<td class="num">{{ count }}</td>{% endfor %}
        <td class="num">{{ data_total.total }}</td></tr></tfoot>
    </table>
  </div>
</section>

<section id="results">
  <h2>Results</h2>

  <h3>Metrics</h3>
  <div class="card">
    <table data-filter="row">
      <thead><tr>{% for column in metrics_columns %}
        <th class="{{ 'num' if not loop.first and column.name != 'kind' }}"
            data-sort="{{ 'text' if loop.first or column.name == 'kind' else 'num' }}">{{ column.name }}{% if column.hint %}<span class="hint" tabindex="0" data-tip="{{ column.hint }}">?</span>{% endif %}</th>
      {% endfor %}</tr></thead>
      <tbody>
      {% for row in metrics %}
      <tr>{% for value in row %}<td class="{{ 'num mono' if not loop.first and not loop.index0 == 1 }}">{{ value }}</td>{% endfor %}</tr>
      {% endfor %}
      </tbody>
    </table>
  </div>

  {% if run_plots %}
  <h3>Optimization runs</h3>
  <div class="grid">
    {% for plot in run_plots %}
    <div class="card"><figure>
      <img loading="lazy" src="{{ plot.src }}" alt="{{ plot.caption }}">
      <figcaption>{{ plot.caption }}{% if plot.hint %}<span class="hint" tabindex="0" data-tip="{{ plot.hint }}">?</span>{% endif %}</figcaption>
    </figure></div>
    {% endfor %}
  </div>
  {% endif %}

  {% if result_plots %}
  <h3>Predictions and costs</h3>
  <div class="grid">
    {% for plot in result_plots %}
    <div class="card{% if plot.wide %} wide{% endif %}"><figure>
      <img loading="lazy" src="{{ plot.src }}" alt="{{ plot.caption }}">
      <figcaption>{{ plot.caption }}{% if plot.hint %}<span class="hint" tabindex="0" data-tip="{{ plot.hint }}">?</span>{% endif %}</figcaption>
    </figure></div>
    {% endfor %}
  </div>
  {% endif %}

  {% if runs %}
  <h3>Optimization runs ({{ runs | length }})</h3>
  <div class="card">
    <table data-filter="row">
      <thead><tr>{% for column in run_columns %}
        <th class="{{ 'num' if not loop.first }}" data-sort="{{ 'text' if loop.first else 'num' }}">{{ column }}</th>
      {% endfor %}</tr></thead>
      <tbody>
      {% for row in runs %}<tr>{% for value in row %}<td class="{{ 'num mono' if not loop.first }}">{{ value }}</td>{% endfor %}</tr>{% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}
</section>

{% if groupings %}
<section id="evaluation">
  <h2>Evaluation</h2>
  <div class="grouping-tabs" role="tablist">
    {% for grouping in groupings %}
    <button type="button" class="grouping-tab{% if loop.first %} active{% endif %}" data-grouping="{{ grouping.name }}" aria-pressed="{{ 'true' if loop.first else 'false' }}">by {{ grouping.name }}</button>
    {% endfor %}
  </div>
  {% for grouping in groupings %}
  <div class="grouping-panel{% if loop.first %} active{% endif %}" data-grouping="{{ grouping.name }}">
  <div class="grid">
    {% for plot in grouping.plots %}
    <div class="card{% if plot.wide %} wide{% endif %}"><figure>
      <img loading="lazy" src="{{ plot.src }}" alt="{{ plot.caption }}">
      <figcaption>{{ plot.caption }}</figcaption>
    </figure></div>
    {% endfor %}
  </div>
  <div class="card">
    <table data-filter="row">
      <thead><tr>{% for column in grouping.columns %}
        <th class="{{ 'num' if loop.index0 > 2 }}" data-sort="{{ 'text' if loop.index0 <= 2 else 'num' }}">{{ column }}{% if hints[column] %}<span class="hint" tabindex="0" data-tip="{{ hints[column] }}">?</span>{% endif %}</th>
      {% endfor %}</tr></thead>
      <tbody>
      {% for row in grouping.rows %}<tr data-kind="{{ grouping.kinds[loop.index0] }}">{% for value in row %}<td class="{{ 'num mono' if loop.index0 > 2 }}">{{ value }}</td>{% endfor %}</tr>{% endfor %}
      </tbody>
    </table>
  </div>
  </div>
  {% endfor %}
</section>
{% endif %}

{% if fisher or identifiability %}
<!-- the local analysis and the profiles are one section under one heading -->
<section id="identifiability">
  <h2>Identifiability</h2>
{% endif %}
{% if fisher %}
  <h3>Fisher information</h3>
  <p>The curvature of the cost at the parameters, <code>FIM = J'J</code> with the jacobian of the weighted residuals, from which the standard errors and the correlations of the parameters follow. It is a local statement: the intervals are exact for a cost which is a quadratic around the optimum and approximate for a non-linear model, where the profile likelihood is the one to trust. The errors and the intervals are computed in the space the optimizer searches, so an interval on a logarithmic scale is not symmetric around the value.</p>
  {% if not fisher.identifiable %}
  <p class="warn">The information does not have full rank: the data does not constrain every direction in parameter space, so the errors and the correlations of the unconstrained directions cannot be read. A parameter which no data informs is such a direction.</p>
  {% endif %}
  <div class="grid">
    <div class="card wide">
      <h3>Analysis</h3>
      <dl class="kv">
        {% for key, value in fisher.info.items() %}<dt>{{ key }}</dt><dd class="mono">{{ value }}</dd>{% endfor %}
        <dt>eigenvalues<span class="hint" tabindex="0" data-tip="Eigenvalues of the Fisher information, largest first. A small eigenvalue is a combination of parameters the data does not determine; a spread over orders of magnitude is a sloppy model.">?</span></dt>
        <dd class="mono">{{ fisher.eigenvalues | join(", ") }}</dd>
      </dl>
    </div>
    <!-- the table of seven columns needs the width of the page -->
    <div class="card wide">
      <h3>Parameters</h3>
      <table data-filter="row">
        <thead><tr>{% for column in fisher.columns %}
          <th{% if column.numeric %} class="num"{% endif %} data-sort="{{ 'num' if column.numeric else 'text' }}">{{ column.name }}{% if column.hint %}<span class="hint" tabindex="0" data-tip="{{ column.hint }}">?</span>{% endif %}</th>
        {% endfor %}</tr></thead>
        <tbody>
        {% for row in fisher.rows %}
        <tr>{% for value in row %}<td{% if fisher.columns[loop.index0].numeric %} class="num mono"{% endif %}>{{ value }}</td>{% endfor %}</tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <div class="card">
    <h3>Correlation<span class="hint" tabindex="0" data-tip="Correlation of the parameters from the covariance. A pair at plus or minus one is a pair the data only determines together, i.e. the fit trades one against the other.">?</span></h3>
    {% if fisher.note %}<p>{{ fisher.note }}</p>{% endif %}
    <table>
      <thead><tr><th></th>{% for pid in fisher.pids %}<th class="num">{{ pid }}</th>{% endfor %}</tr></thead>
      <tbody>
      {% for pid in fisher.pids %}
      <tr><td>{{ pid }}</td>{% for value in fisher.correlation[loop.index0] %}<td class="num mono">{{ value }}</td>{% endfor %}</tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
{% endif %}

{% if identifiability %}
  <style>
    .tag.identifiable { background: var(--training); }
    .tag.non_identifiable_lower, .tag.non_identifiable_upper { background: var(--outlier); }
    .tag.non_identifiable { background: #c92a2a; }
    .tag.structural { background: #862e9c; }
  </style>
  <h3>Profile likelihood</h3>
  <p>Profile likelihood of the parameters: every parameter is fixed at values around the optimum and the other parameters are optimized again. A parameter is identifiable if its profile crosses the threshold of the confidence level on both sides of the optimum, i.e., its confidence interval is finite; practically non-identifiable if the profile stays below the threshold up to a bound of the parameter; structurally non-identifiable if the profile is flat. An open side of an interval is shown as the bound of the parameter.</p>
  {% if identifiability.better_optimum %}
  <p class="warn">A profile found a cost below the cost of the parameter set, the fit did not converge to the optimum. The threshold is relative to the lowest cost.</p>
  {% endif %}
  <div class="grid">
    <div class="card wide">
      <h3>Analysis</h3>
      <dl class="kv">
        {% for key, value in identifiability.info.items() %}<dt>{{ key }}</dt><dd class="mono">{{ value }}</dd>{% endfor %}
      </dl>
    </div>
    <!-- the table of seven columns needs the width of the page -->
    <div class="card wide">
      <h3>Parameters</h3>
      <table data-filter="row">
        <thead><tr>
          <th data-sort="text">parameter</th><th class="num" data-sort="num">value</th>
          <th class="num" data-sort="num">ci lower</th><th class="num" data-sort="num">ci upper</th>
          <th data-sort="text">unit</th><th data-sort="text">identifiability</th>
          <th class="num" data-sort="num">points</th>
        </tr></thead>
        <tbody>
        {% for row in identifiability.rows %}
        <tr>
          <td class="mono">{{ row.pid }}</td><td class="num mono">{{ row.value }}</td>
          <td class="num mono">{{ row.ci_lower }}</td><td class="num mono">{{ row.ci_upper }}</td>
          <td>{{ row.unit }}</td>
          <td><span class="tag identifiability {{ row.identifiability }}">{{ row.label }}</span>{% if not row.converged %} <span class="tag outlier">not converged</span>{% endif %}</td>
          <td class="num mono">{{ row.n_points }}</td>
        </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% if identifiability.plots %}
  <div class="grid">
    {% for plot in identifiability.plots %}
    <div class="card wide"><figure>
      <img loading="lazy" src="{{ plot.src }}" alt="{{ plot.caption }}">
      <figcaption>{{ plot.caption }}{% if plot.hint %}<span class="hint" tabindex="0" data-tip="{{ plot.hint }}">?</span>{% endif %}</figcaption>
    </figure></div>
    {% endfor %}
  </div>
  {% endif %}
  {% if identifiability.profile_plots %}
  <h3>Profiles</h3>
  <div class="grid">
    {% for plot in identifiability.profile_plots %}
    <div class="card"><figure>
      <img loading="lazy" src="{{ plot.src }}" alt="{{ plot.caption }}">
      <figcaption>{{ plot.caption }}{% if plot.hint %}<span class="hint" tabindex="0" data-tip="{{ plot.hint }}">?</span>{% endif %}</figcaption>
    </figure></div>
    {% endfor %}
  </div>
  {% endif %}
{% endif %}
{% if fisher or identifiability %}
</section>
{% endif %}
</div>

<section id="mappings" class="tab-panel" data-panel="mappings">
  <h2>Fit mappings ({{ mappings | length }})</h2>

  {% if mapping_plots %}
  <h3>Cost, weight and residuals of the fit mappings</h3>
  <div class="grid">
    {% for plot in mapping_plots %}
    <div class="card{% if plot.wide %} wide{% endif %}"><figure>
      <img loading="lazy" src="{{ plot.src }}" alt="{{ plot.caption }}">
      <figcaption>{{ plot.caption }}{% if plot.hint %}<span class="hint" tabindex="0" data-tip="{{ plot.hint }}">?</span>{% endif %}</figcaption>
    </figure></div>
    {% endfor %}
  </div>
  {% endif %}

  <h3>Metrics of the fit mappings</h3>
  <div class="card">
    <table data-filter="row">
      <thead><tr>{% for column in mapping_metrics_columns %}
        <th class="{{ 'num' if column in numeric_columns }}"
            data-sort="{{ 'num' if column in numeric_columns else 'text' }}">{{ column }}{% if hints.get(column) %}<span class="hint" tabindex="0" data-tip="{{ hints[column] }}">?</span>{% endif %}</th>
      {% endfor %}</tr></thead>
      <tbody>
      {% for row in mapping_metrics %}
      <tr data-kind="{{ row.kind }}">
        <td>{{ row.parameter_set }}</td><td>{{ row.experiment }}</td>
        <td class="mono wrap">{{ row.mapping }}</td>
        <td><span class="tag {{ row.kind }}">{{ row.kind }}</span></td>
        <td class="num">{{ row.n }}</td>
        <td class="num mono">{{ row.mse }}</td><td class="num mono">{{ row.rmse }}</td>
        <td class="num mono">{{ row.nrmse }}</td><td class="num mono">{{ row.rmse_w }}</td>
        <td class="num mono">{{ row.r2 }}</td><td class="num mono">{{ row.within_2fold }}</td>
      </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>

  <h3>Data and simulation of the fit mappings</h3>
  {% for mapping in mappings %}
  <div class="card mapping" data-kind="{{ mapping.kind }}" data-filter="card">
    <header>
      <span class="name mono">{{ mapping.mapping }}</span>
      <span class="exp">{{ mapping.experiment }} · {{ mapping.observable }}</span>
      <span class="tag {{ mapping.kind }}">{{ mapping.kind }}</span>
      <span class="metrics">
        {% for key, value in mapping.metrics.items() %}<span>{{ key }} <b>{{ value }}</b></span>{% endfor %}
      </span>
    </header>
    <div class="grid">
      {% for plot in mapping.plots %}
      <figure>
        <img loading="lazy" src="{{ plot.src }}" alt="{{ plot.caption }}">
        <figcaption>{{ plot.caption }}{% if plot.hint %}<span class="hint" tabindex="0" data-tip="{{ plot.hint }}">?</span>{% endif %}</figcaption>
      </figure>
      {% endfor %}
    </div>
  </div>
  {% endfor %}
  <p class="empty hidden" data-empty>No fit mapping matches the search.</p>
</section>

<script>
(function () {
  "use strict";
  // ---- the tabs: a link with data-tab shows the panel of that name ------
  const tabs = Array.from(document.querySelectorAll("nav.sections a[data-tab]"));
  const panels = Array.from(document.querySelectorAll(".tab-panel"));
  function show(name) {
    for (const tab of tabs) tab.classList.toggle("active", tab.dataset.tab === name);
    for (const panel of panels) panel.classList.toggle("active", panel.dataset.panel === name);
  }
  // the tab of the element an address names, e.g. a table of the report
  function tabOf(hash) {
    const target = hash.length > 1 ? document.getElementById(decodeURIComponent(hash.slice(1))) : null;
    const panel = target ? target.closest(".tab-panel") : null;
    return panel ? panel.dataset.panel : null;
  }
  for (const tab of tabs) {
    tab.addEventListener("click", (event) => {
      event.preventDefault();
      show(tab.dataset.tab);
      history.replaceState(null, "", "#" + tab.dataset.tab);
      window.scrollTo(0, 0);
    });
  }
  window.addEventListener("hashchange", () => {
    const name = tabOf(location.hash);
    if (name) show(name);
  });
  show(tabOf(location.hash) || "report");

  // ---- the groupings of the evaluation: a button shows its grouping -----
  const groupingTabs = Array.from(document.querySelectorAll(".grouping-tab"));
  const groupingPanels = Array.from(document.querySelectorAll(".grouping-panel"));
  for (const tab of groupingTabs) {
    tab.addEventListener("click", () => {
      for (const other of groupingTabs) {
        const active = other === tab;
        other.classList.toggle("active", active);
        other.setAttribute("aria-pressed", active ? "true" : "false");
      }
      for (const panel of groupingPanels) {
        panel.classList.toggle("active", panel.dataset.grouping === tab.dataset.grouping);
      }
    });
  }
})();
</script>
{% endblock %}