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

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

@@ -0,0 +1,124 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "EmbeddedPanelOptionsEditor", {
+    enumerable: true,
+    get: function() {
+        return EmbeddedPanelOptionsEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
+const _react = require("react");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function isSpecEmpty(spec) {
+    if (spec === undefined || spec === null) return true;
+    if (typeof spec !== 'object') return false;
+    return Object.keys(spec).length === 0;
+}
+function mergeWithPluginDefaults(plugin, spec) {
+    const initial = plugin.createInitialOptions() ?? {};
+    return (0, _merge.default)({}, initial, spec ?? {});
+}
+function EmbeddedPanelOptionsEditor({ kind, spec, onChange }) {
+    const { data: plugin, isLoading, isError, error } = (0, _pluginsystem.usePlugin)('Panel', kind);
+    const panelPlugin = plugin;
+    const mergedSpec = (0, _react.useMemo)(()=>{
+        if (!panelPlugin) {
+            return spec;
+        }
+        return mergeWithPluginDefaults(panelPlugin, spec);
+    }, [
+        panelPlugin,
+        spec
+    ]);
+    const onChangeRef = (0, _react.useRef)(onChange);
+    onChangeRef.current = onChange;
+    // Persist plugin defaults when the column still has an empty spec (e.g. after switching panel kind).
+    (0, _react.useEffect)(()=>{
+        if (!panelPlugin || !isSpecEmpty(spec)) {
+            return;
+        }
+        onChangeRef.current(mergeWithPluginDefaults(panelPlugin, spec));
+    }, [
+        panelPlugin,
+        kind,
+        spec
+    ]);
+    if (isLoading) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+            direction: "row",
+            alignItems: "center",
+            spacing: 1,
+            sx: {
+                py: 1
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {
+                    size: 22
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                    variant: "body2",
+                    color: "text.secondary",
+                    children: "Loading panel settings…"
+                })
+            ]
+        });
+    }
+    if (isError || !plugin) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+            variant: "body2",
+            color: "error",
+            children: error?.message ?? 'Could not load panel plugin.'
+        });
+    }
+    const loadedPlugin = plugin;
+    const editorTabs = loadedPlugin.panelOptionsEditorComponents ?? [];
+    if (editorTabs.length === 0) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+            variant: "body2",
+            color: "text.secondary",
+            children: "This visualization has no editable settings."
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+        spacing: 2.5,
+        sx: {
+            width: '100%',
+            py: 1
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.OptionsEditorTabs, {
+            tabs: editorTabs.map((tab)=>{
+                const Content = tab.content;
+                return {
+                    label: tab.label,
+                    content: /*#__PURE__*/ (0, _jsxruntime.jsx)(Content, {
+                        value: mergedSpec,
+                        onChange: (next)=>{
+                            onChange(next);
+                        }
+                    })
+                };
+            })
+        })
+    });
+}

package/lib/cjs/components/TablePanel.js

