Upgrade react-simple-maps from 0.12.1 to 2.1.2

3 files changed, 113 insertions, 87 deletions

diff --git a/gui/package-lock.json b/gui/package-lock.json
index 147bf22d71..27ef799f6a 100644
--- a/gui/package-lock.json
+++ b/gui/package-lock.json
@@ -699,12 +699,13 @@
       }
     },
     "@types/react-simple-maps": {
-      "version": "0.12.2",
-      "resolved": "https://registry.npmjs.org/@types/react-simple-maps/-/react-simple-maps-0.12.2.tgz",
-      "integrity": "sha512-dmALUc5CDy3+76sn0ZF2mcdWN0VH9d/F4P5fpEB0vdrJIw1KJjHK8kumeHsyXiktz4joBUWcxAZOTfifmj82fQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react-simple-maps/-/react-simple-maps-1.0.3.tgz",
+      "integrity": "sha512-cCDAsa8FRlTwvMUOUMK3+5ANnF1TDXlLoqpmIOYYIAYXT4nKwpsgSMOWjPoJyCRx5U+pN8rIK+A/HAcyAh6UWA==",
       "dev": true,
       "requires": {
         "@types/d3-geo": "*",
+        "@types/geojson": "*",
         "@types/react": "*"
       }
     },
@@ -3181,10 +3182,34 @@
       "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
       "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
     },
+    "d3-color": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
+      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
+    },
+    "d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA=="
+    },
+    "d3-drag": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz",
+      "integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==",
+      "requires": {
+        "d3-dispatch": "1",
+        "d3-selection": "1"
+      }
+    },
+    "d3-ease": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.7.tgz",
+      "integrity": "sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ=="
+    },
     "d3-geo": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.11.6.tgz",
-      "integrity": "sha512-z0J8InXR9e9wcgNtmVnPTj0TU8nhYT6lD/ak9may2PdKqXIeHUr8UbFLoCtrPYNsjv6YaLvSDQVl578k6nm7GA==",
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.12.1.tgz",
+      "integrity": "sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg==",
       "requires": {
         "d3-array": "1"
       }
@@ -3200,6 +3225,49 @@
         "resolve": "^1.1.10"
       }
     },
+    "d3-interpolate": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+      "requires": {
+        "d3-color": "1"
+      }
+    },
+    "d3-selection": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
+      "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg=="
+    },
+    "d3-timer": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
+      "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw=="
+    },
+    "d3-transition": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz",
+      "integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==",
+      "requires": {
+        "d3-color": "1",
+        "d3-dispatch": "1",
+        "d3-ease": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "^1.1.0",
+        "d3-timer": "1"
+      }
+    },
+    "d3-zoom": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.8.3.tgz",
+      "integrity": "sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==",
+      "requires": {
+        "d3-dispatch": "1",
+        "d3-drag": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "1",
+        "d3-transition": "1"
+      }
+    },
     "date.js": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/date.js/-/date.js-0.3.3.tgz",
@@ -10458,32 +10526,23 @@
       }
     },
     "react-simple-maps": {
-      "version": "0.12.1",
-      "resolved": "https://registry.npmjs.org/react-simple-maps/-/react-simple-maps-0.12.1.tgz",
-      "integrity": "sha512-htW2qQCnppGAUvWttf8ugZsVD896AfAjJNz3sgQT5zpdLNC+n2xegiNtn5inkD0aLuQWZ43i5cTlhPe0n6hvNQ==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-simple-maps/-/react-simple-maps-2.1.2.tgz",
+      "integrity": "sha512-CuwuOomMmf/3zMtMqG9w8IKxpPUDhXHuF1p/8/8G6EMiRdYUJDysmDFGUIxD30CfkR4+9ItE0NV1pI/fZC/1cw==",
       "requires": {
-        "d3-geo": "1.6.3",
-        "d3-geo-projection": "1.2.2",
-        "topojson-client": "2.1.0"
+        "d3-geo": "^1.11.9",
+        "d3-selection": "^1.4.1",
+        "d3-zoom": "^1.8.3",
+        "topojson-client": "^3.0.0"
       },
       "dependencies": {
         "d3-geo": {
-          "version": "1.6.3",
-          "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.6.3.tgz",
-          "integrity": "sha1-IWg6Q6Bh6rohp/JUtR1ZN+tkB1Y=",
+          "version": "1.12.1",
+          "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.12.1.tgz",
+          "integrity": "sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg==",
           "requires": {
             "d3-array": "1"
           }
-        },
-        "d3-geo-projection": {
-          "version": "1.2.2",
-          "resolved": "https://registry.npmjs.org/d3-geo-projection/-/d3-geo-projection-1.2.2.tgz",
-          "integrity": "sha1-7w5s3PoN8jbQ4j8sp3UEYsozH3I=",
-          "requires": {
-            "commander": "2",
-            "d3-array": "1",
-            "d3-geo": "^1.1.0"
-          }
         }
       }
     },
