@perses-dev/components 0.55.1 → 0.56.0-beta.1

package/dist/ThresholdsEditor/ThresholdsEditor.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -22,205 +23,371 @@ import { InfoTooltip } from "../InfoTooltip/index.js";
 import { OptionsEditorControl, OptionsEditorGroup } from "../OptionsEditorLayout/index.js";
 import { ThresholdInput } from "./ThresholdInput.js";
 const DEFAULT_STEP = 10;
-export function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMode }) {
+export function ThresholdsEditor(t0) {
+    const $ = _c(52);
+    const { thresholds, onChange, hideDefault, disablePercentMode } = t0;
     const chartsTheme = useChartsTheme();
-    const { thresholds: { defaultColor, palette } } = chartsTheme;
+    const { thresholds: t1 } = chartsTheme;
+    const { defaultColor, palette } = t1;
     const defaultThresholdColor = thresholds?.defaultColor ?? defaultColor;
     const steps = thresholds?.steps;
-    // every time a new threshold is added, we want to focus the recently added input
     const recentlyAddedInputRef = useRef(null);
     const focusRef = useRef(false);
-    useEffect(()=>{
-        if (!recentlyAddedInputRef.current || !focusRef.current) return;
-        recentlyAddedInputRef.current?.focus();
-        focusRef.current = false;
-    });
-    const handleThresholdValueChange = (e, i)=>{
-        if (thresholds !== undefined) {
-            onChange(produce(thresholds, (draft)=>{
-                const step = draft.steps?.[i];
-                if (step) {
-                    step.value = Number(e.target.value);
-                }
-            }));
-        }
-    };
-    const handleThresholdColorChange = (color, i)=>{
-        if (thresholds !== undefined) {
-            onChange(produce(thresholds, (draft)=>{
-                if (draft.steps !== undefined) {
-                    const step = draft.steps[i];
+    let t2;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t2 = ()=>{
+            if (!recentlyAddedInputRef.current || !focusRef.current) {
+                return;
+            }
+            recentlyAddedInputRef.current?.focus();
+            focusRef.current = false;
+        };
+        $[0] = t2;
+    } else {
+        t2 = $[0];
+    }
+    useEffect(t2);
+    let t3;
+    if ($[1] !== onChange || $[2] !== thresholds) {
+        t3 = (e, i)=>{
+            if (thresholds !== undefined) {
+                onChange(produce(thresholds, (draft)=>{
+                    const step = draft.steps?.[i];
                     if (step) {
-                        step.color = color;
+                        step.value = Number(e.target.value);
                     }
-                }
-            }));
-        }
-    };
-    const handleDefaultColorChange = (color)=>{
-        if (thresholds !== undefined) {
-            onChange(produce(thresholds, (draft)=>{
-                draft.defaultColor = color;
-            }));
-        } else {
-            onChange({
-                defaultColor: color
-            });
-        }
-    };
-    // sort thresholds in ascending order every time an input blurs
-    const handleThresholdBlur = ()=>{
-        if (steps !== undefined) {
-            const sortedSteps = [
-                ...steps
-            ];
-            sortedSteps.sort((a, b)=>a.value - b.value);
+                }));
+            }
+        };
+        $[1] = onChange;
+        $[2] = thresholds;
+        $[3] = t3;
+    } else {
+        t3 = $[3];
+    }
+    const handleThresholdValueChange = t3;
+    let t4;
+    if ($[4] !== onChange || $[5] !== thresholds) {
+        t4 = (color, i_0)=>{
             if (thresholds !== undefined) {
-                onChange(produce(thresholds, (draft)=>{
-                    draft.steps = sortedSteps;
+                onChange(produce(thresholds, (draft_0)=>{
+                    if (draft_0.steps !== undefined) {
+                        const step_0 = draft_0.steps[i_0];
+                        if (step_0) {
+                            step_0.color = color;
+                        }
+                    }
                 }));
             }
-        }
-    };
-    const deleteThreshold = (i)=>{
-        if (thresholds !== undefined) {
-            const updatedThresholds = produce(thresholds, (draft)=>{
-                if (draft.steps) {
-                    draft.steps.splice(i, 1);
+        };
+        $[4] = onChange;
+        $[5] = thresholds;
+        $[6] = t4;
+    } else {
+        t4 = $[6];
+    }
+    const handleThresholdColorChange = t4;
+    let t5;
+    if ($[7] !== onChange || $[8] !== thresholds) {
+        t5 = (color_0)=>{
+            if (thresholds !== undefined) {
+                onChange(produce(thresholds, (draft_1)=>{
+                    draft_1.defaultColor = color_0;
+                }));
+            } else {
+                onChange({
+                    defaultColor: color_0
+                });
+            }
+        };
+        $[7] = onChange;
+        $[8] = thresholds;
+        $[9] = t5;
+    } else {
+        t5 = $[9];
+    }
+    const handleDefaultColorChange = t5;
+    let t6;
+    if ($[10] !== onChange || $[11] !== steps || $[12] !== thresholds) {
+        t6 = ()=>{
+            if (steps !== undefined) {
+                const sortedSteps = [
+                    ...steps
+                ];
+                sortedSteps.sort(_temp);
+                if (thresholds !== undefined) {
+                    onChange(produce(thresholds, (draft_2)=>{
+                        draft_2.steps = sortedSteps;
+                    }));
                 }
-            });
-            onChange(updatedThresholds);
-        }
-    };
-    const addThresholdInput = ()=>{
-        focusRef.current = true;
-        if (thresholds === undefined) {
-            onChange({
-                steps: [
-                    {
-                        value: DEFAULT_STEP
-                    }
-                ]
-            });
-        } else if (thresholds && thresholds.steps === undefined) {
-            onChange(produce(thresholds, (draft)=>{
-                draft.steps = [
-                    {
-                        value: DEFAULT_STEP
+            }
+        };
+        $[10] = onChange;
+        $[11] = steps;
+        $[12] = thresholds;
+        $[13] = t6;
+    } else {
+        t6 = $[13];
+    }
+    const handleThresholdBlur = t6;
+    let t7;
+    if ($[14] !== onChange || $[15] !== thresholds) {
+        t7 = (i_1)=>{
+            if (thresholds !== undefined) {
+                const updatedThresholds = produce(thresholds, (draft_3)=>{
+                    if (draft_3.steps) {
+                        draft_3.steps.splice(i_1, 1);
                     }
-                ];
-            }));
-        } else {
-            onChange(produce(thresholds, (draft)=>{
-                const steps = draft.steps;
-                if (steps?.length) {
-                    const lastStep = steps[steps.length - 1];
-                    const color = palette[steps.length] ?? getRandomColor(); // we will assign color from the palette first, then generate random color
-                    steps.push({
-                        color,
-                        value: (lastStep?.value ?? 0) + DEFAULT_STEP
-                    }); // set new threshold value to last step value + 10
-                } else if (steps) {
-                    steps.push({
-                        value: DEFAULT_STEP
-                    });
+                });
+                onChange(updatedThresholds);
+            }
+        };
+        $[14] = onChange;
+        $[15] = thresholds;
+        $[16] = t7;
+    } else {
+        t7 = $[16];
+    }
+    const deleteThreshold = t7;
+    let t8;
+    if ($[17] !== onChange || $[18] !== palette || $[19] !== thresholds) {
+        t8 = ()=>{
+            focusRef.current = true;
+            if (thresholds === undefined) {
+                onChange({
+                    steps: [
+                        {
+                            value: DEFAULT_STEP
+                        }
+                    ]
+                });
+            } else {
+                if (thresholds && thresholds.steps === undefined) {
+                    onChange(produce(thresholds, _temp2));
+                } else {
+                    onChange(produce(thresholds, (draft_5)=>{
+                        const steps_0 = draft_5.steps;
+                        if (steps_0?.length) {
+                            const lastStep = steps_0[steps_0.length - 1];
+                            const color_1 = palette[steps_0.length] ?? getRandomColor();
+                            steps_0.push({
+                                color: color_1,
+                                value: (lastStep?.value ?? 0) + DEFAULT_STEP
+                            });
+                        } else {
+                            if (steps_0) {
+                                steps_0.push({
+                                    value: DEFAULT_STEP
+                                });
+                            }
+                        }
+                    }));
                 }
-            }));
-        }
-    };
-    const handleModeChange = (event, value)=>{
-        const mode = value === 'percent' ? 'percent' : undefined;
-        if (thresholds !== undefined) {
-            onChange(produce(thresholds, (draft)=>{
-                draft.mode = mode;
-            }));
-        } else {
-            onChange({
-                mode
-            });
-        }
-    };
-    return /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
-        title: "Thresholds",
-        icon: /*#__PURE__*/ _jsx(InfoTooltip, {
+            }
+        };
+        $[17] = onChange;
+        $[18] = palette;
+        $[19] = thresholds;
+        $[20] = t8;
+    } else {
+        t8 = $[20];
+    }
+    const addThresholdInput = t8;
+    let t9;
+    if ($[21] !== onChange || $[22] !== thresholds) {
+        t9 = (event, value)=>{
+            const mode = value === "percent" ? "percent" : undefined;
+            if (thresholds !== undefined) {
+                onChange(produce(thresholds, (draft_6)=>{
+                    draft_6.mode = mode;
+                }));
+            } else {
+                onChange({
+                    mode
+                });
+            }
+        };
+        $[21] = onChange;
+        $[22] = thresholds;
+        $[23] = t9;
+    } else {
+        t9 = $[23];
+    }
+    const handleModeChange = t9;
+    let t10;
+    if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+        t10 = /*#__PURE__*/ _jsx(PlusIcon, {});
+        $[24] = t10;
+    } else {
+        t10 = $[24];
+    }
+    let t11;
+    if ($[25] !== addThresholdInput) {
+        t11 = /*#__PURE__*/ _jsx(InfoTooltip, {
             description: "Add threshold",
             children: /*#__PURE__*/ _jsx(IconButton, {
                 size: "small",
                 "aria-label": "add threshold",
                 onClick: addThresholdInput,
-                children: /*#__PURE__*/ _jsx(PlusIcon, {})
+                children: t10
             })
-        }),
-        children: [
-            /*#__PURE__*/ _jsx(OptionsEditorControl, {
-                label: "Mode",
-                description: "Percentage means thresholds relative to min & max",
-                control: /*#__PURE__*/ _jsxs(ToggleButtonGroup, {
-                    exclusive: true,
-                    disabled: disablePercentMode,
-                    value: thresholds?.mode ?? 'absolute',
-                    onChange: handleModeChange,
-                    sx: {
-                        height: '36px',
-                        marginLeft: 'auto'
-                    },
-                    children: [
-                        /*#__PURE__*/ _jsx(ToggleButton, {
-                            "aria-label": "absolute",
-                            value: "absolute",
-                            sx: {
-                                fontWeight: 500
-                            },
-                            children: "Absolute"
-                        }),
-                        /*#__PURE__*/ _jsx(ToggleButton, {
-                            "aria-label": "percent",
-                            value: "percent",
-                            sx: {
-                                fontWeight: 500
-                            },
-                            children: "Percent"
-                        })
-                    ]
-                })
-            }),
-            steps && steps.map((step, i)=>/*#__PURE__*/ _jsx(ThresholdInput, {
-                    inputRef: i === steps.length - 1 ? recentlyAddedInputRef : undefined,
-                    label: `T${i + 1}`,
-                    color: step.color ?? palette[i] ?? defaultThresholdColor,
-                    value: step.value,
-                    mode: thresholds?.mode,
-                    onColorChange: (color)=>handleThresholdColorChange(color, i),
-                    onChange: (e)=>{
-                        handleThresholdValueChange(e, i);
-                    },
-                    onDelete: ()=>{
-                        deleteThreshold(i);
-                    },
-                    onBlur: handleThresholdBlur
-                }, i)).toReversed(),
-            !hideDefault && /*#__PURE__*/ _jsxs(Stack, {
-                flex: 1,
-                direction: "row",
-                alignItems: "center",
-                spacing: 1,
+        });
+        $[25] = addThresholdInput;
+        $[26] = t11;
+    } else {
+        t11 = $[26];
+    }
+    const t12 = thresholds?.mode ?? "absolute";
+    let t13;
+    if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+        t13 = {
+            height: "36px",
+            marginLeft: "auto"
+        };
+        $[27] = t13;
+    } else {
+        t13 = $[27];
+    }
+    let t14;
+    if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+        t14 = /*#__PURE__*/ _jsx(ToggleButton, {
+            "aria-label": "absolute",
+            value: "absolute",
+            sx: {
+                fontWeight: 500
+            },
+            children: "Absolute"
+        });
+        $[28] = t14;
+    } else {
+        t14 = $[28];
+    }
+    let t15;
+    if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+        t15 = /*#__PURE__*/ _jsx(ToggleButton, {
+            "aria-label": "percent",
+            value: "percent",
+            sx: {
+                fontWeight: 500
+            },
+            children: "Percent"
+        });
+        $[29] = t15;
+    } else {
+        t15 = $[29];
+    }
+    let t16;
+    if ($[30] !== disablePercentMode || $[31] !== handleModeChange || $[32] !== t12) {
+        t16 = /*#__PURE__*/ _jsx(OptionsEditorControl, {
+            label: "Mode",
+            description: "Percentage means thresholds relative to min & max",
+            control: /*#__PURE__*/ _jsxs(ToggleButtonGroup, {
+                exclusive: true,
+                disabled: disablePercentMode,
+                value: t12,
+                onChange: handleModeChange,
+                sx: t13,
                 children: [
-                    /*#__PURE__*/ _jsx(OptionsColorPicker, {
-                        label: "default",
-                        color: defaultThresholdColor,
-                        onColorChange: handleDefaultColorChange
-                    }),
-                    /*#__PURE__*/ _jsx(Typography, {
-                        children: "Default"
-                    })
+                    t14,
+                    t15
                 ]
             })
-        ]
-    });
+        });
+        $[30] = disablePercentMode;
+        $[31] = handleModeChange;
+        $[32] = t12;
+        $[33] = t16;
+    } else {
+        t16 = $[33];
+    }
+    let t17;
+    if ($[34] !== defaultThresholdColor || $[35] !== deleteThreshold || $[36] !== handleThresholdBlur || $[37] !== handleThresholdColorChange || $[38] !== handleThresholdValueChange || $[39] !== palette || $[40] !== steps || $[41] !== thresholds?.mode) {
+        t17 = steps && steps.map((step_1, i_2)=>/*#__PURE__*/ _jsx(ThresholdInput, {
+                inputRef: i_2 === steps.length - 1 ? recentlyAddedInputRef : undefined,
+                label: `T${i_2 + 1}`,
+                color: step_1.color ?? palette[i_2] ?? defaultThresholdColor,
+                value: step_1.value,
+                mode: thresholds?.mode,
+                onColorChange: (color_2)=>handleThresholdColorChange(color_2, i_2),
+                onChange: (e_0)=>{
+                    handleThresholdValueChange(e_0, i_2);
+                },
+                onDelete: ()=>{
+                    deleteThreshold(i_2);
+                },
+                onBlur: handleThresholdBlur
+            }, i_2)).toReversed();
+        $[34] = defaultThresholdColor;
+        $[35] = deleteThreshold;
+        $[36] = handleThresholdBlur;
+        $[37] = handleThresholdColorChange;
+        $[38] = handleThresholdValueChange;
+        $[39] = palette;
+        $[40] = steps;
+        $[41] = thresholds?.mode;
+        $[42] = t17;
+    } else {
+        t17 = $[42];
+    }
+    let t18;
+    if ($[43] !== defaultThresholdColor || $[44] !== handleDefaultColorChange || $[45] !== hideDefault) {
+        t18 = !hideDefault && /*#__PURE__*/ _jsxs(Stack, {
+            flex: 1,
+            direction: "row",
+            alignItems: "center",
+            spacing: 1,
+            children: [
+                /*#__PURE__*/ _jsx(OptionsColorPicker, {
+                    label: "default",
+                    color: defaultThresholdColor,
+                    onColorChange: handleDefaultColorChange
+                }),
+                /*#__PURE__*/ _jsx(Typography, {
+                    children: "Default"
+                })
+            ]
+        });
+        $[43] = defaultThresholdColor;
+        $[44] = handleDefaultColorChange;
+        $[45] = hideDefault;
+        $[46] = t18;
+    } else {
+        t18 = $[46];
+    }
+    let t19;
+    if ($[47] !== t11 || $[48] !== t16 || $[49] !== t17 || $[50] !== t18) {
+        t19 = /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
+            title: "Thresholds",
+            icon: t11,
+            children: [
+                t16,
+                t17,
+                t18
+            ]
+        });
+        $[47] = t11;
+        $[48] = t16;
+        $[49] = t17;
+        $[50] = t18;
+        $[51] = t19;
+    } else {
+        t19 = $[51];
+    }
+    return t19;
+}
+function _temp2(draft_4) {
+    draft_4.steps = [
+        {
+            value: DEFAULT_STEP
+        }
+    ];
+}
+function _temp(a, b) {
+    return a.value - b.value;
 }
 // https://www.paulirish.com/2009/random-hex-color-code-snippets/
 const getRandomColor = ()=>{
-    return '#' + Math.floor(Math.random() * 16777216).toString(16).padStart(6, '0');
+    return "#" + Math.floor(Math.random() * 16777216).toString(16).padStart(6, "0");
 };
 
 //# sourceMappingURL=ThresholdsEditor.js.map

