Merge pull request #89 from afids/visualizations

Interactive Visualization
afids · Nov 25, 2020 · c743443 · c743443
2 parents 4514da3 + b4ccc28
commit c743443
Show file tree

Hide file tree

Showing 5 changed files with 307 additions and 27 deletions.
diff --git a/controller.py b/controller.py
@@ -13,6 +13,7 @@
 
 import numpy as np
 
+from visualizations import generate_3d_scatter, generate_histogram
 from model_auto import Average, csv_to_json, InvalidFcsvError
 from compute import calc
 
@@ -226,8 +227,6 @@ def validator():
 
     timestamp = str(datetime.now(timezone.utc).strftime("%Y-%m-%d %H:%M:%S %Z"))
     if not request.method == 'POST':
-        result = '<br>'.join([result, msg])
-
         return render_template("validator.html", form=form, result=result,
             human_templates=human_templates, template_data_j=template_data_j,
             index=index, labels=labels, distances=distances)
@@ -405,9 +404,13 @@ def validator():
 
     result = '<br>'.join([result, msg])
 
+    scatter_html = generate_3d_scatter(template_data_j, user_data_j)
+    histogram_html = generate_histogram(template_data_j, user_data_j)
+
     return render_template("validator.html", form=form, result=result,
         human_templates=human_templates, template_data_j=template_data_j,
-        index=index, labels=labels, distances=distances, timestamp=timestamp)
+        index=index, labels=labels, distances=distances, timestamp=timestamp,
+        scatter_html=scatter_html, histogram_html=histogram_html)
 
 @app.route("/getall")
 def get_all():
@@ -445,7 +448,6 @@ def plot_png():
 
     return Response(output.getvalue(), mimetype='image/png')
 
-
 def create_figure():
     fig = Figure()
     fig, ax = plt.subplots()
@@ -478,12 +480,7 @@ def create_figure():
 
 @app.route('/analytics')
 def chartTest():
-
     return render_template('view_analytics.html')
 
-@app.route('/pointcloud.html', methods=['GET'])
-def cloud():
-    return render_template("pointcloud.html")
-
 if __name__ == '__main__':
     app.run(debug=True)
diff --git a/requirements.txt b/requirements.txt
@@ -14,6 +14,7 @@ Mako==1.1.0
 MarkupSafe==1.1.1
 matplotlib==3.0.3
 numpy==1.17.4
+plotly==4.12.0
 psycopg2-binary==2.8.4
 pyparsing==2.4.5
 python-dateutil==2.8.1

diff --git a/templates/base.html b/templates/base.html
@@ -22,6 +22,8 @@
 </head>
 
 <body>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   <header class="container">
     <img class="img-fluid" src="{{ url_for('static', filename='images/banner.png') }}" alt="AFIDs Validator Banner">
     <nav id="nav-wrapper">

diff --git a/templates/validator.html b/templates/validator.html
@@ -45,36 +45,64 @@
 	    <label for="db_checkbox">Upload to Database</label>
           </form>
 
+          {% if result != "" %}
           <div class="row">
-              <div class="col-sm-7">
+              <div class="col-9">
                   <h2>Results</h2>
               </div>
           </div>
           <div class="row">
-              <div class="col-sm-7">
-                  {% if result != None %}
-                  {{ result|safe }}
+              <div class="col-9">
+                  {% if result[0:5] == "Valid" %}
+                  <div class="alert alert-success">
+                  {% else %}
+                  <div class="alert alert-danger">
                   {% endif %}
+                      {{ result|safe }}
+                  </div>
               </div>
           </div>
           <div class="row">
-            <!-- Numerical results -->
-            <div class="text col-sm-6">
-              <table class="table table-dark table-sm">
-                <tr>
-                  <th scope="col">{{"Fiducial Name"}}</th>
-                  <th scope="col">{{"Distance [mm]"}}</th></tr>
-                {% for i in index %}
-                <tr><td>{{labels[i]}}</td><td>{{distances[i]}}</td></tr>
-                {% endfor %}
-              </table>
+            <div class="col-9">
+              <ul class="nav nav-tabs" role="tablist">
+                <li role="presentation" class="active">
+                  <a class="nav-link" href="#plots" role="tab" aria-controls="plots" data-toggle="tab"><h3>Plots</h3></a>
+                </li>
+                <li role="presentation">
+                  <a class="nav-link" href="#table" role="tab" aria-controls="table" data-toggle="tab"><h3>Table</h3></a>
+                </li>
+              </ul>
             </div>
-
-            <!-- Visual results -->
-            <div class="col-sm-6">
-
+          </div>
+          <div class="tab-content">
+            <div role="tabpanel" class="tab-pane active" id="plots">
+              <div class="row">
+                <div class="col-9">
+                    {{scatter_html|safe}}
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-9">
+                    {{histogram_html|safe}}
+                </div>
+              </div>
+            </div>
+            <div role="tabpanel" class="tab-pane" id="table">
+              <div class="row">
+                <div class="text col-9">
+                  <table class="table table-dark table-sm">
+                  <tr>
+                    <th scope="col">{{"Fiducial Name"}}</th>
+                    <th scope="col">{{"Distance [mm]"}}</th></tr>
+                  {% for i in index %}
+                  <tr><td>{{labels[i]}}</td><td>{{distances[i]}}</td></tr>
+                  {% endfor %}
+                  </table>
+                </div>
+              </div>
             </div>
           </div>
+          {% endif %}
         </section>
 
         <!-- Analytics -->