IRSA-924: fix issues found in new image search

- add select/deselect all at the dataproduct(project) level
- fix mission filter now that mission info is available
- make count returns the number of dataproduct instead of bands(images)
- make CollapsiblePanel's header takes a string or a component.
- make ImageSelect requires a way to register changeListener
- fix firefly-dev.html not showing images
- add option to FormPanel to allow unmounted fields in the request
- set NewImageSearchPanel to take unmounted fields

Author: loitly

src/firefly/html/firefly-dev.html

@@ -13,7 +13,6 @@
         window.firefly = {
             app: {
                 template: 'FireflyViewer',
-                views: 'tables',
                 options : {
                     MenuItemKeys: {maskOverlay:true},
                 }

src/firefly/js/ui/CheckboxGroupInputField.jsx

@@ -55,7 +55,7 @@ function getProps(params, fireValueChange) {
 
     var {value,options}= params;
     value= convertValue(value,options);
-    
+
     return Object.assign({}, params,
         { value,
           onChange: (ev) => handleOnChange(ev,params, fireValueChange)
@@ -79,7 +79,6 @@ function handleOnChange(ev, params, fireValueChange) {
     else {
         if (idx > -1) curValueArr.splice(idx, 1); // remove val from the array
     }
-
     var {valid,message} = params.validator(curValueArr.toString());
 
     fireValueChange({ value: curValueArr.toString(), message, valid });

src/firefly/js/ui/FormPanel.jsx

@@ -54,7 +54,7 @@ function createSuccessHandler(action, params={}, title, onSubmit) {
 
 export const FormPanel = function (props) {
     var {children, onSubmit, onCancel, onError, groupKey, action, params, title,
-        submitText='Search', help_id, changeMasking} = props;
+        submitText='Search', help_id, changeMasking, includeUnmounted=false} = props;
 
     const style = {
         backgroundColor: 'white',
@@ -74,6 +74,7 @@ export const FormPanel = function (props) {
             <div style={{flexGrow: 0, display: 'inline-flex', justifyContent: 'space-between', width: '100%', alignItems: 'flex-end', padding:'2px 0px 3px'}}>
                 <div>
                     <CompleteButton style={{display: 'inline-block', marginRight: 10}}
+                                    includeUnmounted={includeUnmounted}
                                     groupKey={groupKey}
                                     onSuccess={createSuccessHandler(action, params, title, onSubmit)}
                                     onFail={onError || handleFailfure}
@@ -102,7 +103,8 @@ FormPanel.propTypes = {
     action: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     params: PropTypes.object,
     help_id: PropTypes.string,
-    changeMasking: PropTypes.func
+    changeMasking: PropTypes.func,
+    includeUnmounted: PropTypes.boolean
 };
 
 function handleChartAdd(request) {

src/firefly/js/ui/ImageSelect.css

@@ -80,10 +80,11 @@
 }
 
 .DataProductList__item--header {
-    margin-left: 5px;
-    font-size: large;
-    font-weight: bold;
-    color: #005da4;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: -5px;
 }
 
 .DataProductList__item--details {
@@ -102,4 +103,7 @@
     white-space: nowrap;
     text-align: right;
     margin: 2px 2px 0 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100px;
 }

src/firefly/js/ui/ImageSelect.jsx

@@ -4,13 +4,14 @@
 
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {uniqBy, get, countBy} from 'lodash';
+import {uniqBy, get, countBy, isNil, xor} from 'lodash';
 
 
 import {CheckboxGroupInputField} from './CheckboxGroupInputField.jsx';
 import {CollapsiblePanel} from '../ui/panel/CollapsiblePanel.jsx';
 import FieldGroupUtils, {getFieldVal} from '../fieldGroup/FieldGroupUtils.js';
 import {dispatchComponentStateChange} from '../core/ComponentCntlr.js';
+import {updateSet} from '../util/WebUtil.js';
 
 import './ImageSelect.css';
 
@@ -19,17 +20,22 @@ export class ImageSelect extends PureComponent {
 
     constructor(props) {
         super(props);
-        this.state= {lastMod:new Date().getTime(), filteredImageData:undefined};   // can be open, close, or auto.
+        this.state= {lastMod:new Date().getTime()};
+        props.addChangeListener && props.addChangeListener('ImageSelect', fieldsReducer(props.imageMasterData));
     }
 
     render() {
         const {style, imageMasterData, groupKey} = this.props;
+        imageMasterData.forEach((d)=> {
+            ['missionId', 'project', 'subProject'].forEach((k) => d[k] = d[k] || '');
+        });
+
         var {filteredImageData=imageMasterData} = this.state;
         const filterMission = toFilterSelectAry(groupKey, 'mission');
         const filterProjectType = toFilterSelectAry(groupKey, 'projectType');
         const filterwaveBand = toFilterSelectAry(groupKey, 'waveBand');
 
-        filteredImageData = filterMission.length > 0 ? filteredImageData.filter( (d) => filterMission.includes(d.project)) : filteredImageData;
+        filteredImageData = filterMission.length > 0 ? filteredImageData.filter( (d) => filterMission.includes(d.missionId)) : filteredImageData;
         filteredImageData = filterProjectType.length > 0 ? filteredImageData.filter( (d) => filterProjectType.includes(d.projectTypeKey)) : filteredImageData;
         filteredImageData = filterwaveBand.length > 0 ? filteredImageData.filter( (d) => filterwaveBand.includes(d.wavelength)) : filteredImageData;
 
@@ -42,10 +48,47 @@ export class ImageSelect extends PureComponent {
     }
 
 }
+function fieldsReducer(imageMasterData={}) {
+    return (inFields, action) => {
+        const {fieldKey='', options={}, value=''} = action.payload;
+
+        if (fieldKey.startsWith('PROJ_ALL_')) {
+            // a project checkbox is clicked
+            const proj = fieldKey.replace('PROJ_ALL_', '');
+            Object.entries(inFields).forEach( ([k, f]) => {
+                if (k.startsWith(`IMAGES_${proj}`)) {
+                    if (value === '_all_') {
+                        const allVals = f.options ? f.options.map((o) => o.value).join() : '';
+                        inFields = updateSet(inFields, [k, 'value'], allVals);
+                    } else {
+                        inFields = updateSet(inFields, [k, 'value'], '');
+                    }
+                }
+            });
+        } else if (fieldKey.startsWith('IMAGES_')) {
+            // one item changed, update project selectAll checkbox
+            const matcher = fieldKey.split('||')[0];
+            const cbGroups = Object.values(inFields).filter((f) => f.fieldKey.startsWith(matcher));  // array of subproject in this project
+            const allSelected = cbGroups.reduce((p, f) => {
+                            const selAry = get(f,'value','').split(',');
+                            const allAry = get(f,'options',[]).map((o) => o.value);
+                            return p && xor(selAry, allAry).length === 0;
+                        }, true);
+            const proj = matcher.substring(7);
+            inFields = updateSet(inFields, ['PROJ_ALL_' + proj, 'value'], (allSelected ? '_all_' : ''));
+        }
+
+        return inFields;
+    };
+}
+
 
 ImageSelect.propTypes = {
-    imageMasterData: PropTypes.arrayOf(PropTypes.object),
-    groupKey: PropTypes.string,
+    imageMasterData: PropTypes.arrayOf(PropTypes.object).isRequired,
+    groupKey: PropTypes.string.isRequired,
+    // this component needs to be wrapped by a FieldGroup.  User of this component need to provide
+    // a function so this component can handle field change even from reducing function.
+    addChangeListener: PropTypes.func.isRequired,
     style: PropTypes.object,
     title: PropTypes.string
 };
@@ -67,9 +110,10 @@ function FilterPanel({imageMasterData, title='4. Select Data Set', onChange}) {
 
 // eslint-disable-next-line
 function FilterPanelView({onChange, imageMasterData}) {
-    const missions = toCatSummary(imageMasterData, 'project', 'project');
-    const projectTypes = toCatSummary(imageMasterData, 'projectTypeKey', 'projectTypeDesc');
-    const waveBands = toCatSummary(imageMasterData, 'wavelength', 'wavelengthDesc');
+    const forSummary = uniqBy(imageMasterData, (t) => `${t.missionId};${t.project}`);
+    const missions = toFilterSummary(forSummary, 'missionId', 'missionId');
+    const projectTypes = toFilterSummary(forSummary, 'projectTypeKey', 'projectTypeDesc');
+    const waveBands = toFilterSummary(forSummary, 'wavelength', 'wavelengthDesc');
 
     return (
         <div className='FilterPanel__view'>
@@ -159,7 +203,7 @@ function FilterSelectExpanded({selections, onClose}) {
 }
 
 const toFilterOptions = (a) => a.map ( (d) => ({label: `${d.label}  (${d.count})`, value: d.name}));
-const toCatSummary = (master, key, desc) => Object.entries(countBy(master, (d) => `${get(d, key)};${get(d, desc)}`))
+const toFilterSummary = (master, key, desc) => Object.entries(countBy(master, (d) => `${get(d, key)};${get(d, desc)}`))
                                                     .map( ([d, c]) => ({name: d.split(';')[0], label: d.split(';')[1], count: c}));
 
 
@@ -201,7 +245,7 @@ function DataProduct({groupKey, project, filteredImageData}) {
 
     return (
         <div className='DataProductList__item'>
-            <CollapsiblePanel componentKey={project} header={project} isOpen={isOpen}>
+            <CollapsiblePanel componentKey={project} header={<Header {...{project}}/>} isOpen={isOpen}>
                 <div className='DataProductList__item--details'>
                     {
                         subProjects.map((sp) =>
@@ -215,6 +259,26 @@ function DataProduct({groupKey, project, filteredImageData}) {
 
 }
 
+function Header({project}) {
+    const fieldKey= `PROJ_ALL_${project}`;
+    return (
+        <div className='DataProductList__item--header' onClick={(e) => e.stopPropagation()}>
+            <CheckboxGroupInputField
+                key={fieldKey}
+                fieldKey={fieldKey}
+                initialState={{
+                        value: '',   // workaround for _all_ for now
+                        tooltip: 'Please select some boxes',
+                        label : '' }}
+                options={[{label:project, value:'_all_'}]}
+                alignment='horizontal'
+                labelWidth={35}
+                wrapperStyle={{whiteSpace: 'normal'}}
+            />
+        </div>
+    );
+}
+
 const hasImageSelection = (groupKey, proj) => {
     const fields = FieldGroupUtils.getGroupFields(groupKey) || {};
     return Object.values(fields).some((fld) => fld.fieldKey.startsWith(`IMAGES_${proj}`) && fld.value);
@@ -223,17 +287,24 @@ const hasImageSelection = (groupKey, proj) => {
 
 // eslint-disable-next-line
 function BandSelect({subProject, projectData, labelMaxWidth}) {
-    const fieldKey= `IMAGES_${get(projectData, [0, 'project'])}_${subProject}`;
+    subProject = isNil(subProject) ? '' : subProject;
+    const fieldKey= `IMAGES_${get(projectData, [0, 'project'])}||${subProject}`;
     const options = toImageOptions(projectData.filter( (p) => p.subProject === subProject));
-    const label = subProject && <div style={{minWidth: labelMaxWidth+'ch'}} className='DataProductList__item--bandLabel'>{subProject + ':'}</div>;
+    const label = subProject && (
+                    <div style={{display: 'inline-flex'}}>
+                        <div style={{width: labelMaxWidth+1+'ch'}} title={subProject}
+                             className='DataProductList__item--bandLabel'>{subProject}</div>
+                        <span>:</span>
+                    </div>);
     return (
         <div className='DataProductList__item--band'>
             {label}
             <CheckboxGroupInputField
                 key={fieldKey}
                 fieldKey={fieldKey}
                 initialState={{
-                        value: '',   // workaround for _all_ for now
+                        options,        // Note: values in initialState are saved into fieldgroup.  options are used in the reducer above to determine what 'all' means.
+                        value: '',
                         tooltip: 'Please select some boxes',
                         label : '' }}
                 options={options}

src/firefly/js/ui/NewImageSearchPanel.jsx

@@ -4,7 +4,6 @@
 
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {uniqBy, get} from 'lodash';
 
 import {FormPanel} from './FormPanel.jsx';
 import {FieldGroup} from '../ui/FieldGroup.jsx';
@@ -16,11 +15,9 @@ import {showInfoPopup} from './PopupUtil.jsx';
 import {dispatchHideDropDown} from '../core/LayoutCntlr.js';
 
 import FieldGroupUtils from '../fieldGroup/FieldGroupUtils.js';
-import {CheckboxGroupInputField} from './CheckboxGroupInputField.jsx';
 import {parseWorldPt} from '../visualize/Point.js';
 import WebPlotRequest, {WPConst} from '../visualize/WebPlotRequest.js';
 import {dispatchPlotImage} from '../visualize/ImagePlotCntlr.js';
-import {imageMasterData} from '../data/ImageMasterData.js';
 import {getImageMasterData} from '../visualize/ui/AllImageSearchConfig.js';
 import {ImageSelect} from './ImageSelect.jsx';
 
@@ -100,11 +97,13 @@ function renderPanel(imageMasterData) {
             <FormPanel
                 width='640px' height='500px'
                 groupKey={FG_KEY}
+                includeUnmounted={true}
                 params={{hideOnInvalid: false}}
-                onSubmit={(request) => onSearchSubmit(request)}
+                onSubmit={(request) => onSearchSubmit(request, imageMasterData)}
                 onError={(request) => searchFailed(request)}
                 onCancel={hideSearchPanel}>
-                <FieldGroup groupKey={FG_KEY} validatorFunc={null} keepState={true}>
+                <FieldGroup groupKey={FG_KEY} validatorFunc={null}
+                            reducerFunc={mainReducer} keepState={true}>
                     <div style={{padding:'5px 0 0 0', display: 'flex', textAlign:'center', justifyContent: 'center' }}>
                         <TargetPanel/>
                     </div>
@@ -122,7 +121,7 @@ function renderPanel(imageMasterData) {
                                          label={'Choose Radius'}
                         />
 
-                        <ImageSelect key='ImageSelect' {...{groupKey:FG_KEY, imageMasterData, style:{width: 700, height: 300}}} />
+                        <ImageSelect key='ImageSelect' {...{groupKey:FG_KEY, addChangeListener, imageMasterData, style:{width: 800, height: 400}}} />
 
                     </div>
                 </FieldGroup>
@@ -141,20 +140,33 @@ NewImageSearchPanel.defaultProps = {
 };
 
 
+// map of key/listener
+const changeListeners = {};
+function addChangeListener(key, changeListener) {
+    changeListeners[key] = changeListener;
+}
+function mainReducer(inFields, action) {
+    // put reducing logic here is any
+
+    // call all listeners for
+    inFields = Object.values(changeListeners).reduce( (p, l) => l(p, action), inFields);
+    return inFields;
+};
+
+
 function hideSearchPanel() {
     dispatchHideDropDown();
 }
 
 
-function onSearchSubmit(request) {
+function onSearchSubmit(request, imageMasterData) {
     console.log(request);
     const validInfo= validateInput(request);
     if (!validInfo.valid)  {
         showInfoPopup(validInfo.message);
         return false;
     }
-    doImageSearch(request);
-    console.log(request.imageSelection);
+    doImageSearch(request, imageMasterData);
 }
 
 function searchFailed(request) {
@@ -185,7 +197,7 @@ function validateInput(request) {
 
 
 //todo: after UI changes: needs to come up with list of plotRequestParams to make into WebPlotRequest
-function doImageSearch(request) {
+function doImageSearch(request, imageMasterData) {
     const wp = parseWorldPt(request[ServerParams.USER_TARGET_WORLD_PT]);
     const radius= request.conesize;
 
@@ -198,6 +210,8 @@ function doImageSearch(request) {
 
     const paramAry= imageMasterData.filter( (d) => imageIdList.includes(d.imageId));
     loadImages(wp,radius,paramAry);
+    console.log(paramAry);
+
 }
 
 //-------------------------------------------------------------------------