Display location on map node details

packages/frontend/src/components/Chain.tsx

@@ -118,7 +118,7 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
       }
       {
         this.nodes().map((node) => {
-          const location = node.location || [0, 0] as Types.NodeLocation;
+          const location = node.location || [0, 0, ''] as Types.NodeLocation;
           // const location = [51.4825891, -0.0164137] as Types.NodeLocation; // Greenwich
           // const location = [52.2330653, 20.921111] as Types.NodeLocation; // Warsaw
           // const location = [48.8589507, 2.2770201] as Types.NodeLocation; // Paris

packages/frontend/src/components/Node.css

@@ -12,6 +12,11 @@
   cursor: pointer;
 }
 
+.Node-Location:hover {
+  z-index: 2;
+  background: #fff;
+}
+
 .Node-details {
   display: none;
   min-width: 335px;

packages/frontend/src/components/Node.tsx

@@ -5,6 +5,7 @@ import { Types, Maybe } from '@dotstats/common';
 
 import nodeIcon from '../icons/server.svg';
 import nodeTypeIcon from '../icons/terminal.svg';
+import nodeLocationIcon from '../icons/location.svg';
 import peersIcon from '../icons/broadcast.svg';
 import transactionsIcon from '../icons/inbox.svg';
 import blockIcon from '../icons/package.svg';
@@ -68,10 +69,14 @@ export namespace Node {
   }
 
   export function Location(props: Props & PixelPosition) {
-    const { left, top } = props;
+    const { left, top, location } = props;
     const [name, implementation, version] = props.nodeDetails;
     const [height, hash, blockTime, blockTimestamp, propagationTime] = props.blockDetails;
 
+    if (!location) {
+      return null;
+    }
+
     return (
       <div className="Node-Location" style={{ left, top }}>
         <table className="Node-details">
@@ -82,6 +87,9 @@ export namespace Node {
             <tr>
               <td><Icon src={nodeTypeIcon} alt="Implementation" /></td><td colSpan={5}>{implementation} v{version}</td>
             </tr>
+            <tr>
+              <td><Icon src={nodeLocationIcon} alt="Location" /></td><td colSpan={5}>{location[2]}</td>
+            </tr>
             <tr>
               <td><Icon src={blockIcon} alt="Block" /></td><td colSpan={5}>#{formatNumber(height)}</td>
             </tr>