Chart refresh column but no data (#2314)

* Chart refresh col but no data resolves #2302 fix selector y padding relates to #2305 * no need to postpone the dispatch --------- Co-authored-by: Fred Lefévère-Laoide <[email protected]>
Avaiga · Dec 10, 2024 · 9cc59f2 · 9cc59f2
1 parent 8936332
commit 9cc59f2
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/frontend/taipy-gui/public/stylekit/controls/selector.css b/frontend/taipy-gui/public/stylekit/controls/selector.css
@@ -22,7 +22,7 @@
 **************************************************/
 
 .taipy-selector {
-  margin: 4px 0;
+  margin: 0;
 }
 
 

diff --git a/frontend/taipy-gui/src/components/Taipy/Chart.tsx b/frontend/taipy-gui/src/components/Taipy/Chart.tsx
@@ -280,6 +280,11 @@ const updateArrays = (sel: number[][], val: number[], idx: number) => {
     return sel;
 };
 
+const getDataKey = (columns: Record<string, ColumnDesc>, decimators?: string[]): [string[], string] => {
+    const backCols = Object.values(columns).map((col) => col.dfid);
+    return [backCols, backCols.join("-") + (decimators ? `--${decimators.join("")}` : "")];
+};
+
 const Chart = (props: ChartProp) => {
     const {
         title = "",
@@ -348,9 +353,8 @@ const Chart = (props: ChartProp) => {
     const config = useDynamicJsonProperty(props.config, props.defaultConfig, defaultConfig);
 
     useEffect(() => {
-        if (updateVarName && (refresh || !data[dataKey])) {
-            const backCols = Object.values(config.columns).map((col) => col.dfid);
-            const dtKey = backCols.join("-") + (config.decimators ? `--${config.decimators.join("")}` : "");
+        if (updateVarName) {
+            const [backCols, dtKey] = getDataKey(config.columns, config.decimators);
             setDataKey(dtKey);
             if (refresh || !data[dtKey]) {
                 dispatch(
@@ -395,7 +399,10 @@ const Chart = (props: ChartProp) => {
             layout.template = template;
         }
         if (props.figure) {
-            return merge({},props.figure[0].layout as Partial<Layout>, layout, {title: title || layout.title || (props.figure[0].layout as Partial<Layout>).title, clickmode: "event+select"});
+            return merge({}, props.figure[0].layout as Partial<Layout>, layout, {
+                title: title || layout.title || (props.figure[0].layout as Partial<Layout>).title,
+                clickmode: "event+select",
+            });
         }
         return {
             ...layout,
@@ -442,8 +449,12 @@ const Chart = (props: ChartProp) => {
         if (props.figure) {
             return lastDataPl.current;
         }
-        if (data.__taipy_refresh !== undefined && lastDataPl.current) {
-            return lastDataPl.current;
+        if (data.__taipy_refresh !== undefined) {
+            return lastDataPl.current || [];
+        }
+        const dtKey = getDataKey(config.columns, config.decimators)[1];
+        if (!dataKey.startsWith(dtKey)) {
+            return lastDataPl.current || [];
         }
         const datum = data[dataKey];
         lastDataPl.current = datum
@@ -525,7 +536,7 @@ const Chart = (props: ChartProp) => {
                   }
                   return ret as Data;
               })
-            : [];
+            : lastDataPl.current || [];
         return lastDataPl.current;
     }, [props.figure, selected, data, config, dataKey]);
 
@@ -556,15 +567,10 @@ const Chart = (props: ChartProp) => {
         (eventData: PlotRelayoutEvent) => {
             onRangeChange && dispatch(createSendActionNameAction(id, module, { action: onRangeChange, ...eventData }));
             if (config.decimators && !config.types.includes("scatter3d")) {
-                const backCols = Object.values(config.columns).map((col) => col.dfid);
-                const eventDataKey = Object.entries(eventData)
+                const [backCols, dtKeyBase] = getDataKey(config.columns, config.decimators);
+                const dtKey = `${dtKeyBase}--${Object.entries(eventData)
                     .map(([k, v]) => `${k}=${v}`)
-                    .join("-");
-                const dtKey =
-                    backCols.join("-") +
-                    (config.decimators ? `--${config.decimators.join("")}` : "") +
-                    "--" +
-                    eventDataKey;
+                    .join("-")}`;
                 setDataKey(dtKey);
                 dispatch(
                     createRequestChartUpdateAction(