fix: Treeview menu loading perf issue- EXO-73169 - Meeds-io/MIPs#129

notes-service/src/main/java/org/exoplatform/wiki/jpa/JPADataStorage.java

@@ -332,10 +332,15 @@ public List<Page> getChildrenPageOf(Page page, boolean withDrafts) throws WikiEx
   }
 
   @Override
-  public boolean hasChildren(long noteId) throws WikiException {
+  public boolean hasChildren(long noteId) {
     return pageDAO.countPageChildrenById(noteId) > 0;
   }
 
+  @Override
+  public boolean hasDrafts(long noteId) {
+    return draftPageDAO.countDraftPagesByParentPage(noteId) > 0;
+  }
+
   @Override
   @ExoTransactional
   public void deletePage(String wikiType, String wikiOwner, String pageName) throws WikiException {

notes-service/src/main/java/org/exoplatform/wiki/jpa/dao/DraftPageDAO.java

@@ -111,4 +111,9 @@ public DraftPageEntity findLatestDraftPageByTargetPageAndLang(Long targetPageId,
     }
   }
 
+  public Long countDraftPagesByParentPage(long parentPageId) {
+    return (Long) getEntityManager().createNamedQuery("wikiDraftPage.countDraftPagesByParentPage")
+                                    .setParameter("parentPageId", parentPageId)
+                                    .getSingleResult();
+  }
 }

notes-service/src/main/java/org/exoplatform/wiki/jpa/entity/DraftPageEntity.java

@@ -52,6 +52,7 @@
         @NamedQuery(name = "wikiDraftPage.findLatestDraftPageByTargetPage", query = "SELECT d FROM WikiDraftPageEntity d WHERE d.targetPage.id = :targetPageId ORDER BY d.updatedDate DESC"),
         @NamedQuery(name = "wikiDraftPage.findDraftPageByTargetPage", query = "SELECT d FROM WikiDraftPageEntity d WHERE d.targetPage.id = :targetPageId"),
         @NamedQuery(name = "wikiDraftPage.findDraftPagesByParentPage", query = "SELECT d FROM WikiDraftPageEntity d WHERE d.parentPage.id = :parentPageId"),
+        @NamedQuery(name = "wikiDraftPage.countDraftPagesByParentPage", query = "SELECT count(*) FROM WikiDraftPageEntity d WHERE d.parentPage.id = :parentPageId"),
         @NamedQuery(name = "wikiDraftPage.findLatestDraftPageByTargetPageAndLang", query = "SELECT d FROM WikiDraftPageEntity d WHERE d.targetPage.id = :targetPageId AND " +
                                                                                                   "((:lang IS NULL AND d.lang IS NULL) OR (:lang IS NOT NULL AND d.lang = :lang)) ORDER BY d.updatedDate DESC"),
         @NamedQuery(name = "wikiDraftPage.deleteOrphanDraftPagesByParentPage", query = "DELETE FROM WikiDraftPageEntity d WHERE d.targetPage IS NULL AND d.parentPage.id=:id")})

notes-service/src/main/java/org/exoplatform/wiki/jpa/entity/PageEntity.java

@@ -44,7 +44,7 @@
     @NamedQuery(name = "wikiPage.getPagesOfWiki", query = "SELECT p FROM WikiPageEntity p JOIN p.wiki w WHERE w.type = :type AND w.owner = :owner AND p.deleted = :deleted"),
     @NamedQuery(name = "wikiPage.getChildrenPages", query = "SELECT p FROM WikiPageEntity p WHERE p.parentPage.id = :id AND p.deleted = false ORDER BY p.name"),
     @NamedQuery(name = "wikiPage.getAllPagesBySyntax", query = "SELECT p FROM WikiPageEntity p WHERE p.syntax = :syntax OR p.syntax IS NULL ORDER BY p.updatedDate DESC"),
