diff --git a/frontend/taipy-gui/public/stylekit/controls/selector.css b/frontend/taipy-gui/public/stylekit/controls/selector.css index cdb929aca..0e56ecdc7 100644 --- a/frontend/taipy-gui/public/stylekit/controls/selector.css +++ b/frontend/taipy-gui/public/stylekit/controls/selector.css @@ -22,7 +22,7 @@ **************************************************/ .taipy-selector { - margin: 4px 0; + margin: 0; } diff --git a/frontend/taipy-gui/src/components/Taipy/Chart.tsx b/frontend/taipy-gui/src/components/Taipy/Chart.tsx index c8411cbf7..acdf28074 100644 --- a/frontend/taipy-gui/src/components/Taipy/Chart.tsx +++ b/frontend/taipy-gui/src/components/Taipy/Chart.tsx @@ -280,6 +280,11 @@ const updateArrays = (sel: number[][], val: number[], idx: number) => { return sel; }; +const getDataKey = (columns: Record, 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, {title: title || layout.title || (props.figure[0].layout as Partial).title, clickmode: "event+select"}); + return merge({}, props.figure[0].layout as Partial, layout, { + title: title || layout.title || (props.figure[0].layout as Partial).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(