<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Associations</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vega@5.27.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.17.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.24.0"></script>

    <style>
    #vis {
        width: 100%;
        margin: 1em;
    }
    #stats {
        width: 100%;
        margin: 1em;
    }
    </style>
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Association with the phenotype
      </h1>
    </div>
    <!-- Container for the visualization -->
    <div class="container">
      <p class="subtitle">
        Each bar denotes the {{statistic}} of the metabolite across the phenotype
        with a significant FDR-corrected test (q<{{q_threshold}}). Hover over the bars
        to see the p values, q values and test statistics. The downloadable CSV includes all
        tests (even non-significant ones).
        All fluxes are log-transformed and standardized so statistics are roughly comparable.
      </p>
    <div id="stats"></div>
    <a href="#" class="button is-primary" onclick="download_data('tests')">Download association test results as CSV...</a>
    </div>
    <br><br>
    <div class="container">
      <p class="subtitle">
        The plot on the left shows a particular metabolite {{direction}} flux by phenotype for significant
        interactions. Those show individual metabolite associations with the phenotype. Hover over
        individual points to see the metabolite annotations.<br>
        The plot on the right shows the overall cross-validation performance of
        a regularized linear regression in explaining the phenotype. This uses a LASSO
        regression with the regularization parameter learned from a 2-fold cross-validation.
        The predictions themselves are all based on leave-one-out cross-validation. It can be
        used as an estimate of the global assocaition of the phenotype with the flux state.
      </p>
    <div id="vis"></div>
    <a href="#" class="button is-primary" onclick="download_data('fluxes')">Download {{direction}} fluxes as CSV...</a>
    </div>
    <br>
    <div class="container">
    <h2 class="title">Model performance</h2>
    {% if type == "quantitative" %}
     <p>training R<sup>2</sup> = {{score[2]}}</p>
     <p> cross-validation R<sup>2</sup> = {{score[0]}} &#177; {{score[1]}} </p>
    {% else %}
     <p>training accuracy = {{score[2]}}</p>
     <p> cross-validation accuracy = {{score[0]}} &#177; {{score[1]}}</p>
    {% endif %}
    </div>
    <script>
      // Assign the specification to a local variable vlSpec.
      var statSpec = {
        $schema: "https://vega.github.io/schema/vega-lite/v5.json",
        width: {{cwidth}},
        height: 100,
        data: {
            values: {{tests | safe}}
        },
        mark: {
            type: "bar",
            tooltip: {content: "data"}
        },
        encoding: {
            x: {
                field: "metabolite",
                type: "nominal",
                sort: "y"
            },
            y: {
                field: "statistic",
                type: "quantitative",
                axis: {title: "{{statistic}}"}
            },
            color: {
                field: "statistic",
                type: "quantitative",
                scale: {scheme: "magma"},
                legend: false
            },
        }
      }
      var vlSpec = {
        $schema: "https://vega.github.io/schema/vega-lite/v5.json",
        hconcat: [{
              width: 200,
              height: 300,
              data: {
                  values: {{exchanges | safe}}
              },
              selection: {
                metab: {
                  type: "single",
                  fields: ["metabolite"],
                  bind: {
                    input: "select",
                    name: "metabolite: ",
                    options: {{metabolites | safe}}
                  }
                }
              },
              transform: [
                {filter: {selection: "metab"}},
                {calculate: "random()-0.5", as: "jitter"}
              ],
              title: "{{direction}}",
              mark: {
                  type: "point",
                  tooltip: {content: "data"},
                  filled: true,
                  size: 60
              },
              encoding: {
                  y: {
                      field: "flux",
                      type: "quantitative",
                      scale: {type: "log"},
                      axis: {title: "flux [mmol/gDW/h]", grid: false}
                  },
                  x: {
                      field: "{{variable}}",
                      type: "{{type}}",
                      axis: {title: "{{variable}}", grid: false}
                  },
                  {% if type == "nominal" %}
                  xOffset: {
                      field: "jitter",
                      type: "quantitative",
                      scale: {domain: [-0.6, 0.6]}
                 }
                 {% endif %}
              }
          }, {
            width: 400,
            height: 300,
            data: {
                values: {{fitted | safe}}
            },
            {% if type == "quantitative" %}
            title: "regression [LASSO+LOOCV]",
            mark: {
                type: "point",
                tooltip: true
            },
            encoding: {
                y: {
                    field: "predicted",
                    type: "quantitative",
                    axis: {title: "predicted"}
                },
                x: {
                    field: "real",
                    type: "quantitative",
                    axis: {title: "real value"}
                },
            }
            {% else %}
            title: "confusion matrix [LASSO+LOOCV]",
            mark: {
                type: "rect",
                width: 200,
                tooltip: true
            },
            encoding: {
                fill: {
                  aggregate: "count",
                  field: "predicted",
                  type: "quantitative",
                  legend: null,
                  scale: {domainMin: 0, scheme: "greys"}
                }
                ,
                x: {
                    field: "real",
                    type: "nominal",
                    axis: {title: "real value"}
                },
                y: {
                  field: "predicted",
                    type: "nominal",
                    axis: {title: "predicted value"}
                }
            }
            {% endif %}
        }]
      };

      // Embed the visualization in the container with id `vis`
      vegaEmbed("#stats", statSpec, {renderer: "svg"}).then(function(r) {
        svg = document.querySelector("#stats svg");
        svg.setAttribute("width", "100%");
        svg.setAttribute("height", "auto");
      });

      vegaEmbed("#vis", vlSpec, {renderer: "svg"}).then(function(r) {
        svg = document.querySelector("#vis svg");
        svg.setAttribute("width", "100%");
        svg.setAttribute("height", "auto");
      });

      {% include "blobify.js" %}
    </script>
  </section>
  </body>
</html>
