@perses-dev/plugin-system 0.52.0-rc.0 → 0.52.0-rc.1

package/dist/cjs/components/MultiQueryEditor/MultiQueryEditor.js

@@ -60,7 +60,8 @@ function useDefaultQueryDefinition(queryTypes) {
         isLoading
     };
 }
-function MultiQueryEditor({ queryTypes, queries = [], onChange }) {
+const MultiQueryEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
+    const { queryTypes, queries = [], onChange } = props;
     const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes);
     // State for which queries are collapsed
     const [queriesCollapsed, setQueriesCollapsed] = (0, _react.useState)(queries.map(()=>false));
@@ -122,6 +123,7 @@ function MultiQueryEditor({ queryTypes, queries = [], onChange }) {
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
                 spacing: 1,
                 children: queryDefinitions.map((query, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_QueryEditorContainer.QueryEditorContainer, {
+                        ref: ref,
                         queryTypes: queryTypes,
                         index: i,
                         query: query,
@@ -142,4 +144,5 @@ function MultiQueryEditor({ queryTypes, queries = [], onChange }) {
             })
         ]
     });
-}
+});
+MultiQueryEditor.displayName = 'MultiQueryEditor';

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

@@ -26,13 +26,16 @@ const _material = require("@mui/material");
 const _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DeleteOutline"));
 const _ChevronDown = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronDown"));
 const _ChevronRight = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronRight"));
+const _react = require("react");
 const _PluginEditor = require("../PluginEditor");
+const _runtime = require("../../runtime");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const QueryEditorContainer = ({ queryTypes, index, query, isCollapsed, onDelete, onChange, onCollapseExpand })=>{
+const QueryEditorContainer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
+    const { queryTypes, index, query, isCollapsed, onDelete, onChange, onCollapseExpand } = props;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 1,
         children: [
@@ -68,21 +71,24 @@ const QueryEditorContainer = ({ queryTypes, index, query, isCollapsed, onDelete,
                 ]
             }),
             !isCollapsed && /*#__PURE__*/ (0, _jsxruntime.jsx)(QueryEditor, {
+                ref: ref,
                 queryTypes: queryTypes,
                 value: query,
                 onChange: (next)=>onChange(index, next)
             })
         ]
     }, index);
