npm - @perses-dev/plugin-system - Versions diffs - 0.55.0-beta.1 → 0.55.0-beta.3 - Mend

@perses-dev/plugin-system 0.55.0-beta.1 → 0.55.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (331) hide show

package/dist/components/MultiQueryEditor/QueryEditorContainer.js CHANGED Viewed

@@ -11,17 +11,17 @@ 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 { produce } from 'immer';
 import { Stack, IconButton, Typography, Box, CircularProgress, TextField, InputAdornment } from '@mui/material';
-import DeleteIcon from 'mdi-material-ui/DeleteOutline';
-import ChevronDown from 'mdi-material-ui/ChevronDown';
-import ChevronRight from 'mdi-material-ui/ChevronRight';
-import { forwardRef, useState } from 'react';
-import AlertIcon from 'mdi-material-ui/Alert';
 import { InfoTooltip } from '@perses-dev/components';
-import PencilIcon from 'mdi-material-ui/Pencil';
+import { produce } from 'immer';
+import AlertIcon from 'mdi-material-ui/Alert';
 import CheckIcon from 'mdi-material-ui/Check';
+import ChevronDown from 'mdi-material-ui/ChevronDown';
+import ChevronRight from 'mdi-material-ui/ChevronRight';
 import CloseIcon from 'mdi-material-ui/Close';
