DM-5761_XYPlot should support selecting columns from a table

src/firefly/js/tables/TableConnector.js

@@ -87,7 +87,12 @@ export class TableConnector {
         const {hlRowIdx, startIdx} = TblUtil.getTblInfoById(this.tbl_id);
         if (rowIdx !== hlRowIdx) {
             const highlightedRow = startIdx + rowIdx;
-            TblCntlr.dispatchTableHighlight(this.tbl_id, highlightedRow);
+            if (this.origTableModel) {
+                const tableModel = {tbl_id: this.tbl_id, highlightedRow};
+                flux.process({type: TblCntlr.TABLE_UPDATE, payload: tableModel});
+            } else {
+                TblCntlr.dispatchTableHighlight(this.tbl_id, highlightedRow);
+            }
         }
     }
 

src/firefly/js/tables/TableUtil.js

@@ -441,7 +441,7 @@ export function getTblInfo(tableModel, aPageSize) {
     const currentPage = highlightedRow >= 0 ? Math.floor(highlightedRow / pageSize)+1 : 1;
     const hlRowIdx = highlightedRow >= 0 ? highlightedRow % pageSize : 0;
     const startIdx = (currentPage-1) * pageSize;
-    const endIdx = Math.min(startIdx+pageSize, totalRows) || startIdx ;
+    const endIdx = Math.min(startIdx+pageSize, totalRows) || get(tableModel,'tableData.data.length', startIdx) ;
     var totalPages = Math.ceil((totalRows || 0)/pageSize);
     return { tableModel, tbl_id, title, totalRows, request, startIdx, endIdx, hlRowIdx, currentPage, pageSize,totalPages, highlightedRow, selectInfo, error};
 }

src/firefly/js/tables/ui/TableRenderer.js

@@ -177,12 +177,11 @@ export class TextCell extends React.Component {
     // }
     //
     render() {
-        const lineHeight = this.props.height - 6 + 'px';  // 6 is the top/bottom padding.
-        const style = Object.assign({lineHeight}, this.props.style || {});
         var val = getValue(this.props);
-        val = (isString(val) && val.search(html_regex) >= 0) ? <div dangerouslySetInnerHTML={{__html: val}}/> : val;
+        const lineHeight = this.props.height - 6 + 'px';  // 6 is the top/bottom padding.
+        val = (val.search && val.search(html_regex) >= 0) ? <div dangerouslySetInnerHTML={{__html: val}}/> : val;
         return (
-            <div style={style} className='public_fixedDataTableCell_cellContent'>{val}</div>
+            <div style={{lineHeight}} className='public_fixedDataTableCell_cellContent'>{val}</div>
         );
     }
 }

src/firefly/js/ui/TextButton.jsx

@@ -0,0 +1,51 @@
+/*
+ * License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt
+ */
+
+
+import React, {PropTypes} from 'react';
+
+const labelStyle= {
+    display: 'inline-block',
+    lineHeight: '30px',
+    fontSize: '10pt',
+    fontStyle: 'italic',
+    color: 'blue',
+    verticalAlign:'baseline'
+};
+
+/**
+ *
+ * @param text
+ * @param tip
+ * @param onClick
+ * @param style
+ * @return react object
+ */
+export function TextButton({text, tip='$text',style={}, onClick}) {
+    var s= Object.assign({cursor:'pointer', verticalAlign:'bottom'},style);
+    return (
+        <div style={s} title={tip} onClick={onClick}>
+
+            <div style={labelStyle} title={tip}>
+                <u>{text}</u>
+            </div>
+
+        </div>
+    );
+}
+
+
+//CloseButton.contextTypes= {
+//};
+
+
+TextButton.propTypes= {
+    text : PropTypes.string,
+    style : PropTypes.object,
+    tip : PropTypes.string,
+    onClick : PropTypes.func
+};
+
+
+

src/firefly/js/visualize/ColSelectView.jsx

