Feat/reduce bundle size

package.json

@@ -4,15 +4,14 @@
     "private": true,
     "dependencies": {
         "@testing-library/jest-dom": "^4.2.4",
-        "@testing-library/react": "^9.3.2",
+        "@testing-library/react": "^10.4.4",
         "@testing-library/user-event": "^7.1.2",
         "jest-canvas-mock": "^2.2.0",
         "plotly.js-gl3d-dist-min": "^1.54.2",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
         "react-ga": "^3.0.0",
         "react-icons": "^3.10.0",
-        "react-markdown": "^4.3.1",
         "react-plotly.js": "^2.4.0",
         "react-router-dom": "^5.2.0",
         "react-scripts": "3.4.1",
@@ -22,7 +21,8 @@
         "analyze": "source-map-explorer 'build/static/js/*.js'",
         "start": "react-scripts start",
         "build": "react-scripts build",
-        "test": "react-scripts test",
+        "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
+        "test:coverage": "react-scripts test --env=jest-environment-jsdom-sixteen --collectCoverage --watchAll=false",
         "eject": "react-scripts eject"
     },
     "eslintConfig": {
@@ -41,6 +41,15 @@
         ]
     },
     "devDependencies": {
+        "jest-environment-jsdom-sixteen": "^1.0.3",
         "prettier": "2.0.5"
+    },
+    "jest": {
+        "collectCoverageFrom": [
+            "src/{components,hexapod}/**/*.{js,jsx,ts,tsx}",
+            "src/loadables.js",
+            "src/App.js",
+            "src/routes.js"
+        ]
     }
 }

src/App.js

@@ -1,186 +1,40 @@
-import React from "react"
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
-import ReactGA from "react-ga"
-import { VirtualHexapod, getNewPlotParams } from "./hexapod"
-import * as defaults from "./templates"
-import { SECTION_NAMES, PATHS } from "./components/vars"
-import { Nav, NavDetailed, HexapodPlot, DimensionsWidget } from "./components"
-import {
-    ForwardKinematicsPage,
-    InverseKinematicsPage,
-    LandingPage,
-    LegPatternPage,
-    WalkingGaitsPage,
-} from "./components/pages"
+import React, { useEffect } from "react"
+import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom"
+import { VirtualHexapod } from "./hexapod"
+import { PATH_LINKS } from "./components/vars"
+import { Nav } from "./components"
 
-ReactGA.initialize("UA-170794768-1", {
-    //debug: true,
-    //testMode: process.env.NODE_ENV === 'test',
-    gaOptions: { siteSpeedSampleRate: 100 },
-})
+import Routes from "./routes"
+import { HandlersProvider } from "./components/providers/Handlers"
+import { HexapodParamsProvider } from "./components/providers/HexapodParams"
 
