various widget refactorings

src/public/javascripts/services/attributes.js

@@ -1,60 +0,0 @@
-import server from "./server.js";
-import ws from "./ws.js";
-import treeService from "./tree.js";
-import noteAutocompleteService from "./note_autocomplete.js";
-import Component from "../widgets/component.js";
-import utils from "./utils.js";
-
-class Attributes extends Component {
-    /**
-     * @param {AppContext} appContext
-     * @param {TabContext} tabContext
-     */
-    constructor(appContext, tabContext) {
-        super(appContext);
-        this.tabContext = tabContext;
-        this.attributePromise = null;
-    }
-
-    invalidateAttributes() {
-        this.attributePromise = null;
-    }
-
-    reloadAttributes() {
-        if (this.tabContext.note) {
-            this.attributePromise = server.get(`notes/${this.tabContext.note.noteId}/attributes`);
-        }
-        else {
-            this.invalidateAttributes();
-        }
-    }
-
-    async refreshAttributes() {
-        this.reloadAttributes();
-    }
-
-    async getAttributes() {
-        if (!this.attributePromise) {
-            this.reloadAttributes();
-        }
-
-        return this.attributePromise;
-    }
-
-    syncDataListener({data}) {
-        if (this.tabContext.note && data.find(sd => sd.entityName === 'attributes' && sd.noteId === this.tabContext.note.noteId)) {
-            this.reloadAttributes();
-        }
-    }
-
-    tabNoteSwitchedListener() {
-        if (utils.isDesktop()) {
-            this.refreshAttributes();
-        } else {
-            // mobile usually doesn't need attributes so we just invalidate
-            this.invalidateAttributes();
-        }
-    }
-}
-
-export default Attributes;

src/public/javascripts/services/render.js

