@perses-dev/table-plugin 0.13.0 → 0.14.0-beta.1

package/lib/cjs/components/ColumnsEditor/ColumnEditorContainer.js

@@ -1,152 +0,0 @@
-// Copyright 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, "ColumnEditorContainer", {
-    enumerable: true,
-    get: function() {
-        return ColumnEditorContainer;
-    }
-});
-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 _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DeleteOutline"));
-const _EyeOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/EyeOutline"));
-const _EyeOffOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/EyeOffOutline"));
-const _components = require("@perses-dev/components");
-const _ColumnEditor = require("./ColumnEditor");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function ColumnEditorContainer({ column, isCollapsed, onChange, onCollapse, onDelete, onMoveUp, onMoveDown }) {
-    function handleHideColumn() {
-        onChange({
-            ...column,
-            hide: !column.hide
-        });
-    }
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.DragAndDropElement, {
-        data: column,
-        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": `column-toggle#${column.name}`,
-                                size: "small",
-                                onClick: ()=>onCollapse(!isCollapsed),
-                                children: isCollapsed ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronRight.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronDown.default, {})
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
-                                variant: "overline",
-                                component: "h4",
-                                sx: {
-                                    textTransform: 'none'
-                                },
-                                children: [
-                                    "COLUMN:",
-                                    ' ',
-                                    column.header ? /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
-                                        children: [
-                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("strong", {
-                                                children: column.header
-                                            }),
-                                            " (",
-                                            column.name,
-                                            ")"
-                                        ]
-                                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)("strong", {
-                                        children: column.name
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__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: column.hide ? 'Show column' : 'Hide column',
-                                        placement: "top",
-                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                                            size: "small",
-                                            sx: {
-                                                marginLeft: 'auto'
-                                            },
-                                            onClick: handleHideColumn,
-                                            children: column.hide ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_EyeOffOutline.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_EyeOutline.default, {})
-                                        }, "hide-column")
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
-                                        flexItem: true,
-                                        orientation: "vertical",
-                                        variant: "middle"
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
-                                title: "Remove column settings",
-                                placement: "top",
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                                    size: "small",
-                                    sx: {
-                                        marginLeft: 'auto'
-                                    },
-                                    onClick: onDelete,
-                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {})
-                                }, "delete-column-button")
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
-                                title: "Reorder column settings",
-                                placement: "top",
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.DragButton, {
-                                    onMoveUp: onMoveUp,
-                                    onMoveDown: onMoveDown,
-                                    menuSx: {
-                                        '.MuiPaper-root': {
-                                            backgroundColor: (theme)=>theme.palette.background.lighter
-                                        }
-                                    }
-                                }, "reorder-column-button")
-                            })
-                        ]
-                    })
-                ]
-            }),
-            !isCollapsed && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColumnEditor.ColumnEditor, {
-                    column: column,
-                    onChange: onChange
-                })
-            })
-        ]
-    });
-}

package/lib/cjs/components/ColumnsEditor/ColumnsEditor.js

