npm - @perses-dev/table-plugin - Versions diffs - 0.10.1 → 0.11.0-rc.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

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

@@ -0,0 +1,139 @@
+// Copyright 2025 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/TablePanel.js CHANGED Viewed

@@ -198,13 +198,15 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
             if (column.hide) {
                 return undefined;
             }
+            const { name, header, headerDescription, enableSorting, width, align, dataLink } = column;
             return {
                 accessorKey: name,
-                header: column.header ?? name,
-                headerDescription: column.headerDescription,
-                enableSorting: column.enableSorting,
-                width: column.width,
-                align: column.align,
+                header: header ?? name,
+                headerDescription,
+                enableSorting,
+                width,
+                align,
+                dataLink,
                 ...generateCellContentConfig(column)
             };
         }
@@ -298,22 +300,27 @@ function TablePanel({ contentDimensions, spec, queryResults }) {
         data,
         keys
     ]);
+    // Generate columns and map each column accessor to its settings index and data key
     const columns = (0, _react.useMemo)(()=>{
         const columns = [];
-        // Taking the customized columns first for the ordering of the columns in the table
-        const customizedColumns = spec.columnSettings?.map((column)=>column.name).filter((name)=>keys.includes(name)) ?? [];
-        const defaultColumns = keys.filter((key)=>!customizedColumns.includes(key));
-        for (const key of customizedColumns){
-            const columnConfig = generateColumnConfig(key, spec.columnSettings ?? []);
+        const customizedColumns = new Set();
+        // 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 ?? []);
             if (columnConfig !== undefined) {
                 columns.push(columnConfig);
+                customizedColumns.add(columnSetting.name);
             }
         }
+        // Add remaining columns if defaultColumnHidden is false
         if (!spec.defaultColumnHidden) {
-            for (const key of defaultColumns){
-                const columnConfig = generateColumnConfig(key, spec.columnSettings ?? []);
-                if (columnConfig !== undefined) {
-                    columns.push(columnConfig);
+            for (const key of keys){
+                if (!customizedColumns.has(key)) {
+                    const columnConfig = generateColumnConfig(key, spec.columnSettings ?? []);
+                    if (columnConfig !== undefined) {
+                        columns.push(columnConfig);
+                    }
                 }
             }
         }
@@ -342,10 +349,11 @@ function TablePanel({ contentDimensions, spec, queryResults }) {
                 ...keysAsObj,
                 ...row
             };
+            // Generate cellConfigs for each column (including duplicates with different headers)
             for (const [key, value] of Object.entries(extendRow)){
                 // First, try to get cell config from global cell settings
                 let cellConfig = (0, _models.evaluateConditionalFormatting)(value, spec.cellSettings ?? []);
-                // Then, try to get cell config from column-specific cell settings if conditional formatting is enabled
+                // Then, try to get cell config from column-specific cell settings
                 const columnSetting = spec.columnSettings?.find((col)=>col.name === key);
                 if (columnSetting?.cellSettings?.length) {
                     const columnCellConfig = (0, _models.evaluateConditionalFormatting)(value, columnSetting.cellSettings);
@@ -473,7 +481,20 @@ function TablePanel({ contentDimensions, spec, queryResults }) {
     if (contentDimensions === undefined) {
         return null;
     }
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+    if (!data?.length) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+            sx: {
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: '100%'
+            },
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                children: "No data"
+            })
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             spec.enableFiltering && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 style: {

package/lib/components/ColumnsEditor/ColumnEditor.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColumnEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnsEditor/ColumnEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA8B,UAAU,EAAqB,MAAM,eAAe,CAAC;AAC1F,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;~~AAY~~/C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;~~AAQ9C~~,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,UAAU,EAAE,eAAe,CAAC;IAC1E,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,EAAE,EAAE,iBAAiB,GAAG,YAAY,~~CAkL7F~~"}
1	+ {"version":3,"file":"ColumnEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnsEditor/ColumnEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA8B,UAAU,EAAqB,MAAM,eAAe,CAAC;AAC1F,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAa/C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAS9C,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,UAAU,EAAE,eAAe,CAAC;IAC1E,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAuL7F"}

package/lib/components/ColumnsEditor/ColumnEditor.js CHANGED Viewed

@@ -16,6 +16,7 @@ import { useState } from 'react';
 import { AlignSelector, FormatControls, OptionsEditorColumn, OptionsEditorControl, OptionsEditorGrid, OptionsEditorGroup, SortSelectorButtons } from '@perses-dev/components';
 import { PluginKindSelect } from '@perses-dev/plugin-system';
 import { ConditionalPanel } from '../ConditionalPanel';
+import { DataLinkEditor } from './DataLinkEditorDialog';
 const DEFAULT_FORMAT = {
     unit: 'decimal',
     shortValues: true
@@ -208,6 +209,15 @@ export function ColumnEditor({ column, onChange, ...others }) {
                                 })
                             ]
                         })
+                    }),
+                    /*#__PURE__*/ _jsx(OptionsEditorColumn, {
+                        children: /*#__PURE__*/ _jsx(OptionsEditorGroup, {
+                            title: "Link",
+                            children: /*#__PURE__*/ _jsx(DataLinkEditor, {
+                                column: column,
+                                onChange: onChange
+                            })
+                        })
                     })
                 ]
             }),

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

	@@ -1 +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';\nimport { ColumnSettings } from '../../models';\nimport { ConditionalPanel } from '../ConditionalPanel';\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 </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","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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"}
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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"}

