Merge branch 'develop'

epiviz · Nov 15, 2014 · e718691 · e718691
2 parents 4824325 + c419c27
commit e718691
Show file tree

Hide file tree

Showing 21 changed files with 870 additions and 379 deletions.
diff --git a/index.php b/index.php
@@ -183,9 +183,6 @@
     <script src="src/lib/jquery/DataTables-1.9.4/extras/ColumnFilter/media/js/jquery.dataTables.columnFilter.js"></script>
     <script src="src/lib/jquery/dropdown-check-list-1.4/js/ui.dropdownchecklist.js"></script>
 
-    <!-- Google Analytics -->
-    <script src="src/lib/google-analytics/google-analytics.js"></script>
-
     <!-- D3 -->
     <script src="src/lib/d3/d3.v3.min.js"></script>
 
@@ -278,6 +275,20 @@
     <script src="src/epiviz/ui/charts/track-type.js"></script>
     <script src="src/epiviz/ui/charts/plot-type.js"></script>
     <script src="src/epiviz/ui/charts/chart-factory.js"></script>
+
+    <script src="src/epiviz/ui/charts/decoration/chart-decoration.js"></script>
+    <script src="src/epiviz/ui/charts/decoration/chart-option-button.js"></script>
+    <script src="src/epiviz/ui/charts/decoration/remove-chart-button.js"></script>
+    <script src="src/epiviz/ui/charts/decoration/save-chart-button.js"></script>
+    <script src="src/epiviz/ui/charts/decoration/chart-colors-button.js"></script>
+    <script src="src/epiviz/ui/charts/decoration/custom-settings-button.js"></script>
+    <script src="src/epiviz/ui/charts/decoration/toggle-tooltip-button.js"></script>
+    <script src="src/epiviz/ui/charts/decoration/edit-code-button.js"></script>
+
+    <script src="src/epiviz/ui/charts/decoration/chart-resize.js"></script>
+    <script src="src/epiviz/ui/charts/decoration/chart-tooltip.js"></script>
+    <script src="src/epiviz/ui/charts/decoration/chart-loader-animation.js"></script>
+
     <script src="src/epiviz/ui/charts/chart-manager.js"></script>
 
     <script src="src/epiviz/workspaces/user-manager.js"></script>
@@ -524,6 +535,10 @@
       </div>
     </div>
 
+    <!-- Unimportant scripts -->
+
+    <!-- Google Analytics -->
+    <script src="src/lib/google-analytics/google-analytics.js"></script>
   </body>
 
 </html>
diff --git a/src/epiviz-test/test-suite.js b/src/epiviz-test/test-suite.js
@@ -194,7 +194,7 @@ epiviztest.TestSuite.prototype.addChart = function(chartTypeName, range, measure
       return uiObjects;
     };
 
