Daniel@0: "use strict";
Daniel@0: 
Daniel@0: App.module("GraphicsRenderingModule", function(GraphicsRenderingModule, App, Backbone, Marionette, $, _, Logger) {
Daniel@0: 
Daniel@0:     GraphicsRenderingModule.addInitializer(function(options){
Daniel@0: 
Daniel@0:         GraphicsRenderingModule.registerRenderer({
Daniel@0:             id: "similarity-plane",
Daniel@0:             inherit: "_",
Daniel@0: 
Daniel@0:             defaultVegaConfig: {
Daniel@0:                 comparisonMode: null,
Daniel@0: 
Daniel@0:                 symbolSize: 20,
Daniel@0:                 internalSpaceOffset: 6,
Daniel@0:                 colorForData: "#3182bd",
Daniel@0: 
Daniel@0:                 padding: {"top": 10, "left": 10, "bottom": 10, "right": 10},
Daniel@0:             },
Daniel@0: 
Daniel@0: 
Daniel@0:             _formVC: function(vc, data) {
Daniel@0:                 vc.enoughSpaceForAxisLabels = vc.totalWidth > 200;
Daniel@0:                 vc.width  = vc.totalWidth  - vc.padding.left - vc.padding.right;
Daniel@0:                 vc.height = vc.totalHeight - vc.padding.top  - vc.padding.bottom;
Daniel@0: 
Daniel@0:                 var stats = {
Daniel@0:                         mds: [],
Daniel@0:                         list: []
Daniel@0:                 }
Daniel@0:                 if (data.self.stats) {
Daniel@0:                     data.self.stats = stats
Daniel@0:                 }
Daniel@0:                 var recordingCount = stats.list.length;
Daniel@0: 
Daniel@0:                 // :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Daniel@0:                 // Data
Daniel@0:                 var mds = stats.mds;
Daniel@0:                 var list = stats.list;
Daniel@0: 
Daniel@0:                 // .............................................................
Daniel@0:                 // Data - points
Daniel@0:                 var pointsInVegaData = [];
Daniel@0:                 for (var i = 0; i < recordingCount; ++i) {
Daniel@0:                     var pointInVegaData = {
Daniel@0:                             x:     mds[i][0],
Daniel@0:                             y:     mds[i][1]
Daniel@0:                         };
Daniel@0:                     pointInVegaData.tooltip = list[i].label;
Daniel@0: //                                            + "<br/>x: " + GraphicsRenderingModule._formatNumberForTooltip(pointInVegaData.x)
Daniel@0: //                                            + "<br/>y: " + GraphicsRenderingModule._formatNumberForTooltip(pointInVegaData.y)
Daniel@0: 
Daniel@0:                     pointsInVegaData.push(pointInVegaData);
Daniel@0:                 }
Daniel@0: 
Daniel@0:                 vc.data.push({
Daniel@0:                     "name": "points",
Daniel@0:                     "values": pointsInVegaData
Daniel@0:                 });
Daniel@0: 
Daniel@0: 
Daniel@0:                 // :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Daniel@0:                 // Scales
Daniel@0: 
Daniel@0:                 // .............................................................
Daniel@0:                 // Scale - x
Daniel@0:                 vc.scales.push({
Daniel@0:                     "name": "x",
Daniel@0:                     "domain": {"data": "points", "field": "x"},
Daniel@0:                     "point": true,
Daniel@0:                     "round": true,
Daniel@0:                     "zero":  true,
Daniel@0:                     "range": [vc.internalSpaceOffset, vc.width - vc.internalSpaceOffset]
Daniel@0:                 });
Daniel@0: 
Daniel@0:                 // .............................................................
Daniel@0:                 // Scale - y
Daniel@0:                 vc.scales.push({
Daniel@0:                     "name": "y",
Daniel@0:                     "domain": {"data": "points", "field": "y"},
Daniel@0:                     "point": true,
Daniel@0:                     "round": true,
Daniel@0:                     "zero":  true,
Daniel@0:                     "inverse": true,
Daniel@0:                     "range": [vc.internalSpaceOffset, vc.height - vc.internalSpaceOffset]
Daniel@0:                 });
Daniel@0: 
Daniel@0: 
Daniel@0:                 // :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Daniel@0:                 // Marks
Daniel@0: 
Daniel@0:                 // .............................................................
Daniel@0:                 // Mark - background (to catch mouse events and remove tooltips)
Daniel@0:                 vc.marks.push({
Daniel@0:                    "type": "rect",
Daniel@0:                    "properties": {
Daniel@0:                        "enter": {
Daniel@0:                            "x": {"value": -vc.padding.left},
Daniel@0:                            "y": {"value": -vc.padding.top},
Daniel@0:                            "fill": {"value": "#fff"},
Daniel@0:                            "y2": {"field": {"group": "height"}, "offset": vc.padding.left + vc.padding.right},
Daniel@0:                            "x2": {"field": {"group": "width"}, "offset": vc.padding.top + vc.padding.bottom},
Daniel@0:                        }
Daniel@0:                    }
Daniel@0:                 });
Daniel@0: 
Daniel@0: 
Daniel@0:                 // .............................................................
Daniel@0:                 // Mark - frame
Daniel@0:                 vc.marks.push({
Daniel@0:                     "type": "rect",
Daniel@0:                     "properties": {
Daniel@0:                         "enter": {
Daniel@0:                             "y": {"value": 0, "offset": .5},
Daniel@0:                             "y2": {"field": {"group": "height"}, "offset": -.5},
Daniel@0:                             "x": {"value": 0, "offset": .5},
Daniel@0:                             "x2": {"field": {"group": "width"}, "offset": -.5},
Daniel@0:                             "stroke": {"value": vc.colorForAxes},
Daniel@0:                             "strokeWidth": {"value": 1},
Daniel@0: //                            "x":  {"value": 0, "scale": "x" "offset": -1},
Daniel@0: //                            "width": {"value": 1},
Daniel@0:                         }
Daniel@0:                     }
Daniel@0:                  });
Daniel@0: 
Daniel@0:                 // .............................................................
Daniel@0:                 // Mark - x axis
Daniel@0: //                vc.marks.push({
Daniel@0: //                   "type": "rect",
Daniel@0: //                   "properties": {
Daniel@0: //                       "enter": {
Daniel@0: //                           "x": {"value": 0},
Daniel@0: //                           "x2": {"field": {"group": "width"}},
Daniel@0: //                           "fill": {"value": vc.colorForAxes},
Daniel@0: //                           "y":  {"value": 0, "scale": "y"},
Daniel@0: //                           "height": {"value": 1},
Daniel@0: //                       }
Daniel@0: //                   }
Daniel@0: //                });
Daniel@0: 
Daniel@0: 
Daniel@0:                 // .............................................................
Daniel@0: //                // Mark - y axis
Daniel@0: //                vc.marks.push({
Daniel@0: //                   "type": "rect",
Daniel@0: //                   "properties": {
Daniel@0: //                       "enter": {
Daniel@0: //                           "y": {"value": 0},
Daniel@0: //                           "y2": {"field": {"group": "height"}},
Daniel@0: //                           "fill": {"value": vc.colorForAxes},
Daniel@0: //                           "x":  {"value": 0, "scale": "x", "offset": -1},
Daniel@0: //                           "width": {"value": 1},
Daniel@0: //                       }
Daniel@0: //                   }
Daniel@0: //                });
Daniel@0: 
Daniel@0:                 // .............................................................
Daniel@0:                 // Mark - cells
Daniel@0:                 vc.marks.push({
Daniel@0:                     "type": "symbol",
Daniel@0:                     "from": {"data": "points"},
Daniel@0:                     "properties": {
Daniel@0:                         "enter": {
Daniel@0:                             "x":  {"field": "x", "scale": "x"},
Daniel@0:                             "y":  {"field": "y", "scale": "y"},
Daniel@0:                             "size": {"value": vc.symbolSize},
Daniel@0:                             "fill": {"value": vc.colorForData}
Daniel@0:                         }
Daniel@0:                     }
Daniel@0:                 });
Daniel@0: 
Daniel@0: 
Daniel@0:             },
Daniel@0:         });
Daniel@0:     });
Daniel@0: }, Logger);