@perses-dev/components 0.48.0-rc0 → 0.49.0-rc.0

package/dist/TransformsEditor/TransformsEditor.js

@@ -0,0 +1,93 @@
+// 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, Stack } from '@mui/material';
+import { useState } from 'react';
+import AddIcon from 'mdi-material-ui/Plus';
+import { TransformEditorContainer } from './TransformEditorContainer';
+export function TransformsEditor({ value, onChange, ...props }) {
+    const [transformsCollapsed, setTransformsCollapsed] = useState(value.map(()=>true));
+    function handleTransformChange(index, transform) {
+        const updatedTransforms = [
+            ...value
+        ];
+        updatedTransforms[index] = transform;
+        onChange(updatedTransforms);
+    }
+    function handleTransformAdd() {
+        const updatedTransforms = [
+            ...value
+        ];
+        // @ts-expect-error: Unknown transform
+        updatedTransforms.push({
+            kind: '',
+            spec: {}
+        });
+        onChange(updatedTransforms);
+        setTransformsCollapsed((prev)=>{
+            prev.push(false);
+            return [
+                ...prev
+            ];
+        });
+    }
+    function handleTransformDelete(index) {
+        const updatedTransforms = [
+            ...value
+        ];
+        updatedTransforms.splice(index, 1);
+        onChange(updatedTransforms);
+        setTransformsCollapsed((prev)=>{
+            prev.splice(index, 1);
+            return [
+                ...prev
+            ];
+        });
+    }
+    function handleTransformCollapseExpand(index, collapsed) {
+        setTransformsCollapsed((prev)=>{
+            prev[index] = collapsed;
+            return [
+                ...prev
+            ];
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        gap: 1,
+        ...props,
+        children: [
+            value.map((transform, i)=>{
+                var _transformsCollapsed_i;
+                return /*#__PURE__*/ _jsx(TransformEditorContainer, {
+                    index: i,
+                    value: transform,
+                    isCollapsed: (_transformsCollapsed_i = transformsCollapsed[i]) !== null && _transformsCollapsed_i !== void 0 ? _transformsCollapsed_i : true,
+                    onChange: (updatedTransform)=>handleTransformChange(i, updatedTransform),
+                    onDelete: ()=>handleTransformDelete(i),
+                    onCollapse: (collapsed)=>handleTransformCollapseExpand(i, collapsed)
+                }, i);
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                variant: "contained",
+                startIcon: /*#__PURE__*/ _jsx(AddIcon, {}),
+                sx: {
+                    marginTop: 1
+                },
+                onClick: handleTransformAdd,
+                children: "Add Transformation"
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=TransformsEditor.js.map

package/dist/TransformsEditor/TransformsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TransformsEditor/TransformsEditor.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 { Transform } from '@perses-dev/core';\nimport { Button, Stack, StackProps } from '@mui/material';\nimport { useState } from 'react';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { TransformEditorContainer } from './TransformEditorContainer';\n\nexport interface TransformsEditorProps extends Omit<StackProps, 'onChange'> {\n  value: Transform[];\n  onChange: (transforms: Transform[]) => void;\n}\n\nexport function TransformsEditor({ value, onChange, ...props }: TransformsEditorProps) {\n  const [transformsCollapsed, setTransformsCollapsed] = useState(value.map(() => true));\n\n  function handleTransformChange(index: number, transform: Transform): void {\n    const updatedTransforms = [...value];\n    updatedTransforms[index] = transform;\n    onChange(updatedTransforms);\n  }\n\n  function handleTransformAdd(): void {\n    const updatedTransforms = [...value];\n    // @ts-expect-error: Unknown transform\n    updatedTransforms.push({ kind: '', spec: {} });\n    onChange(updatedTransforms);\n    setTransformsCollapsed((prev) => {\n      prev.push(false);\n      return [...prev];\n    });\n  }\n\n  function handleTransformDelete(index: number): void {\n    const updatedTransforms = [...value];\n    updatedTransforms.splice(index, 1);\n    onChange(updatedTransforms);\n    setTransformsCollapsed((prev) => {\n      prev.splice(index, 1);\n      return [...prev];\n    });\n  }\n\n  function handleTransformCollapseExpand(index: number, collapsed: boolean): void {\n    setTransformsCollapsed((prev) => {\n      prev[index] = collapsed;\n      return [...prev];\n    });\n  }\n\n  return (\n    <Stack gap={1} {...props}>\n      {value.map((transform, i) => (\n        <TransformEditorContainer\n          key={i}\n          index={i}\n          value={transform}\n          isCollapsed={transformsCollapsed[i] ?? true}\n          onChange={(updatedTransform: Transform) => handleTransformChange(i, updatedTransform)}\n          onDelete={() => handleTransformDelete(i)}\n          onCollapse={(collapsed) => handleTransformCollapseExpand(i, collapsed)}\n        />\n      ))}\n\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleTransformAdd}>\n        Add Transformation\n      </Button>\n    </Stack>\n  );\n}\n"],"names":["Button","Stack","useState","AddIcon","TransformEditorContainer","TransformsEditor","value","onChange","props","transformsCollapsed","setTransformsCollapsed","map","handleTransformChange","index","transform","updatedTransforms","handleTransformAdd","push","kind","spec","prev","handleTransformDelete","splice","handleTransformCollapseExpand","collapsed","gap","i","isCollapsed","updatedTransform","onDelete","onCollapse","variant","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;;AAGjC,SAASA,MAAM,EAAEC,KAAK,QAAoB,gBAAgB;AAC1D,SAASC,QAAQ,QAAQ,QAAQ;AACjC,OAAOC,aAAa,uBAAuB;AAC3C,SAASC,wBAAwB,QAAQ,6BAA6B;AAOtE,OAAO,SAASC,iBAAiB,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,OAA8B;IACnF,MAAM,CAACC,qBAAqBC,uBAAuB,GAAGR,SAASI,MAAMK,GAAG,CAAC,IAAM;IAE/E,SAASC,sBAAsBC,KAAa,EAAEC,SAAoB;QAChE,MAAMC,oBAAoB;eAAIT;SAAM;QACpCS,iBAAiB,CAACF,MAAM,GAAGC;QAC3BP,SAASQ;IACX;IAEA,SAASC;QACP,MAAMD,oBAAoB;eAAIT;SAAM;QACpC,sCAAsC;QACtCS,kBAAkBE,IAAI,CAAC;YAAEC,MAAM;YAAIC,MAAM,CAAC;QAAE;QAC5CZ,SAASQ;QACTL,uBAAuB,CAACU;YACtBA,KAAKH,IAAI,CAAC;YACV,OAAO;mBAAIG;aAAK;QAClB;IACF;IAEA,SAASC,sBAAsBR,KAAa;QAC1C,MAAME,oBAAoB;eAAIT;SAAM;QACpCS,kBAAkBO,MAAM,CAACT,OAAO;QAChCN,SAASQ;QACTL,uBAAuB,CAACU;YACtBA,KAAKE,MAAM,CAACT,OAAO;YACnB,OAAO;mBAAIO;aAAK;QAClB;IACF;IAEA,SAASG,8BAA8BV,KAAa,EAAEW,SAAkB;QACtEd,uBAAuB,CAACU;YACtBA,IAAI,CAACP,MAAM,GAAGW;YACd,OAAO;mBAAIJ;aAAK;QAClB;IACF;IAEA,qBACE,MAACnB;QAAMwB,KAAK;QAAI,GAAGjB,KAAK;;YACrBF,MAAMK,GAAG,CAAC,CAACG,WAAWY;oBAKNjB;qCAJf,KAACL;oBAECS,OAAOa;oBACPpB,OAAOQ;oBACPa,aAAalB,CAAAA,yBAAAA,mBAAmB,CAACiB,EAAE,cAAtBjB,oCAAAA,yBAA0B;oBACvCF,UAAU,CAACqB,mBAAgChB,sBAAsBc,GAAGE;oBACpEC,UAAU,IAAMR,sBAAsBK;oBACtCI,YAAY,CAACN,YAAcD,8BAA8BG,GAAGF;mBANvDE;;0BAUT,KAAC1B;gBAAO+B,SAAQ;gBAAYC,yBAAW,KAAC7B;gBAAY8B,IAAI;oBAAEC,WAAW;gBAAE;gBAAGC,SAASnB;0BAAoB;;;;AAK7G"}

package/dist/TransformsEditor/index.d.ts

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

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

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

package/dist/TransformsEditor/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 './TransformsEditor';
+
+//# sourceMappingURL=index.js.map

package/dist/TransformsEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TransformsEditor/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 './TransformsEditor';\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,qBAAqB"}

package/dist/cjs/ColorPicker/ColorPicker.js

@@ -25,6 +25,7 @@ const _material = require("@mui/material");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _reactcolorful = require("react-colorful");
 const _Circle = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Circle"));
+const _Delete = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Delete"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -71,7 +72,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const ColorPicker = ({ color, onChange, palette })=>{
+const ColorPicker = ({ color, onChange, onClear, palette })=>{
     // value is the visible value for the controlled text input
     const [value, setValue] = (0, _react.useState)(color);
     const handleColorChange = (color)=>{
@@ -92,7 +93,10 @@ const ColorPicker = ({ color, onChange, palette })=>{
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcolorful.HexColorPicker, {
                 color: color,
-                onChange: handleColorChange
+                onChange: handleColorChange,
+                style: {
+                    width: '100%'
+                }
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
                 direction: "row",
@@ -109,13 +113,24 @@ const ColorPicker = ({ color, onChange, palette })=>{
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Circle.default, {})
                     }, i))
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                inputProps: {
-                    'aria-label': 'enter hex color'
-                },
-                fullWidth: true,
-                value: value,
-                onChange: handleInputChange
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                direction: "row",
+                gap: 1,
+                alignItems: "center",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        inputProps: {
+                            'aria-label': 'enter hex color'
+                        },
+                        fullWidth: true,
+                        value: value,
+                        onChange: handleInputChange
+                    }),
+                    onClear && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                        onClick: onClear,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Delete.default, {})
+                    })
+                ]
             })
         ]
     });

