@perses-dev/table-plugin 0.11.0 → 0.11.2

package/lib/TableExportAction.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PanelData } from '@perses-dev/plugin-system';
+import { TimeSeriesData } from '@perses-dev/core';
+import { TableProps } from './components';
+import type { TableOptions } from './models';
+export interface ExportColumn {
+    key: string;
+    header: string;
+}
+/**
+ * Converts raw query results into the same tabular structure that TablePanel
+ * renders, applying indexed column naming and configured transforms so the
+ * CSV output matches the visual table.
+ */
+export declare function buildTableData(queryResults: Array<PanelData<TimeSeriesData>>, spec: TableOptions): {
+    data: Array<Record<string, unknown>>;
+    columns: ExportColumn[];
+};
+export declare const TableExportAction: React.FC<TableProps>;
+//# sourceMappingURL=TableExportAction.d.ts.map

package/lib/TableExportAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableExportAction.d.ts","sourceRoot":"","sources":["../../src/TableExportAction.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAkB,SAAS,EAAoB,MAAM,2BAA2B,CAAC;AAIxF,OAAO,EAAE,cAAc,EAAiB,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG7C,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,EAC9C,IAAI,EAAE,YAAY,GACjB;IAAE,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAAC,OAAO,EAAE,YAAY,EAAE,CAAA;CAAE,CAiCnE;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAgDlD,CAAC"}

package/lib/TableExportAction.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// 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.
+import React, { useCallback, useMemo } from 'react';
+import { escapeCsvValue, sanitizeFilename } from '@perses-dev/plugin-system';
+import { InfoTooltip } from '@perses-dev/components';
+import { IconButton } from '@mui/material';
+import DownloadIcon from 'mdi-material-ui/Download';
+import { transformData } from '@perses-dev/core';
+import { buildRawTableData } from './table-data-utils';
+/**
+ * Converts raw query results into the same tabular structure that TablePanel
+ * renders, applying indexed column naming and configured transforms so the
+ * CSV output matches the visual table.
+ */ export function buildTableData(queryResults, spec) {
+    // Use shared utility with forExport=true to get raw scalar values
+    const rawData = buildRawTableData(queryResults, spec, {
+        forExport: true
+    });
+    const transformed = transformData(rawData, spec.transforms ?? []);
+    const allKeys = [];
+    for (const entry of transformed){
+        for (const key of Object.keys(entry)){
+            if (!allKeys.includes(key)) allKeys.push(key);
+        }
+    }
+    const columnSettings = spec.columnSettings ?? [];
+    const columns = [];
+    const customized = new Set();
+    for (const col of columnSettings){
+        if (customized.has(col.name)) continue;
+        customized.add(col.name);
+        if (col.hide) continue;
+        columns.push({
+            key: col.name,
+            header: col.header ?? col.name
+        });
+    }
+    if (!spec.defaultColumnHidden) {
+        for (const key of allKeys){
+            if (!customized.has(key)) {
+                columns.push({
+                    key,
+                    header: key
+                });
+            }
+        }
+    }
+    return {
+        data: transformed,
+        columns
+    };
+}
+export const TableExportAction = ({ queryResults, spec, definition })=>{
+    const tableData = useMemo(()=>buildTableData(queryResults, spec), [
+        queryResults,
+        spec
+    ]);
+    const canExport = tableData.data.length > 0 && tableData.columns.length > 0;
+    const handleExport = useCallback(()=>{
+        if (!canExport) return;
+        try {
+            const title = definition?.spec?.display?.name || 'Table Data';
+            const { data, columns } = tableData;
+            const headerRow = columns.map((c)=>escapeCsvValue(c.header)).join(',');
+            const dataRows = data.map((row)=>columns.map((col)=>escapeCsvValue(row[col.key])).join(','));
+            const csvString = [
+                headerRow,
+                ...dataRows
+            ].join('\n') + '\n';
+            const csvBlob = new Blob([
+                csvString
+            ], {
+                type: 'text/csv;charset=utf-8'
+            });
+            const baseFilename = sanitizeFilename(title);
+            const filename = `${baseFilename}_data.csv`;
+            const url = URL.createObjectURL(csvBlob);
+            try {
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = filename;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            } finally{
+                URL.revokeObjectURL(url);
+            }
+        } catch (error) {
+            console.error('Table CSV export failed:', error);
+        }
+    }, [
+        canExport,
+        tableData,
+        definition
+    ]);
+    if (!canExport) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(InfoTooltip, {
+        description: "Export as CSV",
+        children: /*#__PURE__*/ _jsx(IconButton, {
+            size: "small",
+            onClick: handleExport,
+            "aria-label": "Export table data as CSV",
+            children: /*#__PURE__*/ _jsx(DownloadIcon, {
+                fontSize: "inherit"
+            })
+        })
+    });
+};
+
+//# sourceMappingURL=TableExportAction.js.map

