From ef4bc13dd1ef857fae24d7ffa540c4e60420b8e0 Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Sat, 29 May 2021 14:13:22 +0200
Subject: [PATCH] section widgets are updated lazily

---
 .../collapsible_section_container.js          | 36 ++++++++++++++++---
 .../app/widgets/section_widgets/link_map.js   | 16 ---------
 2 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/public/app/widgets/containers/collapsible_section_container.js b/src/public/app/widgets/containers/collapsible_section_container.js
index 3e5e670c5..34dcd57e7 100644
--- a/src/public/app/widgets/containers/collapsible_section_container.js
+++ b/src/public/app/widgets/containers/collapsible_section_container.js
@@ -20,8 +20,6 @@ const TPL = `
     }
     
     .section-title {
-        padding-right: 10px;
-        padding-left: 10px;
         color: var(--muted-text-color);
         border-bottom: 1px solid var(--main-border-color); 
     }
@@ -45,10 +43,15 @@ const TPL = `
         color: var(--main-text-color);
     }
     
-    .section-title-empty {
-        flex-basis: 20px;
+    .section-title:first-of-type {
+        padding-left: 10px;
     }
     
+    .section-title-empty {
+        flex-basis: 35px;
+        flex-shrink: 1;
+    }
+        
     .section-title-empty:last-of-type {
         flex-shrink: 1;
         flex-grow: 1;
@@ -152,6 +155,12 @@ export default class CollapsibleSectionContainer extends NoteContextAwareWidget
 
                 this.lastActiveComponentId = sectionComponentId;
 
+                const activeChild = this.getActiveChild();
+
+                if (activeChild) {
+                    activeChild.handleEvent('noteSwitched', {noteContext: this.noteContext, notePath: this.notePath});
+                }
+
                 this.$titleContainer.find(`.section-title-real[data-section-component-id="${sectionComponentId}"]`).addClass("active");
                 this.$bodyContainer.find(`.section-body[data-section-component-id="${sectionComponentId}"]`).addClass("active");
             }
@@ -211,6 +220,21 @@ export default class CollapsibleSectionContainer extends NoteContextAwareWidget
         this.refreshWithNote(this.note, true);
     }
 
+    async handleEventInChildren(name, data) {
+        if (['activeContextChanged', 'setNoteContext'].includes(name)) {
+            // won't trigger .refresh();
+            await super.handleEventInChildren('setNoteContext', data);
+        }
+        else {
+            const activeChild = this.getActiveChild();
+
+            // forward events only to active section, inactive ones don't need to be updated
+            if (activeChild) {
+                await activeChild.handleEvent(name, data);
+            }
+        }
+    }
+
     entitiesReloadedEvent({loadResults}) {
         if (loadResults.isNoteReloaded(this.noteId) && this.lastNoteType !== this.note.type) {
             // note type influences the list of available sections the most
@@ -220,4 +244,8 @@ export default class CollapsibleSectionContainer extends NoteContextAwareWidget
             this.refresh();
         }
     }
+
+    getActiveChild() {
+        return this.children.find(ch => ch.componentId === this.lastActiveComponentId)
+    }
 }
diff --git a/src/public/app/widgets/section_widgets/link_map.js b/src/public/app/widgets/section_widgets/link_map.js
index 9ceef2c20..30f936f25 100644
--- a/src/public/app/widgets/section_widgets/link_map.js
+++ b/src/public/app/widgets/section_widgets/link_map.js
@@ -43,22 +43,6 @@ export default class LinkMapWidget extends NoteContextAwareWidget {
     }
 
     async refreshWithNote(note) {
-        let shown = false;
-
-        const observer = new IntersectionObserver(entries => {
-            if (!shown && entries[0].isIntersecting) {
-                shown = true;
-                this.displayLinkMap(note);
-            }
-        }, {
-            rootMargin: '0px',
-            threshold: 0.1
-        });
-
-        observer.observe(this.$widget[0]);
-    }
-
-    async displayLinkMap(note) {
         this.$widget.find(".link-map-container").empty();
 
         const $linkMapContainer = this.$widget.find('.link-map-container');