From f8efa6107718d9b2ae93f2e6e410efd921c6eabe Mon Sep 17 00:00:00 2001
From: Manuel Calavera <diserkin@gmail.com>
Date: Tue, 29 Oct 2019 16:48:45 -0700
Subject: [PATCH] feat: new style map markers

---
 .../NetworkOverview/NodesMap/index.jsx        |  4 +--
 src/v2/components/Validators/Detail/index.jsx |  8 ++---
 src/v2/components/Validators/Table/index.jsx  | 33 ++++++-------------
 src/v2/components/Validators/index.jsx        | 10 ++----
 src/v2/components/ValidatorsMap/Marker.jsx    | 31 ++++++++++++++---
 src/v2/components/ValidatorsMap/index.jsx     |  2 +-
 src/v2/components/ValidatorsMap/styles.js     | 20 ++++++++++-
 src/v2/stores/nodes.js                        | 32 +++---------------
 8 files changed, 68 insertions(+), 72 deletions(-)

diff --git a/src/v2/components/Dashboard/NetworkOverview/NodesMap/index.jsx b/src/v2/components/Dashboard/NetworkOverview/NodesMap/index.jsx
index 342c4a1f..b117fdd7 100644
--- a/src/v2/components/Dashboard/NetworkOverview/NodesMap/index.jsx
+++ b/src/v2/components/Dashboard/NetworkOverview/NodesMap/index.jsx
@@ -10,7 +10,7 @@ import useStyles from './styles';
 
 const NodesMap = () => {
   const classes = useStyles();
-  const {mapMarkers} = NodesStore;
+  const {validators} = NodesStore;
   const {isLoading} = Socket;
   if (isLoading) {
     return <Loader width="533" height="290" />;
@@ -21,7 +21,7 @@ const NodesMap = () => {
       <Typography className={classes.mapTitle}>
         Active Validators Map
       </Typography>
-      <ValidatorsMap markers={mapMarkers} />
+      <ValidatorsMap markers={validators} />
     </div>
   );
 };
diff --git a/src/v2/components/Validators/Detail/index.jsx b/src/v2/components/Validators/Detail/index.jsx
index 61161c34..191d1963 100644
--- a/src/v2/components/Validators/Detail/index.jsx
+++ b/src/v2/components/Validators/Detail/index.jsx
@@ -5,7 +5,6 @@ import useMediaQuery from '@material-ui/core/useMediaQuery/useMediaQuery';
 import React, {useEffect} from 'react';
 import {map, find} from 'lodash/fp';
 import {Match} from 'react-router-dom';
-import getUptime from 'v2/utils/getUptime';
 import SectionHeader from 'v2/components/UI/SectionHeader';
 import NodesStore from 'v2/stores/nodes';
 import HelpLink from 'v2/components/HelpLink';
@@ -33,8 +32,6 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
     find({nodePubkey: params.id})(validators) ||
     find({nodePubkey: params.id})(inactiveValidators);
 
-  const uptime = getUptime(node);
-
   if (!node) {
     return <div>Loading...</div>;
   }
@@ -47,6 +44,7 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
     coordinates,
     stakedSol,
     stakedSolPercent,
+    calcUptime,
   } = node;
 
   const markers = [{gossip, coordinates, name: nodePubkey}];
