@perses-dev/table-plugin 0.11.0-rc.0 → 0.11.0

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

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/lib/cjs/components/ConditionalPanel.js

@@ -1,3 +1,15 @@
+// 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

package/lib/cjs/components/EmbeddedPanel.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// 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

package/lib/cjs/components/TableCellsEditor.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/lib/cjs/components/TableColumnsEditor.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/lib/cjs/components/TableItemSelectionActionsEditor.js

@@ -0,0 +1,44 @@
+// 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, "TableItemSelectionActionsEditor", {
+    enumerable: true,
+    get: function() {
+        return TableItemSelectionActionsEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _pluginsystem = require("@perses-dev/plugin-system");
+function TableItemSelectionActionsEditor({ value, onChange }) {
+    function handleActionsChange(actions) {
+        onChange({
+            ...value,
+            actions: actions
+        });
+    }
+    function handleSelectionChange(selection) {
+        onChange({
+            ...value,
+            selection: selection
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.ItemSelectionActionsEditor, {
+        actionOptions: value.actions,
+        onChangeActions: handleActionsChange,
+        selectionOptions: value.selection,
+        onChangeSelection: handleSelectionChange
+    });
+}

package/lib/cjs/components/TablePanel.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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
@@ -29,10 +29,12 @@ _export(exports, {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _react = require("react");
 const _core = require("@perses-dev/core");
-const _material = require("@mui/material");
+const _dashboards = require("@perses-dev/dashboards");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _react = require("react");
 const _models = require("../models");
 const _EmbeddedPanel = require("./EmbeddedPanel");
 function generateCellContentConfig(column) {
@@ -192,13 +194,17 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
  * Generate column config from column definitions, if a column has multiple definitions, the first one will be used.
  * If column is hidden, return undefined.
  * If column do not have a definition, return a default column config.
- */ function generateColumnConfig(name, columnSettings) {
+ */ function generateColumnConfig(name, columnSettings, allVariables) {
     for (const column of columnSettings){
         if (column.name === name) {
             if (column.hide) {
                 return undefined;
             }
             const { name, header, headerDescription, enableSorting, width, align, dataLink } = column;
+            const modifiedDataLink = dataLink ? {
+                ...dataLink,
+                url: (0, _pluginsystem.replaceVariablesInString)(dataLink.url, allVariables)
+            } : undefined;
             return {
                 accessorKey: name,
                 header: header ?? name,
@@ -206,7 +212,7 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
                 enableSorting,
                 width,
                 align,
-                dataLink,
+                dataLink: modifiedDataLink,
                 ...generateCellContentConfig(column)
             };
         }
@@ -224,6 +230,48 @@ function getTablePanelQueryOptions(spec) {
 }
 function TablePanel({ contentDimensions, spec, queryResults }) {
     const theme = (0, _material.useTheme)();
+    const allVariables = (0, _pluginsystem.useAllVariableValues)();
+    const selectionEnabled = spec.selection?.enabled ?? false;
+    const { selectionMap, setSelection, clearSelection } = (0, _components.useSelection)();
+    const itemActionsConfig = spec.actions ? spec.actions : undefined;
+    const itemActionsListConfig = itemActionsConfig?.enabled && itemActionsConfig.displayWithItem ? itemActionsConfig.actionsList : [];
+    const { getItemActionButtons, confirmDialog, actionButtons } = (0, _dashboards.useSelectionItemActions)({
+        actions: itemActionsListConfig,
+        variableState: allVariables
+    });
+    const filteredDataRef = (0, _react.useRef)([]);
+    // Convert selectionMap to TanStack's RowSelectionState format
+    const rowSelection = (0, _react.useMemo)(()=>{
+        const result = {};
+        selectionMap.forEach((_, id)=>{
+            result[id] = true;
+        });
+        return result;
+    }, [
+        selectionMap
+    ]);
+    const handleRowSelectionChange = (0, _react.useCallback)((newRowSelection)=>{
+        const newSelection = [];
+        for (const [id, isSelected] of Object.entries(newRowSelection)){
+            if (isSelected) {
+                const index = parseInt(id, 10);
+                if (filteredDataRef.current[index] !== undefined) {
+                    newSelection.push({
+                        id,
+                        item: filteredDataRef.current[index]
+                    });
+                }
+            }
+        }
+        if (newSelection.length === 0) {
+            clearSelection();
+        } else {
+            setSelection(newSelection);
+        }
+    }, [
+        setSelection,
+        clearSelection
+    ]);
     // TODO: handle other query types
     const queryMode = getTablePanelQueryOptions(spec).mode;
     const rawData = (0, _react.useMemo)(()=>{
@@ -274,7 +322,10 @@ function TablePanel({ contentDimensions, spec, queryResults }) {
         spec.columnSettings
     ]);
     // Transform will be applied by their orders on the original data
-    const data = (0, _core.transformData)(rawData, spec.transforms ?? []);
+    const data = (0, _react.useMemo)(()=>(0, _core.transformData)(rawData, spec.transforms ?? []), [
+        rawData,
+        spec.transforms
+    ]);
     const keys = (0, _react.useMemo)(()=>{
         const result = [];
         for (const entry of data){
@@ -307,7 +358,7 @@ function TablePanel({ contentDimensions, spec, queryResults }) {
         // Process columnSettings if they exist
         for (const columnSetting of spec.columnSettings ?? []){
             if (customizedColumns.has(columnSetting.name)) continue; // Skip duplicates
-            const columnConfig = generateColumnConfig(columnSetting.name, spec.columnSettings ?? []);
+            const columnConfig = generateColumnConfig(columnSetting.name, spec.columnSettings ?? [], allVariables);
             if (columnConfig !== undefined) {
                 columns.push(columnConfig);
                 customizedColumns.add(columnSetting.name);
@@ -317,7 +368,7 @@ function TablePanel({ contentDimensions, spec, queryResults }) {
         if (!spec.defaultColumnHidden) {
             for (const key of keys){
                 if (!customizedColumns.has(key)) {
-                    const columnConfig = generateColumnConfig(key, spec.columnSettings ?? []);
+                    const columnConfig = generateColumnConfig(key, spec.columnSettings ?? [], allVariables);
                     if (columnConfig !== undefined) {
                         columns.push(columnConfig);
                     }
@@ -328,7 +379,8 @@ function TablePanel({ contentDimensions, spec, queryResults }) {
     }, [
         keys,
         spec.columnSettings,
-        spec.defaultColumnHidden
+        spec.defaultColumnHidden,
+        allVariables
     ]);
     // Generate cell settings that will be used by the table to render cells (text color, background color, ...)
     const cellConfigs = (0, _react.useMemo)(()=>{
@@ -460,6 +512,8 @@ function TablePanel({ contentDimensions, spec, queryResults }) {
         columnFilters,
         spec.enableFiltering
     ]);
+    // Keep ref in sync with filtered data for use in selection handler
+    filteredDataRef.current = filteredData;
     const [pagination, setPagination] = (0, _react.useState)(spec.pagination ? {
         pageIndex: 0,
         pageSize: 10
@@ -496,6 +550,7 @@ function TablePanel({ contentDimensions, spec, queryResults }) {
     }
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
+            confirmDialog,
             spec.enableFiltering && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 style: {
                     display: 'flex',
@@ -590,7 +645,15 @@ function TablePanel({ contentDimensions, spec, queryResults }) {
                 sorting: sorting,
                 onSortingChange: setSorting,
                 pagination: pagination,
-                onPaginationChange: setPagination
+                onPaginationChange: setPagination,
+                checkboxSelection: selectionEnabled,
+                rowSelection: rowSelection,
+                onRowSelectionChange: handleRowSelectionChange,
+                getItemActions: ({ id, data })=>getItemActionButtons({
+                        id,
+                        data: data
+                    }),
+                hasItemActions: actionButtons && actionButtons.length > 0
             })
         ]
     });

package/lib/cjs/components/TableSettingsEditor.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/lib/cjs/components/TableTransformsEditor.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/lib/cjs/components/index.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// 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
@@ -19,6 +19,7 @@ _export_star(require("./ColumnsEditor"), exports);
 _export_star(require("./EmbeddedPanel"), exports);
 _export_star(require("./TableCellsEditor"), exports);
 _export_star(require("./TableColumnsEditor"), exports);
+_export_star(require("./TableItemSelectionActionsEditor"), exports);
 _export_star(require("./TablePanel"), exports);
 _export_star(require("./TableSettingsEditor"), exports);
 _export_star(require("./TableTransformsEditor"), exports);

package/lib/cjs/env.d.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/lib/cjs/getPluginModule.js

@@ -1,3 +1,15 @@
+// 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

package/lib/cjs/index-federation.js

@@ -40,7 +40,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-// Copyright 2024 The Perses Authors
+// 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

package/lib/cjs/index.js

@@ -1,3 +1,15 @@
+// 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

package/lib/cjs/models/index.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// 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

package/lib/cjs/models/model.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// 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

package/lib/cjs/models/table-model.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/lib/cjs/setup-tests.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/lib/cjs/test/mock-query-results.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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

package/lib/components/CellsEditor/CellsEditor.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/lib/components/CellsEditor/CellsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CellsEditor/CellsEditor.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 { ReactElement } from 'react';\nimport { CellSettings } from '../../models';\nimport { ConditionalPanel } from '../ConditionalPanel';\n\nexport interface CellsEditorProps {\n  cellSettings: CellSettings[];\n  onChange: (cellOptions: CellSettings[]) => void;\n}\n\nexport function CellsEditor({ cellSettings, onChange }: CellsEditorProps): ReactElement {\n  return (\n    <ConditionalPanel\n      cellSettings={cellSettings}\n      onChange={(updatedCellSettings) => onChange(updatedCellSettings || [])}\n    />\n  );\n}\n"],"names":["ConditionalPanel","CellsEditor","cellSettings","onChange","updatedCellSettings"],"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;;AAIjC,SAASA,gBAAgB,QAAQ,sBAAsB;AAOvD,OAAO,SAASC,YAAY,EAAEC,YAAY,EAAEC,QAAQ,EAAoB;IACtE,qBACE,KAACH;QACCE,cAAcA;QACdC,UAAU,CAACC,sBAAwBD,SAASC,uBAAuB,EAAE;;AAG3E"}
+{"version":3,"sources":["../../../../src/components/CellsEditor/CellsEditor.tsx"],"sourcesContent":["// Copyright 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 { ReactElement } from 'react';\nimport { CellSettings } from '../../models';\nimport { ConditionalPanel } from '../ConditionalPanel';\n\nexport interface CellsEditorProps {\n  cellSettings: CellSettings[];\n  onChange: (cellOptions: CellSettings[]) => void;\n}\n\nexport function CellsEditor({ cellSettings, onChange }: CellsEditorProps): ReactElement {\n  return (\n    <ConditionalPanel\n      cellSettings={cellSettings}\n      onChange={(updatedCellSettings) => onChange(updatedCellSettings || [])}\n    />\n  );\n}\n"],"names":["ConditionalPanel","CellsEditor","cellSettings","onChange","updatedCellSettings"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAIjC,SAASA,gBAAgB,QAAQ,sBAAsB;AAOvD,OAAO,SAASC,YAAY,EAAEC,YAAY,EAAEC,QAAQ,EAAoB;IACtE,qBACE,KAACH;QACCE,cAAcA;QACdC,UAAU,CAACC,sBAAwBD,SAASC,uBAAuB,EAAE;;AAG3E"}

package/lib/components/CellsEditor/index.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// 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

package/lib/components/CellsEditor/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CellsEditor/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 './CellsEditor';\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,gBAAgB"}
+{"version":3,"sources":["../../../../src/components/CellsEditor/index.ts"],"sourcesContent":["// Copyright 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 './CellsEditor';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,gBAAgB"}

package/lib/components/ColumnsEditor/ColumnEditor.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Copyright 2024 The Perses Authors
+// 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

package/lib/components/ColumnsEditor/ColumnEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ColumnsEditor/ColumnEditor.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, ButtonGroup, Stack, StackProps, Switch, TextField } from '@mui/material';\nimport { ReactElement, useState } from 'react';\nimport {\n  AlignSelector,\n  FormatControls,\n  OptionsEditorColumn,\n  OptionsEditorControl,\n  OptionsEditorGrid,\n  OptionsEditorGroup,\n  SortSelectorButtons,\n} from '@perses-dev/components';\nimport { FormatOptions } from '@perses-dev/core';\nimport { PluginKindSelect } from '@perses-dev/plugin-system';\n\nimport { ColumnSettings } from '../../models';\nimport { ConditionalPanel } from '../ConditionalPanel';\nimport { DataLinkEditor } from './DataLinkEditorDialog';\n\nconst DEFAULT_FORMAT: FormatOptions = {\n  unit: 'decimal',\n  shortValues: true,\n};\n\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\nexport interface ColumnEditorProps extends Omit<StackProps, OmittedMuiProps> {\n  column: ColumnSettings;\n  onChange: (column: ColumnSettings) => void;\n}\n\nexport function ColumnEditor({ column, onChange, ...others }: ColumnEditorProps): ReactElement {\n  const [width, setWidth] = useState<number>(\n    column.width === undefined || column.width === 'auto' ? 100 : column.width\n  );\n\n  return (\n    <Stack {...others}>\n      <OptionsEditorGrid>\n        <OptionsEditorColumn>\n          <OptionsEditorGroup title=\"Column\">\n            <OptionsEditorControl\n              label=\"Name*\"\n              control={\n                <TextField\n                  value={column.name}\n                  onChange={(e) => onChange({ ...column, name: e.target.value })}\n                  required\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Header\"\n              control={\n                <TextField\n                  value={column.header ?? ''}\n                  onChange={(e) => onChange({ ...column, header: e.target.value ? e.target.value : undefined })}\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Header Tooltip\"\n              control={\n                <TextField\n                  value={column.headerDescription ?? ''}\n                  onChange={(e) =>\n                    onChange({ ...column, headerDescription: e.target.value ? e.target.value : undefined })\n                  }\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Cell Tooltip\"\n              control={\n                <TextField\n                  value={column.cellDescription ?? ''}\n                  onChange={(e) =>\n                    onChange({ ...column, cellDescription: e.target.value ? e.target.value : undefined })\n                  }\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Enable sorting\"\n              control={\n                <Switch\n                  checked={column.enableSorting ?? false}\n                  onChange={(e) => onChange({ ...column, enableSorting: e.target.checked })}\n                />\n              }\n            />\n            {column.enableSorting && (\n              <OptionsEditorControl\n                label=\"Default Sort\"\n                control={\n                  <SortSelectorButtons\n                    size=\"medium\"\n                    value={column.sort}\n                    sx={{\n                      margin: 0.5,\n                    }}\n                    onChange={(sort) => onChange({ ...column, sort: sort })}\n                  />\n                }\n              />\n            )}\n          </OptionsEditorGroup>\n        </OptionsEditorColumn>\n\n        <OptionsEditorColumn>\n          <OptionsEditorGroup title=\"Visual\">\n            <OptionsEditorControl\n              label=\"Show column\"\n              control={\n                <Switch\n                  checked={!(column.hide ?? false)}\n                  onChange={(e) => onChange({ ...column, hide: !e.target.checked })}\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Display\"\n              control={\n                <ButtonGroup aria-label=\"Display\" size=\"small\">\n                  <Button\n                    variant={!column.plugin ? 'contained' : 'outlined'}\n                    onClick={() => onChange({ ...column, plugin: undefined })}\n                  >\n                    Text\n                  </Button>\n                  <Button\n                    variant={column.plugin ? 'contained' : 'outlined'}\n                    onClick={() => onChange({ ...column, plugin: { kind: 'StatChart', spec: {} } })}\n                  >\n                    Embedded Panel\n                  </Button>\n                </ButtonGroup>\n              }\n            />\n            {column.plugin ? (\n              <OptionsEditorControl\n                label=\"Panel Type\"\n                control={\n                  <PluginKindSelect\n                    pluginTypes={['Panel']}\n                    value={{ type: 'Panel', kind: column.plugin.kind }}\n                    onChange={(event) => onChange({ ...column, plugin: { kind: event.kind, spec: {} } })}\n                  />\n                }\n              />\n            ) : (\n              <FormatControls\n                value={column.format ?? DEFAULT_FORMAT}\n                onChange={(newFormat): void =>\n                  onChange({\n                    ...column,\n                    format: newFormat,\n                  })\n                }\n              />\n            )}\n            <OptionsEditorControl\n              label=\"Alignment\"\n              control={\n                <AlignSelector\n                  size=\"small\"\n                  value={column.align ?? 'left'}\n                  onChange={(align) => onChange({ ...column, align: align })}\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Custom width\"\n              control={\n                <Switch\n                  checked={column.width !== undefined && column.width !== 'auto'}\n                  onChange={(e) => onChange({ ...column, width: e.target.checked ? width : 'auto' })}\n                />\n              }\n            />\n            {column.width !== undefined && column.width !== 'auto' && (\n              <OptionsEditorControl\n                label=\"Width\"\n                control={\n                  <TextField\n                    type=\"number\"\n                    value={width}\n                    slotProps={{ htmlInput: { min: 1 } }}\n                    onChange={(e) => {\n                      setWidth(+e.target.value);\n                      onChange({ ...column, width: +e.target.value });\n                    }}\n                  />\n                }\n              />\n            )}\n          </OptionsEditorGroup>\n        </OptionsEditorColumn>\n        <OptionsEditorColumn>\n          <OptionsEditorGroup title=\"Link\">\n            <DataLinkEditor column={column} onChange={onChange} />\n          </OptionsEditorGroup>\n        </OptionsEditorColumn>\n      </OptionsEditorGrid>\n      <Stack sx={{ px: 8 }}>\n        <OptionsEditorGroup title=\"Conditional Cell Format\">\n          <ConditionalPanel\n            cellSettings={column.cellSettings}\n            onChange={(cellSettings) => onChange({ ...column, cellSettings })}\n          />\n        </OptionsEditorGroup>\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Button","ButtonGroup","Stack","Switch","TextField","useState","AlignSelector","FormatControls","OptionsEditorColumn","OptionsEditorControl","OptionsEditorGrid","OptionsEditorGroup","SortSelectorButtons","PluginKindSelect","ConditionalPanel","DataLinkEditor","DEFAULT_FORMAT","unit","shortValues","ColumnEditor","column","onChange","others","width","setWidth","undefined","title","label","control","value","name","e","target","required","header","headerDescription","cellDescription","checked","enableSorting","size","sort","sx","margin","hide","aria-label","variant","plugin","onClick","kind","spec","pluginTypes","type","event","format","newFormat","align","slotProps","htmlInput","min","px","cellSettings"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ColumnsEditor/ColumnEditor.tsx"],"sourcesContent":["// Copyright 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, ButtonGroup, Stack, StackProps, Switch, TextField } from '@mui/material';\nimport { ReactElement, useState } from 'react';\nimport {\n  AlignSelector,\n  FormatControls,\n  OptionsEditorColumn,\n  OptionsEditorControl,\n  OptionsEditorGrid,\n  OptionsEditorGroup,\n  SortSelectorButtons,\n} from '@perses-dev/components';\nimport { FormatOptions } from '@perses-dev/core';\nimport { PluginKindSelect } from '@perses-dev/plugin-system';\n\nimport { ColumnSettings } from '../../models';\nimport { ConditionalPanel } from '../ConditionalPanel';\nimport { DataLinkEditor } from './DataLinkEditorDialog';\n\nconst DEFAULT_FORMAT: FormatOptions = {\n  unit: 'decimal',\n  shortValues: true,\n};\n\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\nexport interface ColumnEditorProps extends Omit<StackProps, OmittedMuiProps> {\n  column: ColumnSettings;\n  onChange: (column: ColumnSettings) => void;\n}\n\nexport function ColumnEditor({ column, onChange, ...others }: ColumnEditorProps): ReactElement {\n  const [width, setWidth] = useState<number>(\n    column.width === undefined || column.width === 'auto' ? 100 : column.width\n  );\n\n  return (\n    <Stack {...others}>\n      <OptionsEditorGrid>\n        <OptionsEditorColumn>\n          <OptionsEditorGroup title=\"Column\">\n            <OptionsEditorControl\n              label=\"Name*\"\n              control={\n                <TextField\n                  value={column.name}\n                  onChange={(e) => onChange({ ...column, name: e.target.value })}\n                  required\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Header\"\n              control={\n                <TextField\n                  value={column.header ?? ''}\n                  onChange={(e) => onChange({ ...column, header: e.target.value ? e.target.value : undefined })}\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Header Tooltip\"\n              control={\n                <TextField\n                  value={column.headerDescription ?? ''}\n                  onChange={(e) =>\n                    onChange({ ...column, headerDescription: e.target.value ? e.target.value : undefined })\n                  }\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Cell Tooltip\"\n              control={\n                <TextField\n                  value={column.cellDescription ?? ''}\n                  onChange={(e) =>\n                    onChange({ ...column, cellDescription: e.target.value ? e.target.value : undefined })\n                  }\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Enable sorting\"\n              control={\n                <Switch\n                  checked={column.enableSorting ?? false}\n                  onChange={(e) => onChange({ ...column, enableSorting: e.target.checked })}\n                />\n              }\n            />\n            {column.enableSorting && (\n              <OptionsEditorControl\n                label=\"Default Sort\"\n                control={\n                  <SortSelectorButtons\n                    size=\"medium\"\n                    value={column.sort}\n                    sx={{\n                      margin: 0.5,\n                    }}\n                    onChange={(sort) => onChange({ ...column, sort: sort })}\n                  />\n                }\n              />\n            )}\n          </OptionsEditorGroup>\n        </OptionsEditorColumn>\n\n        <OptionsEditorColumn>\n          <OptionsEditorGroup title=\"Visual\">\n            <OptionsEditorControl\n              label=\"Show column\"\n              control={\n                <Switch\n                  checked={!(column.hide ?? false)}\n                  onChange={(e) => onChange({ ...column, hide: !e.target.checked })}\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Display\"\n              control={\n                <ButtonGroup aria-label=\"Display\" size=\"small\">\n                  <Button\n                    variant={!column.plugin ? 'contained' : 'outlined'}\n                    onClick={() => onChange({ ...column, plugin: undefined })}\n                  >\n                    Text\n                  </Button>\n                  <Button\n                    variant={column.plugin ? 'contained' : 'outlined'}\n                    onClick={() => onChange({ ...column, plugin: { kind: 'StatChart', spec: {} } })}\n                  >\n                    Embedded Panel\n                  </Button>\n                </ButtonGroup>\n              }\n            />\n            {column.plugin ? (\n              <OptionsEditorControl\n                label=\"Panel Type\"\n                control={\n                  <PluginKindSelect\n                    pluginTypes={['Panel']}\n                    value={{ type: 'Panel', kind: column.plugin.kind }}\n                    onChange={(event) => onChange({ ...column, plugin: { kind: event.kind, spec: {} } })}\n                  />\n                }\n              />\n            ) : (\n              <FormatControls\n                value={column.format ?? DEFAULT_FORMAT}\n                onChange={(newFormat): void =>\n                  onChange({\n                    ...column,\n                    format: newFormat,\n                  })\n                }\n              />\n            )}\n            <OptionsEditorControl\n              label=\"Alignment\"\n              control={\n                <AlignSelector\n                  size=\"small\"\n                  value={column.align ?? 'left'}\n                  onChange={(align) => onChange({ ...column, align: align })}\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Custom width\"\n              control={\n                <Switch\n                  checked={column.width !== undefined && column.width !== 'auto'}\n                  onChange={(e) => onChange({ ...column, width: e.target.checked ? width : 'auto' })}\n                />\n              }\n            />\n            {column.width !== undefined && column.width !== 'auto' && (\n              <OptionsEditorControl\n                label=\"Width\"\n                control={\n                  <TextField\n                    type=\"number\"\n                    value={width}\n                    slotProps={{ htmlInput: { min: 1 } }}\n                    onChange={(e) => {\n                      setWidth(+e.target.value);\n                      onChange({ ...column, width: +e.target.value });\n                    }}\n                  />\n                }\n              />\n            )}\n          </OptionsEditorGroup>\n        </OptionsEditorColumn>\n        <OptionsEditorColumn>\n          <OptionsEditorGroup title=\"Link\">\n            <DataLinkEditor column={column} onChange={onChange} />\n          </OptionsEditorGroup>\n        </OptionsEditorColumn>\n      </OptionsEditorGrid>\n      <Stack sx={{ px: 8 }}>\n        <OptionsEditorGroup title=\"Conditional Cell Format\">\n          <ConditionalPanel\n            cellSettings={column.cellSettings}\n            onChange={(cellSettings) => onChange({ ...column, cellSettings })}\n          />\n        </OptionsEditorGroup>\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Button","ButtonGroup","Stack","Switch","TextField","useState","AlignSelector","FormatControls","OptionsEditorColumn","OptionsEditorControl","OptionsEditorGrid","OptionsEditorGroup","SortSelectorButtons","PluginKindSelect","ConditionalPanel","DataLinkEditor","DEFAULT_FORMAT","unit","shortValues","ColumnEditor","column","onChange","others","width","setWidth","undefined","title","label","control","value","name","e","target","required","header","headerDescription","cellDescription","checked","enableSorting","size","sort","sx","margin","hide","aria-label","variant","plugin","onClick","kind","spec","pluginTypes","type","event","format","newFormat","align","slotProps","htmlInput","min","px","cellSettings"],"mappings":"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"}

package/lib/components/ColumnsEditor/ColumnEditorContainer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// Copyright 2024 The Perses Authors
+// 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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ColumnsEditor/ColumnEditorContainer.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 { Divider, IconButton, Stack, Tooltip, Typography } from '@mui/material';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport EyeIcon from 'mdi-material-ui/EyeOutline';\nimport EyeOffIcon from 'mdi-material-ui/EyeOffOutline';\nimport { DragAndDropElement, DragButton } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { ColumnEditor, ColumnEditorProps } from './ColumnEditor';\n\nexport interface ColumnEditorContainerProps extends ColumnEditorProps {\n  isCollapsed: boolean;\n  onCollapse: (collapsed: boolean) => void;\n  onDelete: () => void;\n  onMoveUp: () => void;\n  onMoveDown: () => void;\n}\n\nexport function ColumnEditorContainer({\n  column,\n  isCollapsed,\n  onChange,\n  onCollapse,\n  onDelete,\n  onMoveUp,\n  onMoveDown,\n}: ColumnEditorContainerProps): ReactElement {\n  function handleHideColumn(): void {\n    onChange({ ...column, hide: !column.hide });\n  }\n\n  return (\n    <DragAndDropElement data={column as unknown as Record<string, unknown>}>\n      <Stack\n        direction=\"row\"\n        alignItems=\"center\"\n        borderBottom={1}\n        borderColor={(theme) => theme.palette.divider}\n        justifyContent=\"space-between\"\n        gap={4}\n      >\n        <Stack direction=\"row\" gap={1}>\n          <IconButton\n            data-testid={`column-toggle#${column.name}`}\n            size=\"small\"\n            onClick={() => onCollapse(!isCollapsed)}\n          >\n            {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n          </IconButton>\n          <Typography variant=\"overline\" component=\"h4\" sx={{ textTransform: 'none' }}>\n            COLUMN:{' '}\n            {column.header ? (\n              <span>\n                <strong>{column.header}</strong> ({column.name})\n              </span>\n            ) : (\n              <strong>{column.name}</strong>\n            )}\n          </Typography>\n        </Stack>\n\n        <Stack direction=\"row\" gap={1}>\n          {isCollapsed && (\n            <>\n              <Tooltip title={column.hide ? 'Show column' : 'Hide column'} placement=\"top\">\n                <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={handleHideColumn} key=\"hide-column\">\n                  {column.hide ? <EyeOffIcon /> : <EyeIcon />}\n                </IconButton>\n              </Tooltip>\n              <Divider flexItem orientation=\"vertical\" variant=\"middle\" />\n            </>\n          )}\n          <Tooltip title=\"Remove column settings\" placement=\"top\">\n            <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={onDelete} key=\"delete-column-button\">\n              <DeleteIcon />\n            </IconButton>\n          </Tooltip>\n          <Tooltip title=\"Reorder column settings\" placement=\"top\">\n            <DragButton\n              onMoveUp={onMoveUp}\n              onMoveDown={onMoveDown}\n              menuSx={{\n                '.MuiPaper-root': { backgroundColor: (theme) => theme.palette.background.lighter },\n              }}\n              key=\"reorder-column-button\"\n            />\n          </Tooltip>\n        </Stack>\n      </Stack>\n\n      {/* When a <Grid> is inside a <Stack> with gap, the negative margin of the grid is not applied. Therefore, let's wrap it in a div. */}\n      {!isCollapsed && (\n        <div>\n          <ColumnEditor column={column} onChange={onChange} />\n        </div>\n      )}\n    </DragAndDropElement>\n  );\n}\n"],"names":["Divider","IconButton","Stack","Tooltip","Typography","ChevronRight","ChevronDown","DeleteIcon","EyeIcon","EyeOffIcon","DragAndDropElement","DragButton","ColumnEditor","ColumnEditorContainer","column","isCollapsed","onChange","onCollapse","onDelete","onMoveUp","onMoveDown","handleHideColumn","hide","data","direction","alignItems","borderBottom","borderColor","theme","palette","divider","justifyContent","gap","data-testid","name","size","onClick","variant","component","sx","textTransform","header","span","strong","title","placement","marginLeft","flexItem","orientation","menuSx","backgroundColor","background","lighter","div"],"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,OAAO,EAAEC,UAAU,EAAEC,KAAK,EAAEC,OAAO,EAAEC,UAAU,QAAQ,gBAAgB;AAChF,OAAOC,kBAAkB,+BAA+B;AACxD,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,aAAa,6BAA6B;AACjD,OAAOC,gBAAgB,gCAAgC;AACvD,SAASC,kBAAkB,EAAEC,UAAU,QAAQ,yBAAyB;AAExE,SAASC,YAAY,QAA2B,iBAAiB;AAUjE,OAAO,SAASC,sBAAsB,EACpCC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,UAAU,EACVC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACiB;IAC3B,SAASC;QACPL,SAAS;YAAE,GAAGF,MAAM;YAAEQ,MAAM,CAACR,OAAOQ,IAAI;QAAC;IAC3C;IAEA,qBACE,MAACZ;QAAmBa,MAAMT;;0BACxB,MAACZ;gBACCsB,WAAU;gBACVC,YAAW;gBACXC,cAAc;gBACdC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;gBAC7CC,gBAAe;gBACfC,KAAK;;kCAEL,MAAC9B;wBAAMsB,WAAU;wBAAMQ,KAAK;;0CAC1B,KAAC/B;gCACCgC,eAAa,CAAC,cAAc,EAAEnB,OAAOoB,IAAI,EAAE;gCAC3CC,MAAK;gCACLC,SAAS,IAAMnB,WAAW,CAACF;0CAE1BA,4BAAc,KAACV,kCAAkB,KAACC;;0CAErC,MAACF;gCAAWiC,SAAQ;gCAAWC,WAAU;gCAAKC,IAAI;oCAAEC,eAAe;gCAAO;;oCAAG;oCACnE;oCACP1B,OAAO2B,MAAM,iBACZ,MAACC;;0DACC,KAACC;0DAAQ7B,OAAO2B,MAAM;;4CAAU;4CAAG3B,OAAOoB,IAAI;4CAAC;;uDAGjD,KAACS;kDAAQ7B,OAAOoB,IAAI;;;;;;kCAK1B,MAAChC;wBAAMsB,WAAU;wBAAMQ,KAAK;;4BACzBjB,6BACC;;kDACE,KAACZ;wCAAQyC,OAAO9B,OAAOQ,IAAI,GAAG,gBAAgB;wCAAeuB,WAAU;kDACrE,cAAA,KAAC5C;4CAAWkC,MAAK;4CAAQI,IAAI;gDAAEO,YAAY;4CAAO;4CAAGV,SAASf;sDAC3DP,OAAOQ,IAAI,iBAAG,KAACb,gCAAgB,KAACD;2CADiD;;kDAItF,KAACR;wCAAQ+C,QAAQ;wCAACC,aAAY;wCAAWX,SAAQ;;;;0CAGrD,KAAClC;gCAAQyC,OAAM;gCAAyBC,WAAU;0CAChD,cAAA,KAAC5C;oCAAWkC,MAAK;oCAAQI,IAAI;wCAAEO,YAAY;oCAAO;oCAAGV,SAASlB;8CAC5D,cAAA,KAACX;mCADyE;;0CAI9E,KAACJ;gCAAQyC,OAAM;gCAA0BC,WAAU;0CACjD,cAAA,KAAClC;oCACCQ,UAAUA;oCACVC,YAAYA;oCACZ6B,QAAQ;wCACN,kBAAkB;4CAAEC,iBAAiB,CAACtB,QAAUA,MAAMC,OAAO,CAACsB,UAAU,CAACC,OAAO;wCAAC;oCACnF;mCACI;;;;;;YAOX,CAACrC,6BACA,KAACsC;0BACC,cAAA,KAACzC;oBAAaE,QAAQA;oBAAQE,UAAUA;;;;;AAKlD"}
+{"version":3,"sources":["../../../../src/components/ColumnsEditor/ColumnEditorContainer.tsx"],"sourcesContent":["// Copyright 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 { Divider, IconButton, Stack, Tooltip, Typography } from '@mui/material';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport EyeIcon from 'mdi-material-ui/EyeOutline';\nimport EyeOffIcon from 'mdi-material-ui/EyeOffOutline';\nimport { DragAndDropElement, DragButton } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { ColumnEditor, ColumnEditorProps } from './ColumnEditor';\n\nexport interface ColumnEditorContainerProps extends ColumnEditorProps {\n  isCollapsed: boolean;\n  onCollapse: (collapsed: boolean) => void;\n  onDelete: () => void;\n  onMoveUp: () => void;\n  onMoveDown: () => void;\n}\n\nexport function ColumnEditorContainer({\n  column,\n  isCollapsed,\n  onChange,\n  onCollapse,\n  onDelete,\n  onMoveUp,\n  onMoveDown,\n}: ColumnEditorContainerProps): ReactElement {\n  function handleHideColumn(): void {\n    onChange({ ...column, hide: !column.hide });\n  }\n\n  return (\n    <DragAndDropElement data={column as unknown as Record<string, unknown>}>\n      <Stack\n        direction=\"row\"\n        alignItems=\"center\"\n        borderBottom={1}\n        borderColor={(theme) => theme.palette.divider}\n        justifyContent=\"space-between\"\n        gap={4}\n      >\n        <Stack direction=\"row\" gap={1}>\n          <IconButton\n            data-testid={`column-toggle#${column.name}`}\n            size=\"small\"\n            onClick={() => onCollapse(!isCollapsed)}\n          >\n            {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n          </IconButton>\n          <Typography variant=\"overline\" component=\"h4\" sx={{ textTransform: 'none' }}>\n            COLUMN:{' '}\n            {column.header ? (\n              <span>\n                <strong>{column.header}</strong> ({column.name})\n              </span>\n            ) : (\n              <strong>{column.name}</strong>\n            )}\n          </Typography>\n        </Stack>\n\n        <Stack direction=\"row\" gap={1}>\n          {isCollapsed && (\n            <>\n              <Tooltip title={column.hide ? 'Show column' : 'Hide column'} placement=\"top\">\n                <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={handleHideColumn} key=\"hide-column\">\n                  {column.hide ? <EyeOffIcon /> : <EyeIcon />}\n                </IconButton>\n              </Tooltip>\n              <Divider flexItem orientation=\"vertical\" variant=\"middle\" />\n            </>\n          )}\n          <Tooltip title=\"Remove column settings\" placement=\"top\">\n            <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={onDelete} key=\"delete-column-button\">\n              <DeleteIcon />\n            </IconButton>\n          </Tooltip>\n          <Tooltip title=\"Reorder column settings\" placement=\"top\">\n            <DragButton\n              onMoveUp={onMoveUp}\n              onMoveDown={onMoveDown}\n              menuSx={{\n                '.MuiPaper-root': { backgroundColor: (theme) => theme.palette.background.lighter },\n              }}\n              key=\"reorder-column-button\"\n            />\n          </Tooltip>\n        </Stack>\n      </Stack>\n\n      {/* When a <Grid> is inside a <Stack> with gap, the negative margin of the grid is not applied. Therefore, let's wrap it in a div. */}\n      {!isCollapsed && (\n        <div>\n          <ColumnEditor column={column} onChange={onChange} />\n        </div>\n      )}\n    </DragAndDropElement>\n  );\n}\n"],"names":["Divider","IconButton","Stack","Tooltip","Typography","ChevronRight","ChevronDown","DeleteIcon","EyeIcon","EyeOffIcon","DragAndDropElement","DragButton","ColumnEditor","ColumnEditorContainer","column","isCollapsed","onChange","onCollapse","onDelete","onMoveUp","onMoveDown","handleHideColumn","hide","data","direction","alignItems","borderBottom","borderColor","theme","palette","divider","justifyContent","gap","data-testid","name","size","onClick","variant","component","sx","textTransform","header","span","strong","title","placement","marginLeft","flexItem","orientation","menuSx","backgroundColor","background","lighter","div"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,OAAO,EAAEC,UAAU,EAAEC,KAAK,EAAEC,OAAO,EAAEC,UAAU,QAAQ,gBAAgB;AAChF,OAAOC,kBAAkB,+BAA+B;AACxD,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,aAAa,6BAA6B;AACjD,OAAOC,gBAAgB,gCAAgC;AACvD,SAASC,kBAAkB,EAAEC,UAAU,QAAQ,yBAAyB;AAExE,SAASC,YAAY,QAA2B,iBAAiB;AAUjE,OAAO,SAASC,sBAAsB,EACpCC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,UAAU,EACVC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACiB;IAC3B,SAASC;QACPL,SAAS;YAAE,GAAGF,MAAM;YAAEQ,MAAM,CAACR,OAAOQ,IAAI;QAAC;IAC3C;IAEA,qBACE,MAACZ;QAAmBa,MAAMT;;0BACxB,MAACZ;gBACCsB,WAAU;gBACVC,YAAW;gBACXC,cAAc;gBACdC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;gBAC7CC,gBAAe;gBACfC,KAAK;;kCAEL,MAAC9B;wBAAMsB,WAAU;wBAAMQ,KAAK;;0CAC1B,KAAC/B;gCACCgC,eAAa,CAAC,cAAc,EAAEnB,OAAOoB,IAAI,EAAE;gCAC3CC,MAAK;gCACLC,SAAS,IAAMnB,WAAW,CAACF;0CAE1BA,4BAAc,KAACV,kCAAkB,KAACC;;0CAErC,MAACF;gCAAWiC,SAAQ;gCAAWC,WAAU;gCAAKC,IAAI;oCAAEC,eAAe;gCAAO;;oCAAG;oCACnE;oCACP1B,OAAO2B,MAAM,iBACZ,MAACC;;0DACC,KAACC;0DAAQ7B,OAAO2B,MAAM;;4CAAU;4CAAG3B,OAAOoB,IAAI;4CAAC;;uDAGjD,KAACS;kDAAQ7B,OAAOoB,IAAI;;;;;;kCAK1B,MAAChC;wBAAMsB,WAAU;wBAAMQ,KAAK;;4BACzBjB,6BACC;;kDACE,KAACZ;wCAAQyC,OAAO9B,OAAOQ,IAAI,GAAG,gBAAgB;wCAAeuB,WAAU;kDACrE,cAAA,KAAC5C;4CAAWkC,MAAK;4CAAQI,IAAI;gDAAEO,YAAY;4CAAO;4CAAGV,SAASf;sDAC3DP,OAAOQ,IAAI,iBAAG,KAACb,gCAAgB,KAACD;2CADiD;;kDAItF,KAACR;wCAAQ+C,QAAQ;wCAACC,aAAY;wCAAWX,SAAQ;;;;0CAGrD,KAAClC;gCAAQyC,OAAM;gCAAyBC,WAAU;0CAChD,cAAA,KAAC5C;oCAAWkC,MAAK;oCAAQI,IAAI;wCAAEO,YAAY;oCAAO;oCAAGV,SAASlB;8CAC5D,cAAA,KAACX;mCADyE;;0CAI9E,KAACJ;gCAAQyC,OAAM;gCAA0BC,WAAU;0CACjD,cAAA,KAAClC;oCACCQ,UAAUA;oCACVC,YAAYA;oCACZ6B,QAAQ;wCACN,kBAAkB;4CAAEC,iBAAiB,CAACtB,QAAUA,MAAMC,OAAO,CAACsB,UAAU,CAACC,OAAO;wCAAC;oCACnF;mCACI;;;;;;YAOX,CAACrC,6BACA,KAACsC;0BACC,cAAA,KAACzC;oBAAaE,QAAQA;oBAAQE,UAAUA;;;;;AAKlD"}

package/lib/components/ColumnsEditor/ColumnsEditor.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Copyright 2024 The Perses Authors
+// 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

package/lib/components/ColumnsEditor/ColumnsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ColumnsEditor/ColumnsEditor.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, Stack } from '@mui/material';\nimport { ReactElement, useState } from 'react';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { handleMoveDown, handleMoveUp, useDragAndDropMonitor } from '@perses-dev/components';\nimport { ColumnSettings } from '../../models';\nimport { ColumnEditorContainer } from './ColumnEditorContainer';\n\nexport interface ColumnsEditorProps {\n  columnSettings: ColumnSettings[];\n  onChange: (columnOptions: ColumnSettings[]) => void;\n}\n\nexport function ColumnsEditor({ columnSettings, onChange }: ColumnsEditorProps): ReactElement {\n  const [columnsCollapsed, setColumnsCollapsed] = useState(columnSettings.map(() => true));\n\n  function handleColumnChange(index: number, column: ColumnSettings): void {\n    const updatedColumns = [...columnSettings];\n    updatedColumns[index] = column;\n    onChange(updatedColumns);\n  }\n\n  function handleColumnAdd(): void {\n    const columnName: string = `column_${Object.keys(columnSettings).length}`;\n    const updatedColumns = [...columnSettings];\n    updatedColumns.push({ name: columnName });\n    onChange(updatedColumns);\n    setColumnsCollapsed((prev) => {\n      prev.push(false);\n      return [...prev];\n    });\n  }\n\n  function handleColumnDelete(index: number): void {\n    const updatedColumns = [...columnSettings];\n    updatedColumns.splice(index, 1);\n    onChange(updatedColumns);\n    setColumnsCollapsed((prev) => {\n      prev.splice(index, 1);\n      return [...prev];\n    });\n  }\n\n  function handleColumnCollapseExpand(index: number, collapsed: boolean): void {\n    setColumnsCollapsed((prev) => {\n      prev[index] = collapsed;\n      return [...prev];\n    });\n  }\n\n  useDragAndDropMonitor({\n    elements: columnSettings as unknown as Array<Record<string, unknown>>,\n    accessKey: 'name',\n    onChange: onChange as unknown as (elements: Array<Record<string, unknown>>) => void,\n  });\n\n  return (\n    <Stack spacing={1}>\n      {columnSettings.map((column, i) => (\n        <ColumnEditorContainer\n          key={i}\n          column={column}\n          isCollapsed={columnsCollapsed[i] ?? true}\n          onChange={(updatedColumn: ColumnSettings) => handleColumnChange(i, updatedColumn)}\n          onDelete={() => handleColumnDelete(i)}\n          onCollapse={(collapsed) => handleColumnCollapseExpand(i, collapsed)}\n          onMoveUp={() => onChange(handleMoveUp(column, columnSettings))}\n          onMoveDown={() => onChange(handleMoveDown(column, columnSettings))}\n        />\n      ))}\n\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleColumnAdd}>\n        Add Column Settings\n      </Button>\n    </Stack>\n  );\n}\n"],"names":["Button","Stack","useState","AddIcon","handleMoveDown","handleMoveUp","useDragAndDropMonitor","ColumnEditorContainer","ColumnsEditor","columnSettings","onChange","columnsCollapsed","setColumnsCollapsed","map","handleColumnChange","index","column","updatedColumns","handleColumnAdd","columnName","Object","keys","length","push","name","prev","handleColumnDelete","splice","handleColumnCollapseExpand","collapsed","elements","accessKey","spacing","i","isCollapsed","updatedColumn","onDelete","onCollapse","onMoveUp","onMoveDown","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;AAEjC,SAASA,MAAM,EAAEC,KAAK,QAAQ,gBAAgB;AAC9C,SAAuBC,QAAQ,QAAQ,QAAQ;AAC/C,OAAOC,aAAa,uBAAuB;AAC3C,SAASC,cAAc,EAAEC,YAAY,EAAEC,qBAAqB,QAAQ,yBAAyB;AAE7F,SAASC,qBAAqB,QAAQ,0BAA0B;AAOhE,OAAO,SAASC,cAAc,EAAEC,cAAc,EAAEC,QAAQ,EAAsB;IAC5E,MAAM,CAACC,kBAAkBC,oBAAoB,GAAGV,SAASO,eAAeI,GAAG,CAAC,IAAM;IAElF,SAASC,mBAAmBC,KAAa,EAAEC,MAAsB;QAC/D,MAAMC,iBAAiB;eAAIR;SAAe;QAC1CQ,cAAc,CAACF,MAAM,GAAGC;QACxBN,SAASO;IACX;IAEA,SAASC;QACP,MAAMC,aAAqB,CAAC,OAAO,EAAEC,OAAOC,IAAI,CAACZ,gBAAgBa,MAAM,EAAE;QACzE,MAAML,iBAAiB;eAAIR;SAAe;QAC1CQ,eAAeM,IAAI,CAAC;YAAEC,MAAML;QAAW;QACvCT,SAASO;QACTL,oBAAoB,CAACa;YACnBA,KAAKF,IAAI,CAAC;YACV,OAAO;mBAAIE;aAAK;QAClB;IACF;IAEA,SAASC,mBAAmBX,KAAa;QACvC,MAAME,iBAAiB;eAAIR;SAAe;QAC1CQ,eAAeU,MAAM,CAACZ,OAAO;QAC7BL,SAASO;QACTL,oBAAoB,CAACa;YACnBA,KAAKE,MAAM,CAACZ,OAAO;YACnB,OAAO;mBAAIU;aAAK;QAClB;IACF;IAEA,SAASG,2BAA2Bb,KAAa,EAAEc,SAAkB;QACnEjB,oBAAoB,CAACa;YACnBA,IAAI,CAACV,MAAM,GAAGc;YACd,OAAO;mBAAIJ;aAAK;QAClB;IACF;IAEAnB,sBAAsB;QACpBwB,UAAUrB;QACVsB,WAAW;QACXrB,UAAUA;IACZ;IAEA,qBACE,MAACT;QAAM+B,SAAS;;YACbvB,eAAeI,GAAG,CAAC,CAACG,QAAQiB,kBAC3B,KAAC1B;oBAECS,QAAQA;oBACRkB,aAAavB,gBAAgB,CAACsB,EAAE,IAAI;oBACpCvB,UAAU,CAACyB,gBAAkCrB,mBAAmBmB,GAAGE;oBACnEC,UAAU,IAAMV,mBAAmBO;oBACnCI,YAAY,CAACR,YAAcD,2BAA2BK,GAAGJ;oBACzDS,UAAU,IAAM5B,SAASL,aAAaW,QAAQP;oBAC9C8B,YAAY,IAAM7B,SAASN,eAAeY,QAAQP;mBAP7CwB;0BAWT,KAACjC;gBAAOwC,SAAQ;gBAAYC,yBAAW,KAACtC;gBAAYuC,IAAI;oBAAEC,WAAW;gBAAE;gBAAGC,SAAS1B;0BAAiB;;;;AAK1G"}
+{"version":3,"sources":["../../../../src/components/ColumnsEditor/ColumnsEditor.tsx"],"sourcesContent":["// Copyright 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, Stack } from '@mui/material';\nimport { ReactElement, useState } from 'react';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { handleMoveDown, handleMoveUp, useDragAndDropMonitor } from '@perses-dev/components';\nimport { ColumnSettings } from '../../models';\nimport { ColumnEditorContainer } from './ColumnEditorContainer';\n\nexport interface ColumnsEditorProps {\n  columnSettings: ColumnSettings[];\n  onChange: (columnOptions: ColumnSettings[]) => void;\n}\n\nexport function ColumnsEditor({ columnSettings, onChange }: ColumnsEditorProps): ReactElement {\n  const [columnsCollapsed, setColumnsCollapsed] = useState(columnSettings.map(() => true));\n\n  function handleColumnChange(index: number, column: ColumnSettings): void {\n    const updatedColumns = [...columnSettings];\n    updatedColumns[index] = column;\n    onChange(updatedColumns);\n  }\n\n  function handleColumnAdd(): void {\n    const columnName: string = `column_${Object.keys(columnSettings).length}`;\n    const updatedColumns = [...columnSettings];\n    updatedColumns.push({ name: columnName });\n    onChange(updatedColumns);\n    setColumnsCollapsed((prev) => {\n      prev.push(false);\n      return [...prev];\n    });\n  }\n\n  function handleColumnDelete(index: number): void {\n    const updatedColumns = [...columnSettings];\n    updatedColumns.splice(index, 1);\n    onChange(updatedColumns);\n    setColumnsCollapsed((prev) => {\n      prev.splice(index, 1);\n      return [...prev];\n    });\n  }\n\n  function handleColumnCollapseExpand(index: number, collapsed: boolean): void {\n    setColumnsCollapsed((prev) => {\n      prev[index] = collapsed;\n      return [...prev];\n    });\n  }\n\n  useDragAndDropMonitor({\n    elements: columnSettings as unknown as Array<Record<string, unknown>>,\n    accessKey: 'name',\n    onChange: onChange as unknown as (elements: Array<Record<string, unknown>>) => void,\n  });\n\n  return (\n    <Stack spacing={1}>\n      {columnSettings.map((column, i) => (\n        <ColumnEditorContainer\n          key={i}\n          column={column}\n          isCollapsed={columnsCollapsed[i] ?? true}\n          onChange={(updatedColumn: ColumnSettings) => handleColumnChange(i, updatedColumn)}\n          onDelete={() => handleColumnDelete(i)}\n          onCollapse={(collapsed) => handleColumnCollapseExpand(i, collapsed)}\n          onMoveUp={() => onChange(handleMoveUp(column, columnSettings))}\n          onMoveDown={() => onChange(handleMoveDown(column, columnSettings))}\n        />\n      ))}\n\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleColumnAdd}>\n        Add Column Settings\n      </Button>\n    </Stack>\n  );\n}\n"],"names":["Button","Stack","useState","AddIcon","handleMoveDown","handleMoveUp","useDragAndDropMonitor","ColumnEditorContainer","ColumnsEditor","columnSettings","onChange","columnsCollapsed","setColumnsCollapsed","map","handleColumnChange","index","column","updatedColumns","handleColumnAdd","columnName","Object","keys","length","push","name","prev","handleColumnDelete","splice","handleColumnCollapseExpand","collapsed","elements","accessKey","spacing","i","isCollapsed","updatedColumn","onDelete","onCollapse","onMoveUp","onMoveDown","variant","startIcon","sx","marginTop","onClick"],"mappings":";AAAA,+BAA+B;AAC/B,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,KAAK,QAAQ,gBAAgB;AAC9C,SAAuBC,QAAQ,QAAQ,QAAQ;AAC/C,OAAOC,aAAa,uBAAuB;AAC3C,SAASC,cAAc,EAAEC,YAAY,EAAEC,qBAAqB,QAAQ,yBAAyB;AAE7F,SAASC,qBAAqB,QAAQ,0BAA0B;AAOhE,OAAO,SAASC,cAAc,EAAEC,cAAc,EAAEC,QAAQ,EAAsB;IAC5E,MAAM,CAACC,kBAAkBC,oBAAoB,GAAGV,SAASO,eAAeI,GAAG,CAAC,IAAM;IAElF,SAASC,mBAAmBC,KAAa,EAAEC,MAAsB;QAC/D,MAAMC,iBAAiB;eAAIR;SAAe;QAC1CQ,cAAc,CAACF,MAAM,GAAGC;QACxBN,SAASO;IACX;IAEA,SAASC;QACP,MAAMC,aAAqB,CAAC,OAAO,EAAEC,OAAOC,IAAI,CAACZ,gBAAgBa,MAAM,EAAE;QACzE,MAAML,iBAAiB;eAAIR;SAAe;QAC1CQ,eAAeM,IAAI,CAAC;YAAEC,MAAML;QAAW;QACvCT,SAASO;QACTL,oBAAoB,CAACa;YACnBA,KAAKF,IAAI,CAAC;YACV,OAAO;mBAAIE;aAAK;QAClB;IACF;IAEA,SAASC,mBAAmBX,KAAa;QACvC,MAAME,iBAAiB;eAAIR;SAAe;QAC1CQ,eAAeU,MAAM,CAACZ,OAAO;QAC7BL,SAASO;QACTL,oBAAoB,CAACa;YACnBA,KAAKE,MAAM,CAACZ,OAAO;YACnB,OAAO;mBAAIU;aAAK;QAClB;IACF;IAEA,SAASG,2BAA2Bb,KAAa,EAAEc,SAAkB;QACnEjB,oBAAoB,CAACa;YACnBA,IAAI,CAACV,MAAM,GAAGc;YACd,OAAO;mBAAIJ;aAAK;QAClB;IACF;IAEAnB,sBAAsB;QACpBwB,UAAUrB;QACVsB,WAAW;QACXrB,UAAUA;IACZ;IAEA,qBACE,MAACT;QAAM+B,SAAS;;YACbvB,eAAeI,GAAG,CAAC,CAACG,QAAQiB,kBAC3B,KAAC1B;oBAECS,QAAQA;oBACRkB,aAAavB,gBAAgB,CAACsB,EAAE,IAAI;oBACpCvB,UAAU,CAACyB,gBAAkCrB,mBAAmBmB,GAAGE;oBACnEC,UAAU,IAAMV,mBAAmBO;oBACnCI,YAAY,CAACR,YAAcD,2BAA2BK,GAAGJ;oBACzDS,UAAU,IAAM5B,SAASL,aAAaW,QAAQP;oBAC9C8B,YAAY,IAAM7B,SAASN,eAAeY,QAAQP;mBAP7CwB;0BAWT,KAACjC;gBAAOwC,SAAQ;gBAAYC,yBAAW,KAACtC;gBAAYuC,IAAI;oBAAEC,WAAW;gBAAE;gBAAGC,SAAS1B;0BAAiB;;;;AAK1G"}

package/lib/components/ColumnsEditor/DataLinkEditorDialog.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Copyright 2025 The Perses Authors
+// 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