Make narratives on map into a react component

2026-06-08 03:18:36 +03:00 · 2018-12-19 11:02:16 +01:00
parent 47a01801af
commit 65a608088c
7 changed files with 166 additions and 250 deletions
--- a/package.json
+++ b/package.json
@@ -19,8 +19,9 @@
    "leaflet-polylinedecorator": "^1.3.2",
    "normalizr": "^3.2.3",
    "object-hash": "^1.3.0",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
+    "react-portal": "^4.2.0",
    "react-redux": "^5.0.4",
    "react-tabs": "^1.0.0",
    "redux": "^3.6.0",
--- a/src/components/Map.jsx
+++ b/src/components/Map.jsx
@@ -6,7 +6,7 @@ import * as selectors from '../selectors'

 import MapLogic from '../js/map/map.js'
 import MapSites from './MapSites.jsx';
-import MapDefsMarkers from './MapDefsMarkers.jsx';
+import MapNarratives from './MapNarratives.jsx';

 class Map extends React.Component {

@@ -97,19 +97,11 @@ class Map extends React.Component {

    map.keyboard.disable();

-    map.on("move", () => this.moveElements());
+    map.on("move", () => this.updateSVG());

    this.setState({ map });
  }

-  projectPoint(location) {
-    const latLng = new L.LatLng(location[0], location[1]);
-    return {
-      x: this.state.map.latLngToLayerPoint(latLng).x + this.state.mapTransformX,
-      y: this.state.map.latLngToLayerPoint(latLng).y + this.state.mapTransformY
-    };
-  }
-
  getSVGBoundaries() {
    const mapNode = d3.select('.leaflet-map-pane').node();
    if (mapNode === null) return { transformX: 0, transformY: 0 };
@@ -152,10 +144,6 @@ class Map extends React.Component {
    });*/
  }