@@ -0,0 +1,139 @@
+/*
+ */
+import React from 'react';
+import DialogRootContainer from '../ui/DialogRootContainer.jsx';
+import {PopupPanel} from '../ui/PopupPanel.jsx';
+import {dispatchTableRemove}  from '../tables/TablesCntlr';
+
+import {BasicTable} from '../tables/ui/BasicTable.jsx';
+import {getTblById} from '../tables/TableUtil.js';
+import {dispatchShowDialog} from '../core/ComponentCntlr.js';
+import CompleteButton from '../ui/CompleteButton.jsx';
+import HelpIcon from '../ui/HelpIcon.jsx';
+const popupId = 'XYColSelect';
+const TBL_ID ='selectCol';
+
+const popupPanelResizableStyle = {
+    width: 600,
+    minWidth: 450,
+    height: 450,
+    minHeight: 300,
+    resize: 'both',
+    overflow: 'hidden',
+    position: 'relative'
+};
+
+
+//define the table style only in the table div
+const tableStyle = {boxSizing: 'border-box', paddingLeft:5,paddingRight:5, width: '100%', height: 'calc(100% - 70px)', overflow: 'hidden', flexGrow: 1, display: 'flex', resize:'none'};
+
+//define the complete button
+const closeButtonStyle = {'textAlign': 'center', display: 'inline-block', height:40, marginTop:10, width: '90%'};
+//define the helpButton
+const helpIdStyle = {'textAlign': 'center', display: 'inline-block', height:40, marginRight: 20};
+
+
+export function showColSelectPopup(colValStats,onColSelected,popupTitle,buttonText,currentVal) {
+
+    if (getTblById(TBL_ID)) {
+        dispatchTableRemove(TBL_ID);
+    }
+
+    const colNames = colValStats.map((colVal) => {return colVal.name;});
+    var hlRowNum = getHlRow(currentVal,colNames) || 0;
+
+    // make a local table for plot column selection panel
+    var columns = [
+                    {name: 'Name',visibility: 'show', prefWidth: 12},
+                    {name: 'Unit',visibility: 'show', prefWidth: 8},
+                    {name: 'Type',visibility: 'show', prefWidth: 8},
+                    {name: 'Description',visibility: 'show', prefWidth: 60}
+                ];
+    var data = [];
+    for (var i = 0; i < colValStats.length; i++) {
+            data[i] = [
+                        colValStats[i].name,
+                        colValStats[i].unit,
+                        colValStats[i].type,
+                        colValStats[i].descr
+            ];
+    }
+    const request = {pageSize:10000};
+    var tableModel = {totalRows: data.length, request, tbl_id:TBL_ID, tableData: {columns,  data }, highlightedRow: hlRowNum};
+
+
+    var popup = (<PopupPanel title={popupTitle}>
+            {popupForm(tableModel,onColSelected,buttonText,popupId)}
+        </PopupPanel>
+
+    );
+
+    DialogRootContainer.defineDialog(popupId, popup);
+    dispatchShowDialog(popupId);
+}
+
+function popupForm(tableModel, onColSelected,buttonText,popupId) {
+    const tblId = tableModel.tbl_id;
+    return (
+        <div style={ popupPanelResizableStyle}>
+            { renderTable(tableModel,popupId)}
+            { renderCloseAndHelpButtons(tblId,onColSelected,buttonText,popupId)}
+        </div>
+    );
+
+}
+
+/**
+ * display the data into a tabular format
+ * @param tableModel
+ * @param popupId
+ * @return table section
+ */
+function renderTable(tableModel,popupId) {
+
+    return (
+        <div style={tableStyle}>
+           <BasicTable
+               key={popupId}
+               tableModel={tableModel}
+           />
+        </div>
+    );
+
+}
+
+function renderCloseAndHelpButtons(tblId,onColSelected,buttonText,popupId) {
+
+    return(
+    <div>
+        <div style={closeButtonStyle}>
+            < CompleteButton
+                text={buttonText}
+                onSuccess={()=>setXYColumns(tblId,onColSelected)}
+                dialogId={popupId}
+            />
+        </div>
+        {/* comment out the help button for now
+            <div style={helpIdStyle}>
+                <HelpIcon helpid={'visualization.setxyplot'}/>
+            </div>
+         */}
+    </div>
+);
+}
+
+function setXYColumns(tblId,onColSelected) {
+    const tableModel = getTblById(tblId);
+    var hlRow = tableModel.highlightedRow || 0;
+    const selectedColName = tableModel.tableData.data[hlRow][0];
+    onColSelected(selectedColName);
+
+}
+
+function getHlRow(currentVal,colNames) {
+    for(var i = 0; i < colNames.length; i++) {
+        if (colNames[i] === currentVal) {
+            return i;
+        }
+    }
+}

src/firefly/js/visualize/ColValuesStatistics.js

@@ -1,10 +1,11 @@
 export default class ColValuesStatistics{
-    constructor(name, descr, unit, min, max, numpoints) {
+    constructor(name, descr, unit, min, max, numpoints,type) {
         this.name = name;
         this.descr = descr;
         this.unit = unit;
         this.min = Number(min);
         this.max = Number(max);
         this.numpoints = Number(numpoints);
+        this.type = type;
     }
 };

src/firefly/js/visualize/TableStatsCntlr.js

@@ -1,6 +1,6 @@
 import {flux} from '../Firefly.js';
 
-import {has, omit} from 'lodash';
+import {get, has, omit} from 'lodash';
 
 import {updateSet, updateMerge} from '../util/WebUtil.js';
 import ColValuesStatistics from './ColValuesStatistics.js';
@@ -129,15 +129,23 @@ function fetchTblStats(dispatch, activeTableServerRequest) {
     const sreq = Object.assign({}, omit(activeTableServerRequest, ['tbl_id', 'META_INFO']),
         {'startIdx': 0, 'pageSize': 1000000});
 
-    const req = TableUtil.makeTblRequest('StatisticsProcessor', null,
-                            { searchRequest: JSON.stringify(sreq) },
-                            'tblstats-'+tbl_id);
+    const req = TableUtil.makeTblRequest('StatisticsProcessor', `Statistics for ${tbl_id}`,
+        { searchRequest: JSON.stringify(sreq) },
+        {'startIdx': 0, 'pageSize': 1000});
 
     TableUtil.doFetchTable(req).then(
         (tableModel) => {
             if (tableModel.tableData && tableModel.tableData.data) {
+                const columns = get(TableUtil.getTblById(tbl_id), 'tableData.columns', []);
                 const colStats = tableModel.tableData.data.reduce((colstats, arow) => {
-                    colstats.push(new ColValuesStatistics(...arow));
+                    const r = new ColValuesStatistics(...arow);
+                    const col = columns.find((c)=>{return c.name=== r.name;});
+                    if (col) {
+                        r.unit = col.units && col.units !== 'null' ? col.units : '';
+                        r.descr = col.desc ? col.desc: '';
+                        r.type = col.type ? col.type : '';
+                    }
+                    colstats.push(r);
                     return colstats;
                 }, []);
                 dispatch(updateTblStats(