Styles

packages/backend/src/aggregator.ts

@@ -1,11 +1,11 @@
 import * as EventEmitter from 'events';
 import Node from './node';
 import Feed from './feed';
-import { timestamp, Types, IdSet, FeedMessage } from '@dotstats/common';
+import { timestamp, Types, FeedMessage } from '@dotstats/common';
 
 export default class Aggregator extends EventEmitter {
-    private nodes = new IdSet<Types.NodeId, Node>();
-    private feeds = new IdSet<Types.FeedId, Feed>();
+    private nodes = new Set<Node>();
+    private feeds = new Set<Feed>();
     private messages: Array<FeedMessage.Message> = [];
 
     public height = 0 as Types.BlockNumber;
@@ -24,7 +24,7 @@ export default class Aggregator extends EventEmitter {
         node.once('disconnect', () => {
             node.removeAllListeners();
 
-            this.nodes.remove(node);
+            this.nodes.delete(node);
             this.broadcast(Feed.removedNode(node));
         });
 
@@ -44,7 +44,7 @@ export default class Aggregator extends EventEmitter {
         feed.sendMessages(messages);
 
         feed.once('disconnect', () => {
-            this.feeds.remove(feed);
+            this.feeds.delete(feed);
         });
     }
 

packages/common/src/id.ts

@@ -13,27 +13,3 @@ export function idGenerator<I extends Id<any>>(): () => I {
 
     return () => current++ as I;
 }
-
-interface HasId<I> {
-    id: I;
-}
-
-export class IdSet<I extends Id<any>, T> {
-    private map: Map<I, T> = new Map();
-
-    public add(item: T & HasId<I>) {
-        this.map.set(item.id, item);
-    }
-
-    public remove(item: T & HasId<I>) {
-        this.map.delete(item.id);
-    }
-
-    public entries(): IterableIterator<[I, T]> {
-        return this.map.entries();
-    }
-
-    public values(): IterableIterator<T> {
-        return this.map.values();
-    }
-}

packages/frontend/src/App.tsx

@@ -13,7 +13,7 @@ import transactionsIcon from './icons/inbox.svg';
 import blockIcon from './icons/package.svg';
 import blockHashIcon from './icons/file-binary.svg';
 import blockTimeIcon from './icons/history.svg';
-import lastTimeIcon from './icons/dashboard.svg';
+import lastTimeIcon from './icons/watch.svg';
 
 export default class App extends React.Component<{}, State> {
     public state: State = {
@@ -72,6 +72,6 @@ export default class App extends React.Component<{}, State> {
     }
 
     private nodes(): Node.Props[] {
-        return Array.from(this.state.nodes.values());
+        return Array.from(this.state.nodes.values()).sort((a, b) => b.blockDetails[0] - a.blockDetails[0]);
     }
 }

packages/frontend/src/components/Ago.tsx

@@ -58,6 +58,10 @@ export class Ago extends React.Component<Ago.Props, Ago.State> {
     }
 
     public render() {
+        if (this.props.when === 0) {
+            return <span>-</span>;
+        }
+
         const ago = Math.max(this.state.now - this.props.when, 0) / 1000;
 
         let agoStr: string;

packages/frontend/src/components/Icon.css

@@ -1,6 +1,8 @@
 .Icon {
     fill: currentColor;
     height: 1em;
+    width: 1em;
+    text-align: center;
     vertical-align: middle;
     display: inline-block;
 }

packages/frontend/src/components/Tile.css

@@ -2,6 +2,32 @@
   font-size: 2.5em;
   padding: 20px;
   text-align: left;
-  width: 7em;
+  width: 230px;
   display: inline-block;
+  position: relative;
+}
+
+.Tile-label {
+  position: absolute;
+  top: 20px;
+  left: 90px;
+  right: 0;
+  font-size: 0.4em;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+.Tile-content {
+  position: absolute;
+  bottom: 20px;
+  left: 90px;
+  right: 0;
+  font-size: 0.75em;
+}
+
+.Tile .Icon {
+  padding: 0.25em;
+  border-radius: 1em;
+  background: #d64ca8;
+  color: #fff;
 }

packages/frontend/src/components/Tile.tsx

@@ -13,7 +13,9 @@ export namespace Tile {
 export function Tile(props: Tile.Props) {
     return (
         <div className="Tile">
-            <Icon src={props.icon} alt={props.title} /> {props.children}
+            <Icon src={props.icon} alt={props.title} />
+            <span className="Tile-label">{props.title}</span>
+            <span className="Tile-content">{props.children}</span>
         </div>
     );
 }