{% extends "layouts/layout.html" %}

{% block title %}{{algo}}{% endblock %}

{% block heading %}
  <h1>{{task }} - {{ algo }}</h1>
{% endblock %}

{% block content %}
    <div id="visualization"></div>
    <div id="interaction">
      {{ interactionView | safe }}
    </div>
    <div id="results"></div>
{% endblock %}

{% block script %}
<script>
    d = {{ graphJSON | safe }};
    Plotly.newPlot('visualization', d, {});

    function displayFeature() {
      var f = document.getElementById("features").value;
      var uri = '/{{ task }}/{{ algo }}/display-feature?feature='+f;
      var init = {method: 'get'};
      fetch( uri, init )
          .then(response => {
            if (!response.ok) {
              return response.text().then(t => { throw new Error(t || 'Failed to switch feature'); });
            }
            return response.json();
          })
          .then(update => Plotly.update('visualization', update.data, update.layout, [0]))
          .catch(err => console.log( 'Fetch Error :-S', err ));
    };

    {{ interactionScript | safe }}

    {{ parameterScript | safe }}
</script>
{% endblock %}