-    @NamedQuery(name = "wikiPage.countPageChildrenById", query = "SELECT COUNT(*) FROM WikiPageEntity p WHERE p.parentPage.id = :id"),
+    @NamedQuery(name = "wikiPage.countPageChildrenById", query = "SELECT COUNT(*) FROM WikiPageEntity p WHERE p.parentPage.id = :id AND p.deleted = false"),
 })
 public class PageEntity extends BasePageEntity {
 

notes-service/src/main/java/org/exoplatform/wiki/service/DataStorage.java

@@ -86,7 +86,21 @@ public interface DataStorage {
    */
   public List<Page> getChildrenPageOf(Page page, boolean withDrafts) throws WikiException;
 
-  public boolean hasChildren(long noteId) throws WikiException;
+  /**
+   * Check whether the page has children or not
+   *
+   * @param noteId target note id
+   * @return true if it has page and false if not
+   */
+  public boolean hasChildren(long noteId);
+
+  /**
+   * Check if page has drafts
+   *
+   * @param noteId target note id
+   * @return true if page has drafts and false if not
+   */
+  boolean hasDrafts(long noteId);
 
   public void deletePage(String wikiType, String wikiOwner, String pageId) throws WikiException;
 

notes-service/src/main/java/org/exoplatform/wiki/service/NoteService.java

@@ -277,6 +277,22 @@ Page getNoteOfNoteBookByName(String noteType,
    */
   List<Page> getChildrenNoteOf(Page note, boolean withDrafts, boolean withChild) throws WikiException;
 
+  /**
+   * Check if the given page has children or not
+   *
+   * @param pageId note page id
+   * @return true if the given page has children and false if not
+   */
+  boolean hasChildren(long pageId);
+
+  /**
+   * Check if the given page has drafts or not
+   *
+   * @param pageId note page id
+   * @return true if the given page has drafts and false if not
+   */
+  boolean hasDrafts(long pageId);
+
   /**
    * Get all the children notes of a note
    *

notes-service/src/main/java/org/exoplatform/wiki/service/impl/NoteServiceImpl.java

@@ -761,12 +761,28 @@ public List<Page> getChildrenNoteOf(Page note, boolean withDrafts, boolean withC
     if (withChild) {
       for (Page page : pages) {
         long pageId = Long.parseLong(page.getId());
-        page.setHasChild(dataStorage.hasChildren(pageId));
+        page.setHasChild(hasChildren(pageId));
       }
     }
     return pages;
   }
-
+
+  /**
+   * {@inheritDoc}
+   */
+  @Override
+  public boolean hasChildren(long pageId) {
+    return dataStorage.hasChildren(pageId);
+  }
+
+  /**
+   * {@inheritDoc}
+   */
+  @Override
+  public boolean hasDrafts(long pageId) {
+    return dataStorage.hasDrafts(pageId);
+  }
+
   /**
    * {@inheritDoc}
    */

notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java

@@ -1287,12 +1287,13 @@ public Response getFullTreeData(@Parameter(description = "Note path", required =
 
       List<JsonNodeData> finalTree = new ArrayList<>();
       responseData = getJsonTree(noteParam, context);
-      JsonNodeData rootNodeData = responseData.get(0);
+      JsonNodeData rootNodeData = responseData.getFirst();
       rootNodeData.setHasDraftDescendant(true);
       finalTree.add(rootNodeData);
       context.put(TreeNode.DEPTH, "1");
 
-      List<JsonNodeData> children = new ArrayList<>(rootNodeData.getChildren());
+      List<JsonNodeData> listChildren = rootNodeData.getChildren();
+      List<JsonNodeData> children = listChildren != null ? new ArrayList<>(listChildren) : new ArrayList<>();
       List<JsonNodeData> parents = new ArrayList<>();
 
       do {
@@ -1360,7 +1361,7 @@ public Response getFullTreeData(@Parameter(description = "Note path", required =
                                  || Boolean.TRUE.equals(jsonNodeData.isHasDraftDescendant()))
                              .collect(Collectors.toList());
       }
-      while (bottomChildren.size() > 1 || (bottomChildren.size() == 1 && bottomChildren.get(0).getParentPageId() != null)) {
+      while (bottomChildren.size() > 1 || (bottomChildren.size() == 1 && bottomChildren.getFirst().getParentPageId() != null)) {
         for (JsonNodeData bottomChild : bottomChildren) {
           String parentPageId = bottomChild.getParentPageId();
           Optional<JsonNodeData> parentOptional = finalTree.stream()

notes-service/src/main/java/org/exoplatform/wiki/tree/JsonNodeData.java

@@ -99,14 +99,13 @@ public JsonNodeData(TreeNode treeNode,
     this.children = TreeUtils.tranformToJson(treeNode, context);
     this.isSelected = treeNode.isSelected();
     this.isRestricted = treeNode.isRetricted;
-    if (!this.children.isEmpty()) {
+    if (this.children != null && !this.children.isEmpty()) {
       this.isExpanded = true;
     }
     if (treeNode.getNodeType().equals(TreeNodeType.PAGE)) {
       Page page = ((PageTreeNode) treeNode).getPage();
       this.isDraftPage = page.isDraftPage();
       this.parentPageId = page.getParentPageId();
-      this.lang = page.getLang();
       this.url = page.getUrl();
       this.lang = page.getLang();
       boolean withDrafts = context.containsKey(TreeNode.WITH_DRAFTS) && (boolean) context.get(TreeNode.WITH_DRAFTS);

notes-service/src/main/java/org/exoplatform/wiki/tree/PageTreeNode.java

@@ -23,6 +23,8 @@
 import java.util.HashMap;
 import java.util.Iterator;
 
+import lombok.Getter;
+import lombok.Setter;
 import org.exoplatform.container.ExoContainerContext;
 import org.exoplatform.services.log.ExoLogger;
 import org.exoplatform.services.log.Log;
@@ -39,6 +41,8 @@
 public class PageTreeNode extends TreeNode {
   private static final Log log = ExoLogger.getLogger(PageTreeNode.class);
 
+  @Setter
+  @Getter
   private Page page;
 
   private NoteService noteService;
@@ -55,15 +59,8 @@ public PageTreeNode(Page page) throws Exception {
     this.page = page;
     this.id = page.getId();
     this.path = buildPath();
-    this.hasChild = !page.isDraftPage() && !noteService.getChildrenNoteOf(page, true, false).isEmpty();
-  }
-
-  public Page getPage() {
-    return page;
-  }
-
-  public void setPage(Page page) {
-    this.page = page;
+    this.hasChild = !page.isDraftPage() && (noteService.hasChildren(Long.parseLong(page.getId()))
+        || noteService.hasDrafts(Long.parseLong(page.getId())));
   }
 
   @Override

notes-service/src/main/java/org/exoplatform/wiki/tree/WikiHomeTreeNode.java

@@ -61,7 +61,8 @@ public WikiHomeTreeNode(Page wikiHome) throws Exception {
 
     this.wikiHome = wikiHome;
     this.path = this.buildPath();
-    this.hasChild = !wikiHome.isDraftPage() && !noteService.getChildrenNoteOf(wikiHome, true, true).isEmpty();
+    this.hasChild = !wikiHome.isDraftPage() && (noteService.hasChildren(Long.parseLong(wikiHome.getId()))
+        || noteService.hasDrafts(Long.parseLong(wikiHome.getId())));
   }
 
   @Override

notes-service/src/main/java/org/exoplatform/wiki/tree/utils/TreeUtils.java

@@ -100,27 +100,25 @@ public static List<JsonNodeData> tranformToJson(TreeNode treeNode, HashMap<Strin
       canEdit     = (Boolean)context.get(TreeNode.CAN_EDIT);
     }
 
-    List<JsonNodeData> children = new ArrayList<JsonNodeData>();
+    List<JsonNodeData> children = new ArrayList<>();
     for (TreeNode child : treeNode.getChildren()) {
       boolean isSelectable = true;
-      boolean isLastNode = false;
-      if (counter >= treeNode.getChildren().size()) {
-        isLastNode = true;
-      }
-
+      boolean isLastNode = counter >= treeNode.getChildren().size();
+
       if (child.getNodeType().equals(TreeNodeType.WIKI)) {
         isSelectable = false;
       } else if (child.getNodeType().equals(TreeNodeType.PAGE)) {
         Page page = ((PageTreeNode) child).getPage();
         if (((currentPage != null) && (currentPage.equals(page) || Utils.isDescendantPage(page, currentPage)))) {
           isSelectable = false;
         }
-        
+
         if (!noteService.hasPermissionOnPage(page, PermissionType.VIEWPAGE, ConversationState.getCurrent().getIdentity())) {
           isSelectable = false;
           child.setRetricted(true);
         }
-        if(BooleanUtils.isTrue(canEdit) && !noteService.hasPermissionOnPage(page, PermissionType.EDITPAGE, ConversationState.getCurrent().getIdentity())){
+        if (BooleanUtils.isTrue(canEdit)
+            && !noteService.hasPermissionOnPage(page, PermissionType.EDITPAGE, ConversationState.getCurrent().getIdentity())) {
           isSelectable = false;
           child.setRetricted(true);
         }
@@ -131,21 +129,22 @@ public static List<JsonNodeData> tranformToJson(TreeNode treeNode, HashMap<Strin
           child.setRetricted(true);
         }
 
-        if(BooleanUtils.isTrue(canEdit) && !noteService.hasPermissionOnPage(page, PermissionType.EDITPAGE, ConversationState.getCurrent().getIdentity())){
+        if (BooleanUtils.isTrue(canEdit)
+            && !noteService.hasPermissionOnPage(page, PermissionType.EDITPAGE, ConversationState.getCurrent().getIdentity())) {
           isSelectable = false;
           child.setRetricted(true);
         }
 
       }
-      
+
       String excerpt = null;
       if (showExcerpt != null && showExcerpt) {
         WikiPageParams params = getPageParamsFromPath(child.getPath());
         // FIXME Migration - Remove excerpt support ?
-        //excerpt = ExcerptUtils.getExcerpts(params);
+        // excerpt = ExcerptUtils.getExcerpts(params);
         excerpt = "";
       }
-      
+
       children.add(new JsonNodeData(child, isLastNode, isSelectable, currentPath, excerpt, context));
       counter++;
     }

notes-service/src/test/java/org/exoplatform/wiki/service/rest/NotesRestServiceTest.java

@@ -335,6 +335,7 @@ public void testGetFullTreeData() throws Exception {
 
     when(noteBookService.getWikiByTypeAndOwner(pageParams.getType(), pageParams.getOwner())).thenReturn(noteBook);
     when(noteBookService.getWikiByTypeAndOwner(homePage.getWikiType(), homePage.getWikiOwner())).thenReturn(noteBook);
+    when(noteService.hasChildren(Long.parseLong(homePage.getId()))).thenReturn(true);
     when(noteService.getChildrenNoteOf(homePage, true, false)).thenReturn(childrenWithDraft);
     when(noteService.getChildrenNoteOf(homePage, false, false)).thenReturn(childrenWithoutDrafts);
 

notes-webapp/src/main/webapp/javascript/eXo/wiki/notesService.js

@@ -84,7 +84,10 @@ export function getSeparator(url) {
 }
 
 export function getNoteTree(noteBookType, noteBookOwner, noteId,treeType) {
-  return fetch(`${notesConstants.PORTAL}/${notesConstants.PORTAL_REST}/notes/tree/${treeType}?path=${noteBookType}/${noteBookOwner}/${noteId}`, {
+  if (noteBookOwner.indexOf('/') !== 0) {
+    noteBookOwner = `/${noteBookOwner}`;
+  }
+  return fetch(`${notesConstants.PORTAL}/${notesConstants.PORTAL_REST}/notes/tree/${treeType}?path=${noteBookType}${noteBookOwner}/${noteId}`, {
     method: 'GET',
     credentials: 'include',
   }).then(resp => {
@@ -96,6 +99,19 @@ export function getNoteTree(noteBookType, noteBookOwner, noteId,treeType) {
   });
 }
 
+export function getNoteTreeLevel(path) {
+  return fetch(`${notesConstants.PORTAL}/${notesConstants.PORTAL_REST}/notes/tree/children?path=${path}`, {
+    method: 'GET',
+    credentials: 'include',
+  }).then(resp => {
+    if (!resp || !resp.ok) {
+      throw new Error('Error while getting note tree level');
+    } else {
+      return resp.json();
+    }
+  });
+}
+
 export function getFullNoteTree(noteBookType, noteBookOwner, noteId, withDrafts, lang) {
   if (noteBookOwner.indexOf('/') !== 0) {
     noteBookOwner = `/${noteBookOwner}`;

notes-webapp/src/main/webapp/skin/less/notes/notes.less

@@ -1242,3 +1242,13 @@ ul.note-manual-child  {
 .remove-focus:focus::after {
   opacity: 0 !important;
 }
+
+.notes-custom-treeview {
+  .v-treeview-node {
+    .v-treeview-node__root {
+      .v-treeview-node__toggle, .v-treeview-node__level:first-child {
+        display: none;
+      }
+    }
+  }
+}

notes-webapp/src/main/webapp/vue-app/notes/components/NoteContentTableItem.vue

@@ -42,4 +42,4 @@ export default {
     }
   }
 };
-</script>
+</script>

notes-webapp/src/main/webapp/vue-app/notes/components/NoteTreeviewDrawer.vue

@@ -140,16 +140,16 @@
               <template>
                 <v-list-item-action class="mr-3">
                   <v-icon
-                      color="success"
-                      size="18"
-                      v-if="exportStatus.action.featuredImagesProcessed">
+                    color="success"
+                    size="18"
+                    v-if="exportStatus.action.featuredImagesProcessed">
                     fa-check
                   </v-icon>
                   <v-progress-circular
-                      v-if="!exportStatus.action.featuredImagesProcessed"
-                      color="primary"
-                      indeterminate
-                      size="18" />
+                    v-if="!exportStatus.action.featuredImagesProcessed"
+                    color="primary"
+                    indeterminate
+                    size="18" />
                 </v-list-item-action>
                 <v-list-item-content>
                   <v-list-item-title>{{ $t('notes.export.status.label.processingFeaturedImages') }}</v-list-item-title>
@@ -636,6 +636,11 @@ export default {
         });
       }
     },
+    fetchChildren(note) {
+      return this.$notesService.getNoteTreeLevel(note.path, this.selectedTranslation?.value).then(data => {
+        note.children = data?.jsonList;
+      });
+    },
     retrieveNoteTree(noteType, noteOwner, noteName) {
       const withDrafts = this.filter === this.$t('notes.filter.label.drafts');
       this.$notesService.getFullNoteTree(noteType, noteOwner , noteName, withDrafts, this.selectedTranslation).then(data => {