fix: 🐛 Reimplement tree node toggle logic

Earlier, rows were hidden using style. Now, since we are using
hyperlist, it is better to refresh the whole list.

index.html

@@ -35,7 +35,6 @@
 
 	</section>
 
-	<script src="./node_modules/clusterize.js/clusterize.js"></script>
 	<script src="./node_modules/sortablejs/Sortable.js"></script>
 	<script src="./dist/frappe-datatable.js"></script>
 	<script>

src/body-renderer.js

@@ -9,7 +9,10 @@ export default class BodyRenderer {
         this.rowmanager = instance.rowmanager;
         this.cellmanager = instance.cellmanager;
         this.bodyScrollable = instance.bodyScrollable;
+        this.bodyDiv = $('.dt-body', this.bodyScrollable);
         this.log = instance.log;
+
+        this.bindEvents();
     }
 
     renderRows(rows) {
@@ -23,7 +26,8 @@ export default class BodyRenderer {
                 return el.children[0];
             }
         };
-        this.hyperlist.refresh($('.dt-body', this.bodyScrollable), config);
+        this.hyperlist.refresh(this.bodyDiv, config);
+        this.visibleRows = rows.map(row => row.meta.rowIndex);
     }
 
     render() {
@@ -41,8 +45,8 @@ export default class BodyRenderer {
         };
 
         if (!this.hyperlist) {
-            this.bodyScrollable.innerHTML = '<div class="dt-body"></div>';
-            this.hyperlist = new HyperList($('.dt-body', this.bodyScrollable), config);
+            this.hyperlist = new HyperList(this.bodyDiv, config);
+            this.visibleRows = rows.map(row => row.meta.rowIndex);
         } else {
             this.renderRows(rows);
         }

src/cellmanager.js

@@ -736,6 +736,8 @@ export default class CellManager {
             isFilter
         });
 
+        const row = this.datamanager.getRow(rowIndex);
+
         const isBodyCell = !(isHeader || isFilter);
 
         const className = [
@@ -745,7 +747,8 @@ export default class CellManager {
             isBodyCell ? 'dt-cell--row-' + rowIndex : '',
             isHeader ? 'dt-cell--header' : '',
             isHeader ? `dt-cell--header-${colIndex}` : '',
-            isFilter ? 'dt-cell--filter' : ''
+            isFilter ? 'dt-cell--filter' : '',
+            isBodyCell && row.meta.isTreeNodeClose ? 'dt-cell--tree-close' : ''
         ].join(' ');
 
         return `

src/columnmanager.js

@@ -286,8 +286,7 @@ export default class ColumnManager {
             .then(({
                 rowsToShow
             }) => {
-                const rows = rowsToShow.map(rowIndex => this.datamanager.getRow(rowIndex));
-                this.bodyRenderer.renderRows(rows);
+                this.rowmanager.showRows(rowsToShow);
             });
     }
 

src/datamanager.js

@@ -193,6 +193,7 @@ export default class DataManager {
                 row.meta.isLeaf = !nextRow ||
                     notSet(nextRow.meta.indent) ||
                     nextRow.meta.indent <= row.meta.indent;
+                row.meta.isTreeNodeClose = false;
             }
         });
     }

src/datatable.js

@@ -72,6 +72,7 @@ class DataTable {
                 <div class="dt-header">
                 </div>
                 <div class="dt-scrollable">
+                    <div class="dt-body"></div>
                 </div>
                 <div class="dt-freeze">
                     <span class="dt-freeze__message">

src/rowmanager.js

@@ -3,7 +3,8 @@ import {
     makeDataAttributeString,
     nextTick,
     ensureArray,
-    linkProperties
+    linkProperties,
+    uniq
 } from './utils';
 
 export default class RowManager {
@@ -174,18 +175,10 @@ export default class RowManager {
         }
     }
 
-    hideRows(rowIndices) {
-        rowIndices = ensureArray(rowIndices);
-        const selector = rowIndices.map(this.selector).join(',');
-        this.style.setStyle(selector, {
-            display: 'none'
-        });
-    }
-
     showRows(rowIndices) {
         rowIndices = ensureArray(rowIndices);
-        const selector = rowIndices.map(this.selector).join(',');
-        this.style.removeStyle(selector);
+        const rows = rowIndices.map(rowIndex => this.datamanager.getRow(rowIndex));
+        this.bodyRenderer.renderRows(rows);
     }
 
     showAllRows() {
@@ -194,25 +187,32 @@ export default class RowManager {
     }
 
     openSingleNode(rowIndex) {
-        const rowsToShow = this.datamanager.getImmediateChildren(rowIndex);
+        const row = this.datamanager.getRow(rowIndex);
+        row.meta.isTreeNodeClose = false;
+
+        const childrenToShow = this.datamanager.getImmediateChildren(rowIndex);
+        const visibleRows = this.bodyRenderer.visibleRows;
+        const rowsToShow = uniq([...childrenToShow, ...visibleRows]).sort();
+
         this.showRows(rowsToShow);
-        this.cellmanager.toggleTreeButton(rowIndex, true);
     }
 
     closeSingleNode(rowIndex) {
-        const children = this.datamanager.getImmediateChildren(rowIndex);
-        children.forEach(childIndex => {
-            const row = this.datamanager.getRow(childIndex);
-            if (row.meta.isLeaf) {
-                // close
-                this.hideRows(childIndex);
-                this.cellmanager.toggleTreeButton(childIndex, false);
-            } else {
-                this.closeSingleNode(childIndex);
-                this.hideRows(childIndex);
+        const row = this.datamanager.getRow(rowIndex);
+        row.meta.isTreeNodeClose = true;
+
+        const rowsToHide = this.datamanager.getChildren(rowIndex);
+        const visibleRows = this.bodyRenderer.visibleRows;
+        const rowsToShow = visibleRows.filter(rowIndex => !rowsToHide.includes(rowIndex));
+
+        rowsToHide.forEach(rowIndex => {
+            const row = this.datamanager.getRow(rowIndex);
+            if (!row.meta.isLeaf) {
+                row.meta.isTreeNodeClose = true;
             }
         });
-        this.cellmanager.toggleTreeButton(rowIndex, false);
+
+        this.showRows(rowsToShow);
     }
 
     getRow$(rowIndex) {

src/style.css

@@ -46,6 +46,7 @@
     height: 40vw;
     overflow: auto;
     border-bottom: 1px solid var(--dt-border-color);
+    border-right: 1px solid var(--dt-border-color);
 
     &--highlight-all {
         background-color: var(--dt-selection-highlight-color);

src/utils.js

@@ -1,5 +1,6 @@
 import _throttle from 'lodash/throttle';
 import _debounce from 'lodash/debounce';
+import _uniq from 'lodash/uniq';
 
 export function camelCaseToDash(str) {
     return str.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
@@ -125,3 +126,7 @@ export function ensureArray(val) {
     }
     return val;
 }
+
+export function uniq(arr) {
+    return _uniq(arr);
+}