@perses-dev/plugin-system 0.52.0 → 0.53.0-beta.1

package/dist/cjs/runtime/time-series-queries.js

@@ -82,7 +82,7 @@ const useTimeSeriesQuery = (definition, options, queryOptions)=>{
     return (0, _reactquery.useQuery)({
         enabled: (queryOptions?.enabled ?? true) || queryEnabled,
         queryKey: queryKey,
-        queryFn: ()=>{
+        queryFn: ({ signal })=>{
             // The 'enabled' option should prevent this from happening, but make TypeScript happy by checking
             if (plugin === undefined) {
                 throw new Error('Expected plugin to be loaded');
@@ -92,7 +92,7 @@ const useTimeSeriesQuery = (definition, options, queryOptions)=>{
                 ...context,
                 suggestedStepMs: options?.suggestedStepMs
             };
-            return plugin.getTimeSeriesData(definition.spec.plugin.spec, ctx);
+            return plugin.getTimeSeriesData(definition.spec.plugin.spec, ctx, signal);
         }
     });
 };
@@ -118,14 +118,14 @@ function useTimeSeriesQueries(definitions, options, queryOptions) {
                 ...queryOptions,
                 enabled: (queryOptions?.enabled ?? true) && queryEnabled,
                 queryKey: queryKey,
-                queryFn: async ()=>{
+                queryFn: async ({ signal })=>{
                     const ctx = {
                         ...context,
                         // Keep suggested step changes out of the query key, so we don´t have to run again query when it changes
                         suggestedStepMs: options?.suggestedStepMs
                     };
                     const plugin = await getPlugin(TIME_SERIES_QUERY_KEY, definition.spec.plugin.kind);
-                    const data = await plugin.getTimeSeriesData(definition.spec.plugin.spec, ctx);
+                    const data = await plugin.getTimeSeriesData(definition.spec.plugin.spec, ctx, signal);
                     return data;
                 }
             };

package/dist/cjs/runtime/trace-queries.js

@@ -24,14 +24,10 @@ _export(exports, {
     TRACE_QUERY_KEY: function() {
         return TRACE_QUERY_KEY;
     },
-    getUnixTimeRange: function() {
-        return getUnixTimeRange;
-    },
     useTraceQueries: function() {
         return useTraceQueries;
     }
 });
-const _datefns = require("date-fns");
 const _reactquery = require("@tanstack/react-query");
 const _datasources = require("./datasources");
 const _pluginregistry = require("./plugin-registry");
@@ -39,13 +35,6 @@ const _TimeRangeProvider = require("./TimeRangeProvider");
 const _variables = require("./variables");
 const _utils = require("./utils");
 const TRACE_QUERY_KEY = 'TraceQuery';
-function getUnixTimeRange(timeRange) {
-    const { start, end } = timeRange;
-    return {
-        start: Math.ceil((0, _datefns.getUnixTime)(start)),
-        end: Math.ceil((0, _datefns.getUnixTime)(end))
-    };
-}
 function useTraceQueries(definitions) {
     const { getPlugin } = (0, _pluginregistry.usePluginRegistry)();
     const context = useTraceQueryContext();

package/dist/cjs/test/mock-data.js

@@ -21,17 +21,41 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    MOCK_EMPTY_PLUGIN_MODULE: function() {
+        return MOCK_EMPTY_PLUGIN_MODULE;
+    },
+    MOCK_INVALID_PLUGIN_MODULE: function() {
+        return MOCK_INVALID_PLUGIN_MODULE;
+    },
     MOCK_LOG_DATA: function() {
         return MOCK_LOG_DATA;
     },
+    MOCK_MIXED_VALIDITY_PLUGIN_MODULES: function() {
+        return MOCK_MIXED_VALIDITY_PLUGIN_MODULES;
+    },
+    MOCK_MULTI_PLUGIN_MODULE: function() {
+        return MOCK_MULTI_PLUGIN_MODULE;
+    },
+    MOCK_PARTIAL_FAILURE_MODULE: function() {
+        return MOCK_PARTIAL_FAILURE_MODULE;
+    },
     MOCK_PROFILE_DATA: function() {
         return MOCK_PROFILE_DATA;
     },
+    MOCK_REMOTE_PLUGIN_MODULE: function() {
+        return MOCK_REMOTE_PLUGIN_MODULE;
+    },
     MOCK_TIME_SERIES_DATA: function() {
         return MOCK_TIME_SERIES_DATA;
     },
     MOCK_TRACE_DATA: function() {
         return MOCK_TRACE_DATA;
+    },
+    MOCK_VALID_PLUGIN_METADATA: function() {
+        return MOCK_VALID_PLUGIN_METADATA;
+    },
+    MOCK_VALID_PLUGIN_MODULE_RESOURCE: function() {
+        return MOCK_VALID_PLUGIN_MODULE_RESOURCE;
     }
 });
 const MOCK_TIME_SERIES_DATA = {
@@ -146,3 +170,137 @@ const MOCK_PROFILE_DATA = {
         name: 'cpu'
     }
 };
+const MOCK_VALID_PLUGIN_METADATA = {
+    kind: 'Panel',
+    spec: {
+        name: 'testPlugin',
+        display: {
+            name: 'Test Plugin',
+            description: 'A test plugin for unit testing'
+        }
+    }
+};
+const MOCK_VALID_PLUGIN_MODULE_RESOURCE = {
+    kind: 'PluginModule',
+    metadata: {
+        name: 'test-module',
+        version: '1.0.0'
+    },
+    spec: {
+        plugins: [
+            MOCK_VALID_PLUGIN_METADATA
+        ]
+    }
+};
+const MOCK_INVALID_PLUGIN_MODULE = {
+    // Missing required fields
+    metadata: {
+        name: 'invalid-module'
+    },
+    spec: {
+        plugins: [
+            {
+                // Missing required fields
+                kind: 'Panel'
+            }
+        ]
+    }
+};
+const MOCK_MIXED_VALIDITY_PLUGIN_MODULES = [
+    MOCK_VALID_PLUGIN_MODULE_RESOURCE,
+    MOCK_INVALID_PLUGIN_MODULE,
+    {
+        kind: 'PluginModule',
+        metadata: {
+            name: 'another-valid-module',
+            version: '2.0.0'
+        },
+        spec: {
+            plugins: [
+                {
+                    kind: 'Variable',
+                    spec: {
+                        name: 'anotherPlugin',
+                        display: {
+                            name: 'Another Plugin'
+                        }
+                    }
+                }
+            ]
+        }
+    }
+];
+const MOCK_REMOTE_PLUGIN_MODULE = {
+    testPlugin: {
+        component: ()=>null,
+        createDefaultOptions: ()=>({})
+    }
+};
+const MOCK_MULTI_PLUGIN_MODULE = {
+    kind: 'PluginModule',
+    metadata: {
+        name: 'multi-plugin-module',
+        version: '1.0.0'
+    },
+    spec: {
+        plugins: [
+            {
+                kind: 'Panel',
+                spec: {
+                    name: 'plugin1',
+                    display: {
+                        name: 'Plugin 1'
+                    }
+                }
+            },
+            {
+                kind: 'Variable',
+                spec: {
+                    name: 'plugin2',
+                    display: {
+                        name: 'Plugin 2'
+                    }
+                }
+            }
+        ]
+    }
+};
+const MOCK_PARTIAL_FAILURE_MODULE = {
+    kind: 'PluginModule',
+    metadata: {
+        name: 'partial-failure-module',
+        version: '1.0.0'
+    },
+    spec: {
+        plugins: [
+            {
+                kind: 'Panel',
+                spec: {
+                    name: 'workingPlugin',
+                    display: {
+                        name: 'Working Plugin'
+                    }
+                }
+            },
+            {
+                kind: 'Variable',
+                spec: {
+                    name: 'failingPlugin',
+                    display: {
+                        name: 'Failing Plugin'
+                    }
+                }
+            }
+        ]
+    }
+};
+const MOCK_EMPTY_PLUGIN_MODULE = {
+    kind: 'PluginModule',
+    metadata: {
+        name: 'empty-module',
+        version: '1.0.0'
+    },
+    spec: {
+        plugins: []
+    }
+};

package/dist/cjs/utils/event.js

@@ -0,0 +1,30 @@
+// Copyright 2023 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useEvent", {
+    enumerable: true,
+    get: function() {
+        return useEvent;
+    }
+});
+const _react = require("react");
+function useEvent(handler) {
+    const handlerRef = (0, _react.useRef)(handler);
+    (0, _react.useLayoutEffect)(()=>{
+        handlerRef.current = handler;
+    });
+    return (0, _react.useCallback)((...args)=>handlerRef.current(...args), []);
+}

