fix(views/table): relation display sometimes not showing up

apps/client/src/services/link.ts

@@ -405,7 +405,7 @@ function linkContextMenu(e: PointerEvent) {
     linkContextMenuService.openContextMenu(notePath, e, viewScope, null);
 }
 
-export async function loadReferenceLinkTitle($el: JQuery<HTMLElement>, href: string | null | undefined = null) {
+async function loadReferenceLinkTitle($el: JQuery<HTMLElement>, href: string | null | undefined = null) {
     const $link = $el[0].tagName === "A" ? $el : $el.find("a");
 
     href = href || $link.attr("href");

apps/client/src/widgets/view_widgets/table_view/columns.ts

@@ -67,7 +67,6 @@ export function buildColumnDefinitions(info: AttributeDefinitionInformation[], m
             width: 400
         }
     ];
-    console.log("Log ", rowNumberHint, columnDefs[0].width);
 
     const seenFields = new Set<string>();
     for (const { name, title, type } of info) {

apps/client/src/widgets/view_widgets/table_view/formatters.ts

@@ -1,5 +1,6 @@
 import { CellComponent } from "tabulator-tables";
-import { loadReferenceLinkTitle } from "../../../services/link.js";
+import froca from "../../../services/froca.js";
+import FNote from "../../../entities/fnote.js";
 
 /**
  * Custom formatter to represent a note, with the icon and note title being rendered.
@@ -12,11 +13,39 @@ export function NoteFormatter(cell: CellComponent, _formatterParams, onRendered)
         return "";
     }
 
-    onRendered(async () => {
+    function buildLink(note: FNote | undefined) {
-        const { $noteRef, href } = buildNoteLink(noteId);
+        if (!note) {
-        await loadReferenceLinkTitle($noteRef, href);
+            return;
-        cell.getElement().appendChild($noteRef[0]);
+        }
-    });
+
+        const iconClass = note.getIcon();
+        const title = note.title;
+        const { $noteRef } = buildNoteLink(noteId);
+        $noteRef.text(title);
+        $noteRef.prepend($("<span>").addClass(iconClass));
+        return $noteRef[0];
+    }
+
+    const cachedNote = froca.getNoteFromCache(noteId);
+    if (cachedNote) {
+        // Cache hit, build the link immediately
+        const el = buildLink(cachedNote);
+        return el?.outerHTML;
+    } else {
+        // Cache miss, load the note asynchronously
+        onRendered(async () => {
+            const note = await froca.getNote(noteId);
+            if (!note) {
+                return;
+            }
+
+            const el = buildLink(note);
+            if (el) {
+                cell.getElement().appendChild(el);
+            }
+        });
+    }
+
     return "";
 }
 

apps/client/src/widgets/view_widgets/table_view/relation_editor.ts

@@ -21,23 +21,30 @@ export function RelationEditor(cell: CellComponent, onRendered, success, cancel,
     editor.style.boxSizing = "border-box";
 
     //Set value of editor to the current value of the cell
-    const noteId = cell.getValue();
+    const originalNoteId = cell.getValue();
-    if (noteId) {
+    if (originalNoteId) {
-        const note = froca.getNoteFromCache(noteId);
+        const note = froca.getNoteFromCache(originalNoteId);
         editor.value = note.title;
+    } else {
+        editor.value = "";
     }
 
     //set focus on the select box when the editor is selected
     onRendered(function(){
-        let noteId = "";
+        let newNoteId = originalNoteId;
 
         note_autocomplete.initNoteAutocomplete($editor, {
             allowCreatingNotes: true,
             hideAllButtons: true
         }).on("autocomplete:noteselected", (event, suggestion, dataset) => {
             const notePath = suggestion.notePath;
-            noteId = (notePath ?? "").split("/").at(-1);
+            newNoteId = (notePath ?? "").split("/").at(-1);
-        }).on("blur", () => success(noteId));
+        }).on("blur", () => {
+            if (!editor.value) {
+                newNoteId = "";
+            }
+            success(newNoteId);
+        });
         editor.focus();
     });