From a40ac23665a7999caeb297d27cc514a4ffd1afd7 Mon Sep 17 00:00:00 2001
From: namnguyen <namnguyen20999@gmail.com>
Date: Fri, 14 Jun 2024 03:41:20 +0700
Subject: [PATCH 01/20] adding color-map property to Metric

---
 doc/gui/examples/controls/metric-color-map.py | 33 +++++++++++++++++++
 .../taipy-gui/src/components/Taipy/Metric.tsx | 14 ++++++--
 taipy/gui/_renderers/factory.py               |  1 +
 taipy/gui/viselements.json                    |  5 +++
 4 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 doc/gui/examples/controls/metric-color-map.py

diff --git a/doc/gui/examples/controls/metric-color-map.py b/doc/gui/examples/controls/metric-color-map.py
new file mode 100644
index 0000000000..9c16584fe1
--- /dev/null
+++ b/doc/gui/examples/controls/metric-color-map.py
@@ -0,0 +1,33 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui
+
+# Layout reference can be found in the documentation: https://plotly.com/python/reference/layout/
+
+value = 50
+color_map = {
+    20: "#fd2020",
+    40: None,
+    60: "#f3ff26",
+    80: None
+}
+
+page = """
+<|{value}|metric|color_map={color_map}|>
+"""
+
+Gui(page).run()
+
diff --git a/frontend/taipy-gui/src/components/Taipy/Metric.tsx b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
index c99049a4e0..12c96243d6 100644
--- a/frontend/taipy-gui/src/components/Taipy/Metric.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
@@ -20,7 +20,7 @@ import {useTheme} from "@mui/material";
 import {useClassNames, useDynamicJsonProperty, useDynamicProperty} from "../../utils/hooks";
 import {extractPrefix, extractSuffix, sprintfToD3Converter} from "../../utils/formatConversion";
 import {TaipyBaseProps, TaipyHoverProps} from "./utils";
-import { darkThemeTemplate } from "../../themes/darkThemeTemplate";
+import {darkThemeTemplate} from "../../themes/darkThemeTemplate";
 
 const Plot = lazy(() => import("react-plotly.js"));
 
@@ -44,6 +44,7 @@ interface MetricProps extends TaipyBaseProps, TaipyHoverProps {
     showValue?: boolean;
     format?: string;
     deltaFormat?: string;
+    colorMap?: string;
     template?: string;
     template_Dark_?: string;
     template_Light_?: string;
@@ -91,6 +92,14 @@ const Metric = (props: MetricProps) => {
                             props.max || 100
                         ]
                     },
