Merge pull request #291 from tgorzsas/MODELIX-399-Lazy-loading-for-the-content-explorer

MODELIX-399 Lazy loading for the content explorer

Author: mhuster23

model-server/src/main/kotlin/org/modelix/model/server/handlers/ContentExplorer.kt

@@ -5,9 +5,11 @@ import io.ktor.server.application.Application
 import io.ktor.server.application.call
 import io.ktor.server.html.respondHtml
 import io.ktor.server.html.respondHtmlTemplate
+import io.ktor.server.request.receive
 import io.ktor.server.response.respondRedirect
 import io.ktor.server.response.respondText
 import io.ktor.server.routing.get
+import io.ktor.server.routing.post
 import io.ktor.server.routing.routing
 import kotlinx.html.BODY
 import kotlinx.html.FlowContent
@@ -24,6 +26,7 @@ import kotlinx.html.li
 import kotlinx.html.link
 import kotlinx.html.script
 import kotlinx.html.small
+import kotlinx.html.stream.appendHTML
 import kotlinx.html.style
 import kotlinx.html.table
 import kotlinx.html.td
@@ -67,19 +70,45 @@ class ContentExplorer(private val client: IModelClient, private val repoManager:
             get("/content/{versionHash}/") {
                 val versionHash = call.parameters["versionHash"]
                 if (versionHash.isNullOrEmpty()) {
-                    call.respondText("version not found", status = HttpStatusCode.InternalServerError)
+                    call.respondText("version not found", status = HttpStatusCode.BadRequest)
                     return@get
                 }
+
                 val tree = CLVersion.loadFromHash(versionHash, client.storeCache).getTree()
                 val rootNode = PNodeAdapter(ITree.ROOT_ID, TreePointer(tree))
+
                 call.respondHtmlTemplate(PageWithMenuBar("repos/", "../..")) {
                     headContent {
                         title("Content Explorer")
                         link("../../public/content-explorer.css", rel = "stylesheet")
                         script("text/javascript", src = "../../public/content-explorer.js") {}
                     }
-                    bodyContent { contentPageBody(rootNode, versionHash) }
+                    bodyContent { contentPageBody(rootNode, versionHash, emptySet()) }
+                }
+            }
+            post("/content/{versionHash}/") {
+                val versionHash = call.parameters["versionHash"]
+                if (versionHash.isNullOrEmpty()) {
+                    call.respondText("version not found", status = HttpStatusCode.BadRequest)
+                    return@post
+                }
+                val expandedNodes = call.receive<ContentExplorerExpandedNodes>()
+
+                val tree = CLVersion.loadFromHash(versionHash, client.storeCache).getTree()
+                val rootNode = PNodeAdapter(ITree.ROOT_ID, TreePointer(tree))
+
+                var expandedNodeIds = expandedNodes.expandedNodeIds
+                if (expandedNodes.expandAll) {
+                    expandedNodeIds = expandedNodeIds + collectExpandableChildNodes(rootNode, expandedNodes.expandedNodeIds)
                 }
+
+                call.respondText(
+                    buildString {
+                        appendHTML().ul("treeRoot") {
+                            nodeItem(rootNode, expandedNodeIds)
+                        }
+                    },
+                )
             }
             get("/content/{versionHash}/{nodeId}/") {
                 val id = call.parameters["nodeId"]!!.toLong()
@@ -100,7 +129,25 @@ class ContentExplorer(private val client: IModelClient, private val repoManager:
         }
     }
 
-    private fun FlowContent.contentPageBody(rootNode: PNodeAdapter, versionHash: String) {
+    // The method traverses the expanded tree based on the alreadyExpandedNodeIds and
+    // collects the expandable (not empty) nodes which are not expanded yet
+    private fun collectExpandableChildNodes(under: PNodeAdapter, alreadyExpandedNodeIds: Set<String>): Set<String> {
+        if (alreadyExpandedNodeIds.contains(under.nodeId.toString())) {
+            val expandableIds = mutableSetOf<String>()
+            for (child in under.allChildren) {
+                expandableIds.addAll(collectExpandableChildNodes(child as PNodeAdapter, alreadyExpandedNodeIds))
+            }
+            return expandableIds
+        }
+
+        if (under.allChildren.toList().isNotEmpty()) {
+            // Node is collected if it is expandable
+            return setOf(under.nodeId.toString())
+        }
+        return emptySet()
+    }
+
+    private fun FlowContent.contentPageBody(rootNode: PNodeAdapter, versionHash: String, expandedNodeIds: Set<String>) {
         h1 { +"Model Server Content" }
         small {
             style = "color: #888; text-align: center; margin-bottom: 15px;"
@@ -120,18 +167,19 @@ class ContentExplorer(private val client: IModelClient, private val repoManager:
         div {
             id = "treeWrapper"
             ul("treeRoot") {
-                nodeItem(rootNode)
+                nodeItem(rootNode, expandedNodeIds)
             }
         }
         div {
             id = "nodeInspector"
         }
     }
 
-    private fun UL.nodeItem(node: PNodeAdapter) {
+    private fun UL.nodeItem(node: PNodeAdapter, expandedNodeIds: Set<String>) {
         li("nodeItem") {
+            val expanded = expandedNodeIds.contains(node.nodeId.toString())
             if (node.allChildren.toList().isNotEmpty()) {
-                div("expander") { unsafe { +"&#x25B6;" } }
+                div(if (expanded) "expander expander-expanded" else "expander") { unsafe { +"&#x25B6;" } }
             }
             div("nameField") {
                 attributes["data-nodeid"] = node.nodeId.toString()
@@ -157,10 +205,12 @@ class ContentExplorer(private val client: IModelClient, private val repoManager:
                     }
                 }
             }
-            div("nested") {
-                ul("nodeTree") {
-                    for (child in node.allChildren) {
-                        nodeItem(child as PNodeAdapter)
+            div(if (expanded) "nested active" else "nested") {
+                if (expanded) {
+                    ul("nodeTree") {
+                        for (child in node.allChildren) {
+                            nodeItem(child as PNodeAdapter, expandedNodeIds)
+                        }
                     }
                 }
             }

model-server/src/main/kotlin/org/modelix/model/server/handlers/ContentExplorerExpandedNodes.kt

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2023.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package org.modelix.model.server.handlers
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class ContentExplorerExpandedNodes(val expandedNodeIds: Set<String>, val expandAll: Boolean)

model-server/src/main/resources/public/content-explorer.js

@@ -4,54 +4,73 @@ async function createInspectorDetails(nodeId) {
     nodeInspector.innerHTML = await response.text();
     nodeInspector.style.display = 'block';
 }
-document.addEventListener('DOMContentLoaded', () => {
-    var expander = document.getElementsByClassName('expander');
-    var nameField = document.getElementsByClassName('nameField');
-    var expandAllBtn = document.getElementById('expandAllBtn');
-    var collapseAllBtn = document.getElementById('collapseAllBtn');
 
+function getExpandedNodeIds() {
+    const expandedElements = document.getElementsByClassName('expander-expanded');
+    return Array.from(expandedElements).map(
+        element => element.nextElementSibling?.getAttribute('data-nodeid'));
+}
+
+function sendExpandNodeRequest(expandAll) {
+    const xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+            document.getElementById('treeWrapper').innerHTML = xhr.response;
+            addContentExplorerClickListeners();
+        }
+    }
+    xhr.open("POST", window.location.href, true);
+    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+    xhr.send(JSON.stringify({"expandedNodeIds": getExpandedNodeIds(), "expandAll" : expandAll}));
+}
+
+function addContentExplorerClickListeners() {
+
+    const nameField = document.getElementsByClassName('nameField');
     for (let i = 0; i < nameField.length; i++) {
-        nameField[i].addEventListener('click', function() {
-             let isSelected = this.classList.contains('selectedNameField');
-             if (isSelected) {
+        nameField[i].addEventListener('click', function () {
+            let isSelected = this.classList.contains('selectedNameField');
+            if (isSelected) {
                 document.getElementById('nodeInspector').style.display = 'none';
-             } else {
+            } else {
                 createInspectorDetails(this.dataset.nodeid);
-             }
-             let selected = document.getElementsByClassName('selectedNameField');
-             for (let j = 0; j < selected.length; j++) {
+            }
+            let selected = document.getElementsByClassName('selectedNameField');
+            for (let j = 0; j < selected.length; j++) {
                 selected[j].classList.remove('selectedNameField');
-             }
-             if (!isSelected) {
+            }
+            if (!isSelected) {
                 this.classList.add('selectedNameField');
-             }
+            }
         });
     }
 
+    const expander = document.getElementsByClassName('expander');
     for (let i = 0; i < expander.length; i++) {
-        expander[i].addEventListener('click', function() {
-            this.parentElement.querySelector(".nested").classList.toggle('active');
+        expander[i].addEventListener('click', function () {
+            this.parentElement.querySelector('.nested').classList.toggle('active');
             this.classList.toggle('expander-expanded');
+            localStorage.setItem('scrollY', String(window.scrollY));
+            sendExpandNodeRequest(false);
         });
     }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+
+    const scrollY = localStorage.getItem('scrollY');
+    if (scrollY) {
+        window.scrollTo(0, Number(scrollY));
+        localStorage.removeItem('scrollY');
+    }
 
-    expandAllBtn.addEventListener('click', function () {
-        var nested = document.getElementsByClassName("nested")
-        for (let i=0; i < nested.length; i++) {
-            nested[i].classList.add('active');
-        }
-        for (let i = 0; i < expander.length; i++) {
-            expander[i].classList.add('expander-expanded')
-        }
+    addContentExplorerClickListeners();
+
+    document.getElementById('expandAllBtn').addEventListener('click', function () {
+        sendExpandNodeRequest(true);
     });
 
-    collapseAllBtn.addEventListener('click', function () {
-        var nested = document.getElementsByClassName('nested')
-        for (let i=0; i < nested.length; i++) {
-            nested[i].classList.remove('active');
-        }
-        for (let i = 0; i < expander.length; i++) {
-            expander[i].classList.remove('expander-expanded')
-        }
+    document.getElementById('collapseAllBtn').addEventListener('click', function () {
+        window.location.href = window.location.pathname
     });
 });