@perses-dev/components 0.50.0 → 0.51.0-beta.0

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/cjs/ColorPicker/ColorPicker.js

@@ -36,7 +36,7 @@ const ColorPicker = ({ color, onChange, onClear, palette })=>{
     const [value, setValue] = (0, _react.useState)(color);
     const handleColorChange = (color)=>{
         setValue(color);
-        onChange === null || onChange === void 0 ? void 0 : onChange(color);
+        onChange?.(color);
     };
     // we should update this if https://github.com/omgovich/react-colorful/issues/157 is resolved
     const handleInputChange = (e)=>{
@@ -44,7 +44,7 @@ const ColorPicker = ({ color, onChange, onClear, palette })=>{
         setValue(`#${inputValue}`); // always prefix input value with # to indicate hex format
         // only set color if input value is a valid hex color
         if (isValidHex(e.target.value)) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
+            onChange?.(e.target.value);
         }
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {

package/dist/cjs/ContentWithLegend/model/content-with-legend-model.js

@@ -48,7 +48,7 @@ const PANEL_HEIGHT_LG_BREAKPOINT = 300;
 const LEGEND_HEIGHT_SM = 40;
 const LEGEND_HEIGHT_LG = 100;
 function getContentWithLegendLayout({ width, height, legendProps, legendSize, minChildrenHeight, minChildrenWidth, spacing, theme }) {
-    const legendOptions = legendProps === null || legendProps === void 0 ? void 0 : legendProps.options;
+    const legendOptions = legendProps?.options;
     const hasLegend = !!legendOptions;
     const noLegendLayout = {
         legend: {
@@ -84,10 +84,9 @@ function getContentWithLegendLayout({ width, height, legendProps, legendSize, mi
             legendHeight = LEGEND_HEIGHT_LG;
         }
     } else {
-        var _legendProps_tableProps;
         // Table mode
         const tableLayout = (0, _Table.getTableCellLayout)(theme, 'compact');
-        const tableColumns = (legendProps === null || legendProps === void 0 ? void 0 : (_legendProps_tableProps = legendProps.tableProps) === null || _legendProps_tableProps === void 0 ? void 0 : _legendProps_tableProps.columns) || [];
+        const tableColumns = legendProps?.tableProps?.columns || [];
         const columnsWidth = tableColumns.reduce((total, col)=>{
             if (typeof col.width === 'number') {
                 total += col.width;

package/dist/cjs/DragAndDrop/DragButton.js

@@ -64,7 +64,7 @@ function handleMoveDown(element, elements) {
     newElements.splice(index + 1, 0, element);
     return newElements;
 }
-function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx }) {
+const DragButton = /*#__PURE__*/ (0, _react.forwardRef)(function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx, ...otherProps }, ref) {
     const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
     const open = Boolean(anchorEl);
     function handleClick(event) {
@@ -72,11 +72,13 @@ function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx }) {
     }
     function handleMove(callback) {
         setAnchorEl(null);
-        callback === null || callback === void 0 ? void 0 : callback();
+        callback?.();
     }
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                ...otherProps,
+                ref: ref,
                 "aria-label": "move",
                 "aria-haspopup": true,
                 "aria-expanded": open,
@@ -118,4 +120,4 @@ function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx }) {
             })
         ]
     });
-}
+});