Do not leak tooltips outside of the map viewport

packages/frontend/src/components/Chain.tsx

@@ -122,10 +122,10 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
             return null;
           }
 
-          const { left, top } = this.pixelPosition(location[0], location[1]);
+          const { left, top, quarter } = this.pixelPosition(location[0], location[1]);
 
           return (
-            <Node.Location key={node.id} left={left} top={top} {...node} />
+            <Node.Location key={node.id} left={left} top={top} quarter={quarter} {...node} />
           );
         })
       }
@@ -158,7 +158,17 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
     const left = Math.round(((180 + lon) / 360) * map.width + map.left);
     const top = Math.round(((90 - lat) / 180) * map.height + map.top) * MAP_HEIGHT_ADJUST;
 
-    return { left, top }
+    let quarter = 0;
+
+    if (lon > 0) {
+      quarter |= 1;
+    }
+
+    if (lat < 0) {
+      quarter |= 2;
+    }
+
+    return { left, top, quarter: quarter as 0 | 1 | 2 | 3 };
   }
 
   private calculateMapDimensions: () => void = () => {

packages/frontend/src/components/Node/Location.css

@@ -49,8 +49,8 @@
 .Node-Location-details {
   min-width: 335px;
   position: absolute;
-  left: 16px;
-  top: -4px;
+  /*left: 16px;
+  top: -4px;*/
   font-family: monospace, sans-serif;
   background: #222;
   color: #fff;
@@ -58,6 +58,26 @@
   border-collapse: collapse;
 }
 
+.Node-Location-quarter0 .Node-Location-details {
+  left: 16px;
+  top: -4px;
+}
+
+.Node-Location-quarter1 .Node-Location-details {
+  right: 16px;
+  top: -4px;
+}
+
+.Node-Location-quarter2 .Node-Location-details {
+  left: 16px;
+  bottom: -4px;
+}
+
+.Node-Location-quarter3 .Node-Location-details {
+  right: 16px;
+  bottom: -4px;
+}
+
 .Node-Location-details td {
   text-align: left;
   padding: 0.5em 1em;
@@ -75,10 +95,10 @@
 
 @keyframes ping {
   from {
-    left: 2px;
-    right: 2px;
-    width: 0;
-    height: 0;
+    left: -1px;
+    top: -1px;
+    width: 6px;
+    height: 6px;
     border-color: rgba(255,255,255,1);
   }
 

packages/frontend/src/components/Node/Location.tsx

@@ -19,6 +19,7 @@ namespace Location {
   export interface Position {
     left: number;
     top: number;
+    quarter: 0 | 1 | 2 | 3;
   }
 
   export interface State {
@@ -30,7 +31,7 @@ class Location extends React.Component<AppState.Node & Location.Position, Locati
   public readonly state = { hover: false };
 
   public render() {
-    const { left, top, location } = this.props;
+    const { left, top, quarter, location } = this.props;
     const height = this.props.blockDetails[0];
     const propagationTime = this.props.blockDetails[4];
 
@@ -38,7 +39,7 @@ class Location extends React.Component<AppState.Node & Location.Position, Locati
       return null;
     }
 
-    let className = 'Node-Location';
+    let className = `Node-Location Node-Location-quarter${quarter}`;
 
     if (propagationTime != null) {
       className += ' Node-Location-synced';
@@ -61,7 +62,7 @@ class Location extends React.Component<AppState.Node & Location.Position, Locati
     const [height, hash, blockTime, blockTimestamp, propagationTime] = this.props.blockDetails;
 
     return (
-      <table className="Node-Location-details">
+      <table className="Node-Location-details Node-Location-details">
         <tbody>
           <tr>
             <td><Icon src={nodeIcon} alt="Node" /></td><td colSpan={5}>{name}</td>