Tweak map, remove legacy version msg

packages/backend/src/Feed.ts

@@ -28,7 +28,7 @@ export default class Feed {
 
   public static feedVersion(): FeedMessage.Message {
     return {
-      action: Actions.FeedVersionLegacy,
+      action: Actions.FeedVersion,
       payload: VERSION
     };
   }

packages/common/src/feed.ts

@@ -16,7 +16,6 @@ import {
 } from './types';
 
 export const Actions = {
-  FeedVersionLegacy : 0xff as 0xff,
   FeedVersion      : 0x00 as 0x00,
   BestBlock        : 0x01 as 0x01,
   AddedNode        : 0x02 as 0x02,
@@ -39,12 +38,6 @@ export namespace Variants {
     action: Action;
   }
 
-  // TOOD: remove
-  export interface FeedVersionLegacyMessage extends MessageBase {
-    action: typeof Actions.FeedVersionLegacy;
-    payload: FeedVersion;
-  }
-
   export interface FeedVersionMessage extends MessageBase {
     action: typeof Actions.FeedVersion;
     payload: FeedVersion;
@@ -107,7 +100,6 @@ export namespace Variants {
 }
 
 export type Message =
-  | Variants.FeedVersionLegacyMessage
   | Variants.FeedVersionMessage
   | Variants.BestBlockMessage
   | Variants.AddedNodeMessage

packages/common/src/index.ts

@@ -6,4 +6,4 @@ import * as FeedMessage from './feed';
 
 export { Types, FeedMessage };
 
-export const VERSION: Types.FeedVersion = 3 as Types.FeedVersion;
+export const VERSION: Types.FeedVersion = 4 as Types.FeedVersion;

packages/frontend/src/Connection.ts

@@ -97,8 +97,6 @@ export class Connection {
 
     messages: for (const message of FeedMessage.deserialize(data)) {
       switch (message.action) {
-        // TODO: Kick legacy out on next update
-        case Actions.FeedVersionLegacy:
         case Actions.FeedVersion: {
           if (message.payload !== VERSION) {
             this.state = this.update({ status: 'upgrade-requested' });

packages/frontend/src/components/Chain.css

@@ -8,7 +8,7 @@
   position: relative;
 }
 
-.Chain-map-toggle {
+.Chain-map-toggle .Icon {
   position: absolute;
   right: 20px;
   bottom: 0;
@@ -21,7 +21,7 @@
   border-radius: 4px 4px 0 0;
 }
 
-.Chain-map-toggle-on {
+.Chain-map-toggle-on .Icon {
   color: #fff;
 }
 

packages/frontend/src/components/Chain.tsx

@@ -65,32 +65,13 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
   }
 
   public componentWillMount() {
-    const vp = viewport();
+    this.calculateMapDimensions();
 
-    vp.height -= HEADER;
+    window.addEventListener('resize', this.calculateMapDimensions);
+  }
 
-    const ratio = vp.width / vp.height;
-
-    let top = 0;
-    let left = 0;
-    let width = 0;
-    let height = 0;
-
-    if (ratio >= MAP_RATIO) {
-      console.log('wider');
-
-      width = Math.round(vp.height * MAP_RATIO);
-      height = Math.round(vp.height);
-      left = (vp.width - width) / 2;
-    } else {
-      console.log('taller');
-
-      width = Math.round(vp.width);
-      height = Math.round(vp.width / MAP_RATIO);
-      top = (vp.height - height) / 2;
-    }
-
-    this.setState({ map: { top, left, width, height }});
+  public componentWillUnmount() {
+    window.removeEventListener('resize', this.calculateMapDimensions);
   }
 
   public render() {
@@ -109,7 +90,9 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
           <Tile icon={blockIcon} title="Best Block">#{formatNumber(best)}</Tile>
           <Tile icon={blockTimeIcon} title="Avgerage Time">{ blockAverage == null ? '-' : secondsWithPrecision(blockAverage / 1000) }</Tile>
           <Tile icon={lastTimeIcon} title="Last Block"><Ago when={blockTimestamp} /></Tile>
-          <Icon src={worldIcon} alt="Toggle Map" className={toggleClass.join(' ')} onClick={this.toggleMap} />
+          <div className={toggleClass.join(' ')}>
+            <Icon src={worldIcon} alt="Toggle Map" onClick={this.toggleMap} />
+          </div>
         </div>
         <div className="Chain-content-container">
           <div className="Chain-content">
@@ -148,10 +131,11 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
           // const location = [36.7183391, -4.5193071]as Types.NodeLocation; // Malaga
 
           return (
-            <div
+            <span
               key={node.id}
               className="Chain-map-node"
               style={this.pixelPosition(location[0], location[1])}
+              title={node.nodeDetails[0]}
               data-location={JSON.stringify(node.location)}
             />
           );
@@ -161,15 +145,6 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
     );
   }
 
-  private pixelPosition(lat: Types.Latitude, lon: Types.Longitude): { left: number, top: number } {
-    const { map } = this.state;
-
-    const left = Math.round(((lon + 180) / 360) * map.width + map.left) - 35;
-    const top = Math.round(((-lat + 90) / 180) * map.height + map.top) + 4;
-
-    return { left, top }
-  }
-
   private renderTable() {
     return (
       <table className="Chain-node-list">
@@ -198,4 +173,38 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
   private nodes() {
     return Array.from(this.props.appState.nodes.values());
   }
+
+  private pixelPosition(lat: Types.Latitude, lon: Types.Longitude): { left: number, top: number } {
+    const { map } = this.state;
+
+    const left = Math.round(((lon + 180) / 360) * map.width + map.left) - 35;
+    const top = Math.round(((-lat + 90) / 180) * map.height + map.top) + 4;
+
+    return { left, top }
+  }
+
+  private calculateMapDimensions: () => void = () => {
+    const vp = viewport();
+
+    vp.height -= HEADER;
+
+    const ratio = vp.width / vp.height;
+
+    let top = 0;
+    let left = 0;
+    let width = 0;
+    let height = 0;
+
+    if (ratio >= MAP_RATIO) {
+      width = Math.round(vp.height * MAP_RATIO);
+      height = Math.round(vp.height);
+      left = (vp.width - width) / 2;
+    } else {
+      width = Math.round(vp.width);
+      height = Math.round(vp.width / MAP_RATIO);
+      top = (vp.height - height) / 2;
+    }
+
+    this.setState({ map: { top, left, width, height }});
+  }
 }