@perses-dev/plugin-system 0.54.0-beta.1 → 0.54.0-beta.11

package/dist/components/MultiQueryEditor/QueryEditorContainer.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,16 +11,19 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { produce } from 'immer';
-import { Stack, IconButton, Typography, Box, CircularProgress } from '@mui/material';
+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 } from 'react';
+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 CheckIcon from 'mdi-material-ui/Check';
+import CloseIcon from 'mdi-material-ui/Close';
 import { PluginEditor } from '../PluginEditor';
+import { defaultQueryName } from './utils';
 /**
  * Container for a query editor. This component is responsible for rendering the query editor, and make it collapsible
  * to not take too much space.
@@ -33,6 +37,16 @@ import { PluginEditor } from '../PluginEditor';
  * @constructor
  */ export const QueryEditorContainer = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { queryTypes, index, query, queryResult, filteredQueryPlugins, isCollapsed, onDelete, onChange, onQueryRun, onCollapseExpand } = props;
+    // The displayed name is always derived from props so it stays in sync with the
+    // current query/index, even when queries are added, removed or reordered.
+    const displayedName = query.spec.name ?? defaultQueryName(index);
+    const [isEditingName, setIsEditingName] = useState(false);
+    function handleNameSave(name) {
+        setIsEditingName(false);
+        onChange(index, produce(query, (draft)=>{
+            draft.spec.name = name;
+        }));
+    }
     return /*#__PURE__*/ _jsxs(Stack, {
         spacing: 1,
         children: [
@@ -45,19 +59,40 @@ import { PluginEditor } from '../PluginEditor';
                 children: [
                     /*#__PURE__*/ _jsxs(Stack, {
                         direction: "row",
+                        gap: 1,
+                        sx: {
+                            width: '100%'
+                        },
                         children: [
                             /*#__PURE__*/ _jsx(IconButton, {
                                 size: "small",
+                                sx: {
+                                    width: 'fit-content',
+                                    height: 'fit-content'
+                                },
                                 onClick: ()=>onCollapseExpand(index),
                                 children: isCollapsed ? /*#__PURE__*/ _jsx(ChevronRight, {}) : /*#__PURE__*/ _jsx(ChevronDown, {})
                             }),
-                            /*#__PURE__*/ _jsxs(Typography, {
-                                variant: "overline",
-                                component: "h4",
-                                children: [
-                                    "Query #",
-                                    index + 1
-                                ]
+                            /*#__PURE__*/ _jsx(Stack, {
+                                direction: "row",
+                                gap: 1,
+                                alignItems: "center",
+                                alignContent: "center",
+                                sx: {
+                                    width: '100%',
+                                    '&:hover button': {
+                                        visibility: 'visible'
+                                    }
+                                },
+                                children: isEditingName ? /*#__PURE__*/ _jsx(QueryNameInput, {
+                                    initialName: displayedName,
+                                    onSave: handleNameSave,
+                                    onCancel: ()=>setIsEditingName(false)
+                                }, displayedName) : /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "overline",
+                                    component: "h4",
+                                    children: displayedName
+                                })
                             })
                         ]
                     }),
@@ -101,11 +136,24 @@ import { PluginEditor } from '../PluginEditor';
                                     ]
                                 })
                             }),
-                            onDelete && /*#__PURE__*/ _jsx(IconButton, {
-                                "aria-label": "delete query",
-                                size: "small",
-                                onClick: ()=>onDelete && onDelete(index),
-                                children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                children: [
+                                    !isEditingName && /*#__PURE__*/ _jsx(IconButton, {
+                                        "aria-label": "edit query name",
+                                        size: "small",
+                                        onClick: ()=>setIsEditingName(true),
+                                        children: /*#__PURE__*/ _jsx(PencilIcon, {
+                                            fontSize: "small"
+                                        })
+                                    }),
+                                    onDelete && /*#__PURE__*/ _jsx(IconButton, {
+                                        "aria-label": "delete query",
+                                        size: "small",
+                                        onClick: ()=>onDelete && onDelete(index),
+                                        children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                                    })
+                                ]
                             })
                         ]
                     })
