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

package/lib/Table.js

@@ -10,10 +10,10 @@
 // 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 { getTablePanelQueryOptions, TableCellsEditor, TableColumnsEditor, TablePanel, TableSettingsEditor, TableTransformsEditor } from './components';
-import { TableItemSelectionActionsEditor } from './components/TableItemSelectionActionsEditor';
-import { createInitialTableOptions } from './models';
-import { TableExportAction } from './TableExportAction';
+import { getTablePanelQueryOptions, TableCellsEditor, TableColumnsEditor, TablePanel, TableSettingsEditor, TableTransformsEditor } from "./components/index.js";
+import { TableItemSelectionActionsEditor } from "./components/TableItemSelectionActionsEditor.js";
+import { createInitialTableOptions } from "./models/index.js";
+import { TableExportAction } from "./TableExportAction.js";
 /**
  * The core TimeSeriesTable panel plugin for Perses.
  */ export const Table = {

package/lib/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table.ts"],"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 { PanelPlugin } from '@perses-dev/plugin-system';\nimport {\n  getTablePanelQueryOptions,\n  TableCellsEditor,\n  TableColumnsEditor,\n  TablePanel,\n  TableProps,\n  TableSettingsEditor,\n  TableTransformsEditor,\n} from './components';\nimport { TableItemSelectionActionsEditor } from './components/TableItemSelectionActionsEditor';\nimport { createInitialTableOptions, TableOptions } from './models';\nimport { TableExportAction } from './TableExportAction';\n\n/**\n * The core TimeSeriesTable panel plugin for Perses.\n */\nexport const Table: PanelPlugin<TableOptions, TableProps> = {\n  PanelComponent: TablePanel,\n  supportedQueryTypes: ['TimeSeriesQuery'],\n  queryOptions: getTablePanelQueryOptions,\n  panelOptionsEditorComponents: [\n    { label: 'General Settings', content: TableSettingsEditor },\n    { label: 'Column Settings', content: TableColumnsEditor },\n    { label: 'Cell Settings', content: TableCellsEditor },\n    { label: 'Transforms', content: TableTransformsEditor },\n    { label: 'Item Actions', content: TableItemSelectionActionsEditor },\n  ],\n  createInitialOptions: createInitialTableOptions,\n  actions: [\n    {\n      component: TableExportAction,\n      location: 'header',\n    },\n  ],\n};\n"],"names":["getTablePanelQueryOptions","TableCellsEditor","TableColumnsEditor","TablePanel","TableSettingsEditor","TableTransformsEditor","TableItemSelectionActionsEditor","createInitialTableOptions","TableExportAction","Table","PanelComponent","supportedQueryTypes","queryOptions","panelOptionsEditorComponents","label","content","createInitialOptions","actions","component","location"],"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,SACEA,yBAAyB,EACzBC,gBAAgB,EAChBC,kBAAkB,EAClBC,UAAU,EAEVC,mBAAmB,EACnBC,qBAAqB,QAChB,eAAe;AACtB,SAASC,+BAA+B,QAAQ,+CAA+C;AAC/F,SAASC,yBAAyB,QAAsB,WAAW;AACnE,SAASC,iBAAiB,QAAQ,sBAAsB;AAExD;;CAEC,GACD,OAAO,MAAMC,QAA+C;IAC1DC,gBAAgBP;IAChBQ,qBAAqB;QAAC;KAAkB;IACxCC,cAAcZ;IACda,8BAA8B;QAC5B;YAAEC,OAAO;YAAoBC,SAASX;QAAoB;QAC1D;YAAEU,OAAO;YAAmBC,SAASb;QAAmB;QACxD;YAAEY,OAAO;YAAiBC,SAASd;QAAiB;QACpD;YAAEa,OAAO;YAAcC,SAASV;QAAsB;QACtD;YAAES,OAAO;YAAgBC,SAAST;QAAgC;KACnE;IACDU,sBAAsBT;IACtBU,SAAS;QACP;YACEC,WAAWV;YACXW,UAAU;QACZ;KACD;AACH,EAAE"}
+{"version":3,"sources":["../../src/Table.ts"],"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 type { PanelPlugin } from '@perses-dev/plugin-system';\n\nimport type { TableProps } from './components';\nimport {\n  getTablePanelQueryOptions,\n  TableCellsEditor,\n  TableColumnsEditor,\n  TablePanel,\n  TableSettingsEditor,\n  TableTransformsEditor,\n} from './components';\nimport { TableItemSelectionActionsEditor } from './components/TableItemSelectionActionsEditor';\nimport type { TableOptions } from './models';\nimport { createInitialTableOptions } from './models';\nimport { TableExportAction } from './TableExportAction';\n\n/**\n * The core TimeSeriesTable panel plugin for Perses.\n */\nexport const Table: PanelPlugin<TableOptions, TableProps> = {\n  PanelComponent: TablePanel,\n  supportedQueryTypes: ['TimeSeriesQuery'],\n  queryOptions: getTablePanelQueryOptions,\n  panelOptionsEditorComponents: [\n    { label: 'General Settings', content: TableSettingsEditor },\n    { label: 'Column Settings', content: TableColumnsEditor },\n    { label: 'Cell Settings', content: TableCellsEditor },\n    { label: 'Transforms', content: TableTransformsEditor },\n    { label: 'Item Actions', content: TableItemSelectionActionsEditor },\n  ],\n  createInitialOptions: createInitialTableOptions,\n  actions: [\n    {\n      component: TableExportAction,\n      location: 'header',\n    },\n  ],\n};\n"],"names":["getTablePanelQueryOptions","TableCellsEditor","TableColumnsEditor","TablePanel","TableSettingsEditor","TableTransformsEditor","TableItemSelectionActionsEditor","createInitialTableOptions","TableExportAction","Table","PanelComponent","supportedQueryTypes","queryOptions","panelOptionsEditorComponents","label","content","createInitialOptions","actions","component","location"],"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;AAKjC,SACEA,yBAAyB,EACzBC,gBAAgB,EAChBC,kBAAkB,EAClBC,UAAU,EACVC,mBAAmB,EACnBC,qBAAqB,QAChB,wBAAe;AACtB,SAASC,+BAA+B,QAAQ,kDAA+C;AAE/F,SAASC,yBAAyB,QAAQ,oBAAW;AACrD,SAASC,iBAAiB,QAAQ,yBAAsB;AAExD;;CAEC,GACD,OAAO,MAAMC,QAA+C;IAC1DC,gBAAgBP;IAChBQ,qBAAqB;QAAC;KAAkB;IACxCC,cAAcZ;IACda,8BAA8B;QAC5B;YAAEC,OAAO;YAAoBC,SAASX;QAAoB;QAC1D;YAAEU,OAAO;YAAmBC,SAASb;QAAmB;QACxD;YAAEY,OAAO;YAAiBC,SAASd;QAAiB;QACpD;YAAEa,OAAO;YAAcC,SAASV;QAAsB;QACtD;YAAES,OAAO;YAAgBC,SAAST;QAAgC;KACnE;IACDU,sBAAsBT;IACtBU,SAAS;QACP;YACEC,WAAWV;YACXW,UAAU;QACZ;KACD;AACH,EAAE"}

package/lib/TableExportAction.d.ts

@@ -1,7 +1,7 @@
+import type { PanelData } from '@perses-dev/plugin-system';
+import type { TimeSeriesData } from '@perses-dev/spec';
 import React from 'react';
-import { PanelData } from '@perses-dev/plugin-system';
-import { TimeSeriesData } from '@perses-dev/spec';
-import { TableProps } from './components';
+import type { TableProps } from './components';
 import type { TableOptions } from './models';
 export interface ExportColumn {
     key: string;

package/lib/TableExportAction.d.ts.map

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

package/lib/TableExportAction.js

@@ -11,12 +11,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import React, { useCallback, useMemo } from 'react';
-import { escapeCsvValue, sanitizeFilename } from '@perses-dev/plugin-system';
-import { InfoTooltip, transformData } from '@perses-dev/components';
-import { IconButton } from '@mui/material';
-import DownloadIcon from 'mdi-material-ui/Download';
-import { buildRawTableData } from './table-data-utils';
+import { IconButton } from "@mui/material";
+import { InfoTooltip, transformData } from "@perses-dev/components";
+import { escapeCsvValue, sanitizeFilename } from "@perses-dev/plugin-system";
+import DownloadIcon from "mdi-material-ui/Download";
+import React, { useCallback, useMemo } from "react";
+import { buildRawTableData } from "./table-data-utils.js";
 /**
  * Converts raw query results into the same tabular structure that TablePanel
  * renders, applying indexed column naming and configured transforms so the

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

package/lib/bootstrap.js

@@ -11,8 +11,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import React from 'react';
-import ReactDOM from 'react-dom/client';
+import React from "react";
+import ReactDOM from "react-dom/client";
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(/*#__PURE__*/ _jsx(React.StrictMode, {}));
 

