Stat tree edit - drop visualization

public/css/style.css

@@ -2768,6 +2768,26 @@ table.stag-compact-grid>tbody>tr>td [if-grid-view] {
 }
 
 /* jstree overrides */
+.stat-tree-view .jstree-wholerow {
+    border-bottom: 1px solid #f1f1f1;
+}
+.stat-tree-view .jstree-anchor.has-drop-visualization::after {
+    content: attr(data-drop-percent);
+    margin-left: 1rem;
+    font-size: 80%;
+}
+.stat-tree-view .jstree-anchor.has-drop-visualization.drop-0-25::after {
+    color: grey;
+}
+.stat-tree-view .jstree-anchor.has-drop-visualization.drop-26-50::after {
+    color: saddlebrown;
+}
+.stat-tree-view .jstree-anchor.has-drop-visualization.drop-51-75::after {
+    color: #dc7024;
+}
+.stat-tree-view .jstree-anchor.has-drop-visualization.drop-76-100::after {
+    color: red;
+}
 body .vakata-context li>a {
     padding: 1px 5px;
     padding-right: 10px;

resources/views/app/stat-tree/stat-trees/sub/edit.blade.php

@@ -375,6 +375,8 @@
                         }
                         catch (e) {}
 
+                        this.el = $('#stat-tree-view-{{$statTree->id}}');
+
                         // get data
                         $.get('{{ route('practice-management.statTrees.view.linesJSON', $statTree) }}', _data => {
 
@@ -384,6 +386,7 @@
                                 .on('copy_node.jstree', (_e, _data) => { StatTree.dropped(_e, _data); })
                                 .on('select_node.jstree', () => { StatTree.onSelected(); })
                                 .on('deselect_node.jstree', () => { StatTree.onDeselected(); })
+                                .on('redraw.jstree', () => { StatTree.dropVisualize(); })
                                 .jstree({
                                     "core": {
                                         "check_callback": true,
@@ -464,6 +467,45 @@
                         }, 'json');
                     },
 
+                    dropVisualize: function() {
+                        console.log('redrawn')
+                        function calculateDropPercent(node, parent = null) {
+                            let realNode = StatTree.el.jstree(true).get_node(node.id);
+                            if(!realNode.data) return;
+                            if(parent && parent.data.lastRefreshCount !== null) {
+                                if(node.data.lastRefreshCount !== null) {
+                                    realNode.data.dropPercent = (((parent.data.lastRefreshCount - node.data.lastRefreshCount) / parent.data.lastRefreshCount) * 100);
+                                    if(realNode.data.dropPercent) {
+                                        let element = StatTree.el.jstree(true).get_node(node.id, true), cssClass = '';
+                                        if(realNode.data.dropPercent > 75) {
+                                            cssClass = 'drop-76-100';
+                                        }
+                                        else if(realNode.data.dropPercent > 50 && realNode.data.dropPercent <= 75) {
+                                            cssClass = 'drop-51-75';
+                                        }
+                                        else if(realNode.data.dropPercent > 25 && realNode.data.dropPercent <= 50) {
+                                            cssClass = 'drop-26-50';
+                                        }
+                                        else if(realNode.data.dropPercent > 0 && realNode.data.dropPercent <= 25) {
+                                            cssClass = 'drop-0-25';
+                                        }
+                                        element.find('>a.jstree-anchor')
+                                            .addClass('has-drop-visualization')
+                                            .addClass(cssClass)
+                                            .attr('data-drop-percent', (realNode.data.dropPercent.toFixed(1)) + '% ⤵');
+                                    }
+                                }
+                            }
+                            for (let i = 0; i < node.children.length; i++) {
+                                calculateDropPercent(node.children[i], node);
+                            }
+                        }
+                        let raw = this.el.jstree('get_json');
+                        for (let i = 0; i < raw.length; i++) {
+                            calculateDropPercent(raw[i]);
+                        }
+                    },
+
                     dropped: function(_e, _data) {
 
                         if(_data.original && _data.original.data &&
@@ -531,7 +573,6 @@
                                     StatTree.load();
                                 }
                             }, 'json');
-                            StatTree.onSelected();
                         }, 0);
                     },
 
@@ -824,16 +865,15 @@
                     .off('click')
                     .on('click', function() {
                         if(StatTree.changed) {
-                            if(!window.confirm('Tree has not been saved. Changes will be lost if you continue. Continue?')) {
-                                return;
-                            }
+                            window.alert('Cannot refresh counts while the tree has unsaved changes.');
+                            return;
                         }
                         showMask();
                         $.post("{{ route('practice-management.api.statTree.refreshTreeCountQueries') }}", {
                             statTreeID: "{{ $statTree->id }}"
                         }, function (response) {
                             if(!hasResponseError(response)) {
-                                StatTree.load();
+                                fastReload();
                             }
                         }, 'json').then(hideMask);
                         return false;
@@ -843,7 +883,7 @@
                 StatTree.load();
                 initMoes();
 
-                $('#refresh-counts').trigger('click');
+                //$('#refresh-counts').trigger('click');
 
                 addMCHook('reloadClausesTree', function() {
                     ClausesTree.load();