@perses-dev/table-plugin 0.11.1 → 0.13.0-beta.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ColumnsEditor/ColumnEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Button, ButtonGroup, Stack, StackProps, Switch, TextField } from '@mui/material';\nimport { ReactElement, useState } from 'react';\nimport {\n  AlignSelector,\n  FormatControls,\n  OptionsEditorColumn,\n  OptionsEditorControl,\n  OptionsEditorGrid,\n  OptionsEditorGroup,\n  SortSelectorButtons,\n} from '@perses-dev/components';\nimport { FormatOptions } from '@perses-dev/core';\nimport { PluginKindSelect } from '@perses-dev/plugin-system';\n\nimport { ColumnSettings } from '../../models';\nimport { ConditionalPanel } from '../ConditionalPanel';\nimport { DataLinkEditor } from './DataLinkEditorDialog';\n\nconst DEFAULT_FORMAT: FormatOptions = {\n  unit: 'decimal',\n  shortValues: true,\n};\n\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\nexport interface ColumnEditorProps extends Omit<StackProps, OmittedMuiProps> {\n  column: ColumnSettings;\n  onChange: (column: ColumnSettings) => void;\n}\n\nexport function ColumnEditor({ column, onChange, ...others }: ColumnEditorProps): ReactElement {\n  const [width, setWidth] = useState<number>(\n    column.width === undefined || column.width === 'auto' ? 100 : column.width\n  );\n\n  return (\n    <Stack {...others}>\n      <OptionsEditorGrid>\n        <OptionsEditorColumn>\n          <OptionsEditorGroup title=\"Column\">\n            <OptionsEditorControl\n              label=\"Name*\"\n              control={\n                <TextField\n                  value={column.name}\n                  onChange={(e) => onChange({ ...column, name: e.target.value })}\n                  required\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Header\"\n              control={\n                <TextField\n                  value={column.header ?? ''}\n                  onChange={(e) => onChange({ ...column, header: e.target.value ? e.target.value : undefined })}\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Header Tooltip\"\n              control={\n                <TextField\n                  value={column.headerDescription ?? ''}\n                  onChange={(e) =>\n                    onChange({ ...column, headerDescription: e.target.value ? e.target.value : undefined })\n                  }\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Cell Tooltip\"\n              control={\n                <TextField\n                  value={column.cellDescription ?? ''}\n                  onChange={(e) =>\n                    onChange({ ...column, cellDescription: e.target.value ? e.target.value : undefined })\n                  }\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Enable sorting\"\n              control={\n                <Switch\n                  checked={column.enableSorting ?? false}\n                  onChange={(e) => onChange({ ...column, enableSorting: e.target.checked })}\n                />\n              }\n            />\n            {column.enableSorting && (\n              <OptionsEditorControl\n                label=\"Default Sort\"\n                control={\n                  <SortSelectorButtons\n                    size=\"medium\"\n                    value={column.sort}\n                    sx={{\n                      margin: 0.5,\n                    }}\n                    onChange={(sort) => onChange({ ...column, sort: sort })}\n                  />\n                }\n              />\n            )}\n          </OptionsEditorGroup>\n        </OptionsEditorColumn>\n\n        <OptionsEditorColumn>\n          <OptionsEditorGroup title=\"Visual\">\n            <OptionsEditorControl\n              label=\"Show column\"\n              control={\n                <Switch\n                  checked={!(column.hide ?? false)}\n                  onChange={(e) => onChange({ ...column, hide: !e.target.checked })}\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Display\"\n              control={\n                <ButtonGroup aria-label=\"Display\" size=\"small\">\n                  <Button\n                    variant={!column.plugin ? 'contained' : 'outlined'}\n                    onClick={() => onChange({ ...column, plugin: undefined })}\n                  >\n                    Text\n                  </Button>\n                  <Button\n                    variant={column.plugin ? 'contained' : 'outlined'}\n                    onClick={() => onChange({ ...column, plugin: { kind: 'StatChart', spec: {} } })}\n                  >\n                    Embedded Panel\n                  </Button>\n                </ButtonGroup>\n              }\n            />\n            {column.plugin ? (\n              <OptionsEditorControl\n                label=\"Panel Type\"\n                control={\n                  <PluginKindSelect\n                    pluginTypes={['Panel']}\n                    value={{ type: 'Panel', kind: column.plugin.kind }}\n                    onChange={(event) => onChange({ ...column, plugin: { kind: event.kind, spec: {} } })}\n                  />\n                }\n              />\n            ) : (\n              <FormatControls\n                value={column.format ?? DEFAULT_FORMAT}\n                onChange={(newFormat): void =>\n                  onChange({\n                    ...column,\n                    format: newFormat,\n                  })\n                }\n              />\n            )}\n            <OptionsEditorControl\n              label=\"Alignment\"\n              control={\n                <AlignSelector\n                  size=\"small\"\n                  value={column.align ?? 'left'}\n                  onChange={(align) => onChange({ ...column, align: align })}\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Custom width\"\n              control={\n                <Switch\n                  checked={column.width !== undefined && column.width !== 'auto'}\n                  onChange={(e) => onChange({ ...column, width: e.target.checked ? width : 'auto' })}\n                />\n              }\n            />\n            {column.width !== undefined && column.width !== 'auto' && (\n              <OptionsEditorControl\n                label=\"Width\"\n                control={\n                  <TextField\n                    type=\"number\"\n                    value={width}\n                    slotProps={{ htmlInput: { min: 1 } }}\n                    onChange={(e) => {\n                      setWidth(+e.target.value);\n                      onChange({ ...column, width: +e.target.value });\n                    }}\n                  />\n                }\n              />\n            )}\n          </OptionsEditorGroup>\n        </OptionsEditorColumn>\n        <OptionsEditorColumn>\n          <OptionsEditorGroup title=\"Link\">\n            <DataLinkEditor column={column} onChange={onChange} />\n          </OptionsEditorGroup>\n        </OptionsEditorColumn>\n      </OptionsEditorGrid>\n      <Stack sx={{ px: 8 }}>\n        <OptionsEditorGroup title=\"Conditional Cell Format\">\n          <ConditionalPanel\n            cellSettings={column.cellSettings}\n            onChange={(cellSettings) => onChange({ ...column, cellSettings })}\n          />\n        </OptionsEditorGroup>\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Button","ButtonGroup","Stack","Switch","TextField","useState","AlignSelector","FormatControls","OptionsEditorColumn","OptionsEditorControl","OptionsEditorGrid","OptionsEditorGroup","SortSelectorButtons","PluginKindSelect","ConditionalPanel","DataLinkEditor","DEFAULT_FORMAT","unit","shortValues","ColumnEditor","column","onChange","others","width","setWidth","undefined","title","label","control","value","name","e","target","required","header","headerDescription","cellDescription","checked","enableSorting","size","sort","sx","margin","hide","aria-label","variant","plugin","onClick","kind","spec","pluginTypes","type","event","format","newFormat","align","slotProps","htmlInput","min","px","cellSettings"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ColumnsEditor/ColumnEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Button, ButtonGroup, Stack, StackProps, Switch, TextField, Typography } from '@mui/material';\nimport { ReactElement, useState } from 'react';\nimport {\n  AlignSelector,\n  FormatControls,\n  FormatOptions,\n  OptionsEditorColumn,\n  OptionsEditorControl,\n  OptionsEditorGrid,\n  OptionsEditorGroup,\n  SortSelectorButtons,\n} from '@perses-dev/components';\nimport { PluginKindSelect } from '@perses-dev/plugin-system';\n\nimport { ColumnSettings } from '../../models';\nimport { ConditionalPanel } from '../ConditionalPanel';\nimport { DataLinkEditor } from './DataLinkEditorDialog';\nimport { EmbeddedPanelOptionsEditor } from './EmbeddedPanelOptionsEditor';\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=\"Cell display\"\n              control={\n                <Stack spacing={1}>\n                  <ButtonGroup aria-label=\"Cell 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: 'GaugeChart', spec: {} } })}\n                    >\n                      Visualization\n                    </Button>\n                  </ButtonGroup>\n                  <Typography variant=\"caption\" color=\"text.secondary\" sx={{ maxWidth: 360 }}>\n                    Visualizations reuse panel settings (thresholds, units, colors). Text mode uses value formatting\n                    below.\n                  </Typography>\n                </Stack>\n              }\n            />\n            {column.plugin ? (\n              <OptionsEditorControl\n                label=\"Visualization type\"\n                control={\n                  <PluginKindSelect\n                    pluginTypes={['Panel']}\n                    size=\"small\"\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      {column.plugin?.kind === 'GaugeChart' && (\n        <Stack sx={{ px: 8, mt: 4, width: '100%' }} spacing={2}>\n          <OptionsEditorGroup title=\"Visualization settings\">\n            <EmbeddedPanelOptionsEditor\n              kind=\"GaugeChart\"\n              spec={column.plugin.spec}\n              onChange={(nextSpec) =>\n                onChange({\n                  ...column,\n                  plugin: { kind: 'GaugeChart', spec: nextSpec },\n                })\n              }\n            />\n          </OptionsEditorGroup>\n        </Stack>\n      )}\n      <Stack sx={{ px: 8, mt: column.plugin?.kind === 'GaugeChart' ? 3 : 0 }}>\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","Typography","useState","AlignSelector","FormatControls","OptionsEditorColumn","OptionsEditorControl","OptionsEditorGrid","OptionsEditorGroup","SortSelectorButtons","PluginKindSelect","ConditionalPanel","DataLinkEditor","EmbeddedPanelOptionsEditor","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","spacing","aria-label","variant","plugin","onClick","kind","spec","color","maxWidth","pluginTypes","type","event","format","newFormat","align","slotProps","htmlInput","min","px","mt","nextSpec","cellSettings"],"mappings":"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"}

