Map toggle, fix selecting chain

packages/frontend/src/components/Chain.css

@@ -8,6 +8,23 @@
   position: relative;
 }
 
+.Chain-map-toggle {
+  position: absolute;
+  right: 20px;
+  bottom: 0;
+  font-size: 32px;
+  padding: 6px;
+  background: #222;
+  color: #aaa;
+  cursor: pointer;
+  border-top: 2px solid #5e5e5e;
+  border-radius: 4px 4px 0 0;
+}
+
+.Chain-map-toggle-on {
+  color: #fff;
+}
+
 .Chain-content-container {
   position: absolute;
   left: 0;

packages/frontend/src/components/Chain.tsx

@@ -13,6 +13,7 @@ import blockHashIcon from '../icons/file-binary.svg';
 import blockTimeIcon from '../icons/history.svg';
 import propagationTimeIcon from '../icons/dashboard.svg';
 import lastTimeIcon from '../icons/watch.svg';
+import worldIcon from '../icons/globe.svg';
 
 const MAP_RATIO = 495 / 266; // width / height
 const HEADER = 148;
@@ -53,7 +54,7 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
     super(props);
 
     this.state = {
-      display: window.location.hash === '#map' ? 'map' : 'table',
+      display: 'table',
       map: {
         width: 0,
         height: 0,
@@ -94,6 +95,13 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
 
   public render() {
     const { best, blockTimestamp, blockAverage } = this.props.appState;
+    const { display } = this.state;
+
+    const toggleClass = ['Chain-map-toggle'];
+
+    if (display === 'map') {
+      toggleClass.push('Chain-map-toggle-on');
+    }
 
     return (
       <div className="Chain">
@@ -101,11 +109,12 @@ 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>
         <div className="Chain-content-container">
           <div className="Chain-content">
           {
-            this.state.display === 'table'
+            display === 'table'
               ? this.renderTable()
               : this.renderMap()
           }
@@ -115,8 +124,15 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
     );
   }
 
+  private toggleMap = () => {
+    if (this.state.display === 'map') {
+      this.setState({ display: 'table' });
+    } else {
+      this.setState({ display: 'map' });
+    }
+  }
+
   private renderMap() {
-    // return <ReactSVG path={worldMap} className="Chain-map" />;
     return (
       <div className="Chain-map">
       {

packages/frontend/src/components/Icon.tsx

@@ -3,9 +3,10 @@ import ReactSVG from 'react-svg';
 import './Icon.css';
 
 export interface Props {
-  src: string,
-  alt: string,
-  className?: string,
+  src: string;
+  alt: string;
+  className?: string;
+  onClick?: () => void;
 };
 
 export class Icon extends React.Component<{}, Props> {
@@ -16,8 +17,8 @@ export class Icon extends React.Component<{}, Props> {
   }
 
   public render() {
-    const { alt, className, src } = this.props;
+    const { alt, className, onClick, src } = this.props;
 
-    return <ReactSVG title={alt} className={`Icon ${ className || '' }`} path={src} />;
+    return <ReactSVG title={alt} className={`Icon ${ className || '' }`} path={src} onClick={onClick} />;
   }
 }