@perses-dev/plugin-system 0.54.0-beta.7 → 0.54.0-beta.9

package/dist/components/MultiQueryEditor/QueryEditorContainer.js

@@ -12,14 +12,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { 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":";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,OAAO,QAAQ,QAAQ;AAEhC,SACEC,KAAK,EACLC,UAAU,EACVC,UAAU,EAEVC,GAAG,EACHC,gBAAgB,EAChBC,SAAS,EACTC,cAAc,QACT,gBAAgB;AACvB,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,kBAAkB,+BAA+B;AACxD,SAASC,UAAU,EAAgBC,QAAQ,QAAQ,QAAQ;AAC3D,OAAOC,eAAe,wBAAwB;AAC9C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,OAAOC,gBAAgB,yBAAyB;AAChD,OAAOC,eAAe,wBAAwB;AAC9C,OAAOC,eAAe,wBAAwB;AAE9C,SAASC,YAAY,QAA4C,kBAAkB;AACnF,SAASC,gBAAgB,QAAQ,UAAU;AAkB3C;;;;;;;;;;;CAWC,GAED,OAAO,MAAMC,qCAAuBT,WAClC,CAACU,OAAOC;IACN,MAAM,EACJC,UAAU,EACVC,KAAK,EACLC,KAAK,EACLC,WAAW,EACXC,oBAAoB,EACpBC,WAAW,EACXC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACVC,gBAAgB,EACjB,GAAGX;IAEJ,+EAA+E;IAC/E,0EAA0E;IAC1E,MAAMY,gBAAgBR,MAAMS,IAAI,CAACC,IAAI,IAAIhB,iBAAiBK;IAE1D,MAAM,CAACY,eAAeC,iBAAiB,GAAGzB,SAAS;IAEnD,SAAS0B,eAAeH,IAAY;QAClCE,iBAAiB;QACjBP,SACEN,OACAxB,QAAQyB,OAAO,CAACc;YACdA,MAAML,IAAI,CAACC,IAAI,GAAGA;QACpB;IAEJ;IAEA,qBACE,MAAClC;QAAkBuC,SAAS;;0BAC1B,MAACvC;gBACCwC,WAAU;gBACVC,YAAW;gBACXC,gBAAe;gBACfC,cAAc;gBACdC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;;kCAE7C,MAAC/C;wBAAMwC,WAAU;wBAAMQ,KAAK;wBAAGC,IAAI;4BAAEC,OAAO;wBAAO;;0CACjD,KAACjD;gCACCkD,MAAK;gCACLF,IAAI;oCAAEC,OAAO;oCAAeE,QAAQ;gCAAc;gCAClDC,SAAS,IAAMtB,iBAAiBR;0CAE/BI,4BAAc,KAAClB,kCAAkB,KAACD;;0CAErC,KAACR;gCACCwC,WAAU;gCACVQ,KAAK;gCACLP,YAAW;gCACXa,cAAa;gCACbL,IAAI;oCACFC,OAAO;oCACP,kBAAkB;wCAChBK,YAAY;oCACd;gCACF;0CAECpB,8BACC,KAACqB;oCAICC,aAAazB;oCACb0B,QAAQrB;oCACRsB,UAAU,IAAMvB,iBAAiB;mCAH5BJ,+BAMP,KAAC9B;oCAAW0D,SAAQ;oCAAWC,WAAU;8CACtC7B;;;;;kCAKT,MAAChC;wBAAMwC,WAAU;wBAAMC,YAAW;;4BAC/BhB,aAAaqC,4BAAc,KAAC1D;gCAAiB2D,cAAW;gCAAUZ,MAAK;;4BACvE1B,aAAauC,uBACZ,KAACnD;gCAAYoD,aAAaxC,YAAYuC,KAAK,CAACE,OAAO;0CACjD,cAAA,MAAClE;oCACCwC,WAAU;oCACVC,YAAW;oCACXQ,IAAI;wCACFkB,OAAO,CAACtB,QAAUA,MAAMC,OAAO,CAACkB,KAAK,CAACI,IAAI;oCAC5C;;sDAEA,KAACnE;4CACC8D,cAAW;4CACXZ,MAAK;4CACLF,IAAI;gDACFkB,OAAO,CAACtB,QAAUA,MAAMC,OAAO,CAACkB,KAAK,CAACI,IAAI;4CAC5C;sDAEA,cAAA,KAACxD;;sDAEH,KAACV;4CACC+C,IAAI;gDACFoB,UAAU;gDACVC,YAAY;gDACZC,UAAU;gDACVC,cAAc;gDACd,mBAAmB;oDAAEC,SAAS;gDAAkB;4CAClD;sDAEChD,YAAYuC,KAAK,CAACE,OAAO;;;;;0CAKlC,MAAClE;gCAAMwC,WAAU;;oCACd,CAACL,+BACA,KAAClC;wCAAW8D,cAAW;wCAAkBZ,MAAK;wCAAQE,SAAS,IAAMjB,iBAAiB;kDACpF,cAAA,KAACtB;4CAAW4D,UAAS;;;oCAGxB9C,0BACC,KAAC3B;wCAAW8D,cAAW;wCAAeZ,MAAK;wCAAQE,SAAS,IAAMzB,YAAYA,SAASL;kDACrF,cAAA,KAAChB;;;;;;;;YAMV,CAACoB,6BACA,KAACgD;gBACCtD,KAAKA;gBACLC,YAAYA;gBACZsD,OAAOpD;gBACPE,sBAAsBA;gBACtBG,UAAU,CAACgD,OAAShD,SAASN,OAAOsD;gBACpC/C,YAAY,IAAMA,WAAWP,OAAOC;;;OAnG9BD;AAwGhB,GACA;AAEFJ,qBAAqB2D,WAAW,GAAG;AAWnC;;;;CAIC,GACD,SAAStB,eAAe,EAAEC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,EAAuB;IAC5E,MAAM,CAACoB,WAAWC,aAAa,GAAGrE,SAAS8C;IAE3C,qBACE,KAACpD;QACC8C,MAAK;QACLS,SAAQ;QACRqB,OAAM;QACNlB,cAAW;QACXa,OAAOG;QACPlD,UAAU,CAACqD,IAAMF,aAAaE,EAAEC,MAAM,CAACP,KAAK;QAC5CQ,WAAW;QACXC,YAAY;YACVC,4BACE,MAAChF;gBAAeiF,UAAS;;kCACvB,KAACtF;wBAAWkD,MAAK;wBAAQY,cAAW;wBAAcV,SAASM;wBAAU6B,MAAK;kCACxE,cAAA,KAACxE;;kCAEH,KAACf;wBAAWkD,MAAK;wBAAQY,cAAW;wBAAkBV,SAAS,IAAMK,OAAOqB;wBAAYS,MAAK;kCAC3F,cAAA,KAACzE;;;;QAIT;;AAGN;AAaA;;;;;;CAMC,GAED,MAAM4D,4BAAcjE,WAA8C,CAACU,OAAOC;IACxE,MAAM,EAAEC,UAAU,EAAEsD,KAAK,EAAElD,oBAAoB,EAAEG,QAAQ,EAAEC,UAAU,EAAE,GAAG2D,QAAQ,GAAGrE;IAErF,MAAMsE,qBAAoD,CAACb;QACzDhD,SACE9B,QAAQ6E,OAAO,CAACtC;YACdA,MAAMqD,IAAI,GAAGd,KAAKe,SAAS,CAACC,IAAI;YAChCvD,MAAML,IAAI,CAAC6D,MAAM,CAACH,IAAI,GAAGd,KAAKe,SAAS,CAACD,IAAI;YAC5CrD,MAAML,IAAI,CAAC6D,MAAM,CAAC7D,IAAI,GAAG4C,KAAK5C,IAAI;QACpC;IAEJ;IAEA,qBACE,KAAC9B;QAAK,GAAGsF,MAAM;kBACb,cAAA,KAACxE;YACCI,KAAKA;YACL0E,aAAazE;YACb0E,iBAAgB;YAChBpB,OAAO;gBACLgB,WAAW;oBACTD,MAAMf,MAAM3C,IAAI,CAAC6D,MAAM,CAACH,IAAI;oBAC5BE,MAAMjB,MAAMe,IAAI;gBAClB;gBACA1D,MAAM2C,MAAM3C,IAAI,CAAC6D,MAAM,CAAC7D,IAAI;YAC9B;YACAP,sBAAsBA;YACtBuE,kBAAkB;YAClBC,YAAYpE;YACZD,UAAU6D;;;AAIlB;AAEAf,YAAYG,WAAW,GAAG"}

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/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

@@ -14,7 +14,7 @@ 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":"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"}
+{"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/model/annotations.d.ts

@@ -1,5 +1,5 @@
 import { AbsoluteTimeRange, AnnotationData, UnknownSpec } from '@perses-dev/spec';
-import { DatasourceStore, VariableStateMap } from '@perses-dev/plugin-system';
+import { DatasourceStore, VariableStateMap } from '../runtime';
 import { Plugin } from './plugin-base';
 /**
  * An object containing all the dependencies of a AnnotationQuery.

package/dist/model/annotations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"annotations.d.ts","sourceRoot":"","sources":["../../src/model/annotations.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC;;GAEG;AACH,MAAM,MAAM,iCAAiC,GAAG;IAC9C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,gBAAgB,CAAC,IAAI,GAAG,WAAW,CAAE,SAAQ,MAAM,CAAC,IAAI,CAAC;IACxE,iBAAiB,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,iBAAiB,EAAE,WAAW,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IAChH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,iBAAiB,KAAK,iCAAiC,CAAC;CACvF;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,eAAe,EAAE,eAAe,CAAC;IACjC,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,aAAa,EAAE,gBAAgB,CAAC;CACjC"}
+{"version":3,"file":"annotations.d.ts","sourceRoot":"","sources":["../../src/model/annotations.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC;;GAEG;AACH,MAAM,MAAM,iCAAiC,GAAG;IAC9C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,gBAAgB,CAAC,IAAI,GAAG,WAAW,CAAE,SAAQ,MAAM,CAAC,IAAI,CAAC;IACxE,iBAAiB,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,iBAAiB,EAAE,WAAW,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IAChH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,iBAAiB,KAAK,iCAAiC,CAAC;CACvF;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,eAAe,EAAE,eAAe,CAAC;IACjC,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,aAAa,EAAE,gBAAgB,CAAC;CACjC"}

package/dist/model/annotations.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/annotations.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { AbsoluteTimeRange, AnnotationData, UnknownSpec } from '@perses-dev/spec';\nimport { DatasourceStore, VariableStateMap } from '@perses-dev/plugin-system';\nimport { Plugin } from './plugin-base';\n\n/**\n * An object containing all the dependencies of a AnnotationQuery.\n */\nexport type AnnotationQueryPluginDependencies = {\n  /**\n   * Returns a list of variables name this annotation query depends on.\n   */\n  variables?: string[];\n};\n\n/**\n * A plugin for running annotation queries.\n */\nexport interface AnnotationPlugin<Spec = UnknownSpec> extends Plugin<Spec> {\n  getAnnotationData: (spec: Spec, ctx: AnnotationContext, abortSignal?: AbortSignal) => Promise<AnnotationData[]>;\n  dependsOn?: (spec: Spec, ctx: AnnotationContext) => AnnotationQueryPluginDependencies;\n}\n\n/**\n * Context available to AnnotationQuery plugins at runtime.\n */\nexport interface AnnotationContext {\n  datasourceStore: DatasourceStore;\n  absoluteTimeRange: AbsoluteTimeRange;\n  variableState: VariableStateMap;\n}\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;AAwBjC;;CAEC,GACD,WAIC"}
+{"version":3,"sources":["../../src/model/annotations.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { AbsoluteTimeRange, AnnotationData, UnknownSpec } from '@perses-dev/spec';\nimport { DatasourceStore, VariableStateMap } from '../runtime';\nimport { Plugin } from './plugin-base';\n\n/**\n * An object containing all the dependencies of a AnnotationQuery.\n */\nexport type AnnotationQueryPluginDependencies = {\n  /**\n   * Returns a list of variables name this annotation query depends on.\n   */\n  variables?: string[];\n};\n\n/**\n * A plugin for running annotation queries.\n */\nexport interface AnnotationPlugin<Spec = UnknownSpec> extends Plugin<Spec> {\n  getAnnotationData: (spec: Spec, ctx: AnnotationContext, abortSignal?: AbortSignal) => Promise<AnnotationData[]>;\n  dependsOn?: (spec: Spec, ctx: AnnotationContext) => AnnotationQueryPluginDependencies;\n}\n\n/**\n * Context available to AnnotationQuery plugins at runtime.\n */\nexport interface AnnotationContext {\n  datasourceStore: DatasourceStore;\n  absoluteTimeRange: AbsoluteTimeRange;\n  variableState: VariableStateMap;\n}\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;AAwBjC;;CAEC,GACD,WAIC"}

package/dist/model/log-queries.d.ts

@@ -1,5 +1,6 @@
 import { AbsoluteTimeRange, UnknownSpec, LogData, QueryDefinition } from '@perses-dev/spec';
-import { DatasourceStore, Plugin, VariableStateMap } from '@perses-dev/plugin-system';
+import { DatasourceStore, VariableStateMap } from '../runtime';
+import { Plugin } from './plugin-base';
 export interface LogQueryResult {
     logs: LogData;
     timeRange: AbsoluteTimeRange;

package/dist/model/log-queries.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"log-queries.d.ts","sourceRoot":"","sources":["../../src/model/log-queries.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAC5F,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAEtF,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE;QACT,mBAAmB,EAAE,MAAM,CAAC;KAC7B,CAAC;CACH;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,iBAAiB,CAAC;IAC7B,aAAa,EAAE,gBAAgB,CAAC;IAChC,eAAe,EAAE,eAAe,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,0BAA0B,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,cAAc,CAAC,IAAI,GAAG,WAAW,CAAE,SAAQ,MAAM,CAAC,IAAI,CAAC;IACtE,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,eAAe,EAAE,WAAW,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IACrG,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,eAAe,KAAK,0BAA0B,CAAC;IAC7E,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,eAAe,KAAK,eAAe,GAAG,IAAI,CAAC;CAClF"}
+{"version":3,"file":"log-queries.d.ts","sourceRoot":"","sources":["../../src/model/log-queries.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAC5F,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE;QACT,mBAAmB,EAAE,MAAM,CAAC;KAC7B,CAAC;CACH;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,iBAAiB,CAAC;IAC7B,aAAa,EAAE,gBAAgB,CAAC;IAChC,eAAe,EAAE,eAAe,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,0BAA0B,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,cAAc,CAAC,IAAI,GAAG,WAAW,CAAE,SAAQ,MAAM,CAAC,IAAI,CAAC;IACtE,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,eAAe,EAAE,WAAW,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IACrG,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,eAAe,KAAK,0BAA0B,CAAC;IAC7E,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,eAAe,KAAK,eAAe,GAAG,IAAI,CAAC;CAClF"}

package/dist/model/log-queries.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/log-queries.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { AbsoluteTimeRange, UnknownSpec, LogData, QueryDefinition } from '@perses-dev/spec';\nimport { DatasourceStore, Plugin, VariableStateMap } from '@perses-dev/plugin-system';\n\nexport interface LogQueryResult {\n  logs: LogData;\n  timeRange: AbsoluteTimeRange;\n  metadata?: {\n    executedQueryString: string;\n  };\n}\n\nexport interface LogQueryContext {\n  timeRange: AbsoluteTimeRange;\n  variableState: VariableStateMap;\n  datasourceStore: DatasourceStore;\n  refreshKey: string;\n}\n\ntype LogQueryPluginDependencies = {\n  variables?: string[];\n};\n\nexport interface LogQueryPlugin<Spec = UnknownSpec> extends Plugin<Spec> {\n  getLogData: (spec: Spec, ctx: LogQueryContext, abortSignal?: AbortSignal) => Promise<LogQueryResult>;\n  dependsOn?: (spec: Spec, ctx: LogQueryContext) => LogQueryPluginDependencies;\n  createVolumeQuery?: (spec: Spec, ctx: LogQueryContext) => QueryDefinition | null;\n}\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;AAwBjC,WAIC"}
+{"version":3,"sources":["../../src/model/log-queries.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { AbsoluteTimeRange, UnknownSpec, LogData, QueryDefinition } from '@perses-dev/spec';\nimport { DatasourceStore, VariableStateMap } from '../runtime';\nimport { Plugin } from './plugin-base';\n\nexport interface LogQueryResult {\n  logs: LogData;\n  timeRange: AbsoluteTimeRange;\n  metadata?: {\n    executedQueryString: string;\n  };\n}\n\nexport interface LogQueryContext {\n  timeRange: AbsoluteTimeRange;\n  variableState: VariableStateMap;\n  datasourceStore: DatasourceStore;\n  refreshKey: string;\n}\n\ntype LogQueryPluginDependencies = {\n  variables?: string[];\n};\n\nexport interface LogQueryPlugin<Spec = UnknownSpec> extends Plugin<Spec> {\n  getLogData: (spec: Spec, ctx: LogQueryContext, abortSignal?: AbortSignal) => Promise<LogQueryResult>;\n  dependsOn?: (spec: Spec, ctx: LogQueryContext) => LogQueryPluginDependencies;\n  createVolumeQuery?: (spec: Spec, ctx: LogQueryContext) => QueryDefinition | null;\n}\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;AAyBjC,WAIC"}

package/dist/runtime/DataQueriesProvider/DataQueriesProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataQueriesProvider.d.ts","sourceRoot":"","sources":["../../../src/runtime/DataQueriesProvider/DataQueriesProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAiB,YAAY,EAAoC,MAAM,OAAO,CAAC;AACtF,OAAO,EAAE,SAAS,EAA6B,MAAM,kBAAkB,CAAC;AASxE,OAAO,EACL,wBAAwB,EACxB,mBAAmB,EAEnB,sBAAsB,EAGvB,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,kBAAkB,6DAA+D,CAAC;AAE/F,wBAAgB,qBAAqB,IAAI,sBAAsB,CAM9D;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,SAAS,EAAE,SAAS,EAAE,CAAC,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAqBzG;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,YAAY,CAwGjF"}
+{"version":3,"file":"DataQueriesProvider.d.ts","sourceRoot":"","sources":["../../../src/runtime/DataQueriesProvider/DataQueriesProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAiB,YAAY,EAAoC,MAAM,OAAO,CAAC;AACtF,OAAO,EAAE,SAAS,EAA6B,MAAM,kBAAkB,CAAC;AASxE,OAAO,EACL,wBAAwB,EACxB,mBAAmB,EAEnB,sBAAsB,EAEvB,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,kBAAkB,6DAA+D,CAAC;AAE/F,wBAAgB,qBAAqB,IAAI,sBAAsB,CAM9D;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,SAAS,EAAE,SAAS,EAAE,CAAC,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAuBzG;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,YAAY,CA2FjF"}

package/dist/runtime/DataQueriesProvider/DataQueriesProvider.js

@@ -19,7 +19,7 @@ import { useAlertsQueries } from '../alerts-queries';
 import { useSilencesQueries } from '../silences-queries';
 import { useUsageMetrics } from '../UsageMetricsProvider';
 import { useLogQueries } from '../log-queries';
-import { transformQueryResults, useQueryType } from './model';
+import { transformQueryResults } from './model';
 export const DataQueriesContext = /*#__PURE__*/ createContext(undefined);
 export function useDataQueriesContext() {
     const ctx = useContext(DataQueriesContext);
@@ -30,46 +30,37 @@ export function useDataQueriesContext() {
 }
 export function useDataQueries(queryType) {
     const ctx = useDataQueriesContext();
+    // Filter query definitions based on the specified query type
+    const filteredQueryDefinitions = ctx.queryDefinitions.filter((definition)=>definition.kind === queryType);
     // Filter the query results based on the specified query type
     const filteredQueryResults = ctx.queryResults.filter((queryResult)=>queryResult?.definition?.kind === queryType);
     // Filter the errors based on the specified query type
     const filteredErrors = ctx.errors.filter((errors, index)=>ctx.queryResults[index]?.definition?.kind === queryType);
     // Create a new context object with the filtered results and errors
-    const filteredCtx = {
+    return {
+        queryDefinitions: filteredQueryDefinitions,
         queryResults: filteredQueryResults,
         isFetching: filteredQueryResults.some((result)=>result.isFetching),
         isLoading: filteredQueryResults.some((result)=>result.isLoading),
         refetchAll: ctx.refetchAll,
         errors: filteredErrors
     };
-    return filteredCtx;
 }
 export function DataQueriesProvider(props) {
     const { definitions, options, children, queryOptions } = props;
-    // Returns a query kind, for example "TimeSeriesQuery" = getQueryType("PrometheusTimeSeriesQuery")
-    const getQueryType = useQueryType();
-    const queryDefinitions = definitions.map((definition)=>{
-        const type = getQueryType(definition.kind);
-        return {
-            kind: type,
-            spec: {
-                plugin: definition
-            }
-        };
-    });
     const usageMetrics = useUsageMetrics();
     // Filter definitions for time series query and other future query plugins
-    const timeSeriesQueries = queryDefinitions.filter((definition)=>definition.kind === 'TimeSeriesQuery');
+    const timeSeriesQueries = definitions.filter((definition)=>definition.kind === 'TimeSeriesQuery');
     const timeSeriesResults = useTimeSeriesQueries(timeSeriesQueries, options, queryOptions);
-    const traceQueries = queryDefinitions.filter((definition)=>definition.kind === 'TraceQuery');
+    const traceQueries = definitions.filter((definition)=>definition.kind === 'TraceQuery');
     const traceResults = useTraceQueries(traceQueries);
-    const profileQueries = queryDefinitions.filter((definition)=>definition.kind === 'ProfileQuery');
+    const profileQueries = definitions.filter((definition)=>definition.kind === 'ProfileQuery');
     const profileResults = useProfileQueries(profileQueries);
-    const logQueries = queryDefinitions.filter((definition)=>definition.kind === 'LogQuery');
+    const logQueries = definitions.filter((definition)=>definition.kind === 'LogQuery');
     const logResults = useLogQueries(logQueries);
-    const alertsQueries = queryDefinitions.filter((definition)=>definition.kind === 'AlertsQuery');
+    const alertsQueries = definitions.filter((definition)=>definition.kind === 'AlertsQuery');
     const alertsResults = useAlertsQueries(alertsQueries);
-    const silencesQueries = queryDefinitions.filter((definition)=>definition.kind === 'SilencesQuery');
+    const silencesQueries = definitions.filter((definition)=>definition.kind === 'SilencesQuery');
     const silencesResults = useSilencesQueries(silencesQueries);
     const refetchAll = useCallback(()=>{
         timeSeriesResults.forEach((result)=>result.refetch());
@@ -107,6 +98,7 @@ export function DataQueriesProvider(props) {
             }
         }
         return {
+            queryDefinitions: definitions,
             queryResults: mergedQueryResults,
             isFetching: mergedQueryResults.some((result)=>result.isFetching),
             isLoading: mergedQueryResults.some((result)=>result.isLoading),
@@ -114,20 +106,21 @@ export function DataQueriesProvider(props) {
             errors: mergedQueryResults.map((result)=>result.error)
         };
     }, [
-        timeSeriesQueries,
-        timeSeriesResults,
-        traceQueries,
-        traceResults,
-        profileQueries,
-        profileResults,
-        logQueries,
-        logResults,
         alertsQueries,
         alertsResults,
+        logQueries,
+        logResults,
+        profileQueries,
+        profileResults,
         silencesQueries,
         silencesResults,
-        refetchAll,
+        timeSeriesQueries,
+        timeSeriesResults,
+        traceQueries,
+        traceResults,
+        definitions,
         queryOptions?.enabled,
+        refetchAll,
         usageMetrics
     ]);
     return /*#__PURE__*/ _jsx(DataQueriesContext.Provider, {

package/dist/runtime/DataQueriesProvider/DataQueriesProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/runtime/DataQueriesProvider/DataQueriesProvider.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 { createContext, ReactElement, useCallback, useContext, useMemo } from 'react';\nimport { QueryType, TimeSeriesQueryDefinition } from '@perses-dev/spec';\nimport { useTimeSeriesQueries } from '../time-series-queries';\nimport { useTraceQueries, TraceQueryDefinition } from '../trace-queries';\nimport { useProfileQueries, ProfileQueryDefinition } from '../profile-queries';\nimport { useAlertsQueries, AlertsQueryDefinition } from '../alerts-queries';\nimport { useSilencesQueries, SilencesQueryDefinition } from '../silences-queries';\n\nimport { useUsageMetrics } from '../UsageMetricsProvider';\nimport { LogQueryDefinition, useLogQueries } from '../log-queries';\nimport {\n  DataQueriesProviderProps,\n  UseDataQueryResults,\n  transformQueryResults,\n  DataQueriesContextType,\n  QueryData,\n  useQueryType,\n} from './model';\n\nexport const DataQueriesContext = createContext<DataQueriesContextType | undefined>(undefined);\n\nexport function useDataQueriesContext(): DataQueriesContextType {\n  const ctx = useContext(DataQueriesContext);\n  if (ctx === undefined) {\n    throw new Error('No DataQueriesContext found. Did you forget a Provider?');\n  }\n  return ctx;\n}\n\nexport function useDataQueries<T extends keyof QueryType>(queryType: T): UseDataQueryResults<QueryType[T]> {\n  const ctx = useDataQueriesContext();\n\n  // Filter the query results based on the specified query type\n  const filteredQueryResults = ctx.queryResults.filter(\n    (queryResult) => queryResult?.definition?.kind === queryType\n  ) as Array<QueryData<QueryType[T]>>;\n\n  // Filter the errors based on the specified query type\n  const filteredErrors = ctx.errors.filter((errors, index) => ctx.queryResults[index]?.definition?.kind === queryType);\n\n  // Create a new context object with the filtered results and errors\n  const filteredCtx = {\n    queryResults: filteredQueryResults,\n    isFetching: filteredQueryResults.some((result) => result.isFetching),\n    isLoading: filteredQueryResults.some((result) => result.isLoading),\n    refetchAll: ctx.refetchAll,\n    errors: filteredErrors,\n  };\n\n  return filteredCtx;\n}\n\nexport function DataQueriesProvider(props: DataQueriesProviderProps): ReactElement {\n  const { definitions, options, children, queryOptions } = props;\n\n  // Returns a query kind, for example \"TimeSeriesQuery\" = getQueryType(\"PrometheusTimeSeriesQuery\")\n  const getQueryType = useQueryType();\n\n  const queryDefinitions = definitions.map((definition) => {\n    const type = getQueryType(definition.kind);\n    return {\n      kind: type,\n      spec: {\n        plugin: definition,\n      },\n    };\n  });\n\n  const usageMetrics = useUsageMetrics();\n\n  // Filter definitions for time series query and other future query plugins\n  const timeSeriesQueries = queryDefinitions.filter(\n    (definition) => definition.kind === 'TimeSeriesQuery'\n  ) as TimeSeriesQueryDefinition[];\n  const timeSeriesResults = useTimeSeriesQueries(timeSeriesQueries, options, queryOptions);\n\n  const traceQueries = queryDefinitions.filter(\n    (definition) => definition.kind === 'TraceQuery'\n  ) as TraceQueryDefinition[];\n  const traceResults = useTraceQueries(traceQueries);\n\n  const profileQueries = queryDefinitions.filter(\n    (definition) => definition.kind === 'ProfileQuery'\n  ) as ProfileQueryDefinition[];\n  const profileResults = useProfileQueries(profileQueries);\n\n  const logQueries = queryDefinitions.filter((definition) => definition.kind === 'LogQuery') as LogQueryDefinition[];\n  const logResults = useLogQueries(logQueries);\n\n  const alertsQueries = queryDefinitions.filter(\n    (definition) => definition.kind === 'AlertsQuery'\n  ) as AlertsQueryDefinition[];\n  const alertsResults = useAlertsQueries(alertsQueries);\n\n  const silencesQueries = queryDefinitions.filter(\n    (definition) => definition.kind === 'SilencesQuery'\n  ) as SilencesQueryDefinition[];\n  const silencesResults = useSilencesQueries(silencesQueries);\n\n  const refetchAll = useCallback(() => {\n    timeSeriesResults.forEach((result) => result.refetch());\n    traceResults.forEach((result) => result.refetch());\n    profileResults.forEach((result) => result.refetch());\n    logResults.forEach((result) => result.refetch());\n    alertsResults.forEach((result) => result.refetch());\n    silencesResults.forEach((result) => result.refetch());\n  }, [timeSeriesResults, traceResults, profileResults, logResults, alertsResults, silencesResults]);\n\n  const ctx = useMemo(() => {\n    const mergedQueryResults = [\n      ...transformQueryResults(timeSeriesResults, timeSeriesQueries),\n      ...transformQueryResults(traceResults, traceQueries),\n      ...transformQueryResults(profileResults, profileQueries),\n      ...transformQueryResults(logResults, logQueries),\n      ...transformQueryResults(alertsResults, alertsQueries),\n      ...transformQueryResults(silencesResults, silencesQueries),\n    ];\n\n    if (queryOptions?.enabled) {\n      for (const result of mergedQueryResults) {\n        if (!result.isLoading && !result.isFetching && !result.error) {\n          usageMetrics.markQuery(result.definition, 'success');\n        } else if (result.error) {\n          usageMetrics.markQuery(result.definition, 'error');\n        } else {\n          usageMetrics.markQuery(result.definition, 'pending');\n        }\n      }\n    }\n\n    return {\n      queryResults: mergedQueryResults,\n      isFetching: mergedQueryResults.some((result) => result.isFetching),\n      isLoading: mergedQueryResults.some((result) => result.isLoading),\n      refetchAll,\n      errors: mergedQueryResults.map((result) => result.error),\n    };\n  }, [\n    timeSeriesQueries,\n    timeSeriesResults,\n    traceQueries,\n    traceResults,\n    profileQueries,\n    profileResults,\n    logQueries,\n    logResults,\n    alertsQueries,\n    alertsResults,\n    silencesQueries,\n    silencesResults,\n    refetchAll,\n    queryOptions?.enabled,\n    usageMetrics,\n  ]);\n\n  return <DataQueriesContext.Provider value={ctx}>{children}</DataQueriesContext.Provider>;\n}\n"],"names":["createContext","useCallback","useContext","useMemo","useTimeSeriesQueries","useTraceQueries","useProfileQueries","useAlertsQueries","useSilencesQueries","useUsageMetrics","useLogQueries","transformQueryResults","useQueryType","DataQueriesContext","undefined","useDataQueriesContext","ctx","Error","useDataQueries","queryType","filteredQueryResults","queryResults","filter","queryResult","definition","kind","filteredErrors","errors","index","filteredCtx","isFetching","some","result","isLoading","refetchAll","DataQueriesProvider","props","definitions","options","children","queryOptions","getQueryType","queryDefinitions","map","type","spec","plugin","usageMetrics","timeSeriesQueries","timeSeriesResults","traceQueries","traceResults","profileQueries","profileResults","logQueries","logResults","alertsQueries","alertsResults","silencesQueries","silencesResults","forEach","refetch","mergedQueryResults","enabled","error","markQuery","Provider","value"],"mappings":"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"}
+{"version":3,"sources":["../../../src/runtime/DataQueriesProvider/DataQueriesProvider.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 { createContext, ReactElement, useCallback, useContext, useMemo } from 'react';\nimport { QueryType, TimeSeriesQueryDefinition } from '@perses-dev/spec';\nimport { useTimeSeriesQueries } from '../time-series-queries';\nimport { useTraceQueries, TraceQueryDefinition } from '../trace-queries';\nimport { useProfileQueries, ProfileQueryDefinition } from '../profile-queries';\nimport { useAlertsQueries, AlertsQueryDefinition } from '../alerts-queries';\nimport { useSilencesQueries, SilencesQueryDefinition } from '../silences-queries';\n\nimport { useUsageMetrics } from '../UsageMetricsProvider';\nimport { LogQueryDefinition, useLogQueries } from '../log-queries';\nimport {\n  DataQueriesProviderProps,\n  UseDataQueryResults,\n  transformQueryResults,\n  DataQueriesContextType,\n  QueryData,\n} from './model';\n\nexport const DataQueriesContext = createContext<DataQueriesContextType | undefined>(undefined);\n\nexport function useDataQueriesContext(): DataQueriesContextType {\n  const ctx = useContext(DataQueriesContext);\n  if (ctx === undefined) {\n    throw new Error('No DataQueriesContext found. Did you forget a Provider?');\n  }\n  return ctx;\n}\n\nexport function useDataQueries<T extends keyof QueryType>(queryType: T): UseDataQueryResults<QueryType[T]> {\n  const ctx = useDataQueriesContext();\n\n  // Filter query definitions based on the specified query type\n  const filteredQueryDefinitions = ctx.queryDefinitions.filter((definition) => definition.kind === queryType);\n\n  // Filter the query results based on the specified query type\n  const filteredQueryResults = ctx.queryResults.filter(\n    (queryResult) => queryResult?.definition?.kind === queryType\n  ) as Array<QueryData<QueryType[T]>>;\n\n  // Filter the errors based on the specified query type\n  const filteredErrors = ctx.errors.filter((errors, index) => ctx.queryResults[index]?.definition?.kind === queryType);\n\n  // Create a new context object with the filtered results and errors\n  return {\n    queryDefinitions: filteredQueryDefinitions,\n    queryResults: filteredQueryResults,\n    isFetching: filteredQueryResults.some((result) => result.isFetching),\n    isLoading: filteredQueryResults.some((result) => result.isLoading),\n    refetchAll: ctx.refetchAll,\n    errors: filteredErrors,\n  };\n}\n\nexport function DataQueriesProvider(props: DataQueriesProviderProps): ReactElement {\n  const { definitions, options, children, queryOptions } = props;\n\n  const usageMetrics = useUsageMetrics();\n\n  // Filter definitions for time series query and other future query plugins\n  const timeSeriesQueries = definitions.filter(\n    (definition) => definition.kind === 'TimeSeriesQuery'\n  ) as TimeSeriesQueryDefinition[];\n  const timeSeriesResults = useTimeSeriesQueries(timeSeriesQueries, options, queryOptions);\n\n  const traceQueries = definitions.filter((definition) => definition.kind === 'TraceQuery') as TraceQueryDefinition[];\n  const traceResults = useTraceQueries(traceQueries);\n\n  const profileQueries = definitions.filter(\n    (definition) => definition.kind === 'ProfileQuery'\n  ) as ProfileQueryDefinition[];\n  const profileResults = useProfileQueries(profileQueries);\n\n  const logQueries = definitions.filter((definition) => definition.kind === 'LogQuery') as LogQueryDefinition[];\n  const logResults = useLogQueries(logQueries);\n\n  const alertsQueries = definitions.filter(\n    (definition) => definition.kind === 'AlertsQuery'\n  ) as AlertsQueryDefinition[];\n  const alertsResults = useAlertsQueries(alertsQueries);\n\n  const silencesQueries = definitions.filter(\n    (definition) => definition.kind === 'SilencesQuery'\n  ) as SilencesQueryDefinition[];\n  const silencesResults = useSilencesQueries(silencesQueries);\n\n  const refetchAll = useCallback(() => {\n    timeSeriesResults.forEach((result) => result.refetch());\n    traceResults.forEach((result) => result.refetch());\n    profileResults.forEach((result) => result.refetch());\n    logResults.forEach((result) => result.refetch());\n    alertsResults.forEach((result) => result.refetch());\n    silencesResults.forEach((result) => result.refetch());\n  }, [timeSeriesResults, traceResults, profileResults, logResults, alertsResults, silencesResults]);\n\n  const ctx = useMemo(() => {\n    const mergedQueryResults = [\n      ...transformQueryResults(timeSeriesResults, timeSeriesQueries),\n      ...transformQueryResults(traceResults, traceQueries),\n      ...transformQueryResults(profileResults, profileQueries),\n      ...transformQueryResults(logResults, logQueries),\n      ...transformQueryResults(alertsResults, alertsQueries),\n      ...transformQueryResults(silencesResults, silencesQueries),\n    ];\n\n    if (queryOptions?.enabled) {\n      for (const result of mergedQueryResults) {\n        if (!result.isLoading && !result.isFetching && !result.error) {\n          usageMetrics.markQuery(result.definition, 'success');\n        } else if (result.error) {\n          usageMetrics.markQuery(result.definition, 'error');\n        } else {\n          usageMetrics.markQuery(result.definition, 'pending');\n        }\n      }\n    }\n\n    return {\n      queryDefinitions: definitions,\n      queryResults: mergedQueryResults,\n      isFetching: mergedQueryResults.some((result) => result.isFetching),\n      isLoading: mergedQueryResults.some((result) => result.isLoading),\n      refetchAll,\n      errors: mergedQueryResults.map((result) => result.error),\n    };\n  }, [\n    alertsQueries,\n    alertsResults,\n    logQueries,\n    logResults,\n    profileQueries,\n    profileResults,\n    silencesQueries,\n    silencesResults,\n    timeSeriesQueries,\n    timeSeriesResults,\n    traceQueries,\n    traceResults,\n    definitions,\n    queryOptions?.enabled,\n    refetchAll,\n    usageMetrics,\n  ]);\n\n  return <DataQueriesContext.Provider value={ctx}>{children}</DataQueriesContext.Provider>;\n}\n"],"names":["createContext","useCallback","useContext","useMemo","useTimeSeriesQueries","useTraceQueries","useProfileQueries","useAlertsQueries","useSilencesQueries","useUsageMetrics","useLogQueries","transformQueryResults","DataQueriesContext","undefined","useDataQueriesContext","ctx","Error","useDataQueries","queryType","filteredQueryDefinitions","queryDefinitions","filter","definition","kind","filteredQueryResults","queryResults","queryResult","filteredErrors","errors","index","isFetching","some","result","isLoading","refetchAll","DataQueriesProvider","props","definitions","options","children","queryOptions","usageMetrics","timeSeriesQueries","timeSeriesResults","traceQueries","traceResults","profileQueries","profileResults","logQueries","logResults","alertsQueries","alertsResults","silencesQueries","silencesResults","forEach","refetch","mergedQueryResults","enabled","error","markQuery","map","Provider","value"],"mappings":"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"}