From ba508f6b9fcdbdeef508ad43193086af47258f52 Mon Sep 17 00:00:00 2001 From: Ray Millward Date: Mon, 3 Sep 2018 10:51:47 +0100 Subject: [PATCH] Added code splitting to various high level components as well as fixing references to material ui icons --- .eslintrc.js | 4 +- package-lock.json | 101 ++++++++++++++++-- package.json | 6 +- .../attributeView.container.test.js.snap | 2 +- src/attributeView/attributeView.container.js | 13 ++- .../fieldsLoading/fieldsLoading.component.js | 2 +- .../blockWidget.component.test.js.snap | 18 +--- src/layout/block/blockWidget.component.js | 16 ++- src/malcolm/actions/autoLayout.action.js | 70 ++++++------ .../attributeAlarm.component.js | 13 ++- .../attributeSelector.component.js | 2 +- src/malcolmWidgets/table/table.component.js | 2 +- src/navbar/navcontrol.component.js | 2 +- 13 files changed, 176 insertions(+), 75 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 2e162fc8..bbeae4c4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,4 +1,5 @@ module.exports = { + "parser": "babel-eslint", 'env': { 'browser': true, 'jest': true, @@ -25,6 +26,7 @@ module.exports = { 'parserOptions': { 'ecmaFeatures': { 'jsx': true, - } + }, + "allowImportExportEverywhere": true, } } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index d6a036de..5b98a753 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2532,14 +2532,25 @@ } }, "babel-eslint": { - "version": "7.2.3", - "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-7.2.3.tgz", - "integrity": "sha1-sv4tgBJkcPXBlELcdXJTqJdxCCc=", + "version": "8.2.6", + "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-8.2.6.tgz", + "integrity": "sha512-aCdHjhzcILdP8c9lej7hvXKvQieyRt20SF102SIGyY4cUIiw6UaAtK4j2o3dXX74jEmy0TJ0CEhv4fTIM3SzcA==", + "dev": true, "requires": { - "babel-code-frame": "6.26.0", - "babel-traverse": "6.26.0", - "babel-types": "6.26.0", - "babylon": "6.18.0" + "@babel/code-frame": "7.0.0-beta.44", + "@babel/traverse": "7.0.0-beta.44", + "@babel/types": "7.0.0-beta.44", + "babylon": "7.0.0-beta.44", + "eslint-scope": "3.7.1", + "eslint-visitor-keys": "1.0.0" + }, + "dependencies": { + "babylon": { + "version": "7.0.0-beta.44", + "resolved": "http://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.44.tgz", + "integrity": "sha512-5Hlm13BJVAioCHpImtFqNOF2H3ieTOHd0fmFGMxOJ9jgeFqeAwsv3u5P5cR7CSeFrkgHsT19DgFJkHV0/Mcd8g==", + "dev": true + } } }, "babel-generator": { @@ -4391,6 +4402,12 @@ "node-int64": "0.4.0" } }, + "btoa": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz", + "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==", + "dev": true + }, "buble": { "version": "0.19.3", "resolved": "https://registry.npmjs.org/buble/-/buble-0.19.3.tgz", @@ -6842,6 +6859,12 @@ "buffer-indexof": "1.1.1" } }, + "docopt": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/docopt/-/docopt-0.6.2.tgz", + "integrity": "sha1-so6eIiDaXsSffqW7JKR3h0Be6xE=", + "dev": true + }, "doctrine": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", @@ -7846,6 +7869,12 @@ "estraverse": "4.2.0" } }, + "eslint-visitor-keys": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz", + "integrity": "sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ==", + "dev": true + }, "espree": { "version": "3.5.4", "resolved": "https://registry.npmjs.org/espree/-/espree-3.5.4.tgz", @@ -17892,6 +17921,14 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.2.tgz", "integrity": "sha512-pbZOSMVVkvppW7XRn9fcHK5OgEDnYLwMva7P6TgS44/SN9uGGjfh3Z1c8tomO+y4IsHQ6Fsz2EGwmE7sMeNZgQ==" }, + "react-loadable": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/react-loadable/-/react-loadable-5.5.0.tgz", + "integrity": "sha512-C8Aui0ZpMd4KokxRdVAm2bQtI03k2RMRNzOB+IipV3yxFTSVICv7WoUr5L9ALB5BmKO1iHgZtWM8EvYG83otdg==", + "requires": { + "prop-types": "15.6.1" + } + }, "react-modal": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.4.1.tgz", @@ -18045,6 +18082,17 @@ "whatwg-fetch": "2.0.3" }, "dependencies": { + "babel-eslint": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-7.2.3.tgz", + "integrity": "sha1-sv4tgBJkcPXBlELcdXJTqJdxCCc=", + "requires": { + "babel-code-frame": "6.26.0", + "babel-traverse": "6.26.0", + "babel-types": "6.26.0", + "babylon": "6.18.0" + } + }, "doctrine": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz", @@ -20058,6 +20106,45 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" }, + "source-map-explorer": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/source-map-explorer/-/source-map-explorer-1.6.0.tgz", + "integrity": "sha512-Om4L02wExk1tWZ2KJqW7A/gadFoU6/6vuPUOiYyeMCtkQqhexTod6Pi6aCQ6HiIEd7ZSbiOOPgIrG6bn/72foQ==", + "dev": true, + "requires": { + "btoa": "1.2.1", + "convert-source-map": "1.5.1", + "docopt": "0.6.2", + "glob": "7.1.2", + "opn": "5.3.0", + "source-map": "0.5.7", + "temp": "0.8.3", + "underscore": "1.9.1" + }, + "dependencies": { + "opn": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/opn/-/opn-5.3.0.tgz", + "integrity": "sha512-bYJHo/LOmoTd+pfiYhfZDnf9zekVJrY+cnS2a5F2x+w5ppvTqObojTP7WiFG+kVZs9Inw+qQ/lw7TroWwhdd2g==", + "dev": true, + "requires": { + "is-wsl": "1.1.0" + } + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true + }, + "underscore": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.9.1.tgz", + "integrity": "sha512-5/4etnCkd9c8gwgowi5/om/mYO5ajCaOgdzj/oW+0eQV9WxKBDZw5+ycmKmeaTXjInS/W0BzpGLo2xR2aBwZdg==", + "dev": true + } + } + }, "source-map-resolve": { "version": "0.5.1", "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.1.tgz", diff --git a/package.json b/package.json index d733aacf..c77c1ccf 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "react": "^16.3.2", "react-dom": "^16.3.2", "react-json-editor-ajrm": "^2.5.1", + "react-loadable": "^5.5.0", "react-plotly.js": "^2.2.0", "react-redux": "^5.0.7", "react-render-html": "^0.6.0", @@ -93,10 +94,12 @@ "config:dev": "node ./continuous_integration/update_settings.js dev", "config:prod": "node ./continuous_integration/update_settings.js prod", "cy:screenshots": "cypress open --config integrationFolder=cypress/automated_screenshots", - "screenshots:smg": "start-server-and-test e2e:serve http://localhost:3030 cy:screenshots" + "screenshots:smg": "start-server-and-test e2e:serve http://localhost:3030 cy:screenshots", + "analyze": "source-map-explorer build/static/js/main.*" }, "devDependencies": { "babel-core": "^6.26.0", + "babel-eslint": "^8.2.6", "concurrently": "^3.5.1", "coveralls": "^3.0.0", "cross-env": "^5.2.0", @@ -117,6 +120,7 @@ "q-i": "^2.0.1", "react-app-rewired": "^1.5.2", "react-test-renderer": "^16.3.2", + "source-map-explorer": "^1.6.0", "start-server-and-test": "^1.4.1", "storybook": "^1.0.0", "stylelint": "^9.2.0", diff --git a/src/attributeView/__snapshots__/attributeView.container.test.js.snap b/src/attributeView/__snapshots__/attributeView.container.test.js.snap index 9a9fa700..d3937890 100644 --- a/src/attributeView/__snapshots__/attributeView.container.test.js.snap +++ b/src/attributeView/__snapshots__/attributeView.container.test.js.snap @@ -16,7 +16,7 @@ exports[`attributeView renders 1st tab correctly 1`] = ` } } > - diff --git a/src/attributeView/attributeView.container.js b/src/attributeView/attributeView.container.js index 4cc84234..0cfe2425 100644 --- a/src/attributeView/attributeView.container.js +++ b/src/attributeView/attributeView.container.js @@ -4,13 +4,20 @@ import PropTypes from 'prop-types'; import { withTheme } from '@material-ui/core/styles'; import Tabs from '@material-ui/core/Tabs'; import Tab from '@material-ui/core/Tab'; +import { Typography } from '@material-ui/core'; import SwipeableViews from 'react-swipeable-views'; +import Loadable from 'react-loadable'; import blockUtils from '../malcolm/blockUtils'; import ArchiveTable from './archiveTable.container'; -import AttributePlot from './attributePlot.component'; +// import AttributePlot from './attributePlot.component'; // import { malcolmTypes } from '../malcolmWidgets/attributeDetails/attributeSelector/attributeSelector.component'; +const LoadableAttributePlot = Loadable({ + loader: () => import('./attributePlot.component'), + loading: () => Loading..., +}); + class AttributeViewer extends React.Component { constructor(props) { super(props); @@ -63,7 +70,7 @@ class AttributeViewer extends React.Component { onChangeIndex={this.handleChangeIndex} > - @@ -85,7 +92,7 @@ class AttributeViewer extends React.Component {
{tabValue === 1 && } {tabValue === 0 && ( - diff --git a/src/blockDetails/fieldsLoading/fieldsLoading.component.js b/src/blockDetails/fieldsLoading/fieldsLoading.component.js index f43d0cfc..9d5275a5 100644 --- a/src/blockDetails/fieldsLoading/fieldsLoading.component.js +++ b/src/blockDetails/fieldsLoading/fieldsLoading.component.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; import CircularProgress from '@material-ui/core/CircularProgress'; import Typography from '@material-ui/core/Typography'; -import { CheckCircle } from '@material-ui/icons'; +import CheckCircle from '@material-ui/icons/CheckCircle'; const styles = () => ({ loadingRow: { diff --git a/src/layout/block/__snapshots__/blockWidget.component.test.js.snap b/src/layout/block/__snapshots__/blockWidget.component.test.js.snap index 7d40c3cf..7e870919 100644 --- a/src/layout/block/__snapshots__/blockWidget.component.test.js.snap +++ b/src/layout/block/__snapshots__/blockWidget.component.test.js.snap @@ -33,21 +33,9 @@ exports[`BlockWidget block renders correctly 1`] = `
- - - + " + />
({ const portHeight = 23; +const LoadableBlockIcon = Loadable.Map({ + loader: { + renderHTML: () => import('react-render-html'), + }, + render: (loaded, props) => loaded.renderHTML(props.icon), + loading: () => Loading..., +}); + const BlockWidget = props => { const inputPorts = Object.keys(props.node.ports).filter( p => props.node.ports[p].in @@ -101,9 +109,9 @@ const BlockWidget = props => { ))}
- {props.node.icon && props.node.icon !== '' - ? renderHTML(props.node.icon) - : null} + {props.node.icon && props.node.icon !== '' ? ( + + ) : null}
{outputPorts.map(p => ( diff --git a/src/malcolm/actions/autoLayout.action.js b/src/malcolm/actions/autoLayout.action.js index 41cf659e..1a3241ac 100644 --- a/src/malcolm/actions/autoLayout.action.js +++ b/src/malcolm/actions/autoLayout.action.js @@ -1,5 +1,4 @@ /* eslint no-console: ["error", { allow: ["info", "error"] }] */ -import ELK from 'elkjs/lib/elk.bundled'; import { malcolmPutAction, malcolmSetFlag } from '../malcolmActionCreators'; const calculateHeight = (layoutEngine, mri) => { @@ -58,39 +57,46 @@ const runAutoLayout = () => (dispatch, getState) => { `Graph can be visualised at https://rtsys.informatik.uni-kiel.de/elklive/json.html` ); - const elk = new ELK(); - return elk - .layout(graph) - .then(graphLayout => { - const centerX = - graphLayout.children.reduce((prev, next) => prev + next.x, 0) / - graphLayout.children.length; - const centerY = - graphLayout.children.reduce((prev, next) => prev + next.y, 0) / - graphLayout.children.length; + return ( + import('elkjs/lib/elk.bundled') + .then(ELK => new ELK().layout(graph)) + // return elk + // .layout(graph) + .then(graphLayout => { + const centerX = + graphLayout.children.reduce((prev, next) => prev + next.x, 0) / + graphLayout.children.length; + const centerY = + graphLayout.children.reduce((prev, next) => prev + next.y, 0) / + graphLayout.children.length; - // we only need to send an update for the visible blocks - const updatedLayout = { - name: blocks.map(b => b.name), - visible: blocks.map(b => b.visible), - mri: blocks.map(b => b.mri), - x: blocks - .map(b => b.mri) - .map(mri => graphLayout.children.find(c => c.id === mri).x - centerX), - y: blocks - .map(b => b.mri) - .map(mri => graphLayout.children.find(c => c.id === mri).y - centerY), - }; + // we only need to send an update for the visible blocks + const updatedLayout = { + name: blocks.map(b => b.name), + visible: blocks.map(b => b.visible), + mri: blocks.map(b => b.mri), + x: blocks + .map(b => b.mri) + .map( + mri => graphLayout.children.find(c => c.id === mri).x - centerX + ), + y: blocks + .map(b => b.mri) + .map( + mri => graphLayout.children.find(c => c.id === mri).y - centerY + ), + }; - dispatch(malcolmSetFlag([parentBlock, mainAttribute], 'pending', true)); - dispatch( - malcolmPutAction([parentBlock, mainAttribute, 'value'], updatedLayout) - ); - }) - .catch(err => { - console.error('error creating auto layout'); - console.error(err); - }); + dispatch(malcolmSetFlag([parentBlock, mainAttribute], 'pending', true)); + dispatch( + malcolmPutAction([parentBlock, mainAttribute, 'value'], updatedLayout) + ); + }) + .catch(err => { + console.error('error creating auto layout'); + console.error(err); + }) + ); }; export default { diff --git a/src/malcolmWidgets/attributeDetails/attributeAlarm/attributeAlarm.component.js b/src/malcolmWidgets/attributeDetails/attributeAlarm/attributeAlarm.component.js index 05ef68d5..964542de 100644 --- a/src/malcolmWidgets/attributeDetails/attributeAlarm/attributeAlarm.component.js +++ b/src/malcolmWidgets/attributeDetails/attributeAlarm/attributeAlarm.component.js @@ -1,12 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { - Warning, - Error, - InfoOutline, - HighlightOff, - Edit, -} from '@material-ui/icons'; +import Warning from '@material-ui/icons/Warning'; +import Error from '@material-ui/icons/Error'; +import InfoOutline from '@material-ui/icons/InfoOutline'; +import HighlightOff from '@material-ui/icons/HighlightOff'; +import Edit from '@material-ui/icons/Edit'; + import CircularProgress from '@material-ui/core/CircularProgress'; import { withTheme } from '@material-ui/core/styles/index'; import EditError from './EditError.component'; diff --git a/src/malcolmWidgets/attributeDetails/attributeSelector/attributeSelector.component.js b/src/malcolmWidgets/attributeDetails/attributeSelector/attributeSelector.component.js index 7437c253..ddb48e08 100644 --- a/src/malcolmWidgets/attributeDetails/attributeSelector/attributeSelector.component.js +++ b/src/malcolmWidgets/attributeDetails/attributeSelector/attributeSelector.component.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withTheme } from '@material-ui/core/styles'; -import { BugReport } from '@material-ui/icons'; +import BugReport from '@material-ui/icons/BugReport'; import { connect } from 'react-redux'; import WidgetLED from '../../led/widgetLED.component'; import WidgetCheckbox from '../../checkbox/checkbox.component'; diff --git a/src/malcolmWidgets/table/table.component.js b/src/malcolmWidgets/table/table.component.js index b67aef09..e9c9620b 100644 --- a/src/malcolmWidgets/table/table.component.js +++ b/src/malcolmWidgets/table/table.component.js @@ -6,7 +6,7 @@ import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; import { emphasize } from '@material-ui/core/styles/colorManipulator'; import IconButton from '@material-ui/core/IconButton'; -import { Add } from '@material-ui/icons'; +import Add from '@material-ui/icons/Add'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; import TableCell from '@material-ui/core/TableCell'; diff --git a/src/navbar/navcontrol.component.js b/src/navbar/navcontrol.component.js index 7a7d6525..2bf2d70a 100644 --- a/src/navbar/navcontrol.component.js +++ b/src/navbar/navcontrol.component.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import IconButton from '@material-ui/core/IconButton'; -import { KeyboardArrowDown } from '@material-ui/icons'; +import KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown'; import Menu from '@material-ui/core/Menu'; import MenuItem from '@material-ui/core/MenuItem';