package/lib/components/ColumnsEditor/DataLinkEditorDialog.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+import { ColumnEditorProps } from './ColumnEditor';
+export type Props = Pick<ColumnEditorProps, 'onChange' | 'column'>;
+export declare const DataLinkEditor: (props: Props) => ReactElement;
+//# sourceMappingURL=DataLinkEditorDialog.d.ts.map

package/lib/components/ColumnsEditor/DataLinkEditorDialog.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"DataLinkEditorDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnsEditor/DataLinkEditorDialog.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAIrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD,MAAM,MAAM,KAAK,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,QAAQ,CAAC,CAAC;AAEnE,eAAO,MAAM,cAAc,GAAI,OAAO,KAAK,KAAG,YAgE7C,CAAC"}

package/lib/components/ColumnsEditor/DataLinkEditorDialog.js ADDED Viewed

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { LinkEditorForm } from '@perses-dev/components';
+import { IconButton, Stack, Typography } from '@mui/material';
+import PlusIcon from 'mdi-material-ui/Plus';
+import MinusIcon from 'mdi-material-ui/Minus';
+export const DataLinkEditor = (props)=>{
+    const { onChange, column, column: { dataLink } } = props;
+    if (!dataLink) {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            sx: {
+                width: '100%',
+                alignItems: 'center'
+            },
+            direction: "row",
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    flex: 1,
+                    variant: "subtitle1",
+                    mb: 2,
+                    fontStyle: "italic",
+                    children: "No link defined"
+                }),
+                /*#__PURE__*/ _jsx(IconButton, {
+                    style: {
+                        width: 'fit-content',
+                        height: 'fit-content'
+                    },
+                    onClick: ()=>onChange({
+                            ...column,
+                            dataLink: {
+                                url: '',
+                                openNewTab: true,
+                                title: ''
+                            }
+                        }),
+                    children: /*#__PURE__*/ _jsx(PlusIcon, {})
+                })
+            ]
+        });
+    }
+    const { url, openNewTab, title } = dataLink;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        sx: {
+            width: '100%',
+            alignItems: 'center'
+        },
+        direction: "row",
+        children: [
+            /*#__PURE__*/ _jsx(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__*/ _jsx(IconButton, {
+                style: {
+                    width: 'fit-content',
+                    height: 'fit-content'
+                },
+                onClick: ()=>{
+                    onChange({
+                        ...column,
+                        dataLink: undefined
+                    });
+                },
+                children: /*#__PURE__*/ _jsx(MinusIcon, {})
+            })
+        ]
+    });
+};
+//# sourceMappingURL=DataLinkEditorDialog.js.map

