DM-9272: Clean up IRSA Time series viewer to prepare RC

Author: loitly

src/firefly/html/css/global.css

@@ -86,6 +86,7 @@
 
 .button.std {
     height: 23px;
+    white-space: nowrap;
 }
 
 .button.hl {
@@ -339,3 +340,12 @@
     color: blue;
     text-decoration: none;
 }
+
+/*------------------- reusable layout styles >---------------------*/
+.abs_full {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}

src/firefly/js/templates/lightcurve/LCPanels.css

@@ -32,4 +32,25 @@
 
 .Resizer.disabled {
     cursor: auto;
+}
+
+.phaseFolded {
+    display: inline-flex;
+    width: 100%;
+    height: 100%;
+}
+
+.phaseFolded__options {
+    background-color: #dcdcdc;
+    border-radius: 7px;
+    border: 1px solid #cccccc;
+    margin-right: 2px;
+    padding: 10px;
+}
+
+.settingBox {
+    background-color: #dcdcdc;
+    border: 1px solid #cccccc;
+    margin-bottom: 3px;
+    padding: 5px 10px;
 }

src/firefly/js/templates/lightcurve/LcPeriod.jsx

@@ -13,15 +13,15 @@ import {RangeSlider}  from '../../ui/RangeSlider.jsx';
 import {FieldGroup} from '../../ui/FieldGroup.jsx';
 import {ValidationField} from '../../ui/ValidationField.jsx';
 import {showInfoPopup} from '../../ui/PopupUtil.jsx';
-import {createContentWrapper} from '../../ui/panel/DockLayoutPanel.jsx';
+import {SplitContent} from '../../ui/panel/DockLayoutPanel.jsx';
 import Validate from '../../util/Validate.js';
 import {dispatchActiveTableChanged} from '../../tables/TablesCntlr.js';
 import FieldGroupUtils from '../../fieldGroup/FieldGroupUtils';
 import FieldGroupCntlr, {dispatchValueChange, dispatchMultiValueChange} from '../../fieldGroup/FieldGroupCntlr.js';
 import {getActiveTableId, getColumnIdx} from '../../tables/TableUtil.js';
 import {LC, updateLayoutDisplay, getValidValueFrom, getFullRawTable} from './LcManager.js';
 import {doPFCalculate, getPhase} from './LcPhaseTable.js';
-import {LcPeriodogram, startPeriodogramPopup, cancelPeriodogram, popupId} from './LcPeriodogram.jsx';
+import {LcPeriodogram, cancelPeriodogram, popupId} from './LcPeriodogram.jsx';
 import {LO_VIEW, getLayouInfo} from '../../core/LayoutCntlr.js';
 import {isDialogVisible} from '../../core/ComponentCntlr.js';
 import {updateSet} from '../../util/WebUtil.js';
@@ -241,51 +241,35 @@ const PeriodStandardView = (props) => {
     const aroundButton = {margin: space};
 
     return (
-        <div style={{display: 'flex', flexDirection: 'column', flexGrow: 1, position: 'relative'}}>
+        <FieldGroup groupKey={pfinderkey} style={{display: 'flex', flexDirection: 'column', position: 'relative', flexGrow: 1, minHeight: 500}}
+                    reducerFunc={LcPFReducer(initState)}  keepState={true}>
             <div style={{flexGrow: 1, position: 'relative'}}>
-                <div style={{position: 'absolute', top: 0, right: 0, bottom: 0, left: 0}}>
-                    <FieldGroup groupKey={pfinderkey}
-                                reducerFunc={LcPFReducer(initState)}  keepState={true}>
-                    <SplitPane split='horizontal' minSize={100} defaultSize={'90%'}>
-                        <SplitPane split='horizontal' minSize={100} defaultSize={'50%'}>
-                            <SplitPane split='vertical' minSize={20} defaultSize={PanelResizableStyle.width} allowResize={false}>
-                                {createContentWrapper(<LcPFOptionsBox/>)}
-                                {createContentWrapper(<PhaseFoldingChart />)}
-                            </SplitPane>
-                            {createContentWrapper(
-                                <SplitPane split='horizontal' minSize={10} defaultSize={30}>
-                                    {displayMode===LC.PERGRAM_PAGE ?
-                                        <div style={aroundButton}>
-                                            <button type='button'
-                                                    className='button std hl'
-                                                    onClick={startPeriodogramPopup(LC.FG_PERIODOGRAM_FINDER)}>Change Periodogram
-                                            </button>
-                                        </div> : <div></div>}
-                                    <LcPeriodogram displayMode={displayMode} />
-                                </SplitPane>)}
-                        </SplitPane>
-                        <div style={{width: '100%', position: 'absolute',
-                                     height: 20, marginTop: 5, marginBottom: 5,
-                                     display: 'flex', justifyContent: 'flex-end'}}>
-                            <div style={aroundButton}>
-                                <button type='button' className='button std hl' onClick={()=>cancelStandard()}>
-                                    Cancel
-                                </button>
+                <SplitPane split='horizontal' primary='second' maxSize={-100} minSize={100} defaultSize={400}>
+                    <SplitContent>
+                        <div className='phaseFolded'>
+                            <div className='phaseFolded__options'>
+                                <LcPFOptionsBox/>
                             </div>
-                            <CompleteButton
-                                    style={aroundButton}
-                                    groupKey={[pfinderkey]}
-                                    onSuccess={setPFTableSuccess()}
-                                    onFail={setPFTableFail()}
-                                    text={acceptPeriodTxt}
-                                    includeUnmounted={true}
-                            />
+                            <PhaseFoldingChart/>
                         </div>
-                    </SplitPane>
-                    </FieldGroup>
+                    </SplitContent>
+                    <LcPeriodogram displayMode={displayMode}/>
+                </SplitPane>
+            </div>
+            <div style={{flexGrow: 0, display: 'inline-flex', justifyContent: 'flex-end', height: 40}}>
+                <div style={{margin: 5}}>
+                    <button type='button' className='button std hl' onClick={()=>cancelStandard()}>Cancel</button>
                 </div>
+                <CompleteButton
+                    style={aroundButton}
+                    groupKey={[pfinderkey]}
+                    onSuccess={setPFTableSuccess()}
+                    onFail={setPFTableFail()}
+                    text={acceptPeriodTxt}
+                    includeUnmounted={true}
+                />
             </div>
-        </div>
+        </FieldGroup>
     );
 };
 
