[PATCH widget-toolkit] fix #7721: fix zoom interaction on charts with no initial store

[PATCH widget-toolkit] fix #7721: fix zoom interaction on charts with no initial store

[Dominik Csapak]

In our current ExtJs version (7.0), having animations disabled on charts
breaks the zoom interaction. One can zoom in and out once, but never
again.

We generally keep animations enabled on our proxmoxRRDChart, but only
after the store's first load, to avoid animating from the empty store to
the initial data. This happens in initComponent on the store that was
given during instantiation.

In some cases, however (e.g. the PBS datastore summary panel), the chart
has no initial store and instead gets one via 'setStore'. Here, the
event of the old (non-existent) store was never fired, so animations
were never activated and the zoom interaction was buggy.

Fix this by overriding `setStore` to install an event handler for the
new store that enables the animations. If this runs more than once, it
would just set the animation value to the same again, which is fine.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/panel/RRDChart.js | 36 ++++++++++++++++++++++++------------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/panel/RRDChart.js b/src/panel/RRDChart.js
index 82615ce..b352202 100644
--- a/src/panel/RRDChart.js
+++ b/src/panel/RRDChart.js
@@ -160,6 +160,29 @@ Ext.define('Proxmox.widget.RRDChart', {
         },
     },
 
+    // enable animation after the store is loaded
+    delayAnimationStart() {
+        let me = this;
+        me.store.onAfter(
+            'load',
+            function () {
+                me.setAnimation({
+                    duration: 200,
+                    easing: 'easeIn',
+                });
+            },
+            this,
+            { single: true },
+        );
+    },
+
+    setStore: function (store) {
+        let me = this;
+        let res = Ext.chart.CartesianChart.prototype.setStore.call(me, store);
+        me.delayAnimationStart();
+        return res;
+    },
+
     width: 770,
     height: 300,
     animation: false,
@@ -340,18 +363,7 @@ Ext.define('Proxmox.widget.RRDChart', {
             );
         });
 
-        // enable animation after the store is loaded
-        me.store.onAfter(
-            'load',
-            function () {
-                me.setAnimation({
-                    duration: 200,
-                    easing: 'easeIn',
-                });
-            },
-            this,
-            { single: true },
-        );
+        me.delayAnimationStart();
 
         me.checkThemeColors();
 
-- 
2.47.3

Re: [PATCH widget-toolkit] fix #7721: fix zoom interaction on charts with no initial store

[Christian Ebner]

On 6/17/26 2:57 PM, Dominik Csapak wrote:
> In our current ExtJs version (7.0), having animations disabled on charts
> breaks the zoom interaction. One can zoom in and out once, but never
> again.
> 
> We generally keep animations enabled on our proxmoxRRDChart, but only
> after the store's first load, to avoid animating from the empty store to
> the initial data. This happens in initComponent on the store that was
> given during instantiation.
> 
> In some cases, however (e.g. the PBS datastore summary panel), the chart
> has no initial store and instead gets one via 'setStore'. Here, the
> event of the old (non-existent) store was never fired, so animations
> were never activated and the zoom interaction was buggy.
> 
> Fix this by overriding `setStore` to install an event handler for the
> new store that enables the animations. If this runs more than once, it
> would just set the animation value to the same again, which is fine.
> 
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---

Checked this fixes the zoom issue on the datastore summary panels and 
that they are animated. Other RRD charts (e.g. in PVE) are unaffected.

This however breaks rendering of the panel when switching back and fort 
between 2 datastores for me, not being an issue with the un-patched 
widget toolkit, console logs:

```
Uncaught (in promise) Error: undefined
     ExtJS 55
ext-all.js:22:31982
Uncaught (in promise) Error: undefined
     ExtJS 55
ext-all.js:22:31982
Uncaught TypeError: can't access property "unmask", me.down(...) is null
     initComponent https://172.16.0.18:8007/js/proxmox-backup-gui.js:14631
     ExtJS 7
     onProxyLoad https://172.16.0.18:8007/widgettoolkit/proxmoxlib.js:1785
     ExtJS 25
     run_load_task https://172.16.0.18:8007/widgettoolkit/proxmoxlib.js:3697
     ExtJS 5
     run_load_task https://172.16.0.18:8007/widgettoolkit/proxmoxlib.js:3700
     ExtJS 25
     run_load_task https://172.16.0.18:8007/widgettoolkit/proxmoxlib.js:3697
     h ExtJS
proxmox-backup-gui.js:14631:16
Uncaught TypeError: can't access property "unmask", me.down(...) is null
     initComponent https://172.16.0.18:8007/js/proxmox-backup-gui.js:14631
     ExtJS 7
     onProxyLoad https://172.16.0.18:8007/widgettoolkit/proxmoxlib.js:1785
     ExtJS 25
     run_load_task https://172.16.0.18:8007/widgettoolkit/proxmoxlib.js:3697
     ExtJS 5
     run_load_task https://172.16.0.18:8007/widgettoolkit/proxmoxlib.js:3700
     ExtJS 25
     run_load_task https://172.16.0.18:8007/widgettoolkit/proxmoxlib.js:3697
     h ExtJS
proxmox-backup-gui.js:14631:16
```

I do fail to see however how this patch might be related to the 
`pbsDataStoreInfo` there?