+import DeleteIcon from 'mdi-material-ui/DeleteOutline';
+import PencilIcon from 'mdi-material-ui/Pencil';
+import { forwardRef, useState } from 'react';
 import { PluginEditor } from '../PluginEditor';
 import { defaultQueryName } from './utils';
 /**

package/dist/components/MultiQueryEditor/QueryEditorContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/MultiQueryEditor/QueryEditorContainer.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 { produce } from 'immer';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/spec';\nimport {\n Stack,\n IconButton,\n Typography,\n BoxProps,\n Box,\n CircularProgress,\n TextField,\n InputAdornment,\n} from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport { forwardRef, ReactElement, useState } from 'react';\nimport AlertIcon from 'mdi-material-ui/Alert';\nimport { InfoTooltip } from '@perses-dev/components';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport CheckIcon from 'mdi-material-ui/Check';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { QueryData } from '../../runtime';\nimport { PluginEditor, PluginEditorProps, PluginEditorRef } from '../PluginEditor';\nimport { defaultQueryName } from './utils';\n\n/*\n Properties for {@link QueryEditorContainer}\n /\ninterface QueryEditorContainerProps {\n queryTypes: QueryPluginType[];\n index: number;\n query: QueryDefinition;\n queryResult?: QueryData;\n filteredQueryPlugins?: string[];\n onChange: (index: number, query: QueryDefinition) => void;\n onQueryRun: (index: number, query: QueryDefinition) => void;\n onCollapseExpand: (index: number) => void;\n isCollapsed?: boolean;\n onDelete?: (index: number) => void;\n}\n\n/\n Container for a query editor. This component is responsible for rendering the query editor, and make it collapsible\n * to not take too much space.\n * @param queryTypes the supported query types\n * @param index the index of the query in the list\n * @param query the query definition\n * @param isCollapsed whether the query editor is collapsed or not\n * @param onDelete callback when the query is deleted\n * @param onChange callback when the query is changed\n * @param onCollapseExpand callback when the query is collapsed or expanded\n * @constructor\n /\n\nexport const QueryEditorContainer = forwardRef<PluginEditorRef, QueryEditorContainerProps>(\n (props, ref): ReactElement => {\n const {\n queryTypes,\n index,\n query,\n queryResult,\n filteredQueryPlugins,\n isCollapsed,\n onDelete,\n onChange,\n onQueryRun,\n onCollapseExpand,\n } = props;\n\n // The displayed name is always derived from props so it stays in sync with the\n // current query/index, even when queries are added, removed or reordered.\n const displayedName = query.spec.name ?? defaultQueryName(index);\n\n const [isEditingName, setIsEditingName] = useState(false);\n\n function handleNameSave(name: string): void {\n setIsEditingName(false);\n onChange(\n index,\n produce(query, (draft) => {\n draft.spec.name = name;\n })\n );\n }\n\n return (\n <Stack key={index} spacing={1}>\n <Stack\n direction=\"row\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n borderBottom={1}\n borderColor={(theme) => theme.palette.divider}\n >\n <Stack direction=\"row\" gap={1} sx={{ width: '100%' }}>\n <IconButton\n size=\"small\"\n sx={{ width: 'fit-content', height: 'fit-content' }}\n onClick={() => onCollapseExpand(index)}\n >\n {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n </IconButton>\n <Stack\n direction=\"row\"\n gap={1}\n alignItems=\"center\"\n alignContent=\"center\"\n sx={{\n width: '100%',\n '&:hover button': {\n visibility: 'visible',\n },\n }}\n >\n {isEditingName ? (\n <QueryNameInput\n // Remounting on identity change resets the draft so editing always\n // targets the currently displayed query.\n key={displayedName}\n initialName={displayedName}\n onSave={handleNameSave}\n onCancel={() => setIsEditingName(false)}\n />\n ) : (\n <Typography variant=\"overline\" component=\"h4\">\n {displayedName}\n </Typography>\n )}\n </Stack>\n </Stack>\n <Stack direction=\"row\" alignItems=\"center\">\n {queryResult?.isFetching && <CircularProgress aria-label=\"loading\" size=\"1.125rem\" />}\n {queryResult?.error && (\n <InfoTooltip description={queryResult.error.message}>\n <Stack\n direction=\"row\"\n alignItems=\"center\"\n sx={{\n color: (theme) => theme.palette.error.main,\n }}\n >\n <IconButton\n aria-label=\"query error\"\n size=\"small\"\n sx={{\n color: (theme) => theme.palette.error.main,\n }}\n >\n <AlertIcon />\n </IconButton>\n <Typography\n sx={{\n maxWidth: 300,\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n '&:hover ::after': { content: '\"Click to copy\"' },\n }}\n >\n {queryResult.error.message}\n </Typography>\n </Stack>\n </InfoTooltip>\n )}\n <Stack direction=\"row\">\n {!isEditingName && (\n <IconButton aria-label=\"edit query name\" size=\"small\" onClick={() => setIsEditingName(true)}>\n <PencilIcon fontSize=\"small\" />\n </IconButton>\n )}\n {onDelete && (\n <IconButton aria-label=\"delete query\" size=\"small\" onClick={() => onDelete && onDelete(index)}>\n <DeleteIcon />\n </IconButton>\n )}\n </Stack>\n </Stack>\n </Stack>\n {!isCollapsed && (\n <QueryEditor\n ref={ref}\n queryTypes={queryTypes}\n value={query}\n filteredQueryPlugins={filteredQueryPlugins}\n onChange={(next) => onChange(index, next)}\n onQueryRun={() => onQueryRun(index, query)}\n />\n )}\n </Stack>\n );\n }\n);\n\nQueryEditorContainer.displayName = 'QueryEditorContainer';\n\n/\n Properties for {@link QueryNameInput}\n /\ninterface QueryNameInputProps {\n initialName: string;\n onSave: (name: string) => void;\n onCancel: () => void;\n}\n\n/\n Self-contained input to edit a query name. The draft value is local state seeded from\n * `initialName`; callers reset it by changing the `key` (remounting) rather than syncing\n * with an useEffect.\n /\nfunction QueryNameInput({ initialName, onSave, onCancel }: QueryNameInputProps): ReactElement {\n const [draftName, setDraftName] = useState(initialName);\n\n return (\n <TextField\n size=\"small\"\n variant=\"outlined\"\n label=\"Query name\"\n aria-label=\"query name\"\n value={draftName}\n onChange={(e) => setDraftName(e.target.value)}\n fullWidth={true}\n InputProps={{\n endAdornment: (\n <InputAdornment position=\"end\">\n <IconButton size=\"small\" aria-label=\"cancel edit\" onClick={onCancel} edge=\"end\">\n <CloseIcon />\n </IconButton>\n <IconButton size=\"small\" aria-label=\"save query name\" onClick={() => onSave(draftName)} edge=\"end\">\n <CheckIcon />\n </IconButton>\n </InputAdornment>\n ),\n }}\n />\n );\n}\n\n// Props on MUI Box that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' \| 'value' \| 'onChange';\ninterface QueryEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n queryTypes: QueryPluginType[];\n value: QueryDefinition;\n filteredQueryPlugins?: string[];\n onChange: (next: QueryDefinition) => void;\n onQueryRun: () => void;\n}\n\n/\n Editor for a query definition. This component is responsible for rendering the plugin editor for the given query.\n * This will allow user to select a plugin extending from the given supported query types, and then edit the plugin\n * spec for this plugin.\n * @param props\n * @constructor\n */\n\nconst QueryEditor = forwardRef<PluginEditorRef, QueryEditorProps>((props, ref): ReactElement => {\n const { queryTypes, value, filteredQueryPlugins, onChange, onQueryRun, ...others } = props;\n\n const handlePluginChange: PluginEditorProps['onChange'] = (next) => {\n onChange(\n produce(value, (draft) => {\n draft.kind = next.selection.type;\n draft.spec.plugin.kind = next.selection.kind;\n draft.spec.plugin.spec = next.spec;\n })\n );\n };\n\n return (\n <Box {...others}>\n <PluginEditor\n ref={ref}\n pluginTypes={queryTypes}\n pluginKindLabel=\"Query Type\"\n value={{\n selection: {\n kind: value.spec.plugin.kind,\n type: value.kind,\n },\n spec: value.spec.plugin.spec,\n }}\n filteredQueryPlugins={filteredQueryPlugins}\n withRunQueryButton\n onRunQuery={onQueryRun}\n onChange={handlePluginChange}\n />\n </Box>\n );\n});\n\nQueryEditor.displayName = 'QueryEditor';\n"],"names":["produce","Stack","IconButton","Typography","Box","CircularProgress","TextField","InputAdornment","DeleteIcon","ChevronDown","ChevronRight","forwardRef","useState","AlertIcon","InfoTooltip","PencilIcon","CheckIcon","CloseIcon","PluginEditor","defaultQueryName","QueryEditorContainer","props","ref","queryTypes","index","query","queryResult","filteredQueryPlugins","isCollapsed","onDelete","onChange","onQueryRun","onCollapseExpand","displayedName","spec","name","isEditingName","setIsEditingName","handleNameSave","draft","spacing","direction","alignItems","justifyContent","borderBottom","borderColor","theme","palette","divider","gap","sx","width","size","height","onClick","alignContent","visibility","QueryNameInput","initialName","onSave","onCancel","variant","component","isFetching","aria-label","error","description","message","color","main","maxWidth","whiteSpace","overflow","textOverflow","content","fontSize","QueryEditor","value","next","displayName","draftName","setDraftName","label","e","target","fullWidth","InputProps","endAdornment","position","edge","others","handlePluginChange","kind","selection","type","plugin","pluginTypes","pluginKindLabel","withRunQueryButton","onRunQuery"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/MultiQueryEditor/QueryEditorContainer.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 {\n Stack,\n IconButton,\n Typography,\n BoxProps,\n Box,\n CircularProgress,\n TextField,\n InputAdornment,\n} from '@mui/material';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/spec';\nimport { produce } from 'immer';\nimport AlertIcon from 'mdi-material-ui/Alert';\nimport CheckIcon from 'mdi-material-ui/Check';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport { forwardRef, ReactElement, useState } from 'react';\n\nimport { QueryData } from '../../runtime';\nimport { PluginEditor, PluginEditorProps, PluginEditorRef } from '../PluginEditor';\nimport { defaultQueryName } from './utils';\n\n/*\n Properties for {@link QueryEditorContainer}\n /\ninterface QueryEditorContainerProps {\n queryTypes: QueryPluginType[];\n index: number;\n query: QueryDefinition;\n queryResult?: QueryData;\n filteredQueryPlugins?: string[];\n onChange: (index: number, query: QueryDefinition) => void;\n onQueryRun: (index: number, query: QueryDefinition) => void;\n onCollapseExpand: (index: number) => void;\n isCollapsed?: boolean;\n onDelete?: (index: number) => void;\n}\n\n/\n Container for a query editor. This component is responsible for rendering the query editor, and make it collapsible\n * to not take too much space.\n * @param queryTypes the supported query types\n * @param index the index of the query in the list\n * @param query the query definition\n * @param isCollapsed whether the query editor is collapsed or not\n * @param onDelete callback when the query is deleted\n * @param onChange callback when the query is changed\n * @param onCollapseExpand callback when the query is collapsed or expanded\n * @constructor\n /\n\nexport const QueryEditorContainer = forwardRef<PluginEditorRef, QueryEditorContainerProps>(\n (props, ref): ReactElement => {\n const {\n queryTypes,\n index,\n query,\n queryResult,\n filteredQueryPlugins,\n isCollapsed,\n onDelete,\n onChange,\n onQueryRun,\n onCollapseExpand,\n } = props;\n\n // The displayed name is always derived from props so it stays in sync with the\n // current query/index, even when queries are added, removed or reordered.\n const displayedName = query.spec.name ?? defaultQueryName(index);\n\n const [isEditingName, setIsEditingName] = useState(false);\n\n function handleNameSave(name: string): void {\n setIsEditingName(false);\n onChange(\n index,\n produce(query, (draft) => {\n draft.spec.name = name;\n }),\n );\n }\n\n return (\n <Stack key={index} spacing={1}>\n <Stack\n direction=\"row\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n borderBottom={1}\n borderColor={(theme) => theme.palette.divider}\n >\n <Stack direction=\"row\" gap={1} sx={{ width: '100%' }}>\n <IconButton\n size=\"small\"\n sx={{ width: 'fit-content', height: 'fit-content' }}\n onClick={() => onCollapseExpand(index)}\n >\n {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n </IconButton>\n <Stack\n direction=\"row\"\n gap={1}\n alignItems=\"center\"\n alignContent=\"center\"\n sx={{\n width: '100%',\n '&:hover button': {\n visibility: 'visible',\n },\n }}\n >\n {isEditingName ? (\n <QueryNameInput\n // Remounting on identity change resets the draft so editing always\n // targets the currently displayed query.\n key={displayedName}\n initialName={displayedName}\n onSave={handleNameSave}\n onCancel={() => setIsEditingName(false)}\n />\n ) : (\n <Typography variant=\"overline\" component=\"h4\">\n {displayedName}\n </Typography>\n )}\n </Stack>\n </Stack>\n <Stack direction=\"row\" alignItems=\"center\">\n {queryResult?.isFetching && <CircularProgress aria-label=\"loading\" size=\"1.125rem\" />}\n {queryResult?.error && (\n <InfoTooltip description={queryResult.error.message}>\n <Stack\n direction=\"row\"\n alignItems=\"center\"\n sx={{\n color: (theme) => theme.palette.error.main,\n }}\n >\n <IconButton\n aria-label=\"query error\"\n size=\"small\"\n sx={{\n color: (theme) => theme.palette.error.main,\n }}\n >\n <AlertIcon />\n </IconButton>\n <Typography\n sx={{\n maxWidth: 300,\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n '&:hover ::after': { content: '\"Click to copy\"' },\n }}\n >\n {queryResult.error.message}\n </Typography>\n </Stack>\n </InfoTooltip>\n )}\n <Stack direction=\"row\">\n {!isEditingName && (\n <IconButton aria-label=\"edit query name\" size=\"small\" onClick={() => setIsEditingName(true)}>\n <PencilIcon fontSize=\"small\" />\n </IconButton>\n )}\n {onDelete && (\n <IconButton aria-label=\"delete query\" size=\"small\" onClick={() => onDelete && onDelete(index)}>\n <DeleteIcon />\n </IconButton>\n )}\n </Stack>\n </Stack>\n </Stack>\n {!isCollapsed && (\n <QueryEditor\n ref={ref}\n queryTypes={queryTypes}\n value={query}\n filteredQueryPlugins={filteredQueryPlugins}\n onChange={(next) => onChange(index, next)}\n onQueryRun={() => onQueryRun(index, query)}\n />\n )}\n </Stack>\n );\n },\n);\n\nQueryEditorContainer.displayName = 'QueryEditorContainer';\n\n/\n Properties for {@link QueryNameInput}\n /\ninterface QueryNameInputProps {\n initialName: string;\n onSave: (name: string) => void;\n onCancel: () => void;\n}\n\n/\n Self-contained input to edit a query name. The draft value is local state seeded from\n * `initialName`; callers reset it by changing the `key` (remounting) rather than syncing\n * with an useEffect.\n /\nfunction QueryNameInput({ initialName, onSave, onCancel }: QueryNameInputProps): ReactElement {\n const [draftName, setDraftName] = useState(initialName);\n\n return (\n <TextField\n size=\"small\"\n variant=\"outlined\"\n label=\"Query name\"\n aria-label=\"query name\"\n value={draftName}\n onChange={(e) => setDraftName(e.target.value)}\n fullWidth={true}\n InputProps={{\n endAdornment: (\n <InputAdornment position=\"end\">\n <IconButton size=\"small\" aria-label=\"cancel edit\" onClick={onCancel} edge=\"end\">\n <CloseIcon />\n </IconButton>\n <IconButton size=\"small\" aria-label=\"save query name\" onClick={() => onSave(draftName)} edge=\"end\">\n <CheckIcon />\n </IconButton>\n </InputAdornment>\n ),\n }}\n />\n );\n}\n\n// Props on MUI Box that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' \| 'value' \| 'onChange';\ninterface QueryEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n queryTypes: QueryPluginType[];\n value: QueryDefinition;\n filteredQueryPlugins?: string[];\n onChange: (next: QueryDefinition) => void;\n onQueryRun: () => void;\n}\n\n/\n Editor for a query definition. This component is responsible for rendering the plugin editor for the given query.\n * This will allow user to select a plugin extending from the given supported query types, and then edit the plugin\n * spec for this plugin.\n * @param props\n * @constructor\n */\n\nconst QueryEditor = forwardRef<PluginEditorRef, QueryEditorProps>((props, ref): ReactElement => {\n const { queryTypes, value, filteredQueryPlugins, onChange, onQueryRun, ...others } = props;\n\n const handlePluginChange: PluginEditorProps['onChange'] = (next) => {\n onChange(\n produce(value, (draft) => {\n draft.kind = next.selection.type;\n draft.spec.plugin.kind = next.selection.kind;\n draft.spec.plugin.spec = next.spec;\n }),\n );\n };\n\n return (\n <Box {...others}>\n <PluginEditor\n ref={ref}\n pluginTypes={queryTypes}\n pluginKindLabel=\"Query Type\"\n value={{\n selection: {\n kind: value.spec.plugin.kind,\n type: value.kind,\n },\n spec: value.spec.plugin.spec,\n }}\n filteredQueryPlugins={filteredQueryPlugins}\n withRunQueryButton\n onRunQuery={onQueryRun}\n onChange={handlePluginChange}\n />\n </Box>\n );\n});\n\nQueryEditor.displayName = 'QueryEditor';\n"],"names":["Stack","IconButton","Typography","Box","CircularProgress","TextField","InputAdornment","InfoTooltip","produce","AlertIcon","CheckIcon","ChevronDown","ChevronRight","CloseIcon","DeleteIcon","PencilIcon","forwardRef","useState","PluginEditor","defaultQueryName","QueryEditorContainer","props","ref","queryTypes","index","query","queryResult","filteredQueryPlugins","isCollapsed","onDelete","onChange","onQueryRun","onCollapseExpand","displayedName","spec","name","isEditingName","setIsEditingName","handleNameSave","draft","spacing","direction","alignItems","justifyContent","borderBottom","borderColor","theme","palette","divider","gap","sx","width","size","height","onClick","alignContent","visibility","QueryNameInput","initialName","onSave","onCancel","variant","component","isFetching","aria-label","error","description","message","color","main","maxWidth","whiteSpace","overflow","textOverflow","content","fontSize","QueryEditor","value","next","displayName","draftName","setDraftName","label","e","target","fullWidth","InputProps","endAdornment","position","edge","others","handlePluginChange","kind","selection","type","plugin","pluginTypes","pluginKindLabel","withRunQueryButton","onRunQuery"],"mappings":"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"}

package/dist/components/OptionsEditorRadios/OptionsEditorRadios.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OptionsEditorRadios.d.ts","sourceRoot":"","sources":["../../../src/components/OptionsEditorRadios/OptionsEditorRadios.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;~~AAG1D~~,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,mBAAmB,~~UAAW~~,wBAAwB,KAAG,YAoCrE,CAAC"}
1	+ {"version":3,"file":"OptionsEditorRadios.d.ts","sourceRoot":"","sources":["../../../src/components/OptionsEditorRadios/OptionsEditorRadios.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAI1D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,KAAG,YAoCrE,CAAC"}

package/dist/components/OptionsEditorRadios/OptionsEditorRadios.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/OptionsEditorRadios/OptionsEditorRadios.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 { FormControl, FormControlLabel, Radio, RadioGroup, RadioGroupProps, Box } from '@mui/material';\nimport { ReactElement, ReactNode, useState } from 'react';\nimport { OptionsEditorTabPanel } from '../OptionsEditorTabPanel';\n\nexport type OptionsEditorRadio = {\n label: string;\n /*\n Content rendered when the tab is active.\n */\n content: ReactNode;\n};\n\nexport type OptionsEditorRadiosProps = {\n tabs: OptionsEditorRadio[];\n defaultTab: number;\n onModeChange: (value: number) => void;\n isReadonly?: boolean;\n};\n\nexport const OptionsEditorRadios = (props: OptionsEditorRadiosProps): ReactElement => {\n const { tabs, defaultTab, onModeChange, isReadonly } = props;\n const [activeTab, setActiveTab] = useState(defaultTab);\n\n const handleChange: RadioGroupProps['onChange'] = (_, value) => {\n const v = parseInt(value);\n setActiveTab(v);\n onModeChange(v);\n };\n\n return (\n <>\n <Box sx={{ borderBottom: 1, borderColor: (theme) => theme.palette.divider }}>\n <FormControl>\n <RadioGroup\n row\n defaultValue={defaultTab}\n value={activeTab}\n onChange={handleChange}\n aria-labelledby=\"Configuration radio\"\n >\n {tabs.map(({ label }, i) => {\n return <FormControlLabel disabled={isReadonly} key={label} value={i} control={<Radio />} label={label} />;\n })}\n </RadioGroup>\n </FormControl>\n </Box>\n {tabs.map(({ label, content }, i) => {\n return (\n <OptionsEditorTabPanel key={label} value={activeTab} index={i}>\n {content}\n </OptionsEditorTabPanel>\n );\n })}\n </>\n );\n};\n"],"names":["FormControl","FormControlLabel","Radio","RadioGroup","Box","useState","OptionsEditorTabPanel","OptionsEditorRadios","props","tabs","defaultTab","onModeChange","isReadonly","activeTab","setActiveTab","handleChange","_","value","v","parseInt","sx","borderBottom","borderColor","theme","palette","divider","row","defaultValue","onChange","aria-labelledby","map","label","i","disabled","control","content","index"],"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,WAAW,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,UAAU,EAAmBC,GAAG,QAAQ,gBAAgB;AACvG,SAAkCC,QAAQ,QAAQ,QAAQ;~~AAC1D~~,SAASC,qBAAqB,QAAQ,2BAA2B;AAiBjE,OAAO,MAAMC,sBAAsB,CAACC;IAClC,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAEC,YAAY,EAAEC,UAAU,EAAE,GAAGJ;IACvD,MAAM,CAACK,WAAWC,aAAa,GAAGT,SAASK;IAE3C,MAAMK,eAA4C,CAACC,GAAGC;QACpD,MAAMC,IAAIC,SAASF;QACnBH,aAAaI;QACbP,aAAaO;IACf;IAEA,qBACE;;0BACE,KAACd;gBAAIgB,IAAI;oBAAEC,cAAc;oBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;gBAAC;0BACxE,cAAA,KAACzB;8BACC,cAAA,KAACG;wBACCuB,GAAG;wBACHC,cAAcjB;wBACdO,OAAOJ;wBACPe,UAAUb;wBACVc,mBAAgB;kCAEfpB,KAAKqB,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAE,EAAEC;4BACpB,qBAAO,KAAC/B;gCAAiBgC,UAAUrB;gCAAwBK,OAAOe;gCAAGE,uBAAS,KAAChC;gCAAU6B,OAAOA;+BAA5CA;wBACtD;;;;YAILtB,KAAKqB,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEI,OAAO,EAAE,EAAEH;gBAC7B,qBACE,KAAC1B;oBAAkCW,OAAOJ;oBAAWuB,OAAOJ;8BACzDG;mBADyBJ;YAIhC;;;AAGN,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/OptionsEditorRadios/OptionsEditorRadios.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 { FormControl, FormControlLabel, Radio, RadioGroup, RadioGroupProps, Box } from '@mui/material';\nimport { ReactElement, ReactNode, useState } from 'react';\n\nimport { OptionsEditorTabPanel } from '../OptionsEditorTabPanel';\n\nexport type OptionsEditorRadio = {\n label: string;\n /*\n Content rendered when the tab is active.\n */\n content: ReactNode;\n};\n\nexport type OptionsEditorRadiosProps = {\n tabs: OptionsEditorRadio[];\n defaultTab: number;\n onModeChange: (value: number) => void;\n isReadonly?: boolean;\n};\n\nexport const OptionsEditorRadios = (props: OptionsEditorRadiosProps): ReactElement => {\n const { tabs, defaultTab, onModeChange, isReadonly } = props;\n const [activeTab, setActiveTab] = useState(defaultTab);\n\n const handleChange: RadioGroupProps['onChange'] = (_, value) => {\n const v = parseInt(value);\n setActiveTab(v);\n onModeChange(v);\n };\n\n return (\n <>\n <Box sx={{ borderBottom: 1, borderColor: (theme) => theme.palette.divider }}>\n <FormControl>\n <RadioGroup\n row\n defaultValue={defaultTab}\n value={activeTab}\n onChange={handleChange}\n aria-labelledby=\"Configuration radio\"\n >\n {tabs.map(({ label }, i) => {\n return <FormControlLabel disabled={isReadonly} key={label} value={i} control={<Radio />} label={label} />;\n })}\n </RadioGroup>\n </FormControl>\n </Box>\n {tabs.map(({ label, content }, i) => {\n return (\n <OptionsEditorTabPanel key={label} value={activeTab} index={i}>\n {content}\n </OptionsEditorTabPanel>\n );\n })}\n </>\n );\n};\n"],"names":["FormControl","FormControlLabel","Radio","RadioGroup","Box","useState","OptionsEditorTabPanel","OptionsEditorRadios","props","tabs","defaultTab","onModeChange","isReadonly","activeTab","setActiveTab","handleChange","_","value","v","parseInt","sx","borderBottom","borderColor","theme","palette","divider","row","defaultValue","onChange","aria-labelledby","map","label","i","disabled","control","content","index"],"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,WAAW,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,UAAU,EAAmBC,GAAG,QAAQ,gBAAgB;AACvG,SAAkCC,QAAQ,QAAQ,QAAQ;AAE1D,SAASC,qBAAqB,QAAQ,2BAA2B;AAiBjE,OAAO,MAAMC,sBAAsB,CAACC;IAClC,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAEC,YAAY,EAAEC,UAAU,EAAE,GAAGJ;IACvD,MAAM,CAACK,WAAWC,aAAa,GAAGT,SAASK;IAE3C,MAAMK,eAA4C,CAACC,GAAGC;QACpD,MAAMC,IAAIC,SAASF;QACnBH,aAAaI;QACbP,aAAaO;IACf;IAEA,qBACE;;0BACE,KAACd;gBAAIgB,IAAI;oBAAEC,cAAc;oBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;gBAAC;0BACxE,cAAA,KAACzB;8BACC,cAAA,KAACG;wBACCuB,GAAG;wBACHC,cAAcjB;wBACdO,OAAOJ;wBACPe,UAAUb;wBACVc,mBAAgB;kCAEfpB,KAAKqB,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAE,EAAEC;4BACpB,qBAAO,KAAC/B;gCAAiBgC,UAAUrB;gCAAwBK,OAAOe;gCAAGE,uBAAS,KAAChC;gCAAU6B,OAAOA;+BAA5CA;wBACtD;;;;YAILtB,KAAKqB,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEI,OAAO,EAAE,EAAEH;gBAC7B,qBACE,KAAC1B;oBAAkCW,OAAOJ;oBAAWuB,OAAOJ;8BACzDG;mBADyBJ;YAIhC;;;AAGN,EAAE"}

package/dist/components/OptionsEditorTabs/OptionsEditorTabs.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OptionsEditorTabs.d.ts","sourceRoot":"","sources":["../../../src/components/OptionsEditorTabs/OptionsEditorTabs.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;~~AAG1D~~,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,gBAAgB,EAAE,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,~~aAAc~~,sBAAsB,KAAG,YAgCpE,CAAC"}
1	+ {"version":3,"file":"OptionsEditorTabs.d.ts","sourceRoot":"","sources":["../../../src/components/OptionsEditorTabs/OptionsEditorTabs.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAI1D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,gBAAgB,EAAE,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,UAAU,sBAAsB,KAAG,YAgCpE,CAAC"}

package/dist/components/OptionsEditorTabs/OptionsEditorTabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/OptionsEditorTabs/OptionsEditorTabs.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 { Tab, Tabs, TabsProps, Box } from '@mui/material';\nimport { ReactElement, ReactNode, useState } from 'react';\nimport { OptionsEditorTabPanel } from '../OptionsEditorTabPanel';\n\nexport type OptionsEditorTab = {\n label: string;\n /*\n Content rendered when the tab is active.\n */\n content: ReactNode;\n};\n\nexport type OptionsEditorTabsProps = {\n tabs: OptionsEditorTab[];\n};\n\nexport const OptionsEditorTabs = ({ tabs }: OptionsEditorTabsProps): ReactElement => {\n const [activeTab, setActiveTab] = useState(0);\n\n const handleChange: TabsProps['onChange'] = (_, newValue) => {\n setActiveTab(newValue);\n };\n\n return (\n <>\n <Box sx={{ borderBottom: 1, borderColor: (theme) => theme.palette.divider }}>\n <Tabs value={activeTab} onChange={handleChange} aria-label=\"Panel configuration tabs\">\n {tabs.map(({ label }, i) => {\n return (\n <Tab\n key={label}\n label={label}\n id={`options-editor-tab-${i}`}\n aria-controls={`options-editor-tabpanel-${i}`}\n />\n );\n })}\n </Tabs>\n </Box>\n {tabs.map(({ label, content }, i) => {\n return (\n <OptionsEditorTabPanel key={label} value={activeTab} index={i}>\n {content}\n </OptionsEditorTabPanel>\n );\n })}\n </>\n );\n};\n"],"names":["Tab","Tabs","Box","useState","OptionsEditorTabPanel","OptionsEditorTabs","tabs","activeTab","setActiveTab","handleChange","_","newValue","sx","borderBottom","borderColor","theme","palette","divider","value","onChange","aria-label","map","label","i","id","aria-controls","content","index"],"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,GAAG,EAAEC,IAAI,EAAaC,GAAG,QAAQ,gBAAgB;AAC1D,SAAkCC,QAAQ,QAAQ,QAAQ;~~AAC1D~~,SAASC,qBAAqB,QAAQ,2BAA2B;AAcjE,OAAO,MAAMC,oBAAoB,CAAC,EAAEC,IAAI,EAA0B;IAChE,MAAM,CAACC,WAAWC,aAAa,GAAGL,SAAS;IAE3C,MAAMM,eAAsC,CAACC,GAAGC;QAC9CH,aAAaG;IACf;IAEA,qBACE;;0BACE,KAACT;gBAAIU,IAAI;oBAAEC,cAAc;oBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;gBAAC;0BACxE,cAAA,KAAChB;oBAAKiB,OAAOX;oBAAWY,UAAUV;oBAAcW,cAAW;8BACxDd,KAAKe,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAE,EAAEC;wBACpB,qBACE,KAACvB;4BAECsB,OAAOA;4BACPE,IAAI,CAAC,mBAAmB,EAAED,GAAG;4BAC7BE,iBAAe,CAAC,wBAAwB,EAAEF,GAAG;2BAHxCD;oBAMX;;;YAGHhB,KAAKe,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEI,OAAO,EAAE,EAAEH;gBAC7B,qBACE,KAACnB;oBAAkCc,OAAOX;oBAAWoB,OAAOJ;8BACzDG;mBADyBJ;YAIhC;;;AAGN,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/OptionsEditorTabs/OptionsEditorTabs.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 { Tab, Tabs, TabsProps, Box } from '@mui/material';\nimport { ReactElement, ReactNode, useState } from 'react';\n\nimport { OptionsEditorTabPanel } from '../OptionsEditorTabPanel';\n\nexport type OptionsEditorTab = {\n label: string;\n /*\n Content rendered when the tab is active.\n */\n content: ReactNode;\n};\n\nexport type OptionsEditorTabsProps = {\n tabs: OptionsEditorTab[];\n};\n\nexport const OptionsEditorTabs = ({ tabs }: OptionsEditorTabsProps): ReactElement => {\n const [activeTab, setActiveTab] = useState(0);\n\n const handleChange: TabsProps['onChange'] = (_, newValue) => {\n setActiveTab(newValue);\n };\n\n return (\n <>\n <Box sx={{ borderBottom: 1, borderColor: (theme) => theme.palette.divider }}>\n <Tabs value={activeTab} onChange={handleChange} aria-label=\"Panel configuration tabs\">\n {tabs.map(({ label }, i) => {\n return (\n <Tab\n key={label}\n label={label}\n id={`options-editor-tab-${i}`}\n aria-controls={`options-editor-tabpanel-${i}`}\n />\n );\n })}\n </Tabs>\n </Box>\n {tabs.map(({ label, content }, i) => {\n return (\n <OptionsEditorTabPanel key={label} value={activeTab} index={i}>\n {content}\n </OptionsEditorTabPanel>\n );\n })}\n </>\n );\n};\n"],"names":["Tab","Tabs","Box","useState","OptionsEditorTabPanel","OptionsEditorTabs","tabs","activeTab","setActiveTab","handleChange","_","newValue","sx","borderBottom","borderColor","theme","palette","divider","value","onChange","aria-label","map","label","i","id","aria-controls","content","index"],"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,GAAG,EAAEC,IAAI,EAAaC,GAAG,QAAQ,gBAAgB;AAC1D,SAAkCC,QAAQ,QAAQ,QAAQ;AAE1D,SAASC,qBAAqB,QAAQ,2BAA2B;AAcjE,OAAO,MAAMC,oBAAoB,CAAC,EAAEC,IAAI,EAA0B;IAChE,MAAM,CAACC,WAAWC,aAAa,GAAGL,SAAS;IAE3C,MAAMM,eAAsC,CAACC,GAAGC;QAC9CH,aAAaG;IACf;IAEA,qBACE;;0BACE,KAACT;gBAAIU,IAAI;oBAAEC,cAAc;oBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;gBAAC;0BACxE,cAAA,KAAChB;oBAAKiB,OAAOX;oBAAWY,UAAUV;oBAAcW,cAAW;8BACxDd,KAAKe,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAE,EAAEC;wBACpB,qBACE,KAACvB;4BAECsB,OAAOA;4BACPE,IAAI,CAAC,mBAAmB,EAAED,GAAG;4BAC7BE,iBAAe,CAAC,wBAAwB,EAAEF,GAAG;2BAHxCD;oBAMX;;;YAGHhB,KAAKe,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEI,OAAO,EAAE,EAAEH;gBAC7B,qBACE,KAACnB;oBAAkCc,OAAOX;oBAAWoB,OAAOJ;8BACzDG;mBADyBJ;YAIhC;;;AAGN,EAAE"}

package/dist/components/PanelSpecEditor/PanelAnnotationsEditor.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
 import { AnnotationSpec } from '@perses-dev/spec';
+import { ReactElement } from 'react';
 export interface PanelAnnotationsEditorProps {
     value: AnnotationSpec[];
     onChange: (annotations: AnnotationSpec[]) => void;

package/dist/components/PanelSpecEditor/PanelAnnotationsEditor.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PanelAnnotationsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PanelSpecEditor/PanelAnnotationsEditor.tsx"],"names":[],"mappings":"~~AAaA~~,OAAO,EAAE,~~YAAY~~,~~EAAqB~~,MAAM,~~OAAO~~,CAAC;~~AAqBxD~~,OAAO,EAAE,~~cAAc~~,~~EAA2B~~,MAAM,~~kBAAkB~~,CAAC;~~AAyB3E~~,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,WAAW,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,2BAA2B,GAAG,YAAY,CA6IjH"}
1	+ {"version":3,"file":"PanelAnnotationsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PanelSpecEditor/PanelAnnotationsEditor.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAAE,cAAc,EAA2B,MAAM,kBAAkB,CAAC;AAM3E,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAyBxD,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,WAAW,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,2BAA2B,GAAG,YAAY,CA6IjH"}

package/dist/components/PanelSpecEditor/PanelAnnotationsEditor.js CHANGED Viewed

@@ -11,13 +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 { useMemo, useState } from 'react';
 import { Alert, Box, Button, IconButton, Stack, Switch, Table, TableBody, TableCell as MuiTableCell, TableContainer, TableHead, TableRow, styled } from '@mui/material';
-import AddIcon from 'mdi-material-ui/Plus';
+import ArrowDown from 'mdi-material-ui/ArrowDown';
+import ArrowUp from 'mdi-material-ui/ArrowUp';
 import PencilIcon from 'mdi-material-ui/Pencil';
+import AddIcon from 'mdi-material-ui/Plus';
 import TrashIcon from 'mdi-material-ui/TrashCan';
-import ArrowUp from 'mdi-material-ui/ArrowUp';
-import ArrowDown from 'mdi-material-ui/ArrowDown';
+import { useMemo, useState } from 'react';
 import { ValidationProvider } from '../../context';
 import { AnnotationEditorForm } from '../Annotations';
 const TableCell = styled(MuiTableCell)(({ theme })=>({

package/dist/components/PanelSpecEditor/PanelAnnotationsEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/PanelSpecEditor/PanelAnnotationsEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useMemo, useState } from 'react';\nimport {\n Alert,\n Box,\n Button,\n IconButton,\n Stack,\n Switch,\n Table,\n TableBody,\n TableCell as MuiTableCell,\n TableContainer,\n TableHead,\n TableRow,\n styled,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport ArrowUp from 'mdi-material-ui/ArrowUp';\nimport ArrowDown from 'mdi-material-ui/ArrowDown';\nimport { AnnotationSpec, Definition, UnknownSpec } from '@perses-dev/spec';\nimport { Action } from '@perses-dev/client';\nimport { ValidationProvider } from '../../context';\nimport { AnnotationEditorForm } from '../Annotations';\n\nconst TableCell = styled(MuiTableCell)(({ theme }) => ({\n borderBottom: `solid 1px ${theme.palette.divider}`,\n}));\n\n// The annotation being edited: an existing entry by index, a brand new one, or nothing (list view).\ntype EditTarget = { kind: 'edit'; index: number } \| { kind: 'new' } \| null;\n\nfunction findDuplicateNames(specs: AnnotationSpec[]): string[] {\n const seen = new Set<string>();\n const duplicates = new Set<string>();\n for (const spec of specs) {\n const name = spec.display.name;\n if (seen.has(name)) {\n duplicates.add(name);\n }\n seen.add(name);\n }\n return Array.from(duplicates);\n}\n\nexport interface PanelAnnotationsEditorProps {\n value: AnnotationSpec[];\n onChange: (annotations: AnnotationSpec[]) => void;\n isReadonly?: boolean;\n}\n\n/*\n Panel-level annotations editor, rendered as a common tab in the panel editor for panel plugins\n * that declare `supportsAnnotations`. Reuses {@link AnnotationEditorForm} for the per-annotation form\n * and propagates every committed change through `onChange`, so it fits the inline panel-editor flow\n * (no separate apply step).\n */\nexport function PanelAnnotationsEditor({ value, onChange, isReadonly }: PanelAnnotationsEditorProps): ReactElement {\n const [target, setTarget] = useState<EditTarget>(null);\n const [formAction, setFormAction] = useState<Action>('update');\n\n const duplicateNames = useMemo(() => findDuplicateNames(value), [value]);\n\n const initialSpec: AnnotationSpec \| undefined = useMemo(() => {\n if (target?.kind === 'new') {\n return { display: { name: 'NewAnnotation' }, plugin: {} as Definition<UnknownSpec> };\n }\n if (target?.kind === 'edit') {\n return value[target.index];\n }\n return undefined;\n }, [target, value]);\n\n const removeAnnotation = (index: number): void => {\n onChange(value.filter((_, i) => i !== index));\n };\n\n const changeAnnotationOrder = (index: number, direction: 'up' \| 'down'): void => {\n const step = direction === 'up' ? -1 : 1;\n const swapWith = index + step;\n const current = value[index];\n const adjacent = value[swapWith];\n if (!current \|\| !adjacent) {\n return;\n }\n const next = [...value];\n next[index] = adjacent;\n next[swapWith] = current;\n onChange(next);\n };\n\n const toggleAnnotationVisibility = (index: number, visible: boolean): void => {\n onChange(\n value.map((spec, i) => (i === index ? { ...spec, display: { ...spec.display, hidden: !visible } } : spec))\n );\n };\n\n const handleSave = (definition: AnnotationSpec): void => {\n if (target?.kind === 'new') {\n onChange([...value, definition]);\n } else if (target?.kind === 'edit') {\n onChange(value.map((spec, i) => (i === target.index ? definition : spec)));\n }\n setTarget(null);\n };\n\n if (target !== null && initialSpec) {\n return (\n <ValidationProvider>\n <AnnotationEditorForm\n initialAnnotationSpec={initialSpec}\n action={formAction}\n isDraft={true}\n isReadonly={isReadonly}\n onActionChange={setFormAction}\n onSave={handleSave}\n onClose={() => setTarget(null)}\n />\n </ValidationProvider>\n );\n }\n\n return (\n <Stack spacing={2} padding={1}>\n {duplicateNames.map((name) => (\n <Alert severity=\"error\" key={name}>\n {`Duplicate annotation name: ${name}`}\n </Alert>\n ))}\n <TableContainer>\n <Table aria-label=\"table of panel annotations\">\n <TableHead>\n <TableRow>\n <TableCell>Visibility</TableCell>\n <TableCell>Name</TableCell>\n <TableCell>Type</TableCell>\n <TableCell>Description</TableCell>\n <TableCell align=\"right\">Actions</TableCell>\n </TableRow>\n </TableHead>\n <TableBody>\n {value.map((annotation, index) => (\n <TableRow key={`${annotation.display.name}-${index}`}>\n <TableCell component=\"th\" scope=\"row\">\n <Switch\n checked={annotation.display?.hidden !== true}\n disabled={isReadonly}\n onChange={(e) => toggleAnnotationVisibility(index, e.target.checked)}\n />\n </TableCell>\n <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n {annotation.display.name}\n </TableCell>\n <TableCell>{annotation.plugin.kind}</TableCell>\n <TableCell>{annotation.display?.description ?? ''}</TableCell>\n <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n <IconButton onClick={() => changeAnnotationOrder(index, 'up')} disabled={isReadonly \|\| index === 0}>\n <ArrowUp />\n </IconButton>\n <IconButton\n onClick={() => changeAnnotationOrder(index, 'down')}\n disabled={isReadonly \|\| index === value.length - 1}\n >\n <ArrowDown />\n </IconButton>\n <IconButton\n onClick={() => {\n setFormAction('update');\n setTarget({ kind: 'edit', index });\n }}\n >\n <PencilIcon />\n </IconButton>\n <IconButton disabled={isReadonly} onClick={() => removeAnnotation(index)}>\n <TrashIcon />\n </IconButton>\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </TableContainer>\n <Box display=\"flex\">\n <Button\n variant=\"contained\"\n startIcon={<AddIcon />}\n sx={{ marginLeft: 'auto' }}\n disabled={isReadonly}\n onClick={() => {\n setFormAction('create');\n setTarget({ kind: 'new' });\n }}\n >\n Add Annotation\n </Button>\n </Box>\n </Stack>\n );\n}\n"],"names":["useMemo","useState","Alert","Box","Button","IconButton","Stack","Switch","Table","TableBody","TableCell","MuiTableCell","TableContainer","TableHead","TableRow","styled","AddIcon","PencilIcon","TrashIcon","ArrowUp","ArrowDown","ValidationProvider","AnnotationEditorForm","theme","borderBottom","palette","divider","findDuplicateNames","specs","seen","Set","duplicates","spec","name","display","has","add","Array","from","PanelAnnotationsEditor","value","onChange","isReadonly","target","setTarget","formAction","setFormAction","duplicateNames","initialSpec","kind","plugin","index","undefined","removeAnnotation","filter","_","i","changeAnnotationOrder","direction","step","swapWith","current","adjacent","next","toggleAnnotationVisibility","visible","map","hidden","handleSave","definition","initialAnnotationSpec","action","isDraft","onActionChange","onSave","onClose","spacing","padding","severity","aria-label","align","annotation","component","scope","checked","disabled","e","sx","fontWeight","description","whiteSpace","onClick","length","variant","startIcon","marginLeft"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/PanelSpecEditor/PanelAnnotationsEditor.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 {\n Alert,\n Box,\n Button,\n IconButton,\n Stack,\n Switch,\n Table,\n TableBody,\n TableCell as MuiTableCell,\n TableContainer,\n TableHead,\n TableRow,\n styled,\n} from '@mui/material';\nimport { Action } from '@perses-dev/client';\nimport { AnnotationSpec, Definition, UnknownSpec } from '@perses-dev/spec';\nimport ArrowDown from 'mdi-material-ui/ArrowDown';\nimport ArrowUp from 'mdi-material-ui/ArrowUp';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport { ReactElement, useMemo, useState } from 'react';\n\nimport { ValidationProvider } from '../../context';\nimport { AnnotationEditorForm } from '../Annotations';\n\nconst TableCell = styled(MuiTableCell)(({ theme }) => ({\n borderBottom: `solid 1px ${theme.palette.divider}`,\n}));\n\n// The annotation being edited: an existing entry by index, a brand new one, or nothing (list view).\ntype EditTarget = { kind: 'edit'; index: number } \| { kind: 'new' } \| null;\n\nfunction findDuplicateNames(specs: AnnotationSpec[]): string[] {\n const seen = new Set<string>();\n const duplicates = new Set<string>();\n for (const spec of specs) {\n const name = spec.display.name;\n if (seen.has(name)) {\n duplicates.add(name);\n }\n seen.add(name);\n }\n return Array.from(duplicates);\n}\n\nexport interface PanelAnnotationsEditorProps {\n value: AnnotationSpec[];\n onChange: (annotations: AnnotationSpec[]) => void;\n isReadonly?: boolean;\n}\n\n/*\n Panel-level annotations editor, rendered as a common tab in the panel editor for panel plugins\n * that declare `supportsAnnotations`. Reuses {@link AnnotationEditorForm} for the per-annotation form\n * and propagates every committed change through `onChange`, so it fits the inline panel-editor flow\n * (no separate apply step).\n */\nexport function PanelAnnotationsEditor({ value, onChange, isReadonly }: PanelAnnotationsEditorProps): ReactElement {\n const [target, setTarget] = useState<EditTarget>(null);\n const [formAction, setFormAction] = useState<Action>('update');\n\n const duplicateNames = useMemo(() => findDuplicateNames(value), [value]);\n\n const initialSpec: AnnotationSpec \| undefined = useMemo(() => {\n if (target?.kind === 'new') {\n return { display: { name: 'NewAnnotation' }, plugin: {} as Definition<UnknownSpec> };\n }\n if (target?.kind === 'edit') {\n return value[target.index];\n }\n return undefined;\n }, [target, value]);\n\n const removeAnnotation = (index: number): void => {\n onChange(value.filter((_, i) => i !== index));\n };\n\n const changeAnnotationOrder = (index: number, direction: 'up' \| 'down'): void => {\n const step = direction === 'up' ? -1 : 1;\n const swapWith = index + step;\n const current = value[index];\n const adjacent = value[swapWith];\n if (!current \|\| !adjacent) {\n return;\n }\n const next = [...value];\n next[index] = adjacent;\n next[swapWith] = current;\n onChange(next);\n };\n\n const toggleAnnotationVisibility = (index: number, visible: boolean): void => {\n onChange(\n value.map((spec, i) => (i === index ? { ...spec, display: { ...spec.display, hidden: !visible } } : spec)),\n );\n };\n\n const handleSave = (definition: AnnotationSpec): void => {\n if (target?.kind === 'new') {\n onChange([...value, definition]);\n } else if (target?.kind === 'edit') {\n onChange(value.map((spec, i) => (i === target.index ? definition : spec)));\n }\n setTarget(null);\n };\n\n if (target !== null && initialSpec) {\n return (\n <ValidationProvider>\n <AnnotationEditorForm\n initialAnnotationSpec={initialSpec}\n action={formAction}\n isDraft={true}\n isReadonly={isReadonly}\n onActionChange={setFormAction}\n onSave={handleSave}\n onClose={() => setTarget(null)}\n />\n </ValidationProvider>\n );\n }\n\n return (\n <Stack spacing={2} padding={1}>\n {duplicateNames.map((name) => (\n <Alert severity=\"error\" key={name}>\n {`Duplicate annotation name: ${name}`}\n </Alert>\n ))}\n <TableContainer>\n <Table aria-label=\"table of panel annotations\">\n <TableHead>\n <TableRow>\n <TableCell>Visibility</TableCell>\n <TableCell>Name</TableCell>\n <TableCell>Type</TableCell>\n <TableCell>Description</TableCell>\n <TableCell align=\"right\">Actions</TableCell>\n </TableRow>\n </TableHead>\n <TableBody>\n {value.map((annotation, index) => (\n <TableRow key={`${annotation.display.name}-${index}`}>\n <TableCell component=\"th\" scope=\"row\">\n <Switch\n checked={annotation.display?.hidden !== true}\n disabled={isReadonly}\n onChange={(e) => toggleAnnotationVisibility(index, e.target.checked)}\n />\n </TableCell>\n <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n {annotation.display.name}\n </TableCell>\n <TableCell>{annotation.plugin.kind}</TableCell>\n <TableCell>{annotation.display?.description ?? ''}</TableCell>\n <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n <IconButton onClick={() => changeAnnotationOrder(index, 'up')} disabled={isReadonly \|\| index === 0}>\n <ArrowUp />\n </IconButton>\n <IconButton\n onClick={() => changeAnnotationOrder(index, 'down')}\n disabled={isReadonly \|\| index === value.length - 1}\n >\n <ArrowDown />\n </IconButton>\n <IconButton\n onClick={() => {\n setFormAction('update');\n setTarget({ kind: 'edit', index });\n }}\n >\n <PencilIcon />\n </IconButton>\n <IconButton disabled={isReadonly} onClick={() => removeAnnotation(index)}>\n <TrashIcon />\n </IconButton>\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </TableContainer>\n <Box display=\"flex\">\n <Button\n variant=\"contained\"\n startIcon={<AddIcon />}\n sx={{ marginLeft: 'auto' }}\n disabled={isReadonly}\n onClick={() => {\n setFormAction('create');\n setTarget({ kind: 'new' });\n }}\n >\n Add Annotation\n </Button>\n </Box>\n </Stack>\n );\n}\n"],"names":["Alert","Box","Button","IconButton","Stack","Switch","Table","TableBody","TableCell","MuiTableCell","TableContainer","TableHead","TableRow","styled","ArrowDown","ArrowUp","PencilIcon","AddIcon","TrashIcon","useMemo","useState","ValidationProvider","AnnotationEditorForm","theme","borderBottom","palette","divider","findDuplicateNames","specs","seen","Set","duplicates","spec","name","display","has","add","Array","from","PanelAnnotationsEditor","value","onChange","isReadonly","target","setTarget","formAction","setFormAction","duplicateNames","initialSpec","kind","plugin","index","undefined","removeAnnotation","filter","_","i","changeAnnotationOrder","direction","step","swapWith","current","adjacent","next","toggleAnnotationVisibility","visible","map","hidden","handleSave","definition","initialAnnotationSpec","action","isDraft","onActionChange","onSave","onClose","spacing","padding","severity","aria-label","align","annotation","component","scope","checked","disabled","e","sx","fontWeight","description","whiteSpace","onClick","length","variant","startIcon","marginLeft"],"mappings":"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"}

package/dist/components/PanelSpecEditor/PanelSpecEditor.d.ts CHANGED Viewed

@@ -1,14 +1,17 @@
-/// <reference types="react" />
-import { PanelDefinition, QueryDefinition, UnknownSpec } from '@perses-dev/spec';
+import { AnnotationSpec, PanelDefinition, QueryDefinition, UnknownSpec } from '@perses-dev/spec';
 import { Control } from 'react-hook-form';
 import { PanelEditorValues } from '../../model';
+import { PanelGroup, VariableDefinitionGroup } from '../LayoutEditor';
 import { PluginEditorRef } from '../PluginEditor';
 export interface PanelSpecEditorProps {
     control: Control<PanelEditorValues>;
     panelDefinition: PanelDefinition;
+    variableDefinitionGroups: VariableDefinitionGroup[];
+    panelGroups?: PanelGroup[];
     onQueriesChange: (queries: QueryDefinition[]) => void;
     onQueryRun: (index: number, query: QueryDefinition) => void;
     onPluginSpecChange: (spec: UnknownSpec) => void;
+    onAnnotationsChange: (annotations: AnnotationSpec[]) => void;
     onJSONChange: (panelDefinitionStr: string) => void;
 }
 export declare const PanelSpecEditor: import("react").ForwardRefExoticComponent<PanelSpecEditorProps & import("react").RefAttributes<PluginEditorRef>>;

package/dist/components/PanelSpecEditor/PanelSpecEditor.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PanelSpecEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;~~AACjF~~,OAAO,EAAE,OAAO,EAAc,MAAM,iBAAiB,CAAC;~~AAGtD~~,OAAO,EAAE,iBAAiB,EAAe,MAAM,aAAa,CAAC;~~AAI7D~~,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,eAAe,EAAE,eAAe,CAAC;IACjC,eAAe,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACtD,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5D,kBAAkB,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,CAAC,kBAAkB,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAED,eAAO,MAAM,eAAe,~~kHAyH1B~~,CAAC"}
1	+ {"version":3,"file":"PanelSpecEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEjG,OAAO,EAAE,OAAO,EAAc,MAAM,iBAAiB,CAAC;AAEtD,OAAO,EAAE,iBAAiB,EAAe,MAAM,aAAa,CAAC;AAE7D,OAAO,EAAgB,UAAU,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAIpF,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,eAAe,EAAE,eAAe,CAAC;IACjC,wBAAwB,EAAE,uBAAuB,EAAE,CAAC;IACpD,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,eAAe,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACtD,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5D,kBAAkB,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,mBAAmB,EAAE,CAAC,WAAW,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC7D,YAAY,EAAE,CAAC,kBAAkB,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAED,eAAO,MAAM,eAAe,kHA4I1B,CAAC"}

package/dist/components/PanelSpecEditor/PanelSpecEditor.js CHANGED Viewed

@@ -12,15 +12,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { ErrorAlert, JSONEditor } from '@perses-dev/components';
-import { Controller } from 'react-hook-form';
 import { forwardRef } from 'react';
-import { LinksEditor } from '../LinksEditor';
+import { Controller } from 'react-hook-form';
 import { useDataQueriesContext, usePlugin } from '../../runtime';
-import { OptionsEditorTabs } from '../OptionsEditorTabs';
+import { LayoutEditor } from '../LayoutEditor';
+import { LinksEditor } from '../LinksEditor';
 import { MultiQueryEditor } from '../MultiQueryEditor';
+import { OptionsEditorTabs } from '../OptionsEditorTabs';
 import { PanelAnnotationsEditor } from './PanelAnnotationsEditor';
 export const PanelSpecEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { control, panelDefinition, onQueriesChange, onQueryRun, onPluginSpecChange, onJSONChange } = props;
+    const { control, panelDefinition, variableDefinitionGroups, panelGroups, onQueriesChange, onQueryRun, onPluginSpecChange, onAnnotationsChange, onJSONChange } = props;
     const { kind } = panelDefinition.spec.plugin;
     const { data: plugin, isLoading, error } = usePlugin('Panel', kind);
     const { queryResults } = useDataQueriesContext();
@@ -88,12 +89,15 @@ export const PanelSpecEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
                 name: "panelDefinition.spec.annotations",
                 render: ({ field })=>/*#__PURE__*/ _jsx(PanelAnnotationsEditor, {
                         value: panelDefinition.spec.annotations ?? [],
-                        onChange: (annotations)=>field.onChange(annotations)
+                        onChange: (annotations)=>{
+                            field.onChange(annotations);
+                            onAnnotationsChange(annotations);
+                        }
                     })
             })
         });
     }
