@perses-dev/table-plugin 0.9.0 → 0.10.1

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"}