draw unknown locations somewhere near ancient Atlantis

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghost-telemetry-frontend",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "author": "Uncle f4tso <f4ts0@ghostchain.io>",
   "license": "GPL-3.0",
   "description": "Ghost Telemetry frontend",

src/components/Map/Location.tsx

@@ -21,6 +21,11 @@ import './Location.css';
 
 export type LocationQuarter = 0 | 1 | 2 | 3;
 
+export interface RandomLatLon {
+  lat: number;
+  lon: number;
+}
+
 export interface LocationOffsets {
   leftOffset: number;
   topOffset: number;
@@ -50,10 +55,6 @@ export class Location extends React.Component<LocationProps, LocationState> {
     const { left, top, quarter } = position;
     const { height, propagationTime, city } = node;
 
-    if (!city) {
-      return null;
-    }
-
     let className = `Location Location-quarter${quarter}`;
 
     if (focused) {
@@ -118,7 +119,7 @@ export class Location extends React.Component<LocationProps, LocationState> {
             <td title="Location">
               <Icon src={nodeLocationIcon} />
             </td>
-            <td colSpan={5}>{city}</td>
+            <td colSpan={5}>{city ? city : "Somewhere on Earth"}</td>
           </tr>
           <tr>
             <td title="Block">

src/components/Map/Map.tsx

@@ -4,7 +4,7 @@ import ReactGA from "react-ga4";
 import { Types, Maybe } from '../../common';
 import { Filter } from '../';
 import { State as AppState, Node } from '../../state';
-import { Location, LocationQuarter, LocationPosition, LocationOffsets } from './';
+import { Location, LocationQuarter, LocationPosition, LocationOffsets, RandomLatLon } from './';
 import { viewport } from '../../utils';
 
 const MAP_RATIO = 800 / 350;
@@ -34,6 +34,7 @@ export class WorldMap extends React.Component<MapProps, MapState> {
     left: 0,
   };
 
+  public unknowns: Map<Types.NodeName, RandomLatLon> = new Map<Types.NodeName, RandomLatLon>();
   public offsets: Map<Types.NetworkId, LocationOffsets> = new Map<Types.NetworkId, LocationOffsets>();
 
   public usedLeftPositions: Set<number> = new Set<number>();
@@ -59,13 +60,20 @@ export class WorldMap extends React.Component<MapProps, MapState> {
       <div className="Map-container">
         <div className="Map">
           {nodes.map(node => {
-            const { lat, lon } = node;
+            let { lat, lon } = node;
-
             const focused = filter == null || filter(node);
 
             if (lat == null || lon == null) {
               // Skip nodes with unknown location
-              return null;
+              const unknown = this.unknowns.get(node.name);
+              if (unknown) {
+                  lat = unknown.lat as Types.Latitude;
+                  lon = unknown.lon as Types.Longitude;
+              } else {
+                  lat = parseFloat((Math.random() * 22.0315 + 27.2936).toFixed(4)) as Types.Latitude;
+                  lon = parseFloat((Math.random() * 21.2696 - 55.9863).toFixed(4)) as Types.Longitude;
+                  this.unknowns.set(node.name, { lat, lon });
+              }
             }
 
             const position = this.pixelPosition(node.networkId, lat, lon);