@@ -2,11 +2,10 @@ import server from "./server.js";
 import bundleService from "./bundle.js";
 
 async function render(note, $el, ctx) {
-    const attributes = await note.getAttributes();
-    const renderNoteIds = attributes.filter(attr =>
-        attr.type === 'relation'
-        && attr.name === 'renderNote'
-        && !!attr.value).map(rel => rel.value);
+    const relations = await note.getRelations('renderNote');
+    const renderNoteIds = relations
+        .map(rel => rel.value)
+        .filter(noteId => noteId);
 
     $el.empty().toggle(renderNoteIds.length > 0);
 
@@ -18,11 +17,8 @@ async function render(note, $el, ctx) {
 
         $scriptContainer.append(bundle.html);
 
-        const $result = await bundleService.executeBundle(bundle, note, ctx, $scriptContainer);
-
-        if ($result) {
-            $scriptContainer.append($result);
-        }
+        // async so that scripts cannot block trilium execution
+        bundleService.executeBundle(bundle, note, ctx, $scriptContainer);
     }
 
     return renderNoteIds.length > 0;

src/public/javascripts/widgets/attributes.js

@@ -3,7 +3,7 @@ import linkService from "../services/link.js";
 import ws from "../services/ws.js";
 import CollapsibleWidget from "./collapsible_widget.js";
 
-class AttributesWidget extends CollapsibleWidget {
+export default class AttributesWidget extends CollapsibleWidget {
     getWidgetTitle() { return "Attributes"; }
 
     getHelp() {
@@ -93,6 +93,4 @@ class AttributesWidget extends CollapsibleWidget {
             this.refresh();
         }
     }
-}
-
-export default AttributesWidget;
+}

src/public/javascripts/widgets/calendar.js

@@ -24,7 +24,7 @@ const TPL = `
 </div>
 `;
 
-class CalendarWidget extends CollapsibleWidget {
+export default class CalendarWidget extends CollapsibleWidget {
     getWidgetTitle() { return "Calendar"; }
 
     async isEnabled() {
@@ -161,6 +161,4 @@ class CalendarWidget extends CollapsibleWidget {
             'December'
         ][monthIndex];
     }
-}
-
-export default CalendarWidget;
+}

src/public/javascripts/widgets/link_map.js

@@ -8,7 +8,7 @@ const TPL = `
 </div>
 `;
 
-class LinkMapWidget extends CollapsibleWidget {
+export default class LinkMapWidget extends CollapsibleWidget {
     getWidgetTitle() { return "Link map"; }
 
     getHelp() {
@@ -60,6 +60,4 @@ class LinkMapWidget extends CollapsibleWidget {
             this.refresh();
         }
     }
-}
-
-export default LinkMapWidget;
+}

src/public/javascripts/widgets/note_info.js

@@ -35,7 +35,7 @@ const TPL = `
 </table>
 `;
 
-class NoteInfoWidget extends CollapsibleWidget {
+export default class NoteInfoWidget extends CollapsibleWidget {
     getWidgetTitle() { return "Note info"; }
 
     doRenderBody() {
@@ -67,11 +67,9 @@ class NoteInfoWidget extends CollapsibleWidget {
             .attr("title", note.mime);
     }
 
-    syncDataListener({data}) {
-        if (data.find(sd => sd.entityName === 'notes' && this.isNote(sd.entityId))) {
+    entitiesReloadedListener({loadResults}) {
+        if (loadResults.isNoteReloaded(this.noteId)) {
             this.refresh();
         }
     }
-}
-
-export default NoteInfoWidget;
+}

src/public/javascripts/widgets/note_revisions.js

@@ -26,8 +26,7 @@ class NoteRevisionsWidget extends CollapsibleWidget {
         return [$showFullButton];
     }
 
-    async refreshWithNote() {
-        const note = this.tabContext.note;
+    async refreshWithNote(note) {
         const revisionItems = await server.get(`notes/${note.noteId}/revisions`);
 
         if (revisionItems.length === 0) {
@@ -35,6 +34,10 @@ class NoteRevisionsWidget extends CollapsibleWidget {
             return;
         }
 
+        if (note.noteId !== this.noteId) {
+            return;
+        }
+
         this.$body.html(TPL);
 
         const $list = this.$body.find('.note-revision-list');
@@ -60,12 +63,6 @@ class NoteRevisionsWidget extends CollapsibleWidget {
             this.refresh();
         }
     }
-
-    syncDataListener({data}) {
-        if (data.find(sd => sd.entityName === 'note_revisions' && sd.noteId === this.tabContext.note.noteId)) {
-            this.refresh();
-        }
-    }
 }
 
 export default NoteRevisionsWidget;

src/public/javascripts/widgets/similar_notes.js

@@ -3,7 +3,7 @@ import linkService from "../services/link.js";
 import server from "../services/server.js";
 import treeCache from "../services/tree_cache.js";
 
-class SimilarNotesWidget extends CollapsibleWidget {
+export default class SimilarNotesWidget extends CollapsibleWidget {
     getWidgetTitle() { return "Similar notes"; }
 
     getHelp() {
@@ -14,9 +14,9 @@ class SimilarNotesWidget extends CollapsibleWidget {
 
     getMaxHeight() { return "200px"; }
 
-    async refreshWithNote() {
+    async refreshWithNote(note) {
         // remember which title was when we found the similar notes
-        this.title = this.tabContext.note.title;
+        this.title = note.title;
 
         const similarNotes = await server.get('similar-notes/' + this.tabContext.note.noteId);
 
@@ -47,13 +47,11 @@ class SimilarNotesWidget extends CollapsibleWidget {
         this.$body.empty().append($list);
     }
 
-    noteSavedListener({data}) {
-        if (this.title !== this.tabContext.note.title) {
+    entitiesReloadedListener({loadResults}) {
+        if (this.note && this.title !== this.note.title) {
             this.rendered = false;
 
-            this.renderBody();
+            this.refresh();
         }
     }
-}
-
-export default SimilarNotesWidget;
+}

src/public/javascripts/widgets/type_widgets/book.js

@@ -225,18 +225,33 @@ export default class BookTypeWidget extends TypeWidget {
         }
 
         for (const childNote of childNotes) {
+            if (note.noteId !== this.noteId) {
+                // rendering can take a long time and the note might be switched during the rendering
+                return;
+            }
+
             const childNotePath = this.tabContext.notePath + '/' + childNote.noteId;
 
-            const {type, renderedContent} = await noteContentRenderer.getRenderedContent(childNote);
+            const $content = $('<div class="note-book-content">')
+                .css("max-height", ZOOMS[this.zoomLevel].height);
 
             const $card = $('<div class="note-book-card">')
                 .attr('data-note-id', childNote.noteId)
                 .css("flex-basis", ZOOMS[this.zoomLevel].width)
-                .addClass("type-" + type)
                 .append($('<h5 class="note-book-title">').append(await linkService.createNoteLink(childNotePath,  {showTooltip: false})))
-                .append($('<div class="note-book-content">')
-                    .css("max-height", ZOOMS[this.zoomLevel].height)
-                    .append(renderedContent));
+                .append($content);
+
+            try {
+                const {type, renderedContent} = await noteContentRenderer.getRenderedContent(childNote);
+
+                $card.addClass("type-" + type);
+                $content.append(renderedContent);
+            }
+            catch (e) {
+                console.log(`Caught error while rendering note ${note.noteId} of type ${note.type}: ${e.message}, stack: ${e.stack}`);
+
+                $content.append("rendering error");
+            }
 
             const childCount = childNote.getChildNoteIds().length;
 

src/public/javascripts/widgets/what_links_here.js

@@ -1,7 +1,7 @@
 import CollapsibleWidget from "./collapsible_widget.js";
 import linkService from "../services/link.js";
 
-class WhatLinksHereWidget extends CollapsibleWidget {
+export default class WhatLinksHereWidget extends CollapsibleWidget {
     getWidgetTitle() { return "What links here"; }
 
     getMaxHeight() { return "200px"; }
@@ -55,6 +55,4 @@ class WhatLinksHereWidget extends CollapsibleWidget {
             this.refresh();
         }
     }
-}
-
-export default WhatLinksHereWidget;
+}