-};
+});
+QueryEditorContainer.displayName = 'QueryEditorContainer';
 /**
  * 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 QueryEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { value, onChange, queryTypes, ...others } = props;
+    const { refresh } = (0, _runtime.useTimeRange)();
     const handlePluginChange = (next)=>{
         onChange((0, _immer.produce)(value, (draft)=>{
             draft.kind = next.selection.type;
@@ -93,6 +99,8 @@ const QueryEditorContainer = ({ queryTypes, index, query, isCollapsed, onDelete,
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         ...others,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
+            postExecuteRunQuery: refresh,
+            ref: ref,
             withRunQueryButton: true,
             pluginTypes: queryTypes,
             pluginKindLabel: "Query Type",
@@ -106,4 +114,5 @@ const QueryEditorContainer = ({ queryTypes, index, query, isCollapsed, onDelete,
             onChange: handlePluginChange
         })
     });
-}
+});
+QueryEditor.displayName = 'QueryEditor';

package/dist/cjs/components/PanelSpecEditor/PanelSpecEditor.js

@@ -23,10 +23,11 @@ Object.defineProperty(exports, "PanelSpecEditor", {
 const _jsxruntime = require("react/jsx-runtime");
 const _components = require("@perses-dev/components");
 const _reacthookform = require("react-hook-form");
+const _react = require("react");
 const _runtime = require("../../runtime");
 const _OptionsEditorTabs = require("../OptionsEditorTabs");
 const _MultiQueryEditor = require("../MultiQueryEditor");
-function PanelSpecEditor(props) {
+const PanelSpecEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { control, panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;
     const { kind } = panelDefinition.spec.plugin;
     const { data: plugin, isLoading, error } = (0, _runtime.usePlugin)('Panel', kind);
@@ -35,11 +36,10 @@ function PanelSpecEditor(props) {
             error: error
         });
     }
-    // TODO: Proper loading indicator
     if (isLoading) {
         return null;
     }
-    if (plugin === undefined) {
+    if (!plugin) {
         throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);
     }
     const { panelOptionsEditorComponents, hideQueryEditor } = plugin;
@@ -51,6 +51,7 @@ function PanelSpecEditor(props) {
                 control: control,
                 name: "panelDefinition.spec.queries",
                 render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_MultiQueryEditor.MultiQueryEditor, {
+                        ref: ref,
                         queryTypes: plugin.supportedQueryTypes ?? [],
                         queries: panelDefinition.spec.queries ?? [],
                         onChange: (queries)=>{
@@ -61,7 +62,7 @@ function PanelSpecEditor(props) {
             })
         });
     }
-    if (panelOptionsEditorComponents !== undefined) {
+    if (panelOptionsEditorComponents) {
         tabs = tabs.concat(panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent })=>({
                 label,
                 content: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
@@ -105,4 +106,5 @@ function PanelSpecEditor(props) {
             tabs: tabs
         }, tabs.length)
     });
-}
+});
+PanelSpecEditor.displayName = 'PanelSpecEditor';

package/dist/cjs/components/PluginEditor/PluginEditor.js

@@ -33,17 +33,16 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function PluginEditor(props) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { value, withRunQueryButton = true, pluginTypes, pluginKindLabel, onChange: _, isReadonly, ...others } = props;
+const PluginEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
+    const { value, withRunQueryButton = true, pluginTypes, pluginKindLabel, onChange: _, isReadonly, postExecuteRunQuery: refresh, ...others } = props;
     const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = (0, _plugineditorapi.usePluginEditor)(props);
     /* 
-    We could technically merge the watchedQuery, watchedOtherSpecs into a single watched-object,
-    because at the end of the day, they are all specs.
-    However, let's have them separated to keep the code simple and readable.
-    Reason: Only Query string field is common between all of them. Other specs may be different
-    Example: Legend, and MinSteps
-   */ const [watchedQuery, setWatchQuery] = (0, _react.useState)(value.spec['query']);
+     We could technically merge the watchedQuery, watchedOtherSpecs into a single watched-object,
+     because at the end of the day, they are all specs.
+     However, let's have them separated to keep the code simple and readable.
+     Reason: Only Query string field is common between all of them. Other specs may be different
+     Example: Legend, and MinSteps
+    */ const [watchedQuery, setWatchQuery] = (0, _react.useState)(value.spec['query']);
     const [watchedOtherSpecs, setWatchOtherSpecs] = (0, _react.useState)(value.spec);
     const runQueryHandler = (0, _react.useCallback)(()=>{
         onSpecChange({
@@ -51,11 +50,13 @@ function PluginEditor(props) {
             ...watchedOtherSpecs,
             query: watchedQuery
         });
+        refresh?.();
     }, [
         value.spec,
         onSpecChange,
         watchedQuery,
-        watchedOtherSpecs
+        watchedOtherSpecs,
+        refresh
     ]);
     const queryHandlerSettings = (0, _react.useMemo)(()=>{
         return withRunQueryButton ? {
@@ -70,6 +71,9 @@ function PluginEditor(props) {
     }, [
         withRunQueryButton
     ]);
+    (0, _react.useImperativeHandle)(ref, ()=>({
+            flushChanges: runQueryHandler
+        }));
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         ...others,
         children: [
@@ -124,4 +128,5 @@ function PluginEditor(props) {
             })
         ]
     });
-}
+});
+PluginEditor.displayName = 'PluginEditor';

package/dist/cjs/components/Variables/VariableEditorForm/VariableEditorForm.js

