Sort chains by node count

packages/frontend/src/App.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Types } from '@dotstats/common';
 import { Chains, Chain, Ago } from './components';
-import { Connection } from './message';
+import { Connection } from './Connection';
 import { State } from './state';
 
 import './App.css';
@@ -12,7 +12,7 @@ export default class App extends React.Component<{}, State> {
     blockTimestamp: 0 as Types.Timestamp,
     timeDiff: 0 as Types.Milliseconds,
     subscribed: null,
-    chains: new Set(),
+    chains: new Map(),
     nodes: new Map()
   };
 

packages/frontend/src/Connection.ts

@@ -146,8 +146,8 @@ export class Connection {
         }
 
         case Actions.AddedChain: {
-          chains.add(message.payload);
-
+          const [label, nodeCount] = message.payload;
+          chains.set(label, nodeCount);
           this.autoSubscribe();
 
           break;
@@ -195,10 +195,22 @@ export class Connection {
   private autoSubscribe() {
     const { subscribed, chains } = this.state;
 
-    if (subscribed == null && chains.size) {
-      const first = chains.values().next().value;
+    if (subscribed) {
+      return;
+    }
 
-      this.subscribe(first);
+    let topLabel: Maybe<Types.ChainLabel> = null;
+    let topCount: Types.NodeCount = 0 as Types.NodeCount;
+
+    for (const [label, count] of chains.entries()) {
+      if (count > topCount) {
+        topLabel = label;
+        topCount = topCount;
+      }
+    }
+
+    if (topLabel) {
+      this.subscribe(topLabel);
     }
   }
 

packages/frontend/src/components/Chain.css

@@ -6,7 +6,7 @@
 
 .Chain-content {
   position: absolute;
-  left: 80px;
+  left: 0; /*80px;*/
   right: 0;
   min-height: 50vh;
   background: #222;

packages/frontend/src/components/Chains.tsx

@@ -1,14 +1,19 @@
 import * as React from 'react';
-import { Connection } from '../message';
+import { Connection } from '../Connection';
 import { Icon } from './Icon';
 import { Types, Maybe } from '@dotstats/common';
 
 import chainIcon from '../icons/link.svg';
 import './Chains.css';
 
+interface ChainData {
+  label: Types.ChainLabel;
+  nodeCount: Types.NodeCount;
+}
+
 export namespace Chains {
   export interface Props {
-    chains: Set<Types.ChainLabel>,
+    chains: Map<Types.ChainLabel, Types.NodeCount>,
     subscribed: Maybe<Types.ChainLabel>,
     connection: Promise<Connection>
   }
@@ -26,20 +31,28 @@ export class Chains extends React.Component<Chains.Props, {}> {
     );
   }
 
-  private renderChain(chain: Types.ChainLabel): React.ReactNode {
-    const className = chain === this.props.subscribed
+  private renderChain(chain: ChainData): React.ReactNode {
+    const { label, nodeCount } = chain;
+
+    const className = label === this.props.subscribed
       ? 'Chains-chain Chains-chain-selected'
       : 'Chains-chain';
 
+
     return (
-      <a key={chain} className={className} onClick={this.subscribe.bind(this, chain)}>
-        {chain}
+      <a key={label} className={className} onClick={this.subscribe.bind(this, label)}>
+        {label} ({nodeCount})
       </a>
     )
   }
 
-  private get chains(): Types.ChainLabel[] {
-    return Array.from(this.props.chains);
+  private get chains(): ChainData[] {
+    return Array
+      .from(this.props.chains.entries())
+      .sort((a, b) => {
+        return b[1] - a[1];
+      })
+      .map(([label, nodeCount]) => ({ label, nodeCount }));
   }
 
   private async subscribe(chain: Types.ChainLabel) {

packages/frontend/src/state.ts

@@ -6,7 +6,7 @@ export interface State {
   blockTimestamp: Types.Timestamp,
   timeDiff: Types.Milliseconds,
   subscribed: Maybe<Types.ChainLabel>,
-  chains: Set<Types.ChainLabel>,
+  chains: Map<Types.ChainLabel, Types.NodeCount>,
   nodes: Map<Types.NodeId, Node.Props>,
 }