Visual indication of initial indexing progress (red circle)

Author: zefhemel

plug-api/syscalls/editor.ts

@@ -256,6 +256,13 @@ export function hidePanel(
   return syscall("editor.hidePanel", id);
 }
 
+export function showProgress(
+  progressPercentage?: number,
+  progressType?: string,
+) {
+  return syscall("editor.showProgress", progressPercentage, progressType);
+}
+
 /**
  * Insert text at the specified position into the editor
  * @param text the text to insert

plugs/index/command.ts

@@ -30,15 +30,21 @@ export async function reindexSpace() {
   console.log("Queing", files.length, "pages to be indexed.");
   // Queue all file names to be indexed
   await mq.batchSend("indexQueue", files.map((file) => file.name));
+  await editor.showProgress(0, "index");
 
   // Now let's wait for the processing to finish
   let queueStats = await mq.getQueueStats("indexQueue");
   while (queueStats.queued > 0 || queueStats.processing > 0) {
     await sleep(500);
     queueStats = await mq.getQueueStats("indexQueue");
+    await editor.showProgress(
+      100 - Math.round(queueStats.queued / files.length * 100),
+      "index",
+    );
   }
   // And notify the user
   console.log("Indexing completed!");
+  await editor.showProgress();
 }
 
 export async function processIndexQueue(messages: MQMessage[]) {

web/client.ts

@@ -287,7 +287,7 @@ export class Client {
         // "sync:success" is called with a number of operations only from syncSpace(), not from syncing individual pages
         this.fullSyncCompleted = true;
 
-        console.log("Full sync completed");
+        console.log("[sync]", "Full sync completed");
 
         // A full sync just completed
         if (!initialSync) {
@@ -297,9 +297,9 @@ export class Client {
           );
         } else { // initialSync
           console.log(
+            "[sync]",
             "Initial sync completed, now need to do a full space index to ensure all pages are indexed using any custom indexers",
           );
-          console.log("Enabling eventing on space primitives");
           this.space.spacePrimitives.enablePageEvents = true;
           this.clientSystem.ensureFullIndex().catch(
             console.error,
@@ -309,7 +309,7 @@ export class Client {
       }
       if (operations) {
         // Likely initial sync so let's show visually that we're synced now
-        this.showProgress(100);
+        this.showProgress(100, "sync");
       }
 
       this.ui.viewDispatch({ type: "sync-change", syncSuccess: true });
@@ -329,6 +329,7 @@ export class Client {
     this.eventHook.addLocalListener("sync:progress", (status: SyncStatus) => {
       this.showProgress(
         Math.round(status.filesProcessed / status.totalFiles * 100),
+        "sync",
       );
     });
 
@@ -825,10 +826,11 @@ export class Client {
   // Progress circle handling
   private progressTimeout?: number;
 
-  showProgress(progressPerc: number) {
+  showProgress(progressPercentage?: number, progressType?: "sync" | "index") {
     this.ui.viewDispatch({
       type: "set-progress",
-      progressPerc,
+      progressPercentage,
+      progressType,
     });
     if (this.progressTimeout) {
       clearTimeout(this.progressTimeout);
@@ -839,7 +841,7 @@ export class Client {
           type: "set-progress",
         });
       },
-      10000,
+      5000,
     );
   }
 

web/client_system.ts

@@ -279,19 +279,21 @@ export class ClientSystem {
     const currentIndexVersion = await this.getCurrentIndexVersion();
 
     console.info(
+      "[index]",
       "Current space index version",
       currentIndexVersion,
-      "index ongoing",
+      "index ongoing?",
       this.indexOngoing,
     );
 
     if (currentIndexVersion !== desiredIndexVersion && !this.indexOngoing) {
       console.info(
+        "[index]",
         "Performing a full space reindex, this could take a while...",
       );
       this.indexOngoing = true;
       await this.system.invokeFunction("index.reindexSpace", []);
-      console.info("Full space index complete.");
+      console.info("[index]", "Full space index complete.");
       await this.markFullSpaceIndexComplete();
       this.indexOngoing = false;
       // Let's load space scripts again, which probably weren't loaded before

web/components/top_bar.tsx

@@ -27,7 +27,8 @@ export function TopBar({
   actionButtons,
   darkMode,
   vimMode,
-  progressPerc,
+  progressPercentage,
+  progressType,
   completer,
   lhs,
   onClick,
@@ -43,7 +44,8 @@ export function TopBar({
   notifications: Notification[];
   darkMode?: boolean;
   vimMode: boolean;
-  progressPerc?: number;
+  progressPercentage?: number;
+  progressType?: string;
   onRename: (newName?: string) => Promise<void>;
   onClick: () => void;
   completer: (context: CompletionContext) => Promise<CompletionResult | null>;
@@ -104,17 +106,17 @@ export function TopBar({
               </div>
             )}
             <div className="sb-sync-progress">
-              {progressPerc !== undefined &&
+              {progressPercentage !== undefined &&
                 (
                   <div
                     className="progress-wrapper"
-                    title={`Sync Progress: ${progressPerc}%`}
+                    title={`${progressType} progress: ${progressPercentage}%`}
                   >
                     <div
                       className="progress-bar"
-                      style={`background: radial-gradient(closest-side, var(--top-background-color) 79%, transparent 80% 100%), conic-gradient(var(--button-color) ${progressPerc}%, var(--button-background-color) 0);`}
+                      style={`background: radial-gradient(closest-side, var(--top-background-color) 79%, transparent 80% 100%), conic-gradient(var(--progress-${progressType}-color) ${progressPercentage}%, var(--progress-background-color) 0);`}
                     >
-                      {progressPerc}
+                      {progressPercentage}
                     </div>
                   </div>
                 )}

web/editor_ui.tsx

@@ -279,7 +279,8 @@ export class MainUI {
           isLoading={viewState.isLoading}
           vimMode={viewState.uiOptions.vimMode}
           darkMode={viewState.uiOptions.darkMode}
-          progressPerc={viewState.progressPerc}
+          progressPercentage={viewState.progressPercentage}
+          progressType={viewState.progressType}
           completer={client.miniEditorComplete.bind(client)}
           onClick={() => {
             if (!client.isDocumentEditor()) {

web/reducer.ts

@@ -274,7 +274,8 @@ export default function reducer(
     case "set-progress":
       return {
         ...state,
-        progressPerc: action.progressPerc,
+        progressPercentage: action.progressPercentage,
+        progressType: action.progressType,
       };
   }
 }

web/styles/theme.scss

@@ -62,6 +62,10 @@ html {
 
   --text-field-background-color: var(--button-background-color);
 
+  --progress-background-color: #eee;
+  --progress-sync-color: black;
+  --progress-index-color: rgb(176, 0, 59);
+
   --action-button-background-color: transparent;
   --action-button-color: #292929;
   --action-button-hover-color: #0772be;
@@ -201,6 +205,10 @@ html[data-theme="dark"] {
   --primary-button-color: var(--ui-accent-contrast-color);
   --primary-button-border-color: transparent;
 
+  --progress-background-color: #555;
+  --progress-sync-color: white;
+  --progress-index-color: yellow;
+
   --text-field-background-color: var(--button-background-color);
 
   --action-button-background-color: transparent;

web/syscalls/editor.ts

@@ -222,6 +222,13 @@ export function editorSyscalls(client: Client): SysCallMapping {
         client.editorView.dispatch({});
       });
     },
+    "editor.showProgress": (
+      _ctx,
+      progressPercentage?: number,
+      progressType?: "sync" | "index",
+    ) => {
+      client.showProgress(progressPercentage, progressType);
+    },
     "editor.insertAtPos": (
       _ctx,
       text: string,

web/type.ts

@@ -34,7 +34,11 @@ export type AppViewState = {
   showCommandPaletteContext?: string;
   unsavedChanges: boolean;
   syncFailures: number; // Reset everytime a sync succeeds
-  progressPerc?: number;
+
+  // Progress tracker
+  progressPercentage?: number; // Used to show progress circle
+  progressType?: string; // Used for styling
+
   panels: { [key: string]: PanelConfig };
   commands: Map<string, AppCommand>;
   notifications: Notification[];
@@ -158,4 +162,8 @@ export type Action =
   }
   | { type: "hide-confirm" }
   | { type: "set-ui-option"; key: string; value: any }
-  | { type: "set-progress"; progressPerc?: number };
+  | {
+    type: "set-progress";
+    progressPercentage?: number;
+    progressType?: string;
+  };