From 2dc00512785bb691151a170b88d6ece1480a9372 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fred=20Lef=C3=A9v=C3=A8re-Laoide?=
 <Fred.Lefevere-Laoide@Taipy.io>
Date: Tue, 10 Dec 2024 16:32:10 +0100
Subject: [PATCH] Chart refresh col but no data resolves #2302 fix selector y
 padding relates to #2305

---
 .../public/stylekit/controls/selector.css     |  2 +-
 .../taipy-gui/src/components/Taipy/Chart.tsx  | 64 +++++++++++--------
 2 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/frontend/taipy-gui/public/stylekit/controls/selector.css b/frontend/taipy-gui/public/stylekit/controls/selector.css
index cdb929aca4..0e56ecdc7d 100644
--- 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
index c8411cbf78..2937a8259b 100644
--- 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,24 +353,25 @@ 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(
-                    createRequestChartUpdateAction(
-                        updateVarName,
-                        id,
-                        module,
-                        backCols,
-                        dtKey,
-                        getDecimatorsPayload(
-                            config.decimators,
-                            plotRef.current,
-                            config.modes,
-                            config.columns,
-                            config.traces
+                Promise.resolve().then(() =>
+                    dispatch(
+                        createRequestChartUpdateAction(
+                            updateVarName,
+                            id,
+                            module,
+                            backCols,
+                            dtKey,
+                            getDecimatorsPayload(
+                                config.decimators,
+                                plotRef.current,
+                                config.modes,
+                                config.columns,
+                                config.traces
+                            )
                         )
                     )
                 );
@@ -395,7 +401,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 +451,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 +538,7 @@ const Chart = (props: ChartProp) => {
                   }
                   return ret as Data;
               })
-            : [];
+            : lastDataPl.current || [];
         return lastDataPl.current;
     }, [props.figure, selected, data, config, dataKey]);
 
@@ -556,15 +569,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(