Add diagnostic count: number of DB records

src/components/App.tsx

@@ -15,6 +15,8 @@ import * as Y from 'yjs';
 interface NavbarProps {
   fileId: Accessor<string | null>;
   setFileId: Setter<string | null>;
+  numUpdates: Accessor<number | null>;
+  setNumUpdates: Setter<number | null>;
 }
 
 const NavbarContext = createContext<NavbarProps>();
@@ -30,6 +32,7 @@ export function useNavbar(): NavbarProps {
 function Layout(props: any) {
   const navigate = useNavigate();
   const [fileId, setFileId] = createSignal<string | null>(null);
+  const [numUpdates, setNumUpdates] = createSignal<number | null>(null);
   const title = () => {
     const id = fileId();
     if (id === null) {
@@ -43,13 +46,16 @@ function Layout(props: any) {
   };
 
   return (
-    <NavbarContext.Provider value={{ fileId, setFileId }}>
+    <NavbarContext.Provider
+      value={{ fileId, setFileId, numUpdates, setNumUpdates }}
+    >
       <div class="app">
         <div class="navbar">
           <Show when={fileId() !== null}>
             <button onclick={() => navigate('/')}>Back</button>
           </Show>
           <div class="title">{title() ?? 'Choose a file'}</div>
+          <div class="info">{numUpdates() ?? ''}</div>
         </div>
         {props.children}
       </div>

src/components/Editor.tsx

@@ -16,10 +16,11 @@ import {
 import { LocalDocument } from '../sync';
 import { useNavbar } from './App';
 import { useParams } from '@solidjs/router';
+import _ from 'lodash';
 
 function Editor() {
   const { id: fileId } = useParams();
-  const { setFileId } = useNavbar();
+  const { setFileId, setNumUpdates } = useNavbar();
   onMount(() => {
     setFileId(fileId);
   });
@@ -35,6 +36,14 @@ function Editor() {
     }
     const ydoc = doc.doc;
 
+    const refreshNumUpdates = _.debounce(() => {
+      setNumUpdates(doc.numUpdates);
+    }, 100);
+    setNumUpdates(doc.numUpdates);
+    doc.doc.on('update', () => {
+      setTimeout(refreshNumUpdates, 1500);
+    });
+
     const state = EditorState.create({
       doc: ydoc.getText().toString(),
       extensions: [
@@ -54,6 +63,7 @@ function Editor() {
   });
 
   onCleanup(() => {
+    setNumUpdates(null);
     editorView?.destroy();
     syncedDoc()?.finish();
   });

src/main.css

@@ -18,6 +18,10 @@ body {
   background-color: #cde;
 }
 
+.navbar .info {
+  margin-left: auto;
+}
+
 .editor-component {
   flex: 1;
   overflow: hidden;

src/sync.ts

@@ -23,11 +23,13 @@ export class LocalDocument {
   readonly id: string;
   readonly doc: Y.Doc;
   private updates: Uint8Array[];
+  private totalUpdates: number;
 
   constructor(id: string) {
     this.id = id;
     this.doc = new Y.Doc();
     this.updates = [];
+    this.totalUpdates = 0;
 
     const flush = _.debounce(() => this.flush(), 1000);
     this.doc.on('update', (update: Uint8Array) => {
@@ -37,6 +39,10 @@ export class LocalDocument {
     });
   }
 
+  get numUpdates(): number {
+    return this.totalUpdates;
+  }
+
   public static async load(id: string): Promise<LocalDocument> {
     const updates: Uint8Array[] = await db.getAll(
       LOCAL_UPDATE_STORE,
@@ -44,6 +50,7 @@ export class LocalDocument {
     );
     // console.log(`load(${id}): got ${updates.length} updates`);
     const result = new LocalDocument(id);
+    result.totalUpdates = updates.length;
     Y.applyUpdate(result.doc, Y.mergeUpdates(updates));
     return result;
   }
@@ -55,6 +62,7 @@ export class LocalDocument {
       const update = Y.mergeUpdates(batch);
       const key = [this.id, new Date().valueOf()];
       await db.add(LOCAL_UPDATE_STORE, update, key);
+      this.totalUpdates += 1;
     }
   }