Added lazy loading for jsTree #88

* Added findAllJSTree to return JSTree format from the File Table
* Updated tests and test files

Signed-off-by: Jillian Daguil <[email protected]>

Author: jdaguil

assets/js/aboutCodeDB.js

@@ -84,6 +84,27 @@ class AboutCodeDB {
         return this.db.then(() => this.Component.findOne(query));
     }
 
+    // Uses findAll to return JSTree format from the File Table
+    findAllJSTree(query) {
+        return this.db
+            .then(() => {
+                return this.File.findAll($.extend(query, {
+                    attributes: ["path", "parent", "name", "type"]
+                }));
+            })
+            .then((files) => {
+                return files.map((file) => {
+                    return {
+                        id: file.path,
+                        text: file.name,
+                        parent: file.parent,
+                        type: file.type,
+                        children: file.type === "directory"
+                    };
+                });
+            });
+    }
+
     // Uses the components table to create or set a component
     setComponent(component) {
         return this.findComponent({
@@ -152,31 +173,6 @@ class AboutCodeDB {
             }));
     }
 
-    // Format for jstree
-    // [
-    //  {id: root, text: root, parent: #, type: directory}
-    //  {id: root/file1, text: file1, parent: root, type: file},
-    //  {id: root/file2, text: file2, parent: root, type: file}
-    // ]
-    toJSTreeFormat() {
-        return this.db
-            .then(() => {
-                return this.File.findAll({
-                    attributes: ["path", "parent", "name", "type"]
-                });
-            })
-            .then((files) => {
-                return files.map((file) => {
-                    return {
-                        id: file.path,
-                        text: file.name,
-                        parent: file.parent,
-                        type: file.type
-                    };
-                });
-            });
-    }
-
     // ScanCode Scan Details Model definitions
     static scanCodeModel(sequelize) {
         return sequelize.define("scancode", {

assets/js/renderer.js

@@ -31,6 +31,19 @@ $(document).ready(function () {
     // Create and setup the jstree, and the click-event logic
     const jstree = $("#jstree").jstree(
         {
+            "core": {
+                "data": function (currentDirectory, callback) {
+                    aboutCodeDB
+                        .findAllJSTree({
+                            where: {
+                                parent: currentDirectory.id
+                            }
+                        })
+                        .then((children) => {
+                            callback.call(this, children)
+                        });
+                }
+            },
             "types": {
                 "directory": {
                     "icon": "glyphicon glyphicon-folder-close"
@@ -376,11 +389,7 @@ $(document).ready(function () {
                 nodeView = new AboutCodeNodeView(aboutCodeDB, onNodeClick);
 
                 // loading data into jstree
-                aboutCodeDB.toJSTreeFormat()
-                    .then(function(data) {
-                        jstree.jstree(true).settings.core.data = data;
-                        jstree.jstree(true).refresh(true);
-                    });
+                jstree.jstree(true).refresh(true);
             })
             .catch(function(reason) {
                throw reason;
@@ -514,11 +523,7 @@ $(document).ready(function () {
                                 nodeView = new AboutCodeNodeView(aboutCodeDB, onNodeClick);
 
                                 // loading data into jstree
-                                aboutCodeDB.toJSTreeFormat()
-                                    .then(function (data) {
-                                        jstree.jstree(true).settings.core.data = data;
-                                        jstree.jstree(true).refresh(true);
-                                    });
+                                jstree.jstree(true).refresh(true);
                             })
                             .catch(function (reason) {
                                 throw reason;

test/aboutCodeDB.test.js

@@ -85,27 +85,29 @@ describe("checkAboutCodeDB", function() {
         });
     });
 
-    describe("toJSTreeFormat", function() {
+    describe("findAllJSTree", function() {
         it("should format ScanCode results to jsTree Format", function() {
             let aboutCodeDB = new AboutCodeDB();
             let expectedJSTreeFormat= [
                 {
-                    id: 'samples/README',
-                    text: 'README',
-                    parent: 'samples',
-                    type: 'file'
+                    id: "samples/README",
+                    text: "README",
+                    parent: "samples",
+                    type: "file",
+                    children: false
                 },
                 {
-                    id: 'samples/JGroups/src',
-                    text: 'src',
-                    parent: 'samples/JGroups',
-                    type: 'directory'
+                    id: "samples/JGroups/src",
+                    text: "src",
+                    parent: "samples/JGroups",
+                    type: "directory",
+                    children: true
                 }
             ];
 
             return aboutCodeDB.db
                 .then(() => aboutCodeDB.addScanData(scanCodeJSONResults))
-                .then(() => aboutCodeDB.toJSTreeFormat())
+                .then(() => aboutCodeDB.findAllJSTree())
                 .then((scanCodeJSONResults) => {
                     assert.deepEqual(expectedJSTreeFormat, scanCodeJSONResults)
                 })