package/lib/components/ColumnsEditor/DataLinkEditorDialog.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../src/components/ColumnsEditor/DataLinkEditorDialog.tsx"],"sourcesContent":["// Copyright 2025 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 { LinkEditorForm } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { IconButton, Stack, Typography } from '@mui/material';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport MinusIcon from 'mdi-material-ui/Minus';\nimport { ColumnEditorProps } from './ColumnEditor';\n\nexport type Props = Pick<ColumnEditorProps, 'onChange' | 'column'>;\n\nexport const DataLinkEditor = (props: Props): ReactElement => {\n const {\n onChange,\n column,\n column: { dataLink },\n } = props;\n\n if (!dataLink) {\n return (\n <Stack sx={{ width: '100%', alignItems: 'center' }} direction=\"row\">\n <Typography flex={1} variant=\"subtitle1\" mb={2} fontStyle=\"italic\">\n No link defined\n </Typography>\n <IconButton\n style={{ width: 'fit-content', height: 'fit-content' }}\n onClick={() => onChange({ ...column, dataLink: { url: '', openNewTab: true, title: '' } })}\n >\n <PlusIcon />\n </IconButton>\n </Stack>\n );\n }\n\n const { url, openNewTab, title } = dataLink;\n\n return (\n <Stack sx={{ width: '100%', alignItems: 'center' }} direction=\"row\">\n <LinkEditorForm\n mode=\"inline\"\n url={{\n label: 'Url',\n onChange: (url) => {\n onChange({ ...column, dataLink: { ...dataLink, url } });\n },\n value: url,\n placeholder: 'URL',\n error: { hasError: false, helperText: '' },\n }}\n name={{\n label: 'Name',\n onChange: (title) => {\n onChange({ ...column, dataLink: { ...dataLink, title } });\n },\n value: title ?? '',\n placeholder: 'Name',\n }}\n newTabOpen={{\n label: 'Open in new tab',\n onChange: (openNewTab) => {\n onChange({ ...column, dataLink: { ...dataLink, openNewTab } });\n },\n value: openNewTab,\n }}\n />\n <IconButton\n style={{ width: 'fit-content', height: 'fit-content' }}\n onClick={() => {\n onChange({ ...column, dataLink: undefined });\n }}\n >\n <MinusIcon />\n </IconButton>\n </Stack>\n );\n};\n"],"names":["LinkEditorForm","IconButton","Stack","Typography","PlusIcon","MinusIcon","DataLinkEditor","props","onChange","column","dataLink","sx","width","alignItems","direction","flex","variant","mb","fontStyle","style","height","onClick","url","openNewTab","title","mode","label","value","placeholder","error","hasError","helperText","name","newTabOpen","undefined"],"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,cAAc,QAAQ,yBAAyB;AAExD,SAASC,UAAU,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAC9D,OAAOC,cAAc,uBAAuB;AAC5C,OAAOC,eAAe,wBAAwB;AAK9C,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EACJC,QAAQ,EACRC,MAAM,EACNA,QAAQ,EAAEC,QAAQ,EAAE,EACrB,GAAGH;IAEJ,IAAI,CAACG,UAAU;QACb,qBACE,MAACR;YAAMS,IAAI;gBAAEC,OAAO;gBAAQC,YAAY;YAAS;YAAGC,WAAU;;8BAC5D,KAACX;oBAAWY,MAAM;oBAAGC,SAAQ;oBAAYC,IAAI;oBAAGC,WAAU;8BAAS;;8BAGnE,KAACjB;oBACCkB,OAAO;wBAAEP,OAAO;wBAAeQ,QAAQ;oBAAc;oBACrDC,SAAS,IAAMb,SAAS;4BAAE,GAAGC,MAAM;4BAAEC,UAAU;gCAAEY,KAAK;gCAAIC,YAAY;gCAAMC,OAAO;4BAAG;wBAAE;8BAExF,cAAA,KAACpB;;;;IAIT;IAEA,MAAM,EAAEkB,GAAG,EAAEC,UAAU,EAAEC,KAAK,EAAE,GAAGd;IAEnC,qBACE,MAACR;QAAMS,IAAI;YAAEC,OAAO;YAAQC,YAAY;QAAS;QAAGC,WAAU;;0BAC5D,KAACd;gBACCyB,MAAK;gBACLH,KAAK;oBACHI,OAAO;oBACPlB,UAAU,CAACc;wBACTd,SAAS;4BAAE,GAAGC,MAAM;4BAAEC,UAAU;gCAAE,GAAGA,QAAQ;gCAAEY;4BAAI;wBAAE;oBACvD;oBACAK,OAAOL;oBACPM,aAAa;oBACbC,OAAO;wBAAEC,UAAU;wBAAOC,YAAY;oBAAG;gBAC3C;gBACAC,MAAM;oBACJN,OAAO;oBACPlB,UAAU,CAACgB;wBACThB,SAAS;4BAAE,GAAGC,MAAM;4BAAEC,UAAU;gCAAE,GAAGA,QAAQ;gCAAEc;4BAAM;wBAAE;oBACzD;oBACAG,OAAOH,SAAS;oBAChBI,aAAa;gBACf;gBACAK,YAAY;oBACVP,OAAO;oBACPlB,UAAU,CAACe;wBACTf,SAAS;4BAAE,GAAGC,MAAM;4BAAEC,UAAU;gCAAE,GAAGA,QAAQ;gCAAEa;4BAAW;wBAAE;oBAC9D;oBACAI,OAAOJ;gBACT;;0BAEF,KAACtB;gBACCkB,OAAO;oBAAEP,OAAO;oBAAeQ,QAAQ;gBAAc;gBACrDC,SAAS;oBACPb,SAAS;wBAAE,GAAGC,MAAM;wBAAEC,UAAUwB;oBAAU;gBAC5C;0BAEA,cAAA,KAAC7B;;;;AAIT,EAAE"}