package/lib/components/ColumnsEditor/EmbeddedPanelOptionsEditor.d.ts

@@ -0,0 +1,13 @@
+import { UnknownSpec } from '@perses-dev/spec';
+import { ReactElement } from 'react';
+export interface EmbeddedPanelOptionsEditorProps {
+    kind: string;
+    spec: UnknownSpec;
+    onChange: (next: UnknownSpec) => void;
+}
+/**
+ * Renders a panel plugin's settings tabs (thresholds, units, colors, …).
+ * Used for embedded GaugeChart columns only; other embedded panel kinds use defaults.
+ */
+export declare function EmbeddedPanelOptionsEditor({ kind, spec, onChange }: EmbeddedPanelOptionsEditorProps): ReactElement;
+//# sourceMappingURL=EmbeddedPanelOptionsEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmbeddedPanelOptionsEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnsEditor/EmbeddedPanelOptionsEditor.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,YAAY,EAA8B,MAAM,OAAO,CAAC;AAEjE,MAAM,WAAW,+BAA+B;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CACvC;AAaD;;;GAGG;AACH,wBAAgB,0BAA0B,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,+BAA+B,GAAG,YAAY,CAyElH"}

package/lib/components/ColumnsEditor/EmbeddedPanelOptionsEditor.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 { CircularProgress, Stack, Typography } from '@mui/material';
+import { OptionsEditorTabs, usePlugin } from '@perses-dev/plugin-system';
+import merge from 'lodash/merge';
+import { useEffect, useMemo, useRef } from 'react';
+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 merge({}, initial, spec ?? {});
+}
+/**
+ * Renders a panel plugin's settings tabs (thresholds, units, colors, …).
+ * Used for embedded GaugeChart columns only; other embedded panel kinds use defaults.
+ */ export function EmbeddedPanelOptionsEditor({ kind, spec, onChange }) {
+    const { data: plugin, isLoading, isError, error } = usePlugin('Panel', kind);
+    const panelPlugin = plugin;
+    const mergedSpec = useMemo(()=>{
+        if (!panelPlugin) {
+            return spec;
+        }
+        return mergeWithPluginDefaults(panelPlugin, spec);
+    }, [
+        panelPlugin,
+        spec
+    ]);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    // Persist plugin defaults when the column still has an empty spec (e.g. after switching panel kind).
+    useEffect(()=>{
+        if (!panelPlugin || !isSpecEmpty(spec)) {
+            return;
+        }
+        onChangeRef.current(mergeWithPluginDefaults(panelPlugin, spec));
+    }, [
+        panelPlugin,
+        kind,
+        spec
+    ]);
+    if (isLoading) {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            direction: "row",
+            alignItems: "center",
+            spacing: 1,
+            sx: {
+                py: 1
+            },
+            children: [
+                /*#__PURE__*/ _jsx(CircularProgress, {
+                    size: 22
+                }),
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    color: "text.secondary",
+                    children: "Loading panel settings…"
+                })
+            ]
+        });
+    }
+    if (isError || !plugin) {
+        return /*#__PURE__*/ _jsx(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__*/ _jsx(Typography, {
+            variant: "body2",
+            color: "text.secondary",
+            children: "This visualization has no editable settings."
+        });
+    }
+    return /*#__PURE__*/ _jsx(Stack, {
+        spacing: 2.5,
+        sx: {
+            width: '100%',
+            py: 1
+        },
+        children: /*#__PURE__*/ _jsx(OptionsEditorTabs, {
+            tabs: editorTabs.map((tab)=>{
+                const Content = tab.content;
+                return {
+                    label: tab.label,
+                    content: /*#__PURE__*/ _jsx(Content, {
+                        value: mergedSpec,
+                        onChange: (next)=>{
+                            onChange(next);
+                        }
+                    })
+                };
+            })
+        })
+    });
+}
+
+//# sourceMappingURL=EmbeddedPanelOptionsEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ColumnsEditor/EmbeddedPanelOptionsEditor.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 { CircularProgress, Stack, Typography } from '@mui/material';\nimport { OptionsEditorTabs, PanelPlugin, usePlugin } from '@perses-dev/plugin-system';\nimport { UnknownSpec } from '@perses-dev/spec';\nimport merge from 'lodash/merge';\nimport { ReactElement, useEffect, useMemo, useRef } from 'react';\n\nexport interface EmbeddedPanelOptionsEditorProps {\n  kind: string;\n  spec: UnknownSpec;\n  onChange: (next: UnknownSpec) => void;\n}\n\nfunction isSpecEmpty(spec: UnknownSpec | undefined): boolean {\n  if (spec === undefined || spec === null) return true;\n  if (typeof spec !== 'object') return false;\n  return Object.keys(spec as object).length === 0;\n}\n\nfunction mergeWithPluginDefaults(plugin: PanelPlugin, spec: UnknownSpec | undefined): UnknownSpec {\n  const initial = plugin.createInitialOptions() ?? {};\n  return merge({}, initial, spec ?? {}) as UnknownSpec;\n}\n\n/**\n * Renders a panel plugin's settings tabs (thresholds, units, colors, …).\n * Used for embedded GaugeChart columns only; other embedded panel kinds use defaults.\n */\nexport function EmbeddedPanelOptionsEditor({ kind, spec, onChange }: EmbeddedPanelOptionsEditorProps): ReactElement {\n  const { data: plugin, isLoading, isError, error } = usePlugin('Panel', kind);\n\n  const panelPlugin = plugin as PanelPlugin | undefined;\n\n  const mergedSpec = useMemo(() => {\n    if (!panelPlugin) {\n      return spec;\n    }\n    return mergeWithPluginDefaults(panelPlugin, spec);\n  }, [panelPlugin, spec]);\n\n  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n\n  // Persist plugin defaults when the column still has an empty spec (e.g. after switching panel kind).\n  useEffect(() => {\n    if (!panelPlugin || !isSpecEmpty(spec)) {\n      return;\n    }\n    onChangeRef.current(mergeWithPluginDefaults(panelPlugin, spec));\n  }, [panelPlugin, kind, spec]);\n\n  if (isLoading) {\n    return (\n      <Stack direction=\"row\" alignItems=\"center\" spacing={1} sx={{ py: 1 }}>\n        <CircularProgress size={22} />\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          Loading panel settings…\n        </Typography>\n      </Stack>\n    );\n  }\n\n  if (isError || !plugin) {\n    return (\n      <Typography variant=\"body2\" color=\"error\">\n        {error?.message ?? 'Could not load panel plugin.'}\n      </Typography>\n    );\n  }\n\n  const loadedPlugin = plugin as PanelPlugin;\n  const editorTabs = loadedPlugin.panelOptionsEditorComponents ?? [];\n\n  if (editorTabs.length === 0) {\n    return (\n      <Typography variant=\"body2\" color=\"text.secondary\">\n        This visualization has no editable settings.\n      </Typography>\n    );\n  }\n\n  return (\n    <Stack spacing={2.5} sx={{ width: '100%', py: 1 }}>\n      <OptionsEditorTabs\n        tabs={editorTabs.map((tab) => {\n          const Content = tab.content;\n          return {\n            label: tab.label,\n            content: (\n              <Content\n                value={mergedSpec}\n                onChange={(next) => {\n                  onChange(next as UnknownSpec);\n                }}\n              />\n            ),\n          };\n        })}\n      />\n    </Stack>\n  );\n}\n"],"names":["CircularProgress","Stack","Typography","OptionsEditorTabs","usePlugin","merge","useEffect","useMemo","useRef","isSpecEmpty","spec","undefined","Object","keys","length","mergeWithPluginDefaults","plugin","initial","createInitialOptions","EmbeddedPanelOptionsEditor","kind","onChange","data","isLoading","isError","error","panelPlugin","mergedSpec","onChangeRef","current","direction","alignItems","spacing","sx","py","size","variant","color","message","loadedPlugin","editorTabs","panelOptionsEditorComponents","width","tabs","map","tab","Content","content","label","value","next"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,gBAAgB,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AACpE,SAASC,iBAAiB,EAAeC,SAAS,QAAQ,4BAA4B;AAEtF,OAAOC,WAAW,eAAe;AACjC,SAAuBC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AAQjE,SAASC,YAAYC,IAA6B;IAChD,IAAIA,SAASC,aAAaD,SAAS,MAAM,OAAO;IAChD,IAAI,OAAOA,SAAS,UAAU,OAAO;IACrC,OAAOE,OAAOC,IAAI,CAACH,MAAgBI,MAAM,KAAK;AAChD;AAEA,SAASC,wBAAwBC,MAAmB,EAAEN,IAA6B;IACjF,MAAMO,UAAUD,OAAOE,oBAAoB,MAAM,CAAC;IAClD,OAAOb,MAAM,CAAC,GAAGY,SAASP,QAAQ,CAAC;AACrC;AAEA;;;CAGC,GACD,OAAO,SAASS,2BAA2B,EAAEC,IAAI,EAAEV,IAAI,EAAEW,QAAQ,EAAmC;IAClG,MAAM,EAAEC,MAAMN,MAAM,EAAEO,SAAS,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGrB,UAAU,SAASgB;IAEvE,MAAMM,cAAcV;IAEpB,MAAMW,aAAapB,QAAQ;QACzB,IAAI,CAACmB,aAAa;YAChB,OAAOhB;QACT;QACA,OAAOK,wBAAwBW,aAAahB;IAC9C,GAAG;QAACgB;QAAahB;KAAK;IAEtB,MAAMkB,cAAcpB,OAAOa;IAC3BO,YAAYC,OAAO,GAAGR;IAEtB,qGAAqG;IACrGf,UAAU;QACR,IAAI,CAACoB,eAAe,CAACjB,YAAYC,OAAO;YACtC;QACF;QACAkB,YAAYC,OAAO,CAACd,wBAAwBW,aAAahB;IAC3D,GAAG;QAACgB;QAAaN;QAAMV;KAAK;IAE5B,IAAIa,WAAW;QACb,qBACE,MAACtB;YAAM6B,WAAU;YAAMC,YAAW;YAASC,SAAS;YAAGC,IAAI;gBAAEC,IAAI;YAAE;;8BACjE,KAAClC;oBAAiBmC,MAAM;;8BACxB,KAACjC;oBAAWkC,SAAQ;oBAAQC,OAAM;8BAAiB;;;;IAKzD;IAEA,IAAIb,WAAW,CAACR,QAAQ;QACtB,qBACE,KAACd;YAAWkC,SAAQ;YAAQC,OAAM;sBAC/BZ,OAAOa,WAAW;;IAGzB;IAEA,MAAMC,eAAevB;IACrB,MAAMwB,aAAaD,aAAaE,4BAA4B,IAAI,EAAE;IAElE,IAAID,WAAW1B,MAAM,KAAK,GAAG;QAC3B,qBACE,KAACZ;YAAWkC,SAAQ;YAAQC,OAAM;sBAAiB;;IAIvD;IAEA,qBACE,KAACpC;QAAM+B,SAAS;QAAKC,IAAI;YAAES,OAAO;YAAQR,IAAI;QAAE;kBAC9C,cAAA,KAAC/B;YACCwC,MAAMH,WAAWI,GAAG,CAAC,CAACC;gBACpB,MAAMC,UAAUD,IAAIE,OAAO;gBAC3B,OAAO;oBACLC,OAAOH,IAAIG,KAAK;oBAChBD,uBACE,KAACD;wBACCG,OAAOtB;wBACPN,UAAU,CAAC6B;4BACT7B,SAAS6B;wBACX;;gBAGN;YACF;;;AAIR"}