@@ -1,108 +0,0 @@
-// Copyright 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, "ColumnsEditor", {
-    enumerable: true,
-    get: function() {
-        return ColumnsEditor;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _react = require("react");
-const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
-const _components = require("@perses-dev/components");
-const _ColumnEditorContainer = require("./ColumnEditorContainer");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function ColumnsEditor({ columnSettings, onChange }) {
-    const [columnsCollapsed, setColumnsCollapsed] = (0, _react.useState)(columnSettings.map(()=>true));
-    function handleColumnChange(index, column) {
-        const updatedColumns = [
-            ...columnSettings
-        ];
-        updatedColumns[index] = column;
-        onChange(updatedColumns);
-    }
-    function handleColumnAdd() {
-        const columnName = `column_${Object.keys(columnSettings).length}`;
-        const updatedColumns = [
-            ...columnSettings
-        ];
-        updatedColumns.push({
-            name: columnName
-        });
-        onChange(updatedColumns);
-        setColumnsCollapsed((prev)=>{
-            prev.push(false);
-            return [
-                ...prev
-            ];
-        });
-    }
-    function handleColumnDelete(index) {
-        const updatedColumns = [
-            ...columnSettings
-        ];
-        updatedColumns.splice(index, 1);
-        onChange(updatedColumns);
-        setColumnsCollapsed((prev)=>{
-            prev.splice(index, 1);
-            return [
-                ...prev
-            ];
-        });
-    }
-    function handleColumnCollapseExpand(index, collapsed) {
-        setColumnsCollapsed((prev)=>{
-            prev[index] = collapsed;
-            return [
-                ...prev
-            ];
-        });
-    }
-    (0, _components.useDragAndDropMonitor)({
-        elements: columnSettings,
-        accessKey: 'name',
-        onChange: onChange
-    });
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-        spacing: 1,
-        children: [
-            columnSettings.map((column, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_ColumnEditorContainer.ColumnEditorContainer, {
-                    column: column,
-                    isCollapsed: columnsCollapsed[i] ?? true,
-                    onChange: (updatedColumn)=>handleColumnChange(i, updatedColumn),
-                    onDelete: ()=>handleColumnDelete(i),
-                    onCollapse: (collapsed)=>handleColumnCollapseExpand(i, collapsed),
-                    onMoveUp: ()=>onChange((0, _components.handleMoveUp)(column, columnSettings)),
-                    onMoveDown: ()=>onChange((0, _components.handleMoveDown)(column, columnSettings))
-                }, i)),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                variant: "contained",
-                startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {}),
-                sx: {
-                    marginTop: 1
-                },
-                onClick: handleColumnAdd,
-                children: "Add Column Settings"
-            })
-        ]
-    });
-}

package/lib/cjs/components/ColumnsEditor/DataLinkEditorDialog.js

@@ -1,139 +0,0 @@
-// Copyright 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, "DataLinkEditor", {
-    enumerable: true,
-    get: function() {
-        return DataLinkEditor;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _components = require("@perses-dev/components");
-const _material = require("@mui/material");
-const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
-const _Minus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Minus"));
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-const DataLinkEditor = (props)=>{
-    const { onChange, column, column: { dataLink } } = props;
-    if (!dataLink) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-            sx: {
-                width: '100%',
-                alignItems: 'center'
-            },
-            direction: "row",
-            children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                    flex: 1,
-                    variant: "subtitle1",
-                    mb: 2,
-                    fontStyle: "italic",
-                    children: "No link defined"
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                    style: {
-                        width: 'fit-content',
-                        height: 'fit-content'
-                    },
-                    onClick: ()=>onChange({
-                            ...column,
-                            dataLink: {
-                                url: '',
-                                openNewTab: true,
-                                title: ''
-                            }
-                        }),
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {})
-                })
-            ]
-        });
-    }
-    const { url, openNewTab, title } = dataLink;
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-        sx: {
-            width: '100%',
-            alignItems: 'center'
-        },
-        direction: "row",
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.LinkEditorForm, {
-                mode: "inline",
-                url: {
-                    label: 'Url',
-                    onChange: (url)=>{
-                        onChange({
-                            ...column,
-                            dataLink: {
-                                ...dataLink,
-                                url
-                            }
-                        });
-                    },
-                    value: url,
-                    placeholder: 'URL',
-                    error: {
-                        hasError: false,
-                        helperText: ''
-                    }
-                },
-                name: {
-                    label: 'Name',
-                    onChange: (title)=>{
-                        onChange({
-                            ...column,
-                            dataLink: {
-                                ...dataLink,
-                                title
-                            }
-                        });
-                    },
-                    value: title ?? '',
-                    placeholder: 'Name'
-                },
-                newTabOpen: {
-                    label: 'Open in new tab',
-                    onChange: (openNewTab)=>{
-                        onChange({
-                            ...column,
-                            dataLink: {
-                                ...dataLink,
-                                openNewTab
-                            }
-                        });
-                    },
-                    value: openNewTab
-                }
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                style: {
-                    width: 'fit-content',
-                    height: 'fit-content'
-                },
-                onClick: ()=>{
-                    onChange({
-                        ...column,
-                        dataLink: undefined
-                    });
-                },
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Minus.default, {})
-            })
-        ]
-    });
-};

