IRSA-4722: Fixed data products viewer three color hide issue

Author: robyww

docs/release-notes.md

@@ -8,8 +8,10 @@
 
 
 ## Version 2022.2 
+- 2022.2.1 (April 2022)
+  - docker tag: `latest`, `2022.2`, `2022.2.1`
 - 2022.2 - (July 2022)
-  - docker tag: `latest`, `2022.2`, `2022.2.0`
+  - docker tag: `2022.2.0`
 
 ### _Notes_
 #### This release has notable UI, Infrastructure, and  API enhancements
@@ -34,6 +36,16 @@
 - Fixed: WAVE_TAB: The algorithm is producing incorrect results [Firefly-989](https://github.com/Caltech-IPAC/firefly/pull/1224)
 - Multiple table related bugs
 
+
+##### _Patches 2022.2_
+- 2022.2.1
+  - Added IPAC Logo to version dialog([Firefly-1037](https://github.com/Caltech-IPAC/firefly/pull/1225))
+  - Stretch dropdown shows checkbox if stretch selected ([Firefly-1029](https://github.com/Caltech-IPAC/firefly/pull/1225))
+  - Fixed: TAP column table showing filters ([PR](https://github.com/Caltech-IPAC/firefly/pull/1244))
+  - Fixed: Cube planes all change stretch ([Firefly-1038](https://github.com/Caltech-IPAC/firefly/pull/1225))
+
+
+
 ##### _Pull Requests in this release_
 - [All Bug Fixes](https://github.com/caltech-ipac/firefly/pulls?q=is%3apr+milestone%3a2022.2+label%3abug)
 - [All PRs](https://github.com/caltech-ipac/firefly/pulls?q=is%3apr++milestone%3a2022.2+)
@@ -77,6 +89,7 @@
 ##### _Patches 2022.1_
 - 2022.1.1
   - Fixed: Not packaging proprietary data correctly ([IRSA-4570,IRSA-4571](https://github.com/Caltech-IPAC/firefly/pull/1209))
+     
 
 
 ## Version 2021.4  (December 2021)

src/firefly/js/metaConvert/ImageDataProductsUtil.js

@@ -237,7 +237,7 @@ function replotImageDataProducts(activePlotId, imageViewerId, tbl_id, reqAry, th
             dispatchPlotImage(
                 {
                     plotId:threeCPlotId, viewerId:imageViewerId, wpRequest:plotThreeReqAry, threeColor:true,
-                    pvOptions: {userCanDeletePlots: true, menuItemKeys:{imageSelect : false}},
+                    pvOptions: {userCanDeletePlots: false, menuItemKeys:{imageSelect : false}},
                     attributes: { tbl_id }
                 });
         }

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

@@ -11,9 +11,9 @@ import {InputGroup} from '../../ui/InputGroup.jsx';
 import {ListBoxInputField} from '../../ui/ListBoxInputField.jsx';
 import DialogRootContainer from '../../ui/DialogRootContainer.jsx';
 import {PopupPanel} from '../../ui/PopupPanel.jsx';
-import {showInfoPopup} from '../../ui/PopupUtil.jsx';
+import {INFO_POPUP, showInfoPopup} from '../../ui/PopupUtil.jsx';
 import {getMultiViewRoot,dispatchUpdateCustom, getViewer} from '../MultiViewCntlr.js';
-import {dispatchShowDialog, dispatchHideDialog} from '../../core/ComponentCntlr.js';
+import {dispatchShowDialog, dispatchHideDialog, isDialogVisible} from '../../core/ComponentCntlr.js';
 import {Band, allBandAry} from '../Band.js';
 
 
@@ -38,35 +38,46 @@ function ColorBandChooserPanel ({viewerId, bandData, dataId}) {
     const options= Object.keys(threeOp).map( (k) => ({value:k, label:threeOp[k].title}));
     options.push({value:'NONE', label:'Disable'});
 
-    var redVal= Object.keys(threeOp).find( (k) => Boolean(threeOp[k].color===Band.RED));
-    var greenVal= Object.keys(threeOp).find( (k) => Boolean(threeOp[k].color===Band.GREEN));
-    var blueVal= Object.keys(threeOp).find( (k) => Boolean(threeOp[k].color===Band.BLUE));
+    const {threeColorVisible}=  getViewer(getMultiViewRoot(), viewerId)?.customData[dataId];
+
+    let redVal= Object.keys(threeOp).find( (k) => Boolean(threeOp[k].color===Band.RED));
+    let greenVal= Object.keys(threeOp).find( (k) => Boolean(threeOp[k].color===Band.GREEN));
+    let blueVal= Object.keys(threeOp).find( (k) => Boolean(threeOp[k].color===Band.BLUE));
     if (!redVal) redVal= 'NONE';
     if (!greenVal) greenVal= 'NONE';
     if (!blueVal) blueVal= 'NONE';
 
     return (
-        <FieldGroup groupKey={'WHICH_BANDS'} keepState={false}>
-            <div style={{padding:'10px 10px 5px 15px'}}>
-                <InputGroup labelWidth={50}>
-                    <ListBoxInputField  initialState= {{ value: redVal,
-                                                         tooltip: 'Select Red band', label : 'Red:' }}
+        <FieldGroup groupKey={'WHICH_BANDS'} keepState={false} style={{display:'flex', flexDirection:'column', alignItems:'center' }}>
+            <div style={{padding:'10px 5px 5px 5px'}}>
+                <div style={{display:'flex', flexDirection:'column', justifyContent:'space-around', height:60}}>
+                    <ListBoxInputField labelWidth={40}
+                        initialState= {{ value: redVal, tooltip: 'Select Red band', label : 'Red:' }}
                                         options={options} fieldKey={Band.RED.key} />
 
-                    <ListBoxInputField  initialState= {{value: greenVal,
-                                                        tooltip: 'Select Green band', label : 'Green:' }}
+                    <ListBoxInputField labelWidth={40}
+                        initialState= {{value: greenVal, tooltip: 'Select Green band', label : 'Green:' }}
                                         options={options} fieldKey={Band.GREEN.key} />
 
-                    <ListBoxInputField  initialState= {{value: blueVal,
-                                                        tooltip: 'Select Blue band', label : 'Blue:' }}
+                    <ListBoxInputField labelWidth={40}
+                                       initialState= {{value: blueVal, tooltip: 'Select Blue band', label : 'Blue:' }}
                                         options={options} fieldKey={Band.BLUE.key} />
-                </InputGroup>
+
+                </div>
+            </div>
+            <div style={{display:'flex', justifyContent:'space-around', margin: '7px 5px 10px 3px' }}>
+                <CompleteButton
+                    style={{padding : '12px 0 5px 5px'}}
+                    text={`${threeColorVisible?'Update':'Show'} Three Color`}
+                    onSuccess={(request) => update3Color(request,bandData, viewerId, dataId)}
+                    closeOnValid={true}
+                    dialogId='ColorBandChooserPopup' />
+
+                {threeColorVisible && <CompleteButton
+                    style={{padding : '12px 0 5px 5px'}} text={'Hide Three Color'}
+                    onSuccess={(request) => hideThreeColor(viewerId, dataId)}
+                    closeOnValid={true} dialogId='ColorBandChooserPopup' />}
             </div>
-            <CompleteButton
-                style={{padding : '12px 0 5px 5px'}}
-                onSuccess={(request) => update3Color(request,bandData, viewerId, dataId)}
-                closeOnValid={false}
-                dialogId='ColorBandChooserPopup' />
 
         </FieldGroup>
     );
@@ -110,6 +121,11 @@ function validate(request) {
     return {valid:true};
 }
 
+function hideThreeColor(viewerId, dataId) {
+    const v= getViewer(getMultiViewRoot(), viewerId);
+    dispatchUpdateCustom(viewerId,{...v.customData, [dataId]:{...v.customData[dataId], threeColorVisible:false}});
+}
+
 
 function loadThreeColor(request, bandData, viewerId, dataId) {
     const v= getViewer(getMultiViewRoot(), viewerId);