package/lib/TableExportAction.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TableExportAction.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 React, { useCallback, useMemo } from 'react';\nimport { escapeCsvValue, PanelData, sanitizeFilename } from '@perses-dev/plugin-system';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { IconButton } from '@mui/material';\nimport DownloadIcon from 'mdi-material-ui/Download';\nimport { TimeSeriesData, transformData } from '@perses-dev/core';\nimport { TableProps } from './components';\nimport type { TableOptions } from './models';\nimport { buildRawTableData } from './table-data-utils';\n\nexport interface ExportColumn {\n  key: string;\n  header: string;\n}\n\n/**\n * Converts raw query results into the same tabular structure that TablePanel\n * renders, applying indexed column naming and configured transforms so the\n * CSV output matches the visual table.\n */\nexport function buildTableData(\n  queryResults: Array<PanelData<TimeSeriesData>>,\n  spec: TableOptions\n): { data: Array<Record<string, unknown>>; columns: ExportColumn[] } {\n  // Use shared utility with forExport=true to get raw scalar values\n  const rawData = buildRawTableData(queryResults, spec, { forExport: true });\n\n  const transformed = transformData(rawData, spec.transforms ?? []);\n\n  const allKeys: string[] = [];\n  for (const entry of transformed) {\n    for (const key of Object.keys(entry)) {\n      if (!allKeys.includes(key)) allKeys.push(key);\n    }\n  }\n\n  const columnSettings = spec.columnSettings ?? [];\n  const columns: ExportColumn[] = [];\n  const customized = new Set<string>();\n\n  for (const col of columnSettings) {\n    if (customized.has(col.name)) continue;\n    customized.add(col.name);\n    if (col.hide) continue;\n    columns.push({ key: col.name, header: col.header ?? col.name });\n  }\n\n  if (!spec.defaultColumnHidden) {\n    for (const key of allKeys) {\n      if (!customized.has(key)) {\n        columns.push({ key, header: key });\n      }\n    }\n  }\n\n  return { data: transformed, columns };\n}\n\nexport const TableExportAction: React.FC<TableProps> = ({ queryResults, spec, definition }) => {\n  const tableData = useMemo(() => buildTableData(queryResults, spec), [queryResults, spec]);\n\n  const canExport = tableData.data.length > 0 && tableData.columns.length > 0;\n\n  const handleExport = useCallback(() => {\n    if (!canExport) return;\n\n    try {\n      const title = definition?.spec?.display?.name || 'Table Data';\n      const { data, columns } = tableData;\n\n      const headerRow = columns.map((c) => escapeCsvValue(c.header)).join(',');\n      const dataRows = data.map((row) => columns.map((col) => escapeCsvValue(row[col.key])).join(','));\n\n      const csvString = [headerRow, ...dataRows].join('\\n') + '\\n';\n      const csvBlob = new Blob([csvString], { type: 'text/csv;charset=utf-8' });\n\n      const baseFilename = sanitizeFilename(title);\n      const filename = `${baseFilename}_data.csv`;\n\n      const url = URL.createObjectURL(csvBlob);\n      try {\n        const link = document.createElement('a');\n        link.href = url;\n        link.download = filename;\n        document.body.appendChild(link);\n        link.click();\n        document.body.removeChild(link);\n      } finally {\n        URL.revokeObjectURL(url);\n      }\n    } catch (error) {\n      console.error('Table CSV export failed:', error);\n    }\n  }, [canExport, tableData, definition]);\n\n  if (!canExport) {\n    return null;\n  }\n\n  return (\n    <InfoTooltip description=\"Export as CSV\">\n      <IconButton size=\"small\" onClick={handleExport} aria-label=\"Export table data as CSV\">\n        <DownloadIcon fontSize=\"inherit\" />\n      </IconButton>\n    </InfoTooltip>\n  );\n};\n"],"names":["React","useCallback","useMemo","escapeCsvValue","sanitizeFilename","InfoTooltip","IconButton","DownloadIcon","transformData","buildRawTableData","buildTableData","queryResults","spec","rawData","forExport","transformed","transforms","allKeys","entry","key","Object","keys","includes","push","columnSettings","columns","customized","Set","col","has","name","add","hide","header","defaultColumnHidden","data","TableExportAction","definition","tableData","canExport","length","handleExport","title","display","headerRow","map","c","join","dataRows","row","csvString","csvBlob","Blob","type","baseFilename","filename","url","URL","createObjectURL","link","document","createElement","href","download","body","appendChild","click","removeChild","revokeObjectURL","error","console","description","size","onClick","aria-label","fontSize"],"mappings":"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"}

package/lib/cjs/Table.js

@@ -23,6 +23,7 @@ Object.defineProperty(exports, "Table", {
 const _components = require("./components");
 const _TableItemSelectionActionsEditor = require("./components/TableItemSelectionActionsEditor");
 const _models = require("./models");
+const _TableExportAction = require("./TableExportAction");
 const Table = {
     PanelComponent: _components.TablePanel,
     supportedQueryTypes: [
@@ -51,5 +52,11 @@ const Table = {
             content: _TableItemSelectionActionsEditor.TableItemSelectionActionsEditor
         }
     ],
-    createInitialOptions: _models.createInitialTableOptions
+    createInitialOptions: _models.createInitialTableOptions,
+    actions: [
+        {
+            component: _TableExportAction.TableExportAction,
+            location: 'header'
+        }
+    ]
 };

package/lib/cjs/TableExportAction.js

@@ -0,0 +1,181 @@
+// 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get TableExportAction () {
+        return TableExportAction;
+    },
+    get buildTableData () {
+        return buildTableData;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _components = require("@perses-dev/components");
+const _material = require("@mui/material");
+const _Download = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Download"));
+const _core = require("@perses-dev/core");
+const _tabledatautils = require("./table-data-utils");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function buildTableData(queryResults, spec) {
+    // Use shared utility with forExport=true to get raw scalar values
+    const rawData = (0, _tabledatautils.buildRawTableData)(queryResults, spec, {
+        forExport: true
+    });
+    const transformed = (0, _core.transformData)(rawData, spec.transforms ?? []);
+    const allKeys = [];
+    for (const entry of transformed){
+        for (const key of Object.keys(entry)){
+            if (!allKeys.includes(key)) allKeys.push(key);
+        }
+    }
+    const columnSettings = spec.columnSettings ?? [];
+    const columns = [];
+    const customized = new Set();
+    for (const col of columnSettings){
+        if (customized.has(col.name)) continue;
+        customized.add(col.name);
+        if (col.hide) continue;
+        columns.push({
+            key: col.name,
+            header: col.header ?? col.name
+        });
+    }
+    if (!spec.defaultColumnHidden) {
+        for (const key of allKeys){
+            if (!customized.has(key)) {
+                columns.push({
+                    key,
+                    header: key
+                });
+            }
+        }
+    }
+    return {
+        data: transformed,
+        columns
+    };
+}
+const TableExportAction = ({ queryResults, spec, definition })=>{
+    const tableData = (0, _react.useMemo)(()=>buildTableData(queryResults, spec), [
+        queryResults,
+        spec
+    ]);
+    const canExport = tableData.data.length > 0 && tableData.columns.length > 0;
+    const handleExport = (0, _react.useCallback)(()=>{
+        if (!canExport) return;
+        try {
+            const title = definition?.spec?.display?.name || 'Table Data';
+            const { data, columns } = tableData;
+            const headerRow = columns.map((c)=>(0, _pluginsystem.escapeCsvValue)(c.header)).join(',');
+            const dataRows = data.map((row)=>columns.map((col)=>(0, _pluginsystem.escapeCsvValue)(row[col.key])).join(','));
+            const csvString = [
+                headerRow,
+                ...dataRows
+            ].join('\n') + '\n';
+            const csvBlob = new Blob([
+                csvString
+            ], {
+                type: 'text/csv;charset=utf-8'
+            });
+            const baseFilename = (0, _pluginsystem.sanitizeFilename)(title);
+            const filename = `${baseFilename}_data.csv`;
+            const url = URL.createObjectURL(csvBlob);
+            try {
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = filename;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            } finally{
+                URL.revokeObjectURL(url);
+            }
+        } catch (error) {
+            console.error('Table CSV export failed:', error);
+        }
+    }, [
+        canExport,
+        tableData,
+        definition
+    ]);
+    if (!canExport) {
+        return null;
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+        description: "Export as CSV",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+            size: "small",
+            onClick: handleExport,
+            "aria-label": "Export table data as CSV",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Download.default, {
+                fontSize: "inherit"
+            })
+        })
+    });
+};

