Make plots return images instead of image elements

static/script.js

@@ -53,16 +53,9 @@ function indexVisualize() {
     var repo_link = document.getElementById("repo_link");
     var divider = document.getElementById("divider");
     divider.innerHTML = "<hr>"
-    fetch($SCRIPT_ROOT + "/plot?name=" + name + "&year=" + year + "&measurement=" + meas)
-        .then(function (response) {
-            return response.text();
-        })
-        .then(function (response) {
-            graph.innerHTML = response;
-        })
-        .catch(function (err) {
-            console.log('error: ' + err);
-        });
+    var img = document.createElement("img");
+    img.src = $SCRIPT_ROOT + "/plot?name=" + name + "&year=" + year + "&measurement=" + meas;
+    graph.replaceChildren(img);
     fetch($SCRIPT_ROOT + "/record/link?name=" + name + "&year=" + year)
         .then(function (response) {
             return response.text();
@@ -129,16 +122,9 @@ function boxplotVisualize() {
     var repo_link = document.getElementById("repo_link");
     var divider = document.getElementById("divider");
     divider.innerHTML = "<hr>"
-    fetch($SCRIPT_ROOT + "/plot/boxplot?name=" + name + "&year1=" + year + "&year2=" + year2 +"&measurement=" + meas)
-        .then(function (response) {
-            return response.text();
-        })
-        .then(function (response) {
-            graph.innerHTML = response;
-        })
-        .catch(function (err) {
-            console.log('error: ' + err);
-        });
+    var img = document.createElement("img");
+    img.src = $SCRIPT_ROOT + "/plot/boxplot?name=" + name + "&year1=" + year + "&year2=" + year2 +"&measurement=" + meas;
+    graph.replaceChildren(img);
     fetch($SCRIPT_ROOT + "/record/link?name=" + name + "&year=" + year)
         .then(function (response) {
             return response.text();
@@ -225,18 +211,10 @@ function overlay() {
     var repo_link2 = document.getElementById("repo_link2");
     var divider = document.getElementById("divider");
     divider.innerHTML = "<hr>"
-    fetch($SCRIPT_ROOT + "/plot/overlay?name1=" + name
-          + "&year1=" + year + "&name2=" + name2 + "&year2=" + year2
-          + "&measurement=" + meas)
-        .then(function (response) {
-            return response.text();
-        })
-        .then(function (response) {
-            graph.innerHTML = response;
-        })
-        .catch(function (err) {
-            console.log('error: ' + err);
-        });
+    var img = document.createElement("img");
+    img.src = $SCRIPT_ROOT + "/plot/overlay?name1=" + name + "&year1=" + year
+              + "&name2=" + name2 + "&year2=" + year2 + "&measurement=" + meas;
+    graph.replaceChildren(img);
     fetch($SCRIPT_ROOT + "/record/link?name=" + name + "&year=" + year)
         .then(function (response) {
             return response.text();

visualizer.py

 #!/home/ograham/venv/bin/python3
 
-import base64
 from dataclasses import make_dataclass
 import datetime
 from io import BytesIO
@@ -11,7 +10,7 @@ from types import SimpleNamespace
 from urllib.request import urlopen
 from wsgiref.handlers import CGIHandler
 
-from flask import abort, Flask, jsonify, render_template, request
+from flask import abort, Flask, jsonify, render_template, request, Response
 import matplotlib
 import matplotlib.pyplot as plt
 import numpy as np
@@ -168,7 +167,7 @@ def plot_boxplot():
     )
     plt.suptitle(f'{meas.title} measurements, {name} Station, '
                  f'{start_year} - {end_year}.')
-    return savefig_html_png(fig)
+    return savefig_response(fig)
 
 
 @app.route('/plot')
@@ -198,7 +197,7 @@ def plot():
     )
     plt.suptitle(f'{meas.title} measurements, {name} Station, '
                  f'{data[0][0].year}')
-    return savefig_html_png(fig)
+    return savefig_response(fig)
 
 
 @app.route('/plot/overlay')
@@ -252,15 +251,14 @@ def plot_overlay():
     title_dsets = ' / '.join(f'{dset.name} Station, {dset.data[0][0].year}'
                              for dset in datasets)
     plt.suptitle(f'{meas.title} measurements, {title_dsets}')
-    return savefig_html_png(fig)
+    return savefig_response(fig)
 
 
-def savefig_html_png(fig):
-    """Generate an HTML tag with the base64-encoded PNG image."""
+def savefig_response(fig):
+    """Make an image response with `fig.savefig()`."""
     buf = BytesIO()
     fig.savefig(buf, format='png')
-    png_data = base64.b64encode(buf.getbuffer()).decode('ascii')
-    return f"<img src='data:image/png;base64,{png_data}'/>"
+    return Response(buf.getvalue(), mimetype='image/png')
 
 
 def get_query(key, to=str):