@@ -106,12 +106,7 @@ function ListVariableEditorForm({ action, control }) {
     /** We use `previewSpec` to know when to explicitly update the
    * spec that will be used for preview. The reason why we do this is to avoid
    * having to re-fetch the values when the user is still editing the spec.
-   */ const [previewSpec, setPreviewSpec] = (0, _react.useState)(form.getValues());
-    const { refresh } = (0, _runtime.useTimeRange)();
-    const refreshPreview = ()=>{
-        refresh();
-        setPreviewSpec(form.getValues());
-    };
+   */ const previewSpec = form.getValues();
     const plugin = (0, _reacthookform.useWatch)({
         control,
         name: 'spec.plugin'
@@ -131,6 +126,7 @@ function ListVariableEditorForm({ action, control }) {
     if (values.spec.allowMultiple === undefined) {
         form.setValue('spec.allowMultiple', false);
     }
+    const { refresh } = (0, _runtime.useTimeRange)();
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
@@ -149,8 +145,7 @@ function ListVariableEditorForm({ action, control }) {
                                 previewSpec
                             ],
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariableListPreview, {
-                                definition: previewSpec,
-                                onRefresh: refreshPreview
+                                definition: previewSpec
                             })
                         })
                     }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariablePreview, {
@@ -164,6 +159,7 @@ function ListVariableEditorForm({ action, control }) {
                                 name: "spec.plugin",
                                 render: ({ field })=>{
                                     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
+                                        postExecuteRunQuery: refresh,
                                         withRunQueryButton: true,
                                         width: "100%",
                                         pluginTypes: [
@@ -175,9 +171,7 @@ function ListVariableEditorForm({ action, control }) {
                                                 type: 'Variable',
                                                 kind: kind ?? 'StaticListVariable'
                                             },
-                                            spec: pluginSpec ?? {
-                                                values: []
-                                            }
+                                            spec: pluginSpec ?? {}
                                         },
                                         isReadonly: action === 'read',
                                         onChange: (v)=>{

package/dist/cjs/components/Variables/VariableEditorForm/VariablePreview.js

@@ -32,7 +32,6 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _Refresh = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Refresh"));
 const _ClipboardOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ClipboardOutline"));
 const _constants = require("../../../constants");
 const _variablemodel = require("../variable-model");
@@ -84,7 +83,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const DEFAULT_MAX_PREVIEW_VALUES = 50;
 function VariablePreview(props) {
-    const { values, onRefresh, isLoading, error } = props;
+    const { values, isLoading, error } = props;
     const [maxValues, setMaxValues] = (0, _react.useState)(DEFAULT_MAX_PREVIEW_VALUES);
     const { infoSnackbar } = (0, _components.useSnackbar)();
     const showAll = ()=>{
@@ -106,14 +105,6 @@ function VariablePreview(props) {
                         variant: "h4",
                         children: "Preview Values"
                     }),
-                    onRefresh && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-                        description: _constants.TOOLTIP_TEXT.refreshVariableValues,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                            onClick: onRefresh,
-                            size: "small",
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Refresh.default, {})
-                        })
-                    }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                         description: _constants.TOOLTIP_TEXT.copyVariableValues,
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
@@ -172,18 +163,16 @@ function VariablePreview(props) {
     });
 }
 function VariableListPreview(props) {
-    const { onRefresh, definition } = props;
+    const { definition } = props;
     const { data, isFetching, error } = (0, _variablemodel.useListVariablePluginValues)(definition);
     const errorMessage = error?.message;
     const variablePreview = (0, _react.useMemo)(()=>/*#__PURE__*/ (0, _jsxruntime.jsx)(VariablePreview, {
             values: data?.map((val)=>val.value) || [],
-            onRefresh: onRefresh,
             isLoading: isFetching,
             error: errorMessage
         }), [
         errorMessage,
         isFetching,
-        onRefresh,
         data
     ]);
     return variablePreview;

package/dist/cjs/context/query-params.js

@@ -21,12 +21,12 @@ Object.defineProperty(exports, "useSetProjectParams", {
     }
 });
 const _react = require("react");
