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

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

@@ -21,23 +21,14 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    TOOLTIP_MIN_WIDTH: function() {
-        return TOOLTIP_MIN_WIDTH;
-    },
-    TOOLTIP_MAX_WIDTH: function() {
-        return TOOLTIP_MAX_WIDTH;
-    },
-    TOOLTIP_MAX_HEIGHT: function() {
-        return TOOLTIP_MAX_HEIGHT;
-    },
-    TOOLTIP_LABELS_MAX_WIDTH: function() {
-        return TOOLTIP_LABELS_MAX_WIDTH;
+    DEFAULT_TOOLTIP_CONFIG: function() {
+        return DEFAULT_TOOLTIP_CONFIG;
     },
-    TOOLTIP_ADJUST_Y_POS_MULTIPLIER: function() {
-        return TOOLTIP_ADJUST_Y_POS_MULTIPLIER;
+    EMPHASIZED_SERIES_DESCRIPTION: function() {
+        return EMPHASIZED_SERIES_DESCRIPTION;
     },
-    TOOLTIP_PADDING: function() {
-        return TOOLTIP_PADDING;
+    EMPTY_TOOLTIP_DATA: function() {
+        return EMPTY_TOOLTIP_DATA;
     },
     FALLBACK_CHART_WIDTH: function() {
         return FALLBACK_CHART_WIDTH;
@@ -45,8 +36,11 @@ _export(exports, {
     NEARBY_SERIES_DESCRIPTION: function() {
         return NEARBY_SERIES_DESCRIPTION;
     },
-    EMPHASIZED_SERIES_DESCRIPTION: function() {
-        return EMPHASIZED_SERIES_DESCRIPTION;
+    PIN_TOOLTIP_HELP_TEXT: function() {
+        return PIN_TOOLTIP_HELP_TEXT;
+    },
+    TOOLTIP_ADJUST_Y_POS_MULTIPLIER: function() {
+        return TOOLTIP_ADJUST_Y_POS_MULTIPLIER;
     },
     TOOLTIP_BG_COLOR_FALLBACK: function() {
         return TOOLTIP_BG_COLOR_FALLBACK;
@@ -54,23 +48,38 @@ _export(exports, {
     TOOLTIP_DATE_FORMAT: function() {
         return TOOLTIP_DATE_FORMAT;
     },
-    defaultCursorData: function() {
-        return defaultCursorData;
+    TOOLTIP_LABELS_MAX_WIDTH: function() {
+        return TOOLTIP_LABELS_MAX_WIDTH;
     },
-    EMPTY_TOOLTIP_DATA: function() {
-        return EMPTY_TOOLTIP_DATA;
+    TOOLTIP_MAX_HEIGHT: function() {
+        return TOOLTIP_MAX_HEIGHT;
     },
-    useMousePosition: function() {
-        return useMousePosition;
+    TOOLTIP_MAX_WIDTH: function() {
+        return TOOLTIP_MAX_WIDTH;
     },
-    DEFAULT_TOOLTIP_CONFIG: function() {
-        return DEFAULT_TOOLTIP_CONFIG;
+    TOOLTIP_MIN_WIDTH: function() {
+        return TOOLTIP_MIN_WIDTH;
     },
-    PIN_TOOLTIP_HELP_TEXT: function() {
-        return PIN_TOOLTIP_HELP_TEXT;
+    TOOLTIP_PADDING: function() {
+        return TOOLTIP_PADDING;
     },
     UNPIN_TOOLTIP_HELP_TEXT: function() {
         return UNPIN_TOOLTIP_HELP_TEXT;
+    },
+    browser: function() {
+        return browser;
+    },
+    defaultCursorData: function() {
+        return defaultCursorData;
+    },
+    pointerEventsSupported: function() {
+        return pointerEventsSupported;
+    },
+    trackingEventName: function() {
+        return trackingEventName;
+    },
+    useMousePosition: function() {
+        return useMousePosition;
     }
 });
 const _react = require("react");
@@ -108,6 +117,14 @@ const defaultCursorData = {
     chartWidth: 0
 };
 const EMPTY_TOOLTIP_DATA = [];
+const browser = {
+    // IE 11 Trident/7.0; rv:11.0
+    ie: navigator.userAgent.match(/MSIE\s([\d.]+)/) || navigator.userAgent.match(/Trident\/.+?rv:(([\d.]+))/),
+    // IE 12 and 12+
+    edge: navigator.userAgent.match(/Edge?\/([\d.]+)/)
+};
+const pointerEventsSupported = 'onpointerdown' in window && (browser.edge || browser.ie && browser.ie[1] && +browser.ie[1] >= 11);
+const trackingEventName = pointerEventsSupported ? 'pointermove' : 'mousemove';
 const useMousePosition = ()=>{
     const [coords, setCoords] = (0, _react.useState)(null);
     (0, _react.useEffect)(()=>{
@@ -132,9 +149,12 @@ const useMousePosition = ()=>{
                 target: e.target
             });
         };
-        window.addEventListener('mousemove', setFromEvent);
+        // Devices that both enabled touch and mouse don't trigger touch events correctly
+        // which leads to missing zrender mousemove coordinates
+        // {@link https://github.com/ecomfe/zrender/blob/ae8cfaae186e6c1bf66b5dc431b2cdda5e67dacf/src/dom/HandlerProxy.ts#L423-L428 }
+        window.addEventListener(trackingEventName, setFromEvent);
         return ()=>{
-            window.removeEventListener('mousemove', setFromEvent);
+            window.removeEventListener(trackingEventName, setFromEvent);
         };
     }, []);
     return coords;

package/dist/cjs/TimeSeriesTooltip/utils.js

@@ -68,18 +68,16 @@ function assembleTransform(mousePos, chartWidth, pinnedPos, tooltipHeight, toolt
     return mousePos.plotCanvas.x > xPosAdjustThreshold && x > _tooltipmodel.TOOLTIP_MAX_WIDTH ? `translate3d(${x - cursorPaddingX}px, ${y}px, 0) translateX(-100%)` : `translate3d(${x + cursorPaddingX}px, ${y}px, 0)`;
 }
 function getTooltipStyles(theme, pinnedPos, maxHeight) {
-    var _theme_palette_designSystem;
     const adjustedMaxHeight = maxHeight ? maxHeight - _tooltipmodel.TOOLTIP_PADDING : undefined;
-    var _theme_palette_designSystem_grey_;
     return {
         minWidth: _tooltipmodel.TOOLTIP_MIN_WIDTH,
         maxWidth: _tooltipmodel.TOOLTIP_MAX_WIDTH,
-        maxHeight: adjustedMaxHeight !== null && adjustedMaxHeight !== void 0 ? adjustedMaxHeight : _tooltipmodel.TOOLTIP_MAX_HEIGHT,
+        maxHeight: adjustedMaxHeight ?? _tooltipmodel.TOOLTIP_MAX_HEIGHT,
         padding: 0,
         position: 'absolute',
         top: 0,
         left: 0,
-        backgroundColor: (_theme_palette_designSystem_grey_ = (_theme_palette_designSystem = theme.palette.designSystem) === null || _theme_palette_designSystem === void 0 ? void 0 : _theme_palette_designSystem.grey[800]) !== null && _theme_palette_designSystem_grey_ !== void 0 ? _theme_palette_designSystem_grey_ : _tooltipmodel.TOOLTIP_BG_COLOR_FALLBACK,
+        backgroundColor: theme.palette.designSystem?.grey[800] ?? _tooltipmodel.TOOLTIP_BG_COLOR_FALLBACK,
         borderRadius: '6px',
         color: '#fff',
         fontSize: '11px',

package/dist/cjs/ToolbarIconButton/ToolbarIconButton.js

@@ -0,0 +1,40 @@
+// Copyright 2023 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, "ToolbarIconButton", {
+    enumerable: true,
+    get: function() {
+        return ToolbarIconButton;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+function IconButton(props, ref) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(StyledIconButton, {
+        ref: ref,
+        variant: "outlined",
+        color: "secondary",
+        ...props
+    });
+}
+const StyledIconButton = (0, _material.styled)(_material.Button)(({ theme })=>({
+        // Using a button with some adjusted styles because it is easier to inherit
+        // styling and variants from themes than with an IconButton.
+        padding: theme.spacing(0.5),
+        minWidth: 'auto'
+    }));
+const ToolbarIconButton = /*#__PURE__*/ (0, _react.forwardRef)(IconButton);

package/dist/cjs/ToolbarIconButton/index.js

@@ -0,0 +1,30 @@
+// Copyright 2023 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
+});
+_export_star(require("./ToolbarIconButton"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/TransformsEditor/TransformEditor.js

@@ -0,0 +1,297 @@
+// 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");
+const _controls = require("../controls");
+function JoinByColumnValueTransformEditor({ value, onChange }) {
+    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 ?? [],
+                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 }) {
+    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 ?? [],
+                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)(_controls.TextField, {
+                id: "merge-columns-name",
+                variant: "outlined",
+                label: "Output Name",
+                value: value.spec.name ?? '',
+                sx: {
+                    width: '100%'
+                },
+                onChange: (name)=>{
+                    onChange({
+                        ...value,
+                        spec: {
+                            ...value.spec,
+                            name: name
+                        }
+                    });
+                },
+                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 }) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        direction: "row",
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_controls.TextField, {
+                id: "merge-indexed-columns",
+                variant: "outlined",
+                label: "Column",
+                placeholder: "Example: 'value' for merging 'value #1', 'value #2' and 'value #...'",
+                value: value.spec.column ?? '',
+                sx: {
+                    width: '100%'
+                },
+                onChange: (column)=>{
+                    onChange({
+                        ...value,
+                        spec: {
+                            ...value.spec,
+                            column: column
+                        }
+                    });
+                },
+                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)(_controls.TextField, {
+                select: true,
+                label: "Kind",
+                value: value.kind,
+                onChange: (kind)=>onChange({
+                        ...value,
+                        kind: kind
+                    }),
+                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
+            })
+        ]
+    });
+}

package/dist/cjs/TransformsEditor/TransformEditorContainer.js

@@ -0,0 +1,131 @@
+// 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, "TransformEditorContainer", {
+    enumerable: true,
+    get: function() {
+        return TransformEditorContainer;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _ChevronRight = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronRight"));
+const _ChevronDown = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronDown"));
+const _EyeOffOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/EyeOffOutline"));
+const _EyeOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/EyeOutline"));
+const _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DeleteOutline"));
+const _core = require("@perses-dev/core");
+const _TransformEditor = require("./TransformEditor");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function TransformEditorContainer({ index, value, isCollapsed, onChange, onCollapse, onDelete, ...props }) {
+    function handleTransformDisable() {
+        onChange({
+            ...value,
+            spec: {
+                ...value.spec,
+                disabled: !value.spec?.disabled
+            }
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        ...props,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                direction: "row",
+                alignItems: "center",
+                borderBottom: 1,
+                borderColor: (theme)=>theme.palette.divider,
+                justifyContent: "space-between",
+                gap: 4,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                        direction: "row",
+                        gap: 1,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                "data-testid": `transform-toggle#${index}`,
+                                size: "small",
+                                onClick: ()=>onCollapse(!isCollapsed),
+                                children: isCollapsed ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronRight.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronDown.default, {})
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                variant: "overline",
+                                component: "h4",
+                                sx: {
+                                    textTransform: 'none'
+                                },
+                                children: value.kind ? /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)("strong", {
+                                        children: _core.TRANSFORM_TEXT[value.kind]
+                                    })
+                                }) : /*#__PURE__*/ (0, _jsxruntime.jsx)("strong", {
+                                    children: "Select a transformation kind"
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                        direction: "row",
+                        gap: 1,
+                        children: [
+                            isCollapsed && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+                                        title: value.spec?.disabled ? 'Enable transformation' : 'Disable transformation',
+                                        placement: "top",
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                            size: "small",
+                                            sx: {
+                                                marginLeft: 'auto'
+                                            },
+                                            onClick: handleTransformDisable,
+                                            children: value.spec?.disabled ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_EyeOffOutline.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_EyeOutline.default, {})
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
+                                        flexItem: true,
+                                        orientation: "vertical",
+                                        variant: "middle"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+                                title: "Remove transformation",
+                                placement: "top",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                    size: "small",
+                                    sx: {
+                                        marginLeft: 'auto'
+                                    },
+                                    onClick: onDelete,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {})
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            !isCollapsed && /*#__PURE__*/ (0, _jsxruntime.jsx)(_TransformEditor.TransformEditor, {
+                value: value,
+                onChange: onChange
+            })
+        ]
+    });
+}