package/lib/cjs/components/ColumnsEditor/EmbeddedPanelOptionsEditor.js

@@ -1,124 +0,0 @@
-// Copyright 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, "EmbeddedPanelOptionsEditor", {
-    enumerable: true,
-    get: function() {
-        return EmbeddedPanelOptionsEditor;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _pluginsystem = require("@perses-dev/plugin-system");
-const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
-const _react = require("react");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function isSpecEmpty(spec) {
-    if (spec === undefined || spec === null) return true;
-    if (typeof spec !== 'object') return false;
-    return Object.keys(spec).length === 0;
-}
-function mergeWithPluginDefaults(plugin, spec) {
-    const initial = plugin.createInitialOptions() ?? {};
-    return (0, _merge.default)({}, initial, spec ?? {});
-}
-function EmbeddedPanelOptionsEditor({ kind, spec, onChange }) {
-    const { data: plugin, isLoading, isError, error } = (0, _pluginsystem.usePlugin)('Panel', kind);
-    const panelPlugin = plugin;
-    const mergedSpec = (0, _react.useMemo)(()=>{
-        if (!panelPlugin) {
-            return spec;
-        }
-        return mergeWithPluginDefaults(panelPlugin, spec);
-    }, [
-        panelPlugin,
-        spec
-    ]);
-    const onChangeRef = (0, _react.useRef)(onChange);
-    onChangeRef.current = onChange;
-    // Persist plugin defaults when the column still has an empty spec (e.g. after switching panel kind).
-    (0, _react.useEffect)(()=>{
-        if (!panelPlugin || !isSpecEmpty(spec)) {
-            return;
-        }
-        onChangeRef.current(mergeWithPluginDefaults(panelPlugin, spec));
-    }, [
-        panelPlugin,
-        kind,
-        spec
-    ]);
-    if (isLoading) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-            direction: "row",
-            alignItems: "center",
-            spacing: 1,
-            sx: {
-                py: 1
-            },
-            children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {
-                    size: 22
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                    variant: "body2",
-                    color: "text.secondary",
-                    children: "Loading panel settings…"
-                })
-            ]
-        });
-    }
-    if (isError || !plugin) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-            variant: "body2",
-            color: "error",
-            children: error?.message ?? 'Could not load panel plugin.'
-        });
-    }
-    const loadedPlugin = plugin;
-    const editorTabs = loadedPlugin.panelOptionsEditorComponents ?? [];
-    if (editorTabs.length === 0) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-            variant: "body2",
-            color: "text.secondary",
-            children: "This visualization has no editable settings."
-        });
-    }
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-        spacing: 2.5,
-        sx: {
-            width: '100%',
-            py: 1
-        },
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.OptionsEditorTabs, {
-            tabs: editorTabs.map((tab)=>{
-                const Content = tab.content;
-                return {
-                    label: tab.label,
-                    content: /*#__PURE__*/ (0, _jsxruntime.jsx)(Content, {
-                        value: mergedSpec,
-                        onChange: (next)=>{
-                            onChange(next);
-                        }
-                    })
-                };
-            })
-        })
-    });
-}

package/lib/cjs/components/ColumnsEditor/index.js

@@ -1,32 +0,0 @@
-// Copyright 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("./ColumnEditor"), exports);
-_export_star(require("./ColumnEditorContainer"), exports);
-_export_star(require("./ColumnsEditor"), 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;
-}