+                    steps: props.colorMap ? (() => {
+                        const obj = JSON.parse(props.colorMap);
+                        const keys = Object.keys(obj);
+                        return keys.sort((a, b) => parseFloat(a) - parseFloat(b)).map((key, index) => {
+                            const nextKey = keys[index + 1] !== undefined ? parseFloat(keys[index + 1]) : props.max;
+                            return {range: [parseFloat(key), nextKey], color: obj[key]};
+                        }).filter(item => item.color !== null);
+                    })() : undefined,
                     shape: props.type === "linear" ? "bullet" : "angular",
                     threshold: {
                         line: {color: "red", width: 4},
@@ -102,6 +111,7 @@ const Metric = (props: MetricProps) => {
         ];
     }, [
         props.format,
+        props.colorMap,
         props.deltaFormat,
         props.min,
         props.max,
@@ -168,7 +178,7 @@ const Metric = (props: MetricProps) => {
 
 export default Metric;
 
-const { colorscale, colorway, font} = darkThemeTemplate.layout;
+const {colorscale, colorway, font} = darkThemeTemplate.layout;
 const darkTemplate = {
     layout: {
         colorscale,
diff --git a/taipy/gui/_renderers/factory.py b/taipy/gui/_renderers/factory.py
index 80fe7c337a..659d1a1f4c 100644
--- a/taipy/gui/_renderers/factory.py
+++ b/taipy/gui/_renderers/factory.py
@@ -371,6 +371,7 @@ class _Factory:
                 ("show_value", PropertyType.boolean, True),
                 ("format", PropertyType.string),
                 ("delta_format", PropertyType.string),
+                ("color_map", PropertyType.dict),
                 ("template", PropertyType.dict),
                 ("template[dark]", PropertyType.dict),
                 ("template[light]", PropertyType.dict),
diff --git a/taipy/gui/viselements.json b/taipy/gui/viselements.json
index 5896073ea1..1d62c6dc72 100644
--- a/taipy/gui/viselements.json
+++ b/taipy/gui/viselements.json
@@ -1166,6 +1166,11 @@
                         "type": "str",
                         "doc": "The format to use when displaying the delta value.<br/>This uses the <code>printf</code> syntax."
                     },
+                    {
+                        "name": "color_map",
+                        "type": "dict",
+                        "doc": "The color_map is used to display different colors for different ranges of the metric. The color_map's keys represent the starting point of each range, which is a number, while the values represent the corresponding color for that range. If the value associated with a key is set to None, it implies that the corresponding range will not be assigned any color."
+                    },
                     {
                         "name": "width",
                         "type": "str|number",

From 2b0d6de8c33b3f2dc7972c820a77f24c0b96f883 Mon Sep 17 00:00:00 2001
From: namnguyen <namnguyen20999@gmail.com>
Date: Fri, 14 Jun 2024 04:26:36 +0700
Subject: [PATCH 02/20] useMemo for colorMap

---
 .../taipy-gui/src/components/Taipy/Metric.tsx | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/frontend/taipy-gui/src/components/Taipy/Metric.tsx b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
index 12c96243d6..7a415347ec 100644
--- a/frontend/taipy-gui/src/components/Taipy/Metric.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
@@ -67,6 +67,22 @@ const Metric = (props: MetricProps) => {
     const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined);
     const theme = useTheme();
 
+    const colorMap = useMemo(() => {
+        try {
+            const obj = props.colorMap && JSON.parse(props.colorMap);
+            if (obj && typeof obj === 'object') {
+                const keys = Object.keys(obj);
+                return keys.sort((a, b) => Number(a) - Number(b)).map((key, index) => {
+                    const nextKey = keys[index + 1] !== undefined ? Number(keys[index + 1]) : props.max || 100;
+                    return {range: [Number(key), nextKey], color: obj[key]};
+                }).filter(item => item !== null && item.color !== null)
+            }
+        } catch (e) {
+            console.info(`Error while parsing Metric.colorMap\n${(e as Error).message || e}`);
+        }
+        return undefined;
+    }, [props.colorMap, props.max])
+
     const data = useMemo(() => {
         return [
             {
@@ -92,14 +108,7 @@ const Metric = (props: MetricProps) => {
                             props.max || 100
                         ]
                     },
-                    steps: props.colorMap ? (() => {
-                        const obj = JSON.parse(props.colorMap);
-                        const keys = Object.keys(obj);
-                        return keys.sort((a, b) => parseFloat(a) - parseFloat(b)).map((key, index) => {
-                            const nextKey = keys[index + 1] !== undefined ? parseFloat(keys[index + 1]) : props.max;
-                            return {range: [parseFloat(key), nextKey], color: obj[key]};
-                        }).filter(item => item.color !== null);
-                    })() : undefined,
+                    steps: colorMap,
                     shape: props.type === "linear" ? "bullet" : "angular",
                     threshold: {
                         line: {color: "red", width: 4},
@@ -111,7 +120,6 @@ const Metric = (props: MetricProps) => {
         ];
     }, [
         props.format,
-        props.colorMap,
         props.deltaFormat,
         props.min,
         props.max,
@@ -119,7 +127,8 @@ const Metric = (props: MetricProps) => {
         value,
         showValue,
         delta,
-        threshold
+        threshold,
+        colorMap
     ]);
 
     const style = useMemo(

From fef58a6919c051106db86e9ae2adfe8b7e710538 Mon Sep 17 00:00:00 2001
From: namnguyen <namnguyen20999@gmail.com>
Date: Fri, 14 Jun 2024 04:34:47 +0700
Subject: [PATCH 03/20] using ? ... : instead of &&

---
 frontend/taipy-gui/src/components/Taipy/Metric.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/taipy-gui/src/components/Taipy/Metric.tsx b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
index 7a415347ec..c84580ce2c 100644
--- a/frontend/taipy-gui/src/components/Taipy/Metric.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
@@ -69,7 +69,7 @@ const Metric = (props: MetricProps) => {
 
     const colorMap = useMemo(() => {
         try {
-            const obj = props.colorMap && JSON.parse(props.colorMap);
+            const obj = props.colorMap ? JSON.parse(props.colorMap) : null;
             if (obj && typeof obj === 'object') {
                 const keys = Object.keys(obj);
                 return keys.sort((a, b) => Number(a) - Number(b)).map((key, index) => {

From a870d68a8875bd9ef780204d21b74e2d6bd6c6c2 Mon Sep 17 00:00:00 2001
From: namnguyen <namnguyen20999@gmail.com>
Date: Fri, 14 Jun 2024 17:18:46 +0700
Subject: [PATCH 04/20] adding comment for color_map example

---
 doc/gui/examples/controls/metric-color-map.py      | 12 ++++++++++--
 frontend/taipy-gui/src/components/Taipy/Metric.tsx |  2 +-
 taipy/gui/viselements.json                         |  2 +-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/doc/gui/examples/controls/metric-color-map.py b/doc/gui/examples/controls/metric-color-map.py
index 9c16584fe1..8ae577983d 100644
--- a/doc/gui/examples/controls/metric-color-map.py
+++ b/doc/gui/examples/controls/metric-color-map.py
@@ -15,11 +15,19 @@
 # -----------------------------------------------------------------------------------------
 from taipy.gui import Gui
 
-# Layout reference can be found in the documentation: https://plotly.com/python/reference/layout/
+# color_map definition:
+# - A dictionary mapping metric values to display colors.
+# - Keys: Starting point of each range (number)
+# - Values: Corresponding color for that range (None implies no color assignment)
+# Example:
+# - 20.5 maps to "#fd2020"
+# - 40 maps to None (default color)
+# - 60 maps to "#f3ff26"
+# - 80 maps to None
 
 value = 50
 color_map = {
-    20: "#fd2020",
+    20.5: "#fd2020",
     40: None,
     60: "#f3ff26",
     80: None
diff --git a/frontend/taipy-gui/src/components/Taipy/Metric.tsx b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
index c84580ce2c..00d0226a82 100644
--- a/frontend/taipy-gui/src/components/Taipy/Metric.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
@@ -78,7 +78,7 @@ const Metric = (props: MetricProps) => {
                 }).filter(item => item !== null && item.color !== null)
             }
         } catch (e) {
-            console.info(`Error while parsing Metric.colorMap\n${(e as Error).message || e}`);
+            console.info(`Error parsing color_map value (metric).\n${(e as Error).message || e}`);
         }
         return undefined;
     }, [props.colorMap, props.max])
diff --git a/taipy/gui/viselements.json b/taipy/gui/viselements.json
index 1d62c6dc72..c880baf48b 100644
--- a/taipy/gui/viselements.json
+++ b/taipy/gui/viselements.json
@@ -1169,7 +1169,7 @@
                     {
                         "name": "color_map",
                         "type": "dict",
-                        "doc": "The color_map is used to display different colors for different ranges of the metric. The color_map's keys represent the starting point of each range, which is a number, while the values represent the corresponding color for that range. If the value associated with a key is set to None, it implies that the corresponding range will not be assigned any color."
+                        "doc": "TODO The color_map is used to display different colors for different ranges of the metric. The color_map's keys represent the starting point of each range, which is a number, while the values represent the corresponding color for that range. If the value associated with a key is set to None, it implies that the corresponding range will not be assigned any color."
                     },
                     {
                         "name": "width",

From 5f6de86af8570ab3f21901ab94049cffbbb5126a Mon Sep 17 00:00:00 2001
From: namnguyen <namnguyen20999@gmail.com>
Date: Mon, 17 Jun 2024 14:04:56 +0700
Subject: [PATCH 05/20] fix small minor issue

---
 doc/gui/examples/controls/metric-color-map.py | 24 ++++++++++---------
 .../taipy-gui/src/components/Taipy/Metric.tsx |  2 +-
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/doc/gui/examples/controls/metric-color-map.py b/doc/gui/examples/controls/metric-color-map.py
index 8ae577983d..fa4514bd21 100644
--- a/doc/gui/examples/controls/metric-color-map.py
+++ b/doc/gui/examples/controls/metric-color-map.py
@@ -15,21 +15,23 @@
 # -----------------------------------------------------------------------------------------
 from taipy.gui import Gui
 
-# color_map definition:
-# - A dictionary mapping metric values to display colors.
-# - Keys: Starting point of each range (number)
-# - Values: Corresponding color for that range (None implies no color assignment)
-# Example:
-# - 20.5 maps to "#fd2020"
-# - 40 maps to None (default color)
-# - 60 maps to "#f3ff26"
-# - 80 maps to None
+# color_map = {
+#     # 0-20 - Let Taipy decide
+#     # 20-40 - red
+#     20: "red",
+#     # 40-60 - Let Taipy decide
+#     40: None,
+#     # 60-80 - blue
+#     60: "blue",
+#     # 80-100 - Let Taipy decide
+#     80: None
+# }
 
 value = 50
 color_map = {
-    20.5: "#fd2020",
+    20: "red",
     40: None,
-    60: "#f3ff26",
+    60: "blue",
     80: None
 }
 
diff --git a/frontend/taipy-gui/src/components/Taipy/Metric.tsx b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
index 00d0226a82..3dac610bf3 100644
--- a/frontend/taipy-gui/src/components/Taipy/Metric.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
@@ -75,7 +75,7 @@ const Metric = (props: MetricProps) => {
                 return keys.sort((a, b) => Number(a) - Number(b)).map((key, index) => {
                     const nextKey = keys[index + 1] !== undefined ? Number(keys[index + 1]) : props.max || 100;
                     return {range: [Number(key), nextKey], color: obj[key]};
-                }).filter(item => item !== null && item.color !== null)
+                }).filter(item => item.color !== null)
             }
         } catch (e) {
             console.info(`Error parsing color_map value (metric).\n${(e as Error).message || e}`);

From e7185259866123fb6ce8a5beaaa7c6170bb73c7d Mon Sep 17 00:00:00 2001
From: trgiangdo <dtr.giang.1299@gmail.com>
Date: Tue, 18 Jun 2024 09:07:29 +0700
Subject: [PATCH 06/20] fix: wrong ref link for taipy.export_scenario^ and
 ExportPathAlreadyExists^

---
 taipy/core/scenario/scenario.py | 2 +-
 taipy/core/taipy.py             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/taipy/core/scenario/scenario.py b/taipy/core/scenario/scenario.py
index c24167c8e0..6c9fd7e183 100644
--- a/taipy/core/scenario/scenario.py
+++ b/taipy/core/scenario/scenario.py
@@ -633,7 +633,7 @@ def export(
                 will not be exported. The default value is False.
 
         Raises:
-            ExportFolderAlreadyExist^: If the `folder_path` already exists and the override parameter is False.
+            ExportPathAlreadyExists^: If the `folder_path` already exists and the override parameter is False.
         """
         from ... import core as tp
 
diff --git a/taipy/core/taipy.py b/taipy/core/taipy.py
index 63cc4b5326..6d33583c06 100644
--- a/taipy/core/taipy.py
+++ b/taipy/core/taipy.py
@@ -1062,7 +1062,7 @@ def export_scenario(
 def import_scenario(input_path: Union[str, pathlib.Path], override: bool = False) -> Optional[Scenario]:
     """Import from an archive zip file containing an exported scenario into the current Taipy application.
 
-    The zip file should be created by the `taipy.import()^` method, which contains all related entities
+    The zip file should be created by the `taipy.export_scenario()^` method, which contains all related entities
     of the scenario.
     All entities should belong to the same version that is compatible with the current Taipy application version.
 

From 74ab97642744156dcccfbf202f3fb4a7d14fa63a Mon Sep 17 00:00:00 2001
From: namnguyen <namnguyen20999@gmail.com>
Date: Fri, 14 Jun 2024 03:41:20 +0700
Subject: [PATCH 07/20] adding color-map property to Metric

---
 doc/gui/examples/controls/metric-color-map.py | 33 +++++++++++++++++++
 .../taipy-gui/src/components/Taipy/Metric.tsx | 14 ++++++--
 taipy/gui/_renderers/factory.py               |  1 +
 taipy/gui/viselements.json                    |  5 +++
 4 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 doc/gui/examples/controls/metric-color-map.py

diff --git a/doc/gui/examples/controls/metric-color-map.py b/doc/gui/examples/controls/metric-color-map.py
new file mode 100644
index 0000000000..9c16584fe1
--- /dev/null
+++ b/doc/gui/examples/controls/metric-color-map.py
@@ -0,0 +1,33 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui
+
+# Layout reference can be found in the documentation: https://plotly.com/python/reference/layout/
+
+value = 50
+color_map = {
+    20: "#fd2020",
+    40: None,
+    60: "#f3ff26",
+    80: None
+}
+
+page = """
+<|{value}|metric|color_map={color_map}|>
+"""
+
+Gui(page).run()
+
diff --git a/frontend/taipy-gui/src/components/Taipy/Metric.tsx b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
index 41217b7316..30fa7144c5 100644
--- a/frontend/taipy-gui/src/components/Taipy/Metric.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
@@ -20,7 +20,7 @@ import {useTheme} from "@mui/material";
 import {useClassNames, useDynamicJsonProperty, useDynamicProperty} from "../../utils/hooks";
 import {extractPrefix, extractSuffix, sprintfToD3Converter} from "../../utils/formatConversion";
 import {TaipyBaseProps, TaipyHoverProps} from "./utils";
-import { darkThemeTemplate } from "../../themes/darkThemeTemplate";
+import {darkThemeTemplate} from "../../themes/darkThemeTemplate";
 
 const Plot = lazy(() => import("react-plotly.js"));
 
@@ -44,6 +44,7 @@ interface MetricProps extends TaipyBaseProps, TaipyHoverProps {
     showValue?: boolean;
     format?: string;
     deltaFormat?: string;
+    colorMap?: string;
     template?: string;
     template_Dark_?: string;
     template_Light_?: string;
@@ -94,6 +95,14 @@ const Metric = (props: MetricProps) => {
                             props.max || 100
                         ]
                     },
+                    steps: props.colorMap ? (() => {
+                        const obj = JSON.parse(props.colorMap);
+                        const keys = Object.keys(obj);
+                        return keys.sort((a, b) => parseFloat(a) - parseFloat(b)).map((key, index) => {
+                            const nextKey = keys[index + 1] !== undefined ? parseFloat(keys[index + 1]) : props.max;
+                            return {range: [parseFloat(key), nextKey], color: obj[key]};
+                        }).filter(item => item.color !== null);
+                    })() : undefined,
                     shape: props.type === "linear" ? "bullet" : "angular",
                     threshold: {
                         line: {color: "red", width: 4},
@@ -105,6 +114,7 @@ const Metric = (props: MetricProps) => {
         ];
     }, [
         props.format,
+        props.colorMap,
         props.deltaFormat,
         props.min,
         props.max,
@@ -171,7 +181,7 @@ const Metric = (props: MetricProps) => {
 
 export default Metric;
 
-const { colorscale, colorway, font} = darkThemeTemplate.layout;
+const {colorscale, colorway, font} = darkThemeTemplate.layout;
 const darkTemplate = {
     layout: {
         colorscale,
diff --git a/taipy/gui/_renderers/factory.py b/taipy/gui/_renderers/factory.py
index 76edb4c25f..45b9922d44 100644
--- a/taipy/gui/_renderers/factory.py
+++ b/taipy/gui/_renderers/factory.py
@@ -372,6 +372,7 @@ class _Factory:
                 ("show_value", PropertyType.boolean, True),
                 ("format", PropertyType.string),
                 ("delta_format", PropertyType.string),
+                ("color_map", PropertyType.dict),
                 ("template", PropertyType.dict),
                 ("template[dark]", PropertyType.dict),
                 ("template[light]", PropertyType.dict),
diff --git a/taipy/gui/viselements.json b/taipy/gui/viselements.json
index 5a93f2f3d9..028210753d 100644
--- a/taipy/gui/viselements.json
+++ b/taipy/gui/viselements.json
@@ -1166,6 +1166,11 @@
                         "type": "str",
                         "doc": "The format to use when displaying the delta value.<br/>This uses the <code>printf</code> syntax."
                     },
+                    {
+                        "name": "color_map",
+                        "type": "dict",
+                        "doc": "The color_map is used to display different colors for different ranges of the metric. The color_map's keys represent the starting point of each range, which is a number, while the values represent the corresponding color for that range. If the value associated with a key is set to None, it implies that the corresponding range will not be assigned any color."
+                    },
                     {
                         "name": "width",
                         "type": "str|number",

From 74f82e99171f9dab76244b95fac3bda4c468f9b4 Mon Sep 17 00:00:00 2001
From: namnguyen <namnguyen20999@gmail.com>
Date: Fri, 14 Jun 2024 04:26:36 +0700
Subject: [PATCH 08/20] useMemo for colorMap

---
 .../taipy-gui/src/components/Taipy/Metric.tsx | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/frontend/taipy-gui/src/components/Taipy/Metric.tsx b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
index 30fa7144c5..121a2b74ee 100644
--- a/frontend/taipy-gui/src/components/Taipy/Metric.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
@@ -67,6 +67,22 @@ const Metric = (props: MetricProps) => {
     const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined);
     const theme = useTheme();
 
+    const colorMap = useMemo(() => {
+        try {
+            const obj = props.colorMap && JSON.parse(props.colorMap);
+            if (obj && typeof obj === 'object') {
+                const keys = Object.keys(obj);
+                return keys.sort((a, b) => Number(a) - Number(b)).map((key, index) => {
+                    const nextKey = keys[index + 1] !== undefined ? Number(keys[index + 1]) : props.max || 100;
+                    return {range: [Number(key), nextKey], color: obj[key]};
+                }).filter(item => item !== null && item.color !== null)
+            }
+        } catch (e) {
+            console.info(`Error while parsing Metric.colorMap\n${(e as Error).message || e}`);
+        }
+        return undefined;
+    }, [props.colorMap, props.max])
+
     const data = useMemo(() => {
         const mode = (props.type === "none") ? [] : ["gauge"];
         showValue && mode.push("number");
@@ -95,14 +111,7 @@ const Metric = (props: MetricProps) => {
                             props.max || 100
                         ]
                     },
-                    steps: props.colorMap ? (() => {
-                        const obj = JSON.parse(props.colorMap);
-                        const keys = Object.keys(obj);
-                        return keys.sort((a, b) => parseFloat(a) - parseFloat(b)).map((key, index) => {
-                            const nextKey = keys[index + 1] !== undefined ? parseFloat(keys[index + 1]) : props.max;
-                            return {range: [parseFloat(key), nextKey], color: obj[key]};
-                        }).filter(item => item.color !== null);
-                    })() : undefined,
+                    steps: colorMap,
                     shape: props.type === "linear" ? "bullet" : "angular",
                     threshold: {
                         line: {color: "red", width: 4},
@@ -114,7 +123,6 @@ const Metric = (props: MetricProps) => {
         ];
     }, [
         props.format,
-        props.colorMap,
         props.deltaFormat,
         props.min,
         props.max,
@@ -122,7 +130,8 @@ const Metric = (props: MetricProps) => {
         value,
         showValue,
         delta,
-        threshold
+        threshold,
+        colorMap
     ]);
 
     const style = useMemo(

From 3ed0353f0eacf0035dad418fd65951d9ad823d4d Mon Sep 17 00:00:00 2001
From: namnguyen <namnguyen20999@gmail.com>
Date: Fri, 14 Jun 2024 04:34:47 +0700
Subject: [PATCH 09/20] using ? ... : instead of &&

---
 frontend/taipy-gui/src/components/Taipy/Metric.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/taipy-gui/src/components/Taipy/Metric.tsx b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
index 121a2b74ee..3676871d81 100644
--- a/frontend/taipy-gui/src/components/Taipy/Metric.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
@@ -69,7 +69,7 @@ const Metric = (props: MetricProps) => {
 
     const colorMap = useMemo(() => {
         try {
-            const obj = props.colorMap && JSON.parse(props.colorMap);
+            const obj = props.colorMap ? JSON.parse(props.colorMap) : null;
             if (obj && typeof obj === 'object') {
                 const keys = Object.keys(obj);
                 return keys.sort((a, b) => Number(a) - Number(b)).map((key, index) => {

From ec63d06f012daebf3556821ec18f766bd82c5ea2 Mon Sep 17 00:00:00 2001
From: namnguyen <namnguyen20999@gmail.com>
Date: Fri, 14 Jun 2024 17:18:46 +0700
Subject: [PATCH 10/20] adding comment for color_map example

---
 doc/gui/examples/controls/metric-color-map.py      | 12 ++++++++++--
 frontend/taipy-gui/src/components/Taipy/Metric.tsx |  2 +-
 taipy/gui/viselements.json                         |  2 +-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/doc/gui/examples/controls/metric-color-map.py b/doc/gui/examples/controls/metric-color-map.py
index 9c16584fe1..8ae577983d 100644
--- a/doc/gui/examples/controls/metric-color-map.py
+++ b/doc/gui/examples/controls/metric-color-map.py
@@ -15,11 +15,19 @@
 # -----------------------------------------------------------------------------------------
 from taipy.gui import Gui
 
-# Layout reference can be found in the documentation: https://plotly.com/python/reference/layout/
+# color_map definition:
+# - A dictionary mapping metric values to display colors.
+# - Keys: Starting point of each range (number)
+# - Values: Corresponding color for that range (None implies no color assignment)
+# Example:
+# - 20.5 maps to "#fd2020"
+# - 40 maps to None (default color)
+# - 60 maps to "#f3ff26"
+# - 80 maps to None
 
 value = 50
 color_map = {
-    20: "#fd2020",
+    20.5: "#fd2020",
     40: None,
     60: "#f3ff26",
     80: None
diff --git a/frontend/taipy-gui/src/components/Taipy/Metric.tsx b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
index 3676871d81..ed10eab73a 100644
--- a/frontend/taipy-gui/src/components/Taipy/Metric.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
@@ -78,7 +78,7 @@ const Metric = (props: MetricProps) => {
                 }).filter(item => item !== null && item.color !== null)
             }
         } catch (e) {
-            console.info(`Error while parsing Metric.colorMap\n${(e as Error).message || e}`);
+            console.info(`Error parsing color_map value (metric).\n${(e as Error).message || e}`);
         }
         return undefined;
     }, [props.colorMap, props.max])
diff --git a/taipy/gui/viselements.json b/taipy/gui/viselements.json
index 028210753d..a16b07cd4a 100644
--- a/taipy/gui/viselements.json
+++ b/taipy/gui/viselements.json
@@ -1169,7 +1169,7 @@
                     {
                         "name": "color_map",
                         "type": "dict",
-                        "doc": "The color_map is used to display different colors for different ranges of the metric. The color_map's keys represent the starting point of each range, which is a number, while the values represent the corresponding color for that range. If the value associated with a key is set to None, it implies that the corresponding range will not be assigned any color."
+                        "doc": "TODO The color_map is used to display different colors for different ranges of the metric. The color_map's keys represent the starting point of each range, which is a number, while the values represent the corresponding color for that range. If the value associated with a key is set to None, it implies that the corresponding range will not be assigned any color."
                     },
                     {
                         "name": "width",

From 3b36afc2a252735975e8975357b5cfa9e4b6b580 Mon Sep 17 00:00:00 2001
From: namnguyen <namnguyen20999@gmail.com>
Date: Mon, 17 Jun 2024 14:04:56 +0700
Subject: [PATCH 11/20] fix small minor issue

---
 doc/gui/examples/controls/metric-color-map.py | 24 ++++++++++---------
 .../taipy-gui/src/components/Taipy/Metric.tsx |  2 +-
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/doc/gui/examples/controls/metric-color-map.py b/doc/gui/examples/controls/metric-color-map.py
index 8ae577983d..fa4514bd21 100644
--- a/doc/gui/examples/controls/metric-color-map.py
+++ b/doc/gui/examples/controls/metric-color-map.py
@@ -15,21 +15,23 @@
 # -----------------------------------------------------------------------------------------
 from taipy.gui import Gui
 
-# color_map definition:
-# - A dictionary mapping metric values to display colors.
-# - Keys: Starting point of each range (number)
-# - Values: Corresponding color for that range (None implies no color assignment)
-# Example:
-# - 20.5 maps to "#fd2020"
-# - 40 maps to None (default color)
-# - 60 maps to "#f3ff26"
-# - 80 maps to None
+# color_map = {
+#     # 0-20 - Let Taipy decide
+#     # 20-40 - red
+#     20: "red",
+#     # 40-60 - Let Taipy decide
+#     40: None,
+#     # 60-80 - blue
+#     60: "blue",
+#     # 80-100 - Let Taipy decide
+#     80: None
+# }
 
 value = 50
 color_map = {
-    20.5: "#fd2020",
+    20: "red",
     40: None,
-    60: "#f3ff26",
+    60: "blue",
     80: None
 }
 
diff --git a/frontend/taipy-gui/src/components/Taipy/Metric.tsx b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
index ed10eab73a..d440f0fb06 100644
--- a/frontend/taipy-gui/src/components/Taipy/Metric.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
@@ -75,7 +75,7 @@ const Metric = (props: MetricProps) => {
                 return keys.sort((a, b) => Number(a) - Number(b)).map((key, index) => {
                     const nextKey = keys[index + 1] !== undefined ? Number(keys[index + 1]) : props.max || 100;
                     return {range: [Number(key), nextKey], color: obj[key]};
-                }).filter(item => item !== null && item.color !== null)
+                }).filter(item => item.color !== null)
             }
         } catch (e) {
             console.info(`Error parsing color_map value (metric).\n${(e as Error).message || e}`);

From 8d7e50df2147235e3ce1e4a0b89827177132dc5a Mon Sep 17 00:00:00 2001
From: namnguyen <namnguyen20999@gmail.com>
Date: Tue, 18 Jun 2024 15:23:26 +0700
Subject: [PATCH 12/20] add title for Metric.tsx

---
 frontend/taipy-gui/src/components/Taipy/Metric.tsx | 4 ++++
 taipy/gui/_renderers/factory.py                    | 1 +
 taipy/gui/viselements.json                         | 5 +++++
 3 files changed, 10 insertions(+)

diff --git a/frontend/taipy-gui/src/components/Taipy/Metric.tsx b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
index 41217b7316..818612432e 100644
--- a/frontend/taipy-gui/src/components/Taipy/Metric.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
@@ -25,6 +25,7 @@ import { darkThemeTemplate } from "../../themes/darkThemeTemplate";
 const Plot = lazy(() => import("react-plotly.js"));
 
 interface MetricProps extends TaipyBaseProps, TaipyHoverProps {
+    title?: string
     type?: string
     min?: number
     max?: number
@@ -72,6 +73,9 @@ const Metric = (props: MetricProps) => {
         (delta !== undefined) && mode.push("delta");
         return [
             {
+                title: {
+                  text: props.title
+                },
                 domain: {x: [0, 1], y: [0, 1]},
                 value: value,
                 type: "indicator",
diff --git a/taipy/gui/_renderers/factory.py b/taipy/gui/_renderers/factory.py
index 76edb4c25f..09a3762165 100644
--- a/taipy/gui/_renderers/factory.py
+++ b/taipy/gui/_renderers/factory.py
@@ -360,6 +360,7 @@ class _Factory:
         .set_attributes(
             [
                 ("id",),
+                ("title",),
                 ("active", PropertyType.dynamic_boolean, True),
                 ("layout", PropertyType.dynamic_dict),
                 ("type", PropertyType.string, "circular"),
diff --git a/taipy/gui/viselements.json b/taipy/gui/viselements.json
index 5a93f2f3d9..a125500a00 100644
--- a/taipy/gui/viselements.json
+++ b/taipy/gui/viselements.json
@@ -1116,6 +1116,11 @@
                     "shared"
                 ],
                 "properties": [
+                    {
+                        "name": "title",
+                        "type": "str",
+                        "doc": "The title of the metric."
+                    },
                     {
                         "name": "value",
                         "default_property": true,

From aadf04a44294aba2e1891ddf0cd5e8c77abcea83 Mon Sep 17 00:00:00 2001
From: trgiangdo <dtr.giang.1299@gmail.com>
Date: Tue, 18 Jun 2024 16:09:16 +0700
Subject: [PATCH 13/20] fix: put the _write_default_data() inside the _Reloader
 context

---
 taipy/core/data/csv.py     | 4 +++-
 taipy/core/data/excel.py   | 4 +++-
 taipy/core/data/json.py    | 5 +++--
 taipy/core/data/parquet.py | 4 +++-
 taipy/core/data/pickle.py  | 4 +++-
 5 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/taipy/core/data/csv.py b/taipy/core/data/csv.py
index 3918a988fd..e5d5435c88 100644
--- a/taipy/core/data/csv.py
+++ b/taipy/core/data/csv.py
@@ -18,6 +18,7 @@
 
 from taipy.config.common.scope import Scope
 
+from .._entity._reload import _Reloader
 from .._version._version_manager_factory import _VersionManagerFactory
 from ..job.job_id import JobId
 from ._file_datanode_mixin import _FileDataNodeMixin
@@ -116,7 +117,8 @@ def __init__(
             **properties,
         )
 
-        self._write_default_data(default_value)
+        with _Reloader():
+            self._write_default_data(default_value)
 
         self._TAIPY_PROPERTIES.update(
             {
diff --git a/taipy/core/data/excel.py b/taipy/core/data/excel.py
index 08d453aa97..92f201df6a 100644
--- a/taipy/core/data/excel.py
+++ b/taipy/core/data/excel.py
@@ -18,6 +18,7 @@
 
 from taipy.config.common.scope import Scope
 
+from .._entity._reload import _Reloader
 from .._version._version_manager_factory import _VersionManagerFactory
 from ..exceptions.exceptions import ExposedTypeLengthMismatch, NonExistingExcelSheet, SheetNameLengthMismatch
 from ..job.job_id import JobId
@@ -118,7 +119,8 @@ def __init__(
             **properties,
         )
 
-        self._write_default_data(default_value)
+        with _Reloader():
+            self._write_default_data(default_value)
 
         self._TAIPY_PROPERTIES.update(
             {
diff --git a/taipy/core/data/json.py b/taipy/core/data/json.py
index e1f131c702..f361bc9e60 100644
--- a/taipy/core/data/json.py
+++ b/taipy/core/data/json.py
@@ -18,7 +18,7 @@
 
 from taipy.config.common.scope import Scope
 
-from .._entity._reload import _self_reload
+from .._entity._reload import _Reloader, _self_reload
 from .._version._version_manager_factory import _VersionManagerFactory
 from ._file_datanode_mixin import _FileDataNodeMixin
 from .data_node import DataNode
@@ -112,7 +112,8 @@ def __init__(
         self._decoder = self._properties.get(self._DECODER_KEY, _DefaultJSONDecoder)
         self._encoder = self._properties.get(self._ENCODER_KEY, _DefaultJSONEncoder)
 
-        self._write_default_data(default_value)
+        with _Reloader():
+            self._write_default_data(default_value)
 
         self._TAIPY_PROPERTIES.update(
             {
diff --git a/taipy/core/data/parquet.py b/taipy/core/data/parquet.py
index 9583f0df07..6e968c5966 100644
--- a/taipy/core/data/parquet.py
+++ b/taipy/core/data/parquet.py
@@ -18,6 +18,7 @@
 
 from taipy.config.common.scope import Scope
 
+from .._entity._reload import _Reloader
 from .._version._version_manager_factory import _VersionManagerFactory
 from ..exceptions.exceptions import UnknownCompressionAlgorithm, UnknownParquetEngine
 from ..job.job_id import JobId
@@ -153,7 +154,8 @@ def __init__(
             **properties,
         )
 
-        self._write_default_data(default_value)
+        with _Reloader():
+            self._write_default_data(default_value)
 
         if not self._last_edit_date and (isfile(self._path) or isdir(self._path)):
             self._last_edit_date = datetime.now()
diff --git a/taipy/core/data/pickle.py b/taipy/core/data/pickle.py
index ad6d51534b..7c7693ff68 100644
--- a/taipy/core/data/pickle.py
+++ b/taipy/core/data/pickle.py
@@ -15,6 +15,7 @@
 
 from taipy.config.common.scope import Scope
 
+from .._entity._reload import _Reloader
 from .._version._version_manager_factory import _VersionManagerFactory
 from ._file_datanode_mixin import _FileDataNodeMixin
 from .data_node import DataNode
@@ -98,7 +99,8 @@ def __init__(
             **properties,
         )
 
-        self._write_default_data(default_value)
+        with _Reloader():
+            self._write_default_data(default_value)
 
         self._TAIPY_PROPERTIES.update(
             {

From ef65897fb9b9fdabe6c1b9051107eaa563b9b517 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fred=20Lef=C3=A9v=C3=A8re-Laoide?=
 <90181748+FredLL-Avaiga@users.noreply.github.com>
Date: Tue, 18 Jun 2024 15:14:17 +0200
Subject: [PATCH 14/20] call can_create to get the reason (#1425)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* call can_create to get the reason
resolves taipy-enterprise#362

* format

* fab's comment

* fab's comment

---------

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>
---
 frontend/taipy-gui/package-lock.json    | 298 +++++++++++-------------
 frontend/taipy/package-lock.json        | 204 ++++++++--------
 frontend/taipy/src/ScenarioSelector.tsx |  20 +-
 taipy/gui_core/_GuiCoreLib.py           |   3 +
 taipy/gui_core/_context.py              |   4 +
 5 files changed, 267 insertions(+), 262 deletions(-)

diff --git a/frontend/taipy-gui/package-lock.json b/frontend/taipy-gui/package-lock.json
index 4da5cadae6..8f2c84b498 100644
--- a/frontend/taipy-gui/package-lock.json
+++ b/frontend/taipy-gui/package-lock.json
@@ -931,6 +931,7 @@
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
       "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
+      "deprecated": "Use @eslint/config-array instead",
       "dev": true,
       "dependencies": {
         "@humanwhocodes/object-schema": "^2.0.2",
@@ -980,6 +981,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
       "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+      "deprecated": "Use @eslint/object-schema instead",
       "dev": true
     },
     "node_modules/@istanbuljs/load-nyc-config": {
@@ -1936,18 +1938,18 @@
       }
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.15.19",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.19.tgz",
-      "integrity": "sha512-tCHSi/Tomez9ERynFhZRvFO6n9ATyrPs+2N80DMDzp6xDVirbBjEwhPcE+x7Lj+nwYw0SqFkOxyvMP0irnm55w==",
+      "version": "5.15.20",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.20.tgz",
+      "integrity": "sha512-DoL2ppgldL16utL8nNyj/P12f8mCNdx/Hb/AJnX9rLY4b52hCMIx1kH83pbXQ6uMy6n54M3StmEbvSGoj2OFuA==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui-org"
       }
     },
     "node_modules/@mui/icons-material": {
-      "version": "5.15.19",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.19.tgz",
-      "integrity": "sha512-RsEiRxA5azN9b8gI7JRqekkgvxQUlitoBOtZglflb8cUDyP12/cP4gRwhb44Ea1/zwwGGjAj66ZJpGHhKfibNA==",
+      "version": "5.15.20",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.20.tgz",
+      "integrity": "sha512-oGcKmCuHaYbAAoLN67WKSXtHmEgyWcJToT1uRtmPyxMj9N5uqwc/mRtEnst4Wj/eGr+zYH2FiZQ79v9k7kSk1Q==",
       "dependencies": {
         "@babel/runtime": "^7.23.9"
       },
@@ -1970,16 +1972,16 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "5.15.19",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.19.tgz",
-      "integrity": "sha512-lp5xQBbcRuxNtjpWU0BWZgIrv2XLUz4RJ0RqFXBdESIsKoGCQZ6P3wwU5ZPuj5TjssNiKv9AlM+vHopRxZhvVQ==",
+      "version": "5.15.20",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.20.tgz",
+      "integrity": "sha512-tVq3l4qoXx/NxUgIx/x3lZiPn/5xDbdTE8VrLczNpfblLYZzlrbxA7kb9mI8NoBF6+w9WE9IrxWnKK5KlPI2bg==",
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "@mui/base": "5.0.0-beta.40",
-        "@mui/core-downloads-tracker": "^5.15.19",
-        "@mui/system": "^5.15.15",
+        "@mui/core-downloads-tracker": "^5.15.20",
+        "@mui/system": "^5.15.20",
         "@mui/types": "^7.2.14",
-        "@mui/utils": "^5.15.14",
+        "@mui/utils": "^5.15.20",
         "@types/react-transition-group": "^4.4.10",
         "clsx": "^2.1.0",
         "csstype": "^3.1.3",
@@ -2014,12 +2016,12 @@
       }
     },
     "node_modules/@mui/private-theming": {
-      "version": "5.15.14",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz",
-      "integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==",
+      "version": "5.15.20",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.20.tgz",
+      "integrity": "sha512-BK8F94AIqSrnaPYXf2KAOjGZJgWfvqAVQ2gVR3EryvQFtuBnG6RwodxrCvd3B48VuMy6Wsk897+lQMUxJyk+6g==",
       "dependencies": {
         "@babel/runtime": "^7.23.9",
-        "@mui/utils": "^5.15.14",
+        "@mui/utils": "^5.15.20",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -2071,15 +2073,15 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "5.15.15",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.15.tgz",
-      "integrity": "sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==",
+      "version": "5.15.20",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.20.tgz",
+      "integrity": "sha512-LoMq4IlAAhxzL2VNUDBTQxAb4chnBe8JvRINVNDiMtHE2PiPOoHlhOPutSxEbaL5mkECPVWSv6p8JEV+uykwIA==",
       "dependencies": {
         "@babel/runtime": "^7.23.9",
-        "@mui/private-theming": "^5.15.14",
+        "@mui/private-theming": "^5.15.20",
         "@mui/styled-engine": "^5.15.14",
         "@mui/types": "^7.2.14",
-        "@mui/utils": "^5.15.14",
+        "@mui/utils": "^5.15.20",
         "clsx": "^2.1.0",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
@@ -2123,9 +2125,9 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.15.14",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz",
-      "integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==",
+      "version": "5.15.20",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.20.tgz",
+      "integrity": "sha512-mAbYx0sovrnpAu1zHc3MDIhPqL8RPVC5W5xcO1b7PiSCJPtckIZmBkp8hefamAvUiAV8gpfMOM6Zb+eSisbI2A==",
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "@types/prop-types": "^15.7.11",
@@ -2150,11 +2152,11 @@
       }
     },
     "node_modules/@mui/x-date-pickers": {
-      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.6.2.tgz",
-      "integrity": "sha512-9e5qO76eLvjiEm7Yt4HNR1jqGFia7vnZYbhi4Tw/xQ32emMKYLUzXZLhQNtb1wa7SwHWxXcPJOkIEmvQgEvaqQ==",
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.7.0.tgz",
+      "integrity": "sha512-huyoA22Vi8iCkee6ro0sX7CcFIcPV/Fl7ZGWwaQC8PTAheXhz823DjMYAiwRU/imF+UFYfUInWQ4XZCIkM+2Dw==",
       "dependencies": {
-        "@babel/runtime": "^7.24.6",
+        "@babel/runtime": "^7.24.7",
         "@mui/base": "^5.0.0-beta.40",
         "@mui/system": "^5.15.15",
         "@mui/utils": "^5.15.14",
@@ -2215,11 +2217,11 @@
       }
     },
     "node_modules/@mui/x-tree-view": {
-      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-7.6.2.tgz",
-      "integrity": "sha512-0LBoKUQvMzNzJN7UmGqGV4A3NpRxB8liPrjQMfkbI6LrXBbDlqyEdJWRseK1RzxYxTfH71HqW9Z3E2wS62P1Sg==",
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-7.7.0.tgz",
+      "integrity": "sha512-kUTMS77EcNjp1iXZlm4GGFzZHnQdZJfn2L9gvxAaHtNTDSRMS61jpsCcXknIyC797dmRPdALPewNzSOfkThF+Q==",
       "dependencies": {
-        "@babel/runtime": "^7.24.6",
+        "@babel/runtime": "^7.24.7",
         "@mui/base": "^5.0.0-beta.40",
         "@mui/system": "^5.15.15",
         "@mui/utils": "^5.15.14",
@@ -2501,12 +2503,12 @@
       }
     },
     "node_modules/@testing-library/jest-dom": {
-      "version": "6.4.5",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.4.5.tgz",
-      "integrity": "sha512-AguB9yvTXmCnySBP1lWjfNNUwpbElsaQ567lt2VdGqAdHtpieLgjmcVyv1q7PMIvLbgpDdkWV5Ydv3FEejyp2A==",
+      "version": "6.4.6",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.4.6.tgz",
+      "integrity": "sha512-8qpnGVincVDLEcQXWaHOf6zmlbwTKc6Us6PPu4CRnPXCzo2OGBS5cwgMMOWdxDpEz1mkbvXHpEy99M5Yvt682w==",
       "dev": true,
       "dependencies": {
-        "@adobe/css-tools": "^4.3.2",
+        "@adobe/css-tools": "^4.4.0",
         "@babel/runtime": "^7.9.2",
         "aria-query": "^5.0.0",
         "chalk": "^3.0.0",
@@ -2930,9 +2932,9 @@
       "dev": true
     },
     "node_modules/@types/lodash": {
-      "version": "4.17.4",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.4.tgz",
-      "integrity": "sha512-wYCP26ZLxaT3R39kiN2+HcJ4kTd3U1waI/cY7ivWYqFP6pW3ZNpvi6Wd6PHZx7T/t8z0vlkXMg3QYLa7DZ/IJQ==",
+      "version": "4.17.5",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.5.tgz",
+      "integrity": "sha512-MBIOHVZqVqgfro1euRDWX7OO0fBVUUMrN6Pwm8LQsz8cWhEpihlvR70ENj3f40j58TNxZaWv2ndSkInykNBBJw==",
       "dev": true
     },
     "node_modules/@types/mdast": {
@@ -3114,16 +3116,16 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.12.0.tgz",
-      "integrity": "sha512-7F91fcbuDf/d3S8o21+r3ZncGIke/+eWk0EpO21LXhDfLahriZF9CGj4fbAetEjlaBdjdSm9a6VeXbpbT6Z40Q==",
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.13.1.tgz",
+      "integrity": "sha512-kZqi+WZQaZfPKnsflLJQCz6Ze9FFSMfXrrIOcyargekQxG37ES7DJNpJUE9Q/X5n3yTIP/WPutVNzgknQ7biLg==",
       "dev": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "7.12.0",
-        "@typescript-eslint/type-utils": "7.12.0",
-        "@typescript-eslint/utils": "7.12.0",
-        "@typescript-eslint/visitor-keys": "7.12.0",
+        "@typescript-eslint/scope-manager": "7.13.1",
+        "@typescript-eslint/type-utils": "7.13.1",
+        "@typescript-eslint/utils": "7.13.1",
+        "@typescript-eslint/visitor-keys": "7.13.1",
         "graphemer": "^1.4.0",
         "ignore": "^5.3.1",
         "natural-compare": "^1.4.0",
@@ -3147,15 +3149,15 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.12.0.tgz",
-      "integrity": "sha512-dm/J2UDY3oV3TKius2OUZIFHsomQmpHtsV0FTh1WO8EKgHLQ1QCADUqscPgTpU+ih1e21FQSRjXckHn3txn6kQ==",
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.13.1.tgz",
+      "integrity": "sha512-1ELDPlnLvDQ5ybTSrMhRTFDfOQEOXNM+eP+3HT/Yq7ruWpciQw+Avi73pdEbA4SooCawEWo3dtYbF68gN7Ed1A==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "7.12.0",
-        "@typescript-eslint/types": "7.12.0",
-        "@typescript-eslint/typescript-estree": "7.12.0",
-        "@typescript-eslint/visitor-keys": "7.12.0",
+        "@typescript-eslint/scope-manager": "7.13.1",
+        "@typescript-eslint/types": "7.13.1",
+        "@typescript-eslint/typescript-estree": "7.13.1",
+        "@typescript-eslint/visitor-keys": "7.13.1",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -3175,13 +3177,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.12.0.tgz",
-      "integrity": "sha512-itF1pTnN6F3unPak+kutH9raIkL3lhH1YRPGgt7QQOh43DQKVJXmWkpb+vpc/TiDHs6RSd9CTbDsc/Y+Ygq7kg==",
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.13.1.tgz",
+      "integrity": "sha512-adbXNVEs6GmbzaCpymHQ0MB6E4TqoiVbC0iqG3uijR8ZYfpAXMGttouQzF4Oat3P2GxDVIrg7bMI/P65LiQZdg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "7.12.0",
-        "@typescript-eslint/visitor-keys": "7.12.0"
+        "@typescript-eslint/types": "7.13.1",
+        "@typescript-eslint/visitor-keys": "7.13.1"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -3192,13 +3194,13 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.12.0.tgz",
-      "integrity": "sha512-lib96tyRtMhLxwauDWUp/uW3FMhLA6D0rJ8T7HmH7x23Gk1Gwwu8UZ94NMXBvOELn6flSPiBrCKlehkiXyaqwA==",
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.13.1.tgz",
+      "integrity": "sha512-aWDbLu1s9bmgPGXSzNCxELu+0+HQOapV/y+60gPXafR8e2g1Bifxzevaa+4L2ytCWm+CHqpELq4CSoN9ELiwCg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "7.12.0",
-        "@typescript-eslint/utils": "7.12.0",
+        "@typescript-eslint/typescript-estree": "7.13.1",
+        "@typescript-eslint/utils": "7.13.1",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.3.0"
       },
@@ -3219,9 +3221,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.12.0.tgz",
-      "integrity": "sha512-o+0Te6eWp2ppKY3mLCU+YA9pVJxhUJE15FV7kxuD9jgwIAa+w/ycGJBMrYDTpVGUM/tgpa9SeMOugSabWFq7bg==",
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.13.1.tgz",
+      "integrity": "sha512-7K7HMcSQIAND6RBL4kDl24sG/xKM13cA85dc7JnmQXw2cBDngg7c19B++JzvJHRG3zG36n9j1i451GBzRuHchw==",
       "dev": true,
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -3232,13 +3234,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.12.0.tgz",
-      "integrity": "sha512-5bwqLsWBULv1h6pn7cMW5dXX/Y2amRqLaKqsASVwbBHMZSnHqE/HN4vT4fE0aFsiwxYvr98kqOWh1a8ZKXalCQ==",
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.13.1.tgz",
+      "integrity": "sha512-uxNr51CMV7npU1BxZzYjoVz9iyjckBduFBP0S5sLlh1tXYzHzgZ3BR9SVsNed+LmwKrmnqN3Kdl5t7eZ5TS1Yw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "7.12.0",
-        "@typescript-eslint/visitor-keys": "7.12.0",
+        "@typescript-eslint/types": "7.13.1",
+        "@typescript-eslint/visitor-keys": "7.13.1",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -3260,15 +3262,15 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.12.0.tgz",
-      "integrity": "sha512-Y6hhwxwDx41HNpjuYswYp6gDbkiZ8Hin9Bf5aJQn1bpTs3afYY4GX+MPYxma8jtoIV2GRwTM/UJm/2uGCVv+DQ==",
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.13.1.tgz",
+      "integrity": "sha512-h5MzFBD5a/Gh/fvNdp9pTfqJAbuQC4sCN2WzuXme71lqFJsZtLbjxfSk4r3p02WIArOF9N94pdsLiGutpDbrXQ==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "7.12.0",
-        "@typescript-eslint/types": "7.12.0",
-        "@typescript-eslint/typescript-estree": "7.12.0"
+        "@typescript-eslint/scope-manager": "7.13.1",
+        "@typescript-eslint/types": "7.13.1",
+        "@typescript-eslint/typescript-estree": "7.13.1"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -3282,12 +3284,12 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.12.0.tgz",
-      "integrity": "sha512-uZk7DevrQLL3vSnfFl5bj4sL75qC9D6EdjemIdbtkuUmIheWpuiiylSY01JxJE7+zGrOWDZrp1WxOuDntvKrHQ==",
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.13.1.tgz",
+      "integrity": "sha512-k/Bfne7lrP7hcb7m9zSsgcBmo+8eicqqfNAJ7uUY+jkTFpKeH2FSkWpFRtimBxgkyvqfu9jTPRbYOvud6isdXA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "7.12.0",
+        "@typescript-eslint/types": "7.13.1",
         "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
@@ -3518,9 +3520,9 @@
       "integrity": "sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA=="
     },
     "node_modules/acorn": {
-      "version": "8.11.3",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
-      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz",
+      "integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3538,10 +3540,10 @@
         "acorn-walk": "^8.0.2"
       }
     },
-    "node_modules/acorn-import-assertions": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+    "node_modules/acorn-import-attributes": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
       "dev": true,
       "peerDependencies": {
         "acorn": "^8"
@@ -3556,10 +3558,13 @@
       }
     },
     "node_modules/acorn-walk": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.2.tgz",
-      "integrity": "sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==",
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.3.tgz",
+      "integrity": "sha512-MxXdReSRhGO7VlFe1bRG/oI7/mdLV9B9JJT0N8vZOhF7gFRR5l3M8W9G8JxmKV+JC5mGqJ0QvqfSOLsCPa4nUw==",
       "dev": true,
+      "dependencies": {
+        "acorn": "^8.11.0"
+      },
       "engines": {
         "node": ">=0.4.0"
       }
@@ -4284,9 +4289,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.23.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
-      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
+      "version": "4.23.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.1.tgz",
+      "integrity": "sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw==",
       "funding": [
         {
           "type": "opencollective",
@@ -4302,10 +4307,10 @@
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001587",
-        "electron-to-chromium": "^1.4.668",
+        "caniuse-lite": "^1.0.30001629",
+        "electron-to-chromium": "^1.4.796",
         "node-releases": "^2.0.14",
-        "update-browserslist-db": "^1.0.13"
+        "update-browserslist-db": "^1.0.16"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -4387,9 +4392,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001629",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001629.tgz",
-      "integrity": "sha512-c3dl911slnQhmxUIT4HhYzT7wnBK/XYpGnYLOj4nJBaRiw52Ibe7YxlDaAeRECvA786zCuExhxIUJ2K7nHMrBw==",
+      "version": "1.0.30001636",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz",
+      "integrity": "sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==",
       "funding": [
         {
           "type": "opencollective",
@@ -5958,9 +5963,9 @@
       "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.794",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.794.tgz",
-      "integrity": "sha512-6FApLtsYhDCY0Vglq3AptsdxQ+PJLc6AxlAM0HjEihUAiOPPbkASEsq9gtxUeZY9o0sJIEa3WnF0vVH4VT4iug=="
+      "version": "1.4.805",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.805.tgz",
+      "integrity": "sha512-8W4UJwX/w9T0QSzINJckTKG6CYpAUTqsaWcWIsdud3I1FYJcMgW9QqT1/4CBff/pP/TihWh13OmiyY8neto6vw=="
     },
     "node_modules/element-size": {
       "version": "1.1.1",
@@ -6002,37 +6007,17 @@
       }
     },
     "node_modules/engine.io-client": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.3.tgz",
-      "integrity": "sha512-9Z0qLB0NIisTRt1DZ/8U2k12RJn8yls/nXMZLn+/N8hANT3TcYjKFKcwbw5zFQiN4NTde3TSY9zb79e1ij6j9Q==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.4.tgz",
+      "integrity": "sha512-GeZeeRjpD2qf49cZQ0Wvh/8NJNfeXkXXcoGh+F77oEAgo9gUHwT1fCRxSNU+YEEaysOJTnsFHmM5oAcPy4ntvQ==",
       "dependencies": {
         "@socket.io/component-emitter": "~3.1.0",
         "debug": "~4.3.1",
         "engine.io-parser": "~5.2.1",
-        "ws": "~8.11.0",
+        "ws": "~8.17.1",
         "xmlhttprequest-ssl": "~2.0.0"
       }
     },
-    "node_modules/engine.io-client/node_modules/ws": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
-      "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/engine.io-parser": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.2.tgz",
@@ -10820,9 +10805,9 @@
       }
     },
     "node_modules/lilconfig": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.1.tgz",
-      "integrity": "sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
+      "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
       "dev": true,
       "engines": {
         "node": ">=14"
@@ -10837,9 +10822,9 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/lint-staged": {
-      "version": "15.2.5",
-      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.2.5.tgz",
-      "integrity": "sha512-j+DfX7W9YUvdzEZl3Rk47FhDF6xwDBV5wwsCPw6BwWZVPYJemusQmvb9bRsW23Sqsaa+vRloAWogbK4BUuU2zA==",
+      "version": "15.2.7",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.2.7.tgz",
+      "integrity": "sha512-+FdVbbCZ+yoh7E/RosSdqKJyUM2OEjTciH0TFNkawKgvFp1zbGlEC39RADg+xKBG1R4mhoH2j85myBQZ5wR+lw==",
       "dev": true,
       "dependencies": {
         "chalk": "~5.3.0",
@@ -11019,9 +11004,9 @@
       }
     },
     "node_modules/lint-staged/node_modules/yaml": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.3.tgz",
-      "integrity": "sha512-sntgmxj8o7DE7g/Qi60cqpLBA3HG3STcDA0kO+WfB05jEKhZMbY7umNm2rBpQvsmZ16/lPXCJGW2672dgOUkrg==",
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.5.tgz",
+      "integrity": "sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==",
       "dev": true,
       "bin": {
         "yaml": "bin.mjs"
@@ -11445,9 +11430,9 @@
       }
     },
     "node_modules/mdast-util-to-hast": {
-      "version": "13.1.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.1.0.tgz",
-      "integrity": "sha512-/e2l/6+OdGp/FB+ctrJ9Avz71AN/GRH3oi/3KAx/kMnoUsD6q0woXlDT8lLEeViVKE7oZxE7RXzvO3T8kF2/sA==",
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz",
+      "integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==",
       "dependencies": {
         "@types/hast": "^3.0.0",
         "@types/mdast": "^4.0.0",
@@ -13670,9 +13655,9 @@
       }
     },
     "node_modules/rfdc": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.1.tgz",
-      "integrity": "sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
       "dev": true
     },
     "node_modules/right-now": {
@@ -14866,9 +14851,9 @@
       }
     },
     "node_modules/ts-jest": {
-      "version": "29.1.4",
-      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.1.4.tgz",
-      "integrity": "sha512-YiHwDhSvCiItoAgsKtoLFCuakDzDsJ1DLDnSouTaTmdOcOwIkSzbLXduaQ6M5DRVhuZC/NYaaZ/mtHbWMv/S6Q==",
+      "version": "29.1.5",
+      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.1.5.tgz",
+      "integrity": "sha512-UuClSYxM7byvvYfyWdFI+/2UxMmwNyJb0NPkZPQE2hew3RurV7l7zURgOHAd/1I1ZdPpe3GUsXNXAcN8TFKSIg==",
       "dev": true,
       "dependencies": {
         "bs-logger": "0.x",
@@ -15196,9 +15181,9 @@
       }
     },
     "node_modules/uglify-js": {
-      "version": "3.17.4",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz",
-      "integrity": "sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==",
+      "version": "3.18.0",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.18.0.tgz",
+      "integrity": "sha512-SyVVbcNBCk0dzr9XL/R/ySrmYf0s372K6/hFklzgcp2lBFyXtw4I7BOdDjlLhE1aVqaI/SHWXWmYdlZxuyF38A==",
       "dev": true,
       "optional": true,
       "bin": {
@@ -15556,9 +15541,9 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.91.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz",
-      "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==",
+      "version": "5.92.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.92.0.tgz",
+      "integrity": "sha512-Bsw2X39MYIgxouNATyVpCNVWBCuUwDgWtN78g6lSdPJRLaQ/PUVm/oXcaRAyY/sMFoKFQrsPeqvTizWtq7QPCA==",
       "dev": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
@@ -15567,10 +15552,10 @@
         "@webassemblyjs/wasm-edit": "^1.12.1",
         "@webassemblyjs/wasm-parser": "^1.12.1",
         "acorn": "^8.7.1",
-        "acorn-import-assertions": "^1.9.0",
+        "acorn-import-attributes": "^1.9.5",
         "browserslist": "^4.21.10",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.16.0",
+        "enhanced-resolve": "^5.17.0",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
@@ -15971,10 +15956,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.17.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
-      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
-      "dev": true,
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
       "engines": {
         "node": ">=10.0.0"
       },
diff --git a/frontend/taipy/package-lock.json b/frontend/taipy/package-lock.json
index 26d6c16818..1720bd947e 100644
--- a/frontend/taipy/package-lock.json
+++ b/frontend/taipy/package-lock.json
@@ -497,6 +497,7 @@
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
       "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
+      "deprecated": "Use @eslint/config-array instead",
       "dev": true,
       "dependencies": {
         "@humanwhocodes/object-schema": "^2.0.2",
@@ -546,6 +547,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
       "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+      "deprecated": "Use @eslint/object-schema instead",
       "dev": true
     },
     "node_modules/@jest/schemas": {
@@ -763,18 +765,18 @@
       }
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.15.19",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.19.tgz",
-      "integrity": "sha512-tCHSi/Tomez9ERynFhZRvFO6n9ATyrPs+2N80DMDzp6xDVirbBjEwhPcE+x7Lj+nwYw0SqFkOxyvMP0irnm55w==",
+      "version": "5.15.20",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.20.tgz",
+      "integrity": "sha512-DoL2ppgldL16utL8nNyj/P12f8mCNdx/Hb/AJnX9rLY4b52hCMIx1kH83pbXQ6uMy6n54M3StmEbvSGoj2OFuA==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui-org"
       }
     },
     "node_modules/@mui/icons-material": {
-      "version": "5.15.19",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.19.tgz",
-      "integrity": "sha512-RsEiRxA5azN9b8gI7JRqekkgvxQUlitoBOtZglflb8cUDyP12/cP4gRwhb44Ea1/zwwGGjAj66ZJpGHhKfibNA==",
+      "version": "5.15.20",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.20.tgz",
+      "integrity": "sha512-oGcKmCuHaYbAAoLN67WKSXtHmEgyWcJToT1uRtmPyxMj9N5uqwc/mRtEnst4Wj/eGr+zYH2FiZQ79v9k7kSk1Q==",
       "dependencies": {
         "@babel/runtime": "^7.23.9"
       },
@@ -797,16 +799,16 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "5.15.19",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.19.tgz",
-      "integrity": "sha512-lp5xQBbcRuxNtjpWU0BWZgIrv2XLUz4RJ0RqFXBdESIsKoGCQZ6P3wwU5ZPuj5TjssNiKv9AlM+vHopRxZhvVQ==",
+      "version": "5.15.20",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.20.tgz",
+      "integrity": "sha512-tVq3l4qoXx/NxUgIx/x3lZiPn/5xDbdTE8VrLczNpfblLYZzlrbxA7kb9mI8NoBF6+w9WE9IrxWnKK5KlPI2bg==",
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "@mui/base": "5.0.0-beta.40",
-        "@mui/core-downloads-tracker": "^5.15.19",
-        "@mui/system": "^5.15.15",
+        "@mui/core-downloads-tracker": "^5.15.20",
+        "@mui/system": "^5.15.20",
         "@mui/types": "^7.2.14",
-        "@mui/utils": "^5.15.14",
+        "@mui/utils": "^5.15.20",
         "@types/react-transition-group": "^4.4.10",
         "clsx": "^2.1.0",
         "csstype": "^3.1.3",
@@ -841,12 +843,12 @@
       }
     },
     "node_modules/@mui/private-theming": {
-      "version": "5.15.14",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz",
-      "integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==",
+      "version": "5.15.20",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.20.tgz",
+      "integrity": "sha512-BK8F94AIqSrnaPYXf2KAOjGZJgWfvqAVQ2gVR3EryvQFtuBnG6RwodxrCvd3B48VuMy6Wsk897+lQMUxJyk+6g==",
       "dependencies": {
         "@babel/runtime": "^7.23.9",
-        "@mui/utils": "^5.15.14",
+        "@mui/utils": "^5.15.20",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -898,15 +900,15 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "5.15.15",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.15.tgz",
-      "integrity": "sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==",
+      "version": "5.15.20",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.20.tgz",
+      "integrity": "sha512-LoMq4IlAAhxzL2VNUDBTQxAb4chnBe8JvRINVNDiMtHE2PiPOoHlhOPutSxEbaL5mkECPVWSv6p8JEV+uykwIA==",
       "dependencies": {
         "@babel/runtime": "^7.23.9",
-        "@mui/private-theming": "^5.15.14",
+        "@mui/private-theming": "^5.15.20",
         "@mui/styled-engine": "^5.15.14",
         "@mui/types": "^7.2.14",
-        "@mui/utils": "^5.15.14",
+        "@mui/utils": "^5.15.20",
         "clsx": "^2.1.0",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
@@ -950,9 +952,9 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.15.14",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz",
-      "integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==",
+      "version": "5.15.20",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.20.tgz",
+      "integrity": "sha512-mAbYx0sovrnpAu1zHc3MDIhPqL8RPVC5W5xcO1b7PiSCJPtckIZmBkp8hefamAvUiAV8gpfMOM6Zb+eSisbI2A==",
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "@types/prop-types": "^15.7.11",
@@ -977,11 +979,11 @@
       }
     },
     "node_modules/@mui/x-date-pickers": {
-      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.6.2.tgz",
-      "integrity": "sha512-9e5qO76eLvjiEm7Yt4HNR1jqGFia7vnZYbhi4Tw/xQ32emMKYLUzXZLhQNtb1wa7SwHWxXcPJOkIEmvQgEvaqQ==",
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.7.0.tgz",
+      "integrity": "sha512-huyoA22Vi8iCkee6ro0sX7CcFIcPV/Fl7ZGWwaQC8PTAheXhz823DjMYAiwRU/imF+UFYfUInWQ4XZCIkM+2Dw==",
       "dependencies": {
-        "@babel/runtime": "^7.24.6",
+        "@babel/runtime": "^7.24.7",
         "@mui/base": "^5.0.0-beta.40",
         "@mui/system": "^5.15.15",
         "@mui/utils": "^5.15.14",
@@ -1042,11 +1044,11 @@
       }
     },
     "node_modules/@mui/x-tree-view": {
-      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-7.6.2.tgz",
-      "integrity": "sha512-0LBoKUQvMzNzJN7UmGqGV4A3NpRxB8liPrjQMfkbI6LrXBbDlqyEdJWRseK1RzxYxTfH71HqW9Z3E2wS62P1Sg==",
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-7.7.0.tgz",
+      "integrity": "sha512-kUTMS77EcNjp1iXZlm4GGFzZHnQdZJfn2L9gvxAaHtNTDSRMS61jpsCcXknIyC797dmRPdALPewNzSOfkThF+Q==",
       "dependencies": {
-        "@babel/runtime": "^7.24.6",
+        "@babel/runtime": "^7.24.7",
         "@mui/base": "^5.0.0-beta.40",
         "@mui/system": "^5.15.15",
         "@mui/utils": "^5.15.14",
@@ -1260,9 +1262,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "20.14.2",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.2.tgz",
-      "integrity": "sha512-xyu6WAMVwv6AKFLB+e/7ySZVr/0zLCzOa7rSpq6jNwpqOrUbcACDWC+53d4n2QHOnDou0fbIsg8wZu/sxrnI4Q==",
+      "version": "20.14.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.5.tgz",
+      "integrity": "sha512-aoRR+fJkZT2l0aGOJhuA8frnCSoNX6W7U2mpNq63+BxBIj5BQFt8rHy627kijCmm63ijdSdwvGgpUsU6MBsZZA==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
@@ -1311,16 +1313,16 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.12.0.tgz",
-      "integrity": "sha512-7F91fcbuDf/d3S8o21+r3ZncGIke/+eWk0EpO21LXhDfLahriZF9CGj4fbAetEjlaBdjdSm9a6VeXbpbT6Z40Q==",
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.13.1.tgz",
+      "integrity": "sha512-kZqi+WZQaZfPKnsflLJQCz6Ze9FFSMfXrrIOcyargekQxG37ES7DJNpJUE9Q/X5n3yTIP/WPutVNzgknQ7biLg==",
       "dev": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "7.12.0",
-        "@typescript-eslint/type-utils": "7.12.0",
-        "@typescript-eslint/utils": "7.12.0",
-        "@typescript-eslint/visitor-keys": "7.12.0",
+        "@typescript-eslint/scope-manager": "7.13.1",
+        "@typescript-eslint/type-utils": "7.13.1",
+        "@typescript-eslint/utils": "7.13.1",
+        "@typescript-eslint/visitor-keys": "7.13.1",
         "graphemer": "^1.4.0",
         "ignore": "^5.3.1",
         "natural-compare": "^1.4.0",
@@ -1344,15 +1346,15 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.12.0.tgz",
-      "integrity": "sha512-dm/J2UDY3oV3TKius2OUZIFHsomQmpHtsV0FTh1WO8EKgHLQ1QCADUqscPgTpU+ih1e21FQSRjXckHn3txn6kQ==",
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.13.1.tgz",
+      "integrity": "sha512-1ELDPlnLvDQ5ybTSrMhRTFDfOQEOXNM+eP+3HT/Yq7ruWpciQw+Avi73pdEbA4SooCawEWo3dtYbF68gN7Ed1A==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "7.12.0",
-        "@typescript-eslint/types": "7.12.0",
-        "@typescript-eslint/typescript-estree": "7.12.0",
-        "@typescript-eslint/visitor-keys": "7.12.0",
+        "@typescript-eslint/scope-manager": "7.13.1",
+        "@typescript-eslint/types": "7.13.1",
+        "@typescript-eslint/typescript-estree": "7.13.1",
+        "@typescript-eslint/visitor-keys": "7.13.1",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -1372,13 +1374,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.12.0.tgz",
-      "integrity": "sha512-itF1pTnN6F3unPak+kutH9raIkL3lhH1YRPGgt7QQOh43DQKVJXmWkpb+vpc/TiDHs6RSd9CTbDsc/Y+Ygq7kg==",
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.13.1.tgz",
+      "integrity": "sha512-adbXNVEs6GmbzaCpymHQ0MB6E4TqoiVbC0iqG3uijR8ZYfpAXMGttouQzF4Oat3P2GxDVIrg7bMI/P65LiQZdg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "7.12.0",
-        "@typescript-eslint/visitor-keys": "7.12.0"
+        "@typescript-eslint/types": "7.13.1",
+        "@typescript-eslint/visitor-keys": "7.13.1"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -1389,13 +1391,13 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.12.0.tgz",
-      "integrity": "sha512-lib96tyRtMhLxwauDWUp/uW3FMhLA6D0rJ8T7HmH7x23Gk1Gwwu8UZ94NMXBvOELn6flSPiBrCKlehkiXyaqwA==",
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.13.1.tgz",
+      "integrity": "sha512-aWDbLu1s9bmgPGXSzNCxELu+0+HQOapV/y+60gPXafR8e2g1Bifxzevaa+4L2ytCWm+CHqpELq4CSoN9ELiwCg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "7.12.0",
-        "@typescript-eslint/utils": "7.12.0",
+        "@typescript-eslint/typescript-estree": "7.13.1",
+        "@typescript-eslint/utils": "7.13.1",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.3.0"
       },
@@ -1416,9 +1418,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.12.0.tgz",
-      "integrity": "sha512-o+0Te6eWp2ppKY3mLCU+YA9pVJxhUJE15FV7kxuD9jgwIAa+w/ycGJBMrYDTpVGUM/tgpa9SeMOugSabWFq7bg==",
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.13.1.tgz",
+      "integrity": "sha512-7K7HMcSQIAND6RBL4kDl24sG/xKM13cA85dc7JnmQXw2cBDngg7c19B++JzvJHRG3zG36n9j1i451GBzRuHchw==",
       "dev": true,
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -1429,13 +1431,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.12.0.tgz",
-      "integrity": "sha512-5bwqLsWBULv1h6pn7cMW5dXX/Y2amRqLaKqsASVwbBHMZSnHqE/HN4vT4fE0aFsiwxYvr98kqOWh1a8ZKXalCQ==",
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.13.1.tgz",
+      "integrity": "sha512-uxNr51CMV7npU1BxZzYjoVz9iyjckBduFBP0S5sLlh1tXYzHzgZ3BR9SVsNed+LmwKrmnqN3Kdl5t7eZ5TS1Yw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "7.12.0",
-        "@typescript-eslint/visitor-keys": "7.12.0",
+        "@typescript-eslint/types": "7.13.1",
+        "@typescript-eslint/visitor-keys": "7.13.1",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -1457,15 +1459,15 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.12.0.tgz",
-      "integrity": "sha512-Y6hhwxwDx41HNpjuYswYp6gDbkiZ8Hin9Bf5aJQn1bpTs3afYY4GX+MPYxma8jtoIV2GRwTM/UJm/2uGCVv+DQ==",
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.13.1.tgz",
+      "integrity": "sha512-h5MzFBD5a/Gh/fvNdp9pTfqJAbuQC4sCN2WzuXme71lqFJsZtLbjxfSk4r3p02WIArOF9N94pdsLiGutpDbrXQ==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "7.12.0",
-        "@typescript-eslint/types": "7.12.0",
-        "@typescript-eslint/typescript-estree": "7.12.0"
+        "@typescript-eslint/scope-manager": "7.13.1",
+        "@typescript-eslint/types": "7.13.1",
+        "@typescript-eslint/typescript-estree": "7.13.1"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -1479,12 +1481,12 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.12.0.tgz",
-      "integrity": "sha512-uZk7DevrQLL3vSnfFl5bj4sL75qC9D6EdjemIdbtkuUmIheWpuiiylSY01JxJE7+zGrOWDZrp1WxOuDntvKrHQ==",
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.13.1.tgz",
+      "integrity": "sha512-k/Bfne7lrP7hcb7m9zSsgcBmo+8eicqqfNAJ7uUY+jkTFpKeH2FSkWpFRtimBxgkyvqfu9jTPRbYOvud6isdXA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "7.12.0",
+        "@typescript-eslint/types": "7.13.1",
         "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
@@ -1704,9 +1706,9 @@
       "dev": true
     },
     "node_modules/acorn": {
-      "version": "8.11.3",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
-      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz",
+      "integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -1715,10 +1717,10 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/acorn-import-assertions": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+    "node_modules/acorn-import-attributes": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
       "dev": true,
       "peerDependencies": {
         "acorn": "^8"
@@ -2031,9 +2033,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.23.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
-      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
+      "version": "4.23.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.1.tgz",
+      "integrity": "sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw==",
       "dev": true,
       "funding": [
         {
@@ -2050,10 +2052,10 @@
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001587",
-        "electron-to-chromium": "^1.4.668",
+        "caniuse-lite": "^1.0.30001629",
+        "electron-to-chromium": "^1.4.796",
         "node-releases": "^2.0.14",
-        "update-browserslist-db": "^1.0.13"
+        "update-browserslist-db": "^1.0.16"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -2096,9 +2098,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001629",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001629.tgz",
-      "integrity": "sha512-c3dl911slnQhmxUIT4HhYzT7wnBK/XYpGnYLOj4nJBaRiw52Ibe7YxlDaAeRECvA786zCuExhxIUJ2K7nHMrBw==",
+      "version": "1.0.30001636",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz",
+      "integrity": "sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==",
       "dev": true,
       "funding": [
         {
@@ -2437,9 +2439,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.794",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.794.tgz",
-      "integrity": "sha512-6FApLtsYhDCY0Vglq3AptsdxQ+PJLc6AxlAM0HjEihUAiOPPbkASEsq9gtxUeZY9o0sJIEa3WnF0vVH4VT4iug==",
+      "version": "1.4.805",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.805.tgz",
+      "integrity": "sha512-8W4UJwX/w9T0QSzINJckTKG6CYpAUTqsaWcWIsdud3I1FYJcMgW9QqT1/4CBff/pP/TihWh13OmiyY8neto6vw==",
       "dev": true
     },
     "node_modules/enhanced-resolve": {
@@ -5862,9 +5864,9 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.91.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz",
-      "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==",
+      "version": "5.92.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.92.0.tgz",
+      "integrity": "sha512-Bsw2X39MYIgxouNATyVpCNVWBCuUwDgWtN78g6lSdPJRLaQ/PUVm/oXcaRAyY/sMFoKFQrsPeqvTizWtq7QPCA==",
       "dev": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
@@ -5873,10 +5875,10 @@
         "@webassemblyjs/wasm-edit": "^1.12.1",
         "@webassemblyjs/wasm-parser": "^1.12.1",
         "acorn": "^8.7.1",
-        "acorn-import-assertions": "^1.9.0",
+        "acorn-import-attributes": "^1.9.5",
         "browserslist": "^4.21.10",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.16.0",
+        "enhanced-resolve": "^5.17.0",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
diff --git a/frontend/taipy/src/ScenarioSelector.tsx b/frontend/taipy/src/ScenarioSelector.tsx
index 2da56e6840..7d396395e8 100644
--- a/frontend/taipy/src/ScenarioSelector.tsx
+++ b/frontend/taipy/src/ScenarioSelector.tsx
@@ -99,6 +99,7 @@ interface ScenarioSelectorProps {
     sort?: string;
     updateScVars?: string;
     showSearch?: boolean;
+    creationNotAllowed?: string;
 }
 
 interface ScenarioEditDialogProps {
@@ -435,7 +436,8 @@ const ScenarioSelector = (props: ScenarioSelectorProps) => {
         multiple = false,
         updateVars = "",
         updateScVars = "",
-        showSearch = true
+        showSearch = true,
+        creationNotAllowed = "",
     } = props;
     const [open, setOpen] = useState(false);
     const [actionEdit, setActionEdit] = useState<boolean>(false);
@@ -541,9 +543,19 @@ const ScenarioSelector = (props: ScenarioSelectorProps) => {
                     showSearch={showSearch}
                 />
                 {showAddButton ? (
-                    <Button variant="outlined" onClick={onDialogOpen} fullWidth endIcon={<Add />} disabled={!active}>
-                        Add scenario
-                    </Button>
+                    <Tooltip title={creationNotAllowed ? creationNotAllowed : "Create a new Scenario"}>
+                        <span>
+                            <Button
+                                variant="outlined"
+                                onClick={onDialogOpen}
+                                fullWidth
+                                endIcon={<Add />}
+                                disabled={!active || !!creationNotAllowed}
+                            >
+                                Add scenario
+                            </Button>
+                        </span>
+                    </Tooltip>
                 ) : null}
                 <Box>{props.error}</Box>
             </Box>
diff --git a/taipy/gui_core/_GuiCoreLib.py b/taipy/gui_core/_GuiCoreLib.py
index e1716c4534..82bf0aa406 100644
--- a/taipy/gui_core/_GuiCoreLib.py
+++ b/taipy/gui_core/_GuiCoreLib.py
@@ -102,6 +102,9 @@ class _GuiCore(ElementLibrary):
                     f"{{{__CTX_VAR_NAME}.get_scenario_by_id({__SCENARIO_SELECTOR_ID_VAR}<tp:uniq:sc>)}}",
                 ),
                 "on_scenario_select": ElementProperty(PropertyType.function, f"{{{__CTX_VAR_NAME}.select_scenario}}"),
+                "creation_not_allowed": ElementProperty(
+                    PropertyType.string, f"{{{__CTX_VAR_NAME}.get_creation_reason()}}"
+                ),
                 "update_sc_vars": ElementProperty(
                     PropertyType.string,
                     f"filter={__SCENARIO_SELECTOR_FILTER_VAR}<tp:uniq:sc>;"
diff --git a/taipy/gui_core/_context.py b/taipy/gui_core/_context.py
index b4cd662223..29135cb3ba 100644
--- a/taipy/gui_core/_context.py
+++ b/taipy/gui_core/_context.py
@@ -56,6 +56,7 @@
 from taipy.core.notification.event import Event, EventOperation
 from taipy.core.notification.notifier import Notifier
 from taipy.core.submission.submission_status import SubmissionStatus
+from taipy.core.taipy import can_create
 from taipy.gui import Gui, State
 from taipy.gui._warnings import _warn
 from taipy.gui.gui import _DoNotUpdate
@@ -1104,3 +1105,6 @@ def on_dag_select(self, state: State, id: str, payload: t.Dict[str, str]):
                     _warn(f"dag.on_action(): Exception raised in '{args[1]}()' with '{args[0]}'", e)
         elif args[1]:
             _warn(f"dag.on_action(): Invalid function '{args[1]}()'.")
+
+    def get_creation_reason(self):
+        return "" if (reason := can_create()) else f"Cannot create scenario: {reason.reasons}"

From 4ad52a54010b6a4390b5246b629b33cc1a969789 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fred=20Lef=C3=A9v=C3=A8re-Laoide?=
 <90181748+FredLL-Avaiga@users.noreply.github.com>
Date: Wed, 19 Jun 2024 00:03:52 +0200
Subject: [PATCH 15/20] Bring progress up to Taipy standards (#1430)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Bring progress up to Taipy standards

* hook dependency

* fix test

---------

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>
---
 .../src/components/Taipy/Progress.spec.tsx    |  5 ++
 .../src/components/Taipy/Progress.tsx         | 60 ++++++++++++-------
 frontend/taipy-gui/src/utils/hooks.ts         |  8 +--
 taipy/gui/_renderers/factory.py               |  2 +-
 taipy/gui_core/_context.py                    |  3 +-
 tests/gui/control/test_progress.py            |  8 +--
 6 files changed, 54 insertions(+), 32 deletions(-)

diff --git a/frontend/taipy-gui/src/components/Taipy/Progress.spec.tsx b/frontend/taipy-gui/src/components/Taipy/Progress.spec.tsx
index 0a54e3bc8c..2fa6983880 100644
--- a/frontend/taipy-gui/src/components/Taipy/Progress.spec.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Progress.spec.tsx
@@ -24,6 +24,11 @@ describe("Progress component", () => {
         const elt = getByRole("progressbar");
         expect(elt).toHaveClass("MuiCircularProgress-root");
     });
+    it("uses the class", async () => {
+        const { getByRole } = render(<Progress className="taipy-progress" />);
+        const elt = getByRole("progressbar");
+        expect(elt).toHaveClass("taipy-progress");
+    });
     it("renders circular progress with value (determinate)", () => {
         const { getByRole, getByText } = render(<Progress showValue value={50} />);
         const elt = getByRole("progressbar");
diff --git a/frontend/taipy-gui/src/components/Taipy/Progress.tsx b/frontend/taipy-gui/src/components/Taipy/Progress.tsx
index d577861488..146635e5dc 100644
--- a/frontend/taipy-gui/src/components/Taipy/Progress.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Progress.tsx
@@ -18,9 +18,10 @@ import CircularProgress from "@mui/material/CircularProgress";
 import LinearProgress from "@mui/material/LinearProgress";
 import Typography from "@mui/material/Typography";
 
-import { useDynamicProperty } from "../../utils/hooks";
+import { useClassNames, useDynamicProperty } from "../../utils/hooks";
+import { TaipyBaseProps } from "./utils";
 
-interface ProgressBarProps {
+interface ProgressBarProps extends TaipyBaseProps {
     linear?: boolean; //by default - false
     showValue?: boolean; //by default - false
     value?: number; //progress value
@@ -29,10 +30,26 @@ interface ProgressBarProps {
     defaultRender?: boolean;
 }
 
+const linearSx = { display: "flex", alignItems: "center" };
+const linearPrgSx = { width: "100%", mr: 1 };
+const linearTxtSx = { minWidth: 35 };
+const circularSx = { position: "relative", display: "inline-flex" };
+const circularPrgSx = {
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    position: "absolute",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+};
+
 const Progress = (props: ProgressBarProps) => {
-    const { linear, showValue } = props;
+    const { linear = false, showValue = false } = props;
 
-    const value = useDynamicProperty(props.value, props.defaultValue, undefined);
+    const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
+    const value = useDynamicProperty(props.value, props.defaultValue, undefined, "number");
     const render = useDynamicProperty(props.render, props.defaultRender, true);
 
     if (!render) {
@@ -41,29 +58,18 @@ const Progress = (props: ProgressBarProps) => {
 
     return showValue && value !== undefined ? (
         linear ? (
-            <Box sx={{ display: "flex", alignItems: "center" }}>
-                <Box sx={{ width: "100%", mr: 1 }}>
+            <Box sx={linearSx} className={className} id={props.id}>
+                <Box sx={linearPrgSx}>
                     <LinearProgress variant="determinate" value={value} />
                 </Box>
-                <Box sx={{ minWidth: 35 }}>
+                <Box sx={linearTxtSx}>
                     <Typography variant="body2" color="text.secondary">{`${Math.round(value)}%`}</Typography>
                 </Box>
             </Box>
         ) : (
-            <Box sx={{ position: "relative", display: "inline-flex" }}>
+            <Box sx={circularSx} className={className} id={props.id}>
                 <CircularProgress variant="determinate" value={value} />
-                <Box
-                    sx={{
-                        top: 0,
-                        left: 0,
-                        bottom: 0,
-                        right: 0,
-                        position: "absolute",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                    }}
-                >
+                <Box sx={circularPrgSx}>
                     <Typography variant="caption" component="div" color="text.secondary">
                         {`${Math.round(value)}%`}
                     </Typography>
@@ -71,9 +77,19 @@ const Progress = (props: ProgressBarProps) => {
             </Box>
         )
     ) : linear ? (
-        <LinearProgress variant={value === undefined ? "indeterminate" : "determinate"} value={value} />
+        <LinearProgress
+            id={props.id}
+            variant={value === undefined ? "indeterminate" : "determinate"}
+            value={value}
+            className={className}
+        />
     ) : (
-        <CircularProgress variant={value === undefined ? "indeterminate" : "determinate"} value={value} />
+        <CircularProgress
+            id={props.id}
+            variant={value === undefined ? "indeterminate" : "determinate"}
+            value={value}
+            className={className}
+        />
     );
 };
 
diff --git a/frontend/taipy-gui/src/utils/hooks.ts b/frontend/taipy-gui/src/utils/hooks.ts
index 5d07ecdca3..3e5c4f851f 100644
--- a/frontend/taipy-gui/src/utils/hooks.ts
+++ b/frontend/taipy-gui/src/utils/hooks.ts
@@ -29,16 +29,16 @@ import { TIMEZONE_CLIENT } from "../utils";
  * @param defaultStatic - The default static value.
  * @returns The latest updated value.
  */
-export const useDynamicProperty = <T>(value: T, defaultValue: T, defaultStatic: T): T => {
+export const useDynamicProperty = <T>(value: T, defaultValue: T, defaultStatic: T, check_type?: string): T => {
     return useMemo(() => {
-        if (value !== undefined) {
+        if (value !== undefined && (!check_type || typeof value === check_type)) {
             return value;
         }
-        if (defaultValue !== undefined) {
+        if (defaultValue !== undefined && (!check_type || typeof value === check_type)) {
             return defaultValue;
         }
         return defaultStatic;
-    }, [value, defaultValue, defaultStatic]);
+    }, [value, defaultValue, defaultStatic, check_type]);
 };
 
 /**
diff --git a/taipy/gui/_renderers/factory.py b/taipy/gui/_renderers/factory.py
index 76edb4c25f..bb3a886e73 100644
--- a/taipy/gui/_renderers/factory.py
+++ b/taipy/gui/_renderers/factory.py
@@ -607,7 +607,7 @@ class _Factory:
             element_name="Progress",
             attributes=attrs,
         )
-        .set_value_and_default(var_type=PropertyType.dynamic_number)
+        .set_value_and_default(var_type=PropertyType.dynamic_number, native_type=True)
         .set_attributes(
             [
                 ("linear", PropertyType.boolean, False),
diff --git a/taipy/gui_core/_context.py b/taipy/gui_core/_context.py
index 29135cb3ba..0242d60442 100644
--- a/taipy/gui_core/_context.py
+++ b/taipy/gui_core/_context.py
@@ -210,11 +210,12 @@ def submission_status_callback(self, submission_id: t.Optional[str] = None, even
             _warn(f"Submission ({submission_id}) is not available", e)
 
         finally:
+            entity_id = submission.entity_id if submission else None
             self.gui._broadcast(
                 _GuiCoreContext._CORE_CHANGED_NAME,
                 {
                     "jobs": True,
-                    "scenario": (submission.entity_id if submission else None) or False,
+                    "scenario": entity_id or False,
                     "submission": new_status.value if new_status else None,
                 },
             )
diff --git a/tests/gui/control/test_progress.py b/tests/gui/control/test_progress.py
index 0172b1ff43..d2f1fc6a1d 100644
--- a/tests/gui/control/test_progress.py
+++ b/tests/gui/control/test_progress.py
@@ -20,7 +20,7 @@ def test_circular_progress_indeterminate_md(gui: Gui, helpers):
 
 def test_circular_progress_determinate_md(gui: Gui, helpers):
     md_string = "<|progress|value=50|show_value|>"
-    expected_list = ["<Progress", 'value="50"']
+    expected_list = ["<Progress", 'value={50.0}']
     helpers.test_control_md(gui, md_string, expected_list)
 
 
@@ -32,7 +32,7 @@ def test_linear_progress_indeterminate_md(gui: Gui, helpers):
 
 def test_linear_progress_determinate_md(gui: Gui, helpers):
     md_string = "<|progress|value=50|show_value|linear|>"
-    expected_list = ["<Progress", 'value="50"', "linear={true}"]
+    expected_list = ["<Progress", 'value={50.0}', "linear={true}"]
     helpers.test_control_md(gui, md_string, expected_list)
 
 
@@ -44,7 +44,7 @@ def test_circular_progress_indeterminate_html(gui: Gui, helpers):
 
 def test_circular_progress_determinate_html(gui: Gui, helpers):
     html_string = '<taipy:progress show_value value="50"/>'
-    expected_list = ["<Progress", 'value="50"']
+    expected_list = ["<Progress", 'value={50.0}']
     helpers.test_control_html(gui, html_string, expected_list)
 
 
@@ -56,5 +56,5 @@ def test_linear_progress_indeterminate_html(gui: Gui, helpers):
 
 def test_linear_progress_determinate_html(gui: Gui, helpers):
     html_string = '<taipy:progress linear show_value value="50"/>'
-    expected_list = ["<Progress", "linear={true}", 'value="50"']
+    expected_list = ["<Progress", "linear={true}", 'value={50.0}']
     helpers.test_control_html(gui, html_string, expected_list)

From f84824de952ad1dcbbcf143903666c8b7ed14823 Mon Sep 17 00:00:00 2001
From: namnguyen <namnguyen20999@gmail.com>
Date: Wed, 19 Jun 2024 05:43:50 +0700
Subject: [PATCH 16/20] fix hover_text + Data & Partial<Layout>

---
 .../taipy-gui/src/components/Taipy/Metric.tsx | 39 ++++++++++---------
 taipy/gui/_renderers/factory.py               |  1 +
 taipy/gui/viselements.json                    | 16 +++++---
 3 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/frontend/taipy-gui/src/components/Taipy/Metric.tsx b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
index 818612432e..6f8c64eef4 100644
--- a/frontend/taipy-gui/src/components/Taipy/Metric.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
@@ -12,7 +12,7 @@
  */
 
 import React, {CSSProperties, lazy, Suspense, useMemo} from 'react';
-import {Data} from "plotly.js";
+import {Data, Delta, Layout} from "plotly.js";
 import Box from "@mui/material/Box";
 import Skeleton from "@mui/material/Skeleton";
 import Tooltip from "@mui/material/Tooltip";
@@ -20,7 +20,7 @@ import {useTheme} from "@mui/material";
 import {useClassNames, useDynamicJsonProperty, useDynamicProperty} from "../../utils/hooks";
 import {extractPrefix, extractSuffix, sprintfToD3Converter} from "../../utils/formatConversion";
 import {TaipyBaseProps, TaipyHoverProps} from "./utils";
-import { darkThemeTemplate } from "../../themes/darkThemeTemplate";
+import {darkThemeTemplate} from "../../themes/darkThemeTemplate";
 
 const Plot = lazy(() => import("react-plotly.js"));
 
@@ -73,9 +73,6 @@ const Metric = (props: MetricProps) => {
         (delta !== undefined) && mode.push("delta");
         return [
             {
-                title: {
-                  text: props.title
-                },
                 domain: {x: [0, 1], y: [0, 1]},
                 value: value,
                 type: "indicator",
@@ -90,7 +87,7 @@ const Metric = (props: MetricProps) => {
                     prefix: extractPrefix(props.deltaFormat),
                     suffix: extractSuffix(props.deltaFormat),
                     valueformat: sprintfToD3Converter(props.deltaFormat)
-                },
+                } as Partial<Delta>,
                 gauge: {
                     axis: {
                         range: [
@@ -106,7 +103,7 @@ const Metric = (props: MetricProps) => {
                     }
                 },
             }
-        ];
+        ] as Data[];
     }, [
         props.format,
         props.deltaFormat,
@@ -148,26 +145,32 @@ const Metric = (props: MetricProps) => {
             layout.template = template;
         }
 
-        return layout
+        return {
+            title: props.title || layout.title,
+            ...layout
+        } as Partial<Layout>
     }, [
+        props.title,
         props.template,
         props.template_Dark_,
         props.template_Light_,
         theme.palette.mode,
-        baseLayout
+        baseLayout,
     ])
 
     return (
         <Box data-testid={props.testId} className={className}>
             <Tooltip title={hover || ""}>
-                <Suspense fallback={<Skeleton key="skeleton" sx={skelStyle}/>}>
-                    <Plot
-                        data={data as Data[]}
-                        layout={layout}
-                        style={style}
-                        useResizeHandler
-                    />
-                </Suspense>
+                <div>
+                    <Suspense fallback={<Skeleton key="skeleton" sx={skelStyle}/>}>
+                        <Plot
+                            data={data}
+                            layout={layout}
+                            style={style}
+                            useResizeHandler
+                        />
+                    </Suspense>
+                </div>
             </Tooltip>
         </Box>
     );
@@ -175,7 +178,7 @@ const Metric = (props: MetricProps) => {
 
 export default Metric;
 
-const { colorscale, colorway, font} = darkThemeTemplate.layout;
+const {colorscale, colorway, font} = darkThemeTemplate.layout;
 const darkTemplate = {
     layout: {
         colorscale,
diff --git a/taipy/gui/_renderers/factory.py b/taipy/gui/_renderers/factory.py
index 09a3762165..9a4c8aca78 100644
--- a/taipy/gui/_renderers/factory.py
+++ b/taipy/gui/_renderers/factory.py
@@ -373,6 +373,7 @@ class _Factory:
                 ("show_value", PropertyType.boolean, True),
                 ("format", PropertyType.string),
                 ("delta_format", PropertyType.string),
+                ("hover_text", PropertyType.dynamic_string),
                 ("template", PropertyType.dict),
                 ("template[dark]", PropertyType.dict),
                 ("template[light]", PropertyType.dict),
diff --git a/taipy/gui/viselements.json b/taipy/gui/viselements.json
index a125500a00..5495ffa9c7 100644
--- a/taipy/gui/viselements.json
+++ b/taipy/gui/viselements.json
@@ -1116,11 +1116,6 @@
                     "shared"
                 ],
                 "properties": [
-                    {
-                        "name": "title",
-                        "type": "str",
-                        "doc": "The title of the metric."
-                    },
                     {
                         "name": "value",
                         "default_property": true,
@@ -1133,6 +1128,12 @@
                         "type": "str",
                         "doc": "The type of the gauge.<br/>Possible values are:\n<ul>\n<li>\"none\"</li>\n<li>\"circular\"</li>\n<li>\"linear\"</li></ul>."
                     },
+                    {
+                        "name": "title",
+                        "default_value": "None",
+                        "type": "str",
+                        "doc": "The title of the metric."
+                    },
                     {
                         "name": "min",
                         "type": "int|float",
@@ -1197,6 +1198,11 @@
                         "name": "template[light]",
                         "type": "dict",
                         "doc": "The Plotly <a href=\"https://plotly.com/javascript/layout-template/\">layout template</a> applied over the base template when theme is not dark."
+                    },
+                    {
+                        "name": "hover_text",
+                        "type": "dynamic(str)",
+                        "doc": "The information that is displayed when the user hovers over this element."
                     }
                 ]
             }

From 82c8f7f3c46bf62450b153af7defd2bfe37a3a04 Mon Sep 17 00:00:00 2001
From: namnguyen <namnguyen20999@gmail.com>
Date: Wed, 19 Jun 2024 13:51:37 +0700
Subject: [PATCH 17/20] wrap tooltip's children with div

---
 .../taipy-gui/src/components/Taipy/Chart.tsx  | 275 +++++++++---------
 1 file changed, 139 insertions(+), 136 deletions(-)

diff --git a/frontend/taipy-gui/src/components/Taipy/Chart.tsx b/frontend/taipy-gui/src/components/Taipy/Chart.tsx
index 3a0c697be4..ecf338854e 100644
--- a/frontend/taipy-gui/src/components/Taipy/Chart.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Chart.tsx
@@ -11,7 +11,7 @@
  * specific language governing permissions and limitations under the License.
  */
 
-import React, { CSSProperties, useCallback, useEffect, useMemo, useRef, useState, lazy, Suspense } from "react";
+import React, {CSSProperties, useCallback, useEffect, useMemo, useRef, useState, lazy, Suspense} from "react";
 import {
     Config,
     Data,
@@ -26,15 +26,15 @@ import {
 import Skeleton from "@mui/material/Skeleton";
 import Box from "@mui/material/Box";
 import Tooltip from "@mui/material/Tooltip";
-import { useTheme } from "@mui/material";
+import {useTheme} from "@mui/material";
 
-import { getArrayValue, getUpdateVar, TaipyActiveProps, TaipyChangeProps } from "./utils";
+import {getArrayValue, getUpdateVar, TaipyActiveProps, TaipyChangeProps} from "./utils";
 import {
     createRequestChartUpdateAction,
     createSendActionNameAction,
     createSendUpdateAction,
 } from "../../context/taipyReducers";
-import { ColumnDesc } from "./tableUtils";
+import {ColumnDesc} from "./tableUtils";
 import {
     useClassNames,
     useDispatch,
@@ -43,7 +43,7 @@ import {
     useDynamicProperty,
     useModule,
 } from "../../utils/hooks";
-import { darkThemeTemplate } from "../../themes/darkThemeTemplate";
+import {darkThemeTemplate} from "../../themes/darkThemeTemplate";
 
 const Plot = lazy(() => import("react-plotly.js"));
 
@@ -91,7 +91,7 @@ interface ChartConfig {
 
 export type TraceValueType = Record<string, (string | number)[]>;
 
-const defaultStyle = { position: "relative", display: "inline-block" };
+const defaultStyle = {position: "relative", display: "inline-block"};
 
 const indexedData = /^(\d+)\/(.*)/;
 
@@ -105,7 +105,7 @@ const getColNameFromIndexed = (colName: string): string => {
     return colName;
 };
 
-const getValue = <T,>(
+const getValue = <T, >(
     values: TraceValueType | undefined,
     arr: T[],
     idx: number,
@@ -150,21 +150,21 @@ const getDecimatorsPayload = (
 ) => {
     return decimators
         ? {
-              width: plotDiv?.clientWidth,
-              height: plotDiv?.clientHeight,
-              decimators: decimators.map((d, i) =>
-                  d
-                      ? {
-                            decimator: d,
-                            xAxis: getAxis(traces, i, columns, 0),
-                            yAxis: getAxis(traces, i, columns, 1),
-                            zAxis: getAxis(traces, i, columns, 2),
-                            chartMode: modes[i],
-                        }
-                      : undefined
-              ),
-              relayoutData: relayoutData,
-          }
+            width: plotDiv?.clientWidth,
+            height: plotDiv?.clientHeight,
+            decimators: decimators.map((d, i) =>
+                d
+                    ? {
+                        decimator: d,
+                        xAxis: getAxis(traces, i, columns, 0),
+                        yAxis: getAxis(traces, i, columns, 1),
+                        zAxis: getAxis(traces, i, columns, 2),
+                        chartMode: modes[i],
+                    }
+                    : undefined
+            ),
+            relayoutData: relayoutData,
+        }
         : undefined;
 };
 
@@ -177,6 +177,7 @@ const isOnClick = (types: string[]) => (types?.length ? types.every((t) => t ===
 interface WithpointNumbers {
     pointNumbers: number[];
 }
+
 const getPlotIndex = (pt: PlotDatum) =>
     pt.pointIndex === undefined
         ? pt.pointNumber === undefined
@@ -223,7 +224,7 @@ const TaipyPlotlyButtons: ModeBarButtonAny[] = [
             if (!div) {
                 return;
             }
-            const { height } = gd.dataset;
+            const {height} = gd.dataset;
             if (!height) {
                 gd.setAttribute("data-height", getComputedStyle(div).height);
             }
@@ -341,7 +342,7 @@ const Chart = (props: ChartProp) => {
     useDispatchRequestUpdateOnFirstRender(dispatch, id, module, updateVars);
 
     const layout = useMemo(() => {
-        const layout = { ...baseLayout };
+        const layout = {...baseLayout};
         let template = undefined;
         try {
             const tpl = props.template && JSON.parse(props.template);
@@ -351,7 +352,7 @@ const Chart = (props: ChartProp) => {
                         ? JSON.parse(props.template_Dark_)
                         : darkThemeTemplate
                     : props.template_Light_ && JSON.parse(props.template_Light_);
-            template = tpl ? (tplTheme ? { ...tpl, ...tplTheme } : tpl) : tplTheme ? tplTheme : undefined;
+            template = tpl ? (tplTheme ? {...tpl, ...tplTheme} : tpl) : tplTheme ? tplTheme : undefined;
         } catch (e) {
             console.info(`Error while parsing Chart.template\n${(e as Error).message || e}`);
         }
@@ -401,11 +402,11 @@ const Chart = (props: ChartProp) => {
     const style = useMemo(
         () =>
             height === undefined
-                ? ({ ...defaultStyle, width: width } as CSSProperties)
-                : ({ ...defaultStyle, width: width, height: height } as CSSProperties),
+                ? ({...defaultStyle, width: width} as CSSProperties)
+                : ({...defaultStyle, width: width, height: height} as CSSProperties),
         [width, height]
     );
-    const skelStyle = useMemo(() => ({ ...style, minHeight: "7em" }), [style]);
+    const skelStyle = useMemo(() => ({...style, minHeight: "7em"}), [style]);
 
     const dataPl = useMemo(() => {
         if (props.figure) {
@@ -417,83 +418,83 @@ const Chart = (props: ChartProp) => {
         const datum = data[dataKey];
         lastDataPl.current = datum
             ? config.traces.map((trace, idx) => {
-                  const ret = {
-                      ...getArrayValue(config.options, idx, {}),
-                      type: config.types[idx],
-                      mode: config.modes[idx],
-                      name:
-                          getArrayValue(config.names, idx) ||
-                          (config.columns[trace[1]] ? getColNameFromIndexed(config.columns[trace[1]].dfid) : undefined),
-                  } as Record<string, unknown>;
-                  ret.marker = { ...getArrayValue(config.markers, idx, ret.marker || {}) };
-                  if (Object.keys(ret.marker as object).length) {
-                      MARKER_TO_COL.forEach((prop) => {
-                          const val = (ret.marker as Record<string, unknown>)[prop];
-                          if (typeof val === "string") {
-                              const arr = getValueFromCol(datum, val as string);
-                              if (arr.length) {
-                                  (ret.marker as Record<string, unknown>)[prop] = arr;
-                              }
-                          }
-                      });
-                  } else {
-                      delete ret.marker;
-                  }
-                  const xs = getValue(datum, trace, 0) || [];
-                  const ys = getValue(datum, trace, 1) || [];
-                  const addIndex = getArrayValue(config.addIndex, idx, true) && !ys.length;
-                  const baseX = addIndex ? Array.from(Array(xs.length).keys()) : xs;
-                  const baseY = addIndex ? xs : ys;
-                  const axisNames = config.axisNames.length > idx ? config.axisNames[idx] : ([] as string[]);
-                  if (baseX.length) {
-                      if (axisNames.length > 0) {
-                          ret[axisNames[0]] = baseX;
-                      } else {
-                          ret.x = baseX;
-                      }
-                  }
-                  if (baseY.length) {
-                      if (axisNames.length > 1) {
-                          ret[axisNames[1]] = baseY;
-                      } else {
-                          ret.y = baseY;
-                      }
-                  }
-                  const baseZ = getValue(datum, trace, 2, true);
-                  if (baseZ) {
-                      if (axisNames.length > 2) {
-                          ret[axisNames[2]] = baseZ;
-                      } else {
-                          ret.z = baseZ;
-                      }
-                  }
-                  // Hack for treemap charts: create a fallback 'parents' column if needed
-                  // This works ONLY because 'parents' is the third named axis
-                  // (see __CHART_AXIS in gui/utils/chart_config_builder.py)
-                  else if (config.types[idx] === "treemap" && Array.isArray(ret.labels)) {
-                      ret.parents = Array(ret.labels.length).fill("");
-                  }
-                  // Other axis
-                  for (let i = 3; i < axisNames.length; i++) {
-                      ret[axisNames[i]] = getValue(datum, trace, i, true);
-                  }
-                  ret.text = getValue(datum, config.texts, idx, true);
-                  ret.xaxis = config.xaxis[idx];
-                  ret.yaxis = config.yaxis[idx];
-                  ret.hovertext = getValue(datum, config.labels, idx, true);
-                  const selPoints = getArrayValue(selected, idx, []);
-                  if (selPoints?.length) {
-                      ret.selectedpoints = selPoints;
-                  }
-                  ret.orientation = getArrayValue(config.orientations, idx);
-                  ret.line = getArrayValue(config.lines, idx);
-                  ret.textposition = getArrayValue(config.textAnchors, idx);
-                  const selectedMarker = getArrayValue(config.selectedMarkers, idx);
-                  if (selectedMarker) {
-                      ret.selected = { marker: selectedMarker };
-                  }
-                  return ret as Data;
-              })
+                const ret = {
+                    ...getArrayValue(config.options, idx, {}),
+                    type: config.types[idx],
+                    mode: config.modes[idx],
+                    name:
+                        getArrayValue(config.names, idx) ||
+                        (config.columns[trace[1]] ? getColNameFromIndexed(config.columns[trace[1]].dfid) : undefined),
+                } as Record<string, unknown>;
+                ret.marker = {...getArrayValue(config.markers, idx, ret.marker || {})};
+                if (Object.keys(ret.marker as object).length) {
+                    MARKER_TO_COL.forEach((prop) => {
+                        const val = (ret.marker as Record<string, unknown>)[prop];
+                        if (typeof val === "string") {
+                            const arr = getValueFromCol(datum, val as string);
+                            if (arr.length) {
+                                (ret.marker as Record<string, unknown>)[prop] = arr;
+                            }
+                        }
+                    });
+                } else {
+                    delete ret.marker;
+                }
+                const xs = getValue(datum, trace, 0) || [];
+                const ys = getValue(datum, trace, 1) || [];
+                const addIndex = getArrayValue(config.addIndex, idx, true) && !ys.length;
+                const baseX = addIndex ? Array.from(Array(xs.length).keys()) : xs;
+                const baseY = addIndex ? xs : ys;
+                const axisNames = config.axisNames.length > idx ? config.axisNames[idx] : ([] as string[]);
+                if (baseX.length) {
+                    if (axisNames.length > 0) {
+                        ret[axisNames[0]] = baseX;
+                    } else {
+                        ret.x = baseX;
+                    }
+                }
+                if (baseY.length) {
+                    if (axisNames.length > 1) {
+                        ret[axisNames[1]] = baseY;
+                    } else {
+                        ret.y = baseY;
+                    }
+                }
+                const baseZ = getValue(datum, trace, 2, true);
+                if (baseZ) {
+                    if (axisNames.length > 2) {
+                        ret[axisNames[2]] = baseZ;
+                    } else {
+                        ret.z = baseZ;
+                    }
+                }
+                    // Hack for treemap charts: create a fallback 'parents' column if needed
+                    // This works ONLY because 'parents' is the third named axis
+                // (see __CHART_AXIS in gui/utils/chart_config_builder.py)
+                else if (config.types[idx] === "treemap" && Array.isArray(ret.labels)) {
+                    ret.parents = Array(ret.labels.length).fill("");
+                }
+                // Other axis
+                for (let i = 3; i < axisNames.length; i++) {
+                    ret[axisNames[i]] = getValue(datum, trace, i, true);
+                }
+                ret.text = getValue(datum, config.texts, idx, true);
+                ret.xaxis = config.xaxis[idx];
+                ret.yaxis = config.yaxis[idx];
+                ret.hovertext = getValue(datum, config.labels, idx, true);
+                const selPoints = getArrayValue(selected, idx, []);
+                if (selPoints?.length) {
+                    ret.selectedpoints = selPoints;
+                }
+                ret.orientation = getArrayValue(config.orientations, idx);
+                ret.line = getArrayValue(config.lines, idx);
+                ret.textposition = getArrayValue(config.textAnchors, idx);
+                const selectedMarker = getArrayValue(config.selectedMarkers, idx);
+                if (selectedMarker) {
+                    ret.selected = {marker: selectedMarker};
+                }
+                return ret as Data;
+            })
             : [];
         return lastDataPl.current;
     }, [props.figure, selected, data, config, dataKey]);
@@ -522,7 +523,7 @@ const Chart = (props: ChartProp) => {
 
     const onRelayout = useCallback(
         (eventData: PlotRelayoutEvent) => {
-            onRangeChange && dispatch(createSendActionNameAction(id, module, { action: onRangeChange, ...eventData }));
+            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)
@@ -577,8 +578,8 @@ const Chart = (props: ChartProp) => {
                 ? props.figure
                     ? index
                     : data[dataKey].tp_index
-                    ? (data[dataKey].tp_index[index] as number)
-                    : index
+                        ? (data[dataKey].tp_index[index] as number)
+                        : index
                 : 0,
         [data, dataKey, props.figure]
     );
@@ -616,34 +617,36 @@ const Chart = (props: ChartProp) => {
     return render ? (
         <Box id={id} data-testid={props.testId} className={className} ref={plotRef}>
             <Tooltip title={hover || ""}>
-                <Suspense fallback={<Skeleton key="skeleton" sx={skelStyle} />}>
-                    {Array.isArray(props.figure) && props.figure.length && props.figure[0].data !== undefined ? (
-                        <Plot
-                            data={props.figure[0].data as Data[]}
-                            layout={layout}
-                            style={style}
-                            onRelayout={onRelayout}
-                            onAfterPlot={onAfterPlot}
-                            onSelected={onSelect}
-                            onDeselect={onSelect}
-                            config={plotConfig}
-                            useResizeHandler
-                        />
-                    ) : (
-                        <Plot
-                            data={dataPl}
-                            layout={layout}
-                            style={style}
-                            onRelayout={onRelayout}
-                            onAfterPlot={onAfterPlot}
-                            onSelected={isOnClick(config.types) ? undefined : onSelect}
-                            onDeselect={isOnClick(config.types) ? undefined : onSelect}
-                            onClick={isOnClick(config.types) ? onSelect : undefined}
-                            config={plotConfig}
-                            useResizeHandler
-                        />
-                    )}
-                </Suspense>
+                <div>
+                    <Suspense fallback={<Skeleton key="skeleton" sx={skelStyle}/>}>
+                        {Array.isArray(props.figure) && props.figure.length && props.figure[0].data !== undefined ? (
+                            <Plot
+                                data={props.figure[0].data as Data[]}
+                                layout={layout}
+                                style={style}
+                                onRelayout={onRelayout}
+                                onAfterPlot={onAfterPlot}
+                                onSelected={onSelect}
+                                onDeselect={onSelect}
+                                config={plotConfig}
+                                useResizeHandler
+                            />
+                        ) : (
+                            <Plot
+                                data={dataPl}
+                                layout={layout}
+                                style={style}
+                                onRelayout={onRelayout}
+                                onAfterPlot={onAfterPlot}
+                                onSelected={isOnClick(config.types) ? undefined : onSelect}
+                                onDeselect={isOnClick(config.types) ? undefined : onSelect}
+                                onClick={isOnClick(config.types) ? onSelect : undefined}
+                                config={plotConfig}
+                                useResizeHandler
+                            />
+                        )}
+                    </Suspense>
+                </div>
             </Tooltip>
         </Box>
     ) : null;

From d01ca1f143d2a65c9a4febe0365e221e88143210 Mon Sep 17 00:00:00 2001
From: namnguyen <namnguyen20999@gmail.com>
Date: Wed, 19 Jun 2024 14:18:40 +0700
Subject: [PATCH 18/20] move Tooltip outside the Box

---
 .../taipy-gui/src/components/Taipy/Chart.tsx  | 66 +++++++++----------
 .../taipy-gui/src/components/Taipy/Metric.tsx | 26 ++++----
 2 files changed, 44 insertions(+), 48 deletions(-)

diff --git a/frontend/taipy-gui/src/components/Taipy/Chart.tsx b/frontend/taipy-gui/src/components/Taipy/Chart.tsx
index ecf338854e..ef590e23e7 100644
--- a/frontend/taipy-gui/src/components/Taipy/Chart.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Chart.tsx
@@ -615,40 +615,38 @@ const Chart = (props: ChartProp) => {
     );
 
     return render ? (
-        <Box id={id} data-testid={props.testId} className={className} ref={plotRef}>
-            <Tooltip title={hover || ""}>
-                <div>
-                    <Suspense fallback={<Skeleton key="skeleton" sx={skelStyle}/>}>
-                        {Array.isArray(props.figure) && props.figure.length && props.figure[0].data !== undefined ? (
-                            <Plot
-                                data={props.figure[0].data as Data[]}
-                                layout={layout}
-                                style={style}
-                                onRelayout={onRelayout}
-                                onAfterPlot={onAfterPlot}
-                                onSelected={onSelect}
-                                onDeselect={onSelect}
-                                config={plotConfig}
-                                useResizeHandler
-                            />
-                        ) : (
-                            <Plot
-                                data={dataPl}
-                                layout={layout}
-                                style={style}
-                                onRelayout={onRelayout}
-                                onAfterPlot={onAfterPlot}
-                                onSelected={isOnClick(config.types) ? undefined : onSelect}
-                                onDeselect={isOnClick(config.types) ? undefined : onSelect}
-                                onClick={isOnClick(config.types) ? onSelect : undefined}
-                                config={plotConfig}
-                                useResizeHandler
-                            />
-                        )}
-                    </Suspense>
-                </div>
-            </Tooltip>
-        </Box>
+        <Tooltip title={hover || ""}>
+            <Box id={id} data-testid={props.testId} className={className} ref={plotRef}>
+                <Suspense fallback={<Skeleton key="skeleton" sx={skelStyle}/>}>
+                    {Array.isArray(props.figure) && props.figure.length && props.figure[0].data !== undefined ? (
+                        <Plot
+                            data={props.figure[0].data as Data[]}
+                            layout={layout}
+                            style={style}
+                            onRelayout={onRelayout}
+                            onAfterPlot={onAfterPlot}
+                            onSelected={onSelect}
+                            onDeselect={onSelect}
+                            config={plotConfig}
+                            useResizeHandler
+                        />
+                    ) : (
+                        <Plot
+                            data={dataPl}
+                            layout={layout}
+                            style={style}
+                            onRelayout={onRelayout}
+                            onAfterPlot={onAfterPlot}
+                            onSelected={isOnClick(config.types) ? undefined : onSelect}
+                            onDeselect={isOnClick(config.types) ? undefined : onSelect}
+                            onClick={isOnClick(config.types) ? onSelect : undefined}
+                            config={plotConfig}
+                            useResizeHandler
+                        />
+                    )}
+                </Suspense>
+            </Box>
+        </Tooltip>
     ) : null;
 };
 
diff --git a/frontend/taipy-gui/src/components/Taipy/Metric.tsx b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
index 6f8c64eef4..f049082965 100644
--- a/frontend/taipy-gui/src/components/Taipy/Metric.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
@@ -159,20 +159,18 @@ const Metric = (props: MetricProps) => {
     ])
 
     return (
-        <Box data-testid={props.testId} className={className}>
-            <Tooltip title={hover || ""}>
-                <div>
-                    <Suspense fallback={<Skeleton key="skeleton" sx={skelStyle}/>}>
-                        <Plot
-                            data={data}
-                            layout={layout}
-                            style={style}
-                            useResizeHandler
-                        />
-                    </Suspense>
-                </div>
-            </Tooltip>
-        </Box>
+        <Tooltip title={hover || ""}>
+            <Box data-testid={props.testId} className={className}>
+                <Suspense fallback={<Skeleton key="skeleton" sx={skelStyle}/>}>
+                    <Plot
+                        data={data}
+                        layout={layout}
+                        style={style}
+                        useResizeHandler
+                    />
+                </Suspense>
+            </Box>
+        </Tooltip>
     );
 }
 

From cc67c5bd4fc565e2b576f065e3e68d945a5ed060 Mon Sep 17 00:00:00 2001
From: namnguyen <namnguyen20999@gmail.com>
Date: Wed, 19 Jun 2024 16:25:23 +0700
Subject: [PATCH 19/20] update title

---
 frontend/taipy-gui/src/components/Taipy/Metric.tsx | 11 ++++++-----
 taipy/gui/viselements.json                         |  5 -----
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/frontend/taipy-gui/src/components/Taipy/Metric.tsx b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
index f049082965..2436b537be 100644
--- a/frontend/taipy-gui/src/components/Taipy/Metric.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
@@ -50,7 +50,7 @@ interface MetricProps extends TaipyBaseProps, TaipyHoverProps {
     template_Light_?: string;
 }
 
-const emptyLayout = {} as Record<string, Record<string, unknown>>;
+const emptyLayout = {} as Partial<Layout>;
 const defaultStyle = {position: "relative", display: "inline-block"};
 
 const Metric = (props: MetricProps) => {
@@ -145,10 +145,11 @@ const Metric = (props: MetricProps) => {
             layout.template = template;
         }
 
-        return {
-            title: props.title || layout.title,
-            ...layout
-        } as Partial<Layout>
+        if (props.title) {
+            layout.title = props.title;
+        }
+
+        return layout as Partial<Layout>;
     }, [
         props.title,
         props.template,
diff --git a/taipy/gui/viselements.json b/taipy/gui/viselements.json
index 5495ffa9c7..27f3cec165 100644
--- a/taipy/gui/viselements.json
+++ b/taipy/gui/viselements.json
@@ -1198,11 +1198,6 @@
                         "name": "template[light]",
                         "type": "dict",
                         "doc": "The Plotly <a href=\"https://plotly.com/javascript/layout-template/\">layout template</a> applied over the base template when theme is not dark."
-                    },
-                    {
-                        "name": "hover_text",
-                        "type": "dynamic(str)",
-                        "doc": "The information that is displayed when the user hovers over this element."
                     }
                 ]
             }

From 5a801cdf6c824801c41835362feaad24021f80d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fred=20Lef=C3=A9v=C3=A8re-Laoide?=
 <90181748+FredLL-Avaiga@users.noreply.github.com>
Date: Thu, 20 Jun 2024 00:04:18 +0200
Subject: [PATCH 20/20] Submission status update (#1434)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Submission status update
resolves #1419

* catch date format exception

* add tests

---------

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>
---
 frontend/taipy-gui/src/utils/index.spec.ts | 79 ++++++++++++++++------
 frontend/taipy-gui/src/utils/index.ts      | 22 +++---
 frontend/taipy/src/ScenarioViewer.tsx      |  9 ++-
 frontend/taipy/src/StatusChip.tsx          |  3 +-
 taipy/gui/_renderers/builder.py            |  1 +
 taipy/gui/_renderers/factory.py            | 27 --------
 taipy/gui_core/_context.py                 | 40 ++++++-----
 7 files changed, 99 insertions(+), 82 deletions(-)

diff --git a/frontend/taipy-gui/src/utils/index.spec.ts b/frontend/taipy-gui/src/utils/index.spec.ts
index 3de158f612..a5a07a51e1 100644
--- a/frontend/taipy-gui/src/utils/index.spec.ts
+++ b/frontend/taipy-gui/src/utils/index.spec.ts
@@ -14,7 +14,7 @@
 import "@testing-library/jest-dom";
 import { FormatConfig } from "../context/taipyReducers";
 
-import { getNumberString } from "./index";
+import { getNumberString, getDateTimeString } from "./index";
 
 let myWarn: jest.Mock;
 
@@ -23,49 +23,88 @@ beforeEach(() => {
     console.warn = myWarn;
 })
 
-const getFormatConfig = (numberFormat?: string): FormatConfig => ({timeZone: "", date: "", dateTime: "", number: numberFormat || "", forceTZ: false})
+const getNumberFormatConfig = (numberFormat?: string): FormatConfig => ({timeZone: "", date: "", dateTime: "", number: numberFormat || "", forceTZ: false})
+const getDateFormatConfig = (dateFormat?: string): FormatConfig => ({timeZone: "", date: dateFormat || "", dateTime: dateFormat || "", number: "", forceTZ: false})
 
 describe("getNumberString", () => {
     it("returns straight", async () => {
-        expect(getNumberString(1, undefined, getFormatConfig())).toBe("1");
+        expect(getNumberString(1, undefined, getNumberFormatConfig())).toBe("1");
     });
     it("returns formatted", async () => {
-        expect(getNumberString(1, "%.1f", getFormatConfig())).toBe("1.0");
+        expect(getNumberString(1, "%.1f", getNumberFormatConfig())).toBe("1.0");
     });
     it("returns formatted float", async () => {
-        expect(getNumberString(1.0, "%.0f", getFormatConfig())).toBe("1");
+        expect(getNumberString(1.0, "%.0f", getNumberFormatConfig())).toBe("1");
     });
     it("returns default formatted", async () => {
-        expect(getNumberString(1, "", getFormatConfig("%.1f"))).toBe("1.0");
+        expect(getNumberString(1, "", getNumberFormatConfig("%.1f"))).toBe("1.0");
     });
     it("returns for non variable format", async () => {
-        expect(getNumberString(1, "toto", getFormatConfig())).toBe("toto");
+        expect(getNumberString(1, "toto", getNumberFormatConfig())).toBe("toto");
     });
     it("returns formatted over default", async () => {
-        expect(getNumberString(1, "%.2f", getFormatConfig("%.1f"))).toBe("1.00");
+        expect(getNumberString(1, "%.2f", getNumberFormatConfig("%.1f"))).toBe("1.00");
     });
     it("returns for string", async () => {
-        expect(getNumberString("null" as unknown as number, "", getFormatConfig("%.1f"))).toBe("null");
-        expect(myWarn).toHaveBeenCalledWith("getNumberString: [sprintf] expecting number but found string")
+        expect(getNumberString("null" as unknown as number, "", getNumberFormatConfig("%.1f"))).toBe("null");
+        expect(myWarn).toHaveBeenCalledWith("Invalid number format:", "[sprintf] expecting number but found string")
     });
     it("returns for object", async () => {
-        expect(getNumberString({t: 1} as unknown as number, "", getFormatConfig("%.1f"))).toBe("");
-        expect(myWarn).toHaveBeenCalledWith("getNumberString: [sprintf] expecting number but found object")
+        expect(getNumberString({t: 1} as unknown as number, "", getNumberFormatConfig("%.1f"))).toBe("");
+        expect(myWarn).toHaveBeenCalledWith("Invalid number format:", "[sprintf] expecting number but found object")
     });
     it("returns for bad format", async () => {
-        expect(getNumberString(1, "%.f", getFormatConfig())).toBe("1");
-        expect(myWarn).toHaveBeenCalledWith("getNumberString: [sprintf] unexpected placeholder")
+        expect(getNumberString(1, "%.f", getNumberFormatConfig())).toBe("1");
+        expect(myWarn).toHaveBeenCalledWith("Invalid number format:", "[sprintf] unexpected placeholder")
     });
     it("returns for null", async () => {
-        expect(getNumberString(null as unknown as number, "%2.f", getFormatConfig("%.1f"))).toBe("");
-        expect(myWarn).toHaveBeenCalledWith("getNumberString: [sprintf] unexpected placeholder")
+        expect(getNumberString(null as unknown as number, "%2.f", getNumberFormatConfig("%.1f"))).toBe("");
+        expect(myWarn).toHaveBeenCalledWith("Invalid number format:", "[sprintf] unexpected placeholder")
     });
     it("returns for undefined", async () => {
-        expect(getNumberString(undefined as unknown as number, "%2.f", getFormatConfig("%.1f"))).toBe("");
-        expect(myWarn).toHaveBeenCalledWith("getNumberString: [sprintf] unexpected placeholder")
+        expect(getNumberString(undefined as unknown as number, "%2.f", getNumberFormatConfig("%.1f"))).toBe("");
+        expect(myWarn).toHaveBeenCalledWith("Invalid number format:", "[sprintf] unexpected placeholder")
     });
     it("returns for NaN", async () => {
-        expect(getNumberString(NaN, "%2.f", getFormatConfig("%.1f"))).toBe("NaN");
-        expect(myWarn).toHaveBeenCalledWith("getNumberString: [sprintf] unexpected placeholder")
+        expect(getNumberString(NaN, "%2.f", getNumberFormatConfig("%.1f"))).toBe("NaN");
+        expect(myWarn).toHaveBeenCalledWith("Invalid number format:", "[sprintf] unexpected placeholder")
+    });
+});
+
+describe("getDateTimeString", () => {
+    it("returns straight", async () => {
+        expect(getDateTimeString("2024-10-05", undefined, getDateFormatConfig())).toContain("05 2024");
+    });
+    it("returns formatted", async () => {
+        expect(getDateTimeString("2024-10-05", "dd-MM-yy", getDateFormatConfig())).toBe("05-10-24");
+    });
+    it("returns default formatted", async () => {
+        expect(getDateTimeString("2024-10-05", "", getDateFormatConfig("dd-MM-yy"))).toBe("05-10-24");
+    });
+    it("returns formatted over default", async () => {
+        expect(getDateTimeString("2024-10-05", "dd-MM-yy", getNumberFormatConfig("yy-MM-dd"))).toBe("05-10-24");
+    });
+    it("returns for string", async () => {
+        expect(getDateTimeString("null" as unknown as string, "", getDateFormatConfig("dd-MM-yy"))).toBe("Invalid Date");
+        expect(myWarn).toHaveBeenCalledWith("Invalid date format:", "Invalid time value")
+    });
+    it("returns for object", async () => {
+        expect(getDateTimeString({t: 1} as unknown as string, "", getDateFormatConfig("dd-MM-yy"))).toBe("Invalid Date");
+        expect(myWarn).toHaveBeenCalledWith("Invalid date format:", "Invalid time value")
+    });
+    it("returns for bad format", async () => {
+        expect(getDateTimeString("2024-10-05", "D", getDateFormatConfig())).toContain("05 2024");
+        expect(myWarn).toHaveBeenCalled()
+        expect(myWarn.mock.lastCall).toHaveLength(2)
+        expect(myWarn.mock.lastCall[0]).toBe("Invalid date format:")
+        expect(myWarn.mock.lastCall[1]).toContain("Use `d` instead of `D`")
+    });
+    it("returns for null", async () => {
+        expect(getDateTimeString(null as unknown as string, "dd-MM-yy", getDateFormatConfig())).toBe("null");
+        expect(myWarn).toHaveBeenCalledWith("Invalid date format:", "Invalid time value")
+    });
+    it("returns for undefined", async () => {
+        expect(getDateTimeString(undefined as unknown as string, "dd-MM-yy", getDateFormatConfig())).toBe("null");
+        expect(myWarn).toHaveBeenCalledWith("Invalid date format:", "Invalid time value")
     });
 });
diff --git a/frontend/taipy-gui/src/utils/index.ts b/frontend/taipy-gui/src/utils/index.ts
index aff939a8c1..cd010638c5 100644
--- a/frontend/taipy-gui/src/utils/index.ts
+++ b/frontend/taipy-gui/src/utils/index.ts
@@ -105,14 +105,20 @@ export const getDateTimeString = (
     tz?: string,
     withTime: boolean = true
 ): string => {
-    if (withTime) {
-        return formatInTimeZone(
-            getDateTime(value) || "",
-            formatConf.forceTZ || !tz ? formatConf.timeZone : tz,
-            datetimeformat || formatConf.dateTime
-        );
+    const dateVal = getDateTime(value);
+    try {
+        if (withTime) {
+            return formatInTimeZone(
+                dateVal || "",
+                formatConf.forceTZ || !tz ? formatConf.timeZone : tz,
+                datetimeformat || formatConf.dateTime
+            );
+        }
+        return format(dateVal || 0, datetimeformat || formatConf.date);
+    } catch (e) {
+        console.warn("Invalid date format:", (e as Error).message || e);
+        return `${dateVal}`;
     }
-    return format(getDateTime(value) || 0, datetimeformat || formatConf.date);
 };
 
 export const getNumberString = (value: number, numberformat: string | undefined, formatConf: FormatConfig): string => {
@@ -121,7 +127,7 @@ export const getNumberString = (value: number, numberformat: string | undefined,
             ? sprintf(numberformat || formatConf.number, value)
             : value.toLocaleString();
     } catch (e) {
-        console.warn("getNumberString: " + (e as Error).message || e);
+        console.warn("Invalid number format:", (e as Error).message || e);
         return (
             (typeof value === "number" && value.toLocaleString()) ||
             (typeof value === "string" && (value as string)) ||
diff --git a/frontend/taipy/src/ScenarioViewer.tsx b/frontend/taipy/src/ScenarioViewer.tsx
index e36854070f..1daea5fd38 100644
--- a/frontend/taipy/src/ScenarioViewer.tsx
+++ b/frontend/taipy/src/ScenarioViewer.tsx
@@ -366,7 +366,6 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
             }
         }
         setValid(!!sc);
-        // setSubmissionStatus(0);
         setScenario((oldSc) => (oldSc === sc ? oldSc : sc ? (deepEqual(oldSc, sc) ? oldSc : sc) : invalidScenario));
     }, [props.scenario, props.defaultScenario]);
 
@@ -579,7 +578,7 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
     const addSequenceHandler = useCallback(() => setSequences((seq) => [...seq, ["", [], "", true]]), []);
 
     // Submission status
-    const [submissionStatus, setSubmissionStatus] = useState(0);
+    const [submissionStatus, setSubmissionStatus] = useState(-1);
 
     // on scenario change
     useEffect(() => {
@@ -594,10 +593,10 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
     useEffect(() => {
         const ids = props.coreChanged?.scenario;
         if (typeof ids === "string" ? ids === scId : Array.isArray(ids) ? ids.includes(scId) : ids) {
-            props.updateVarName && dispatch(createRequestUpdateAction(id, module, [props.updateVarName], true));
-            if (props.coreChanged?.submission !== undefined) {
+            if (typeof props.coreChanged?.submission === "number") {
                 setSubmissionStatus(props.coreChanged?.submission as number);
             }
+            props.updateVarName && dispatch(createRequestUpdateAction(id, module, [props.updateVarName], true));
         }
     }, [props.coreChanged, props.updateVarName, id, module, dispatch, scId]);
 
@@ -629,7 +628,7 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
                                         sx={ChipSx}
                                     />
                                 ) : null}
-                                {submissionStatus ? <StatusChip status={submissionStatus} sx={ChipSx} /> : null}
+                                {submissionStatus > -1 ? <StatusChip status={submissionStatus} sx={ChipSx} /> : null}
                             </Grid>
                             <Grid item>
                                 {showSubmit ? (
diff --git a/frontend/taipy/src/StatusChip.tsx b/frontend/taipy/src/StatusChip.tsx
index 96810abd9e..3ca25773f5 100644
--- a/frontend/taipy/src/StatusChip.tsx
+++ b/frontend/taipy/src/StatusChip.tsx
@@ -3,7 +3,8 @@ import { SxProps, Theme } from "@mui/material";
 import Chip from "@mui/material/Chip";
 
 export enum Status {
-    SUBMITTED = 1,
+    SUBMITTED = 0,
+    UNDEFINED = 1,
     BLOCKED = 2,
     PENDING = 3,
     RUNNING = 4,
diff --git a/taipy/gui/_renderers/builder.py b/taipy/gui/_renderers/builder.py
index 0cde9bcff1..0c254589d9 100644
--- a/taipy/gui/_renderers/builder.py
+++ b/taipy/gui/_renderers/builder.py
@@ -946,6 +946,7 @@ def set_attributes(self, attributes: t.List[tuple]):  # noqa: C901
 
             attributes (list(tuple)): The list of attributes as (property name, property type, default value).
         """
+        attributes.append(("id",)) # Every element should have an id attribute
         for attr in attributes:
             if not isinstance(attr, tuple):
                 attr = (attr,)
diff --git a/taipy/gui/_renderers/factory.py b/taipy/gui/_renderers/factory.py
index 21fedb15fe..4c8fb40d7e 100644
--- a/taipy/gui/_renderers/factory.py
+++ b/taipy/gui/_renderers/factory.py
@@ -78,7 +78,6 @@ class _Factory:
         .set_value_and_default(with_update=False)
         .set_attributes(
             [
-                ("id",),
                 ("on_action", PropertyType.function),
                 ("active", PropertyType.dynamic_boolean, True),
                 ("hover_text", PropertyType.dynamic_string),
@@ -90,7 +89,6 @@ class _Factory:
         .set_value_and_default(with_update=True, with_default=False, var_type=PropertyType.data)
         .set_attributes(
             [
-                ("id",),
                 ("on_action", PropertyType.function),
                 ("active", PropertyType.dynamic_boolean, True),
                 ("hover_text", PropertyType.dynamic_string),
@@ -107,7 +105,6 @@ class _Factory:
         .set_value_and_default(with_default=False, var_type=PropertyType.data)
         .set_attributes(
             [
-                ("id",),
                 ("title",),
                 ("width", PropertyType.string_or_number),
                 ("height", PropertyType.string_or_number),
@@ -140,7 +137,6 @@ class _Factory:
         .set_attributes(
             [
                 ("with_time", PropertyType.boolean),
-                ("id",),
                 ("active", PropertyType.dynamic_boolean, True),
                 ("editable", PropertyType.dynamic_boolean, True),
                 ("hover_text", PropertyType.dynamic_string),
@@ -160,7 +156,6 @@ class _Factory:
         .set_attributes(
             [
                 ("with_time", PropertyType.boolean),
-                ("id",),
                 ("active", PropertyType.dynamic_boolean, True),
                 ("editable", PropertyType.dynamic_boolean, True),
                 ("hover_text", PropertyType.dynamic_string),
@@ -181,7 +176,6 @@ class _Factory:
         ._set_partial()  # partial should be set before page
         .set_attributes(
             [
-                ("id",),
                 ("page",),
                 ("title",),
                 ("on_action", PropertyType.function),
@@ -201,7 +195,6 @@ class _Factory:
         ._set_partial()  # partial should be set before page
         .set_attributes(
             [
-                ("id",),
                 ("page",),
                 ("expanded", PropertyType.dynamic_boolean, True, True, False),
                 ("hover_text", PropertyType.dynamic_string),
@@ -218,7 +211,6 @@ class _Factory:
         ._set_content("content", image=False)
         .set_attributes(
             [
-                ("id",),
                 ("on_action", PropertyType.function),
                 ("active", PropertyType.dynamic_boolean, True),
                 ("render", PropertyType.dynamic_boolean, True),
@@ -238,7 +230,6 @@ class _Factory:
         ._set_file_content()
         .set_attributes(
             [
-                ("id",),
                 ("on_action", PropertyType.function),
                 ("active", PropertyType.dynamic_boolean, True),
                 ("multiple", PropertyType.boolean, False),
@@ -258,7 +249,6 @@ class _Factory:
         ._set_content("content")
         .set_attributes(
             [
-                ("id",),
                 ("on_action", PropertyType.function),
                 ("active", PropertyType.dynamic_boolean, True),
                 ("width",),
@@ -275,7 +265,6 @@ class _Factory:
         .set_value_and_default(with_update=False, native_type=True)
         .set_attributes(
             [
-                ("id",),
                 ("min", PropertyType.number),
                 ("max", PropertyType.number),
                 ("value", PropertyType.dynamic_number),
@@ -296,7 +285,6 @@ class _Factory:
         ._set_propagate()
         .set_attributes(
             [
-                ("id",),
                 ("active", PropertyType.dynamic_boolean, True),
                 ("hover_text", PropertyType.dynamic_string),
                 ("on_change", PropertyType.function),
@@ -314,7 +302,6 @@ class _Factory:
         .set_value_and_default(with_default=False)
         .set_attributes(
             [
-                ("id",),
                 ("columns[mobile]",),
                 ("gap",),
             ]
@@ -325,7 +312,6 @@ class _Factory:
         .set_value_and_default(default_val="Log-in")
         .set_attributes(
             [
-                ("id",),
                 ("message", PropertyType.dynamic_string),
                 ("on_action", PropertyType.function, "on_login"),
             ]
@@ -338,7 +324,6 @@ class _Factory:
         )
         .set_attributes(
             [
-                ("id",),
                 ("active", PropertyType.dynamic_boolean, True),
                 ("label",),
                 ("width",),
@@ -359,7 +344,6 @@ class _Factory:
         .set_value_and_default(var_type=PropertyType.dynamic_number, native_type=True)
         .set_attributes(
             [
-                ("id",),
                 ("title",),
                 ("active", PropertyType.dynamic_boolean, True),
                 ("layout", PropertyType.dynamic_dict),
@@ -383,7 +367,6 @@ class _Factory:
             gui=gui, control_type=control_type, element_name="NavBar", attributes=attrs, default_value=None
         ).set_attributes(
             [
-                ("id",),
                 ("active", PropertyType.dynamic_boolean, True),
                 ("hover_text", PropertyType.dynamic_string),
                 ("lov", PropertyType.single_lov),
@@ -401,7 +384,6 @@ class _Factory:
         ._set_propagate()
         .set_attributes(
             [
-                ("id",),
                 ("active", PropertyType.dynamic_boolean, True),
                 ("hover_text", PropertyType.dynamic_string),
                 ("on_change", PropertyType.function),
@@ -417,7 +399,6 @@ class _Factory:
         ._set_partial()  # partial should be set before page
         .set_attributes(
             [
-                ("id",),
                 ("page",),
                 ("anchor", PropertyType.string, "left"),
                 ("on_close", PropertyType.function),
@@ -436,7 +417,6 @@ class _Factory:
         ._set_partial()  # partial should be set before page
         .set_attributes(
             [
-                ("id",),
                 ("page", PropertyType.dynamic_string),
                 ("render", PropertyType.dynamic_boolean, True),
                 ("height", PropertyType.dynamic_string),
@@ -454,7 +434,6 @@ class _Factory:
                 ("filter", PropertyType.boolean),
                 ("height", PropertyType.string_or_number),
                 ("hover_text", PropertyType.dynamic_string),
-                ("id",),
                 ("value_by_id", PropertyType.boolean),
                 ("multiple", PropertyType.boolean),
                 ("width", PropertyType.string_or_number),
@@ -478,7 +457,6 @@ class _Factory:
                 ("active", PropertyType.dynamic_boolean, True),
                 ("height",),
                 ("hover_text", PropertyType.dynamic_string),
-                ("id",),
                 ("value_by_id", PropertyType.boolean),
                 ("max", PropertyType.number, 100),
                 ("min", PropertyType.number, 0),
@@ -503,7 +481,6 @@ class _Factory:
         .set_value_and_default(with_update=False)
         .set_attributes(
             [
-                ("id",),
                 ("without_close", PropertyType.boolean, False),
                 ("hover_text", PropertyType.dynamic_string),
             ]
@@ -524,7 +501,6 @@ class _Factory:
                 ("auto_loading", PropertyType.boolean),
                 ("width", PropertyType.string_or_number, "100%"),
                 ("height", PropertyType.string_or_number, "80vh"),
-                ("id",),
                 ("active", PropertyType.dynamic_boolean, True),
                 ("editable", PropertyType.dynamic_boolean, True),
                 ("on_edit", PropertyType.function),
@@ -552,7 +528,6 @@ class _Factory:
         .set_attributes(
             [
                 ("format",),
-                ("id",),
                 ("hover_text", PropertyType.dynamic_string),
                 ("raw", PropertyType.boolean, False),
                 ("mode",),
@@ -566,7 +541,6 @@ class _Factory:
             [
                 ("active", PropertyType.dynamic_boolean, True),
                 ("hover_text", PropertyType.dynamic_string),
-                ("id",),
                 ("label",),
                 ("value_by_id", PropertyType.boolean),
                 ("unselected_value", PropertyType.string, ""),
@@ -592,7 +566,6 @@ class _Factory:
                 ("filter", PropertyType.boolean),
                 ("hover_text", PropertyType.dynamic_string),
                 ("height", PropertyType.string_or_number),
-                ("id",),
                 ("value_by_id", PropertyType.boolean),
                 ("multiple", PropertyType.boolean),
                 ("width", PropertyType.string_or_number),
diff --git a/taipy/gui_core/_context.py b/taipy/gui_core/_context.py
index 0242d60442..17ebc79a7b 100644
--- a/taipy/gui_core/_context.py
+++ b/taipy/gui_core/_context.py
@@ -119,10 +119,7 @@ def process_event(self, event: Event):
                         else None
                     )
                     if sequence and hasattr(sequence, "parent_ids") and sequence.parent_ids:  # type: ignore
-                        self.gui._broadcast(
-                            _GuiCoreContext._CORE_CHANGED_NAME,
-                            {"scenario": list(sequence.parent_ids)},  # type: ignore
-                        )
+                        self.broadcast_core_changed({"scenario": list(sequence.parent_ids)})
             except Exception as e:
                 _warn(f"Access to sequence {event.entity_id} failed", e)
         elif event.entity_type == EventEntityType.JOB:
@@ -133,25 +130,26 @@ def process_event(self, event: Event):
         elif event.entity_type == EventEntityType.DATA_NODE:
             with self.lock:
                 self.data_nodes_by_owner = None
-            self.gui._broadcast(
-                _GuiCoreContext._CORE_CHANGED_NAME,
-                {"datanode": event.entity_id if event.operation != EventOperation.DELETION else True},
+            self.broadcast_core_changed(
+                {"datanode": event.entity_id if event.operation != EventOperation.DELETION else True}
             )
 
+    def broadcast_core_changed(self, payload: t.Dict[str, t.Any], client_id: t.Optional[str] = None):
+        self.gui._broadcast(_GuiCoreContext._CORE_CHANGED_NAME, payload, client_id)
+
     def scenario_refresh(self, scenario_id: t.Optional[str]):
         with self.lock:
             self.scenario_by_cycle = None
             self.data_nodes_by_owner = None
-        self.gui._broadcast(
-            _GuiCoreContext._CORE_CHANGED_NAME,
-            {"scenario": scenario_id or True},
-        )
+        self.broadcast_core_changed({"scenario": scenario_id or True})
 
     def submission_status_callback(self, submission_id: t.Optional[str] = None, event: t.Optional[Event] = None):
         if not submission_id or not is_readable(t.cast(SubmissionId, submission_id)):
             return
         submission = None
         new_status = None
+        payload: t.Optional[t.Dict[str, t.Any]] = None
+        client_id: t.Optional[str] = None
         try:
             last_status = self.client_submission.get(submission_id)
             if not last_status:
@@ -161,6 +159,7 @@ def submission_status_callback(self, submission_id: t.Optional[str] = None, even
             if not submission or not submission.entity_id:
                 return
 
+            payload = {}
             new_status = t.cast(SubmissionStatus, submission.submission_status)
 
             client_id = submission.properties.get("client_id")
@@ -176,7 +175,7 @@ def submission_status_callback(self, submission_id: t.Optional[str] = None, even
                             if job.is_pending()
                             else None
                         )
-                    self.gui._broadcast(_GuiCoreContext._CORE_CHANGED_NAME, {"tasks": running_tasks}, client_id)
+                    payload.update(tasks=running_tasks)
 
                     if last_status != new_status:
                         # callback
@@ -210,15 +209,14 @@ def submission_status_callback(self, submission_id: t.Optional[str] = None, even
             _warn(f"Submission ({submission_id}) is not available", e)
 
         finally:
-            entity_id = submission.entity_id if submission else None
-            self.gui._broadcast(
-                _GuiCoreContext._CORE_CHANGED_NAME,
-                {
-                    "jobs": True,
-                    "scenario": entity_id or False,
-                    "submission": new_status.value if new_status else None,
-                },
-            )
+            if payload is not None:
+                payload.update(jobs=True)
+                entity_id = submission.entity_id if submission else None
+                if entity_id:
+                    payload.update(scenario=entity_id)
+                    if new_status:
+                        payload.update(submission=new_status.value)
+                self.broadcast_core_changed(payload, client_id)
 
     def no_change_adapter(self, entity: t.List):
         return entity