@@ -12550,9 +12609,9 @@
       "dev": true
     },
     "topojson-client": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-2.1.0.tgz",
-      "integrity": "sha1-/59784mRGF4LQoTCsGroNPDqxsg=",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz",
+      "integrity": "sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==",
       "requires": {
         "commander": "2"
       }
diff --git a/gui/package.json b/gui/package.json
index e0bcc15fe8..398f97ce61 100644
--- a/gui/package.json
+++ b/gui/package.json
@@ -29,7 +29,7 @@
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.0",
     "react-router": "^5.1.2",
-    "react-simple-maps": "^0.12.1",
+    "react-simple-maps": "^2.1.2",
     "redux": "^4.0.5",
     "sprintf-js": "^1.1.2",
     "styled-components": "^5.1.0",
@@ -55,7 +55,7 @@
     "@types/react-dom": "^16.9.6",
     "@types/react-redux": "^7.1.7",
     "@types/react-router": "^5.1.5",
-    "@types/react-simple-maps": "^0.12.1",
+    "@types/react-simple-maps": "^1.0.3",
     "@types/resize-observer-browser": "^0.1.3",
     "@types/sinon": "^7.0.5",
     "@types/sprintf-js": "^1.1.2",
diff --git a/gui/src/renderer/components/SvgMap.tsx b/gui/src/renderer/components/SvgMap.tsx
index 2cc23d3399..6a9bb6b6e6 100644
--- a/gui/src/renderer/components/SvgMap.tsx
+++ b/gui/src/renderer/components/SvgMap.tsx
@@ -1,15 +1,7 @@
 import { geoTimes } from 'd3-geo-projection';
 import rbush from 'rbush';
 import * as React from 'react';
-import {
-  ComposableMap,
-  Geographies,
-  Geography,
-  Marker,
-  Markers,
-  ZoomableGroup,
-} from 'react-simple-maps';
-import { Scheduler } from '../../shared/scheduler';
+import { ComposableMap, Geographies, Geography, Marker, ZoomableGroup } from 'react-simple-maps';
 
 import geographyData from '../../../assets/geo/geometry.json';
 import statesProvincesLinesData from '../../../assets/geo/states-provinces-lines.json';
@@ -70,8 +62,6 @@ export default class SvgMap extends React.Component<IProps, IState> {
     scale: 160,
   };
 
-  private transitionEndScheduler = new Scheduler();
-
   constructor(props: IProps) {
     super(props);
 
@@ -100,18 +90,6 @@ export default class SvgMap extends React.Component<IProps, IState> {
     );
   }
 
