@perses-dev/table-plugin 0.10.0 → 0.11.0-beta.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ColumnsEditor/ColumnEditorContainer.tsx"],"sourcesContent":["// Copyright 2024 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,oCAAoC;AACpC,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 2024 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,oCAAoC;AACpC,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"}

package/lib/components/ColumnsEditor/ColumnsEditor.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2024 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.
@@ -10,7 +11,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.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Stack } from '@mui/material';
 import { useState } from 'react';
 import AddIcon from 'mdi-material-ui/Plus';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ColumnsEditor/ColumnsEditor.tsx"],"sourcesContent":["// Copyright 2024 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,oCAAoC;AACpC,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 2024 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,oCAAoC;AACpC,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"}

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

@@ -1 +1 @@
-{"version":3,"file":"TablePanel.d.ts","sourceRoot":"","sources":["../../../src/components/TablePanel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAa,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,EAAE,YAAY,EAAgC,MAAM,OAAO,CAAC;AACnE,OAAO,EAAkD,cAAc,EAAiB,MAAM,kBAAkB,CAAC;AAGjH,OAAO,EAAkB,YAAY,EAAiC,MAAM,WAAW,CAAC;AAqKxF,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,YAAY,GAAG;IAAE,IAAI,EAAE,SAAS,GAAG,OAAO,CAAA;CAAE,CAK3F;AAED,MAAM,MAAM,UAAU,GAAG,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAElE,wBAAgB,UAAU,CAAC,EAAE,iBAAiB,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,UAAU,GAAG,YAAY,GAAG,IAAI,CAgXrG"}
+{"version":3,"file":"TablePanel.d.ts","sourceRoot":"","sources":["../../../src/components/TablePanel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAa,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,EAAE,YAAY,EAAgC,MAAM,OAAO,CAAC;AACnE,OAAO,EAAkD,cAAc,EAAiB,MAAM,kBAAkB,CAAC;AAGjH,OAAO,EAAkB,YAAY,EAAiC,MAAM,WAAW,CAAC;AAqKxF,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,YAAY,GAAG;IAAE,IAAI,EAAE,SAAS,GAAG,OAAO,CAAA;CAAE,CAK3F;AAED,MAAM,MAAM,UAAU,GAAG,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAElE,wBAAgB,UAAU,CAAC,EAAE,iBAAiB,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,UAAU,GAAG,YAAY,GAAG,IAAI,CAmYrG"}

package/lib/components/TablePanel.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Table } from '@perses-dev/components';
 import { useEffect, useMemo, useState } from 'react';
 import { formatValue, transformData } from '@perses-dev/core';
-import { useTheme } from '@mui/material';
+import { useTheme, Typography, Box } from '@mui/material';
 import { evaluateConditionalFormatting } from '../models';
 import { EmbeddedPanel } from './EmbeddedPanel';
 function generateCellContentConfig(column) {
@@ -280,22 +280,27 @@ export function TablePanel({ contentDimensions, spec, queryResults }) {
         data,
         keys
     ]);
+    // Generate columns and map each column accessor to its settings index and data key
     const columns = useMemo(()=>{
         const columns = [];
-        // Taking the customized columns first for the ordering of the columns in the table
-        const customizedColumns = spec.columnSettings?.map((column)=>column.name).filter((name)=>keys.includes(name)) ?? [];
-        const defaultColumns = keys.filter((key)=>!customizedColumns.includes(key));
-        for (const key of customizedColumns){
-            const columnConfig = generateColumnConfig(key, spec.columnSettings ?? []);
+        const customizedColumns = new Set();
+        // Process columnSettings if they exist
+        for (const columnSetting of spec.columnSettings ?? []){
+            if (customizedColumns.has(columnSetting.name)) continue; // Skip duplicates
+            const columnConfig = generateColumnConfig(columnSetting.name, spec.columnSettings ?? []);
             if (columnConfig !== undefined) {
                 columns.push(columnConfig);
+                customizedColumns.add(columnSetting.name);
             }
         }
+        // Add remaining columns if defaultColumnHidden is false
         if (!spec.defaultColumnHidden) {
-            for (const key of defaultColumns){
-                const columnConfig = generateColumnConfig(key, spec.columnSettings ?? []);
-                if (columnConfig !== undefined) {
-                    columns.push(columnConfig);
+            for (const key of keys){
+                if (!customizedColumns.has(key)) {
+                    const columnConfig = generateColumnConfig(key, spec.columnSettings ?? []);
+                    if (columnConfig !== undefined) {
+                        columns.push(columnConfig);
+                    }
                 }
             }
         }
@@ -324,10 +329,11 @@ export function TablePanel({ contentDimensions, spec, queryResults }) {
                 ...keysAsObj,
                 ...row
             };
+            // Generate cellConfigs for each column (including duplicates with different headers)
             for (const [key, value] of Object.entries(extendRow)){
                 // First, try to get cell config from global cell settings
                 let cellConfig = evaluateConditionalFormatting(value, spec.cellSettings ?? []);
-                // Then, try to get cell config from column-specific cell settings if conditional formatting is enabled
+                // Then, try to get cell config from column-specific cell settings
                 const columnSetting = spec.columnSettings?.find((col)=>col.name === key);
                 if (columnSetting?.cellSettings?.length) {
                     const columnCellConfig = evaluateConditionalFormatting(value, columnSetting.cellSettings);
@@ -455,7 +461,20 @@ export function TablePanel({ contentDimensions, spec, queryResults }) {
     if (contentDimensions === undefined) {
         return null;
     }
-    return /*#__PURE__*/ _jsxs("div", {
+    if (!data?.length) {
+        return /*#__PURE__*/ _jsx(Box, {
+            sx: {
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: '100%'
+            },
+            children: /*#__PURE__*/ _jsx(Typography, {
+                children: "No data"
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             spec.enableFiltering && /*#__PURE__*/ _jsx("div", {
                 style: {

package/lib/components/TablePanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TablePanel.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PanelData, PanelProps } from '@perses-dev/plugin-system';\nimport { Table, TableCellConfigs, TableColumnConfig } from '@perses-dev/components';\nimport { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { formatValue, Labels, QueryDataType, TimeSeries, TimeSeriesData, transformData } from '@perses-dev/core';\nimport { PaginationState, SortingState, ColumnFiltersState } from '@tanstack/react-table';\nimport { useTheme, Theme } from '@mui/material';\nimport { ColumnSettings, TableOptions, evaluateConditionalFormatting } from '../models';\nimport { EmbeddedPanel } from './EmbeddedPanel';\n\nfunction generateCellContentConfig(\n  column: ColumnSettings\n): Pick<TableColumnConfig<unknown>, 'cellDescription' | 'cell'> {\n  const plugin = column.plugin;\n  if (plugin !== undefined) {\n    return {\n      cell: (ctx) => {\n        const panelData: PanelData<QueryDataType> | undefined = ctx.getValue();\n        if (!panelData) return <></>;\n        return <EmbeddedPanel kind={plugin.kind} spec={plugin.spec} queryResults={[panelData]} />;\n      },\n      cellDescription: column.cellDescription ? () => `${column.cellDescription}` : () => '', // disable hover text\n    };\n  }\n\n  return {\n    cell: (ctx) => {\n      const cellValue = ctx.getValue();\n      return typeof cellValue === 'number' && column.format ? formatValue(cellValue, column.format) : cellValue;\n    },\n    cellDescription: column.cellDescription ? (): string => `${column.cellDescription}` : undefined, // TODO: variable rendering + cell value\n  };\n}\n\ninterface ColumnFilterDropdownProps {\n  allValues: Array<string | number>;\n  selectedValues: Array<string | number>;\n  onFilterChange: (values: Array<string | number>) => void;\n  theme: Theme;\n}\n\nfunction ColumnFilterDropdown({\n  allValues,\n  selectedValues,\n  onFilterChange,\n  theme,\n}: ColumnFilterDropdownProps): ReactElement {\n  const values = [...new Set(allValues)].filter((v) => v != null).sort();\n  if (values.length === 0) {\n    return (\n      <div\n        data-filter-dropdown\n        style={{\n          width: 200,\n          padding: 10,\n          backgroundColor: theme.palette.background.paper,\n          border: `1px solid ${theme.palette.divider}`,\n          borderRadius: 4,\n          boxShadow: theme.shadows[4],\n        }}\n      >\n        <div style={{ color: theme.palette.text.secondary, fontSize: 14 }}>No values found</div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-filter-dropdown\n      style={{\n        width: 200,\n        padding: 10,\n        backgroundColor: theme.palette.background.paper,\n        border: `1px solid ${theme.palette.divider}`,\n        borderRadius: 4,\n        boxShadow: theme.shadows[4],\n        maxHeight: 250,\n        overflowY: 'auto',\n      }}\n    >\n      <div style={{ marginBottom: 8, fontSize: 14, fontWeight: 'bold' }}>\n        <label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>\n          <input\n            type=\"checkbox\"\n            checked={selectedValues.length === values.length && values.length > 0}\n            onChange={(e) => onFilterChange(e.target.checked ? values : [])}\n            style={{ marginRight: 8 }}\n          />\n          <span style={{ color: theme.palette.text.primary }}>Select All ({values.length})</span>\n        </label>\n      </div>\n      <hr\n        style={{\n          margin: '8px 0',\n          border: 'none',\n          borderTop: `1px solid ${theme.palette.divider}`,\n        }}\n      />\n      {values.map((value, index) => (\n        <div key={`value-${index}`} style={{ marginBottom: 4 }}>\n          <label\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              cursor: 'pointer',\n              padding: '2px 0',\n              borderRadius: 2,\n            }}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.backgroundColor = theme.palette.action.hover;\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.backgroundColor = 'transparent';\n            }}\n          >\n            <input\n              type=\"checkbox\"\n              checked={selectedValues.includes(value)}\n              onChange={(e) => {\n                if (e.target.checked) {\n                  onFilterChange([...selectedValues, value]);\n                } else {\n                  onFilterChange(selectedValues.filter((v) => v !== value));\n                }\n              }}\n              style={{ marginRight: 8 }}\n            />\n            <span\n              style={{\n                fontSize: 14,\n                color: theme.palette.text.primary,\n              }}\n            >\n              {value === null || value === undefined || value === '' ? '(empty)' : String(value)}\n            </span>\n          </label>\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/*\n * Generate column config from column definitions, if a column has multiple definitions, the first one will be used.\n * If column is hidden, return undefined.\n * If column do not have a definition, return a default column config.\n */\nfunction generateColumnConfig(name: string, columnSettings: ColumnSettings[]): TableColumnConfig<unknown> | undefined {\n  for (const column of columnSettings) {\n    if (column.name === name) {\n      if (column.hide) {\n        return undefined;\n      }\n\n      return {\n        accessorKey: name,\n        header: column.header ?? name,\n        headerDescription: column.headerDescription,\n        enableSorting: column.enableSorting,\n        width: column.width,\n        align: column.align,\n        ...generateCellContentConfig(column),\n      };\n    }\n  }\n\n  return {\n    accessorKey: name,\n    header: name,\n  };\n}\n\nexport function getTablePanelQueryOptions(spec: TableOptions): { mode: 'instant' | 'range' } {\n  // if any cell renders a panel plugin, perform a range query instead of an instant query\n  return {\n    mode: (spec.columnSettings ?? []).some((c) => c.plugin) ? 'range' : 'instant',\n  };\n}\n\nexport type TableProps = PanelProps<TableOptions, TimeSeriesData>;\n\nexport function TablePanel({ contentDimensions, spec, queryResults }: TableProps): ReactElement | null {\n  const theme = useTheme();\n\n  // TODO: handle other query types\n  const queryMode = getTablePanelQueryOptions(spec).mode;\n  const rawData: Array<Record<string, unknown>> = useMemo(() => {\n    // Transform query results to a tabular format:\n    // [ { timestamp: 123, value: 456, labelName1: labelValue1 }, ... ]\n    return queryResults\n      .flatMap((data: PanelData<TimeSeriesData>, queryIndex: number) =>\n        data.data.series.map((ts: TimeSeries) => ({ data, ts, queryIndex }))\n      )\n      .map(({ data, ts, queryIndex }: { data: PanelData<TimeSeriesData>; ts: TimeSeries; queryIndex: number }) => {\n        if (ts.values[0] === undefined) {\n          return { ...ts.labels };\n        }\n\n        // If there are multiple queries, we need to add the query index to the value key and label key to avoid conflicts\n        const valueColumnName = queryResults.length === 1 ? 'value' : `value #${queryIndex + 1}`;\n        const labels =\n          queryResults.length === 1\n            ? ts.labels\n            : Object.entries(ts.labels ?? {}).reduce((acc, [key, value]) => {\n                if (key) acc[`${key} #${queryIndex + 1}`] = value;\n                return acc;\n              }, {} as Labels);\n\n        // If the cell visualization is a panel plugin, filter the data by the current series\n        const columnValue = (spec.columnSettings ?? []).find((x) => x.name === valueColumnName)?.plugin\n          ? { ...data, data: { ...data.data, series: data.data.series.filter((s) => s === ts) } }\n          : ts.values[0][1];\n\n        if (queryMode === 'instant') {\n          // Timestamp is not indexed as it will be the same for all queries\n          return { timestamp: ts.values[0][0], [valueColumnName]: columnValue, ...labels };\n        } else {\n          // Don't add a timestamp for range queries\n          return { [valueColumnName]: columnValue, ...labels };\n        }\n      });\n  }, [queryResults, queryMode, spec.columnSettings]);\n\n  // Transform will be applied by their orders on the original data\n  const data = transformData(rawData, spec.transforms ?? []);\n\n  const keys: string[] = useMemo(() => {\n    const result: string[] = [];\n\n    for (const entry of data) {\n      for (const key of Object.keys(entry)) {\n        if (!result.includes(key)) {\n          result.push(key);\n        }\n      }\n    }\n\n    return result;\n  }, [data]);\n\n  // fetch unique values for each column of filtering\n  const columnUniqueValues = useMemo(() => {\n    const uniqueValues: Record<string, Array<string | number>> = {};\n\n    keys.forEach((key) => {\n      const values = data.map((row) => row[key]).filter((val) => val !== null && val !== undefined && val !== '');\n      uniqueValues[key] = Array.from(new Set(values as Array<string | number>));\n    });\n\n    return uniqueValues;\n  }, [data, keys]);\n\n  const columns: Array<TableColumnConfig<unknown>> = useMemo(() => {\n    const columns: Array<TableColumnConfig<unknown>> = [];\n\n    // Taking the customized columns first for the ordering of the columns in the table\n    const customizedColumns =\n      spec.columnSettings?.map((column) => column.name).filter((name) => keys.includes(name)) ?? [];\n    const defaultColumns = keys.filter((key) => !customizedColumns.includes(key));\n\n    for (const key of customizedColumns) {\n      const columnConfig = generateColumnConfig(key, spec.columnSettings ?? []);\n      if (columnConfig !== undefined) {\n        columns.push(columnConfig);\n      }\n    }\n\n    if (!spec.defaultColumnHidden) {\n      for (const key of defaultColumns) {\n        const columnConfig = generateColumnConfig(key, spec.columnSettings ?? []);\n        if (columnConfig !== undefined) {\n          columns.push(columnConfig);\n        }\n      }\n    }\n\n    return columns;\n  }, [keys, spec.columnSettings, spec.defaultColumnHidden]);\n\n  // Generate cell settings that will be used by the table to render cells (text color, background color, ...)\n  const cellConfigs: TableCellConfigs = useMemo(() => {\n    // If there are no cell settings globally or per column, return an empty object\n    if (spec.cellSettings === undefined && !spec.columnSettings?.some((col) => col.cellSettings !== undefined)) {\n      return {};\n    }\n\n    const result: TableCellConfigs = {};\n\n    let index = 0;\n    for (const row of data) {\n      // Transforming key to object to extend the row with undefined values if the key is not present\n      // for checking the cell config \"Misc\" condition with \"null\"\n      const keysAsObj = keys.reduce(\n        (acc, key) => {\n          acc[key] = undefined;\n          return acc;\n        },\n        {} as Record<string, undefined>\n      );\n\n      const extendRow = {\n        ...keysAsObj,\n        ...row,\n      };\n\n      for (const [key, value] of Object.entries(extendRow)) {\n        // First, try to get cell config from global cell settings\n        let cellConfig = evaluateConditionalFormatting(value, spec.cellSettings ?? []);\n\n        // Then, try to get cell config from column-specific cell settings if conditional formatting is enabled\n        const columnSetting = spec.columnSettings?.find((col) => col.name === key);\n        if (columnSetting?.cellSettings?.length) {\n          const columnCellConfig = evaluateConditionalFormatting(value, columnSetting.cellSettings);\n          // Column-specific settings take precedence over global settings\n          if (columnCellConfig) {\n            cellConfig = columnCellConfig;\n          }\n        }\n\n        if (cellConfig) {\n          result[`${index}_${key}`] = cellConfig;\n        }\n      }\n      index++;\n    }\n\n    return result;\n  }, [data, keys, spec.cellSettings, spec.columnSettings]);\n\n  function generateDefaultSortingState(): SortingState {\n    return (\n      spec.columnSettings\n        ?.filter((column) => column.sort !== undefined)\n        .map((column) => {\n          return {\n            id: column.name,\n            desc: column.sort === 'desc',\n          };\n        }) ?? []\n    );\n  }\n\n  const [sorting, setSorting] = useState<SortingState>(generateDefaultSortingState());\n\n  // Filtering state\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  const [filterAnchorEl, setFilterAnchorEl] = useState<{ [key: string]: HTMLElement | null }>({});\n  const [openFilterColumn, setOpenFilterColumn] = useState<string | null>(null);\n\n  // get selected values for a column\n  const getSelectedFilterValues = (columnId: string): Array<string | number> => {\n    const filter = columnFilters.find((f) => f.id === columnId);\n    return filter ? (filter.value as Array<string | number>) : [];\n  };\n\n  // update column filter\n  const updateColumnFilter = (columnId: string, values: Array<string | number>) => {\n    const newFilters = columnFilters.filter((f) => f.id !== columnId);\n    if (values.length > 0) {\n      newFilters.push({ id: columnId, value: values });\n    }\n    setColumnFilters(newFilters);\n  };\n\n  // Handle filter clicks\n  const handleFilterClick = (event: React.MouseEvent<HTMLButtonElement>, columnId: string) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setFilterAnchorEl({ ...filterAnchorEl, [columnId]: event.currentTarget });\n    setOpenFilterColumn(columnId);\n  };\n\n  const handleFilterClose = () => {\n    setFilterAnchorEl({});\n    setOpenFilterColumn(null);\n  };\n\n  // Close filter when clicking outside\n  useEffect(() => {\n    if (!openFilterColumn) return;\n\n    const handleClick = (e: MouseEvent) => {\n      const target = e.target as Element;\n      if (!target.closest('[data-filter-dropdown]') && !target.closest('button')) {\n        handleFilterClose();\n      }\n    };\n\n    const timer = setTimeout(() => {\n      document.addEventListener('click', handleClick);\n    }, 100);\n\n    return () => {\n      clearTimeout(timer);\n      document.removeEventListener('click', handleClick);\n    };\n  }, [openFilterColumn]);\n\n  // filter data based on the current filters\n  const filteredData = useMemo(() => {\n    let filtered = [...data];\n\n    // apply column filters if enabled\n    if (spec.enableFiltering && columnFilters.length > 0) {\n      filtered = filtered.filter((row) => {\n        return columnFilters.every((filter) => {\n          const value = row[filter.id];\n          const filterValues = filter.value as Array<string | number>;\n\n          if (!filterValues || filterValues.length === 0) return true; // No filter values means no filtering\n\n          // Check if the row value is in the selected filter values\n          return filterValues.includes(value as string | number);\n        });\n      });\n    }\n\n    return filtered;\n  }, [data, columnFilters, spec.enableFiltering]);\n\n  const [pagination, setPagination] = useState<PaginationState | undefined>(\n    spec.pagination ? { pageIndex: 0, pageSize: 10 } : undefined\n  );\n\n  useEffect(() => {\n    // If the pagination setting changes from no pagination to pagination, but the pagination state is undefined, update the pagination state\n    if (spec.pagination && !pagination) {\n      setPagination({ pageIndex: 0, pageSize: 10 });\n    } else if (!spec.pagination && pagination) {\n      setPagination(undefined);\n    }\n  }, [spec.pagination, pagination]);\n\n  if (contentDimensions === undefined) {\n    return null;\n  }\n\n  return (\n    <div>\n      {spec.enableFiltering && (\n        <div\n          style={{\n            display: 'flex',\n            background: theme.palette.background.default,\n            borderBottom: `1px solid ${theme.palette.divider}`,\n            width: contentDimensions.width,\n            boxSizing: 'border-box',\n          }}\n        >\n          {columns.map((column, idx) => {\n            const filters = getSelectedFilterValues(column.accessorKey as string);\n            const columnWidth = column.width || spec.defaultColumnWidth;\n            return (\n              <div\n                key={`filter-${idx}`}\n                style={{\n                  padding: '8px',\n                  borderRight: idx < columns.length - 1 ? `1px solid ${theme.palette.divider}` : 'none',\n                  width: columnWidth,\n                  minWidth: columnWidth,\n                  maxWidth: columnWidth,\n                  display: 'flex',\n                  alignItems: 'center',\n                  position: 'relative',\n                  boxSizing: 'border-box',\n                  flex: typeof columnWidth === 'number' ? 'none' : '1 1 auto',\n                }}\n              >\n                <span\n                  style={{\n                    marginRight: 8,\n                    fontSize: '12px',\n                    color: theme.palette.text.secondary,\n                    flex: 1,\n                    overflow: 'hidden',\n                    textOverflow: 'ellipsis',\n                    whiteSpace: 'nowrap',\n                  }}\n                >\n                  {filters.length ? `${filters.length} items` : 'All'}\n                </span>\n                <button\n                  onClick={(e) => {\n                    handleFilterClick(e, column.accessorKey as string);\n                  }}\n                  style={{\n                    border: `1px solid ${theme.palette.divider}`,\n                    background: theme.palette.background.paper,\n                    cursor: 'pointer',\n                    fontSize: '12px',\n                    color: filters.length ? theme.palette.primary.main : theme.palette.text.secondary,\n                    padding: '4px 8px',\n                    borderRadius: '4px',\n                    minWidth: '20px',\n                    height: '24px',\n                    flexShrink: 0,\n                    transition: 'all 0.2s ease',\n                  }}\n                  onMouseEnter={(e) => {\n                    e.currentTarget.style.background = theme.palette.action.hover;\n                  }}\n                  onMouseLeave={(e) => {\n                    e.currentTarget.style.background = theme.palette.background.paper;\n                  }}\n                  type=\"button\"\n                >\n                  ▼\n                </button>\n\n                {openFilterColumn === column.accessorKey && (\n                  <div\n                    style={{\n                      position: 'absolute',\n                      top: '100%',\n                      left: 0,\n                      zIndex: 1000,\n                      marginTop: 4,\n                    }}\n                  >\n                    <ColumnFilterDropdown\n                      allValues={columnUniqueValues[column.accessorKey as string] || []}\n                      selectedValues={filters}\n                      onFilterChange={(values) => updateColumnFilter(column.accessorKey as string, values)}\n                      theme={theme}\n                    />\n                  </div>\n                )}\n              </div>\n            );\n          })}\n        </div>\n      )}\n\n      <Table\n        data={filteredData}\n        columns={columns}\n        cellConfigs={cellConfigs}\n        height={spec.enableFiltering ? contentDimensions.height - 40 : contentDimensions.height}\n        width={contentDimensions.width}\n        density={spec.density}\n        defaultColumnWidth={spec.defaultColumnWidth}\n        defaultColumnHeight={spec.defaultColumnHeight}\n        sorting={sorting}\n        onSortingChange={setSorting}\n        pagination={pagination}\n        onPaginationChange={setPagination}\n      />\n    </div>\n  );\n}\n"],"names":["Table","useEffect","useMemo","useState","formatValue","transformData","useTheme","evaluateConditionalFormatting","EmbeddedPanel","generateCellContentConfig","column","plugin","undefined","cell","ctx","panelData","getValue","kind","spec","queryResults","cellDescription","cellValue","format","ColumnFilterDropdown","allValues","selectedValues","onFilterChange","theme","values","Set","filter","v","sort","length","div","data-filter-dropdown","style","width","padding","backgroundColor","palette","background","paper","border","divider","borderRadius","boxShadow","shadows","color","text","secondary","fontSize","maxHeight","overflowY","marginBottom","fontWeight","label","display","alignItems","cursor","input","type","checked","onChange","e","target","marginRight","span","primary","hr","margin","borderTop","map","value","index","onMouseEnter","currentTarget","action","hover","onMouseLeave","includes","String","generateColumnConfig","name","columnSettings","hide","accessorKey","header","headerDescription","enableSorting","align","getTablePanelQueryOptions","mode","some","c","TablePanel","contentDimensions","queryMode","rawData","flatMap","data","queryIndex","series","ts","labels","valueColumnName","Object","entries","reduce","acc","key","columnValue","find","x","s","timestamp","transforms","keys","result","entry","push","columnUniqueValues","uniqueValues","forEach","row","val","Array","from","columns","customizedColumns","defaultColumns","columnConfig","defaultColumnHidden","cellConfigs","cellSettings","col","keysAsObj","extendRow","cellConfig","columnSetting","columnCellConfig","generateDefaultSortingState","id","desc","sorting","setSorting","columnFilters","setColumnFilters","filterAnchorEl","setFilterAnchorEl","openFilterColumn","setOpenFilterColumn","getSelectedFilterValues","columnId","f","updateColumnFilter","newFilters","handleFilterClick","event","preventDefault","stopPropagation","handleFilterClose","handleClick","closest","timer","setTimeout","document","addEventListener","clearTimeout","removeEventListener","filteredData","filtered","enableFiltering","every","filterValues","pagination","setPagination","pageIndex","pageSize","default","borderBottom","boxSizing","idx","filters","columnWidth","defaultColumnWidth","borderRight","minWidth","maxWidth","position","flex","overflow","textOverflow","whiteSpace","button","onClick","main","height","flexShrink","transition","top","left","zIndex","marginTop","density","defaultColumnHeight","onSortingChange","onPaginationChange"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/TablePanel.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PanelData, PanelProps } from '@perses-dev/plugin-system';\nimport { Table, TableCellConfigs, TableColumnConfig } from '@perses-dev/components';\nimport { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { formatValue, Labels, QueryDataType, TimeSeries, TimeSeriesData, transformData } from '@perses-dev/core';\nimport { PaginationState, SortingState, ColumnFiltersState } from '@tanstack/react-table';\nimport { useTheme, Theme, Typography, Box } from '@mui/material';\nimport { ColumnSettings, TableOptions, evaluateConditionalFormatting } from '../models';\nimport { EmbeddedPanel } from './EmbeddedPanel';\n\nfunction generateCellContentConfig(\n  column: ColumnSettings\n): Pick<TableColumnConfig<unknown>, 'cellDescription' | 'cell'> {\n  const plugin = column.plugin;\n  if (plugin !== undefined) {\n    return {\n      cell: (ctx) => {\n        const panelData: PanelData<QueryDataType> | undefined = ctx.getValue();\n        if (!panelData) return <></>;\n        return <EmbeddedPanel kind={plugin.kind} spec={plugin.spec} queryResults={[panelData]} />;\n      },\n      cellDescription: column.cellDescription ? () => `${column.cellDescription}` : () => '', // disable hover text\n    };\n  }\n\n  return {\n    cell: (ctx) => {\n      const cellValue = ctx.getValue();\n      return typeof cellValue === 'number' && column.format ? formatValue(cellValue, column.format) : cellValue;\n    },\n    cellDescription: column.cellDescription ? (): string => `${column.cellDescription}` : undefined, // TODO: variable rendering + cell value\n  };\n}\n\ninterface ColumnFilterDropdownProps {\n  allValues: Array<string | number>;\n  selectedValues: Array<string | number>;\n  onFilterChange: (values: Array<string | number>) => void;\n  theme: Theme;\n}\n\nfunction ColumnFilterDropdown({\n  allValues,\n  selectedValues,\n  onFilterChange,\n  theme,\n}: ColumnFilterDropdownProps): ReactElement {\n  const values = [...new Set(allValues)].filter((v) => v != null).sort();\n  if (values.length === 0) {\n    return (\n      <div\n        data-filter-dropdown\n        style={{\n          width: 200,\n          padding: 10,\n          backgroundColor: theme.palette.background.paper,\n          border: `1px solid ${theme.palette.divider}`,\n          borderRadius: 4,\n          boxShadow: theme.shadows[4],\n        }}\n      >\n        <div style={{ color: theme.palette.text.secondary, fontSize: 14 }}>No values found</div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-filter-dropdown\n      style={{\n        width: 200,\n        padding: 10,\n        backgroundColor: theme.palette.background.paper,\n        border: `1px solid ${theme.palette.divider}`,\n        borderRadius: 4,\n        boxShadow: theme.shadows[4],\n        maxHeight: 250,\n        overflowY: 'auto',\n      }}\n    >\n      <div style={{ marginBottom: 8, fontSize: 14, fontWeight: 'bold' }}>\n        <label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>\n          <input\n            type=\"checkbox\"\n            checked={selectedValues.length === values.length && values.length > 0}\n            onChange={(e) => onFilterChange(e.target.checked ? values : [])}\n            style={{ marginRight: 8 }}\n          />\n          <span style={{ color: theme.palette.text.primary }}>Select All ({values.length})</span>\n        </label>\n      </div>\n      <hr\n        style={{\n          margin: '8px 0',\n          border: 'none',\n          borderTop: `1px solid ${theme.palette.divider}`,\n        }}\n      />\n      {values.map((value, index) => (\n        <div key={`value-${index}`} style={{ marginBottom: 4 }}>\n          <label\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              cursor: 'pointer',\n              padding: '2px 0',\n              borderRadius: 2,\n            }}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.backgroundColor = theme.palette.action.hover;\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.backgroundColor = 'transparent';\n            }}\n          >\n            <input\n              type=\"checkbox\"\n              checked={selectedValues.includes(value)}\n              onChange={(e) => {\n                if (e.target.checked) {\n                  onFilterChange([...selectedValues, value]);\n                } else {\n                  onFilterChange(selectedValues.filter((v) => v !== value));\n                }\n              }}\n              style={{ marginRight: 8 }}\n            />\n            <span\n              style={{\n                fontSize: 14,\n                color: theme.palette.text.primary,\n              }}\n            >\n              {value === null || value === undefined || value === '' ? '(empty)' : String(value)}\n            </span>\n          </label>\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/*\n * Generate column config from column definitions, if a column has multiple definitions, the first one will be used.\n * If column is hidden, return undefined.\n * If column do not have a definition, return a default column config.\n */\nfunction generateColumnConfig(name: string, columnSettings: ColumnSettings[]): TableColumnConfig<unknown> | undefined {\n  for (const column of columnSettings) {\n    if (column.name === name) {\n      if (column.hide) {\n        return undefined;\n      }\n\n      return {\n        accessorKey: name,\n        header: column.header ?? name,\n        headerDescription: column.headerDescription,\n        enableSorting: column.enableSorting,\n        width: column.width,\n        align: column.align,\n        ...generateCellContentConfig(column),\n      };\n    }\n  }\n\n  return {\n    accessorKey: name,\n    header: name,\n  };\n}\n\nexport function getTablePanelQueryOptions(spec: TableOptions): { mode: 'instant' | 'range' } {\n  // if any cell renders a panel plugin, perform a range query instead of an instant query\n  return {\n    mode: (spec.columnSettings ?? []).some((c) => c.plugin) ? 'range' : 'instant',\n  };\n}\n\nexport type TableProps = PanelProps<TableOptions, TimeSeriesData>;\n\nexport function TablePanel({ contentDimensions, spec, queryResults }: TableProps): ReactElement | null {\n  const theme = useTheme();\n\n  // TODO: handle other query types\n  const queryMode = getTablePanelQueryOptions(spec).mode;\n  const rawData: Array<Record<string, unknown>> = useMemo(() => {\n    // Transform query results to a tabular format:\n    // [ { timestamp: 123, value: 456, labelName1: labelValue1 }, ... ]\n    return queryResults\n      .flatMap((data: PanelData<TimeSeriesData>, queryIndex: number) =>\n        data.data.series.map((ts: TimeSeries) => ({ data, ts, queryIndex }))\n      )\n      .map(({ data, ts, queryIndex }: { data: PanelData<TimeSeriesData>; ts: TimeSeries; queryIndex: number }) => {\n        if (ts.values[0] === undefined) {\n          return { ...ts.labels };\n        }\n\n        // If there are multiple queries, we need to add the query index to the value key and label key to avoid conflicts\n        const valueColumnName = queryResults.length === 1 ? 'value' : `value #${queryIndex + 1}`;\n        const labels =\n          queryResults.length === 1\n            ? ts.labels\n            : Object.entries(ts.labels ?? {}).reduce((acc, [key, value]) => {\n                if (key) acc[`${key} #${queryIndex + 1}`] = value;\n                return acc;\n              }, {} as Labels);\n\n        // If the cell visualization is a panel plugin, filter the data by the current series\n        const columnValue = (spec.columnSettings ?? []).find((x) => x.name === valueColumnName)?.plugin\n          ? { ...data, data: { ...data.data, series: data.data.series.filter((s) => s === ts) } }\n          : ts.values[0][1];\n\n        if (queryMode === 'instant') {\n          // Timestamp is not indexed as it will be the same for all queries\n          return { timestamp: ts.values[0][0], [valueColumnName]: columnValue, ...labels };\n        } else {\n          // Don't add a timestamp for range queries\n          return { [valueColumnName]: columnValue, ...labels };\n        }\n      });\n  }, [queryResults, queryMode, spec.columnSettings]);\n\n  // Transform will be applied by their orders on the original data\n  const data = transformData(rawData, spec.transforms ?? []);\n\n  const keys: string[] = useMemo(() => {\n    const result: string[] = [];\n\n    for (const entry of data) {\n      for (const key of Object.keys(entry)) {\n        if (!result.includes(key)) {\n          result.push(key);\n        }\n      }\n    }\n\n    return result;\n  }, [data]);\n\n  // fetch unique values for each column of filtering\n  const columnUniqueValues = useMemo(() => {\n    const uniqueValues: Record<string, Array<string | number>> = {};\n\n    keys.forEach((key) => {\n      const values = data.map((row) => row[key]).filter((val) => val !== null && val !== undefined && val !== '');\n      uniqueValues[key] = Array.from(new Set(values as Array<string | number>));\n    });\n\n    return uniqueValues;\n  }, [data, keys]);\n\n  // Generate columns and map each column accessor to its settings index and data key\n  const columns: Array<TableColumnConfig<unknown>> = useMemo(() => {\n    const columns: Array<TableColumnConfig<unknown>> = [];\n    const customizedColumns = new Set<string>();\n\n    // Process columnSettings if they exist\n    for (const columnSetting of spec.columnSettings ?? []) {\n      if (customizedColumns.has(columnSetting.name)) continue; // Skip duplicates\n\n      const columnConfig = generateColumnConfig(columnSetting.name, spec.columnSettings ?? []);\n      if (columnConfig !== undefined) {\n        columns.push(columnConfig);\n        customizedColumns.add(columnSetting.name);\n      }\n    }\n\n    // Add remaining columns if defaultColumnHidden is false\n    if (!spec.defaultColumnHidden) {\n      for (const key of keys) {\n        if (!customizedColumns.has(key)) {\n          const columnConfig = generateColumnConfig(key, spec.columnSettings ?? []);\n          if (columnConfig !== undefined) {\n            columns.push(columnConfig);\n          }\n        }\n      }\n    }\n\n    return columns;\n  }, [keys, spec.columnSettings, spec.defaultColumnHidden]);\n\n  // Generate cell settings that will be used by the table to render cells (text color, background color, ...)\n  const cellConfigs: TableCellConfigs = useMemo(() => {\n    // If there are no cell settings globally or per column, return an empty object\n    if (spec.cellSettings === undefined && !spec.columnSettings?.some((col) => col.cellSettings !== undefined)) {\n      return {};\n    }\n\n    const result: TableCellConfigs = {};\n\n    let index = 0;\n    for (const row of data) {\n      // Transforming key to object to extend the row with undefined values if the key is not present\n      // for checking the cell config \"Misc\" condition with \"null\"\n      const keysAsObj = keys.reduce(\n        (acc, key) => {\n          acc[key] = undefined;\n          return acc;\n        },\n        {} as Record<string, undefined>\n      );\n\n      const extendRow = {\n        ...keysAsObj,\n        ...row,\n      };\n\n      // Generate cellConfigs for each column (including duplicates with different headers)\n      for (const [key, value] of Object.entries(extendRow)) {\n        // First, try to get cell config from global cell settings\n        let cellConfig = evaluateConditionalFormatting(value, spec.cellSettings ?? []);\n\n        // Then, try to get cell config from column-specific cell settings\n        const columnSetting = spec.columnSettings?.find((col) => col.name === key);\n        if (columnSetting?.cellSettings?.length) {\n          const columnCellConfig = evaluateConditionalFormatting(value, columnSetting.cellSettings);\n          // Column-specific settings take precedence over global settings\n          if (columnCellConfig) {\n            cellConfig = columnCellConfig;\n          }\n        }\n\n        if (cellConfig) {\n          result[`${index}_${key}`] = cellConfig;\n        }\n      }\n      index++;\n    }\n\n    return result;\n  }, [data, keys, spec.cellSettings, spec.columnSettings]);\n\n  function generateDefaultSortingState(): SortingState {\n    return (\n      spec.columnSettings\n        ?.filter((column) => column.sort !== undefined)\n        .map((column) => {\n          return {\n            id: column.name,\n            desc: column.sort === 'desc',\n          };\n        }) ?? []\n    );\n  }\n\n  const [sorting, setSorting] = useState<SortingState>(generateDefaultSortingState());\n\n  // Filtering state\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  const [filterAnchorEl, setFilterAnchorEl] = useState<{ [key: string]: HTMLElement | null }>({});\n  const [openFilterColumn, setOpenFilterColumn] = useState<string | null>(null);\n\n  // get selected values for a column\n  const getSelectedFilterValues = (columnId: string): Array<string | number> => {\n    const filter = columnFilters.find((f) => f.id === columnId);\n    return filter ? (filter.value as Array<string | number>) : [];\n  };\n\n  // update column filter\n  const updateColumnFilter = (columnId: string, values: Array<string | number>) => {\n    const newFilters = columnFilters.filter((f) => f.id !== columnId);\n    if (values.length > 0) {\n      newFilters.push({ id: columnId, value: values });\n    }\n    setColumnFilters(newFilters);\n  };\n\n  // Handle filter clicks\n  const handleFilterClick = (event: React.MouseEvent<HTMLButtonElement>, columnId: string) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setFilterAnchorEl({ ...filterAnchorEl, [columnId]: event.currentTarget });\n    setOpenFilterColumn(columnId);\n  };\n\n  const handleFilterClose = () => {\n    setFilterAnchorEl({});\n    setOpenFilterColumn(null);\n  };\n\n  // Close filter when clicking outside\n  useEffect(() => {\n    if (!openFilterColumn) return;\n\n    const handleClick = (e: MouseEvent) => {\n      const target = e.target as Element;\n      if (!target.closest('[data-filter-dropdown]') && !target.closest('button')) {\n        handleFilterClose();\n      }\n    };\n\n    const timer = setTimeout(() => {\n      document.addEventListener('click', handleClick);\n    }, 100);\n\n    return () => {\n      clearTimeout(timer);\n      document.removeEventListener('click', handleClick);\n    };\n  }, [openFilterColumn]);\n\n  // filter data based on the current filters\n  const filteredData = useMemo(() => {\n    let filtered = [...data];\n\n    // apply column filters if enabled\n    if (spec.enableFiltering && columnFilters.length > 0) {\n      filtered = filtered.filter((row) => {\n        return columnFilters.every((filter) => {\n          const value = row[filter.id];\n          const filterValues = filter.value as Array<string | number>;\n\n          if (!filterValues || filterValues.length === 0) return true; // No filter values means no filtering\n\n          // Check if the row value is in the selected filter values\n          return filterValues.includes(value as string | number);\n        });\n      });\n    }\n\n    return filtered;\n  }, [data, columnFilters, spec.enableFiltering]);\n\n  const [pagination, setPagination] = useState<PaginationState | undefined>(\n    spec.pagination ? { pageIndex: 0, pageSize: 10 } : undefined\n  );\n\n  useEffect(() => {\n    // If the pagination setting changes from no pagination to pagination, but the pagination state is undefined, update the pagination state\n    if (spec.pagination && !pagination) {\n      setPagination({ pageIndex: 0, pageSize: 10 });\n    } else if (!spec.pagination && pagination) {\n      setPagination(undefined);\n    }\n  }, [spec.pagination, pagination]);\n\n  if (contentDimensions === undefined) {\n    return null;\n  }\n\n  if (!data?.length) {\n    return (\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          height: '100%',\n        }}\n      >\n        <Typography>No data</Typography>\n      </Box>\n    );\n  }\n\n  return (\n    <>\n      {spec.enableFiltering && (\n        <div\n          style={{\n            display: 'flex',\n            background: theme.palette.background.default,\n            borderBottom: `1px solid ${theme.palette.divider}`,\n            width: contentDimensions.width,\n            boxSizing: 'border-box',\n          }}\n        >\n          {columns.map((column, idx) => {\n            const filters = getSelectedFilterValues(column.accessorKey as string);\n            const columnWidth = column.width || spec.defaultColumnWidth;\n            return (\n              <div\n                key={`filter-${idx}`}\n                style={{\n                  padding: '8px',\n                  borderRight: idx < columns.length - 1 ? `1px solid ${theme.palette.divider}` : 'none',\n                  width: columnWidth,\n                  minWidth: columnWidth,\n                  maxWidth: columnWidth,\n                  display: 'flex',\n                  alignItems: 'center',\n                  position: 'relative',\n                  boxSizing: 'border-box',\n                  flex: typeof columnWidth === 'number' ? 'none' : '1 1 auto',\n                }}\n              >\n                <span\n                  style={{\n                    marginRight: 8,\n                    fontSize: '12px',\n                    color: theme.palette.text.secondary,\n                    flex: 1,\n                    overflow: 'hidden',\n                    textOverflow: 'ellipsis',\n                    whiteSpace: 'nowrap',\n                  }}\n                >\n                  {filters.length ? `${filters.length} items` : 'All'}\n                </span>\n                <button\n                  onClick={(e) => {\n                    handleFilterClick(e, column.accessorKey as string);\n                  }}\n                  style={{\n                    border: `1px solid ${theme.palette.divider}`,\n                    background: theme.palette.background.paper,\n                    cursor: 'pointer',\n                    fontSize: '12px',\n                    color: filters.length ? theme.palette.primary.main : theme.palette.text.secondary,\n                    padding: '4px 8px',\n                    borderRadius: '4px',\n                    minWidth: '20px',\n                    height: '24px',\n                    flexShrink: 0,\n                    transition: 'all 0.2s ease',\n                  }}\n                  onMouseEnter={(e) => {\n                    e.currentTarget.style.background = theme.palette.action.hover;\n                  }}\n                  onMouseLeave={(e) => {\n                    e.currentTarget.style.background = theme.palette.background.paper;\n                  }}\n                  type=\"button\"\n                >\n                  ▼\n                </button>\n\n                {openFilterColumn === column.accessorKey && (\n                  <div\n                    style={{\n                      position: 'absolute',\n                      top: '100%',\n                      left: 0,\n                      zIndex: 1000,\n                      marginTop: 4,\n                    }}\n                  >\n                    <ColumnFilterDropdown\n                      allValues={columnUniqueValues[column.accessorKey as string] || []}\n                      selectedValues={filters}\n                      onFilterChange={(values) => updateColumnFilter(column.accessorKey as string, values)}\n                      theme={theme}\n                    />\n                  </div>\n                )}\n              </div>\n            );\n          })}\n        </div>\n      )}\n      <Table\n        data={filteredData}\n        columns={columns}\n        cellConfigs={cellConfigs}\n        height={spec.enableFiltering ? contentDimensions.height - 40 : contentDimensions.height}\n        width={contentDimensions.width}\n        density={spec.density}\n        defaultColumnWidth={spec.defaultColumnWidth}\n        defaultColumnHeight={spec.defaultColumnHeight}\n        sorting={sorting}\n        onSortingChange={setSorting}\n        pagination={pagination}\n        onPaginationChange={setPagination}\n      />\n    </>\n  );\n}\n"],"names":["Table","useEffect","useMemo","useState","formatValue","transformData","useTheme","Typography","Box","evaluateConditionalFormatting","EmbeddedPanel","generateCellContentConfig","column","plugin","undefined","cell","ctx","panelData","getValue","kind","spec","queryResults","cellDescription","cellValue","format","ColumnFilterDropdown","allValues","selectedValues","onFilterChange","theme","values","Set","filter","v","sort","length","div","data-filter-dropdown","style","width","padding","backgroundColor","palette","background","paper","border","divider","borderRadius","boxShadow","shadows","color","text","secondary","fontSize","maxHeight","overflowY","marginBottom","fontWeight","label","display","alignItems","cursor","input","type","checked","onChange","e","target","marginRight","span","primary","hr","margin","borderTop","map","value","index","onMouseEnter","currentTarget","action","hover","onMouseLeave","includes","String","generateColumnConfig","name","columnSettings","hide","accessorKey","header","headerDescription","enableSorting","align","getTablePanelQueryOptions","mode","some","c","TablePanel","contentDimensions","queryMode","rawData","flatMap","data","queryIndex","series","ts","labels","valueColumnName","Object","entries","reduce","acc","key","columnValue","find","x","s","timestamp","transforms","keys","result","entry","push","columnUniqueValues","uniqueValues","forEach","row","val","Array","from","columns","customizedColumns","columnSetting","has","columnConfig","add","defaultColumnHidden","cellConfigs","cellSettings","col","keysAsObj","extendRow","cellConfig","columnCellConfig","generateDefaultSortingState","id","desc","sorting","setSorting","columnFilters","setColumnFilters","filterAnchorEl","setFilterAnchorEl","openFilterColumn","setOpenFilterColumn","getSelectedFilterValues","columnId","f","updateColumnFilter","newFilters","handleFilterClick","event","preventDefault","stopPropagation","handleFilterClose","handleClick","closest","timer","setTimeout","document","addEventListener","clearTimeout","removeEventListener","filteredData","filtered","enableFiltering","every","filterValues","pagination","setPagination","pageIndex","pageSize","sx","justifyContent","height","default","borderBottom","boxSizing","idx","filters","columnWidth","defaultColumnWidth","borderRight","minWidth","maxWidth","position","flex","overflow","textOverflow","whiteSpace","button","onClick","main","flexShrink","transition","top","left","zIndex","marginTop","density","defaultColumnHeight","onSortingChange","onPaginationChange"],"mappings":"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"}

package/lib/components/TableSettingsEditor.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright 2024 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.
@@ -10,7 +11,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.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Switch, TextField } from '@mui/material';
 import { DEFAULT_COLUMN_HEIGHT, DEFAULT_COLUMN_WIDTH, DensitySelector, OptionsEditorColumn, OptionsEditorControl, OptionsEditorGrid, OptionsEditorGroup } from '@perses-dev/components';
 function DefaultColumnsDimensionsControl({ label, defaultValue, value, onChange }) {

package/lib/components/TableSettingsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TableSettingsEditor.tsx"],"sourcesContent":["// Copyright 2024 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 { Switch, TextField } from '@mui/material';\nimport {\n  DEFAULT_COLUMN_HEIGHT,\n  DEFAULT_COLUMN_WIDTH,\n  DensitySelector,\n  OptionsEditorColumn,\n  OptionsEditorControl,\n  OptionsEditorGrid,\n  OptionsEditorGroup,\n  TableDensity,\n} from '@perses-dev/components';\nimport { ChangeEvent, ReactElement } from 'react';\nimport { TableSettingsEditorProps } from '../models';\n\ninterface DefaultColumnsDimensionsControlProps {\n  label: string;\n  defaultValue: number;\n  value?: 'auto' | number;\n  onChange: (value: 'auto' | number) => void;\n}\n\nfunction DefaultColumnsDimensionsControl({\n  label,\n  defaultValue,\n  value,\n  onChange,\n}: DefaultColumnsDimensionsControlProps): ReactElement {\n  function handleAutoSwitchChange(_: ChangeEvent, checked: boolean): void {\n    if (checked) {\n      return onChange('auto');\n    }\n    onChange(defaultValue);\n  }\n\n  return (\n    <>\n      <OptionsEditorControl\n        label={`Auto Columns ${label}`}\n        control={<Switch checked={value === undefined || value === 'auto'} onChange={handleAutoSwitchChange} />}\n      />\n      {value !== undefined && value !== 'auto' && (\n        <OptionsEditorControl\n          label={`Default Columns ${label}`}\n          control={\n            <TextField\n              type=\"number\"\n              value={value ?? defaultValue}\n              slotProps={{ input: { inputProps: { min: 1, step: 1 } } }}\n              onChange={(e) => onChange(parseInt(e.target.value))}\n            />\n          }\n        />\n      )}\n    </>\n  );\n}\n\nexport function TableSettingsEditor({ onChange, value }: TableSettingsEditorProps): ReactElement {\n  function handleDensityChange(density: TableDensity): void {\n    onChange({ ...value, density: density });\n  }\n\n  function handlePaginationChange(_event: ChangeEvent, newValue: boolean): void {\n    onChange({ ...value, pagination: newValue });\n  }\n\n  function handleDefaultColumnHiddenChange(_event: ChangeEvent, newValue: boolean): void {\n    onChange({ ...value, defaultColumnHidden: newValue });\n  }\n\n  function handleAutoWidthChange(newValue: 'auto' | number): void {\n    onChange({ ...value, defaultColumnWidth: newValue });\n  }\n\n  function handleAutoHeightChange(newValue: 'auto' | number): void {\n    onChange({ ...value, defaultColumnHeight: newValue });\n  }\n\n  function handleEnableFilteringChange(_event: ChangeEvent, checked: boolean): void {\n    onChange({ ...value, enableFiltering: checked });\n  }\n\n  return (\n    <OptionsEditorGrid>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Display\">\n          <DensitySelector value={value.density} onChange={handleDensityChange} />\n          <OptionsEditorControl\n            label=\"Pagination\"\n            control={<Switch checked={!!value.pagination} onChange={handlePaginationChange} />}\n          />\n          <OptionsEditorControl\n            label=\"Columns Hidden by Default\"\n            control={<Switch checked={!!value.defaultColumnHidden} onChange={handleDefaultColumnHiddenChange} />}\n          />\n          <OptionsEditorControl\n            label=\"Enable Column Filtering\"\n            control={<Switch checked={!!value.enableFiltering} onChange={handleEnableFilteringChange} />}\n          />\n\n          <DefaultColumnsDimensionsControl\n            label=\"Width\"\n            defaultValue={DEFAULT_COLUMN_WIDTH}\n            value={value.defaultColumnWidth}\n            onChange={handleAutoWidthChange}\n          />\n          <DefaultColumnsDimensionsControl\n            label=\"Height\"\n            defaultValue={DEFAULT_COLUMN_HEIGHT}\n            value={value.defaultColumnHeight}\n            onChange={handleAutoHeightChange}\n          />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n    </OptionsEditorGrid>\n  );\n}\n"],"names":["Switch","TextField","DEFAULT_COLUMN_HEIGHT","DEFAULT_COLUMN_WIDTH","DensitySelector","OptionsEditorColumn","OptionsEditorControl","OptionsEditorGrid","OptionsEditorGroup","DefaultColumnsDimensionsControl","label","defaultValue","value","onChange","handleAutoSwitchChange","_","checked","control","undefined","type","slotProps","input","inputProps","min","step","e","parseInt","target","TableSettingsEditor","handleDensityChange","density","handlePaginationChange","_event","newValue","pagination","handleDefaultColumnHiddenChange","defaultColumnHidden","handleAutoWidthChange","defaultColumnWidth","handleAutoHeightChange","defaultColumnHeight","handleEnableFilteringChange","enableFiltering","title"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/TableSettingsEditor.tsx"],"sourcesContent":["// Copyright 2024 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 { Switch, TextField } from '@mui/material';\nimport {\n  DEFAULT_COLUMN_HEIGHT,\n  DEFAULT_COLUMN_WIDTH,\n  DensitySelector,\n  OptionsEditorColumn,\n  OptionsEditorControl,\n  OptionsEditorGrid,\n  OptionsEditorGroup,\n  TableDensity,\n} from '@perses-dev/components';\nimport { ChangeEvent, ReactElement } from 'react';\nimport { TableSettingsEditorProps } from '../models';\n\ninterface DefaultColumnsDimensionsControlProps {\n  label: string;\n  defaultValue: number;\n  value?: 'auto' | number;\n  onChange: (value: 'auto' | number) => void;\n}\n\nfunction DefaultColumnsDimensionsControl({\n  label,\n  defaultValue,\n  value,\n  onChange,\n}: DefaultColumnsDimensionsControlProps): ReactElement {\n  function handleAutoSwitchChange(_: ChangeEvent, checked: boolean): void {\n    if (checked) {\n      return onChange('auto');\n    }\n    onChange(defaultValue);\n  }\n\n  return (\n    <>\n      <OptionsEditorControl\n        label={`Auto Columns ${label}`}\n        control={<Switch checked={value === undefined || value === 'auto'} onChange={handleAutoSwitchChange} />}\n      />\n      {value !== undefined && value !== 'auto' && (\n        <OptionsEditorControl\n          label={`Default Columns ${label}`}\n          control={\n            <TextField\n              type=\"number\"\n              value={value ?? defaultValue}\n              slotProps={{ input: { inputProps: { min: 1, step: 1 } } }}\n              onChange={(e) => onChange(parseInt(e.target.value))}\n            />\n          }\n        />\n      )}\n    </>\n  );\n}\n\nexport function TableSettingsEditor({ onChange, value }: TableSettingsEditorProps): ReactElement {\n  function handleDensityChange(density: TableDensity): void {\n    onChange({ ...value, density: density });\n  }\n\n  function handlePaginationChange(_event: ChangeEvent, newValue: boolean): void {\n    onChange({ ...value, pagination: newValue });\n  }\n\n  function handleDefaultColumnHiddenChange(_event: ChangeEvent, newValue: boolean): void {\n    onChange({ ...value, defaultColumnHidden: newValue });\n  }\n\n  function handleAutoWidthChange(newValue: 'auto' | number): void {\n    onChange({ ...value, defaultColumnWidth: newValue });\n  }\n\n  function handleAutoHeightChange(newValue: 'auto' | number): void {\n    onChange({ ...value, defaultColumnHeight: newValue });\n  }\n\n  function handleEnableFilteringChange(_event: ChangeEvent, checked: boolean): void {\n    onChange({ ...value, enableFiltering: checked });\n  }\n\n  return (\n    <OptionsEditorGrid>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Display\">\n          <DensitySelector value={value.density} onChange={handleDensityChange} />\n          <OptionsEditorControl\n            label=\"Pagination\"\n            control={<Switch checked={!!value.pagination} onChange={handlePaginationChange} />}\n          />\n          <OptionsEditorControl\n            label=\"Columns Hidden by Default\"\n            control={<Switch checked={!!value.defaultColumnHidden} onChange={handleDefaultColumnHiddenChange} />}\n          />\n          <OptionsEditorControl\n            label=\"Enable Column Filtering\"\n            control={<Switch checked={!!value.enableFiltering} onChange={handleEnableFilteringChange} />}\n          />\n\n          <DefaultColumnsDimensionsControl\n            label=\"Width\"\n            defaultValue={DEFAULT_COLUMN_WIDTH}\n            value={value.defaultColumnWidth}\n            onChange={handleAutoWidthChange}\n          />\n          <DefaultColumnsDimensionsControl\n            label=\"Height\"\n            defaultValue={DEFAULT_COLUMN_HEIGHT}\n            value={value.defaultColumnHeight}\n            onChange={handleAutoHeightChange}\n          />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n    </OptionsEditorGrid>\n  );\n}\n"],"names":["Switch","TextField","DEFAULT_COLUMN_HEIGHT","DEFAULT_COLUMN_WIDTH","DensitySelector","OptionsEditorColumn","OptionsEditorControl","OptionsEditorGrid","OptionsEditorGroup","DefaultColumnsDimensionsControl","label","defaultValue","value","onChange","handleAutoSwitchChange","_","checked","control","undefined","type","slotProps","input","inputProps","min","step","e","parseInt","target","TableSettingsEditor","handleDensityChange","density","handlePaginationChange","_event","newValue","pagination","handleDefaultColumnHiddenChange","defaultColumnHidden","handleAutoWidthChange","defaultColumnWidth","handleAutoHeightChange","defaultColumnHeight","handleEnableFilteringChange","enableFiltering","title"],"mappings":"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"}

package/lib/components/TableTransformsEditor.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 2024 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.
@@ -10,7 +11,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.
-import { jsx as _jsx } from "react/jsx-runtime";
 import { TransformsEditor } from '@perses-dev/components';
 export function TableTransformsEditor({ value, onChange }) {
     function handleTransformsChange(transforms) {

package/lib/components/TableTransformsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TableTransformsEditor.tsx"],"sourcesContent":["// Copyright 2024 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 { TransformsEditor } from '@perses-dev/components';\nimport { Transform } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { TableSettingsEditorProps } from '../models';\n\nexport function TableTransformsEditor({ value, onChange }: TableSettingsEditorProps): ReactElement {\n  function handleTransformsChange(transforms: Transform[]): void {\n    onChange({ ...value, transforms: transforms });\n  }\n\n  return <TransformsEditor value={value.transforms ?? []} onChange={handleTransformsChange} />;\n}\n"],"names":["TransformsEditor","TableTransformsEditor","value","onChange","handleTransformsChange","transforms"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,gBAAgB,QAAQ,yBAAyB;AAK1D,OAAO,SAASC,sBAAsB,EAAEC,KAAK,EAAEC,QAAQ,EAA4B;IACjF,SAASC,uBAAuBC,UAAuB;QACrDF,SAAS;YAAE,GAAGD,KAAK;YAAEG,YAAYA;QAAW;IAC9C;IAEA,qBAAO,KAACL;QAAiBE,OAAOA,MAAMG,UAAU,IAAI,EAAE;QAAEF,UAAUC;;AACpE"}
+{"version":3,"sources":["../../../src/components/TableTransformsEditor.tsx"],"sourcesContent":["// Copyright 2024 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 { TransformsEditor } from '@perses-dev/components';\nimport { Transform } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { TableSettingsEditorProps } from '../models';\n\nexport function TableTransformsEditor({ value, onChange }: TableSettingsEditorProps): ReactElement {\n  function handleTransformsChange(transforms: Transform[]): void {\n    onChange({ ...value, transforms: transforms });\n  }\n\n  return <TransformsEditor value={value.transforms ?? []} onChange={handleTransformsChange} />;\n}\n"],"names":["TransformsEditor","TableTransformsEditor","value","onChange","handleTransformsChange","transforms"],"mappings":";AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,gBAAgB,QAAQ,yBAAyB;AAK1D,OAAO,SAASC,sBAAsB,EAAEC,KAAK,EAAEC,QAAQ,EAA4B;IACjF,SAASC,uBAAuBC,UAAuB;QACrDF,SAAS;YAAE,GAAGD,KAAK;YAAEG,YAAYA;QAAW;IAC9C;IAEA,qBAAO,KAACL;QAAiBE,OAAOA,MAAMG,UAAU,IAAI,EAAE;QAAEF,UAAUC;;AACpE"}