DM-10115 reset the chart column select dropdown content whenever the active table is changed.

Author: Cindy Wang

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

@@ -6,7 +6,6 @@ import React, {PropTypes} from 'react';
 import {get} from 'lodash';
 import {Expression} from '../../util/expr/Expression.js';
 import {dispatchValueChange} from '../../fieldGroup/FieldGroupCntlr.js';
-import {TextButton} from '../../ui/TextButton.jsx';
 import {SuggestBoxInputField} from '../../ui/SuggestBoxInputField.jsx';
 import ColValuesStatistics from '../ColValuesStatistics.js';
 import {showColSelectPopup} from './ColSelectView.jsx';

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

@@ -1,6 +1,6 @@
 import React, {PropTypes} from 'react';
 
-import {get, defer, has} from 'lodash';
+import {get, defer, isEmpty} from 'lodash';
 import ColValuesStatistics from './../ColValuesStatistics.js';
 import {DATATYPE_HISTOGRAM} from '../dataTypes/HistogramCDT.js';
 import CompleteButton from '../../ui/CompleteButton.jsx';
@@ -68,21 +68,16 @@ function isSingleColumn(colName, colValStats) {
     }
     return false;
 }
-var columnNameReducer= (colValStats) => {
-    if (!colValStats) {
-        return {};
-    }
+var columnNameReducer = () => {
     return (inFields, action) => {
 
         if (!inFields) {
             return {};
         }
-        if (has(action.payload, 'colValStats')) {
-            colValStats = get(action.payload, 'colValStats'); // reset column stats
-        }
+        const colValStats = get(action.payload, 'colValStats');
 
         let fieldKey = undefined;
-        if (action.type === VALUE_CHANGE) {
+        if (!isEmpty(colValStats) && action.type === VALUE_CHANGE) {
             // when column name changes, update the min/max input
             fieldKey = get(action.payload, 'fieldKey');
             switch (fieldKey){
@@ -297,7 +292,7 @@ export class HistogramOptions extends React.Component {
         return (
             <div style={{padding:'0 5px', minHeight: 250}}>
                 <FieldGroup groupKey={groupKey} validatorFunc={null} keepState={true}
-                            reducerFunc={columnNameReducer(colValStats)}>
+                            reducerFunc={columnNameReducer()}>
 
                     {onOptionsSelected &&
                     <div style={{display: 'flex', flexDirection: 'row', padding: '5px 0 15px'}}>
@@ -377,7 +372,7 @@ function renderFixedBinSizeOptions(groupKey, histogramParams, disabled){
          <RadioGroupInputField
             initialState= {{
                                 value: get(histogramParams, 'fixedBinSizeSelection', 'numBins'),
-                                tooltip: 'Please select number of bins or bin width',
+                                tooltip: 'Please select number of bins or bin width'
                                 //label: 'BinSize:'
                             }}
             options={binSizeOptions}
@@ -390,7 +385,7 @@ function renderFixedBinSizeOptions(groupKey, histogramParams, disabled){
                  initialState= {{
                                   value: get(histogramParams, 'numBins', '50'),
                                   validator:Validate.intRange.bind(null, 1, 500, 'numBins'),
-                                  tooltip: 'Number of bins',
+                                  tooltip: 'Number of bins'
 
                              }}
                  disabled = {disabled}
@@ -403,7 +398,7 @@ function renderFixedBinSizeOptions(groupKey, histogramParams, disabled){
                  initialState= {{
                                   value: get(histogramParams, 'binWidth', ''),
                                   validator:Validate.isFloat.bind(null,  'binWidth'),
-                                  tooltip: 'Bin width',
+                                  tooltip: 'Bin width'
 
                              }}
                  disabled = {!disabled}

src/firefly/js/fieldGroup/FieldGroupCntlr.js

@@ -107,14 +107,14 @@ export function dispatchInitFieldGroup(groupKey,keepState=false,
 
 
 /**
- *
  * @param groupKey
  * @param mounted
  * @param keepState
  * @param initValues
  * @param reducerFunc
  * @param actionTypes any action types (beyond the FieldGroup action types) that the reducer should allow though
  * @param wrapperGroupKey
+ * @param forceUnmount
  */
 export function dispatchMountFieldGroup(groupKey, mounted, keepState= false, 
                                         initValues=null, reducerFunc= null,

src/firefly/js/templates/fireflyviewer/FireflyViewerManager.js

@@ -15,6 +15,7 @@ import {isMetaDataTable, isCatalogTable} from '../../metaConvert/converterUtils.
 import {META_VIEWER_ID} from '../../visualize/ui/TriViewImageSection.jsx';
 import {REPLACE_VIEWER_ITEMS, DEFAULT_FITS_VIEWER_ID, getViewerItemIds, getMultiViewRoot} from '../../visualize/MultiViewCntlr.js';
 import {visRoot} from '../../visualize/ImagePlotCntlr.js';
+import {resetChartSelectOptions} from '../../ui/ChartSelectDropdown.jsx';
 
 /**
  * this manager manages what main components get display on the screen.
@@ -158,6 +159,8 @@ function handleActiveTableChange (layoutInfo, action) {
     var {images={}, showImages} = layoutInfo;
     var {coverageLockedOn, showCoverage, showMeta, metaDataTableId} = images;
 
+    resetChartSelectOptions();
+
     const showFits= shouldShowFits();
     showImages= showFits||coverageLockedOn;
 

src/firefly/js/ui/ChartSelectDropdown.jsx

@@ -12,17 +12,20 @@ import * as TblUtil from '../tables/TableUtil.js';
 import * as TableStatsCntlr from '../charts/TableStatsCntlr.js';
 import * as ChartsCntlr from '../charts/ChartsCntlr.js';
 import {uniqueChartId} from '../charts/ChartUtil.js';
-import {XYPlotOptions} from '../charts/ui/XYPlotOptions.jsx';
 import {DT_XYCOLS} from '../charts/dataTypes/XYColsCDT.js';
-import {resultsSuccess as onXYPlotOptsSelected} from '../charts/ui/XYPlotOptions.jsx';
-import {HistogramOptions} from '../charts/ui/HistogramOptions.jsx';
+import {XYPlotOptions, resultsSuccess as onXYPlotOptsSelected,
+                       setOptions as XYPlotSetOptions} from '../charts/ui/XYPlotOptions.jsx';
 import {DT_HISTOGRAM} from '../charts/dataTypes/HistogramCDT.js';
-import {resultsSuccess as onHistogramOptsSelected} from '../charts/ui/HistogramOptions.jsx';
+import {HistogramOptions, resultsSuccess as onHistogramOptsSelected,
+                          setOptions as HistogramSetOptions} from '../charts/ui/HistogramOptions.jsx';
+
 //import {uniqueChartId} from '../charts/ChartUtil.js';
 
 import {FormPanel} from './FormPanel.jsx';
 import CompleteButton from './CompleteButton.jsx';
 import {dispatchHideDropDown} from '../core/LayoutCntlr.js';
+import FieldGroupUtils from '../fieldGroup/FieldGroupUtils';
+import {isEmpty} from 'lodash';
 
 import LOADING from 'html/images/gxt/loading.gif';
 
@@ -257,3 +260,22 @@ ChartSelectDropdown.propTypes = {
 ChartSelectDropdown.defaultProps = {
     name: dropdownName
 };
+
+
+/**
+ * @summary reset chart column select dropdown value if the relevant field group exists
+ */
+export function resetChartSelectOptions() {
+    const chartHandler = {
+        [SCATTER]: XYPlotSetOptions,
+        [HISTOGRAM]: HistogramSetOptions
+    };
+
+    Object.keys(chartHandler).forEach((chartType) => {
+        const formGroupName = getFormName(chartType);
+
+        if (!isEmpty(FieldGroupUtils.getGroupFields(formGroupName))) {
+            chartHandler[chartType](formGroupName);
+        }
+    });
+}

src/firefly/js/visualize/ui/CatalogSelectViewPanel.jsx

@@ -27,10 +27,11 @@ import {FileUpload} from '../../ui/FileUpload.jsx';
 import {convertAngle} from '../VisUtil.js';
 import {masterTableFilter} from './IrsaMasterTableFilters.js';
 import {getAppOptions} from '../../core/AppDataCntlr.js';
+/*
 import {SCATTER, HISTOGRAM, getFormName} from '../../ui/ChartSelectDropdown.jsx';
 import {setOptions as HistogramSetOptions} from '../../charts/ui/HistogramOptions.jsx';
 import {setOptions as XYPlotSetOptions} from '../../charts/ui/XYPlotOptions.jsx';
-
+*/
 
 import './CatalogTableListField.css';
 import './CatalogSelectViewPanel.css';
@@ -215,19 +216,8 @@ function doCatalog(request) {
     if (colsSearched.length > 0) {
         tReq.selcols = colsSearched;
     }
-
     //console.log('final request: ' + JSON.stringify(tReq));
-    //reset column select dropdown value if there is the field group
-    const chartHandler = {[SCATTER]: XYPlotSetOptions,
-                          [HISTOGRAM]: HistogramSetOptions};
 
-    Object.keys(chartHandler).forEach((chartType) => {
-        const formGroupName = getFormName(chartType);
-
-        if (!isEmpty(FieldGroupUtils.getGroupFields(formGroupName))) {
-            chartHandler[chartType](formGroupName);
-        }
-    });
     dispatchTableSearch(tReq);
 }