Don't sort the list on every render (#58)

packages/frontend/src/components/Chain/Chain.css

@@ -8,34 +8,14 @@
   position: relative;
 }
 
-
 .Chain-tabs {
   position: absolute;
-  right: 9px;
-  bottom: 0;
-  height: 36px;
+  right: 5px;
+  bottom: 10px;
   width: 200px;
   text-align: right;
 }
 
-.Chain-tab-unit {
-  display: inline-block;
-}
-
-.Chain-tab-unit .Icon {
-  margin-right: 1px;
-  font-size: 24px;
-  padding: 6px;
-  background: #ccc;
-  color: #555;
-  cursor: pointer;
-}
-
-.Chain-tab-unit-on .Icon {
-  background: #222;
-  color: #fff;
-}
-
 .Chain-content-container {
   position: absolute;
   left: 0;

packages/frontend/src/components/Chain/Chain.tsx

@@ -43,23 +43,6 @@ export namespace Chain {
   }
 }
 
-function sortNodes(a: AppState.Node, b: AppState.Node): number {
-  if (a.pinned === b.pinned) {
-    if (a.blockDetails[0] === b.blockDetails[0]) {
-      const aPropagation = a.blockDetails[4] == null ? Infinity : a.blockDetails[4] as number;
-      const bPropagation = b.blockDetails[4] == null ? Infinity : b.blockDetails[4] as number;
-
-      // Ascending sort by propagation time
-      return aPropagation - bPropagation;
-    }
-  } else {
-    return Number(b.pinned) - Number(a.pinned);
-  }
-
-  // Descending sort by block number
-  return b.blockDetails[0] - a.blockDetails[0];
-}
-
 export class Chain extends React.Component<Chain.Props, Chain.State> {
   constructor(props: Chain.Props) {
     super(props);
@@ -157,9 +140,7 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
           <Node.Row.Header settings={settings} />
           <tbody>
           {
-            nodes
-              .sort(sortNodes)
-              .map((node) => <Node.Row key={node.id} node={node} settings={settings} pins={pins} />)
+            nodes.map((node) => <Node.Row key={node.id} node={node} settings={settings} pins={pins} />)
           }
           </tbody>
         </table>
@@ -220,7 +201,7 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
   }
 
   private nodes(): AppState.Node[] {
-    return Array.from(this.props.appState.nodes.values());
+    return this.props.appState.sortedNodes;
   }
 
   private pixelPosition(lat: Types.Latitude, lon: Types.Longitude): Node.Location.Position {

packages/frontend/src/components/Chain/Tab.css

@@ -0,0 +1,24 @@
+
+.Chain-Tab {
+  display: inline-block;
+}
+
+.Chain-Tab .Icon {
+  margin-right: 5px;
+  font-size: 24px;
+  padding: 6px;
+  color: #555;
+  cursor: pointer;
+  padding: 10px;
+  border-radius: 40px;
+  transition: background-color 0.15s linear;
+}
+
+.Chain-Tab:hover .Icon {
+  background: #ccc;
+}
+
+.Chain-Tab-on .Icon, .Chain-Tab-on:hover .Icon {
+  background: #d64ca8;
+  color: #fff;
+}

packages/frontend/src/components/Chain/Tab.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { Chain } from './';
 import { Icon } from '../';
 
+import './Tab.css';
+
 export namespace Tab {
   export interface Props {
     label: string;
@@ -17,7 +19,7 @@ export class Tab extends React.Component<Tab.Props, {}> {
   public render() {
     const { label, icon, display, current } = this.props;
     const highlight = display === current;
-    const className = highlight ? 'Chain-tab-unit-on Chain-tab-unit' : 'Chain-tab-unit';
+    const className = highlight ? 'Chain-Tab-on Chain-Tab' : 'Chain-Tab';
 
     return (
       <div className={className} onClick={this.onClick}>