-    // always show json editor and links editor by default
+    // Always show the JSON editor, Links editor, and Layout editor by default.
     tabs.push({
         label: 'Links',
         content: /*#__PURE__*/ _jsx(LinksEditor, {
@@ -115,6 +119,14 @@ export const PanelSpecEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
                 })
         })
     });
+    tabs.push({
+        label: 'Layout',
+        content: /*#__PURE__*/ _jsx(LayoutEditor, {
+            control: control,
+            variableDefinitionGroups: variableDefinitionGroups,
+            panelGroups: panelGroups
+        })
+    });
     return /*#__PURE__*/ _jsx(OptionsEditorTabs, {
         tabs: tabs
     }, tabs.length);

package/dist/components/PanelSpecEditor/PanelSpecEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.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 { ErrorAlert, JSONEditor } from '@perses-dev/components';\nimport { PanelDefinition, QueryDefinition, UnknownSpec } from '@perses-dev/spec';\nimport { ~~Control~~, ~~Controller~~ } from 'react~~-hook-form~~';\nimport { ~~forwardRef~~, ~~ReactElement~~ } from 'react';\nimport { ~~LinksEditor~~ } from '~~../LinksEditor~~';\nimport { ~~PanelEditorValues~~, ~~PanelPlugin~~ } from '../../~~model~~';\nimport { ~~useDataQueriesContext~~, ~~usePlugin~~ } from '~~../../runtime~~';\nimport { ~~OptionsEditorTabs,~~ ~~OptionsEditorTabsProps~~ } from '../~~OptionsEditorTabs~~';\nimport { MultiQueryEditor } from '../MultiQueryEditor';\nimport { PluginEditorRef } from '../PluginEditor';\nimport { PanelAnnotationsEditor } from './PanelAnnotationsEditor';\n\nexport interface PanelSpecEditorProps {\n control: Control<PanelEditorValues>;\n panelDefinition: PanelDefinition;\n onQueriesChange: (queries: QueryDefinition[]) => void;\n onQueryRun: (index: number, query: QueryDefinition) => void;\n onPluginSpecChange: (spec: UnknownSpec) => void;\n onJSONChange: (panelDefinitionStr: string) => void;\n}\n\nexport const PanelSpecEditor = forwardRef<PluginEditorRef, PanelSpecEditorProps>((props, ref): ReactElement \| null => {\n const { control, panelDefinition, onQueriesChange, onQueryRun, onPluginSpecChange, onJSONChange } = props;\n const { kind } = panelDefinition.spec.plugin;\n const { data: plugin, isLoading, error } = usePlugin('Panel', kind);\n\n const { queryResults } = useDataQueriesContext();\n\n if (error) {\n return <ErrorAlert error={error} />;\n }\n\n if (isLoading) {\n return null;\n }\n\n if (!plugin) {\n throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);\n }\n\n const { panelOptionsEditorComponents, hideQueryEditor, supportsAnnotations } = plugin as PanelPlugin;\n let tabs: OptionsEditorTabsProps['tabs'] = [];\n\n if (!hideQueryEditor) {\n tabs.push({\n label: 'Query',\n content: (\n <Controller\n control={control}\n name=\"panelDefinition.spec.queries\"\n render={({ field }) => (\n <MultiQueryEditor\n ref={ref}\n queryTypes={plugin.supportedQueryTypes ?? []}\n queries={panelDefinition.spec.queries ?? []}\n queryResults={queryResults}\n onChange={(queries) => {\n field.onChange(queries);\n onQueriesChange(queries);\n }}\n onQueryRun={(index, query) => {\n onQueryRun(index, query);\n // If spec has not changed, refetch to update the data\n if (JSON.stringify(panelDefinition.spec.queries?.[index]) === JSON.stringify(query)) {\n queryResults[index]?.refetch?.();\n }\n }}\n />\n )}\n />\n ),\n });\n }\n\n if (panelOptionsEditorComponents) {\n tabs = tabs.concat(\n panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent }) => ({\n label,\n content: (\n <Controller\n control={control}\n name=\"panelDefinition.spec.plugin.spec\"\n render={({ field }) => (\n <OptionsEditorComponent\n value={panelDefinition.spec.plugin.spec}\n onChange={(spec) => {\n field.onChange(spec);\n onPluginSpecChange(spec);\n }}\n />\n )}\n />\n ),\n }))\n );\n }\n\n // annotations are common to all panel plugins, but only shown for plugins that render them\n if (supportsAnnotations) {\n tabs.push({\n label: 'Annotations',\n content: (\n <Controller\n control={control}\n name=\"panelDefinition.spec.annotations\"\n render={({ field }) => (\n <PanelAnnotationsEditor\n value={panelDefinition.spec.annotations ?? []}\n onChange={(annotations) => field.onChange(annotations)}\n />\n )}\n />\n ),\n });\n }\n\n // ~~always~~ show ~~json~~ editor and ~~links~~ editor by default\n tabs.push({\n label: 'Links',\n content: <LinksEditor control={control} />,\n });\n tabs.push({\n label: 'JSON',\n content: (\n <Controller\n control={control}\n name=\"panelDefinition\"\n render={({ field }) => (\n <JSONEditor\n maxHeight=\"80vh\"\n value={panelDefinition}\n onChange={(json) => {\n field.onChange(JSON.parse(json));\n onJSONChange(json);\n }}\n />\n )}\n />\n ),\n });\n\n return <OptionsEditorTabs key={tabs.length} tabs={tabs} />;\n});\n\nPanelSpecEditor.displayName = 'PanelSpecEditor';\n"],"names":["ErrorAlert","JSONEditor","~~Controller","~~forwardRef","~~LinksEditor~~","useDataQueriesContext","usePlugin","~~OptionsEditorTabs~~","MultiQueryEditor","PanelAnnotationsEditor","PanelSpecEditor","props","ref","control","panelDefinition","onQueriesChange","onQueryRun","onPluginSpecChange","onJSONChange","kind","spec","plugin","data","isLoading","error","queryResults","Error","panelOptionsEditorComponents","hideQueryEditor","supportsAnnotations","tabs","push","label","content","name","render","field","queryTypes","supportedQueryTypes","queries","onChange","index","query","JSON","stringify","refetch","concat","map","OptionsEditorComponent","value","annotations","maxHeight","json","parse","length","displayName"],"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,UAAU,EAAEC,UAAU,QAAQ,yBAAyB;AAEhE,~~SAAkBC,UAAU,QAAQ,kBAAkB;AACtD,~~SAASC,UAAU,QAAsB,QAAQ;AACjD,~~SAASC~~,~~WAAW~~,QAAQ,~~iBAAiB~~;~~AAE7C~~,SAASC,qBAAqB,EAAEC,SAAS,QAAQ,gBAAgB;AACjE,SAASC,~~iBAAiB~~,~~QAAgC~~,~~uBAAuB~~;~~AACjF~~,SAASC,gBAAgB,QAAQ,sBAAsB;~~AAEvD~~,SAASC,sBAAsB,QAAQ,2BAA2B;~~AAWlE~~,OAAO,MAAMC,~~gCAAkBP~~,WAAkD,~~CAACQ~~,OAAOC;IACvF,MAAM,~~EAAEC~~,OAAO,~~EAAEC~~,eAAe,~~EAAEC~~,eAAe,~~EAAEC~~,UAAU,~~EAAEC~~,kBAAkB,~~EAAEC~~,YAAY,~~EAAE~~,~~GAAGP~~;~~IACpG~~,MAAM,~~EAAEQ~~,IAAI,EAAE,~~GAAGL~~,~~gBAAgBM~~,IAAI,CAACC,MAAM;IAC5C,MAAM,EAAEC,MAAMD,MAAM,EAAEE,SAAS,EAAEC,KAAK,EAAE,~~GAAGlB~~,UAAU,~~SAASa~~;IAE9D,MAAM,EAAEM,YAAY,EAAE,~~GAAGpB~~;IAEzB,~~IAAImB~~,OAAO;QACT,qBAAO,~~KAACxB~~;~~YAAWwB~~,OAAOA;;IAC5B;IAEA,IAAID,WAAW;QACb,OAAO;IACT;IAEA,IAAI,CAACF,QAAQ;QACX,MAAM,IAAIK,MAAM,CAAC,mDAAmD,EAAEP,KAAK,CAAC,CAAC;IAC/E;IAEA,MAAM,EAAEQ,4BAA4B,EAAEC,eAAe,EAAEC,mBAAmB,EAAE,GAAGR;IAC/E,IAAIS,OAAuC,EAAE;IAE7C,IAAI,CAACF,iBAAiB;QACpBE,KAAKC,IAAI,CAAC;YACRC,OAAO;YACPC,uBACE,~~KAAC/B~~;gBACCW,SAASA;~~gBACTqB~~,MAAK;gBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,~~KAAC5B~~;~~wBACCI~~,KAAKA;~~wBACLyB~~,YAAYhB,OAAOiB,mBAAmB,IAAI,EAAE;wBAC5CC,~~SAASzB~~,~~gBAAgBM~~,IAAI,CAACmB,OAAO,IAAI,EAAE;wBAC3Cd,cAAcA;wBACde,UAAU,CAACD;4BACTH,MAAMI,QAAQ,CAACD;~~4BACfxB~~,~~gBAAgBwB~~;wBAClB;~~wBACAvB~~,YAAY,~~CAACyB~~,OAAOC;~~4BAClB1B~~,~~WAAWyB~~,OAAOC;4BAClB,sDAAsD;4BACtD,IAAIC,KAAKC,SAAS,~~CAAC9B~~,~~gBAAgBM~~,IAAI,CAACmB,OAAO,EAAE,CAACE,MAAM,MAAME,KAAKC,SAAS,CAACF,QAAQ;gCACnFjB,YAAY,CAACgB,MAAM,EAAEI;4BACvB;wBACF;;;QAKV;IACF;IAEA,IAAIlB,8BAA8B;QAChCG,OAAOA,KAAKgB,MAAM,CAChBnB,6BAA6BoB,GAAG,CAAC,CAAC,EAAEf,KAAK,EAAEC,SAASe,sBAAsB,EAAE,GAAM,CAAA;gBAChFhB;gBACAC,uBACE,~~KAAC/B~~;oBACCW,SAASA;~~oBACTqB~~,MAAK;oBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAACY;4BACCC,~~OAAOnC~~,~~gBAAgBM~~,IAAI,CAACC,MAAM,CAACD,IAAI;4BACvCoB,UAAU,CAACpB;gCACTgB,MAAMI,QAAQ,CAACpB;~~gCACfH~~,~~mBAAmBG~~;4BACrB;;;YAKV,CAAA;IAEJ;IAEA,2FAA2F;IAC3F,IAAIS,qBAAqB;QACvBC,KAAKC,IAAI,CAAC;YACRC,OAAO;YACPC,uBACE,~~KAAC/B~~;gBACCW,SAASA;~~gBACTqB~~,MAAK;gBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,~~KAAC3B~~;~~wBACCwC~~,~~OAAOnC~~,~~gBAAgBM~~,IAAI,CAAC8B,WAAW,IAAI,EAAE;wBAC7CV,UAAU,CAACU,~~cAAgBd,~~MAAMI,QAAQ,CAACU;;;~~QAKpD~~;IACF;IAEA,~~sDAAsD~~;~~IACtDpB~~,KAAKC,IAAI,CAAC;QACRC,OAAO;QACPC,uBAAS,~~KAAC7B~~;~~YAAYS~~,SAASA;;IACjC;~~IACAiB~~,KAAKC,IAAI,CAAC;QACRC,OAAO;QACPC,uBACE,~~KAAC/B~~;YACCW,SAASA;~~YACTqB~~,MAAK;YACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,~~KAACnC~~;~~oBACCkD~~,WAAU;oBACVF,~~OAAOnC~~;~~oBACP0B~~,UAAU,CAACY;wBACThB,MAAMI,QAAQ,CAACG,KAAKU,KAAK,CAACD;wBAC1BlC,aAAakC;oBACf;;;IAKV;IAEA,qBAAO,~~KAAC7C~~;~~QAAoCuB~~,MAAMA;OAAnBA,KAAKwB,MAAM;AAC5C,GAAG;~~AAEH5C~~,~~gBAAgB6C~~,WAAW,GAAG"}
1	+ {"version":3,"sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.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 { ErrorAlert, JSONEditor } from '@perses-dev/components';\nimport { AnnotationSpec, PanelDefinition, QueryDefinition, UnknownSpec } from '@perses-dev/spec';\nimport { forwardRef, ReactElement } from 'react';\nimport { Control, Controller } from 'react-hook-form';\n\nimport { PanelEditorValues, PanelPlugin } from '../../model';\nimport { useDataQueriesContext, usePlugin } from '../../runtime';\nimport { LayoutEditor, PanelGroup, VariableDefinitionGroup } from '../LayoutEditor';\nimport { LinksEditor } from '../LinksEditor';\nimport { MultiQueryEditor } from '../MultiQueryEditor';\nimport { OptionsEditorTabs, OptionsEditorTabsProps } from '../OptionsEditorTabs';\nimport { PluginEditorRef } from '../PluginEditor';\nimport { PanelAnnotationsEditor } from './PanelAnnotationsEditor';\n\nexport interface PanelSpecEditorProps {\n control: Control<PanelEditorValues>;\n panelDefinition: PanelDefinition;\n variableDefinitionGroups: VariableDefinitionGroup[];\n panelGroups?: PanelGroup[];\n onQueriesChange: (queries: QueryDefinition[]) => void;\n onQueryRun: (index: number, query: QueryDefinition) => void;\n onPluginSpecChange: (spec: UnknownSpec) => void;\n onAnnotationsChange: (annotations: AnnotationSpec[]) => void;\n onJSONChange: (panelDefinitionStr: string) => void;\n}\n\nexport const PanelSpecEditor = forwardRef<PluginEditorRef, PanelSpecEditorProps>((props, ref): ReactElement \| null => {\n const {\n control,\n panelDefinition,\n variableDefinitionGroups,\n panelGroups,\n onQueriesChange,\n onQueryRun,\n onPluginSpecChange,\n onAnnotationsChange,\n onJSONChange,\n } = props;\n const { kind } = panelDefinition.spec.plugin;\n const { data: plugin, isLoading, error } = usePlugin('Panel', kind);\n\n const { queryResults } = useDataQueriesContext();\n\n if (error) {\n return <ErrorAlert error={error} />;\n }\n\n if (isLoading) {\n return null;\n }\n\n if (!plugin) {\n throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);\n }\n\n const { panelOptionsEditorComponents, hideQueryEditor, supportsAnnotations } = plugin as PanelPlugin;\n let tabs: OptionsEditorTabsProps['tabs'] = [];\n\n if (!hideQueryEditor) {\n tabs.push({\n label: 'Query',\n content: (\n <Controller\n control={control}\n name=\"panelDefinition.spec.queries\"\n render={({ field }) => (\n <MultiQueryEditor\n ref={ref}\n queryTypes={plugin.supportedQueryTypes ?? []}\n queries={panelDefinition.spec.queries ?? []}\n queryResults={queryResults}\n onChange={(queries) => {\n field.onChange(queries);\n onQueriesChange(queries);\n }}\n onQueryRun={(index, query) => {\n onQueryRun(index, query);\n // If spec has not changed, refetch to update the data\n if (JSON.stringify(panelDefinition.spec.queries?.[index]) === JSON.stringify(query)) {\n queryResults[index]?.refetch?.();\n }\n }}\n />\n )}\n />\n ),\n });\n }\n\n if (panelOptionsEditorComponents) {\n tabs = tabs.concat(\n panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent }) => ({\n label,\n content: (\n <Controller\n control={control}\n name=\"panelDefinition.spec.plugin.spec\"\n render={({ field }) => (\n <OptionsEditorComponent\n value={panelDefinition.spec.plugin.spec}\n onChange={(spec) => {\n field.onChange(spec);\n onPluginSpecChange(spec);\n }}\n />\n )}\n />\n ),\n })),\n );\n }\n\n // annotations are common to all panel plugins, but only shown for plugins that render them\n if (supportsAnnotations) {\n tabs.push({\n label: 'Annotations',\n content: (\n <Controller\n control={control}\n name=\"panelDefinition.spec.annotations\"\n render={({ field }) => (\n <PanelAnnotationsEditor\n value={panelDefinition.spec.annotations ?? []}\n onChange={(annotations) => {\n field.onChange(annotations);\n onAnnotationsChange(annotations);\n }}\n />\n )}\n />\n ),\n });\n }\n\n // Always show the JSON editor, Links editor, and Layout editor by default.\n tabs.push({\n label: 'Links',\n content: <LinksEditor control={control} />,\n });\n tabs.push({\n label: 'JSON',\n content: (\n <Controller\n control={control}\n name=\"panelDefinition\"\n render={({ field }) => (\n <JSONEditor\n maxHeight=\"80vh\"\n value={panelDefinition}\n onChange={(json) => {\n field.onChange(JSON.parse(json));\n onJSONChange(json);\n }}\n />\n )}\n />\n ),\n });\n tabs.push({\n label: 'Layout',\n content: (\n <LayoutEditor control={control} variableDefinitionGroups={variableDefinitionGroups} panelGroups={panelGroups} />\n ),\n });\n\n return <OptionsEditorTabs key={tabs.length} tabs={tabs} />;\n});\n\nPanelSpecEditor.displayName = 'PanelSpecEditor';\n"],"names":["ErrorAlert","JSONEditor","forwardRef","Controller","useDataQueriesContext","usePlugin","LayoutEditor","LinksEditor","MultiQueryEditor","OptionsEditorTabs","PanelAnnotationsEditor","PanelSpecEditor","props","ref","control","panelDefinition","variableDefinitionGroups","panelGroups","onQueriesChange","onQueryRun","onPluginSpecChange","onAnnotationsChange","onJSONChange","kind","spec","plugin","data","isLoading","error","queryResults","Error","panelOptionsEditorComponents","hideQueryEditor","supportsAnnotations","tabs","push","label","content","name","render","field","queryTypes","supportedQueryTypes","queries","onChange","index","query","JSON","stringify","refetch","concat","map","OptionsEditorComponent","value","annotations","maxHeight","json","parse","length","displayName"],"mappings":"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"}

package/dist/components/PluginEditor/PluginEditor.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PluginEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/PluginEditor.tsx"],"names":[],"mappings":"~~AAgBA~~,OAAO,EAAE,YAAY,EAAe,MAAM,OAAO,CAAC;AAIlD,OAAO,EAAE,iBAAiB,EAAmB,MAAM,qBAAqB,CAAC;AAEzE;;;;;;;GAOG;AAEH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,~~CAwEnE~~"}
1	+ {"version":3,"file":"PluginEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/PluginEditor.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,YAAY,EAAe,MAAM,OAAO,CAAC;AAIlD,OAAO,EAAE,iBAAiB,EAAmB,MAAM,qBAAqB,CAAC;AAEzE;;;;;;;GAOG;AAEH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CA0EnE"}

package/dist/components/PluginEditor/PluginEditor.js CHANGED Viewed

@@ -12,8 +12,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Box, Button } from '@mui/material';
-import Reload from 'mdi-material-ui/Reload';
 import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
+import Reload from 'mdi-material-ui/Reload';
 import { useCallback } from 'react';
 import { PluginKindSelect } from '../PluginKindSelect';
 import { PluginSpecEditor } from '../PluginSpecEditor';
@@ -26,7 +26,7 @@ import { usePluginEditor } from './plugin-editor-api';
  * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the
  * `usePluginEditor` hook that powers this component.
  */ export function PluginEditor(props) {
-    const { value, withRunQueryButton = true, pluginTypes, pluginKindLabel, onChange: _, isReadonly, onRunQuery, filteredQueryPlugins, ...others } = props;
+    const { value, withRunQueryButton = true, pluginTypes, pluginKindLabel, onChange: _, isReadonly, onRunQuery, filteredQueryPlugins, testConnection, ...others } = props;
     const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = usePluginEditor(props);
     const handleSpecChange = useCallback((nextSpec)=>{
         onSpecChange(nextSpec);
@@ -82,7 +82,8 @@ import { usePluginEditor } from './plugin-editor-api';
                     pluginSelection: value.selection,
                     value: value.spec,
                     onChange: handleSpecChange,
-                    isReadonly: isReadonly
+                    isReadonly: isReadonly,
+                    testConnection: testConnection
                 })
             })
         ]