@@ -123,6 +171,43 @@ import { PluginEditor } from '../PluginEditor';
     }, index);
 });
 QueryEditorContainer.displayName = 'QueryEditorContainer';
+/**
+ * Self-contained input to edit a query name. The draft value is local state seeded from
+ * `initialName`; callers reset it by changing the `key` (remounting) rather than syncing
+ * with an useEffect.
+ */ function QueryNameInput({ initialName, onSave, onCancel }) {
+    const [draftName, setDraftName] = useState(initialName);
+    return /*#__PURE__*/ _jsx(TextField, {
+        size: "small",
+        variant: "outlined",
+        label: "Query name",
+        "aria-label": "query name",
+        value: draftName,
+        onChange: (e)=>setDraftName(e.target.value),
+        fullWidth: true,
+        InputProps: {
+            endAdornment: /*#__PURE__*/ _jsxs(InputAdornment, {
+                position: "end",
+                children: [
+                    /*#__PURE__*/ _jsx(IconButton, {
+                        size: "small",
+                        "aria-label": "cancel edit",
+                        onClick: onCancel,
+                        edge: "end",
+                        children: /*#__PURE__*/ _jsx(CloseIcon, {})
+                    }),
+                    /*#__PURE__*/ _jsx(IconButton, {
+                        size: "small",
+                        "aria-label": "save query name",
+                        onClick: ()=>onSave(draftName),
+                        edge: "end",
+                        children: /*#__PURE__*/ _jsx(CheckIcon, {})
+                    })
+                ]
+            })
+        }
+    });
+}
 /**
  * Editor for a query definition. This component is responsible for rendering the plugin editor for the given query.
  * This will allow user to select a plugin extending from the given supported query types, and then edit the plugin

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

@@ -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 { Stack, IconButton, Typography, BoxProps, Box, CircularProgress } 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 } from 'react';\nimport AlertIcon from 'mdi-material-ui/Alert';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { QueryData } from '../../runtime';\nimport { PluginEditor, PluginEditorProps, PluginEditorRef } from '../PluginEditor';\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    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\">\n            <IconButton size=\"small\" onClick={() => onCollapseExpand(index)}>\n              {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n            </IconButton>\n            <Typography variant=\"overline\" component=\"h4\">\n              Query #{index + 1}\n            </Typography>\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            {onDelete && (\n              <IconButton aria-label=\"delete query\" size=\"small\" onClick={() => onDelete && onDelete(index)}>\n                <DeleteIcon />\n              </IconButton>\n            )}\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// 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","DeleteIcon","ChevronDown","ChevronRight","forwardRef","AlertIcon","InfoTooltip","PluginEditor","QueryEditorContainer","props","ref","queryTypes","index","query","queryResult","filteredQueryPlugins","isCollapsed","onDelete","onChange","onQueryRun","onCollapseExpand","spacing","direction","alignItems","justifyContent","borderBottom","borderColor","theme","palette","divider","size","onClick","variant","component","isFetching","aria-label","error","description","message","sx","color","main","maxWidth","whiteSpace","overflow","textOverflow","content","QueryEditor","value","next","displayName","others","handlePluginChange","draft","kind","selection","type","spec","plugin","pluginTypes","pluginKindLabel","withRunQueryButton","onRunQuery"],"mappings":"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"}
+{"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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"}

package/dist/components/MultiQueryEditor/index.d.ts

@@ -1,2 +1,3 @@
 export * from './MultiQueryEditor';
+export * from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/MultiQueryEditor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultiQueryEditor/index.tsx"],"names":[],"mappings":"AAaA,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultiQueryEditor/index.tsx"],"names":[],"mappings":"AAaA,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC"}

package/dist/components/MultiQueryEditor/index.js

@@ -11,5 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 export * from './MultiQueryEditor';
+export * from './utils';
 
 //# sourceMappingURL=index.js.map

package/dist/components/MultiQueryEditor/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MultiQueryEditor/index.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\nexport * from './MultiQueryEditor';\n"],"names":[],"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,cAAc,qBAAqB"}
+{"version":3,"sources":["../../../src/components/MultiQueryEditor/index.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\nexport * from './MultiQueryEditor';\nexport * from './utils';\n"],"names":[],"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,cAAc,qBAAqB;AACnC,cAAc,UAAU"}

package/dist/components/MultiQueryEditor/utils.d.ts

@@ -0,0 +1,8 @@
+import { QueryDefinition } from '@perses-dev/spec';
+export declare function defaultQueryName(index: number): string;
+/**
+ * Returns the display name of each query definition, falling back to a default
+ * name based on the query position when no explicit name is set.
+ */
+export declare function generateQueryNames(definitions: QueryDefinition[]): string[];
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/MultiQueryEditor/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/MultiQueryEditor/utils.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEtD;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,eAAe,EAAE,GAAG,MAAM,EAAE,CAE3E"}