-class App extends React.Component {
-    state = {
-        currentPage: SECTION_NAMES.LandingPage,
-        inHexapodPage: false,
+import { useHexapodParams } from "./components/hooks/useHexapodParams"
+import { usePlot } from "./components/hooks/usePlot"
 
-        hexapodParams: {
-            dimensions: defaults.DEFAULT_DIMENSIONS,
-            pose: defaults.DEFAULT_POSE,
-        },
+function App() {
+    const { hexapodParams, ...handlers } = useHexapodParams()
+    const { plot, updatePlotWithHexapod, logCameraView } = usePlot()
 
-        plot: {
-            data: defaults.DATA,
-            layout: defaults.LAYOUT,
-            latestCameraView: defaults.CAMERA_VIEW,
-            revisionCounter: 0,
-        },
-    }
+    useEffect(() => {
+        const hexapod = new VirtualHexapod(hexapodParams.dimensions, hexapodParams.pose)
+        updatePlotWithHexapod(hexapod)
+    }, [hexapodParams, updatePlotWithHexapod])
 
-    /* * * * * * * * * * * * * *
-     * Handle page load
-     * * * * * * * * * * * * * */
-
-    onPageLoad = pageName => {
-        ReactGA.pageview(window.location.pathname + window.location.search)
-        this.setState({ currentPage: pageName })
-
-        if (pageName === SECTION_NAMES.landingPage) {
-            this.setState({ inHexapodPage: false })
-            return
-        }
-
-        this.setState({
-            inHexapodPage: true,
-            hexapodParams: { ...this.state.hexapodParams, pose: defaults.DEFAULT_POSE },
-        })
-
-        this.updatePlot(this.state.hexapodParams.dimensions, defaults.DEFAULT_POSE)
-    }
-
-    /* * * * * * * * * * * * * *
-     * Handle plot update
-     * * * * * * * * * * * * * */
-
-    updatePlotWithHexapod = hexapod => {
-        if (hexapod === null || hexapod === undefined || !hexapod.foundSolution) {
-            return
-        }
-
-        const [data, layout] = getNewPlotParams(hexapod, this.state.plot.latestCameraView)
-        this.setState({
-            plot: {
-                ...this.state.plot,
-                data,
-                layout,
-                revisionCounter: this.state.plot.revisionCounter + 1,
-            },
-            hexapodParams: {
-                dimensions: hexapod.dimensions,
-                pose: hexapod.pose,
-            },
-        })
-    }
-
-    logCameraView = relayoutData => {
-        const newCameraView = relayoutData["scene.camera"]
-        const plot = { ...this.state.plot, latestCameraView: newCameraView }
-        this.setState({ ...this.state, plot: plot })
-    }
-
-    updatePlot = (dimensions, pose) => {
-        const newHexapodModel = new VirtualHexapod(dimensions, pose)
-        this.updatePlotWithHexapod(newHexapodModel)
-    }
-
-    updateDimensions = dimensions =>
-        this.updatePlot(dimensions, this.state.hexapodParams.pose)
-
-    updatePose = pose => this.updatePlot(this.state.hexapodParams.dimensions, pose)
-
-    /* * * * * * * * * * * * * *
-     * Control display of widgets
-     * * * * * * * * * * * * * */
-
-    mightShowDetailedNav = () => (this.state.inHexapodPage ? <NavDetailed /> : null)
-
-    mightShowDimensions = () => {
-        if (this.state.inHexapodPage) {
-            return (
-                <DimensionsWidget
-                    params={{ dimensions: this.state.hexapodParams.dimensions }}
-                    onUpdate={this.updateDimensions}
-                />
-            )
-        }
-    }
-
-    mightShowPlot = () => (
-        <div className={this.state.inHexapodPage ? "plot border" : "no-display"}>
-            <HexapodPlot
-                data={this.state.plot.data}
-                layout={this.state.plot.layout}
-                onRelayout={this.logCameraView}
-                revision={this.state.plot.revisionCounter}
-            />
-        </div>
-    )
-
-    /* * * * * * * * * * * * * *
-     * Pages
-     * * * * * * * * * * * * * */
-
-    showPage = () => (
-        <Switch>
-            <Route path="/" exact>
-                <LandingPage onMount={this.onPageLoad} />
-            </Route>
-            <Route path={PATHS.forwardKinematics.path}>
-                <ForwardKinematicsPage
-                    params={{ pose: this.state.hexapodParams.pose }}
-                    onUpdate={this.updatePose}
-                    onMount={this.onPageLoad}
-                />
-            </Route>
-            <Route path={PATHS.inverseKinematics.path}>
-                <InverseKinematicsPage
-                    params={{
-                        dimensions: this.state.hexapodParams.dimensions,
-                    }}
-                    onUpdate={this.updatePlotWithHexapod}
-                    onMount={this.onPageLoad}
-                />
-            </Route>
-            <Route path={PATHS.legPatterns.path}>
-                <LegPatternPage onUpdate={this.updatePose} onMount={this.onPageLoad} />
-            </Route>
-            <Route path={PATHS.walkingGaits.path}>
-                <WalkingGaitsPage
-                    params={{
-                        dimensions: this.state.hexapodParams.dimensions,
-                    }}
-                    onUpdate={this.updatePose}
-                    onMount={this.onPageLoad}
-                />
-            </Route>
-        </Switch>
-    )
-
-    /* * * * * * * * * * * * * *
-     * Layout
-     * * * * * * * * * * * * * */
-
-    render = () => (
+    return (
         <Router>
             <Nav />
-            <div className="main content">
-                <div className="sidebar column-container cell">
-                    {this.mightShowDimensions()}
-                    {this.showPage()}
-                </div>
-                {this.mightShowPlot()}
-            </div>
-            {this.mightShowDetailedNav()}
+            <Switch>
+                <Route path={PATH_LINKS.map(({ path }) => path)} exact>
+                    <HexapodParamsProvider {...hexapodParams}>
+                        <HandlersProvider {...handlers}>
+                            <Routes {...plot} onRelayout={logCameraView} />
+                        </HandlersProvider>
+                    </HexapodParamsProvider>
+                </Route>
+                <Route>
+                    <Redirect to="/" />
+                </Route>
+            </Switch>
         </Router>
     )
 }

src/__mocks__/react-plotly.js/factory.js

@@ -1,5 +1,7 @@
 import React from "react"
 
-const createPlotlyComponent = () => ({ style }) => <div style={style}></div>
+const createPlotlyComponent = () => ({ style, testId }) => (
+    <div style={style} data-testid={testId}></div>
+)
 
 export default createPlotlyComponent

src/components/DimensionsWidget.js

@@ -3,8 +3,10 @@ import NumberInputField from "./generic/NumberInputField"
 import { Card, BasicButton, ToggleSwitch } from "./generic/SmallWidgets"
 import { DEFAULT_DIMENSIONS } from "../templates"
 import { SECTION_NAMES, DIMENSION_NAMES, RESET_LABEL, RANGE_PARAMS } from "./vars"
+import { withHandlers } from "./providers/Handlers"
+import { withHexapodParams } from "./providers/HexapodParams"
 
-class DimensionsWidget extends Component {
+export class DimensionsWidget extends Component {
     sectionName = SECTION_NAMES.dimensions
     state = { isFine: true, granularity: 1 }
 
@@ -14,7 +16,7 @@ class DimensionsWidget extends Component {
 
     reset = () => {
         const dimensions = DEFAULT_DIMENSIONS
-        this.props.onUpdate(dimensions)
+        this.props.onUpdateDimensions(dimensions)
     }
 
     toggleMode = () => {
@@ -28,7 +30,7 @@ class DimensionsWidget extends Component {
 
     updateDimensions = (name, value) => {
         const dimensions = { ...this.props.params.dimensions, [name]: value }
-        this.props.onUpdate(dimensions)
+        this.props.onUpdateDimensions(dimensions)
     }
 
     updateFieldState = (name, value) => {
@@ -76,4 +78,6 @@ class DimensionsWidget extends Component {
     )
 }
 
-export default DimensionsWidget
+export default withHexapodParams(withHandlers(DimensionsWidget), ({ dimensions }) => ({
+    params: { dimensions },
+}))

src/components/HexapodPlot.js

@@ -1,20 +1,72 @@
-import React from "react"
-import Plotly from "plotly.js-gl3d-dist-min"
+import React, { useCallback, useLayoutEffect, useState, useRef } from "react"
 import createPlotlyComponent from "react-plotly.js/factory"
-const Plot = createPlotlyComponent(Plotly)
 
-const HexapodPlot = props => {
+import { sleep } from "../utils"
+
+const PlotlyPromise = () =>
+    import("plotly.js-gl3d-dist-min").then(Plotly => Plotly.default)
+
+export const HexapodPlot = ({ data, layout, onRelayout, revision, promise }) => {
+    const ref = useRef()
+    const loadingRef = useRef()
+    const promiseRef = useRef(promise)
+    const [ready, setReady] = useState(false)
+    const [error, setError] = useState(false)
+
+    const loader = useCallback(() => {
+        setError(false)
+
+        promiseRef
+            .current()
+            .then(Plotly => {
+                ref.current = createPlotlyComponent(Plotly)
+            })
+            .then(sleep(250))
+            .then(() => {
+                if (loadingRef.current) {
+                    setReady(true)
+                }
+            })
+            .catch(() => setError(true))
+    }, [])
+
+    useLayoutEffect(() => {
+        loader()
+    }, [loader])
+
+    if (error) {
+        return (
+            <>
+                <h2>Error Loading Plotly</h2>
+                <button className="button" onClick={loader}>
+                    Retry
+                </button>
+            </>
+        )
+    }
+
+    if (!ready) {
+        return <h2 ref={loadingRef}>Loading...</h2>
+    }
+
+    const Plot = ref.current
+
     return (
         <Plot
-            data={props.data}
-            layout={props.layout}
+            data={data}
+            layout={layout}
             useResizeHandler={true}
             style={{ height: "100%", width: "100%" }}
             config={{ displaylogo: false, responsive: true }}
-            onRelayout={props.onRelayout}
-            revision={props.revision}
+            onRelayout={onRelayout}
+            revision={revision}
+            testId="plot"
         />
     )
 }
 
-export default HexapodPlot
+const HexapodPlotWithPlotlyPromise = props => (
+    <HexapodPlot {...props} promise={PlotlyPromise} />
+)
+
+export default HexapodPlotWithPlotlyPromise