feat: Instead of delisting, push stale nodes to bottom (#161)

packages/frontend/src/Connection.ts

@@ -15,6 +15,8 @@ export class Connection {
     return new Connection(await Connection.socket(), update, pins);
   }
 
+  private static readonly utf8decoder = new TextDecoder('utf-8');
+
   private static readonly address = window.location.protocol === 'https:'
                                       ? `wss://${window.location.hostname}/feed/`
                                       : `ws://${window.location.hostname}:8080`;
@@ -55,6 +57,7 @@ export class Connection {
 
       const socket = new WebSocket(Connection.address);
 
+      socket.binaryType = "arraybuffer";
       socket.addEventListener('open', onSuccess);
       socket.addEventListener('error', onFailure);
       socket.addEventListener('close', onFailure);
@@ -173,6 +176,14 @@ export class Connection {
           break;
         }
 
+        case Actions.StaleNode: {
+          const id = message.payload;
+
+          nodes.mutAndSort(id, (node) => node.setStale(true));
+
+          break;
+        }
+
         case Actions.LocatedNode: {
           const [id, lat, lon, city] = message.payload;
 
@@ -376,7 +387,9 @@ export class Connection {
   }
 
   private handleFeedData = (event: MessageEvent) => {
-    const data = event.data as FeedMessage.Data;
+    const data = typeof event.data === 'string'
+      ? event.data as any as FeedMessage.Data
+      : Connection.utf8decoder.decode(event.data) as any as FeedMessage.Data;
 
     this.handleMessages(FeedMessage.deserialize(data));
   }

packages/frontend/src/components/List/Row.css

@@ -60,6 +60,10 @@
   color: #E6007A;
 }
 
+.Row-stale {
+  font-style: italic;
+}
+
 .Row:hover {
   background-color: #1E1E1E;
 }

packages/frontend/src/components/List/Row.tsx

@@ -374,6 +374,10 @@ export class Row extends React.Component<Row.Props, Row.State> {
       className += ' Row-pinned';
     }
 
+    if (node.stale) {
+      className += ' Row-stale';
+    }
+
     return (
       <tr className={className} onClick={this.toggle}>
         {

packages/frontend/src/state.ts

@@ -2,7 +2,7 @@ import { Types, Maybe, SortedCollection } from '@dotstats/common';
 
 export class Node {
   public static compare(a: Node, b: Node): number {
-    if (a.pinned === b.pinned) {
+    if (a.pinned === b.pinned && a.stale === b.stale) {
       if (a.height === b.height) {
         const aPropagation = a.propagationTime == null ? Infinity : a.propagationTime as number;
         const bPropagation = b.propagationTime == null ? Infinity : b.propagationTime as number;
@@ -11,7 +11,10 @@ export class Node {
         return aPropagation - bPropagation;
       }
     } else {
-      return +b.pinned - +a.pinned;
+      const bSort = (b.pinned ? -2 : 0) + +b.stale;
+      const aSort = (a.pinned ? -2 : 0) + +a.stale;
+
+      return aSort - bSort;
     }
 
     // Descending sort by block number
@@ -26,6 +29,7 @@ export class Node {
   public readonly validator: Maybe<Types.Address>;
   public readonly networkId: Maybe<Types.NetworkId>;
 
+  public stale: boolean;
   public pinned: boolean;
   public peers: Types.PeerCount;
   public txs: Types.TransactionCount;
@@ -110,6 +114,7 @@ export class Node {
     this.blockTime = blockTime;
     this.blockTimestamp = blockTimestamp;
     this.propagationTime = propagationTime;
+    this.stale = false;
 
     this.trigger();
   }
@@ -143,6 +148,13 @@ export class Node {
     }
   }
 
+  public setStale(stale: boolean) {
+    if (this.stale !== stale) {
+      this.stale = stale;
+      this.trigger();
+    }
+  }
+
   public subscribe(handler: (node: Node) => void) {
     this.subscriptions.add(handler);
   }