package/lib/components/EmbeddedPanel.d.ts

@@ -1,6 +1,6 @@
 import { PanelData } from '@perses-dev/plugin-system';
-import { QueryDataType, UnknownSpec } from '@perses-dev/core';
 import { ReactElement } from 'react';
+import { QueryDataType, UnknownSpec } from '@perses-dev/spec';
 interface EmbeddedPanelProps {
     kind: string;
     spec: UnknownSpec;

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

@@ -1 +1 @@
-{"version":3,"file":"EmbeddedPanel.d.ts","sourceRoot":"","sources":["../../../src/components/EmbeddedPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAI9D,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,WAAW,CAAC;IAClB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC;CAC/C;AAED,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,kBAAkB,GAAG,YAAY,CAS5F"}
+{"version":3,"file":"EmbeddedPanel.d.ts","sourceRoot":"","sources":["../../../src/components/EmbeddedPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAItD,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE9D,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,WAAW,CAAC;IAClB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC;CAC/C;AAED,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,kBAAkB,GAAG,YAAY,CAS5F"}

package/lib/components/EmbeddedPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/EmbeddedPanel.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 { PanelData } from '@perses-dev/plugin-system';\nimport { QueryDataType, UnknownSpec } from '@perses-dev/core';\nimport { PanelPluginLoader } from '@perses-dev/dashboards';\nimport useResizeObserver from 'use-resize-observer';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { ReactElement } from 'react';\n\ninterface EmbeddedPanelProps {\n  kind: string;\n  spec: UnknownSpec;\n  queryResults: Array<PanelData<QueryDataType>>;\n}\n\nexport function EmbeddedPanel({ kind, spec, queryResults }: EmbeddedPanelProps): ReactElement {\n  const { ref, width = 1, height = 1 } = useResizeObserver<HTMLDivElement>();\n  return (\n    <div ref={ref} style={{ height: '100%' }}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        <PanelPluginLoader kind={kind} contentDimensions={{ width, height }} spec={spec} queryResults={queryResults} />\n      </ErrorBoundary>\n    </div>\n  );\n}\n"],"names":["PanelPluginLoader","useResizeObserver","ErrorAlert","ErrorBoundary","EmbeddedPanel","kind","spec","queryResults","ref","width","height","div","style","FallbackComponent","contentDimensions"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAIjC,SAASA,iBAAiB,QAAQ,yBAAyB;AAC3D,OAAOC,uBAAuB,sBAAsB;AACpD,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AASnE,OAAO,SAASC,cAAc,EAAEC,IAAI,EAAEC,IAAI,EAAEC,YAAY,EAAsB;IAC5E,MAAM,EAAEC,GAAG,EAAEC,QAAQ,CAAC,EAAEC,SAAS,CAAC,EAAE,GAAGT;IACvC,qBACE,KAACU;QAAIH,KAAKA;QAAKI,OAAO;YAAEF,QAAQ;QAAO;kBACrC,cAAA,KAACP;YAAcU,mBAAmBX;sBAChC,cAAA,KAACF;gBAAkBK,MAAMA;gBAAMS,mBAAmB;oBAAEL;oBAAOC;gBAAO;gBAAGJ,MAAMA;gBAAMC,cAAcA;;;;AAIvG"}
+{"version":3,"sources":["../../../src/components/EmbeddedPanel.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 { PanelData } from '@perses-dev/plugin-system';\nimport { PanelPluginLoader } from '@perses-dev/dashboards';\nimport useResizeObserver from 'use-resize-observer';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { QueryDataType, UnknownSpec } from '@perses-dev/spec';\n\ninterface EmbeddedPanelProps {\n  kind: string;\n  spec: UnknownSpec;\n  queryResults: Array<PanelData<QueryDataType>>;\n}\n\nexport function EmbeddedPanel({ kind, spec, queryResults }: EmbeddedPanelProps): ReactElement {\n  const { ref, width = 1, height = 1 } = useResizeObserver<HTMLDivElement>();\n  return (\n    <div ref={ref} style={{ height: '100%' }}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        <PanelPluginLoader kind={kind} contentDimensions={{ width, height }} spec={spec} queryResults={queryResults} />\n      </ErrorBoundary>\n    </div>\n  );\n}\n"],"names":["PanelPluginLoader","useResizeObserver","ErrorAlert","ErrorBoundary","EmbeddedPanel","kind","spec","queryResults","ref","width","height","div","style","FallbackComponent","contentDimensions"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,iBAAiB,QAAQ,yBAAyB;AAC3D,OAAOC,uBAAuB,sBAAsB;AACpD,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AAUnE,OAAO,SAASC,cAAc,EAAEC,IAAI,EAAEC,IAAI,EAAEC,YAAY,EAAsB;IAC5E,MAAM,EAAEC,GAAG,EAAEC,QAAQ,CAAC,EAAEC,SAAS,CAAC,EAAE,GAAGT;IACvC,qBACE,KAACU;QAAIH,KAAKA;QAAKI,OAAO;YAAEF,QAAQ;QAAO;kBACrC,cAAA,KAACP;YAAcU,mBAAmBX;sBAChC,cAAA,KAACF;gBAAkBK,MAAMA;gBAAMS,mBAAmB;oBAAEL;oBAAOC;gBAAO;gBAAGJ,MAAMA;gBAAMC,cAAcA;;;;AAIvG"}

package/lib/components/TablePanel.d.ts

@@ -1,6 +1,6 @@
-import { TimeSeriesData } from '@perses-dev/core';
 import { PanelProps } from '@perses-dev/plugin-system';
 import { ReactElement } from 'react';
+import { TimeSeriesData } from '@perses-dev/spec';
 import { TableOptions } from '../models';
 export declare function getTablePanelQueryOptions(spec: TableOptions): {
     mode: 'instant' | 'range';

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

@@ -1 +1 @@
-{"version":3,"file":"TablePanel.d.ts","sourceRoot":"","sources":["../../../src/components/TablePanel.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAkD,cAAc,EAAiB,MAAM,kBAAkB,CAAC;AAEjH,OAAO,EAGL,UAAU,EAIX,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,YAAY,EAAqD,MAAM,OAAO,CAAC;AACxF,OAAO,EAAiD,YAAY,EAAE,MAAM,WAAW,CAAC;AA+KxF,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,CAybrG"}
+{"version":3,"file":"TablePanel.d.ts","sourceRoot":"","sources":["../../../src/components/TablePanel.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAIL,UAAU,EAIX,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,YAAY,EAAqD,MAAM,OAAO,CAAC;AACxF,OAAO,EAAiB,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAA+D,YAAY,EAAE,MAAM,WAAW,CAAC;AAmVtG,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,CA4brG"}

package/lib/components/TablePanel.js

@@ -12,19 +12,164 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Box, Typography, useTheme } from '@mui/material';
-import { Table, useSelection } from '@perses-dev/components';
-import { formatValue, transformData } from '@perses-dev/core';
+import { formatValue, Table, transformData, useSelection } from '@perses-dev/components';
 import { useSelectionItemActions } from '@perses-dev/dashboards';
-import { replaceVariablesInString, useAllVariableValues } from '@perses-dev/plugin-system';
+import { CalculationsMap, replaceVariablesInString, useAllVariableValues } from '@perses-dev/plugin-system';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { evaluateConditionalFormatting } from '../models';
+import { buildRawTableData, getTablePanelQueryMode } from '../table-data-utils';
 import { EmbeddedPanel } from './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 = 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__*/ _jsx(_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__*/ _jsxs(Box, {
+        sx: {
+            display: 'flex',
+            alignItems: 'center',
+            width: '100%',
+            gap: 1
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    flexGrow: 1,
+                    borderRadius: 1,
+                    backgroundColor: trackColor,
+                    height: 24,
+                    overflow: 'hidden'
+                },
+                children: /*#__PURE__*/ _jsx(Box, {
+                    sx: {
+                        width: `${percent}%`,
+                        height: '100%',
+                        backgroundColor: fillColor ?? 'success.main',
+                        borderRadius: 1
+                    }
+                })
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                sx: {
+                    minWidth: 52,
+                    textAlign: 'right'
+                },
+                children: format ? formatValue(value, format) : value.toFixed(2)
+            })
+        ]
+    });
+}
+function resolveGaugeFillColor(value, globalCellSettings, columnCellSettings) {
+    let cellConfig = evaluateConditionalFormatting(value, globalCellSettings);
+    if (columnCellSettings?.length) {
+        const columnCellConfig = 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__*/ _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__*/ _jsx(_Fragment, {});
                 return /*#__PURE__*/ _jsx(EmbeddedPanel, {
                     kind: plugin.kind,
@@ -46,9 +191,11 @@ function generateCellContentConfig(column) {
     };
 }
 function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme }) {
+    const [searchTerm, setSearchTerm] = 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__*/ _jsx("div", {
             "data-filter-dropdown": true,
@@ -82,6 +229,23 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
             overflowY: 'auto'
         },
         children: [
+            /*#__PURE__*/ _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__*/ _jsx("div", {
                 style: {
                     marginBottom: 8,
@@ -123,7 +287,7 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
                     borderTop: `1px solid ${theme.palette.divider}`
                 }
             }),
-            values.map((value, index)=>/*#__PURE__*/ _jsx("div", {
+            filteredValues.map((value, index)=>/*#__PURE__*/ _jsx("div", {
                     style: {
                         marginBottom: 4
                     },
@@ -176,7 +340,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) {
@@ -195,7 +359,7 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
                 width,
                 align,
                 dataLink: modifiedDataLink,
-                ...generateCellContentConfig(column)
+                ...generateCellContentConfig(column, gaugeRangeByColumn[name], globalCellSettings)
             };
         }
     }
@@ -207,7 +371,7 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
 export 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: getTablePanelQueryMode(spec)
     };
 }
 export function TablePanel({ contentDimensions, spec, queryResults }) {
@@ -255,53 +419,12 @@ export function TablePanel({ contentDimensions, spec, queryResults }) {
         clearSelection
     ]);
     // TODO: handle other query types
-    const queryMode = getTablePanelQueryOptions(spec).mode;
     const rawData = 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 buildRawTableData(queryResults, spec);
     }, [
         queryResults,
-        queryMode,
-        spec.columnSettings
+        spec
     ]);
     // Transform will be applied by their orders on the original data
     const data = useMemo(()=>transformData(rawData, spec.transforms ?? []), [
@@ -333,6 +456,31 @@ export function TablePanel({ contentDimensions, spec, queryResults }) {
         data,
         keys
     ]);
+    const gaugeRangeByColumn = 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
+    ]);
     // Generate columns and map each column accessor to its settings index and data key
     const columns = useMemo(()=>{
         const columns = [];
@@ -340,7 +488,7 @@ export 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);
@@ -350,7 +498,7 @@ export 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);
                     }
@@ -362,7 +510,9 @@ export 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 = useMemo(()=>{