-  moveElements() {
-    this.updateSVG();
-  }
-
  renderSites() {
    if (this.state.isInitialized) {
      return (
@@ -171,12 +159,32 @@ class Map extends React.Component {
    return '';
  }

+  renderNarratives() {
+    if (this.state.isInitialized) {
+      return (
+        <MapNarratives
+          svg={this.svg}
+          narratives={this.props.domain.narratives}
+          map={this.state.map}
+          mapTransformX={this.state.mapTransformX}
+          mapTransformY={this.state.mapTransformY}
+          narrative={this.props.app.narrative}
+          narrativeProps={this.props.ui.narratives}
+          onSelect={this.props.methods.onSelect}
+          onSelectNarrative={this.props.methods.onSelectNarrative}
+        />
+      );
+    }
+    return '';    
+  }
+
  render() {
    const classes = this.props.app.narrative ? 'map-wrapper narrative-mode' : 'map-wrapper';
    return (
      <div className={classes}>
        <div id={this.props.mapId} />
        {this.renderSites()}
+        {this.renderNarratives()}
      </div>
    );
  }
--- a/src/components/MapDefsMarkers.jsx
+++ b/src/components/MapDefsMarkers.jsx
@@ -3,10 +3,10 @@ import React from 'react';
 const MapDefsMarkers = ({}) => (
  <defs>
    <marker id="arrow" viewBox="0 0 6 6" refX="3" refY="3" markerWidth="6" markerHeight="6" orient="auto">
-      <path d="M0,3v-3l6,3l-6,3z" style="fill: red;"></path>
+      <path d="M0,3v-3l6,3l-6,3z" style={{ fill: 'red' }}></path>
    </marker>
    <marker id="arrow-off" viewBox="0 0 6 6" refX="3" refY="3" markerWidth="6" markerHeight="6" orient="auto">
-      <path d="M0,3v-3l6,3l-6,3z" style="fill: black; fill-opacity: 0.2;"></path>
+      <path d="M0,3v-3l6,3l-6,3z" style={{ fill: 'black', fillOpacity: 0.2 }}></path>
    </marker>      
  </defs>
 );
--- a/src/components/MapNarratives.jsx
+++ b/src/components/MapNarratives.jsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import { Portal } from 'react-portal';
+
+import MapDefsMarkers from './MapDefsMarkers.jsx';
+
+class MapNarratives extends React.Component {
+
+  projectPoint(location) {
+    const latLng = new L.LatLng(location[0], location[1]);
+    return {
+      x: this.props.map.latLngToLayerPoint(latLng).x + this.props.mapTransformX,
+      y: this.props.map.latLngToLayerPoint(latLng).y + this.props.mapTransformY
+    };
+  }
+
+  getNarrativeStyle(narrativeId) {
+    const styleName = (narrativeId && narrativeId in this.props.narrativeProps)
+      ? narrativeId
+      : 'default';
+    return this.props.narrativeProps[styleName];
+  }
+
+  getStrokeWidth(narrative, step) {
+    if (!step) return 0;
+    return this.getNarrativeStyle(narrative.id).strokeWidth;
+  }
+
+  getStrokeDashArray(narrative, step) {
+    if (!step) return 'none';
+    return (this.getNarrativeStyle(narrative.id).style === 'dotted') ? "2px 5px" : 'none';
+  }
+
+  getStroke(narrative, step) {
+    if (!step || this.props.narrative === null) return 'none';
+    return this.getNarrativeStyle(narrative.id).stroke;
+  }
+
+  getStrokeOpacity(narrative, step) {
+    if (this.props.narrative === null) return 0;
+    if (!step || narrative.id !== this.props.narrative.id) return 0.2;
+    return 1;
+  }
+
+  renderNarrativeStep(allSteps, step, idx, n) {
+    const { x, y } = this.projectPoint([step.latitude, step.longitude]);
+
+    const step2 = allSteps[idx + 1];
+    const p2 = this.projectPoint([step2.latitude, step2.longitude]);
+
+    return (
+      <line
+        className="narrative-step"
+        x1={x}
+        x2={p2.x}
+        y1={y}
+        y2={p2.y}
+        markerStart="none"
+        markerEnd="url(#arrow)"
+        midMarker="url(#arrow)"
+        onClick={() => this.props.onSelectNarrative(n)}
+        style={{
+          strokeWidth: this.getStrokeWidth(n, step),
+          strokeDasharray: this.getStrokeDashArray(n, step),
+          strokeOpacity: this.getStrokeOpacity(n, step),
+          stroke: this.getStroke(n, step)
+        }}
+      >
+      </line>
+    );
+  }
+
+  renderNarrative(n) {
+    const steps = n.steps.slice(0, n.steps.length - 1);
+
+    return (
+      <g id={`narrative-${n.id.replace(/ /g,"_")}`} className="narrative">
+        {steps.map((s, idx) => this.renderNarrativeStep(n.steps, s, idx, n))}
+      </g>
+    )
+  }
+
+  render() {
+    if (this.props.narrative === null) return (<div />);
+    /*<MapDefsMarkers />*/
+
+    return (
+      <Portal node={this.props.svg.node()}>
+        {this.props.narratives.map(n => this.renderNarrative(n))}
+      </Portal>
+    );
+  }
+}
+
+export default MapNarratives;
--- a/src/js/map/map.js
+++ b/src/js/map/map.js
@@ -11,7 +11,6 @@ export default function(lMap, svg, g, newApp, ui, methods) {
    locations: [],
    narratives: [],
    categories: [],
-    sites: []
  }
  const app = {
    selected: [],
@@ -21,22 +20,10 @@ export default function(lMap, svg, g, newApp, ui, methods) {
  }

  const getCategoryColor = methods.getCategoryColor;
-  const narrativeProps = ui.narratives;
-
-  // Initialize layer
-  const sitesLayer = L.layerGroup();

  // Icons for markPoint flags (a yellow ring around a location)
  const eventCircleMarkers = {};

-  // Styles for elements in map
-  const settingsSiteLabel = {
-    className: 'site-label',
-    opacity: 1,
-    permanent: true,
-    direction: 'top',
-  };
-
  function projectPoint(location) {
    const latLng = new L.LatLng(location[0], location[1]);
    return {
@@ -80,9 +67,6 @@ export default function(lMap, svg, g, newApp, ui, methods) {
      const newPoint = projectPoint([+d.latitude, +d.longitude]);
      return `translate(${newPoint.x},${newPoint.y})`;
    });
-
-    svg.selectAll('.narrative')
-      .each((g, i, nodes) => { return updateNarrativeSteps(g, i, nodes); });
  }

  lMap.on("zoomend viewreset moveend", updateSVG);
@@ -227,33 +211,6 @@ export default function(lMap, svg, g, newApp, ui, methods) {
      .style('fill-opacity', '0.1 !important');
  }

-  // NB: is this a function to be removed for future features?
-  function renderSites() {
-    sitesLayer.clearLayers();
-    lMap.removeLayer(sitesLayer);
-
-    // Create a label for each attack site, persistent across filtering
-    if (app.views.sites) {
-      domain.sites.forEach((site) => {
-        if (isNotNullNorUndefined(site)) {
-          // Create an invisible marker for each site label
-          const siteMarker = L.circleMarker([+site.latitude, +site.longitude], {
-            radius: 0,
-            stroke: 0
-          });
-
-          siteMarker.bindTooltip(site.site, settingsSiteLabel).openTooltip();
-
-          // Add this one attack marker to group attack layer
-          sitesLayer.addLayer(siteMarker);
-        }
-      });
-
-      lMap.addLayer(sitesLayer);
-    }
-  }
-
-
   const getCoords = (d) => {
     d.LatLng = new L.LatLng(+d.latitude, +d.longitude);
     return {
@@ -262,18 +219,7 @@ export default function(lMap, svg, g, newApp, ui, methods) {
     }
   }

- /**
-  * Clears existing narrative layer
-  * Renders all narrativ as paths
-  * Adds eventlayer to map
-  */
-
-  function getNarrativeStyle(narrativeId) {
-    const styleName = narrativeId && narrativeId in narrativeProps
-      ? narrativeId
-      : 'default';
-    return narrativeProps[styleName];
-  }
+ 

  function getMarker (d) {
    if (!d || app.narrative === null) return 'none';
@@ -281,100 +227,7 @@ export default function(lMap, svg, g, newApp, ui, methods) {
    return 'url(#arrow-off)';
  }

-  function renderNarratives() {
-    const narrativesDom = svg.selectAll('.narrative')
-      .data((app.narrative !== null) ? domain.narratives : [])
-
-    narrativesDom
-      .exit()
-      .remove();
-
-    if (app.narrative !== null) {
-      d3.selectAll('#arrow path')
-        .style('fill', getNarrativeStyle(app.narrative.id).stroke);
-    }
-
-    const narrativesEnter = narrativesDom
-      .enter().append('g')
-      .attr('id', d => 'narrative-' + d.id)
-      .attr('class', 'narrative')
-
-    narrativesDom.selectAll('.narrative')
-      .each((g, i, nodes) => { return updateNarrativeSteps(g, i, nodes); });
-  }
-
-  function updateNarrativeSteps(g, i, nodes) {
-      const n = d3.select(nodes[i]).data()[0];
-      const allsteps = n.steps.slice();
-      allsteps.push(n.steps[n.steps.length - 1]);
-
-      const steps = d3.select(nodes[i]).selectAll('.narrative-step')
-          .data(n.steps)
-
-      steps.enter().append('line')
-        .attr('class', 'narrative-step')
-          .attr('x1', d => getCoords(d).x + getSVGBoundaries().transformX)
-          .attr('x2', (d, j) => { return getCoords(allsteps[j + 1]).x + getSVGBoundaries().transformX; })
-          .attr('y1', d => getCoords(d).y + getSVGBoundaries().transformY)
-          .attr('y2', (d, j) => { return getCoords(allsteps[j + 1]).y + getSVGBoundaries().transformY; })
-          .style('stroke-width', d => {
-            if (!d) return 0;
-            const styleProps = getNarrativeStyle(n.id);
-            return styleProps.strokeWidth;
-          })
-          .style('stroke-dasharray', d => {
-            if (!d) return 'none';
-            const styleProps = getNarrativeStyle(n.id);
-            return (styleProps.style === 'dotted') ? "2px 5px" : 'none';
-          })
-          .style('stroke', d => {
-            if (!d || app.narrative === null) return 'none';
-            const styleProps = getNarrativeStyle(n.id);
-            return styleProps.stroke;
-          })
-          .style('stroke-opacity', d => {
-            if (app.narrative === null) return 0;
-            if (!d || d.id !== app.narrative.id) return 0.2;
-            return 1;
-          })
-          .attr('marker-start', (d, j) => !j ? getMarker(n) :  'none')
-          .attr('marker-end', getMarker(n))
-          .attr('mid-marker', getMarker(n))
-          .on('click', () => methods.onSelectNarrative(n) )
-
-      steps
-          .attr('x1', d => getCoords(d).x + getSVGBoundaries().transformX)
-          .attr('x2', (d, j) => { return getCoords(allsteps[j + 1]).x + getSVGBoundaries().transformX; })
-          .attr('y1', d => getCoords(d).y + getSVGBoundaries().transformY)
-          .attr('y2', (d, j) => { return getCoords(allsteps[j + 1]).y + getSVGBoundaries().transformY; })
-          .style('stroke-width', d => {
-            if (!d) return 0;
-            const styleProps = getNarrativeStyle(n.id);
-            return styleProps.strokeWidth;
-          })
-          .style('stroke-dasharray', d => {
-            if (!d) return 'none';
-            const styleProps = getNarrativeStyle(n.id);
-            return (styleProps.style === 'dotted') ? "2px 5px" : 'none';
-          })
-          .style('stroke', d => {
-            if (!d || app.narrative === null) return 'none';
-            const styleProps = getNarrativeStyle(n.id);
-            return styleProps.stroke;
-          })
-          .style('stroke-opacity', d => {
-            if (app.narrative === null) return 0;
-            if (!d || n.id !== app.narrative.id) return 0.2;
-            return 1;
-          })
-          .attr('marker-start', (d, j) => !j ? getMarker(n) :  'none')
-          .attr('marker-end', getMarker(n))
-          .attr('mid-marker', getMarker(n))
-
-      steps
-        .exit()
-        .remove();
-  }
+ 
  /**
   * Updates displayable data on the map: events, coevents and paths
   * @param {Object} domain: object of arrays of events, coevs, attacks, paths, sites
@@ -386,9 +239,7 @@ export default function(lMap, svg, g, newApp, ui, methods) {

    if (isNewDomain) {
      domain.locations = newDomain.locations;
-      domain.narratives = newDomain.narratives;
      domain.categories = newDomain.categories;
-      domain.sites = newDomain.sites;
    }

    if (isNewAppProps) {
@@ -407,8 +258,6 @@ export default function(lMap, svg, g, newApp, ui, methods) {
  * Renders events on the map: takes data, and enters, updates and exits
  */
  function renderDomain () {
-    //renderSites();
-    renderNarratives();
    renderEvents();
  }
  function renderSelectedAndHighlight () {
--- a/src/scss/map.scss
+++ b/src/scss/map.scss
@@ -73,6 +73,12 @@
  left: 110px;
 }

+.narratives-layer {
+  position: fixed;
+  top: 0px;
+  left: 110px;
+}
+
 /*
 * Leaflet mapping controls
 */
--- a/yarn.lock
+++ b/yarn.lock
@@ -980,10 +980,6 @@ arrify@^1.0.0, arrify@^1.0.1:
  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
  integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=

-asap@~2.0.3:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
-
 asn1.js@^4.0.0:
  version "4.10.1"
  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.10.1.tgz#b9c2bf5805f1e64aadeed6df3a2bfafb5a73f5a0"
@@ -1821,10 +1817,6 @@ copy-descriptor@^0.1.0:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"

-core-js@^1.0.0:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
-
 core-js@^2.0.0, core-js@^2.4.0, core-js@^2.5.0:
  version "2.5.7"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
@@ -1868,14 +1860,6 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
    safe-buffer "^5.0.1"
    sha.js "^2.4.8"

-create-react-class@^15.6.0:
-  version "15.6.3"
-  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
-  dependencies:
-    fbjs "^0.8.9"
-    loose-envify "^1.3.1"
-    object-assign "^4.1.1"
-
 cross-spawn@^3.0.0:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
@@ -2571,12 +2555,6 @@ encodeurl@~1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"

-encoding@^0.1.11:
-  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
-  dependencies:
-    iconv-lite "~0.4.13"
-
 end-of-stream@^1.0.0, end-of-stream@^1.1.0:
  version "1.4.1"
  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
@@ -2868,18 +2846,6 @@ faye-websocket@~0.11.0:
  dependencies:
    websocket-driver ">=0.5.1"

-fbjs@^0.8.9:
-  version "0.8.17"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
-  dependencies:
-    core-js "^1.0.0"
-    isomorphic-fetch "^2.1.1"
-    loose-envify "^1.0.0"
-    object-assign "^4.1.0"
-    promise "^7.1.1"
-    setimmediate "^1.0.5"
-    ua-parser-js "^0.7.18"
-
 figures@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
@@ -3409,7 +3375,7 @@ https-browserify@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"

-iconv-lite@0.4, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
+iconv-lite@0.4, iconv-lite@^0.4.4:
  version "0.4.24"
  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
  dependencies:
@@ -3779,7 +3745,7 @@ is-retry-allowed@^1.0.0:
  resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"
  integrity sha1-EaBgVotnM5REAz0BJaYaINVk+zQ=

-is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
+is-stream@^1.0.0, is-stream@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"

@@ -3839,13 +3805,6 @@ isobject@^3.0.0, isobject@^3.0.1:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"

-isomorphic-fetch@^2.1.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
-  dependencies:
-    node-fetch "^1.0.1"
-    whatwg-fetch ">=0.10.0"
-
 isstream@~0.1.2:
  version "0.1.2"
  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -3874,6 +3833,7 @@ js-string-escape@^1.0.1:
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==

 js-tokens@^3.0.2:
  version "3.0.2"
@@ -4126,6 +4086,7 @@ loglevel@^1.4.1:
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
  dependencies:
    js-tokens "^3.0.0 || ^4.0.0"

@@ -4511,13 +4472,6 @@ no-case@^2.2.0:
  dependencies:
    lower-case "^1.1.1"

-node-fetch@^1.0.1:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
-  dependencies:
-    encoding "^0.1.11"
-    is-stream "^1.0.1"
-
 node-forge@0.7.5:
  version "0.7.5"
  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df"
@@ -4687,6 +4641,7 @@ oauth-sign@~0.9.0:
 object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=

 object-copy@^0.1.0:
  version "0.1.0"
@@ -5147,13 +5102,7 @@ promise-inflight@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"

-promise@^7.1.1:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
-  dependencies:
-    asap "~2.0.3"
-
-prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.6.0:
+prop-types@^15.5.0, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2:
  version "15.6.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
  dependencies:
@@ -5273,14 +5222,22 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
    minimist "^1.2.0"
    strip-json-comments "~2.0.1"

-react-dom@^15.5.4:
-  version "15.6.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.2.tgz#41cfadf693b757faf2708443a1d1fd5a02bef730"
+react-dom@^16.6.3:
+  version "16.6.3"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.6.3.tgz#8fa7ba6883c85211b8da2d0efeffc9d3825cccc0"
+  integrity sha512-8ugJWRCWLGXy+7PmNh8WJz3g1TaTUt1XyoIcFN+x0Zbkoz+KKdUyx1AQLYJdbFXjuF41Nmjn5+j//rxvhFjgSQ==
  dependencies:
-    fbjs "^0.8.9"
    loose-envify "^1.1.0"
-    object-assign "^4.1.0"
-    prop-types "^15.5.10"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.11.2"
+
+react-portal@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.2.0.tgz#5400831cdb0ae64dccb8128121cf076089ab1afd"
+  integrity sha512-Zf+vGQ/VEAb5XAy+muKEn48yhdCNYPZaB1BWg1xc8sAZWD8pXTgPtQT4ihBdmWzsfCq8p8/kqf0GWydSBqc+Eg==
+  dependencies:
+    prop-types "^15.5.8"

 react-redux@^5.0.4:
  version "5.0.7"
@@ -5300,15 +5257,15 @@ react-tabs@^1.0.0:
    classnames "^2.2.0"
    prop-types "^15.5.0"

-react@^15.5.4:
-  version "15.6.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"
+react@^16.6.3:
+  version "16.6.3"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.6.3.tgz#25d77c91911d6bbdd23db41e70fb094cc1e0871c"
+  integrity sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw==
  dependencies:
-    create-react-class "^15.6.0"
-    fbjs "^0.8.9"
    loose-envify "^1.1.0"
-    object-assign "^4.1.0"
-    prop-types "^15.5.10"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.11.2"

 read-pkg-up@^1.0.1:
  version "1.0.1"
@@ -5664,6 +5621,7 @@ safe-regex@^1.1.0:
 "safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
  version "2.1.2"
  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==

 sass-graph@^2.2.4:
  version "2.2.4"
@@ -5689,6 +5647,14 @@ sax@^1.2.4:
  version "1.2.4"
  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"

+scheduler@^0.11.2:
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.11.3.tgz#b5769b90cf8b1464f3f3cfcafe8e3cd7555a2d6b"
+  integrity sha512-i9X9VRRVZDd3xZw10NY5Z2cVMbdYg6gqFecfj79USv1CFN+YrJ3gIPRKf1qlY+Sxly4djoKdfx1T+m9dnRB8kQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^0.4.4, schema-utils@^0.4.5:
  version "0.4.7"
  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
@@ -5806,7 +5772,7 @@ set-value@^2.0.0:
    is-plain-object "^2.0.3"
    split-string "^3.0.1"

-setimmediate@^1.0.4, setimmediate@^1.0.5:
+setimmediate@^1.0.4:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"

@@ -6365,10 +6331,6 @@ typedarray@^0.0.6:
  version "0.0.6"
  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"

-ua-parser-js@^0.7.18:
-  version "0.7.18"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed"
-
 uglify-es@^3.3.4:
  version "3.3.9"
  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"
@@ -6767,10 +6729,6 @@ well-known-symbols@^1.0.0:
  resolved "https://registry.yarnpkg.com/well-known-symbols/-/well-known-symbols-1.0.0.tgz#73c78ae81a7726a8fa598e2880801c8b16225518"
  integrity sha1-c8eK6Bp3Jqj6WY4ogIAcixYiVRg=

-whatwg-fetch@>=0.10.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
-
 whatwg-fetch@^2.0.3:
  version "2.0.4"
  resolved "http://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f"