Updated and made it to work with basic code

zhanif3 · Nov 25, 2019 · 7ee328e · 7ee328e
1 parent 1791271
commit 7ee328e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/src/server.py b/src/server.py
@@ -1,4 +1,5 @@
 from flask import Flask, flash, request, redirect, url_for
+from flask import render_template, jsonify
 from werkzeug.utils import secure_filename
 import os
 import pandas as pd
@@ -51,9 +52,8 @@ def upload():
             return redirect(url_for('upload', filename=filename))
 
     return '''
-    <!doctype html>
-    <title>Upload new File</title>
     <h1>Upload new File</h1>
+    <p>Upload new File</p>
     <form method=post enctype=multipart/form-data>
       <input type=file name=file>
       <input type=submit value=Upload>
@@ -127,7 +127,7 @@ def experiment(experiment_id):
 
 @app.route('/')
 def hello():
-    return 'Hello!'
+    return render_template('viz.html')
 
 
 def experiment_list():

diff --git a/src/static/IRViz.js b/src/static/IRViz.js
@@ -1,8 +1,14 @@
-<script>
+var uploadDiv = document.getElementById('upload');
+$.get("/upload", function(data) {
+console.log(data);
+uploadDiv.innerHTML=data;
+})
+
 var graphDiv = document.getElementById('tester'),
 data = [{x: [], y:[]}],
 layout = {};
 
+
 Plotly.newPlot(graphDiv, data, layout);
 
 $.get("/data", function(data){
@@ -41,6 +47,7 @@ $(document).ready(function() {
 $("select").on('change', function(event){
 var yearvalue = document.getElementById("year-value").value;
 var dataToBeSent = document.getElementById("mySelect").value;
+
 $.ajax({
 type: "POST",
 url: "send_data",
@@ -57,5 +64,4 @@ console.log(error);
 }
 });
 });
-});
-</script>
+});
diff --git a/src/templates/viz.html b/src/templates/viz.html
@@ -5,22 +5,21 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>
 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/css/ion.rangeSlider.min.css"/>
-<script type="text/javascript" src="{{ url_for('static', filename='IRViz.js') }}"></script>
 <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 
-<div class = "ex1">
+
+  <div id="upload">abc</div>
+
+  <div class = "ex1">
 <select id="mySelect">
   <option>MAP</option>
   <option>nDCG</option>
 </select>
-&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
-<input type="text" id="range-value" value="2002" class="autoupdate"/>
-<input type="submit" value="Submit">
-</div>
 
 <div id="tester"></div>
 
 <div id="topslider"></div>
 
+<script type="text/javascript" src="{{ url_for('static', filename='IRViz.js') }}"></script>
 </html>