feat: highlight validator leader on map

solana-labs · Aug 2, 2019 · 2b64b97 · 2b64b97
1 parent 17696e8
commit 2b64b97
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 31 deletions.
diff --git a/src/v2/components/Dashboard/NetworkOverview/NodesMap/index.jsx b/src/v2/components/Dashboard/NetworkOverview/NodesMap/index.jsx
@@ -9,8 +9,9 @@ import {
   Markers,
   ZoomableGroup,
 } from 'react-simple-maps';
-import {map} from 'lodash/fp';
+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 {mapStyle, markerStyle} from 'v2/theme';
@@ -27,6 +28,7 @@ const mapStyles = {
 const NodesMap = () => {
   const classes = useStyles();
   const {mapMarkers} = NodesStore;
+  const {globalStats} = OverviewStore;
   const {isLoading} = Socket;
 
   if (isLoading) {
@@ -45,7 +47,11 @@ const NodesMap = () => {
   };
 
   const renderMarker = marker => (
-    <Marker key={marker.name} style={markerStyle} marker={marker}>
+    <Marker
+      key={marker.name}
+      style={markerStyle(eq(globalStats['!entLastLeader'], marker.name))}
+      marker={marker}
+    >
       <MapTooltip
         classes={{tooltip: classes.tooltip}}
         title={() => (
@@ -59,9 +65,6 @@ const NodesMap = () => {
           cx={0}
           cy={0}
           r={5}
-          style={{
-            stroke: '#00FFAD',
-          }}
         />
       </MapTooltip>
     </Marker>

diff --git a/src/v2/components/Validators/Detail/index.jsx b/src/v2/components/Validators/Detail/index.jsx
@@ -3,7 +3,7 @@ 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} from 'lodash/fp';
+import {map, find, eq} from 'lodash/fp';
 import {Match} from 'react-router-dom';
 import {CopyToClipboard} from 'react-copy-to-clipboard';
 import {
@@ -16,15 +16,15 @@ import {
 } from 'react-simple-maps';
 import SectionHeader from 'v2/components/UI/SectionHeader';
 import NodesStore from 'v2/stores/nodes';
-import theme, {mapStyle, markerStyle} from 'v2/theme';
+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 getColor from 'v2/utils/getColor';
 import Button from 'v2/components/UI/Button';
 import Avatar from 'v2/components/UI/Avatar';
+import {ReactComponent as CopyIcon} from 'v2/assets/icons/copy.svg';
+import Mixpanel from 'v2/mixpanel';
 
-import {ReactComponent as CopyIcon} from '../../../assets/icons/copy.svg';
-import Mixpanel from '../../../mixpanel';
 import useStyles from './styles';
 
 const mapStyles = {
@@ -33,12 +33,9 @@ const mapStyles = {
   pressed: mapStyle,
 };
 
-const markerCircleStyle = {
-  stroke: getColor('main')(theme),
-};
-
 const ValidatorsDetail = ({match}: {match: Match}) => {
   const {validators} = NodesStore;
+  const {globalStats} = OverviewStore;
 
   const classes = useStyles();
   const theme = useTheme();
@@ -58,7 +55,10 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
   const {nodePubkey, gossip, stake, commission, identity = {}} = node;
 
   const renderMarker = () => (
-    <Marker style={markerStyle} marker={node}>
+    <Marker
+      style={markerStyle(eq(globalStats['!entLastLeader'], nodePubkey))}
+      marker={node}
+    >
       <MapTooltip
         classes={{tooltip: classes.tooltip}}
         title={() => (
@@ -68,7 +68,7 @@ const ValidatorsDetail = ({match}: {match: Match}) => {
           </>
         )}
       >
-        <circle cx={0} cy={0} r={5} style={markerCircleStyle} />
+        <circle cx={0} cy={0} r={5} />
       </MapTooltip>
     </Marker>
   );

diff --git a/src/v2/components/Validators/ValidatorsMap/index.jsx b/src/v2/components/Validators/ValidatorsMap/index.jsx
@@ -9,11 +9,11 @@ import {
   Markers,
   ZoomableGroup,
 } from 'react-simple-maps';
-import {map} from 'lodash/fp';
+import {eq, map} from 'lodash/fp';
 import nodesStore from 'v2/stores/nodes';
+import OverviewStore from 'v2/stores/networkOverview';
 import MapTooltip from 'v2/components/UI/MapTooltip';
-import theme, {mapStyle, markerStyle} from 'v2/theme';
-import getColor from 'v2/utils/getColor';
+import {mapStyle, markerStyle} from 'v2/theme';
 
 import useStyles from './styles';
 
@@ -23,13 +23,10 @@ const mapStyles = {
   pressed: mapStyle,
 };
 
-const markerCircleStyle = {
-  stroke: getColor('main')(theme),
-};
-
 const ValidatorsMap = () => {
   const classes = useStyles();
   const {mapMarkers} = nodesStore;
+  const {globalStats} = OverviewStore;
 
   const mapConfig = {
     projection: {
@@ -44,7 +41,11 @@ const ValidatorsMap = () => {
   };
 
   const renderMarker = marker => (
-    <Marker key={marker.name} style={markerStyle} marker={marker}>
+    <Marker
+      key={marker.name}
+      style={markerStyle(eq(globalStats['!entLastLeader'], marker.name))}
+      marker={marker}
+    >
       <MapTooltip
         classes={{tooltip: classes.tooltip}}
         title={() => (
@@ -54,7 +55,7 @@ const ValidatorsMap = () => {
           </>
         )}
       >
-        <circle cx={0} cy={0} r={5} style={markerCircleStyle} />
+        <circle cx={0} cy={0} r={5} />
       </MapTooltip>
     </Marker>
   );

diff --git a/src/v2/theme.js b/src/v2/theme.js
@@ -1,5 +1,8 @@
 import {createMuiTheme} from '@material-ui/core';
 
+const main = '#00FFAD';
+const violet = '#5A00A7';
+
 export default createMuiTheme({
   palette: {
     type: 'dark',
@@ -10,11 +13,12 @@ export default createMuiTheme({
       grey2: '#202020',
       grey3: '#979797',
       grey4: '#c4c4c4',
-      main: '#00FFAD',
+      main,
       white: '#fff',
       greenDark: '#00a771',
       primaryLoader: '#202020',
       secondaryLoader: '#404040',
+      violet,
       aqua: '#33f1ff',
       pink: '#f71ef4',
       blue: '#2069f6',
@@ -58,8 +62,8 @@ export const mapStyle = {
   outline: 'none',
 };
 
-export const markerStyle = {
-  default: {fill: '#00FFAD'},
-  hover: {fill: '#00FFAD'},
-  pressed: {fill: '#00FFAD'},
-};
+export const markerStyle = isLeader => ({
+  default: {fill: isLeader ? violet : main},
+  hover: {fill: isLeader ? violet : main},
+  pressed: {fill: isLeader ? violet : main},
+});