Two experiment plots working and also displaying some stats

data/sample_data.csv

@@ -1,12 +1,12 @@
 query_number,metric_type,score
 1, NDCG, 0.078
-2, MAP, 1
-3, MAP, 2
-4, MAP, 3
-5, MAP, 4
-6, MAP, 5
-7, MAP, 6
-8, MAP, 7
-9, MAP, 8
-10, MAP, 9
-11, MAP, 10.0
+2, MAP, 0.5
+3, MAP, 0.2
+4, MAP, 0.3
+5, MAP, 0.7
+6, MAP, 0.9
+7, MAP, 1
+8, MAP, 0.3
+9, MAP, 0.4
+10, MAP, 0.6
+11, MAP, 0.1

data/sample_three.csv

@@ -0,0 +1,12 @@
+query_number,metric_type,score
+1, NDCG, 0.078
+2, MAP, 0.1
+3, MAP, 0.5
+4, MAP, 0.3
+5, MAP, 0.5
+6, MAP, 0.6
+7, MAP, 0.45
+8, MAP, 0.9
+9, MAP, 1
+10, MAP, 0.6
+11, MAP, 0.3

data/sample_two.csv

@@ -1,12 +1,12 @@
 query_number,metric_type,score
 1, NDCG, 0.078
-2, MAP, 1
-3, MAP, 2
-4, MAP, 3
-5, MAP, 4
-6, MAP, 5
-7, MAP, 6
-8, MAP, 7
-9, MAP, 8
-10, MAP, 9
-11, MAP, 10.0
+2, MAP, 0.1
+3, MAP, 0.5
+4, MAP, 0.3
+5, MAP, 0.3
+6, MAP, 0.2
+7, MAP, 0.45
+8, MAP, 0.9
+9, MAP, 1
+10, MAP, 0.6
+11, MAP, 0.7

install/development_setup

@@ -5,6 +5,9 @@ sudo apt-get install python3-pip
 sudo apt-get install python3-venv
 sudo apt-get install postgresql-server-dev-10
 
+For mac:
+brew install redis
+
 git clone https://github.com/zhanif3/818_search.git
 
 # First, install the needed python environnment

src/server.py

@@ -41,9 +41,11 @@ def upload():
             return redirect(request.url)
 
         if file and allowed_file(file.filename):
+            print("this is allowed file")
             filename = secure_filename(file.filename)
             file_contents = file.read()
             data = file_contents.decode("ascii")
+            print(data)
             df = pd.read_csv(io.StringIO(data), delimiter=',', header='infer')
 
             r.sadd("experiments", filename)
@@ -52,24 +54,25 @@ def upload():
             # Average, median, STD, MAD
             r.set(filename+"_statistics", df['score'].describe().to_json())
             print("Did everything!")
+            print(request.url)
             return redirect(url_for('upload', filename=filename))
+            #return redirect("http://localhost:5000/")
 
     return '''
     <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>
+    <form id="file-upload" method=post enctype=multipart/form-data>
+      <input id="the-file" type=file name=file>
+      <input  type=submit value=submit>
     </form>
     '''
 
 
-def one_way_anova(data):
+def one_way_anova():
     t, p =  f_oneway(*data.values())
     return p
 
 
-def t_test(data):
+def t_test():
     for list1, list2 in combinations(data.keys(), 2):
         t, p = ttest_ind(data[list1], data[list2])
         print(list1, list2, p)
@@ -134,6 +137,7 @@ def experiment(experiment_id):
 
 
 @app.route('/', methods=['GET', 'POST'])
+@app.route('/index')
 def hello():
     return render_template('viz.html')
 

src/static/IRViz.js

@@ -1,32 +1,164 @@
 var uploadDiv = document.getElementById('upload');
-$.get("/upload", function(data) {
-console.log(data);
-uploadDiv.innerHTML=data;
-})
 
 var graphDiv = document.getElementById('tester'),
 data = [{x: [], y:[]}],
 layout = {};
 
-var egDiv = document.getElementById('topslider');
-
 Plotly.newPlot(graphDiv, data, layout);
 
