@perses-dev/table-plugin 0.9.0 → 0.10.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ColumnsEditor/ColumnEditor.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, ButtonGroup, Stack, StackProps, Switch, TextField } from '@mui/material';\nimport { ReactElement, useState } from 'react';\nimport {\n  AlignSelector,\n  FormatControls,\n  OptionsEditorColumn,\n  OptionsEditorControl,\n  OptionsEditorGrid,\n  OptionsEditorGroup,\n  SortSelectorButtons,\n} from '@perses-dev/components';\nimport { FormatOptions } from '@perses-dev/core';\nimport { PluginKindSelect } from '@perses-dev/plugin-system';\nimport { ColumnSettings } from '../../models';\nimport { ConditionalPanel } from '../ConditionalPanel';\n\nconst DEFAULT_FORMAT: FormatOptions = {\n  unit: 'decimal',\n  shortValues: true,\n};\n\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\nexport interface ColumnEditorProps extends Omit<StackProps, OmittedMuiProps> {\n  column: ColumnSettings;\n  onChange: (column: ColumnSettings) => void;\n}\n\nexport function ColumnEditor({ column, onChange, ...others }: ColumnEditorProps): ReactElement {\n  const [width, setWidth] = useState<number>(\n    column.width === undefined || column.width === 'auto' ? 100 : column.width\n  );\n\n  return (\n    <Stack {...others}>\n      <OptionsEditorGrid>\n        <OptionsEditorColumn>\n          <OptionsEditorGroup title=\"Column\">\n            <OptionsEditorControl\n              label=\"Name*\"\n              control={\n                <TextField\n                  value={column.name}\n                  onChange={(e) => onChange({ ...column, name: e.target.value })}\n                  required\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Header\"\n              control={\n                <TextField\n                  value={column.header ?? ''}\n                  onChange={(e) => onChange({ ...column, header: e.target.value ? e.target.value : undefined })}\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Header Tooltip\"\n              control={\n                <TextField\n                  value={column.headerDescription ?? ''}\n                  onChange={(e) =>\n                    onChange({ ...column, headerDescription: e.target.value ? e.target.value : undefined })\n                  }\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Cell Tooltip\"\n              control={\n                <TextField\n                  value={column.cellDescription ?? ''}\n                  onChange={(e) =>\n                    onChange({ ...column, cellDescription: e.target.value ? e.target.value : undefined })\n                  }\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Enable sorting\"\n              control={\n                <Switch\n                  checked={column.enableSorting ?? false}\n                  onChange={(e) => onChange({ ...column, enableSorting: e.target.checked })}\n                />\n              }\n            />\n            {column.enableSorting && (\n              <OptionsEditorControl\n                label=\"Default Sort\"\n                control={\n                  <SortSelectorButtons\n                    size=\"medium\"\n                    value={column.sort}\n                    sx={{\n                      margin: 0.5,\n                    }}\n                    onChange={(sort) => onChange({ ...column, sort: sort })}\n                  />\n                }\n              />\n            )}\n          </OptionsEditorGroup>\n        </OptionsEditorColumn>\n\n        <OptionsEditorColumn>\n          <OptionsEditorGroup title=\"Visual\">\n            <OptionsEditorControl\n              label=\"Show column\"\n              control={\n                <Switch\n                  checked={!(column.hide ?? false)}\n                  onChange={(e) => onChange({ ...column, hide: !e.target.checked })}\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Display\"\n              control={\n                <ButtonGroup aria-label=\"Display\" size=\"small\">\n                  <Button\n                    variant={!column.plugin ? 'contained' : 'outlined'}\n                    onClick={() => onChange({ ...column, plugin: undefined })}\n                  >\n                    Text\n                  </Button>\n                  <Button\n                    variant={column.plugin ? 'contained' : 'outlined'}\n                    onClick={() => onChange({ ...column, plugin: { kind: 'StatChart', spec: {} } })}\n                  >\n                    Embedded Panel\n                  </Button>\n                </ButtonGroup>\n              }\n            />\n            {column.plugin ? (\n              <OptionsEditorControl\n                label=\"Panel Type\"\n                control={\n                  <PluginKindSelect\n                    pluginTypes={['Panel']}\n                    value={{ type: 'Panel', kind: column.plugin.kind }}\n                    onChange={(event) => onChange({ ...column, plugin: { kind: event.kind, spec: {} } })}\n                  />\n                }\n              />\n            ) : (\n              <FormatControls\n                value={column.format ?? DEFAULT_FORMAT}\n                onChange={(newFormat): void =>\n                  onChange({\n                    ...column,\n                    format: newFormat,\n                  })\n                }\n              />\n            )}\n            <OptionsEditorControl\n              label=\"Alignment\"\n              control={\n                <AlignSelector\n                  size=\"small\"\n                  value={column.align ?? 'left'}\n                  onChange={(align) => onChange({ ...column, align: align })}\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Custom width\"\n              control={\n                <Switch\n                  checked={column.width !== undefined && column.width !== 'auto'}\n                  onChange={(e) => onChange({ ...column, width: e.target.checked ? width : 'auto' })}\n                />\n              }\n            />\n            {column.width !== undefined && column.width !== 'auto' && (\n              <OptionsEditorControl\n                label=\"Width\"\n                control={\n                  <TextField\n                    type=\"number\"\n                    value={width}\n                    slotProps={{ htmlInput: { min: 1 } }}\n                    onChange={(e) => {\n                      setWidth(+e.target.value);\n                      onChange({ ...column, width: +e.target.value });\n                    }}\n                  />\n                }\n              />\n            )}\n          </OptionsEditorGroup>\n        </OptionsEditorColumn>\n      </OptionsEditorGrid>\n      <Stack sx={{ px: 8 }}>\n        <OptionsEditorGroup title=\"Conditional Cell Format\">\n          <ConditionalPanel\n            cellSettings={column.cellSettings}\n            onChange={(cellSettings) => onChange({ ...column, cellSettings })}\n          />\n        </OptionsEditorGroup>\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Button","ButtonGroup","Stack","Switch","TextField","useState","AlignSelector","FormatControls","OptionsEditorColumn","OptionsEditorControl","OptionsEditorGrid","OptionsEditorGroup","SortSelectorButtons","PluginKindSelect","ConditionalPanel","DEFAULT_FORMAT","unit","shortValues","ColumnEditor","column","onChange","others","width","setWidth","undefined","title","label","control","value","name","e","target","required","header","headerDescription","cellDescription","checked","enableSorting","size","sort","sx","margin","hide","aria-label","variant","plugin","onClick","kind","spec","pluginTypes","type","event","format","newFormat","align","slotProps","htmlInput","min","px","cellSettings"],"mappings":"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,WAAW,EAAEC,KAAK,EAAcC,MAAM,EAAEC,SAAS,QAAQ,gBAAgB;AAC1F,SAAuBC,QAAQ,QAAQ,QAAQ;AAC/C,SACEC,aAAa,EACbC,cAAc,EACdC,mBAAmB,EACnBC,oBAAoB,EACpBC,iBAAiB,EACjBC,kBAAkB,EAClBC,mBAAmB,QACd,yBAAyB;AAEhC,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,SAASC,gBAAgB,QAAQ,sBAAsB;AAEvD,MAAMC,iBAAgC;IACpCC,MAAM;IACNC,aAAa;AACf;AASA,OAAO,SAASC,aAAa,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGC,QAA2B;IAC7E,MAAM,CAACC,OAAOC,SAAS,GAAGlB,SACxBc,OAAOG,KAAK,KAAKE,aAAaL,OAAOG,KAAK,KAAK,SAAS,MAAMH,OAAOG,KAAK;IAG5E,qBACE,MAACpB;QAAO,GAAGmB,MAAM;;0BACf,MAACX;;kCACC,KAACF;kCACC,cAAA,MAACG;4BAAmBc,OAAM;;8CACxB,KAAChB;oCACCiB,OAAM;oCACNC,uBACE,KAACvB;wCACCwB,OAAOT,OAAOU,IAAI;wCAClBT,UAAU,CAACU,IAAMV,SAAS;gDAAE,GAAGD,MAAM;gDAAEU,MAAMC,EAAEC,MAAM,CAACH,KAAK;4CAAC;wCAC5DI,QAAQ;;;8CAId,KAACvB;oCACCiB,OAAM;oCACNC,uBACE,KAACvB;wCACCwB,OAAOT,OAAOc,MAAM,IAAI;wCACxBb,UAAU,CAACU,IAAMV,SAAS;gDAAE,GAAGD,MAAM;gDAAEc,QAAQH,EAAEC,MAAM,CAACH,KAAK,GAAGE,EAAEC,MAAM,CAACH,KAAK,GAAGJ;4CAAU;;;8CAIjG,KAACf;oCACCiB,OAAM;oCACNC,uBACE,KAACvB;wCACCwB,OAAOT,OAAOe,iBAAiB,IAAI;wCACnCd,UAAU,CAACU,IACTV,SAAS;gDAAE,GAAGD,MAAM;gDAAEe,mBAAmBJ,EAAEC,MAAM,CAACH,KAAK,GAAGE,EAAEC,MAAM,CAACH,KAAK,GAAGJ;4CAAU;;;8CAK7F,KAACf;oCACCiB,OAAM;oCACNC,uBACE,KAACvB;wCACCwB,OAAOT,OAAOgB,eAAe,IAAI;wCACjCf,UAAU,CAACU,IACTV,SAAS;gDAAE,GAAGD,MAAM;gDAAEgB,iBAAiBL,EAAEC,MAAM,CAACH,KAAK,GAAGE,EAAEC,MAAM,CAACH,KAAK,GAAGJ;4CAAU;;;8CAK3F,KAACf;oCACCiB,OAAM;oCACNC,uBACE,KAACxB;wCACCiC,SAASjB,OAAOkB,aAAa,IAAI;wCACjCjB,UAAU,CAACU,IAAMV,SAAS;gDAAE,GAAGD,MAAM;gDAAEkB,eAAeP,EAAEC,MAAM,CAACK,OAAO;4CAAC;;;gCAI5EjB,OAAOkB,aAAa,kBACnB,KAAC5B;oCACCiB,OAAM;oCACNC,uBACE,KAACf;wCACC0B,MAAK;wCACLV,OAAOT,OAAOoB,IAAI;wCAClBC,IAAI;4CACFC,QAAQ;wCACV;wCACArB,UAAU,CAACmB,OAASnB,SAAS;gDAAE,GAAGD,MAAM;gDAAEoB,MAAMA;4CAAK;;;;;;kCAQjE,KAAC/B;kCACC,cAAA,MAACG;4BAAmBc,OAAM;;8CACxB,KAAChB;oCACCiB,OAAM;oCACNC,uBACE,KAACxB;wCACCiC,SAAS,CAAEjB,CAAAA,OAAOuB,IAAI,IAAI,KAAI;wCAC9BtB,UAAU,CAACU,IAAMV,SAAS;gDAAE,GAAGD,MAAM;gDAAEuB,MAAM,CAACZ,EAAEC,MAAM,CAACK,OAAO;4CAAC;;;8CAIrE,KAAC3B;oCACCiB,OAAM;oCACNC,uBACE,MAAC1B;wCAAY0C,cAAW;wCAAUL,MAAK;;0DACrC,KAACtC;gDACC4C,SAAS,CAACzB,OAAO0B,MAAM,GAAG,cAAc;gDACxCC,SAAS,IAAM1B,SAAS;wDAAE,GAAGD,MAAM;wDAAE0B,QAAQrB;oDAAU;0DACxD;;0DAGD,KAACxB;gDACC4C,SAASzB,OAAO0B,MAAM,GAAG,cAAc;gDACvCC,SAAS,IAAM1B,SAAS;wDAAE,GAAGD,MAAM;wDAAE0B,QAAQ;4DAAEE,MAAM;4DAAaC,MAAM,CAAC;wDAAE;oDAAE;0DAC9E;;;;;gCAMN7B,OAAO0B,MAAM,iBACZ,KAACpC;oCACCiB,OAAM;oCACNC,uBACE,KAACd;wCACCoC,aAAa;4CAAC;yCAAQ;wCACtBrB,OAAO;4CAAEsB,MAAM;4CAASH,MAAM5B,OAAO0B,MAAM,CAACE,IAAI;wCAAC;wCACjD3B,UAAU,CAAC+B,QAAU/B,SAAS;gDAAE,GAAGD,MAAM;gDAAE0B,QAAQ;oDAAEE,MAAMI,MAAMJ,IAAI;oDAAEC,MAAM,CAAC;gDAAE;4CAAE;;mDAKxF,KAACzC;oCACCqB,OAAOT,OAAOiC,MAAM,IAAIrC;oCACxBK,UAAU,CAACiC,YACTjC,SAAS;4CACP,GAAGD,MAAM;4CACTiC,QAAQC;wCACV;;8CAIN,KAAC5C;oCACCiB,OAAM;oCACNC,uBACE,KAACrB;wCACCgC,MAAK;wCACLV,OAAOT,OAAOmC,KAAK,IAAI;wCACvBlC,UAAU,CAACkC,QAAUlC,SAAS;gDAAE,GAAGD,MAAM;gDAAEmC,OAAOA;4CAAM;;;8CAI9D,KAAC7C;oCACCiB,OAAM;oCACNC,uBACE,KAACxB;wCACCiC,SAASjB,OAAOG,KAAK,KAAKE,aAAaL,OAAOG,KAAK,KAAK;wCACxDF,UAAU,CAACU,IAAMV,SAAS;gDAAE,GAAGD,MAAM;gDAAEG,OAAOQ,EAAEC,MAAM,CAACK,OAAO,GAAGd,QAAQ;4CAAO;;;gCAIrFH,OAAOG,KAAK,KAAKE,aAAaL,OAAOG,KAAK,KAAK,wBAC9C,KAACb;oCACCiB,OAAM;oCACNC,uBACE,KAACvB;wCACC8C,MAAK;wCACLtB,OAAON;wCACPiC,WAAW;4CAAEC,WAAW;gDAAEC,KAAK;4CAAE;wCAAE;wCACnCrC,UAAU,CAACU;4CACTP,SAAS,CAACO,EAAEC,MAAM,CAACH,KAAK;4CACxBR,SAAS;gDAAE,GAAGD,MAAM;gDAAEG,OAAO,CAACQ,EAAEC,MAAM,CAACH,KAAK;4CAAC;wCAC/C;;;;;;;;0BAQd,KAAC1B;gBAAMsC,IAAI;oBAAEkB,IAAI;gBAAE;0BACjB,cAAA,KAAC/C;oBAAmBc,OAAM;8BACxB,cAAA,KAACX;wBACC6C,cAAcxC,OAAOwC,YAAY;wBACjCvC,UAAU,CAACuC,eAAiBvC,SAAS;gCAAE,GAAGD,MAAM;gCAAEwC;4BAAa;;;;;;AAM3E"}

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

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

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

