@perses-dev/plugin-system 0.44.0 → 0.45.0-rc0

package/dist/components/{TimeSeriesQueryEditor/TimeSeriesQueryEditor.js → MultiQueryEditor/MultiQueryEditor.js}

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -15,20 +15,45 @@ import { useState } from 'react';
 import { produce } from 'immer';
 import { Button, Stack } from '@mui/material';
 import AddIcon from 'mdi-material-ui/Plus';
-import { usePlugin, usePluginRegistry } from '../../runtime';
-import { TimeSeriesQueryInput } from './TimeSeriesQueryInput';
-const DEFAULT_QUERY_PLUGIN_TYPE = 'TimeSeriesQuery';
-export function TimeSeriesQueryEditor({ queries = [], onChange }) {
-    const hasMoreThanOneQuery = queries.length > 1;
+import { useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';
+import { QueryEditorContainer } from './QueryEditorContainer';
+function useDefaultQueryDefinition(queryTypes) {
+    var _queryPlugins_;
+    // 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
+    const defaultQueryType = queryTypes[0];
+    // Then the default plugin kind
+    // Use as default the plugin kind explicitly set as default or the first in the list
+    const { data: queryPlugins } = useListPluginMetadata(queryTypes);
     const { defaultPluginKinds } = usePluginRegistry();
-    var _defaultPluginKinds_DEFAULT_QUERY_PLUGIN_TYPE;
-    const defaultTimeSeriesQueryKind = (_defaultPluginKinds_DEFAULT_QUERY_PLUGIN_TYPE = defaultPluginKinds === null || defaultPluginKinds === void 0 ? void 0 : defaultPluginKinds[DEFAULT_QUERY_PLUGIN_TYPE]) !== null && _defaultPluginKinds_DEFAULT_QUERY_PLUGIN_TYPE !== void 0 ? _defaultPluginKinds_DEFAULT_QUERY_PLUGIN_TYPE : '';
-    const { data: defaultQueryPlugin } = usePlugin(DEFAULT_QUERY_PLUGIN_TYPE, defaultTimeSeriesQueryKind, {
+    var _defaultPluginKinds_defaultQueryType, _ref;
+    const defaultQueryKind = (_ref = (_defaultPluginKinds_defaultQueryType = defaultPluginKinds === null || defaultPluginKinds === void 0 ? void 0 : defaultPluginKinds[defaultQueryType]) !== null && _defaultPluginKinds_defaultQueryType !== void 0 ? _defaultPluginKinds_defaultQueryType : queryPlugins === null || queryPlugins === void 0 ? void 0 : (_queryPlugins_ = queryPlugins[0]) === null || _queryPlugins_ === void 0 ? void 0 : _queryPlugins_.kind) !== null && _ref !== void 0 ? _ref : '';
+    const { data: defaultQueryPlugin } = usePlugin(defaultQueryType, defaultQueryKind, {
         useErrorBoundary: true,
         enabled: true
     });
+    // This default query definition is used if no query is provided initially or when we add a new query
+    return {
+        kind: defaultQueryType,
+        spec: {
+            plugin: {
+                kind: defaultQueryKind,
+                spec: (defaultQueryPlugin === null || defaultQueryPlugin === void 0 ? void 0 : defaultQueryPlugin.createInitialOptions()) || {}
+            }
+        }
+    };
+}
+/**
+ * A component render a list of {@link QueryEditor} for the given query definitions.
+ * It allows adding, removing and editing queries.
+ * @param queryTypes The list of query types that the underlying editor will propose
+ * @param queries The list of query definitions to render
+ * @param onChange The callback to call when the queries are modified
+ * @constructor
+ */ export function MultiQueryEditor({ queryTypes, queries = [], onChange }) {
+    const defaultInitialQueryDefinition = useDefaultQueryDefinition(queryTypes);
     // State for which queries are collapsed
-    // TODO: Would be easier if we had IDs for queries.
     const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(()=>false));
     // Query handlers
     const handleQueryChange = (index, queryDef)=>{
@@ -43,23 +68,13 @@ export function TimeSeriesQueryEditor({ queries = [], onChange }) {
         }));
     };
     const handleQueryAdd = ()=>{
-        if (!defaultQueryPlugin) return;
         onChange(produce(queries, (draft)=>{
-            const queryDef = {
-                kind: DEFAULT_QUERY_PLUGIN_TYPE,
-                spec: {
-                    plugin: {
-                        kind: defaultTimeSeriesQueryKind,
-                        spec: defaultQueryPlugin.createInitialOptions()
-                    }
-                }
-            };
             if (draft) {
-                draft.push(queryDef);
+                draft.push(defaultInitialQueryDefinition);
             } else {
                 draft = [
                     ...queries,
-                    queryDef
+                    defaultInitialQueryDefinition
                 ];
             }
         }));
@@ -89,31 +104,21 @@ export function TimeSeriesQueryEditor({ queries = [], onChange }) {
             ];
         });
     };