+var experiment1 = "";
+var experiment2 = "";
+$.get("/experiments", function(data) {
+data_json = JSON.parse(data);
+experiment1 = data_json.experiments[0];
+experiment2 = data_json.experiments[1];
+console.log(experiment2);
+console.log(experiment1);
+
+$.get("/compare/"+experiment1+"/"+experiment2, function(data) {
+stats_json = JSON.parse(data);
+console.log(stats_json.merged_data.score);
+var xaxis = [];
+var yaxis = [];
+var xaxis2 = [];
+var yaxis2 = [];
+for(var key in stats_json.merged_data.score){
+    xaxis.push(stats_json.merged_data.query_number[key]);
+    yaxis.push(stats_json.merged_data.score[key]);
+    xaxis2.push(stats_json.merged_data.query_number_q2[key]);
+    yaxis2.push(stats_json.merged_data.score_q2[key]);
+    console.log(key, stats_json.merged_data.score[key]);
+}
+
+graphDiv.data = [
+{
+x: xaxis,
+y: yaxis,
+type: 'line',
+name: experiment1
+},
+{
+x:xaxis2,
+y:yaxis2,
+type: 'line',
+name: experiment2
+}
+];
+
+graphDiv.layout = {
+ title: 'Scores for '+experiment1+" and "+experiment2,
+ yaxis: {title : {text: stats_json.merged_data.metric_type[3]}},
+ xaxis: {title : {text: 'Query ID'} }
+ }
+Plotly.react(graphDiv, graphDiv.data, graphDiv.layout);
+ $("select").on('change', function(event){
+ var selected_stat = document.getElementById("mySelect").value;
+ if (selected_stat == 'Average'){
+ stat_value = 'mean';
+ }
+ else if (selected_stat == 'Median'){
+ stat_value = '50%'
+ }
+ else if (selected_stat == 'SD') {
+ stat_value = 'std'
+ }
+ else if (selected_stat == 'MAD') {
+ stat_value = 'min'
+ }
+ else {
+ stat_value = 'mean'
+ }
+
+ graphDiv.layout = {
+ title: 'Scores for '+experiment1+" and "+experiment2,
+ yaxis: {title : {text: stats_json.merged_data.metric_type[3]}},
+ xaxis: {title : {text: 'Query ID'} },
+ annotations: [
+    {
+      x: 5,
+      y: stats_json.merged_stats[0][stat_value],
+      xref: 'x',
+      yref: 'y',
+      text: selected_stat+":"+stats_json.merged_stats[0][stat_value],
+      showarrow: true,
+      arrowhead: 7,
+      ax: 0,
+      ay: -40
+    },
+      {
+      x: 8,
+      y: stats_json.merged_stats[1][stat_value],
+      xref: 'x',
+      yref: 'y',
+      text: selected_stat+":"+stats_json.merged_stats[1][stat_value],
+      showarrow: true,
+      arrowhead: 7,
+      ax: 0,
+      ay: -40
+    }
+ ],
+ shapes: [
+     {
+      type: 'line',
+      x0: 0,
+      y0: stats_json.merged_stats[0][stat_value],
+      x1: 10,
+      y1: stats_json.merged_stats[0][stat_value],
+      line: {
+        color: '#1f77b4',
+        dash: 'dashdot'
+      }
+    },
+      {
+      type: 'line',
+      x0: 0,
+      y0: stats_json.merged_stats[1][stat_value],
+      x1: 10,
+      y1: stats_json.merged_stats[1][stat_value],
+      line: {
+        color: '#ff7f0e',
+        dash: 'dashdot'
+      }
+    }
+ ]
+ }
+Plotly.react(graphDiv, graphDiv.data, graphDiv.layout);
+})
+})
+})
+
 
+var egDiv = document.getElementById('topslider');
+
+console.log("did anything happen1??");
+var form_upload = document.getElementById('file-upload');
+$(document).ready(function() {
+$(form_upload).on('submit', function(event){
+var fileInput = document.getElementById('the-file');
+var file = fileInput.files[0];
+var formData = new FormData();
+formData.append('file', file);
+console.log("did anything happen2??");
 $.ajax({
 type: "POST",
 url: "upload",
+data: formData,
 contentType: "application/json",
-data: JSON.stringify([data]),
-dataType: "json",
+async: false,
+cache: false,
+contentType: false,
+enctype: 'multipart/form-data',
+processData: false,
 success: function (response) {
 console.log(Date.now());
-console.log(data)
+console.log(response);
 },
 error: function (error) {
 console.log(error);
 }
 });
+});
+});
 
 /*
 $.get("/data", function(data){

src/templates/viz.html

@@ -10,9 +10,12 @@
 
   <div id="upload"></div>
   <div class = "ex1">
+      <b>Select statistics to display: </b>
       <select id="mySelect">
-        <option>MAP</option>
-        <option>nDCG</option>
+        <option>Average</option>
+        <option>Median</option>
+        <option>SD</option>
+        <option>MAD</option>
       </select>
   </div>