insights presets WIP

modules/insight/src/main/Dimension.scala

@@ -121,25 +121,26 @@ object Dimension {
   }
 
   def valueToJson[X](d: Dimension[X])(v: X): play.api.libs.json.JsObject = {
-    import play.api.libs.json._
-    Json.obj(
-      "key" -> (d match {
-        case Perf                    => v.key
-        case Phase                   => v.id
-        case Result                  => v.id
-        case Termination             => v.id
-        case Color                   => v.name
-        case Opening                 => v.eco
-        case OpponentStrength        => v.id
-        case PieceRole               => v.name
-        case MovetimeRange           => v.id
-        case MyCastling | OpCastling => v.id
-        case QueenTrade              => v.id
-        case MaterialRange           => v.id
-      }).toString,
+    play.api.libs.json.Json.obj(
+      "key" -> valueKey(d)(v),
       "name" -> d.valueName(v))
   }
 
+  def valueKey[X](d: Dimension[X])(v: X): String = (d match {
+    case Perf                    => v.key
+    case Phase                   => v.id
+    case Result                  => v.id
+    case Termination             => v.id
+    case Color                   => v.name
+    case Opening                 => v.eco
+    case OpponentStrength        => v.id
+    case PieceRole               => v.name
+    case MovetimeRange           => v.id
+    case MyCastling | OpCastling => v.id
+    case QueenTrade              => v.id
+    case MaterialRange           => v.id
+  }).toString
+
   def filtersOf[X](d: Dimension[X], selected: List[X]): BSONDocument = d match {
     case Dimension.MovetimeRange => selected match {
       case Nil => BSONDocument()

modules/insight/src/main/JsonView.scala

@@ -46,27 +46,42 @@ final class JsonView {
           Json toJson D.Termination,
           Json toJson D.Result))
       ),
-      "metricCategs" -> List(
-        Categ("Setup", List(
-          Json toJson M.OpponentRating
-        )),
-        Categ("Move", List(
-          Json toJson M.Movetime,
-          Json toJson M.PieceRole,
-          Json toJson M.Material,
-          Json toJson M.NbMoves
-        )),
-        Categ("Evaluation", List(
-          Json toJson M.MeanCpl,
-          Json toJson M.Opportunism,
-          Json toJson M.Luck
-        )),
-        // result
-        Categ("Result", List(
-          Json toJson M.Termination,
-          Json toJson M.Result,
-          Json toJson M.RatingDiff))
-      )
+      "metricCategs" -> metricCategs,
+      "presets" -> Preset.all
+    )
+  }
+
+  private val metricCategs = List(
+    Categ("Setup", List(
+      Json toJson M.OpponentRating
+    )),
+    Categ("Move", List(
+      Json toJson M.Movetime,
+      Json toJson M.PieceRole,
+      Json toJson M.Material,
+      Json toJson M.NbMoves
+    )),
+    Categ("Evaluation", List(
+      Json toJson M.MeanCpl,
+      Json toJson M.Opportunism,
+      Json toJson M.Luck
+    )),
+    // result
+    Categ("Result", List(
+      Json toJson M.Termination,
+      Json toJson M.Result,
+      Json toJson M.RatingDiff))
+  )
+
+  private implicit def presetWriter[X]: OWrites[Preset] = OWrites { p =>
+    Json.obj(
+      "name" -> p.name,
+      "dimension" -> p.question.dimension.key,
+      "metric" -> p.question.metric.key,
+      "filters" -> JsObject(p.question.filters.map {
+        case Filter(dimension, selected) =>
+          dimension.key -> JsArray(selected.map(Dimension.valueKey(dimension)).map(JsString.apply))
+      })
     )
   }
 

modules/insight/src/main/Preset.scala

@@ -0,0 +1,26 @@
+package lila.insight
+
+import lila.rating.PerfType
+
+case class Preset(name: String, question: Question[_])
+
+object Preset {
+
+  import lila.insight.{ Dimension => D, Metric => M }
+
+  val all = List(
+
+    Preset("Do I gain more rating points against weaker or stronger opponents?",
+      Question(D.OpponentStrength, M.RatingDiff, Nil)),
+
+    Preset("How fast do I move each piece in bullet and blitz games?",
+      Question(D.PieceRole, M.Movetime, List(
+        Filter(D.Perf, List(PerfType.Bullet, PerfType.Blitz))))),
+
+    Preset("What are my results for my favourite openings as white, in standard chess?",
+      Question(D.Opening, M.Result, List(
+        Filter(D.Perf, List(PerfType.Bullet, PerfType.Blitz, PerfType.Classical, PerfType.Correspondence)),
+        Filter(D.Color, List(chess.White))
+      )))
+  )
+}

public/stylesheets/insight.css

@@ -13,9 +13,9 @@
 #insight .chart {
   width: 100%;
   height: 500px;
-  transition: opacity 0.5s;
 }
 #insight .loading .chart {
+  -webkit-filter: blur(3px);
   opacity: 0.5;
 }
 
@@ -78,19 +78,43 @@
   color: #fff!important;
 }
 
-#insight .filters .topless a {
-  color: #999;
-  font-weight: bold;
-  text-transform: uppercase;
-  text-shadow: 0 1px 1px #fff;
-  cursor: pointer;
+div.panel-tabs a.tab {
+  background: #e0e0e0;
+  border: 1px solid #c0c0c0;
+  height: 20px;
+  padding: 3px 8px 0 8px;
+  margin: -1px -1px -1px 0;
+  display: inline-block;
 }
