DM-5182-hookhelp

src/firefly/js/core/AppDataCntlr.js

@@ -12,6 +12,7 @@ import strLeft from 'underscore.string/strLeft';
 import strRight from 'underscore.string/strRight';
 import {fetchUrl} from '../util/WebUtil.js';
 import Point, {isValidPoint} from '../visualize/Point.js';
+import {getModuleName} from '../util/WebUtil.js';
 
 const APP_DATA_PATH = 'app-data';
 const SEARCH_TYPE = 'search';
@@ -38,6 +39,8 @@ const DISPLAY_MODE_CHANGE   = `${APP_DATA_PATH}.displayModeChange`;
 const ADD_PREF = `${APP_DATA_PATH}.addPreference`;
 const REMOVE_PREF = `${APP_DATA_PATH}.removePreference`;
 
+//const HELP_LOAD = `${APP_DATA_PATH}.helpLoad`;
+const HELP_LOAD = `overviewHelp`;    //note: consistent with AppMenu.prop
 
 /*---------------------------- CREATORS ----------------------------*/
 
@@ -58,7 +61,6 @@ const makeTaskId= function() {
     return TASK+taskCnt++;
 };
 
-
 const updateActiveTarget= function(state,action) {
     var {worldPt,corners}= action;
     if (!worldPt || !corners) return state;
@@ -151,6 +153,30 @@ function loadAppData() {
     };
 }
 
