Merge pull request #494 from nextstrain/react-16

React 16
nextstrain · Feb 5, 2018 · 006935c · 006935c
2 parents 3fea6e4 + 7793801
commit 006935c
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 60 deletions.
diff --git a/package.json b/package.json
@@ -84,9 +84,6 @@
     "json-loader": "^0.5.1",
     "mocha": "^3.5.3",
     "prettyjson": "^1.2.1",
-    "react-addons-perf": "^15.4.2",
-    "react-transform-catch-errors": "^1.0.2",
-    "react-transform-hmr": "^1.0.4",
     "redux-devtools": "^3.3.2",
     "rimraf": "^2.4.3",
     "run-sequence": "~0.3.6",
@@ -121,24 +118,23 @@
     "node-fetch": "^1.7.3",
     "outer-product": "0.0.4",
     "papaparse": "^4.3.5",
-    "prop-types": "^15.5.10",
+    "prop-types": "^15.6.0",
     "query-string": "^4.2.3",
-    "react": "15.6.1",
+    "react": "^16.2.0",
     "react-addons-css-transition-group": "^15.6.0",
     "react-autosuggest": "^3.9.0",
-    "react-dom": "^15.6.1",
+    "react-dom": "^16.2.0",
     "react-ga": "^2.2.0",
     "react-hot-loader": "^3.0.0-beta.7",
     "react-markdown": "^2.5.0",
-    "react-redux": "^4.4.8",
+    "react-redux": "^5.0.6",
     "react-select": "^1.0.0-rc.5",
     "react-sidebar": "git://github.com/nextstrain/react-sidebar.git#inset-shadow",
-    "react-svg-pan-zoom": "2.0.0",
-    "react-tap-event-plugin": "^2.0.0",
-    "redux": "^3.0.2",
-    "redux-thunk": "^1.0.0",
+    "react-svg-pan-zoom": "2.15.1",
+    "react-tap-event-plugin": "^3.0.2",
+    "redux": "^3.7.2",
+    "redux-thunk": "^2.2.0",
     "request": "^2.65.0",
-    "victory-chart": "^16.1.2",
     "whatwg-fetch": "^0.10.1"
   }
 }
diff --git a/src/components/framework/animationController.js b/src/components/framework/animationController.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-import { animationWindowWidth, animationTick, enableAnimationPerfTesting } from "../../util/globals";
+import { animationWindowWidth, animationTick } from "../../util/globals";
 import { numericToCalendar } from "../../util/dateHelpers";
 import { changeDateFilter } from "../../actions/treeProperties";
 import { MAP_ANIMATION_PLAY_PAUSE_BUTTON, MIDDLEWARE_ONLY_ANIMATION_STARTED } from "../../actions/types";
