From d354015e38037f28ff5fe53219af4ae843127c18 Mon Sep 17 00:00:00 2001 From: cwang Date: Wed, 24 Feb 2016 17:59:21 -0800 Subject: [PATCH 1/5] DM-5182-hookhelp Create HelpIcon component for launching online help page. Hook the HelpIcon to fftools homepage "Help" button and image area stats popup window. --- .../ipac/firefly/public/images/Help-16x16.png | Bin 0 -> 3159 bytes .../ipac/firefly/public/images/Help.png | Bin 0 -> 3305 bytes src/firefly/js/core/AppDataCntlr.js | 28 ++++++- src/firefly/js/core/ReduxFlux.js | 1 + src/firefly/js/ui/HelpIcon.jsx | 69 ++++++++++++++++++ src/firefly/js/ui/Menu.jsx | 7 +- .../js/visualize/ui/ImageStatsPopup.jsx | 31 +++++--- 7 files changed, 122 insertions(+), 14 deletions(-) create mode 100755 src/firefly/java/edu/caltech/ipac/firefly/public/images/Help-16x16.png create mode 100755 src/firefly/java/edu/caltech/ipac/firefly/public/images/Help.png create mode 100644 src/firefly/js/ui/HelpIcon.jsx diff --git a/src/firefly/java/edu/caltech/ipac/firefly/public/images/Help-16x16.png b/src/firefly/java/edu/caltech/ipac/firefly/public/images/Help-16x16.png new file mode 100755 index 0000000000000000000000000000000000000000..283335d9dae08a6ae25455d7efe51455c1faaf63 GIT binary patch literal 3159 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 literal 0 HcmV?d00001 diff --git a/src/firefly/js/core/AppDataCntlr.js b/src/firefly/js/core/AppDataCntlr.js index 21a027ca85..0d4b002067 100644 --- a/src/firefly/js/core/AppDataCntlr.js +++ b/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,28 @@ 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.helpID) { + url += '/#id=' + action.helpID; + } + + if (url) { + window.open(url, windowName); + } + }; +} + /** * * @param appData {Object} The partial object to merge with the appData branch under root @@ -338,8 +362,10 @@ export default { UPDATE_LAYOUT, SEARCH_TYPE, DISPLAY_MODE_CHANGE, + HELP_LOAD, reducer, loadAppData, + onlineHelpLoad, updateAppData, isDialogVisible, getDialogOwner, diff --git a/src/firefly/js/core/ReduxFlux.js b/src/firefly/js/core/ReduxFlux.js index 9ce9bc2742..c14a69c9b0 100644 --- a/src/firefly/js/core/ReduxFlux.js +++ b/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); diff --git a/src/firefly/js/ui/HelpIcon.jsx b/src/firefly/js/ui/HelpIcon.jsx new file mode 100644 index 0000000000..81986086f7 --- /dev/null +++ b/src/firefly/js/ui/HelpIcon.jsx @@ -0,0 +1,69 @@ +/* + * 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'; + +const Padding = '5'; // padding for div around image +const DefaultImageSize = '20'; +const DefaultImageHelp = 'images/Help.png'; + +export class HelpIcon extends React.Component { + constructor(props) { + super(props); + + var {width, height} = Object.assign({}, {width: DefaultImageSize, height: DefaultImageSize}, props); + + this.state = { + width: width.toString(), + height: height.toString(), + hover: false + }; + + this.onClick = this.onClick.bind(this); + this.onMouseHover = this.onMouseHover.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + } + + onClick() { + flux.process({ + type:appDataCntlr.HELP_LOAD, + helpID: this.props.id + }); + } + + onMouseHover() { + this.setState({hover: true}); + } + + onMouseOut() { + this.setState({hover: false}); + } + + render() { + const {width, height} = this.state; + var imgStyle = {width, height}; + var divStyle = {padding: Padding}; + var imgSrc = (this.props.src) ? this.prop.src : DefaultImageHelp; + + divStyle.cursor = this.state.hover ? 'pointer' : 'default'; + + return ( +
+ +
); + } +} + +HelpIcon.propTypes = { + width: PropTypes.number, + height: PropTypes.number, + id: PropTypes.string.isRequired, + src: PropTypes.string +}; + +export default HelpIcon; diff --git a/src/firefly/js/ui/Menu.jsx b/src/firefly/js/ui/Menu.jsx index e3fb9245a6..609243ba23 100644 --- a/src/firefly/js/ui/Menu.jsx +++ b/src/firefly/js/ui/Menu.jsx @@ -9,13 +9,16 @@ 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}); + if (menuItem.action.includes(appDataCntlr.HELP_LOAD)) { + flux.process({type: menuItem.action, helpID: 'overview' }); + } else { + flux.process({type: menuItem.action}); + } } /** diff --git a/src/firefly/js/visualize/ui/ImageStatsPopup.jsx b/src/firefly/js/visualize/ui/ImageStatsPopup.jsx index 64fa619df0..507195b8d7 100644 --- a/src/firefly/js/visualize/ui/ImageStatsPopup.jsx +++ b/src/firefly/js/visualize/ui/ImageStatsPopup.jsx @@ -2,25 +2,27 @@ * 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 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'; const rS = { - padding: '10px 10px 10px 10px' + padding: '10' }; const tS = { width: '450px', border: '1px solid black' }; -export function showImageAreaStatsPopup(popTitle, statsResult) { +export function showImageAreaStatsPopup(popTitle, statsResult, helpImage) { const popup= ( - + ); DialogRootContainer.defineDialog(popupId, popup); @@ -30,16 +32,17 @@ export function showImageAreaStatsPopup(popTitle, statsResult) { /** * component for image area stats popup * @param {object} statsResult + * @param {string} helpImage image for help icon * @returns {XML} * */ -function ImageStats ( {statsResult} ) { +function ImageStats ( {statsResult, helpImage} ) { return (
- +
); } @@ -48,7 +51,8 @@ ImageStats.propTypes= { statsResult: PropTypes.shape({ statsSummary: PropTypes.array.isRequired, statsTable: PropTypes.array.isRequired - }).isRequired + }).isRequired, + helpImage: PropTypes.string }; @@ -203,7 +207,7 @@ class ImageAreaStatsTableRow extends React.Component { } ImageAreaStatsTableRow.propTypes={ - statsRow: React.PropTypes.array.isRequired + statsRow: PropTypes.array.isRequired }; /** @@ -214,17 +218,22 @@ ImageAreaStatsTableRow.propTypes={ * @constructor */ -// TODO: add help icon function ImageAreaStatsClose ({closeButton='Close', imgFile=''} ) { var rcS = Object.assign({}, rS, {float: 'right'}); + var sideW = 23; return ( -
- +
+ +
+
+ +
); } From 3e4806a267fc719b852fc9a50dea08701b0419e9 Mon Sep 17 00:00:00 2001 From: cwang Date: Fri, 26 Feb 2016 13:59:26 -0800 Subject: [PATCH 2/5] DM-5182-hookhelp fix HelpIcon's properties and hook help to image rotate and image download dialog --- src/firefly/js/core/AppDataCntlr.js | 2 + src/firefly/js/ui/FitsDownloadDialog.jsx | 37 ++++++-- src/firefly/js/ui/FitsRotationDialog.jsx | 39 ++++++-- src/firefly/js/ui/HelpIcon.jsx | 42 ++++----- src/firefly/js/ui/Menu.jsx | 6 +- .../js/visualize/ui/ImageStatsPopup.jsx | 92 +++++++++++-------- 6 files changed, 133 insertions(+), 85 deletions(-) diff --git a/src/firefly/js/core/AppDataCntlr.js b/src/firefly/js/core/AppDataCntlr.js index 0d4b002067..f0634e0fe8 100644 --- a/src/firefly/js/core/AppDataCntlr.js +++ b/src/firefly/js/core/AppDataCntlr.js @@ -167,6 +167,8 @@ function onlineHelpLoad( action ) if (action.helpID) { url += '/#id=' + action.helpID; + } else { + url += '/'; } if (url) { diff --git a/src/firefly/js/ui/FitsDownloadDialog.jsx b/src/firefly/js/ui/FitsDownloadDialog.jsx index 6128ad606d..35b28abc03 100644 --- a/src/firefly/js/ui/FitsDownloadDialog.jsx +++ b/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} -
- < CompleteButton - text='Download' - onSuccess={ (request) => resultsSuccess(request, plot )} - onFail={resultsFail} - dialogId='fitsDownloadDialog' - /> -
- + + + + + + + + + + + + + +
+
+ < CompleteButton + text='Download' + onSuccess={ (request) => resultsSuccess(request, plot )} + onFail={resultsFail} + dialogId='fitsDownloadDialog' + /> +
+ 		+
+ +
+
); diff --git a/src/firefly/js/ui/FitsRotationDialog.jsx b/src/firefly/js/ui/FitsRotationDialog.jsx index ebe166ffae..9bddb92510 100644 --- a/src/firefly/js/ui/FitsRotationDialog.jsx +++ b/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' /> - -
- < CompleteButton - text='OK' groupKey='FITS_ROTATION_FORM' - onSuccess={(request) =>resultsSuccess(request,plot.plotId)} - onFail={resultsFail} - dialogId='fitsRotationDialog' - /> -
+ + + + + + + + + + + + + +
+
+ < CompleteButton + text='OK' groupKey='FITS_ROTATION_FORM' + onSuccess={(request) =>resultsSuccess(request,plot.plotId)} + onFail={resultsFail} + dialogId='fitsRotationDialog' + + /> +
+ 		+
+ +
+
); diff --git a/src/firefly/js/ui/HelpIcon.jsx b/src/firefly/js/ui/HelpIcon.jsx index 81986086f7..677a2e1692 100644 --- a/src/firefly/js/ui/HelpIcon.jsx +++ b/src/firefly/js/ui/HelpIcon.jsx @@ -6,20 +6,15 @@ import React, {PropTypes} from 'react'; import {flux} from '../Firefly.js'; import appDataCntlr from '../core/AppDataCntlr.js'; -const Padding = '5'; // padding for div around image -const DefaultImageSize = '20'; -const DefaultImageHelp = 'images/Help.png'; +import largeHelp from 'html/images/icons-2014/Help.png'; +import smallHelp from 'html/images/icons-2014/Help-16x16.png'; -export class HelpIcon extends React.Component { +class HelpIcon extends React.Component { constructor(props) { super(props); - var {width, height} = Object.assign({}, {width: DefaultImageSize, height: DefaultImageSize}, props); - this.state = { - width: width.toString(), - height: height.toString(), - hover: false + cursor: 'default' }; this.onClick = this.onClick.bind(this); @@ -30,40 +25,39 @@ export class HelpIcon extends React.Component { onClick() { flux.process({ type:appDataCntlr.HELP_LOAD, - helpID: this.props.id + helpID: this.props.helpid }); } onMouseHover() { - this.setState({hover: true}); + this.setState({cursor: 'pointer'}); } onMouseOut() { - this.setState({hover: false}); + this.setState({cursor: 'default'}); } render() { - const {width, height} = this.state; - var imgStyle = {width, height}; - var divStyle = {padding: Padding}; - var imgSrc = (this.props.src) ? this.prop.src : DefaultImageHelp; - - divStyle.cursor = this.state.hover ? 'pointer' : 'default'; + var imgSrc = this.props.largesize ? largeHelp : smallHelp; + var {cursor} = this.state; + var divStyle = {cursor}; return (
- +
); } } HelpIcon.propTypes = { - width: PropTypes.number, - height: PropTypes.number, - id: PropTypes.string.isRequired, - src: PropTypes.string + helpid: PropTypes.string, + largesize: PropTypes.bool +}; + +HelpIcon.defaultProps = { + largesize: false }; -export default HelpIcon; +export default HelpIcon; \ No newline at end of file diff --git a/src/firefly/js/ui/Menu.jsx b/src/firefly/js/ui/Menu.jsx index 609243ba23..8cbdf7d4e7 100644 --- a/src/firefly/js/ui/Menu.jsx +++ b/src/firefly/js/ui/Menu.jsx @@ -14,11 +14,7 @@ function handleAction (menuItem) { // set whether search menu should be shown dispatchUpdateLayout( {search: (menuItem.type === appDataCntlr.SEARCH_TYPE)}); - if (menuItem.action.includes(appDataCntlr.HELP_LOAD)) { - flux.process({type: menuItem.action, helpID: 'overview' }); - } else { - flux.process({type: menuItem.action}); - } + flux.process({type: menuItem.action}); } /** diff --git a/src/firefly/js/visualize/ui/ImageStatsPopup.jsx b/src/firefly/js/visualize/ui/ImageStatsPopup.jsx index 507195b8d7..5f93f9af96 100644 --- a/src/firefly/js/visualize/ui/ImageStatsPopup.jsx +++ b/src/firefly/js/visualize/ui/ImageStatsPopup.jsx @@ -3,26 +3,34 @@ */ 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: '10' -}; -const tS = { - width: '450px', - border: '1px solid black' + padding: 10 }; -export function showImageAreaStatsPopup(popTitle, statsResult, helpImage) { +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= ( - + ); DialogRootContainer.defineDialog(popupId, popup); @@ -32,17 +40,16 @@ export function showImageAreaStatsPopup(popTitle, statsResult, helpImage) { /** * component for image area stats popup * @param {object} statsResult - * @param {string} helpImage image for help icon * @returns {XML} * */ -function ImageStats ( {statsResult, helpImage} ) { +function ImageStats ( {statsResult} ) { return (
- +
); } @@ -51,18 +58,16 @@ ImageStats.propTypes= { statsResult: PropTypes.shape({ statsSummary: PropTypes.array.isRequired, statsTable: PropTypes.array.isRequired - }).isRequired, - helpImage: PropTypes.string + }).isRequired }; - - /** * component of stats summary * @param {array} statsSummary * @returns {XML} * */ + function ImageAreaStatsSummary({statsSummary}) { var summaryRows = statsSummary.map(function(summaryLine) { @@ -99,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 ( @@ -175,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 ({line}
); }); @@ -199,7 +210,8 @@ class ImageAreaStatsTableRow extends React.Component { return ( + onMouseOver={this.onMouseHover.bind(this)} + onMouseOut={this.onMouseOut.bind(this)}> {tableCells} ); @@ -213,32 +225,38 @@ ImageAreaStatsTableRow.propTypes={ /** * component under the stats table containing close button and help icon * @param {string} closeButton - * @param {string} imgFile * @returns {XML} * @constructor */ -function ImageAreaStatsClose ({closeButton='Close', imgFile=''} ) +function ImageAreaStatsClose ({closeButton='Close'} ) { - var rcS = Object.assign({}, rS, {float: 'right'}); - var sideW = 23; + var tbS = {textAlign: 'right', width: tableW}; return ( -
-
- -
-
- -
+
+ + + + + + + + + + + +
+ + + +
); } ImageAreaStatsClose.PropTypes={ - closeButton: PropTypes.string, - imgFile: PropTypes.string + closeButton: PropTypes.string }; \ No newline at end of file From 9bfaaf01bcaa8d9c6cb63e6715695dbbd20743b1 Mon Sep 17 00:00:00 2001 From: cwang Date: Fri, 26 Feb 2016 19:11:14 -0800 Subject: [PATCH 3/5] DM-5182-hookhelp make HelpIcon to be functional component, change prop to be 'helpId' --- src/firefly/js/core/AppDataCntlr.js | 4 +- src/firefly/js/ui/HelpIcon.css | 3 + src/firefly/js/ui/HelpIcon.jsx | 63 +++++++------------ src/firefly/js/ui/Menu.jsx | 2 +- .../js/visualize/ui/ImageStatsPopup.jsx | 2 +- 5 files changed, 28 insertions(+), 46 deletions(-) create mode 100644 src/firefly/js/ui/HelpIcon.css diff --git a/src/firefly/js/core/AppDataCntlr.js b/src/firefly/js/core/AppDataCntlr.js index f0634e0fe8..3d9e4f901d 100644 --- a/src/firefly/js/core/AppDataCntlr.js +++ b/src/firefly/js/core/AppDataCntlr.js @@ -165,8 +165,8 @@ function onlineHelpLoad( action ) windowName += '-' + moduleName; } - if (action.helpID) { - url += '/#id=' + action.helpID; + if (action.payload && action.payload.helpId) { + url += '/#id=' + action.payload.helpId; } else { url += '/'; } diff --git a/src/firefly/js/ui/HelpIcon.css b/src/firefly/js/ui/HelpIcon.css new file mode 100644 index 0000000000..6a87a03393 --- /dev/null +++ b/src/firefly/js/ui/HelpIcon.css @@ -0,0 +1,3 @@ +.helpicon:hover { + cursor:pointer +} \ No newline at end of file diff --git a/src/firefly/js/ui/HelpIcon.jsx b/src/firefly/js/ui/HelpIcon.jsx index 677a2e1692..cf2cabf5e8 100644 --- a/src/firefly/js/ui/HelpIcon.jsx +++ b/src/firefly/js/ui/HelpIcon.jsx @@ -9,55 +9,34 @@ 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'; -class HelpIcon extends React.Component { - constructor(props) { - super(props); +import './HelpIcon.css'; - this.state = { - cursor: 'default' - }; +function HelpIcon({helpId, size='small'}) { + var imgSrc = (size === 'small') ? smallHelp : largeHelp; - this.onClick = this.onClick.bind(this); - this.onMouseHover = this.onMouseHover.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - } - - onClick() { + var onClick = () => { flux.process({ - type:appDataCntlr.HELP_LOAD, - helpID: this.props.helpid - }); - } - - onMouseHover() { - this.setState({cursor: 'pointer'}); - } - - onMouseOut() { - this.setState({cursor: 'default'}); - } - - render() { - var imgSrc = this.props.largesize ? largeHelp : smallHelp; - var {cursor} = this.state; - var divStyle = {cursor}; - - return ( -
- -
); - } + type: appDataCntlr.HELP_LOAD, + payload: {helpId: helpId} + }); + }; + + return ( +
+ +
); } HelpIcon.propTypes = { - helpid: PropTypes.string, - largesize: PropTypes.bool + helpId: PropTypes.string, + size: function(props, propName, componentName) { + if (props[propName] && !/^(small|large)$/.test(props[propName])){ + return new Error(`Invalid size, should be either small or large`); + } + } }; -HelpIcon.defaultProps = { - largesize: false -}; export default HelpIcon; \ No newline at end of file diff --git a/src/firefly/js/ui/Menu.jsx b/src/firefly/js/ui/Menu.jsx index 8cbdf7d4e7..4db9474fc0 100644 --- a/src/firefly/js/ui/Menu.jsx +++ b/src/firefly/js/ui/Menu.jsx @@ -14,7 +14,7 @@ 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:{}}); } /** diff --git a/src/firefly/js/visualize/ui/ImageStatsPopup.jsx b/src/firefly/js/visualize/ui/ImageStatsPopup.jsx index 5f93f9af96..ba73de75c4 100644 --- a/src/firefly/js/visualize/ui/ImageStatsPopup.jsx +++ b/src/firefly/js/visualize/ui/ImageStatsPopup.jsx @@ -248,7 +248,7 @@ function ImageAreaStatsClose ({closeButton='Close'} ) dialogId={popupId} /> - + From f55ff7f0bad755e081e7912915549c29acaf94dc Mon Sep 17 00:00:00 2001 From: cwang Date: Mon, 29 Feb 2016 08:59:12 -0800 Subject: [PATCH 4/5] DM-5182-hookhelp --- src/firefly/js/ui/HelpIcon.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/firefly/js/ui/HelpIcon.jsx b/src/firefly/js/ui/HelpIcon.jsx index cf2cabf5e8..989cc8f82c 100644 --- a/src/firefly/js/ui/HelpIcon.jsx +++ b/src/firefly/js/ui/HelpIcon.jsx @@ -17,7 +17,7 @@ function HelpIcon({helpId, size='small'}) { var onClick = () => { flux.process({ type: appDataCntlr.HELP_LOAD, - payload: {helpId: helpId} + payload: {helpId} }); }; @@ -31,10 +31,10 @@ function HelpIcon({helpId, size='small'}) { HelpIcon.propTypes = { helpId: PropTypes.string, - size: function(props, propName, componentName) { - if (props[propName] && !/^(small|large)$/.test(props[propName])){ - return new Error(`Invalid size, should be either small or large`); - } + size(props, propName, componentName) { + if (props[propName] && !/^(small|large)$/.test(props[propName])){ + return new Error(`Invalid size in ${componentName}, should be either small or large.`); + } } }; From f10793abcf9cfeb873b8d48efdedc1a627792911 Mon Sep 17 00:00:00 2001 From: cwang Date: Mon, 29 Feb 2016 09:42:12 -0800 Subject: [PATCH 5/5] DM-5182-hookhelp add array to check HelpIcon's prop, 'size' --- src/firefly/js/ui/HelpIcon.jsx | 6 +----- src/firefly/js/visualize/ui/ImageStatsPopup.jsx | 2 +- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/firefly/js/ui/HelpIcon.jsx b/src/firefly/js/ui/HelpIcon.jsx index 989cc8f82c..ae24190f3d 100644 --- a/src/firefly/js/ui/HelpIcon.jsx +++ b/src/firefly/js/ui/HelpIcon.jsx @@ -31,11 +31,7 @@ function HelpIcon({helpId, size='small'}) { HelpIcon.propTypes = { helpId: PropTypes.string, - size(props, propName, componentName) { - if (props[propName] && !/^(small|large)$/.test(props[propName])){ - return new Error(`Invalid size in ${componentName}, should be either small or large.`); - } - } + size: PropTypes.oneOf(['small', 'large']) }; diff --git a/src/firefly/js/visualize/ui/ImageStatsPopup.jsx b/src/firefly/js/visualize/ui/ImageStatsPopup.jsx index ba73de75c4..57e259e790 100644 --- a/src/firefly/js/visualize/ui/ImageStatsPopup.jsx +++ b/src/firefly/js/visualize/ui/ImageStatsPopup.jsx @@ -248,7 +248,7 @@ function ImageAreaStatsClose ({closeButton='Close'} ) dialogId={popupId} /> - +