backport fix for chart refresh issue #1992 (#2032)

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>

frontend/taipy-gui/base/src/wsAdapter.ts

@@ -34,7 +34,7 @@ export class TaipyWsAdapter extends WsAdapter {
                 for (const muPayload of message.payload as [MultipleUpdatePayload]) {
                     const encodedName = muPayload.name;
                     const { value } = muPayload.payload;
-                    if (value && typeof (value as any).__taipy_refresh === "boolean") {
+                    if (value && (value as any).__taipy_refresh !== undefined) {
                         // refresh all requested data for this encodedName var
                         const requestDataOptions = taipyApp.variableData?._requested_data[encodedName];
                         for (const dataKey in requestDataOptions) {

frontend/taipy-gui/src/components/Taipy/AutoLoadingTable.tsx

@@ -224,7 +224,7 @@ const AutoLoadingTable = (props: TaipyTableProps) => {
     const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined);
     const baseColumns = useDynamicJsonProperty(props.columns, props.defaultColumns, defaultColumns);
 
-    const refresh = props.data && typeof props.data.__taipy_refresh === "boolean";
+    const refresh = props.data?.__taipy_refresh !== undefined;
 
     useEffect(() => {
         if (!refresh && props.data && page.current.key && props.data[page.current.key] !== undefined) {

frontend/taipy-gui/src/components/Taipy/Chart.tsx

@@ -11,7 +11,13 @@
  * specific language governing permissions and limitations under the License.
  */
 
-import React, { CSSProperties, useCallback, useEffect, useMemo, useRef, useState, lazy, Suspense } from "react";
+import React, { CSSProperties, lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { useTheme } from "@mui/material";
+import Box from "@mui/material/Box";
+import Skeleton from "@mui/material/Skeleton";
+import Tooltip from "@mui/material/Tooltip";
+import { nanoid } from "nanoid";
 import {
     Config,
     Data,
@@ -23,18 +29,15 @@ import {
     PlotSelectionEvent,
     ScatterLine,
 } from "plotly.js";
-import Skeleton from "@mui/material/Skeleton";
-import Box from "@mui/material/Box";
-import Tooltip from "@mui/material/Tooltip";
-import { useTheme } from "@mui/material";
+import { Figure } from "react-plotly.js";
 
-import { getArrayValue, getUpdateVar, TaipyActiveProps, TaipyChangeProps } from "./utils";
 import {
     createRequestChartUpdateAction,
     createSendActionNameAction,
     createSendUpdateAction,
 } from "../../context/taipyReducers";
-import { ColumnDesc } from "./tableUtils";
+import { lightenPayload } from "../../context/wsUtils";
+import { darkThemeTemplate } from "../../themes/darkThemeTemplate";
 import {
     useClassNames,
     useDispatch,
@@ -43,9 +46,8 @@ import {
     useDynamicProperty,
     useModule,
 } from "../../utils/hooks";
-import { darkThemeTemplate } from "../../themes/darkThemeTemplate";
-import { Figure } from "react-plotly.js";
-import { lightenPayload } from "../../context/wsUtils";
+import { ColumnDesc } from "./tableUtils";
+import { getArrayValue, getUpdateVar, TaipyActiveProps, TaipyChangeProps } from "./utils";
 
 const Plot = lazy(() => import("react-plotly.js"));
 
@@ -298,7 +300,7 @@ const Chart = (props: ChartProp) => {
     const theme = useTheme();
     const module = useModule();
 
-    const refresh = typeof data.__taipy_refresh === "boolean";
+    const refresh = useMemo(() => data?.__taipy_refresh !== undefined ? nanoid() : false, [data]);
     const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
     const active = useDynamicProperty(props.active, props.defaultActive, true);
     const render = useDynamicProperty(props.render, props.defaultRender, true);
@@ -444,7 +446,7 @@ const Chart = (props: ChartProp) => {
         if (props.figure) {
             return lastDataPl.current;
         }
-        if (typeof data === "number" && lastDataPl.current) {
+        if (data.__taipy_refresh !== undefined && lastDataPl.current) {
             return lastDataPl.current;
         }
         const datum = data[dataKey];

frontend/taipy-gui/src/components/Taipy/Chat.tsx

@@ -345,8 +345,7 @@ const Chat = (props: ChatProps) => {
         setShowMessage(false);
     }, []);
 
-    // const refresh = typeof props.messages === "number";
-    const refresh = props.messages && typeof props.messages.__taipy_refresh === "boolean";
+    const refresh = props.messages?.__taipy_refresh !== undefined;
 
     useEffect(() => {
         if (!refresh && props.messages && page.current.key && props.messages[page.current.key] !== undefined) {

frontend/taipy-gui/src/components/Taipy/PaginatedTable.tsx

@@ -128,7 +128,7 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
     const formatConfig = useFormatConfig();
     const module = useModule();
 
-    const refresh = props.data && typeof props.data.__taipy_refresh === "boolean";
+    const refresh = props.data?.__taipy_refresh !== undefined;
     const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
     const active = useDynamicProperty(props.active, props.defaultActive, true);
     const editable = useDynamicProperty(props.editable, props.defaultEditable, false);