Ignore tick events in requestEventLog

ui/Screen/NetworkDiagnostics/WaitingRoom.svelte

@@ -3,18 +3,22 @@
   import { onDestroy } from "svelte";
   import JSONTree from "svelte-json-tree";
 
-  import { requestEventLog } from "../../src/localPeer";
-  import type { RoomTransition } from "../../src/waitingRoom";
+  import { requestEventLog, waitingRoomState } from "../../src/localPeer";
+  import type { RoomTransition, RoomState } from "../../src/waitingRoom";
 
   import StateTable from "./StateTable.svelte";
 
-  let lastEvent: RoomTransition | null = null;
-  let eventsWithoutTicks: RoomTransition[] = [];
+  let eventLog: RoomTransition[] = [];
   const unsub = requestEventLog.subscribe(e => {
-    lastEvent = e[e.length - 1];
-    eventsWithoutTicks = e.filter(e => e.event.type !== "tick");
+    eventLog = e;
   });
   onDestroy(unsub);
+
+  let lastKnownRoomState: RoomState | null = null;
+  const rsUnsub = waitingRoomState.subscribe(e => {
+    lastKnownRoomState = e;
+  });
+  onDestroy(rsUnsub);
 </script>
 
 <style>
@@ -36,8 +40,8 @@
 
 <div>
   <h2>Last known waiting room state</h2>
-  {#if lastEvent}
-    <StateTable state={lastEvent.stateAfter} />
+  {#if lastKnownRoomState}
+    <StateTable state={lastKnownRoomState} />
   {:else}
     <div>None</div>
   {/if}
@@ -51,7 +55,7 @@
       </tr>
     </thead>
     <tbody>
-      {#each eventsWithoutTicks as transition}
+      {#each eventLog as transition}
         <tr>
           <td>
             <JSONTree value={transition.event} />

ui/src/localPeer.ts

@@ -204,23 +204,28 @@ export const status: Readable<remote.Data<Status>> = derived(
 );
 
 const requestEventLogStore: Writable<RoomTransition[]> = writable([]);
+const lastKnownRoomState: Writable<RoomState | null> = writable(null);
 eventStore.subscribe((event: Event | null): void => {
   if (!event) {
     return;
   }
 
   if (event.type === EventType.WaitingRoomTransition) {
-    requestEventLogStore.update(log =>
-      [
-        ...log,
-        {
-          event: event.event,
-          timestamp: event.timestamp,
-          stateBefore: event.state_before,
-          stateAfter: event.state_after,
-        },
-      ].slice(Math.max(log.length - 999, 0))
-    );
+    if (event.event.type !== "tick") {
+      requestEventLogStore.update(log =>
+        [
+          ...log,
+          {
+            event: event.event,
+            timestamp: event.timestamp,
+            stateBefore: event.state_before,
+            stateAfter: event.state_after,
+          },
+        ].slice(Math.max(log.length - 999, 0))
+      );
+    }
+    lastKnownRoomState.set(event.state_after);
   }
 });
 export const requestEventLog: Readable<RoomTransition[]> = requestEventLogStore;
+export const waitingRoomState: Readable<RoomState | null> = lastKnownRoomState;