@@ -71,14 +71,14 @@ class AnimationController extends React.Component {
     /* tickFn is a closure, therefore defined within maybeAnimateMap */
     const tickFn = () => {
       // console.log("TICK")
-      if (enableAnimationPerfTesting) { window.Perf.bump(); }
+      // if (enableAnimationPerfTesting) { window.Perf.bump(); }
 
       /* Check (via redux) if animation should not continue. This happens when the pause or reset button has been hit. */
       if (this.props.animationPlayPauseButton === "Play") {
         // console.log("STOP. Reason: redux told me to!. Clearing loop #", window.NEXTSTRAIN.animationTickReference);
         clearInterval(window.NEXTSTRAIN.animationTickReference);
         window.NEXTSTRAIN.animationTickReference = null;
-        if (enableAnimationPerfTesting) { window.Perf.resetCount(); }
+        // if (enableAnimationPerfTesting) { window.Perf.resetCount(); }
         return;
       }
 

diff --git a/src/components/info/info.js b/src/components/info/info.js
@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from 'prop-types';
 import { connect } from "react-redux";
 import Card from "../framework/card";
 import computeResponsive from "../../util/computeResponsive";
@@ -100,12 +101,12 @@ class Info extends React.Component {
     super(props);
   }
   static propTypes = {
-    filters: React.PropTypes.object.isRequired,
-    metadata: React.PropTypes.object, // not required. starts as null
-    nodes: React.PropTypes.array, // not required. starts as null
-    visibility: React.PropTypes.array, // not required. starts as null
-    dispatch: React.PropTypes.func.isRequired,
-    idxOfInViewRootNode: React.PropTypes.number
+    filters: PropTypes.object.isRequired,
+    metadata: PropTypes.object, // not required. starts as null
+    nodes: PropTypes.array, // not required. starts as null
+    visibility: PropTypes.array, // not required. starts as null
+    dispatch: PropTypes.func.isRequired,
+    idxOfInViewRootNode: PropTypes.number
   }
   getStyles(responsive) {
     let fontSize = 32;

diff --git a/src/index.js b/src/index.js
@@ -4,8 +4,6 @@ import ReactGA from "react-ga";
 import { Provider } from "react-redux";
 import { AppContainer } from 'react-hot-loader';
 import injectTapEventPlugin from "react-tap-event-plugin";
-import { setUpPerf } from "./util/quantify-performance";
-import { enableAnimationPerfTesting } from "./util/globals";
 import Monitor from "./components/framework/monitor";
 import PageSelect from "./components/framework/pageSelect";
 import Notifications from "./components/notifications/notifications";
@@ -28,11 +26,6 @@ if (!window.NEXTSTRAIN) {window.NEXTSTRAIN = {};}
 /* google analytics */
 ReactGA.initialize(process.env.NODE_ENV === "production" ? "UA-92687617-1" : "UA-92687617-2");
 
-/* Performance measurement - DEV ONLY */
-if (enableAnimationPerfTesting) {
-  setUpPerf();
-}
-
 const Root = () => {
   return (
     <Provider store={store}>

diff --git a/src/util/globals.js b/src/util/globals.js
@@ -57,7 +57,6 @@ export const mediumTransitionDuration = 700; // in milliseconds
 export const slowTransitionDuration = 1400; // in milliseconds
 export const enableNarratives = false;
 export const narrativeWidth = 500;
-export const enableAnimationPerfTesting = false;
 export const animationWindowWidth = 0.075; // width of animation window relative to date slider
 export const animationTick = 50; // animation tick in milliseconds
 export const HIColorDomain = genericDomain.map((d) => {

diff --git a/src/util/quantify-performance.js b/src/util/quantify-performance.js
@@ -1,32 +1,37 @@
 
-export const setUpPerf = function () {
-  window.Perf = require("react-addons-perf");
-  window.Perf.counter = -1;
-  window.Perf.show = function () {
-    const measurements = window.Perf.getLastMeasurements();
-    console.log("REACT PERFORMANCE INFO");
-    // console.log("inclusive times");
-    // window.Perf.printInclusive(measurements);
-    console.log("exclusive times");
-    window.Perf.printExclusive(measurements);
-  }
-  window.Perf.bump = function () {
-    window.Perf.counter += 1;
-    if (window.Perf.counter === 0) {
-      window.Perf.start();
-    }
-    if (window.Perf.counter === 1) {
-      /* display a single tick */
-      console.log("Performance for a single animation tick:");
-      window.Perf.show();
-    }
-    if (window.Perf.counter === 50) {
-      console.log("Performance for 50 animation ticks:");
-      window.Perf.show();
-      window.Perf.stop();
-    }
-  };
-  window.Perf.resetCount = function () {
-    window.Perf.counter = -1;
-  };
-};
+/*
+This function uses react-addons-perf which is no longer available in react 16.
+My general plan is to move these into automatic tests which we can run.
+*/
+
+// export const setUpPerf = function () {
+//   window.Perf = require("react-addons-perf");
+//   window.Perf.counter = -1;
+//   window.Perf.show = function () {
+//     const measurements = window.Perf.getLastMeasurements();
+//     console.log("REACT PERFORMANCE INFO");
+//     // console.log("inclusive times");
+//     // window.Perf.printInclusive(measurements);
+//     console.log("exclusive times");
+//     window.Perf.printExclusive(measurements);
+//   }
+//   window.Perf.bump = function () {
+//     window.Perf.counter += 1;
+//     if (window.Perf.counter === 0) {
+//       window.Perf.start();
+//     }
+//     if (window.Perf.counter === 1) {
+//       /* display a single tick */
+//       console.log("Performance for a single animation tick:");
+//       window.Perf.show();
+//     }
+//     if (window.Perf.counter === 50) {
+//       console.log("Performance for 50 animation ticks:");
+//       window.Perf.show();
+//       window.Perf.stop();
+//     }
+//   };
+//   window.Perf.resetCount = function () {
+//     window.Perf.counter = -1;
+//   };
+// };