+function onlineHelpLoad( action )
+{
+    return () => {
+        var url = flux.getState()[APP_DATA_PATH].props['help.base.url'];  // ending with '/'
+        var windowName = 'onlineHelp';
+        var moduleName = getModuleName();
+
+        if (moduleName) {
+            url +=  moduleName;
+            windowName += '-' + moduleName;
+        }
+
+        if (action.payload && action.payload.helpId) {
+            url += '/#id=' + action.payload.helpId;
+        } else {
+            url += '/';
+        }
+
+        if (url) {
+            window.open(url, windowName);
+        }
+    };
+}
+
 /**
  *
  * @param appData {Object} The partial object to merge with the appData branch under root
@@ -338,8 +364,10 @@ export default {
     UPDATE_LAYOUT,
     SEARCH_TYPE,
     DISPLAY_MODE_CHANGE,
+    HELP_LOAD,
     reducer,
     loadAppData,
+    onlineHelpLoad,
     updateAppData,
     isDialogVisible,
     getDialogOwner,

src/firefly/js/core/ReduxFlux.js

@@ -67,6 +67,7 @@ let redux = null;
 
 // pre-map a set of action => creator prior to boostraping.
 actionCreators.set(AppDataCntlr.APP_LOAD, AppDataCntlr.loadAppData);
+actionCreators.set(AppDataCntlr.HELP_LOAD, AppDataCntlr.onlineHelpLoad);
 actionCreators.set(FieldGroupCntlr.VALUE_CHANGE, FieldGroupCntlr.valueChangeActionCreator);
 actionCreators.set(ExternalAccessCntlr.EXTENSION_ACTIVATE, ExternalAccessCntlr.extensionActivateActionCreator);
 actionCreators.set(ImagePlotCntlr.PLOT_IMAGE, plotImageActionCreator);

src/firefly/js/ui/FitsDownloadDialog.jsx

@@ -26,6 +26,7 @@ import {encodeUrl, ParamType}  from '../util/WebUtil.js';
 import RequestType from '../visualize/RequestType.js';
 import {ServiceType} from '../visualize/WebPlotRequest.js';
 
+import HelpIcon from './HelpIcon.jsx';
 
 
 function getDialogBuilder() {
@@ -264,15 +265,33 @@ function FitsDownloadDialogForm() {
 
                     {renderThreeBandButtons}
                 </div>
-                <div style={{'textAlign':'center', marginBottom: 20}}>
-                    < CompleteButton
-                        text='Download'
-                        onSuccess={ (request) => resultsSuccess(request, plot )}
-                        onFail={resultsFail}
-                        dialogId='fitsDownloadDialog'
-                    />
-                </div>
-
+                <table style={{width:300}}>
+                    <colgroup>
+                        <col style={{width: '20%'}} />
+                        <col style={{width: '60%'}} />
+                        <col style={{width: '20%'}} />
+                    </colgroup>
+                    <tbody>
+                    <tr>
+                        <td></td>
+                        <td>
+                            <div style={{'textAlign':'center', marginBottom: 20}}>
+                                < CompleteButton
+                                    text='Download'
+                                    onSuccess={ (request) => resultsSuccess(request, plot )}
+                                    onFail={resultsFail}
+                                    dialogId='fitsDownloadDialog'
+                                />
+                            </div>
+                        </td>
+                        <td>
+                            <div style={{ textAlign:'center', marginBottom: 20}}>
+                               <HelpIcon helpid={'visualization.fitsDownloadOptions'} />
+                            </div>
+                        </td>
+                    </tr>
+                    </tbody>
+                 </table>
         </FieldGroup>
     );
 

src/firefly/js/ui/FitsRotationDialog.jsx

@@ -18,7 +18,7 @@ import Band from '../visualize/Band.js';
 import {visRoot, dispatchRotate, ActionScope} from '../visualize/ImagePlotCntlr.js';
 import {RotateType} from '../visualize/PlotChangeTask.js';
 
-
+import HelpIcon from './HelpIcon.jsx';
 
 function getDialogBuilder() {
     var popup = null;
@@ -253,15 +253,34 @@ function FitsRotationDialogForm() {
                         fieldKey='checkAllimage'
                     />
                 </div>
-
-                <div style={{'textAlign':'center', marginBottom: 20}}>
-                    < CompleteButton
-                        text='OK'  groupKey='FITS_ROTATION_FORM'
-                        onSuccess={(request) =>resultsSuccess(request,plot.plotId)}
-                        onFail={resultsFail}
-                        dialogId='fitsRotationDialog'
-                    />
-                </div>
+                <table style={{width:300}}>
+                    <colgroup>
+                        <col style={{width: '20%'}} />
+                        <col style={{width: '60%'}} />
+                        <col style={{width: '20%'}} />
+                    </colgroup>
+                    <tbody>
+                        <tr>
+                            <td></td>
+                            <td>
+                                <div style={{'textAlign':'center', marginBottom: 20}}>
+                                    < CompleteButton
+                                        text='OK'  groupKey='FITS_ROTATION_FORM'
+                                        onSuccess={(request) =>resultsSuccess(request,plot.plotId)}
+                                        onFail={resultsFail}
+                                        dialogId='fitsRotationDialog'
+
+                                    />
+                                </div>
+                            </td>
+                            <td>
+                                <div style={{ textAlign:'center', marginBottom: 20}}>
+                                    <HelpIcon helpid={'visualization.Rotate'} />
+                                </div>
+                            </td>
+                         </tr>
+                    </tbody>
+                </table>
         </FieldGroup>
     );
 

src/firefly/js/ui/HelpIcon.css

@@ -0,0 +1,3 @@
+.helpicon:hover {
+    cursor:pointer
+}

src/firefly/js/ui/HelpIcon.jsx

@@ -0,0 +1,38 @@
+/*
+ * License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt
+ */
+
+import React, {PropTypes} from 'react';
+import {flux} from '../Firefly.js';
+import appDataCntlr from '../core/AppDataCntlr.js';
+
+import largeHelp from 'html/images/icons-2014/Help.png';
+import smallHelp from 'html/images/icons-2014/Help-16x16.png';
+
+import './HelpIcon.css';
+
+function HelpIcon({helpId, size='small'}) {
+    var imgSrc = (size === 'small') ? smallHelp : largeHelp;
+
+    var onClick = () => {
+        flux.process({
+            type: appDataCntlr.HELP_LOAD,
+            payload: {helpId}
+        });
+    };
+
+    return (
+        <div>
+            <img className={'helpicon'}
+                 onClick={onClick}
+                 src={imgSrc}/>
+        </div>);
+}
+
+HelpIcon.propTypes = {
+    helpId: PropTypes.string,
+    size:   PropTypes.oneOf(['small', 'large'])
+};
+
+
+export default HelpIcon;

src/firefly/js/ui/Menu.jsx

@@ -9,13 +9,12 @@ import appDataCntlr, {dispatchUpdateLayout} from '../core/AppDataCntlr.js';
 
 
 
-
 function handleAction (menuItem) {
 
     // set whether search menu should be shown
     dispatchUpdateLayout( {search: (menuItem.type === appDataCntlr.SEARCH_TYPE)});
 
-    flux.process({type:menuItem.action});
+    flux.process({type: menuItem.action, payload:{}});
 }
 
 /**

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

@@ -2,21 +2,31 @@
  * License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt
  */
 