package/lib/components/TablePanel.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TablePanel.d.ts","sourceRoot":"","sources":["../../../src/components/TablePanel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAa,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,EAAE,YAAY,EAAgC,MAAM,OAAO,CAAC;AACnE,OAAO,EAAkD,cAAc,EAAiB,MAAM,kBAAkB,CAAC;AAGjH,OAAO,EAAkB,YAAY,EAAiC,MAAM,WAAW,CAAC;~~AAqKxF~~,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,YAAY,GAAG;IAAE,IAAI,EAAE,SAAS,GAAG,OAAO,CAAA;CAAE,CAK3F;AAED,MAAM,MAAM,UAAU,GAAG,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAElE,wBAAgB,UAAU,CAAC,EAAE,iBAAiB,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,UAAU,GAAG,YAAY,GAAG,IAAI,~~CAgXrG~~"}
1	+ {"version":3,"file":"TablePanel.d.ts","sourceRoot":"","sources":["../../../src/components/TablePanel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAa,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,EAAE,YAAY,EAAgC,MAAM,OAAO,CAAC;AACnE,OAAO,EAAkD,cAAc,EAAiB,MAAM,kBAAkB,CAAC;AAGjH,OAAO,EAAkB,YAAY,EAAiC,MAAM,WAAW,CAAC;AAuKxF,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,YAAY,GAAG;IAAE,IAAI,EAAE,SAAS,GAAG,OAAO,CAAA;CAAE,CAK3F;AAED,MAAM,MAAM,UAAU,GAAG,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAElE,wBAAgB,UAAU,CAAC,EAAE,iBAAiB,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,UAAU,GAAG,YAAY,GAAG,IAAI,CAmYrG"}

package/lib/components/TablePanel.js CHANGED Viewed

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Table } from '@perses-dev/components';
 import { useEffect, useMemo, useState } from 'react';
 import { formatValue, transformData } from '@perses-dev/core';
