From 6469937393e6f32b629263fcb743d1182440ac28 Mon Sep 17 00:00:00 2001
From: zadam <adam.zivner@gmail.com>
Date: Thu, 4 Feb 2021 22:05:32 +0100
Subject: [PATCH] fix note tree flickering (note cache was not updated when
 expanded status changed)

---
 .../widgets/collapsible_widgets/edited_notes.js   | 13 ++++---------
 src/public/app/widgets/note_tree.js               |  4 ++--
 src/routes/api/branches.js                        | 15 +++++++++++++++
 src/services/note_cache/entities/branch.js        |  9 +++++++++
 src/services/note_cache/note_cache_loader.js      |  3 ++-
 5 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/public/app/widgets/collapsible_widgets/edited_notes.js b/src/public/app/widgets/collapsible_widgets/edited_notes.js
index 7644b1d7e..b214ac17e 100644
--- a/src/public/app/widgets/collapsible_widgets/edited_notes.js
+++ b/src/public/app/widgets/collapsible_widgets/edited_notes.js
@@ -5,14 +5,9 @@ import treeCache from "../../services/tree_cache.js";
 
 const TPL = `
 <div class="edited-notes-widget">
-    <style>
-        .edited-notes-widget ul {
-            padding-left: 10px !important;
-        }
-    
-        .edited-notes-widget ul li {
+    <style>    
+        .edited-notes-widget .edited-note-line {
             white-space: nowrap; 
-            list-style-position:inside; 
             overflow-x: hidden; 
             text-overflow: ellipsis;
         }
@@ -55,10 +50,10 @@ export default class EditedNotesWidget extends CollapsibleWidget {
 
         await treeCache.getNotes(noteIds, true); // preload all at once
 
-        const $list = $('<ul>');
+        const $list = $('<div>'); // not using <ul> because it's difficult to style correctly with text-overflow
 
         for (const editedNote of editedNotes) {
-            const $item = $('<li>');
+            const $item = $('<div class="edited-note-line">');
 
             if (editedNote.isDeleted) {
                 const title = editedNote.title + " (deleted)";
diff --git a/src/public/app/widgets/note_tree.js b/src/public/app/widgets/note_tree.js
index 51fa9232d..90458173d 100644
--- a/src/public/app/widgets/note_tree.js
+++ b/src/public/app/widgets/note_tree.js
@@ -1175,7 +1175,7 @@ export default class NoteTreeWidget extends TabAwareWidget {
         });
     }
 
-    async setExpanded(branchId, isExpanded) {
+    setExpanded(branchId, isExpanded) {
         utils.assertArguments(branchId);
 
         const branch = treeCache.getBranch(branchId, true);
@@ -1193,7 +1193,7 @@ export default class NoteTreeWidget extends TabAwareWidget {
 
         branch.isExpanded = isExpanded;
 
-        await server.put(`branches/${branchId}/expanded/${isExpanded ? 1 : 0}`);
+        server.put(`branches/${branchId}/expanded/${isExpanded ? 1 : 0}`);
     }
 
     async reloadTreeFromCache() {
diff --git a/src/routes/api/branches.js b/src/routes/api/branches.js
index c6342551b..60c05dc83 100644
--- a/src/routes/api/branches.js
+++ b/src/routes/api/branches.js
@@ -5,6 +5,7 @@ const utils = require('../../services/utils');
 const entityChangesService = require('../../services/entity_changes.js');
 const treeService = require('../../services/tree');
 const noteService = require('../../services/notes');
+const noteCache = require('../../services/note_cache/note_cache');
 const repository = require('../../services/repository');
 const TaskContext = require('../../services/task_context');
 
@@ -126,6 +127,12 @@ function setExpanded(req) {
         sql.execute("UPDATE branches SET isExpanded = ? WHERE branchId = ?", [expanded, branchId]);
         // we don't sync expanded label
         // also this does not trigger updates to the frontend, this would trigger too many reloads
+
+        const branch = noteCache.branches[branchId];
+
+        if (branch) {
+            branch.isExpanded = !!expanded;
+        }
     }
 }
 
@@ -148,6 +155,14 @@ function setExpandedForSubtree(req) {
 
     sql.executeMany(`UPDATE branches SET isExpanded = ${expanded} WHERE branchId IN (???)`, branchIds);
 
+    for (const branchId of branchIds) {
+        const branch = noteCache.branches[branchId];
+
+        if (branch) {
+            branch.isExpanded = !!expanded;
+        }
+    }
+
     return {
         branchIds
     };
diff --git a/src/services/note_cache/entities/branch.js b/src/services/note_cache/entities/branch.js
index 49dbb1b78..55edfc650 100644
--- a/src/services/note_cache/entities/branch.js
+++ b/src/services/note_cache/entities/branch.js
@@ -54,6 +54,15 @@ class Branch {
 
         return this.noteCache.notes[this.parentNoteId];
     }
+
+    // for logging etc
+    get pojo() {
+        const pojo = {...this};
+
+        delete pojo.noteCache;
+
+        return pojo;
+    }
 }
 
 module.exports = Branch;
diff --git a/src/services/note_cache/note_cache_loader.js b/src/services/note_cache/note_cache_loader.js
index 336243e15..8c01d5d76 100644
--- a/src/services/note_cache/note_cache_loader.js
+++ b/src/services/note_cache/note_cache_loader.js
@@ -80,8 +80,9 @@ eventService.subscribe([eventService.ENTITY_CHANGED, eventService.ENTITY_DELETED
             delete noteCache.branches[branchId];
         }
         else if (branchId in noteCache.branches) {
-            // only relevant thing which can change in a branch is prefix
+            // only relevant properties which can change in a branch are prefix and isExpanded
             noteCache.branches[branchId].prefix = entity.prefix;
+            noteCache.branches[branchId].isExpanded = entity.isExpanded;
 
             if (childNote) {
                 childNote.flatTextCache = null;