DM-7965 - merged pr #258: consistent highlight and select colors; fixed histogram tooltip.

DM-7965 make consistent highlight and selection colors
Also fixed histogram tooltip causing TypeError.

Author: tgoldina

src/firefly/js/charts/ui/Histogram.jsx

@@ -5,7 +5,7 @@
 import React, {PropTypes} from 'react';
 import ReactHighcharts from 'react-highcharts';
 import numeral from 'numeral';
-import {set} from 'lodash';
+import {get, set} from 'lodash';
 import {getFormatString} from '../../util/MathUtil.js';
 import {logError} from '../../util/WebUtil.js';
 
@@ -368,14 +368,26 @@ export class Histogram extends React.Component {
                 text: ''
             },
             tooltip: {
-                split: true,
+                //shared: true works, split: true does not work with the current formatter in Highcharts 5
                 followPointer: true,
                 borderWidth: 1,
                 formatter() {
                     if (this.y === minY) {return false;} // don't display tooltip
-                    return '<span>'+(this.point.name ? `<b>Bin center:</b> ${this.point.name}<br/>` : '')+
-                        (this.point.range ? `<b>Range:</b> ${this.point.range}<br/>` : '')+
+                    let name, range;
+                    // either a point or an array of points are passed depending if the tooltip is shared
+                    if (this.point) {
+                        name = this.point.name;
+                        range = this.point.range;
+                    } else {
+                        const point = get(this, 'points[0].point');
+                        if (!point) {return false;}
+                        name = point.name;
+                        range = point.range;
+                    }
+                    return '<span>' + (name ? `<b>Bin center:</b> ${name}<br/>` : '') +
+                        (range ? `<b>Range:</b> ${range}<br/>` : '') +
                         `<b>Count:</b> ${this.y}</span>`;
+
                 }
             },
             plotOptions: {

src/firefly/js/charts/ui/XYPlot.jsx

@@ -1,7 +1,7 @@
 /*
  * License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt
  */
-import {isUndefined, debounce, get, omit} from 'lodash';
+import {isUndefined, debounce, get, has, omit} from 'lodash';
 import shallowequal from 'shallowequal';
 import React, {PropTypes} from 'react';
 import ReactHighcharts from 'react-highcharts';
@@ -66,12 +66,12 @@ const MINMAX = 'minmax';
 
 const datapointsColor = 'rgba(63, 127, 191, 0.5)';
 const datapointsColorWithErrors = 'rgba(63, 127, 191, 0.7)';
-const errorBarColor = 'rgba(191, 192, 193, 0.5)';
-const selectedColorWithErrors = 'rgba(21, 138, 15, 0.7)';
-const selectedColor = 'rgba(21, 138, 15, 0.5)';
-const highlightedColor = 'rgba(250, 243, 40, 1)';
-const selectionRectColor = 'rgba(165, 165, 165, 0.5)';
-
+const errorBarColor = 'rgba(255, 209, 128, 0.5)';
+const selectedColorWithErrors = 'rgba(255, 200, 0, 1)';
+const selectedColor = 'rgba(255, 200, 0, 1)';
+const highlightedColor = 'rgba(255, 165, 0, 1)';
+const selectionRectColor = 'rgba(255, 209, 128, 0.5)';
+const selectionRectColorGray = 'rgba(165, 165, 165, 0.5)';
 
 /*
  @param {number} weight for a given point
@@ -470,9 +470,10 @@ export class XYPlot extends React.Component {
             const yMaxPx = chart.yAxis[0].toPixels(selection.yMax);
             const width = Math.abs(xMaxPx - xMinPx);
             const height = Math.abs(yMaxPx - yMinPx);
+            const selColor = has(this.props, 'data.decimateKey') ? selectionRectColor : selectionRectColorGray;
             this.selectionRect = chart.renderer.rect(Math.min(xMinPx, xMaxPx), Math.min(yMinPx, yMaxPx), width, height, 1)
                 .attr({
-                    fill: selectionRectColor,
+                    fill: selColor,
                     stroke: '#8c8c8c',
                     'stroke-width': 0.5,
                     zIndex: 7 // same as Highcharts' selectionMrker rectangle
@@ -640,7 +641,7 @@ export class XYPlot extends React.Component {
                     id: HIGHLIGHTED,
                     name: HIGHLIGHTED,
                     color: highlightedColor,
-                    marker: {symbol: 'circle', lineColor: '#404040', lineWidth: 1, radius: 4},
+                    marker: {symbol: 'circle', radius: 4, lineColor: '#737373', lineWidth: 1},
                     data: highlightedData,
                     showInLegend: false
                 }, true, false);
@@ -725,7 +726,7 @@ export class XYPlot extends React.Component {
                         display: 'none'
                     }
                 },
-                selectionMarkerFill: selectionRectColor
+                selectionMarkerFill: decimateKey? selectionRectColor : selectionRectColorGray
             },
             exporting: {
                 enabled: true

src/firefly/js/tables/ui/TablePanel.css

@@ -547,6 +547,6 @@ body[dir="rtl"] .fixedDataTableColumnResizerLineLayout_main, .fixedDataTableColu
 }
 
 .fixedDataTableRowLayout_rowWrapper .tablePanel__Row_highlighted {
-    background-color: #d3fad1
+    background-color: #ffe8bf /* #d3fad1 */
 }
 

src/firefly/js/visualize/draw/DrawingDef.js

@@ -7,7 +7,7 @@ import Enum from 'enum';
 
 
 export const COLOR_SELECTED_PT = '#ffff00';
-export const COLOR_HIGHLIGHTED_PT = '#00aaff';
+export const COLOR_HIGHLIGHTED_PT = '#ff8000'; // orange
 export const COLOR_PT_1 = '#ff0000'; // red
 export const COLOR_PT_2 = '#00ff00'; //green
 export const COLOR_PT_3 = 'pink';  // pink