-    self.epivizFramework.chartManager.addChartsLoaderAnimation(chartId);
+    self.epivizFramework.chartManager.dataWaitStart(chartId);
 
     self.epivizFramework.dataManager.getData(range, chartMeasurementsMap,
       function(chartId, data) {
@@ -315,7 +315,7 @@ epiviztest.TestSuite.prototype.navigate = function(chartTypeName, initialRange,
 
     startTime = new Date().getTime();
 
-    self.epivizFramework.chartManager.addChartsLoaderAnimation();
+    self.epivizFramework.chartManager.dataWaitStart();
     var chartMeasurementsMap = self.epivizFramework.chartManager.chartsMeasurements();
 
     self.epivizFramework.dataManager.getData(newRange, chartMeasurementsMap,
@@ -324,7 +324,7 @@ epiviztest.TestSuite.prototype.navigate = function(chartTypeName, initialRange,
       });
   };
 
-  self.epivizFramework.chartManager.addChartsLoaderAnimation(chartId);
+  self.epivizFramework.chartManager.dataWaitStart(chartId);
   self.epivizFramework.dataManager.getData(initialRange, chartMeasurementsMap,
     function(chartId, data) {
 

diff --git a/src/epiviz/config.js b/src/epiviz/config.js
@@ -137,18 +137,20 @@ epiviz.Config = function(settingsMap) {
    * @type {Object.<epiviz.ui.charts.ChartType.DisplayType|string, Object.<epiviz.Config.ChartPropertySettings, *>>}
    */
   this.chartSettings = {
+    default: {
+      margins: new epiviz.ui.charts.Margins(10, 5, 5, 5),
+      colors: new epiviz.ui.charts.ColorPalette(epiviz.Config.COLORS_BRIGHT),
+      decorations: []
+    },
+
     plot: {
       width: 600,
-      height: 400,
-      margins: new epiviz.ui.charts.Margins(10, 5, 5, 5),
-      colors: new epiviz.ui.charts.ColorPalette(epiviz.Config.COLORS_BRIGHT)
+      height: 400
     },
 
     track: {
       width: '100%',
-      height: 120,
-      margins: new epiviz.ui.charts.Margins(10, 5, 5, 5),
-      colors: new epiviz.ui.charts.ColorPalette(epiviz.Config.COLORS_BRIGHT)
+      height: 120
     }
   };
 
@@ -192,25 +194,25 @@ epiviz.Config = function(settingsMap) {
 };
 
 /**
- * @type {epiviz.ui.charts.ColorPalette}
+ * @type {Array.<string>}
  * @const
  */
 epiviz.Config.EPIVIZ_V1_COLORS = ['#025167', '#e7003e', '#ffcd00', '#057d9f', '#970026', '#ffe373', '#ff8100'];
 
 /**
- * @type {epiviz.ui.charts.ColorPalette}
+ * @type {Array.<string>}
  * @const
  */
 epiviz.Config.COLORS_BRIGHT = ['#1859a9', '#ed2d2e', '#008c47', '#010101', '#f37d22', '#662c91', '#a11d20', '#b33893'];
 
 /**
- * @type {epiviz.ui.charts.ColorPalette}
+ * @type {Array.<string>}
  * @const
  */
 epiviz.Config.COLORS_LIGHT = ['#b8d2eb', '#f2aeac', '#d8e4aa', '#cccccc', '#f2d1b0', '#d4b2d3', '#ddb8a9', '#ebbfd9'];
 
 /**
- * @type {epiviz.ui.charts.ColorPalette}
+ * @type {Array.<string>}
  * @const
  */
 epiviz.Config.COLORS_MEDIUM = ['#599ad3', '#f1595f', '#79c36a', '#727272', '#f9a65a', '#9e66ab', '#cd7058', '#d77fb3'];
@@ -222,5 +224,6 @@ epiviz.Config.ChartPropertySettings = {
   WIDTH: 'width',
   HEIGHT: 'height',
   MARGINS: 'margins',
-  COLORS: 'colors'
+  COLORS: 'colors',
+  DECORATIONS: 'decorations'
 };
diff --git a/src/epiviz/default-settings.js b/src/epiviz/default-settings.js
@@ -54,18 +54,33 @@ epiviz.EpiViz.SETTINGS = {
   // Chart default settings
 
   chartSettings: {
+    default: {
+      colors: new epiviz.ui.charts.ColorPalette(epiviz.Config.COLORS_BRIGHT),
+      decorations: [
+        'epiviz.ui.charts.decoration.RemoveChartButton',
+        'epiviz.ui.charts.decoration.SaveChartButton',
+        'epiviz.ui.charts.decoration.ChartColorsButton',
+        'epiviz.ui.charts.decoration.CustomSettingsButton',
+        'epiviz.ui.charts.decoration.ToggleTooltipButton',
+        'epiviz.ui.charts.decoration.EditCodeButton',
+
+        'epiviz.ui.charts.decoration.ChartResize',
+        'epiviz.ui.charts.decoration.ChartTooltip',
+
+        'epiviz.ui.charts.decoration.ChartLoaderAnimation'
+      ]
+    },
+
     plot: {
       width: 400,
       height: 400,
-      margins: new epiviz.ui.charts.Margins(15, 30, 30, 15),
-      colors: new epiviz.ui.charts.ColorPalette(epiviz.Config.COLORS_BRIGHT)
+      margins: new epiviz.ui.charts.Margins(15, 30, 30, 15)
     },
 
     track: {
       width: '100%',
       height: 90,
-      margins: new epiviz.ui.charts.Margins(25, 20, 23, 10),
-      colors: new epiviz.ui.charts.ColorPalette(epiviz.Config.COLORS_BRIGHT)
+      margins: new epiviz.ui.charts.Margins(25, 20, 23, 10)
     },
 
     'epiviz.plugins.charts.GenesTrack': {

diff --git a/src/epiviz/epiviz.js b/src/epiviz/epiviz.js
@@ -172,7 +172,7 @@ epiviz.EpiViz.prototype.config = function() {
 epiviz.EpiViz.prototype._addChart = function(type, measurements, chartId, chartProperties) {
   chartId = this._chartManager.addChart(type, measurements, chartId, chartProperties);
   var range = this._workspaceManager.activeWorkspace().range();
-  this._chartManager.addChartsLoaderAnimation(chartId);
+  this._chartManager.dataWaitStart(chartId);
   var chartMeasurementsMap = {};
   chartMeasurementsMap[chartId] = measurements;
   var self = this;
@@ -655,7 +655,7 @@ epiviz.EpiViz.prototype._registerLocationChanged = function() {
      * @param {{oldValue: epiviz.datatypes.GenomicRange, newValue: epiviz.datatypes.GenomicRange}} e
      */
     function(e) {
-      self._chartManager.addChartsLoaderAnimation();
+      self._chartManager.dataWaitStart();
 
       /** @type {Object.<string, epiviz.measurements.MeasurementSet>} */
       var chartMeasurementsMap = self._chartManager.chartsMeasurements();

diff --git a/src/epiviz/ui/charts/chart-manager.js b/src/epiviz/ui/charts/chart-manager.js
@@ -136,6 +136,24 @@ epiviz.ui.charts.ChartManager.prototype.addChart = function(chartType, measureme
   this._registerChartRemove(chart);
   this._registerChartSave(chart);
 
+  if (chartType.decorations()) {
+    /** @type {epiviz.ui.charts.decoration.ChartDecoration} */
+    var topDecoration = undefined;
+    for (var i = 0; i < chartType.decorations().length; ++i) {
+      /** @type {?(function(new:epiviz.ui.charts.decoration.ChartDecoration))} */
+      var decorationCtor = epiviz.utils.evaluateFullyQualifiedTypeName(chartType.decorations()[i]);
+
+      if (!decorationCtor) { continue; }
+
+      /** @type {epiviz.ui.charts.decoration.ChartDecoration} */
+      topDecoration  = epiviz.utils.applyConstructor(decorationCtor, [chart, topDecoration]);
+    }
+
+    if (topDecoration) {
+      topDecoration.decorate();
+    }
+  }
+
   if (!(chartType.chartDisplayType() in this._chartsOrder)) { this._chartsOrder[chartType.chartDisplayType()] = []; }
   this._chartsOrder[chartType.chartDisplayType()].push(id);
 
@@ -155,7 +173,6 @@ epiviz.ui.charts.ChartManager.prototype.addChart = function(chartType, measureme
 epiviz.ui.charts.ChartManager.prototype.removeChart = function(id) {
   $('#' + id).remove();
 
-  var DisplayType = epiviz.ui.charts.ChartType.DisplayType;
   var chart = this._charts[id];
   delete this._charts[id];
   this._chartsOrder[chart.displayType()].splice(this._chartsOrder[chart.displayType()].indexOf(id), 1);
@@ -212,17 +229,18 @@ epiviz.ui.charts.ChartManager.prototype.clear = function() {
 };
 
 /**
- * Tells all charts to display loading animation until new data is loaded
+ * Tells all charts that new data has been requested.
+ * Used, for example, by ChartLoaderAnimation decoration.
  * @param {string} [chartId]
  */
-epiviz.ui.charts.ChartManager.prototype.addChartsLoaderAnimation = function(chartId) {
+epiviz.ui.charts.ChartManager.prototype.dataWaitStart = function(chartId) {
   if (chartId && this._charts[chartId]) {
-    this._charts[chartId].addLoaderAnimation();
+    this._charts[chartId].onDataWaitStart().notify();
     return;
   }
   for (var id in this._charts) {
-    if (!this._charts.hasOwnProperty(chartId)) { continue; }
-    this._charts[chartId].addLoaderAnimation();
+    if (!this._charts.hasOwnProperty(id)) { continue; }
+    this._charts[id].onDataWaitStart().notify();
   }
 };
 
@@ -275,7 +293,7 @@ epiviz.ui.charts.ChartManager.prototype.onChartMarginsChanged = function() { ret
  */
 epiviz.ui.charts.ChartManager.prototype._registerWindowResize = function() {
   var self = this;
-  $(window).resize(function(e) {
+  $(window).resize(function() {
     if (self._resizeInterval !== null) { window.clearTimeout(self._resizeInterval); }
     self._resizeInterval = window.setTimeout(function() {
       for (var chartId in self._charts) {

diff --git a/src/epiviz/ui/charts/chart-type.js b/src/epiviz/ui/charts/chart-type.js
@@ -29,7 +29,9 @@ epiviz.ui.charts.ChartType = function(config) {
    * @type {Object.<epiviz.Config.ChartPropertySettings|string, *>}
    * @protected
    */
-  this._defaultSettings = epiviz.utils.mapCombine(config.chartSettings[this.typeName()], config.chartSettings[this.chartDisplayType()]);
+  this._defaultSettings = epiviz.utils.mapCombine(
+    epiviz.utils.mapCombine(config.chartSettings[this.typeName()], config.chartSettings[this.chartDisplayType()], true),
+    config.chartSettings['default'], true);
 
   /**
    * @type {string|number}
@@ -55,6 +57,12 @@ epiviz.ui.charts.ChartType = function(config) {
    */
   this._defaultColors = this._defaultSettings[ChartPropertySettings.COLORS];
 
+  /**
+   * @type {Array.<string>}
+   * @private
+   */
+  this._decorations = this._defaultSettings[ChartPropertySettings.DECORATIONS];
+
   /**
    * @type {?Object.<string, *>}
    * @private
@@ -149,6 +157,11 @@ epiviz.ui.charts.ChartType.prototype.defaultMargins = function() { return this._
  */
 epiviz.ui.charts.ChartType.prototype.defaultColors = function() { return this._defaultColors; };
 
+/**
+ * @returns {Array.<string>}
+ */
+epiviz.ui.charts.ChartType.prototype.decorations = function() { return this._decorations; };
+
 /**
  * @returns {?Object.<string, *>}
  */