package/dist/components/MultiQueryEditor/utils.js

@@ -0,0 +1,23 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export function defaultQueryName(index) {
+    return `Query #${index + 1}`;
+}
+/**
+ * Returns the display name of each query definition, falling back to a default
+ * name based on the query position when no explicit name is set.
+ */ export function generateQueryNames(definitions) {
+    return definitions.map((queryDef, index)=>queryDef.spec.name ?? defaultQueryName(index));
+}
+
+//# sourceMappingURL=utils.js.map

package/dist/components/MultiQueryEditor/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/MultiQueryEditor/utils.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 { QueryDefinition } from '@perses-dev/spec';\n\nexport function defaultQueryName(index: number): string {\n  return `Query #${index + 1}`;\n}\n\n/**\n * Returns the display name of each query definition, falling back to a default\n * name based on the query position when no explicit name is set.\n */\nexport function generateQueryNames(definitions: QueryDefinition[]): string[] {\n  return definitions.map((queryDef: QueryDefinition, index: number) => queryDef.spec.name ?? defaultQueryName(index));\n}\n"],"names":["defaultQueryName","index","generateQueryNames","definitions","map","queryDef","spec","name"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAIjC,OAAO,SAASA,iBAAiBC,KAAa;IAC5C,OAAO,CAAC,OAAO,EAAEA,QAAQ,GAAG;AAC9B;AAEA;;;CAGC,GACD,OAAO,SAASC,mBAAmBC,WAA8B;IAC/D,OAAOA,YAAYC,GAAG,CAAC,CAACC,UAA2BJ,QAAkBI,SAASC,IAAI,CAACC,IAAI,IAAIP,iBAAiBC;AAC9G"}

package/dist/components/OptionsEditorRadios/OptionsEditorRadios.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { FormControl, FormControlLabel, Radio, RadioGroup, Box } from '@mui/material';
 import { useState } from 'react';
 import { OptionsEditorTabPanel } from '../OptionsEditorTabPanel';

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

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

