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

package/lib/components/ColumnsEditor/ColumnEditor.js

@@ -11,12 +11,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Button, ButtonGroup, Stack, Switch, TextField } from '@mui/material';
+import { Button, ButtonGroup, Stack, Switch, TextField, Typography } from '@mui/material';
 import { useState } from 'react';
 import { AlignSelector, FormatControls, OptionsEditorColumn, OptionsEditorControl, OptionsEditorGrid, OptionsEditorGroup, SortSelectorButtons } from '@perses-dev/components';
 import { PluginKindSelect } from '@perses-dev/plugin-system';
 import { ConditionalPanel } from '../ConditionalPanel';
 import { DataLinkEditor } from './DataLinkEditorDialog';
+import { EmbeddedPanelOptionsEditor } from './EmbeddedPanelOptionsEditor';
 const DEFAULT_FORMAT = {
     unit: 'decimal',
     shortValues: true
@@ -115,39 +116,53 @@ export function ColumnEditor({ column, onChange, ...others }) {
                                     })
                                 }),
                                 /*#__PURE__*/ _jsx(OptionsEditorControl, {
-                                    label: "Display",
-                                    control: /*#__PURE__*/ _jsxs(ButtonGroup, {
-                                        "aria-label": "Display",
-                                        size: "small",
+                                    label: "Cell display",
+                                    control: /*#__PURE__*/ _jsxs(Stack, {
+                                        spacing: 1,
                                         children: [
-                                            /*#__PURE__*/ _jsx(Button, {
-                                                variant: !column.plugin ? 'contained' : 'outlined',
-                                                onClick: ()=>onChange({
-                                                        ...column,
-                                                        plugin: undefined
+                                            /*#__PURE__*/ _jsxs(ButtonGroup, {
+                                                "aria-label": "Cell display",
+                                                size: "small",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Button, {
+                                                        variant: !column.plugin ? 'contained' : 'outlined',
+                                                        onClick: ()=>onChange({
+                                                                ...column,
+                                                                plugin: undefined
+                                                            }),
+                                                        children: "Text"
                                                     }),
-                                                children: "Text"
+                                                    /*#__PURE__*/ _jsx(Button, {
+                                                        variant: column.plugin ? 'contained' : 'outlined',
+                                                        onClick: ()=>onChange({
+                                                                ...column,
+                                                                plugin: {
+                                                                    kind: 'GaugeChart',
+                                                                    spec: {}
+                                                                }
+                                                            }),
+                                                        children: "Visualization"
+                                                    })
+                                                ]
                                             }),
-                                            /*#__PURE__*/ _jsx(Button, {
-                                                variant: column.plugin ? 'contained' : 'outlined',
-                                                onClick: ()=>onChange({
-                                                        ...column,
-                                                        plugin: {
-                                                            kind: 'StatChart',
-                                                            spec: {}
-                                                        }
-                                                    }),
-                                                children: "Embedded Panel"
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                color: "text.secondary",
+                                                sx: {
+                                                    maxWidth: 360
+                                                },
+                                                children: "Visualizations reuse panel settings (thresholds, units, colors). Text mode uses value formatting below."
                                             })
                                         ]
                                     })
                                 }),
                                 column.plugin ? /*#__PURE__*/ _jsx(OptionsEditorControl, {
-                                    label: "Panel Type",
+                                    label: "Visualization type",
                                     control: /*#__PURE__*/ _jsx(PluginKindSelect, {
                                         pluginTypes: [
                                             'Panel'
                                         ],
+                                        size: "small",
                                         value: {
                                             type: 'Panel',
                                             kind: column.plugin.kind
@@ -221,9 +236,32 @@ export function ColumnEditor({ column, onChange, ...others }) {
                     })
                 ]
             }),
+            column.plugin?.kind === 'GaugeChart' && /*#__PURE__*/ _jsx(Stack, {
+                sx: {
+                    px: 8,
+                    mt: 4,
+                    width: '100%'
+                },
+                spacing: 2,
+                children: /*#__PURE__*/ _jsx(OptionsEditorGroup, {
+                    title: "Visualization settings",
+                    children: /*#__PURE__*/ _jsx(EmbeddedPanelOptionsEditor, {
+                        kind: "GaugeChart",
+                        spec: column.plugin.spec,
+                        onChange: (nextSpec)=>onChange({
+                                ...column,
+                                plugin: {
+                                    kind: 'GaugeChart',
+                                    spec: nextSpec
+                                }
+                            })
+                    })
+                })
+            }),
             /*#__PURE__*/ _jsx(Stack, {
                 sx: {
-                    px: 8
+                    px: 8,
+                    mt: column.plugin?.kind === 'GaugeChart' ? 3 : 0
                 },
                 children: /*#__PURE__*/ _jsx(OptionsEditorGroup, {
                     title: "Conditional Cell Format",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ColumnsEditor/ColumnEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Button, ButtonGroup, Stack, StackProps, Switch, TextField } 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';\n\nimport { ColumnSettings } from '../../models';\nimport { ConditionalPanel } from '../ConditionalPanel';\nimport { DataLinkEditor } from './DataLinkEditorDialog';\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        <OptionsEditorColumn>\n          <OptionsEditorGroup title=\"Link\">\n            <DataLinkEditor column={column} onChange={onChange} />\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","DataLinkEditor","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":"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"}
+{"version":3,"sources":["../../../../src/components/ColumnsEditor/ColumnEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Button, ButtonGroup, Stack, StackProps, Switch, TextField, Typography } from '@mui/material';\nimport { ReactElement, useState } from 'react';\nimport {\n  AlignSelector,\n  FormatControls,\n  FormatOptions,\n  OptionsEditorColumn,\n  OptionsEditorControl,\n  OptionsEditorGrid,\n  OptionsEditorGroup,\n  SortSelectorButtons,\n} from '@perses-dev/components';\nimport { PluginKindSelect } from '@perses-dev/plugin-system';\n\nimport { ColumnSettings } from '../../models';\nimport { ConditionalPanel } from '../ConditionalPanel';\nimport { DataLinkEditor } from './DataLinkEditorDialog';\nimport { EmbeddedPanelOptionsEditor } from './EmbeddedPanelOptionsEditor';\n\nconst DEFAULT_FORMAT: FormatOptions = {\n  unit: 'decimal',\n  shortValues: true,\n};\n\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\nexport interface ColumnEditorProps extends Omit<StackProps, OmittedMuiProps> {\n  column: ColumnSettings;\n  onChange: (column: ColumnSettings) => void;\n}\n\nexport function ColumnEditor({ column, onChange, ...others }: ColumnEditorProps): ReactElement {\n  const [width, setWidth] = useState<number>(\n    column.width === undefined || column.width === 'auto' ? 100 : column.width\n  );\n\n  return (\n    <Stack {...others}>\n      <OptionsEditorGrid>\n        <OptionsEditorColumn>\n          <OptionsEditorGroup title=\"Column\">\n            <OptionsEditorControl\n              label=\"Name*\"\n              control={\n                <TextField\n                  value={column.name}\n                  onChange={(e) => onChange({ ...column, name: e.target.value })}\n                  required\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Header\"\n              control={\n                <TextField\n                  value={column.header ?? ''}\n                  onChange={(e) => onChange({ ...column, header: e.target.value ? e.target.value : undefined })}\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Header Tooltip\"\n              control={\n                <TextField\n                  value={column.headerDescription ?? ''}\n                  onChange={(e) =>\n                    onChange({ ...column, headerDescription: e.target.value ? e.target.value : undefined })\n                  }\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Cell Tooltip\"\n              control={\n                <TextField\n                  value={column.cellDescription ?? ''}\n                  onChange={(e) =>\n                    onChange({ ...column, cellDescription: e.target.value ? e.target.value : undefined })\n                  }\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Enable sorting\"\n              control={\n                <Switch\n                  checked={column.enableSorting ?? false}\n                  onChange={(e) => onChange({ ...column, enableSorting: e.target.checked })}\n                />\n              }\n            />\n            {column.enableSorting && (\n              <OptionsEditorControl\n                label=\"Default Sort\"\n                control={\n                  <SortSelectorButtons\n                    size=\"medium\"\n                    value={column.sort}\n                    sx={{\n                      margin: 0.5,\n                    }}\n                    onChange={(sort) => onChange({ ...column, sort: sort })}\n                  />\n                }\n              />\n            )}\n          </OptionsEditorGroup>\n        </OptionsEditorColumn>\n\n        <OptionsEditorColumn>\n          <OptionsEditorGroup title=\"Visual\">\n            <OptionsEditorControl\n              label=\"Show column\"\n              control={\n                <Switch\n                  checked={!(column.hide ?? false)}\n                  onChange={(e) => onChange({ ...column, hide: !e.target.checked })}\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Cell display\"\n              control={\n                <Stack spacing={1}>\n                  <ButtonGroup aria-label=\"Cell display\" size=\"small\">\n                    <Button\n                      variant={!column.plugin ? 'contained' : 'outlined'}\n                      onClick={() => onChange({ ...column, plugin: undefined })}\n                    >\n                      Text\n                    </Button>\n                    <Button\n                      variant={column.plugin ? 'contained' : 'outlined'}\n                      onClick={() => onChange({ ...column, plugin: { kind: 'GaugeChart', spec: {} } })}\n                    >\n                      Visualization\n                    </Button>\n                  </ButtonGroup>\n                  <Typography variant=\"caption\" color=\"text.secondary\" sx={{ maxWidth: 360 }}>\n                    Visualizations reuse panel settings (thresholds, units, colors). Text mode uses value formatting\n                    below.\n                  </Typography>\n                </Stack>\n              }\n            />\n            {column.plugin ? (\n              <OptionsEditorControl\n                label=\"Visualization type\"\n                control={\n                  <PluginKindSelect\n                    pluginTypes={['Panel']}\n                    size=\"small\"\n                    value={{ type: 'Panel', kind: column.plugin.kind }}\n                    onChange={(event) => onChange({ ...column, plugin: { kind: event.kind, spec: {} } })}\n                  />\n                }\n              />\n            ) : (\n              <FormatControls\n                value={column.format ?? DEFAULT_FORMAT}\n                onChange={(newFormat): void =>\n                  onChange({\n                    ...column,\n                    format: newFormat,\n                  })\n                }\n              />\n            )}\n            <OptionsEditorControl\n              label=\"Alignment\"\n              control={\n                <AlignSelector\n                  size=\"small\"\n                  value={column.align ?? 'left'}\n                  onChange={(align) => onChange({ ...column, align: align })}\n                />\n              }\n            />\n            <OptionsEditorControl\n              label=\"Custom width\"\n              control={\n                <Switch\n                  checked={column.width !== undefined && column.width !== 'auto'}\n                  onChange={(e) => onChange({ ...column, width: e.target.checked ? width : 'auto' })}\n                />\n              }\n            />\n            {column.width !== undefined && column.width !== 'auto' && (\n              <OptionsEditorControl\n                label=\"Width\"\n                control={\n                  <TextField\n                    type=\"number\"\n                    value={width}\n                    slotProps={{ htmlInput: { min: 1 } }}\n                    onChange={(e) => {\n                      setWidth(+e.target.value);\n                      onChange({ ...column, width: +e.target.value });\n                    }}\n                  />\n                }\n              />\n            )}\n          </OptionsEditorGroup>\n        </OptionsEditorColumn>\n        <OptionsEditorColumn>\n          <OptionsEditorGroup title=\"Link\">\n            <DataLinkEditor column={column} onChange={onChange} />\n          </OptionsEditorGroup>\n        </OptionsEditorColumn>\n      </OptionsEditorGrid>\n      {column.plugin?.kind === 'GaugeChart' && (\n        <Stack sx={{ px: 8, mt: 4, width: '100%' }} spacing={2}>\n          <OptionsEditorGroup title=\"Visualization settings\">\n            <EmbeddedPanelOptionsEditor\n              kind=\"GaugeChart\"\n              spec={column.plugin.spec}\n              onChange={(nextSpec) =>\n                onChange({\n                  ...column,\n                  plugin: { kind: 'GaugeChart', spec: nextSpec },\n                })\n              }\n            />\n          </OptionsEditorGroup>\n        </Stack>\n      )}\n      <Stack sx={{ px: 8, mt: column.plugin?.kind === 'GaugeChart' ? 3 : 0 }}>\n        <OptionsEditorGroup title=\"Conditional Cell Format\">\n          <ConditionalPanel\n            cellSettings={column.cellSettings}\n            onChange={(cellSettings) => onChange({ ...column, cellSettings })}\n          />\n        </OptionsEditorGroup>\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Button","ButtonGroup","Stack","Switch","TextField","Typography","useState","AlignSelector","FormatControls","OptionsEditorColumn","OptionsEditorControl","OptionsEditorGrid","OptionsEditorGroup","SortSelectorButtons","PluginKindSelect","ConditionalPanel","DataLinkEditor","EmbeddedPanelOptionsEditor","DEFAULT_FORMAT","unit","shortValues","ColumnEditor","column","onChange","others","width","setWidth","undefined","title","label","control","value","name","e","target","required","header","headerDescription","cellDescription","checked","enableSorting","size","sort","sx","margin","hide","spacing","aria-label","variant","plugin","onClick","kind","spec","color","maxWidth","pluginTypes","type","event","format","newFormat","align","slotProps","htmlInput","min","px","mt","nextSpec","cellSettings"],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+import { UnknownSpec } from '@perses-dev/spec';
+import { ReactElement } from 'react';
+export interface EmbeddedPanelOptionsEditorProps {
+    kind: string;
+    spec: UnknownSpec;
+    onChange: (next: UnknownSpec) => void;
+}
+/**
+ * Renders a panel plugin's settings tabs (thresholds, units, colors, …).
+ * Used for embedded GaugeChart columns only; other embedded panel kinds use defaults.
+ */
+export declare function EmbeddedPanelOptionsEditor({ kind, spec, onChange }: EmbeddedPanelOptionsEditorProps): ReactElement;
+//# sourceMappingURL=EmbeddedPanelOptionsEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmbeddedPanelOptionsEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnsEditor/EmbeddedPanelOptionsEditor.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,YAAY,EAA8B,MAAM,OAAO,CAAC;AAEjE,MAAM,WAAW,+BAA+B;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CACvC;AAaD;;;GAGG;AACH,wBAAgB,0BAA0B,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,+BAA+B,GAAG,YAAY,CAyElH"}

package/lib/components/ColumnsEditor/EmbeddedPanelOptionsEditor.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// 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 { CircularProgress, Stack, Typography } from '@mui/material';
+import { OptionsEditorTabs, usePlugin } from '@perses-dev/plugin-system';
+import merge from 'lodash/merge';
+import { useEffect, useMemo, useRef } from 'react';
+function isSpecEmpty(spec) {
+    if (spec === undefined || spec === null) return true;
+    if (typeof spec !== 'object') return false;
+    return Object.keys(spec).length === 0;
+}
+function mergeWithPluginDefaults(plugin, spec) {
+    const initial = plugin.createInitialOptions() ?? {};
+    return merge({}, initial, spec ?? {});
+}
+/**
+ * Renders a panel plugin's settings tabs (thresholds, units, colors, …).
+ * Used for embedded GaugeChart columns only; other embedded panel kinds use defaults.
+ */ export function EmbeddedPanelOptionsEditor({ kind, spec, onChange }) {
+    const { data: plugin, isLoading, isError, error } = usePlugin('Panel', kind);
+    const panelPlugin = plugin;
+    const mergedSpec = useMemo(()=>{
+        if (!panelPlugin) {
+            return spec;
+        }
+        return mergeWithPluginDefaults(panelPlugin, spec);
+    }, [
+        panelPlugin,
+        spec
+    ]);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    // Persist plugin defaults when the column still has an empty spec (e.g. after switching panel kind).
+    useEffect(()=>{
+        if (!panelPlugin || !isSpecEmpty(spec)) {
+            return;
+        }
+        onChangeRef.current(mergeWithPluginDefaults(panelPlugin, spec));
+    }, [
+        panelPlugin,
+        kind,
+        spec
+    ]);
+    if (isLoading) {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            direction: "row",
+            alignItems: "center",
+            spacing: 1,
+            sx: {
+                py: 1
+            },
+            children: [
+                /*#__PURE__*/ _jsx(CircularProgress, {
+                    size: 22
+                }),
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    color: "text.secondary",
+                    children: "Loading panel settings…"
+                })
+            ]
+        });
+    }
+    if (isError || !plugin) {
+        return /*#__PURE__*/ _jsx(Typography, {
+            variant: "body2",
+            color: "error",
+            children: error?.message ?? 'Could not load panel plugin.'
+        });
+    }
+    const loadedPlugin = plugin;
+    const editorTabs = loadedPlugin.panelOptionsEditorComponents ?? [];
+    if (editorTabs.length === 0) {
+        return /*#__PURE__*/ _jsx(Typography, {
+            variant: "body2",
+            color: "text.secondary",
+            children: "This visualization has no editable settings."
+        });
+    }
+    return /*#__PURE__*/ _jsx(Stack, {
+        spacing: 2.5,
+        sx: {
+            width: '100%',
+            py: 1
+        },
+        children: /*#__PURE__*/ _jsx(OptionsEditorTabs, {
+            tabs: editorTabs.map((tab)=>{
+                const Content = tab.content;
+                return {
+                    label: tab.label,
+                    content: /*#__PURE__*/ _jsx(Content, {
+                        value: mergedSpec,
+                        onChange: (next)=>{
+                            onChange(next);
+                        }
+                    })
+                };
+            })
+        })
+    });
+}
+
+//# sourceMappingURL=EmbeddedPanelOptionsEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ColumnsEditor/EmbeddedPanelOptionsEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { CircularProgress, Stack, Typography } from '@mui/material';\nimport { OptionsEditorTabs, PanelPlugin, usePlugin } from '@perses-dev/plugin-system';\nimport { UnknownSpec } from '@perses-dev/spec';\nimport merge from 'lodash/merge';\nimport { ReactElement, useEffect, useMemo, useRef } from 'react';\n\nexport interface EmbeddedPanelOptionsEditorProps {\n  kind: string;\n  spec: UnknownSpec;\n  onChange: (next: UnknownSpec) => void;\n}\n\nfunction isSpecEmpty(spec: UnknownSpec | undefined): boolean {\n  if (spec === undefined || spec === null) return true;\n  if (typeof spec !== 'object') return false;\n  return Object.keys(spec as object).length === 0;\n}\n\nfunction mergeWithPluginDefaults(plugin: PanelPlugin, spec: UnknownSpec | undefined): UnknownSpec {\n  const initial = plugin.createInitialOptions() ?? {};\n  return merge({}, initial, spec ?? {}) as UnknownSpec;\n}\n\n/**\n * Renders a panel plugin's settings tabs (thresholds, units, colors, …).\n * Used for embedded GaugeChart columns only; other embedded panel kinds use defaults.\n */\nexport function EmbeddedPanelOptionsEditor({ kind, spec, onChange }: EmbeddedPanelOptionsEditorProps): ReactElement {\n  const { data: plugin, isLoading, isError, error } = usePlugin('Panel', kind);\n\n  const panelPlugin = plugin as PanelPlugin | undefined;\n\n  const mergedSpec = useMemo(() => {\n    if (!panelPlugin) {\n      return spec;\n    }\n    return mergeWithPluginDefaults(panelPlugin, spec);\n  }, [panelPlugin, spec]);\n\n  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n\n  // Persist plugin defaults when the column still has an empty spec (e.g. after switching panel kind).\n  useEffect(() => {\n    if (!panelPlugin || !isSpecEmpty(spec)) {\n      return;\n    }\n    onChangeRef.current(mergeWithPluginDefaults(panelPlugin, spec));\n  }, [panelPlugin, kind, spec]);\n\n  if (isLoading) {\n    return (\n      <Stack direction=\"row\" alignItems=\"center\" spacing={1} sx={{ py: 1 }}>\n        <CircularProgress size={22} />\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          Loading panel settings…\n        </Typography>\n      </Stack>\n    );\n  }\n\n  if (isError || !plugin) {\n    return (\n      <Typography variant=\"body2\" color=\"error\">\n        {error?.message ?? 'Could not load panel plugin.'}\n      </Typography>\n    );\n  }\n\n  const loadedPlugin = plugin as PanelPlugin;\n  const editorTabs = loadedPlugin.panelOptionsEditorComponents ?? [];\n\n  if (editorTabs.length === 0) {\n    return (\n      <Typography variant=\"body2\" color=\"text.secondary\">\n        This visualization has no editable settings.\n      </Typography>\n    );\n  }\n\n  return (\n    <Stack spacing={2.5} sx={{ width: '100%', py: 1 }}>\n      <OptionsEditorTabs\n        tabs={editorTabs.map((tab) => {\n          const Content = tab.content;\n          return {\n            label: tab.label,\n            content: (\n              <Content\n                value={mergedSpec}\n                onChange={(next) => {\n                  onChange(next as UnknownSpec);\n                }}\n              />\n            ),\n          };\n        })}\n      />\n    </Stack>\n  );\n}\n"],"names":["CircularProgress","Stack","Typography","OptionsEditorTabs","usePlugin","merge","useEffect","useMemo","useRef","isSpecEmpty","spec","undefined","Object","keys","length","mergeWithPluginDefaults","plugin","initial","createInitialOptions","EmbeddedPanelOptionsEditor","kind","onChange","data","isLoading","isError","error","panelPlugin","mergedSpec","onChangeRef","current","direction","alignItems","spacing","sx","py","size","variant","color","message","loadedPlugin","editorTabs","panelOptionsEditorComponents","width","tabs","map","tab","Content","content","label","value","next"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,gBAAgB,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AACpE,SAASC,iBAAiB,EAAeC,SAAS,QAAQ,4BAA4B;AAEtF,OAAOC,WAAW,eAAe;AACjC,SAAuBC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AAQjE,SAASC,YAAYC,IAA6B;IAChD,IAAIA,SAASC,aAAaD,SAAS,MAAM,OAAO;IAChD,IAAI,OAAOA,SAAS,UAAU,OAAO;IACrC,OAAOE,OAAOC,IAAI,CAACH,MAAgBI,MAAM,KAAK;AAChD;AAEA,SAASC,wBAAwBC,MAAmB,EAAEN,IAA6B;IACjF,MAAMO,UAAUD,OAAOE,oBAAoB,MAAM,CAAC;IAClD,OAAOb,MAAM,CAAC,GAAGY,SAASP,QAAQ,CAAC;AACrC;AAEA;;;CAGC,GACD,OAAO,SAASS,2BAA2B,EAAEC,IAAI,EAAEV,IAAI,EAAEW,QAAQ,EAAmC;IAClG,MAAM,EAAEC,MAAMN,MAAM,EAAEO,SAAS,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGrB,UAAU,SAASgB;IAEvE,MAAMM,cAAcV;IAEpB,MAAMW,aAAapB,QAAQ;QACzB,IAAI,CAACmB,aAAa;YAChB,OAAOhB;QACT;QACA,OAAOK,wBAAwBW,aAAahB;IAC9C,GAAG;QAACgB;QAAahB;KAAK;IAEtB,MAAMkB,cAAcpB,OAAOa;IAC3BO,YAAYC,OAAO,GAAGR;IAEtB,qGAAqG;IACrGf,UAAU;QACR,IAAI,CAACoB,eAAe,CAACjB,YAAYC,OAAO;YACtC;QACF;QACAkB,YAAYC,OAAO,CAACd,wBAAwBW,aAAahB;IAC3D,GAAG;QAACgB;QAAaN;QAAMV;KAAK;IAE5B,IAAIa,WAAW;QACb,qBACE,MAACtB;YAAM6B,WAAU;YAAMC,YAAW;YAASC,SAAS;YAAGC,IAAI;gBAAEC,IAAI;YAAE;;8BACjE,KAAClC;oBAAiBmC,MAAM;;8BACxB,KAACjC;oBAAWkC,SAAQ;oBAAQC,OAAM;8BAAiB;;;;IAKzD;IAEA,IAAIb,WAAW,CAACR,QAAQ;QACtB,qBACE,KAACd;YAAWkC,SAAQ;YAAQC,OAAM;sBAC/BZ,OAAOa,WAAW;;IAGzB;IAEA,MAAMC,eAAevB;IACrB,MAAMwB,aAAaD,aAAaE,4BAA4B,IAAI,EAAE;IAElE,IAAID,WAAW1B,MAAM,KAAK,GAAG;QAC3B,qBACE,KAACZ;YAAWkC,SAAQ;YAAQC,OAAM;sBAAiB;;IAIvD;IAEA,qBACE,KAACpC;QAAM+B,SAAS;QAAKC,IAAI;YAAES,OAAO;YAAQR,IAAI;QAAE;kBAC9C,cAAA,KAAC/B;YACCwC,MAAMH,WAAWI,GAAG,CAAC,CAACC;gBACpB,MAAMC,UAAUD,IAAIE,OAAO;gBAC3B,OAAO;oBACLC,OAAOH,IAAIG,KAAK;oBAChBD,uBACE,KAACD;wBACCG,OAAOtB;wBACPN,UAAU,CAAC6B;4BACT7B,SAAS6B;wBACX;;gBAGN;YACF;;;AAIR"}

package/lib/components/EmbeddedPanel.d.ts

@@ -1,6 +1,6 @@
 import { PanelData } from '@perses-dev/plugin-system';
-import { QueryDataType, UnknownSpec } from '@perses-dev/core';
 import { ReactElement } from 'react';
+import { QueryDataType, UnknownSpec } from '@perses-dev/spec';
 interface EmbeddedPanelProps {
     kind: string;
     spec: UnknownSpec;

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

@@ -1 +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;AAI9D,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,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,GAAG,YAAY,CAS5F"}
+{"version":3,"file":"EmbeddedPanel.d.ts","sourceRoot":"","sources":["../../../src/components/EmbeddedPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAItD,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE9D,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,GAAG,YAAY,CAS5F"}

package/lib/components/EmbeddedPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/EmbeddedPanel.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { 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';\nimport { ReactElement } from 'react';\n\ninterface EmbeddedPanelProps {\n  kind: string;\n  spec: UnknownSpec;\n  queryResults: Array<PanelData<QueryDataType>>;\n}\n\nexport function EmbeddedPanel({ kind, spec, queryResults }: EmbeddedPanelProps): ReactElement {\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,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAIjC,SAASA,iBAAiB,QAAQ,yBAAyB;AAC3D,OAAOC,uBAAuB,sBAAsB;AACpD,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AASnE,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"}
+{"version":3,"sources":["../../../src/components/EmbeddedPanel.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PanelData } from '@perses-dev/plugin-system';\nimport { PanelPluginLoader } from '@perses-dev/dashboards';\nimport useResizeObserver from 'use-resize-observer';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { QueryDataType, UnknownSpec } from '@perses-dev/spec';\n\ninterface EmbeddedPanelProps {\n  kind: string;\n  spec: UnknownSpec;\n  queryResults: Array<PanelData<QueryDataType>>;\n}\n\nexport function EmbeddedPanel({ kind, spec, queryResults }: EmbeddedPanelProps): ReactElement {\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,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,iBAAiB,QAAQ,yBAAyB;AAC3D,OAAOC,uBAAuB,sBAAsB;AACpD,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AAUnE,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/components/TablePanel.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"TablePanel.d.ts","sourceRoot":"","sources":["../../../src/components/TablePanel.tsx"],"names":[],"mappings":"AAeA,OAAO,EAA8B,cAAc,EAAiB,MAAM,kBAAkB,CAAC;AAE7F,OAAO,EAGL,UAAU,EAIX,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,YAAY,EAAqD,MAAM,OAAO,CAAC;AACxF,OAAO,EAAiD,YAAY,EAAE,MAAM,WAAW,CAAC;AAgLxF,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,CAwZrG"}
+{"version":3,"file":"TablePanel.d.ts","sourceRoot":"","sources":["../../../src/components/TablePanel.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAIL,UAAU,EAIX,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,YAAY,EAAqD,MAAM,OAAO,CAAC;AACxF,OAAO,EAAiB,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAA+D,YAAY,EAAE,MAAM,WAAW,CAAC;AAqVtG,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,CA2drG"}