refine visualization to add ajax request and interactive filters/graph (

facebook#259)

Summary:
Pull Request resolved: facebook#259

1. Change form submission to ajax so that only components on the pages would be updated (instead of refreshing the whole page)
2. Added interactive filter using jquery QueryBuilder to give users a better filter interface and allow complicated rules
3. Added selection for bar graph with top 10 values and line graph with time

Reviewed By: sf-wind

Differential Revision: D14672350

fbshipit-source-id: 2e12f9485c68d6e19f0fb66c99338a1dd22e0445

ailab/README.md

@@ -31,7 +31,7 @@ apt-get install python-dev libmysqlclient-dev
 - Install components for ailab:
 ```
 pip install MySQL-python
-pip install django-tables2 "django<2" django-filter==1.1 django-nvd3 django-widget-tweaks django-bootstrap3
+pip install django-tables2 "django<2" django-nvd3 django-widget-tweaks django-bootstrap3
 ```
 - In the current directory (ailab), run the following commands:
 ```

ailab/ailab/settings.py

@@ -41,7 +41,6 @@
 
 INSTALLED_APPS = [
     'django_tables2',
-    'django_filters',
     'widget_tweaks',
     'bootstrap3',
     'benchmark',

ailab/benchmark/static/js/filters.js

@@ -0,0 +1,266 @@
+var string_operators = [
+  'equal', 'not_equal', 'begins_with', 'not_begins_with',
+  'contains', 'not_contains', 'ends_with', 'not_ends_with',
+]
+
+var integer_operators = [
+  'equal', 'not_equal', 'less', 'less_or_equal',
+  'greater', 'greater_or_equal', 'between',
+]
+
+var time_operators = integer_operators
+
+var filters = [
+  {
+    id: 'control_commit',
+    label: 'Control Commit',
+    type: 'string',
+    operators: string_operators,
+  },
+  {
+    id: 'commit',
+    label: 'Commit',
+    type: 'string',
+    operators: string_operators,
+  },
+  {
+    id: 'framework',
+    label: 'Framework',
+    type: 'string',
+    operators: string_operators,
+  },
+  {
+    id: 'group',
+    label: 'Group',
+    type: 'string',
+    operators: string_operators,
+  },
+  {
+    id: 'identifier',
+    label: 'Identifier',
+    type: 'string',
+    operators: string_operators,
+  },
+  {
+    id: 'info_string',
+    label: 'Info String',
+    type: 'string',
+    operators: string_operators,
+  },
+  {
+    id: 'metric',
+    label: 'Metric',
+    type: 'string',
+    operators: string_operators,
+  },
+  {
+    id: 'model',
+    label: 'Model',
+    type: 'string',
+    operators: string_operators,
+  },
+  {
+    id: 'platform',
+    label: 'Platform',
+    type: 'string',
+    operators: string_operators,
+  },
+  {
+    id: 'platform_hash',
+    label: 'Platform Hash',
+    type: 'string',
+    operators: string_operators,
+  },
+  {
+    id: 'type',
+    label: 'Type',
+    type: 'string',
+    operators: string_operators,
+  },
+  {
+    id: 'unit',
+    label: 'Unit',
+    type: 'string',
+    operators: string_operators,
+  },
+  {
+    id: 'user',
+    label: 'User',
+    type: 'string',
+    operators: string_operators,
+  },
+  {
+    id: 'user_identifier',
+    label: 'User Identifier',
+    type: 'string',
+    operators: string_operators,
+  },
+  {
+    id: 'num_runs',
+    label: 'Num of Runs',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'time',
+    label: 'Time',
+    type: 'time',
+    operators: time_operators,
+  },
+  {
+    id: 'control_commit_time',
+    label: 'Control Commit Time',
+    type: 'time',
+    operators: time_operators,
+  },
+  {
+    id: 'commit_time',
+    label: 'Commit Time',
+    type: 'time',
+    operators: time_operators,
+  },
+  {
+    id: 'control_stdev',
+    label: 'Control Stdev',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'stdev',
+    label: 'Stdev',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'control_mean',
+    label: 'Control Mean',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'mean',
+    label: 'Mean',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'diff_mean',
+    label: 'Diff Mean',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'control_p0',
+    label: 'Control P0',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'p0',
+    label: 'P0',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'diff_p0',
+    label: 'Diff P0',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'control_p10',
+    label: 'Control P10',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'p10',
+    label: 'P10',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'diff_p10',
+    label: 'Diff P10',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'control_p50',
+    label: 'Control P50',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'p50',
+    label: 'P50',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'diff_p50',
+    label: 'Diff P50',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'control_p90',
+    label: 'Control P90',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'p90',
+    label: 'P90',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'diff_p90',
+    label: 'Diff P90',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'control_p100',
+    label: 'Control P100',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'p100',
+    label: 'P100',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'diff_p100',
+    label: 'Diff P100',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'control_p95',
+    label: 'Control P95',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'p95',
+    label: 'P95',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'control_p99',
+    label: 'Control P99',
+    type: 'integer',
+    operators: integer_operators,
+  },
+  {
+    id: 'p99',
+    label: 'P99',
+    type: 'integer',
+    operators: integer_operators,
+  },
+]

ailab/benchmark/static/js/form_submission.js

@@ -0,0 +1,29 @@
+$('#builder').queryBuilder({
+  plugins: ['bt-tooltip-errors'],
+
+  filters: filters,
+});
+
+var frm = $('#selection-form');
+frm.submit(function(event) { // catch the form's submit event
+
+  var result = $('#builder').queryBuilder('getRules');
+  var column_sel_obj = $('#selection-form').serializeArray()
+  var filters_obj = result
+
+
+  $.ajax({
+      type: frm.attr('method'),
+      dataType: 'json',
+      url: '/benchmark/visualize',
+      data: $.param({
+        'selection_form': JSON.stringify(column_sel_obj) ,
+        'filters': JSON.stringify(filters_obj),
+      }),
+      success: function (data) {
+        $("#graph-view").html(data.graph)
+        $("#table-view").html(data.table);
+      },
+  });
+  return false;
+});

ailab/benchmark/static/js/graph_configuration.js

@@ -0,0 +1,10 @@
+var $graph_type_dropdown = $('#graph-type-dropdown')
+var $rank_column_select = $('#rank-column-select')
+
+$graph_type_dropdown.on('change', function() {
+  if (this.value == 'bar-graph') {
+    $rank_column_select.show()
+  } else {
+    $rank_column_select.hide()
+  }
+}).trigger('change');

ailab/benchmark/templates/base.html

@@ -4,10 +4,13 @@
         <title>Data Visualization</title>
         {% load static %}
         <link href="{% static "bootstrap-3.3.7/css/bootstrap.min.css" %}" rel="stylesheet" />
-        <script href="{% static "bootstrap-3.3.7/js/bootstrap.min.js" %}"></script>
-        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+        <script src="{% static "jquery/jquery-3.3.1.min.js" %}"></script>
+        <script src="{% static "bootstrap-3.3.7/js/bootstrap.min.js" %}"></script>
+
         {% include_chart_jscss %}
-        {% load_chart charttype chartdata chartcontainer extra %}
+
+        <link href="{% static "query-builder/dist/css/query-builder.default.min.css" %}" rel="stylesheet" />
+        <script src="{% static "query-builder/dist/js/query-builder.standalone.min.js" %}"></script>
     </head>
 
     <body>

ailab/benchmark/templates/graph_view.html

@@ -0,0 +1,6 @@
+<div class="panel-body">
+  <div class='col-lg-12'>
+    {% load_chart charttype chartdata chartcontainer extra %}
+    {% include_container chartcontainer width="100%" %}
+  </div>
+</div>