-#insight .filters .topless .clear {
-  float: right;
-  text-transform: none;
+div.panel-tabs a.active {
+  background: #f5f5f5;
+  border-bottom-color: #f5f5f5;
+}
+#insight .presets {
+  background: #f5f5f5;
+}
+#insight .presets a {
+  display: block;
+  padding: 8px;
+  transition: background 0.13s;
+}
+#insight .presets a::before {
+  opacity: 0.7;
+  transition: opacity 0.13s;
+}
+#insight .presets a:hover {
+  background: #fff;
 }
-#insight .filters .topless .toggle span {
-  margin-left: 4px;
+#insight .presets a:hover::before {
+  opacity: 1;
+}
+#insight .panel-tabs {
+  position: relative;
+}
+#insight .clear {
+  position: absolute;
+  top: -20px;
+  right: 0;
 }
 #insight .filters .box {
   border-bottom-width: 0;

ui/insight/src/ctrl.js

@@ -31,7 +31,7 @@ module.exports = function(env) {
     filters: env.initialQuestion.filters,
     loading: true,
     answer: null,
-    showFilters: !!Object.keys(env.initialQuestion.filters).length
+    panel: !!Object.keys(env.initialQuestion.filters).length ? 'filter' : 'preset'
   };
 
   var reset = function() {
@@ -45,6 +45,7 @@ module.exports = function(env) {
     this.pushState();
     this.vm.loading = true;
     m.redraw();
+    setTimeout(function() {
     m.request({
       method: 'post',
       url: env.postUrl,
@@ -57,6 +58,7 @@ module.exports = function(env) {
       this.vm.answer = answer;
       this.vm.loading = false;
     }.bind(this));
+    }.bind(this), 1000);
   }.bind(this));
 
   this.pushState = function() {
@@ -93,6 +95,13 @@ module.exports = function(env) {
     askQuestion();
   }.bind(this);
 
+  this.setQuestion = function(q) {
+    this.vm.dimension = findDimension(q.dimension);
+    this.vm.metric = findMetric(q.metric);
+    this.vm.filters = q.filters;
+    askQuestion();
+  }.bind(this);
+
   this.clearFilters = function() {
     this.vm.filters = {};
     askQuestion();

ui/insight/src/filters.js

@@ -28,34 +28,14 @@ function select(ctrl) {
 }
 
 module.exports = function(ctrl) {
-  var isFiltered = !!Object.keys(ctrl.vm.filters).length;
-  var show = ctrl.vm.showFilters;
   return m('div.filters', [
-    m('div.topless', [
-      isFiltered ? m('a.clear.hint--top', {
-        'data-hint': 'Clear all filters',
-        onclick: ctrl.clearFilters
-      }, m('span', {
-        'data-icon': 'L',
-      }, 'CLEAR')) : null,
-      m('a.toggle', {
-        onclick: function() {
-          ctrl.vm.showFilters = !ctrl.vm.showFilters;
-        }
-      }, [
-        show ? 'Hide filters' : 'Show filters',
-        m('span', {
-          'data-icon': show ? 'S' : 'R'
-        })
-      ])
-    ]),
-    show ? m('div.items',
+    m('div.items',
       ctrl.ui.dimensionCategs.map(function(categ) {
         return m('div.categ.box', [
           m('div.top', categ.name),
           categ.items.map(select(ctrl))
         ]);
       })
-    ) : null
+    )
   ]);
 };

ui/insight/src/presets.js

@@ -0,0 +1,14 @@
+var m = require('mithril');
+
+module.exports = function(ctrl) {
+  return m('div.box.presets',
+    ctrl.ui.presets.map(function(p) {
+      return m('a.preset.text', {
+        'data-icon': '7',
+        onclick: function() {
+          ctrl.setQuestion(p);
+        }
+      }, p.name);
+    })
+  );
+};

ui/insight/src/view.js

@@ -1,6 +1,7 @@
 var m = require('mithril');
 var axis = require('./axis');
 var filters = require('./filters');
+var presets = require('./presets');
 var chart = require('./chart');
 var table = require('./table');
 var help = require('./help');
@@ -19,7 +20,27 @@ module.exports = function(ctrl) {
   }, [
     m('div.left-side', [
       info(ctrl),
-      filters(ctrl),
+      m('div.panel-tabs', [
+        m('a[data-panel=preset]', {
+          class: 'tab' + (ctrl.vm.panel === 'preset' ? ' active' : ''),
+          onclick: function() {
+            ctrl.vm.panel = 'preset';
+          }
+        }, 'Presets'),
+        m('a[data-panel=filter]', {
+          class: 'tab' + (ctrl.vm.panel === 'filter' ? ' active' : ''),
+          onclick: function() {
+            ctrl.vm.panel = 'filter';
+          }
+        }, 'Filters'), !!Object.keys(ctrl.vm.filters).length ? m('a.clear.hint--top', {
+          'data-hint': 'Clear all filters',
+          onclick: ctrl.clearFilters
+        }, m('span', {
+          'data-icon': 'L',
+        }, 'CLEAR')) : null,
+      ]),
+      ctrl.vm.panel === 'filter' ? filters(ctrl) : null,
+      ctrl.vm.panel === 'preset' ? presets(ctrl) : null,
       help(ctrl)
     ]),
     m('header', [