-    var _defaultPluginKinds_TimeSeriesQuery;
     // show one query input if queries is empty
     const queryDefinitions = queries.length ? queries : [
-        {
-            kind: 'TimeSeriesQuery',
-            spec: {
-                plugin: {
-                    kind: (_defaultPluginKinds_TimeSeriesQuery = defaultPluginKinds === null || defaultPluginKinds === void 0 ? void 0 : defaultPluginKinds['TimeSeriesQuery']) !== null && _defaultPluginKinds_TimeSeriesQuery !== void 0 ? _defaultPluginKinds_TimeSeriesQuery : '',
-                    spec: {
-                        query: ''
-                    }
-                }
-            }
-        }
+        defaultInitialQueryDefinition
     ];
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(Stack, {
                 spacing: 1,
-                children: queryDefinitions.map((query, i)=>/*#__PURE__*/ _jsx(TimeSeriesQueryInput, {
+                children: queryDefinitions.map((query, i)=>/*#__PURE__*/ _jsx(QueryEditorContainer, {
+                        queryTypes: queryTypes,
                         index: i,
                         query: query,
                         isCollapsed: !!queriesCollapsed[i],
                         onChange: handleQueryChange,
-                        onDelete: hasMoreThanOneQuery ? handleQueryDelete : undefined,
+                        onDelete: queries.length > 1 ? handleQueryDelete : undefined,
                         onCollapseExpand: handleQueryCollapseExpand
                     }, i))
             }),
@@ -130,4 +135,4 @@ export function TimeSeriesQueryEditor({ queries = [], onChange }) {
     });
 }
 
-//# sourceMappingURL=TimeSeriesQueryEditor.js.map
+//# sourceMappingURL=MultiQueryEditor.js.map

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

@@ -0,0 +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 { useState } from 'react';\nimport { produce } from 'immer';\nimport { Button, Stack } from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { TimeSeriesQueryDefinition, QueryDefinition, QueryPluginType } from '@perses-dev/core';\nimport { useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';\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[]): QueryDefinition {\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 } = useListPluginMetadata(queryTypes);\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.kind ?? '';\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    kind: defaultQueryType,\n    spec: {\n      plugin: { kind: defaultQueryKind, spec: defaultQueryPlugin?.createInitialOptions() || {} },\n    },\n  };\n}\n\n/**\n * A component render a list of {@link QueryEditor} 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 */\nexport function MultiQueryEditor({ queryTypes, queries = [], onChange }: MultiQueryEditorProps) {\n  const defaultInitialQueryDefinition = useDefaultQueryDefinition(queryTypes);\n\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: TimeSeriesQueryDefinition) => {\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 = () => {\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) => {\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) => {\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: TimeSeriesQueryDefinition[] = queries.length ? queries : [defaultInitialQueryDefinition];\n\n  return (\n    <>\n      <Stack spacing={1}>\n        {queryDefinitions.map((query: QueryDefinition, i: number) => (\n          <QueryEditorContainer\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"],"names":["useState","produce","Button","Stack","AddIcon","useListPluginMetadata","usePlugin","usePluginRegistry","QueryEditorContainer","useDefaultQueryDefinition","queryTypes","queryPlugins","defaultQueryType","data","defaultPluginKinds","defaultQueryKind","kind","defaultQueryPlugin","useErrorBoundary","enabled","spec","plugin","createInitialOptions","MultiQueryEditor","queries","onChange","defaultInitialQueryDefinition","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"],"mappings":"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"}

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

@@ -0,0 +1,28 @@
+import { QueryDefinition, QueryPluginType } from '@perses-dev/core';
+/**
+ * Properties for {@link QueryEditorContainer}
+ */
+interface QueryEditorContainerProps {
+    queryTypes: QueryPluginType[];
+    index: number;
+    query: QueryDefinition;
+    onChange: (index: number, query: QueryDefinition) => void;
+    onCollapseExpand: (index: number) => void;
+    isCollapsed?: boolean;
+    onDelete?: (index: number) => void;
+}
+/**
+ * Container for a query editor. This component is responsible for rendering the query editor, and make it collapsible
+ * to not take too much space.
+ * @param queryTypes the supported query types
+ * @param index the index of the query in the list
+ * @param query the query definition
+ * @param isCollapsed whether the query editor is collapsed or not
+ * @param onDelete callback when the query is deleted
+ * @param onChange callback when the query is changed
+ * @param onCollapseExpand callback when the query is collapsed or expanded
+ * @constructor
+ */
+export declare const QueryEditorContainer: ({ queryTypes, index, query, isCollapsed, onDelete, onChange, onCollapseExpand, }: QueryEditorContainerProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=QueryEditorContainer.d.ts.map

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

@@ -0,0 +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;AAOpE;;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;AACH,eAAO,MAAM,oBAAoB,qFAQ9B,yBAAyB,4CAsB3B,CAAC"}

package/dist/components/{TimeSeriesQueryEditor/TimeSeriesQueryInput.js → MultiQueryEditor/QueryEditorContainer.js}

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -17,7 +17,18 @@ import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import ChevronDown from 'mdi-material-ui/ChevronDown';
 import ChevronRight from 'mdi-material-ui/ChevronRight';
 import { PluginEditor } from '../PluginEditor';
-export const TimeSeriesQueryInput = ({ index, query, isCollapsed, onDelete, onChange, onCollapseExpand })=>{
+/**
+ * Container for a query editor. This component is responsible for rendering the query editor, and make it collapsible
+ * to not take too much space.
+ * @param queryTypes the supported query types
+ * @param index the index of the query in the list
+ * @param query the query definition
+ * @param isCollapsed whether the query editor is collapsed or not
+ * @param onDelete callback when the query is deleted
+ * @param onChange callback when the query is changed
+ * @param onCollapseExpand callback when the query is collapsed or expanded
+ * @constructor
+ */ export const QueryEditorContainer = ({ queryTypes, index, query, isCollapsed, onDelete, onChange, onCollapseExpand })=>{
     return /*#__PURE__*/ _jsxs(Stack, {
         spacing: 1,
         children: [
@@ -53,6 +64,7 @@ export const TimeSeriesQueryInput = ({ index, query, isCollapsed, onDelete, onCh
                 ]
             }),
             !isCollapsed && /*#__PURE__*/ _jsx(QueryEditor, {
+                queryTypes: queryTypes,
                 value: query,
                 onChange: (next)=>onChange(index, next)
             })
@@ -60,24 +72,35 @@ export const TimeSeriesQueryInput = ({ index, query, isCollapsed, onDelete, onCh
     }, index);
 };
 /**
- * Displays an editor for TimeSeriesQueryDefinition objects.
+ * 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
+ * spec for this plugin.
+ * @param props
+ * @constructor
  */ function QueryEditor(props) {
-    const { value, onChange, ...others } = props;
-    const { spec: { plugin } } = value;
+    const { value, onChange, queryTypes, ...others } = props;
     const handlePluginChange = (next)=>{
         onChange(produce(value, (draft)=>{
-            draft.spec.plugin = next;
+            draft.kind = next.selection.type;
+            draft.spec.plugin.kind = next.selection.kind;
+            draft.spec.plugin.spec = next.spec;
         }));
     };
     return /*#__PURE__*/ _jsx(Box, {
         ...others,
         children: /*#__PURE__*/ _jsx(PluginEditor, {
-            pluginType: "TimeSeriesQuery",
+            pluginTypes: queryTypes,
             pluginKindLabel: "Query Type",
-            value: plugin,
+            value: {
+                selection: {
+                    kind: value.spec.plugin.kind,
+                    type: value.kind
+                },
+                spec: value.spec.plugin.spec
+            },
             onChange: handlePluginChange
         })
     });
 }
 
-//# sourceMappingURL=TimeSeriesQueryInput.js.map
+//# sourceMappingURL=QueryEditorContainer.js.map

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

@@ -0,0 +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 { PluginEditor, PluginEditorProps } from '../PluginEditor';\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 */\nexport const QueryEditorContainer = ({\n  queryTypes,\n  index,\n  query,\n  isCollapsed,\n  onDelete,\n  onChange,\n  onCollapseExpand,\n}: QueryEditorContainerProps) => {\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 && <QueryEditor queryTypes={queryTypes} value={query} onChange={(next) => onChange(index, next)} />}\n    </Stack>\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  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 */\nfunction QueryEditor(props: QueryEditorProps) {\n  const { value, onChange, queryTypes, ...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        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"],"names":["produce","Stack","IconButton","Typography","Box","DeleteIcon","ChevronDown","ChevronRight","PluginEditor","QueryEditorContainer","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","props","others","handlePluginChange","draft","kind","selection","type","spec","plugin","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,OAAOA,aAAa,QAAQ;AAE5B,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,YAAY,QAA2B,kBAAkB;AAelE;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,UAAU,EACVC,KAAK,EACLC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,QAAQ,EACRC,gBAAgB,EACU;IAC1B,qBACE,MAACf;QAAkBgB,SAAS;;0BAC1B,MAAChB;gBAAMiB,WAAU;gBAAMC,YAAW;gBAASC,cAAc;gBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;;kCACvG,KAACtB;wBAAWuB,MAAK;wBAAQC,SAAS,IAAMV,iBAAiBL;kCACtDE,4BAAc,KAACN,kCAAkB,KAACD;;kCAErC,MAACH;wBAAWwB,SAAQ;wBAAWC,WAAU;;4BAAK;4BACrCjB,QAAQ;;;kCAEjB,KAACT;wBACCuB,MAAK;wBACL,2GAA2G;wBAC3GI,IAAI;4BAAEC,YAAY;4BAAQC,YAAY,CAAC,EAAEjB,WAAW,YAAY,SAAS,CAAC;wBAAC;wBAC3EY,SAAS,IAAMZ,YAAYA,SAASH;kCAEpC,cAAA,KAACN;;;;YAGJ,CAACQ,6BAAe,KAACmB;gBAAYtB,YAAYA;gBAAYuB,OAAOrB;gBAAOG,UAAU,CAACmB,OAASnB,SAASJ,OAAOuB;;;OAjB9FvB;AAoBhB,EAAE;AAWF;;;;;;CAMC,GACD,SAASqB,YAAYG,KAAuB;IAC1C,MAAM,EAAEF,KAAK,EAAElB,QAAQ,EAAEL,UAAU,EAAE,GAAG0B,QAAQ,GAAGD;IAEnD,MAAME,qBAAoD,CAACH;QACzDnB,SACEf,QAAQiC,OAAO,CAACK;YACdA,MAAMC,IAAI,GAAGL,KAAKM,SAAS,CAACC,IAAI;YAChCH,MAAMI,IAAI,CAACC,MAAM,CAACJ,IAAI,GAAGL,KAAKM,SAAS,CAACD,IAAI;YAC5CD,MAAMI,IAAI,CAACC,MAAM,CAACD,IAAI,GAAGR,KAAKQ,IAAI;QACpC;IAEJ;IAEA,qBACE,KAACtC;QAAK,GAAGgC,MAAM;kBACb,cAAA,KAAC5B;YACCoC,aAAalC;YACbmC,iBAAgB;YAChBZ,OAAO;gBACLO,WAAW;oBACTD,MAAMN,MAAMS,IAAI,CAACC,MAAM,CAACJ,IAAI;oBAC5BE,MAAMR,MAAMM,IAAI;gBAClB;gBACAG,MAAMT,MAAMS,IAAI,CAACC,MAAM,CAACD,IAAI;YAC9B;YACA3B,UAAUsB;;;AAIlB"}

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

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

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

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

package/dist/components/{TimeSeriesQueryEditor → MultiQueryEditor}/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -10,6 +10,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-export * from './TimeSeriesQueryEditor';
+export * from './MultiQueryEditor';
 
 //# sourceMappingURL=index.js.map

package/dist/components/{TraceQueryEditor → MultiQueryEditor}/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TraceQueryEditor/index.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\nexport * from './TraceQueryEditor';\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"}
+{"version":3,"sources":["../../../src/components/MultiQueryEditor/index.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\nexport * from './MultiQueryEditor';\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/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,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAOjF,MAAM,WAAW,oBAAoB;IACnC,eAAe,EAAE,eAAe,CAAC;IACjC,eAAe,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACtD,kBAAkB,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,CAAC,kBAAkB,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,kDAuE1D"}
+{"version":3,"file":"PanelSpecEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAMjF,MAAM,WAAW,oBAAoB;IACnC,eAAe,EAAE,eAAe,CAAC;IACjC,eAAe,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACtD,kBAAkB,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,CAAC,kBAAkB,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,kDAsD1D"}

package/dist/components/PanelSpecEditor/PanelSpecEditor.js

@@ -11,11 +11,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ErrorAlert, JSONEditor } from '@perses-dev/components';
+import { ErrorAlert, JSONEditor, LinksEditor } from '@perses-dev/components';
 import { usePlugin } from '../../runtime';
 import { OptionsEditorTabs } from '../OptionsEditorTabs';
-import { TimeSeriesQueryEditor } from '../TimeSeriesQueryEditor';
-import { TraceQueryEditor } from '../TraceQueryEditor';
+import { MultiQueryEditor } from '../MultiQueryEditor';
 export function PanelSpecEditor(props) {
     const { panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;
     const { kind } = panelDefinition.spec.plugin;
@@ -32,54 +31,17 @@ export function PanelSpecEditor(props) {
     if (plugin === undefined) {
         throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);
     }
-    const getQueryType = ()=>{
-        var _panelDefinition_spec, _queriesList_;
-        const queriesList = panelDefinition === null || panelDefinition === void 0 ? void 0 : (_panelDefinition_spec = panelDefinition.spec) === null || _panelDefinition_spec === void 0 ? void 0 : _panelDefinition_spec.queries;
-        if (queriesList === undefined) {
-            return '';
-        }
-        const queryType = (_queriesList_ = queriesList[0]) === null || _queriesList_ === void 0 ? void 0 : _queriesList_.kind;
-        return queryType;
-    };
-    // Get the corresponding queryEditor depending on the queryType
-    const getQueryEditorComponent = ()=>{
-        const queryType = getQueryType();
-        // default case handles cause where there is no queryType yet (e.g. UI > 'editing' mode > 'Add Panel')
-        switch(queryType){
-            case 'TimeSeriesQuery':
-                var _panelDefinition_spec_queries;
-                return /*#__PURE__*/ _jsx(TimeSeriesQueryEditor, {
-                    queries: (_panelDefinition_spec_queries = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries !== void 0 ? _panelDefinition_spec_queries : [],
-                    onChange: onQueriesChange
-                });
-            case 'TraceQuery':
-                var _panelDefinition_spec_queries1;
-                return /*#__PURE__*/ _jsx(TraceQueryEditor, {
-                    queries: (_panelDefinition_spec_queries1 = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries1 !== void 0 ? _panelDefinition_spec_queries1 : [],
-                    onChange: onQueriesChange
-                });
-            default:
-                // ScatterChart only handles trace queries for now
-                if (kind === 'ScatterChart') {
-                    var _panelDefinition_spec_queries2;
-                    return /*#__PURE__*/ _jsx(TraceQueryEditor, {
-                        queries: (_panelDefinition_spec_queries2 = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries2 !== void 0 ? _panelDefinition_spec_queries2 : [],
-                        onChange: onQueriesChange
-                    });
-                }
-                var _panelDefinition_spec_queries3;
-                return /*#__PURE__*/ _jsx(TimeSeriesQueryEditor, {
-                    queries: (_panelDefinition_spec_queries3 = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries3 !== void 0 ? _panelDefinition_spec_queries3 : [],
-                    onChange: onQueriesChange
-                });
-        }
-    };
     const { panelOptionsEditorComponents, hideQueryEditor } = plugin;
     let tabs = [];
     if (!hideQueryEditor) {
+        var _plugin_supportedQueryTypes, _panelDefinition_spec_queries;
         tabs.push({
             label: 'Query',
-            content: getQueryEditorComponent()
+            content: /*#__PURE__*/ _jsx(MultiQueryEditor, {
+                queryTypes: (_plugin_supportedQueryTypes = plugin.supportedQueryTypes) !== null && _plugin_supportedQueryTypes !== void 0 ? _plugin_supportedQueryTypes : [],
+                queries: (_panelDefinition_spec_queries = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries !== void 0 ? _panelDefinition_spec_queries : [],
+                onChange: onQueriesChange
+            })
         });
     }
     if (panelOptionsEditorComponents !== undefined) {
@@ -91,7 +53,7 @@ export function PanelSpecEditor(props) {
                 })
             })));
     }
-    // always show json editor by default
+    // always show json editor and links editor by default
     tabs.push({
         label: 'JSON',
         content: /*#__PURE__*/ _jsx(JSONEditor, {
@@ -100,6 +62,10 @@ export function PanelSpecEditor(props) {
             onChange: onJSONChange
         })
     });
+    tabs.push({
+        label: 'Links',
+        content: /*#__PURE__*/ _jsx(LinksEditor, {})
+    });
     return /*#__PURE__*/ _jsx(OptionsEditorTabs, {
         tabs: tabs
     }, tabs.length);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.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 { ErrorAlert, JSONEditor } from '@perses-dev/components';\nimport { PanelDefinition, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { usePlugin } from '../../runtime';\nimport { PanelPlugin } from '../../model';\nimport { OptionsEditorTabsProps, OptionsEditorTabs } from '../OptionsEditorTabs';\nimport { TimeSeriesQueryEditor } from '../TimeSeriesQueryEditor';\nimport { TraceQueryEditor } from '../TraceQueryEditor';\n\nexport interface PanelSpecEditorProps {\n  panelDefinition: PanelDefinition;\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onJSONChange: (panelDefinitionStr: string) => void;\n}\n\nexport function PanelSpecEditor(props: PanelSpecEditorProps) {\n  const { panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;\n  const { kind } = panelDefinition.spec.plugin;\n  const { data: plugin, isLoading, error } = usePlugin('Panel', kind);\n\n  if (error) {\n    return <ErrorAlert error={error} />;\n  }\n\n  // TODO: Proper loading indicator\n  if (isLoading) {\n    return null;\n  }\n\n  if (plugin === undefined) {\n    throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);\n  }\n\n  const getQueryType = (): string => {\n    const queriesList = panelDefinition?.spec?.queries;\n    if (queriesList === undefined) {\n      return '';\n    }\n    const queryType: string = queriesList[0]?.kind;\n    return queryType;\n  };\n\n  // Get the corresponding queryEditor depending on the queryType\n  const getQueryEditorComponent = () => {\n    const queryType = getQueryType();\n    // default case handles cause where there is no queryType yet (e.g. UI > 'editing' mode > 'Add Panel')\n    switch (queryType) {\n      case 'TimeSeriesQuery':\n        return <TimeSeriesQueryEditor queries={panelDefinition.spec.queries ?? []} onChange={onQueriesChange} />;\n      case 'TraceQuery':\n        return <TraceQueryEditor queries={panelDefinition.spec.queries ?? []} onChange={onQueriesChange} />;\n      default:\n        // ScatterChart only handles trace queries for now\n        if (kind === 'ScatterChart') {\n          return <TraceQueryEditor queries={panelDefinition.spec.queries ?? []} onChange={onQueriesChange} />;\n        }\n        return <TimeSeriesQueryEditor queries={panelDefinition.spec.queries ?? []} onChange={onQueriesChange} />;\n    }\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: getQueryEditorComponent(),\n    });\n  }\n\n  if (panelOptionsEditorComponents !== undefined) {\n    tabs = tabs.concat(\n      panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent }) => ({\n        label,\n        content: <OptionsEditorComponent value={panelDefinition.spec.plugin.spec} onChange={onPluginSpecChange} />,\n      }))\n    );\n  }\n\n  // always show json editor by default\n  tabs.push({\n    label: 'JSON',\n    content: <JSONEditor maxHeight=\"80vh\" value={panelDefinition} onChange={onJSONChange} />,\n  });\n\n  return <OptionsEditorTabs key={tabs.length} tabs={tabs} />;\n}\n"],"names":["ErrorAlert","JSONEditor","usePlugin","OptionsEditorTabs","TimeSeriesQueryEditor","TraceQueryEditor","PanelSpecEditor","props","panelDefinition","onJSONChange","onQueriesChange","onPluginSpecChange","kind","spec","plugin","data","isLoading","error","undefined","Error","getQueryType","queriesList","queries","queryType","getQueryEditorComponent","onChange","panelOptionsEditorComponents","hideQueryEditor","tabs","push","label","content","concat","map","OptionsEditorComponent","value","maxHeight","length"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.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 { ErrorAlert, JSONEditor, LinksEditor } from '@perses-dev/components';\nimport { PanelDefinition, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { usePlugin } from '../../runtime';\nimport { PanelPlugin } from '../../model';\nimport { OptionsEditorTabsProps, OptionsEditorTabs } from '../OptionsEditorTabs';\nimport { MultiQueryEditor } from '../MultiQueryEditor';\n\nexport interface PanelSpecEditorProps {\n  panelDefinition: PanelDefinition;\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onJSONChange: (panelDefinitionStr: string) => void;\n}\n\nexport function PanelSpecEditor(props: PanelSpecEditorProps) {\n  const { panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;\n  const { kind } = panelDefinition.spec.plugin;\n  const { data: plugin, isLoading, error } = usePlugin('Panel', kind);\n\n  if (error) {\n    return <ErrorAlert error={error} />;\n  }\n\n  // TODO: Proper loading indicator\n  if (isLoading) {\n    return null;\n  }\n\n  if (plugin === undefined) {\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        <MultiQueryEditor\n          queryTypes={plugin.supportedQueryTypes ?? []}\n          queries={panelDefinition.spec.queries ?? []}\n          onChange={onQueriesChange}\n        />\n      ),\n    });\n  }\n\n  if (panelOptionsEditorComponents !== undefined) {\n    tabs = tabs.concat(\n      panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent }) => ({\n        label,\n        content: <OptionsEditorComponent value={panelDefinition.spec.plugin.spec} onChange={onPluginSpecChange} />,\n      }))\n    );\n  }\n\n  // always show json editor and links editor by default\n  tabs.push({\n    label: 'JSON',\n    content: <JSONEditor maxHeight=\"80vh\" value={panelDefinition} onChange={onJSONChange} />,\n  });\n  tabs.push({\n    label: 'Links',\n    content: <LinksEditor />,\n  });\n\n  return <OptionsEditorTabs key={tabs.length} tabs={tabs} />;\n}\n"],"names":["ErrorAlert","JSONEditor","LinksEditor","usePlugin","OptionsEditorTabs","MultiQueryEditor","PanelSpecEditor","props","panelDefinition","onJSONChange","onQueriesChange","onPluginSpecChange","kind","spec","plugin","data","isLoading","error","undefined","Error","panelOptionsEditorComponents","hideQueryEditor","tabs","push","label","content","queryTypes","supportedQueryTypes","queries","onChange","concat","map","OptionsEditorComponent","value","maxHeight","length"],"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,UAAU,EAAEC,UAAU,EAAEC,WAAW,QAAQ,yBAAyB;AAE7E,SAASC,SAAS,QAAQ,gBAAgB;AAE1C,SAAiCC,iBAAiB,QAAQ,uBAAuB;AACjF,SAASC,gBAAgB,QAAQ,sBAAsB;AASvD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,eAAe,EAAEC,YAAY,EAAEC,eAAe,EAAEC,kBAAkB,EAAE,GAAGJ;IAC/E,MAAM,EAAEK,IAAI,EAAE,GAAGJ,gBAAgBK,IAAI,CAACC,MAAM;IAC5C,MAAM,EAAEC,MAAMD,MAAM,EAAEE,SAAS,EAAEC,KAAK,EAAE,GAAGd,UAAU,SAASS;IAE9D,IAAIK,OAAO;QACT,qBAAO,KAACjB;YAAWiB,OAAOA;;IAC5B;IAEA,iCAAiC;IACjC,IAAID,WAAW;QACb,OAAO;IACT;IAEA,IAAIF,WAAWI,WAAW;QACxB,MAAM,IAAIC,MAAM,CAAC,mDAAmD,EAAEP,KAAK,CAAC,CAAC;IAC/E;IAEA,MAAM,EAAEQ,4BAA4B,EAAEC,eAAe,EAAE,GAAGP;IAC1D,IAAIQ,OAAuC,EAAE;IAE7C,IAAI,CAACD,iBAAiB;YAKFP,6BACHN;QALfc,KAAKC,IAAI,CAAC;YACRC,OAAO;YACPC,uBACE,KAACpB;gBACCqB,YAAYZ,CAAAA,8BAAAA,OAAOa,mBAAmB,cAA1Bb,yCAAAA,8BAA8B,EAAE;gBAC5Cc,SAASpB,CAAAA,gCAAAA,gBAAgBK,IAAI,CAACe,OAAO,cAA5BpB,2CAAAA,gCAAgC,EAAE;gBAC3CqB,UAAUnB;;QAGhB;IACF;IAEA,IAAIU,iCAAiCF,WAAW;QAC9CI,OAAOA,KAAKQ,MAAM,CAChBV,6BAA6BW,GAAG,CAAC,CAAC,EAAEP,KAAK,EAAEC,SAASO,sBAAsB,EAAE,GAAM,CAAA;gBAChFR;gBACAC,uBAAS,KAACO;oBAAuBC,OAAOzB,gBAAgBK,IAAI,CAACC,MAAM,CAACD,IAAI;oBAAEgB,UAAUlB;;YACtF,CAAA;IAEJ;IAEA,sDAAsD;IACtDW,KAAKC,IAAI,CAAC;QACRC,OAAO;QACPC,uBAAS,KAACxB;YAAWiC,WAAU;YAAOD,OAAOzB;YAAiBqB,UAAUpB;;IAC1E;IACAa,KAAKC,IAAI,CAAC;QACRC,OAAO;QACPC,uBAAS,KAACvB;IACZ;IAEA,qBAAO,KAACE;QAAoCkB,MAAMA;OAAnBA,KAAKa,MAAM;AAC5C"}

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":"AAgBA,OAAO,EAAE,iBAAiB,EAAmB,MAAM,qBAAqB,CAAC;AAEzE;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CA4BpD"}
+{"version":3,"file":"PluginEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/PluginEditor.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,iBAAiB,EAAmB,MAAM,qBAAqB,CAAC;AAEzE;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CA2BpD"}

package/dist/components/PluginEditor/PluginEditor.js

@@ -24,8 +24,8 @@ import { usePluginEditor } from './plugin-editor-api';
  * `usePluginEditor` hook that powers this component.
  */ export function PluginEditor(props) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { value, pluginType, pluginKindLabel, onChange: _, isReadonly, ...others } = props;
-    const { pendingKind, isLoading, error, onKindChange, onSpecChange } = usePluginEditor(props);
+    const { value, pluginTypes, pluginKindLabel, onChange: _, isReadonly, ...others } = props;
+    const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = usePluginEditor(props);
     return /*#__PURE__*/ _jsxs(Box, {
         ...others,
         children: [
@@ -37,19 +37,18 @@ import { usePluginEditor } from './plugin-editor-api';
                 },
                 margin: "dense",
                 label: pluginKindLabel,
-                pluginType: pluginType,
+                pluginTypes: pluginTypes,
                 disabled: isLoading,
-                value: pendingKind !== '' ? pendingKind : value.kind,
+                value: pendingSelection ? pendingSelection : value.selection,
                 InputProps: {
                     readOnly: isReadonly
                 },
                 error: !!error,
                 helperText: error === null || error === void 0 ? void 0 : error.message,
-                onChange: onKindChange
+                onChange: onSelectionChange
             }),
             /*#__PURE__*/ _jsx(PluginSpecEditor, {
-                pluginType: pluginType,
-                pluginKind: value.kind,
+                pluginSelection: value.selection,
                 value: value.spec,
                 onChange: onSpecChange,
                 isReadonly: isReadonly

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PluginEditor/PluginEditor.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 { Box } from '@mui/material';\nimport { PluginKindSelect } from '../PluginKindSelect';\nimport { PluginSpecEditor } from '../PluginSpecEditor';\nimport { PluginEditorProps, usePluginEditor } from './plugin-editor-api';\n\n/**\n * A combination `PluginKindSelect` and `PluginSpecEditor` component. This is meant for editing the `plugin` property\n * that's common in our JSON specs where a user selects a plugin `kind` and then edits the `spec` via that plugin's\n * editor component. It takes care of transitioning from one plugin kind to another \"all at once\" so that when the\n * plugin's kind changes, the spec is also changed at the same time so those options editor components don't see a\n * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the\n * `usePluginEditor` hook that powers this component.\n */\nexport function PluginEditor(props: PluginEditorProps) {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { value, pluginType, pluginKindLabel, onChange: _, isReadonly, ...others } = props;\n  const { pendingKind, isLoading, error, onKindChange, onSpecChange } = usePluginEditor(props);\n  return (\n    <Box {...others}>\n      <PluginKindSelect\n        fullWidth={false}\n        sx={{ mb: 1, minWidth: 120 }}\n        margin=\"dense\"\n        label={pluginKindLabel}\n        pluginType={pluginType}\n        disabled={isLoading}\n        value={pendingKind !== '' ? pendingKind : value.kind}\n        InputProps={{ readOnly: isReadonly }}\n        error={!!error}\n        helperText={error?.message}\n        onChange={onKindChange}\n      />\n      <PluginSpecEditor\n        pluginType={pluginType}\n        pluginKind={value.kind}\n        value={value.spec}\n        onChange={onSpecChange}\n        isReadonly={isReadonly}\n      />\n    </Box>\n  );\n}\n"],"names":["Box","PluginKindSelect","PluginSpecEditor","usePluginEditor","PluginEditor","props","value","pluginType","pluginKindLabel","onChange","_","isReadonly","others","pendingKind","isLoading","error","onKindChange","onSpecChange","fullWidth","sx","mb","minWidth","margin","label","disabled","kind","InputProps","readOnly","helperText","message","pluginKind","spec"],"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,GAAG,QAAQ,gBAAgB;AACpC,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAA4BC,eAAe,QAAQ,sBAAsB;AAEzE;;;;;;;CAOC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,6DAA6D;IAC7D,MAAM,EAAEC,KAAK,EAAEC,UAAU,EAAEC,eAAe,EAAEC,UAAUC,CAAC,EAAEC,UAAU,EAAE,GAAGC,QAAQ,GAAGP;IACnF,MAAM,EAAEQ,WAAW,EAAEC,SAAS,EAAEC,KAAK,EAAEC,YAAY,EAAEC,YAAY,EAAE,GAAGd,gBAAgBE;IACtF,qBACE,MAACL;QAAK,GAAGY,MAAM;;0BACb,KAACX;gBACCiB,WAAW;gBACXC,IAAI;oBAAEC,IAAI;oBAAGC,UAAU;gBAAI;gBAC3BC,QAAO;gBACPC,OAAOf;gBACPD,YAAYA;gBACZiB,UAAUV;gBACVR,OAAOO,gBAAgB,KAAKA,cAAcP,MAAMmB,IAAI;gBACpDC,YAAY;oBAAEC,UAAUhB;gBAAW;gBACnCI,OAAO,CAAC,CAACA;gBACTa,UAAU,EAAEb,kBAAAA,4BAAAA,MAAOc,OAAO;gBAC1BpB,UAAUO;;0BAEZ,KAACd;gBACCK,YAAYA;gBACZuB,YAAYxB,MAAMmB,IAAI;gBACtBnB,OAAOA,MAAMyB,IAAI;gBACjBtB,UAAUQ;gBACVN,YAAYA;;;;AAIpB"}
+{"version":3,"sources":["../../../src/components/PluginEditor/PluginEditor.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 { Box } from '@mui/material';\nimport { PluginKindSelect } from '../PluginKindSelect';\nimport { PluginSpecEditor } from '../PluginSpecEditor';\nimport { PluginEditorProps, usePluginEditor } from './plugin-editor-api';\n\n/**\n * A combination `PluginKindSelect` and `PluginSpecEditor` component. This is meant for editing the `plugin` property\n * that's common in our JSON specs where a user selects a plugin `kind` and then edits the `spec` via that plugin's\n * editor component. It takes care of transitioning from one plugin kind to another \"all at once\" so that when the\n * plugin's kind changes, the spec is also changed at the same time so those options editor components don't see a\n * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the\n * `usePluginEditor` hook that powers this component.\n */\nexport function PluginEditor(props: PluginEditorProps) {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { value, pluginTypes, pluginKindLabel, onChange: _, isReadonly, ...others } = props;\n  const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = usePluginEditor(props);\n  return (\n    <Box {...others}>\n      <PluginKindSelect\n        fullWidth={false}\n        sx={{ mb: 1, minWidth: 120 }}\n        margin=\"dense\"\n        label={pluginKindLabel}\n        pluginTypes={pluginTypes}\n        disabled={isLoading}\n        value={pendingSelection ? pendingSelection : value.selection}\n        InputProps={{ readOnly: isReadonly }}\n        error={!!error}\n        helperText={error?.message}\n        onChange={onSelectionChange}\n      />\n      <PluginSpecEditor\n        pluginSelection={value.selection}\n        value={value.spec}\n        onChange={onSpecChange}\n        isReadonly={isReadonly}\n      />\n    </Box>\n  );\n}\n"],"names":["Box","PluginKindSelect","PluginSpecEditor","usePluginEditor","PluginEditor","props","value","pluginTypes","pluginKindLabel","onChange","_","isReadonly","others","pendingSelection","isLoading","error","onSelectionChange","onSpecChange","fullWidth","sx","mb","minWidth","margin","label","disabled","selection","InputProps","readOnly","helperText","message","pluginSelection","spec"],"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,GAAG,QAAQ,gBAAgB;AACpC,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAA4BC,eAAe,QAAQ,sBAAsB;AAEzE;;;;;;;CAOC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,6DAA6D;IAC7D,MAAM,EAAEC,KAAK,EAAEC,WAAW,EAAEC,eAAe,EAAEC,UAAUC,CAAC,EAAEC,UAAU,EAAE,GAAGC,QAAQ,GAAGP;IACpF,MAAM,EAAEQ,gBAAgB,EAAEC,SAAS,EAAEC,KAAK,EAAEC,iBAAiB,EAAEC,YAAY,EAAE,GAAGd,gBAAgBE;IAChG,qBACE,MAACL;QAAK,GAAGY,MAAM;;0BACb,KAACX;gBACCiB,WAAW;gBACXC,IAAI;oBAAEC,IAAI;oBAAGC,UAAU;gBAAI;gBAC3BC,QAAO;gBACPC,OAAOf;gBACPD,aAAaA;gBACbiB,UAAUV;gBACVR,OAAOO,mBAAmBA,mBAAmBP,MAAMmB,SAAS;gBAC5DC,YAAY;oBAAEC,UAAUhB;gBAAW;gBACnCI,OAAO,CAAC,CAACA;gBACTa,UAAU,EAAEb,kBAAAA,4BAAAA,MAAOc,OAAO;gBAC1BpB,UAAUO;;0BAEZ,KAACd;gBACC4B,iBAAiBxB,MAAMmB,SAAS;gBAChCnB,OAAOA,MAAMyB,IAAI;gBACjBtB,UAAUQ;gBACVN,YAAYA;;;;AAIpB"}

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

@@ -1,20 +1,26 @@
-/// <reference types="react" />
 import { BoxProps } from '@mui/material';
-import { Definition, UnknownSpec } from '@perses-dev/core';
+import { UnknownSpec } from '@perses-dev/core';
 import { PluginType } from '../../model';
+export interface PluginEditorSelection {
+    type: PluginType;
+    kind: string;
+}
+export interface PluginEditorValue {
+    selection: PluginEditorSelection;
+    spec: UnknownSpec;
+}
 type OmittedMuiProps = 'children' | 'value' | 'onChange';
 export interface PluginEditorProps extends Omit<BoxProps, OmittedMuiProps> {
-    pluginType: PluginType;
+    pluginTypes: PluginType[];
     pluginKindLabel: string;
-    value: Definition<UnknownSpec>;
+    value: PluginEditorValue;
     isReadonly?: boolean;
-    isExplore?: boolean;
-    onChange: (next: Definition<UnknownSpec>) => void;
+    onChange: (next: PluginEditorValue) => void;
 }
 /**
  * Props needed by the usePluginEditor hook.
  */
-export type UsePluginEditorProps = Pick<PluginEditorProps, 'pluginType' | 'value' | 'onChange'> & {
+export type UsePluginEditorProps = Pick<PluginEditorProps, 'pluginTypes' | 'value' | 'onChange'> & {
     onHideQueryEditorChange?: (isHidden: boolean) => void;
 };
 /**
@@ -24,10 +30,10 @@ export type UsePluginEditorProps = Pick<PluginEditorProps, 'pluginType' | 'value
  * kind back.
  */
 export declare function usePluginEditor(props: UsePluginEditorProps): {
-    pendingKind: string;
+    pendingSelection: PluginEditorSelection | undefined;
     isLoading: boolean;
     error: Error | null;
-    onKindChange: import("react").ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
+    onSelectionChange: (s: PluginEditorSelection) => void;
     onSpecChange: (next: UnknownSpec) => void;
     rememberCurrentSpecState: () => void;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"plugin-editor-api.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,WAAW,EAAY,MAAM,kBAAkB,CAAC;AAGrE,OAAO,EAAe,UAAU,EAAE,MAAM,aAAa,CAAC;AAOtD,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,QAAQ,EAAE,eAAe,CAAC;IACxE,UAAU,EAAE,UAAU,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACnD;AAKD;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,GAAG,UAAU,CAAC,GAAG;IAChG,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB;;;;;;;EAqG1D"}
+{"version":3,"file":"plugin-editor-api.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,WAAW,EAAY,MAAM,kBAAkB,CAAC;AAGzD,OAAO,EAAe,UAAU,EAAE,MAAM,aAAa,CAAC;AAKtD,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,qBAAqB,CAAC;IACjC,IAAI,EAAE,WAAW,CAAC;CACnB;AAID,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,QAAQ,EAAE,eAAe,CAAC;IACxE,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,iBAAiB,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC7C;AAKD;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,EAAE,aAAa,GAAG,OAAO,GAAG,UAAU,CAAC,GAAG;IACjG,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB;;;;;;;EAyH1D"}