@perses-dev/components 0.50.0-rc.1 → 0.50.1

package/dist/cjs/StatChart/StatChart.js

@@ -22,22 +22,22 @@ Object.defineProperty(exports, "StatChart", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const _core = require("@perses-dev/core");
 const _material = require("@mui/material");
 const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
-const _core1 = require("echarts/core");
+const _core = require("echarts/core");
 const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _context = require("../context");
 const _EChart = require("../EChart");
 const _calculateFontSize = require("./calculateFontSize");
+const _formatStatChartValue = require("./utils/formatStatChartValue");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-(0, _core1.use)([
+(0, _core.use)([
     _charts.LineChart,
     _components.GridComponent,
     _components.DatasetComponent,
@@ -49,16 +49,12 @@ const LINE_HEIGHT = 1.2;
 const SERIES_NAME_MAX_FONT_SIZE = 30;
 const SERIES_NAME_FONT_WEIGHT = 400;
 const VALUE_FONT_WEIGHT = 700;
-function StatChart(props) {
+const StatChart = (props)=>{
     var _data_seriesData, _data_seriesData1;
-    const { width, height, data, format, color, sparkline, showSeriesName, valueFontSize } = props;
+    const { width, height, data, sparkline, showSeriesName, format, valueFontSize } = props;
     const chartsTheme = (0, _context.useChartsTheme)();
-    let formattedValue = '';
-    if (data.calculatedValue === null) {
-        formattedValue = 'null';
-    } else if (typeof data.calculatedValue === 'number') {
-        formattedValue = (0, _core.formatValue)(data.calculatedValue, format);
-    }
+    const color = data.color;
+    const formattedValue = (0, _formatStatChartValue.formatStatChartValue)(data.calculatedValue, format);
     const containerPadding = chartsTheme.container.padding.default;
     var _data_seriesData_name;
     // calculate series name font size and height
@@ -182,7 +178,7 @@ function StatChart(props) {
             })
         ]
     });
-}
+};
 const SeriesName = (0, _material.styled)(_material.Typography, {
     shouldForwardProp: (prop)=>prop !== 'padding' && prop !== 'fontSize'
 })(({ theme, padding, fontSize })=>({

package/dist/cjs/StatChart/utils/formatStatChartValue.js

@@ -0,0 +1,34 @@
+// Copyright 2024 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.
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "formatStatChartValue", {
+    enumerable: true,
+    get: function() {
+        return formatStatChartValue;
+    }
+});
+const _core = require("@perses-dev/core");
+const formatStatChartValue = (value, format)=>{
+    if (value === null) {
+        return 'null';
+    } else if (typeof value === 'number') {
+        return (0, _core.formatValue)(value, format);
+    } else if (value === undefined) {
+        return '';
+    } else {
+        return value;
+    }
+};

package/dist/cjs/StatusHistoryChart/StatusHistoryChart.js

@@ -26,10 +26,9 @@ const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _core = require("echarts/core");
 const _renderers = require("echarts/renderers");
-const _react = require("react");
-const _context = require("../context");
+const _ChartsProvider = require("../context/ChartsProvider");
+const _TimeZoneProvider = require("../context/TimeZoneProvider");
 const _EChart = require("../EChart");
-const _getcolor = require("./utils/get-color");
 const _getformattedaxislabel = require("./get-formatted-axis-label");
 const _StatusHistoryTooltip = require("./StatusHistoryTooltip");
 (0, _core.use)([
@@ -41,34 +40,19 @@ const _StatusHistoryTooltip = require("./StatusHistoryTooltip");
     _components.TooltipComponent,
     _renderers.CanvasRenderer
 ]);
-function StatusHistoryChart(props) {
-    const { height, data, xAxisCategories, yAxisCategories, timeScale } = props;
-    const { timeZone } = (0, _context.useTimeZone)();
-    const chartsTheme = (0, _context.useChartsTheme)();
+const StatusHistoryChart = (props)=>{
+    const { height, data, xAxisCategories, yAxisCategories, timeScale, colors } = props;
+    const { timeZone } = (0, _TimeZoneProvider.useTimeZone)();
+    const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
     const theme = (0, _material.useTheme)();
-    const uniqueValues = (0, _react.useMemo)(()=>[
-            ...new Set(data.map((item)=>item[2]))
-        ].filter((value)=>value !== undefined), [
-        data
-    ]);
-    // get colors from theme and generate colors if not provided
-    const pieces = (0, _react.useMemo)(()=>{
-        const themeColors = Array.isArray(chartsTheme.echartsTheme.color) ? chartsTheme.echartsTheme.color.filter((color)=>typeof color === 'string') : [];
-        return uniqueValues.map((value, index)=>({
-                value,
-                color: (0, _getcolor.getColorsForValues)(uniqueValues, themeColors)[index]
-            }));
-    }, [
-        uniqueValues,
-        chartsTheme.echartsTheme.color
-    ]);
     var _timeScale_rangeMs;
     const option = {
         tooltip: {
             appendToBody: true,
             formatter: (params)=>{
                 return (0, _StatusHistoryTooltip.generateTooltipHTML)({
-                    data: params.data,
+                    data: params.data.value,
+                    label: params.data.label,
                     marker: params.marker,
                     xAxisCategories,
                     yAxisCategories,
@@ -114,7 +98,7 @@ function StatusHistoryChart(props) {
         visualMap: {
             show: false,
             type: 'piecewise',
-            pieces
+            pieces: colors
         },
         series: [
             {
@@ -154,4 +138,4 @@ function StatusHistoryChart(props) {
             theme: chartsTheme.echartsTheme
         })
     });
-}
+};

package/dist/cjs/StatusHistoryChart/StatusHistoryTooltip.js

@@ -22,8 +22,8 @@ Object.defineProperty(exports, "generateTooltipHTML", {
 });
 const _material = require("@mui/material");
 const _utils = require("../utils");
-function generateTooltipHTML({ data, marker, xAxisCategories, yAxisCategories, theme }) {
-    const [x, y, value] = data;
+function generateTooltipHTML({ data, label, marker, xAxisCategories, yAxisCategories, theme }) {
+    const [x, y] = data;
     const xAxisLabel = xAxisCategories[x];
     const { formattedDate, formattedTime } = (0, _utils.getDateAndTime)(xAxisLabel);
     const tooltipHeader = (0, _material.css)`
@@ -47,7 +47,7 @@ function generateTooltipHTML({ data, marker, xAxisCategories, yAxisCategories, t
           <strong>${yAxisCategories[y]}</strong>
         </div>
         <div>
-          ${value}
+          ${label}
         </div>
       </div>
     </div>

package/dist/cjs/StatusHistoryChart/utils/get-color.js

@@ -21,8 +21,8 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    fallbackColor: function() {
-        return fallbackColor;
+    FALLBACK_COLOR: function() {
+        return FALLBACK_COLOR;
     },
     getColorForValue: function() {
         return getColorForValue;
@@ -37,11 +37,11 @@ _export(exports, {
         return hslToHex;
     }
 });
-const fallbackColor = '#1f77b4';
+const FALLBACK_COLOR = '#1f77b4';
 function getColorForValue(value, baseColor) {
     // Validate base color
     if (!baseColor.match(/^#[0-9A-Fa-f]{6}$/)) {
-        baseColor = fallbackColor;
+        baseColor = FALLBACK_COLOR;
     }
     try {
         const [baseH, baseS, baseL] = hexToHSL(baseColor);
@@ -66,7 +66,7 @@ function getColorForValue(value, baseColor) {
         }
         return color;
     } catch (_) {
-        return fallbackColor;
+        return FALLBACK_COLOR;
     }
 }
 function getColorsForValues(uniqueValues, themeColors) {
@@ -77,9 +77,9 @@ function getColorsForValues(uniqueValues, themeColors) {
     // Use theme colors first, then generate additional ones
     return uniqueValues.map((value, index)=>{
         if (index < themeColors.length) {
-            return themeColors[index] || fallbackColor;
+            return themeColors[index] || FALLBACK_COLOR;
         }
-        return getColorForValue(value, themeColors[0] || fallbackColor);
+        return getColorForValue(value, themeColors[0] || FALLBACK_COLOR);
     });
 }
 function hexToHSL(hex) {

package/dist/cjs/TimeSeriesTooltip/tooltip-model.js

@@ -66,9 +66,18 @@ _export(exports, {
     UNPIN_TOOLTIP_HELP_TEXT: function() {
         return UNPIN_TOOLTIP_HELP_TEXT;
     },
+    browser: function() {
+        return browser;
+    },
     defaultCursorData: function() {
         return defaultCursorData;
     },
+    pointerEventsSupported: function() {
+        return pointerEventsSupported;
+    },
+    trackingEventName: function() {
+        return trackingEventName;
+    },
     useMousePosition: function() {
         return useMousePosition;
     }
@@ -108,6 +117,14 @@ const defaultCursorData = {
     chartWidth: 0
 };
 const EMPTY_TOOLTIP_DATA = [];
+const browser = {
+    // IE 11 Trident/7.0; rv:11.0
+    ie: navigator.userAgent.match(/MSIE\s([\d.]+)/) || navigator.userAgent.match(/Trident\/.+?rv:(([\d.]+))/),
+    // IE 12 and 12+
+    edge: navigator.userAgent.match(/Edge?\/([\d.]+)/)
+};
+const pointerEventsSupported = 'onpointerdown' in window && (browser.edge || browser.ie && browser.ie[1] && +browser.ie[1] >= 11);
+const trackingEventName = pointerEventsSupported ? 'pointermove' : 'mousemove';
 const useMousePosition = ()=>{
     const [coords, setCoords] = (0, _react.useState)(null);
     (0, _react.useEffect)(()=>{
@@ -132,9 +149,12 @@ const useMousePosition = ()=>{
                 target: e.target
             });
         };
-        window.addEventListener('mousemove', setFromEvent);
+        // Devices that both enabled touch and mouse don't trigger touch events correctly
+        // which leads to missing zrender mousemove coordinates
+        // {@link https://github.com/ecomfe/zrender/blob/ae8cfaae186e6c1bf66b5dc431b2cdda5e67dacf/src/dom/HandlerProxy.ts#L423-L428 }
+        window.addEventListener(trackingEventName, setFromEvent);
         return ()=>{
-            window.removeEventListener('mousemove', setFromEvent);
+            window.removeEventListener(trackingEventName, setFromEvent);
         };
     }, []);
     return coords;

package/dist/cjs/ValueMappingEditor/ValueMappingEditor.js

@@ -0,0 +1,400 @@
+// Copyright 2024 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.
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ValueMappingEditor", {
+    enumerable: true,
+    get: function() {
+        return ValueMappingEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DeleteOutline"));
+const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
+const _OptionsColorPicker = require("../ColorPicker/OptionsColorPicker");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const ConditionEditor = ({ mapping, onChange, ...props })=>{
+    switch(mapping.kind){
+        case 'Value':
+            var _mapping_spec;
+            var _mapping_spec_value;
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                gap: 1,
+                direction: "row",
+                ...props,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                    label: "Value",
+                    placeholder: "Exact value",
+                    value: (_mapping_spec_value = (_mapping_spec = mapping.spec) === null || _mapping_spec === void 0 ? void 0 : _mapping_spec.value) !== null && _mapping_spec_value !== void 0 ? _mapping_spec_value : '',
+                    onChange: (e)=>onChange({
+                            ...mapping,
+                            spec: {
+                                ...mapping.spec,
+                                value: e.target.value
+                            }
+                        }),
+                    fullWidth: true
+                })
+            });
+        case 'Range':
+            var _mapping_spec1, _mapping_spec2;
+            var _mapping_spec_from, _mapping_spec_to;
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                gap: 1,
+                direction: "row",
+                ...props,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        label: "From",
+                        placeholder: "Start of range",
+                        value: (_mapping_spec_from = (_mapping_spec1 = mapping.spec) === null || _mapping_spec1 === void 0 ? void 0 : _mapping_spec1.from) !== null && _mapping_spec_from !== void 0 ? _mapping_spec_from : '',
+                        onChange: (e)=>onChange({
+                                ...mapping,
+                                spec: {
+                                    ...mapping.spec,
+                                    from: e.target.value === '' ? undefined : +e.target.value
+                                }
+                            }),
+                        fullWidth: true
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        label: "To",
+                        placeholder: "End of range (inclusive)",
+                        value: (_mapping_spec_to = (_mapping_spec2 = mapping.spec) === null || _mapping_spec2 === void 0 ? void 0 : _mapping_spec2.to) !== null && _mapping_spec_to !== void 0 ? _mapping_spec_to : '',
+                        onChange: (e)=>onChange({
+                                ...mapping,
+                                spec: {
+                                    ...mapping.spec,
+                                    to: e.target.value === '' ? undefined : +e.target.value
+                                }
+                            }),
+                        fullWidth: true
+                    })
+                ]
+            });
+        case 'Regex':
+            var _mapping_spec3;
+            var _mapping_spec_pattern;
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                gap: 1,
+                direction: "row",
+                ...props,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                    label: "Regular Expression",
+                    placeholder: "JavaScript regular expression",
+                    value: (_mapping_spec_pattern = (_mapping_spec3 = mapping.spec) === null || _mapping_spec3 === void 0 ? void 0 : _mapping_spec3.pattern) !== null && _mapping_spec_pattern !== void 0 ? _mapping_spec_pattern : '',
+                    onChange: (e)=>onChange({
+                            ...mapping,
+                            spec: {
+                                ...mapping.spec,
+                                pattern: e.target.value
+                            }
+                        }),
+                    fullWidth: true
+                })
+            });
+        case 'Misc':
+            var _mapping_spec4;
+            var _mapping_spec_value1;
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                gap: 1,
+                direction: "row",
+                ...props,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
+                    select: true,
+                    label: "Value",
+                    value: (_mapping_spec_value1 = (_mapping_spec4 = mapping.spec) === null || _mapping_spec4 === void 0 ? void 0 : _mapping_spec4.value) !== null && _mapping_spec_value1 !== void 0 ? _mapping_spec_value1 : '',
+                    onChange: (e)=>onChange({
+                            ...mapping,
+                            spec: {
+                                value: e.target.value
+                            }
+                        }),
+                    SelectProps: {
+                        renderValue: (selected)=>{
+                            switch(selected){
+                                case 'empty':
+                                    return 'Empty';
+                                case 'null':
+                                    return 'Null';
+                                case 'NaN':
+                                    return 'NaN';
+                                case 'true':
+                                    return 'True';
+                                case 'false':
+                                    return 'False';
+                                default:
+                                    return String(selected);
+                            }
+                        }
+                    },
+                    fullWidth: true,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                            value: "empty",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        children: "Empty"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        variant: "caption",
+                                        children: "Matches empty string"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                            value: "null",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        children: "Null"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        variant: "caption",
+                                        children: "Matches null or undefined"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                            value: "NaN",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        children: "NaN"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        variant: "caption",
+                                        children: "Matches Not a Number value"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                            value: "true",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        children: "True"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        variant: "caption",
+                                        children: "Matches true boolean"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                            value: "false",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        children: "False"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                        variant: "caption",
+                                        children: "Matches false boolean"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            });
+        default:
+            return null;
+    }
+};
+const ValueMappingEditor = ({ mapping, onChange, onDelete, ...props })=>{
+    var _mapping_spec_result, _mapping_spec, _mapping_spec_result1, _mapping_spec1;
+    const handleColorChange = (color)=>{
+        onChange({
+            ...mapping,
+            spec: {
+                ...mapping.spec,
+                result: {
+                    ...mapping.spec.result,
+                    color
+                }
+            }
+        });
+    };
+    var _mapping_spec_result_value, _mapping_spec_result_color;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid2, {
+        container: true,
+        spacing: 2,
+        ...props,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                size: {
+                    xs: 5
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                    direction: "row",
+                    gap: 1,
+                    width: "100%",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
+                            select: true,
+                            label: "Type",
+                            value: mapping.kind,
+                            onChange: (e)=>onChange({
+                                    ...mapping,
+                                    kind: e.target.value
+                                }),
+                            required: true,
+                            sx: {
+                                width: '120px'
+                            },
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    value: "Value",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                children: "Value"
+                                            }),
+                                            mapping.kind !== 'Value' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                variant: "caption",
+                                                children: "Matches an exact text value"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    value: "Range",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                children: "Range"
+                                            }),
+                                            mapping.kind !== 'Range' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                variant: "caption",
+                                                children: "Matches against a numerical range"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    value: "Regex",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                children: "Regex"
+                                            }),
+                                            mapping.kind !== 'Regex' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                variant: "caption",
+                                                children: "Matches against a regular expression"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    value: "Misc",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                children: "Misc"
+                                            }),
+                                            mapping.kind !== 'Misc' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                variant: "caption",
+                                                children: "Matches against empty, null and NaN values"
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(ConditionEditor, {
+                            width: "100%",
+                            mapping: mapping,
+                            onChange: (updatedMapping)=>onChange({
+                                    ...mapping,
+                                    ...updatedMapping
+                                })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                size: {
+                    xs: 4
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                    label: "Display text",
+                    value: (_mapping_spec_result_value = (_mapping_spec = mapping.spec) === null || _mapping_spec === void 0 ? void 0 : (_mapping_spec_result = _mapping_spec.result) === null || _mapping_spec_result === void 0 ? void 0 : _mapping_spec_result.value) !== null && _mapping_spec_result_value !== void 0 ? _mapping_spec_result_value : '',
+                    onChange: (e)=>{
+                        var _mapping_spec;
+                        return onChange({
+                            ...mapping,
+                            spec: {
+                                ...mapping.spec,
+                                result: {
+                                    ...(_mapping_spec = mapping.spec) === null || _mapping_spec === void 0 ? void 0 : _mapping_spec.result,
+                                    value: e.target.value
+                                }
+                            }
+                        });
+                    },
+                    fullWidth: true
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                size: {
+                    xs: 1
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                    direction: "row",
+                    justifyContent: "center",
+                    gap: 1,
+                    children: ((_mapping_spec1 = mapping.spec) === null || _mapping_spec1 === void 0 ? void 0 : (_mapping_spec_result1 = _mapping_spec1.result) === null || _mapping_spec_result1 === void 0 ? void 0 : _mapping_spec_result1.color) ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsColorPicker.OptionsColorPicker, {
+                        label: "Color",
+                        color: (_mapping_spec_result_color = mapping.spec.result.color) !== null && _mapping_spec_result_color !== void 0 ? _mapping_spec_result_color : '#000',
+                        onColorChange: handleColorChange,
+                        onClear: ()=>handleColorChange(undefined)
+                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                        onClick: ()=>handleColorChange('#000'),
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {})
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                size: {
+                    xs: 1
+                },
+                textAlign: "end",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+                    title: "Remove mapping settings",
+                    placement: "top",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                        size: "small",
+                        sx: {
+                            marginLeft: 'auto'
+                        },
+                        onClick: onDelete,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {})
+                    })
+                })
+            })
+        ]
+    });
+};