From 1ed6f2d37ed715be6233c3c0200b190e9f97c4e3 Mon Sep 17 00:00:00 2001 From: tatianag Date: Thu, 21 Jul 2016 13:59:35 -0700 Subject: [PATCH 1/2] DM-6908 Add filter editor to the chart toolbar --- .../server/query/HistogramProcessor.java | 74 +++++----- .../ipac/firefly/server/util/QueryUtil.java | 10 +- .../util/ipactable/DataGroupFilter.java | 15 +- src/firefly/js/charts/HistogramCntlr.js | 19 +-- src/firefly/js/charts/XYPlotCntlr.js | 29 ++-- .../js/charts/ui/ChartsTableViewPanel.jsx | 130 +++++++++++------- src/firefly/js/charts/ui/Histogram.jsx | 4 +- src/firefly/js/charts/ui/XYPlot.jsx | 5 +- src/firefly/js/charts/ui/XYPlotOptions.jsx | 45 +++--- src/firefly/js/tables/ui/FilterEditor.jsx | 18 ++- .../js/visualize/saga/CatalogWatcher.js | 6 +- src/firefly/js/visualize/saga/ChartsSync.js | 2 + .../js/visualize/saga/CoverageWatcher.js | 10 +- 13 files changed, 215 insertions(+), 152 deletions(-) diff --git a/src/firefly/java/edu/caltech/ipac/firefly/server/query/HistogramProcessor.java b/src/firefly/java/edu/caltech/ipac/firefly/server/query/HistogramProcessor.java index 3cff775bb4..6ce7755542 100644 --- a/src/firefly/java/edu/caltech/ipac/firefly/server/query/HistogramProcessor.java +++ b/src/firefly/java/edu/caltech/ipac/firefly/server/query/HistogramProcessor.java @@ -134,51 +134,51 @@ else if (name.equalsIgnoreCase(PRESERVE_EMPTY_BIN) ){ */ public DataGroup createHistogramTable(double[] columnData) throws DataAccessException { + DataType[] tblcolumns = columns; + DataGroup HistogramTable; - /*if (!scale.equalsIgnoreCase(LINEAR_SCALE)){ - columnData = scaleData(columnData); - }*/ - - //calculate three arrays, numInBin, binMix and binMax - Object[] obj; - if (algorithm != null && algorithm.equalsIgnoreCase(FIXED_SIZE_ALGORITHM)) { - obj = calculateFixedBinSizeDataArray(columnData); - } else { - obj = calculateVariableBinSizeDataArray(columnData); - - } - - int[] numPointsInBin = (int[]) obj[0]; - double[] binMin = (double[]) obj[1]; - double[] binMax = (double[]) obj[2]; - int nPoints = numPointsInBin.length; + if (columnData.length > 0) { + //calculate three arrays, numInBin, binMix and binMax + Object[] obj; + if (algorithm != null && algorithm.equalsIgnoreCase(FIXED_SIZE_ALGORITHM)) { + obj = calculateFixedBinSizeDataArray(columnData); + } else { + obj = calculateVariableBinSizeDataArray(columnData); - DataType[] tblcolumns = columns; + } - if (nPoints>1) { - double firstBinRange = binMax[0]-binMin[0]; - int firstSigDigitPos = (int)Math.floor(Math.log10(Math.abs(firstBinRange)))+1; - if (firstSigDigitPos < -2) { - // increase precision - DataType.FormatInfo fi = DataType.FormatInfo.createFloatFormat(20, 3-firstSigDigitPos); - tblcolumns = new DataType[]{ + int[] numPointsInBin = (int[]) obj[0]; + double[] binMin = (double[]) obj[1]; + double[] binMax = (double[]) obj[2]; + int nPoints = numPointsInBin.length; + + if (nPoints > 1) { + double firstBinRange = binMax[0] - binMin[0]; + int firstSigDigitPos = (int) Math.floor(Math.log10(Math.abs(firstBinRange))) + 1; + if (firstSigDigitPos < -2) { + // increase precision + DataType.FormatInfo fi = DataType.FormatInfo.createFloatFormat(20, 3 - firstSigDigitPos); + tblcolumns = new DataType[]{ new DataType("numInBin", Integer.class), new DataType("binMin", Double.class), new DataType("binMax", Double.class) - }; - tblcolumns[1].setFormatInfo(fi); - tblcolumns[2].setFormatInfo(fi); + }; + tblcolumns[1].setFormatInfo(fi); + tblcolumns[2].setFormatInfo(fi); + } } - } - //add each row to the DataGroup - DataGroup HistogramTable = new DataGroup("histogramTable", tblcolumns); - for (int i = 0; i < nPoints; i++) { - DataObject row = new DataObject(HistogramTable); - row.setDataElement(tblcolumns[0], numPointsInBin[i]); - row.setDataElement(tblcolumns[1], binMin[i]); - row.setDataElement(tblcolumns[2], binMax[i]); - HistogramTable.add(row); + //add each row to the DataGroup + HistogramTable = new DataGroup("histogramTable", tblcolumns); + for (int i = 0; i < nPoints; i++) { + DataObject row = new DataObject(HistogramTable); + row.setDataElement(tblcolumns[0], numPointsInBin[i]); + row.setDataElement(tblcolumns[1], binMin[i]); + row.setDataElement(tblcolumns[2], binMax[i]); + HistogramTable.add(row); + } + } else { + HistogramTable = new DataGroup("histogramTable", tblcolumns); } return HistogramTable; } diff --git a/src/firefly/java/edu/caltech/ipac/firefly/server/util/QueryUtil.java b/src/firefly/java/edu/caltech/ipac/firefly/server/util/QueryUtil.java index ac1cb2c28c..915ce55b10 100644 --- a/src/firefly/java/edu/caltech/ipac/firefly/server/util/QueryUtil.java +++ b/src/firefly/java/edu/caltech/ipac/firefly/server/util/QueryUtil.java @@ -660,10 +660,12 @@ public static DataGroup doDecimation(DataGroup dg, DecimateInfo decimateInfo) { } } - retval.addAttribute(DecimateInfo.DECIMATE_TAG + ".X-MAX", String.valueOf(xMax)); - retval.addAttribute(DecimateInfo.DECIMATE_TAG + ".X-MIN", String.valueOf(xMin)); - retval.addAttribute(DecimateInfo.DECIMATE_TAG + ".Y-MAX", String.valueOf(yMax)); - retval.addAttribute(DecimateInfo.DECIMATE_TAG + ".Y-MIN", String.valueOf(yMin)); + if (Double.isFinite(xMax)) { + retval.addAttribute(DecimateInfo.DECIMATE_TAG + ".X-MAX", String.valueOf(xMax)); + retval.addAttribute(DecimateInfo.DECIMATE_TAG + ".X-MIN", String.valueOf(xMin)); + retval.addAttribute(DecimateInfo.DECIMATE_TAG + ".Y-MAX", String.valueOf(yMax)); + retval.addAttribute(DecimateInfo.DECIMATE_TAG + ".Y-MIN", String.valueOf(yMin)); + } if (doDecimation) { diff --git a/src/firefly/java/edu/caltech/ipac/firefly/server/util/ipactable/DataGroupFilter.java b/src/firefly/java/edu/caltech/ipac/firefly/server/util/ipactable/DataGroupFilter.java index 3f37d7125a..764af54e48 100644 --- a/src/firefly/java/edu/caltech/ipac/firefly/server/util/ipactable/DataGroupFilter.java +++ b/src/firefly/java/edu/caltech/ipac/firefly/server/util/ipactable/DataGroupFilter.java @@ -20,7 +20,6 @@ import java.io.IOException; import java.io.PrintWriter; import java.util.Arrays; -import java.util.HashMap; import java.util.List; import java.util.Map; @@ -121,15 +120,17 @@ void start() throws IOException { rowIdx = row.getRowIdx(); rowIdx = rowIdx < 0 ? cRowNum : rowIdx; } + + if (needToWriteHeader) { + needToWriteHeader = false; + DataGroupWriter.writeStatus(writer, DataGroupPart.State.INPROGRESS); + IpacTableUtil.writeAttributes(writer, attributes, DataGroupPart.LOADING_STATUS); + IpacTableUtil.writeHeader(writer, headers); + } + if (CollectionUtil.matches(rowIdx, row, filters)) { row.setRowIdx(rowIdx); - if (needToWriteHeader) { - needToWriteHeader = false; - DataGroupWriter.writeStatus(writer, DataGroupPart.State.INPROGRESS); - IpacTableUtil.writeAttributes(writer, attributes, DataGroupPart.LOADING_STATUS); - IpacTableUtil.writeHeader(writer, headers); - } IpacTableUtil.writeRow(writer, headers, row); if (++rowsFound == prefetchSize) { processInBackground(dg); diff --git a/src/firefly/js/charts/HistogramCntlr.js b/src/firefly/js/charts/HistogramCntlr.js index e146cc6969..c72623832c 100644 --- a/src/firefly/js/charts/HistogramCntlr.js +++ b/src/firefly/js/charts/HistogramCntlr.js @@ -218,6 +218,7 @@ function fetchColData(dispatch, tblId, histogramParams, chartId) { doFetchTable(req).then( (tableModel) => { + let histogramData = []; if (tableModel.tableData && tableModel.tableData.data) { // if logarithmic values were requested, convert the returned exponents back var toNumber = histogramParams.x.includes('log') ? @@ -229,20 +230,20 @@ function fetchColData(dispatch, tblId, histogramParams, chartId) { return Math.pow(10,Number(val)); } } : (val)=>Number(val); - const histogramData = tableModel.tableData.data.reduce((data, arow) => { + histogramData = tableModel.tableData.data.reduce((data, arow) => { data.push(arow.map(toNumber)); return data; }, []); - dispatch(updateColData( - { - chartId, - isColDataReady : true, - tblSource, - histogramParams, - histogramData - })); } + dispatch(updateColData( + { + chartId, + isColDataReady : true, + tblSource, + histogramParams, + histogramData + })); } ).catch( (reason) => { diff --git a/src/firefly/js/charts/XYPlotCntlr.js b/src/firefly/js/charts/XYPlotCntlr.js index 4ede959b94..1a04c35da7 100644 --- a/src/firefly/js/charts/XYPlotCntlr.js +++ b/src/firefly/js/charts/XYPlotCntlr.js @@ -314,14 +314,17 @@ function fetchPlotData(dispatch, tblId, xyPlotParams, chartId) { //'inclCols' : `${xyPlotParams.x.columnOrExpr},${xyPlotParams.y.columnOrExpr}`, // ignored if 'decimate' is present 'decimate' : serializeDecimateInfo(...getServerCallParameters(xyPlotParams)) }); - req.tbl_id = `xy-${chartId}`; doFetchTable(req).then( (tableModel) => { + let xyPlotData = {rows: []}; + // when zoomed, we don't know if the unzoomed data are decimated or not + let decimatedUnzoomed = xyPlotParams.zoom ? undefined : false; + if (tableModel.tableData && tableModel.tableData.data) { const {tableMeta} = tableModel; - const xyPlotData = omitBy({ + xyPlotData = omitBy({ rows: tableModel.tableData.data, decimateKey: tableMeta['decimate_key'], xMin: tableMeta['decimate.X-MIN'], @@ -339,18 +342,18 @@ function fetchPlotData(dispatch, tblId, xyPlotParams, chartId) { if (isString(val) && isFinite(val)) { xyPlotData[prop] = Number(val); } }); - dispatch(updatePlotData( - { - isPlotDataReady : true, - tblSource, - // when zoomed, we don't know if the unzoomed data are decimated or not - decimatedUnzoomed: Boolean(tableMeta['decimate_key']) || (xyPlotParams.zoom ? undefined : false), - xyPlotParams, - xyPlotData, - chartId, - newParams: getUpdatedParams(xyPlotParams, tableModel) - })); + decimatedUnzoomed = Boolean(tableMeta['decimate_key']) || decimatedUnzoomed; } + dispatch(updatePlotData( + { + isPlotDataReady : true, + tblSource, + decimatedUnzoomed, + xyPlotParams, + xyPlotData, + chartId, + newParams: getUpdatedParams(xyPlotParams, tableModel) + })); } ).catch( (reason) => { diff --git a/src/firefly/js/charts/ui/ChartsTableViewPanel.jsx b/src/firefly/js/charts/ui/ChartsTableViewPanel.jsx index 402573c021..55e2b662ea 100644 --- a/src/firefly/js/charts/ui/ChartsTableViewPanel.jsx +++ b/src/firefly/js/charts/ui/ChartsTableViewPanel.jsx @@ -5,6 +5,7 @@ import './ChartPanel.css'; import React, {Component, PropTypes} from 'react'; import sCompare from 'react-addons-shallow-compare'; +// import {deepDiff} from '../util/WebUtil.js'; import {get, debounce, defer, isBoolean} from 'lodash'; import Resizable from 'react-component-resizable'; import {flux} from '../../Firefly.js'; @@ -12,6 +13,8 @@ import * as TablesCntlr from '../../tables/TablesCntlr.js'; import * as TblUtil from '../../tables/TableUtil.js'; import {SelectInfo} from '../../tables/SelectInfo.js'; import {FilterInfo} from '../../tables/FilterInfo.js'; +import {FilterEditor} from '../../tables/ui/FilterEditor.jsx'; +import {ToolbarButton} from '../../ui/ToolbarButton.jsx'; import * as TableStatsCntlr from '../TableStatsCntlr.js'; import * as HistogramCntlr from '../HistogramCntlr.js'; import * as XYPlotCntlr from '../XYPlotCntlr.js'; @@ -32,8 +35,8 @@ import SELECT_ROWS from 'html/images/icons-2014/24x24_Checkmark.png'; import UNSELECT_ROWS from 'html/images/icons-2014/24x24_CheckmarkOff_Circle.png'; import FILTER_IN from 'html/images/icons-2014/24x24_FilterAdd.png'; import CLEAR_FILTERS from 'html/images/icons-2014/24x24_FilterOff_Circle.png'; +import FILTER from 'html/images/icons-2014/24x24_Filter.png'; import LOADING from 'html/images/gxt/loading.gif'; -// import {deepDiff} from '../util/WebUtil.js'; class ChartsPanel extends React.Component { @@ -41,7 +44,8 @@ class ChartsPanel extends React.Component { constructor(props) { super(props); this.state = { - optionsShown: !props.chartId + optionsShown: false, + filtersShown: false }; const normal = (size) => { @@ -66,11 +70,12 @@ class ChartsPanel extends React.Component { this.renderXYPlot = this.renderXYPlot.bind(this); this.renderHistogram = this.renderHistogram.bind(this); this.toggleOptions = this.toggleOptions.bind(this); + this.toggleFilters = this.toggleFilters.bind(this); this.displaySelectionOptions = this.displaySelectionOptions.bind(this); this.displayZoomOriginal = this.displayZoomOriginal.bind(this); this.addSelection = this.addSelection.bind(this); this.resetSelection = this.resetSelection.bind(this); - this.displayClearFilters = this.displayClearFilters.bind(this); + this.getFilterCount = this.getFilterCount.bind(this); this.addFilter = this.addFilter.bind(this); this.clearFilters = this.clearFilters.bind(this); this.selectionNotEmpty = this.selectionNotEmpty.bind(this); @@ -165,7 +170,7 @@ class ChartsPanel extends React.Component { ); } else { if (xyPlotParams) { - return 'Loading XY plot...'; + return
; } else { return null; } @@ -213,7 +218,7 @@ class ChartsPanel extends React.Component { ); } else { if (histogramParams) { - return 'Loading Histogram...'; + return
; } else { return 'Select Histogram Parameters'; } @@ -226,7 +231,12 @@ class ChartsPanel extends React.Component { toggleOptions() { const {optionsShown} = this.state; - this.setState({optionsShown: !optionsShown}); + this.setState({optionsShown: !optionsShown, filtersShown: false}); + } + + toggleFilters() { + const {filtersShown} = this.state; + this.setState({optionsShown: false, filtersShown: !filtersShown}); } displaySelectionOptions() { @@ -304,10 +314,10 @@ class ChartsPanel extends React.Component { } } - displayClearFilters() { + getFilterCount() { const filterInfo = get(this.props, 'tableModel.request.filters'); const filterCount = filterInfo ? filterInfo.split(';').length : 0; - return (filterCount > 0); + return filterCount; } addFilter() { @@ -393,10 +403,10 @@ class ChartsPanel extends React.Component { src={UNSELECT_ROWS} onClick={() => this.resetSelection()} />} - {this.displayClearFilters() && this.clearFilters()} + {this.getFilterCount()>0 && this.clearFilters()} />}
); @@ -411,7 +421,12 @@ class ChartsPanel extends React.Component { {this.renderSelectionButtons()}
- + this.toggleOptions()} @@ -439,7 +454,7 @@ class ChartsPanel extends React.Component { renderOptions() { - const {optionsShown} = this.state; + const {optionsShown, filtersShown} = this.state; const { tableModel, tblStatsData, tblPlotData, tblHistogramData, chartId, chartType} = this.props; if (optionsShown) { return ( @@ -449,41 +464,62 @@ class ChartsPanel extends React.Component {
); } + if (filtersShown) { + return ( +
+
+
this.toggleFilters()}/> +
+
+ { + if (obj.filterInfo) { + const newRequest = Object.assign({}, tableModel.request, {filters: obj.filterInfo}); + TablesCntlr.dispatchTableFetch(newRequest, 0); + } + } }/> +
+
+ ); + } return false; } render() { - var {tblStatsData, chartType} = this.props; + var {tblId, chartType} = this.props; - if (!(tblStatsData && tblStatsData.isColStatsReady) ) { - return
; - } else { - var {widthPx, heightPx} = this.state; - const knownSize = widthPx && heightPx; + var {widthPx, heightPx} = this.state; + const knownSize = widthPx && heightPx; - if (chartType === SCATTER && !this.props.tblPlotData || - chartType === HISTOGRAM && !this.props.tblHistogramData) { - return null; - } + if ((!TblUtil.isFullyLoaded(tblId)) || + (chartType === SCATTER && !this.props.tblPlotData) || + (chartType === HISTOGRAM && !this.props.tblHistogramData)) { + return null; + } - return ( -
-
- {this.renderToolbar()} -
- {this.renderOptions()} - -
- {knownSize ? chartType === SCATTER ? this.renderXYPlot() : this.renderHistogram() :
} -
- -
+ return ( +
+
+ {this.renderToolbar()} +
+ {this.renderOptions()} + +
+ {knownSize ? chartType === SCATTER ? this.renderXYPlot() : this.renderHistogram() :
} +
+
- ); - } +
+ ); } } @@ -594,28 +630,28 @@ export class OptionsWrapper extends React.Component { var options; - if (get(tblStatsData, 'isColStatsReady')) { + if (get(tblStatsData,'isColStatsReady')) { const formName = 'ChartOpt_' + chartType + chartId; if (chartType === SCATTER) { options = ( { + colValStats={tblStatsData.colStats} + xyPlotParams={get(tblPlotData, 'xyPlotParams')} + onOptionsSelected={(xyPlotParams) => { XYPlotCntlr.dispatchLoadPlotData(chartId, xyPlotParams, tableModel.tbl_id); } }/>); } else { options = ( { + colValStats={tblStatsData.colStats} + histogramParams={get(tblHistogramData, 'histogramParams')} + onOptionsSelected={(histogramParams) => { HistogramCntlr.dispatchLoadColData(chartId, histogramParams, tableModel.tbl_id); } }/>); } } else { options = (); } @@ -625,7 +661,7 @@ export class OptionsWrapper extends React.Component {
toggleOptions()}/>
} diff --git a/src/firefly/js/charts/ui/Histogram.jsx b/src/firefly/js/charts/ui/Histogram.jsx index 195a3c071d..71598fb190 100644 --- a/src/firefly/js/charts/ui/Histogram.jsx +++ b/src/firefly/js/charts/ui/Histogram.jsx @@ -351,7 +351,9 @@ export class Histogram extends React.Component { } }; - this.setChartConfig(config); + if (data.length > 0) { + this.setChartConfig(config); + } return (
diff --git a/src/firefly/js/charts/ui/XYPlot.jsx b/src/firefly/js/charts/ui/XYPlot.jsx index cdd8759134..51c953e2b0 100644 --- a/src/firefly/js/charts/ui/XYPlot.jsx +++ b/src/firefly/js/charts/ui/XYPlot.jsx @@ -9,6 +9,7 @@ import ReactHighcharts from 'react-highcharts/bundle/highcharts'; import {SelectInfo} from '../../tables/SelectInfo.js'; import {parseDecimateKey} from '../../tables/Decimate.js'; +const defaultShading = 'lin'; export const axisParamsShape = PropTypes.shape({ columnOrExpr : PropTypes.string, @@ -66,7 +67,7 @@ const toNumber = (val)=>Number(val); @param {boolean} returnNum - if true return group number rather than group description @return {number|string} from 1 to 6, 1 for 1 pt series */ -const getWeightBasedGroup = function(weight, minWeight, maxWeight, logShading=true, returnNum=true) { +const getWeightBasedGroup = function(weight, minWeight, maxWeight, logShading=false, returnNum=true) { if (weight == 1) return returnNum ? 1 : '1pt'; else { if (logShading) { @@ -216,7 +217,7 @@ export class XYPlot extends React.Component { shouldComponentUpdate(nextProps) { const {data, width, height, params, highlighted, selectInfo, desc} = this.props; // only rerender when plot data change - if (nextProps.data !== data) { + if (nextProps.data !== data || get(params, 'shading', defaultShading) !== get(nextProps.params, 'shading', defaultShading)) { return true; } else { const chart = this.refs.chart && this.refs.chart.getChart(); diff --git a/src/firefly/js/charts/ui/XYPlotOptions.jsx b/src/firefly/js/charts/ui/XYPlotOptions.jsx index 5191d08a84..e7b843cda0 100644 --- a/src/firefly/js/charts/ui/XYPlotOptions.jsx +++ b/src/firefly/js/charts/ui/XYPlotOptions.jsx @@ -3,12 +3,12 @@ */ import React, {PropTypes} from 'react'; -import {get, isUndefined, omitBy, defer} from 'lodash'; +import {get, isUndefined, omitBy, defer, set} from 'lodash'; import ColValuesStatistics from './../ColValuesStatistics.js'; import CompleteButton from '../../ui/CompleteButton.jsx'; import {FieldGroup} from '../../ui/FieldGroup.jsx'; -import {dispatchMultiValueChange} from '../../fieldGroup/FieldGroupCntlr.js'; +import {dispatchValueChange, dispatchMultiValueChange, VALUE_CHANGE} from '../../fieldGroup/FieldGroupCntlr.js'; import Validate from '../../util/Validate.js'; import {Expression} from '../../util/expr/Expression.js'; import {ValidationField} from '../../ui/ValidationField.jsx'; @@ -113,7 +113,7 @@ export function setOptions(groupKey, xyPlotParams) { {fieldKey: 'stretch', value: get(xyPlotParams, 'stretch', 'fit')}, {fieldKey: 'nbins.x', value: get(xyPlotParams, 'nbins.x', 100)}, {fieldKey: 'nbins.y', value: get(xyPlotParams, 'nbins.y', 100)}, - {fieldKey: 'shading', value: get(xyPlotParams, 'shading', 'log')} + {fieldKey: 'shading', value: get(xyPlotParams, 'shading', 'lin')} ]; dispatchMultiValueChange(groupKey, flds); } @@ -134,6 +134,26 @@ export function getColValidator(colValStats) { }; } +/** + * Reducer from field group component, + * @returns {*} reducer, which clears label and unit whenever x or y field changes + */ +function fldChangeReducer(inFields, action) { + if (!inFields) { return {}; } + if (action.type === VALUE_CHANGE) { + // when field changes, clear the label and unit + if (get(action.payload, 'fieldKey') === 'x.columnOrExpr') { + set(inFields, ['x.label', 'value'], undefined); + set(inFields, ['x.unit', 'value'], undefined); + } else if (get(action.payload, 'fieldKey') === 'y.columnOrExpr') { + set(inFields, ['y.label', 'value'], undefined); + set(inFields, ['y.unit', 'value'], undefined); + } + } + return inFields; +} + + export class XYPlotOptions extends React.Component { constructor(props) { @@ -201,7 +221,7 @@ export class XYPlotOptions extends React.Component { { x = colName; - const flds = [ - {fieldKey: 'x.columnOrExpr', value: colName}, - {fieldKey: 'x.label', value: ''}, - {fieldKey: 'x.unit', value: ''} - ]; - dispatchMultiValueChange(groupKey, flds); + dispatchValueChange({fieldKey: 'x.columnOrExpr', groupKey, value: colName, valid: true}); }; const onYColSelected = (colName) => { y = colName; - const flds = [ - {fieldKey: 'y.columnOrExpr', value: colName}, - {fieldKey: 'y.label', value: ''}, - {fieldKey: 'y.unit', value: ''} - ]; - dispatchMultiValueChange(groupKey, flds); + dispatchValueChange({fieldKey: 'y.columnOrExpr', groupKey, value: colName, valid: true}); }; return (
- + {onOptionsSelected &&
@@ -47,7 +47,7 @@ export class FilterEditor extends React.Component { bgColor='beige' columns={cols} rowHeight={24} - selectable={true} + selectable={selectable} {...{data, selectInfoCls, sortInfo, callbacks, renderers}} />
@@ -68,16 +68,20 @@ export class FilterEditor extends React.Component {
); } -}; +} FilterEditor.propTypes = { columns: PropTypes.arrayOf(React.PropTypes.object), - origColumns: PropTypes.arrayOf(PropTypes.object), + selectable: PropTypes.bool, sortInfo: PropTypes.string, filterInfo: PropTypes.string, onChange: PropTypes.func }; +FilterEditor.defaultProps = { + selectable: true +}; + function prepareOptionData(columns, sortInfo, filterInfo) { var cols = [ @@ -85,7 +89,7 @@ function prepareOptionData(columns, sortInfo, filterInfo) { {name: 'Filter', visibility: 'show', prefWidth: 12}, {name: 'Units', visibility: 'show', prefWidth: 6}, {name: 'Description', visibility: 'show', prefWidth: 60}, - {name: 'Selected', visibility: 'hidden'}, + {name: 'Selected', visibility: 'hidden'} ]; const filterInfoCls = FilterInfo.parse(filterInfo); @@ -106,7 +110,7 @@ function prepareOptionData(columns, sortInfo, filterInfo) { return {cols, data, tableRowCount, selectInfoCls}; } -function makeCallbacks(onChange, columns, origColumns, data, orgFilterInfo='') { +function makeCallbacks(onChange, columns, data, orgFilterInfo='') { var onSelectAll = (checked) => { const nColumns = cloneDeep(columns).filter((c) => c.visibility !== 'hidden'); nColumns.forEach((v) => { diff --git a/src/firefly/js/visualize/saga/CatalogWatcher.js b/src/firefly/js/visualize/saga/CatalogWatcher.js index 61c0be757f..fa27a55649 100644 --- a/src/firefly/js/visualize/saga/CatalogWatcher.js +++ b/src/firefly/js/visualize/saga/CatalogWatcher.js @@ -3,7 +3,7 @@ */ import {take} from 'redux-saga/effects'; -import {isEmpty, get} from 'lodash'; +import {isEmpty, get, omit} from 'lodash'; import {TABLE_NEW_LOADED,TABLE_SORT, TABLE_SELECT,TABLE_HIGHLIGHT,TABLE_REMOVE,TABLE_UPDATE} from '../../tables/TablesCntlr.js'; import {dispatchCreateDrawLayer,dispatchAttachLayerToPlot,dispatchDestroyDrawLayer, dispatchModifyCustomField} from '../DrawLayerCntlr.js'; import ImagePlotCntlr, {visRoot} from '../ImagePlotCntlr.js'; @@ -112,8 +112,8 @@ function handleCatalogUpdate(tbl_id) { dataTooBigForSelection= true; } - const req = Object.assign({}, sourceTable.request, params); - req.tbl_id = tbl_id; + const req = Object.assign(omit(sourceTable.request, ['tbl_id', 'META_INFO']), params); + req.tbl_id = `cat-${tbl_id}`; doFetchTable(req).then( (tableModel) => { diff --git a/src/firefly/js/visualize/saga/ChartsSync.js b/src/firefly/js/visualize/saga/ChartsSync.js index 938e5d6921..b696f5edce 100644 --- a/src/firefly/js/visualize/saga/ChartsSync.js +++ b/src/firefly/js/visualize/saga/ChartsSync.js @@ -47,6 +47,8 @@ export function* syncCharts() { case TablesCntlr.TABLE_SORT: case TablesCntlr.TABLE_NEW_LOADED: const {tbl_id} = action.payload; + console.log(TableUtil.getTblById(tblId)); + //console.log(get(TableUtil.getTblById(tblId), 'request')); // check if there are any mounted charts related to this table if (ChartsCntlr.getNumRelatedCharts(tbl_id, true) > 0) { diff --git a/src/firefly/js/visualize/saga/CoverageWatcher.js b/src/firefly/js/visualize/saga/CoverageWatcher.js index 02ecb4a4c8..dcf050650b 100644 --- a/src/firefly/js/visualize/saga/CoverageWatcher.js +++ b/src/firefly/js/visualize/saga/CoverageWatcher.js @@ -4,7 +4,7 @@ import {take} from 'redux-saga/effects'; import Enum from 'enum'; -import {get,isEmpty,flattenDeep,values} from 'lodash'; +import {get,isEmpty,flattenDeep,values, omit} from 'lodash'; import {MetaConst} from '../../data/MetaConst.js'; import {TitleOptions} from '../WebPlotRequest.js'; import {CoordinateSys} from '../CoordSys.js'; @@ -162,7 +162,6 @@ function removeCoverage(tbl_id, decimatedTables) { } } - /** * * @param tbl_id @@ -186,8 +185,9 @@ function updateCoverage(tbl_id, viewerId, decimatedTables, options) { inclCols : getCovColumnsForQuery(options, table) }; - const req = Object.assign({}, table.request, params); - req.tbl_id = tbl_id; + + const req = Object.assign(omit(table.request, ['tbl_id', 'META_INFO']), params); + req.tbl_id = `cov-${tbl_id}`; if (decimatedTables[tbl_id] /*&& decimatedTables[tbl_id].tableMeta.tblFilePath===table.tableMeta.tblFilePath*/) { //todo support decimated data updateCoverageWithData(table, options, tbl_id, decimatedTables[tbl_id], decimatedTables); @@ -367,7 +367,7 @@ function defaultCanDoCorners(table) {// eslint-disable-line no-unused-vars function getCovColumnsForQuery(options, table) { const cAry= [...options.getCornersColumns(table), options.getCenterColumns(table)]; - return cAry.reduce( (s,c,idx)=> s+`${idx>0?',':''}${c.latCol},${c.lonCol}`,''); + return cAry.reduce( (s,c,idx)=> s+`${idx>0?',':''}${c.lonCol},${c.latCol}`,''); } function getCornersColumns(table) { From 43fde1ec56962cc0852af7f827765aca9903b3be Mon Sep 17 00:00:00 2001 From: tatianag Date: Fri, 22 Jul 2016 11:27:23 -0700 Subject: [PATCH 2/2] DM-6908 response to review comments --- .../js/charts/ui/ChartsTableViewPanel.jsx | 121 ++++++++++-------- src/firefly/js/ui/ToolbarButton.css | 2 +- src/firefly/js/visualize/saga/ChartsSync.js | 2 - 3 files changed, 72 insertions(+), 53 deletions(-) diff --git a/src/firefly/js/charts/ui/ChartsTableViewPanel.jsx b/src/firefly/js/charts/ui/ChartsTableViewPanel.jsx index 55e2b662ea..4aeea71bb0 100644 --- a/src/firefly/js/charts/ui/ChartsTableViewPanel.jsx +++ b/src/firefly/js/charts/ui/ChartsTableViewPanel.jsx @@ -6,7 +6,7 @@ import './ChartPanel.css'; import React, {Component, PropTypes} from 'react'; import sCompare from 'react-addons-shallow-compare'; // import {deepDiff} from '../util/WebUtil.js'; -import {get, debounce, defer, isBoolean} from 'lodash'; +import {get, debounce, defer, isBoolean, isUndefined} from 'lodash'; import Resizable from 'react-component-resizable'; import {flux} from '../../Firefly.js'; import * as TablesCntlr from '../../tables/TablesCntlr.js'; @@ -140,7 +140,7 @@ class ChartsPanel extends React.Component { renderXYPlot() { const {chartId, tblId, tableModel, tblPlotData} = this.props; - if (!tblPlotData) { + if (!TblUtil.isFullyLoaded(tblId) || !tblPlotData) { return null; } const { isPlotDataReady, xyPlotData, xyPlotParams } = tblPlotData; @@ -184,8 +184,8 @@ class ChartsPanel extends React.Component { renderHistogram() { - if (!this.props.tblHistogramData) { - return 'Select Histogram Parameters...'; + if (!TblUtil.isFullyLoaded(this.props.tblId) || !this.props.tblHistogramData) { + return null; } const { isColDataReady, histogramData, histogramParams } = this.props.tblHistogramData; var {widthPx, heightPx} = this.state; @@ -390,9 +390,17 @@ class ChartsPanel extends React.Component { />
); - } else { - return ( -
+ } + } + + renderToolbar() { + const {expandable, expandedMode, tblId, chartId, chartType, deletable} = this.props; + return ( +
+
+ {this.renderSelectionButtons()} +
+
{this.displayZoomOriginal() && this.clearFilters()} />} -
- ); - } - } - - renderToolbar() { - const {expandable, expandedMode, tblId, chartId, chartType, deletable} = this.props; - return ( -
-
- {this.renderSelectionButtons()} -
-
- this.toggleOptions()} @@ -458,34 +453,13 @@ class ChartsPanel extends React.Component { const { tableModel, tblStatsData, tblPlotData, tblHistogramData, chartId, chartType} = this.props; if (optionsShown) { return ( -
- -
+ ); } if (filtersShown) { return ( -
-
-
this.toggleFilters()}/> -
-
- { - if (obj.filterInfo) { - const newRequest = Object.assign({}, tableModel.request, {filters: obj.filterInfo}); - TablesCntlr.dispatchTableFetch(newRequest, 0); - } - } }/> -
-
+ ); } return false; @@ -494,14 +468,12 @@ class ChartsPanel extends React.Component { render() { - var {tblId, chartType} = this.props; + var {chartType} = this.props; var {widthPx, heightPx} = this.state; const knownSize = widthPx && heightPx; - if ((!TblUtil.isFullyLoaded(tblId)) || - (chartType === SCATTER && !this.props.tblPlotData) || - (chartType === HISTOGRAM && !this.props.tblHistogramData)) { + if (chartType === HISTOGRAM && !this.props.tblHistogramData) { return null; } @@ -656,7 +628,7 @@ export class OptionsWrapper extends React.Component { } return ( -
+
{toggleOptions &&
+
+
toggleFilters()}/> +
+
+ { + if (!isUndefined(obj.filterInfo)) { + const newRequest = Object.assign({}, tableModel.request, {filters: obj.filterInfo}); + TablesCntlr.dispatchTableFetch(newRequest, 0); + } else if (!isUndefined(obj.sortInfo)) { + this.setState({sortInfo: obj.sortInfo}); + } + } }/> +
+
+ ); + } +} + +FilterEditorWrapper.propTypes = { + toggleFilters : PropTypes.func, + tableModel : PropTypes.object +}; \ No newline at end of file diff --git a/src/firefly/js/ui/ToolbarButton.css b/src/firefly/js/ui/ToolbarButton.css index 9b95dd9642..a1536661d9 100644 --- a/src/firefly/js/ui/ToolbarButton.css +++ b/src/firefly/js/ui/ToolbarButton.css @@ -20,7 +20,7 @@ .ff-badge { position: absolute; right: -3px; - top: -4px; + top: -1px; font-size: 10px; font-weight: normal; diff --git a/src/firefly/js/visualize/saga/ChartsSync.js b/src/firefly/js/visualize/saga/ChartsSync.js index b696f5edce..938e5d6921 100644 --- a/src/firefly/js/visualize/saga/ChartsSync.js +++ b/src/firefly/js/visualize/saga/ChartsSync.js @@ -47,8 +47,6 @@ export function* syncCharts() { case TablesCntlr.TABLE_SORT: case TablesCntlr.TABLE_NEW_LOADED: const {tbl_id} = action.payload; - console.log(TableUtil.getTblById(tblId)); - //console.log(get(TableUtil.getTblById(tblId), 'request')); // check if there are any mounted charts related to this table if (ChartsCntlr.getNumRelatedCharts(tbl_id, true) > 0) {