Add side panel

server/website/website/static/css/base.css

@@ -14,7 +14,7 @@
 .boxbody ul li { padding-left: 0.3em; }
 
 .plotcontainer {
-    margin-bottom: 2em;
+    margin-bottom: 0.5em;
 }
 
 .FixedHeader_Cloned th { background-color: white; }

server/website/website/templates/session.html

@@ -24,6 +24,19 @@
 border: 2px solid #F5F5F5;
 }
 
+#sidepanel {
+    flex: 1;
+    height:165px;
+    border-style: solid;
+    border-width: 2px;
+    border-color: #999999;
+    margin-left:10px;
+    margin-top:2em;
+    background-color: #FDFBF4;
+    color: #5F5F5F;
+    font-size: 14px;
+}
+
 caption > h4 { 
   display: inline-block;
   position: relative;
@@ -201,11 +214,23 @@
         </div>
         <div class="col-sm-2 checkbox">
             <label><input id="equidistant" class="option" name="equidistant" type="checkbox"/> Equidistant</label>
+            <label><input id="sidePanelOnButton" class="option" type="checkbox" onclick="toggleSidePanel()" checked="true"/> Side Panel</label>
         </div>
     </div>
 
     <div id="content" class="col-sm-12">
-        <div id="plotgrid" class="plotcontainer row"></div>
+        <div style="display:flex;">
+          <div id="plotgrid" class="plotcontainer row" style="flex: 0 0 85%;"></div>
+          <div id="sidepanel">
+              <center>
+                 <u>Information</u><br>
+                 Knobs Tuned: {{num_knobs}}<br>
+                 Pruned Metrics: {{num_metrics}}<br>
+                 Results: {{num_sample_points}}<br>
+                 Preprocessing: {{pipeline_time}}
+              </center>
+          </div>
+        </div>
         <div id="result_table">
             <h4>Filtered Results</h4>
             <table id="dataTable">
@@ -304,6 +329,26 @@ <h4>Filtered Results</h4>
 });
 </script>
 
+<script>
+function toggleSidePanel(){
+  var sidePanelOnButton = document.getElementById("sidePanelOnButton");
+  var sidePanel = document.getElementById("sidepanel");
+  var plotGrid = document.getElementById("plotgrid");
+  var equidistantButton = document.getElementById("equidistant");
+  if (sidePanelOnButton.checked == true){
+    sidePanel.style.display="block";
+    plotGrid.style.flex="0 0 85%";
+    equidistantButton.click();
+    equidistantButton.click(); //This is to refresh the graph
+  }else{
+    sidePanel.style.display="none";
+    plotGrid.style.flex="1";
+    equidistantButton.click();
+    equidistantButton.click(); //This is to refresh the graph
+  }
+}
+</script>
+
 {% endblock body %}
 
 

server/website/website/views.py

@@ -5,7 +5,7 @@
 #
 # pylint: disable=too-many-lines
 import logging
-import datetime
+import datetime as dt
 import re
 from collections import OrderedDict
 
@@ -32,7 +32,8 @@
 from .db import parser, target_objectives
 from .forms import NewResultForm, ProjectForm, SessionForm, SessionKnobForm
 from .models import (BackupData, DBMSCatalog, KnobCatalog, KnobData, MetricCatalog, User, Hardware,
-                     MetricData, Project, Result, Session, Workload, SessionKnob, PipelineRun)
+                     MetricData, Project, Result, Session, Workload, SessionKnob, PipelineRun,
+                     PipelineData)
 from .tasks import (aggregate_target_results, map_workload, train_ddpg,
                     configuration_recommendation, configuration_recommendation_ddpg)
 from .types import (DBMSType, KnobUnitType, MetricType,
@@ -260,6 +261,23 @@ def session_view(request, project_id, session_id):
     form_labels = Session.get_labels()
     form_labels['title'] = "Session Info"
 
+    num_knobs = str(len(knob_names))
+    num_sample_points = str(len(results))
+    num_metrics = "Not available"
+    pipeline_time = "Not available"
+    if default_workload != 'show_none':
+        workload = workloads[default_workload][0]
+        pruned_metrics = PipelineData.objects.filter(workload=workload,
+                                                     task_type=1).order_by('-creation_time')
+        if len(pruned_metrics) > 0:
+            num_metrics = str(len(JSONUtil.loads(pruned_metrics[0].data)))
+            pipeline_time = [pipelineData.pipeline_run for pipelineData in pruned_metrics]
+            pipeline_time = [(pipelineRun.end_time - pipelineRun.start_time).total_seconds()
+                             for pipelineRun in pipeline_time if pipelineRun.end_time is not None]
+            sec = sum(pipeline_time) / len(pipeline_time)
+            pipeline_time = str(dt.timedelta(seconds=sec))
+            pipeline_time = pipeline_time[:pipeline_time.find(".")]
+
     context = {
         'project': project,
         'dbmss': dbmss,
@@ -278,6 +296,10 @@ def session_view(request, project_id, session_id):
         'session': session,
         'results': results,
         'labels': form_labels,
+        'num_metrics': num_metrics,
+        'num_sample_points': num_sample_points,
+        'num_knobs': num_knobs,
+        'pipeline_time': pipeline_time,
     }
     context.update(csrf(request))
     return render(request, 'session.html', context)