@perses-dev/table-plugin 0.14.0-beta.7 → 0.14.0-rc.1

package/lib/TableExportAction.js

@@ -60,6 +60,19 @@ import { buildRawTableData } from "./table-data-utils.js";
         columns
     };
 }
+function downloadCsv(csvBlob, filename) {
+    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);
+    }
+}
 export const TableExportAction = ({ queryResults, spec, definition })=>{
     const tableData = useMemo(()=>buildTableData(queryResults, spec), [
         queryResults,
@@ -84,17 +97,7 @@ export const TableExportAction = ({ queryResults, spec, definition })=>{
             });
             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);
-            }
+            downloadCsv(csvBlob, filename);
         } catch (error) {
             console.error('Table CSV export failed:', error);
         }

package/lib/TableExportAction.js.map

@@ -1 +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 { IconButton } from '@mui/material';\nimport { InfoTooltip, transformData } from '@perses-dev/components';\nimport type { PanelData } from '@perses-dev/plugin-system';\nimport { escapeCsvValue, sanitizeFilename } from '@perses-dev/plugin-system';\nimport type { QueryDataType } from '@perses-dev/spec';\nimport DownloadIcon from 'mdi-material-ui/Download';\nimport React, { useCallback, useMemo } from 'react';\n\nimport type { 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<QueryDataType>>,\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":["IconButton","InfoTooltip","transformData","escapeCsvValue","sanitizeFilename","DownloadIcon","React","useCallback","useMemo","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":";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,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,WAAW,EAAEC,aAAa,QAAQ,yBAAyB;AAEpE,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,4BAA4B;AAE7E,OAAOC,kBAAkB,2BAA2B;AACpD,OAAOC,SAASC,WAAW,EAAEC,OAAO,QAAQ,QAAQ;AAIpD,SAASC,iBAAiB,QAAQ,wBAAqB;AAOvD;;;;CAIC,GACD,OAAO,SAASC,eACdC,YAA6C,EAC7CC,IAAkB;IAElB,kEAAkE;IAClE,MAAMC,UAAUJ,kBAAkBE,cAAcC,MAAM;QAAEE,WAAW;IAAK;IAExE,MAAMC,cAAcb,cAAcW,SAASD,KAAKI,UAAU,IAAI,EAAE;IAEhE,MAAMC,UAAoB,EAAE;IAC5B,KAAK,MAAMC,SAASH,YAAa;QAC/B,KAAK,MAAMI,OAAOC,OAAOC,IAAI,CAACH,OAAQ;YACpC,IAAI,CAACD,QAAQK,QAAQ,CAACH,MAAMF,QAAQM,IAAI,CAACJ;QAC3C;IACF;IAEA,MAAMK,iBAAiBZ,KAAKY,cAAc,IAAI,EAAE;IAChD,MAAMC,UAA0B,EAAE;IAClC,MAAMC,aAAa,IAAIC;IAEvB,KAAK,MAAMC,OAAOJ,eAAgB;QAChC,IAAIE,WAAWG,GAAG,CAACD,IAAIE,IAAI,GAAG;QAC9BJ,WAAWK,GAAG,CAACH,IAAIE,IAAI;QACvB,IAAIF,IAAII,IAAI,EAAE;QACdP,QAAQF,IAAI,CAAC;YAAEJ,KAAKS,IAAIE,IAAI;YAAEG,QAAQL,IAAIK,MAAM,IAAIL,IAAIE,IAAI;QAAC;IAC/D;IAEA,IAAI,CAAClB,KAAKsB,mBAAmB,EAAE;QAC7B,KAAK,MAAMf,OAAOF,QAAS;YACzB,IAAI,CAACS,WAAWG,GAAG,CAACV,MAAM;gBACxBM,QAAQF,IAAI,CAAC;oBAAEJ;oBAAKc,QAAQd;gBAAI;YAClC;QACF;IACF;IAEA,OAAO;QAAEgB,MAAMpB;QAAaU;IAAQ;AACtC;AAEA,OAAO,MAAMW,oBAA0C,CAAC,EAAEzB,YAAY,EAAEC,IAAI,EAAEyB,UAAU,EAAE;IACxF,MAAMC,YAAY9B,QAAQ,IAAME,eAAeC,cAAcC,OAAO;QAACD;QAAcC;KAAK;IAExF,MAAM2B,YAAYD,UAAUH,IAAI,CAACK,MAAM,GAAG,KAAKF,UAAUb,OAAO,CAACe,MAAM,GAAG;IAE1E,MAAMC,eAAelC,YAAY;QAC/B,IAAI,CAACgC,WAAW;QAEhB,IAAI;YACF,MAAMG,QAAQL,YAAYzB,MAAM+B,SAASb,QAAQ;YACjD,MAAM,EAAEK,IAAI,EAAEV,OAAO,EAAE,GAAGa;YAE1B,MAAMM,YAAYnB,QAAQoB,GAAG,CAAC,CAACC,IAAM3C,eAAe2C,EAAEb,MAAM,GAAGc,IAAI,CAAC;YACpE,MAAMC,WAAWb,KAAKU,GAAG,CAAC,CAACI,MAAQxB,QAAQoB,GAAG,CAAC,CAACjB,MAAQzB,eAAe8C,GAAG,CAACrB,IAAIT,GAAG,CAAC,GAAG4B,IAAI,CAAC;YAE3F,MAAMG,YAAY;gBAACN;mBAAcI;aAAS,CAACD,IAAI,CAAC,QAAQ;YACxD,MAAMI,UAAU,IAAIC,KAAK;gBAACF;aAAU,EAAE;gBAAEG,MAAM;YAAyB;YAEvE,MAAMC,eAAelD,iBAAiBsC;YACtC,MAAMa,WAAW,GAAGD,aAAa,SAAS,CAAC;YAE3C,MAAME,MAAMC,IAAIC,eAAe,CAACP;YAChC,IAAI;gBACF,MAAMQ,OAAOC,SAASC,aAAa,CAAC;gBACpCF,KAAKG,IAAI,GAAGN;gBACZG,KAAKI,QAAQ,GAAGR;gBAChBK,SAASI,IAAI,CAACC,WAAW,CAACN;gBAC1BA,KAAKO,KAAK;gBACVN,SAASI,IAAI,CAACG,WAAW,CAACR;YAC5B,SAAU;gBACRF,IAAIW,eAAe,CAACZ;YACtB;QACF,EAAE,OAAOa,OAAO;YACdC,QAAQD,KAAK,CAAC,4BAA4BA;QAC5C;IACF,GAAG;QAAC9B;QAAWD;QAAWD;KAAW;IAErC,IAAI,CAACE,WAAW;QACd,OAAO;IACT;IAEA,qBACE,KAACtC;QAAYsE,aAAY;kBACvB,cAAA,KAACvE;YAAWwE,MAAK;YAAQC,SAAShC;YAAciC,cAAW;sBACzD,cAAA,KAACrE;gBAAasE,UAAS;;;;AAI/B,EAAE"}
+{"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 { IconButton } from '@mui/material';\nimport { InfoTooltip, transformData } from '@perses-dev/components';\nimport type { PanelData } from '@perses-dev/plugin-system';\nimport { escapeCsvValue, sanitizeFilename } from '@perses-dev/plugin-system';\nimport type { QueryDataType } from '@perses-dev/spec';\nimport DownloadIcon from 'mdi-material-ui/Download';\nimport React, { useCallback, useMemo } from 'react';\n\nimport type { 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<QueryDataType>>,\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\nfunction downloadCsv(csvBlob: Blob, filename: string): void {\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}\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      downloadCsv(csvBlob, filename);\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":["IconButton","InfoTooltip","transformData","escapeCsvValue","sanitizeFilename","DownloadIcon","React","useCallback","useMemo","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","downloadCsv","csvBlob","filename","url","URL","createObjectURL","link","document","createElement","href","download","body","appendChild","click","removeChild","revokeObjectURL","TableExportAction","definition","tableData","canExport","length","handleExport","title","display","headerRow","map","c","join","dataRows","row","csvString","Blob","type","baseFilename","error","console","description","size","onClick","aria-label","fontSize"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"EmbeddedPanelOptionsEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnsEditor/EmbeddedPanelOptionsEditor.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,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"}
+{"version":3,"file":"EmbeddedPanelOptionsEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnsEditor/EmbeddedPanelOptionsEditor.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,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,CAwElH"}

package/lib/components/ColumnsEditor/EmbeddedPanelOptionsEditor.js

@@ -12,9 +12,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 { OptionsEditorTabs, useEvent, usePlugin } from "@perses-dev/plugin-system";
 import merge from "lodash/merge";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo } from "react";
 function isSpecEmpty(spec) {
     if (spec === undefined || spec === null) return true;
     if (typeof spec !== 'object') return false;
@@ -39,18 +39,17 @@ function mergeWithPluginDefaults(plugin, spec) {
         panelPlugin,
         spec
     ]);
-    const onChangeRef = useRef(onChange);
-    onChangeRef.current = onChange;
+    const handleChange = useEvent(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));
+        handleChange(mergeWithPluginDefaults(panelPlugin, spec));
     }, [
         panelPlugin,
-        kind,
-        spec
+        spec,
+        handleChange
     ]);
     if (isLoading) {
         return /*#__PURE__*/ _jsxs(Stack, {

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

@@ -1 +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 type { PanelPlugin } from '@perses-dev/plugin-system';\nimport { OptionsEditorTabs, usePlugin } from '@perses-dev/plugin-system';\nimport type { UnknownSpec } from '@perses-dev/spec';\nimport merge from 'lodash/merge';\nimport type { ReactElement } from 'react';\nimport { 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;AAEpE,SAASC,iBAAiB,EAAEC,SAAS,QAAQ,4BAA4B;AAEzE,OAAOC,WAAW,eAAe;AAEjC,SAASC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AAQnD,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"}
+{"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 type { PanelPlugin } from '@perses-dev/plugin-system';\nimport { OptionsEditorTabs, useEvent, usePlugin } from '@perses-dev/plugin-system';\nimport type { UnknownSpec } from '@perses-dev/spec';\nimport merge from 'lodash/merge';\nimport type { ReactElement } from 'react';\nimport { useEffect, useMemo } 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 handleChange = useEvent(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    handleChange(mergeWithPluginDefaults(panelPlugin, spec));\n  }, [panelPlugin, spec, handleChange]);\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","useEvent","usePlugin","merge","useEffect","useMemo","isSpecEmpty","spec","undefined","Object","keys","length","mergeWithPluginDefaults","plugin","initial","createInitialOptions","EmbeddedPanelOptionsEditor","kind","onChange","data","isLoading","isError","error","panelPlugin","mergedSpec","handleChange","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;AAEpE,SAASC,iBAAiB,EAAEC,QAAQ,EAAEC,SAAS,QAAQ,4BAA4B;AAEnF,OAAOC,WAAW,eAAe;AAEjC,SAASC,SAAS,EAAEC,OAAO,QAAQ,QAAQ;AAQ3C,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,OAAOZ,MAAM,CAAC,GAAGW,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,GAAGpB,UAAU,SAASe;IAEvE,MAAMM,cAAcV;IAEpB,MAAMW,aAAanB,QAAQ;QACzB,IAAI,CAACkB,aAAa;YAChB,OAAOhB;QACT;QACA,OAAOK,wBAAwBW,aAAahB;IAC9C,GAAG;QAACgB;QAAahB;KAAK;IAEtB,MAAMkB,eAAexB,SAASiB;IAE9B,qGAAqG;IACrGd,UAAU;QACR,IAAI,CAACmB,eAAe,CAACjB,YAAYC,OAAO;YACtC;QACF;QACAkB,aAAab,wBAAwBW,aAAahB;IACpD,GAAG;QAACgB;QAAahB;QAAMkB;KAAa;IAEpC,IAAIL,WAAW;QACb,qBACE,MAACtB;YAAM4B,WAAU;YAAMC,YAAW;YAASC,SAAS;YAAGC,IAAI;gBAAEC,IAAI;YAAE;;8BACjE,KAACjC;oBAAiBkC,MAAM;;8BACxB,KAAChC;oBAAWiC,SAAQ;oBAAQC,OAAM;8BAAiB;;;;IAKzD;IAEA,IAAIZ,WAAW,CAACR,QAAQ;QACtB,qBACE,KAACd;YAAWiC,SAAQ;YAAQC,OAAM;sBAC/BX,OAAOY,WAAW;;IAGzB;IAEA,MAAMC,eAAetB;IACrB,MAAMuB,aAAaD,aAAaE,4BAA4B,IAAI,EAAE;IAElE,IAAID,WAAWzB,MAAM,KAAK,GAAG;QAC3B,qBACE,KAACZ;YAAWiC,SAAQ;YAAQC,OAAM;sBAAiB;;IAIvD;IAEA,qBACE,KAACnC;QAAM8B,SAAS;QAAKC,IAAI;YAAES,OAAO;YAAQR,IAAI;QAAE;kBAC9C,cAAA,KAAC9B;YACCuC,MAAMH,WAAWI,GAAG,CAAC,CAACC;gBACpB,MAAMC,UAAUD,IAAIE,OAAO;gBAC3B,OAAO;oBACLC,OAAOH,IAAIG,KAAK;oBAChBD,uBACE,KAACD;wBACCG,OAAOrB;wBACPN,UAAU,CAAC4B;4BACT5B,SAAS4B;wBACX;;gBAGN;YACF;;;AAIR"}

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

@@ -1 +1 @@
-{"version":3,"file":"TablePanel.d.ts","sourceRoot":"","sources":["../../../src/components/TablePanel.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAA4B,UAAU,EAAoB,MAAM,2BAA2B,CAAC;AAExG,OAAO,KAAK,EAAE,QAAQ,EAAiB,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,KAAK,EAAgC,YAAY,EAAE,MAAM,WAAW,CAAC;AAsV5E,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,GAAG,QAAQ,CAAC,CAAC;AAE7E,wBAAgB,UAAU,CAAC,EAAE,iBAAiB,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,UAAU,GAAG,YAAY,GAAG,IAAI,CAilBrG"}
+{"version":3,"file":"TablePanel.d.ts","sourceRoot":"","sources":["../../../src/components/TablePanel.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAA4B,UAAU,EAAoB,MAAM,2BAA2B,CAAC;AAExG,OAAO,KAAK,EAAE,QAAQ,EAAiB,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,KAAK,EAAgC,YAAY,EAAE,MAAM,WAAW,CAAC;AAwV5E,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,GAAG,QAAQ,CAAC,CAAC;AAE7E,wBAAgB,UAAU,CAAC,EAAE,iBAAiB,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,UAAU,GAAG,YAAY,GAAG,IAAI,CA4lBrG"}

package/lib/components/TablePanel.js

@@ -15,7 +15,7 @@ import { Box, Typography, useTheme } from "@mui/material";
 import { formatValue, Table, transformData, useSelection } from "@perses-dev/components";
 import { useSelectionItemActions } from "@perses-dev/dashboards";
 import { CalculationsMap, replaceVariablesInString, useAllVariableValues } from "@perses-dev/plugin-system";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { evaluateConditionalFormatting } from "../models/index.js";
 import { buildRawTableData, getTablePanelQueryMode } from "../table-data-utils.js";
@@ -387,7 +387,7 @@ export function TablePanel({ contentDimensions, spec, queryResults }) {
     });
     const filteredDataRef = useRef([]);
     // Refs used to keep the filter row in sync with the table's horizontal
-    const panelContainerRef = useRef(null);
+    const [panelContainer, setPanelContainer] = useState(null);
     const filterRowInnerRef = useRef(null);
     const filterCellRefs = useRef([]);
     // Convert selectionMap to TanStack's RowSelectionState format
@@ -665,10 +665,10 @@ export function TablePanel({ contentDimensions, spec, queryResults }) {
         });
         setOpenFilterColumn(columnId);
     };
-    const handleFilterClose = ()=>{
+    const handleFilterClose = useCallback(()=>{
         setFilterAnchorEl({});
         setOpenFilterColumn(null);
-    };
+    }, []);
     // Close filter when clicking outside
     useEffect(()=>{
         if (!openFilterColumn) return;
@@ -686,34 +686,33 @@ export function TablePanel({ contentDimensions, spec, queryResults }) {
             document.removeEventListener('click', handleClick);
         };
     }, [
-        openFilterColumn
+        openFilterColumn,
+        handleFilterClose
     ]);
     // Keep ref in sync with filtered data for use in selection handler
-    filteredDataRef.current = filteredData;
+    useLayoutEffect(()=>{
+        filteredDataRef.current = filteredData;
+    }, [
+        filteredData
+    ]);
     const [pagination, setPagination] = useState(spec.pagination ? {
         pageIndex: 0,
         pageSize: 10
     } : undefined);
-    useEffect(()=>{
-        // If the pagination setting changes from no pagination to pagination, but the pagination state is undefined, update the pagination state
-        if (spec.pagination && !pagination) {
-            setPagination({
-                pageIndex: 0,
-                pageSize: 10
-            });
-        } else if (!spec.pagination && pagination) {
-            setPagination(undefined);
-        }
-    }, [
-        spec.pagination,
-        pagination
-    ]);
+    if (spec.pagination && !pagination) {
+        setPagination({
+            pageIndex: 0,
+            pageSize: 10
+        });
+    } else if (!spec.pagination && pagination) {
+        setPagination(undefined);
+    }
     // Sync the filter row's horizontal position with the table scroll.
     useEffect(()=>{
         if (!spec.enableFiltering) {
             return;
         }
-        const scrollContainer = panelContainerRef.current?.querySelector('.MuiTableContainer-root');
+        const scrollContainer = panelContainer?.querySelector('.MuiTableContainer-root');
         const filterRowInner = filterRowInnerRef.current;
         if (!scrollContainer || !filterRowInner) {
             return;
@@ -723,7 +722,7 @@ export function TablePanel({ contentDimensions, spec, queryResults }) {
             setOpenFilterColumn((current)=>current === null ? current : null);
             setFilterAnchorEl((current)=>Object.keys(current).length === 0 ? current : {});
         };
-        syncFilterRowScroll();
+        filterRowInner.style.transform = `translateX(-${scrollContainer.scrollLeft}px)`;
         scrollContainer.addEventListener('scroll', syncFilterRowScroll, {
             passive: true
         });
@@ -731,23 +730,18 @@ export function TablePanel({ contentDimensions, spec, queryResults }) {
             scrollContainer.removeEventListener('scroll', syncFilterRowScroll);
         };
     }, [
-        spec.enableFiltering,
-        columns,
-        contentDimensions
+        panelContainer,
+        spec.enableFiltering
     ]);
     // Sync filter cell widths with the actual rendered table column widths to keep them aligned.
     useEffect(()=>{
         if (!spec.enableFiltering) {
             return;
         }
-        const scrollContainer = panelContainerRef.current?.querySelector('.MuiTableContainer-root');
+        const scrollContainer = panelContainer?.querySelector('.MuiTableContainer-root');
         if (!scrollContainer) {
             return;
         }
-        const headerRow = scrollContainer.querySelector('thead tr');
-        if (!headerRow) {
-            return;
-        }
         const syncColumnWidths = ()=>{
             const headerCells = scrollContainer.querySelectorAll('thead tr th');
             columns.forEach((_, idx)=>{
@@ -762,21 +756,39 @@ export function TablePanel({ contentDimensions, spec, queryResults }) {
                 filterCell.style.maxWidth = width;
             });
         };
-        syncColumnWidths();
-        // Re-sync whenever the header row's size changes
+        // Re-sync whenever the header row's size changes.
         const resizeObserver = new ResizeObserver(syncColumnWidths);
-        if (headerRow) {
-            resizeObserver.observe(headerRow);
-        }
+        // The virtualized table remounts its header row when its width, rows, or columns change,
+        // so follow the current header row instead of observing a detached one.
+        let headerRow = null;
+        const observeHeaderRow = ()=>{
+            const currentHeaderRow = scrollContainer.querySelector('thead tr');
+            if (currentHeaderRow === headerRow) {
+                return;
+            }
+            if (headerRow) {
+                resizeObserver.unobserve(headerRow);
+            }
+            headerRow = currentHeaderRow;
+            if (headerRow) {
+                resizeObserver.observe(headerRow);
+            }
+            syncColumnWidths();
+        };
+        observeHeaderRow();
+        const mutationObserver = new MutationObserver(observeHeaderRow);
+        mutationObserver.observe(scrollContainer, {
+            childList: true,
+            subtree: true
+        });
         return ()=>{
+            mutationObserver.disconnect();
             resizeObserver.disconnect();
         };
     }, [
+        panelContainer,
         spec.enableFiltering,
-        columns,
-        contentDimensions,
-        selectionEnabled,
-        actionButtons
+        columns
     ]);
     if (contentDimensions === undefined) {
         return null;
@@ -795,7 +807,7 @@ export function TablePanel({ contentDimensions, spec, queryResults }) {
         });
     }
     return /*#__PURE__*/ _jsxs("div", {
-        ref: panelContainerRef,
+        ref: setPanelContainer,
         style: {
             display: 'contents'
         },