From e0b3e11767815198a87afc4217106fae2f59696b Mon Sep 17 00:00:00 2001
From: james hadfield <jh22@sanger.ac.uk>
Date: Thu, 31 Jan 2019 19:58:02 +1300
Subject: [PATCH 1/3] Implmement code splitting using lazy loading

We now have basic code-splitting in place for a handful of components.
This means that (e.g.) the code for the main interactive page is not fetched
for display of the splash page. This reduces (initial) bundle sizes and should
make for quicker load time.
---
 babel.config.js                       |  3 +-
 index.html                            |  4 +-
 package-lock.json                     |  7 +++-
 package.json                          | 59 ++++++++++++++-------------
 src/actions/navigation.js             |  6 ++-
 src/components/datasetLoader/index.js | 31 ++++----------
 src/components/framework/spinner.js   | 15 +++++++
 src/components/main/index.js          | 22 ++++++++--
 src/root.js                           | 41 ++++++++++++++-----
 webpack.config.js                     |  7 ++--
 10 files changed, 118 insertions(+), 77 deletions(-)
 create mode 100644 src/components/framework/spinner.js

diff --git a/babel.config.js b/babel.config.js
index d40c7427a..e201dc72c 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -15,7 +15,8 @@ module.exports = function babelConfig(api) {
   const plugins = [
     ["@babel/plugin-proposal-decorators", { legacy: true }],
     "@babel/plugin-proposal-class-properties",
-    "babel-plugin-styled-components"
+    "babel-plugin-styled-components",
+    "babel-plugin-syntax-dynamic-import"
   ];
   if (api.env("development")) {
     if (process.env.BABEL_EXTENSION_PATH && !process.env.BABEL_EXTENSION_PATH.includes(__dirname)) {
diff --git a/index.html b/index.html
index fd07cea28..51edb2c96 100644
--- a/index.html
+++ b/index.html
@@ -12,8 +12,8 @@
     <div id='root'>
     </div>
 
-    <!-- asyncronously load the react bundle -->
-    <script async src="/dist/bundle.js"></script>
+    <!-- asyncronously load the (entry) react bundle -->
+    <script async src="/dist/auspice.bundle.js"></script>
 
     <!-- by placing this in the body, we mimic async ability
     This is important as sometimes unpkg takes 10s to return and, if in the header
diff --git a/package-lock.json b/package-lock.json
index e7ae1bdea..b9824c083 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "auspice",
-  "version": "1.35.0",
+  "version": "1.35.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2547,6 +2547,11 @@
         "lodash": "^4.17.10"
       }
     },
+    "babel-plugin-syntax-dynamic-import": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz",
+      "integrity": "sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo="
+    },
     "babel-polyfill": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
