feat: google maps experience

solana-labs · Oct 3, 2019 · b560188 · b560188
1 parent e84f466
commit b560188
Show file tree

Hide file tree

Showing 16 changed files with 522 additions and 287 deletions.
diff --git a/.env b/.env
@@ -1,2 +1,3 @@
 SKIP_PREFLIGHT_CHECK=true
 REACT_APP_VERSION=$npm_package_version
+REACT_APP_GOOGLE_MAP_KEY=AIzaSyArM4e0n53tWyK5drjXP03OmovvVJHk8OU
diff --git a/src/v2/components/Dashboard/NetworkOverview/NodesMap/index.jsx b/src/v2/components/Dashboard/NetworkOverview/NodesMap/index.jsx
@@ -1,98 +1,27 @@
 import {Typography} from '@material-ui/core';
 import {observer} from 'mobx-react-lite';
 import React from 'react';
-import {
-  ComposableMap,
-  Geographies,
-  Geography,
-  Marker,
-  Markers,
-  ZoomableGroup,
-} from 'react-simple-maps';
-import {eq, map} from 'lodash/fp';
 import NodesStore from 'v2/stores/nodes';
-import OverviewStore from 'v2/stores/networkOverview';
 import Socket from 'v2/stores/socket';
-import MapTooltip from 'v2/components/UI/MapTooltip';
 import Loader from 'v2/components/UI/Loader';
-import {mapStyle, markerStyle} from 'v2/theme';
+import ValidatorsMap from 'v2/components/ValidatorsMap';
 
 import useStyles from './styles';
 
-const mapStyles = {
-  default: mapStyle,
-  hover: mapStyle,
-  pressed: mapStyle,
-};
-
 const NodesMap = () => {
   const classes = useStyles();
   const {mapMarkers} = NodesStore;
-  const {globalStats} = OverviewStore;
   const {isLoading} = Socket;
-
   if (isLoading) {
     return <Loader width="533" height="290" />;
   }
 
-  const mapConfig = {
-    projection: {
-      scale: 90,
-      rotation: [-11, -10, 0],
-    },
-    style: {
-      width: '100%',
-    },
-    center: [0, 20],
-  };
-
-  const renderMarker = marker => (
-    <Marker
-      key={marker.name}
-      style={markerStyle(eq(globalStats['!entLastLeader'], marker.name))}
-      marker={marker}
-    >
-      <MapTooltip
-        classes={{tooltip: classes.tooltip}}
-        title={() => (
-          <>
-            <div className={classes.tooltipTitle}>NODE: {marker.name}</div>
-            <div className={classes.tooltipDesc}>Gossip: {marker.gossip}</div>
-          </>
-        )}
-      >
-        <circle cx={0} cy={0} r={5} />
-      </MapTooltip>
-    </Marker>
-  );
   return (
-    <div className={classes.card}>
-      <Typography>Active Validators Map</Typography>
-      <ComposableMap
-        projectionConfig={mapConfig.projection}
-        width={530}
-        height={262}
-        style={mapConfig.style}
-      >
-        <ZoomableGroup center={mapConfig.center} disablePanning>
-          <Geographies
-            geography={`${process.env.PUBLIC_URL}/resources/world-50m-simplified.json`}
-          >
-            {(geographies, projection) =>
-              geographies.map((geography, i) => (
-                <Geography
-                  key={i}
-                  tabable={false}
-                  geography={geography}
-                  projection={projection}
-                  style={mapStyles}
-                />
-              ))
-            }
-          </Geographies>
-          <Markers>{map(renderMarker)(mapMarkers)}</Markers>
-        </ZoomableGroup>
-      </ComposableMap>
+    <div className={classes.card} style={{height: '100%'}}>
+      <Typography className={classes.mapTitle}>
+        Active Validators Map
+      </Typography>
+      <ValidatorsMap markers={mapMarkers} />
     </div>
   );
 };

diff --git a/src/v2/components/Dashboard/NetworkOverview/NodesMap/styles.js b/src/v2/components/Dashboard/NetworkOverview/NodesMap/styles.js
@@ -6,23 +6,14 @@ export default makeStyles(theme => ({
     background: getColor('grey2')(theme),
     maxHeight: 290,
     overflow: 'hidden',
-    padding: '14px 35px',
+    height: '100%',
+    border: `1px solid ${getColor('grey5')(theme)}`,
+    position: 'relative',
   },
-  tooltip: {
-    background: '#fff',
-    color: getColor('dark')(theme),
-    padding: 10,
-    borderRadius: 0,
-  },
-  tooltipTitle: {
-    fontSize: 15,
-    marginBottom: 4,
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-  },
-  tooltipDesc: {
-    fontSize: 12,
-    color: getColor('grey3')(theme),
+  mapTitle: {
+    position: 'absolute',
+    zIndex: 1000,
+    left: 24,
+    top: 13,
   },
 }));