package/dist/components/OptionsEditorTabPanel/OptionsEditorTabPanel.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 export function OptionsEditorTabPanel(props) {
     const { children, value, index, ...other } = props;

package/dist/components/OptionsEditorTabPanel/OptionsEditorTabPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/OptionsEditorTabPanel/OptionsEditorTabPanel.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 } from '@mui/material';\nimport { ReactElement } from 'react';\n\ninterface OptionsEditorTabPanelProps {\n  children: React.ReactNode;\n  index: number;\n  value: number;\n}\n\nexport function OptionsEditorTabPanel(props: OptionsEditorTabPanelProps): ReactElement {\n  const { children, value, index, ...other } = props;\n\n  const isActive = value === index;\n\n  return (\n    <div\n      role=\"tabpanel\"\n      hidden={!isActive}\n      id={`options-editor-tabpanel-${index}`}\n      aria-labelledby={`options-editor-tab-${index}`}\n      {...other}\n    >\n      {isActive && <Box mt={2}>{children}</Box>}\n    </div>\n  );\n}\n"],"names":["Box","OptionsEditorTabPanel","props","children","value","index","other","isActive","div","role","hidden","id","aria-labelledby","mt"],"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,QAAQ,gBAAgB;AASpC,OAAO,SAASC,sBAAsBC,KAAiC;IACrE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGC,OAAO,GAAGJ;IAE7C,MAAMK,WAAWH,UAAUC;IAE3B,qBACE,KAACG;QACCC,MAAK;QACLC,QAAQ,CAACH;QACTI,IAAI,CAAC,wBAAwB,EAAEN,OAAO;QACtCO,mBAAiB,CAAC,mBAAmB,EAAEP,OAAO;QAC7C,GAAGC,KAAK;kBAERC,0BAAY,KAACP;YAAIa,IAAI;sBAAIV;;;AAGhC"}
+{"version":3,"sources":["../../../src/components/OptionsEditorTabPanel/OptionsEditorTabPanel.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 } from '@mui/material';\nimport { ReactElement } from 'react';\n\ninterface OptionsEditorTabPanelProps {\n  children: React.ReactNode;\n  index: number;\n  value: number;\n}\n\nexport function OptionsEditorTabPanel(props: OptionsEditorTabPanelProps): ReactElement {\n  const { children, value, index, ...other } = props;\n\n  const isActive = value === index;\n\n  return (\n    <div\n      role=\"tabpanel\"\n      hidden={!isActive}\n      id={`options-editor-tabpanel-${index}`}\n      aria-labelledby={`options-editor-tab-${index}`}\n      {...other}\n    >\n      {isActive && <Box mt={2}>{children}</Box>}\n    </div>\n  );\n}\n"],"names":["Box","OptionsEditorTabPanel","props","children","value","index","other","isActive","div","role","hidden","id","aria-labelledby","mt"],"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,QAAQ,gBAAgB;AASpC,OAAO,SAASC,sBAAsBC,KAAiC;IACrE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGC,OAAO,GAAGJ;IAE7C,MAAMK,WAAWH,UAAUC;IAE3B,qBACE,KAACG;QACCC,MAAK;QACLC,QAAQ,CAACH;QACTI,IAAI,CAAC,wBAAwB,EAAEN,OAAO;QACtCO,mBAAiB,CAAC,mBAAmB,EAAEP,OAAO;QAC7C,GAAGC,KAAK;kBAERC,0BAAY,KAACP;YAAIa,IAAI;sBAAIV;;;AAGhC"}

package/dist/components/OptionsEditorTabs/OptionsEditorTabs.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Tab, Tabs, Box } from '@mui/material';
 import { useState } from 'react';
 import { OptionsEditorTabPanel } from '../OptionsEditorTabPanel';

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"PanelSpecEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpG,OAAO,EAAE,OAAO,EAAc,MAAM,iBAAiB,CAAC;AAMtD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,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,kHA0G1B,CAAC"}
+{"version":3,"file":"PanelSpecEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpG,OAAO,EAAE,OAAO,EAAc,MAAM,iBAAiB,CAAC;AAMtD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,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,kHAsG1B,CAAC"}

package/dist/components/PanelSpecEditor/PanelSpecEditor.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,11 +11,10 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
 import { ErrorAlert, JSONEditor, LinksEditor } from '@perses-dev/components';
 import { Controller } from 'react-hook-form';
 import { forwardRef } from 'react';
-import { QueryCountProvider, useDataQueriesContext, usePlugin } from '../../runtime';
+import { useDataQueriesContext, usePlugin } from '../../runtime';
 import { OptionsEditorTabs } from '../OptionsEditorTabs';
 import { MultiQueryEditor } from '../MultiQueryEditor';
 export const PanelSpecEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
@@ -99,12 +99,9 @@ export const PanelSpecEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
                 })
         })
     });
-    return /*#__PURE__*/ _jsx(QueryCountProvider, {
-        queryCount: (panelDefinition.spec.queries ?? []).length,
-        children: /*#__PURE__*/ _jsx(OptionsEditorTabs, {
-            tabs: tabs
-        }, tabs.length)
-    });
+    return /*#__PURE__*/ _jsx(OptionsEditorTabs, {
+        tabs: tabs
+    }, tabs.length);
 });
 PanelSpecEditor.displayName = 'PanelSpecEditor';
 

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

