various widget optimizations for faster note switching

libraries/springy.js

@@ -486,7 +486,7 @@ window.Springy = function() {
 				t._started = false;
 				onRenderStop();
 			} else {
-				requestIdleCallback(step, { timeout: 10 });
+				requestIdleCallback(step, { timeout: 30 });
 			}
 		}
 

src/public/javascripts/services/app_context.js

@@ -433,22 +433,6 @@ class AppContext {
         this.openTabsChangedListener();
     }
 
-    // FIXME non existent event
-    noteChangesSavedListener() {
-        const activeTabContext = this.getActiveTabContext();
-
-        if (!activeTabContext || !activeTabContext.note) {
-            return;
-        }
-
-        if (activeTabContext.note.isProtected && protectedSessionHolder.isProtectedSessionAvailable()) {
-            protectedSessionHolder.touchProtectedSession();
-        }
-
-        // run async
-        bundleService.executeRelationBundles(activeTabContext.note, 'runOnNoteChange', activeTabContext);
-    }
-
     activateNextTabListener() {
         const tabIdsInOrder = this.tabRow.getTabIdsInOrder();
         const oldIdx = tabIdsInOrder.findIndex(tid => tid === this.activeTabId);

src/public/javascripts/services/bundle.js

@@ -29,21 +29,8 @@ async function executeStartupBundles() {
     }
 }
 
-async function executeRelationBundles(note, relationName, tabContext) {
-    note.bundleCache = note.bundleCache || {};
-
-    if (!note.bundleCache[relationName]) {
-        note.bundleCache[relationName] = await server.get("script/relation/" + note.noteId + "/" + relationName);
-    }
-
-    for (const bundle of note.bundleCache[relationName]) {
-        await executeBundle(bundle, note, tabContext);
-    }
-}
-
 export default {
     executeBundle,
     getAndExecuteBundle,
-    executeStartupBundles,
+    executeStartupBundles
-    executeRelationBundles
 }

src/public/javascripts/services/server.js

