feat: Add StatusToolbar to DevIndex Grid with progressive streaming updates (#9114)

Author: tobiu

apps/devindex/view/home/ControlsContainer.mjs

@@ -91,10 +91,6 @@ class ControlsContainer extends Container {
                     style        : {marginTop: '1em'},
                     valueLabel   : 'Show Animations',
                     width        : 200
-                }, {
-                    ntype    : 'label',
-                    reference: 'count-rows-label',
-                    style    : {marginTop: '1em'}
                 }]
             }, {
                 module   : Profile,
@@ -166,15 +162,6 @@ class ControlsContainer extends Container {
 
     onConstructed() {
         super.onConstructed();
-
-        let me      = this,
-            {store} = me.grid;
-
-        store.on({
-            filter: me.updateRowsLabel,
-            load  : me.updateRowsLabel,
-            scope : me
-        })
     }
 
     /**
@@ -210,17 +197,6 @@ class ControlsContainer extends Container {
     onShowAnimationsChange(data) {
         this.grid.animateVisuals = data.value
     }
-
-    /**
-     *
-     */
-    updateRowsLabel() {
-        let {store} = this.grid;
-
-        if (!store.isLoading) {
-            this.getItem('count-rows-label').text = 'Visible: ' + store.getCount()
-        }
-    }
 }
 
 export default Neo.setupClass(ControlsContainer);

apps/devindex/view/home/GridContainer.mjs

@@ -1,5 +1,6 @@
 import BaseGridContainer from '../../../../src/grid/Container.mjs';
 import Contributors      from '../../store/Contributors.mjs';
+import StatusToolbar     from './StatusToolbar.mjs';
 
 /**
  * @class DevIndex.view.home.GridContainer
@@ -36,6 +37,13 @@ class GridContainer extends BaseGridContainer {
                 isScrollingChange: 'onGridIsScrollingChange'
             }
         },
+        /**
+         * @member {Object} footerToolbar
+         */
+        footerToolbar: {
+            module: StatusToolbar,
+            flex  : 'none'
+        },
         /**
          * Default configs for each column
          * @member {Object} columnDefaults

apps/devindex/view/home/StatusToolbar.mjs

@@ -0,0 +1,122 @@
+import Progress from '../../../../src/component/Progress.mjs';
+import Toolbar  from '../../../../src/grid/footer/Toolbar.mjs';
+
+/**
+ * @class DevIndex.view.home.StatusToolbar
+ * @extends Neo.grid.footer.Toolbar
+ */
+class StatusToolbar extends Toolbar {
+    static config = {
+        /**
+         * @member {String} className='DevIndex.view.home.StatusToolbar'
+         * @protected
+         */
+        className: 'DevIndex.view.home.StatusToolbar',
+        /**
+         * @member {String} ntype='devindex-status-toolbar'
+         * @protected
+         */
+        ntype: 'devindex-status-toolbar',
+        /**
+         * @member {String[]} cls=['devindex-status-toolbar']
+         */
+        cls: ['devindex-status-toolbar'],
+        /**
+         * @member {Neo.data.Store|null} store_=null
+         * @reactive
+         */
+        store_: null,
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module   : Progress,
+            flex     : 1,
+            max      : 100,
+            reference: 'progress',
+            value    : 0
+        }, {
+            ntype: 'component',
+            flex : 1
+        }, {
+            ntype    : 'label',
+            reference: 'count-rows-label',
+            style    : {marginLeft: '10px'},
+            text     : 'Visible: 0'
+        }]
+    }
+
+    /**
+     * Triggered before the store config gets changed.
+     * @param {Neo.data.Store|Object|null} value
+     * @param {Neo.data.Store|null} oldValue
+     * @returns {Neo.data.Store}
+     * @protected
+     */
+    beforeSetStore(value, oldValue) {
+        let me        = this,
+            listeners = {
+                filter  : me.updateRowsLabel,
+                load    : me.onStoreLoad,
+                progress: me.onStoreProgress,
+                scope   : me
+            };
+
+        oldValue?.un(listeners);
+
+        // Store might be passed as an instance or config
+        if (value && value.on) {
+            value.on(listeners);
+        }
+
+        return value
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onStoreLoad(data) {
+        this.updateRowsLabel();
+
+        let progress = this.getItem('progress');
+
+        if (progress) {
+            progress.value = progress.max;
+
+            this.timeout(500).then(() => {
+                 progress.hidden = true
+            })
+        }
+    }
+
+    /**
+     * @param {Object} data {loaded, total}
+     */
+    onStoreProgress(data) {
+        let progress = this.getItem('progress');
+
+        if (progress) {
+             progress.hidden = false;
+             progress.max    = data.total || 100;
+             progress.value  = data.loaded;
+
+             // Indeterminate state if total is unknown
+             if (!data.total) {
+                 progress.value = null
+             }
+        }
+    }
+
+    /**
+     *
+     */
+    updateRowsLabel() {
+        let {store} = this;
+
+        if (store) {
+            this.getItem('count-rows-label').text = 'Visible: ' + store.count
+        }
+    }
+}
+
+export default Neo.setupClass(StatusToolbar);

