Display morph type tokens in UI (#2205)

* Initial work on morph types in UI

Morph types now show leading/trailing tokens in headword, but do not yet
have a dropdown for editing them in the entry UI.

* Citation forms should not be decorated

Lexeme forms should be decorated with prefix/postfix tokens according to
the morph type, but citation forms are meant as "overrides" and should
be reproduced exactly as-is, without morph type tokens. This is the rule
used by FLEx for how it displays words, so FW Lite should do the same.

As a bonus, there is now only one `headword` function in the writing
system service, instead of two functions with the same name that did two
slightly different things.

* Fix tests

---------

Co-authored-by: Tim Haasdyk <tim_haasdyk@sil.org>

Author: rmunn

backend/FwLite/FwLiteShared/Services/MiniLcmJsInvokable.cs

@@ -102,6 +102,12 @@ public ValueTask<CustomView[]> GetCustomViews()
         return _wrappedApi.GetComplexFormType(id);
     }
 
+    [JSInvokable]
+    public ValueTask<MorphType[]> GetMorphTypes()
+    {
+        return _wrappedApi.GetMorphTypes().ToArrayAsync();
+    }
+
     [JSInvokable]
     public Task<int> CountEntries(string? query, FilterQueryOptions? options)
     {

frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IMiniLcmJsInvokable.ts

@@ -10,6 +10,7 @@ import type {IPublication} from '../../MiniLcm/Models/IPublication';
 import type {ISemanticDomain} from '../../MiniLcm/Models/ISemanticDomain';
 import type {IComplexFormType} from '../../MiniLcm/Models/IComplexFormType';
 import type {ICustomView} from '../../MiniLcm/Models/ICustomView';
+import type {IMorphType} from '../../MiniLcm/Models/IMorphType';
 import type {IFilterQueryOptions} from '../../MiniLcm/IFilterQueryOptions';
 import type {IIndexQueryOptions} from '../../MiniLcm/IIndexQueryOptions';
 import type {IEntry} from '../../MiniLcm/Models/IEntry';
@@ -34,6 +35,7 @@ export interface IMiniLcmJsInvokable
 	getCustomViews() : Promise<ICustomView[]>;
 	getCustomView(id: string) : Promise<ICustomView | null>;
 	getComplexFormType(id: string) : Promise<IComplexFormType | null>;
+	getMorphTypes() : Promise<IMorphType[]>;
 	countEntries(query?: string, options?: IFilterQueryOptions) : Promise<number>;
 	getEntryIndex(id: string, query?: string, options?: IIndexQueryOptions) : Promise<number>;
 	getEntries(options?: IQueryOptions) : Promise<IEntry[]>;

frontend/viewer/src/lib/dotnet-types/index.ts

@@ -12,6 +12,7 @@ export * from './generated-types/MiniLcm/Models/IComplexFormType';
 export * from './generated-types/MiniLcm/Models/IEntry';
 export * from './generated-types/MiniLcm/Models/IExampleSentence';
 export * from './generated-types/MiniLcm/Models/ITranslation';
+export * from './generated-types/MiniLcm/Models/IMorphType';
 export * from './generated-types/MiniLcm/Models/IObjectWithId';
 export * from './generated-types/MiniLcm/Models/IPartOfSpeech';
 export * from './generated-types/MiniLcm/Models/IProjectIdentifier';

frontend/viewer/src/project/data/morph-types.svelte.ts

@@ -0,0 +1,60 @@
+import type {MorphTypeKind, IMorphType} from '$lib/dotnet-types';
+
+import {type ProjectContext, useProjectContext} from '$project/project-context.svelte';
+import {type ResourceReturn} from 'runed';
+
+const morphTypesSymbol = Symbol.for('fw-lite-morph-types');
+export function useMorphTypesService(): MorphTypesService {
+  const projectContext = useProjectContext();
+  return projectContext.getOrAdd(morphTypesSymbol, () => {
+    return new MorphTypesService(projectContext);
+  });
+}
+
+export class MorphTypesService {
+  constructor(projectContext: ProjectContext) {
+    this.#morphTypesResource = projectContext.apiResource([], api => api.getMorphTypes());
+  }
+
+  #morphTypesResource: ResourceReturn<IMorphType[], unknown, true>;
+
+  current: IMorphType[] = $derived.by(() => {
+    return this.#morphTypesResource.current;
+  });
+
+  async refetch() {
+    await this.#morphTypesResource.refetch();
+    return this.current;
+  }
+
+  prefixes = $derived.by(() => {
+    const result: Partial<{[kind in MorphTypeKind]: string|undefined}> = {};
+    this.current.forEach(morphType => {
+      result[morphType.kind] = morphType.prefix;
+    });
+    return result;
+  });
+
+  suffixes = $derived.by(() => {
+    const result: Partial<{[kind in MorphTypeKind]: string|undefined}> = {};
+    this.current.forEach(morphType => {
+      result[morphType.kind] = morphType.postfix;
+    });
+    return result;
+  });
+
+  getPrefix(kind: MorphTypeKind): string|undefined {
+    return this.prefixes[kind];
+  }
+
+  getSuffix(kind: MorphTypeKind): string|undefined {
+    return this.suffixes[kind];
+  }
+
+  decorate(headword: string | undefined, kind: MorphTypeKind): string|undefined {
+    if (!headword) return headword;
+    const prefix = this.getPrefix(kind) ?? '';
+    const suffix = this.getSuffix(kind) ?? '';
+    return `${prefix}${headword}${suffix}`;
+  }
+}

frontend/viewer/src/project/data/writing-system-service.svelte.ts

@@ -14,6 +14,7 @@ import {type ProjectContext, useProjectContext} from '$project/project-context.s
 import {type ResourceReturn} from 'runed';
 import type {View} from '$lib/views/view-data';
 import type {ReadonlyDeep} from 'type-fest';
+import {type MorphTypesService, useMorphTypesService} from './morph-types.svelte';
 
 export type WritingSystemSelection =
   | 'vernacular'
@@ -27,7 +28,8 @@ export type WritingSystemSelection =
 const symbol = Symbol.for('fw-lite-ws-service');
 export function useWritingSystemService(): WritingSystemService {
   const projectContext = useProjectContext();
-  return projectContext.getOrAdd(symbol, () => new WritingSystemService(projectContext));
+  const morphTypesService = useMorphTypesService();
+  return projectContext.getOrAdd(symbol, () => new WritingSystemService(projectContext, morphTypesService));
 }
 
 export class WritingSystemService {
@@ -38,7 +40,10 @@ export class WritingSystemService {
     return this.#wsResource.current;
   }
 
-  constructor(projectContext: ProjectContext) {
+  #morphTypesService: MorphTypesService;
+
+  constructor(projectContext: ProjectContext, morphTypesService: MorphTypesService) {
+    this.#morphTypesService = morphTypesService;
     this.#wsResource = projectContext.apiResource({analysis: [], vernacular: []}, async api => {
       const result = await api.getWritingSystems();
       return {
@@ -121,10 +126,14 @@ export class WritingSystemService {
 
   headword(entry: ReadonlyDeep<IEntry>, ws?: string): string {
     if (ws) {
-      return headword(entry, ws) || '';
+      return this.#decorated(entry, ws) || '';
     }
+    return firstTruthy(this.vernacularNoAudio, ws => this.#decorated(entry, ws.wsId)) || '';
+  }
 
-    return firstTruthy(this.vernacularNoAudio, ws => headword(entry, ws.wsId)) || '';
+  #decorated(entry: ReadonlyDeep<IEntry>, ws: string): string | undefined {
+    // Citation forms should not be decorated with prefix/postfix tokens, only lexeme forms get decorated
+    return entry.citationForm[ws] || this.#morphTypesService.decorate(entry.lexemeForm[ws], entry.morphType);
   }
 
   pickBestAlternative(value: IMultiString, wss: 'vernacular' | 'analysis'): string
@@ -206,10 +215,6 @@ type WritingSystemColors = {
   analysis: Record<string, typeof analysisColors[number]>;
 }
 
-function headword(entry: ReadonlyDeep<IEntry>, ws: string): string | undefined {
-  return entry.citationForm[ws] || entry.lexemeForm[ws];
-}
-
 function calcWritingSystemColors(writingSystems: IWritingSystems): WritingSystemColors {
   const wsColors = {
     vernacular: {} as Record<string, typeof vernacularColors[number]>,

frontend/viewer/src/project/demo/demo-entry-data.ts

@@ -1,4 +1,4 @@
-import {type IEntry, type IWritingSystems, MorphTypeKind, WritingSystemType} from '$lib/dotnet-types';
+import {type IEntry, type IMorphType, type IWritingSystems, MorphTypeKind, WritingSystemType} from '$lib/dotnet-types';
 
 export const projectName = 'Sena 3';
 
@@ -30,6 +30,35 @@ export const partsOfSpeech = [
 
 ];
 
+export const morphTypes: IMorphType[] = [
+  {
+    id: 'd7f713e8-e8cf-11d3-9764-00c04f186933',
+    kind: MorphTypeKind.Stem,
+    name: {en: 'stem' },
+    abbreviation: {en: 'ubd stem' },
+    description: {},
+    secondaryOrder: 0,
+  },
+  {
+    id: 'd7f713db-e8cf-11d3-9764-00c04f186933',
+    kind: MorphTypeKind.Prefix,
+    name: {en: 'prefix' },
+    abbreviation: {en: 'pfx' },
+    description: {},
+    postfix: '-',
+    secondaryOrder: 20,
+  },
+  {
+    id: 'd7f713dd-e8cf-11d3-9764-00c04f186933',
+    kind: MorphTypeKind.Suffix,
+    name: {en: 'suffix' },
+    abbreviation: {en: 'sfx' },
+    description: {},
+    prefix: '-',
+    secondaryOrder: 70,
+  },
+];
+
 export const writingSystems: IWritingSystems = {
   'analysis': [
     {

frontend/viewer/src/project/demo/in-memory-demo-api.ts

@@ -10,6 +10,7 @@ import {
   type IIndexQueryOptions,
   type IMiniLcmFeatures,
   type IMiniLcmJsInvokable,
+  type IMorphType,
   type IPartOfSpeech,
   type IProjectModel,
   type IPublication,
@@ -22,8 +23,9 @@ import {
   type WritingSystemType,
   type ICustomView,
   ViewBase,
+  MorphTypeKind,
 } from '$lib/dotnet-types';
-import {entries, partsOfSpeech, projectName, writingSystems} from './demo-entry-data';
+import {entries, morphTypes, partsOfSpeech, projectName, writingSystems} from './demo-entry-data';
 
 import {WritingSystemService} from '../data/writing-system-service.svelte';
 import {FwLitePlatform} from '$lib/dotnet-types/generated-types/FwLiteShared/FwLitePlatform';
@@ -41,6 +43,7 @@ import {type IAvailableUpdate, UpdateResult} from '$lib/dotnet-types/generated-t
 import {type EventBus, useEventBus, ProjectEventBus} from '$lib/services/event-bus';
 import type {IJsEventListener} from '$lib/dotnet-types/generated-types/FwLiteShared/Events/IJsEventListener';
 import {initProjectStorage} from '$lib/storage';
+import {MorphTypesService} from '$project/data/morph-types.svelte';
 
 function pickWs(ws: string, defaultWs: string): string {
   return ws === 'default' ? defaultWs : ws;
@@ -50,17 +53,6 @@ const complexFormTypes = entries
   .flatMap(entry => entry.complexFormTypes)
   .filter((value, index, all) => all.findIndex(v2 => v2.id === value.id) === index);
 
-function filterEntries(entries: IEntry[], query: string): IEntry[] {
-  return entries.filter(entry =>
-    [
-      ...Object.values(entry.lexemeForm ?? {}),
-      ...Object.values(entry.citationForm ?? {}),
-      ...entry.senses.flatMap(sense => [
-        ...Object.values(sense.gloss ?? {}),
-      ]),
-    ].some(value => value?.toLowerCase().includes(query.toLowerCase())));
-}
-
 export const mockFwLiteConfig: IFwLiteConfig = {
   appVersion: 'dev',
   feedbackUrl: '',
@@ -94,10 +86,12 @@ const mockJsEventListener: IJsEventListener = {
 };
 
 export class InMemoryDemoApi implements IMiniLcmJsInvokable {
+  #morphTypesService: MorphTypesService;
   #writingSystemService: WritingSystemService;
   #projectEventBus: ProjectEventBus;
   constructor(projectContext: ProjectContext, eventBus: EventBus) {
-    this.#writingSystemService = new WritingSystemService(projectContext);
+    this.#morphTypesService = new MorphTypesService(projectContext);
+    this.#writingSystemService = new WritingSystemService(projectContext, this.#morphTypesService);
     this.#projectEventBus = new ProjectEventBus(projectContext, eventBus);
   }
 
@@ -159,6 +153,17 @@ export class InMemoryDemoApi implements IMiniLcmJsInvokable {
     );
   }
 
+  getMorphTypes(): Promise<IMorphType[]> {
+    return Promise.resolve(
+      morphTypes
+      // [
+      //     {id: 'd7f713e8-e8cf-11d3-9764-00c04f186933', kind: MorphTypeKind.Stem},
+      //     {id: 'd7f713db-e8cf-11d3-9764-00c04f186933', kind: MorphTypeKind.Prefix, postfix='-'},
+      //     {id: 'd7f713dd-e8cf-11d3-9764-00c04f186933', kind: MorphTypeKind.Suffix, prefix='-'},
+      // ]
+    );
+  }
+
   getPartsOfSpeech(): Promise<IPartOfSpeech[]> {
     return Promise.resolve(
       partsOfSpeech
@@ -250,27 +255,44 @@ export class InMemoryDemoApi implements IMiniLcmJsInvokable {
     return entries.slice(options.offset, options.offset + options.count);
   }
 
+  private filterEntries(entries: IEntry[], query: string): IEntry[] {
+    return entries.filter(entry =>
+      [
+        ...this.#writingSystemService.vernacular.map(ws => this.#writingSystemService.headword(entry, ws.wsId)),
+        ...Object.values(entry.lexemeForm ?? {}),
+        ...entry.senses.flatMap(sense => [
+          ...Object.values(sense.gloss ?? {}),
+        ]),
+      ].some(value => value?.toLowerCase().includes(query.toLowerCase())));
+  }
+
   private getFilteredSortedEntries(query?: string, options?: Omit<IQueryOptions, 'count' | 'offset'>): IEntry[] {
     const entries = this.getFilteredEntries(query, options);
-
-    if (!options) return entries;
     const defaultWs = writingSystems.vernacular[0].wsId;
-    const sortWs = pickWs(options.order.writingSystem, defaultWs);
+    const sortWs = pickWs(options?.order?.writingSystem ?? defaultWs, defaultWs);
+    const ascending = options?.order?.ascending ?? true;
+    const stem = morphTypes.find(m => m.kind === MorphTypeKind.Stem)!;
     return entries
       .sort((e1, e2) => {
-        const v1 = this.#writingSystemService.headword(e1, sortWs);
-        const v2 = this.#writingSystemService.headword(e2, sortWs);
+        // morph-tokens should not be included when sorting
+        const v1 = e1.citationForm[sortWs] || e1.lexemeForm[sortWs];
+        const v2 = e2.citationForm[sortWs] || e2.lexemeForm[sortWs];
         if (!v2) return -1;
         if (!v1) return 1;
         let compare = v1.localeCompare(v2, sortWs);
-        if (compare == 0) compare = e1.id.localeCompare(e2.id);
-        return options.order.ascending ? compare : -compare;
+        if (compare === 0) {
+          const m1 = (morphTypes.find(m => m.kind === e1.morphType) ?? stem);
+          const m2 = (morphTypes.find(m => m.kind === e2.morphType) ?? stem);
+          compare = m1.secondaryOrder - m2.secondaryOrder;
+        }
+        if (compare === 0) compare = e1.id.localeCompare(e2.id);
+        return ascending ? compare : -compare;
       });
   }
 
   private getFilteredEntries(query?: string, options?: IFilterQueryOptions): IEntry[] {
     let entries = this._Entries();
-    if (query) entries = filterEntries(entries, query);
+    if (query) entries = this.filterEntries(entries, query);
     if (!options) return entries;
 
     const defaultWs = writingSystems.vernacular[0].wsId;

frontend/viewer/tests/entries-list.test.ts

@@ -160,12 +160,12 @@ test.describe('EntriesList', () => {
       expect(firstEntryText).toBeTruthy();
 
       // Update first entry by prepending to its headword (so it stays at index 0)
-      const {updatedHeadword} = await api.updateEntryHeadwordPrepend(0, '-UPDATED-');
+      const {updatedHeadword} = await api.updateEntryHeadwordPrepend(0, '---UPDATED---');
 
       // The first entry in UI should now show the updated text
       await expect(async () => {
         const newFirstEntryText = await entriesList.entryRows.first().textContent();
-        expect(newFirstEntryText).toContain('-UPDATED-');
+        expect(newFirstEntryText).toContain('---UPDATED---');
       }).toPass({timeout: 5000});
 
       await expect(entriesList.entryWithText(updatedHeadword)).toBeVisible();