package/dist/components/PluginEditor/PluginEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/PluginEditor/PluginEditor.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 { Box, Button } from '@mui/material';\nimport ~~Reload~~ from '~~mdi~~-~~material-ui~~/~~Reload~~';\nimport { ~~ErrorAlert,~~ ~~ErrorBoundary~~ } from '@perses-dev/~~components~~';\nimport { ~~ReactElement, useCallback }~~ from '~~react~~';\nimport { ~~UnknownSpec~~ } from '~~@perses-dev/spec~~';\nimport { PluginKindSelect } from '../PluginKindSelect';\nimport { PluginSpecEditor } from '../PluginSpecEditor';\nimport { PluginEditorProps, usePluginEditor } from './plugin-editor-api';\n\n/*\n A combination `PluginKindSelect` and `PluginSpecEditor` component. This is meant for editing the `plugin` property\n * that's common in our JSON specs where a user selects a plugin `kind` and then edits the `spec` via that plugin's\n * editor component. It takes care of transitioning from one plugin kind to another \"all at once\" so that when the\n * plugin's kind changes, the spec is also changed at the same time so those options editor components don't see a\n * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the\n * `usePluginEditor` hook that powers this component.\n */\n\nexport function PluginEditor(props: PluginEditorProps): ReactElement {\n const {\n value,\n withRunQueryButton = true,\n pluginTypes,\n pluginKindLabel,\n onChange: _,\n isReadonly,\n onRunQuery,\n filteredQueryPlugins,\n ...others\n } = props;\n\n const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = usePluginEditor(props);\n\n const handleSpecChange = useCallback(\n (nextSpec: UnknownSpec) => {\n onSpecChange(nextSpec);\n },\n [onSpecChange]\n );\n\n return (\n <Box {...others}>\n <Box\n sx={{\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: 1,\n mb: 1,\n }}\n >\n <PluginKindSelect\n fullWidth={false}\n sx={{ minWidth: 120 }}\n margin=\"dense\"\n label={pluginKindLabel}\n pluginTypes={pluginTypes}\n disabled={isLoading}\n value={pendingSelection ? pendingSelection : value.selection}\n slotProps={{ input: { readOnly: isReadonly } }}\n error={!!error}\n helperText={error?.message}\n onChange={onSelectionChange}\n filteredQueryPlugins={filteredQueryPlugins}\n />\n\n {withRunQueryButton && (\n <Button\n data-testid=\"run_query_button\"\n variant=\"contained\"\n startIcon={<Reload />}\n onClick={onRunQuery}\n disabled={isLoading}\n >\n Run Query\n </Button>\n )}\n </Box>\n\n <ErrorBoundary FallbackComponent={ErrorAlert}>\n <PluginSpecEditor\n pluginSelection={value.selection}\n value={value.spec}\n onChange={handleSpecChange}\n isReadonly={isReadonly}\n />\n </ErrorBoundary>\n </Box>\n );\n}\n"],"names":["Box","Button","~~Reload~~","~~ErrorAlert~~","~~ErrorBoundary~~","useCallback","PluginKindSelect","PluginSpecEditor","usePluginEditor","PluginEditor","props","value","withRunQueryButton","pluginTypes","pluginKindLabel","onChange","_","isReadonly","onRunQuery","filteredQueryPlugins","others","pendingSelection","isLoading","error","onSelectionChange","onSpecChange","handleSpecChange","nextSpec","sx","display","flexDirection","alignItems","justifyContent","gap","mb","fullWidth","minWidth","margin","label","disabled","selection","slotProps","input","readOnly","helperText","message","data-testid","variant","startIcon","onClick","FallbackComponent","pluginSelection","spec"],"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,GAAG,EAAEC,MAAM,QAAQ,gBAAgB;AAC5C,~~OAAOC,YAAY,yBAAyB;AAC5C,~~SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;~~AACnE~~,SAAuBC,WAAW,QAAQ,QAAQ;AAElD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAA4BC,eAAe,QAAQ,sBAAsB;AAEzE;;;;;;;CAOC,GAED,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EACJC,KAAK,EACLC,qBAAqB,IAAI,EACzBC,WAAW,EACXC,eAAe,EACfC,UAAUC,CAAC,EACXC,UAAU,EACVC,UAAU,EACVC,oBAAoB,~~EACpB~~,GAAGC,QACJ,~~GAAGV~~;IAEJ,MAAM,~~EAAEW~~,gBAAgB,EAAEC,SAAS,EAAEC,KAAK,EAAEC,iBAAiB,EAAEC,YAAY,EAAE,~~GAAGjB~~,gBAAgBE;IAEhG,~~MAAMgB~~,~~mBAAmBrB~~,YACvB,~~CAACsB~~;QACCF,aAAaE;IACf,GACA;QAACF;KAAa;IAGhB,qBACE,~~MAACzB~~;QAAK,~~GAAGoB~~,MAAM;;0BACb,~~MAACpB~~;~~gBACC4B~~,IAAI;oBACFC,SAAS;oBACTC,eAAe;oBACfC,YAAY;oBACZC,gBAAgB;oBAChBC,KAAK;oBACLC,IAAI;gBACN;;kCAEA,~~KAAC5B~~;~~wBACC6B~~,WAAW;wBACXP,IAAI;4BAAEQ,UAAU;wBAAI;wBACpBC,QAAO;wBACPC,~~OAAOxB~~;wBACPD,aAAaA;~~wBACb0B~~,UAAUjB;~~wBACVX~~,~~OAAOU~~,mBAAmBA,~~mBAAmBV~~,~~MAAM6B~~,SAAS;wBAC5DC,WAAW;4BAAEC,OAAO;gCAAEC,~~UAAU1B~~;4BAAW;wBAAE;~~wBAC7CM~~,OAAO,CAAC,CAACA;wBACTqB,YAAYrB,OAAOsB;~~wBACnB9B~~,~~UAAUS~~;~~wBACVL~~,sBAAsBA;;oBAGvBP,oCACC,KAACX;~~wBACC6C~~,eAAY;wBACZC,SAAQ;wBACRC,yBAAW,~~KAAC9C~~;~~wBACZ+C~~,~~SAAS/B~~;~~wBACTqB~~,UAAUjB;kCACX;;;;0BAML,~~KAAClB~~;~~gBAAc8C~~,~~mBAAmB/C~~;0BAChC,cAAA,~~KAACI~~;~~oBACC4C~~,~~iBAAiBxC~~,~~MAAM6B~~,SAAS;~~oBAChC7B~~,OAAOA,~~MAAMyC~~,IAAI;~~oBACjBrC~~,~~UAAUW~~;~~oBACVT~~,YAAYA;;;;;~~AAKtB~~"}
1	+ {"version":3,"sources":["../../../src/components/PluginEditor/PluginEditor.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 { Box, Button } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { UnknownSpec } from '@perses-dev/spec';\nimport Reload from 'mdi-material-ui/Reload';\nimport { ReactElement, useCallback } from 'react';\n\nimport { PluginKindSelect } from '../PluginKindSelect';\nimport { PluginSpecEditor } from '../PluginSpecEditor';\nimport { PluginEditorProps, usePluginEditor } from './plugin-editor-api';\n\n/*\n A combination `PluginKindSelect` and `PluginSpecEditor` component. This is meant for editing the `plugin` property\n * that's common in our JSON specs where a user selects a plugin `kind` and then edits the `spec` via that plugin's\n * editor component. It takes care of transitioning from one plugin kind to another \"all at once\" so that when the\n * plugin's kind changes, the spec is also changed at the same time so those options editor components don't see a\n * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the\n * `usePluginEditor` hook that powers this component.\n */\n\nexport function PluginEditor(props: PluginEditorProps): ReactElement {\n const {\n value,\n withRunQueryButton = true,\n pluginTypes,\n pluginKindLabel,\n onChange: _,\n isReadonly,\n onRunQuery,\n filteredQueryPlugins,\n testConnection,\n ...others\n } = props;\n\n const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = usePluginEditor(props);\n\n const handleSpecChange = useCallback(\n (nextSpec: UnknownSpec) => {\n onSpecChange(nextSpec);\n },\n [onSpecChange],\n );\n\n return (\n <Box {...others}>\n <Box\n sx={{\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: 1,\n mb: 1,\n }}\n >\n <PluginKindSelect\n fullWidth={false}\n sx={{ minWidth: 120 }}\n margin=\"dense\"\n label={pluginKindLabel}\n pluginTypes={pluginTypes}\n disabled={isLoading}\n value={pendingSelection ? pendingSelection : value.selection}\n slotProps={{ input: { readOnly: isReadonly } }}\n error={!!error}\n helperText={error?.message}\n onChange={onSelectionChange}\n filteredQueryPlugins={filteredQueryPlugins}\n />\n\n {withRunQueryButton && (\n <Button\n data-testid=\"run_query_button\"\n variant=\"contained\"\n startIcon={<Reload />}\n onClick={onRunQuery}\n disabled={isLoading}\n >\n Run Query\n </Button>\n )}\n </Box>\n\n <ErrorBoundary FallbackComponent={ErrorAlert}>\n <PluginSpecEditor\n pluginSelection={value.selection}\n value={value.spec}\n onChange={handleSpecChange}\n isReadonly={isReadonly}\n testConnection={testConnection}\n />\n </ErrorBoundary>\n </Box>\n );\n}\n"],"names":["Box","Button","ErrorAlert","ErrorBoundary","Reload","useCallback","PluginKindSelect","PluginSpecEditor","usePluginEditor","PluginEditor","props","value","withRunQueryButton","pluginTypes","pluginKindLabel","onChange","_","isReadonly","onRunQuery","filteredQueryPlugins","testConnection","others","pendingSelection","isLoading","error","onSelectionChange","onSpecChange","handleSpecChange","nextSpec","sx","display","flexDirection","alignItems","justifyContent","gap","mb","fullWidth","minWidth","margin","label","disabled","selection","slotProps","input","readOnly","helperText","message","data-testid","variant","startIcon","onClick","FallbackComponent","pluginSelection","spec"],"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,GAAG,EAAEC,MAAM,QAAQ,gBAAgB;AAC5C,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AAEnE,OAAOC,YAAY,yBAAyB;AAC5C,SAAuBC,WAAW,QAAQ,QAAQ;AAElD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAA4BC,eAAe,QAAQ,sBAAsB;AAEzE;;;;;;;CAOC,GAED,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EACJC,KAAK,EACLC,qBAAqB,IAAI,EACzBC,WAAW,EACXC,eAAe,EACfC,UAAUC,CAAC,EACXC,UAAU,EACVC,UAAU,EACVC,oBAAoB,EACpBC,cAAc,EACd,GAAGC,QACJ,GAAGX;IAEJ,MAAM,EAAEY,gBAAgB,EAAEC,SAAS,EAAEC,KAAK,EAAEC,iBAAiB,EAAEC,YAAY,EAAE,GAAGlB,gBAAgBE;IAEhG,MAAMiB,mBAAmBtB,YACvB,CAACuB;QACCF,aAAaE;IACf,GACA;QAACF;KAAa;IAGhB,qBACE,MAAC1B;QAAK,GAAGqB,MAAM;;0BACb,MAACrB;gBACC6B,IAAI;oBACFC,SAAS;oBACTC,eAAe;oBACfC,YAAY;oBACZC,gBAAgB;oBAChBC,KAAK;oBACLC,IAAI;gBACN;;kCAEA,KAAC7B;wBACC8B,WAAW;wBACXP,IAAI;4BAAEQ,UAAU;wBAAI;wBACpBC,QAAO;wBACPC,OAAOzB;wBACPD,aAAaA;wBACb2B,UAAUjB;wBACVZ,OAAOW,mBAAmBA,mBAAmBX,MAAM8B,SAAS;wBAC5DC,WAAW;4BAAEC,OAAO;gCAAEC,UAAU3B;4BAAW;wBAAE;wBAC7CO,OAAO,CAAC,CAACA;wBACTqB,YAAYrB,OAAOsB;wBACnB/B,UAAUU;wBACVN,sBAAsBA;;oBAGvBP,oCACC,KAACX;wBACC8C,eAAY;wBACZC,SAAQ;wBACRC,yBAAW,KAAC7C;wBACZ8C,SAAShC;wBACTsB,UAAUjB;kCACX;;;;0BAML,KAACpB;gBAAcgD,mBAAmBjD;0BAChC,cAAA,KAACK;oBACC6C,iBAAiBzC,MAAM8B,SAAS;oBAChC9B,OAAOA,MAAM0C,IAAI;oBACjBtC,UAAUY;oBACVV,YAAYA;oBACZG,gBAAgBA;;;;;AAK1B"}

