DM-9944 XYPlot with plotly library

src/firefly/html/demo/ffapi-highlevel-charttest.html

@@ -27,6 +27,11 @@ <h2>
 <br/><br/>
 <div id="xyplotHere" style="width: 800px; height: 550px; border: solid 1px;"></div>
 
+<script type="text/javascript">
+    if (!window.firefly) window.firefly= {};
+    window.firefly.options= {charts: {chartEngine: 'plotly'}};
+</script>
+
 <script type="text/javascript">
     {
         onFireflyLoaded= function(firefly) {

src/firefly/html/demo/ffapi-highlevel-test.html

@@ -118,6 +118,12 @@
     </div>
 </div>
 
+<script type="text/javascript">
+    if (!window.firefly) window.firefly= {};
+    window.firefly.options= {charts: {chartEngine: 'plotly'}};
+</script>
+
+
 <script type="text/javascript">
     {
         function loadMoving() {

src/firefly/js/FFEntryPoint.js

@@ -70,5 +70,7 @@ if (app.template) {
     viewer = Templates[props.template];
 }
 
-firefly.bootstrap(app.options, viewer, props);
+const options= get(window, 'firefly.app.options') || get(window, 'firefly.options');
+
+firefly.bootstrap(options, viewer, props);
 

src/firefly/js/charts/PlotlyConfig.js

@@ -8,6 +8,7 @@
 // NOTE - Remember to uncomment both the import and the register
 
 import {loadScript} from '../util/WebUtil.js';
+import {getRootURL} from '../util/BrowserUtil.js';
 /*
 import Plotly from 'plotly.js/lib/core';
 import bar from 'plotly.js/lib/bar';
@@ -86,9 +87,10 @@ function initPlotLyRetriever(loadNow) {
             return loadedPlotly ? Promise.resolve(loadedPlotly) : Promise.reject(Error(LOAD_ERR_MSG));
         }
 
+        const script= `${getRootURL()}/${PLOTLY_SCRIPT}`;
         if (!plotlyLoadBegin) {
             plotlyLoadBegin= true;
-            loadScript(PLOTLY_SCRIPT).then( () => {
+            loadScript(script).then( () => {
                 loadedPlotly= window.Plotly;
                 waitingResolvers.forEach( (r) => r(loadedPlotly));
                 waitingResolvers= undefined;

src/firefly/js/charts/chartTypes/HistogramTblView.jsx

@@ -2,7 +2,7 @@
  * License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt
  */
 
-import {get, set} from 'lodash';
+import {get, isEmpty, set} from 'lodash';
 import React, {PropTypes} from 'react';
 import * as TblUtil from '../../tables/TableUtil.js';
 
@@ -42,8 +42,10 @@ function Chart(props) {
 
     if (isDataReady) {
         var logs;
-        const xAxis = histogramParams.xAxis || {reversed: false, opposite: false};
-        const yAxis = histogramParams.yAxis || {reversed: false, opposite: false};
+        let xAxis = histogramParams.xAxis || {};
+        let yAxis = histogramParams.yAxis || {};
+
+
         if (histogramParams) {
             var logvals = '';
             if (histogramParams.x.includes('log')) { logvals += 'x';}
@@ -57,6 +59,9 @@ function Chart(props) {
             if (histogramParams.y.includes('opposite')) { set(yAxis, 'opposite', true); }
         }
 
+        if (isEmpty(xAxis)) { xAxis = undefined;}
+        if (isEmpty(yAxis)) { yAxis = undefined;}
+
         return (
             <Histogram data={histogramData}
                        desc={histogramParams.columnOrExpr}

src/firefly/js/charts/dataTypes/XYColsCDT.js

@@ -413,12 +413,18 @@ function fetchXYLargeTable(dispatch, chartId, chartDataElementId) {
             const colNames = decimateKey ? ['x', 'y', 'rowIdx', 'weight'] : ['x', 'y', 'rowIdx'];
 
             // change row data from [ [val] ] to [ {cname:val} ] and make them numeric
-            const rows = tableModel.tableData.data.map((row) => {
+            const getARow = (row) => {
                 return colNames.reduce( (arow, name, cidx) => {
                     arow[name] = parseFloat(row[cidx]);
                     return arow;
                 }, {});
-            });
+            };
+            const getDecimatedARow = (row) => {
+                const arow = getARow(row);
+                arow.decimate_key = row[4]; // 4th column in decimated table is decimate_key
+                return arow;
+            };
+            const rows = tableModel.tableData.data.map(decimateKey ? getDecimatedARow : getARow);
 
             xyPlotData = omitBy({
                 rows,

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

@@ -82,7 +82,7 @@ class ChartPanelView extends Component {
     }
 
     render() {
-        const {chartId, chartData, deletable, expandable, expandedMode, Chart, Options, Toolbar, showToolbar, showChart, eventCallback} = this.props;
+        const {chartId, chartData, deletable, expandable, expandedMode, Chart, Options, Toolbar, showToolbar, showChart} = this.props;
 
         if (!chartData) {
             return (<div/>);
@@ -190,8 +190,7 @@ ChartPanelView.propTypes = {
     showChart: PropTypes.bool,
     Chart: PropTypes.func,
     Options: PropTypes.func,
-    Toolbar: PropTypes.func,
-    eventCallback: PropTypes.object
+    Toolbar: PropTypes.func
 };
 
 ChartPanelView.defaultProps = {
@@ -292,6 +291,5 @@ ChartPanel.propTypes = {
     expandedMode: PropTypes.bool,
     deletable: PropTypes.bool,
     showToolbar: PropTypes.bool,
-    showChart: PropTypes.bool,
-    eventCallback: PropTypes.object
+    showChart: PropTypes.bool
 };

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

@@ -120,7 +120,7 @@ export class HistogramPlotly extends React.Component {
     }
 
     regenData(props) {
-        var {data, series, xAxis, yAxis, logs, desc, binColor, xUnit} = props;
+        var {data, series, xAxis, yAxis, logs, desc, binColor, xUnit, width, height} = props;
         if (!data) {
             data = series && series.data;
         }
@@ -153,6 +153,8 @@ export class HistogramPlotly extends React.Component {
             },
             plotlyData,
             plotlyLayout: {
+                height,
+                width,
                 hovermode: 'x',
                  xaxis: {
                     title: `${desc} ` + (xUnit ? `(${xUnit})` : ''),
@@ -192,7 +194,7 @@ export class HistogramPlotly extends React.Component {
     }
 
     shouldComponentUpdate(nextProps, ns) {
-        const bUpdate = sCompare(nextProps, ns);
+        const bUpdate = sCompare(this, nextProps, ns);
 
         if (bUpdate && nextProps !== this.props) {
             this.chartingInfo = this.regenData(nextProps);
@@ -274,46 +276,28 @@ export class HistogramPlotly extends React.Component {
                 this.setState({leftMargin, rightMargin, layoutUpdate: {margin}});
             }
         }
-
-        // add event handler to 'plotly_click' in case mouse click happens when the mouse is hovering on the bar
-        const {eventCallback} = this.props;
-        if (eventCallback) {
-            Object.keys(eventCallback).forEach((eventKey) => {
-                if (eventKey === 'mousedown') {
-                    chart.on('plotly_click', eventCallback[eventKey]);
-                }
-            });
-        }
     }
 
     render() {
         this.error = undefined;
         const {dataUpdate, layoutUpdate, config} = this.state;
         const {plotlyData, plotlyDivStyle, plotlyLayout}= this.chartingInfo;
-        const {width, height, eventCallback} = this.props;
 
-        //add click event handler to div in case the mouse click happens when the mouse is located on non-bar area
         return (
-            <div style={{width: width? width: undefined,
-                         height: height? height: undefined}}
-                 onClick={get(eventCallback, 'mousedown')}>
-                <PlotlyWrapper data={plotlyData} layout={plotlyLayout}  style={plotlyDivStyle}
-                               dataUpdate={dataUpdate}
-                               layoutUpdate={layoutUpdate}
-                               divUpdateCB={(div) => this.chart= div}
-                               config={config}
-                               newPlotCB={this.afterRedraw}
-                />
-            </div>
+            <PlotlyWrapper data={plotlyData} layout={plotlyLayout}  style={plotlyDivStyle}
+                           dataUpdate={dataUpdate}
+                           layoutUpdate={layoutUpdate}
+                           divUpdateCB={(div) => this.chart= div}
+                           config={config}
+                           newPlotCB={this.afterRedraw}
+            />
         );
     }
 }
 
 HistogramPlotly.defaultProps = {
     desc: 'Sample Distribution',
-    binColor: '#d1d1d1',
-    xAxis: {},
-    yAxis: {}
+    binColor: '#d1d1d1'
 };
 
 
@@ -331,6 +315,5 @@ HistogramPlotly.propTypes = {
         if (props[propName] && !/^#[0-9a-f]{6}/.test(props[propName])) {
             return new Error(`Invalid bin color in ${componentName}, should be hex with exactly 7 characters long.`);
         }
-    },
-    eventCallback: PropTypes.object
+    }
 };

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

@@ -82,8 +82,8 @@ export class MultiChartViewer extends Component {
         };
 
         const makeItemViewer = (chartId) => (
-            <div className={chartId === activeItemId ? 'ChartPanel ChartPanel--active' : 'ChartPanel'} onMouseDown={()=>onChartSelect(chartId)}>
-                <ChartPanel key={chartId} showToolbar={false} chartId={chartId} eventCallback={{'mousedown': ()=>onChartSelect(chartId)}}/>;
+            <div className={chartId === activeItemId ? 'ChartPanel ChartPanel--active' : 'ChartPanel'} onClick={()=>onChartSelect(chartId)}>
+                <ChartPanel key={chartId} showToolbar={false} chartId={chartId}/>;
             </div>
         );
 

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

@@ -3,7 +3,6 @@
  */
 
 import React, {Component, PropTypes} from 'react';
-// import Plotly, {getPlotLy} from '../PlotlyConfig.js';
 import {getPlotLy} from '../PlotlyConfig.js';
 import Enum from 'enum';
 
@@ -26,7 +25,7 @@ const defaultConfig= {
     ]
 };
 
-export class PlotlyWrapper extends React.Component {
+export class PlotlyWrapper extends Component {
 
     constructor(props) {
         super(props);
@@ -61,29 +60,37 @@ export class PlotlyWrapper extends React.Component {
 
     draw() {
         const {data,layout, config= defaultConfig, newPlotCB, dataUpdate, layoutUpdate, dataUpdateTraces}= this.props;
-        const {renderType}= this;
+        const renderType = this.renderType;
         getPlotLy().then( (Plotly) => {
-            switch (renderType) {
-                case RenderType.RESTYLE:
-                    Plotly.restyle(this.div,  dataUpdate, dataUpdateTraces);
-                    break;
-                case RenderType.RELAYOUT:
-                    Plotly.relayout(this.div, layoutUpdate);
-                    break;
-                case RenderType.RESTYLE_AND_RELAYOUT:
-                    Plotly.restyle(this.div,  dataUpdate, dataUpdateTraces);
-                    Plotly.relayout(this.div, layoutUpdate);
-                    break;
-                case RenderType.RESIZE:
-                    Plotly.Plots.resize(this.div);
-                    break;
-                case RenderType.UPDATE:
-                    Plotly.update(this.div, data, layout);
-                    break;
-                case RenderType.NEW_PLOT:
-                    Plotly.newPlot(this.div, data, layout, config);
-                    if (newPlotCB) newPlotCB(this.div,Plotly);
-                    break;
+            if (this.div) { // make sure the div is still there
+                switch (renderType) {
+                    case RenderType.RESTYLE:
+                        Plotly.restyle(this.div, dataUpdate, dataUpdateTraces);
+                        break;
+                    case RenderType.RELAYOUT:
+                        Plotly.relayout(this.div, layoutUpdate);
+                        break;
+                    case RenderType.RESTYLE_AND_RELAYOUT:
+                        Plotly.restyle(this.div, dataUpdate, dataUpdateTraces);
+                        Plotly.relayout(this.div, layoutUpdate);
+                        break;
+                    case RenderType.RESIZE:
+                        Plotly.Plots.resize(this.div);
+                        break;
+                    case RenderType.UPDATE:
+                        Plotly.update(this.div, data, layout);
+                        break;
+                    case RenderType.NEW_PLOT:
+                        Plotly.newPlot(this.div, data, layout, config);
+                        if (this.div.on) {
+                            const chart = this.div;
+                            chart.on('plotly_click', () => chart.parentElement.click());
+                        }
+                        if (newPlotCB) {
+                            newPlotCB(this.div, Plotly);
+                        }
+                        break;
+                }
             }
         } ).catch( (e) => {
             console.log('Plotly not loaded',e);
@@ -111,8 +118,12 @@ export class PlotlyWrapper extends React.Component {
 
     render() {
         const {style}= this.props;
+        // note: wrapper div is the target for the simulated click event
+        // when the original click event is lost and plotly_click is emitted instead
         return (
-            <div id={this.id} style={style} ref={this.refUpdate}></div>
+            <div>
+                <div id={this.id} style={style} ref={this.refUpdate}/>
+            </div>
         );
     }
 }
@@ -128,5 +139,5 @@ PlotlyWrapper.propTypes = {
     dataUpdateTraces: PropTypes.number,
     layoutUpdate: PropTypes.object,
     divUpdateCB: PropTypes.func,
-    newPlotCB: PropTypes.func,
+    newPlotCB: PropTypes.func
 };