@perses-dev/components 0.0.0-snapshot-scatter-chart-embed-8efdfab → 0.0.0-snapshot-explorer-plugin-c4a7621

package/dist/ValueMappingEditor/ValueMappingEditor.js

@@ -0,0 +1,374 @@
+// 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.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconButton, MenuItem, Stack, TextField, Tooltip, Typography, Grid2 as Grid } from '@mui/material';
+import DeleteIcon from 'mdi-material-ui/DeleteOutline';
+import PlusIcon from 'mdi-material-ui/Plus';
+import { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';
+const ConditionEditor = ({ mapping, onChange, ...props })=>{
+    switch(mapping.kind){
+        case 'Value':
+            return /*#__PURE__*/ _jsx(Stack, {
+                gap: 1,
+                direction: "row",
+                ...props,
+                children: /*#__PURE__*/ _jsx(TextField, {
+                    label: "Value",
+                    placeholder: "Exact value",
+                    value: mapping.spec?.value ?? '',
+                    onChange: (e)=>onChange({
+                            ...mapping,
+                            spec: {
+                                ...mapping.spec,
+                                value: e.target.value
+                            }
+                        }),
+                    fullWidth: true
+                })
+            });
+        case 'Range':
+            return /*#__PURE__*/ _jsxs(Stack, {
+                gap: 1,
+                direction: "row",
+                ...props,
+                children: [
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "From",
+                        placeholder: "Start of range",
+                        value: mapping.spec?.from ?? '',
+                        onChange: (e)=>onChange({
+                                ...mapping,
+                                spec: {
+                                    ...mapping.spec,
+                                    from: e.target.value === '' ? undefined : +e.target.value
+                                }
+                            }),
+                        fullWidth: true
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "To",
+                        placeholder: "End of range (inclusive)",
+                        value: mapping.spec?.to ?? '',
+                        onChange: (e)=>onChange({
+                                ...mapping,
+                                spec: {
+                                    ...mapping.spec,
+                                    to: e.target.value === '' ? undefined : +e.target.value
+                                }
+                            }),
+                        fullWidth: true
+                    })
+                ]
+            });
+        case 'Regex':
+            return /*#__PURE__*/ _jsx(Stack, {
+                gap: 1,
+                direction: "row",
+                ...props,
+                children: /*#__PURE__*/ _jsx(TextField, {
+                    label: "Regular Expression",
+                    placeholder: "JavaScript regular expression",
+                    value: mapping.spec?.pattern ?? '',
+                    onChange: (e)=>onChange({
+                            ...mapping,
+                            spec: {
+                                ...mapping.spec,
+                                pattern: e.target.value
+                            }
+                        }),
+                    fullWidth: true
+                })
+            });
+        case 'Misc':
+            return /*#__PURE__*/ _jsx(Stack, {
+                gap: 1,
+                direction: "row",
+                ...props,
+                children: /*#__PURE__*/ _jsxs(TextField, {
+                    select: true,
+                    label: "Value",
+                    value: mapping.spec?.value ?? '',
+                    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__*/ _jsx(MenuItem, {
+                            value: "empty",
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        children: "Empty"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "caption",
+                                        children: "Matches empty string"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(MenuItem, {
+                            value: "null",
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        children: "Null"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "caption",
+                                        children: "Matches null or undefined"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(MenuItem, {
+                            value: "NaN",
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        children: "NaN"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "caption",
+                                        children: "Matches Not a Number value"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(MenuItem, {
+                            value: "true",
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        children: "True"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "caption",
+                                        children: "Matches true boolean"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(MenuItem, {
+                            value: "false",
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        children: "False"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "caption",
+                                        children: "Matches false boolean"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            });
+        default:
+            return null;
+    }
+};
+export const ValueMappingEditor = ({ mapping, onChange, onDelete, ...props })=>{
+    const handleColorChange = (color)=>{
+        onChange({
+            ...mapping,
+            spec: {
+                ...mapping.spec,
+                result: {
+                    ...mapping.spec.result,
+                    color
+                }
+            }
+        });
+    };
+    return /*#__PURE__*/ _jsxs(Grid, {
+        container: true,
+        spacing: 2,
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx(Grid, {
+                size: {
+                    xs: 5
+                },
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    gap: 1,
+                    width: "100%",
+                    children: [
+                        /*#__PURE__*/ _jsxs(TextField, {
+                            select: true,
+                            label: "Type",
+                            value: mapping.kind,
+                            onChange: (e)=>onChange({
+                                    ...mapping,
+                                    kind: e.target.value
+                                }),
+                            required: true,
+                            sx: {
+                                width: '120px'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(MenuItem, {
+                                    value: "Value",
+                                    children: /*#__PURE__*/ _jsxs(Stack, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                children: "Value"
+                                            }),
+                                            mapping.kind !== 'Value' && /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                children: "Matches an exact text value"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(MenuItem, {
+                                    value: "Range",
+                                    children: /*#__PURE__*/ _jsxs(Stack, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                children: "Range"
+                                            }),
+                                            mapping.kind !== 'Range' && /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                children: "Matches against a numerical range"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(MenuItem, {
+                                    value: "Regex",
+                                    children: /*#__PURE__*/ _jsxs(Stack, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                children: "Regex"
+                                            }),
+                                            mapping.kind !== 'Regex' && /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                children: "Matches against a regular expression"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(MenuItem, {
+                                    value: "Misc",
+                                    children: /*#__PURE__*/ _jsxs(Stack, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                children: "Misc"
+                                            }),
+                                            mapping.kind !== 'Misc' && /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                children: "Matches against empty, null and NaN values"
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(ConditionEditor, {
+                            width: "100%",
+                            mapping: mapping,
+                            onChange: (updatedMapping)=>onChange({
+                                    ...mapping,
+                                    ...updatedMapping
+                                })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(Grid, {
+                size: {
+                    xs: 4
+                },
+                children: /*#__PURE__*/ _jsx(TextField, {
+                    label: "Display text",
+                    value: mapping.spec?.result?.value ?? '',
+                    onChange: (e)=>onChange({
+                            ...mapping,
+                            spec: {
+                                ...mapping.spec,
+                                result: {
+                                    ...mapping.spec?.result,
+                                    value: e.target.value
+                                }
+                            }
+                        }),
+                    fullWidth: true
+                })
+            }),
+            /*#__PURE__*/ _jsx(Grid, {
+                size: {
+                    xs: 1
+                },
+                children: /*#__PURE__*/ _jsx(Stack, {
+                    direction: "row",
+                    justifyContent: "center",
+                    gap: 1,
+                    children: mapping.spec?.result?.color ? /*#__PURE__*/ _jsx(OptionsColorPicker, {
+                        label: "Color",
+                        color: mapping.spec.result.color ?? '#000',
+                        onColorChange: handleColorChange,
+                        onClear: ()=>handleColorChange(undefined)
+                    }) : /*#__PURE__*/ _jsx(IconButton, {
+                        onClick: ()=>handleColorChange('#000'),
+                        children: /*#__PURE__*/ _jsx(PlusIcon, {})
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx(Grid, {
+                size: {
+                    xs: 1
+                },
+                textAlign: "end",
+                children: /*#__PURE__*/ _jsx(Tooltip, {
+                    title: "Remove mapping settings",
+                    placement: "top",
+                    children: /*#__PURE__*/ _jsx(IconButton, {
+                        size: "small",
+                        sx: {
+                            marginLeft: 'auto'
+                        },
+                        onClick: onDelete,
+                        children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                    })
+                })
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=ValueMappingEditor.js.map

package/dist/ValueMappingEditor/ValueMappingEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ValueMappingEditor/ValueMappingEditor.tsx"],"sourcesContent":["// Copyright 2024 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 {\n  Grid2Props as GridProps,\n  IconButton,\n  MenuItem,\n  Stack,\n  StackProps,\n  TextField,\n  Tooltip,\n  Typography,\n  Grid2 as Grid,\n} from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { ValueMapping } from '@perses-dev/core';\nimport { FC } from 'react';\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\n\ninterface ValueMappingConditionEditorProps extends Omit<StackProps, 'onChange'> {\n  mapping: ValueMapping;\n  onChange: (condition: ValueMapping) => void;\n}\n\nconst ConditionEditor: FC<ValueMappingConditionEditorProps> = ({ mapping, onChange, ...props }) => {\n  switch (mapping.kind) {\n    case 'Value':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            label=\"Value\"\n            placeholder=\"Exact value\"\n            value={mapping.spec?.value ?? ''}\n            onChange={(e) =>\n              onChange({\n                ...mapping,\n                spec: { ...mapping.spec, value: e.target.value },\n              })\n            }\n            fullWidth\n          />\n        </Stack>\n      );\n    case 'Range':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            label=\"From\"\n            placeholder=\"Start of range\"\n            value={mapping.spec?.from ?? ''}\n            onChange={(e) =>\n              onChange({\n                ...mapping,\n                spec: { ...mapping.spec, from: e.target.value === '' ? undefined : +e.target.value },\n              })\n            }\n            fullWidth\n          />\n          <TextField\n            label=\"To\"\n            placeholder=\"End of range (inclusive)\"\n            value={mapping.spec?.to ?? ''}\n            onChange={(e) =>\n              onChange({\n                ...mapping,\n                spec: { ...mapping.spec, to: e.target.value === '' ? undefined : +e.target.value },\n              })\n            }\n            fullWidth\n          />\n        </Stack>\n      );\n    case 'Regex':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            label=\"Regular Expression\"\n            placeholder=\"JavaScript regular expression\"\n            value={mapping.spec?.pattern ?? ''}\n            onChange={(e) => onChange({ ...mapping, spec: { ...mapping.spec, pattern: e.target.value } })}\n            fullWidth\n          />\n        </Stack>\n      );\n    case 'Misc':\n      return (\n        <Stack gap={1} direction=\"row\" {...props}>\n          <TextField\n            select\n            label=\"Value\"\n            value={mapping.spec?.value ?? ''}\n            onChange={(e) => onChange({ ...mapping, spec: { value: e.target.value } } as ValueMapping)}\n            SelectProps={{\n              renderValue: (selected) => {\n                switch (selected) {\n                  case 'empty':\n                    return 'Empty';\n                  case 'null':\n                    return 'Null';\n                  case 'NaN':\n                    return 'NaN';\n                  case 'true':\n                    return 'True';\n                  case 'false':\n                    return 'False';\n                  default:\n                    return String(selected);\n                }\n              },\n            }}\n            fullWidth\n          >\n            <MenuItem value=\"empty\">\n              <Stack>\n                <Typography>Empty</Typography>\n                <Typography variant=\"caption\">Matches empty string</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"null\">\n              <Stack>\n                <Typography>Null</Typography>\n                <Typography variant=\"caption\">Matches null or undefined</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"NaN\">\n              <Stack>\n                <Typography>NaN</Typography>\n                <Typography variant=\"caption\">Matches Not a Number value</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"true\">\n              <Stack>\n                <Typography>True</Typography>\n                <Typography variant=\"caption\">Matches true boolean</Typography>\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"false\">\n              <Stack>\n                <Typography>False</Typography>\n                <Typography variant=\"caption\">Matches false boolean</Typography>\n              </Stack>\n            </MenuItem>\n          </TextField>\n        </Stack>\n      );\n    default:\n      return null;\n  }\n};\nexport interface ValueMappingEditorProps extends Omit<GridProps, 'onChange'> {\n  mapping: ValueMapping;\n  onChange: (mapping: ValueMapping) => void;\n  onDelete: () => void;\n}\n\nexport const ValueMappingEditor: FC<ValueMappingEditorProps> = ({ mapping, onChange, onDelete, ...props }) => {\n  const handleColorChange = (color?: string): void => {\n    onChange({\n      ...mapping,\n      spec: {\n        ...mapping.spec,\n        result: {\n          ...mapping.spec.result,\n          color,\n        },\n      },\n    } as ValueMapping);\n  };\n  return (\n    <Grid container spacing={2} {...props}>\n      <Grid size={{ xs: 5 }}>\n        <Stack direction=\"row\" gap={1} width=\"100%\">\n          <TextField\n            select\n            label=\"Type\"\n            value={mapping.kind}\n            onChange={(e) => onChange({ ...mapping, kind: e.target.value } as ValueMapping)}\n            required\n            sx={{ width: '120px' }}\n          >\n            <MenuItem value=\"Value\">\n              <Stack>\n                <Typography>Value</Typography>\n                {mapping.kind !== 'Value' && <Typography variant=\"caption\">Matches an exact text value</Typography>}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Range\">\n              <Stack>\n                <Typography>Range</Typography>\n                {mapping.kind !== 'Range' && (\n                  <Typography variant=\"caption\">Matches against a numerical range</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Regex\">\n              <Stack>\n                <Typography>Regex</Typography>\n                {mapping.kind !== 'Regex' && (\n                  <Typography variant=\"caption\">Matches against a regular expression</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Misc\">\n              <Stack>\n                <Typography>Misc</Typography>\n                {mapping.kind !== 'Misc' && (\n                  <Typography variant=\"caption\">Matches against empty, null and NaN values</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n          </TextField>\n          <ConditionEditor\n            width=\"100%\"\n            mapping={mapping}\n            onChange={(updatedMapping) => onChange({ ...mapping, ...updatedMapping })}\n          />\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 4 }}>\n        <TextField\n          label=\"Display text\"\n          value={mapping.spec?.result?.value ?? ''}\n          onChange={(e) =>\n            onChange({\n              ...mapping,\n              spec: {\n                ...mapping.spec,\n                result: {\n                  ...mapping.spec?.result,\n                  value: e.target.value,\n                },\n              },\n            } as ValueMapping)\n          }\n          fullWidth\n        />\n      </Grid>\n      <Grid size={{ xs: 1 }}>\n        <Stack direction=\"row\" justifyContent=\"center\" gap={1}>\n          {mapping.spec?.result?.color ? (\n            <OptionsColorPicker\n              label=\"Color\"\n              color={mapping.spec.result.color ?? '#000'}\n              onColorChange={handleColorChange}\n              onClear={() => handleColorChange(undefined)}\n            />\n          ) : (\n            <IconButton onClick={() => handleColorChange('#000')}>\n              <PlusIcon />\n            </IconButton>\n          )}\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 1 }} textAlign=\"end\">\n        <Tooltip title=\"Remove mapping settings\" placement=\"top\">\n          <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={onDelete}>\n            <DeleteIcon />\n          </IconButton>\n        </Tooltip>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":["IconButton","MenuItem","Stack","TextField","Tooltip","Typography","Grid2","Grid","DeleteIcon","PlusIcon","OptionsColorPicker","ConditionEditor","mapping","onChange","props","kind","gap","direction","label","placeholder","value","spec","e","target","fullWidth","from","undefined","to","pattern","select","SelectProps","renderValue","selected","String","variant","ValueMappingEditor","onDelete","handleColorChange","color","result","container","spacing","size","xs","width","required","sx","updatedMapping","justifyContent","onColorChange","onClear","onClick","textAlign","title","placement","marginLeft"],"mappings":"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"}

package/dist/ValueMappingEditor/ValueMappingsEditor.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { ValueMapping } from '@perses-dev/core';
+export interface ValueMappingsEditorProps {
+    mappings: ValueMapping[];
+    onChange: (valueMappings: ValueMapping[]) => void;
+}
+export declare const ValueMappingsEditor: FC<ValueMappingsEditorProps>;
+//# sourceMappingURL=ValueMappingsEditor.d.ts.map

package/dist/ValueMappingEditor/ValueMappingsEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValueMappingsEditor.d.ts","sourceRoot":"","sources":["../../src/ValueMappingEditor/ValueMappingsEditor.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGhD,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAsD5D,CAAC"}

package/dist/ValueMappingEditor/ValueMappingsEditor.js

@@ -0,0 +1,118 @@
+// 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.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Divider, Stack, Typography, Grid2 as Grid } from '@mui/material';
+import { useState } from 'react';
+import AddIcon from 'mdi-material-ui/Plus';
+import { ValueMappingEditor } from './ValueMappingEditor';
+export const ValueMappingsEditor = ({ mappings, onChange })=>{
+    const [valueMappings, setValueMappings] = useState(mappings);
+    function handleValueMappingChange(index, mapping) {
+        const updatedValueMapings = [
+            ...valueMappings
+        ];
+        updatedValueMapings[index] = mapping;
+        setValueMappings(updatedValueMapings);
+        onChange(updatedValueMapings);
+    }
+    function handleAddValueMappingEditor() {
+        const updatedValueMapings = [
+            ...valueMappings
+        ];
+        updatedValueMapings.push({
+            kind: 'Value',
+            spec: {
+                result: {
+                    value: ''
+                }
+            }
+        });
+        setValueMappings(updatedValueMapings);
+        onChange(updatedValueMapings);
+    }
+    function handleValueMappingDelete(index) {
+        const updatedValueMapings = [
+            ...valueMappings
+        ];
+        updatedValueMapings.splice(index, 1);
+        setValueMappings(updatedValueMapings);
+        onChange(updatedValueMapings);
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ _jsxs(Grid, {
+                container: true,
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ _jsx(Grid, {
+                        size: {
+                            xs: 5
+                        },
+                        children: /*#__PURE__*/ _jsx(Typography, {
+                            variant: "subtitle1",
+                            children: "Condition"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Grid, {
+                        size: {
+                            xs: 4
+                        },
+                        children: /*#__PURE__*/ _jsx(Typography, {
+                            variant: "subtitle1",
+                            children: "Display Text"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Grid, {
+                        size: {
+                            xs: 1
+                        },
+                        textAlign: "center",
+                        children: /*#__PURE__*/ _jsx(Typography, {
+                            variant: "subtitle1",
+                            children: "Color"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Grid, {
+                        size: {
+                            xs: 1
+                        }
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Stack, {
+                gap: 1.5,
+                divider: /*#__PURE__*/ _jsx(Divider, {
+                    flexItem: true,
+                    orientation: "horizontal"
+                }),
+                children: valueMappings.map((mapping, i)=>/*#__PURE__*/ _jsx(ValueMappingEditor, {
+                        mapping: mapping,
+                        onChange: (updatedMapping)=>handleValueMappingChange(i, updatedMapping),
+                        onDelete: ()=>handleValueMappingDelete(i)
+                    }, i))
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                variant: "contained",
+                startIcon: /*#__PURE__*/ _jsx(AddIcon, {}),
+                sx: {
+                    marginTop: 1
+                },
+                onClick: handleAddValueMappingEditor,
+                children: "Add value mappings"
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=ValueMappingsEditor.js.map

package/dist/ValueMappingEditor/ValueMappingsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ValueMappingEditor/ValueMappingsEditor.tsx"],"sourcesContent":["// Copyright 2024 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 { Button, Divider, Stack, Typography, Grid2 as Grid } from '@mui/material';\n\nimport { FC, useState } from 'react';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { ValueMapping } from '@perses-dev/core';\nimport { ValueMappingEditor } from './ValueMappingEditor';\n\nexport interface ValueMappingsEditorProps {\n  mappings: ValueMapping[];\n  onChange: (valueMappings: ValueMapping[]) => void;\n}\n\nexport const ValueMappingsEditor: FC<ValueMappingsEditorProps> = ({ mappings, onChange }) => {\n  const [valueMappings, setValueMappings] = useState<ValueMapping[]>(mappings);\n\n  function handleValueMappingChange(index: number, mapping: ValueMapping): void {\n    const updatedValueMapings = [...valueMappings];\n    updatedValueMapings[index] = mapping;\n    setValueMappings(updatedValueMapings);\n    onChange(updatedValueMapings);\n  }\n\n  function handleAddValueMappingEditor(): void {\n    const updatedValueMapings = [...valueMappings];\n    updatedValueMapings.push({ kind: 'Value', spec: { result: { value: '' } } } as ValueMapping);\n    setValueMappings(updatedValueMapings);\n    onChange(updatedValueMapings);\n  }\n\n  function handleValueMappingDelete(index: number): void {\n    const updatedValueMapings = [...valueMappings];\n    updatedValueMapings.splice(index, 1);\n    setValueMappings(updatedValueMapings);\n    onChange(updatedValueMapings);\n  }\n\n  return (\n    <Stack spacing={1}>\n      <Grid container spacing={2}>\n        <Grid size={{ xs: 5 }}>\n          <Typography variant=\"subtitle1\">Condition</Typography>\n        </Grid>\n        <Grid size={{ xs: 4 }}>\n          <Typography variant=\"subtitle1\">Display Text</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }} textAlign=\"center\">\n          <Typography variant=\"subtitle1\">Color</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }}></Grid>\n      </Grid>\n      <Stack gap={1.5} divider={<Divider flexItem orientation=\"horizontal\" />}>\n        {valueMappings.map((mapping, i) => (\n          <ValueMappingEditor\n            key={i}\n            mapping={mapping}\n            onChange={(updatedMapping: ValueMapping) => handleValueMappingChange(i, updatedMapping)}\n            onDelete={() => handleValueMappingDelete(i)}\n          />\n        ))}\n      </Stack>\n\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleAddValueMappingEditor}>\n        Add value mappings\n      </Button>\n    </Stack>\n  );\n};\n"],"names":["Button","Divider","Stack","Typography","Grid2","Grid","useState","AddIcon","ValueMappingEditor","ValueMappingsEditor","mappings","onChange","valueMappings","setValueMappings","handleValueMappingChange","index","mapping","updatedValueMapings","handleAddValueMappingEditor","push","kind","spec","result","value","handleValueMappingDelete","splice","spacing","container","size","xs","variant","textAlign","gap","divider","flexItem","orientation","map","i","updatedMapping","onDelete","startIcon","sx","marginTop","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,UAAU,EAAEC,SAASC,IAAI,QAAQ,gBAAgB;AAElF,SAAaC,QAAQ,QAAQ,QAAQ;AACrC,OAAOC,aAAa,uBAAuB;AAE3C,SAASC,kBAAkB,QAAQ,uBAAuB;AAO1D,OAAO,MAAMC,sBAAoD,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAE;IACtF,MAAM,CAACC,eAAeC,iBAAiB,GAAGP,SAAyBI;IAEnE,SAASI,yBAAyBC,KAAa,EAAEC,OAAqB;QACpE,MAAMC,sBAAsB;eAAIL;SAAc;QAC9CK,mBAAmB,CAACF,MAAM,GAAGC;QAC7BH,iBAAiBI;QACjBN,SAASM;IACX;IAEA,SAASC;QACP,MAAMD,sBAAsB;eAAIL;SAAc;QAC9CK,oBAAoBE,IAAI,CAAC;YAAEC,MAAM;YAASC,MAAM;gBAAEC,QAAQ;oBAAEC,OAAO;gBAAG;YAAE;QAAE;QAC1EV,iBAAiBI;QACjBN,SAASM;IACX;IAEA,SAASO,yBAAyBT,KAAa;QAC7C,MAAME,sBAAsB;eAAIL;SAAc;QAC9CK,oBAAoBQ,MAAM,CAACV,OAAO;QAClCF,iBAAiBI;QACjBN,SAASM;IACX;IAEA,qBACE,MAACf;QAAMwB,SAAS;;0BACd,MAACrB;gBAAKsB,SAAS;gBAACD,SAAS;;kCACvB,KAACrB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;kCAClB,cAAA,KAAC1B;4BAAW2B,SAAQ;sCAAY;;;kCAElC,KAACzB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;kCAClB,cAAA,KAAC1B;4BAAW2B,SAAQ;sCAAY;;;kCAElC,KAACzB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;wBAAGE,WAAU;kCAC/B,cAAA,KAAC5B;4BAAW2B,SAAQ;sCAAY;;;kCAElC,KAACzB;wBAAKuB,MAAM;4BAAEC,IAAI;wBAAE;;;;0BAEtB,KAAC3B;gBAAM8B,KAAK;gBAAKC,uBAAS,KAAChC;oBAAQiC,QAAQ;oBAACC,aAAY;;0BACrDvB,cAAcwB,GAAG,CAAC,CAACpB,SAASqB,kBAC3B,KAAC7B;wBAECQ,SAASA;wBACTL,UAAU,CAAC2B,iBAAiCxB,yBAAyBuB,GAAGC;wBACxEC,UAAU,IAAMf,yBAAyBa;uBAHpCA;;0BAQX,KAACrC;gBAAO8B,SAAQ;gBAAYU,yBAAW,KAACjC;gBAAYkC,IAAI;oBAAEC,WAAW;gBAAE;gBAAGC,SAASzB;0BAA6B;;;;AAKtH,EAAE"}

package/dist/ValueMappingEditor/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ValueMappingsEditor';
+//# sourceMappingURL=index.d.ts.map

package/dist/ValueMappingEditor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ValueMappingEditor/index.ts"],"names":[],"mappings":"AAaA,cAAc,uBAAuB,CAAC"}

package/dist/ValueMappingEditor/index.js

@@ -0,0 +1,15 @@
+// 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.
+export * from './ValueMappingsEditor';
+
+//# sourceMappingURL=index.js.map

package/dist/ValueMappingEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ValueMappingEditor/index.ts"],"sourcesContent":["// Copyright 2024 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\nexport * from './ValueMappingsEditor';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,wBAAwB"}

package/dist/YAxisLabel.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import { ReactElement } from 'react';
 interface YAxisLabelProps {
     name: string;
     height: number;
 }
-export declare function YAxisLabel({ name, height }: YAxisLabelProps): JSX.Element;
+export declare function YAxisLabel({ name, height }: YAxisLabelProps): ReactElement;
 export {};
 //# sourceMappingURL=YAxisLabel.d.ts.map

package/dist/YAxisLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"YAxisLabel.d.ts","sourceRoot":"","sources":["../src/YAxisLabel.tsx"],"names":[],"mappings":";AAeA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,eAAe,eA2B3D"}
+{"version":3,"file":"YAxisLabel.d.ts","sourceRoot":"","sources":["../src/YAxisLabel.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,eAAe,GAAG,YAAY,CA6B1E"}

package/dist/YAxisLabel.js

@@ -12,13 +12,15 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Typography } from '@mui/material';
-export function YAxisLabel({ name , height  }) {
+export function YAxisLabel({ name, height }) {
     return /*#__PURE__*/ _jsx(Box, {
+        style: {
+            maxWidth: height,
+            top: `calc(${height}px / 2)`
+        },
         sx: {
             display: 'inline-block',
-            maxWidth: height,
             position: 'absolute',
-            top: `calc(${height}px / 2)`,
             transform: 'translateX(-50%) rotate(-90deg)',
             transformOrigin: 'top',
             textAlign: 'center',

package/dist/YAxisLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/YAxisLabel.tsx"],"sourcesContent":["// Copyright 2023 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 { Box, Typography } from '@mui/material';\n\ninterface YAxisLabelProps {\n  name: string;\n  height: number;\n}\n\nexport function YAxisLabel({ name, height }: YAxisLabelProps) {\n  return (\n    <Box\n      sx={{\n        display: 'inline-block',\n        maxWidth: height, // allows rotated text to truncate instead of causing overlap\n        position: 'absolute',\n        top: `calc(${height}px / 2)`,\n        transform: 'translateX(-50%) rotate(-90deg)',\n        transformOrigin: 'top',\n        textAlign: 'center',\n        zIndex: 1,\n      }}\n    >\n      <Typography\n        variant=\"body1\"\n        aria-label=\"y axis label\"\n        sx={{\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }}\n      >\n        {name}\n      </Typography>\n    </Box>\n  );\n}\n"],"names":["Box","Typography","YAxisLabel","name","height","sx","display","maxWidth","position","top","transform","transformOrigin","textAlign","zIndex","variant","aria-label","whiteSpace","overflow","textOverflow"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,EAAEC,UAAU,QAAQ,gBAAgB;AAOhD,OAAO,SAASC,WAAW,EAAEC,KAAI,EAAEC,OAAM,EAAmB;IAC1D,qBACE,KAACJ;QACCK,IAAI;YACFC,SAAS;YACTC,UAAUH;YACVI,UAAU;YACVC,KAAK,CAAC,KAAK,EAAEL,OAAO,OAAO,CAAC;YAC5BM,WAAW;YACXC,iBAAiB;YACjBC,WAAW;YACXC,QAAQ;QACV;kBAEA,cAAA,KAACZ;YACCa,SAAQ;YACRC,cAAW;YACXV,IAAI;gBACFW,YAAY;gBACZC,UAAU;gBACVC,cAAc;YAChB;sBAECf;;;AAIT"}
+{"version":3,"sources":["../src/YAxisLabel.tsx"],"sourcesContent":["// Copyright 2023 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 { Box, Typography } from '@mui/material';\nimport { ReactElement } from 'react';\n\ninterface YAxisLabelProps {\n  name: string;\n  height: number;\n}\n\nexport function YAxisLabel({ name, height }: YAxisLabelProps): ReactElement {\n  return (\n    <Box\n      style={{\n        maxWidth: height, // allows rotated text to truncate instead of causing overlap\n        top: `calc(${height}px / 2)`,\n      }}\n      sx={{\n        display: 'inline-block',\n        position: 'absolute',\n        transform: 'translateX(-50%) rotate(-90deg)',\n        transformOrigin: 'top',\n        textAlign: 'center',\n        zIndex: 1,\n      }}\n    >\n      <Typography\n        variant=\"body1\"\n        aria-label=\"y axis label\"\n        sx={{\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }}\n      >\n        {name}\n      </Typography>\n    </Box>\n  );\n}\n"],"names":["Box","Typography","YAxisLabel","name","height","style","maxWidth","top","sx","display","position","transform","transformOrigin","textAlign","zIndex","variant","aria-label","whiteSpace","overflow","textOverflow"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,EAAEC,UAAU,QAAQ,gBAAgB;AAQhD,OAAO,SAASC,WAAW,EAAEC,IAAI,EAAEC,MAAM,EAAmB;IAC1D,qBACE,KAACJ;QACCK,OAAO;YACLC,UAAUF;YACVG,KAAK,CAAC,KAAK,EAAEH,OAAO,OAAO,CAAC;QAC9B;QACAI,IAAI;YACFC,SAAS;YACTC,UAAU;YACVC,WAAW;YACXC,iBAAiB;YACjBC,WAAW;YACXC,QAAQ;QACV;kBAEA,cAAA,KAACb;YACCc,SAAQ;YACRC,cAAW;YACXR,IAAI;gBACFS,YAAY;gBACZC,UAAU;gBACVC,cAAc;YAChB;sBAEChB;;;AAIT"}