package/dist/components/PluginEditor/plugin-editor-api.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { BoxProps } from '@mui/material';
-import { UnknownSpec } from '@perses-dev/spec';
+import { DatasourceSpec, UnknownSpec } from '@perses-dev/spec';
 import { PluginType } from '../../model';
 export interface PluginEditorSelection {
     type: PluginType;
@@ -19,6 +19,7 @@ export interface PluginEditorProps extends Omit<BoxProps, OmittedMuiProps> {
     filteredQueryPlugins?: string[];
     onChange: (next: PluginEditorValue) => void;
     onRunQuery?: () => void;
+    testConnection?: (spec: DatasourceSpec, healthCheckPath: string) => Promise<void>;
 }
 export interface PluginEditorRef {
     flushChanges?: () => void;

package/dist/components/PluginEditor/plugin-editor-api.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"plugin-editor-api.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;~~AAG~~/C,OAAO,EAAe,UAAU,EAAE,MAAM,aAAa,CAAC;AAMtD,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,qBAAqB,CAAC;IACjC,IAAI,EAAE,WAAW,CAAC;CACnB;AAID,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,QAAQ,EAAE,eAAe,CAAC;IACxE,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,iBAAiB,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,QAAQ,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;~~CACzB~~;AAED,MAAM,WAAW,eAAe;IAC9B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAKD;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,EAAE,aAAa,GAAG,OAAO,GAAG,UAAU,CAAC,GAAG;IACjG,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG;IAC5D,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,iBAAiB,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACtD,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,wBAAwB,EAAE,MAAM,IAAI,CAAC;CACtC,CAkIA"}
1	+ {"version":3,"file":"plugin-editor-api.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAI/D,OAAO,EAAe,UAAU,EAAE,MAAM,aAAa,CAAC;AAMtD,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,qBAAqB,CAAC;IACjC,IAAI,EAAE,WAAW,CAAC;CACnB;AAID,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,QAAQ,EAAE,eAAe,CAAC;IACxE,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,iBAAiB,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,QAAQ,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACnF;AAED,MAAM,WAAW,eAAe;IAC9B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAKD;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,EAAE,aAAa,GAAG,OAAO,GAAG,UAAU,CAAC,GAAG;IACjG,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG;IAC5D,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,iBAAiB,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACtD,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,wBAAwB,EAAE,MAAM,IAAI,CAAC;CACtC,CAkIA"}

package/dist/components/PluginEditor/plugin-editor-api.js CHANGED Viewed

@@ -10,8 +10,8 @@
 // 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 { useState, useRef, useEffect } from 'react';
 import { produce } from 'immer';
+import { useState, useRef, useEffect } from 'react';
 import { usePlugin, usePluginRegistry } from '../../runtime';
 import { useEvent } from '../../utils';
 /**

package/dist/components/PluginEditor/plugin-editor-api.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { BoxProps } from '@mui/material';\nimport { UnknownSpec } from '@perses-dev/spec';\nimport { useState, useRef, useEffect } from 'react';\nimport { produce } from 'immer';\nimport { PanelPlugin, PluginType } from '../../model';\nimport { PluginKindSelectProps } from '../PluginKindSelect';\nimport { PluginSpecEditorProps } from '../PluginSpecEditor';\nimport { usePlugin, usePluginRegistry } from '../../runtime';\nimport { useEvent } from '../../utils';\n\nexport interface PluginEditorSelection {\n type: PluginType;\n kind: string;\n}\n\nexport interface PluginEditorValue {\n selection: PluginEditorSelection;\n spec: UnknownSpec;\n}\n\n// Props on MUI Box that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' \| 'value' \| 'onChange';\n\nexport interface PluginEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n pluginTypes: PluginType[];\n pluginKindLabel: string;\n value: PluginEditorValue;\n isReadonly?: boolean;\n withRunQueryButton?: boolean;\n filteredQueryPlugins?: string[];\n onChange: (next: PluginEditorValue) => void;\n onRunQuery?: () => void;\n}\n\nexport interface PluginEditorRef {\n flushChanges?: () => void;\n}\n\ntype PreviousSpecState = Record<string, Record<string, UnknownSpec>>;\ntype HideQueryEditorState = Record<string, boolean>;\n\n/*\n Props needed by the usePluginEditor hook.\n /\nexport type UsePluginEditorProps = Pick<PluginEditorProps, 'pluginTypes' \| 'value' \| 'onChange'> & {\n onHideQueryEditorChange?: (isHidden: boolean) => void;\n};\n\n/\n Returns the state/handlers that power the `PluginEditor` component. Useful for custom components that want to provide\n * a different UI, but want the same behavior of changing `kind` and `spec` together on plugin kind changes. Also\n * remembers previous `spec` values that it's seen, allowing and restores those values if a user switches the plugin\n * kind back.\n /\nexport function usePluginEditor(props: UsePluginEditorProps): {\n pendingSelection?: PluginEditorSelection;\n isLoading: boolean;\n error: Error \| null;\n onSelectionChange: (s: PluginEditorSelection) => void;\n onSpecChange: (next: UnknownSpec) => void;\n rememberCurrentSpecState: () => void;\n} {\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n const { pluginTypes, value, onHideQueryEditorChange = (): void => {} } = props; // setting onHideQueryEditorChange to empty function here because useEvent requires a function\n\n // Keep a stable reference, so we don't run the effect below when we don't need to\n const onChange = useEvent(props.onChange);\n const onHideQuery = useEvent(onHideQueryEditorChange);\n\n // The previous spec state for PluginType and kind and a helper function for remembering current values\n const prevSpecState = useRef<PreviousSpecState>({\n [value.selection.type]: { [value.selection.kind]: value.spec },\n });\n const rememberCurrentSpecState = useEvent(() => {\n let byPluginType = prevSpecState.current[value.selection.type];\n if (byPluginType === undefined) {\n byPluginType = {};\n prevSpecState.current[value.selection.type] = byPluginType;\n }\n byPluginType[value.selection.kind] = value.spec;\n });\n\n // The previous hide query state for each panel kind\n const hideQueryState = useRef<HideQueryEditorState>({\n [value.selection.kind]: false,\n });\n\n const { defaultPluginKinds } = usePluginRegistry();\n const defaultPluginType = pluginTypes[0];\n const defaultPluginKind = defaultPluginType ? defaultPluginKinds?.[defaultPluginType] : undefined;\n const defaultPluginSelection =\n defaultPluginType && defaultPluginKind\n ? {\n type: defaultPluginType,\n kind: defaultPluginKind,\n }\n : undefined;\n const initPendingSelection = !value.selection && defaultPluginSelection ? defaultPluginSelection : undefined;\n\n // When kind changes and we haven't loaded that plugin before, we will need to enter a \"pending\" state so that we\n // can generate proper initial spec values that match the new plugin kind\n const [pendingSelection, setPendingSelection] = useState<PluginEditorSelection \| undefined>(initPendingSelection);\n\n // Take a default kind in case user write explicitly an empty kind in the initial value\n useEffect(() => {\n if (value.selection.kind === '') {\n value.selection.kind = defaultPluginKind \|\| '';\n }\n }, [value.selection, defaultPluginKind]);\n\n const { data: plugin, isFetching, error } = usePlugin(pendingSelection?.type, pendingSelection?.kind \|\| '');\n\n useEffect(() => {\n // Nothing to do if no new plugin kind is pending\n if (!pendingSelection) return;\n\n // Can't get spec value until we have a plugin\n if (plugin === undefined \|\| isFetching) return;\n\n // Fire an onChange to change to the pending kind with initial values from the plugin\n rememberCurrentSpecState();\n onChange({\n selection: pendingSelection,\n spec: plugin.createInitialOptions ? plugin.createInitialOptions() : {},\n });\n\n if (pendingSelection.type === 'Panel') {\n const panelPlugin = plugin as PanelPlugin;\n hideQueryState.current[pendingSelection.kind] = !!panelPlugin.hideQueryEditor;\n if (!!panelPlugin.hideQueryEditor !== hideQueryState.current[value.selection.kind]) {\n onHideQuery(!!panelPlugin.hideQueryEditor);\n }\n }\n setPendingSelection(undefined);\n }, [\n pendingSelection,\n plugin,\n isFetching,\n rememberCurrentSpecState,\n onChange,\n onHideQuery,\n hideQueryState,\n value.selection,\n ]);\n\n /\n When the user tries to change the plugin kind, make sure we have the correct spec for that plugin kind before we\n * make the switch.\n /\n const onSelectionChange: PluginKindSelectProps['onChange'] = (nextSelection) => {\n // If we already have state for this plugin type/kind from a previous selection, just use it\n const previousState = prevSpecState.current[nextSelection.type]?.[nextSelection.kind];\n if (previousState !== undefined) {\n rememberCurrentSpecState();\n onChange({\n selection: nextSelection,\n spec: previousState,\n });\n } else {\n // Otherwise, kick off the async loading process\n setPendingSelection(nextSelection);\n }\n\n if (\n nextSelection.type === 'Panel' &&\n hideQueryState.current[nextSelection.kind] !== undefined &&\n hideQueryState.current[value.selection.kind] !== hideQueryState.current[nextSelection.kind]\n ) {\n onHideQuery(!!hideQueryState.current[nextSelection.kind]);\n }\n };\n\n /\n Spec changes are independent and always just set the spec state.\n */\n const onSpecChange: PluginSpecEditorProps['onChange'] = (next) => {\n onChange(\n produce(value, (draft) => {\n draft.spec = next;\n })\n );\n };\n\n return {\n pendingSelection,\n isLoading: isFetching,\n error,\n onSelectionChange,\n onSpecChange,\n rememberCurrentSpecState,\n };\n}\n"],"names":["useState","useRef","useEffect","produce","usePlugin","usePluginRegistry","useEvent","usePluginEditor","props","pluginTypes","value","onHideQueryEditorChange","onChange","onHideQuery","prevSpecState","selection","type","kind","spec","rememberCurrentSpecState","byPluginType","current","undefined","hideQueryState","defaultPluginKinds","defaultPluginType","defaultPluginKind","defaultPluginSelection","initPendingSelection","pendingSelection","setPendingSelection","data","plugin","isFetching","error","createInitialOptions","panelPlugin","hideQueryEditor","onSelectionChange","nextSelection","previousState","onSpecChange","next","draft","isLoading"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { BoxProps } from '@mui/material';\nimport { DatasourceSpec, UnknownSpec } from '@perses-dev/spec';\nimport { produce } from 'immer';\nimport { useState, useRef, useEffect } from 'react';\n\nimport { PanelPlugin, PluginType } from '../../model';\nimport { usePlugin, usePluginRegistry } from '../../runtime';\nimport { useEvent } from '../../utils';\nimport { PluginKindSelectProps } from '../PluginKindSelect';\nimport { PluginSpecEditorProps } from '../PluginSpecEditor';\n\nexport interface PluginEditorSelection {\n type: PluginType;\n kind: string;\n}\n\nexport interface PluginEditorValue {\n selection: PluginEditorSelection;\n spec: UnknownSpec;\n}\n\n// Props on MUI Box that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' \| 'value' \| 'onChange';\n\nexport interface PluginEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n pluginTypes: PluginType[];\n pluginKindLabel: string;\n value: PluginEditorValue;\n isReadonly?: boolean;\n withRunQueryButton?: boolean;\n filteredQueryPlugins?: string[];\n onChange: (next: PluginEditorValue) => void;\n onRunQuery?: () => void;\n testConnection?: (spec: DatasourceSpec, healthCheckPath: string) => Promise<void>;\n}\n\nexport interface PluginEditorRef {\n flushChanges?: () => void;\n}\n\ntype PreviousSpecState = Record<string, Record<string, UnknownSpec>>;\ntype HideQueryEditorState = Record<string, boolean>;\n\n/*\n Props needed by the usePluginEditor hook.\n /\nexport type UsePluginEditorProps = Pick<PluginEditorProps, 'pluginTypes' \| 'value' \| 'onChange'> & {\n onHideQueryEditorChange?: (isHidden: boolean) => void;\n};\n\n/\n Returns the state/handlers that power the `PluginEditor` component. Useful for custom components that want to provide\n * a different UI, but want the same behavior of changing `kind` and `spec` together on plugin kind changes. Also\n * remembers previous `spec` values that it's seen, allowing and restores those values if a user switches the plugin\n * kind back.\n /\nexport function usePluginEditor(props: UsePluginEditorProps): {\n pendingSelection?: PluginEditorSelection;\n isLoading: boolean;\n error: Error \| null;\n onSelectionChange: (s: PluginEditorSelection) => void;\n onSpecChange: (next: UnknownSpec) => void;\n rememberCurrentSpecState: () => void;\n} {\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n const { pluginTypes, value, onHideQueryEditorChange = (): void => {} } = props; // setting onHideQueryEditorChange to empty function here because useEvent requires a function\n\n // Keep a stable reference, so we don't run the effect below when we don't need to\n const onChange = useEvent(props.onChange);\n const onHideQuery = useEvent(onHideQueryEditorChange);\n\n // The previous spec state for PluginType and kind and a helper function for remembering current values\n const prevSpecState = useRef<PreviousSpecState>({\n [value.selection.type]: { [value.selection.kind]: value.spec },\n });\n const rememberCurrentSpecState = useEvent(() => {\n let byPluginType = prevSpecState.current[value.selection.type];\n if (byPluginType === undefined) {\n byPluginType = {};\n prevSpecState.current[value.selection.type] = byPluginType;\n }\n byPluginType[value.selection.kind] = value.spec;\n });\n\n // The previous hide query state for each panel kind\n const hideQueryState = useRef<HideQueryEditorState>({\n [value.selection.kind]: false,\n });\n\n const { defaultPluginKinds } = usePluginRegistry();\n const defaultPluginType = pluginTypes[0];\n const defaultPluginKind = defaultPluginType ? defaultPluginKinds?.[defaultPluginType] : undefined;\n const defaultPluginSelection =\n defaultPluginType && defaultPluginKind\n ? {\n type: defaultPluginType,\n kind: defaultPluginKind,\n }\n : undefined;\n const initPendingSelection = !value.selection && defaultPluginSelection ? defaultPluginSelection : undefined;\n\n // When kind changes and we haven't loaded that plugin before, we will need to enter a \"pending\" state so that we\n // can generate proper initial spec values that match the new plugin kind\n const [pendingSelection, setPendingSelection] = useState<PluginEditorSelection \| undefined>(initPendingSelection);\n\n // Take a default kind in case user write explicitly an empty kind in the initial value\n useEffect(() => {\n if (value.selection.kind === '') {\n value.selection.kind = defaultPluginKind \|\| '';\n }\n }, [value.selection, defaultPluginKind]);\n\n const { data: plugin, isFetching, error } = usePlugin(pendingSelection?.type, pendingSelection?.kind \|\| '');\n\n useEffect(() => {\n // Nothing to do if no new plugin kind is pending\n if (!pendingSelection) return;\n\n // Can't get spec value until we have a plugin\n if (plugin === undefined \|\| isFetching) return;\n\n // Fire an onChange to change to the pending kind with initial values from the plugin\n rememberCurrentSpecState();\n onChange({\n selection: pendingSelection,\n spec: plugin.createInitialOptions ? plugin.createInitialOptions() : {},\n });\n\n if (pendingSelection.type === 'Panel') {\n const panelPlugin = plugin as PanelPlugin;\n hideQueryState.current[pendingSelection.kind] = !!panelPlugin.hideQueryEditor;\n if (!!panelPlugin.hideQueryEditor !== hideQueryState.current[value.selection.kind]) {\n onHideQuery(!!panelPlugin.hideQueryEditor);\n }\n }\n setPendingSelection(undefined);\n }, [\n pendingSelection,\n plugin,\n isFetching,\n rememberCurrentSpecState,\n onChange,\n onHideQuery,\n hideQueryState,\n value.selection,\n ]);\n\n /\n When the user tries to change the plugin kind, make sure we have the correct spec for that plugin kind before we\n * make the switch.\n /\n const onSelectionChange: PluginKindSelectProps['onChange'] = (nextSelection) => {\n // If we already have state for this plugin type/kind from a previous selection, just use it\n const previousState = prevSpecState.current[nextSelection.type]?.[nextSelection.kind];\n if (previousState !== undefined) {\n rememberCurrentSpecState();\n onChange({\n selection: nextSelection,\n spec: previousState,\n });\n } else {\n // Otherwise, kick off the async loading process\n setPendingSelection(nextSelection);\n }\n\n if (\n nextSelection.type === 'Panel' &&\n hideQueryState.current[nextSelection.kind] !== undefined &&\n hideQueryState.current[value.selection.kind] !== hideQueryState.current[nextSelection.kind]\n ) {\n onHideQuery(!!hideQueryState.current[nextSelection.kind]);\n }\n };\n\n /\n Spec changes are independent and always just set the spec state.\n */\n const onSpecChange: PluginSpecEditorProps['onChange'] = (next) => {\n onChange(\n produce(value, (draft) => {\n draft.spec = next;\n }),\n );\n };\n\n return {\n pendingSelection,\n isLoading: isFetching,\n error,\n onSelectionChange,\n onSpecChange,\n rememberCurrentSpecState,\n };\n}\n"],"names":["produce","useState","useRef","useEffect","usePlugin","usePluginRegistry","useEvent","usePluginEditor","props","pluginTypes","value","onHideQueryEditorChange","onChange","onHideQuery","prevSpecState","selection","type","kind","spec","rememberCurrentSpecState","byPluginType","current","undefined","hideQueryState","defaultPluginKinds","defaultPluginType","defaultPluginKind","defaultPluginSelection","initPendingSelection","pendingSelection","setPendingSelection","data","plugin","isFetching","error","createInitialOptions","panelPlugin","hideQueryEditor","onSelectionChange","nextSelection","previousState","onSpecChange","next","draft","isLoading"],"mappings":"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"}