-import React, {Component, PropTypes} from 'react';
+import React, {PropTypes} from 'react';
+import AppDataCntlr from '../../core/AppDataCntlr.js';
+
 import CompleteButton from '../../ui/CompleteButton.jsx';
 import DialogRootContainer from '../../ui/DialogRootContainer.jsx';
 import PopupPanel from '../../ui/PopupPanel.jsx';
-import AppDataCntlr from '../../core/AppDataCntlr.js';
+
+import HelpIcon from '../../ui/HelpIcon.jsx';
 
 const popupId = 'ImageAreaStatsPopup';
+const helpId = 'visualization.fitsViewer';
+
+// style of the top divs
 const rS = {
-    padding: '10px 10px 10px 10px'
-};
-const tS = {
-    width: '450px',
-    border: '1px solid black'
+    padding: 10
 };
 
+const tableW = 450;
+
+/**
+ * show image area stats popup window
+ * @param {string} popTitle
+ * @param {object} statsResult image area stats content
+ */
+
 export function showImageAreaStatsPopup(popTitle, statsResult) {
     const popup=
         (<PopupPanel title={popTitle} >
@@ -51,14 +61,13 @@ ImageStats.propTypes= {
     }).isRequired
 };
 
-
-
 /**
  * component of stats summary
  * @param {array} statsSummary
  * @returns {XML}
  *
  */
+
 function ImageAreaStatsSummary({statsSummary})
 {
     var summaryRows = statsSummary.map(function(summaryLine) {
@@ -95,6 +104,12 @@ ImageAreaStatsSummary.PropTypes={
 
 function ImageAreaStatsTable ({statsTbl})
 {
+    // table style
+    var tS = {
+        width: tableW,
+        border: '1px solid black'
+    };
+
     var tableRows = statsTbl.map(function (statsRow) {
         return (
             <ImageAreaStatsTableRow key={statsRow[0] || statsRow[1]} statsRow={statsRow} />
@@ -171,13 +186,13 @@ class ImageAreaStatsTableRow extends React.Component {
 
         var tableCells = this.props.statsRow.map(function (cell) {
             const newline = '\n';
-            var dS = {border: '1px solid black', padding: '5'};
+            var dS = {  border: '1px solid black',
+                        padding: 5  };
 
-            // cell contains newline (location)
-            if (cell.includes(newline)) {
-                var lines = cell.split(newline);
+            // cell contains newline (ex. RA:..\n DEC:...)
 
-                var br = lines.map(function (line) {
+            if (cell.includes(newline)) {
+                var br = cell.split(newline).map(function (line) {
                     return (<span key={line}>{line}<br/></span>);
                 });
 
@@ -195,41 +210,53 @@ class ImageAreaStatsTableRow extends React.Component {
 
         return (
             <tr style={trS}
-                onMouseOver={this.onMouseHover.bind(this)} onMouseOut={this.onMouseOut.bind(this)}>
+                onMouseOver={this.onMouseHover.bind(this)}
+                onMouseOut={this.onMouseOut.bind(this)}>
                 {tableCells}
             </tr>
         );
     }
 }
 
 ImageAreaStatsTableRow.propTypes={
-    statsRow: React.PropTypes.array.isRequired
+    statsRow: PropTypes.array.isRequired
 };
 
 /**
  * component under the stats table containing close button and help icon
  * @param {string} closeButton
- * @param {string} imgFile
  * @returns {XML}
  * @constructor
  */
 
-// TODO: add help icon
-function ImageAreaStatsClose ({closeButton='Close', imgFile=''} )
+function ImageAreaStatsClose ({closeButton='Close'} )
 {
-    var rcS = Object.assign({}, rS, {float: 'right'});
+    var tbS = {textAlign: 'right', width: tableW};
 
     return (
-        <div style={rcS} >
-            <CompleteButton
-                style={{padding : '5px'}}
-                text={closeButton}
-                dialogId={popupId} />
+        <div style={rS}>
+            <table style={tbS}>
+                <colgroup>
+                    <col style={{width: '92%'}}/>
+                    <col style={{width: '8%'}}/>
+                </colgroup>
+                <tbody>
+                    <tr>
+                        <td>
+                            <CompleteButton
+                            text={closeButton}
+                            dialogId={popupId} />
+                        </td>
+                        <td>
+                            <HelpIcon helpId={helpId}/>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     );
 }
 
 ImageAreaStatsClose.PropTypes={
-    closeButton: PropTypes.string,
-    imgFile: PropTypes.string
+    closeButton: PropTypes.string
 };