@@ -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, LinksEditor } from '@perses-dev/components';\nimport { PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/spec';\nimport { Control, Controller } from 'react-hook-form';\nimport { forwardRef, ReactElement } from 'react';\nimport { QueryCountProvider, useDataQueriesContext, usePlugin } from '../../runtime';\nimport { PanelPlugin } from '../../model';\nimport { OptionsEditorTabsProps, OptionsEditorTabs } from '../OptionsEditorTabs';\nimport { MultiQueryEditor } from '../MultiQueryEditor';\nimport { PluginEditorRef } from '../PluginEditor';\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 } = 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  // 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 (\n    <QueryCountProvider queryCount={(panelDefinition.spec.queries ?? []).length}>\n      <OptionsEditorTabs key={tabs.length} tabs={tabs} />\n    </QueryCountProvider>\n  );\n});\n\nPanelSpecEditor.displayName = 'PanelSpecEditor';\n"],"names":["ErrorAlert","JSONEditor","LinksEditor","Controller","forwardRef","QueryCountProvider","useDataQueriesContext","usePlugin","OptionsEditorTabs","MultiQueryEditor","PanelSpecEditor","props","ref","control","panelDefinition","onQueriesChange","onQueryRun","onPluginSpecChange","onJSONChange","kind","spec","plugin","data","isLoading","error","queryResults","Error","panelOptionsEditorComponents","hideQueryEditor","tabs","push","label","content","name","render","field","queryTypes","supportedQueryTypes","queries","onChange","index","query","JSON","stringify","refetch","concat","map","OptionsEditorComponent","value","maxHeight","json","parse","queryCount","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,EAAEC,WAAW,QAAQ,yBAAyB;AAE7E,SAAkBC,UAAU,QAAQ,kBAAkB;AACtD,SAASC,UAAU,QAAsB,QAAQ;AACjD,SAASC,kBAAkB,EAAEC,qBAAqB,EAAEC,SAAS,QAAQ,gBAAgB;AAErF,SAAiCC,iBAAiB,QAAQ,uBAAuB;AACjF,SAASC,gBAAgB,QAAQ,sBAAsB;AAYvD,OAAO,MAAMC,gCAAkBN,WAAkD,CAACO,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,GAAGjB,UAAU,SAASY;IAE9D,MAAM,EAAEM,YAAY,EAAE,GAAGnB;IAEzB,IAAIkB,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,EAAE,GAAGP;IAC1D,IAAIQ,OAAuC,EAAE;IAE7C,IAAI,CAACD,iBAAiB;QACpBC,KAAKC,IAAI,CAAC;YACRC,OAAO;YACPC,uBACE,KAAC7B;gBACCU,SAASA;gBACToB,MAAK;gBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAAC1B;wBACCG,KAAKA;wBACLwB,YAAYf,OAAOgB,mBAAmB,IAAI,EAAE;wBAC5CC,SAASxB,gBAAgBM,IAAI,CAACkB,OAAO,IAAI,EAAE;wBAC3Cb,cAAcA;wBACdc,UAAU,CAACD;4BACTH,MAAMI,QAAQ,CAACD;4BACfvB,gBAAgBuB;wBAClB;wBACAtB,YAAY,CAACwB,OAAOC;4BAClBzB,WAAWwB,OAAOC;4BAClB,sDAAsD;4BACtD,IAAIC,KAAKC,SAAS,CAAC7B,gBAAgBM,IAAI,CAACkB,OAAO,EAAE,CAACE,MAAM,MAAME,KAAKC,SAAS,CAACF,QAAQ;gCACnFhB,YAAY,CAACe,MAAM,EAAEI;4BACvB;wBACF;;;QAKV;IACF;IAEA,IAAIjB,8BAA8B;QAChCE,OAAOA,KAAKgB,MAAM,CAChBlB,6BAA6BmB,GAAG,CAAC,CAAC,EAAEf,KAAK,EAAEC,SAASe,sBAAsB,EAAE,GAAM,CAAA;gBAChFhB;gBACAC,uBACE,KAAC7B;oBACCU,SAASA;oBACToB,MAAK;oBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAACY;4BACCC,OAAOlC,gBAAgBM,IAAI,CAACC,MAAM,CAACD,IAAI;4BACvCmB,UAAU,CAACnB;gCACTe,MAAMI,QAAQ,CAACnB;gCACfH,mBAAmBG;4BACrB;;;YAKV,CAAA;IAEJ;IAEA,sDAAsD;IACtDS,KAAKC,IAAI,CAAC;QACRC,OAAO;QACPC,uBAAS,KAAC9B;YAAYW,SAASA;;IACjC;IACAgB,KAAKC,IAAI,CAAC;QACRC,OAAO;QACPC,uBACE,KAAC7B;YACCU,SAASA;YACToB,MAAK;YACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAAClC;oBACCgD,WAAU;oBACVD,OAAOlC;oBACPyB,UAAU,CAACW;wBACTf,MAAMI,QAAQ,CAACG,KAAKS,KAAK,CAACD;wBAC1BhC,aAAagC;oBACf;;;IAKV;IAEA,qBACE,KAAC7C;QAAmB+C,YAAY,AAACtC,CAAAA,gBAAgBM,IAAI,CAACkB,OAAO,IAAI,EAAE,AAAD,EAAGe,MAAM;kBACzE,cAAA,KAAC7C;YAAoCqB,MAAMA;WAAnBA,KAAKwB,MAAM;;AAGzC,GAAG;AAEH3C,gBAAgB4C,WAAW,GAAG"}
+{"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, LinksEditor } from '@perses-dev/components';\nimport { PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/spec';\nimport { Control, Controller } from 'react-hook-form';\nimport { forwardRef, ReactElement } from 'react';\nimport { useDataQueriesContext, usePlugin } from '../../runtime';\nimport { PanelPlugin } from '../../model';\nimport { OptionsEditorTabsProps, OptionsEditorTabs } from '../OptionsEditorTabs';\nimport { MultiQueryEditor } from '../MultiQueryEditor';\nimport { PluginEditorRef } from '../PluginEditor';\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 } = 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  // 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","LinksEditor","Controller","forwardRef","useDataQueriesContext","usePlugin","OptionsEditorTabs","MultiQueryEditor","PanelSpecEditor","props","ref","control","panelDefinition","onQueriesChange","onQueryRun","onPluginSpecChange","onJSONChange","kind","spec","plugin","data","isLoading","error","queryResults","Error","panelOptionsEditorComponents","hideQueryEditor","tabs","push","label","content","name","render","field","queryTypes","supportedQueryTypes","queries","onChange","index","query","JSON","stringify","refetch","concat","map","OptionsEditorComponent","value","maxHeight","json","parse","length","displayName"],"mappings":"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"}