@@ -66,7 +64,7 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
     {
       label: 'Staked SOL',
       hint: '',
-      value: `${stakedSol} (${stakedSolPercent}%)`,
+      value: stakedSol ? `${stakedSol} (${stakedSolPercent}%)` : 'N/A',
     },
     {
       label: 'Website',
@@ -84,7 +82,7 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
     {
       label: 'Uptime',
       hint: '',
-      value: `${uptime}%`,
+      value: `${calcUptime}%`,
     },
     {
       label: 'keybase',
diff --git a/src/v2/components/Validators/Table/index.jsx b/src/v2/components/Validators/Table/index.jsx
index 752d6f6d..505499ed 100644
--- a/src/v2/components/Validators/Table/index.jsx
+++ b/src/v2/components/Validators/Table/index.jsx
@@ -15,7 +15,6 @@ import {observer} from 'mobx-react-lite';
 import {Link} from 'react-router-dom';
 import {eq, map, concat} from 'lodash/fp';
 import NodesStore from 'v2/stores/nodes';
-import getUptime from 'v2/utils/getUptime';
 import Table from 'v2/components/UI/Table';
 import Socket from 'v2/stores/socket';
 import Loader from 'v2/components/UI/Loader';
@@ -71,13 +70,13 @@ const ValidatorsTable = ({separate}: {separate: boolean}) => {
   }
 
   const renderRow = ({data: row}) => {
-    const uptime = row.uptime && getUptime(row);
     const {
       identity = {},
       nodePubkey,
       stakedSol,
       stakedSolPercent,
-      commission,
+      calcCommission,
+      calcUptime,
     } = row;
     return (
       <TableRow hover key={nodePubkey}>
@@ -89,27 +88,21 @@ const ValidatorsTable = ({separate}: {separate: boolean}) => {
           />
         </TableCell>
         <TableCell>
-          <div>
-            {stakedSol || 'N/A'} ({stakedSolPercent}%)
-          </div>
+          <div>{stakedSol ? `${stakedSol} (${stakedSolPercent}%)` : 'N/A'}</div>
         </TableCell>
-        <TableCell>
-          {commission || 'N/A'}
-          {Boolean(commission) &&
-            ` (${(100 * (commission / 0xff)).toFixed(3)}%)`}
-        </TableCell>
-        <TableCell>{(uptime && uptime + '%') || 'Unavailable'}</TableCell>
+        <TableCell>{calcCommission ? `${calcCommission}%` : 'N/A'}</TableCell>
+        <TableCell>{calcUptime ? `${calcUptime}%` : 'Unavailable'}</TableCell>
       </TableRow>
     );
   };
   const renderCard = card => {
-    const uptime = card.uptime && getUptime(card);
     const {
       identity = {},
       nodePubkey,
       stakedSol,
       stakedSolPercent,
-      commission,
+      calcCommission,
+      calcUptime,
     } = card;
     const data = [
       {
@@ -124,21 +117,15 @@ const ValidatorsTable = ({separate}: {separate: boolean}) => {
       },
       {
         label: 'Stake',
-        value: `${stakedSol || 'N/A'} (${stakedSolPercent}%)`,
+        value: stakedSol ? `${stakedSol} (${stakedSolPercent}%)` : 'N/A',
       },
       {
         label: 'Commission',
-        value: (
-          <div>
-            {commission || 'N/A'}
-            {Boolean(commission) &&
-              ` (${(100 * (commission / 0xff)).toFixed(3)}%)`}
-          </div>
-        ),
+        value: <div>{calcCommission ? `${calcCommission}%` : 'N/A'}</div>,
       },
       {
         label: 'Uptime',
-        value: (uptime && uptime + '%') || 'Unavailable',
+        value: calcUptime ? `${calcUptime}%` : 'Unavailable',
       },
     ];
     return <TableCard vertical={separate} key={nodePubkey} data={data} />;
diff --git a/src/v2/components/Validators/index.jsx b/src/v2/components/Validators/index.jsx
index 5af7aca3..a54f1b53 100644
--- a/src/v2/components/Validators/index.jsx
+++ b/src/v2/components/Validators/index.jsx
@@ -19,13 +19,7 @@ import {LAMPORT_SOL_RATIO} from '../../constants';
 
 const Validators = () => {
   const classes = useStyles();
-  const {
-    supply,
-    validators,
-    fetchClusterInfo,
-    totalStaked,
-    mapMarkers,
-  } = NodesStore;
+  const {supply, validators, fetchClusterInfo, totalStaked} = NodesStore;
   const {isLoading} = Socket;
   useEffect(() => {
     fetchClusterInfo();
@@ -120,7 +114,7 @@ const Validators = () => {
                 Active Validators Map
                 <HelpLink text="" term="" />
               </Typography>
-              <ValidatorsMap markers={mapMarkers} />
+              <ValidatorsMap markers={validators} />
             </div>
           )}
         </Grid>
diff --git a/src/v2/components/ValidatorsMap/Marker.jsx b/src/v2/components/ValidatorsMap/Marker.jsx
index 300e0f81..b16809bb 100644
--- a/src/v2/components/ValidatorsMap/Marker.jsx
+++ b/src/v2/components/ValidatorsMap/Marker.jsx
@@ -3,19 +3,42 @@ import React from 'react';
 import MapTooltip from 'v2/components/UI/MapTooltip';
 import Avatar from 'v2/components/UI/Avatar';
 
+import ValidatorName from 'v2/components//UI/ValidatorName';
 import useStyles from './styles';
 
 const Marker = ({scale, marker}: {scale: number, marker: any}) => {
   const classes = useStyles();
   const transformScale = scale < 4 ? scale / 4 : 1;
+  const {
+    nodePubkey,
+    identity,
+    calcCommission,
+    calcUptime,
+    stakedSol,
+    stakedSolPercent,
+  } = marker;
+
   return (
     <MapTooltip
       classes={{tooltip: classes.tooltip}}
       title={() => (
-        <>
-          <div className={classes.tooltipTitle}>NODE: {marker.name}</div>
-          <div className={classes.tooltipDesc}>Gossip: {marker.gossip}</div>
-        </>
+        <div className={classes.inner}>
+          <ValidatorName
+            pubkey={nodePubkey}
+            name={identity.name}
+            avatar={identity.avatarUrl}
+          />
+          <div className={classes.info}>
+            <div>
+              Total Sol:{' '}
+              {stakedSol ? `${stakedSol} (${stakedSolPercent}%)` : 'N/A'}
+            </div>
+            <div>
+              Commission: {calcCommission ? `${calcCommission}%` : 'N/A'}
+            </div>
+            <div>Uptime: {calcUptime ? `${calcUptime}%` : 'Unavailable'}</div>
+          </div>
+        </div>
       )}
     >
       <div
diff --git a/src/v2/components/ValidatorsMap/index.jsx b/src/v2/components/ValidatorsMap/index.jsx
index a6347745..82a42a22 100644
--- a/src/v2/components/ValidatorsMap/index.jsx
+++ b/src/v2/components/ValidatorsMap/index.jsx
@@ -104,7 +104,7 @@ const renderMarkers = zoom =>
   map(marker => {
     return (
       <Marker
-        key={get('name')(marker)}
+        key={get('nodePubkey')(marker)}
         lng={get('coordinates[0]')(marker)}
         lat={get('coordinates[1]')(marker)}
         scale={zoom}
diff --git a/src/v2/components/ValidatorsMap/styles.js b/src/v2/components/ValidatorsMap/styles.js
index 4ea28097..a4db4c3a 100644
--- a/src/v2/components/ValidatorsMap/styles.js
+++ b/src/v2/components/ValidatorsMap/styles.js
@@ -5,8 +5,10 @@ export default makeStyles(theme => ({
   tooltip: {
     background: '#fff',
     color: getColor('dark')(theme),
-    padding: 10,
+    padding: `10px 18px`,
     borderRadius: 0,
+    maxWidth: 300,
+    zIndex: 1000,
   },
   tooltipTitle: {
     fontSize: 15,
@@ -25,4 +27,20 @@ export default makeStyles(theme => ({
       transform: 'scale(2)',
     },
   },
+  inner: {
+    '& a': {
+      color: getColor('greenDark')(theme),
+      fontSize: 21,
+    },
+  },
+  info: {
+    marginTop: 10,
+    fontSize: 17,
+    lineHeight: '30px',
+    '& > div': {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    },
+  },
 }));
diff --git a/src/v2/stores/nodes.js b/src/v2/stores/nodes.js
index 136737b2..ec6f2ccd 100644
--- a/src/v2/stores/nodes.js
+++ b/src/v2/stores/nodes.js
@@ -1,6 +1,7 @@
-import {filter, reject, map, getOr} from 'lodash/fp';
+import {filter, reject, map} from 'lodash/fp';
 import {action, computed, decorate, observable, flow} from 'mobx';
 import * as API from 'v2/api/stats';
+import getUptime from 'v2/utils/getUptime';
 
 import {LAMPORT_SOL_RATIO} from '../constants';
 
@@ -8,6 +9,8 @@ const addNetworkSolInfo = totalStaked => node => ({
   ...node,
   stakedSol: (node.activatedStake * LAMPORT_SOL_RATIO).toFixed(8),
   stakedSolPercent: (100 * (node.activatedStake / totalStaked)).toFixed(3),
+  calcCommission: (100 * (node.commission / 0xff)).toFixed(3),
+  calcUptime: getUptime(node.uptime),
 });
 
 class Store {
@@ -36,32 +39,6 @@ class Store {
     }
   });
 
-  get mapMarkers() {
-    if (!this.network.length) {
-      return [];
-    }
-
-    try {
-      return map(
-        ({nodePubkey: pubkey = '', tpu: gossip, coordinates, identity}) => ({
-          pubkey,
-          gossip,
-          coordinates:
-            -180 < coordinates[0] &&
-            coordinates[0] < 180 &&
-            (-90 < coordinates[1] && coordinates[1] < 90)
-              ? coordinates
-              : [0, 0],
-          name: getOr(pubkey, 'name')(identity),
-          avatarUrl: getOr('', 'avatarUrl')(identity),
-        }),
-      )(this.validators);
-    } catch (e) {
-      console.error('mapMarkers()', e);
-      return [];
-    }
-  }
-
   get validators() {
     return filter({what: 'Validator'})(this.network);
   }
@@ -80,7 +57,6 @@ decorate(Store, {
   supply: observable,
   stakedTokens: observable,
   updateClusterInfo: action.bound,
-  mapMarkers: computed,
   validators: computed,
   activeValidators: computed,
   inactiveValidators: computed,