package/dist/ThresholdsEditor/ThresholdsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdsEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { IconButton, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';\nimport { Stack } from '@mui/system';\nimport { produce } from 'immer';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport type { ReactElement } from 'react';\nimport React, { useEffect, useRef } from 'react';\n\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { InfoTooltip } from '../InfoTooltip';\nimport type { ThresholdOptions } from '../model';\nimport { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';\nimport { ThresholdInput } from './ThresholdInput';\n\nexport interface ThresholdsEditorProps {\n  onChange: (thresholds: ThresholdOptions) => void;\n  thresholds?: ThresholdOptions;\n  hideDefault?: boolean;\n  disablePercentMode?: boolean;\n}\n\nconst DEFAULT_STEP = 10;\n\nexport function ThresholdsEditor({\n  thresholds,\n  onChange,\n  hideDefault,\n  disablePercentMode,\n}: ThresholdsEditorProps): ReactElement {\n  const chartsTheme = useChartsTheme();\n  const {\n    thresholds: { defaultColor, palette },\n  } = chartsTheme;\n  const defaultThresholdColor = thresholds?.defaultColor ?? defaultColor;\n\n  const steps = thresholds?.steps;\n  // every time a new threshold is added, we want to focus the recently added input\n  const recentlyAddedInputRef = useRef<HTMLInputElement | null>(null);\n  const focusRef = useRef(false);\n  useEffect(() => {\n    if (!recentlyAddedInputRef.current || !focusRef.current) return;\n    recentlyAddedInputRef.current?.focus();\n    focusRef.current = false;\n  });\n\n  const handleThresholdValueChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          const step = draft.steps?.[i];\n          if (step) {\n            step.value = Number(e.target.value);\n          }\n        }),\n      );\n    }\n  };\n\n  const handleThresholdColorChange = (color: string, i: number): void => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          if (draft.steps !== undefined) {\n            const step = draft.steps[i];\n            if (step) {\n              step.color = color;\n            }\n          }\n        }),\n      );\n    }\n  };\n\n  const handleDefaultColorChange = (color: string): void => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.defaultColor = color;\n        }),\n      );\n    } else {\n      onChange({\n        defaultColor: color,\n      });\n    }\n  };\n\n  // sort thresholds in ascending order every time an input blurs\n  const handleThresholdBlur = (): void => {\n    if (steps !== undefined) {\n      const sortedSteps = [...steps];\n      sortedSteps.sort((a, b) => a.value - b.value);\n      if (thresholds !== undefined) {\n        onChange(\n          produce(thresholds, (draft) => {\n            draft.steps = sortedSteps;\n          }),\n        );\n      }\n    }\n  };\n\n  const deleteThreshold = (i: number): void => {\n    if (thresholds !== undefined) {\n      const updatedThresholds = produce(thresholds, (draft) => {\n        if (draft.steps) {\n          draft.steps.splice(i, 1);\n        }\n      });\n      onChange(updatedThresholds);\n    }\n  };\n\n  const addThresholdInput = (): void => {\n    focusRef.current = true;\n    if (thresholds === undefined) {\n      onChange({\n        steps: [{ value: DEFAULT_STEP }],\n      });\n    } else if (thresholds && thresholds.steps === undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.steps = [{ value: DEFAULT_STEP }];\n        }),\n      );\n    } else {\n      onChange(\n        produce(thresholds, (draft) => {\n          const steps = draft.steps;\n          if (steps?.length) {\n            const lastStep = steps[steps.length - 1];\n            const color = palette[steps.length] ?? getRandomColor(); // we will assign color from the palette first, then generate random color\n            steps.push({ color, value: (lastStep?.value ?? 0) + DEFAULT_STEP }); // set new threshold value to last step value + 10\n          } else if (steps) {\n            steps.push({ value: DEFAULT_STEP });\n          }\n        }),\n      );\n    }\n  };\n\n  const handleModeChange = (event: React.MouseEvent, value: string): void => {\n    const mode = value === 'percent' ? 'percent' : undefined;\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.mode = mode;\n        }),\n      );\n    } else {\n      onChange({ mode });\n    }\n  };\n\n  return (\n    <OptionsEditorGroup\n      title=\"Thresholds\"\n      icon={\n        <InfoTooltip description=\"Add threshold\">\n          <IconButton size=\"small\" aria-label=\"add threshold\" onClick={addThresholdInput}>\n            <PlusIcon />\n          </IconButton>\n        </InfoTooltip>\n      }\n    >\n      <OptionsEditorControl\n        label=\"Mode\"\n        description=\"Percentage means thresholds relative to min & max\"\n        control={\n          <ToggleButtonGroup\n            exclusive\n            disabled={disablePercentMode}\n            value={thresholds?.mode ?? 'absolute'}\n            onChange={handleModeChange}\n            sx={{ height: '36px', marginLeft: 'auto' }}\n          >\n            <ToggleButton aria-label=\"absolute\" value=\"absolute\" sx={{ fontWeight: 500 }}>\n              Absolute\n            </ToggleButton>\n            <ToggleButton aria-label=\"percent\" value=\"percent\" sx={{ fontWeight: 500 }}>\n              Percent\n            </ToggleButton>\n          </ToggleButtonGroup>\n        }\n      />\n      {steps &&\n        steps\n          .map((step, i) => (\n            <ThresholdInput\n              inputRef={i === steps.length - 1 ? recentlyAddedInputRef : undefined}\n              key={i}\n              label={`T${i + 1}`}\n              color={step.color ?? palette[i] ?? defaultThresholdColor}\n              value={step.value}\n              mode={thresholds?.mode}\n              onColorChange={(color) => handleThresholdColorChange(color, i)}\n              onChange={(e) => {\n                handleThresholdValueChange(e, i);\n              }}\n              onDelete={() => {\n                deleteThreshold(i);\n              }}\n              onBlur={handleThresholdBlur}\n            />\n          ))\n          .toReversed()}\n      {!hideDefault && (\n        <Stack flex={1} direction=\"row\" alignItems=\"center\" spacing={1}>\n          <OptionsColorPicker label=\"default\" color={defaultThresholdColor} onColorChange={handleDefaultColorChange} />\n          <Typography>Default</Typography>\n        </Stack>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n\n// https://www.paulirish.com/2009/random-hex-color-code-snippets/\nconst getRandomColor = (): string => {\n  return (\n    '#' +\n    Math.floor(Math.random() * 16777216)\n      .toString(16)\n      .padStart(6, '0')\n  );\n};\n"],"names":["IconButton","ToggleButton","ToggleButtonGroup","Typography","Stack","produce","PlusIcon","React","useEffect","useRef","OptionsColorPicker","useChartsTheme","InfoTooltip","OptionsEditorControl","OptionsEditorGroup","ThresholdInput","DEFAULT_STEP","ThresholdsEditor","thresholds","onChange","hideDefault","disablePercentMode","chartsTheme","defaultColor","palette","defaultThresholdColor","steps","recentlyAddedInputRef","focusRef","current","focus","handleThresholdValueChange","e","i","undefined","draft","step","value","Number","target","handleThresholdColorChange","color","handleDefaultColorChange","handleThresholdBlur","sortedSteps","sort","a","b","deleteThreshold","updatedThresholds","splice","addThresholdInput","length","lastStep","getRandomColor","push","handleModeChange","event","mode","title","icon","description","size","aria-label","onClick","label","control","exclusive","disabled","sx","height","marginLeft","fontWeight","map","inputRef","onColorChange","onDelete","onBlur","toReversed","flex","direction","alignItems","spacing","Math","floor","random","toString","padStart"],"mappings":"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"}
+{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdsEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { IconButton, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';\nimport { Stack } from '@mui/system';\nimport { produce } from 'immer';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport type { ReactElement } from 'react';\nimport React, { useEffect, useRef } from 'react';\n\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { InfoTooltip } from '../InfoTooltip';\nimport type { ThresholdOptions } from '../model';\nimport { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';\nimport { ThresholdInput } from './ThresholdInput';\n\nexport interface ThresholdsEditorProps {\n  onChange: (thresholds: ThresholdOptions) => void;\n  thresholds?: ThresholdOptions;\n  hideDefault?: boolean;\n  disablePercentMode?: boolean;\n}\n\nconst DEFAULT_STEP = 10;\n\nexport function ThresholdsEditor({\n  thresholds,\n  onChange,\n  hideDefault,\n  disablePercentMode,\n}: ThresholdsEditorProps): ReactElement {\n  const chartsTheme = useChartsTheme();\n  const {\n    thresholds: { defaultColor, palette },\n  } = chartsTheme;\n  const defaultThresholdColor = thresholds?.defaultColor ?? defaultColor;\n\n  const steps = thresholds?.steps;\n  // every time a new threshold is added, we want to focus the recently added input\n  const recentlyAddedInputRef = useRef<HTMLInputElement | null>(null);\n  const focusRef = useRef(false);\n  useEffect(() => {\n    if (!recentlyAddedInputRef.current || !focusRef.current) return;\n    recentlyAddedInputRef.current?.focus();\n    focusRef.current = false;\n  });\n\n  const handleThresholdValueChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          const step = draft.steps?.[i];\n          if (step) {\n            step.value = Number(e.target.value);\n          }\n        }),\n      );\n    }\n  };\n\n  const handleThresholdColorChange = (color: string, i: number): void => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          if (draft.steps !== undefined) {\n            const step = draft.steps[i];\n            if (step) {\n              step.color = color;\n            }\n          }\n        }),\n      );\n    }\n  };\n\n  const handleDefaultColorChange = (color: string): void => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.defaultColor = color;\n        }),\n      );\n    } else {\n      onChange({\n        defaultColor: color,\n      });\n    }\n  };\n\n  // sort thresholds in ascending order every time an input blurs\n  const handleThresholdBlur = (): void => {\n    if (steps !== undefined) {\n      const sortedSteps = [...steps];\n      sortedSteps.sort((a, b) => a.value - b.value);\n      if (thresholds !== undefined) {\n        onChange(\n          produce(thresholds, (draft) => {\n            draft.steps = sortedSteps;\n          }),\n        );\n      }\n    }\n  };\n\n  const deleteThreshold = (i: number): void => {\n    if (thresholds !== undefined) {\n      const updatedThresholds = produce(thresholds, (draft) => {\n        if (draft.steps) {\n          draft.steps.splice(i, 1);\n        }\n      });\n      onChange(updatedThresholds);\n    }\n  };\n\n  const addThresholdInput = (): void => {\n    focusRef.current = true;\n    if (thresholds === undefined) {\n      onChange({\n        steps: [{ value: DEFAULT_STEP }],\n      });\n    } else if (thresholds && thresholds.steps === undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.steps = [{ value: DEFAULT_STEP }];\n        }),\n      );\n    } else {\n      onChange(\n        produce(thresholds, (draft) => {\n          const steps = draft.steps;\n          if (steps?.length) {\n            const lastStep = steps[steps.length - 1];\n            const color = palette[steps.length] ?? getRandomColor(); // we will assign color from the palette first, then generate random color\n            steps.push({ color, value: (lastStep?.value ?? 0) + DEFAULT_STEP }); // set new threshold value to last step value + 10\n          } else if (steps) {\n            steps.push({ value: DEFAULT_STEP });\n          }\n        }),\n      );\n    }\n  };\n\n  const handleModeChange = (event: React.MouseEvent, value: string): void => {\n    const mode = value === 'percent' ? 'percent' : undefined;\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.mode = mode;\n        }),\n      );\n    } else {\n      onChange({ mode });\n    }\n  };\n\n  return (\n    <OptionsEditorGroup\n      title=\"Thresholds\"\n      icon={\n        <InfoTooltip description=\"Add threshold\">\n          <IconButton size=\"small\" aria-label=\"add threshold\" onClick={addThresholdInput}>\n            <PlusIcon />\n          </IconButton>\n        </InfoTooltip>\n      }\n    >\n      <OptionsEditorControl\n        label=\"Mode\"\n        description=\"Percentage means thresholds relative to min & max\"\n        control={\n          <ToggleButtonGroup\n            exclusive\n            disabled={disablePercentMode}\n            value={thresholds?.mode ?? 'absolute'}\n            onChange={handleModeChange}\n            sx={{ height: '36px', marginLeft: 'auto' }}\n          >\n            <ToggleButton aria-label=\"absolute\" value=\"absolute\" sx={{ fontWeight: 500 }}>\n              Absolute\n            </ToggleButton>\n            <ToggleButton aria-label=\"percent\" value=\"percent\" sx={{ fontWeight: 500 }}>\n              Percent\n            </ToggleButton>\n          </ToggleButtonGroup>\n        }\n      />\n      {steps &&\n        steps\n          .map((step, i) => (\n            <ThresholdInput\n              inputRef={i === steps.length - 1 ? recentlyAddedInputRef : undefined}\n              key={i}\n              label={`T${i + 1}`}\n              color={step.color ?? palette[i] ?? defaultThresholdColor}\n              value={step.value}\n              mode={thresholds?.mode}\n              onColorChange={(color) => handleThresholdColorChange(color, i)}\n              onChange={(e) => {\n                handleThresholdValueChange(e, i);\n              }}\n              onDelete={() => {\n                deleteThreshold(i);\n              }}\n              onBlur={handleThresholdBlur}\n            />\n          ))\n          .toReversed()}\n      {!hideDefault && (\n        <Stack flex={1} direction=\"row\" alignItems=\"center\" spacing={1}>\n          <OptionsColorPicker label=\"default\" color={defaultThresholdColor} onColorChange={handleDefaultColorChange} />\n          <Typography>Default</Typography>\n        </Stack>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n\n// https://www.paulirish.com/2009/random-hex-color-code-snippets/\nconst getRandomColor = (): string => {\n  return (\n    '#' +\n    Math.floor(Math.random() * 16777216)\n      .toString(16)\n      .padStart(6, '0')\n  );\n};\n"],"names":["IconButton","ToggleButton","ToggleButtonGroup","Typography","Stack","produce","PlusIcon","React","useEffect","useRef","OptionsColorPicker","useChartsTheme","InfoTooltip","OptionsEditorControl","OptionsEditorGroup","ThresholdInput","DEFAULT_STEP","getRandomColor","Math","floor","random","toString","padStart"],"mappings":";;AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,UAAU,EAAEC,YAAY,EAAEC,iBAAiB,EAAEC,UAAU,QAAQ,gBAAgB;AACxF,SAASC,KAAK,QAAQ,cAAc;AACpC,SAASC,OAAO,QAAQ,QAAQ;AAChC,OAAOC,cAAc,uBAAuB;AAE5C,OAAOC,SAASC,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AAEjD,SAASC,kBAAkB,QAAQ,uCAAoC;AACvE,SAASC,cAAc,QAAQ,+BAA4B;AAC3D,SAASC,WAAW,QAAQ,0BAAiB;AAE7C,SAASC,oBAAoB,EAAEC,kBAAkB,QAAQ,kCAAyB;AAClF,SAASC,cAAc,QAAQ,sBAAmB;AASlD,MAAMC,eAAe;AAErB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiMP,iEAAiE;AACjE,MAAMC,iBAAiB;IACrB,OACE,MACAC,KAAKC,KAAK,CAACD,KAAKE,MAAM,KAAK,UACxBC,QAAQ,CAAC,IACTC,QAAQ,CAAC,GAAG;AAEnB"}