fw lite handle errors on frontend (#947)

* dynamically load project when trying to access LcmCache in FwDataMiniLcmApi

* notify client when a project is locked, display a message and allow the user to retry on frontend.

* setup generic signalr error handling

* hide double notifications for locked projects, change the error message to something more helpful

* set sense part of speech id to undefined by default

* fix bug where a new id would be generated even if it was already set for both the sense and example sentence

* fix bug where reloading the page would result in a 404, fixed by setting up a fallback to the index page

* add placeholder for index changes

backend/FwLite/FwDataMiniLcmBridge/FwDataFactory.cs

@@ -23,8 +23,7 @@ public FwDataMiniLcmApi GetFwDataMiniLcmApi(string projectName, bool saveOnDispo
 
     public FwDataMiniLcmApi GetFwDataMiniLcmApi(FwDataProject project, bool saveOnDispose)
     {
-        var projectService = GetProjectServiceCached(project);
-        return new FwDataMiniLcmApi(projectService, saveOnDispose, fwdataLogger, project);
+        return new FwDataMiniLcmApi(new (() =>GetProjectServiceCached(project)), saveOnDispose, fwdataLogger, project);
     }
 
     private HashSet<string> _projects = [];

backend/FwLite/LocalWebApp/Hubs/CrdtMiniLcmApiHub.cs

@@ -6,17 +6,11 @@
 
 namespace LocalWebApp.Hubs;
 
-public interface ILexboxClient
-{
-    Task OnEntryUpdated(Entry entry);
-    Task OnProjectClosed();
-}
-
 public class CrdtMiniLcmApiHub(
     ILexboxApi lexboxApi,
     IOptions<JsonOptions> jsonOptions,
     BackgroundSyncService backgroundSyncService,
-    SyncService syncService) : Hub<ILexboxClient>
+    SyncService syncService) : Hub<ILexboxHubClient>
 {
     public const string ProjectRouteKey = "project";
     public override async Task OnConnectedAsync()

backend/FwLite/LocalWebApp/Hubs/FwDataMiniLcmHub.cs

@@ -2,12 +2,13 @@
 using Microsoft.AspNetCore.SignalR;
 using Microsoft.Extensions.Options;
 using MiniLcm;
+using SIL.LCModel;
 using SystemTextJsonPatch;
 
 namespace LocalWebApp.Hubs;
 
 public class FwDataMiniLcmHub([FromKeyedServices(FwDataBridgeKernel.FwDataApiKey)] ILexboxApi lexboxApi, FwDataFactory fwDataFactory,
-    FwDataProjectContext context) : Hub<ILexboxClient>
+    FwDataProjectContext context) : Hub<ILexboxHubClient>
 {
     public const string ProjectRouteKey = "fwdata";
     public override async Task OnConnectedAsync()
@@ -29,7 +30,15 @@ public override async Task OnDisconnectedAsync(Exception? exception)
         {
             throw new InvalidOperationException("No project is set in the context.");
         }
-        await Clients.OthersInGroup(project.Name).OnProjectClosed();
+
+        if (exception is LcmFileLockedException)
+        {
+            await Clients.Group(project.Name).OnProjectClosed(CloseReason.Locked);
+        }
+        else
+        {
+            await Clients.OthersInGroup(project.Name).OnProjectClosed(CloseReason.User);
+        }
         await Groups.RemoveFromGroupAsync(Context.ConnectionId, project.Name);
     }
 

backend/FwLite/LocalWebApp/Hubs/ILexboxHubClient.cs

@@ -0,0 +1,15 @@
+using MiniLcm;
+
+namespace LocalWebApp.Hubs;
+
+public interface ILexboxHubClient
+{
+    Task OnEntryUpdated(Entry entry);
+    Task OnProjectClosed(CloseReason reason);
+}
+
+public enum CloseReason
+{
+    User,
+    Locked
+}

backend/FwLite/LocalWebApp/Hubs/LockedProjectFilter.cs

@@ -0,0 +1,34 @@
+using Microsoft.AspNetCore.SignalR;
+using SIL.LCModel;
+
+namespace LocalWebApp.Hubs;
+
+public class LockedProjectFilter: IHubFilter
+{
+    public async ValueTask<object?> InvokeMethodAsync(HubInvocationContext invocationContext, Func<HubInvocationContext, ValueTask<object?>> next)
+    {
+        try
+        {
+            return await next(invocationContext);
+        }
+        catch (LcmFileLockedException)
+        {
+            await TypedHubHelper<ILexboxHubClient>.TypeClients(invocationContext.Hub.Clients)
+                .Caller.OnProjectClosed(CloseReason.Locked);
+            throw new HubException("The project is locked.");
+        }
+    }
+
+    private class TypedHubHelper<TClient> : Hub<TClient> where TClient : class
+    {
+        public TypedHubHelper(IHubCallerClients clients) : base()
+        {
+            ((Hub)this).Clients = clients;
+        }
+
+        public static IHubCallerClients<TClient> TypeClients(IHubCallerClients clients)
+        {
+            return new TypedHubHelper<TClient>(clients).Clients;
+        }
+    }
+}

backend/FwLite/LocalWebApp/Program.cs

@@ -6,6 +6,7 @@
 using LocalWebApp.Auth;
 using LocalWebApp.Routes;
 using LocalWebApp.Utils;
+using Microsoft.AspNetCore.SignalR;
 using Microsoft.AspNetCore.StaticFiles.Infrastructure;
 using Microsoft.Extensions.FileProviders;
 
@@ -25,7 +26,11 @@
 builder.Services.AddLocalAppServices(builder.Environment);
 builder.Services.AddEndpointsApiExplorer();
 builder.Services.AddSwaggerGen();
-builder.Services.AddSignalR().AddJsonProtocol();
+builder.Services.AddSignalR(options =>
+{
+    options.AddFilter(new LockedProjectFilter());
+    options.EnableDetailedErrors = true;
+}).AddJsonProtocol();
 
 var app = builder.Build();
 // Configure the HTTP request pipeline.
@@ -38,7 +43,8 @@
 //configure dotnet to serve static files from the embedded resources
 var sharedOptions = new SharedOptions() { FileProvider = new ManifestEmbeddedFileProvider(typeof(Program).Assembly) };
 app.UseDefaultFiles(new DefaultFilesOptions(sharedOptions));
-app.UseStaticFiles(new StaticFileOptions(sharedOptions));
+var staticFileOptions = new StaticFileOptions(sharedOptions);
+app.UseStaticFiles(staticFileOptions);
 
 app.Use(async (context, next) =>
 {
@@ -68,6 +74,7 @@
 app.MapTest();
 app.MapImport();
 app.MapAuthRoutes();
+app.MapFallbackToFile("index.html", staticFileOptions);
 
 await using (app)
 {

frontend/viewer/src/FwDataProjectView.svelte

@@ -6,25 +6,65 @@
   import ProjectView from './ProjectView.svelte';
   import {navigate} from 'svelte-routing';
   import {AppNotification} from './lib/notifications/notifications';
+  import {CloseReason} from './lib/generated-signalr-client/TypedSignalR.Client/Lexbox.ClientServer.Hubs';
+  import {Entry} from './lib/mini-lcm';
 
   export let projectName: string;
+  setContext('project-name', projectName);
   const connection = new HubConnectionBuilder()
     .withUrl(`/api/hub/${projectName}/fwdata`)
     .withAutomaticReconnect()
     .build();
-  void connection.start()
-    .then(() => connected = (connection.state == HubConnectionState.Connected))
-    .catch(err => console.error(err));
+
+  function connect() {
+    void connection.start()
+      .then(() => connected = (connection.state == HubConnectionState.Connected))
+      .catch(err => {
+        console.error('Failed to start the connection:', err);
+      });
+  }
+  connect();
   onDestroy(() => connection.stop());
-  setContext('project-name', projectName);
-  SetupSignalR(connection, {
-    history: false,
-    write: true,
-  },
-  async () => {
-    navigate('/');
-    AppNotification.display('Project closed on another tab', 'warning', 'long');
+  connection.onclose(error => {
+    connected = false;
+    if (!error) return;
+    console.error('Connection closed:', error);
   });
+  SetupSignalR(connection, {
+      history: false,
+      write: true,
+    },
+    {
+      OnEntryUpdated: async (entry: Entry) => {
+        console.log('OnEntryUpdated', entry);
+      },
+      async OnProjectClosed(reason: CloseReason): Promise<void> {
+        connected = false;
+        switch (reason) {
+          case CloseReason.User:
+            navigate('/');
+            AppNotification.display('Project closed on another tab', 'warning', 'long');
+            break;
+          case CloseReason.Locked:
+            AppNotification.displayAction('The project is open in FieldWorks. Please close it and try again.', 'warning', {
+              label: 'Retry',
+              callback: () => connected = true
+            });
+            break;
+        }
+      }
+    },
+    (errorContext) => {
+      connected = false;
+      if (errorContext.error instanceof Error) {
+        let message = errorContext.error.message;
+        if (message.includes('The project is locked')) return; //handled via the project closed callback
+        AppNotification.display('Connection error: ' + message, 'error', 'long');
+      } else {
+        AppNotification.display('Unknown Connection error', 'error', 'long');
+      }
+    }
+  );
   let connected = false;
 </script>
 <ProjectView {projectName} isConnected={connected}></ProjectView>

frontend/viewer/src/lib/Editor.svelte

@@ -39,8 +39,10 @@
     await updateEntry(e.entry);
     if (e.sense !== undefined) {
       await updateSense(e.sense);
+      detectSenseIndexChanges(e.entry, e.sense);
       if (e.example !== undefined) {
         await updateExample(e.sense.id, e.example);
+        detectExampleIndexChanges(e.entry, e.sense, e.example);
       }
     }
 
@@ -95,6 +97,26 @@
     if (operations.length == 0) return;
     await saveHandler(() => lexboxApi.UpdateExampleSentence(entry.id, senseId, updatedExample.id, operations));
   }
+
+  function detectSenseIndexChanges(entry: IEntry, sense: ISense) {
+    const initialIndex = initialEntry.senses.findIndex(s => s.id === sense.id);
+    if (initialIndex === -1) return;
+    const currentIndex = entry.senses.findIndex(s => s.id === sense.id);
+    if (currentIndex === -1) return;
+    if (initialIndex !== currentIndex) {
+      // todo figure out how to send this to the server
+    }
+  }
+
+  function detectExampleIndexChanges(entry: IEntry, sense: ISense, example: IExampleSentence) {
+    const initialIndex = initialEntry.senses.find(s => s.id == sense.id)?.exampleSentences.findIndex(s => s.id === example.id);
+    if (initialIndex === -1 || initialIndex === undefined) return;
+    const currentIndex = sense.exampleSentences.findIndex(s => s.id === example.id);
+    if (currentIndex === -1) return;
+    if (initialIndex !== currentIndex) {
+      // todo figure out how to send this to the server
+    }
+  }
 </script>
 
 <div id="entry" class:hide-empty={$viewConfig.hideEmptyFields}>

frontend/viewer/src/lib/entry-editor/CrdtOptionField.svelte

@@ -3,7 +3,7 @@
   import CrdtField from './CrdtField.svelte';
   import { SelectField, TextField, type MenuOption } from 'svelte-ux';
 
-  export let value: string;
+  export let value: string | undefined;
   export let unsavedChanges = false;
   export let options: MenuOption[] | undefined = undefined;
   export let label: string | undefined = undefined;

frontend/viewer/src/lib/entry-editor/SingleOptionEditor.svelte

@@ -15,7 +15,7 @@
 
   type T = $$Generic<{}>;
   export let field: FieldConfig & OptionFieldConfig;
-  export let value: string;
+  export let value: string | undefined;
 
   let options: Readable<MenuOption[]> = readable([]);
   $: options = pickOptions(field);

frontend/viewer/src/lib/generated-signalr-client/TypedSignalR.Client/Lexbox.ClientServer.Hubs.ts

@@ -13,6 +13,10 @@ export type ILexboxClient = {
     * @returns Transpiled from System.Threading.Tasks.Task
     */
     OnEntryUpdated(entry: Entry): Promise<void>;
-    OnProjectClosed(): Promise<void>;
+    OnProjectClosed(reason: CloseReason): Promise<void>;
 }
 
+export enum CloseReason {
+    User = 0,
+    Locked = 1,
+}

frontend/viewer/src/lib/generated-signalr-client/TypedSignalR.Client/index.ts

@@ -202,8 +202,8 @@ class ILexboxClient_Binder implements ReceiverRegister<ILexboxClient> {
 
     public readonly register = (connection: HubConnection, receiver: ILexboxClient): Disposable => {
 
-        const __onEntryUpdated = (...args: [Entry]) => receiver.OnEntryUpdated(...args);
-        const __onProjectClosed = () => receiver.OnProjectClosed();
+        const __onEntryUpdated = (...args: Parameters<ILexboxClient['OnEntryUpdated']>) => receiver.OnEntryUpdated(...args);
+        const __onProjectClosed = (...args: Parameters<ILexboxClient['OnProjectClosed']>) => receiver.OnProjectClosed(...args);
 
         connection.on("OnEntryUpdated", __onEntryUpdated);
         connection.on("OnProjectClosed", __onProjectClosed);

frontend/viewer/src/lib/mini-lcm/i-sense.ts

@@ -11,7 +11,7 @@ export interface ISense {
     id: string;
     definition: IMultiString;
     gloss: IMultiString;
-    partOfSpeechId: string;
+    partOfSpeechId: string | undefined;
     semanticDomains: SemanticDomain[];
     exampleSentences: IExampleSentence[];
 }

frontend/viewer/src/lib/notifications/NotificationOutlet.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {AppNotification} from './notifications';
-  import {Notification, Icon} from 'svelte-ux';
+  import {Notification, Icon, Button} from 'svelte-ux';
   import {
     mdiAlert,
     mdiAlertCircleOutline,
@@ -13,7 +13,7 @@
 <div class="fixed bottom-0 z-50 flex flex-col gap-2 p-4 w-full overflow-y-auto">
   {#each $notifications as notification}
     <div class="w-[400px] mx-auto">
-      <Notification open closeIcon>
+      <Notification open closeIcon actions="right">
         <div slot="icon">
           {#if notification.type === 'success'}
             <Icon path={mdiCheckCircleOutline} size="1.5rem" class="text-success"/>
@@ -26,6 +26,11 @@
           {/if}
         </div>
         <div slot="title">{notification.message}</div>
+        <div slot="actions">
+          {#if notification.action}
+            <Button color="primary" on:click={notification.action.callback}>{notification.action.label}</Button>
+          {/if}
+        </div>
       </Notification>
     </div>
   {/each}

frontend/viewer/src/lib/notifications/notifications.ts

@@ -1,10 +1,16 @@
 import {writable, type Writable, type Readable, readonly} from 'svelte/store';
 
+interface NotificationAction {
+  label: string;
+  callback: () => void;
+}
+
 export class AppNotification {
   private static _notifications: Writable<AppNotification[]> = writable([]);
   public static get notifications(): Writable<AppNotification[]> {
     return this._notifications;
   }
+
   public static display(message: string, type: 'success' | 'error' | 'info' | 'warning', timeout: 'short' | 'long' | number = 'short') {
     const notification = new AppNotification(message, type);
     this._notifications.update(notifications => [...notifications, notification]);
@@ -17,5 +23,11 @@ export class AppNotification {
     }, timeout);
   }
 
-  private constructor(public message: string, public type: 'success' | 'error' | 'info' | 'warning') {}
+  public static displayAction(message: string, type: 'success' | 'error' | 'info' | 'warning', action: NotificationAction) {
+    const notification = new AppNotification(message, type, action);
+    this._notifications.update(notifications => [...notifications, notification]);
+  }
+
+  private constructor(public message: string, public type: 'success' | 'error' | 'info' | 'warning', public action?: NotificationAction) {
+  }
 }