resources/scss/src/grid/Container.scss

@@ -28,6 +28,8 @@
         border             : 1px solid var(--grid-container-border-color);
         border-spacing     : 0;
         color              : var(--grid-container-color);
+        display            : flex;
+        flex-direction     : column;
         font-size          : var(--grid-container-font-size);
         font-weight        : 400;
         height             : 100%;

resources/scss/src/grid/footer/Toolbar.scss

@@ -0,0 +1,9 @@
+.neo-grid-footer-toolbar {
+    border-top: 1px solid var(--grid-container-border-color);
+    left      : 0;
+    min-width : fit-content;
+    padding   : 0;
+    position  : sticky;
+    width     : 100%;
+    z-index   : 2;
+}

src/data/Store.mjs

@@ -769,7 +769,14 @@ class Store extends Collection {
                 me.fire('load', {items: me.items, total: me.count});
             };
 
-            me.proxy.on('data', onData);
+            const onProgress = (data) => {
+                me.fire('progress', data)
+            };
+
+            me.proxy.on({
+                data    : onData,
+                progress: onProgress
+            });
 
             try {
                 // params.url can override proxy url
@@ -779,7 +786,10 @@ class Store extends Collection {
 
                 const response = await me.proxy.read(params);
 
-                me.proxy.un('data', onData);
+                me.proxy.un({
+                    data    : onData,
+                    progress: onProgress
+                });
 
                 if (response.success) {
                     me.totalCount = response.totalCount || me.count;
@@ -792,7 +802,10 @@ class Store extends Collection {
                     return null;
                 }
             } catch (e) {
-                me.proxy.un('data', onData);
+                me.proxy.un({
+                    data    : onData,
+                    progress: onProgress
+                });
                 me.isLoading = false;
                 throw e;
             }

src/data/proxy/Stream.mjs

@@ -64,11 +64,12 @@ class Stream extends Base {
             throw new Error('ReadableStream not supported in this environment.');
         }
 
-        const reader = response.body
-            .pipeThrough(new TextDecoderStream())
-            .getReader();
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
 
         let buffer = '';
+        let loaded = 0;
+        const total = parseInt(response.headers.get('content-length') || 0, 10);
 
         while (true) {
             const { value, done } = await reader.read();
@@ -86,7 +87,10 @@ class Stream extends Base {
                 break;
             }
 
-            buffer += value;
+            loaded += value.byteLength;
+            me.fire('progress', {loaded, total});
+
+            buffer += decoder.decode(value, {stream: true});
             const lines = buffer.split('\n');
             // Keep the last partial line in the buffer
             buffer = lines.pop();