@@ -31,19 +31,163 @@ _export(exports, {
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _core = require("@perses-dev/core");
 const _dashboards = require("@perses-dev/dashboards");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _react = require("react");
 const _models = require("../models");
 const _tabledatautils = require("../table-data-utils");
 const _EmbeddedPanel = require("./EmbeddedPanel");
-function generateCellContentConfig(column) {
+function parseNumericCellValue(value) {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return value;
+    }
+    if (typeof value === 'string') {
+        const parsed = Number(value);
+        if (Number.isFinite(parsed)) {
+            return parsed;
+        }
+    }
+    return undefined;
+}
+function isPanelData(value) {
+    if (typeof value !== 'object' || value === null) {
+        return false;
+    }
+    const candidate = value;
+    return candidate.definition !== undefined && candidate.data !== undefined;
+}
+function createSyntheticPanelData(value, columnName) {
+    const numericValue = parseNumericCellValue(value);
+    if (numericValue === undefined) {
+        return undefined;
+    }
+    const now = Date.now();
+    return {
+        definition: {
+            kind: 'TimeSeriesQuery',
+            spec: {
+                plugin: {
+                    kind: 'PrometheusTimeSeriesQuery',
+                    spec: {
+                        query: ''
+                    }
+                }
+            }
+        },
+        data: {
+            timeRange: {
+                start: new Date(now),
+                end: new Date(now)
+            },
+            stepMs: 1,
+            series: [
+                {
+                    name: columnName,
+                    values: [
+                        [
+                            now,
+                            numericValue
+                        ]
+                    ],
+                    labels: {}
+                }
+            ]
+        }
+    };
+}
+function getGaugeNumericValue(value) {
+    if (isPanelData(value)) {
+        const series = value.data?.series;
+        const firstSeries = series?.[0];
+        if (!firstSeries?.values?.length) {
+            return undefined;
+        }
+        const calc = _pluginsystem.CalculationsMap['last-number'];
+        if (typeof calc !== 'function') {
+            return undefined;
+        }
+        const calculatedValue = calc(firstSeries.values);
+        return typeof calculatedValue === 'number' ? calculatedValue : undefined;
+    }
+    return parseNumericCellValue(value);
+}
+function InlineGaugeCellWithRange({ value, range, fillColor, format }) {
+    if (value === undefined) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
+    }
+    let percent = 0;
+    if (range !== undefined) {
+        if (range.max === range.min) {
+            percent = 100;
+        } else {
+            percent = (value - range.min) / (range.max - range.min) * 100;
+        }
+    }
+    percent = Math.max(0, Math.min(100, percent));
+    const trackColor = 'rgba(127,127,127,0.20)';
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+        sx: {
+            display: 'flex',
+            alignItems: 'center',
+            width: '100%',
+            gap: 1
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                sx: {
+                    flexGrow: 1,
+                    borderRadius: 1,
+                    backgroundColor: trackColor,
+                    height: 24,
+                    overflow: 'hidden'
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                    sx: {
+                        width: `${percent}%`,
+                        height: '100%',
+                        backgroundColor: fillColor ?? 'success.main',
+                        borderRadius: 1
+                    }
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                variant: "body2",
+                sx: {
+                    minWidth: 52,
+                    textAlign: 'right'
+                },
+                children: format ? (0, _components.formatValue)(value, format) : value.toFixed(2)
+            })
+        ]
+    });
+}
+function resolveGaugeFillColor(value, globalCellSettings, columnCellSettings) {
+    let cellConfig = (0, _models.evaluateConditionalFormatting)(value, globalCellSettings);
+    if (columnCellSettings?.length) {
+        const columnCellConfig = (0, _models.evaluateConditionalFormatting)(value, columnCellSettings);
+        if (columnCellConfig) {
+            cellConfig = columnCellConfig;
+        }
+    }
+    return cellConfig?.backgroundColor ?? cellConfig?.textColor;
+}
+function generateCellContentConfig(column, gaugeRange, globalCellSettings = []) {
     const plugin = column.plugin;
     if (plugin !== undefined) {
         return {
             cell: (ctx)=>{
-                const panelData = ctx.getValue();
+                const cellValue = ctx.getValue();
+                if (plugin.kind === 'GaugeChart') {
+                    const gaugeValue = getGaugeNumericValue(cellValue);
+                    const gaugeFillColor = resolveGaugeFillColor(gaugeValue, globalCellSettings, column.cellSettings);
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(InlineGaugeCellWithRange, {
+                        value: gaugeValue,
+                        range: gaugeRange,
+                        fillColor: gaugeFillColor,
+                        format: plugin.spec?.format ?? column.format
+                    });
+                }
+                const panelData = isPanelData(cellValue) ? cellValue : createSyntheticPanelData(cellValue, column.name);
                 if (!panelData) return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
                 return /*#__PURE__*/ (0, _jsxruntime.jsx)(_EmbeddedPanel.EmbeddedPanel, {
                     kind: plugin.kind,
@@ -59,15 +203,17 @@ function generateCellContentConfig(column) {
     return {
         cell: (ctx)=>{
             const cellValue = ctx.getValue();
-            return typeof cellValue === 'number' && column.format ? (0, _core.formatValue)(cellValue, column.format) : cellValue;
+            return typeof cellValue === 'number' && column.format ? (0, _components.formatValue)(cellValue, column.format) : cellValue;
         },
         cellDescription: column.cellDescription ? ()=>`${column.cellDescription}` : undefined
     };
 }
 function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme }) {
+    const [searchTerm, setSearchTerm] = (0, _react.useState)('');
     const values = [
         ...new Set(allValues)
     ].filter((v)=>v !== null).sort();
+    const filteredValues = searchTerm ? values.filter((v)=>String(v).toLowerCase().includes(searchTerm.toLowerCase())) : values;
     if (values.length === 0) {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
             "data-filter-dropdown": true,
@@ -101,6 +247,23 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
             overflowY: 'auto'
         },
         children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                type: "text",
+                placeholder: "Search...",
+                value: searchTerm,
+                onChange: (e)=>setSearchTerm(e.target.value),
+                style: {
+                    width: '100%',
+                    padding: '6px 8px',
+                    marginBottom: 8,
+                    fontSize: 13,
+                    border: `1px solid ${theme.palette.divider}`,
+                    borderRadius: 4,
+                    backgroundColor: theme.palette.background.default,
+                    color: theme.palette.text.primary,
+                    boxSizing: 'border-box'
+                }
+            }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 style: {
                     marginBottom: 8,
@@ -117,7 +280,7 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
                         /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
                             type: "checkbox",
                             checked: selectedValues.length === values.length && values.length > 0,
-                            onChange: (e)=>onFilterChange(e.target.checked ? values : []),
+                            onChange: (e)=>onFilterChange(e.target.checked ? values.map((v)=>v.original) : []),
                             style: {
                                 marginRight: 8
                             }
@@ -142,7 +305,7 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
                     borderTop: `1px solid ${theme.palette.divider}`
                 }
             }),
-            values.map((value, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            filteredValues.map((value, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                     style: {
                         marginBottom: 4
                     },
@@ -163,15 +326,15 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
                                 type: "checkbox",
-                                checked: selectedValues.includes(value),
+                                checked: selectedValues.includes(value.original),
                                 onChange: (e)=>{
                                     if (e.target.checked) {
                                         onFilterChange([
                                             ...selectedValues,
-                                            value
+                                            value.original
                                         ]);
                                     } else {
-                                        onFilterChange(selectedValues.filter((v)=>v !== value));
+                                        onFilterChange(selectedValues.filter((v)=>v !== value.original));
                                     }
                                 },
                                 style: {
@@ -183,7 +346,7 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
                                     fontSize: 14,
                                     color: theme.palette.text.primary
                                 },
-                                children: value === null || value === undefined || value === '' ? '(empty)' : String(value)
+                                children: value === null || value === undefined || value.formatted === '' ? '(empty)' : String(value.formatted)
                             })
                         ]
                     })
@@ -195,7 +358,7 @@ 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, allVariables) {
+ */ function generateColumnConfig(name, columnSettings, allVariables, gaugeRangeByColumn, globalCellSettings = []) {
     for (const column of columnSettings){
         if (column.name === name) {
             if (column.hide) {
@@ -214,7 +377,7 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
                 width,
                 align,
                 dataLink: modifiedDataLink,
-                ...generateCellContentConfig(column)
+                ...generateCellContentConfig(column, gaugeRangeByColumn[name], globalCellSettings)
             };
         }
     }
@@ -282,7 +445,7 @@ function TablePanel({ contentDimensions, spec, queryResults }) {
         spec
     ]);
     // Transform will be applied by their orders on the original data
-    const data = (0, _react.useMemo)(()=>(0, _core.transformData)(rawData, spec.transforms ?? []), [
+    const data = (0, _react.useMemo)(()=>(0, _components.transformData)(rawData, spec.transforms ?? []), [
         rawData,
         spec.transforms
     ]);
@@ -299,14 +462,71 @@ function TablePanel({ contentDimensions, spec, queryResults }) {
     }, [
         data
     ]);
-    // fetch unique values for each column of filtering
+    const columnsFormat = (0, _react.useMemo)(()=>{
+        const columnsFormat = {};
+        const settings = spec?.columnSettings;
+        if (settings) {
+            for(let i = 0; i < settings.length; i++){
+                const { name, format } = settings[i] || {};
+                if (name && format) {
+                    columnsFormat[name] = format;
+                }
+            }
+        }
+        return columnsFormat;
+    }, [
+        spec
+    ]);
     const columnUniqueValues = (0, _react.useMemo)(()=>{
         const uniqueValues = {};
-        keys.forEach((key)=>{
-            const values = data.map((row)=>row[key]).filter((val)=>val !== null && val !== undefined && val !== '');
-            uniqueValues[key] = Array.from(new Set(values));
-        });
+        for (const key of keys){
+            const formatOption = columnsFormat?.[key];
+            uniqueValues[key] = [];
+            const usedValues = new Map();
+            for (const row of data){
+                const val = row[key];
+                if (val === '' || val === null || val === undefined) {
+                    continue;
+                }
+                if (usedValues.get(String(val))) {
+                    continue;
+                }
+                if (typeof val === 'string' || typeof val === 'number') {
+                    uniqueValues[key].push({
+                        original: val,
+                        formatted: formatOption && typeof val === 'number' ? (0, _components.formatValue)(val, formatOption) : val
+                    });
+                    usedValues.set(String(val), true);
+                }
+            }
+        }
         return uniqueValues;
+    }, [
+        data,
+        keys,
+        columnsFormat
+    ]);
+    const gaugeRangeByColumn = (0, _react.useMemo)(()=>{
+        const result = {};
+        for (const key of keys){
+            let min = Number.POSITIVE_INFINITY;
+            let max = Number.NEGATIVE_INFINITY;
+            for (const row of data){
+                const numericValue = getGaugeNumericValue(row[key]);
+                if (numericValue === undefined) {
+                    continue;
+                }
+                min = Math.min(min, numericValue);
+                max = Math.max(max, numericValue);
+            }
+            if (min !== Number.POSITIVE_INFINITY && max !== Number.NEGATIVE_INFINITY) {
+                result[key] = {
+                    min,
+                    max
+                };
+            }
+        }
+        return result;
     }, [
         data,
         keys
@@ -318,7 +538,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 ?? [], allVariables);
+            const columnConfig = generateColumnConfig(columnSetting.name, spec.columnSettings ?? [], allVariables, gaugeRangeByColumn, spec.cellSettings ?? []);
             if (columnConfig !== undefined) {
                 columns.push(columnConfig);
                 customizedColumns.add(columnSetting.name);
@@ -328,7 +548,7 @@ function TablePanel({ contentDimensions, spec, queryResults }) {
         if (!spec.defaultColumnHidden) {
             for (const key of keys){
                 if (!customizedColumns.has(key)) {
-                    const columnConfig = generateColumnConfig(key, spec.columnSettings ?? [], allVariables);
+                    const columnConfig = generateColumnConfig(key, spec.columnSettings ?? [], allVariables, gaugeRangeByColumn, spec.cellSettings ?? []);
                     if (columnConfig !== undefined) {
                         columns.push(columnConfig);
                     }
@@ -340,7 +560,9 @@ function TablePanel({ contentDimensions, spec, queryResults }) {
         keys,
         spec.columnSettings,
         spec.defaultColumnHidden,
-        allVariables
+        allVariables,
+        gaugeRangeByColumn,
+        spec.cellSettings
     ]);
     // Generate cell settings that will be used by the table to render cells (text color, background color, ...)
     const cellConfigs = (0, _react.useMemo)(()=>{

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

@@ -50,6 +50,14 @@ function createInitialTableOptions() {
         enableFiltering: true
     };
 }
+function parseRangeBound(rawValue) {
+    const trimmed = rawValue.trim();
+    if (trimmed === '') {
+        return undefined;
+    }
+    const parsed = Number(trimmed);
+    return Number.isNaN(parsed) ? undefined : parsed;
+}
 function formatCellDisplay(value, setting, defaultText) {
     const baseText = setting.text || defaultText || String(value);
     const displayText = `${setting.prefix ?? ''}${baseText}${setting.suffix ?? ''}`;
@@ -153,13 +161,22 @@ function renderConditionEditor(condition, onChange, size = 'small') {
                 label: 'From',
                 placeholder: 'Start of range',
                 value: condition.spec?.min ?? '',
-                onChange: (e)=>onChange({
+                onChange: (e)=>{
+                    const nextMin = parseRangeBound(e.target.value);
+                    onChange({
                         ...condition,
                         spec: {
                             ...condition.spec,
-                            min: +e.target.value
+                            min: nextMin
                         }
-                    }),
+                    });
+                },
+                type: 'number',
+                slotProps: {
+                    htmlInput: {
+                        step: 'any'
+                    }
+                },
                 fullWidth: true,
                 size: size
             }),
@@ -168,13 +185,22 @@ function renderConditionEditor(condition, onChange, size = 'small') {
                 label: 'To',
                 placeholder: 'End of range (inclusive)',
                 value: condition.spec?.max ?? '',
-                onChange: (e)=>onChange({
+                onChange: (e)=>{
+                    const nextMax = parseRangeBound(e.target.value);
+                    onChange({
                         ...condition,
                         spec: {
                             ...condition.spec,
-                            max: +e.target.value
+                            max: nextMax
                         }
-                    }),
+                    });
+                },
+                type: 'number',
+                slotProps: {
+                    htmlInput: {
+                        step: 'any'
+                    }
+                },
                 fullWidth: true,
                 size: size
             })

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

@@ -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;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"}
+{"version":3,"file":"ColumnEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnsEditor/ColumnEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA8B,UAAU,EAAiC,MAAM,eAAe,CAAC;AACtG,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAa/C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAU9C,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,CA8M7F"}