Merge branch 'develop' into feature/#398-expand-exposed-type-parameter

frontend/taipy-gui/public/stylekit/controls/selector.css

@@ -22,7 +22,7 @@
 **************************************************/
 
 .taipy-selector {
-  margin: 4px 0;
+  margin: 0;
 }
 
 

frontend/taipy-gui/public/stylekit/controls/slider.css

@@ -22,5 +22,8 @@
 **************************************************/
 
 .taipy-slider {
+    display: inline-flex;
     max-width: 100%;
+    min-height: 48px;
+    align-items: center;
 }

frontend/taipy-gui/public/stylekit/controls/status.css

@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+/**************************************************************
+
+                   TAIPY STATUS
+
+***************************************************************/
+
+/*************************************************
+              OVERRIDES / NORMALIZATION
+**************************************************/
+
+.taipy-status {
+    display: inline-flex;
+    min-height: 48px;
+    padding-top: 0.5em;
+}

frontend/taipy-gui/public/stylekit/controls/toggle.css

@@ -24,6 +24,9 @@
 .taipy-toggle {
     display: inline-flex;
     z-index: 10;
+    min-height: 48px;
+    align-items: center;
+    gap: 0.3em;
 }
 
 .taipy-toggle .MuiToggleButtonGroup-root[aria-label='Theme mode'] {

frontend/taipy-gui/public/stylekit/stylekit.css

@@ -37,6 +37,7 @@
 @import 'controls/number.css';
 @import 'controls/slider.css';
 @import 'controls/selector.css';
+@import 'controls/status.css';
 @import 'controls/toggle.css';
 @import 'controls/file_download.css';
 @import 'controls/file_selector.css';

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

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

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

@@ -52,6 +52,7 @@ const verticalDivStyle: CSSProperties = {
     flexDirection: "column",
     gap: 0,
 };
+const noPaddingYSx = {py: 0};
 
 const Input = (props: TaipyInputProps) => {
     const {
@@ -300,6 +301,7 @@ const Input = (props: TaipyInputProps) => {
                                     size="small"
                                     onMouseDown={handleUpStepperMouseDown}
                                     disabled={!active}
+                                    sx={noPaddingYSx}
                                 >
                                     <ArrowDropUpIcon fontSize="inherit" />
                                 </IconButton>
@@ -308,6 +310,7 @@ const Input = (props: TaipyInputProps) => {
                                     size="small"
                                     onMouseDown={handleDownStepperMouseDown}
                                     disabled={!active}
+                                    sx={noPaddingYSx}
                                 >
                                     <ArrowDropDownIcon fontSize="inherit" />
                                 </IconButton>

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

@@ -186,7 +186,17 @@ const Selector = (props: SelectorProps) => {
         return sx;
     }, [height]);
     const controlSx = useMemo(
-        () => ({ my: 1, mx: 0, maxWidth: width, display: "flex", "& .MuiFormControl-root": { maxWidth: "unset" } }),
+        () => ({
+            my: 1,
+            mx: 0,
+            maxWidth: width,
+            display: "flex",
+            "& .MuiFormControl-root": {
+                maxWidth: "unset",
+                my: 0,
+                "& .MuiInputBase-root": { minHeight: 48, "& input": { minHeight: "unset" } },
+            },
+        }),
         [width]
     );
 

frontend/taipy-gui/src/components/Taipy/StatusList.spec.tsx

@@ -37,7 +37,7 @@ describe("StatusList Component", () => {
     it("uses the class", async () => {
         const { getByText } = render(<StatusList value={statuses} className="taipy-status" />);
         const elt = getByText("4 statuses");
-        expect(elt.parentElement).toHaveClass("taipy-status");
+        expect(elt.parentElement?.parentElement).toHaveClass("taipy-status");
     });
     it("can be opened when more than 1 status", async () => {
         const { getByTestId } = render(<StatusList value={statuses} />);
@@ -57,8 +57,8 @@ describe("StatusList Component", () => {
         const { getByTestId, getByText } = render(<StatusList value={statuses} />);
         const elt = getByTestId("ArrowDownwardIcon");
         await userEvent.click(elt);
-        const selt = getByText("info");
-        expect(selt.parentElement?.parentElement?.childElementCount).toBe(4);
+        const infoElt = getByText("info");
+        expect(infoElt.parentElement?.parentElement?.childElementCount).toBe(4);
     });
     it("hide closed statuses", async () => {
         const { getByTestId, queryAllByTestId } = render(<StatusList value={statuses} />);

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

@@ -12,6 +12,7 @@
  */
 
 import React, { MouseEvent, useCallback, useEffect, useMemo, useState } from "react";
+import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import ArrowDownward from "@mui/icons-material/ArrowDownward";
 import ArrowUpward from "@mui/icons-material/ArrowUpward";
@@ -19,7 +20,7 @@ import Tooltip from "@mui/material/Tooltip";
 import Popover, { PopoverOrigin } from "@mui/material/Popover";
 
 import Status, { StatusType } from "./Status";
-import { TaipyBaseProps, TaipyHoverProps } from "./utils";
+import { getSuffixedClassNames, TaipyBaseProps, TaipyHoverProps } from "./utils";
 import { useClassNames, useDynamicProperty } from "../../utils/hooks";
 import { getComponentClassName } from "./TaipyStyle";
 
@@ -185,11 +186,11 @@ const StatusList = (props: StatusListProps) => {
 
     return (
         <Tooltip title={hover || ""}>
-            <>
+            <Box className={`${className} ${getComponentClassName(props.children)}`}>
                 <Status
                     id={props.id}
                     value={globStatus}
-                    className={`${className} ${getComponentClassName(props.children)}`}
+                    className={getSuffixedClassNames(className, "-main")}
                     {...globalProps}
                     icon={getIcon(icons, getStatusIntValue(globStatus.status))}
                 />
@@ -204,7 +205,7 @@ const StatusList = (props: StatusListProps) => {
                                         key={getId(props.id, idx)}
                                         id={getId(props.id, idx)}
                                         value={val}
-                                        className={`${className} ${getComponentClassName(props.children)}`}
+                                        className={getSuffixedClassNames(className, `-${idx}`)}
                                         {...closeProp}
                                         icon={getIcon(icons, getStatusIntValue(val.status))}
                                     />
@@ -213,7 +214,7 @@ const StatusList = (props: StatusListProps) => {
                     </Stack>
                 </Popover>
                 {props.children}
-            </>
+            </Box>
         </Tooltip>
     );
 };