Working on map view

packages/frontend/src/components/Chain.css

@@ -8,12 +8,35 @@
 
 .Chain-content-container {
   position: absolute;
-  left: 0; /*80px;*/
+  left: 0;
   right: 0;
   bottom: 0;
   top: 148px;
 }
 
+.Chain-map {
+  background: url('../assets/world-map.svg') no-repeat;
+  background-size: contain;
+  background-position: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.Chain-map-node {
+  width: 10px;
+  height: 10px;
+  background: #f00; /* #d64ca8;*/
+  border-radius: 5px;
+  margin-left: -5px;
+  margin-top: -5px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
 .Chain-content {
   width: 100%;
   min-height: 100%;

packages/frontend/src/components/Chain.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { State } from '../state';
+import { State as AppState } from '../state';
 import { formatNumber } from '../utils';
 import { Tile, Icon, Node, Ago } from './';
 
@@ -17,7 +17,11 @@ import './Chain.css';
 
 export namespace Chain {
   export interface Props {
-    state: Readonly<State>
+    appState: Readonly<AppState>;
+  }
+
+  export interface State {
+    display: 'map' | 'table';
   }
 }
 
@@ -34,42 +38,75 @@ function sortNodes(a: Node.Props, b: Node.Props): number {
   return aPropagation - bPropagation;
 }
 
-export function Chain(props: Chain.Props) {
-  const { best, blockTimestamp, blockAverage } = props.state;
+export class Chain extends React.Component<Chain.Props, Chain.State> {
+  constructor(props: Chain.Props) {
+    super(props);
 
-  const nodes = Array.from(props.state.nodes.values()).sort(sortNodes);
+    this.state = {
+      display: 'table'
+    };
+  }
 
-  return (
-    <div className="Chain">
-      <div className="Chain-header">
-        <Tile icon={blockIcon} title="Best Block">#{formatNumber(best)}</Tile>
-        <Tile icon={blockTimeIcon} title="Avgerage Time">{ blockAverage == null ? '-' : (blockAverage / 1000).toFixed(3) + 's' }</Tile>
-        <Tile icon={lastTimeIcon} title="Last Block"><Ago when={blockTimestamp} /></Tile>
-      </div>
-      <div className="Chain-content-container">
-        <div className="Chain-content">
-          <table className="Chain-node-list">
-            <thead>
-              <tr>
-                <th><Icon src={nodeIcon} alt="Node" /></th>
-                <th><Icon src={nodeTypeIcon} alt="Implementation" /></th>
-                <th><Icon src={peersIcon} alt="Peer Count" /></th>
-                <th><Icon src={transactionsIcon} alt="Transactions in Queue" /></th>
-                <th><Icon src={blockIcon} alt="Block" /></th>
-                <th><Icon src={blockHashIcon} alt="Block Hash" /></th>
-                <th><Icon src={blockTimeIcon} alt="Block Time" /></th>
-                <th><Icon src={propagationTimeIcon} alt="Block Propagation Time" /></th>
-                <th><Icon src={lastTimeIcon} alt="Last Block Time" /></th>
-              </tr>
-            </thead>
-            <tbody>
-            {
-              nodes.map((node) => <Node key={node.id} {...node} />)
-            }
-            </tbody>
-          </table>
+  public render() {
+    const { best, blockTimestamp, blockAverage } = this.props.appState;
+
+    return (
+      <div className="Chain">
+        <div className="Chain-header">
+          <Tile icon={blockIcon} title="Best Block">#{formatNumber(best)}</Tile>
+          <Tile icon={blockTimeIcon} title="Avgerage Time">{ blockAverage == null ? '-' : (blockAverage / 1000).toFixed(3) + 's' }</Tile>
+          <Tile icon={lastTimeIcon} title="Last Block"><Ago when={blockTimestamp} /></Tile>
+        </div>
+        <div className="Chain-content-container">
+          <div className="Chain-content">
+          {
+            this.state.display === 'table'
+              ? this.renderTable()
+              : this.renderMap()
+          }
+          </div>
         </div>
       </div>
-    </div>
-  );
+    );
+  }
+
+  private renderMap() {
+    // return <ReactSVG path={worldMap} className="Chain-map" />;
+    return (
+      <div className="Chain-map">
+      {
+        this.nodes().map((node) => <div key={node.id} className="Chain-map-node" data-foo={JSON.stringify(node)} />)
+      }
+      </div>
+    );
+  }
+
+  private renderTable() {
+    return (
+      <table className="Chain-node-list">
+        <thead>
+          <tr>
+            <th><Icon src={nodeIcon} alt="Node" /></th>
+            <th><Icon src={nodeTypeIcon} alt="Implementation" /></th>
+            <th><Icon src={peersIcon} alt="Peer Count" /></th>
+            <th><Icon src={transactionsIcon} alt="Transactions in Queue" /></th>
+            <th><Icon src={blockIcon} alt="Block" /></th>
+            <th><Icon src={blockHashIcon} alt="Block Hash" /></th>
+            <th><Icon src={blockTimeIcon} alt="Block Time" /></th>
+            <th><Icon src={propagationTimeIcon} alt="Block Propagation Time" /></th>
+            <th><Icon src={lastTimeIcon} alt="Last Block Time" /></th>
+          </tr>
+        </thead>
+        <tbody>
+        {
+          this.nodes().sort(sortNodes).map((node) => <Node key={node.id} {...node} />)
+        }
+        </tbody>
+      </table>
+    );
+  }
+
+  private nodes() {
+    return Array.from(this.props.appState.nodes.values());
+  }
 }

packages/frontend/src/components/Chains.css

@@ -29,7 +29,7 @@
   padding: 0;
   margin: 0;
   position: absolute;
-  right: 6px;
+  right: 12px;
   top: 6px;
 }
 
@@ -38,10 +38,10 @@
   margin: 0;
   height: 24px;
   width: 24px;
-  background: #fff;
-  border: 2px solid #fff;
+  background: #3c3c3b;
+  border: 2px solid #3c3c3b;
   border-radius: 24px;
-  color: #555;
+  color: #ccc;
 }
 
 .Chains-node-count {

packages/frontend/src/components/Node.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { formatNumber, trimHash } from '../utils';
 import { Ago } from './Ago';
-import { Types } from '@dotstats/common';
+import { Types, Maybe } from '@dotstats/common';
 
 export namespace Node {
   export interface Props {
@@ -9,6 +9,7 @@ export namespace Node {
     nodeDetails: Types.NodeDetails,
     nodeStats: Types.NodeStats,
     blockDetails: Types.BlockDetails,
+    location: Maybe<Types.NodeLocation>,
   }
 }