From 152a34b672fbf80648ce5927ccaff71edd47ed1c Mon Sep 17 00:00:00 2001 From: loi Date: Fri, 2 Sep 2016 14:37:51 -0700 Subject: [PATCH 1/4] DM-5276: Upgrade JS third party packages - goal: babel 6, React 15, and latest version of webpack - upgrade most packages to latest versions as well - remove some unused packages - fixed warnings related to React upgrade --- buildScript/webpack.config.js | 16 +++-- package.json | 68 +++++++++---------- src/fftools/webpack.config.js | 4 +- src/firefly/js/Firefly.js | 2 +- src/firefly/js/charts/ui/Histogram.jsx | 2 +- src/firefly/js/charts/ui/XYPlot.jsx | 2 +- src/firefly/js/core/ReduxFlux.js | 8 ++- src/firefly/js/tables/TablesCntlr.js | 4 ++ .../js/tables/reducer/TableDataReducer.js | 21 ++++-- .../js/tables/reducer/TableResultsReducer.js | 9 ++- .../js/tables/reducer/TableUiReducer.js | 18 +++-- src/firefly/js/tables/ui/TablePanel.jsx | 2 +- .../templates/fireflyviewer/ResultsPanel.jsx | 2 +- src/firefly/js/ui/Banner.jsx | 4 +- src/firefly/js/ui/ExampleDialog.jsx | 4 +- src/firefly/js/ui/InputGroup.jsx | 19 +++--- src/firefly/js/ui/Menu.jsx | 8 +-- .../js/ui/RadioGroupInputFieldView.jsx | 1 - src/firefly/js/ui/panel/TabPanel.jsx | 13 +++- .../js/util/expr/__test__/Expression-test.js | 2 +- .../js/visualize/iv/ExpandedModeDisplay.jsx | 16 +++-- src/firefly/package.json | 2 +- src/firefly/webpack.config.js | 4 +- 23 files changed, 132 insertions(+), 99 deletions(-) diff --git a/buildScript/webpack.config.js b/buildScript/webpack.config.js index 67c5c06e35..71f099ee78 100644 --- a/buildScript/webpack.config.js +++ b/buildScript/webpack.config.js @@ -8,7 +8,7 @@ import path from 'path'; import fs from 'fs'; -var exclude_dirs = [/node_modules/, /java/, /python/, /config/, /test/]; +var exclude_dirs = /(node_modules|java|python|config|test)/; /** * A helper function to create the webpack config object to be sent to webpack module bundler. @@ -23,9 +23,9 @@ var exclude_dirs = [/node_modules/, /java/, /python/, /config/, /test/]; * @returns {Object} a webpack config object. */ export default function makeWebpackConfig(config) { - + // setting defaults - config.src = config.src || __dirname; + config.src = config.src || process.cwd(); config.firefly_root = config.firefly_root || path.resolve(config.src, '../..'); config.firefly_dir = config.firefly_dir || path.resolve(config.firefly_root, 'src/firefly'); config.project = config.project || path.resolve(config.src, '../../'); @@ -135,15 +135,19 @@ export default function makeWebpackConfig(config) { /*------------------------ MODULE -----------------------------*/ var loaders = [ { test : /\.(js|jsx)$/, - exclude: exclude_dirs, - loaders : ['babel-loader'] + include: [config.src, config.firefly_dir, + `${config.firefly_root}/node_modules/react-component-resizable/`], + loader: 'babel', + query: { + presets: ['es2015', 'react', 'stage-2'] + } }, { test : /\.css$/, exclude: exclude_dirs, loaders : [ 'style-loader', `css-loader?root=${path.resolve(config.firefly_dir, 'html')}`, - 'autoprefixer?browsers=last 2 version' + 'postcss-loader' ] }, { test: /\.(png|jpg|gif)$/, diff --git a/package.json b/package.json index 07f685c3a5..69eb4ad785 100644 --- a/package.json +++ b/package.json @@ -8,59 +8,58 @@ "url": "https://github.com/Caltech-IPAC/firefly.git" }, "dependencies": { - "babel": "5.8.34", + "babel-core": "6.14.0", + "babel-loader" : "6.2.5", + "babel-polyfill" : "6.13.0 ", + "babel-preset-es2015": "6.14.0", + "babel-preset-react": "6.11.1", + "babel-preset-stage-2": "6.13.0", + "babel-runtime" : "6.9.2", + "babel-plugin-react-transform": "2.0.2", "enum": "2.3.0", - "fixed-data-table": "0.6.0", - "history": "1.17.0", - "icepick": "0.2.0", + "fixed-data-table": "0.6.3", "isomorphic-fetch": "2.2.1", "local-storage": "1.4.2", "lodash": "4.6.1", "numeral": "1.5.3", - "react": "0.14.7", - "react-dom": "0.14.7", - "react-addons-pure-render-mixin": "0.14.7", - "react-addons-shallow-compare": "0.14.7", - "react-addons-update": "0.14.7", - "react-component-resizable": "0.3.0", - "react-grid-layout": "0.10.0-beta1", - "react-highcharts": "5.0.6", - "react-split-pane": "0.1.22", - "redux": "3.3.1", - "redux-thunk": "2.0.1", + "react": "15.3.1", + "react-dom": "15.3.1", + "react-addons-pure-render-mixin": "15.3.1", + "react-addons-shallow-compare": "15.3.1", + "react-addons-update": "15.3.1", + "react-addons-perf" : "15.3.1", + "react-component-resizable": "1.0.1", + "react-grid-layout": "0.13.3", + "react-highcharts": "10.0.0", + "react-split-pane": "0.1.44", + "redux": "3.5.2", + "redux-thunk": "2.1.0", "redux-logger": "2.6.1", - "redux-saga": "0.9.5", + "redux-saga": "0.11.1", "underscore.string": "3.2.3", "uniq": "1.0.1", "validator": "4.5.0", "whatwg-fetch": "0.10.1", - "react-color": "1.3.6", + "react-color": "2.2.6", "shallowequal": "0.2.2" }, "devDependencies": { - "autoprefixer": "^6.0.3", - "autoprefixer-loader": "^3.1.0", - "babel-eslint": "^4.1.3", - "babel-loader": "^5.3.2", - "babel-plugin-react-transform": "^1.1.0", - "babel-runtime" : "^5.8.20", + "postcss-loader": "^0.11.1", "css-loader" : "^0.19.0", - "eslint" : "^2.8.0", - "eslint-config-airbnb": "7.0.0", - "eslint-loader" : "^1.3.0", - "eslint-plugin-react": "^4.3.0", + "eslint" : "^3.4.0", + "eslint-loader" : "^1.5.0", + "eslint-plugin-react": "^6.2.0", "chai": "^2.3.0", "clean-webpack-plugin": "^0.1.3", "coveralls": "^2.11.2", "esprima-fb": "^14001.1.0-dev-harmony-fb", "extract-text-webpack-plugin": "^0.8.0", + "file-loader": "^0.9.0", "html-webpack-plugin": "^1.6.1", "istanbul": "^0.3.13", "istanbul-instrumenter-loader": "^0.1.2", - "jquery": "^2.1.3", - "jscs": "^1.12.0", "jsdoc": "^3.4.0", - "karma": "^0.13.9", + "karma": "^1.2.0", "karma-chai": "^0.1.0", "karma-cli": "0.0.4", "karma-coverage": "^0.2.7", @@ -69,12 +68,10 @@ "karma-phantomjs-launcher": "^0.1.4", "karma-sinon-chai": "^0.3.0", "karma-webpack": "^1.5.0", - "less": "^2.5.0", - "less-loader": "^2.2.0", "mocha": "^2.2.4", "publish-release": "^1.1.0", - "react-tools": "^0.13.1", - "redux-devtools": "^2.1.2", + "react-addons-test-utils": "15.3.1", + "redux-devtools": "^3.3.1", "request": "^2.65.0", "rewire": "^2.3.1", "rewire-webpack": "^1.0.0", @@ -83,8 +80,7 @@ "sinon-chai": "^2.7.0", "style-loader": "^0.12.3", "url-loader": "^0.5.7", - "webpack": "^1.8.2", - "react-addons-perf" : "0.14.7", + "webpack": "^1.13.2", "eslint-plugin-jsx-a11y": "^0.6.2", "jsdoc-jsx": "^0.1.0", "ink-docstrap" :"^1.2.1" diff --git a/src/fftools/webpack.config.js b/src/fftools/webpack.config.js index b9aafd4691..37ffd34fa6 100644 --- a/src/fftools/webpack.config.js +++ b/src/fftools/webpack.config.js @@ -1,10 +1,10 @@ /* eslint-env node */ -require('babel/register'); +require('babel-core/register')({presets: ['es2015']}); var path = require('path'); var firefly_root = path.resolve(__dirname, '../..'); var name = 'fftools'; var entry = {fflib: path.resolve(firefly_root, 'src/firefly/js/fireflyJSLib.js')}; -module.exports = require(firefly_root + '/buildScript/webpack.config.js')({firefly_root, name, entry, use_loader: false}); +module.exports = require(firefly_root + '/buildScript/webpack.config.js').default({firefly_root, name, entry, use_loader: false}); diff --git a/src/firefly/js/Firefly.js b/src/firefly/js/Firefly.js index bf246b107c..01d6826635 100644 --- a/src/firefly/js/Firefly.js +++ b/src/firefly/js/Firefly.js @@ -4,7 +4,7 @@ /*global __$version_tag*/ -import 'babel/polyfill'; +import 'babel-polyfill'; import 'isomorphic-fetch'; import React from 'react'; import 'styles/global.css'; diff --git a/src/firefly/js/charts/ui/Histogram.jsx b/src/firefly/js/charts/ui/Histogram.jsx index 71598fb190..9f79a7922c 100644 --- a/src/firefly/js/charts/ui/Histogram.jsx +++ b/src/firefly/js/charts/ui/Histogram.jsx @@ -3,7 +3,7 @@ */ import React, {PropTypes} from 'react'; -import ReactHighcharts from 'react-highcharts/bundle/highcharts'; +import ReactHighcharts from 'react-highcharts'; import numeral from 'numeral'; import {getFormatString} from '../../util/MathUtil.js'; import {logError} from '../../util/WebUtil.js'; diff --git a/src/firefly/js/charts/ui/XYPlot.jsx b/src/firefly/js/charts/ui/XYPlot.jsx index e8e0012fc4..f18ba74f3b 100644 --- a/src/firefly/js/charts/ui/XYPlot.jsx +++ b/src/firefly/js/charts/ui/XYPlot.jsx @@ -4,7 +4,7 @@ import {isUndefined, debounce, get, omit} from 'lodash'; import shallowequal from 'shallowequal'; import React, {PropTypes} from 'react'; -import ReactHighcharts from 'react-highcharts/bundle/highcharts'; +import ReactHighcharts from 'react-highcharts'; import {SelectInfo} from '../../tables/SelectInfo.js'; import {parseDecimateKey} from '../../tables/Decimate.js'; diff --git a/src/firefly/js/core/ReduxFlux.js b/src/firefly/js/core/ReduxFlux.js index 42a502d902..b2074aa44a 100644 --- a/src/firefly/js/core/ReduxFlux.js +++ b/src/firefly/js/core/ReduxFlux.js @@ -216,9 +216,11 @@ var logger= loggerMiddleware({duration:true, predicate:logFilter, collapsed:coll function createRedux() { // create a rootReducer from all of the registered reducers const rootReducer = combineReducers(reducers); - const middleWare= applyMiddleware(thunkMiddleware, /*logger,*/ createSagaMiddleware(masterSaga)); - - return createStore(rootReducer, middleWare); + const sagaMiddleware = createSagaMiddleware(); + const middleWare= applyMiddleware(thunkMiddleware, /*logger,*/ sagaMiddleware); + const store = createStore(rootReducer, middleWare); + sagaMiddleware.run(masterSaga); + return store; } function bootstrap() { diff --git a/src/firefly/js/tables/TablesCntlr.js b/src/firefly/js/tables/TablesCntlr.js index 30f4dab54b..a94e46a0a5 100644 --- a/src/firefly/js/tables/TablesCntlr.js +++ b/src/firefly/js/tables/TablesCntlr.js @@ -370,6 +370,10 @@ export function dispatchTblResultsAdded(tbl_id, title, options, removable, tbl_g title = title || tbl_id; tbl_group = tbl_group || 'main'; removable = isNil(removable) ? true : removable; + const pageSize = get(options, 'pageSize'); + if ( pageSize && !Number.isInteger(pageSize)) { + options.pageSize = parseInt(pageSize); + } flux.process( {type: TBL_RESULTS_ADDED, payload: {tbl_id, tbl_group, title, removable, tbl_ui_id, options}}); } diff --git a/src/firefly/js/tables/reducer/TableDataReducer.js b/src/firefly/js/tables/reducer/TableDataReducer.js index 3c58690d9d..5e4cd2da19 100644 --- a/src/firefly/js/tables/reducer/TableDataReducer.js +++ b/src/firefly/js/tables/reducer/TableDataReducer.js @@ -12,35 +12,44 @@ import {SelectInfo} from '../SelectInfo.js'; /*---------------------------- REDUCERS -----------------------------*/ export function dataReducer(state={data:{}}, action={}) { - const {tbl_id, selectInfo} = action.payload || {}; var root = state.data; switch (action.type) { case (Cntlr.TABLE_SELECT) : + { + const {tbl_id, selectInfo} = action.payload; if (selectInfo) { return updateSet(root, [tbl_id, 'selectInfo'], selectInfo); } else return root; - + } case (Cntlr.TABLE_LOADED) : + { + const {tbl_id} = action.payload; const statusPath = [tbl_id, 'tableMeta', 'Loading-Status']; if (get(root, statusPath, 'COMPLETED') !== 'COMPLETED') { return updateSet(root, statusPath, 'COMPLETED'); } else return root; - + } case (Cntlr.TABLE_HIGHLIGHT) : case (Cntlr.TABLE_UPDATE) : + { + const {tbl_id} = action.payload; return TblUtil.smartMerge(root, {[tbl_id] : {isFetching:false, ...action.payload}}); - + } case (Cntlr.TABLE_FETCH) : case (Cntlr.TABLE_FILTER) : case (Cntlr.TABLE_SORT) : case (Cntlr.TABLE_REPLACE) : + { + const {tbl_id} = action.payload || {}; const rowCount = action.payload.totalRows || get(action, 'payload.tableData.data.length', 0); const nTable = Object.assign({isFetching:false, selectInfo: SelectInfo.newInstance({rowCount}).data}, action.payload); return updateSet(root, [tbl_id], nTable); - + } case (Cntlr.TABLE_REMOVE) : + { + const {tbl_id} = action.payload; return omit(root, [tbl_id]); - + } default: return root; } diff --git a/src/firefly/js/tables/reducer/TableResultsReducer.js b/src/firefly/js/tables/reducer/TableResultsReducer.js index 6901c8671f..ab6e1b831f 100644 --- a/src/firefly/js/tables/reducer/TableResultsReducer.js +++ b/src/firefly/js/tables/reducer/TableResultsReducer.js @@ -13,19 +13,22 @@ import * as TblUtil from '../TableUtil.js'; export function resultsReducer(state={results:{}}, action={}) { var root = state.results; if (!action || !action.payload) return root; - const {tbl_id, tbl_group} = action.payload; switch (action.type) { case (Cntlr.TBL_RESULTS_ADDED) : case (Cntlr.TBL_RESULTS_UPDATE) : + { + const {tbl_id, tbl_group} = action.payload; if (tbl_id ) { const changes = set({}, [tbl_group, 'tables', tbl_id], action.payload); set(changes, [tbl_group, 'name'], tbl_group); return TblUtil.smartMerge(root, changes); } else return root; - + } case Cntlr.TBL_RESULTS_ACTIVE : + { + const {tbl_id, tbl_group} = action.payload; return updateSet(root, [tbl_group,'active'], tbl_id); - + } case (Cntlr.TABLE_REMOVE) : return removeTable(root, action); diff --git a/src/firefly/js/tables/reducer/TableUiReducer.js b/src/firefly/js/tables/reducer/TableUiReducer.js index d8476b825a..a7e2afc157 100644 --- a/src/firefly/js/tables/reducer/TableUiReducer.js +++ b/src/firefly/js/tables/reducer/TableUiReducer.js @@ -13,17 +13,20 @@ import * as TblUtil from '../TableUtil.js'; export function uiReducer(state={ui:{}}, action={}) { var root = state.ui; if (!action || !action.payload) return root; - const {tbl_ui_id, tbl_id} = action.payload; switch (action.type) { case (Cntlr.TBL_UI_UPDATE) : + { + const {tbl_ui_id, tbl_id} = action.payload; return updateAllUi(root, tbl_id, tbl_ui_id, action.payload); + } case (Cntlr.TABLE_REMOVE) : return removeTable(root, action); case (Cntlr.TBL_RESULTS_ADDED) : - const {options} = action.payload || {}; + { + const {tbl_ui_id, tbl_id, options} = action.payload; return Object.assign(root, {[tbl_ui_id]:{tbl_ui_id, tbl_id, ...options}}); - + } case (Cntlr.TABLE_FETCH) : case (Cntlr.TABLE_FILTER) : case (Cntlr.TABLE_SORT) : @@ -32,16 +35,19 @@ export function uiReducer(state={ui:{}}, action={}) { case (Cntlr.TABLE_SELECT) : case (Cntlr.TABLE_LOADED) : case (Cntlr.TABLE_HIGHLIGHT) : + { // state is in-progress(fresh) data.. use it to reduce ui state. + const {tbl_id} = action.payload; return uiStateReducer(root, get(state, ['data', tbl_id])); - + } case (Cntlr.TBL_UI_EXPANDED) : + { const {tbl_ui_id, tbl_id} = action.payload; const tbl_group = findKey(get(state, 'results'), (o) => { return has(o, ['tables', tbl_id]); }); return updateSet(root, 'expanded', {tbl_group, tbl_id, tbl_ui_id}); - + } default: return root; } @@ -69,7 +75,7 @@ function uiStateReducer(ui, tableModel) { const filterCount = filterInfo ? filterInfo.split(';').length : 0; const sortInfo = get(tableModel, 'request.sortInfo'); const showLoading = !TblUtil.isTableLoaded(tableModel); - const showMask = tableModel.isFetching; + const showMask = tableModel && tableModel.isFetching; var data = has(tableModel, 'tableData.data') ? tableModel.tableData.data.slice(startIdx, endIdx) : []; var tableRowCount = data.length; diff --git a/src/firefly/js/tables/ui/TablePanel.jsx b/src/firefly/js/tables/ui/TablePanel.jsx index 12eae57b65..531ed17a23 100644 --- a/src/firefly/js/tables/ui/TablePanel.jsx +++ b/src/firefly/js/tables/ui/TablePanel.jsx @@ -120,7 +120,7 @@ export class TablePanel extends Component { const {onTableChanged} = this.props; if (error) return
{error}
; - if (isEmpty(columns)) return
; + if (isEmpty(columns)) return
; const selectInfoCls = SelectInfo.newInstance(selectInfo, startIdx); const viewIcoStyle = 'tablepanel ' + (textView ? 'tableView' : 'textView'); diff --git a/src/firefly/js/templates/fireflyviewer/ResultsPanel.jsx b/src/firefly/js/templates/fireflyviewer/ResultsPanel.jsx index 3bded11362..4aee7c6603 100644 --- a/src/firefly/js/templates/fireflyviewer/ResultsPanel.jsx +++ b/src/firefly/js/templates/fireflyviewer/ResultsPanel.jsx @@ -13,7 +13,7 @@ import {LO_VIEW} from '../../core/LayoutCntlr.js'; const wrapperStyle = { flex: 'auto', display: 'flex', flexFlow: 'column', overflow: 'hidden'}; const eastWest = {east: {index: 0, defaultSize: '50%'}, west: {index: 1} }; const northSouth = {north: {index: 0, defaultSize: '50%'}, south: {index: 1} }; -const triView = {east: {index: 0}, west: {index: 1}, south: {index: 2, defaultSize: 'calc(100% - 300px)'}}; +const triView = {east: {index: 0, defaultSize: '50%'}, west: {index: 1}, south: {index: 2, defaultSize: 'calc(100% - 300px)'}}; const singleView = {center: {index: 0, defaultSize: '100%', resize: false}}; diff --git a/src/firefly/js/ui/Banner.jsx b/src/firefly/js/ui/Banner.jsx index 570ad5f3a3..efb690c752 100644 --- a/src/firefly/js/ui/Banner.jsx +++ b/src/firefly/js/ui/Banner.jsx @@ -24,8 +24,8 @@ function menu(menuComp) { function appIcon(icoSrc) { const src = icoSrc || FFTOOLS_ICO; return ( -
- +
+
); } diff --git a/src/firefly/js/ui/ExampleDialog.jsx b/src/firefly/js/ui/ExampleDialog.jsx index 7a1f3719f8..c068fb346a 100644 --- a/src/firefly/js/ui/ExampleDialog.jsx +++ b/src/firefly/js/ui/ExampleDialog.jsx @@ -11,7 +11,7 @@ import {CheckboxGroupInputField} from './CheckboxGroupInputField.jsx'; import {RadioGroupInputField} from './RadioGroupInputField.jsx'; import {ListBoxInputField} from './ListBoxInputField.jsx'; import {SuggestBoxInputField} from './SuggestBoxInputField.jsx'; -import Histogram from '../charts/ui/Histogram.jsx'; +import {Histogram} from '../charts/ui/Histogram.jsx'; import CompleteButton from './CompleteButton.jsx'; import {FieldGroup} from './FieldGroup.jsx'; import {dispatchMultiValueChange, dispatchRestoreDefaults} from '../fieldGroup/FieldGroupCntlr.js'; @@ -138,7 +138,7 @@ var AllTest = React.createClass({ -
+
- {React.Children.map(children,function(inChild) { - return ( -
- { inChild && React.cloneElement(inChild, {labelWidth})} -
- ); - })} -
- +
{elements}
); } diff --git a/src/firefly/js/ui/Menu.jsx b/src/firefly/js/ui/Menu.jsx index 580f6a16bd..b719450ec4 100644 --- a/src/firefly/js/ui/Menu.jsx +++ b/src/firefly/js/ui/Menu.jsx @@ -31,15 +31,15 @@ function handleAction (menuItem) { function makeMenuItem(menuItem, isSelected) { var clsname = 'menu__item' + (isSelected ? ' menu__item-selected' : ''); return ( - +
- +
-
- + +
{menuItem.label}
diff --git a/src/firefly/js/ui/RadioGroupInputFieldView.jsx b/src/firefly/js/ui/RadioGroupInputFieldView.jsx index 192a98ed45..aada35e42e 100644 --- a/src/firefly/js/ui/RadioGroupInputFieldView.jsx +++ b/src/firefly/js/ui/RadioGroupInputFieldView.jsx @@ -11,7 +11,6 @@ function makeOptions(options,alignment,fieldKey,value,onChange,tooltip) { title={tooltip} name={fieldKey} value={option.value} - defaultChecked={value===option.value} checked={value===option.value} onChange={onChange} /> {option.label} diff --git a/src/firefly/js/ui/panel/TabPanel.jsx b/src/firefly/js/ui/panel/TabPanel.jsx index 2403775dda..6a4895ac69 100644 --- a/src/firefly/js/ui/panel/TabPanel.jsx +++ b/src/firefly/js/ui/panel/TabPanel.jsx @@ -33,7 +33,7 @@ class TabsHeader extends Component { super(props); this.state = {widthPx: 0}; this.onResize = debounce((size) => { - if (size && size.width !== this.state.widthPx) { + if (size && size.width !== this.state.widthPx && !this.isUnmounted) { this.setState({widthPx: size.width}); } }, 100).bind(this); @@ -43,6 +43,10 @@ class TabsHeader extends Component { return sCompare(this, np, ns); } + componentWillUnmount() { + this.isUnmounted = true; + } + render() { const {widthPx} = this.state; const {children, resizable} = this.props; @@ -89,9 +93,14 @@ export class Tabs extends Component { return sCompare(this, np, ns); } + componentWillUnmount() { + this.isUnmounted = true; + } + + onSelect(index,id,name) { const {onTabSelect, componentKey} = this.props; - if (this.state.selectedIdx !== index) { + if (this.state.selectedIdx !== index && !this.isUnmounted) { if (componentKey) { dispatchComponentStateChange(componentKey, {selectedIdx: index}); } diff --git a/src/firefly/js/util/expr/__test__/Expression-test.js b/src/firefly/js/util/expr/__test__/Expression-test.js index 85db96d05f..72d2a89964 100644 --- a/src/firefly/js/util/expr/__test__/Expression-test.js +++ b/src/firefly/js/util/expr/__test__/Expression-test.js @@ -1,7 +1,7 @@ /*eslint-env node, mocha */ // to run: from firefly/src/firefly -// node ../../node_modules/mocha/bin/mocha js/util/expr/__test__/*test.js --compilers js:babel/register --requires ignore-styles +// node ../../node_modules/mocha/bin/mocha js/util/expr/__test__/*test.js --compilers js:babel-core/register --requires ignore-styles import {expect} from 'chai'; diff --git a/src/firefly/js/visualize/iv/ExpandedModeDisplay.jsx b/src/firefly/js/visualize/iv/ExpandedModeDisplay.jsx index 4a0b59ad6c..1eec9c10e7 100644 --- a/src/firefly/js/visualize/iv/ExpandedModeDisplay.jsx +++ b/src/firefly/js/visualize/iv/ExpandedModeDisplay.jsx @@ -22,12 +22,12 @@ export class ExpandedModeDisplay extends Component { componentWillUnmount() { if (this.removeListener) this.removeListener(); + this.isUnmounted = true; if (this.props.forceExpandedMode) { dispatchChangeExpandedMode(ExpandType.COLLAPSE); } } - componentDidMount() { this.removeListener= flux.addListener(() => this.storeUpdate()); if (this.props.forceExpandedMode) { @@ -36,12 +36,14 @@ export class ExpandedModeDisplay extends Component { } storeUpdate() { - const {state}= this; - const vr= visRoot(); - const mvR= getMultiViewRoot(); - - if (vr!==state.visRoot || mvR!=state.multiViewRoot) { - this.setState({visRoot:vr, multiViewRoot:mvR}); + if (!this.isUnmounted) { + const {state}= this; + const vr= visRoot(); + const mvR= getMultiViewRoot(); + + if (vr!==state.visRoot || mvR!=state.multiViewRoot) { + this.setState({visRoot:vr, multiViewRoot:mvR}); + } } } diff --git a/src/firefly/package.json b/src/firefly/package.json index b7550eebae..7926bd93fa 100644 --- a/src/firefly/package.json +++ b/src/firefly/package.json @@ -5,6 +5,6 @@ "lint" : "DO_LINT=true npm run build", "dev" : "DEBUG=true npm run build -- -w -d --no-color", "test-watch": "npm run build && node ../../node_modules/karma/bin/karma start --singleRun=false", - "test-unit": "node ../../node_modules/mocha/bin/mocha **/__test__/*test.js --compilers js:babel/register" + "test-unit": "node ../../node_modules/mocha/bin/mocha **/__test__/*test.js --compilers js:babel-core/register" } } diff --git a/src/firefly/webpack.config.js b/src/firefly/webpack.config.js index 595b7247f7..b68ac87488 100644 --- a/src/firefly/webpack.config.js +++ b/src/firefly/webpack.config.js @@ -1,10 +1,10 @@ /* eslint-env node */ -require('babel/register'); +require('babel-core/register')({presets: ['es2015', 'react', 'stage-2']}); var path = require('path'); var firefly_root = path.resolve(__dirname, '../..'); var name = 'firefly'; var entry = {firefly: path.resolve(firefly_root, 'src/firefly/js/FFEntryPoint.js')}; -module.exports = require(firefly_root + '/buildScript/webpack.config.js')({firefly_root, name, entry}); +module.exports = require(firefly_root + '/buildScript/webpack.config.js').default({firefly_root, name, entry}); From f026c990c1f6e4439f34704d8a4ea347ef7011d8 Mon Sep 17 00:00:00 2001 From: roby Date: Mon, 5 Sep 2016 15:07:05 -0700 Subject: [PATCH 2/4] DM-5276: cleaned up img tag so it will work with new version of react --- src/firefly/js/ui/PopupPanel.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/firefly/js/ui/PopupPanel.jsx b/src/firefly/js/ui/PopupPanel.jsx index c0494a3c68..d2e2af2ab9 100644 --- a/src/firefly/js/ui/PopupPanel.jsx +++ b/src/firefly/js/ui/PopupPanel.jsx @@ -10,7 +10,7 @@ import ReactDOM from 'react-dom'; import {getPopupPosition, humanStart, humanMove, humanStop } from './PopupPanelHelper.js'; import './PopupPanel.css'; -import DEL_ICO from 'html/images/blue_delete_10x10.gif'; +import DEL_ICO from 'html/images/blue_delete_10x10.png'; export const LayoutType= new Enum(['CENTER', 'TOP_EDGE_CENTER', 'TOP_CENTER', 'TOP_LEFT', 'TOP_RIGHT', 'NONE', 'USER_POSITION']); @@ -163,10 +163,10 @@ export var PopupPanel= React.createClass( {title} - +
From 7bf59b9ee89742899ab280a76462b5f6e3a4f84b Mon Sep 17 00:00:00 2001 From: roby Date: Mon, 5 Sep 2016 15:22:40 -0700 Subject: [PATCH 3/4] DM-5276: fixed ColorPicker to work with new version --- src/firefly/js/ui/ColorPicker.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/firefly/js/ui/ColorPicker.jsx b/src/firefly/js/ui/ColorPicker.jsx index 2ab9a7bdea..544e0285c5 100644 --- a/src/firefly/js/ui/ColorPicker.jsx +++ b/src/firefly/js/ui/ColorPicker.jsx @@ -7,7 +7,7 @@ import {dispatchShowDialog} from '../core/ComponentCntlr.js'; import {PopupPanel} from './PopupPanel.jsx'; import CompleteButton from './CompleteButton.jsx'; import DialogRootContainer from './DialogRootContainer.jsx'; -import ColorPicker from 'react-color'; +import {SketchPicker} from 'react-color'; @@ -26,7 +26,7 @@ var lastEv; function ColorPickerWrapper ({callback,color,callbackOnOKOnly, callbackOnBoth}) { return (
- { lastEv=ev; if (!callbackOnOKOnly) callback(ev, false); From 67b2b0c22c85e1b385339e6a682f10a0d4eb94f7 Mon Sep 17 00:00:00 2001 From: roby Date: Mon, 5 Sep 2016 15:36:18 -0700 Subject: [PATCH 4/4] DM-5276: fixed: function was not exported, seemd to work find with the old version of babel --- src/firefly/js/drawingLayers/NorthUpCompass.js | 13 +++---------- .../js/visualize/draw/DirectionArrowDrawObj.js | 2 +- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/src/firefly/js/drawingLayers/NorthUpCompass.js b/src/firefly/js/drawingLayers/NorthUpCompass.js index aaf2056acd..19ee47fb2d 100644 --- a/src/firefly/js/drawingLayers/NorthUpCompass.js +++ b/src/firefly/js/drawingLayers/NorthUpCompass.js @@ -2,20 +2,13 @@ * License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt */ -import DrawLayerCntlr from '../visualize/DrawLayerCntlr.js'; import ImagePlotCntlr, {visRoot,dispatchAttributeChange} from '../visualize/ImagePlotCntlr.js'; import {makeDrawingDef,Style, TextLocation} from '../visualize/draw/DrawingDef.js'; import DrawLayer, {ColorChangeType} from '../visualize/draw/DrawLayer.js'; -import {MouseState} from '../visualize/VisMouseSync.js'; -import {PlotAttribute} from '../visualize/WebPlot.js'; import CsysConverter from '../visualize/CsysConverter.js'; -import { makeOffsetPt, makeWorldPt, makeImagePt, makeViewPortPt,makeScreenPt} from '../visualize/Point.js'; -import BrowserInfo from '../util/BrowserInfo.js'; -import VisUtil from '../visualize/VisUtil.js'; -import ShapeDataObj from '../visualize/draw/ShapeDataObj.js'; +import { makeWorldPt, makeScreenPt} from '../visualize/Point.js'; import {primePlot, getPlotViewById} from '../visualize/PlotViewUtil.js'; import {makeFactoryDef} from '../visualize/draw/DrawLayerFactory.js'; -import {flux} from '../Firefly.js'; import {makeDirectionArrowDrawObj} from '../visualize/draw/DirectionArrowDrawObj.js'; const ID= 'NORTH_UP_COMPASS_TOOL'; @@ -91,8 +84,8 @@ function makeCompass(plotId, action){ return null; } - var dataN= makeDirectionArrowDrawObj(sptStart, spt2,"N"); - var dataE= makeDirectionArrowDrawObj(sptStart, sptE2,"E"); + var dataN= makeDirectionArrowDrawObj(sptStart, spt2,'N'); + var dataE= makeDirectionArrowDrawObj(sptStart, sptE2,'E'); //return Arrays.asList(new DrawObj[]{dataN, dataE}); // diff --git a/src/firefly/js/visualize/draw/DirectionArrowDrawObj.js b/src/firefly/js/visualize/draw/DirectionArrowDrawObj.js index b541d7e652..5201b50901 100644 --- a/src/firefly/js/visualize/draw/DirectionArrowDrawObj.js +++ b/src/firefly/js/visualize/draw/DirectionArrowDrawObj.js @@ -30,7 +30,7 @@ const DIR_ARROW_DRAW_OBJ= 'DirectionArrayDrawObj'; * @param text * @return {object} */ -function makeDirectionArrowDrawObj(startPt, endPt, text) { +export function makeDirectionArrowDrawObj(startPt, endPt, text) { if (!startPt || !endPt) return null; var obj= DrawObj.makeDrawObj();