Initial version of demo

This commit introduces the demo functionality.
The task assignment has been removed at the moment,
as this will be changed in a future commit.

9 files changed, 288 insertions, 195 deletions

diff --git a/app/templates/_partials/modals.html b/app/templates/_partials/modals.html
new file mode 100644
index 0000000..1ffd85f
--- /dev/null
+++ b/app/templates/_partials/modals.html
@@ -0,0 +1,21 @@
+{% macro modal(id, title, message) %}
+<!-- Modal -->
+<div class="modal fade" id="{{ id }}Modal" tabindex="-1" role="dialog" aria-labelledby="{{ id }}ModalTitle" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="{{ id }}LongTitle">{{ title }}</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        {{ message }}
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+{% endmacro %}
diff --git a/app/templates/admin/annotations_by_dataset.html b/app/templates/admin/annotations_by_dataset.html
index 5ad98b6..eb7a7e8 100644
--- a/app/templates/admin/annotations_by_dataset.html
+++ b/app/templates/admin/annotations_by_dataset.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block styles %}
-{{super()}}
+{{ super() }}
 <link rel="stylesheet" href="{{url_for('static', filename='view_annotation.css')}}">{% endblock %}
 
 {% block app_content %}
diff --git a/app/templates/admin/manage_datasets.html b/app/templates/admin/manage_datasets.html
index f14fe81..f68259f 100644
--- a/app/templates/admin/manage_datasets.html
+++ b/app/templates/admin/manage_datasets.html
@@ -42,18 +42,20 @@
 		<thead class="thead-dark">
 			<th scope="col">ID</th>
 			<th scope="col">Name</th>
-      <th scope="col">Assigned Tasks</th>
-      <th scope="col">Completed Tasks</th>
-      <th scope="col">Percentage</th>
+			<th scope="col">Demo</th>
+			<th scope="col">Assigned Tasks</th>
+			<th scope="col">Completed Tasks</th>
+			<th scope="col">Percentage</th>
 		</thead>
 		{% for entry in overview %}
 		<tr>
-      <th scope="row">{{ entry['id'] }}</th>
-      <td>{{ entry['name'] }}</td>
-      <td>{{ entry['assigned'] }}</td>
-      <td>{{ entry['completed'] }}</td>
-      <td>{{ entry['percentage'] }}</td>
-    </tr>
+			<th scope="row">{{ entry['id'] }}</th>
+			<td>{{ entry['name'] }}</td>
+			<td>{% if entry['demo'] %}Yes{% else %}No{% endif %}</td>
+			<td>{{ entry['assigned'] }}</td>
+			<td>{{ entry['completed'] }}</td>
+			<td>{{ entry['percentage'] }}</td>
+		</tr>
 		{% endfor %}
 		</tr>
 	</table>
diff --git a/app/templates/admin/manage_users.html b/app/templates/admin/manage_users.html
index 5c44a48..8788958 100644
--- a/app/templates/admin/manage_users.html
+++ b/app/templates/admin/manage_users.html
@@ -1,70 +1,72 @@
 {% extends "base.html" %}
 
 {% block app_content %}
-<h1>Manage Users</h1>
+  <h1>Manage Users</h1>
 
-<div class="col-lg-3">
+  <div class="col-lg-3">
     <div class="row">
-        <form class="form" action="" method="POST">
-            {{ form.hidden_tag() }}
-	    {{ form.user  }}
-            {{ form.delete(hidden='true', id='form-submit') }}
-            <!-- Button trigger modal -->
-            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">
-            Delete
-            </button>
-        </form>
+      <form class="form" action="" method="POST">
+        {{ form.hidden_tag() }}
+        {{ form.user  }}
+        {{ form.delete(hidden='true', id='form-submit') }}
+        <!-- Button trigger modal -->
+        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">
+          Delete
+        </button>
+      </form>
     </div>
-</div>
+  </div>
 
-<!-- Modal -->
-<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-	<h5 class="modal-title" id="deleteModalLabel">Delete Dataset</h5>
-      </div>
-      <div class="modal-body">
-	You are about to delete the user <span id="user-name"></span> <b>and</b> all associated tasks and annotations. Are you sure?
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-        <button type="button" class="btn btn-success success" id="modal-confirm">Confirm</button>
+  <!-- Modal -->
+  <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="deleteModalLabel">Delete Dataset</h5>
+        </div>
+        <div class="modal-body">
+          You are about to delete the user <span id="user-name"></span> <b>and</b> all associated tasks and annotations. Are you sure?
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+          <button type="button" class="btn btn-success success" id="modal-confirm">Confirm</button>
+        </div>
       </div>
     </div>
   </div>
