Explorar el Código

manage multi trace selection when on selected variable is binded (#1354)

* manage multi trace selection when on selected variable is binded
resolves #1061

* Fab's comment

---------

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>
Fred Lefévère-Laoide hace 11 meses
padre
commit
78c2477a02
Se han modificado 1 ficheros con 21 adiciones y 10 borrados
  1. 21 10
      frontend/taipy-gui/src/components/Taipy/Chart.tsx

+ 21 - 10
frontend/taipy-gui/src/components/Taipy/Chart.tsx

@@ -236,6 +236,14 @@ const TaipyPlotlyButtons: ModeBarButtonAny[] = [
     },
     },
 ];
 ];
 
 
+const updateArrays = (sel: number[][], val: number[], idx: number) => {
+    if (idx >= sel.length || val.length !== sel[idx].length || val.some((v, i) => sel[idx][i] != v)) {
+        sel = sel.concat(); // shallow copy
+        sel[idx] = val;
+    }
+    return sel;
+};
+
 const Chart = (props: ChartProp) => {
 const Chart = (props: ChartProp) => {
     const {
     const {
         title = "",
         title = "",
@@ -286,13 +294,12 @@ const Chart = (props: ChartProp) => {
                         if (!Array.isArray(val)) {
                         if (!Array.isArray(val)) {
                             val = [];
                             val = [];
                         }
                         }
-                        if (
-                            idx >= sel.length ||
-                            val.length !== sel[idx].length ||
-                            val.some((v, i) => sel[idx][i] != v)
-                        ) {
-                            sel = sel.concat();
-                            sel[idx] = val;
+                        if (idx === 0 && val.length && Array.isArray(val[0])) {
+                            for (let i = 0; i < val.length; i++) {
+                                sel = updateArrays(sel, val[i] as unknown as number[], i);
+                            }
+                        } else {
+                            sel = updateArrays(sel, val, idx);
                         }
                         }
                     }
                     }
                 }
                 }
@@ -584,10 +591,14 @@ const Chart = (props: ChartProp) => {
                     return tr;
                     return tr;
                 }, [] as number[][]);
                 }, [] as number[][]);
                 if (traces.length) {
                 if (traces.length) {
+                    const upvars = traces.map((_, idx) => getUpdateVar(updateVars, `selected${idx}`));
+                    if (traces.length > 1 && new Set(upvars).size === 1) {
+                        dispatch(createSendUpdateAction(upvars[0], traces, module, props.onChange, propagate));
+                        return;
+                    }
                     traces.forEach((tr, idx) => {
                     traces.forEach((tr, idx) => {
-                        const upvar = getUpdateVar(updateVars, `selected${idx}`);
-                        if (upvar && tr && tr.length) {
-                            dispatch(createSendUpdateAction(upvar, tr, module, props.onChange, propagate));
+                        if (upvars[idx] && tr && tr.length) {
+                            dispatch(createSendUpdateAction(upvars[idx], tr, module, props.onChange, propagate));
                         }
                         }
                     });
                     });
                 } else if (config.traces.length === 1) {
                 } else if (config.traces.length === 1) {