@@ -11,9 +11,9 @@ import {InputGroup} from '../../ui/InputGroup.jsx';
1111import { ListBoxInputField } from '../../ui/ListBoxInputField.jsx' ;
1212import DialogRootContainer from '../../ui/DialogRootContainer.jsx' ;
1313import { PopupPanel } from '../../ui/PopupPanel.jsx' ;
14- import { showInfoPopup } from '../../ui/PopupUtil.jsx' ;
14+ import { INFO_POPUP , showInfoPopup } from '../../ui/PopupUtil.jsx' ;
1515import { getMultiViewRoot , dispatchUpdateCustom , getViewer } from '../MultiViewCntlr.js' ;
16- import { dispatchShowDialog , dispatchHideDialog } from '../../core/ComponentCntlr.js' ;
16+ import { dispatchShowDialog , dispatchHideDialog , isDialogVisible } from '../../core/ComponentCntlr.js' ;
1717import { Band , allBandAry } from '../Band.js' ;
1818
1919
@@ -38,35 +38,46 @@ function ColorBandChooserPanel ({viewerId, bandData, dataId}) {
3838 const options = Object . keys ( threeOp ) . map ( ( k ) => ( { value :k , label :threeOp [ k ] . title } ) ) ;
3939 options . push ( { value :'NONE' , label :'Disable' } ) ;
4040
41- var redVal = Object . keys ( threeOp ) . find ( ( k ) => Boolean ( threeOp [ k ] . color === Band . RED ) ) ;
42- var greenVal = Object . keys ( threeOp ) . find ( ( k ) => Boolean ( threeOp [ k ] . color === Band . GREEN ) ) ;
43- var blueVal = Object . keys ( threeOp ) . find ( ( k ) => Boolean ( threeOp [ k ] . color === Band . BLUE ) ) ;
41+ const { threeColorVisible} = getViewer ( getMultiViewRoot ( ) , viewerId ) ?. customData [ dataId ] ;
42+
43+ let redVal = Object . keys ( threeOp ) . find ( ( k ) => Boolean ( threeOp [ k ] . color === Band . RED ) ) ;
44+ let greenVal = Object . keys ( threeOp ) . find ( ( k ) => Boolean ( threeOp [ k ] . color === Band . GREEN ) ) ;
45+ let blueVal = Object . keys ( threeOp ) . find ( ( k ) => Boolean ( threeOp [ k ] . color === Band . BLUE ) ) ;
4446 if ( ! redVal ) redVal = 'NONE' ;
4547 if ( ! greenVal ) greenVal = 'NONE' ;
4648 if ( ! blueVal ) blueVal = 'NONE' ;
4749
4850 return (
49- < FieldGroup groupKey = { 'WHICH_BANDS' } keepState = { false } >
50- < div style = { { padding :'10px 10px 5px 15px ' } } >
51- < InputGroup labelWidth = { 50 } >
52- < ListBoxInputField initialState = { { value : redVal ,
53- tooltip : 'Select Red band' , label : 'Red:' } }
51+ < FieldGroup groupKey = { 'WHICH_BANDS' } keepState = { false } style = { { display : 'flex' , flexDirection : 'column' , alignItems : 'center' } } >
52+ < div style = { { padding :'10px 5px 5px 5px ' } } >
53+ < div style = { { display : 'flex' , flexDirection : 'column' , justifyContent : 'space-around' , height : 60 } } >
54+ < ListBoxInputField labelWidth = { 40 }
55+ initialState = { { value : redVal , tooltip : 'Select Red band' , label : 'Red:' } }
5456 options = { options } fieldKey = { Band . RED . key } />
5557
56- < ListBoxInputField initialState = { { value : greenVal ,
57- tooltip : 'Select Green band' , label : 'Green:' } }
58+ < ListBoxInputField labelWidth = { 40 }
59+ initialState = { { value : greenVal , tooltip : 'Select Green band' , label : 'Green:' } }
5860 options = { options } fieldKey = { Band . GREEN . key } />
5961
60- < ListBoxInputField initialState = { { value : blueVal ,
61- tooltip : 'Select Blue band' , label : 'Blue:' } }
62+ < ListBoxInputField labelWidth = { 40 }
63+ initialState = { { value : blueVal , tooltip : 'Select Blue band' , label : 'Blue:' } }
6264 options = { options } fieldKey = { Band . BLUE . key } />
63- </ InputGroup >
65+
66+ </ div >
67+ </ div >
68+ < div style = { { display :'flex' , justifyContent :'space-around' , margin : '7px 5px 10px 3px' } } >
69+ < CompleteButton
70+ style = { { padding : '12px 0 5px 5px' } }
71+ text = { `${ threeColorVisible ?'Update' :'Show' } Three Color` }
72+ onSuccess = { ( request ) => update3Color ( request , bandData , viewerId , dataId ) }
73+ closeOnValid = { true }
74+ dialogId = 'ColorBandChooserPopup' />
75+
76+ { threeColorVisible && < CompleteButton
77+ style = { { padding : '12px 0 5px 5px' } } text = { 'Hide Three Color' }
78+ onSuccess = { ( request ) => hideThreeColor ( viewerId , dataId ) }
79+ closeOnValid = { true } dialogId = 'ColorBandChooserPopup' /> }
6480 </ div >
65- < CompleteButton
66- style = { { padding : '12px 0 5px 5px' } }
67- onSuccess = { ( request ) => update3Color ( request , bandData , viewerId , dataId ) }
68- closeOnValid = { false }
69- dialogId = 'ColorBandChooserPopup' />
7081
7182 </ FieldGroup >
7283 ) ;
@@ -110,6 +121,11 @@ function validate(request) {
110121 return { valid :true } ;
111122}
112123
124+ function hideThreeColor ( viewerId , dataId ) {
125+ const v = getViewer ( getMultiViewRoot ( ) , viewerId ) ;
126+ dispatchUpdateCustom ( viewerId , { ...v . customData , [ dataId ] :{ ...v . customData [ dataId ] , threeColorVisible :false } } ) ;
127+ }
128+
113129
114130function loadThreeColor ( request , bandData , viewerId , dataId ) {
115131 const v = getViewer ( getMultiViewRoot ( ) , viewerId ) ;
0 commit comments