Categorize nodes by chains

packages/frontend/src/components/Chains.css

@@ -0,0 +1,30 @@
+.Chains {
+    background: #3c3c3b;
+    color: #fff;
+    padding: 0.25em 1em;
+}
+
+.Chains .Icon {
+    margin-right: 1em;
+}
+
+.Chains-chain {
+    padding: 0.25em 0.75em;
+    margin-left: 0.5em;
+    background: #222;
+    color: #999;
+    border-radius: 0.3em;
+    display: inline-block;
+    cursor: pointer;
+    font-family: monospace, sans-serif;
+    font-size: 0.8em;
+    font-weight: bold;
+}
+
+.Chains-chain-selected {
+    background: #eee;
+    color: #000;
+    border-radius: 0.3em 0.3em 0 0;
+    padding-bottom: 1em;
+    margin-bottom: -1em;
+}

packages/frontend/src/components/Chains.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Connection } from '../message';
+import { Icon } from './Icon';
+import { Types, Maybe } from '@dotstats/common';
+
+import chainIcon from '../icons/link.svg';
+import './Chains.css';
+
+export namespace Chains {
+    export interface Props {
+        chains: Set<Types.ChainLabel>,
+        subscribed: Maybe<Types.ChainLabel>,
+        connection: Promise<Connection>
+    }
+}
+
+export class Chains extends React.Component<Chains.Props, {}> {
+    public render() {
+        return (
+            <div className="Chains">
+                <Icon src={chainIcon} alt="Observed chain" />
+                {
+                    this.chains.map((chain) => this.renderChain(chain))
+                }
+            </div>
+        );
+    }
+
+    private renderChain(chain: Types.ChainLabel): React.ReactNode {
+        const className = chain === this.props.subscribed
+            ? 'Chains-chain Chains-chain-selected'
+            : 'Chains-chain';
+
+        return (
+            <a key={chain} className={className} onClick={this.subscribe.bind(this, chain)}>
+                {chain}
+            </a>
+        )
+    }
+
+    private get chains(): Types.ChainLabel[] {
+        return Array.from(this.props.chains);
+    }
+
+    private async subscribe(chain: Types.ChainLabel) {
+        const connection = await this.props.connection;
+
+        connection.subscribe(chain);
+    }
+}

packages/frontend/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './Chains';
 export * from './Icon';
 export * from './Node';
 export * from './Tile';