diff --git a/package.json b/package.json
index 17111128a..8166eeabb 100644
--- a/package.json
+++ b/package.json
@@ -31,15 +31,28 @@
     "build-docs": "./scripts/build-docs.sh"
   },
   "dependencies": {
+    "@babel/core": "^7.1.2",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-proposal-decorators": "^7.1.2",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-react": "^7.0.0",
     "argparse": "^1.0.10",
     "awesomplete": "^1.1.2",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.4",
+    "babel-plugin-strip-function-call": "^1.0.2",
     "babel-plugin-styled-components": "^1.8.0",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-polyfill": "^6.26.0",
     "binomial": "^0.2.0",
+    "chai": "^4.1.2",
+    "chai-http": "^4.0.0",
     "chalk": "^2.4.1",
     "color": "^0.7.3",
     "compression": "^1.7.3",
+    "compression-webpack-plugin": "^1.1.11",
     "create-react-class": "^15.6.0",
+    "css-loader": "^0.26.1",
     "d3-array": "^1.2.0",
     "d3-axis": "^1.0.6",
     "d3-brush": "^1.0.4",
@@ -56,19 +69,31 @@
     "d3-zoom": "^1.1.3",
     "docusaurus": "^1.6.2",
     "es6-object-assign": "^1.1.0",
+    "es6-promise": "~1.0.0",
     "es6-promise-polyfill": "^1.2.0",
+    "eslint": "^5.3.0",
+    "eslint-config-airbnb": "^15.1.0",
+    "eslint-config-defaults": "^7.0.1",
+    "eslint-plugin-filenames": "^0.1.2",
+    "eslint-plugin-import": "^2.13.0",
+    "eslint-plugin-jsx-a11y": "^5.1.1",
+    "eslint-plugin-react": "^7.2.1",
     "express": "^4.16.3",
     "express-naked-redirect": "^0.1.2",
     "express-static-gzip": "^0.2.2",
+    "file-loader": "^1.1.11",
+    "json-loader": "^0.5.1",
     "leaflet": "^1.2.0",
     "leaflet-image": "^0.4.0",
     "linspace": "^1.0.0",
     "lodash": "^4.17.10",
     "marked": "^0.5.0",
+    "mocha": "^5.2.0",
     "mousetrap": "^1.6.2",
     "node-fetch": "^2.1.2",
     "outer-product": "0.0.4",
     "papaparse": "^4.3.5",
+    "prettyjson": "^1.2.1",
     "prop-types": "^15.6.0",
     "query-string": "^4.2.3",
     "react": "^16.6.0",
@@ -80,43 +105,19 @@
     "react-select": "^1.0.0-rc.5",
     "react-tweet-embed": "^1.1.0",
     "redux": "^4.0.1",
+    "redux-devtools": "^3.4.1",
     "redux-thunk": "^2.3.0",
     "request": "^2.87.0",
-    "styled-components": "^4.0.3",
-    "whatwg-fetch": "^0.10.1",
-    "yaml-front-matter": "^4.0.0",
-    "@babel/core": "^7.1.2",
-    "@babel/plugin-proposal-decorators": "^7.1.2",
-    "@babel/preset-env": "^7.1.0",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.1.0",
-    "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.0.4",
-    "babel-plugin-strip-function-call": "^1.0.2",
-    "chai": "^4.1.2",
-    "chai-http": "^4.0.0",
-    "compression-webpack-plugin": "^1.1.11",
-    "css-loader": "^0.26.1",
-    "es6-promise": "~1.0.0",
-    "eslint": "^5.3.0",
-    "eslint-config-airbnb": "^15.1.0",
-    "eslint-config-defaults": "^7.0.1",
-    "eslint-plugin-filenames": "^0.1.2",
-    "eslint-plugin-import": "^2.13.0",
-    "eslint-plugin-jsx-a11y": "^5.1.1",
-    "eslint-plugin-react": "^7.2.1",
-    "file-loader": "^1.1.11",
-    "json-loader": "^0.5.1",
-    "mocha": "^5.2.0",
-    "prettyjson": "^1.2.1",
-    "redux-devtools": "^3.4.1",
     "rimraf": "^2.4.3",
     "run-sequence": "~0.3.6",
     "style-loader": "^0.13.2",
+    "styled-components": "^4.0.3",
     "webpack": "^4.16.5",
     "webpack-cli": "^3.1.2",
     "webpack-dev-middleware": "^3.1.3",
-    "webpack-hot-middleware": "^2.24.3"
+    "webpack-hot-middleware": "^2.24.3",
+    "whatwg-fetch": "^0.10.1",
+    "yaml-front-matter": "^4.0.0"
   },
   "devDependencies": {}
 }
diff --git a/src/actions/navigation.js b/src/actions/navigation.js
index 91f5739c6..569448073 100644
--- a/src/actions/navigation.js
+++ b/src/actions/navigation.js
@@ -1,8 +1,12 @@
 import queryString from "query-string";
 import { createStateFromQueryOrJSONs } from "./recomputeReduxState";
 import { PAGE_CHANGE, URL_QUERY_CHANGE_WITH_COMPUTED_STATE } from "./types";
-import { loadJSONs } from "./loadData";
 
