Add support for viewing annotations

2 files changed, 165 insertions, 0 deletions

diff --git a/app/templates/admin/annotations.html b/app/templates/admin/annotations.html
index 4807b8e..089de3b 100644
--- a/app/templates/admin/annotations.html
+++ b/app/templates/admin/annotations.html
@@ -1,7 +1,13 @@
 {% extends "base.html" %}
+{% import 'bootstrap/wtf.html' as wtf %}
 
 {% block app_content %}
 <h1>View Annotations</h1>
+<div class="row">
+	<div class="col-md-4">
+		{{ wtf.quick_form(form) }}
+	</div>
+</div>
 <article class="overview">
 	<table class="table table-striped">
 		<thead class="thead-dark">
diff --git a/app/templates/admin/annotations_by_dataset.html b/app/templates/admin/annotations_by_dataset.html
new file mode 100644
index 0000000..5ad98b6
--- /dev/null
+++ b/app/templates/admin/annotations_by_dataset.html
@@ -0,0 +1,159 @@
+{% extends "base.html" %}
+
+{% block styles %}
+{{super()}}
+<link rel="stylesheet" href="{{url_for('static', filename='view_annotation.css')}}">{% endblock %}
+
+{% block app_content %}
+<h1>View Annotations</h1>
+
+<div id="graph"></div>
+
+<script src="//d3js.org/d3.v5.min.js"></script>
+<script>
+var data = {{ data.chart_data | safe }};
+var n = 0;
+data.forEach(function(d) {
+  d.X = n++;
+  d.Y = d.value;
+});
+
+
+var divWidth = 1000;
+var divHeight = 480;
+
+var svg = d3.select("#graph")
+	.on("touchstart", nozoom)
+	.on("touchmove", nozoom)
+	.append("svg")
+	.attr("width", divWidth)
+	.attr("height", divHeight);
+
+var margin = {top: 20, right: 20, bottom: 50, left: 50};
+var width = +svg.attr("width") - margin.left - margin.right;
+var height = +svg.attr("height") - margin.top - margin.bottom;
+
+var zoom = d3.zoom()
+  .scaleExtent([1, 50])
+  .translateExtent([[0, 0], [width, height]])
+  .extent([[0, 0], [width, height]])
+  .on("zoom", zoomed);
+
+var x = d3.scaleLinear().range([0, width]);
+var x2 = d3.scaleLinear().range([0, width]);
+var y = d3.scaleLinear().range([height, 0]);
+
+var xAxis = d3.axisBottom(x);
+var yAxis = d3.axisLeft(y);
+
+var xExtent = d3.extent(data, function(d) { return d.X; });
+var xRange = xExtent[1] - xExtent[0];
+var xDomainMin = xExtent[0] - xRange * 0.02;
+var xDomainMax = xExtent[1] + xRange * 0.02;
+
+var yExtent = d3.extent(data, function(d) { return d.Y; });
+var yRange = yExtent[1] - yExtent[0];
+var yDomainMin = yExtent[0] - yRange * 0.05;
+var yDomainMax = yExtent[1] + yRange * 0.05;
+
+x.domain([xDomainMin, xDomainMax]);
+y.domain([yDomainMin, yDomainMax]);
+x2.domain(x.domain());
+
+svg.append("defs").append("clipPath")
+  .attr("id", "clip")
+  .append("rect")
+  .attr("width", width - 30)
+  .attr("height", height)
+  .attr("transform", "translate(" + 30 + ",0)");
+
+svg.append("g")
+  .attr("class", "axis axis--y")
+  .attr("transform", "translate(" + 30 + ",0)")
+  .call(yAxis);
+
+svg.append("g")
+  .attr("class", "axis axis--x")
+  .attr("transform", "translate(0," + height + ")")
+  .call(xAxis);
+
+svg.append("text")
+  .attr("text-anchor", "middle")
+  .attr("class", "axis-label")
+  .attr("transform", "translate(" + (width - 20) + "," + (height + 50) + ")")
+  .text("Time");
+
+var line = d3.line()
+  .x(function(d) { return x(d.X); })
+  .y(function(d) { return y(d.Y); });
+
+var g = svg.append("g")
+    .call(zoom);
+
+g.append("rect")
+    .attr("width", width)
+    .attr("height", height);
+
+var view = g.append("g")
+    .attr("class", "view");
+
+view.append("path")
+  .datum(data)
+  .attr("class", "line")
+  .attr("d", line);
+
+var points = view.selectAll("circle")
+    .data(data)
+  .enter().append("circle")
+    .attr("cx", function(d) { return x(d.X); })
+    .attr("cy", function(d) { return y(d.Y); })
+    .attr("data_X", function(d) { return d.X; })
+    .attr("data_Y", function(d) { return d.Y; })
+    .attr("r", 5)
+    .on("click", clicked);
+
+function zoomed() {
+  t = d3.event.transform;
+  x.domain(t.rescaleX(x2).domain());
+  svg.select(".line").attr("d", line);
+  points.data(data)
+    .attr("cx", function(d) { return x(d.X); })
+    .attr("cy", function(d) { return y(d.Y); });
+  annolines = view.selectAll("line");
+  annolines._groups[0].forEach(function(l) {
+    l.setAttribute("x1", x(l.getAttribute("cp_idx")));
+    l.setAttribute("x2", x(l.getAttribute("cp_idx")));
+  });
+  svg.select(".axis--x").call(xAxis);
+}
+
+function clicked(d, i) {
+	if (d3.event.defaultPrevented) return; // zoomed
+}
+
+function nozoom() {
+  d3.event.preventDefault();
+}
+
+var annotations = {{ data.annotations | safe }};
+
+annotations.forEach(function(a) {
+  for (i=0; i<points._groups[0].length; i++) {
+    p = points._groups[0][i];
+    if (p.getAttribute("data_X") == a.index) {
+      var elem = d3.select(p);
+      elem.classed(a.user, 'true');
+      view.append("line")
+        .attr("cp_idx", a.index)
+        .attr("y1", y(yDomainMax))
+        .attr("y2", y(yDomainMin))
+        .attr("x1", x(a.index))
+        .attr("x2", x(a.index))
+        .attr("class", "ann-line" + " " + a.user);
+    }
+  }
+});
+
+
+</script>
+{% endblock %}