package/dist/components/PluginEditor/PluginEditor.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Button } from '@mui/material';
 import Reload from 'mdi-material-ui/Reload';
 import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';

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

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

package/dist/components/PluginKindSelect/PluginKindSelect.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MenuItem, TextField } from '@mui/material';
 import { forwardRef, useCallback, useMemo } from 'react';
 import { useListPluginMetadata } from '../../runtime';

package/dist/components/PluginKindSelect/PluginKindSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PluginKindSelect/PluginKindSelect.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 { MenuItem, TextField, TextFieldProps } from '@mui/material';\nimport { forwardRef, ReactElement, useCallback, useMemo } from 'react';\nimport { PluginType } from '../../model';\nimport { useListPluginMetadata } from '../../runtime';\nimport { PluginEditorSelection } from '../PluginEditor';\n\nexport interface PluginKindSelectProps extends Omit<TextFieldProps, 'value' | 'onChange' | 'children'> {\n  filteredQueryPlugins?: string[];\n  pluginTypes: PluginType[];\n  value?: PluginEditorSelection;\n  onChange?: (s: PluginEditorSelection) => void;\n}\n\n/**\n * Displays a MUI Select input for selecting a plugin's kind from a list of all the available plugins of some specific\n * plugin types. (e.g. \"Show a list of all the Panel plugins\", or \"Show a list of all the Variable plugins\", or \"Show\n * a list of all the TimeSeriesQuery, TraceQuery, ProfileQuery, and LogQuery plugins\").\n * The value of the select is the kind of the plugin, but you can also listen to the `onPluginTypeChange` event to know\n * when the user changes the plugin type (it fires at start for the default value.)\n */\nexport const PluginKindSelect = forwardRef((props: PluginKindSelectProps, ref): ReactElement => {\n  const { pluginTypes, value: propValue, onChange, filteredQueryPlugins, ...others } = props;\n  const { data, isLoading } = useListPluginMetadata(pluginTypes);\n\n  const sortedData = useMemo(() => {\n    if (filteredQueryPlugins?.length) {\n      return data\n        ?.filter((i) => filteredQueryPlugins.includes(i.spec.name))\n        ?.sort((a, b) => a.spec.display.name.localeCompare(b.spec.display.name));\n    }\n\n    return data?.sort((a, b) => a.spec.display.name.localeCompare(b.spec.display.name));\n  }, [data, filteredQueryPlugins]);\n\n  // Pass an empty value while options are still loading so MUI doesn't complain about us using an \"out of range\" value\n  const value = !propValue || isLoading ? '' : selectionToOptionValue(propValue);\n\n  const handleChange = (event: { target: { value: string } }): void => {\n    onChange?.(optionValueToSelection(event.target.value));\n  };\n\n  const renderValue = useCallback(\n    (selected: unknown) => {\n      if (selected === '') {\n        return '';\n      }\n      const selectedValue = optionValueToSelection(selected as string);\n      return sortedData?.find((v) => v.kind === selectedValue.type && v.spec.name === selectedValue.kind)?.spec.display\n        .name;\n    },\n    [sortedData]\n  );\n\n  // TODO: Does this need a loading indicator of some kind?\n  return (\n    <TextField\n      select\n      inputRef={ref}\n      {...others}\n      value={value}\n      aria-label={value}\n      onChange={handleChange}\n      SelectProps={{ renderValue }}\n      data-testid=\"plugin-kind-select\"\n    >\n      {isLoading && <MenuItem value=\"\">Loading...</MenuItem>}\n      {sortedData?.map((metadata) => (\n        <MenuItem\n          data-testid=\"option\"\n          key={metadata.kind + metadata.spec.name}\n          value={selectionToOptionValue({ type: metadata.kind, kind: metadata.spec.name })}\n        >\n          {metadata.spec.display.name}\n        </MenuItem>\n      ))}\n    </TextField>\n  );\n});\nPluginKindSelect.displayName = 'PluginKindSelect';\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n/**\n * Given a PluginEditorSelection,\n * returns a string value like `{type}_____{kind}` that can be used as a Select input value.\n * @param selector\n */\nfunction selectionToOptionValue(selector: PluginEditorSelection): string {\n  return [selector.type, selector.kind].join(OPTION_VALUE_DELIMITER);\n}\n\n/**\n * Given an option value name like `{type}_____{kind}`,\n * returns a PluginEditorSelection to be used by the query data model.\n * @param optionValue\n */\nfunction optionValueToSelection(optionValue: string): PluginEditorSelection {\n  const words = optionValue.split(OPTION_VALUE_DELIMITER);\n  const type = words[0] as PluginType | undefined;\n  const kind = words[1];\n  if (type === undefined || kind === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    type,\n    kind,\n  };\n}\n"],"names":["MenuItem","TextField","forwardRef","useCallback","useMemo","useListPluginMetadata","PluginKindSelect","props","ref","pluginTypes","value","propValue","onChange","filteredQueryPlugins","others","data","isLoading","sortedData","length","filter","i","includes","spec","name","sort","a","b","display","localeCompare","selectionToOptionValue","handleChange","event","optionValueToSelection","target","renderValue","selected","selectedValue","find","v","kind","type","select","inputRef","aria-label","SelectProps","data-testid","map","metadata","displayName","OPTION_VALUE_DELIMITER","selector","join","optionValue","words","split","undefined","Error"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PluginKindSelect/PluginKindSelect.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 { MenuItem, TextField, TextFieldProps } from '@mui/material';\nimport { forwardRef, ReactElement, useCallback, useMemo } from 'react';\nimport { PluginType } from '../../model';\nimport { useListPluginMetadata } from '../../runtime';\nimport { PluginEditorSelection } from '../PluginEditor';\n\nexport interface PluginKindSelectProps extends Omit<TextFieldProps, 'value' | 'onChange' | 'children'> {\n  filteredQueryPlugins?: string[];\n  pluginTypes: PluginType[];\n  value?: PluginEditorSelection;\n  onChange?: (s: PluginEditorSelection) => void;\n}\n\n/**\n * Displays a MUI Select input for selecting a plugin's kind from a list of all the available plugins of some specific\n * plugin types. (e.g. \"Show a list of all the Panel plugins\", or \"Show a list of all the Variable plugins\", or \"Show\n * a list of all the TimeSeriesQuery, TraceQuery, ProfileQuery, and LogQuery plugins\").\n * The value of the select is the kind of the plugin, but you can also listen to the `onPluginTypeChange` event to know\n * when the user changes the plugin type (it fires at start for the default value.)\n */\nexport const PluginKindSelect = forwardRef((props: PluginKindSelectProps, ref): ReactElement => {\n  const { pluginTypes, value: propValue, onChange, filteredQueryPlugins, ...others } = props;\n  const { data, isLoading } = useListPluginMetadata(pluginTypes);\n\n  const sortedData = useMemo(() => {\n    if (filteredQueryPlugins?.length) {\n      return data\n        ?.filter((i) => filteredQueryPlugins.includes(i.spec.name))\n        ?.sort((a, b) => a.spec.display.name.localeCompare(b.spec.display.name));\n    }\n\n    return data?.sort((a, b) => a.spec.display.name.localeCompare(b.spec.display.name));\n  }, [data, filteredQueryPlugins]);\n\n  // Pass an empty value while options are still loading so MUI doesn't complain about us using an \"out of range\" value\n  const value = !propValue || isLoading ? '' : selectionToOptionValue(propValue);\n\n  const handleChange = (event: { target: { value: string } }): void => {\n    onChange?.(optionValueToSelection(event.target.value));\n  };\n\n  const renderValue = useCallback(\n    (selected: unknown) => {\n      if (selected === '') {\n        return '';\n      }\n      const selectedValue = optionValueToSelection(selected as string);\n      return sortedData?.find((v) => v.kind === selectedValue.type && v.spec.name === selectedValue.kind)?.spec.display\n        .name;\n    },\n    [sortedData]\n  );\n\n  // TODO: Does this need a loading indicator of some kind?\n  return (\n    <TextField\n      select\n      inputRef={ref}\n      {...others}\n      value={value}\n      aria-label={value}\n      onChange={handleChange}\n      SelectProps={{ renderValue }}\n      data-testid=\"plugin-kind-select\"\n    >\n      {isLoading && <MenuItem value=\"\">Loading...</MenuItem>}\n      {sortedData?.map((metadata) => (\n        <MenuItem\n          data-testid=\"option\"\n          key={metadata.kind + metadata.spec.name}\n          value={selectionToOptionValue({ type: metadata.kind, kind: metadata.spec.name })}\n        >\n          {metadata.spec.display.name}\n        </MenuItem>\n      ))}\n    </TextField>\n  );\n});\nPluginKindSelect.displayName = 'PluginKindSelect';\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n/**\n * Given a PluginEditorSelection,\n * returns a string value like `{type}_____{kind}` that can be used as a Select input value.\n * @param selector\n */\nfunction selectionToOptionValue(selector: PluginEditorSelection): string {\n  return [selector.type, selector.kind].join(OPTION_VALUE_DELIMITER);\n}\n\n/**\n * Given an option value name like `{type}_____{kind}`,\n * returns a PluginEditorSelection to be used by the query data model.\n * @param optionValue\n */\nfunction optionValueToSelection(optionValue: string): PluginEditorSelection {\n  const words = optionValue.split(OPTION_VALUE_DELIMITER);\n  const type = words[0] as PluginType | undefined;\n  const kind = words[1];\n  if (type === undefined || kind === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    type,\n    kind,\n  };\n}\n"],"names":["MenuItem","TextField","forwardRef","useCallback","useMemo","useListPluginMetadata","PluginKindSelect","props","ref","pluginTypes","value","propValue","onChange","filteredQueryPlugins","others","data","isLoading","sortedData","length","filter","i","includes","spec","name","sort","a","b","display","localeCompare","selectionToOptionValue","handleChange","event","optionValueToSelection","target","renderValue","selected","selectedValue","find","v","kind","type","select","inputRef","aria-label","SelectProps","data-testid","map","metadata","displayName","OPTION_VALUE_DELIMITER","selector","join","optionValue","words","split","undefined","Error"],"mappings":"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"}