package/dist/cjs/utils/index.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _export_star(require("./action"), exports);
+_export_star(require("./event"), exports);
 _export_star(require("./variables"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

package/dist/components/{DatasourceSelect.d.ts → DatasourceSelect/DatasourceSelect.d.ts}

@@ -1,7 +1,7 @@
 import { OutlinedSelectProps, BaseSelectProps } from '@mui/material';
 import { DatasourceSelector, VariableName } from '@perses-dev/core';
 import { ReactElement } from 'react';
-import { DatasourceSelectItemGroup, DatasourceSelectItemSelector, VariableStateMap } from '../runtime';
+import { DatasourceSelectItemGroup, DatasourceSelectItemSelector, VariableStateMap } from '../../runtime';
 type OmittedMuiProps = 'children' | 'value' | 'onChange';
 export type DatasourceSelectValue<T = DatasourceSelector> = T | VariableName;
 export interface DatasourceSelectProps extends Omit<OutlinedSelectProps & BaseSelectProps<string>, OmittedMuiProps> {

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatasourceSelect.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceSelect/DatasourceSelect.tsx"],"names":[],"mappings":"AAcA,OAAO,EAML,mBAAmB,EACnB,eAAe,EAGhB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAEL,yBAAyB,EACzB,4BAA4B,EAG5B,gBAAgB,EACjB,MAAM,eAAe,CAAC;AAOvB,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAWzD,MAAM,MAAM,qBAAqB,CAAC,CAAC,GAAG,kBAAkB,IAAI,CAAC,GAAG,YAAY,CAAC;AAE7E,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,mBAAmB,GAAG,eAAe,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC;IACjH,KAAK,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD,oBAAoB,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAkH3E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,YAAY,CAahH;AAKD;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,4BAA4B,GAAG,YAAY,GAAG,MAAM,CAKnG;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,WAAW,EAAE,MAAM,GAAG,qBAAqB,CAehF;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,GAAG,KAAK,IAAI,YAAY,CAEpG;AAED,eAAO,MAAM,+BAA+B,UACnC,qBAAqB,GAAG,SAAS,aAC7B,gBAAgB,8BACC,yBAAyB,EAAE,GAAG,SAAS,KAClE,kBAAkB,GAAG,SA4BvB,CAAC;AAEF,eAAO,MAAM,kCAAkC,UACtC,qBAAqB,wBACN,MAAM,KAC3B,kBAQF,CAAC"}

package/dist/components/{DatasourceSelect.js → DatasourceSelect/DatasourceSelect.js}

@@ -15,8 +15,8 @@ import { createElement as _createElement } from "react";
 import OpenInNewIcon from 'mdi-material-ui/OpenInNew';
 import { Stack, ListItemText, Chip, IconButton, Box, Autocomplete, TextField } from '@mui/material';
 import { useMemo } from 'react';
-import { useListDatasourceSelectItems, useVariableValues } from '../runtime';
-import { parseVariables } from '../utils';
+import { useListDatasourceSelectItems, useVariableValues } from '../../runtime';
+import { parseVariables } from '../../utils';
 const DATASOURCE_VARIABLE_VALUE_PREFIX = '__DATASOURCE_VARIABLE_VALUE__';
 const VARIABLE_IDENTIFIER = '$';
 const emptyDatasourceOption = {

package/dist/components/DatasourceSelect/DatasourceSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DatasourceSelect/DatasourceSelect.tsx"],"sourcesContent":["// Copyright 2023 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 OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport {\n  Stack,\n  ListItemText,\n  Chip,\n  IconButton,\n  Box,\n  OutlinedSelectProps,\n  BaseSelectProps,\n  Autocomplete,\n  TextField,\n} from '@mui/material';\nimport { DatasourceSelector, VariableName } from '@perses-dev/core';\nimport { ReactElement, useMemo } from 'react';\nimport {\n  DatasourceSelectItem,\n  DatasourceSelectItemGroup,\n  DatasourceSelectItemSelector,\n  useListDatasourceSelectItems,\n  useVariableValues,\n  VariableStateMap,\n} from '../../runtime';\nimport { parseVariables } from '../../utils';\n\nconst DATASOURCE_VARIABLE_VALUE_PREFIX = '__DATASOURCE_VARIABLE_VALUE__';\nconst VARIABLE_IDENTIFIER = '$';\n// Props on MUI Select that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\ntype DataSourceOption = {\n  groupEditLink?: string;\n  groupLabel?: string;\n  value: string;\n} & Omit<DatasourceSelectItem, 'selector'> &\n  Omit<DatasourceSelectItem['selector'], 'kind'>;\n\nconst emptyDatasourceOption: DataSourceOption = { name: '', value: '' };\n\nexport type DatasourceSelectValue<T = DatasourceSelector> = T | VariableName;\n\nexport interface DatasourceSelectProps extends Omit<OutlinedSelectProps & BaseSelectProps<string>, OmittedMuiProps> {\n  value: DatasourceSelectValue;\n  onChange: (next: DatasourceSelectValue) => void;\n  datasourcePluginKind: string;\n  project?: string;\n}\n\n/**\n * Displays a MUI input for selecting a Datasource of a particular kind. Note: The 'value' and `onChange` handler for\n * the input deal with a `DatasourceSelector`.\n */\nexport function DatasourceSelect(props: DatasourceSelectProps): ReactElement {\n  const { datasourcePluginKind, value, project, readOnly, onChange, ...others } = props;\n  const { data, isLoading } = useListDatasourceSelectItems(datasourcePluginKind, project);\n  const variables = useVariableValues();\n\n  const defaultValue = useMemo<VariableName | DatasourceSelectItemSelector>(() => {\n    if (isVariableDatasource(value)) {\n      return value;\n    }\n\n    const group = (data ?? [])\n      .flatMap((itemGroup) => itemGroup.items)\n      .find((item) => {\n        return value.kind === item.selector.kind && value.name === item.selector.name && !item.overridden;\n      })?.selector.group;\n    return { ...value, group };\n  }, [value, data]);\n\n  const options = useMemo<DataSourceOption[]>(() => {\n    const datasourceOptions = (data || []).flatMap<DataSourceOption>((itemGroup) =>\n      itemGroup.items.map<DataSourceOption>((item) => ({\n        groupLabel: itemGroup.group,\n        groupEditLink: itemGroup.editLink,\n        name: item.name,\n        overriding: item.overriding,\n        overridden: item.overridden,\n        saved: item.saved ?? true,\n        group: item.selector.group,\n        value: selectorToOptionValue(item.selector),\n      }))\n    );\n\n    const datasourceOptionsMap = new Map(datasourceOptions.map((option) => [option.name, option]));\n\n    const variableOptions = Object.entries(variables).flatMap<DataSourceOption>(([name, variable]) => {\n      if (Array.isArray(variable.value)) return [];\n\n      const associatedDatasource = datasourceOptionsMap.get(variable.value ?? '');\n      if (!associatedDatasource) return [];\n\n      return {\n        groupLabel: 'Variables',\n        name: `${VARIABLE_IDENTIFIER}${name}`,\n        saved: true,\n        value: `${DATASOURCE_VARIABLE_VALUE_PREFIX}${VARIABLE_IDENTIFIER}${name}`,\n      };\n    });\n\n    return [...datasourceOptions, ...variableOptions];\n  }, [data, variables]);\n\n  // While loading available values, just use an empty datasource option so MUI select doesn't warn about values out of range\n  const optionValue = isLoading\n    ? emptyDatasourceOption\n    : options.find((option) => option.value === selectorToOptionValue(defaultValue));\n\n  // When the user makes a selection, convert the string option value back to a DatasourceSelector\n  const handleChange = (selectedOption: DataSourceOption | null): void => {\n    if (selectedOption) {\n      const next = optionValueToSelector(selectedOption?.value || '');\n      onChange(next);\n    } else {\n      onChange({ kind: datasourcePluginKind });\n    }\n  };\n\n  // We use a fake action event when we click on the action of the chip (hijack the \"delete\" feature).\n  // This is because the href link action is on the `deleteIcon` property already, but the `onDelete` property\n  // controls its visibility.\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const fakeActionEvent = (): void => {};\n\n  return (\n    <Autocomplete<DataSourceOption>\n      readOnly={readOnly}\n      options={options}\n      renderInput={(params) => <TextField {...params} label={others.label} placeholder=\"\" />}\n      groupBy={(option) => option.groupLabel || 'No group'}\n      getOptionLabel={(option) => {\n        return option.name;\n      }}\n      onChange={(_, v) => handleChange(v)}\n      value={optionValue}\n      renderOption={(props, option) => {\n        return (\n          <li {...props} key={option.value}>\n            <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" width=\"100%\">\n              <ListItemText>\n                <DatasourceName name={option.name} overridden={option.overridden} overriding={option.overriding} />\n              </ListItemText>\n              {!option.saved && <ListItemText>Save the dashboard to enable this datasource</ListItemText>}\n              <ListItemText style={{ textAlign: 'right' }}>\n                {option.groupLabel && option.groupLabel.length > 0 && (\n                  <Chip\n                    disabled={false}\n                    label={option.groupLabel}\n                    size=\"small\"\n                    onDelete={option.groupEditLink ? fakeActionEvent : undefined}\n                    deleteIcon={\n                      option.groupEditLink ? (\n                        <IconButton href={option.groupEditLink} target=\"_blank\">\n                          <OpenInNewIcon fontSize=\"small\" />\n                        </IconButton>\n                      ) : undefined\n                    }\n                  />\n                )}\n              </ListItemText>\n            </Stack>\n          </li>\n        );\n      }}\n    />\n  );\n}\n\nexport function DatasourceName(props: { name: string; overridden?: boolean; overriding?: boolean }): ReactElement {\n  const { name, overridden, overriding } = props;\n  return (\n    <>\n      {`${name} `}\n      {!overridden && overriding && (\n        <Box display=\"inline\" fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n          (overriding)\n        </Box>\n      )}\n      {overridden && '(overridden)'}\n    </>\n  );\n}\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n/**\n * Given a DatasourceSelectItemSelector,\n * returns a string value like `{kind}_____{group}_____{name}` that can be used as a Select input value.\n * @param selector\n */\nexport function selectorToOptionValue(selector: DatasourceSelectItemSelector | VariableName): string {\n  if (isVariableDatasource(selector)) {\n    return `${DATASOURCE_VARIABLE_VALUE_PREFIX}${selector}`;\n  }\n  return [selector.kind, selector.group ?? '', selector.name ?? ''].join(OPTION_VALUE_DELIMITER);\n}\n\n/**\n * Given an option value name like `{kind}_____{group}_____{name}`,\n * returns a DatasourceSelector to be used by the query data model.\n * @param optionValue\n */\nexport function optionValueToSelector(optionValue: string): DatasourceSelectValue {\n  if (optionValue.startsWith(DATASOURCE_VARIABLE_VALUE_PREFIX)) {\n    return optionValue.split(DATASOURCE_VARIABLE_VALUE_PREFIX)[1]!;\n  }\n\n  const words = optionValue.split(OPTION_VALUE_DELIMITER);\n  const kind = words[0];\n  const name = words[2];\n  if (kind === undefined || name === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    kind,\n    name: name === '' ? undefined : name,\n  };\n}\n\nexport function isVariableDatasource(value: DatasourceSelectValue | undefined): value is VariableName {\n  return typeof value === 'string' && value.startsWith(VARIABLE_IDENTIFIER);\n}\n\nexport const datasourceSelectValueToSelector = (\n  value: DatasourceSelectValue | undefined,\n  variables: VariableStateMap,\n  datasourceSelectItemGroups: DatasourceSelectItemGroup[] | undefined\n): DatasourceSelector | undefined => {\n  if (!isVariableDatasource(value)) {\n    return value;\n  }\n\n  const [variableName] = parseVariables(value);\n  const variable = variables[variableName ?? ''];\n\n  // If the variable is not defined or if its value is an array, we cannot determine a selector and return undefined\n  if (!variable || Array.isArray(variable.value)) {\n    return undefined;\n  }\n\n  const associatedDatasource = (datasourceSelectItemGroups || [])\n    .flatMap((itemGroup) => itemGroup.items)\n    .find((datasource) => datasource.name === variable.value);\n\n  // If the variable value is not a datasource, we cannot determine a selector and return undefined\n  if (associatedDatasource === undefined) {\n    return undefined;\n  }\n\n  const datasourceSelector: DatasourceSelector = {\n    kind: associatedDatasource.selector.kind,\n    name: associatedDatasource.selector.name,\n  };\n\n  return datasourceSelector;\n};\n\nexport const useDatasourceSelectValueToSelector = (\n  value: DatasourceSelectValue,\n  datasourcePluginKind: string\n): DatasourceSelector => {\n  const { data } = useListDatasourceSelectItems(datasourcePluginKind);\n  const variables = useVariableValues();\n  if (!isVariableDatasource(value)) {\n    return value;\n  }\n\n  return datasourceSelectValueToSelector(value, variables, data) ?? { kind: datasourcePluginKind };\n};\n"],"names":["OpenInNewIcon","Stack","ListItemText","Chip","IconButton","Box","Autocomplete","TextField","useMemo","useListDatasourceSelectItems","useVariableValues","parseVariables","DATASOURCE_VARIABLE_VALUE_PREFIX","VARIABLE_IDENTIFIER","emptyDatasourceOption","name","value","DatasourceSelect","props","datasourcePluginKind","project","readOnly","onChange","others","data","isLoading","variables","defaultValue","isVariableDatasource","group","flatMap","itemGroup","items","find","item","kind","selector","overridden","options","datasourceOptions","map","groupLabel","groupEditLink","editLink","overriding","saved","selectorToOptionValue","datasourceOptionsMap","Map","option","variableOptions","Object","entries","variable","Array","isArray","associatedDatasource","get","optionValue","handleChange","selectedOption","next","optionValueToSelector","fakeActionEvent","renderInput","params","label","placeholder","groupBy","getOptionLabel","_","v","renderOption","li","key","direction","alignItems","justifyContent","width","DatasourceName","style","textAlign","length","disabled","size","onDelete","undefined","deleteIcon","href","target","fontSize","display","fontWeight","color","theme","palette","primary","main","OPTION_VALUE_DELIMITER","join","startsWith","split","words","Error","datasourceSelectValueToSelector","datasourceSelectItemGroups","variableName","datasource","datasourceSelector","useDatasourceSelectValueToSelector"],"mappings":"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"}

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

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

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

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

package/dist/components/DatasourceSelect/index.js

@@ -0,0 +1,15 @@
+// Copyright 2023 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 * from './DatasourceSelect';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DatasourceSelect/index.ts"],"sourcesContent":["// Copyright 2023 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 './DatasourceSelect';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,qBAAqB"}

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

@@ -3,6 +3,7 @@ import { QueryDefinition, QueryPluginType } from '@perses-dev/core';
 import { PluginEditorRef } from '../PluginEditor';
 export interface MultiQueryEditorProps {
     queryTypes: QueryPluginType[];
+    filteredQueryPlugins?: string[];
     queries?: QueryDefinition[];
     onChange: (queries: QueryDefinition[]) => void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"MultiQueryEditor.d.ts","sourceRoot":"","sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEpE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;CAChD;AAmCD;;;;;;;GAOG;AAEH,eAAO,MAAM,gBAAgB,mHAmF3B,CAAC"}
+{"version":3,"file":"MultiQueryEditor.d.ts","sourceRoot":"","sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEpE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;CAChD;AA4CD;;;;;;;GAOG;AAEH,eAAO,MAAM,gBAAgB,mHAoF3B,CAAC"}

package/dist/components/MultiQueryEditor/MultiQueryEditor.js

@@ -17,7 +17,7 @@ import { Button, Stack } from '@mui/material';
 import AddIcon from 'mdi-material-ui/Plus';
 import { useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';
 import { QueryEditorContainer } from './QueryEditorContainer';
-function useDefaultQueryDefinition(queryTypes) {
+function useDefaultQueryDefinition(queryTypes, filteredQueryPlugins) {
     // Build the default query plugin
     // This will be used only if the queries are empty, to open a starting query
     // Firs the default query type
@@ -26,7 +26,12 @@ function useDefaultQueryDefinition(queryTypes) {
     // Use as default the plugin kind explicitly set as default or the first in the list
     const { data: queryPlugins, isLoading } = useListPluginMetadata(queryTypes);
     const { defaultPluginKinds } = usePluginRegistry();
-    const defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';
+    let defaultQueryKind = '';
+    if (filteredQueryPlugins?.length) {
+        defaultQueryKind = queryPlugins?.find((i)=>filteredQueryPlugins.includes(i.spec.name)).spec.name ?? '';
+    } else {
+        defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';
+    }
     const { data: defaultQueryPlugin } = usePlugin(defaultQueryType, defaultQueryKind, {
         useErrorBoundary: true,
         enabled: true
@@ -53,8 +58,8 @@ function useDefaultQueryDefinition(queryTypes) {
  * @param onChange The callback to call when the queries are modified
  * @constructor
  */ export const MultiQueryEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { queryTypes, queries = [], onChange } = props;
-    const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes);
+    const { queryTypes, queries = [], filteredQueryPlugins, onChange } = props;
+    const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes, filteredQueryPlugins);
     // State for which queries are collapsed
     const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(()=>false));
     // Query handlers
@@ -122,7 +127,8 @@ function useDefaultQueryDefinition(queryTypes) {
                         isCollapsed: !!queriesCollapsed[i],
                         onChange: handleQueryChange,
                         onDelete: queries.length > 1 ? handleQueryDelete : undefined,
-                        onCollapseExpand: handleQueryCollapseExpand
+                        onCollapseExpand: handleQueryCollapseExpand,
+                        filteredQueryPlugins: filteredQueryPlugins
                     }, i))
             }),
             /*#__PURE__*/ _jsx(Button, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { forwardRef, ReactElement, useState } from 'react';\nimport { produce } from 'immer';\nimport { Button, Stack } from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/core';\nimport { useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';\nimport { PluginEditorRef } from '../PluginEditor';\nimport { QueryEditorContainer } from './QueryEditorContainer';\n\nexport interface MultiQueryEditorProps {\n  queryTypes: QueryPluginType[];\n  queries?: QueryDefinition[];\n  onChange: (queries: QueryDefinition[]) => void;\n}\n\nfunction useDefaultQueryDefinition(queryTypes: QueryPluginType[]): {\n  defaultInitialQueryDefinition: QueryDefinition;\n  isLoading: boolean;\n} {\n  // Build the default query plugin\n  // This will be used only if the queries are empty, to open a starting query\n\n  // Firs the default query type\n  const defaultQueryType = queryTypes[0]!;\n\n  // Then the default plugin kind\n  // Use as default the plugin kind explicitly set as default or the first in the list\n  const { data: queryPlugins, isLoading } = useListPluginMetadata(queryTypes);\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';\n\n  const { data: defaultQueryPlugin } = usePlugin(defaultQueryType, defaultQueryKind, {\n    useErrorBoundary: true,\n    enabled: true,\n  });\n\n  // This default query definition is used if no query is provided initially or when we add a new query\n  return {\n    defaultInitialQueryDefinition: {\n      kind: defaultQueryType,\n      spec: {\n        plugin: { kind: defaultQueryKind, spec: defaultQueryPlugin?.createInitialOptions() || {} },\n      },\n    },\n    isLoading,\n  };\n}\n\n/**\n * A component render a list of {@link QueryEditorContainer} for the given query definitions.\n * It allows adding, removing and editing queries.\n * @param queryTypes The list of query types that the underlying editor will propose\n * @param queries The list of query definitions to render\n * @param onChange The callback to call when the queries are modified\n * @constructor\n */\n\nexport const MultiQueryEditor = forwardRef<PluginEditorRef, MultiQueryEditorProps>((props, ref): ReactElement => {\n  const { queryTypes, queries = [], onChange } = props;\n  const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes);\n  // State for which queries are collapsed\n  const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(() => false));\n\n  // Query handlers\n  const handleQueryChange = (index: number, queryDef: QueryDefinition): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft[index] = queryDef;\n        } else {\n          draft = [queryDef];\n        }\n      })\n    );\n  };\n\n  const handleQueryAdd = (): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft.push(defaultInitialQueryDefinition);\n        } else {\n          draft = [...queries, defaultInitialQueryDefinition];\n        }\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.push(false);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryDelete = (index: number): void => {\n    onChange(\n      produce(queries, (draft) => {\n        draft.splice(index, 1);\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.splice(index, 1);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryCollapseExpand = (index: number): void => {\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed[index] = !queriesCollapsed[index];\n      return [...queriesCollapsed];\n    });\n  };\n\n  // show one query input if queries is empty\n  const queryDefinitions: QueryDefinition[] = queries.length\n    ? queries\n    : !isLoading\n      ? [defaultInitialQueryDefinition]\n      : [];\n\n  return (\n    <>\n      <Stack spacing={1}>\n        {queryDefinitions.map((query: QueryDefinition, i: number) => (\n          <QueryEditorContainer\n            ref={ref}\n            queryTypes={queryTypes}\n            key={i}\n            index={i}\n            query={query}\n            isCollapsed={!!queriesCollapsed[i]}\n            onChange={handleQueryChange}\n            onDelete={queries.length > 1 ? handleQueryDelete : undefined}\n            onCollapseExpand={handleQueryCollapseExpand}\n          />\n        ))}\n      </Stack>\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleQueryAdd}>\n        Add Query\n      </Button>\n    </>\n  );\n});\n\nMultiQueryEditor.displayName = 'MultiQueryEditor';\n"],"names":["forwardRef","useState","produce","Button","Stack","AddIcon","useListPluginMetadata","usePlugin","usePluginRegistry","QueryEditorContainer","useDefaultQueryDefinition","queryTypes","defaultQueryType","data","queryPlugins","isLoading","defaultPluginKinds","defaultQueryKind","spec","name","defaultQueryPlugin","useErrorBoundary","enabled","defaultInitialQueryDefinition","kind","plugin","createInitialOptions","MultiQueryEditor","props","ref","queries","onChange","queriesCollapsed","setQueriesCollapsed","map","handleQueryChange","index","queryDef","draft","handleQueryAdd","push","handleQueryDelete","splice","handleQueryCollapseExpand","queryDefinitions","length","spacing","query","i","isCollapsed","onDelete","undefined","onCollapseExpand","variant","startIcon","sx","marginTop","onClick","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { forwardRef, ReactElement, useState } from 'react';\nimport { produce } from 'immer';\nimport { Button, Stack } from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/core';\nimport { useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';\nimport { PluginEditorRef } from '../PluginEditor';\nimport { QueryEditorContainer } from './QueryEditorContainer';\n\nexport interface MultiQueryEditorProps {\n  queryTypes: QueryPluginType[];\n  filteredQueryPlugins?: string[];\n  queries?: QueryDefinition[];\n  onChange: (queries: QueryDefinition[]) => void;\n}\n\nfunction useDefaultQueryDefinition(\n  queryTypes: QueryPluginType[],\n  filteredQueryPlugins?: string[]\n): {\n  defaultInitialQueryDefinition: QueryDefinition;\n  isLoading: boolean;\n} {\n  // Build the default query plugin\n  // This will be used only if the queries are empty, to open a starting query\n\n  // Firs the default query type\n  const defaultQueryType = queryTypes[0]!;\n  // Then the default plugin kind\n  // Use as default the plugin kind explicitly set as default or the first in the list\n  const { data: queryPlugins, isLoading } = useListPluginMetadata(queryTypes);\n  const { defaultPluginKinds } = usePluginRegistry();\n\n  let defaultQueryKind: string = '';\n\n  if (filteredQueryPlugins?.length) {\n    defaultQueryKind = queryPlugins?.find((i) => filteredQueryPlugins.includes(i.spec.name))!.spec.name ?? '';\n  } else {\n    defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';\n  }\n\n  const { data: defaultQueryPlugin } = usePlugin(defaultQueryType, defaultQueryKind, {\n    useErrorBoundary: true,\n    enabled: true,\n  });\n\n  // This default query definition is used if no query is provided initially or when we add a new query\n  return {\n    defaultInitialQueryDefinition: {\n      kind: defaultQueryType,\n      spec: {\n        plugin: { kind: defaultQueryKind, spec: defaultQueryPlugin?.createInitialOptions() || {} },\n      },\n    },\n    isLoading,\n  };\n}\n\n/**\n * A component render a list of {@link QueryEditorContainer} for the given query definitions.\n * It allows adding, removing and editing queries.\n * @param queryTypes The list of query types that the underlying editor will propose\n * @param queries The list of query definitions to render\n * @param onChange The callback to call when the queries are modified\n * @constructor\n */\n\nexport const MultiQueryEditor = forwardRef<PluginEditorRef, MultiQueryEditorProps>((props, ref): ReactElement => {\n  const { queryTypes, queries = [], filteredQueryPlugins, onChange } = props;\n  const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes, filteredQueryPlugins);\n  // State for which queries are collapsed\n  const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(() => false));\n\n  // Query handlers\n  const handleQueryChange = (index: number, queryDef: QueryDefinition): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft[index] = queryDef;\n        } else {\n          draft = [queryDef];\n        }\n      })\n    );\n  };\n\n  const handleQueryAdd = (): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft.push(defaultInitialQueryDefinition);\n        } else {\n          draft = [...queries, defaultInitialQueryDefinition];\n        }\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.push(false);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryDelete = (index: number): void => {\n    onChange(\n      produce(queries, (draft) => {\n        draft.splice(index, 1);\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.splice(index, 1);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryCollapseExpand = (index: number): void => {\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed[index] = !queriesCollapsed[index];\n      return [...queriesCollapsed];\n    });\n  };\n\n  // show one query input if queries is empty\n  const queryDefinitions: QueryDefinition[] = queries.length\n    ? queries\n    : !isLoading\n      ? [defaultInitialQueryDefinition]\n      : [];\n\n  return (\n    <>\n      <Stack spacing={1}>\n        {queryDefinitions.map((query: QueryDefinition, i: number) => (\n          <QueryEditorContainer\n            ref={ref}\n            queryTypes={queryTypes}\n            key={i}\n            index={i}\n            query={query}\n            isCollapsed={!!queriesCollapsed[i]}\n            onChange={handleQueryChange}\n            onDelete={queries.length > 1 ? handleQueryDelete : undefined}\n            onCollapseExpand={handleQueryCollapseExpand}\n            filteredQueryPlugins={filteredQueryPlugins}\n          />\n        ))}\n      </Stack>\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleQueryAdd}>\n        Add Query\n      </Button>\n    </>\n  );\n});\n\nMultiQueryEditor.displayName = 'MultiQueryEditor';\n"],"names":["forwardRef","useState","produce","Button","Stack","AddIcon","useListPluginMetadata","usePlugin","usePluginRegistry","QueryEditorContainer","useDefaultQueryDefinition","queryTypes","filteredQueryPlugins","defaultQueryType","data","queryPlugins","isLoading","defaultPluginKinds","defaultQueryKind","length","find","i","includes","spec","name","defaultQueryPlugin","useErrorBoundary","enabled","defaultInitialQueryDefinition","kind","plugin","createInitialOptions","MultiQueryEditor","props","ref","queries","onChange","queriesCollapsed","setQueriesCollapsed","map","handleQueryChange","index","queryDef","draft","handleQueryAdd","push","handleQueryDelete","splice","handleQueryCollapseExpand","queryDefinitions","spacing","query","isCollapsed","onDelete","undefined","onCollapseExpand","variant","startIcon","sx","marginTop","onClick","displayName"],"mappings":"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"}

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

@@ -8,6 +8,7 @@ interface QueryEditorContainerProps {
     queryTypes: QueryPluginType[];
     index: number;
     query: QueryDefinition;
+    filteredQueryPlugins?: string[];
     onChange: (index: number, query: QueryDefinition) => void;
     onCollapseExpand: (index: number) => void;
     isCollapsed?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"QueryEditorContainer.d.ts","sourceRoot":"","sources":["../../../src/components/MultiQueryEditor/QueryEditorContainer.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAMpE,OAAO,EAAmC,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGnF;;GAEG;AACH,UAAU,yBAAyB;IACjC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1D,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED;;;;;;;;;;;GAWG;AAEH,eAAO,MAAM,oBAAoB,uHA2BhC,CAAC"}
+{"version":3,"file":"QueryEditorContainer.d.ts","sourceRoot":"","sources":["../../../src/components/MultiQueryEditor/QueryEditorContainer.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAMpE,OAAO,EAAmC,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGnF;;GAEG;AACH,UAAU,yBAAyB;IACjC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,eAAe,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1D,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED;;;;;;;;;;;GAWG;AAEH,eAAO,MAAM,oBAAoB,uHAiChC,CAAC"}

package/dist/components/MultiQueryEditor/QueryEditorContainer.js

@@ -31,7 +31,7 @@ import { useTimeRange } from '../../runtime';
  * @param onCollapseExpand callback when the query is collapsed or expanded
  * @constructor
  */ export const QueryEditorContainer = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { queryTypes, index, query, isCollapsed, onDelete, onChange, onCollapseExpand } = props;
+    const { queryTypes, filteredQueryPlugins, index, query, isCollapsed, onDelete, onChange, onCollapseExpand } = props;
     return /*#__PURE__*/ _jsxs(Stack, {
         spacing: 1,
         children: [
@@ -67,6 +67,7 @@ import { useTimeRange } from '../../runtime';
                 ]
             }),
             !isCollapsed && /*#__PURE__*/ _jsx(QueryEditor, {
+                filteredQueryPlugins: filteredQueryPlugins,
                 ref: ref,
                 queryTypes: queryTypes,
                 value: query,
@@ -83,7 +84,7 @@ QueryEditorContainer.displayName = 'QueryEditorContainer';
  * @param props
  * @constructor
  */ const QueryEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { value, onChange, queryTypes, ...others } = props;
+    const { value, onChange, queryTypes, filteredQueryPlugins, ...others } = props;
     const { refresh } = useTimeRange();
     const handlePluginChange = (next)=>{
         onChange(produce(value, (draft)=>{
@@ -107,7 +108,8 @@ QueryEditorContainer.displayName = 'QueryEditorContainer';
                 },
                 spec: value.spec.plugin.spec
             },
-            onChange: handlePluginChange
+            onChange: handlePluginChange,
+            filteredQueryPlugins: filteredQueryPlugins
         })
     });
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MultiQueryEditor/QueryEditorContainer.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { produce } from 'immer';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/core';\nimport { Stack, IconButton, Typography, BoxProps, Box } 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 { PluginEditor, PluginEditorProps, PluginEditorRef } from '../PluginEditor';\nimport { useTimeRange } from '../../runtime';\n\n/**\n * Properties for {@link QueryEditorContainer}\n */\ninterface QueryEditorContainerProps {\n  queryTypes: QueryPluginType[];\n  index: number;\n  query: QueryDefinition;\n  onChange: (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 { queryTypes, index, query, isCollapsed, onDelete, onChange, onCollapseExpand } = props;\n    return (\n      <Stack key={index} spacing={1}>\n        <Stack direction=\"row\" alignItems=\"center\" borderBottom={1} borderColor={(theme) => theme.palette.divider}>\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          <IconButton\n            size=\"small\"\n            // Use `visibility` to ensure that the row has the same height when delete button is visible or not visible\n            sx={{ marginLeft: 'auto', visibility: `${onDelete ? 'visible' : 'hidden'}` }}\n            onClick={() => onDelete && onDelete(index)}\n          >\n            <DeleteIcon />\n          </IconButton>\n        </Stack>\n        {!isCollapsed && (\n          <QueryEditor ref={ref} queryTypes={queryTypes} value={query} onChange={(next) => onChange(index, next)} />\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  onChange: (next: QueryDefinition) => 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 { value, onChange, queryTypes, ...others } = props;\n  const { refresh } = useTimeRange();\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        postExecuteRunQuery={refresh}\n        ref={ref}\n        withRunQueryButton\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        onChange={handlePluginChange}\n      />\n    </Box>\n  );\n});\n\nQueryEditor.displayName = 'QueryEditor';\n"],"names":["produce","Stack","IconButton","Typography","Box","DeleteIcon","ChevronDown","ChevronRight","forwardRef","PluginEditor","useTimeRange","QueryEditorContainer","props","ref","queryTypes","index","query","isCollapsed","onDelete","onChange","onCollapseExpand","spacing","direction","alignItems","borderBottom","borderColor","theme","palette","divider","size","onClick","variant","component","sx","marginLeft","visibility","QueryEditor","value","next","displayName","others","refresh","handlePluginChange","draft","kind","selection","type","spec","plugin","postExecuteRunQuery","withRunQueryButton","pluginTypes","pluginKindLabel"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,OAAO,QAAQ,QAAQ;AAEhC,SAASC,KAAK,EAAEC,UAAU,EAAEC,UAAU,EAAYC,GAAG,QAAQ,gBAAgB;AAC7E,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,kBAAkB,+BAA+B;AACxD,SAASC,UAAU,QAAsB,QAAQ;AACjD,SAASC,YAAY,QAA4C,kBAAkB;AACnF,SAASC,YAAY,QAAQ,gBAAgB;AAe7C;;;;;;;;;;;CAWC,GAED,OAAO,MAAMC,qCAAuBH,WAClC,CAACI,OAAOC;IACN,MAAM,EAAEC,UAAU,EAAEC,KAAK,EAAEC,KAAK,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,gBAAgB,EAAE,GAAGR;IACxF,qBACE,MAACX;QAAkBoB,SAAS;;0BAC1B,MAACpB;gBAAMqB,WAAU;gBAAMC,YAAW;gBAASC,cAAc;gBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;;kCACvG,KAAC1B;wBAAW2B,MAAK;wBAAQC,SAAS,IAAMV,iBAAiBL;kCACtDE,4BAAc,KAACV,kCAAkB,KAACD;;kCAErC,MAACH;wBAAW4B,SAAQ;wBAAWC,WAAU;;4BAAK;4BACpCjB,QAAQ;;;kCAElB,KAACb;wBACC2B,MAAK;wBACL,2GAA2G;wBAC3GI,IAAI;4BAAEC,YAAY;4BAAQC,YAAY,GAAGjB,WAAW,YAAY,UAAU;wBAAC;wBAC3EY,SAAS,IAAMZ,YAAYA,SAASH;kCAEpC,cAAA,KAACV;;;;YAGJ,CAACY,6BACA,KAACmB;gBAAYvB,KAAKA;gBAAKC,YAAYA;gBAAYuB,OAAOrB;gBAAOG,UAAU,CAACmB,OAASnB,SAASJ,OAAOuB;;;OAlBzFvB;AAsBhB,GACA;AAEFJ,qBAAqB4B,WAAW,GAAG;AAWnC;;;;;;CAMC,GAED,MAAMH,4BAAc5B,WAA8C,CAACI,OAAOC;IACxE,MAAM,EAAEwB,KAAK,EAAElB,QAAQ,EAAEL,UAAU,EAAE,GAAG0B,QAAQ,GAAG5B;IACnD,MAAM,EAAE6B,OAAO,EAAE,GAAG/B;IACpB,MAAMgC,qBAAoD,CAACJ;QACzDnB,SACEnB,QAAQqC,OAAO,CAACM;YACdA,MAAMC,IAAI,GAAGN,KAAKO,SAAS,CAACC,IAAI;YAChCH,MAAMI,IAAI,CAACC,MAAM,CAACJ,IAAI,GAAGN,KAAKO,SAAS,CAACD,IAAI;YAC5CD,MAAMI,IAAI,CAACC,MAAM,CAACD,IAAI,GAAGT,KAAKS,IAAI;QACpC;IAEJ;IAEA,qBACE,KAAC3C;QAAK,GAAGoC,MAAM;kBACb,cAAA,KAAC/B;YACCwC,qBAAqBR;YACrB5B,KAAKA;YACLqC,kBAAkB;YAClBC,aAAarC;YACbsC,iBAAgB;YAChBf,OAAO;gBACLQ,WAAW;oBACTD,MAAMP,MAAMU,IAAI,CAACC,MAAM,CAACJ,IAAI;oBAC5BE,MAAMT,MAAMO,IAAI;gBAClB;gBACAG,MAAMV,MAAMU,IAAI,CAACC,MAAM,CAACD,IAAI;YAC9B;YACA5B,UAAUuB;;;AAIlB;AAEAN,YAAYG,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/MultiQueryEditor/QueryEditorContainer.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { produce } from 'immer';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/core';\nimport { Stack, IconButton, Typography, BoxProps, Box } 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 { PluginEditor, PluginEditorProps, PluginEditorRef } from '../PluginEditor';\nimport { useTimeRange } from '../../runtime';\n\n/**\n * Properties for {@link QueryEditorContainer}\n */\ninterface QueryEditorContainerProps {\n  queryTypes: QueryPluginType[];\n  index: number;\n  query: QueryDefinition;\n  filteredQueryPlugins?: string[];\n  onChange: (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 { queryTypes, filteredQueryPlugins, index, query, isCollapsed, onDelete, onChange, onCollapseExpand } = props;\n    return (\n      <Stack key={index} spacing={1}>\n        <Stack direction=\"row\" alignItems=\"center\" borderBottom={1} borderColor={(theme) => theme.palette.divider}>\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          <IconButton\n            size=\"small\"\n            // Use `visibility` to ensure that the row has the same height when delete button is visible or not visible\n            sx={{ marginLeft: 'auto', visibility: `${onDelete ? 'visible' : 'hidden'}` }}\n            onClick={() => onDelete && onDelete(index)}\n          >\n            <DeleteIcon />\n          </IconButton>\n        </Stack>\n        {!isCollapsed && (\n          <QueryEditor\n            filteredQueryPlugins={filteredQueryPlugins}\n            ref={ref}\n            queryTypes={queryTypes}\n            value={query}\n            onChange={(next) => onChange(index, next)}\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  filteredQueryPlugins?: string[];\n  value: QueryDefinition;\n  onChange: (next: QueryDefinition) => 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 { value, onChange, queryTypes, filteredQueryPlugins, ...others } = props;\n  const { refresh } = useTimeRange();\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        postExecuteRunQuery={refresh}\n        ref={ref}\n        withRunQueryButton\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        onChange={handlePluginChange}\n        filteredQueryPlugins={filteredQueryPlugins}\n      />\n    </Box>\n  );\n});\n\nQueryEditor.displayName = 'QueryEditor';\n"],"names":["produce","Stack","IconButton","Typography","Box","DeleteIcon","ChevronDown","ChevronRight","forwardRef","PluginEditor","useTimeRange","QueryEditorContainer","props","ref","queryTypes","filteredQueryPlugins","index","query","isCollapsed","onDelete","onChange","onCollapseExpand","spacing","direction","alignItems","borderBottom","borderColor","theme","palette","divider","size","onClick","variant","component","sx","marginLeft","visibility","QueryEditor","value","next","displayName","others","refresh","handlePluginChange","draft","kind","selection","type","spec","plugin","postExecuteRunQuery","withRunQueryButton","pluginTypes","pluginKindLabel"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,OAAO,QAAQ,QAAQ;AAEhC,SAASC,KAAK,EAAEC,UAAU,EAAEC,UAAU,EAAYC,GAAG,QAAQ,gBAAgB;AAC7E,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,kBAAkB,+BAA+B;AACxD,SAASC,UAAU,QAAsB,QAAQ;AACjD,SAASC,YAAY,QAA4C,kBAAkB;AACnF,SAASC,YAAY,QAAQ,gBAAgB;AAgB7C;;;;;;;;;;;CAWC,GAED,OAAO,MAAMC,qCAAuBH,WAClC,CAACI,OAAOC;IACN,MAAM,EAAEC,UAAU,EAAEC,oBAAoB,EAAEC,KAAK,EAAEC,KAAK,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,gBAAgB,EAAE,GAAGT;IAC9G,qBACE,MAACX;QAAkBqB,SAAS;;0BAC1B,MAACrB;gBAAMsB,WAAU;gBAAMC,YAAW;gBAASC,cAAc;gBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;;kCACvG,KAAC3B;wBAAW4B,MAAK;wBAAQC,SAAS,IAAMV,iBAAiBL;kCACtDE,4BAAc,KAACX,kCAAkB,KAACD;;kCAErC,MAACH;wBAAW6B,SAAQ;wBAAWC,WAAU;;4BAAK;4BACpCjB,QAAQ;;;kCAElB,KAACd;wBACC4B,MAAK;wBACL,2GAA2G;wBAC3GI,IAAI;4BAAEC,YAAY;4BAAQC,YAAY,GAAGjB,WAAW,YAAY,UAAU;wBAAC;wBAC3EY,SAAS,IAAMZ,YAAYA,SAASH;kCAEpC,cAAA,KAACX;;;;YAGJ,CAACa,6BACA,KAACmB;gBACCtB,sBAAsBA;gBACtBF,KAAKA;gBACLC,YAAYA;gBACZwB,OAAOrB;gBACPG,UAAU,CAACmB,OAASnB,SAASJ,OAAOuB;;;OAvB9BvB;AA4BhB,GACA;AAEFL,qBAAqB6B,WAAW,GAAG;AAYnC;;;;;;CAMC,GAED,MAAMH,4BAAc7B,WAA8C,CAACI,OAAOC;IACxE,MAAM,EAAEyB,KAAK,EAAElB,QAAQ,EAAEN,UAAU,EAAEC,oBAAoB,EAAE,GAAG0B,QAAQ,GAAG7B;IACzE,MAAM,EAAE8B,OAAO,EAAE,GAAGhC;IACpB,MAAMiC,qBAAoD,CAACJ;QACzDnB,SACEpB,QAAQsC,OAAO,CAACM;YACdA,MAAMC,IAAI,GAAGN,KAAKO,SAAS,CAACC,IAAI;YAChCH,MAAMI,IAAI,CAACC,MAAM,CAACJ,IAAI,GAAGN,KAAKO,SAAS,CAACD,IAAI;YAC5CD,MAAMI,IAAI,CAACC,MAAM,CAACD,IAAI,GAAGT,KAAKS,IAAI;QACpC;IAEJ;IAEA,qBACE,KAAC5C;QAAK,GAAGqC,MAAM;kBACb,cAAA,KAAChC;YACCyC,qBAAqBR;YACrB7B,KAAKA;YACLsC,kBAAkB;YAClBC,aAAatC;YACbuC,iBAAgB;YAChBf,OAAO;gBACLQ,WAAW;oBACTD,MAAMP,MAAMU,IAAI,CAACC,MAAM,CAACJ,IAAI;oBAC5BE,MAAMT,MAAMO,IAAI;gBAClB;gBACAG,MAAMV,MAAMU,IAAI,CAACC,MAAM,CAACD,IAAI;YAC9B;YACA5B,UAAUuB;YACV5B,sBAAsBA;;;AAI9B;AAEAsB,YAAYG,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"file":"PluginEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/PluginEditor.tsx"],"names":[],"mappings":";AAoBA,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAmB,MAAM,qBAAqB,CAAC;AAE1F;;;;;;;GAOG;AAEH,eAAO,MAAM,YAAY,4HAwFvB,CAAC"}
+{"version":3,"file":"PluginEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/PluginEditor.tsx"],"names":[],"mappings":";AAoBA,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAmB,MAAM,qBAAqB,CAAC;AAE1F;;;;;;;GAOG;AAEH,eAAO,MAAM,YAAY,4HA0FvB,CAAC"}

package/dist/components/PluginEditor/PluginEditor.js

@@ -26,7 +26,7 @@ import { usePluginEditor } from './plugin-editor-api';
  * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the
  * `usePluginEditor` hook that powers this component.
  */ export const PluginEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { value, withRunQueryButton = true, pluginTypes, pluginKindLabel, onChange: _, isReadonly, postExecuteRunQuery: refresh, ...others } = props;
+    const { value, withRunQueryButton = true, pluginTypes, pluginKindLabel, onChange: _, isReadonly, postExecuteRunQuery: refresh, filteredQueryPlugins, ...others } = props;
     const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = usePluginEditor(props);
     /* 
      We could technically merge the watchedQuery, watchedOtherSpecs into a single watched-object,
@@ -96,7 +96,8 @@ import { usePluginEditor } from './plugin-editor-api';
                         },
                         error: !!error,
                         helperText: error?.message,
-                        onChange: onSelectionChange
+                        onChange: onSelectionChange,
+                        filteredQueryPlugins: filteredQueryPlugins
                     }),
                     withRunQueryButton && !isLoading && /*#__PURE__*/ _jsx(Button, {
                         "data-testid": "run_query_button",