Updated readme

README.md

@@ -1 +1,43 @@
-# 818_search
+# 818_search
+VIRE: Visual Information Retrieval Evaluation
+
+#Set up instructions:
+ssh -i ~/Downloads/DNS.pem [email protected]
+## Install Packages
+sudo apt-get update
+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
+cd 818_search
+python3 -m venv env
+
+## Run the virtual environment
+source env/bin/activate
+
+## Install needed python packages
+(env)$ pip install flask
+(env)$ pip install psycopg2
+
+
+## Set up the database (DO NOT DO THIS ON AWS SERVER)
+sudo -u postgres createuser --interactive
+    818project, y
+sudo -u postgres createdb sammy
+sudo adduser sammy
+sudo -i -u sammy
+psql
+
+# What DB am I connected to?
+\conninfo
+
+#Run instructions
+redis-server
+python server.py
+Visit URL on browser: http://localhost:5000/

data/sample_data.csv

@@ -1,5 +1,5 @@
 query_number,metric_type,score
-1, NDCG, 0.078
+1, MAP, 0.078
 2, MAP, 0.5
 3, MAP, 0.2
 4, MAP, 0.3

data/sample_three.csv

@@ -1,10 +1,10 @@
 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
+2, MAP, 0.05
+3, MAP, 0.03
+4, MAP, 0.01
+5, MAP, 0.05
+6, MAP, 0.06
 7, MAP, 0.45
 8, MAP, 0.9
 9, MAP, 1

src/static/IRViz.js

@@ -55,7 +55,8 @@ multipleData[experimentID] =
 {
 x: xaxes[experimentID],
 y: yaxes[experimentID],
-type: 'line'
+type: 'line',
+name: data_json.experiments[experimentID]
 };
 
 multipleDiv.data = multipleData;
@@ -79,18 +80,33 @@ Plotly.react(multipleDiv, multipleDiv.data, multipleDiv.layout);
 }
 })
 
+
+var firstDiv = document.getElementById('choose-first');
+var secondDiv = document.getElementById('choose-second');
+
+$.get("/experiments", function(data){
+var experiments_json = JSON.parse(data);
+console.log(experiments_json);
+var options_string = '';
+for(var i = 0; i < experiments_json.experiments.length; i++){
+options_string = options_string+ "<option>"+experiments_json.experiments[i]+"</option>";
+}
+firstDiv.innerHTML = "<b>First experiment: </b> <select id=\"option1\" autofocus> " + options_string + " </select>";
+secondDiv.innerHTML = "<b>Second experiment: </b> <select id=\"option2\" autofocus> " + options_string + " </select>";
+})
+
 var graphDiv = document.getElementById('tester'),
 data = [{x: [], y:[]}],
 layout = {};
 
 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];
+$(document).ready(function() {
+$('#target').submit(function(event1){
+event1.preventDefault();
+console.log("reaching here?");
+var experiment1 = document.getElementById("option1").value;
+var experiment2 = document.getElementById("option2").value;
 console.log(experiment2);
 console.log(experiment1);
 
@@ -128,13 +144,13 @@ graphDiv.data = [
 {
 x: xaxis,
 y: yaxis,
-type: 'line',
+type: 'bar',
 name: experiment1
 },
 {
 x:xaxis2,
 y:yaxis2,
-type: 'line',
+type: 'bar',
 name: experiment2
 }
 ];
@@ -214,7 +230,9 @@ Plotly.react(graphDiv, graphDiv.data, graphDiv.layout);
 
      {
       type: 'line',
+      x0: 1,
       y0: stats_json.merged_stats[0][stat_value],
+      x1: 10,
       y1: stats_json.merged_stats[0][stat_value],
       line: {
         color: '#1f77b4',
@@ -223,7 +241,9 @@ Plotly.react(graphDiv, graphDiv.data, graphDiv.layout);
     },
       {
       type: 'line',
+      x0: 1,
       y0: stats_json.merged_stats[1][stat_value],
+      x1: 10,
       y1: stats_json.merged_stats[1][stat_value],
       line: {
         color: '#ff7f0e',
@@ -236,3 +256,4 @@ Plotly.react(graphDiv, graphDiv.data, graphDiv.layout);
 })
 })
 })
+})

src/templates/viz.html

@@ -10,6 +10,12 @@
 
   <div id="multiple"></div>
 
+ <form id="target" style="margin-left: 200px; margin-top: 10px;">
+ <div id="choose-first"></div>
+ <div id="choose-second"></div>
+ <input type="submit" value="Submit">
+ </form>
+
   <div style="margin-left: 500px; margin-top: 10px;">
       <b>Select statistics to display: </b>
       <select id="mySelect" autofocus>