diff --git a/src/v2/components/Dashboard/NetworkOverview/styles.js b/src/v2/components/Dashboard/NetworkOverview/styles.js
@@ -15,7 +15,7 @@ export default makeStyles(theme => ({
   },
   mapCard: {
     height: 306,
-    '& svg': {
+    '& > svg': {
       width: '100%',
       height: 295,
       minHeight: 290,

diff --git a/src/v2/components/UI/Avatar/index.jsx b/src/v2/components/UI/Avatar/index.jsx
@@ -1,5 +1,6 @@
 // @flow
 import React from 'react';
+import {observer} from 'mobx-react-lite';
 import BaseAvatar from '@material-ui/core/Avatar';
 import theme from 'v2/theme';
 import getColor from 'v2/utils/getColor';
@@ -45,4 +46,4 @@ const Avatar = ({
   return <BaseAvatar src={avatarUrl} style={avatarStyle} />;
 };
 
-export default Avatar;
+export default observer(Avatar);
diff --git a/src/v2/components/Validators/Detail/index.jsx b/src/v2/components/Validators/Detail/index.jsx
@@ -3,41 +3,24 @@ import {Container, useTheme} from '@material-ui/core';
 import {observer} from 'mobx-react-lite';
 import useMediaQuery from '@material-ui/core/useMediaQuery/useMediaQuery';
 import React, {useEffect} from 'react';
-import {map, find, eq} from 'lodash/fp';
+import {map, find} from 'lodash/fp';
 import {Match} from 'react-router-dom';
-import getUptime from 'v2/utils/getUptime';
 
-import {
-  ComposableMap,
-  Geographies,
-  Geography,
-  Marker,
-  Markers,
-  ZoomableGroup,
-} from 'react-simple-maps';
+import getUptime from 'v2/utils/getUptime';
 import SectionHeader from 'v2/components/UI/SectionHeader';
 import NodesStore from 'v2/stores/nodes';
-import OverviewStore from 'v2/stores/networkOverview';
-import {mapStyle, markerStyle} from 'v2/theme';
-import MapTooltip from 'v2/components/UI/MapTooltip';
 import HelpLink from 'v2/components/HelpLink';
 import Button from 'v2/components/UI/Button';
 import Avatar from 'v2/components/UI/Avatar';
 import Mixpanel from 'v2/mixpanel';
 import CopyBtn from 'v2/components/UI/CopyBtn';
 
-import {LAMPORT_SOL_RATIO} from '../../../constants';
+import {LAMPORT_SOL_RATIO} from 'v2/constants';
+import ValidatorsMap from 'v2/components/ValidatorsMap';
 import useStyles from './styles';
 
-const mapStyles = {
-  default: mapStyle,
-  hover: mapStyle,
-  pressed: mapStyle,
-};
-
 const ValidatorsDetail = ({match}: {match: Match}) => {
   const {validators, inactiveValidators, totalStaked} = NodesStore;
-  const {globalStats} = OverviewStore;
 
   const classes = useStyles();
   const theme = useTheme();
@@ -58,27 +41,15 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
     return <div>Loading...</div>;
   }
 
-  const {nodePubkey, gossip, activatedStake, commission, identity = {}} = node;
-
-  const renderMarker = () => (
-    <Marker
-      style={markerStyle(eq(globalStats['!entLastLeader'], nodePubkey))}
-      marker={node}
-    >
-      <MapTooltip
-        classes={{tooltip: classes.tooltip}}
-        title={() => (
-          <>
-            <div className={classes.tooltipTitle}>NODE: {nodePubkey}</div>
-            <div className={classes.tooltipDesc}>Gossip: {gossip}</div>
-          </>
-        )}
-      >
-        <circle cx={0} cy={0} r={5} />
-      </MapTooltip>
-    </Marker>
-  );
-
+  const {
+    nodePubkey,
+    gossip,
+    activatedStake,
+    commission,
+    identity = {},
+    coordinates,
+  } = node;
+  const markers = [{gossip, coordinates, name: nodePubkey}];
   const specs = [
     {
       label: 'Address',
@@ -152,18 +123,6 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
     },
   ];
 
-  const mapConfig = {
-    projection: {
-      scale: 85,
-      rotation: [-11, 0, 0],
-    },
-    style: {
-      width: '100%',
-      height: 'auto',
-    },
-    center: [0, 20],
-  };
-
   const renderSpec = ({label, value}: {label: string, value: string}) => (
     <li key={label}>
       <div className={classes.label}>
@@ -216,32 +175,8 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
           )}
           {map(renderSpec)(specs)}
         </ul>
-        <div>
-          <ComposableMap
-            projectionConfig={mapConfig.projection}
-            width={390}
-            height={240}
-            style={mapConfig.style}
-          >
-            <ZoomableGroup center={mapConfig.center} disablePanning>
-              <Geographies
-                geography={`${process.env.PUBLIC_URL}/resources/world-50m-simplified.json`}
-              >
-                {(geographies, projection) =>
-                  geographies.map((geography, i) => (
-                    <Geography
-                      key={i}
-                      tabable={false}
-                      geography={geography}
-                      projection={projection}
-                      style={mapStyles}
-                    />
-                  ))
-                }
-              </Geographies>
-              <Markers>{node.coordinates && renderMarker()}</Markers>
-            </ZoomableGroup>
-          </ComposableMap>
+        <div className={classes.map}>
+          <ValidatorsMap markers={markers} />
         </div>
       </div>
     </Container>

diff --git a/src/v2/components/Validators/Detail/styles.js b/src/v2/components/Validators/Detail/styles.js
@@ -97,4 +97,10 @@ export default makeStyles(theme => ({
     alignItem: 'center',
     color: getColor('main')(theme),
   },
+  map: {
+    height: 500,
+    [theme.breakpoints.down('sm')]: {
+      height: 250,
+    },
+  },
 }));