-  public componentDidUpdate(_prevProps: IProps, _prevState: IState) {
-    if (this.state.viewportBboxes.length > 1) {
-      this.transitionEndScheduler.schedule(() => {
-        this.setState((state) => this.removeOldViewportBboxes(state));
-      }, MOVE_SPEED);
-    }
-  }
-
-  public componentWillUnmount() {
-    this.transitionEndScheduler.cancel();
-  }
-
   public render() {
     const mapStyle = {
       width: '100%',
@@ -150,9 +128,9 @@ export default class SvgMap extends React.Component<IProps, IState> {
     const userMarker = this.props.showMarker && (
       <Marker
         key={`user-location-${this.props.center.join('-')}`}
-        marker={{ coordinates: this.props.center }}
+        coordinates={this.props.center}
         style={markerStyle}>
-        <image x="-30" y="-30" xlinkHref={this.props.markerImagePath} />
+        <image x="-6" y="-6" width="12" xlinkHref={this.props.markerImagePath} />
       </Marker>
     );
 
@@ -161,38 +139,40 @@ export default class SvgMap extends React.Component<IProps, IState> {
         width={this.props.width}
         height={this.props.height}
         style={mapStyle}
-        projection={this.getProjection}
+        projection={
+          // Workaround for incorrect type definition in @types/react-simple-maps.
+          /* @ts-ignore */
+          this.getProjection() as () => GeoProjection
+        }
         projectionConfig={this.projectionConfig}>
         <ZoomableGroup
           center={this.state.zoomCenter}
           zoom={this.state.zoomLevel}
-          disablePanning={false}
+          onTransitionEnd={this.removeOldViewportBboxes}
           style={zoomableGroupStyle}>
-          <Geographies geography={geographyData} disableOptimization={true}>
-            {(geographies, projection) => {
+          <Geographies geography={geographyData}>
+            {({ geographies }) => {
               return this.state.visibleGeometry.map(({ id }) => (
                 <Geography
                   key={id}
                   geography={geographies[parseInt(id, 10)]}
-                  projection={projection}
                   style={geographyStyle}
                 />
               ));
             }}
           </Geographies>
-          <Geographies geography={statesProvincesLinesData} disableOptimization={true}>
-            {(geographies, projection) => {
+          <Geographies geography={statesProvincesLinesData}>
+            {({ geographies }) => {
               return this.state.visibleStatesProvincesLines.map(({ id }) => (
                 <Geography
                   key={id}
                   geography={geographies[parseInt(id, 10)]}
-                  projection={projection}
                   style={stateProvinceLineStyle}
                 />
               ));
             }}
           </Geographies>
-          <Markers>{[userMarker]}</Markers>
+          {[userMarker]}
         </ZoomableGroup>
       </ComposableMap>
     );
@@ -212,27 +192,14 @@ export default class SvgMap extends React.Component<IProps, IState> {
   }
 
   private getProjection(
-    width: number,
-    height: number,
-    config: {
-      scale?: number;
-      xOffset?: number;
-      yOffset?: number;
-      rotation?: [number, number, number];
-      precision?: number;
-    },
+    width: number = this.props.width,
+    height: number = this.props.height,
+    offset: [number, number] = this.props.offset,
   ) {
-    const scale = config.scale || 160;
-    const xOffset = config.xOffset || 0;
-    const yOffset = config.yOffset || 0;
-    const rotation = config.rotation || [0, 0, 0];
-    const precision = config.precision || 0.1;
-
     return geoTimes()
-      .scale(scale)
-      .translate([xOffset + width / 2, yOffset + height / 2])
-      .rotate(rotation)
-      .precision(precision);
+      .scale(this.projectionConfig.scale)
+      .translate([offset[0] + width / 2, offset[1] + height / 2])
+      .precision(0.1);
   }
 
   private getZoomCenter(
@@ -285,7 +252,7 @@ export default class SvgMap extends React.Component<IProps, IState> {
     const { width, height, center, offset, zoomLevel } = nextProps;
     const viewportBboxes = prevState === null ? [] : prevState.viewportBboxes;
 
-    const projection = this.getProjection(width, height, this.projectionConfig);
+    const projection = this.getProjection(width, height, offset);
     const zoomCenter = this.getZoomCenter(center, offset, projection, zoomLevel);
 
     const viewportBbox = this.getViewportGeoBoundingBox(
@@ -316,7 +283,7 @@ export default class SvgMap extends React.Component<IProps, IState> {
     };
   }
 
-  private removeOldViewportBboxes(state: IState) {
-    return { viewportBboxes: state.viewportBboxes.slice(-1) };
-  }
+  private removeOldViewportBboxes = () => {
+    this.setState((state) => ({ viewportBboxes: state.viewportBboxes.slice(-1) }));
+  };
 }