-import { useTheme } from '@mui/material';
+import { useTheme, Typography, Box } from '@mui/material';
 import { evaluateConditionalFormatting } from '../models';
 import { EmbeddedPanel } from './EmbeddedPanel';
 function generateCellContentConfig(column) {
@@ -180,13 +180,15 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
             if (column.hide) {
                 return undefined;
             }
+            const { name, header, headerDescription, enableSorting, width, align, dataLink } = column;
             return {
                 accessorKey: name,
-                header: column.header ?? name,
-                headerDescription: column.headerDescription,
-                enableSorting: column.enableSorting,
-                width: column.width,
-                align: column.align,
+                header: header ?? name,
+                headerDescription,
+                enableSorting,
+                width,
+                align,
+                dataLink,
                 ...generateCellContentConfig(column)
             };
         }
@@ -280,22 +282,27 @@ export function TablePanel({ contentDimensions, spec, queryResults }) {
         data,
         keys
     ]);
+    // Generate columns and map each column accessor to its settings index and data key
     const columns = useMemo(()=>{
         const columns = [];
-        // Taking the customized columns first for the ordering of the columns in the table
-        const customizedColumns = spec.columnSettings?.map((column)=>column.name).filter((name)=>keys.includes(name)) ?? [];
-        const defaultColumns = keys.filter((key)=>!customizedColumns.includes(key));
-        for (const key of customizedColumns){
-            const columnConfig = generateColumnConfig(key, spec.columnSettings ?? []);
+        const customizedColumns = new Set();
+        // 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 ?? []);
             if (columnConfig !== undefined) {
                 columns.push(columnConfig);
+                customizedColumns.add(columnSetting.name);
             }
         }
+        // Add remaining columns if defaultColumnHidden is false
         if (!spec.defaultColumnHidden) {
-            for (const key of defaultColumns){
-                const columnConfig = generateColumnConfig(key, spec.columnSettings ?? []);
-                if (columnConfig !== undefined) {
-                    columns.push(columnConfig);
+            for (const key of keys){
+                if (!customizedColumns.has(key)) {
+                    const columnConfig = generateColumnConfig(key, spec.columnSettings ?? []);
+                    if (columnConfig !== undefined) {
+                        columns.push(columnConfig);
+                    }
                 }
             }
         }
@@ -324,10 +331,11 @@ export function TablePanel({ contentDimensions, spec, queryResults }) {
                 ...keysAsObj,
                 ...row
             };
+            // Generate cellConfigs for each column (including duplicates with different headers)
             for (const [key, value] of Object.entries(extendRow)){
                 // First, try to get cell config from global cell settings
                 let cellConfig = evaluateConditionalFormatting(value, spec.cellSettings ?? []);
-                // Then, try to get cell config from column-specific cell settings if conditional formatting is enabled
+                // Then, try to get cell config from column-specific cell settings
                 const columnSetting = spec.columnSettings?.find((col)=>col.name === key);
                 if (columnSetting?.cellSettings?.length) {
                     const columnCellConfig = evaluateConditionalFormatting(value, columnSetting.cellSettings);
@@ -455,7 +463,20 @@ export function TablePanel({ contentDimensions, spec, queryResults }) {
     if (contentDimensions === undefined) {
         return null;
     }
-    return /*#__PURE__*/ _jsxs("div", {
+    if (!data?.length) {
+        return /*#__PURE__*/ _jsx(Box, {
+            sx: {
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: '100%'
+            },
+            children: /*#__PURE__*/ _jsx(Typography, {
+                children: "No data"
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             spec.enableFiltering && /*#__PURE__*/ _jsx("div", {
                 style: {