Rust backend (#185)

packages/frontend/src/App.tsx

@@ -11,6 +11,7 @@ import './App.css';
 
 export default class App extends React.Component<{}, State> {
   public state: State;
+  private chainsCache: ChainData[] = [];
   private readonly settings: PersistentObject<State.Settings>;
   private readonly pins: PersistentSet<Types.NodeName>;
   private readonly connection: Promise<Connection>;
@@ -80,6 +81,8 @@ export default class App extends React.Component<{}, State> {
 
       return this.state;
     });
+
+    setInterval(() => this.chainsCache = [], 10000); // Wipe sorted chains cache every 10 seconds
   }
 
   public render() {
@@ -154,22 +157,27 @@ export default class App extends React.Component<{}, State> {
   }
 
   private chains(): ChainData[] {
-    return stable
+    if (this.chainsCache.length === this.state.chains.size) {
+      return this.chainsCache;
+    }
+
+    this.chainsCache = stable
       .inplace(
-        Array.from(this.state.chains.entries()),
+        Array.from(this.state.chains.values()),
         (a, b) => {
-          if (a[0] === PINNED_CHAIN) {
+          if (a.label === PINNED_CHAIN) {
             return -1;
           }
 
-          if (b[0] === PINNED_CHAIN) {
+          if (b.label === PINNED_CHAIN) {
             return 1;
           }
 
-          return b[1] - a[1];
+          return b.nodeCount - a.nodeCount;
         }
-      )
-      .map(([label, nodeCount]) => ({ label, nodeCount }));
+      );
+
+    return this.chainsCache;
   }
 
 }

packages/frontend/src/Connection.ts

@@ -1,5 +1,5 @@
 import { VERSION, timestamp, FeedMessage, Types, Maybe, sleep } from '@dotstats/common';
-import { State, Update, Node, UpdateBound, PINNED_CHAIN } from './state';
+import { State, Update, Node, UpdateBound, ChainData, PINNED_CHAIN } from './state';
 import { PersistentSet } from './persist';
 import { getHashData, setHashData } from './utils';
 import { AfgHandling } from './AfgHandling';
@@ -19,7 +19,7 @@ export class Connection {
 
   private static readonly address = window.location.protocol === 'https:'
                                       ? `wss://${window.location.hostname}/feed/`
-                                      : `ws://${window.location.hostname}:8080`;
+                                      : `ws://127.0.0.1:8000/feed`;
 
   // private static readonly address = 'wss://telemetry.polkadot.io/feed/';
 
@@ -234,7 +234,13 @@ export class Connection {
 
         case Actions.AddedChain: {
           const [label, nodeCount] = message.payload;
-          chains.set(label, nodeCount);
+          const chain = chains.get(label);
+
+          if (chain) {
+            chain.nodeCount = nodeCount;
+          } else {
+            chains.set(label, { label, nodeCount });
+          }
 
           this.state = this.update({ chains });
 
@@ -412,23 +418,21 @@ export class Connection {
       }
     }
 
-    let topLabel: Maybe<Types.ChainLabel> = null;
-    let topCount: Types.NodeCount = 0 as Types.NodeCount;
+    let topChain: Maybe<ChainData> = null;
 
-    for (const [label, count] of chains.entries()) {
-      if (label === PINNED_CHAIN) {
-        topLabel = label;
+    for (const chain of chains.values()) {
+      if (chain.label === PINNED_CHAIN) {
+        topChain = chain;
         break;
       }
 
-      if (count > topCount) {
-        topLabel = label;
-        topCount = count;
+      if (!topChain || chain.nodeCount > topChain.nodeCount) {
+        topChain = chain;
       }
     }
 
-    if (topLabel) {
-      this.subscribe(topLabel);
+    if (topChain) {
+      this.subscribe(topChain.label);
     }
   }
 

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

@@ -135,7 +135,7 @@ function formatCPU(cpu: number, stamp: Maybe<Types.Timestamp>): string {
 
 const URI_BASE = window.location.protocol === 'https:'
                                     ? `/network_state/`
-                                    : `http://${window.location.hostname}:8081/network_state/`;
+                                    : `http://${window.location.hostname}:8000/network_state/`;
 
 export class Row extends React.Component<Row.Props, Row.State> {
   public static readonly columns: Column[] = [

packages/frontend/src/icons/katalchain.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" x="0" y="0" width="131" height="131">
-  <rect width="131" height="131" x="0" y="0" stroke="white" stroke-width="10"/>
-  <rect width="131" height="40" x="0" y="45" fill="white"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="131" height="131" viewBox="0 0 131 131">
+  <rect width="131" height="131" x="0" y="0" stroke="currentColor" stroke-width="10" fill="transparent"/>
+  <rect width="131" height="40" x="0" y="45" fill="currentColor"/>
 </svg>

packages/frontend/src/state.ts

@@ -217,7 +217,7 @@ export interface State {
   blockAverage: Maybe<Types.Milliseconds>;
   timeDiff: Types.Milliseconds;
   subscribed: Maybe<Types.ChainLabel>;
-  chains: Map<Types.ChainLabel, Types.NodeCount>;
+  chains: Map<Types.ChainLabel, ChainData>;
   nodes: SortedCollection<Types.NodeId, Node>;
   settings: Readonly<State.Settings>;
   pins: Readonly<Set<Types.NodeName>>;