@@ -0,0 +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"}

package/lib/{ColumnsEditor → components/ColumnsEditor}/ColumnsEditor.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { ColumnSettings } from '../table-model';
+import { ColumnSettings } from '../../models';
 export interface ColumnsEditorProps {
     columnSettings: ColumnSettings[];
     onChange: (columnOptions: ColumnSettings[]) => void;

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnsEditor/index.ts"],"names":[],"mappings":"AAaA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ColumnsEditor/index.ts"],"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\nexport * from './ColumnEditor';\nexport * from './ColumnEditorContainer';\nexport * from './ColumnsEditor';\n"],"names":[],"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,cAAc,iBAAiB;AAC/B,cAAc,0BAA0B;AACxC,cAAc,kBAAkB"}

package/lib/components/ConditionalPanel.d.ts

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

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

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

package/lib/{CellsEditor/CellEditor.js → components/ConditionalPanel.js}

@@ -1,185 +1,11 @@
-// 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.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconButton, MenuItem, Stack, TextField, Tooltip, Typography, Grid2 as Grid } from '@mui/material';
+import React from 'react';
+import { Button, Divider, IconButton, MenuItem, Stack, TextField, Tooltip, Typography, Grid2 as Grid } from '@mui/material';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
+import AddIcon from 'mdi-material-ui/Plus';
 import { OptionsColorPicker } from '@perses-dev/components';
-import PlusIcon from 'mdi-material-ui/Plus';
-function ConditionEditor({ condition, onChange, ...props }) {
-    if (condition.kind === 'Value') {
-        return /*#__PURE__*/ _jsx(Stack, {
-            gap: 1,
-            direction: "row",
-            ...props,
-            children: /*#__PURE__*/ _jsx(TextField, {
-                label: "Value",
-                placeholder: "Exact value",
-                value: condition.spec?.value ?? '',
-                onChange: (e)=>onChange({
-                        ...condition,
-                        spec: {
-                            value: e.target.value
-                        }
-                    }),
-                fullWidth: true
-            })
-        });
-    } else if (condition.kind === 'Range') {
-        return /*#__PURE__*/ _jsxs(Stack, {
-            gap: 1,
-            direction: "row",
-            ...props,
-            children: [
-                /*#__PURE__*/ _jsx(TextField, {
-                    label: "From",
-                    placeholder: "Start of range",
-                    value: condition.spec?.min ?? '',
-                    onChange: (e)=>onChange({
-                            ...condition,
-                            spec: {
-                                ...condition.spec,
-                                min: +e.target.value
-                            }
-                        }),
-                    fullWidth: true
-                }),
-                /*#__PURE__*/ _jsx(TextField, {
-                    label: "To",
-                    placeholder: "End of range (inclusive)",
-                    value: condition.spec?.max ?? '',
-                    onChange: (e)=>onChange({
-                            ...condition,
-                            spec: {
-                                ...condition.spec,
-                                max: +e.target.value
-                            }
-                        }),
-                    fullWidth: true
-                })
-            ]
-        });
-    } else if (condition.kind === 'Regex') {
-        return /*#__PURE__*/ _jsx(Stack, {
-            gap: 1,
-            direction: "row",
-            ...props,
-            children: /*#__PURE__*/ _jsx(TextField, {
-                label: "Regular Expression",
-                placeholder: "JavaScript regular expression",
-                value: condition.spec?.expr ?? '',
-                onChange: (e)=>onChange({
-                        ...condition,
-                        spec: {
-                            expr: e.target.value
-                        }
-                    }),
-                fullWidth: true
-            })
-        });
-    } else if (condition.kind === 'Misc') {
-        return /*#__PURE__*/ _jsx(Stack, {
-            gap: 1,
-            direction: "row",
-            ...props,
-            children: /*#__PURE__*/ _jsxs(TextField, {
-                select: true,
-                label: "Value",
-                value: condition.spec?.value ?? '',
-                onChange: (e)=>onChange({
-                        ...condition,
-                        spec: {
-                            value: e.target.value
-                        }
-                    }),
-                fullWidth: true,
-                children: [
-                    /*#__PURE__*/ _jsx(MenuItem, {
-                        value: "empty",
-                        children: /*#__PURE__*/ _jsxs(Stack, {
-                            children: [
-                                /*#__PURE__*/ _jsx(Typography, {
-                                    children: "Empty"
-                                }),
-                                /*#__PURE__*/ _jsx(Typography, {
-                                    variant: "caption",
-                                    children: "Matches empty string"
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx(MenuItem, {
-                        value: "null",
-                        children: /*#__PURE__*/ _jsxs(Stack, {
-                            children: [
-                                /*#__PURE__*/ _jsx(Typography, {
-                                    children: "Null"
-                                }),
-                                /*#__PURE__*/ _jsx(Typography, {
-                                    variant: "caption",
-                                    children: "Matches null or undefined"
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx(MenuItem, {
-                        value: "NaN",
-                        children: /*#__PURE__*/ _jsxs(Stack, {
-                            children: [
-                                /*#__PURE__*/ _jsx(Typography, {
-                                    children: "NaN"
-                                }),
-                                /*#__PURE__*/ _jsx(Typography, {
-                                    variant: "caption",
-                                    children: "Matches Not a Number value"
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx(MenuItem, {
-                        value: "true",
-                        children: /*#__PURE__*/ _jsxs(Stack, {
-                            children: [
-                                /*#__PURE__*/ _jsx(Typography, {
-                                    children: "True"
-                                }),
-                                /*#__PURE__*/ _jsx(Typography, {
-                                    variant: "caption",
-                                    children: "Matches true boolean"
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx(MenuItem, {
-                        value: "false",
-                        children: /*#__PURE__*/ _jsxs(Stack, {
-                            children: [
-                                /*#__PURE__*/ _jsx(Typography, {
-                                    children: "False"
-                                }),
-                                /*#__PURE__*/ _jsx(Typography, {
-                                    variant: "caption",
-                                    children: "Matches false boolean"
-                                })
-                            ]
-                        })
-                    })
-                ]
-            })
-        });
-    }
-    return null;
-}
-export function CellEditor({ cell, onChange, onDelete, ...props }) {
+import { renderConditionEditor } from '../models';
+export function ConditionalRule({ cell, onChange, onDelete, ...props }) {
     return /*#__PURE__*/ _jsxs(Grid, {
         container: true,
         spacing: 2,
@@ -267,14 +93,10 @@ export function CellEditor({ cell, onChange, onDelete, ...props }) {
                                 })
                             ]
                         }),
-                        /*#__PURE__*/ _jsx(ConditionEditor, {
-                            width: "100%",
-                            condition: cell.condition,
-                            onChange: (updatedCondition)=>onChange({
-                                    ...cell,
-                                    condition: updatedCondition
-                                })
-                        })
+                        renderConditionEditor(cell.condition, (updatedCondition)=>onChange({
+                                ...cell,
+                                condition: updatedCondition
+                            }), 'small')
                     ]
                 })
             }),
@@ -282,14 +104,46 @@ export function CellEditor({ cell, onChange, onDelete, ...props }) {
                 size: {
                     xs: 4
                 },
-                children: /*#__PURE__*/ _jsx(TextField, {
-                    label: "Display text",
-                    value: cell.text,
-                    onChange: (e)=>onChange({
-                            ...cell,
-                            text: e.target.value
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 1,
+                    children: [
+                        /*#__PURE__*/ _jsx(TextField, {
+                            label: "Display text",
+                            value: cell.text,
+                            onChange: (e)=>onChange({
+                                    ...cell,
+                                    text: e.target.value
+                                }),
+                            fullWidth: true,
+                            size: "small"
                         }),
-                    fullWidth: true
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            children: [
+                                /*#__PURE__*/ _jsx(TextField, {
+                                    label: "Prefix",
+                                    placeholder: "$",
+                                    value: cell.prefix ?? '',
+                                    onChange: (e)=>onChange({
+                                            ...cell,
+                                            prefix: e.target.value
+                                        }),
+                                    size: "small"
+                                }),
+                                /*#__PURE__*/ _jsx(TextField, {
+                                    label: "Suffix",
+                                    placeholder: "%",
+                                    value: cell.suffix ?? '',
+                                    onChange: (e)=>onChange({
+                                            ...cell,
+                                            suffix: e.target.value
+                                        }),
+                                    size: "small"
+                                })
+                            ]
+                        })
+                    ]
                 })
             }),
             /*#__PURE__*/ _jsx(Grid, {
@@ -316,7 +170,7 @@ export function CellEditor({ cell, onChange, onDelete, ...props }) {
                                 ...cell,
                                 textColor: '#000'
                             }),
-                        children: /*#__PURE__*/ _jsx(PlusIcon, {})
+                        children: /*#__PURE__*/ _jsx(AddIcon, {})
                     })
                 })
             }),
@@ -343,7 +197,7 @@ export function CellEditor({ cell, onChange, onDelete, ...props }) {
                                 ...cell,
                                 backgroundColor: '#000'
                             }),
-                        children: /*#__PURE__*/ _jsx(PlusIcon, {})
+                        children: /*#__PURE__*/ _jsx(AddIcon, {})
                     })
                 })
             }),
@@ -368,5 +222,113 @@ export function CellEditor({ cell, onChange, onDelete, ...props }) {
         ]
     });
 }
+export function ConditionalPanel({ cellSettings = [], onChange, addButtonText = 'Add Conditional Format' }) {
+    const handleCellChange = (index, updatedCell)=>{
+        const updatedCells = [
+            ...cellSettings
+        ];
+        updatedCells[index] = updatedCell;
+        onChange(updatedCells);
+    };
+    const handleCellDelete = (index)=>{
+        const updatedCells = [
+            ...cellSettings
+        ];
+        updatedCells.splice(index, 1);
+        onChange(updatedCells.length > 0 ? updatedCells : undefined);
+    };
+    const handleAddCell = ()=>{
+        const updatedCells = [
+            ...cellSettings
+        ];
+        updatedCells.push({
+            condition: {
+                kind: 'Value',
+                spec: {
+                    value: ''
+                }
+            }
+        });
+        onChange(updatedCells);
+    };
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 3,
+        sx: {
+            mt: 2
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Grid, {
+                container: true,
+                spacing: 3,
+                children: [
+                    /*#__PURE__*/ _jsx(Grid, {
+                        size: {
+                            xs: 5
+                        },
+                        children: /*#__PURE__*/ _jsx(Typography, {
+                            variant: "subtitle1",
+                            children: "Condition"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Grid, {
+                        size: {
+                            xs: 4
+                        },
+                        children: /*#__PURE__*/ _jsx(Typography, {
+                            variant: "subtitle1",
+                            children: "Display Text"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Grid, {
+                        size: {
+                            xs: 1
+                        },
+                        textAlign: "center",
+                        children: /*#__PURE__*/ _jsx(Typography, {
+                            variant: "subtitle1",
+                            children: "Color"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Grid, {
+                        size: {
+                            xs: 1
+                        },
+                        textAlign: "center",
+                        children: /*#__PURE__*/ _jsx(Typography, {
+                            variant: "subtitle1",
+                            children: "Background"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Grid, {
+                        size: {
+                            xs: 1
+                        }
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Stack, {
+                gap: 1.5,
+                divider: /*#__PURE__*/ _jsx(Divider, {
+                    flexItem: true,
+                    orientation: "horizontal"
+                }),
+                children: cellSettings.map((cell, i)=>/*#__PURE__*/ _jsx(ConditionalRule, {
+                        cell: cell,
+                        onChange: (updatedCell)=>handleCellChange(i, updatedCell),
+                        onDelete: ()=>handleCellDelete(i)
+                    }, i))
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                variant: "outlined",
+                startIcon: /*#__PURE__*/ _jsx(AddIcon, {}),
+                sx: {
+                    marginTop: 1
+                },
+                onClick: handleAddCell,
+                children: addButtonText
+            })
+        ]
+    });
+}
 
-//# sourceMappingURL=CellEditor.js.map
+//# sourceMappingURL=ConditionalPanel.js.map

package/lib/components/ConditionalPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ConditionalPanel.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Button,\n  Divider,\n  Grid2Props as GridProps,\n  IconButton,\n  MenuItem,\n  Stack,\n  TextField,\n  Tooltip,\n  Typography,\n  Grid2 as Grid,\n} from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { OptionsColorPicker } from '@perses-dev/components';\nimport { CellSettings, renderConditionEditor } from '../models';\n\n// Individual conditional formatting rule component\nexport interface ConditionalRuleProps extends Omit<GridProps, 'onChange'> {\n  cell: CellSettings;\n  onChange: (cell: CellSettings) => void;\n  onDelete: () => void;\n}\n\nexport function ConditionalRule({ cell, onChange, onDelete, ...props }: ConditionalRuleProps) {\n  return (\n    <Grid container spacing={2} {...props}>\n      <Grid size={{ xs: 5 }}>\n        <Stack direction=\"row\" gap={1} width=\"100%\">\n          <TextField\n            select\n            label=\"Type\"\n            value={cell.condition.kind}\n            onChange={(e) => onChange({ ...cell, condition: { kind: e.target.value } } as CellSettings)}\n            required\n            sx={{ width: '120px' }}\n          >\n            <MenuItem value=\"Value\">\n              <Stack>\n                <Typography>Value</Typography>\n                {cell.condition.kind !== 'Value' && (\n                  <Typography variant=\"caption\">Matches an exact text value</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Range\">\n              <Stack>\n                <Typography>Range</Typography>\n                {cell.condition.kind !== 'Range' && (\n                  <Typography variant=\"caption\">Matches against a numerical range</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Regex\">\n              <Stack>\n                <Typography>Regex</Typography>\n                {cell.condition.kind !== 'Regex' && (\n                  <Typography variant=\"caption\">Matches against a regular expression</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n            <MenuItem value=\"Misc\">\n              <Stack>\n                <Typography>Misc</Typography>\n                {cell.condition.kind !== 'Misc' && (\n                  <Typography variant=\"caption\">Matches against empty, null and NaN values</Typography>\n                )}\n              </Stack>\n            </MenuItem>\n          </TextField>\n          {renderConditionEditor(\n            cell.condition,\n            (updatedCondition) => onChange({ ...cell, condition: updatedCondition }),\n            'small'\n          )}\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 4 }}>\n        <Stack spacing={1}>\n          <TextField\n            label=\"Display text\"\n            value={cell.text}\n            onChange={(e) => onChange({ ...cell, text: e.target.value })}\n            fullWidth\n            size=\"small\"\n          />\n          <Stack direction=\"row\" spacing={1}>\n            <TextField\n              label=\"Prefix\"\n              placeholder=\"$\"\n              value={cell.prefix ?? ''}\n              onChange={(e) => onChange({ ...cell, prefix: e.target.value })}\n              size=\"small\"\n            />\n            <TextField\n              label=\"Suffix\"\n              placeholder=\"%\"\n              value={cell.suffix ?? ''}\n              onChange={(e) => onChange({ ...cell, suffix: e.target.value })}\n              size=\"small\"\n            />\n          </Stack>\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 1 }}>\n        <Stack direction=\"row\" justifyContent=\"center\" gap={1}>\n          {cell.textColor ? (\n            <OptionsColorPicker\n              label=\"Text Color\"\n              color={cell.textColor ?? '#000'}\n              onColorChange={(color) => onChange({ ...cell, textColor: color } as CellSettings)}\n              onClear={() => onChange({ ...cell, textColor: undefined } as CellSettings)}\n            />\n          ) : (\n            <IconButton onClick={() => onChange({ ...cell, textColor: '#000' })}>\n              <AddIcon />\n            </IconButton>\n          )}\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 1 }}>\n        <Stack direction=\"row\" justifyContent=\"center\">\n          {cell.backgroundColor ? (\n            <OptionsColorPicker\n              label=\"Background Color\"\n              color={cell.backgroundColor ?? '#fff'}\n              onColorChange={(color) => onChange({ ...cell, backgroundColor: color } as CellSettings)}\n              onClear={() => onChange({ ...cell, backgroundColor: undefined } as CellSettings)}\n            />\n          ) : (\n            <IconButton onClick={() => onChange({ ...cell, backgroundColor: '#000' })}>\n              <AddIcon />\n            </IconButton>\n          )}\n        </Stack>\n      </Grid>\n      <Grid size={{ xs: 1 }} textAlign=\"end\">\n        <Tooltip title=\"Remove cell settings\" placement=\"top\">\n          <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={onDelete} key=\"delete-cell-button\">\n            <DeleteIcon />\n          </IconButton>\n        </Tooltip>\n      </Grid>\n    </Grid>\n  );\n}\n\n// Complete conditional formatting panel with headers and list management\nexport interface ConditionalPanelProps {\n  cellSettings?: CellSettings[];\n  onChange: (cellSettings: CellSettings[] | undefined) => void;\n  addButtonText?: string;\n}\n\nexport function ConditionalPanel({\n  cellSettings = [],\n  onChange,\n  addButtonText = 'Add Conditional Format',\n}: ConditionalPanelProps) {\n  const handleCellChange = (index: number, updatedCell: CellSettings) => {\n    const updatedCells = [...cellSettings];\n    updatedCells[index] = updatedCell;\n    onChange(updatedCells);\n  };\n\n  const handleCellDelete = (index: number) => {\n    const updatedCells = [...cellSettings];\n    updatedCells.splice(index, 1);\n    onChange(updatedCells.length > 0 ? updatedCells : undefined);\n  };\n\n  const handleAddCell = () => {\n    const updatedCells = [...cellSettings];\n    updatedCells.push({ condition: { kind: 'Value', spec: { value: '' } } });\n    onChange(updatedCells);\n  };\n\n  return (\n    <Stack spacing={3} sx={{ mt: 2 }}>\n      <Grid container spacing={3}>\n        <Grid size={{ xs: 5 }}>\n          <Typography variant=\"subtitle1\">Condition</Typography>\n        </Grid>\n        <Grid size={{ xs: 4 }}>\n          <Typography variant=\"subtitle1\">Display Text</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }} textAlign=\"center\">\n          <Typography variant=\"subtitle1\">Color</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }} textAlign=\"center\">\n          <Typography variant=\"subtitle1\">Background</Typography>\n        </Grid>\n        <Grid size={{ xs: 1 }}></Grid>\n      </Grid>\n      <Stack gap={1.5} divider={<Divider flexItem orientation=\"horizontal\" />}>\n        {cellSettings.map((cell, i) => (\n          <ConditionalRule\n            key={i}\n            cell={cell}\n            onChange={(updatedCell: CellSettings) => handleCellChange(i, updatedCell)}\n            onDelete={() => handleCellDelete(i)}\n          />\n        ))}\n      </Stack>\n      <Button variant=\"outlined\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleAddCell}>\n        {addButtonText}\n      </Button>\n    </Stack>\n  );\n}\n"],"names":["React","Button","Divider","IconButton","MenuItem","Stack","TextField","Tooltip","Typography","Grid2","Grid","DeleteIcon","AddIcon","OptionsColorPicker","renderConditionEditor","ConditionalRule","cell","onChange","onDelete","props","container","spacing","size","xs","direction","gap","width","select","label","value","condition","kind","e","target","required","sx","variant","updatedCondition","text","fullWidth","placeholder","prefix","suffix","justifyContent","textColor","color","onColorChange","onClear","undefined","onClick","backgroundColor","textAlign","title","placement","marginLeft","ConditionalPanel","cellSettings","addButtonText","handleCellChange","index","updatedCell","updatedCells","handleCellDelete","splice","length","handleAddCell","push","spec","mt","divider","flexItem","orientation","map","i","startIcon","marginTop"],"mappings":"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"}

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

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

package/lib/components/EmbeddedPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/EmbeddedPanel.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PanelData } from '@perses-dev/plugin-system';\nimport { QueryDataType, UnknownSpec } from '@perses-dev/core';\nimport { PanelPluginLoader } from '@perses-dev/dashboards';\nimport useResizeObserver from 'use-resize-observer';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\n\ninterface EmbeddedPanelProps {\n  kind: string;\n  spec: UnknownSpec;\n  queryResults: Array<PanelData<QueryDataType>>;\n}\n\nexport function EmbeddedPanel({ kind, spec, queryResults }: EmbeddedPanelProps) {\n  const { ref, width = 1, height = 1 } = useResizeObserver<HTMLDivElement>();\n  return (\n    <div ref={ref} style={{ height: '100%' }}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        <PanelPluginLoader kind={kind} contentDimensions={{ width, height }} spec={spec} queryResults={queryResults} />\n      </ErrorBoundary>\n    </div>\n  );\n}\n"],"names":["PanelPluginLoader","useResizeObserver","ErrorAlert","ErrorBoundary","EmbeddedPanel","kind","spec","queryResults","ref","width","height","div","style","FallbackComponent","contentDimensions"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAIjC,SAASA,iBAAiB,QAAQ,yBAAyB;AAC3D,OAAOC,uBAAuB,sBAAsB;AACpD,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AAQnE,OAAO,SAASC,cAAc,EAAEC,IAAI,EAAEC,IAAI,EAAEC,YAAY,EAAsB;IAC5E,MAAM,EAAEC,GAAG,EAAEC,QAAQ,CAAC,EAAEC,SAAS,CAAC,EAAE,GAAGT;IACvC,qBACE,KAACU;QAAIH,KAAKA;QAAKI,OAAO;YAAEF,QAAQ;QAAO;kBACrC,cAAA,KAACP;YAAcU,mBAAmBX;sBAChC,cAAA,KAACF;gBAAkBK,MAAMA;gBAAMS,mBAAmB;oBAAEL;oBAAOC;gBAAO;gBAAGJ,MAAMA;gBAAMC,cAAcA;;;;AAIvG"}

package/lib/{TableCellsEditor.d.ts → components/TableCellsEditor.d.ts}

@@ -1,6 +1,6 @@
 import { OptionsEditorProps } from '@perses-dev/plugin-system';
 import { ReactElement } from 'react';
-import { TableOptions } from './table-model';
+import { TableOptions } from '../models';
 export type TableCellsEditorProps = OptionsEditorProps<TableOptions>;
 export declare function TableCellsEditor({ onChange, value }: TableCellsEditorProps): ReactElement;
 //# sourceMappingURL=TableCellsEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/TableCellsEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAgB,YAAY,EAAE,MAAM,WAAW,CAAC;AAGvD,MAAM,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;AAErE,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,qBAAqB,GAAG,YAAY,CAMzF"}

package/lib/components/TableCellsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/TableCellsEditor.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 { OptionsEditorProps } from '@perses-dev/plugin-system';\nimport { ReactElement } from 'react';\nimport { CellSettings, TableOptions } from '../models';\nimport { CellsEditor } from './CellsEditor';\n\nexport type TableCellsEditorProps = OptionsEditorProps<TableOptions>;\n\nexport function TableCellsEditor({ onChange, value }: TableCellsEditorProps): ReactElement {\n  function handleCellsChange(cells: CellSettings[]): void {\n    onChange({ ...value, cellSettings: cells });\n  }\n\n  return <CellsEditor cellSettings={value.cellSettings ?? []} onChange={handleCellsChange} />;\n}\n"],"names":["CellsEditor","TableCellsEditor","onChange","value","handleCellsChange","cells","cellSettings"],"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;;AAKjC,SAASA,WAAW,QAAQ,gBAAgB;AAI5C,OAAO,SAASC,iBAAiB,EAAEC,QAAQ,EAAEC,KAAK,EAAyB;IACzE,SAASC,kBAAkBC,KAAqB;QAC9CH,SAAS;YAAE,GAAGC,KAAK;YAAEG,cAAcD;QAAM;IAC3C;IAEA,qBAAO,KAACL;QAAYM,cAAcH,MAAMG,YAAY,IAAI,EAAE;QAAEJ,UAAUE;;AACxE"}

package/lib/{TableColumnsEditor.d.ts → components/TableColumnsEditor.d.ts}

@@ -1,6 +1,6 @@
 import { OptionsEditorProps } from '@perses-dev/plugin-system';
 import { ReactElement } from 'react';
-import { TableOptions } from './table-model';
+import { TableOptions } from '../models';
 export type TableColumnsEditorProps = OptionsEditorProps<TableOptions>;
 export declare function TableColumnsEditor({ onChange, value }: TableColumnsEditorProps): ReactElement;
 //# sourceMappingURL=TableColumnsEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableColumnsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/TableColumnsEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAkB,YAAY,EAAE,MAAM,WAAW,CAAC;AAGzD,MAAM,MAAM,uBAAuB,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;AAEvE,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,uBAAuB,GAAG,YAAY,CAM7F"}

package/lib/components/TableColumnsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/TableColumnsEditor.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 { OptionsEditorProps } from '@perses-dev/plugin-system';\nimport { ReactElement } from 'react';\nimport { ColumnSettings, TableOptions } from '../models';\nimport { ColumnsEditor } from './ColumnsEditor';\n\nexport type TableColumnsEditorProps = OptionsEditorProps<TableOptions>;\n\nexport function TableColumnsEditor({ onChange, value }: TableColumnsEditorProps): ReactElement {\n  function handleColumnsChange(columns: ColumnSettings[]): void {\n    onChange({ ...value, columnSettings: columns });\n  }\n\n  return <ColumnsEditor columnSettings={value.columnSettings ?? []} onChange={handleColumnsChange} />;\n}\n"],"names":["ColumnsEditor","TableColumnsEditor","onChange","value","handleColumnsChange","columns","columnSettings"],"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;;AAKjC,SAASA,aAAa,QAAQ,kBAAkB;AAIhD,OAAO,SAASC,mBAAmB,EAAEC,QAAQ,EAAEC,KAAK,EAA2B;IAC7E,SAASC,oBAAoBC,OAAyB;QACpDH,SAAS;YAAE,GAAGC,KAAK;YAAEG,gBAAgBD;QAAQ;IAC/C;IAEA,qBAAO,KAACL;QAAcM,gBAAgBH,MAAMG,cAAc,IAAI,EAAE;QAAEJ,UAAUE;;AAC9E"}

package/lib/{TablePanel.d.ts → components/TablePanel.d.ts}

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

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

@@ -0,0 +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"}