-</div>
 
-<br>
-<h1>User Overview</h1>
-<article class="overview">
-	<table class="table table-striped">
-		<thead class="thead-dark">
-			<th scope="col">ID</th>
-			<th scope="col">Username</th>
-			<th scope="col">Email</th>
-			<th scope="col">Confirmed</th>
-			<th scope="col">Last Active</th>
-			<th scope="col">Admin</th>
-		</thead>
-		{% for user in users %}
-		<tr>
-			<th scope="row">{{ user.id }}</th>
-			<td>{{ user.username }}</td>
-			<td>{{ user.email }}</td>
-			<td>{% if user.is_confirmed %}Yes{% else %}No{% endif %}</td>
-			<td>{{ user.last_active }}</td>
-			<td>{% if user.is_admin %}Yes{% else %}{% endif %}</td>
-		</tr>
-		{% endfor %}
-		</tr>
-	</table>
-</article>
+  <br>
+  <h1>User Overview</h1>
+  <article class="overview">
+    <table class="table table-striped">
+      <thead class="thead-dark">
+        <th scope="col">ID</th>
+        <th scope="col">Username</th>
+        <th scope="col">Email</th>
+        <th scope="col">Confirmed?</th>
+        <th scope="col">Introduced?</th>
+        <th scope="col">Last Active (UTC)</th>
+        <th scope="col">Admin?</th>
+      </thead>
+      {% for user in users %}
+        <tr>
+          <th scope="row">{{ user.id }}</th>
+          <td>{{ user.username }}</td>
+          <td>{{ user.email }}</td>
+          <td>{% if user.is_confirmed %}Yes{% else %}No{% endif %}</td>
+          <td>{% if user.is_introduced %}Yes{% else %}No{% endif %}</td>
+          <td>{{ user.last_active }}</td>
+          <td>{% if user.is_admin %}Yes{% else %}{% endif %}</td>
+        </tr>
+      {% endfor %}
+      </tr>
+    </table>
+  </article>
 
-<script>
-var conf = document.getElementById("modal-confirm");
-conf.onclick = function() {
-	document.getElementById("form-submit").click();
-};
-</script>
+  <script>
+    var conf = document.getElementById("modal-confirm");
+    conf.onclick = function() {
+      document.getElementById("form-submit").click();
+    };
+  </script>
 {% endblock %}
diff --git a/app/templates/annotate/index.html b/app/templates/annotate/index.html
index 106ef2a..f4172b6 100644
--- a/app/templates/annotate/index.html
+++ b/app/templates/annotate/index.html
@@ -1,12 +1,13 @@
 {% extends "base.html" %}
+{% import "_partials/modals.html" as modals %}
 
 {% block styles %}
-{{super()}}
+{{ super() }}
 <link rel="stylesheet" href="{{url_for('static', filename='annotate.css')}}">
 {% endblock %}
 
 {% block app_content %}
-<h1>{{ task.dataset.name }}</h1>
+<h1>{{ title }}</h1>
 
 <div id="rubric" class="row">
 	<div class="col-md-12">
@@ -18,54 +19,25 @@
 
 <div id="wrap-buttons" class="row">
 	<div class="col-md-6 text-left">
-	<button class="btn btn-primary float-md-left" type="button" id="btn-reset">Reset</button>
+		<button class="btn btn-primary float-md-left" type="button" 
+			id="btn-reset">Reset</button>
 	</div>
 	<div class="col-md-6 text-right">
-	<button class="btn btn-warning float-md-right" type="button" id="btn-none">No Changepoints</button>
-	<button class="btn btn-success float-md-right" id="btn-submit" type="button">Submit</button>
+		<button class="btn btn-warning float-md-right" type="button" 
+			id="btn-none">No change points</button>
+		<button class="btn btn-success float-md-right" id="btn-submit" 
+			type="button">Submit</button>
 	</div>
 </div>
 <br>
 