@@ -50,6 +50,8 @@ let maxKnownSyncId = 0;
 async function call(method, url, data, headers = {}) {
     let resp;
 
+    const start = Date.now();
+
     if (utils.isElectron()) {
         const ipc = require('electron').ipcRenderer;
         const requestId = i++;
@@ -74,6 +76,10 @@ async function call(method, url, data, headers = {}) {
         resp = await ajax(url, method, data, headers);
     }
 
+    const end = Date.now();
+
+    console.log(`${method} ${url} took ${end-start}ms`);
+
     const maxSyncIdStr = resp.headers['trilium-max-sync-id'];
 
     if (maxSyncIdStr && maxSyncIdStr.trim()) {

src/public/javascripts/services/tab_context.js

@@ -66,9 +66,6 @@ class TabContext extends Component {
             }
         }, 5000);
 
-        // should be done somewhere else ...
-        bundleService.executeRelationBundles(this.note, 'runOnNoteView', this);
-
         if (this.note.isProtected && protectedSessionHolder.isProtectedSessionAvailable()) {
             // FIXME: there are probably more places where this should be done
             protectedSessionHolder.touchProtectedSession();

src/public/javascripts/widgets/attributes.js

@@ -24,46 +24,44 @@ export default class AttributesWidget extends CollapsibleWidget {
     }
 
     async refreshWithNote(note) {
-        const attributes = await note.getAttributes();
         const ownedAttributes = note.getOwnedAttributes();
-
-        if (attributes.length === 0) {
-            this.$body.text("No attributes yet...");
-            return;
-        }
-
         const $attributesContainer = $("<div>");
 
         await this.renderAttributes(ownedAttributes, $attributesContainer);
 
-        const inheritedAttributes = attributes.filter(attr => attr.noteId !== this.tabContext.note.noteId);
+        const $inheritedAttrs = $("<span>").append($("<strong>").text("Inherited: "));
+        const $showInheritedAttributes = $("<a>")
+            .attr("href", "javascript:")
+            .text("+show inherited")
+            .on('click', async () => {
+                const attributes = await note.getAttributes();
+                const inheritedAttributes = attributes.filter(attr => attr.noteId !== this.tabContext.note.noteId);
 
-        if (inheritedAttributes.length > 0) {
+                if (inheritedAttributes.length === 0) {
-            const $inheritedAttrs = $("<span>").append($("<strong>").text("Inherited: "));
+                    $inheritedAttrs.text("No inherited attributes yet...");
-            const $showInheritedAttributes = $("<a>")
+                }
-                .attr("href", "javascript:")
+                else {
-                .text("+show inherited")
+                    await this.renderAttributes(inheritedAttributes, $inheritedAttrs);
-                .on('click', () => {
+                }
-                    $showInheritedAttributes.hide();
-                    $inheritedAttrs.show();
-                });
 
-            const $hideInheritedAttributes = $("<a>")
+                $inheritedAttrs.show();
-                .attr("href", "javascript:")
+                $showInheritedAttributes.hide();
-                .text("-hide inherited")
+                $hideInheritedAttributes.show();
-                .on('click', () => {
+            });
-                    $showInheritedAttributes.show();
-                    $inheritedAttrs.hide();
-                });
 
-            $attributesContainer.append($showInheritedAttributes);
+        const $hideInheritedAttributes = $("<a>")
-            $attributesContainer.append($inheritedAttrs);
+            .attr("href", "javascript:")
+            .text("-hide inherited")
+            .on('click', () => {
+                $showInheritedAttributes.show();
+                $hideInheritedAttributes.hide();
+                $inheritedAttrs.empty().hide();
+            });
 
-            await this.renderAttributes(inheritedAttributes, $inheritedAttrs);
+        $attributesContainer.append($showInheritedAttributes, $inheritedAttrs, $hideInheritedAttributes);
 
-            $inheritedAttrs.append($hideInheritedAttributes);
+        $inheritedAttrs.hide();
-            $inheritedAttrs.hide();
+        $hideInheritedAttributes.hide();
-        }
 
         this.$body.empty().append($attributesContainer);
     }

src/public/javascripts/widgets/link_map.js

@@ -28,6 +28,18 @@ export default class LinkMapWidget extends CollapsibleWidget {
         return [$showFullButton];
     }
 
+    noteSwitched() {
+        const noteId = this.noteId;
+
+        // avoid executing this expensive operation multiple times when just going through notes (with keyboard especially)
+        // until the users settles on a note
+        setTimeout(() => {
+            if (this.noteId === noteId) {
+                this.refresh();
+            }
+        }, 1000);
+    }
+
     async refreshWithNote(note) {
         this.$body.css('opacity', 0);
         this.$body.html(TPL);

src/public/javascripts/widgets/note_paths.js

@@ -26,47 +26,48 @@ export default class NotePathsWidget extends TabAwareWidget {
         this.$notePathList = this.$widget.find(".note-path-list");
         this.$notePathCount = this.$widget.find(".note-path-count");
 
+        this.$widget.on('show.bs.dropdown', () => this.renderDropdown());
+
         return this.$widget;
     }
 
     async refreshWithNote(note, notePath) {
-        if (note.noteId === 'root') {
+        const pathCount = note.noteId === 'root'
-            // root doesn't have any parent, but it's still technically 1 path
+            ? 1 // root doesn't have any parent, but it's still technically 1 path
+            : note.getBranchIds().length;
 
-            this.$notePathCount.html("1 path");
+        this.$notePathCount.html(pathCount + " path" + (pathCount > 1 ? "s" : ""));
+    }
 
-            this.$notePathList.empty();
+    async renderDropdown() {
+        this.$notePathList.empty();
 
+        if (this.noteId === 'root') {
             await this.addPath('root', true);
+            return;
         }
-        else {
-            const parents = await note.getParentNotes();
 
-            this.$notePathCount.html(parents.length + " path" + (parents.length > 1 ? "s" : ""));
+        const pathSegments = this.notePath.split("/");
-            this.$notePathList.empty();
+        const activeNoteParentNoteId = pathSegments[pathSegments.length - 2]; // we know this is not root so there must be a parent
 
-            const pathSegments = notePath.split("/");
+        for (const parentNote of await this.note.getParentNotes()) {
-            const activeNoteParentNoteId = pathSegments[pathSegments.length - 2]; // we know this is not root so there must be a parent
+            const parentNotePath = await treeService.getSomeNotePath(parentNote);
+            // this is to avoid having root notes leading '/'
+            const notePath = parentNotePath ? (parentNotePath + '/' + this.noteId) : this.noteId;
+            const isCurrent = activeNoteParentNoteId === parentNote.noteId;
 
-            for (const parentNote of parents) {
+            await this.addPath(notePath, isCurrent);
-                const parentNotePath = await treeService.getSomeNotePath(parentNote);
-                // this is to avoid having root notes leading '/'
-                const notePath = parentNotePath ? (parentNotePath + '/' + note.noteId) : note.noteId;
-                const isCurrent = activeNoteParentNoteId === parentNote.noteId;
-
-                await this.addPath(notePath, isCurrent);
-            }
-
-            const cloneLink = $("<div>")
-                .addClass("dropdown-item")
-                .append(
-                    $('<button class="btn btn-sm">')
-                        .text('Clone note to new location...')
-                        .on('click', () => import("../dialogs/clone_to.js").then(d => d.showDialog([note.noteId])))
-                );
-
-            this.$notePathList.append(cloneLink);
         }
+
+        const cloneLink = $("<div>")
+            .addClass("dropdown-item")
+            .append(
+                $('<button class="btn btn-sm">')
+                    .text('Clone note to new location...')
+                    .on('click', () => import("../dialogs/clone_to.js").then(d => d.showDialog([this.noteId])))
+            );
+
+        this.$notePathList.append(cloneLink);
     }
 
     async addPath(notePath, isCurrent) {
@@ -75,9 +76,12 @@ export default class NotePathsWidget extends TabAwareWidget {
         const noteLink = await linkService.createNoteLink(notePath, {title});
 
         noteLink
-            .addClass("no-tooltip-preview")
             .addClass("dropdown-item");
 
+        noteLink
+            .find('a')
+            .addClass("no-tooltip-preview");
+
         if (isCurrent) {
             noteLink.addClass("current");
         }

src/public/javascripts/widgets/note_revisions.js

@@ -26,6 +26,18 @@ class NoteRevisionsWidget extends CollapsibleWidget {
         return [$showFullButton];
     }
 
+    noteSwitched() {
+        const noteId = this.noteId;
+
+        // avoid executing this expensive operation multiple times when just going through notes (with keyboard especially)
+        // until the users settles on a note
+        setTimeout(() => {
+            if (this.noteId === noteId) {
+                this.refresh();
+            }
+        }, 1000);
+    }
+
     async refreshWithNote(note) {
         const revisionItems = await server.get(`notes/${note.noteId}/revisions`);
 

src/public/javascripts/widgets/note_type.js

@@ -52,7 +52,7 @@ export default class NoteTypeWidget extends TabAwareWidget {
     }
 
     /** actual body is rendered lazily on note-type button click */
-    async renderDropdown() {console.log("AAAAAAAAAAAAAAAAAAA");
+    async renderDropdown() {
         this.$noteTypeDropdown.empty();
 
         for (const noteType of NOTE_TYPES.filter(nt => nt.selectable)) {
@@ -130,6 +130,7 @@ export default class NoteTypeWidget extends TabAwareWidget {
     }
 
     async confirmChangeIfContent() {
+        // FIXME
         if (!this.tabContext.getComponent().getContent()) {
             return true;
         }

src/public/javascripts/widgets/similar_notes.js

@@ -14,6 +14,20 @@ export default class SimilarNotesWidget extends CollapsibleWidget {
 
     getMaxHeight() { return "200px"; }
 
+    noteSwitched() {
+        const noteId = this.noteId;
+
+        this.$body.empty();
+
+        // avoid executing this expensive operation multiple times when just going through notes (with keyboard especially)
+        // until the users settles on a note
+        setTimeout(() => {
+            if (this.noteId === noteId) {
+                this.refresh();
+            }
+        }, 1000);
+    }
+
     async refreshWithNote(note) {
         // remember which title was when we found the similar notes
         this.title = note.title;

src/public/stylesheets/style.css

@@ -268,7 +268,7 @@ div.ui-tooltip {
     color: #888 !important;
 }
 
-.dropdown-menu a:hover:not(.disabled), li.dropdown-item:hover:not(.disabled), div.dropdown-item:hover:not(.disabled) {
+.dropdown-menu a:hover:not(.disabled), .dropdown-item:hover:not(.disabled) {
     color: var(--hover-item-text-color) !important;
     background-color: var(--hover-item-background-color) !important;
     cursor: pointer;

src/services/note_cache.js

@@ -415,7 +415,7 @@ function evaluateSimilarity(text1, text2, noteId, results) {
  */
 function setImmediatePromise() {
     return new Promise((resolve) => {
-        setImmediate(() => resolve());
+        setTimeout(() => resolve(), 0);
     });
 }