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-matrix",
Daniel@0:             inherit: "_",
Daniel@0: 
Daniel@0:             defaultVegaConfig: {
Daniel@0:                 comparisonMode: null,
Daniel@0: 
Daniel@0:                 colorForData: "#3182bd",
Daniel@0: 
Daniel@0:                 padding: {"top": 5, "left": 0, "bottom": 0, "right": 0},
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:                         list: [],
Daniel@0:                         distance: []
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:                 // :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Daniel@0:                 // Data
Daniel@0:                 var distance = stats.distance;
Daniel@0:                 var list = stats.list;
Daniel@0: 
Daniel@0:                 // .............................................................
Daniel@0:                 // Data - cells
Daniel@0:                 var cellsInVegaData = [];
Daniel@0:                 var maxDistance = 0;
Daniel@0:                 for (var column = 0; column < recordingCount; ++column) {
Daniel@0:                     for (var row = 0; row < recordingCount; ++row) {
Daniel@0:                         var currentDistance = distance[row][column];
Daniel@0:                         if (currentDistance < 1E-5) {
Daniel@0:                             currentDistance = 0;
Daniel@0:                         }
Daniel@0:                         var cellInVegaData = {
Daniel@0:                                 column:     column,
Daniel@0:                                 row:        row,
Daniel@0:                                 nextColumn: column + 1,
Daniel@0:                                 nextRow:    row + 1,
Daniel@0:                                 distance:   currentDistance
Daniel@0:                             };
Daniel@0:                         if (column != row) {
Daniel@0:                             cellInVegaData.tooltip =  "↔ " + list[row].label
Daniel@0:                                 + "<br/>↕   " + list[column].label
Daniel@0:                                 + "<br/>" + GraphicsRenderingModule._formatNumberForTooltip(cellInVegaData.distance);
Daniel@0:                         } else {
Daniel@0:                             cellInVegaData.tooltip =  list[row].label;
Daniel@0:                         }
Daniel@0: 
Daniel@0:                         cellsInVegaData.push(cellInVegaData);
Daniel@0:                         if (cellInVegaData.distance > maxDistance) {
Daniel@0:                             maxDistance = cellInVegaData.distance;
Daniel@0:                         }
Daniel@0:                     }
Daniel@0:                 }
Daniel@0: 
Daniel@0:                 vc.data.push({
Daniel@0:                     "name": "cells",
Daniel@0:                     "values": cellsInVegaData
Daniel@0:                 });
Daniel@0: 
Daniel@0: 
Daniel@0:                 // :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Daniel@0:                 // Scales
Daniel@0: 
Daniel@0:                 // .............................................................
Daniel@0:                 // Scale - columns
Daniel@0:                 vc.scales.push({
Daniel@0:                     //"type": "ordinal",
Daniel@0:                     "name": "column",
Daniel@0:                     "domainMin": 0,
Daniel@0:                     "domainMax": recordingCount,
Daniel@0:                     "point": true,
Daniel@0:                     "round": true,
Daniel@0:                     "range": [0, vc.width]
Daniel@0:                 });
Daniel@0: 
Daniel@0:                 // .............................................................
Daniel@0:                 // Scale - rows
Daniel@0:                 vc.scales.push({
Daniel@0:                     //"type": "ordinal",
Daniel@0:                     "name": "row",
Daniel@0:                     "domainMin": 0,
Daniel@0:                     "domainMax": recordingCount,
Daniel@0:                     "point": true,
Daniel@0:                     "round": true,
Daniel@0:                     "range": [0, vc.height]
Daniel@0:                 });
Daniel@0: 
Daniel@0:                 // .............................................................
Daniel@0:                 // Scale - fill opacity
Daniel@0:                 vc.scales.push({
Daniel@0:                     "name": "fillOpacity",
Daniel@0:                     "type": "linear",
Daniel@0:                     "domain": [0, maxDistance],
Daniel@0:                     "point": true,
Daniel@0:                     "range": [0, 1]
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 - cells
Daniel@0: 
Daniel@0:                 vc.marks.push({
Daniel@0:                     "type": "rect",
Daniel@0:                     "from": {"data": "cells"},
Daniel@0:                     "properties": {
Daniel@0:                         "enter": {
Daniel@0:                             "x":  {"field": "column", "scale": "column"},
Daniel@0:                             "x2": {"field": "nextColumn", "scale": "column", "offset": -1},
Daniel@0:                             "y":  {"field": "row", "scale": "row"},
Daniel@0:                             "y2": {"field": "nextRow", "scale": "row", "offset": -1},
Daniel@0:                             "fill": {"value": vc.colorForData},
Daniel@0:                             "fillOpacity": {"field": "distance", "scale": "fillOpacity"},
Daniel@0:                         }
Daniel@0:                     }
Daniel@0:                 });
Daniel@0: 
Daniel@0:             },
Daniel@0:         });
Daniel@0:     });
Daniel@0: }, Logger);