package/dist/cjs/ColorPicker/OptionsColorPicker.js

@@ -24,14 +24,14 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _material = require("@mui/material");
 const _Circle = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Circle"));
-const _ChartsProvider = require("../context/ChartsProvider");
+const _context = require("../context");
 const _ColorPicker = require("./ColorPicker");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function OptionsColorPicker({ color, onColorChange, label }) {
+function OptionsColorPicker({ label, color, onColorChange, onClear }) {
     const [anchorEl, setAnchorEl] = _react.default.useState(null);
     const isOpen = Boolean(anchorEl);
     const openColorPicker = (event)=>{
@@ -40,7 +40,7 @@ function OptionsColorPicker({ color, onColorChange, label }) {
     const closeColorPicker = ()=>{
         setAnchorEl(null);
     };
-    const { thresholds: { defaultColor, palette } } = (0, _ChartsProvider.useChartsTheme)();
+    const { thresholds: { defaultColor, palette } } = (0, _context.useChartsTheme)();
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(ColorIconButton, {
@@ -56,9 +56,11 @@ function OptionsColorPicker({ color, onColorChange, label }) {
                 open: isOpen,
                 anchorEl: anchorEl,
                 onClose: closeColorPicker,
-                PaperProps: {
-                    sx: {
-                        padding: (theme)=>theme.spacing(2)
+                slotProps: {
+                    paper: {
+                        sx: {
+                            padding: (theme)=>theme.spacing(2)
+                        }
                     }
                 },
                 anchorOrigin: {
@@ -71,11 +73,12 @@ function OptionsColorPicker({ color, onColorChange, label }) {
                 },
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorPicker.ColorPicker, {
                     color: color,
-                    onChange: onColorChange,
                     palette: [
                         defaultColor,
                         ...palette
-                    ]
+                    ],
+                    onChange: onColorChange,
+                    onClear: onClear
                 })
             })
         ]

package/dist/cjs/Table/Table.js

@@ -35,7 +35,7 @@ const DEFAULT_GET_ROW_ID = (data, index)=>{
 // does not do deep equality checking for objects and arrays.
 const DEFAULT_ROW_SELECTION = {};
 const DEFAULT_SORTING = [];
-function Table({ data, columns, density = 'standard', checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId = DEFAULT_GET_ROW_ID, rowSelection = DEFAULT_ROW_SELECTION, sorting = DEFAULT_SORTING, rowSelectionVariant = 'standard', ...otherProps }) {
+function Table({ data, columns, cellConfigs, density = 'standard', checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId = DEFAULT_GET_ROW_ID, rowSelection = DEFAULT_ROW_SELECTION, sorting = DEFAULT_SORTING, rowSelectionVariant = 'standard', ...otherProps }) {
     const theme = (0, _material.useTheme)();
     const handleRowSelectionChange = (rowSelectionUpdater)=>{
         const newRowSelection = typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;
@@ -147,6 +147,7 @@ function Table({ data, columns, density = 'standard', checkboxSelection, onRowSe
         onRowClick: handleRowClick,
         rows: table.getRowModel().rows,
         columns: table.getAllFlatColumns(),
-        headers: table.getHeaderGroups()
+        headers: table.getHeaderGroups(),
+        cellConfigs: cellConfigs
     });
 }

package/dist/cjs/Table/TableCell.js

@@ -39,7 +39,7 @@ const StyledMuiTableCell = (0, _material.styled)(_material.TableCell)(({ theme }
             borderRadius: 0
         }
     }));
-function TableCell({ children, density, variant, width, focusState = 'none', onFocusTrigger, isFirstColumn, isLastColumn, description, align, ...otherProps }) {
+function TableCell({ children, density, variant, width, focusState = 'none', onFocusTrigger, isFirstColumn, isLastColumn, description, align, color, backgroundColor, ...otherProps }) {
     const theme = (0, _material.useTheme)();
     const elRef = (0, _react.useRef)();
     const isHeader = variant === 'head';
@@ -100,6 +100,10 @@ function TableCell({ children, density, variant, width, focusState = 'none', onF
                 // in headers.
                 flexDirection: 'inherit'
             },
+            style: {
+                backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : 'inherit',
+                color: color !== null && color !== void 0 ? color : 'inherit'
+            },
             title: description,
             "aria-label": description,
             textAlign: align,

package/dist/cjs/Table/VirtualizedTable.js

@@ -33,7 +33,7 @@ const _TableHeaderCell = require("./TableHeaderCell");
 const _TableCell = require("./TableCell");
 const _VirtualizedTableContainer = require("./VirtualizedTableContainer");
 const _useVirtualizedTableKeyboardNav = require("./hooks/useVirtualizedTableKeyboardNav");
-function VirtualizedTable({ width, height, density, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers }) {
+function VirtualizedTable({ width, height, density, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, cellConfigs }) {
     const virtuosoRef = (0, _react.useRef)(null);
     // Use a ref for these values because they are only needed for keyboard
     // focus interactions and setting them on state will lead to a significant
@@ -165,6 +165,7 @@ function VirtualizedTable({ width, height, density, onRowClick, onRowMouseOver,
                             column: i
                         };
                         const cellContext = cell.getContext();
+                        const cellConfig = cellConfigs === null || cellConfigs === void 0 ? void 0 : cellConfigs[cellContext.cell.id];
                         const cellRenderFn = cell.column.columnDef.cell;
                         const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;
                         const cellDescriptionDef = (_cell_column_columnDef_meta = cell.column.columnDef.meta) === null || _cell_column_columnDef_meta === void 0 ? void 0 : _cell_column_columnDef_meta.cellDescription;
@@ -179,7 +180,10 @@ function VirtualizedTable({ width, height, density, onRowClick, onRowMouseOver,
                             // cell content.
                             description = cellContent;
                         }
+                        var _cellConfig_textColor, _cellConfig_backgroundColor;
                         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableCell.TableCell, {
+                            "data-testid": cell.id,
+                            title: description || (cellConfig === null || cellConfig === void 0 ? void 0 : cellConfig.text) || cellContent,
                             width: cell.column.getSize() || 'auto',
                             align: (_cell_column_columnDef_meta1 = cell.column.columnDef.meta) === null || _cell_column_columnDef_meta1 === void 0 ? void 0 : _cell_column_columnDef_meta1.align,
                             density: density,
@@ -188,7 +192,9 @@ function VirtualizedTable({ width, height, density, onRowClick, onRowMouseOver,
                             isFirstColumn: i === 0,
                             isLastColumn: i === cells.length - 1,
                             description: description,
-                            children: cellContent
+                            color: (_cellConfig_textColor = cellConfig === null || cellConfig === void 0 ? void 0 : cellConfig.textColor) !== null && _cellConfig_textColor !== void 0 ? _cellConfig_textColor : undefined,
+                            backgroundColor: (_cellConfig_backgroundColor = cellConfig === null || cellConfig === void 0 ? void 0 : cellConfig.backgroundColor) !== null && _cellConfig_backgroundColor !== void 0 ? _cellConfig_backgroundColor : undefined,
+                            children: (cellConfig === null || cellConfig === void 0 ? void 0 : cellConfig.text) || cellContent
                         }, cell.id);
                     })
                 });

package/dist/cjs/TransformsEditor/TransformEditor.js

@@ -0,0 +1,299 @@
+// 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, "TransformEditor", {
+    enumerable: true,
+    get: function() {
+        return TransformEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function JoinByColumnValueTransformEditor({ value, onChange }) {
+    var _value_spec_columns;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        direction: "row",
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
+                freeSolo: true,
+                multiple: true,
+                id: "join-columns",
+                sx: {
+                    width: '100%'
+                },
+                options: [],
+                value: (_value_spec_columns = value.spec.columns) !== null && _value_spec_columns !== void 0 ? _value_spec_columns : [],
+                renderInput: (params)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        ...params,
+                        variant: "outlined",
+                        label: "Columns",
+                        required: true
+                    }),
+                onChange: (_, columns)=>{
+                    onChange({
+                        ...value,
+                        spec: {
+                            ...value.spec,
+                            columns: columns
+                        }
+                    });
+                }
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                label: "Enabled",
+                labelPlacement: "start",
+                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
+                    value: !value.spec.disabled,
+                    checked: !value.spec.disabled,
+                    onChange: (e)=>onChange({
+                            ...value,
+                            spec: {
+                                ...value.spec,
+                                disabled: !e.target.checked
+                            }
+                        })
+                })
+            })
+        ]
+    });
+}
+function MergeColumnsTransformEditor({ value, onChange }) {
+    var _value_spec_columns, _value_spec_name;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        direction: "row",
+        gap: 1,
+        alignItems: "center",
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
+                freeSolo: true,
+                multiple: true,
+                id: "merge-columns-columns",
+                sx: {
+                    width: '100%'
+                },
+                options: [],
+                value: (_value_spec_columns = value.spec.columns) !== null && _value_spec_columns !== void 0 ? _value_spec_columns : [],
+                renderInput: (params)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        ...params,
+                        variant: "outlined",
+                        label: "Columns",
+                        required: true
+                    }),
+                onChange: (_, columns)=>{
+                    onChange({
+                        ...value,
+                        spec: {
+                            ...value.spec,
+                            columns: columns
+                        }
+                    });
+                }
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                id: "merge-columns-name",
+                variant: "outlined",
+                label: "Output Name",
+                value: (_value_spec_name = value.spec.name) !== null && _value_spec_name !== void 0 ? _value_spec_name : '',
+                sx: {
+                    width: '100%'
+                },
+                onChange: (e)=>{
+                    onChange({
+                        ...value,
+                        spec: {
+                            ...value.spec,
+                            name: e.target.value
+                        }
+                    });
+                },
+                required: true
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                label: "Enabled",
+                labelPlacement: "start",
+                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
+                    value: !value.spec.disabled,
+                    checked: !value.spec.disabled,
+                    onChange: (e)=>onChange({
+                            ...value,
+                            spec: {
+                                ...value.spec,
+                                disabled: !e.target.checked
+                            }
+                        })
+                })
+            })
+        ]
+    });
+}
+function MergeIndexedColumnsTransformEditor({ value, onChange }) {
+    var _value_spec_column;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        direction: "row",
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                id: "merge-indexed-columns",
+                variant: "outlined",
+                label: "Column",
+                placeholder: "Example: 'value' for merging 'value #1', 'value #2' and 'value #...'",
+                value: (_value_spec_column = value.spec.column) !== null && _value_spec_column !== void 0 ? _value_spec_column : '',
+                sx: {
+                    width: '100%'
+                },
+                onChange: (e)=>{
+                    onChange({
+                        ...value,
+                        spec: {
+                            ...value.spec,
+                            column: e.target.value
+                        }
+                    });
+                },
+                required: true
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                label: "Enabled",
+                labelPlacement: "start",
+                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
+                    value: !value.spec.disabled,
+                    checked: !value.spec.disabled,
+                    onChange: (e)=>onChange({
+                            ...value,
+                            spec: {
+                                ...value.spec,
+                                disabled: !e.target.checked
+                            }
+                        })
+                })
+            })
+        ]
+    });
+}
+function MergeSeriesTransformEditor({ value, onChange }) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+        direction: "row",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+            label: "Enabled",
+            labelPlacement: "start",
+            control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
+                value: !value.spec.disabled,
+                checked: !value.spec.disabled,
+                onChange: (e)=>onChange({
+                        ...value,
+                        spec: {
+                            ...value.spec,
+                            disabled: !e.target.checked
+                        }
+                    })
+            })
+        })
+    });
+}
+function TransformEditor({ value, onChange, ...props }) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        gap: 2,
+        sx: {
+            width: '100%'
+        },
+        mt: 1,
+        ...props,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
+                select: true,
+                label: "Kind",
+                value: value.kind,
+                onChange: (e)=>onChange({
+                        ...value,
+                        kind: e.target.value
+                    }),
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                        value: "JoinByColumnValue",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    children: "Join by column value"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "caption",
+                                    children: "Regroup rows with equal cell value in a column"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                        value: "MergeColumns",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    children: "Merge columns"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "caption",
+                                    children: "Multiple columns are merged to one column"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                        value: "MergeIndexedColumns",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    children: "Merge indexed columns"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "caption",
+                                    children: "Indexed columns are merged to one column"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                        value: "MergeSeries",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    children: "Merge series"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "caption",
+                                    children: "Series will be merged by their labels"
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            value.kind === 'JoinByColumnValue' && /*#__PURE__*/ (0, _jsxruntime.jsx)(JoinByColumnValueTransformEditor, {
+                value: value,
+                onChange: onChange
+            }),
+            value.kind === 'MergeColumns' && /*#__PURE__*/ (0, _jsxruntime.jsx)(MergeColumnsTransformEditor, {
+                value: value,
+                onChange: onChange
+            }),
+            value.kind === 'MergeIndexedColumns' && /*#__PURE__*/ (0, _jsxruntime.jsx)(MergeIndexedColumnsTransformEditor, {
+                value: value,
+                onChange: onChange
+            }),
+            value.kind === 'MergeSeries' && /*#__PURE__*/ (0, _jsxruntime.jsx)(MergeSeriesTransformEditor, {
+                value: value,
+                onChange: onChange
+            })
+        ]
+    });
+}