-const _usequeryparams = require("use-query-params");
+const _nuqs = require("nuqs");
 function useSetProjectParams(enabledURLParams = true) {
-    const [query, setQuery] = (0, _usequeryparams.useQueryParams)({
-        project: ''
+    const [query, setQuery] = (0, _nuqs.useQueryStates)({
+        project: _nuqs.parseAsString
     }, {
-        updateType: 'replaceIn'
+        history: 'replace'
     });
     const [projectState, setProjectState] = (0, _react.useState)('none');
     const setProject = (0, _react.useCallback)((project)=>{

package/dist/cjs/runtime/TimeRangeProvider/query-params.js

@@ -21,20 +21,20 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    TimeRangeParam: function() {
-        return TimeRangeParam;
-    },
     decodeTimeRangeValue: function() {
         return decodeTimeRangeValue;
     },
     encodeTimeRangeValue: function() {
         return encodeTimeRangeValue;
     },
-    refreshIntervalQueryConfig: function() {
-        return refreshIntervalQueryConfig;
+    parseAsRefreshInterval: function() {
+        return parseAsRefreshInterval;
+    },
+    parseAsTimeRange: function() {
+        return parseAsTimeRange;
     },
-    timeRangeQueryConfig: function() {
-        return timeRangeQueryConfig;
+    parseAsTimeRangeValue: function() {
+        return parseAsTimeRangeValue;
     },
     useInitialRefreshInterval: function() {
         return useInitialRefreshInterval;
@@ -50,9 +50,9 @@ _export(exports, {
     }
 });
 const _react = require("react");
-const _usequeryparams = require("use-query-params");
 const _datefns = require("date-fns");
 const _core = require("@perses-dev/core");
+const _nuqs = require("nuqs");
 /* Interprets an encoded string and returns either the string or null/undefined if not available */ function getEncodedValue(input, allowEmptyString) {
     // '' or []
     if (!input || input.length === 0 && (!allowEmptyString || allowEmptyString && input !== '')) {
@@ -69,7 +69,7 @@ const _core = require("@perses-dev/core");
 }
 function encodeTimeRangeValue(timeOptionValue) {
     if (!timeOptionValue) {
-        return timeOptionValue;
+        return '';
     }
     if (typeof timeOptionValue === 'string') {
         if ((0, _core.isDurationString)(timeOptionValue)) {
@@ -83,25 +83,25 @@ function decodeTimeRangeValue(input) {
     if (!paramString) return null;
     return (0, _core.isDurationString)(paramString) ? paramString : new Date(Number(paramString));
 }
-const TimeRangeParam = {
-    encode: encodeTimeRangeValue,
-    decode: decodeTimeRangeValue,
-    equals: (valueA, valueB)=>{
+const parseAsTimeRangeValue = (0, _nuqs.createParser)({
+    parse: decodeTimeRangeValue,
+    serialize: encodeTimeRangeValue,
+    eq: (valueA, valueB)=>{
         if (valueA === valueB) return true;
         if (!valueA || !valueB) return valueA === valueB;
         return valueA.valueOf() === valueB.valueOf();
     }
+});
+const parseAsTimeRange = {
+    start: parseAsTimeRangeValue,
+    end: parseAsTimeRangeValue
 };
-const timeRangeQueryConfig = {
-    start: TimeRangeParam,
-    end: TimeRangeParam
-};
-const refreshIntervalQueryConfig = {
-    refresh: TimeRangeParam
+const parseAsRefreshInterval = {
+    refresh: parseAsTimeRangeValue
 };
 function useInitialTimeRange(dashboardDuration) {
-    const [query] = (0, _usequeryparams.useQueryParams)(timeRangeQueryConfig, {
-        updateType: 'replaceIn'
+    const [query] = (0, _nuqs.useQueryStates)(parseAsTimeRange, {
+        history: 'replace'
     });
     const { start, end } = query;
     return (0, _react.useMemo)(()=>{
@@ -130,8 +130,8 @@ function useInitialTimeRange(dashboardDuration) {
     ]);
 }
 function useTimeRangeParams(initialTimeRange) {
-    const [query, setQuery] = (0, _usequeryparams.useQueryParams)(timeRangeQueryConfig, {
-        updateType: 'replaceIn'
+    const [query, setQuery] = (0, _nuqs.useQueryStates)(parseAsTimeRange, {
+        history: 'replace'
     });
     // determine whether initial param had previously been populated to fix back btn
     const [paramsLoaded, setParamsLoaded] = (0, _react.useState)(false);
@@ -171,8 +171,8 @@ function useTimeRangeParams(initialTimeRange) {
     };
 }
 function useInitialRefreshInterval(dashboardDuration) {
-    const [query] = (0, _usequeryparams.useQueryParams)(refreshIntervalQueryConfig, {
-        updateType: 'replaceIn'
+    const [query] = (0, _nuqs.useQueryStates)(parseAsRefreshInterval, {
+        history: 'replace'
     });
     const { refresh } = query;
     return (0, _react.useMemo)(()=>{
@@ -191,8 +191,8 @@ function useInitialRefreshInterval(dashboardDuration) {
     ]);
 }
 function useSetRefreshIntervalParams(initialRefreshInterval) {
-    const [query, setQuery] = (0, _usequeryparams.useQueryParams)(refreshIntervalQueryConfig, {
-        updateType: 'replaceIn'
+    const [query, setQuery] = (0, _nuqs.useQueryStates)(parseAsRefreshInterval, {
+        history: 'replace'
     });
     // determine whether initial param had previously been populated to fix back btn
     const [paramsLoaded, setParamsLoaded] = (0, _react.useState)(false);

package/dist/cjs/test/utils.js

@@ -22,7 +22,9 @@ Object.defineProperty(exports, "getTestContextWrapper", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _reactquery = require("@tanstack/react-query");
+const _core = require("@perses-dev/core");
 const _components = require("../components");
+const _runtime = require("../runtime");
 const _testplugins = require("./test-plugins");
 function getTestContextWrapper(contextOptions) {
     // Create a new QueryClient for each test to avoid caching issues
@@ -34,15 +36,22 @@ function getTestContextWrapper(contextOptions) {
             }
         }
     });
+    const timeRange = {
+        start: new Date(Date.now() - Number(_core.DEFAULT_DASHBOARD_DURATION)),
+        end: new Date()
+    };
     return function Wrapper({ children }) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactquery.QueryClientProvider, {
-            client: queryClient,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.PluginRegistry, {
-                pluginLoader: _testplugins.testPluginLoader,
-                defaultPluginKinds: contextOptions?.defaultPluginKinds ?? {
-                    TimeSeriesQuery: 'PrometheusTimeSeriesQuery'
-                },
-                children: children
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_runtime.TimeRangeProvider, {
+            timeRange: timeRange,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactquery.QueryClientProvider, {
+                client: queryClient,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.PluginRegistry, {
+                    pluginLoader: _testplugins.testPluginLoader,
+                    defaultPluginKinds: contextOptions?.defaultPluginKinds ?? {
+                        TimeSeriesQuery: 'PrometheusTimeSeriesQuery'
+                    },
+                    children: children
+                })
             })
         });
     };

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

@@ -1,5 +1,6 @@
-import { ReactElement } from 'react';
+/// <reference types="react" />
 import { QueryDefinition, QueryPluginType } from '@perses-dev/core';
+import { PluginEditorRef } from '../PluginEditor';
 export interface MultiQueryEditorProps {
     queryTypes: QueryPluginType[];
     queries?: QueryDefinition[];
@@ -13,5 +14,5 @@ export interface MultiQueryEditorProps {
  * @param onChange The callback to call when the queries are modified
  * @constructor
  */
-export declare function MultiQueryEditor({ queryTypes, queries, onChange }: MultiQueryEditorProps): ReactElement;
+export declare const MultiQueryEditor: import("react").ForwardRefExoticComponent<MultiQueryEditorProps & import("react").RefAttributes<PluginEditorRef>>;
 //# sourceMappingURL=MultiQueryEditor.d.ts.map

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":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAI/C,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAIpE,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;AACH,wBAAgB,gBAAgB,CAAC,EAAE,UAAU,EAAE,OAAY,EAAE,QAAQ,EAAE,EAAE,qBAAqB,GAAG,YAAY,CAkF5G"}
+{"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"}

package/dist/components/MultiQueryEditor/MultiQueryEditor.js

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
+import { forwardRef, useState } from 'react';
 import { produce } from 'immer';
 import { Button, Stack } from '@mui/material';
 import AddIcon from 'mdi-material-ui/Plus';
@@ -52,7 +52,8 @@ function useDefaultQueryDefinition(queryTypes) {
  * @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 }) {
+ */ export const MultiQueryEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { queryTypes, queries = [], onChange } = props;
     const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes);
     // State for which queries are collapsed
     const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(()=>false));
@@ -114,6 +115,7 @@ function useDefaultQueryDefinition(queryTypes) {
             /*#__PURE__*/ _jsx(Stack, {
                 spacing: 1,
                 children: queryDefinitions.map((query, i)=>/*#__PURE__*/ _jsx(QueryEditorContainer, {
+                        ref: ref,
                         queryTypes: queryTypes,
                         index: i,
                         query: query,
@@ -134,6 +136,7 @@ function useDefaultQueryDefinition(queryTypes) {
             })
         ]
     });
-}
+});
+MultiQueryEditor.displayName = 'MultiQueryEditor';
 
 //# sourceMappingURL=MultiQueryEditor.js.map

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 { 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 { 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 */\nexport function MultiQueryEditor({ queryTypes, queries = [], onChange }: MultiQueryEditorProps): ReactElement {\n  const { defaultInitialQueryDefinition, isLoading } = 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: 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            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","defaultQueryType","data","queryPlugins","isLoading","defaultPluginKinds","defaultQueryKind","spec","name","defaultQueryPlugin","useErrorBoundary","enabled","defaultInitialQueryDefinition","kind","plugin","createInitialOptions","MultiQueryEditor","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"],"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  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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"}

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

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { QueryDefinition, QueryPluginType } from '@perses-dev/core';
-import { ReactElement } from 'react';
+import { PluginEditorRef } from '../PluginEditor';
 /**
  * Properties for {@link QueryEditorContainer}
  */
@@ -24,6 +25,6 @@ interface QueryEditorContainerProps {
  * @param onCollapseExpand callback when the query is collapsed or expanded
  * @constructor
  */
-export declare const QueryEditorContainer: ({ queryTypes, index, query, isCollapsed, onDelete, onChange, onCollapseExpand, }: QueryEditorContainerProps) => ReactElement;
+export declare const QueryEditorContainer: import("react").ForwardRefExoticComponent<QueryEditorContainerProps & import("react").RefAttributes<PluginEditorRef>>;
 export {};
 //# sourceMappingURL=QueryEditorContainer.d.ts.map

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;AAKpE,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC;;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,KAAG,YAsB9B,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,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"}