+/* Given a URL, what "page" should be displayed?
+ * "page" means the main app, splash page, status page etc
+ * If in doubt, we go to the datasetLoader page as this will
+ * redirect to the splash page if the datasets are unavailable
+ */
 export const chooseDisplayComponentFromURL = (url) => {
   const parts = url.toLowerCase().replace(/^\/+/, "").replace(/\/+$/, "").split("/");
   if (
diff --git a/src/components/datasetLoader/index.js b/src/components/datasetLoader/index.js
index fd771be8b..9ab616d90 100644
--- a/src/components/datasetLoader/index.js
+++ b/src/components/datasetLoader/index.js
@@ -3,39 +3,22 @@ import { connect } from "react-redux";
 import { loadJSONs } from "../../actions/loadData";
 import { PAGE_CHANGE } from "../../actions/types";
 
-const nextstrainLogo = require("../../images/nextstrain-logo-small.png");
-
-export const Spinner = ({availableHeight}) => (
-  <img className={"spinner"} src={nextstrainLogo} alt="loading" style={{marginTop: `${availableHeight / 2 - 100}px`}}/>
-);
-
-@connect((state) => ({
-  browserDimensions: state.browserDimensions.browserDimensions,
-  metadataLoaded: state.metadata.loaded,
-  treeLoaded: state.tree.loaded
-}))
+/* The DatsetLoader component simply triggers the (async) loadJSONs action
+ * and then redirects to the "main" page (via a PAGE_CHANGE action).
+ * Note that if the loadJSONs action "fails" it will subsequently redirect to a 404 page
+ */
+@connect()
 class DatasetLoader extends React.Component {
   constructor(props) {
     super(props);
   }
   componentWillMount() {
     this.props.dispatch(loadJSONs()); // choose via URL
+    this.props.dispatch({type: PAGE_CHANGE, displayComponent: "main"});
   }
-  componentDidUpdate() {
-    if (this.props.metadataLoaded && this.props.treeLoaded) {
-      this.props.dispatch({
-        type: PAGE_CHANGE,
-        displayComponent: "main"
-      });
-    }
-  }
-
   render() {
-    return (
-      <Spinner availableHeight={this.props.browserDimensions.height}/>
-    );
+    return null;
   }
-
 }
 
 export default DatasetLoader;
diff --git a/src/components/framework/spinner.js b/src/components/framework/spinner.js
new file mode 100644
index 000000000..97c6cc3c6
--- /dev/null
+++ b/src/components/framework/spinner.js
@@ -0,0 +1,15 @@
+import React from "react";
+
+const nextstrainLogo = require("../../images/nextstrain-logo-small.png");
+
+const Spinner = ({availableHeight=false}) => {
+  if (!availableHeight) {
+    availableHeight = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight; // eslint-disable-line
+  }
+  const style = {
+    marginTop: `${availableHeight / 2 - 100}px`
+  };
+  return (<img className={"spinner"} src={nextstrainLogo} alt="loading" style={style}/>);
+};
+
+export default Spinner;
diff --git a/src/components/main/index.js b/src/components/main/index.js
index 99a66c85c..99a156d92 100644
--- a/src/components/main/index.js
+++ b/src/components/main/index.js
@@ -20,6 +20,7 @@ import { Sidebar } from "./sidebar";
 import { calcPanelDims, calcStyles } from "./utils";
 import { PanelsContainer, sidebarTheme } from "./styles";
 import ErrorBoundary from "../../util/errorBoundry";
+import Spinner from "../framework/spinner";
 
 @connect((state) => ({
   panelsToDisplay: state.controls.panelsToDisplay,
@@ -28,7 +29,9 @@ import ErrorBoundary from "../../util/errorBoundry";
   narrativeIsLoaded: state.narrative.loaded,
   narrativeTitle: state.narrative.title,
   browserDimensions: state.browserDimensions.browserDimensions,
-  frequenciesLoaded: state.frequencies.loaded
+  frequenciesLoaded: state.frequencies.loaded,
+  metadataLoaded: state.metadata.loaded,
+  treeLoaded: state.tree.loaded
 }))
 class Main extends React.Component {
   constructor(props) {
@@ -39,13 +42,22 @@ class Main extends React.Component {
       sidebarOpen: this.state.mql.matches,
       mobileDisplay: !this.state.mql.matches
     }));
-    this.state = {mql, sidebarOpen: mql.matches, mobileDisplay: !mql.matches};
+    this.state = {
+      mql,
+      sidebarOpen: mql.matches,
+      mobileDisplay: !mql.matches,
+      showSpinner: !(this.props.metadataLoaded && this.props.treeLoaded)
+    };
     analyticsNewPage();
   }
   static propTypes = {
     dispatch: PropTypes.func.isRequired
   }
   componentWillReceiveProps(nextProps) {
+    if (this.state.showSpinner && nextProps.metadataLoaded && nextProps.treeLoaded) {
+      this.setState({showSpinner: false});
+      return;
+    }
     if (
       (this.state.mql.matches) ||
       (nextProps.displayNarrative && !this.props.displayNarrative)
@@ -61,8 +73,10 @@ class Main extends React.Component {
     }, false);
   }
   render() {
-    const {availableWidth, availableHeight, sidebarWidth, overlayStyles} =
-      calcStyles(this.props.browserDimensions, this.props.displayNarrative, this.state.sidebarOpen, this.state.mobileDisplay);
+    if (this.state.showSpinner) {
+      return (<Spinner/>);
+    }
+    const {availableWidth, availableHeight, sidebarWidth, overlayStyles} = calcStyles(this.props.browserDimensions, this.props.displayNarrative, this.state.sidebarOpen, this.state.mobileDisplay);
     const overlayHandler = () => {this.setState({sidebarOpen: false});};
     const {big, chart} = calcPanelDims(this.props.panelLayout === "grid", this.props.panelsToDisplay, this.props.displayNarrative, availableWidth, availableHeight);
     return (
diff --git a/src/root.js b/src/root.js
index 8375050c3..0b927764a 100644
--- a/src/root.js
+++ b/src/root.js
@@ -1,23 +1,40 @@
-import React from "react";
+import React, { lazy, Suspense } from 'react';
 import { connect } from "react-redux";
 import { hot } from 'react-hot-loader';
-// import { AppContainer } from 'react-hot-loader';
 import Monitor from "./components/framework/monitor";
-import Main from "./components/main";
-import Splash from "./components/splash";
-import Status from "./components/status";
-import Notifications from "./components/notifications/notifications";
 import DatasetLoader from "./components/datasetLoader";
+import Spinner from "./components/framework/spinner";
+
+const Main = lazy(() => import("./components/main"));
+const Splash = lazy(() => import("./components/splash"));
+const Status = lazy(() => import("./components/status"));
+const Notifications = lazy(() => import("./components/notifications/notifications"));
 
 @connect((state) => ({displayComponent: state.general.displayComponent}))
 class MainComponentSwitch extends React.Component {
   render() {
     // console.log("MainComponentSwitch running (should be infrequent!)", this.props.displayComponent)
     switch (this.props.displayComponent) {
-      case "splash": return (<Splash/>);
-      case "datasetLoader": return (<DatasetLoader/>);
-      case "main" : return (<Main/>);
-      case "status" : return (<Status/>);
+      case "main":
+        return (
+          <Suspense fallback={<Spinner/>}>
+            <Main/>
+          </Suspense>
+        );
+      case "splash":
+        return (
+          <Suspense fallback={null}>
+            <Splash/>
+          </Suspense>
+        );
+      case "status":
+        return (
+          <Suspense fallback={<Spinner/>}>
+            <Status/>
+          </Suspense>
+        );
+      case "datasetLoader":
+        return (<DatasetLoader/>);
       default:
         console.error(`reduxStore.general.displayComponent is invalid (${this.props.displayComponent})`);
         return (<Splash/>);
@@ -29,7 +46,9 @@ const Root = () => {
   return (
     <div>
       <Monitor/>
-      <Notifications/>
+      <Suspense fallback={null}>
+        <Notifications/>
+      </Suspense>
       <MainComponentSwitch/>
     </div>
   );
diff --git a/webpack.config.js b/webpack.config.js
index 0425aa169..d02255a5c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -82,7 +82,8 @@ const generateConfig = ({extensionPath, devMode=false, customOutputPath}) => {
     entry,
     output: {
       path: outputPath,
-      filename: "bundle.js",
+      filename: "auspice.bundle.js",
+      chunkFilename: 'auspice.chunk.[name].bundle.js',
       publicPath: "/dist/"
     },
     resolve: {
@@ -118,9 +119,7 @@ const generateConfig = ({extensionPath, devMode=false, customOutputPath}) => {
     }
   };
 
-  if (devMode) {
-    config.devtool = 'cheap-module-source-map';
-  }
+  config.devtool = 'cheap-module-source-map';
 
   return config;
 };

From 1ba5563830bb0181f9ee778483cda533c21f570f Mon Sep 17 00:00:00 2001
From: james hadfield <jh22@sanger.ac.uk>
Date: Sun, 3 Feb 2019 08:27:22 +1300
Subject: [PATCH 2/3] allow bundle analysis at build stage

Useful for understanding bundle contents and making decisions on where to code split / lazy load.
---
 cli/build.js      | 3 ++-
 package.json      | 4 +++-
 webpack.config.js | 8 +++++++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/cli/build.js b/cli/build.js
index 1d5c58df3..fdde5dfcf 100644
--- a/cli/build.js
+++ b/cli/build.js
@@ -15,6 +15,7 @@ const addParser = (parser) => {
   subparser.addArgument('--extend', {action: "store", help: "extension config"});
   subparser.addArgument('--includeTiming', {action: "storeTrue", help: "keep timing functions (default: false for speed reasons)"});
   subparser.addArgument('--serverless', {action: "storeTrue", help: "e.g gh-pages"});
+  subparser.addArgument('--analyzeBundle', {action: "storeTrue", help: "Interactive bundle analyzer tool"});
 };
 
 const run = (args) => {
@@ -22,7 +23,7 @@ const run = (args) => {
   /* webpack set up */
   const extensionPath = args.extend ? path.resolve(args.extend) : undefined;
   const customOutputPath = utils.customOutputPath(args.extend);
-  const webpackConfig = generateWebpackConfig({extensionPath, devMode: false, customOutputPath});
+  const webpackConfig = generateWebpackConfig({extensionPath, devMode: false, customOutputPath, analyzeBundle: args.analyzeBundle});
   const compiler = webpack(webpackConfig);
 
   /* variables available to babel (which is called by webpack) */
diff --git a/package.json b/package.json
index 8166eeabb..a2a1a4545 100644
--- a/package.json
+++ b/package.json
@@ -119,5 +119,7 @@
     "whatwg-fetch": "^0.10.1",
     "yaml-front-matter": "^4.0.0"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "webpack-bundle-analyzer": "^3.0.3"
+  }
 }
diff --git a/webpack.config.js b/webpack.config.js
index d02255a5c..bab2dfe5e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -5,9 +5,10 @@ const CompressionPlugin = require('compression-webpack-plugin');
 const fs = require('fs');
 const utils = require('./cli/utils');
 
+
 /* Webpack config generator */
 
-const generateConfig = ({extensionPath, devMode=false, customOutputPath}) => {
+const generateConfig = ({extensionPath, devMode=false, customOutputPath, analyzeBundle=false}) => {
   utils.verbose(`Generating webpack config. Extensions? ${!!extensionPath}. devMode: ${devMode}`);
 
   /* which directories should be parsed by babel and other loaders? */
@@ -57,6 +58,11 @@ const generateConfig = ({extensionPath, devMode=false, customOutputPath}) => {
     pluginCompress
   ];
 
+  if (analyzeBundle) {
+    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; // eslint-disable-line
+    plugins.push(new BundleAnalyzerPlugin());
+  }
+
   const entry = [
     "babel-polyfill",
     "./src/index"

From e14316e7cb9ade6d3c6b06f6f7e1c97946a4a4bc Mon Sep 17 00:00:00 2001
From: james hadfield <jh22@sanger.ac.uk>
Date: Mon, 4 Feb 2019 12:48:17 +1300
Subject: [PATCH 3/3] lazily load entropy & frequency panel

Lazily loading these components means they won't be fetched & displayed until after the main page has rendered. This allows the tree & map to appear faster than previously (smaller bundle to fetch & less JS to parse and render).
---
 src/components/entropy/index.js     |  5 +++--
 src/components/frequencies/index.js |  4 +++-
 src/components/main/index.js        | 22 +++++++++++++++++-----
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/components/entropy/index.js b/src/components/entropy/index.js
index a02152140..c08bb38ab 100644
--- a/src/components/entropy/index.js
+++ b/src/components/entropy/index.js
@@ -73,8 +73,7 @@ const constructEncodedGenotype = (mutType, d) => {
     narrativeMode: state.narrative.display
   };
 })
-
-export class Entropy extends React.Component {
+class Entropy extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -288,3 +287,5 @@ export class Entropy extends React.Component {
     );
   }
 }
+
+export default Entropy;
diff --git a/src/components/frequencies/index.js b/src/components/frequencies/index.js
index 5cb3dd885..a0c6ddcbb 100644
--- a/src/components/frequencies/index.js
+++ b/src/components/frequencies/index.js
@@ -19,7 +19,7 @@ import "../../css/entropy.css";
     colorOptions: state.metadata.colorOptions
   };
 })
-export class Frequencies extends React.Component {
+class Frequencies extends React.Component {
   constructor(props) {
     super(props);
     this.state = {maxY: 0};
@@ -114,3 +114,5 @@ export class Frequencies extends React.Component {
     );
   }
 }
+
+export default Frequencies;
diff --git a/src/components/main/index.js b/src/components/main/index.js
index 99a156d92..9e4ebcd47 100644
--- a/src/components/main/index.js
+++ b/src/components/main/index.js
@@ -1,10 +1,8 @@
-import React from "react";
+import React, {lazy, Suspense } from "react";
 import PropTypes from 'prop-types';
 import { connect } from "react-redux";
 import { ThemeProvider } from 'styled-components';
 import SidebarToggle from "../framework/sidebar-toggle";
-import { Frequencies } from "../frequencies";
-import { Entropy } from "../entropy";
 import Info from "../info/info";
 import Tree from "../tree";
 import Map from "../map/map";
@@ -22,6 +20,10 @@ import { PanelsContainer, sidebarTheme } from "./styles";
 import ErrorBoundary from "../../util/errorBoundry";
 import Spinner from "../framework/spinner";
 
+const Entropy = lazy(() => import("../entropy"));
+const Frequencies = lazy(() => import("../frequencies"));
+
+
 @connect((state) => ({
   panelsToDisplay: state.controls.panelsToDisplay,
   panelLayout: state.controls.panelLayout,
@@ -107,8 +109,18 @@ class Main extends React.Component {
           {this.props.displayNarrative ? null : <Info width={calcUsableWidth(availableWidth, 1)} />}
           {this.props.panelsToDisplay.includes("tree") ? <Tree width={big.width} height={big.height} /> : null}
           {this.props.panelsToDisplay.includes("map") ? <Map width={big.width} height={big.height} justGotNewDatasetRenderNewMap={false} /> : null}
-          {this.props.panelsToDisplay.includes("entropy") ? <Entropy width={chart.width} height={chart.height} /> : null}
-          {this.props.panelsToDisplay.includes("frequencies") && this.props.frequenciesLoaded ? <Frequencies width={chart.width} height={chart.height} /> : null}
+          {this.props.panelsToDisplay.includes("entropy") ?
+            (<Suspense fallback={null}>
+              <Entropy width={chart.width} height={chart.height} />
+            </Suspense>) :
+            null
+          }
+          {this.props.panelsToDisplay.includes("frequencies") && this.props.frequenciesLoaded ?
+            (<Suspense fallback={null}>
+              <Frequencies width={chart.width} height={chart.height} />
+            </Suspense>) :
+            null
+          }
           {this.props.displayNarrative ? null : <Footer width={calcUsableWidth(availableWidth, 1)} />}
         </PanelsContainer>
         {/* overlay (used for mobile to open / close sidebar) */}