-<!-- Modal -->
-<div class="modal fade" id="submitNoCPModal" tabindex="-1" role="dialog" aria-labelledby="submitNoCPModalTitle" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="submitNoCPModalLongTitle">No Changepoints Selected</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-	      Please use the "No Changepoints" button when you think there are no changepoints in the time series.
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-      </div>
-    </div>
-  </div>
-</div>
+{{ modals.modal("submitNoCP", "No Change Points Selected", "Please use the 
+\"No Change Points\" button when you think there are no change points in the 
+time series.") }}
 
-<!-- Modal -->
-<div class="modal fade" id="NoCPYesCPModal" tabindex="-1" role="dialog" aria-labelledby="NoCPYesCPModalTitle" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="NoCPYesCPModalLongTitle">Changepoints Selected</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-	      There are selected changepoints, please click the Reset button before clicking the "No Changepoints" button.
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-      </div>
-    </div>
-  </div>
-</div>
+{{ modals.modal("NoCPYesCP", "Change Points Selected", "There are selected 
+change points, please click the Reset button before clicking the \"No change 
+points\" button.") }}
 
 <h3>Selected Changepoints</h3>
 <div id="changepoint-table">
@@ -79,7 +51,7 @@
 <script src="{{ url_for('static', filename='js/makeChart.js') }}"></script>
 <script src="{{ url_for('static', filename='js/updateTable.js') }}"></script>
 <script src="{{ url_for('static', filename='js/buttons.js') }}"></script>
-<script>makeChart({{ data.chart_data | safe }});</script>
+<script>makeChart("#graph", {{ data.chart_data | safe }});</script>
 <script>
 // reset button
 var reset = document.getElementById("btn-reset");
@@ -87,12 +59,12 @@ reset.onclick = resetOnClick;
 // no changepoint button
 var nocp = document.getElementById("btn-none");
 nocp.onclick = function() {
-	noCPOnClick({{ task.id }});
+	noCPOnClick({{ identifier }});
 };
 // submit button
 var submit = document.getElementById("btn-submit");
 submit.onclick = function() {
-	submitOnClick({{ task.id }});
+	submitOnClick({{ identifier }});
 };
 </script>
 {% endblock %}
diff --git a/app/templates/base.html b/app/templates/base.html
index 8bc31dc..f11760a 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -2,12 +2,13 @@
 {% import "bootstrap/utils.html" as util %}
 
 {% block styles %}
-{{ super() }}
+  {{ super() }}
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/global.css') }}">
   <link rel="stylesheet" href="{{ url_for('static', filename='sticky_footer.css') }}">
 {% endblock %}
 
 {% block title %}
-  {% if title %}{{ title }} -- AnnotateChange{% else %}Welcome to AnnotateChange{% endif %}
+  {% if title %}{{ title }} &middot; AnnotateChange{% else %}Welcome to AnnotateChange{% endif %}
 {% endblock %}
 
 {% block navbar %}
@@ -28,13 +29,13 @@
         </ul>
         <ul class="nav navbar-nav navbar-right">
           {% if current_user.is_anonymous %}
-          <li><a href="{{ url_for('auth.login') }}">Login</a></li>
-	  <li><a href="{{ url_for('auth.register') }}">Register</a></li>
+            <li><a href="{{ url_for('auth.login') }}">Login</a></li>
+            <li><a href="{{ url_for('auth.register') }}">Register</a></li>
           {% else %}
-	  {% if current_user.is_admin %}
-		<li><a href="/admin" style="color: red;">Admin Panel</a></li>
-	  {% endif %}
-          <li><a href="{{ url_for('auth.logout') }}">Logout</a></li>
+            {% if current_user.is_admin %}
+              <li><a href="{{ url_for('admin.index') }}" style="color: red;">Admin Panel</a></li>
+            {% endif %}
+            <li><a href="{{ url_for('auth.logout') }}">Logout</a></li>
           {% endif %}
         </ul>
       </div>
@@ -44,19 +45,13 @@
 
 {% block content %}
   <main class="container">
-
-    {{ util.flashed_messages(dismissible=True) }}
-
-    {% block app_content %}
-    {% endblock %}
+  {{ util.flashed_messages(dismissible=True) }}
+  {% block app_content %}
+  {% endblock %}
   </main>
   <footer class="fixed-bottom">
-	<div class="container">
-		<span class="text-muted">This is AnnotateChange version {{ 
-			config.APP_VERSION }}. For questions or comments, 
-			please contact <a 
-		      href="mailto:gvandenburg@turing.ac.uk">Gertjan van den 
-		      Burg</a>.</span>
-  	</div>
+    <div class="container">
+      <span class="text-muted">This is AnnotateChange version {{ config.APP_VERSION }}. For questions or comments, please <a href="mailto:annotatechange@gmail.com">send us an email</a>.</span>
+    </div>
   </footer>
 {% endblock %}
diff --git a/app/templates/demo/evaluate.html b/app/templates/demo/evaluate.html
new file mode 100644
index 0000000..b148f66
--- /dev/null
+++ b/app/templates/demo/evaluate.html
@@ -0,0 +1,49 @@
+{% extends "base.html" %}
+{% import 'bootstrap/wtf.html' as wtf %}
+
+{% block styles %}
+{{ super() }}
+<link rel="stylesheet" href="{{url_for('static', filename='css/demo/evaluate.css')}}">
+{% endblock %}
+
+{% block app_content %}
+<h1>{{ title }}</h1>
+
+<div id="lesson" class="row">
+  <div class="col-md-8">
+    {{ text | safe }}
+  </div>
+</div>
+
+<div class="graph-wrapper">
+	<div class="row">
+		<p><b>Your annotation:</b></p>
+	</div>
+	<div id="graph_user"></div>
+	<div class="row">
+		<p><b>Ground truth:</b></p>
+	</div>
+	<div id="graph_true"></div>
+</div>
+
+<div class="row">
+  <div id="next-btn" class="col-md-10">
+    {{ wtf.quick_form(form, button_map={'submit': 'primary'}) }}
+  </div>
+</div>
+
+<script src="//d3js.org/d3.v5.min.js"></script>
+<script src="{{ url_for('static', filename='js/makeChart.js') }}"></script>
+<script>makeChartAnnotated(
+	"#graph_user",
+	{{ data.chart_data | safe }},
+	{{ annotations_user | safe }}
+);
+</script>
+<script>makeChartAnnotated(
+	"#graph_true",
+	{{ data.chart_data | safe }},
+	{{ annotations_true | safe }}
+);
+</script>
+{% endblock %}
diff --git a/app/templates/demo/learn.html b/app/templates/demo/learn.html
new file mode 100644
index 0000000..8d3d6c9
--- /dev/null
+++ b/app/templates/demo/learn.html
@@ -0,0 +1,23 @@
+{% extends "base.html" %}
+{% import 'bootstrap/wtf.html' as wtf %}
+
+{% block styles %}
+{{ super() }}
+<link rel="stylesheet" href="{{url_for('static', filename='css/demo/learn.css')}}">
+{% endblock %}
+
+{% block app_content %}
+<h1>{{ title }}</h1>
+
+<div id="lesson" class="row">
+  <div class="col-md-6">
+    {{ text | safe }}
+  </div>
+</div>
+
+<div class="row">
+  <div id="next-btn" class="col-md-6">
+    {{ wtf.quick_form(form, button_map={'submit': 'primary'}) }}
+  </div>
+</div>
+{% endblock %}
diff --git a/app/templates/index.html b/app/templates/index.html
index 76edbcd..930bfd3 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -1,69 +1,98 @@
 {% extends "base.html" %}
 
 {% block styles %}
-{{ super() }}
-<link rel="stylesheet" href="{{url_for('static', filename='user_index.css')}}">
+  {{ super() }}
+  <link rel="stylesheet" href="{{url_for('static', filename='user_index.css')}}">
 {% endblock %}
 
 {% block app_content %}
-{% if current_user.is_authenticated %}
-	<h1>Hi, {{ current_user.username }}!</h1>
-	{% if tasks_todo %}
-	<h2>Annotations to be done</h2>
-	<br>
-	<p>
-	Below are the datasets that we've asked you to annotate, thank you 
-	very much for your help!
-	</p>
-	<br>
-	<div class="tasks-todo">
-		<table class="table table-striped">
-			<thead class="thead-dark">
-				<th scope="col">Name</th>
-			</thead>
-			{% for task in tasks_todo %}
-			<tr>
-				<td><a href="/annotate/{{ task.id }}">{{ task.dataset.name }}</a></td>
-			</tr>
-			{% endfor %}
-		</table>
-	</div>
-	{% elif tasks_todo|length == 0 and tasks_done|length > 0 %}
-	<div id="done">
-		<img src="/static/done.png">
-		<span>No more annotations to do! Thank you so much for your 
-			help, <b>you rock!</b></span>
-	</div>
-	{% else %}
-	<span>There are no datasets for you to annotate at the moment, please 
-		check back again later. Thank you!</span>
-	{% endif %}
-	{% if tasks_done %}
-	<h2>Completed Annotations</h2>
-	<div class="tasks-done">
-		<table class="table table-striped">
-			<thead>
-				<th scope="col">Name</th>
-				<th scope="col">Completed On</th>
-			</thead>
-			{% for task in tasks_done %}
-			<tr>
-				<td>{{ task.dataset.name }}</td>
-				<td>{{ task.annotated_on }}</td>
-			</tr>
-			{% endfor %}
-		</table>
-	</div>
-	{% endif %}
-{% else %}
-	<article>
-		<div>
-			Welcome to <i>AnnotateChange</i> a tool for annotating time 
-			series data for changepoint analysis.
-			<br>
-			<br>
-			Please log in or register to get started.
-		</div>
-	</article>
-{% endif %}
+  {% if current_user.is_authenticated %}
+    <h1>Hi, {{ current_user.username }}!</h1>
+  {% endif %}
+  <p>
+    Welcome to <i>AnnotateChange</i> a tool for annotating time series data 
+    for changepoint analysis.
+  </p>
+  {% if not current_user.is_authenticated %}
+  <br>
+  <p>
+    Please <a href="{{ url_for('auth.login') }}">log in</a> or 
+    <a href="{{ url_for('auth.register') }}">register</a> to get started.
+  </p>
+  {% endif %}
+  {% if current_user.is_authenticated %}
+    <h3>Introduction</h3>
+    {% if not current_user.is_introduced %}
+      <a href="{{ url_for('main.demo') }}">Click here to start the introduction to AnnotateChange.</a>
+      {% if tasks_todo|length == 0 and tasks_done|length == 0 %}
+      <br>
+      <br>
+      <p>
+        When you have finished the introduction, the datasets to annotate 
+        will appear here.
+      </p>
+      {% endif %}
+    {% else %}
+    <p>
+      Thank you for completing the introduction. If you want to revisit 
+      it, you can do so by <a href="{{ url_for('main.demo') }}">clicking here</a>.
+    </p>
+      {% if tasks_todo|length == 0 and tasks_done|length == 0 %}
+      <br>
+      <br>
+      <p>
+        There are currently no datasets for you to annotate. Please check back
+        again later.
+      </p>
+      {% endif %}
+    {% endif %}
+    {% if tasks_todo %}
+      <h3>Datasets to Annotate</h3>
+      <p>
+        Below are the datasets that we would like you to annotate, thank you 
+        very much for your help!
+      </p>
+      <div class="tasks-todo">
+        <table class="table table-striped">
+          <thead class="thead-dark">
+            <th scope="col">Name</th>
+          </thead>
+          {% for task in tasks_todo %}
+            <tr>
+              <td>
+                <a href="{{ url_for('main.annotate', task_id=task.id) }}">
+                  {{ task.dataset.name | title }}
+                </a>
+              </td>
+            </tr>
+          {% endfor %}
+        </table>
+      </div>
+    {% elif tasks_todo|length == 0 and tasks_done|length > 0 %}
+      <div id="done">
+        <img src="{{ url_for('static', filename='done.png') }}">
+        <span>
+          No more annotations to do! Thank you so much for your help, 
+          <b>you rock!</b>
+        </span>
+      </div>
+    {% endif %}
+    {% if tasks_done %}
+      <h3>Completed Annotations</h3>
+      <div class="tasks-done">
+        <table class="table table-striped">
+          <thead>
+            <th scope="col">Name</th>
+            <th scope="col">Completed On</th>
+          </thead>
+          {% for task in tasks_done %}
+            <tr>
+              <td>{{ task.dataset.name | title }}</td>
+              <td>{{ task.annotated_on }}</td>
+            </tr>
+          {% endfor %}
+        </table>
+      </div>
+    {% endif %}
+  {% endif %}
 {% endblock %}