package/lib/cjs/components/TablePanel.js

@@ -36,6 +36,7 @@ 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) {
     const plugin = column.plugin;
@@ -66,7 +67,7 @@ function generateCellContentConfig(column) {
 function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme }) {
     const values = [
         ...new Set(allValues)
-    ].filter((v)=>v != null).sort();
+    ].filter((v)=>v !== null).sort();
     if (values.length === 0) {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
             "data-filter-dropdown": true,
@@ -225,7 +226,7 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
 function getTablePanelQueryOptions(spec) {
     // if any cell renders a panel plugin, perform a range query instead of an instant query
     return {
-        mode: (spec.columnSettings ?? []).some((c)=>c.plugin) ? 'range' : 'instant'
+        mode: (0, _tabledatautils.getTablePanelQueryMode)(spec)
     };
 }
 function TablePanel({ contentDimensions, spec, queryResults }) {
@@ -273,53 +274,12 @@ function TablePanel({ contentDimensions, spec, queryResults }) {
         clearSelection
     ]);
     // TODO: handle other query types
-    const queryMode = getTablePanelQueryOptions(spec).mode;
     const rawData = (0, _react.useMemo)(()=>{
-        // Transform query results to a tabular format:
-        // [ { timestamp: 123, value: 456, labelName1: labelValue1 }, ... ]
-        return queryResults.flatMap((data, queryIndex)=>data.data.series.map((ts)=>({
-                    data,
-                    ts,
-                    queryIndex
-                }))).map(({ data, ts, queryIndex })=>{
-            if (ts.values[0] === undefined) {
-                return {
-                    ...ts.labels
-                };
-            }
-            // If there are multiple queries, we need to add the query index to the value key and label key to avoid conflicts
-            const valueColumnName = queryResults.length === 1 ? 'value' : `value #${queryIndex + 1}`;
-            const labels = queryResults.length === 1 ? ts.labels : Object.entries(ts.labels ?? {}).reduce((acc, [key, value])=>{
-                if (key) acc[`${key} #${queryIndex + 1}`] = value;
-                return acc;
-            }, {});
-            // If the cell visualization is a panel plugin, filter the data by the current series
-            const columnValue = (spec.columnSettings ?? []).find((x)=>x.name === valueColumnName)?.plugin ? {
-                ...data,
-                data: {
-                    ...data.data,
-                    series: data.data.series.filter((s)=>s === ts)
-                }
-            } : ts.values[0][1];
-            if (queryMode === 'instant') {
-                // Timestamp is not indexed as it will be the same for all queries
-                return {
-                    timestamp: ts.values[0][0],
-                    [valueColumnName]: columnValue,
-                    ...labels
-                };
-            } else {
-                // Don't add a timestamp for range queries
-                return {
-                    [valueColumnName]: columnValue,
-                    ...labels
-                };
-            }
-        });
+        // Transform query results to a tabular format using shared utility
+        return (0, _tabledatautils.buildRawTableData)(queryResults, spec);
     }, [
         queryResults,
-        queryMode,
-        spec.columnSettings
+        spec
     ]);
     // Transform will be applied by their orders on the original data
     const data = (0, _react.useMemo)(()=>(0, _core.transformData)(rawData, spec.transforms ?? []), [

package/lib/cjs/table-data-utils.js

@@ -0,0 +1,83 @@
+// 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get buildRawTableData () {
+        return buildRawTableData;
+    },
+    get getTablePanelQueryMode () {
+        return getTablePanelQueryMode;
+    }
+});
+function getTablePanelQueryMode(spec) {
+    return (spec.columnSettings ?? []).some((c)=>c.plugin) ? 'range' : 'instant';
+}
+function buildRawTableData(queryResults, spec, options = {}) {
+    const { forExport = false } = options;
+    const queryMode = getTablePanelQueryMode(spec);
+    return queryResults.flatMap((data, queryIndex)=>(data.data?.series ?? []).map((ts)=>({
+                data,
+                ts,
+                queryIndex
+            }))).map(({ data, ts, queryIndex })=>{
+        if (ts.values[0] === undefined) {
+            return {
+                ...ts.labels
+            };
+        }
+        // If there are multiple queries, add query index to value key and label keys to avoid conflicts
+        const valueColumnName = queryResults.length === 1 ? 'value' : `value #${queryIndex + 1}`;
+        const labels = queryResults.length === 1 ? ts.labels : Object.entries(ts.labels ?? {}).reduce((acc, [key, value])=>{
+            if (key) acc[`${key} #${queryIndex + 1}`] = value;
+            return acc;
+        }, {});
+        // For export: always use raw scalar values
+        // For rendering: plugin columns get embedded PanelData objects
+        let columnValue;
+        if (forExport) {
+            columnValue = ts.values[0][1];
+        } else {
+            const hasPlugin = (spec.columnSettings ?? []).find((x)=>x.name === valueColumnName)?.plugin;
+            columnValue = hasPlugin ? {
+                ...data,
+                data: {
+                    ...data.data,
+                    series: data.data.series.filter((s)=>s === ts)
+                }
+            } : ts.values[0][1];
+        }
+        if (queryMode === 'instant') {
+            // Timestamp is not indexed as it will be the same for all queries
+            return {
+                timestamp: ts.values[0][0],
+                [valueColumnName]: columnValue,
+                ...labels
+            };
+        } else {
+            // Don't add a timestamp for range queries
+            return {
+                [valueColumnName]: columnValue,
+                ...labels
+            };
+        }
+    });
+}