@@ -311,6 +295,7 @@ PeriodExpandedView.propTypes = {
     displayMode: PropTypes.string
 };
 
+
 /**
  * @summary 2D xyplot component on phase folding
  */

src/firefly/js/templates/lightcurve/LcPeriodogram.jsx

@@ -6,7 +6,7 @@ import React, {Component, PropTypes} from 'react';
 import sCompare from 'react-addons-shallow-compare';
 import { get, set, has} from 'lodash';
 import SplitPane from 'react-split-pane';
-import {createContentWrapper} from '../../ui/panel/DockLayoutPanel.jsx';
+import {SplitContent} from '../../ui/panel/DockLayoutPanel.jsx';
 import {LC, getValidValueFrom, updateLayoutDisplay} from './LcManager.js';
 import {getTypeData} from './LcPeriod.jsx';
 import FieldGroupUtils from '../../fieldGroup/FieldGroupUtils';
@@ -120,12 +120,15 @@ export function LcPeriodogram(props) {
     const {displayMode, groupKey=pgfinderkey, expanded} = props;
     const resultProps = {expanded, groupKey};
 
-    return (
-         <div style={{height: '100%', width: '100%', position: 'absolute'}}>
-             {(displayMode&&displayMode==='period') ? <PeriodogramButton groupKey={groupKey} />
-                                                    : <PeriodogramResult {...resultProps} />}
-        </div>
-    );
+    if (displayMode&&displayMode==='period') {
+        return (
+            <SplitContent>
+                <PeriodogramButton groupKey={groupKey}/>
+            </SplitContent>
+        );
+    } else {
+        return <PeriodogramResult {...resultProps} />;
+    }
 }
 
 
@@ -162,6 +165,14 @@ PeriodogramButton.propTypes = {
     groupKey: PropTypes.string.isRequired
 };
 
+function ChangePeriodogram() {
+    return (
+        <button type='button' className='button std hl'
+                 onClick={startPeriodogramPopup(LC.FG_PERIODOGRAM_FINDER)}>Change Periodogram
+        </button>
+    );
+}
+
 export const popupId = 'periodogramPopup';
 
 /**
@@ -587,15 +598,20 @@ const  PeriodogramResult = ({expanded}) => {
                                      closeable={true}
                                      expandedMode={expanded===LO_VIEW.xyPlots}/>);
 
+    
+    
 
     if (!expanded || expanded === LO_VIEW.none) {
 
-        resultLayout = (<SplitPane split='vertical' minSize={20} defaultSize={'50%'}>
-                            {createContentWrapper(tables)}
-                            {createContentWrapper(xyPlot)}
+        resultLayout = (<SplitPane split='vertical' maxSize={-20} minSize={20} defaultSize={565}>
+                            <SplitContent>
+                                <div style={{margin: '0 0 5px 6px'}}><ChangePeriodogram/></div>
+                                <div style={{height: 'calc(100% - 28px'}}>{tables}</div>
+                            </SplitContent>
+                            <SplitContent>{xyPlot}</SplitContent>
                         </SplitPane>);
     } else {
-        resultLayout = (<div style={{ flex: 'auto', display: 'flex', flexFlow: 'column', overflow: 'hidden', height: '100%'}}>
+        resultLayout = (<div style={{flexGrow: 1}}>
             {expanded === LO_VIEW.tables ? tables : xyPlot}
         </div>);
     }