Comments and grumbles

frontend/src/Connection.ts

@@ -92,12 +92,18 @@ export class Connection {
     });
   }
 
+  // id sent to the backend used to pair responses
   private pingId = 0;
+  // timeout handler for ping messages
   private pingTimeout: NodeJS.Timer;
+  // timestamp at which the last ping has been sent
   private pingSent: Maybe<Types.Timestamp> = null;
+  // chain label to resubsribe to on reconnect
   private resubscribeTo: Maybe<Types.ChainLabel> = getHashData().chain;
+  // flag whether or not FE should subscribe to consensus updates on reconnect
   private resubscribeSendFinality: boolean = getHashData().tab === 'consensus';
-  private updateThrottle = false;
+  // flag used to throttle DOM updates to window frame rate
+  private isUpdating = false;
   private socket: WebSocket;
   private state: Readonly<State>;
   private readonly update: Update;
@@ -151,7 +157,7 @@ export class Connection {
 
   public handleMessages = (messages: FeedMessage.Message[]) => {
     const { nodes, chains, sortBy, selectedColumns } = this.state;
-    const { ref } = nodes;
+    const nodesStateRef = nodes.ref;
 
     const updateState: UpdateBound = (state) => {
       this.state = this.update(state);
@@ -410,11 +416,11 @@ export class Connection {
       }
     }
 
-    if (nodes.hasChangedSince(ref) && !this.updateThrottle) {
-      this.updateThrottle = true;
+    if (nodes.hasChangedSince(nodesStateRef) && !this.isUpdating) {
+      this.isUpdating = true;
       window.requestAnimationFrame(() => {
         this.update({ nodes });
-        this.updateThrottle = false;
+        this.isUpdating = false;
       });
     }
 

frontend/src/components/List/List.css

@@ -1,4 +1,6 @@
 .List {
+  /* Prevents the list from auto-scrolling while cascading node
+   * updates on new block, which helps with performance. */
   overflow-anchor: none;
 }