package/lib/components/ConditionalPanel.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import { Grid2Props as GridProps } from '@mui/material';
 import { CellSettings } from '../models';
 export interface ConditionalRuleProps extends Omit<GridProps, 'onChange'> {
@@ -5,11 +6,11 @@ export interface ConditionalRuleProps extends Omit<GridProps, 'onChange'> {
     onChange: (cell: CellSettings) => void;
     onDelete: () => void;
 }
-export declare function ConditionalRule({ cell, onChange, onDelete, ...props }: ConditionalRuleProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConditionalRule({ cell, onChange, onDelete, ...props }: ConditionalRuleProps): ReactElement;
 export interface ConditionalPanelProps {
     cellSettings?: CellSettings[];
     onChange: (cellSettings: CellSettings[] | undefined) => void;
     addButtonText?: string;
 }
-export declare function ConditionalPanel({ cellSettings, onChange, addButtonText, }: ConditionalPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConditionalPanel({ cellSettings, onChange, addButtonText, }: ConditionalPanelProps): ReactElement;
 //# sourceMappingURL=ConditionalPanel.d.ts.map

package/lib/components/ConditionalPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionalPanel.d.ts","sourceRoot":"","sources":["../../../src/components/ConditionalPanel.tsx"],"names":[],"mappings":"AAcA,OAAO,EAGL,UAAU,IAAI,SAAS,EAQxB,MAAM,eAAe,CAAC;AAIvB,OAAO,EAAE,YAAY,EAAyB,MAAM,WAAW,CAAC;AAGhE,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACvE,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAyH3F;AAGD,MAAM,WAAW,qBAAqB;IACpC,YAAY,CAAC,EAAE,YAAY,EAAE,CAAC;IAC9B,QAAQ,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,YAAiB,EACjB,QAAQ,EACR,aAAwC,GACzC,EAAE,qBAAqB,2CAmDvB"}
+{"version":3,"file":"ConditionalPanel.d.ts","sourceRoot":"","sources":["../../../src/components/ConditionalPanel.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAGL,UAAU,IAAI,SAAS,EAQxB,MAAM,eAAe,CAAC;AAIvB,OAAO,EAAE,YAAY,EAAyB,MAAM,WAAW,CAAC;AAGhE,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACvE,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,GAAG,YAAY,CAyH1G;AAGD,MAAM,WAAW,qBAAqB;IACpC,YAAY,CAAC,EAAE,YAAY,EAAE,CAAC;IAC9B,QAAQ,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,YAAiB,EACjB,QAAQ,EACR,aAAwC,GACzC,EAAE,qBAAqB,GAAG,YAAY,CAmDtC"}

package/lib/components/ConditionalPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ConditionalPanel.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 React from 'react';\nimport {\n  Button,\n  Divider,\n  Grid2Props as GridProps,\n  IconButton,\n  MenuItem,\n  Stack,\n  TextField,\n  Tooltip,\n  Typography,\n  Grid2 as Grid,\n} from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { OptionsColorPicker } from '@perses-dev/components';\nimport { CellSettings, renderConditionEditor } from '../models';\n\n// Individual conditional formatting rule component\nexport interface ConditionalRuleProps extends Omit<GridProps, 'onChange'> {\n  cell: CellSettings;\n  onChange: (cell: CellSettings) => void;\n  onDelete: () => void;\n}\n\nexport function ConditionalRule({ cell, onChange, onDelete, ...props }: ConditionalRuleProps) {\n  return (\n    <Grid container spacing={2} {...props}>\n      <Grid size={{ xs: 5 }}>\n        <Stack direction=\"row\" gap={1} width=\"100%\">\n          <TextField\n            select\n            label=\"Type\"\n            value={cell.condition.kind}\n            onChange={(e) => onChange({ ...cell, condition: { kind: e.target.value } } as CellSettings)}\n            required\n            sx={{ width: '120px' }}\n          >\n            <MenuItem value=\"Value\">\n              <Stack>\n                <Typography>Value</Typography>\n                {cell.condition.kind !== 'Value' && (\n                  <Typography variant=\"caption\">Matches an exact text value</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Range\">\n              <Stack>\n                <Typography>Range</Typography>\n                {cell.condition.kind !== 'Range' && (\n                  <Typography variant=\"caption\">Matches against a numerical range</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Regex\">\n              <Stack>\n                <Typography>Regex</Typography>\n                {cell.condition.kind !== 'Regex' && (\n                  <Typography variant=\"caption\">Matches against a regular expression</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Misc\">\n              <Stack>\n                <Typography>Misc</Typography>\n                {cell.condition.kind !== 'Misc' && (\n                  <Typography variant=\"caption\">Matches against empty, null and NaN values</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n          </TextField>\n          {renderConditionEditor(\n            cell.condition,\n            (updatedCondition) => onChange({ ...cell, condition: updatedCondition }),\n            'small'\n          )}\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 4 }}>\n        <Stack spacing={1}>\n          <TextField\n            label=\"Display text\"\n            value={cell.text}\n            onChange={(e) => onChange({ ...cell, text: e.target.value })}\n            fullWidth\n            size=\"small\"\n          />\n          <Stack direction=\"row\" spacing={1}>\n            <TextField\n              label=\"Prefix\"\n              placeholder=\"$\"\n              value={cell.prefix ?? ''}\n              onChange={(e) => onChange({ ...cell, prefix: e.target.value })}\n              size=\"small\"\n            />\n            <TextField\n              label=\"Suffix\"\n              placeholder=\"%\"\n              value={cell.suffix ?? ''}\n              onChange={(e) => onChange({ ...cell, suffix: e.target.value })}\n              size=\"small\"\n            />\n          </Stack>\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 1 }}>\n        <Stack direction=\"row\" justifyContent=\"center\" gap={1}>\n          {cell.textColor ? (\n            <OptionsColorPicker\n              label=\"Text Color\"\n              color={cell.textColor ?? '#000'}\n              onColorChange={(color) => onChange({ ...cell, textColor: color } as CellSettings)}\n              onClear={() => onChange({ ...cell, textColor: undefined } as CellSettings)}\n            />\n          ) : (\n            <IconButton onClick={() => onChange({ ...cell, textColor: '#000' })}>\n              <AddIcon />\n            </IconButton>\n          )}\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 1 }}>\n        <Stack direction=\"row\" justifyContent=\"center\">\n          {cell.backgroundColor ? (\n            <OptionsColorPicker\n              label=\"Background Color\"\n              color={cell.backgroundColor ?? '#fff'}\n              onColorChange={(color) => onChange({ ...cell, backgroundColor: color } as CellSettings)}\n              onClear={() => onChange({ ...cell, backgroundColor: undefined } as CellSettings)}\n            />\n          ) : (\n            <IconButton onClick={() => onChange({ ...cell, backgroundColor: '#000' })}>\n              <AddIcon />\n            </IconButton>\n          )}\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 1 }} textAlign=\"end\">\n        <Tooltip title=\"Remove cell settings\" placement=\"top\">\n          <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={onDelete} key=\"delete-cell-button\">\n            <DeleteIcon />\n          </IconButton>\n        </Tooltip>\n      </Grid>\n    </Grid>\n  );\n}\n\n// Complete conditional formatting panel with headers and list management\nexport interface ConditionalPanelProps {\n  cellSettings?: CellSettings[];\n  onChange: (cellSettings: CellSettings[] | undefined) => void;\n  addButtonText?: string;\n}\n\nexport function ConditionalPanel({\n  cellSettings = [],\n  onChange,\n  addButtonText = 'Add Conditional Format',\n}: ConditionalPanelProps) {\n  const handleCellChange = (index: number, updatedCell: CellSettings) => {\n    const updatedCells = [...cellSettings];\n    updatedCells[index] = updatedCell;\n    onChange(updatedCells);\n  };\n\n  const handleCellDelete = (index: number) => {\n    const updatedCells = [...cellSettings];\n    updatedCells.splice(index, 1);\n    onChange(updatedCells.length > 0 ? updatedCells : undefined);\n  };\n\n  const handleAddCell = () => {\n    const updatedCells = [...cellSettings];\n    updatedCells.push({ condition: { kind: 'Value', spec: { value: '' } } });\n    onChange(updatedCells);\n  };\n\n  return (\n    <Stack spacing={3} sx={{ mt: 2 }}>\n      <Grid container spacing={3}>\n        <Grid size={{ xs: 5 }}>\n          <Typography variant=\"subtitle1\">Condition</Typography>\n        </Grid>\n        <Grid size={{ xs: 4 }}>\n          <Typography variant=\"subtitle1\">Display Text</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }} textAlign=\"center\">\n          <Typography variant=\"subtitle1\">Color</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }} textAlign=\"center\">\n          <Typography variant=\"subtitle1\">Background</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }}></Grid>\n      </Grid>\n      <Stack gap={1.5} divider={<Divider flexItem orientation=\"horizontal\" />}>\n        {cellSettings.map((cell, i) => (\n          <ConditionalRule\n            key={i}\n            cell={cell}\n            onChange={(updatedCell: CellSettings) => handleCellChange(i, updatedCell)}\n            onDelete={() => handleCellDelete(i)}\n          />\n        ))}\n      </Stack>\n      <Button variant=\"outlined\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleAddCell}>\n        {addButtonText}\n      </Button>\n    </Stack>\n  );\n}\n"],"names":["React","Button","Divider","IconButton","MenuItem","Stack","TextField","Tooltip","Typography","Grid2","Grid","DeleteIcon","AddIcon","OptionsColorPicker","renderConditionEditor","ConditionalRule","cell","onChange","onDelete","props","container","spacing","size","xs","direction","gap","width","select","label","value","condition","kind","e","target","required","sx","variant","updatedCondition","text","fullWidth","placeholder","prefix","suffix","justifyContent","textColor","color","onColorChange","onClear","undefined","onClick","backgroundColor","textAlign","title","placement","marginLeft","ConditionalPanel","cellSettings","addButtonText","handleCellChange","index","updatedCell","updatedCells","handleCellDelete","splice","length","handleAddCell","push","spec","mt","divider","flexItem","orientation","map","i","startIcon","marginTop"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/ConditionalPanel.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 React, { ReactElement } from 'react';\nimport {\n  Button,\n  Divider,\n  Grid2Props as GridProps,\n  IconButton,\n  MenuItem,\n  Stack,\n  TextField,\n  Tooltip,\n  Typography,\n  Grid2 as Grid,\n} from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { OptionsColorPicker } from '@perses-dev/components';\nimport { CellSettings, renderConditionEditor } from '../models';\n\n// Individual conditional formatting rule component\nexport interface ConditionalRuleProps extends Omit<GridProps, 'onChange'> {\n  cell: CellSettings;\n  onChange: (cell: CellSettings) => void;\n  onDelete: () => void;\n}\n\nexport function ConditionalRule({ cell, onChange, onDelete, ...props }: ConditionalRuleProps): ReactElement {\n  return (\n    <Grid container spacing={2} {...props}>\n      <Grid size={{ xs: 5 }}>\n        <Stack direction=\"row\" gap={1} width=\"100%\">\n          <TextField\n            select\n            label=\"Type\"\n            value={cell.condition.kind}\n            onChange={(e) => onChange({ ...cell, condition: { kind: e.target.value } } as CellSettings)}\n            required\n            sx={{ width: '120px' }}\n          >\n            <MenuItem value=\"Value\">\n              <Stack>\n                <Typography>Value</Typography>\n                {cell.condition.kind !== 'Value' && (\n                  <Typography variant=\"caption\">Matches an exact text value</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Range\">\n              <Stack>\n                <Typography>Range</Typography>\n                {cell.condition.kind !== 'Range' && (\n                  <Typography variant=\"caption\">Matches against a numerical range</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Regex\">\n              <Stack>\n                <Typography>Regex</Typography>\n                {cell.condition.kind !== 'Regex' && (\n                  <Typography variant=\"caption\">Matches against a regular expression</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Misc\">\n              <Stack>\n                <Typography>Misc</Typography>\n                {cell.condition.kind !== 'Misc' && (\n                  <Typography variant=\"caption\">Matches against empty, null and NaN values</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n          </TextField>\n          {renderConditionEditor(\n            cell.condition,\n            (updatedCondition) => onChange({ ...cell, condition: updatedCondition }),\n            'small'\n          )}\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 4 }}>\n        <Stack spacing={1}>\n          <TextField\n            label=\"Display text\"\n            value={cell.text}\n            onChange={(e) => onChange({ ...cell, text: e.target.value })}\n            fullWidth\n            size=\"small\"\n          />\n          <Stack direction=\"row\" spacing={1}>\n            <TextField\n              label=\"Prefix\"\n              placeholder=\"$\"\n              value={cell.prefix ?? ''}\n              onChange={(e) => onChange({ ...cell, prefix: e.target.value })}\n              size=\"small\"\n            />\n            <TextField\n              label=\"Suffix\"\n              placeholder=\"%\"\n              value={cell.suffix ?? ''}\n              onChange={(e) => onChange({ ...cell, suffix: e.target.value })}\n              size=\"small\"\n            />\n          </Stack>\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 1 }}>\n        <Stack direction=\"row\" justifyContent=\"center\" gap={1}>\n          {cell.textColor ? (\n            <OptionsColorPicker\n              label=\"Text Color\"\n              color={cell.textColor ?? '#000'}\n              onColorChange={(color) => onChange({ ...cell, textColor: color } as CellSettings)}\n              onClear={() => onChange({ ...cell, textColor: undefined } as CellSettings)}\n            />\n          ) : (\n            <IconButton onClick={() => onChange({ ...cell, textColor: '#000' })}>\n              <AddIcon />\n            </IconButton>\n          )}\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 1 }}>\n        <Stack direction=\"row\" justifyContent=\"center\">\n          {cell.backgroundColor ? (\n            <OptionsColorPicker\n              label=\"Background Color\"\n              color={cell.backgroundColor ?? '#fff'}\n              onColorChange={(color) => onChange({ ...cell, backgroundColor: color } as CellSettings)}\n              onClear={() => onChange({ ...cell, backgroundColor: undefined } as CellSettings)}\n            />\n          ) : (\n            <IconButton onClick={() => onChange({ ...cell, backgroundColor: '#000' })}>\n              <AddIcon />\n            </IconButton>\n          )}\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 1 }} textAlign=\"end\">\n        <Tooltip title=\"Remove cell settings\" placement=\"top\">\n          <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={onDelete} key=\"delete-cell-button\">\n            <DeleteIcon />\n          </IconButton>\n        </Tooltip>\n      </Grid>\n    </Grid>\n  );\n}\n\n// Complete conditional formatting panel with headers and list management\nexport interface ConditionalPanelProps {\n  cellSettings?: CellSettings[];\n  onChange: (cellSettings: CellSettings[] | undefined) => void;\n  addButtonText?: string;\n}\n\nexport function ConditionalPanel({\n  cellSettings = [],\n  onChange,\n  addButtonText = 'Add Conditional Format',\n}: ConditionalPanelProps): ReactElement {\n  const handleCellChange = (index: number, updatedCell: CellSettings): void => {\n    const updatedCells = [...cellSettings];\n    updatedCells[index] = updatedCell;\n    onChange(updatedCells);\n  };\n\n  const handleCellDelete = (index: number): void => {\n    const updatedCells = [...cellSettings];\n    updatedCells.splice(index, 1);\n    onChange(updatedCells.length > 0 ? updatedCells : undefined);\n  };\n\n  const handleAddCell = (): void => {\n    const updatedCells = [...cellSettings];\n    updatedCells.push({ condition: { kind: 'Value', spec: { value: '' } } });\n    onChange(updatedCells);\n  };\n\n  return (\n    <Stack spacing={3} sx={{ mt: 2 }}>\n      <Grid container spacing={3}>\n        <Grid size={{ xs: 5 }}>\n          <Typography variant=\"subtitle1\">Condition</Typography>\n        </Grid>\n        <Grid size={{ xs: 4 }}>\n          <Typography variant=\"subtitle1\">Display Text</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }} textAlign=\"center\">\n          <Typography variant=\"subtitle1\">Color</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }} textAlign=\"center\">\n          <Typography variant=\"subtitle1\">Background</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }}></Grid>\n      </Grid>\n      <Stack gap={1.5} divider={<Divider flexItem orientation=\"horizontal\" />}>\n        {cellSettings.map((cell, i) => (\n          <ConditionalRule\n            key={i}\n            cell={cell}\n            onChange={(updatedCell: CellSettings) => handleCellChange(i, updatedCell)}\n            onDelete={() => handleCellDelete(i)}\n          />\n        ))}\n      </Stack>\n      <Button variant=\"outlined\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleAddCell}>\n        {addButtonText}\n      </Button>\n    </Stack>\n  );\n}\n"],"names":["React","Button","Divider","IconButton","MenuItem","Stack","TextField","Tooltip","Typography","Grid2","Grid","DeleteIcon","AddIcon","OptionsColorPicker","renderConditionEditor","ConditionalRule","cell","onChange","onDelete","props","container","spacing","size","xs","direction","gap","width","select","label","value","condition","kind","e","target","required","sx","variant","updatedCondition","text","fullWidth","placeholder","prefix","suffix","justifyContent","textColor","color","onColorChange","onClear","undefined","onClick","backgroundColor","textAlign","title","placement","marginLeft","ConditionalPanel","cellSettings","addButtonText","handleCellChange","index","updatedCell","updatedCells","handleCellDelete","splice","length","handleAddCell","push","spec","mt","divider","flexItem","orientation","map","i","startIcon","marginTop"],"mappings":";AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,sEAAsE;AACtE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAOA,WAA6B,QAAQ;AAC5C,SACEC,MAAM,EACNC,OAAO,EAEPC,UAAU,EACVC,QAAQ,EACRC,KAAK,EACLC,SAAS,EACTC,OAAO,EACPC,UAAU,EACVC,SAASC,IAAI,QACR,gBAAgB;AACvB,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,aAAa,uBAAuB;AAC3C,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAAuBC,qBAAqB,QAAQ,YAAY;AAShE,OAAO,SAASC,gBAAgB,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGC,OAA6B;IAC1F,qBACE,MAACT;QAAKU,SAAS;QAACC,SAAS;QAAI,GAAGF,KAAK;;0BACnC,KAACT;gBAAKY,MAAM;oBAAEC,IAAI;gBAAE;0BAClB,cAAA,MAAClB;oBAAMmB,WAAU;oBAAMC,KAAK;oBAAGC,OAAM;;sCACnC,MAACpB;4BACCqB,MAAM;4BACNC,OAAM;4BACNC,OAAOb,KAAKc,SAAS,CAACC,IAAI;4BAC1Bd,UAAU,CAACe,IAAMf,SAAS;oCAAE,GAAGD,IAAI;oCAAEc,WAAW;wCAAEC,MAAMC,EAAEC,MAAM,CAACJ,KAAK;oCAAC;gCAAE;4BACzEK,QAAQ;4BACRC,IAAI;gCAAET,OAAO;4BAAQ;;8CAErB,KAACtB;oCAASyB,OAAM;8CACd,cAAA,MAACxB;;0DACC,KAACG;0DAAW;;4CACXQ,KAAKc,SAAS,CAACC,IAAI,KAAK,yBACvB,KAACvB;gDAAW4B,SAAQ;0DAAU;;;;;8CAIpC,KAAChC;oCAASyB,OAAM;8CACd,cAAA,MAACxB;;0DACC,KAACG;0DAAW;;4CACXQ,KAAKc,SAAS,CAACC,IAAI,KAAK,yBACvB,KAACvB;gDAAW4B,SAAQ;0DAAU;;;;;8CAIpC,KAAChC;oCAASyB,OAAM;8CACd,cAAA,MAACxB;;0DACC,KAACG;0DAAW;;4CACXQ,KAAKc,SAAS,CAACC,IAAI,KAAK,yBACvB,KAACvB;gDAAW4B,SAAQ;0DAAU;;;;;8CAIpC,KAAChC;oCAASyB,OAAM;8CACd,cAAA,MAACxB;;0DACC,KAACG;0DAAW;;4CACXQ,KAAKc,SAAS,CAACC,IAAI,KAAK,wBACvB,KAACvB;gDAAW4B,SAAQ;0DAAU;;;;;;;wBAKrCtB,sBACCE,KAAKc,SAAS,EACd,CAACO,mBAAqBpB,SAAS;gCAAE,GAAGD,IAAI;gCAAEc,WAAWO;4BAAiB,IACtE;;;;0BAIN,KAAC3B;gBAAKY,MAAM;oBAAEC,IAAI;gBAAE;0BAClB,cAAA,MAAClB;oBAAMgB,SAAS;;sCACd,KAACf;4BACCsB,OAAM;4BACNC,OAAOb,KAAKsB,IAAI;4BAChBrB,UAAU,CAACe,IAAMf,SAAS;oCAAE,GAAGD,IAAI;oCAAEsB,MAAMN,EAAEC,MAAM,CAACJ,KAAK;gCAAC;4BAC1DU,SAAS;4BACTjB,MAAK;;sCAEP,MAACjB;4BAAMmB,WAAU;4BAAMH,SAAS;;8CAC9B,KAACf;oCACCsB,OAAM;oCACNY,aAAY;oCACZX,OAAOb,KAAKyB,MAAM,IAAI;oCACtBxB,UAAU,CAACe,IAAMf,SAAS;4CAAE,GAAGD,IAAI;4CAAEyB,QAAQT,EAAEC,MAAM,CAACJ,KAAK;wCAAC;oCAC5DP,MAAK;;8CAEP,KAAChB;oCACCsB,OAAM;oCACNY,aAAY;oCACZX,OAAOb,KAAK0B,MAAM,IAAI;oCACtBzB,UAAU,CAACe,IAAMf,SAAS;4CAAE,GAAGD,IAAI;4CAAE0B,QAAQV,EAAEC,MAAM,CAACJ,KAAK;wCAAC;oCAC5DP,MAAK;;;;;;;0BAKb,KAACZ;gBAAKY,MAAM;oBAAEC,IAAI;gBAAE;0BAClB,cAAA,KAAClB;oBAAMmB,WAAU;oBAAMmB,gBAAe;oBAASlB,KAAK;8BACjDT,KAAK4B,SAAS,iBACb,KAAC/B;wBACCe,OAAM;wBACNiB,OAAO7B,KAAK4B,SAAS,IAAI;wBACzBE,eAAe,CAACD,QAAU5B,SAAS;gCAAE,GAAGD,IAAI;gCAAE4B,WAAWC;4BAAM;wBAC/DE,SAAS,IAAM9B,SAAS;gCAAE,GAAGD,IAAI;gCAAE4B,WAAWI;4BAAU;uCAG1D,KAAC7C;wBAAW8C,SAAS,IAAMhC,SAAS;gCAAE,GAAGD,IAAI;gCAAE4B,WAAW;4BAAO;kCAC/D,cAAA,KAAChC;;;;0BAKT,KAACF;gBAAKY,MAAM;oBAAEC,IAAI;gBAAE;0BAClB,cAAA,KAAClB;oBAAMmB,WAAU;oBAAMmB,gBAAe;8BACnC3B,KAAKkC,eAAe,iBACnB,KAACrC;wBACCe,OAAM;wBACNiB,OAAO7B,KAAKkC,eAAe,IAAI;wBAC/BJ,eAAe,CAACD,QAAU5B,SAAS;gCAAE,GAAGD,IAAI;gCAAEkC,iBAAiBL;4BAAM;wBACrEE,SAAS,IAAM9B,SAAS;gCAAE,GAAGD,IAAI;gCAAEkC,iBAAiBF;4BAAU;uCAGhE,KAAC7C;wBAAW8C,SAAS,IAAMhC,SAAS;gCAAE,GAAGD,IAAI;gCAAEkC,iBAAiB;4BAAO;kCACrE,cAAA,KAACtC;;;;0BAKT,KAACF;gBAAKY,MAAM;oBAAEC,IAAI;gBAAE;gBAAG4B,WAAU;0BAC/B,cAAA,KAAC5C;oBAAQ6C,OAAM;oBAAuBC,WAAU;8BAC9C,cAAA,KAAClD;wBAAWmB,MAAK;wBAAQa,IAAI;4BAAEmB,YAAY;wBAAO;wBAAGL,SAAS/B;kCAC5D,cAAA,KAACP;uBADyE;;;;;AAOtF;AASA,OAAO,SAAS4C,iBAAiB,EAC/BC,eAAe,EAAE,EACjBvC,QAAQ,EACRwC,gBAAgB,wBAAwB,EAClB;IACtB,MAAMC,mBAAmB,CAACC,OAAeC;QACvC,MAAMC,eAAe;eAAIL;SAAa;QACtCK,YAAY,CAACF,MAAM,GAAGC;QACtB3C,SAAS4C;IACX;IAEA,MAAMC,mBAAmB,CAACH;QACxB,MAAME,eAAe;eAAIL;SAAa;QACtCK,aAAaE,MAAM,CAACJ,OAAO;QAC3B1C,SAAS4C,aAAaG,MAAM,GAAG,IAAIH,eAAeb;IACpD;IAEA,MAAMiB,gBAAgB;QACpB,MAAMJ,eAAe;eAAIL;SAAa;QACtCK,aAAaK,IAAI,CAAC;YAAEpC,WAAW;gBAAEC,MAAM;gBAASoC,MAAM;oBAAEtC,OAAO;gBAAG;YAAE;QAAE;QACtEZ,SAAS4C;IACX;IAEA,qBACE,MAACxD;QAAMgB,SAAS;QAAGc,IAAI;YAAEiC,IAAI;QAAE;;0BAC7B,MAAC1D;gBAAKU,SAAS;gBAACC,SAAS;;kCACvB,KAACX;wBAAKY,MAAM;4BAAEC,IAAI;wBAAE;kCAClB,cAAA,KAACf;4BAAW4B,SAAQ;sCAAY;;;kCAElC,KAAC1B;wBAAKY,MAAM;4BAAEC,IAAI;wBAAE;kCAClB,cAAA,KAACf;4BAAW4B,SAAQ;sCAAY;;;kCAElC,KAAC1B;wBAAKY,MAAM;4BAAEC,IAAI;wBAAE;wBAAG4B,WAAU;kCAC/B,cAAA,KAAC3C;4BAAW4B,SAAQ;sCAAY;;;kCAElC,KAAC1B;wBAAKY,MAAM;4BAAEC,IAAI;wBAAE;wBAAG4B,WAAU;kCAC/B,cAAA,KAAC3C;4BAAW4B,SAAQ;sCAAY;;;kCAElC,KAAC1B;wBAAKY,MAAM;4BAAEC,IAAI;wBAAE;;;;0BAEtB,KAAClB;gBAAMoB,KAAK;gBAAK4C,uBAAS,KAACnE;oBAAQoE,QAAQ;oBAACC,aAAY;;0BACrDf,aAAagB,GAAG,CAAC,CAACxD,MAAMyD,kBACvB,KAAC1D;wBAECC,MAAMA;wBACNC,UAAU,CAAC2C,cAA8BF,iBAAiBe,GAAGb;wBAC7D1C,UAAU,IAAM4C,iBAAiBW;uBAH5BA;;0BAOX,KAACxE;gBAAOmC,SAAQ;gBAAWsC,yBAAW,KAAC9D;gBAAYuB,IAAI;oBAAEwC,WAAW;gBAAE;gBAAG1B,SAASgB;0BAC/ER;;;;AAIT"}

package/lib/components/EmbeddedPanel.d.ts

@@ -1,10 +1,11 @@
 import { PanelData } from '@perses-dev/plugin-system';
 import { QueryDataType, UnknownSpec } from '@perses-dev/core';
+import { ReactElement } from 'react';
 interface EmbeddedPanelProps {
     kind: string;
     spec: UnknownSpec;
     queryResults: Array<PanelData<QueryDataType>>;
 }
-export declare function EmbeddedPanel({ kind, spec, queryResults }: EmbeddedPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function EmbeddedPanel({ kind, spec, queryResults }: EmbeddedPanelProps): ReactElement;
 export {};
 //# sourceMappingURL=EmbeddedPanel.d.ts.map