package/lib/components/CellsEditor/CellsEditor.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { CellSettings } from '../../models';
+import type { ReactElement } from 'react';
+import type { CellSettings } from '../../models';
 export interface CellsEditorProps {
     cellSettings: CellSettings[];
     onChange: (cellOptions: CellSettings[]) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"CellsEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/CellsEditor/CellsEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,QAAQ,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CACjD;AAED,wBAAgB,WAAW,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,gBAAgB,GAAG,YAAY,CAOtF"}
+{"version":3,"file":"CellsEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/CellsEditor/CellsEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAGjD,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,QAAQ,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CACjD;AAED,wBAAgB,WAAW,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,gBAAgB,GAAG,YAAY,CAOtF"}

package/lib/components/CellsEditor/CellsEditor.js

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ConditionalPanel } from '../ConditionalPanel';
+import { ConditionalPanel } from "../ConditionalPanel.js";
 export function CellsEditor({ cellSettings, onChange }) {
     return /*#__PURE__*/ _jsx(ConditionalPanel, {
         cellSettings: cellSettings,

package/lib/components/CellsEditor/CellsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CellsEditor/CellsEditor.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 { ReactElement } from 'react';\nimport { CellSettings } from '../../models';\nimport { ConditionalPanel } from '../ConditionalPanel';\n\nexport interface CellsEditorProps {\n  cellSettings: CellSettings[];\n  onChange: (cellOptions: CellSettings[]) => void;\n}\n\nexport function CellsEditor({ cellSettings, onChange }: CellsEditorProps): ReactElement {\n  return (\n    <ConditionalPanel\n      cellSettings={cellSettings}\n      onChange={(updatedCellSettings) => onChange(updatedCellSettings || [])}\n    />\n  );\n}\n"],"names":["ConditionalPanel","CellsEditor","cellSettings","onChange","updatedCellSettings"],"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,gBAAgB,QAAQ,sBAAsB;AAOvD,OAAO,SAASC,YAAY,EAAEC,YAAY,EAAEC,QAAQ,EAAoB;IACtE,qBACE,KAACH;QACCE,cAAcA;QACdC,UAAU,CAACC,sBAAwBD,SAASC,uBAAuB,EAAE;;AAG3E"}
+{"version":3,"sources":["../../../../src/components/CellsEditor/CellsEditor.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 type { ReactElement } from 'react';\n\nimport type { CellSettings } from '../../models';\nimport { ConditionalPanel } from '../ConditionalPanel';\n\nexport interface CellsEditorProps {\n  cellSettings: CellSettings[];\n  onChange: (cellOptions: CellSettings[]) => void;\n}\n\nexport function CellsEditor({ cellSettings, onChange }: CellsEditorProps): ReactElement {\n  return (\n    <ConditionalPanel\n      cellSettings={cellSettings}\n      onChange={(updatedCellSettings) => onChange(updatedCellSettings || [])}\n    />\n  );\n}\n"],"names":["ConditionalPanel","CellsEditor","cellSettings","onChange","updatedCellSettings"],"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;;AAKjC,SAASA,gBAAgB,QAAQ,yBAAsB;AAOvD,OAAO,SAASC,YAAY,EAAEC,YAAY,EAAEC,QAAQ,EAAoB;IACtE,qBACE,KAACH;QACCE,cAAcA;QACdC,UAAU,CAACC,sBAAwBD,SAASC,uBAAuB,EAAE;;AAG3E"}

package/lib/components/CellsEditor/index.js

@@ -10,6 +10,6 @@
 // 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.
-export * from './CellsEditor';
+export * from "./CellsEditor.js";
 
 //# sourceMappingURL=index.js.map

package/lib/components/CellsEditor/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CellsEditor/index.ts"],"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\nexport * from './CellsEditor';\n"],"names":[],"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,cAAc,gBAAgB"}
+{"version":3,"sources":["../../../../src/components/CellsEditor/index.ts"],"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\nexport * from './CellsEditor';\n"],"names":[],"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,cAAc,mBAAgB"}

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

@@ -1,11 +1,12 @@
-import { StackProps } from '@mui/material';
-import { ReactElement } from 'react';
-import { ColumnSettings } from '../../models';
+import type { StackProps } from '@mui/material';
+import type { ReactElement } from 'react';
+import type { ColumnSettings } from '../../models';
 type OmittedMuiProps = 'children' | 'value' | 'onChange';
 export interface ColumnEditorProps extends Omit<StackProps, OmittedMuiProps> {
     column: ColumnSettings;
     onChange: (column: ColumnSettings) => void;
+    defaultEnableSorting?: boolean;
 }
-export declare function ColumnEditor({ column, onChange, ...others }: ColumnEditorProps): ReactElement;
+export declare function ColumnEditor({ column, onChange, defaultEnableSorting, ...others }: ColumnEditorProps): ReactElement;
 export {};
 //# sourceMappingURL=ColumnEditor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColumnEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnsEditor/ColumnEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA8B,UAAU,EAAiC,MAAM,eAAe,CAAC;AACtG,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAa/C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAU9C,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,UAAU,EAAE,eAAe,CAAC;IAC1E,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,EAAE,EAAE,iBAAiB,GAAG,YAAY,CA8M7F"}
+{"version":3,"file":"ColumnEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnsEditor/ColumnEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAahD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAUnD,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,UAAU,EAAE,eAAe,CAAC;IAC1E,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAC3C,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,QAAQ,EACR,oBAA4B,EAC5B,GAAG,MAAM,EACV,EAAE,iBAAiB,GAAG,YAAY,CAyNlC"}

package/lib/components/ColumnsEditor/ColumnEditor.js

@@ -1,4 +1,3 @@
-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.
@@ -11,19 +10,32 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 { Button, ButtonGroup, Stack, Switch, TextField, Typography } from '@mui/material';
-import { useState } from 'react';
-import { AlignSelector, FormatControls, OptionsEditorColumn, OptionsEditorControl, OptionsEditorGrid, OptionsEditorGroup, SortSelectorButtons } from '@perses-dev/components';
-import { PluginKindSelect } from '@perses-dev/plugin-system';
-import { ConditionalPanel } from '../ConditionalPanel';
-import { DataLinkEditor } from './DataLinkEditorDialog';
-import { EmbeddedPanelOptionsEditor } from './EmbeddedPanelOptionsEditor';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ButtonGroup, Stack, Switch, TextField, Typography } from "@mui/material";
+import { AlignSelector, FormatControls, OptionsEditorColumn, OptionsEditorControl, OptionsEditorGrid, OptionsEditorGroup, SortSelectorButtons } from "@perses-dev/components";
+import { PluginKindSelect } from "@perses-dev/plugin-system";
+import { useState } from "react";
+import { ConditionalPanel } from "../ConditionalPanel.js";
+import { DataLinkEditor } from "./DataLinkEditorDialog.js";
+import { EmbeddedPanelOptionsEditor } from "./EmbeddedPanelOptionsEditor.js";
 const DEFAULT_FORMAT = {
     unit: 'decimal',
     shortValues: true
 };
-export function ColumnEditor({ column, onChange, ...others }) {
+export function ColumnEditor({ column, onChange, defaultEnableSorting = false, ...others }) {
     const [width, setWidth] = useState(column.width === undefined || column.width === 'auto' ? 100 : column.width);
+    const enableSorting = column.enableSorting ?? defaultEnableSorting;
+    function handleEnableSortingChange(checked) {
+        if (checked === defaultEnableSorting) {
+            const { enableSorting: _ignored, ...rest } = column;
+            onChange(rest);
+            return;
+        }
+        onChange({
+            ...column,
+            enableSorting: checked
+        });
+    }
     return /*#__PURE__*/ _jsxs(Stack, {
         ...others,
         children: [
@@ -77,14 +89,16 @@ export function ColumnEditor({ column, onChange, ...others }) {
                                 /*#__PURE__*/ _jsx(OptionsEditorControl, {
                                     label: "Enable sorting",
                                     control: /*#__PURE__*/ _jsx(Switch, {
-                                        checked: column.enableSorting ?? false,
-                                        onChange: (e)=>onChange({
-                                                ...column,
-                                                enableSorting: e.target.checked
-                                            })
+                                        checked: enableSorting,
+                                        onChange: (e)=>handleEnableSortingChange(e.target.checked)
                                     })
                                 }),
-                                column.enableSorting && /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                                column.enableSorting === undefined && /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    children: "Inherits from General Settings"
+                                }),
+                                enableSorting && /*#__PURE__*/ _jsx(OptionsEditorControl, {
                                     label: "Default Sort",
                                     control: /*#__PURE__*/ _jsx(SortSelectorButtons, {
                                         size: "medium",

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, 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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"}
+{"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 type { StackProps } from '@mui/material';\nimport { Button, ButtonGroup, Stack, Switch, TextField, Typography } from '@mui/material';\nimport type { FormatOptions } from '@perses-dev/components';\nimport {\n  AlignSelector,\n  FormatControls,\n  OptionsEditorColumn,\n  OptionsEditorControl,\n  OptionsEditorGrid,\n  OptionsEditorGroup,\n  SortSelectorButtons,\n} from '@perses-dev/components';\nimport { PluginKindSelect } from '@perses-dev/plugin-system';\nimport type { ReactElement } from 'react';\nimport { useState } from 'react';\n\nimport type { 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  defaultEnableSorting?: boolean;\n}\n\nexport function ColumnEditor({\n  column,\n  onChange,\n  defaultEnableSorting = false,\n  ...others\n}: ColumnEditorProps): ReactElement {\n  const [width, setWidth] = useState<number>(\n    column.width === undefined || column.width === 'auto' ? 100 : column.width,\n  );\n\n  const enableSorting = column.enableSorting ?? defaultEnableSorting;\n\n  function handleEnableSortingChange(checked: boolean): void {\n    if (checked === defaultEnableSorting) {\n      const { enableSorting: _ignored, ...rest } = column;\n      onChange(rest);\n      return;\n    }\n    onChange({ ...column, enableSorting: checked });\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={<Switch checked={enableSorting} onChange={(e) => handleEnableSortingChange(e.target.checked)} />}\n            />\n            {column.enableSorting === undefined && (\n              <Typography variant=\"caption\" color=\"text.secondary\">\n                Inherits from General Settings\n              </Typography>\n            )}\n            {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","AlignSelector","FormatControls","OptionsEditorColumn","OptionsEditorControl","OptionsEditorGrid","OptionsEditorGroup","SortSelectorButtons","PluginKindSelect","useState","ConditionalPanel","DataLinkEditor","EmbeddedPanelOptionsEditor","DEFAULT_FORMAT","unit","shortValues","ColumnEditor","column","onChange","defaultEnableSorting","others","width","setWidth","undefined","enableSorting","handleEnableSortingChange","checked","_ignored","rest","title","label","control","value","name","e","target","required","header","headerDescription","cellDescription","variant","color","size","sort","sx","margin","hide","spacing","aria-label","plugin","onClick","kind","spec","maxWidth","pluginTypes","type","event","format","newFormat","align","slotProps","htmlInput","min","px","mt","nextSpec","cellSettings"],"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,MAAM,EAAEC,WAAW,EAAEC,KAAK,EAAEC,MAAM,EAAEC,SAAS,EAAEC,UAAU,QAAQ,gBAAgB;AAE1F,SACEC,aAAa,EACbC,cAAc,EACdC,mBAAmB,EACnBC,oBAAoB,EACpBC,iBAAiB,EACjBC,kBAAkB,EAClBC,mBAAmB,QACd,yBAAyB;AAChC,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,SAASC,QAAQ,QAAQ,QAAQ;AAGjC,SAASC,gBAAgB,QAAQ,yBAAsB;AACvD,SAASC,cAAc,QAAQ,4BAAyB;AACxD,SAASC,0BAA0B,QAAQ,kCAA+B;AAE1E,MAAMC,iBAAgC;IACpCC,MAAM;IACNC,aAAa;AACf;AAUA,OAAO,SAASC,aAAa,EAC3BC,MAAM,EACNC,QAAQ,EACRC,uBAAuB,KAAK,EAC5B,GAAGC,QACe;IAClB,MAAM,CAACC,OAAOC,SAAS,GAAGb,SACxBQ,OAAOI,KAAK,KAAKE,aAAaN,OAAOI,KAAK,KAAK,SAAS,MAAMJ,OAAOI,KAAK;IAG5E,MAAMG,gBAAgBP,OAAOO,aAAa,IAAIL;IAE9C,SAASM,0BAA0BC,OAAgB;QACjD,IAAIA,YAAYP,sBAAsB;YACpC,MAAM,EAAEK,eAAeG,QAAQ,EAAE,GAAGC,MAAM,GAAGX;YAC7CC,SAASU;YACT;QACF;QACAV,SAAS;YAAE,GAAGD,MAAM;YAAEO,eAAeE;QAAQ;IAC/C;IAEA,qBACE,MAAC7B;QAAO,GAAGuB,MAAM;;0BACf,MAACf;;kCACC,KAACF;kCACC,cAAA,MAACG;4BAAmBuB,OAAM;;8CACxB,KAACzB;oCACC0B,OAAM;oCACNC,uBACE,KAAChC;wCACCiC,OAAOf,OAAOgB,IAAI;wCAClBf,UAAU,CAACgB,IAAMhB,SAAS;gDAAE,GAAGD,MAAM;gDAAEgB,MAAMC,EAAEC,MAAM,CAACH,KAAK;4CAAC;wCAC5DI,QAAQ;;;8CAId,KAAChC;oCACC0B,OAAM;oCACNC,uBACE,KAAChC;wCACCiC,OAAOf,OAAOoB,MAAM,IAAI;wCACxBnB,UAAU,CAACgB,IAAMhB,SAAS;gDAAE,GAAGD,MAAM;gDAAEoB,QAAQH,EAAEC,MAAM,CAACH,KAAK,GAAGE,EAAEC,MAAM,CAACH,KAAK,GAAGT;4CAAU;;;8CAIjG,KAACnB;oCACC0B,OAAM;oCACNC,uBACE,KAAChC;wCACCiC,OAAOf,OAAOqB,iBAAiB,IAAI;wCACnCpB,UAAU,CAACgB,IACThB,SAAS;gDAAE,GAAGD,MAAM;gDAAEqB,mBAAmBJ,EAAEC,MAAM,CAACH,KAAK,GAAGE,EAAEC,MAAM,CAACH,KAAK,GAAGT;4CAAU;;;8CAK7F,KAACnB;oCACC0B,OAAM;oCACNC,uBACE,KAAChC;wCACCiC,OAAOf,OAAOsB,eAAe,IAAI;wCACjCrB,UAAU,CAACgB,IACThB,SAAS;gDAAE,GAAGD,MAAM;gDAAEsB,iBAAiBL,EAAEC,MAAM,CAACH,KAAK,GAAGE,EAAEC,MAAM,CAACH,KAAK,GAAGT;4CAAU;;;8CAK3F,KAACnB;oCACC0B,OAAM;oCACNC,uBAAS,KAACjC;wCAAO4B,SAASF;wCAAeN,UAAU,CAACgB,IAAMT,0BAA0BS,EAAEC,MAAM,CAACT,OAAO;;;gCAErGT,OAAOO,aAAa,KAAKD,2BACxB,KAACvB;oCAAWwC,SAAQ;oCAAUC,OAAM;8CAAiB;;gCAItDjB,+BACC,KAACpB;oCACC0B,OAAM;oCACNC,uBACE,KAACxB;wCACCmC,MAAK;wCACLV,OAAOf,OAAO0B,IAAI;wCAClBC,IAAI;4CACFC,QAAQ;wCACV;wCACA3B,UAAU,CAACyB,OAASzB,SAAS;gDAAE,GAAGD,MAAM;gDAAE0B,MAAMA;4CAAK;;;;;;kCAQjE,KAACxC;kCACC,cAAA,MAACG;4BAAmBuB,OAAM;;8CACxB,KAACzB;oCACC0B,OAAM;oCACNC,uBACE,KAACjC;wCACC4B,SAAS,CAAET,CAAAA,OAAO6B,IAAI,IAAI,KAAI;wCAC9B5B,UAAU,CAACgB,IAAMhB,SAAS;gDAAE,GAAGD,MAAM;gDAAE6B,MAAM,CAACZ,EAAEC,MAAM,CAACT,OAAO;4CAAC;;;8CAIrE,KAACtB;oCACC0B,OAAM;oCACNC,uBACE,MAAClC;wCAAMkD,SAAS;;0DACd,MAACnD;gDAAYoD,cAAW;gDAAeN,MAAK;;kEAC1C,KAAC/C;wDACC6C,SAAS,CAACvB,OAAOgC,MAAM,GAAG,cAAc;wDACxCC,SAAS,IAAMhC,SAAS;gEAAE,GAAGD,MAAM;gEAAEgC,QAAQ1B;4DAAU;kEACxD;;kEAGD,KAAC5B;wDACC6C,SAASvB,OAAOgC,MAAM,GAAG,cAAc;wDACvCC,SAAS,IAAMhC,SAAS;gEAAE,GAAGD,MAAM;gEAAEgC,QAAQ;oEAAEE,MAAM;oEAAcC,MAAM,CAAC;gEAAE;4DAAE;kEAC/E;;;;0DAIH,KAACpD;gDAAWwC,SAAQ;gDAAUC,OAAM;gDAAiBG,IAAI;oDAAES,UAAU;gDAAI;0DAAG;;;;;gCAOjFpC,OAAOgC,MAAM,iBACZ,KAAC7C;oCACC0B,OAAM;oCACNC,uBACE,KAACvB;wCACC8C,aAAa;4CAAC;yCAAQ;wCACtBZ,MAAK;wCACLV,OAAO;4CAAEuB,MAAM;4CAASJ,MAAMlC,OAAOgC,MAAM,CAACE,IAAI;wCAAC;wCACjDjC,UAAU,CAACsC,QAAUtC,SAAS;gDAAE,GAAGD,MAAM;gDAAEgC,QAAQ;oDAAEE,MAAMK,MAAML,IAAI;oDAAEC,MAAM,CAAC;gDAAE;4CAAE;;mDAKxF,KAAClD;oCACC8B,OAAOf,OAAOwC,MAAM,IAAI5C;oCACxBK,UAAU,CAACwC,YACTxC,SAAS;4CACP,GAAGD,MAAM;4CACTwC,QAAQC;wCACV;;8CAIN,KAACtD;oCACC0B,OAAM;oCACNC,uBACE,KAAC9B;wCACCyC,MAAK;wCACLV,OAAOf,OAAO0C,KAAK,IAAI;wCACvBzC,UAAU,CAACyC,QAAUzC,SAAS;gDAAE,GAAGD,MAAM;gDAAE0C,OAAOA;4CAAM;;;8CAI9D,KAACvD;oCACC0B,OAAM;oCACNC,uBACE,KAACjC;wCACC4B,SAAST,OAAOI,KAAK,KAAKE,aAAaN,OAAOI,KAAK,KAAK;wCACxDH,UAAU,CAACgB,IAAMhB,SAAS;gDAAE,GAAGD,MAAM;gDAAEI,OAAOa,EAAEC,MAAM,CAACT,OAAO,GAAGL,QAAQ;4CAAO;;;gCAIrFJ,OAAOI,KAAK,KAAKE,aAAaN,OAAOI,KAAK,KAAK,wBAC9C,KAACjB;oCACC0B,OAAM;oCACNC,uBACE,KAAChC;wCACCwD,MAAK;wCACLvB,OAAOX;wCACPuC,WAAW;4CAAEC,WAAW;gDAAEC,KAAK;4CAAE;wCAAE;wCACnC5C,UAAU,CAACgB;4CACTZ,SAAS,CAACY,EAAEC,MAAM,CAACH,KAAK;4CACxBd,SAAS;gDAAE,GAAGD,MAAM;gDAAEI,OAAO,CAACa,EAAEC,MAAM,CAACH,KAAK;4CAAC;wCAC/C;;;;;;kCAOZ,KAAC7B;kCACC,cAAA,KAACG;4BAAmBuB,OAAM;sCACxB,cAAA,KAAClB;gCAAeM,QAAQA;gCAAQC,UAAUA;;;;;;YAI/CD,OAAOgC,MAAM,EAAEE,SAAS,8BACvB,KAACtD;gBAAM+C,IAAI;oBAAEmB,IAAI;oBAAGC,IAAI;oBAAG3C,OAAO;gBAAO;gBAAG0B,SAAS;0BACnD,cAAA,KAACzC;oBAAmBuB,OAAM;8BACxB,cAAA,KAACjB;wBACCuC,MAAK;wBACLC,MAAMnC,OAAOgC,MAAM,CAACG,IAAI;wBACxBlC,UAAU,CAAC+C,WACT/C,SAAS;gCACP,GAAGD,MAAM;gCACTgC,QAAQ;oCAAEE,MAAM;oCAAcC,MAAMa;gCAAS;4BAC/C;;;;0BAMV,KAACpE;gBAAM+C,IAAI;oBAAEmB,IAAI;oBAAGC,IAAI/C,OAAOgC,MAAM,EAAEE,SAAS,eAAe,IAAI;gBAAE;0BACnE,cAAA,KAAC7C;oBAAmBuB,OAAM;8BACxB,cAAA,KAACnB;wBACCwD,cAAcjD,OAAOiD,YAAY;wBACjChD,UAAU,CAACgD,eAAiBhD,SAAS;gCAAE,GAAGD,MAAM;gCAAEiD;4BAAa;;;;;;AAM3E"}

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

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { ColumnEditorProps } from './ColumnEditor';
+import type { ReactElement } from 'react';
+import type { ColumnEditorProps } from './ColumnEditor';
 export interface ColumnEditorContainerProps extends ColumnEditorProps {
     isCollapsed: boolean;
     onCollapse: (collapsed: boolean) => void;
@@ -7,5 +7,5 @@ export interface ColumnEditorContainerProps extends ColumnEditorProps {
     onMoveUp: () => void;
     onMoveDown: () => void;
 }
-export declare function ColumnEditorContainer({ column, isCollapsed, onChange, onCollapse, onDelete, onMoveUp, onMoveDown, }: ColumnEditorContainerProps): ReactElement;
+export declare function ColumnEditorContainer({ column, isCollapsed, onChange, onCollapse, onDelete, onMoveUp, onMoveDown, defaultEnableSorting, }: ColumnEditorContainerProps): ReactElement;
 //# sourceMappingURL=ColumnEditorContainer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColumnEditorContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnsEditor/ColumnEditorContainer.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEjE,MAAM,WAAW,0BAA2B,SAAQ,iBAAiB;IACnE,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,WAAW,EACX,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,UAAU,GACX,EAAE,0BAA0B,GAAG,YAAY,CAwE3C"}
+{"version":3,"file":"ColumnEditorContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnsEditor/ColumnEditorContainer.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGxD,MAAM,WAAW,0BAA2B,SAAQ,iBAAiB;IACnE,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,WAAW,EACX,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,oBAAoB,GACrB,EAAE,0BAA0B,GAAG,YAAY,CAwE3C"}

package/lib/components/ColumnsEditor/ColumnEditorContainer.js

@@ -11,15 +11,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // 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 { Divider, IconButton, Stack, Tooltip, Typography } from '@mui/material';
-import ChevronRight from 'mdi-material-ui/ChevronRight';
-import ChevronDown from 'mdi-material-ui/ChevronDown';
-import DeleteIcon from 'mdi-material-ui/DeleteOutline';
-import EyeIcon from 'mdi-material-ui/EyeOutline';
-import EyeOffIcon from 'mdi-material-ui/EyeOffOutline';
-import { DragAndDropElement, DragButton } from '@perses-dev/components';
-import { ColumnEditor } from './ColumnEditor';
-export function ColumnEditorContainer({ column, isCollapsed, onChange, onCollapse, onDelete, onMoveUp, onMoveDown }) {
+import { Divider, IconButton, Stack, Tooltip, Typography } from "@mui/material";
+import { DragAndDropElement, DragButton } from "@perses-dev/components";
+import ChevronDown from "mdi-material-ui/ChevronDown";
+import ChevronRight from "mdi-material-ui/ChevronRight";
+import DeleteIcon from "mdi-material-ui/DeleteOutline";
+import EyeOffIcon from "mdi-material-ui/EyeOffOutline";
+import EyeIcon from "mdi-material-ui/EyeOutline";
+import { ColumnEditor } from "./ColumnEditor.js";
+export function ColumnEditorContainer({ column, isCollapsed, onChange, onCollapse, onDelete, onMoveUp, onMoveDown, defaultEnableSorting }) {
     function handleHideColumn() {
         onChange({
             ...column,
@@ -129,7 +129,8 @@ export function ColumnEditorContainer({ column, isCollapsed, onChange, onCollaps
             !isCollapsed && /*#__PURE__*/ _jsx("div", {
                 children: /*#__PURE__*/ _jsx(ColumnEditor, {
                     column: column,
-                    onChange: onChange
+                    onChange: onChange,
+                    defaultEnableSorting: defaultEnableSorting
                 })
             })
         ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ColumnsEditor/ColumnEditorContainer.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 { Divider, IconButton, Stack, Tooltip, Typography } from '@mui/material';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport EyeIcon from 'mdi-material-ui/EyeOutline';\nimport EyeOffIcon from 'mdi-material-ui/EyeOffOutline';\nimport { DragAndDropElement, DragButton } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { ColumnEditor, ColumnEditorProps } from './ColumnEditor';\n\nexport interface ColumnEditorContainerProps extends ColumnEditorProps {\n  isCollapsed: boolean;\n  onCollapse: (collapsed: boolean) => void;\n  onDelete: () => void;\n  onMoveUp: () => void;\n  onMoveDown: () => void;\n}\n\nexport function ColumnEditorContainer({\n  column,\n  isCollapsed,\n  onChange,\n  onCollapse,\n  onDelete,\n  onMoveUp,\n  onMoveDown,\n}: ColumnEditorContainerProps): ReactElement {\n  function handleHideColumn(): void {\n    onChange({ ...column, hide: !column.hide });\n  }\n\n  return (\n    <DragAndDropElement data={column as unknown as Record<string, unknown>}>\n      <Stack\n        direction=\"row\"\n        alignItems=\"center\"\n        borderBottom={1}\n        borderColor={(theme) => theme.palette.divider}\n        justifyContent=\"space-between\"\n        gap={4}\n      >\n        <Stack direction=\"row\" gap={1}>\n          <IconButton\n            data-testid={`column-toggle#${column.name}`}\n            size=\"small\"\n            onClick={() => onCollapse(!isCollapsed)}\n          >\n            {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n          </IconButton>\n          <Typography variant=\"overline\" component=\"h4\" sx={{ textTransform: 'none' }}>\n            COLUMN:{' '}\n            {column.header ? (\n              <span>\n                <strong>{column.header}</strong> ({column.name})\n              </span>\n            ) : (\n              <strong>{column.name}</strong>\n            )}\n          </Typography>\n        </Stack>\n\n        <Stack direction=\"row\" gap={1}>\n          {isCollapsed && (\n            <>\n              <Tooltip title={column.hide ? 'Show column' : 'Hide column'} placement=\"top\">\n                <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={handleHideColumn} key=\"hide-column\">\n                  {column.hide ? <EyeOffIcon /> : <EyeIcon />}\n                </IconButton>\n              </Tooltip>\n              <Divider flexItem orientation=\"vertical\" variant=\"middle\" />\n            </>\n          )}\n          <Tooltip title=\"Remove column settings\" placement=\"top\">\n            <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={onDelete} key=\"delete-column-button\">\n              <DeleteIcon />\n            </IconButton>\n          </Tooltip>\n          <Tooltip title=\"Reorder column settings\" placement=\"top\">\n            <DragButton\n              onMoveUp={onMoveUp}\n              onMoveDown={onMoveDown}\n              menuSx={{\n                '.MuiPaper-root': { backgroundColor: (theme) => theme.palette.background.lighter },\n              }}\n              key=\"reorder-column-button\"\n            />\n          </Tooltip>\n        </Stack>\n      </Stack>\n\n      {/* When a <Grid> is inside a <Stack> with gap, the negative margin of the grid is not applied. Therefore, let's wrap it in a div. */}\n      {!isCollapsed && (\n        <div>\n          <ColumnEditor column={column} onChange={onChange} />\n        </div>\n      )}\n    </DragAndDropElement>\n  );\n}\n"],"names":["Divider","IconButton","Stack","Tooltip","Typography","ChevronRight","ChevronDown","DeleteIcon","EyeIcon","EyeOffIcon","DragAndDropElement","DragButton","ColumnEditor","ColumnEditorContainer","column","isCollapsed","onChange","onCollapse","onDelete","onMoveUp","onMoveDown","handleHideColumn","hide","data","direction","alignItems","borderBottom","borderColor","theme","palette","divider","justifyContent","gap","data-testid","name","size","onClick","variant","component","sx","textTransform","header","span","strong","title","placement","marginLeft","flexItem","orientation","menuSx","backgroundColor","background","lighter","div"],"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,OAAO,EAAEC,UAAU,EAAEC,KAAK,EAAEC,OAAO,EAAEC,UAAU,QAAQ,gBAAgB;AAChF,OAAOC,kBAAkB,+BAA+B;AACxD,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,aAAa,6BAA6B;AACjD,OAAOC,gBAAgB,gCAAgC;AACvD,SAASC,kBAAkB,EAAEC,UAAU,QAAQ,yBAAyB;AAExE,SAASC,YAAY,QAA2B,iBAAiB;AAUjE,OAAO,SAASC,sBAAsB,EACpCC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,UAAU,EACVC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACiB;IAC3B,SAASC;QACPL,SAAS;YAAE,GAAGF,MAAM;YAAEQ,MAAM,CAACR,OAAOQ,IAAI;QAAC;IAC3C;IAEA,qBACE,MAACZ;QAAmBa,MAAMT;;0BACxB,MAACZ;gBACCsB,WAAU;gBACVC,YAAW;gBACXC,cAAc;gBACdC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;gBAC7CC,gBAAe;gBACfC,KAAK;;kCAEL,MAAC9B;wBAAMsB,WAAU;wBAAMQ,KAAK;;0CAC1B,KAAC/B;gCACCgC,eAAa,CAAC,cAAc,EAAEnB,OAAOoB,IAAI,EAAE;gCAC3CC,MAAK;gCACLC,SAAS,IAAMnB,WAAW,CAACF;0CAE1BA,4BAAc,KAACV,kCAAkB,KAACC;;0CAErC,MAACF;gCAAWiC,SAAQ;gCAAWC,WAAU;gCAAKC,IAAI;oCAAEC,eAAe;gCAAO;;oCAAG;oCACnE;oCACP1B,OAAO2B,MAAM,iBACZ,MAACC;;0DACC,KAACC;0DAAQ7B,OAAO2B,MAAM;;4CAAU;4CAAG3B,OAAOoB,IAAI;4CAAC;;uDAGjD,KAACS;kDAAQ7B,OAAOoB,IAAI;;;;;;kCAK1B,MAAChC;wBAAMsB,WAAU;wBAAMQ,KAAK;;4BACzBjB,6BACC;;kDACE,KAACZ;wCAAQyC,OAAO9B,OAAOQ,IAAI,GAAG,gBAAgB;wCAAeuB,WAAU;kDACrE,cAAA,KAAC5C;4CAAWkC,MAAK;4CAAQI,IAAI;gDAAEO,YAAY;4CAAO;4CAAGV,SAASf;sDAC3DP,OAAOQ,IAAI,iBAAG,KAACb,gCAAgB,KAACD;2CADiD;;kDAItF,KAACR;wCAAQ+C,QAAQ;wCAACC,aAAY;wCAAWX,SAAQ;;;;0CAGrD,KAAClC;gCAAQyC,OAAM;gCAAyBC,WAAU;0CAChD,cAAA,KAAC5C;oCAAWkC,MAAK;oCAAQI,IAAI;wCAAEO,YAAY;oCAAO;oCAAGV,SAASlB;8CAC5D,cAAA,KAACX;mCADyE;;0CAI9E,KAACJ;gCAAQyC,OAAM;gCAA0BC,WAAU;0CACjD,cAAA,KAAClC;oCACCQ,UAAUA;oCACVC,YAAYA;oCACZ6B,QAAQ;wCACN,kBAAkB;4CAAEC,iBAAiB,CAACtB,QAAUA,MAAMC,OAAO,CAACsB,UAAU,CAACC,OAAO;wCAAC;oCACnF;mCACI;;;;;;YAOX,CAACrC,6BACA,KAACsC;0BACC,cAAA,KAACzC;oBAAaE,QAAQA;oBAAQE,UAAUA;;;;;AAKlD"}
+{"version":3,"sources":["../../../../src/components/ColumnsEditor/ColumnEditorContainer.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 { Divider, IconButton, Stack, Tooltip, Typography } from '@mui/material';\nimport { DragAndDropElement, DragButton } from '@perses-dev/components';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport EyeOffIcon from 'mdi-material-ui/EyeOffOutline';\nimport EyeIcon from 'mdi-material-ui/EyeOutline';\nimport type { ReactElement } from 'react';\n\nimport type { ColumnEditorProps } from './ColumnEditor';\nimport { ColumnEditor } from './ColumnEditor';\n\nexport interface ColumnEditorContainerProps extends ColumnEditorProps {\n  isCollapsed: boolean;\n  onCollapse: (collapsed: boolean) => void;\n  onDelete: () => void;\n  onMoveUp: () => void;\n  onMoveDown: () => void;\n}\n\nexport function ColumnEditorContainer({\n  column,\n  isCollapsed,\n  onChange,\n  onCollapse,\n  onDelete,\n  onMoveUp,\n  onMoveDown,\n  defaultEnableSorting,\n}: ColumnEditorContainerProps): ReactElement {\n  function handleHideColumn(): void {\n    onChange({ ...column, hide: !column.hide });\n  }\n\n  return (\n    <DragAndDropElement data={column as unknown as Record<string, unknown>}>\n      <Stack\n        direction=\"row\"\n        alignItems=\"center\"\n        borderBottom={1}\n        borderColor={(theme) => theme.palette.divider}\n        justifyContent=\"space-between\"\n        gap={4}\n      >\n        <Stack direction=\"row\" gap={1}>\n          <IconButton\n            data-testid={`column-toggle#${column.name}`}\n            size=\"small\"\n            onClick={() => onCollapse(!isCollapsed)}\n          >\n            {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n          </IconButton>\n          <Typography variant=\"overline\" component=\"h4\" sx={{ textTransform: 'none' }}>\n            COLUMN:{' '}\n            {column.header ? (\n              <span>\n                <strong>{column.header}</strong> ({column.name})\n              </span>\n            ) : (\n              <strong>{column.name}</strong>\n            )}\n          </Typography>\n        </Stack>\n\n        <Stack direction=\"row\" gap={1}>\n          {isCollapsed && (\n            <>\n              <Tooltip title={column.hide ? 'Show column' : 'Hide column'} placement=\"top\">\n                <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={handleHideColumn} key=\"hide-column\">\n                  {column.hide ? <EyeOffIcon /> : <EyeIcon />}\n                </IconButton>\n              </Tooltip>\n              <Divider flexItem orientation=\"vertical\" variant=\"middle\" />\n            </>\n          )}\n          <Tooltip title=\"Remove column settings\" placement=\"top\">\n            <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={onDelete} key=\"delete-column-button\">\n              <DeleteIcon />\n            </IconButton>\n          </Tooltip>\n          <Tooltip title=\"Reorder column settings\" placement=\"top\">\n            <DragButton\n              onMoveUp={onMoveUp}\n              onMoveDown={onMoveDown}\n              menuSx={{\n                '.MuiPaper-root': { backgroundColor: (theme) => theme.palette.background.lighter },\n              }}\n              key=\"reorder-column-button\"\n            />\n          </Tooltip>\n        </Stack>\n      </Stack>\n\n      {/* When a <Grid> is inside a <Stack> with gap, the negative margin of the grid is not applied. Therefore, let's wrap it in a div. */}\n      {!isCollapsed && (\n        <div>\n          <ColumnEditor column={column} onChange={onChange} defaultEnableSorting={defaultEnableSorting} />\n        </div>\n      )}\n    </DragAndDropElement>\n  );\n}\n"],"names":["Divider","IconButton","Stack","Tooltip","Typography","DragAndDropElement","DragButton","ChevronDown","ChevronRight","DeleteIcon","EyeOffIcon","EyeIcon","ColumnEditor","ColumnEditorContainer","column","isCollapsed","onChange","onCollapse","onDelete","onMoveUp","onMoveDown","defaultEnableSorting","handleHideColumn","hide","data","direction","alignItems","borderBottom","borderColor","theme","palette","divider","justifyContent","gap","data-testid","name","size","onClick","variant","component","sx","textTransform","header","span","strong","title","placement","marginLeft","flexItem","orientation","menuSx","backgroundColor","background","lighter","div"],"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,OAAO,EAAEC,UAAU,EAAEC,KAAK,EAAEC,OAAO,EAAEC,UAAU,QAAQ,gBAAgB;AAChF,SAASC,kBAAkB,EAAEC,UAAU,QAAQ,yBAAyB;AACxE,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,kBAAkB,+BAA+B;AACxD,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,aAAa,6BAA6B;AAIjD,SAASC,YAAY,QAAQ,oBAAiB;AAU9C,OAAO,SAASC,sBAAsB,EACpCC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,UAAU,EACVC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACVC,oBAAoB,EACO;IAC3B,SAASC;QACPN,SAAS;YAAE,GAAGF,MAAM;YAAES,MAAM,CAACT,OAAOS,IAAI;QAAC;IAC3C;IAEA,qBACE,MAAClB;QAAmBmB,MAAMV;;0BACxB,MAACZ;gBACCuB,WAAU;gBACVC,YAAW;gBACXC,cAAc;gBACdC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;gBAC7CC,gBAAe;gBACfC,KAAK;;kCAEL,MAAC/B;wBAAMuB,WAAU;wBAAMQ,KAAK;;0CAC1B,KAAChC;gCACCiC,eAAa,CAAC,cAAc,EAAEpB,OAAOqB,IAAI,EAAE;gCAC3CC,MAAK;gCACLC,SAAS,IAAMpB,WAAW,CAACF;0CAE1BA,4BAAc,KAACP,kCAAkB,KAACD;;0CAErC,MAACH;gCAAWkC,SAAQ;gCAAWC,WAAU;gCAAKC,IAAI;oCAAEC,eAAe;gCAAO;;oCAAG;oCACnE;oCACP3B,OAAO4B,MAAM,iBACZ,MAACC;;0DACC,KAACC;0DAAQ9B,OAAO4B,MAAM;;4CAAU;4CAAG5B,OAAOqB,IAAI;4CAAC;;uDAGjD,KAACS;kDAAQ9B,OAAOqB,IAAI;;;;;;kCAK1B,MAACjC;wBAAMuB,WAAU;wBAAMQ,KAAK;;4BACzBlB,6BACC;;kDACE,KAACZ;wCAAQ0C,OAAO/B,OAAOS,IAAI,GAAG,gBAAgB;wCAAeuB,WAAU;kDACrE,cAAA,KAAC7C;4CAAWmC,MAAK;4CAAQI,IAAI;gDAAEO,YAAY;4CAAO;4CAAGV,SAASf;sDAC3DR,OAAOS,IAAI,iBAAG,KAACb,gCAAgB,KAACC;2CADiD;;kDAItF,KAACX;wCAAQgD,QAAQ;wCAACC,aAAY;wCAAWX,SAAQ;;;;0CAGrD,KAACnC;gCAAQ0C,OAAM;gCAAyBC,WAAU;0CAChD,cAAA,KAAC7C;oCAAWmC,MAAK;oCAAQI,IAAI;wCAAEO,YAAY;oCAAO;oCAAGV,SAASnB;8CAC5D,cAAA,KAACT;mCADyE;;0CAI9E,KAACN;gCAAQ0C,OAAM;gCAA0BC,WAAU;0CACjD,cAAA,KAACxC;oCACCa,UAAUA;oCACVC,YAAYA;oCACZ8B,QAAQ;wCACN,kBAAkB;4CAAEC,iBAAiB,CAACtB,QAAUA,MAAMC,OAAO,CAACsB,UAAU,CAACC,OAAO;wCAAC;oCACnF;mCACI;;;;;;YAOX,CAACtC,6BACA,KAACuC;0BACC,cAAA,KAAC1C;oBAAaE,QAAQA;oBAAQE,UAAUA;oBAAUK,sBAAsBA;;;;;AAKlF"}

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

@@ -1,8 +1,9 @@
-import { ReactElement } from 'react';
-import { ColumnSettings } from '../../models';
+import type { ReactElement } from 'react';
+import type { ColumnSettings } from '../../models';
 export interface ColumnsEditorProps {
     columnSettings: ColumnSettings[];
     onChange: (columnOptions: ColumnSettings[]) => void;
+    defaultEnableSorting?: boolean;
 }
-export declare function ColumnsEditor({ columnSettings, onChange }: ColumnsEditorProps): ReactElement;
+export declare function ColumnsEditor({ columnSettings, onChange, defaultEnableSorting }: ColumnsEditorProps): ReactElement;
 //# sourceMappingURL=ColumnsEditor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColumnsEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnsEditor/ColumnsEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,MAAM,WAAW,kBAAkB;IACjC,cAAc,EAAE,cAAc,EAAE,CAAC;IACjC,QAAQ,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;CACrD;AAED,wBAAgB,aAAa,CAAC,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,kBAAkB,GAAG,YAAY,CA+D5F"}
+{"version":3,"file":"ColumnsEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnsEditor/ColumnsEditor.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAGnD,MAAM,WAAW,kBAAkB;IACjC,cAAc,EAAE,cAAc,EAAE,CAAC;IACjC,QAAQ,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IACpD,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,wBAAgB,aAAa,CAAC,EAAE,cAAc,EAAE,QAAQ,EAAE,oBAAoB,EAAE,EAAE,kBAAkB,GAAG,YAAY,CAgElH"}

package/lib/components/ColumnsEditor/ColumnsEditor.js

@@ -11,12 +11,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 { Button, Stack } from '@mui/material';
-import { useState } from 'react';
-import AddIcon from 'mdi-material-ui/Plus';
-import { handleMoveDown, handleMoveUp, useDragAndDropMonitor } from '@perses-dev/components';
-import { ColumnEditorContainer } from './ColumnEditorContainer';
-export function ColumnsEditor({ columnSettings, onChange }) {
+import { Button, Stack } from "@mui/material";
+import { handleMoveDown, handleMoveUp, useDragAndDropMonitor } from "@perses-dev/components";
+import AddIcon from "mdi-material-ui/Plus";
+import { useState } from "react";
+import { ColumnEditorContainer } from "./ColumnEditorContainer.js";
+export function ColumnsEditor({ columnSettings, onChange, defaultEnableSorting }) {
     const [columnsCollapsed, setColumnsCollapsed] = useState(columnSettings.map(()=>true));
     function handleColumnChange(index, column) {
         const updatedColumns = [
@@ -73,6 +73,7 @@ export function ColumnsEditor({ columnSettings, onChange }) {
             columnSettings.map((column, i)=>/*#__PURE__*/ _jsx(ColumnEditorContainer, {
                     column: column,
                     isCollapsed: columnsCollapsed[i] ?? true,
+                    defaultEnableSorting: defaultEnableSorting,
                     onChange: (updatedColumn)=>handleColumnChange(i, updatedColumn),
                     onDelete: ()=>handleColumnDelete(i),
                     onCollapse: (collapsed)=>handleColumnCollapseExpand(i, collapsed),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ColumnsEditor/ColumnsEditor.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, Stack } from '@mui/material';\nimport { ReactElement, useState } from 'react';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { handleMoveDown, handleMoveUp, useDragAndDropMonitor } from '@perses-dev/components';\nimport { ColumnSettings } from '../../models';\nimport { ColumnEditorContainer } from './ColumnEditorContainer';\n\nexport interface ColumnsEditorProps {\n  columnSettings: ColumnSettings[];\n  onChange: (columnOptions: ColumnSettings[]) => void;\n}\n\nexport function ColumnsEditor({ columnSettings, onChange }: ColumnsEditorProps): ReactElement {\n  const [columnsCollapsed, setColumnsCollapsed] = useState(columnSettings.map(() => true));\n\n  function handleColumnChange(index: number, column: ColumnSettings): void {\n    const updatedColumns = [...columnSettings];\n    updatedColumns[index] = column;\n    onChange(updatedColumns);\n  }\n\n  function handleColumnAdd(): void {\n    const columnName: string = `column_${Object.keys(columnSettings).length}`;\n    const updatedColumns = [...columnSettings];\n    updatedColumns.push({ name: columnName });\n    onChange(updatedColumns);\n    setColumnsCollapsed((prev) => {\n      prev.push(false);\n      return [...prev];\n    });\n  }\n\n  function handleColumnDelete(index: number): void {\n    const updatedColumns = [...columnSettings];\n    updatedColumns.splice(index, 1);\n    onChange(updatedColumns);\n    setColumnsCollapsed((prev) => {\n      prev.splice(index, 1);\n      return [...prev];\n    });\n  }\n\n  function handleColumnCollapseExpand(index: number, collapsed: boolean): void {\n    setColumnsCollapsed((prev) => {\n      prev[index] = collapsed;\n      return [...prev];\n    });\n  }\n\n  useDragAndDropMonitor({\n    elements: columnSettings as unknown as Array<Record<string, unknown>>,\n    accessKey: 'name',\n    onChange: onChange as unknown as (elements: Array<Record<string, unknown>>) => void,\n  });\n\n  return (\n    <Stack spacing={1}>\n      {columnSettings.map((column, i) => (\n        <ColumnEditorContainer\n          key={i}\n          column={column}\n          isCollapsed={columnsCollapsed[i] ?? true}\n          onChange={(updatedColumn: ColumnSettings) => handleColumnChange(i, updatedColumn)}\n          onDelete={() => handleColumnDelete(i)}\n          onCollapse={(collapsed) => handleColumnCollapseExpand(i, collapsed)}\n          onMoveUp={() => onChange(handleMoveUp(column, columnSettings))}\n          onMoveDown={() => onChange(handleMoveDown(column, columnSettings))}\n        />\n      ))}\n\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleColumnAdd}>\n        Add Column Settings\n      </Button>\n    </Stack>\n  );\n}\n"],"names":["Button","Stack","useState","AddIcon","handleMoveDown","handleMoveUp","useDragAndDropMonitor","ColumnEditorContainer","ColumnsEditor","columnSettings","onChange","columnsCollapsed","setColumnsCollapsed","map","handleColumnChange","index","column","updatedColumns","handleColumnAdd","columnName","Object","keys","length","push","name","prev","handleColumnDelete","splice","handleColumnCollapseExpand","collapsed","elements","accessKey","spacing","i","isCollapsed","updatedColumn","onDelete","onCollapse","onMoveUp","onMoveDown","variant","startIcon","sx","marginTop","onClick"],"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,MAAM,EAAEC,KAAK,QAAQ,gBAAgB;AAC9C,SAAuBC,QAAQ,QAAQ,QAAQ;AAC/C,OAAOC,aAAa,uBAAuB;AAC3C,SAASC,cAAc,EAAEC,YAAY,EAAEC,qBAAqB,QAAQ,yBAAyB;AAE7F,SAASC,qBAAqB,QAAQ,0BAA0B;AAOhE,OAAO,SAASC,cAAc,EAAEC,cAAc,EAAEC,QAAQ,EAAsB;IAC5E,MAAM,CAACC,kBAAkBC,oBAAoB,GAAGV,SAASO,eAAeI,GAAG,CAAC,IAAM;IAElF,SAASC,mBAAmBC,KAAa,EAAEC,MAAsB;QAC/D,MAAMC,iBAAiB;eAAIR;SAAe;QAC1CQ,cAAc,CAACF,MAAM,GAAGC;QACxBN,SAASO;IACX;IAEA,SAASC;QACP,MAAMC,aAAqB,CAAC,OAAO,EAAEC,OAAOC,IAAI,CAACZ,gBAAgBa,MAAM,EAAE;QACzE,MAAML,iBAAiB;eAAIR;SAAe;QAC1CQ,eAAeM,IAAI,CAAC;YAAEC,MAAML;QAAW;QACvCT,SAASO;QACTL,oBAAoB,CAACa;YACnBA,KAAKF,IAAI,CAAC;YACV,OAAO;mBAAIE;aAAK;QAClB;IACF;IAEA,SAASC,mBAAmBX,KAAa;QACvC,MAAME,iBAAiB;eAAIR;SAAe;QAC1CQ,eAAeU,MAAM,CAACZ,OAAO;QAC7BL,SAASO;QACTL,oBAAoB,CAACa;YACnBA,KAAKE,MAAM,CAACZ,OAAO;YACnB,OAAO;mBAAIU;aAAK;QAClB;IACF;IAEA,SAASG,2BAA2Bb,KAAa,EAAEc,SAAkB;QACnEjB,oBAAoB,CAACa;YACnBA,IAAI,CAACV,MAAM,GAAGc;YACd,OAAO;mBAAIJ;aAAK;QAClB;IACF;IAEAnB,sBAAsB;QACpBwB,UAAUrB;QACVsB,WAAW;QACXrB,UAAUA;IACZ;IAEA,qBACE,MAACT;QAAM+B,SAAS;;YACbvB,eAAeI,GAAG,CAAC,CAACG,QAAQiB,kBAC3B,KAAC1B;oBAECS,QAAQA;oBACRkB,aAAavB,gBAAgB,CAACsB,EAAE,IAAI;oBACpCvB,UAAU,CAACyB,gBAAkCrB,mBAAmBmB,GAAGE;oBACnEC,UAAU,IAAMV,mBAAmBO;oBACnCI,YAAY,CAACR,YAAcD,2BAA2BK,GAAGJ;oBACzDS,UAAU,IAAM5B,SAASL,aAAaW,QAAQP;oBAC9C8B,YAAY,IAAM7B,SAASN,eAAeY,QAAQP;mBAP7CwB;0BAWT,KAACjC;gBAAOwC,SAAQ;gBAAYC,yBAAW,KAACtC;gBAAYuC,IAAI;oBAAEC,WAAW;gBAAE;gBAAGC,SAAS1B;0BAAiB;;;;AAK1G"}
+{"version":3,"sources":["../../../../src/components/ColumnsEditor/ColumnsEditor.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, Stack } from '@mui/material';\nimport { handleMoveDown, handleMoveUp, useDragAndDropMonitor } from '@perses-dev/components';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport type { ReactElement } from 'react';\nimport { useState } from 'react';\n\nimport type { ColumnSettings } from '../../models';\nimport { ColumnEditorContainer } from './ColumnEditorContainer';\n\nexport interface ColumnsEditorProps {\n  columnSettings: ColumnSettings[];\n  onChange: (columnOptions: ColumnSettings[]) => void;\n  defaultEnableSorting?: boolean;\n}\n\nexport function ColumnsEditor({ columnSettings, onChange, defaultEnableSorting }: ColumnsEditorProps): ReactElement {\n  const [columnsCollapsed, setColumnsCollapsed] = useState(columnSettings.map(() => true));\n\n  function handleColumnChange(index: number, column: ColumnSettings): void {\n    const updatedColumns = [...columnSettings];\n    updatedColumns[index] = column;\n    onChange(updatedColumns);\n  }\n\n  function handleColumnAdd(): void {\n    const columnName: string = `column_${Object.keys(columnSettings).length}`;\n    const updatedColumns = [...columnSettings];\n    updatedColumns.push({ name: columnName });\n    onChange(updatedColumns);\n    setColumnsCollapsed((prev) => {\n      prev.push(false);\n      return [...prev];\n    });\n  }\n\n  function handleColumnDelete(index: number): void {\n    const updatedColumns = [...columnSettings];\n    updatedColumns.splice(index, 1);\n    onChange(updatedColumns);\n    setColumnsCollapsed((prev) => {\n      prev.splice(index, 1);\n      return [...prev];\n    });\n  }\n\n  function handleColumnCollapseExpand(index: number, collapsed: boolean): void {\n    setColumnsCollapsed((prev) => {\n      prev[index] = collapsed;\n      return [...prev];\n    });\n  }\n\n  useDragAndDropMonitor({\n    elements: columnSettings as unknown as Array<Record<string, unknown>>,\n    accessKey: 'name',\n    onChange: onChange as unknown as (elements: Array<Record<string, unknown>>) => void,\n  });\n\n  return (\n    <Stack spacing={1}>\n      {columnSettings.map((column, i) => (\n        <ColumnEditorContainer\n          key={i}\n          column={column}\n          isCollapsed={columnsCollapsed[i] ?? true}\n          defaultEnableSorting={defaultEnableSorting}\n          onChange={(updatedColumn: ColumnSettings) => handleColumnChange(i, updatedColumn)}\n          onDelete={() => handleColumnDelete(i)}\n          onCollapse={(collapsed) => handleColumnCollapseExpand(i, collapsed)}\n          onMoveUp={() => onChange(handleMoveUp(column, columnSettings))}\n          onMoveDown={() => onChange(handleMoveDown(column, columnSettings))}\n        />\n      ))}\n\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleColumnAdd}>\n        Add Column Settings\n      </Button>\n    </Stack>\n  );\n}\n"],"names":["Button","Stack","handleMoveDown","handleMoveUp","useDragAndDropMonitor","AddIcon","useState","ColumnEditorContainer","ColumnsEditor","columnSettings","onChange","defaultEnableSorting","columnsCollapsed","setColumnsCollapsed","map","handleColumnChange","index","column","updatedColumns","handleColumnAdd","columnName","Object","keys","length","push","name","prev","handleColumnDelete","splice","handleColumnCollapseExpand","collapsed","elements","accessKey","spacing","i","isCollapsed","updatedColumn","onDelete","onCollapse","onMoveUp","onMoveDown","variant","startIcon","sx","marginTop","onClick"],"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,MAAM,EAAEC,KAAK,QAAQ,gBAAgB;AAC9C,SAASC,cAAc,EAAEC,YAAY,EAAEC,qBAAqB,QAAQ,yBAAyB;AAC7F,OAAOC,aAAa,uBAAuB;AAE3C,SAASC,QAAQ,QAAQ,QAAQ;AAGjC,SAASC,qBAAqB,QAAQ,6BAA0B;AAQhE,OAAO,SAASC,cAAc,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,oBAAoB,EAAsB;IAClG,MAAM,CAACC,kBAAkBC,oBAAoB,GAAGP,SAASG,eAAeK,GAAG,CAAC,IAAM;IAElF,SAASC,mBAAmBC,KAAa,EAAEC,MAAsB;QAC/D,MAAMC,iBAAiB;eAAIT;SAAe;QAC1CS,cAAc,CAACF,MAAM,GAAGC;QACxBP,SAASQ;IACX;IAEA,SAASC;QACP,MAAMC,aAAqB,CAAC,OAAO,EAAEC,OAAOC,IAAI,CAACb,gBAAgBc,MAAM,EAAE;QACzE,MAAML,iBAAiB;eAAIT;SAAe;QAC1CS,eAAeM,IAAI,CAAC;YAAEC,MAAML;QAAW;QACvCV,SAASQ;QACTL,oBAAoB,CAACa;YACnBA,KAAKF,IAAI,CAAC;YACV,OAAO;mBAAIE;aAAK;QAClB;IACF;IAEA,SAASC,mBAAmBX,KAAa;QACvC,MAAME,iBAAiB;eAAIT;SAAe;QAC1CS,eAAeU,MAAM,CAACZ,OAAO;QAC7BN,SAASQ;QACTL,oBAAoB,CAACa;YACnBA,KAAKE,MAAM,CAACZ,OAAO;YACnB,OAAO;mBAAIU;aAAK;QAClB;IACF;IAEA,SAASG,2BAA2Bb,KAAa,EAAEc,SAAkB;QACnEjB,oBAAoB,CAACa;YACnBA,IAAI,CAACV,MAAM,GAAGc;YACd,OAAO;mBAAIJ;aAAK;QAClB;IACF;IAEAtB,sBAAsB;QACpB2B,UAAUtB;QACVuB,WAAW;QACXtB,UAAUA;IACZ;IAEA,qBACE,MAACT;QAAMgC,SAAS;;YACbxB,eAAeK,GAAG,CAAC,CAACG,QAAQiB,kBAC3B,KAAC3B;oBAECU,QAAQA;oBACRkB,aAAavB,gBAAgB,CAACsB,EAAE,IAAI;oBACpCvB,sBAAsBA;oBACtBD,UAAU,CAAC0B,gBAAkCrB,mBAAmBmB,GAAGE;oBACnEC,UAAU,IAAMV,mBAAmBO;oBACnCI,YAAY,CAACR,YAAcD,2BAA2BK,GAAGJ;oBACzDS,UAAU,IAAM7B,SAASP,aAAac,QAAQR;oBAC9C+B,YAAY,IAAM9B,SAASR,eAAee,QAAQR;mBAR7CyB;0BAYT,KAAClC;gBAAOyC,SAAQ;gBAAYC,yBAAW,KAACrC;gBAAYsC,IAAI;oBAAEC,WAAW;gBAAE;gBAAGC,SAAS1B;0BAAiB;;;;AAK1G"}

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

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

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

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