Added code splitting to various high level components as well as fixi…

…ng references to material ui icons

.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,
   }
 }

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",

src/attributeView/__snapshots__/attributeView.container.test.js.snap

@@ -16,7 +16,7 @@ exports[`attributeView renders 1st tab correctly 1`] = `
       }
     }
   >
-    <Connect(WithTheme(AttributePlot))
+    <LoadableComponent
       attribute={Object {}}
     />
   </div>

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: () => <Typography>Loading...</Typography>,
+});
+
 class AttributeViewer extends React.Component {
   constructor(props) {
     super(props);
@@ -63,7 +70,7 @@ class AttributeViewer extends React.Component {
           onChangeIndex={this.handleChangeIndex}
         >
           <ArchiveTable attribute={attribute} />
-          <AttributePlot
+          <LoadableAttributePlot
             attribute={attribute}
             openPanels={this.props.openPanels}
           />
@@ -85,7 +92,7 @@ class AttributeViewer extends React.Component {
         <div style={{ height: 'calc(100% - 50px)' }}>
           {tabValue === 1 && <ArchiveTable attribute={attribute} />}
           {tabValue === 0 && (
-            <AttributePlot
+            <LoadableAttributePlot
               attribute={attribute}
               openPanels={this.props.openPanels}
             />

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: {

src/layout/block/__snapshots__/blockWidget.component.test.js.snap

@@ -33,21 +33,9 @@ exports[`BlockWidget block renders correctly 1`] = `
     <div
       className="BlockWidget-iconContents-8"
     >
-      <svg
-        height="100"
-        key="0"
-        width="100"
-      >
-        <circle
-          cx="50"
-          cy="50"
-          fill="red"
-          key="0"
-          r="40"
-          stroke="black"
-          strokeWidth="3"
-        />
-      </svg>
+      <LoadableComponent
+        icon="<svg height=\\"100\\" width=\\"100\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"40\\" stroke=\\"black\\" stroke-width=\\"3\\" fill=\\"red\\" /></svg>"
+      />
     </div>
     <div
       className="BlockWidget-outputPortsContainer-6"

src/layout/block/blockWidget.component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import renderHTML from 'react-render-html';
+import Loadable from 'react-loadable';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Paper from '@material-ui/core/Paper';
@@ -66,6 +66,14 @@ const styles = theme => ({
 
 const portHeight = 23;
 
+const LoadableBlockIcon = Loadable.Map({
+  loader: {
+    renderHTML: () => import('react-render-html'),
+  },
+  render: (loaded, props) => loaded.renderHTML(props.icon),
+  loading: () => <Typography>Loading...</Typography>,
+});
+
 const BlockWidget = props => {
   const inputPorts = Object.keys(props.node.ports).filter(
     p => props.node.ports[p].in
@@ -101,9 +109,9 @@ const BlockWidget = props => {
           ))}
         </div>
         <div className={props.classes.iconContents}>
-          {props.node.icon && props.node.icon !== '<svg/>'
-            ? renderHTML(props.node.icon)
-            : null}
+          {props.node.icon && props.node.icon !== '<svg/>' ? (
+            <LoadableBlockIcon icon={props.node.icon} />
+          ) : null}
         </div>
         <div className={props.classes.outputPortsContainer}>
           {outputPorts.map(p => (

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 {