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

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

@@ -45,20 +45,20 @@ const _utils = require("./utils");
 const _variables = require("./variables");
 const TIME_SERIES_QUERY_KEY = 'TimeSeriesQuery';
 function getQueryOptions({ plugin, definition, context }) {
-    const { timeRange, datasourceStore, suggestedStepMs, mode, variableState, refreshKey } = context;
+    const { timeRange, suggestedStepMs, mode, variableState } = context;
     const dependencies = plugin?.dependsOn ? plugin.dependsOn(definition.spec.plugin.spec, context) : {};
     const variableDependencies = dependencies?.variables;
     // Determine queryKey
     const filteredVariabledState = (0, _utils.filterVariableStateMap)(variableState, variableDependencies);
     const variablesValueKey = (0, _utils.getVariableValuesKey)(filteredVariabledState);
     const queryKey = [
+        'query',
+        TIME_SERIES_QUERY_KEY,
         definition,
         timeRange,
-        datasourceStore,
-        suggestedStepMs,
-        mode,
         variablesValueKey,
-        refreshKey
+        suggestedStepMs,
+        mode
     ];
     // Determine queryEnabled
     let waitToLoad = false;
@@ -100,8 +100,8 @@ function useTimeSeriesQueries(definitions, options, queryOptions) {
     const { getPlugin } = (0, _pluginregistry.usePluginRegistry)();
     const context = {
         ...useTimeSeriesQueryContext(),
-        // We need mode to be part query key because this drives the type of query done (instant VS range query)
-        mode: options?.mode
+        mode: options?.mode,
+        suggestedStepMs: options?.suggestedStepMs
     };
     const pluginLoaderResponse = (0, _pluginregistry.usePlugins)(TIME_SERIES_QUERY_KEY, definitions.map((d)=>({
             kind: d.spec.plugin.kind
@@ -119,13 +119,8 @@ function useTimeSeriesQueries(definitions, options, queryOptions) {
                 enabled: (queryOptions?.enabled ?? true) && queryEnabled,
                 queryKey: queryKey,
                 queryFn: async ({ signal })=>{
-                    const ctx = {
-                        ...context,
-                        // Keep suggested step changes out of the query key, so we don´t have to run again query when it changes
-                        suggestedStepMs: options?.suggestedStepMs
-                    };
                     const plugin = await getPlugin(TIME_SERIES_QUERY_KEY, definition.spec.plugin.kind);
-                    const data = await plugin.getTimeSeriesData(definition.spec.plugin.spec, ctx, signal);
+                    const data = await plugin.getTimeSeriesData(definition.spec.plugin.spec, context, signal);
                     return data;
                 }
             };
@@ -135,14 +130,13 @@ function useTimeSeriesQueries(definitions, options, queryOptions) {
 /**
  * Build the time series query context object from data available at runtime
  */ function useTimeSeriesQueryContext() {
-    const { absoluteTimeRange, refreshKey } = (0, _TimeRangeProvider.useTimeRange)();
+    const { absoluteTimeRange } = (0, _TimeRangeProvider.useTimeRange)();
     const variableState = (0, _variables.useAllVariableValues)();
     const datasourceStore = (0, _datasources.useDatasourceStore)();
     return {
         timeRange: absoluteTimeRange,
         variableState,
-        datasourceStore,
-        refreshKey
+        datasourceStore
     };
 }
 function useActiveTimeSeriesQueries() {

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

@@ -65,14 +65,15 @@ function useTraceQueries(definitions) {
     });
 }
 function getQueryOptions({ plugin, definition, context }) {
-    const { datasourceStore, variableState, absoluteTimeRange } = context;
+    const { variableState, absoluteTimeRange } = context;
     const dependencies = plugin?.dependsOn ? plugin.dependsOn(definition.spec.plugin.spec, context) : {};
     const variableDependencies = dependencies?.variables;
     const filteredVariabledState = (0, _utils.filterVariableStateMap)(variableState, variableDependencies);
     const variablesValueKey = (0, _utils.getVariableValuesKey)(filteredVariabledState);
     const queryKey = [
+        'query',
+        TRACE_QUERY_KEY,
         definition,
-        datasourceStore,
         absoluteTimeRange,
         variablesValueKey
     ];

package/dist/cjs/test/utils.js

@@ -41,10 +41,10 @@ function getTestContextWrapper(contextOptions) {
         end: new Date()
     };
     return function Wrapper({ children }) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_runtime.TimeRangeProvider, {
-            timeRange: timeRange,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactquery.QueryClientProvider, {
-                client: queryClient,
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactquery.QueryClientProvider, {
+            client: queryClient,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_runtime.TimeRangeProviderBasic, {
+                initialTimeRange: timeRange,
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.PluginRegistry, {
                     pluginLoader: _testplugins.testPluginLoader,
                     defaultPluginKinds: contextOptions?.defaultPluginKinds ?? {

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

@@ -1,11 +1,14 @@
 /// <reference types="react" />
 import { QueryDefinition, QueryPluginType } from '@perses-dev/core';
+import { QueryData } from '../../runtime';
 import { PluginEditorRef } from '../PluginEditor';
 export interface MultiQueryEditorProps {
     queryTypes: QueryPluginType[];
     filteredQueryPlugins?: string[];
     queries?: QueryDefinition[];
+    queryResults?: QueryData[];
     onChange: (queries: QueryDefinition[]) => void;
+    onQueryRun: (index: number, query: QueryDefinition) => void;
 }
 /**
  * A component render a list of {@link QueryEditorContainer} for the given query definitions.

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

@@ -1 +1 @@
-{"version":3,"file":"MultiQueryEditor.d.ts","sourceRoot":"","sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEpE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;CAChD;AA4CD;;;;;;;GAOG;AAEH,eAAO,MAAM,gBAAgB,mHAoF3B,CAAC"}
+{"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;AACpE,OAAO,EAAE,SAAS,EAAuD,MAAM,eAAe,CAAC;AAC/F,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,YAAY,CAAC,EAAE,SAAS,EAAE,CAAC;IAC3B,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CAC7D;AA4CD;;;;;;;GAOG;AAEH,eAAO,MAAM,gBAAgB,mHA0F3B,CAAC"}

package/dist/components/MultiQueryEditor/MultiQueryEditor.js

@@ -58,7 +58,7 @@ function useDefaultQueryDefinition(queryTypes, filteredQueryPlugins) {
  * @param onChange The callback to call when the queries are modified
  * @constructor
  */ export const MultiQueryEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { queryTypes, queries = [], filteredQueryPlugins, onChange } = props;
+    const { queryTypes, queries = [], queryResults, filteredQueryPlugins, onChange, onQueryRun } = props;
     const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes, filteredQueryPlugins);
     // State for which queries are collapsed
     const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(()=>false));
@@ -74,6 +74,9 @@ function useDefaultQueryDefinition(queryTypes, filteredQueryPlugins) {
             }
         }));
     };
+    const handleQueryRun = (index, queryDef)=>{
+        onQueryRun(index, queryDef);
+    };
     const handleQueryAdd = ()=>{
         onChange(produce(queries, (draft)=>{
             if (draft) {
@@ -124,11 +127,13 @@ function useDefaultQueryDefinition(queryTypes, filteredQueryPlugins) {
                         queryTypes: queryTypes,
                         index: i,
                         query: query,
+                        queryResult: queryResults?.[i],
+                        filteredQueryPlugins: filteredQueryPlugins,
                         isCollapsed: !!queriesCollapsed[i],
                         onChange: handleQueryChange,
+                        onQueryRun: handleQueryRun,
                         onDelete: queries.length > 1 ? handleQueryDelete : undefined,
-                        onCollapseExpand: handleQueryCollapseExpand,
-                        filteredQueryPlugins: filteredQueryPlugins
+                        onCollapseExpand: handleQueryCollapseExpand
                     }, i))
             }),
             /*#__PURE__*/ _jsx(Button, {

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

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

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

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

package/dist/components/MultiQueryEditor/QueryEditorContainer.js

@@ -12,13 +12,14 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { produce } from 'immer';
-import { Stack, IconButton, Typography, Box } from '@mui/material';
+import { Stack, IconButton, Typography, Box, CircularProgress } from '@mui/material';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import ChevronDown from 'mdi-material-ui/ChevronDown';
 import ChevronRight from 'mdi-material-ui/ChevronRight';
 import { forwardRef } from 'react';
+import AlertIcon from 'mdi-material-ui/Alert';
+import { InfoTooltip } from '@perses-dev/components';
 import { PluginEditor } from '../PluginEditor';
-import { useTimeRange } from '../../runtime';
 /**
  * Container for a query editor. This component is responsible for rendering the query editor, and make it collapsible
  * to not take too much space.
@@ -31,47 +32,92 @@ import { useTimeRange } from '../../runtime';
  * @param onCollapseExpand callback when the query is collapsed or expanded
  * @constructor
  */ export const QueryEditorContainer = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { queryTypes, filteredQueryPlugins, index, query, isCollapsed, onDelete, onChange, onCollapseExpand } = props;
+    const { queryTypes, index, query, queryResult, filteredQueryPlugins, isCollapsed, onDelete, onChange, onQueryRun, onCollapseExpand } = props;
     return /*#__PURE__*/ _jsxs(Stack, {
         spacing: 1,
         children: [
             /*#__PURE__*/ _jsxs(Stack, {
                 direction: "row",
                 alignItems: "center",
+                justifyContent: "space-between",
                 borderBottom: 1,
                 borderColor: (theme)=>theme.palette.divider,
                 children: [
-                    /*#__PURE__*/ _jsx(IconButton, {
-                        size: "small",
-                        onClick: ()=>onCollapseExpand(index),
-                        children: isCollapsed ? /*#__PURE__*/ _jsx(ChevronRight, {}) : /*#__PURE__*/ _jsx(ChevronDown, {})
-                    }),
-                    /*#__PURE__*/ _jsxs(Typography, {
-                        variant: "overline",
-                        component: "h4",
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
                         children: [
-                            "Query #",
-                            index + 1
+                            /*#__PURE__*/ _jsx(IconButton, {
+                                size: "small",
+                                onClick: ()=>onCollapseExpand(index),
+                                children: isCollapsed ? /*#__PURE__*/ _jsx(ChevronRight, {}) : /*#__PURE__*/ _jsx(ChevronDown, {})
+                            }),
+                            /*#__PURE__*/ _jsxs(Typography, {
+                                variant: "overline",
+                                component: "h4",
+                                children: [
+                                    "Query #",
+                                    index + 1
+                                ]
+                            })
                         ]
                     }),
-                    /*#__PURE__*/ _jsx(IconButton, {
-                        size: "small",
-                        // Use `visibility` to ensure that the row has the same height when delete button is visible or not visible
-                        sx: {
-                            marginLeft: 'auto',
-                            visibility: `${onDelete ? 'visible' : 'hidden'}`
-                        },
-                        onClick: ()=>onDelete && onDelete(index),
-                        children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        alignItems: "center",
+                        children: [
+                            queryResult?.isFetching && /*#__PURE__*/ _jsx(CircularProgress, {
+                                "aria-label": "loading",
+                                size: "1.125rem"
+                            }),
+                            queryResult?.error && /*#__PURE__*/ _jsx(InfoTooltip, {
+                                description: queryResult.error.message,
+                                children: /*#__PURE__*/ _jsxs(Stack, {
+                                    direction: "row",
+                                    alignItems: "center",
+                                    sx: {
+                                        color: (theme)=>theme.palette.error.main
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(IconButton, {
+                                            "aria-label": "query error",
+                                            size: "small",
+                                            sx: {
+                                                color: (theme)=>theme.palette.error.main
+                                            },
+                                            children: /*#__PURE__*/ _jsx(AlertIcon, {})
+                                        }),
+                                        /*#__PURE__*/ _jsx(Typography, {
+                                            sx: {
+                                                maxWidth: 300,
+                                                whiteSpace: 'nowrap',
+                                                overflow: 'hidden',
+                                                textOverflow: 'ellipsis',
+                                                '&:hover ::after': {
+                                                    content: '"Click to copy"'
+                                                }
+                                            },
+                                            children: queryResult.error.message
+                                        })
+                                    ]
+                                })
+                            }),
+                            onDelete && /*#__PURE__*/ _jsx(IconButton, {
+                                "aria-label": "delete query",
+                                size: "small",
+                                onClick: ()=>onDelete && onDelete(index),
+                                children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                            })
+                        ]
                     })
                 ]
             }),
             !isCollapsed && /*#__PURE__*/ _jsx(QueryEditor, {
-                filteredQueryPlugins: filteredQueryPlugins,
                 ref: ref,
                 queryTypes: queryTypes,
                 value: query,
-                onChange: (next)=>onChange(index, next)
+                filteredQueryPlugins: filteredQueryPlugins,
+                onChange: (next)=>onChange(index, next),
+                onQueryRun: ()=>onQueryRun(index, query)
             })
         ]
     }, index);
@@ -84,8 +130,7 @@ QueryEditorContainer.displayName = 'QueryEditorContainer';
  * @param props
  * @constructor
  */ const QueryEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { value, onChange, queryTypes, filteredQueryPlugins, ...others } = props;
-    const { refresh } = useTimeRange();
+    const { queryTypes, value, filteredQueryPlugins, onChange, onQueryRun, ...others } = props;
     const handlePluginChange = (next)=>{
         onChange(produce(value, (draft)=>{
             draft.kind = next.selection.type;
@@ -96,9 +141,7 @@ QueryEditorContainer.displayName = 'QueryEditorContainer';
     return /*#__PURE__*/ _jsx(Box, {
         ...others,
         children: /*#__PURE__*/ _jsx(PluginEditor, {
-            postExecuteRunQuery: refresh,
             ref: ref,
-            withRunQueryButton: true,
             pluginTypes: queryTypes,
             pluginKindLabel: "Query Type",
             value: {
@@ -108,8 +151,10 @@ QueryEditorContainer.displayName = 'QueryEditorContainer';
                 },
                 spec: value.spec.plugin.spec
             },
-            onChange: handlePluginChange,
-            filteredQueryPlugins: filteredQueryPlugins
+            filteredQueryPlugins: filteredQueryPlugins,
+            withRunQueryButton: true,
+            onRunQuery: onQueryRun,
+            onChange: handlePluginChange
         })
     });
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MultiQueryEditor/QueryEditorContainer.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { produce } from 'immer';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/core';\nimport { Stack, IconButton, Typography, BoxProps, Box } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport { forwardRef, ReactElement } from 'react';\nimport { PluginEditor, PluginEditorProps, PluginEditorRef } from '../PluginEditor';\nimport { useTimeRange } from '../../runtime';\n\n/**\n * Properties for {@link QueryEditorContainer}\n */\ninterface QueryEditorContainerProps {\n  queryTypes: QueryPluginType[];\n  index: number;\n  query: QueryDefinition;\n  filteredQueryPlugins?: string[];\n  onChange: (index: number, query: QueryDefinition) => void;\n  onCollapseExpand: (index: number) => void;\n  isCollapsed?: boolean;\n  onDelete?: (index: number) => void;\n}\n\n/**\n * Container for a query editor. This component is responsible for rendering the query editor, and make it collapsible\n * to not take too much space.\n * @param queryTypes the supported query types\n * @param index the index of the query in the list\n * @param query the query definition\n * @param isCollapsed whether the query editor is collapsed or not\n * @param onDelete callback when the query is deleted\n * @param onChange callback when the query is changed\n * @param onCollapseExpand callback when the query is collapsed or expanded\n * @constructor\n */\n\nexport const QueryEditorContainer = forwardRef<PluginEditorRef, QueryEditorContainerProps>(\n  (props, ref): ReactElement => {\n    const { queryTypes, filteredQueryPlugins, index, query, isCollapsed, onDelete, onChange, onCollapseExpand } = props;\n    return (\n      <Stack key={index} spacing={1}>\n        <Stack direction=\"row\" alignItems=\"center\" borderBottom={1} borderColor={(theme) => theme.palette.divider}>\n          <IconButton size=\"small\" onClick={() => onCollapseExpand(index)}>\n            {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n          </IconButton>\n          <Typography variant=\"overline\" component=\"h4\">\n            Query #{index + 1}\n          </Typography>\n          <IconButton\n            size=\"small\"\n            // Use `visibility` to ensure that the row has the same height when delete button is visible or not visible\n            sx={{ marginLeft: 'auto', visibility: `${onDelete ? 'visible' : 'hidden'}` }}\n            onClick={() => onDelete && onDelete(index)}\n          >\n            <DeleteIcon />\n          </IconButton>\n        </Stack>\n        {!isCollapsed && (\n          <QueryEditor\n            filteredQueryPlugins={filteredQueryPlugins}\n            ref={ref}\n            queryTypes={queryTypes}\n            value={query}\n            onChange={(next) => onChange(index, next)}\n          />\n        )}\n      </Stack>\n    );\n  }\n);\n\nQueryEditorContainer.displayName = 'QueryEditorContainer';\n\n// Props on MUI Box that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\ninterface QueryEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n  queryTypes: QueryPluginType[];\n  filteredQueryPlugins?: string[];\n  value: QueryDefinition;\n  onChange: (next: QueryDefinition) => void;\n}\n\n/**\n * Editor for a query definition. This component is responsible for rendering the plugin editor for the given query.\n * This will allow user to select a plugin extending from the given supported query types, and then edit the plugin\n * spec for this plugin.\n * @param props\n * @constructor\n */\n\nconst QueryEditor = forwardRef<PluginEditorRef, QueryEditorProps>((props, ref): ReactElement => {\n  const { value, onChange, queryTypes, filteredQueryPlugins, ...others } = props;\n  const { refresh } = useTimeRange();\n  const handlePluginChange: PluginEditorProps['onChange'] = (next) => {\n    onChange(\n      produce(value, (draft) => {\n        draft.kind = next.selection.type;\n        draft.spec.plugin.kind = next.selection.kind;\n        draft.spec.plugin.spec = next.spec;\n      })\n    );\n  };\n\n  return (\n    <Box {...others}>\n      <PluginEditor\n        postExecuteRunQuery={refresh}\n        ref={ref}\n        withRunQueryButton\n        pluginTypes={queryTypes}\n        pluginKindLabel=\"Query Type\"\n        value={{\n          selection: {\n            kind: value.spec.plugin.kind,\n            type: value.kind,\n          },\n          spec: value.spec.plugin.spec,\n        }}\n        onChange={handlePluginChange}\n        filteredQueryPlugins={filteredQueryPlugins}\n      />\n    </Box>\n  );\n});\n\nQueryEditor.displayName = 'QueryEditor';\n"],"names":["produce","Stack","IconButton","Typography","Box","DeleteIcon","ChevronDown","ChevronRight","forwardRef","PluginEditor","useTimeRange","QueryEditorContainer","props","ref","queryTypes","filteredQueryPlugins","index","query","isCollapsed","onDelete","onChange","onCollapseExpand","spacing","direction","alignItems","borderBottom","borderColor","theme","palette","divider","size","onClick","variant","component","sx","marginLeft","visibility","QueryEditor","value","next","displayName","others","refresh","handlePluginChange","draft","kind","selection","type","spec","plugin","postExecuteRunQuery","withRunQueryButton","pluginTypes","pluginKindLabel"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,OAAO,QAAQ,QAAQ;AAEhC,SAASC,KAAK,EAAEC,UAAU,EAAEC,UAAU,EAAYC,GAAG,QAAQ,gBAAgB;AAC7E,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,kBAAkB,+BAA+B;AACxD,SAASC,UAAU,QAAsB,QAAQ;AACjD,SAASC,YAAY,QAA4C,kBAAkB;AACnF,SAASC,YAAY,QAAQ,gBAAgB;AAgB7C;;;;;;;;;;;CAWC,GAED,OAAO,MAAMC,qCAAuBH,WAClC,CAACI,OAAOC;IACN,MAAM,EAAEC,UAAU,EAAEC,oBAAoB,EAAEC,KAAK,EAAEC,KAAK,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,gBAAgB,EAAE,GAAGT;IAC9G,qBACE,MAACX;QAAkBqB,SAAS;;0BAC1B,MAACrB;gBAAMsB,WAAU;gBAAMC,YAAW;gBAASC,cAAc;gBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;;kCACvG,KAAC3B;wBAAW4B,MAAK;wBAAQC,SAAS,IAAMV,iBAAiBL;kCACtDE,4BAAc,KAACX,kCAAkB,KAACD;;kCAErC,MAACH;wBAAW6B,SAAQ;wBAAWC,WAAU;;4BAAK;4BACpCjB,QAAQ;;;kCAElB,KAACd;wBACC4B,MAAK;wBACL,2GAA2G;wBAC3GI,IAAI;4BAAEC,YAAY;4BAAQC,YAAY,GAAGjB,WAAW,YAAY,UAAU;wBAAC;wBAC3EY,SAAS,IAAMZ,YAAYA,SAASH;kCAEpC,cAAA,KAACX;;;;YAGJ,CAACa,6BACA,KAACmB;gBACCtB,sBAAsBA;gBACtBF,KAAKA;gBACLC,YAAYA;gBACZwB,OAAOrB;gBACPG,UAAU,CAACmB,OAASnB,SAASJ,OAAOuB;;;OAvB9BvB;AA4BhB,GACA;AAEFL,qBAAqB6B,WAAW,GAAG;AAYnC;;;;;;CAMC,GAED,MAAMH,4BAAc7B,WAA8C,CAACI,OAAOC;IACxE,MAAM,EAAEyB,KAAK,EAAElB,QAAQ,EAAEN,UAAU,EAAEC,oBAAoB,EAAE,GAAG0B,QAAQ,GAAG7B;IACzE,MAAM,EAAE8B,OAAO,EAAE,GAAGhC;IACpB,MAAMiC,qBAAoD,CAACJ;QACzDnB,SACEpB,QAAQsC,OAAO,CAACM;YACdA,MAAMC,IAAI,GAAGN,KAAKO,SAAS,CAACC,IAAI;YAChCH,MAAMI,IAAI,CAACC,MAAM,CAACJ,IAAI,GAAGN,KAAKO,SAAS,CAACD,IAAI;YAC5CD,MAAMI,IAAI,CAACC,MAAM,CAACD,IAAI,GAAGT,KAAKS,IAAI;QACpC;IAEJ;IAEA,qBACE,KAAC5C;QAAK,GAAGqC,MAAM;kBACb,cAAA,KAAChC;YACCyC,qBAAqBR;YACrB7B,KAAKA;YACLsC,kBAAkB;YAClBC,aAAatC;YACbuC,iBAAgB;YAChBf,OAAO;gBACLQ,WAAW;oBACTD,MAAMP,MAAMU,IAAI,CAACC,MAAM,CAACJ,IAAI;oBAC5BE,MAAMT,MAAMO,IAAI;gBAClB;gBACAG,MAAMV,MAAMU,IAAI,CAACC,MAAM,CAACD,IAAI;YAC9B;YACA5B,UAAUuB;YACV5B,sBAAsBA;;;AAI9B;AAEAsB,YAAYG,WAAW,GAAG"}
+{"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, CircularProgress } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport { forwardRef, ReactElement } from 'react';\nimport AlertIcon from 'mdi-material-ui/Alert';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { QueryData } from '../../runtime';\nimport { PluginEditor, PluginEditorProps, PluginEditorRef } from '../PluginEditor';\n\n/**\n * Properties for {@link QueryEditorContainer}\n */\ninterface QueryEditorContainerProps {\n  queryTypes: QueryPluginType[];\n  index: number;\n  query: QueryDefinition;\n  queryResult?: QueryData;\n  filteredQueryPlugins?: string[];\n  onChange: (index: number, query: QueryDefinition) => void;\n  onQueryRun: (index: number, query: QueryDefinition) => void;\n  onCollapseExpand: (index: number) => void;\n  isCollapsed?: boolean;\n  onDelete?: (index: number) => void;\n}\n\n/**\n * Container for a query editor. This component is responsible for rendering the query editor, and make it collapsible\n * to not take too much space.\n * @param queryTypes the supported query types\n * @param index the index of the query in the list\n * @param query the query definition\n * @param isCollapsed whether the query editor is collapsed or not\n * @param onDelete callback when the query is deleted\n * @param onChange callback when the query is changed\n * @param onCollapseExpand callback when the query is collapsed or expanded\n * @constructor\n */\n\nexport const QueryEditorContainer = forwardRef<PluginEditorRef, QueryEditorContainerProps>(\n  (props, ref): ReactElement => {\n    const {\n      queryTypes,\n      index,\n      query,\n      queryResult,\n      filteredQueryPlugins,\n      isCollapsed,\n      onDelete,\n      onChange,\n      onQueryRun,\n      onCollapseExpand,\n    } = props;\n    return (\n      <Stack key={index} spacing={1}>\n        <Stack\n          direction=\"row\"\n          alignItems=\"center\"\n          justifyContent=\"space-between\"\n          borderBottom={1}\n          borderColor={(theme) => theme.palette.divider}\n        >\n          <Stack direction=\"row\">\n            <IconButton size=\"small\" onClick={() => onCollapseExpand(index)}>\n              {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n            </IconButton>\n            <Typography variant=\"overline\" component=\"h4\">\n              Query #{index + 1}\n            </Typography>\n          </Stack>\n          <Stack direction=\"row\" alignItems=\"center\">\n            {queryResult?.isFetching && <CircularProgress aria-label=\"loading\" size=\"1.125rem\" />}\n            {queryResult?.error && (\n              <InfoTooltip description={queryResult.error.message}>\n                <Stack\n                  direction=\"row\"\n                  alignItems=\"center\"\n                  sx={{\n                    color: (theme) => theme.palette.error.main,\n                  }}\n                >\n                  <IconButton\n                    aria-label=\"query error\"\n                    size=\"small\"\n                    sx={{\n                      color: (theme) => theme.palette.error.main,\n                    }}\n                  >\n                    <AlertIcon />\n                  </IconButton>\n                  <Typography\n                    sx={{\n                      maxWidth: 300,\n                      whiteSpace: 'nowrap',\n                      overflow: 'hidden',\n                      textOverflow: 'ellipsis',\n                      '&:hover ::after': { content: '\"Click to copy\"' },\n                    }}\n                  >\n                    {queryResult.error.message}\n                  </Typography>\n                </Stack>\n              </InfoTooltip>\n            )}\n            {onDelete && (\n              <IconButton aria-label=\"delete query\" size=\"small\" onClick={() => onDelete && onDelete(index)}>\n                <DeleteIcon />\n              </IconButton>\n            )}\n          </Stack>\n        </Stack>\n        {!isCollapsed && (\n          <QueryEditor\n            ref={ref}\n            queryTypes={queryTypes}\n            value={query}\n            filteredQueryPlugins={filteredQueryPlugins}\n            onChange={(next) => onChange(index, next)}\n            onQueryRun={() => onQueryRun(index, query)}\n          />\n        )}\n      </Stack>\n    );\n  }\n);\n\nQueryEditorContainer.displayName = 'QueryEditorContainer';\n\n// Props on MUI Box that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\ninterface QueryEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n  queryTypes: QueryPluginType[];\n  value: QueryDefinition;\n  filteredQueryPlugins?: string[];\n  onChange: (next: QueryDefinition) => void;\n  onQueryRun: () => void;\n}\n\n/**\n * Editor for a query definition. This component is responsible for rendering the plugin editor for the given query.\n * This will allow user to select a plugin extending from the given supported query types, and then edit the plugin\n * spec for this plugin.\n * @param props\n * @constructor\n */\n\nconst QueryEditor = forwardRef<PluginEditorRef, QueryEditorProps>((props, ref): ReactElement => {\n  const { queryTypes, value, filteredQueryPlugins, onChange, onQueryRun, ...others } = props;\n\n  const handlePluginChange: PluginEditorProps['onChange'] = (next) => {\n    onChange(\n      produce(value, (draft) => {\n        draft.kind = next.selection.type;\n        draft.spec.plugin.kind = next.selection.kind;\n        draft.spec.plugin.spec = next.spec;\n      })\n    );\n  };\n\n  return (\n    <Box {...others}>\n      <PluginEditor\n        ref={ref}\n        pluginTypes={queryTypes}\n        pluginKindLabel=\"Query Type\"\n        value={{\n          selection: {\n            kind: value.spec.plugin.kind,\n            type: value.kind,\n          },\n          spec: value.spec.plugin.spec,\n        }}\n        filteredQueryPlugins={filteredQueryPlugins}\n        withRunQueryButton\n        onRunQuery={onQueryRun}\n        onChange={handlePluginChange}\n      />\n    </Box>\n  );\n});\n\nQueryEditor.displayName = 'QueryEditor';\n"],"names":["produce","Stack","IconButton","Typography","Box","CircularProgress","DeleteIcon","ChevronDown","ChevronRight","forwardRef","AlertIcon","InfoTooltip","PluginEditor","QueryEditorContainer","props","ref","queryTypes","index","query","queryResult","filteredQueryPlugins","isCollapsed","onDelete","onChange","onQueryRun","onCollapseExpand","spacing","direction","alignItems","justifyContent","borderBottom","borderColor","theme","palette","divider","size","onClick","variant","component","isFetching","aria-label","error","description","message","sx","color","main","maxWidth","whiteSpace","overflow","textOverflow","content","QueryEditor","value","next","displayName","others","handlePluginChange","draft","kind","selection","type","spec","plugin","pluginTypes","pluginKindLabel","withRunQueryButton","onRunQuery"],"mappings":"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"}

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

@@ -6,6 +6,7 @@ export interface PanelSpecEditorProps {
     control: Control<PanelEditorValues>;
     panelDefinition: PanelDefinition;
     onQueriesChange: (queries: QueryDefinition[]) => void;
+    onQueryRun: (index: number, query: QueryDefinition) => void;
     onPluginSpecChange: (spec: UnknownSpec) => void;
     onJSONChange: (panelDefinitionStr: string) => void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"PanelSpecEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpG,OAAO,EAAE,OAAO,EAAc,MAAM,iBAAiB,CAAC;AAMtD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,eAAe,EAAE,eAAe,CAAC;IACjC,eAAe,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACtD,kBAAkB,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,CAAC,kBAAkB,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAED,eAAO,MAAM,eAAe,kHAgG1B,CAAC"}
+{"version":3,"file":"PanelSpecEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpG,OAAO,EAAE,OAAO,EAAc,MAAM,iBAAiB,CAAC;AAMtD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,eAAe,EAAE,eAAe,CAAC;IACjC,eAAe,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACtD,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5D,kBAAkB,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,CAAC,kBAAkB,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAED,eAAO,MAAM,eAAe,kHA0G1B,CAAC"}

package/dist/components/PanelSpecEditor/PanelSpecEditor.js

@@ -14,13 +14,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ErrorAlert, JSONEditor, LinksEditor } from '@perses-dev/components';
 import { Controller } from 'react-hook-form';
 import { forwardRef } from 'react';
-import { QueryCountProvider, usePlugin } from '../../runtime';
+import { QueryCountProvider, useDataQueriesContext, usePlugin } from '../../runtime';
 import { OptionsEditorTabs } from '../OptionsEditorTabs';
 import { MultiQueryEditor } from '../MultiQueryEditor';
 export const PanelSpecEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { control, panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;
+    const { control, panelDefinition, onQueriesChange, onQueryRun, onPluginSpecChange, onJSONChange } = props;
     const { kind } = panelDefinition.spec.plugin;
     const { data: plugin, isLoading, error } = usePlugin('Panel', kind);
+    const { queryResults } = useDataQueriesContext();
     if (error) {
         return /*#__PURE__*/ _jsx(ErrorAlert, {
             error: error
@@ -44,9 +45,17 @@ export const PanelSpecEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
                         ref: ref,
                         queryTypes: plugin.supportedQueryTypes ?? [],
                         queries: panelDefinition.spec.queries ?? [],
+                        queryResults: queryResults,
                         onChange: (queries)=>{
                             field.onChange(queries);
                             onQueriesChange(queries);
+                        },
+                        onQueryRun: (index, query)=>{
+                            onQueryRun(index, query);
+                            // If spec has not changed, refetch to update the data
+                            if (JSON.stringify(panelDefinition.spec.queries?.[index]) === JSON.stringify(query)) {
+                                queryResults[index]?.refetch?.();
+                            }
                         }
                     })
             })

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, LinksEditor } from '@perses-dev/components';\nimport { PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { Control, Controller } from 'react-hook-form';\nimport { forwardRef, ReactElement } from 'react';\nimport { QueryCountProvider, usePlugin } from '../../runtime';\nimport { PanelPlugin } from '../../model';\nimport { OptionsEditorTabsProps, OptionsEditorTabs } from '../OptionsEditorTabs';\nimport { MultiQueryEditor } from '../MultiQueryEditor';\nimport { PluginEditorRef } from '../PluginEditor';\n\nexport interface PanelSpecEditorProps {\n  control: Control<PanelEditorValues>;\n  panelDefinition: PanelDefinition;\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onJSONChange: (panelDefinitionStr: string) => void;\n}\n\nexport const PanelSpecEditor = forwardRef<PluginEditorRef, PanelSpecEditorProps>((props, ref): ReactElement | null => {\n  const { control, panelDefinition, 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  if (isLoading) {\n    return null;\n  }\n\n  if (!plugin) {\n    throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);\n  }\n\n  const { panelOptionsEditorComponents, hideQueryEditor } = plugin as PanelPlugin;\n  let tabs: OptionsEditorTabsProps['tabs'] = [];\n\n  if (!hideQueryEditor) {\n    tabs.push({\n      label: 'Query',\n      content: (\n        <Controller\n          control={control}\n          name=\"panelDefinition.spec.queries\"\n          render={({ field }) => (\n            <MultiQueryEditor\n              ref={ref}\n              queryTypes={plugin.supportedQueryTypes ?? []}\n              queries={panelDefinition.spec.queries ?? []}\n              onChange={(queries) => {\n                field.onChange(queries);\n                onQueriesChange(queries);\n              }}\n            />\n          )}\n        />\n      ),\n    });\n  }\n\n  if (panelOptionsEditorComponents) {\n    tabs = tabs.concat(\n      panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent }) => ({\n        label,\n        content: (\n          <Controller\n            control={control}\n            name=\"panelDefinition.spec.plugin.spec\"\n            render={({ field }) => (\n              <OptionsEditorComponent\n                value={panelDefinition.spec.plugin.spec}\n                onChange={(spec) => {\n                  field.onChange(spec);\n                  onPluginSpecChange(spec);\n                }}\n              />\n            )}\n          />\n        ),\n      }))\n    );\n  }\n\n  // always show json editor and links editor by default\n  tabs.push({\n    label: 'Links',\n    content: <LinksEditor control={control} />,\n  });\n  tabs.push({\n    label: 'JSON',\n    content: (\n      <Controller\n        control={control}\n        name=\"panelDefinition\"\n        render={({ field }) => (\n          <JSONEditor\n            maxHeight=\"80vh\"\n            value={panelDefinition}\n            onChange={(json) => {\n              field.onChange(JSON.parse(json));\n              onJSONChange(json);\n            }}\n          />\n        )}\n      />\n    ),\n  });\n\n  return (\n    <QueryCountProvider queryCount={(panelDefinition.spec.queries ?? []).length}>\n      <OptionsEditorTabs key={tabs.length} tabs={tabs} />\n    </QueryCountProvider>\n  );\n});\n\nPanelSpecEditor.displayName = 'PanelSpecEditor';\n"],"names":["ErrorAlert","JSONEditor","LinksEditor","Controller","forwardRef","QueryCountProvider","usePlugin","OptionsEditorTabs","MultiQueryEditor","PanelSpecEditor","props","ref","control","panelDefinition","onJSONChange","onQueriesChange","onPluginSpecChange","kind","spec","plugin","data","isLoading","error","Error","panelOptionsEditorComponents","hideQueryEditor","tabs","push","label","content","name","render","field","queryTypes","supportedQueryTypes","queries","onChange","concat","map","OptionsEditorComponent","value","maxHeight","json","JSON","parse","queryCount","length","displayName"],"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, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { Control, Controller } from 'react-hook-form';\nimport { forwardRef, ReactElement } from 'react';\nimport { QueryCountProvider, useDataQueriesContext, usePlugin } from '../../runtime';\nimport { PanelPlugin } from '../../model';\nimport { OptionsEditorTabsProps, OptionsEditorTabs } from '../OptionsEditorTabs';\nimport { MultiQueryEditor } from '../MultiQueryEditor';\nimport { PluginEditorRef } from '../PluginEditor';\n\nexport interface PanelSpecEditorProps {\n  control: Control<PanelEditorValues>;\n  panelDefinition: PanelDefinition;\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onQueryRun: (index: number, query: QueryDefinition) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onJSONChange: (panelDefinitionStr: string) => void;\n}\n\nexport const PanelSpecEditor = forwardRef<PluginEditorRef, PanelSpecEditorProps>((props, ref): ReactElement | null => {\n  const { control, panelDefinition, onQueriesChange, onQueryRun, onPluginSpecChange, onJSONChange } = props;\n  const { kind } = panelDefinition.spec.plugin;\n  const { data: plugin, isLoading, error } = usePlugin('Panel', kind);\n\n  const { queryResults } = useDataQueriesContext();\n\n  if (error) {\n    return <ErrorAlert error={error} />;\n  }\n\n  if (isLoading) {\n    return null;\n  }\n\n  if (!plugin) {\n    throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);\n  }\n\n  const { panelOptionsEditorComponents, hideQueryEditor } = plugin as PanelPlugin;\n  let tabs: OptionsEditorTabsProps['tabs'] = [];\n\n  if (!hideQueryEditor) {\n    tabs.push({\n      label: 'Query',\n      content: (\n        <Controller\n          control={control}\n          name=\"panelDefinition.spec.queries\"\n          render={({ field }) => (\n            <MultiQueryEditor\n              ref={ref}\n              queryTypes={plugin.supportedQueryTypes ?? []}\n              queries={panelDefinition.spec.queries ?? []}\n              queryResults={queryResults}\n              onChange={(queries) => {\n                field.onChange(queries);\n                onQueriesChange(queries);\n              }}\n              onQueryRun={(index, query) => {\n                onQueryRun(index, query);\n                // If spec has not changed, refetch to update the data\n                if (JSON.stringify(panelDefinition.spec.queries?.[index]) === JSON.stringify(query)) {\n                  queryResults[index]?.refetch?.();\n                }\n              }}\n            />\n          )}\n        />\n      ),\n    });\n  }\n\n  if (panelOptionsEditorComponents) {\n    tabs = tabs.concat(\n      panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent }) => ({\n        label,\n        content: (\n          <Controller\n            control={control}\n            name=\"panelDefinition.spec.plugin.spec\"\n            render={({ field }) => (\n              <OptionsEditorComponent\n                value={panelDefinition.spec.plugin.spec}\n                onChange={(spec) => {\n                  field.onChange(spec);\n                  onPluginSpecChange(spec);\n                }}\n              />\n            )}\n          />\n        ),\n      }))\n    );\n  }\n\n  // always show json editor and links editor by default\n  tabs.push({\n    label: 'Links',\n    content: <LinksEditor control={control} />,\n  });\n  tabs.push({\n    label: 'JSON',\n    content: (\n      <Controller\n        control={control}\n        name=\"panelDefinition\"\n        render={({ field }) => (\n          <JSONEditor\n            maxHeight=\"80vh\"\n            value={panelDefinition}\n            onChange={(json) => {\n              field.onChange(JSON.parse(json));\n              onJSONChange(json);\n            }}\n          />\n        )}\n      />\n    ),\n  });\n\n  return (\n    <QueryCountProvider queryCount={(panelDefinition.spec.queries ?? []).length}>\n      <OptionsEditorTabs key={tabs.length} tabs={tabs} />\n    </QueryCountProvider>\n  );\n});\n\nPanelSpecEditor.displayName = 'PanelSpecEditor';\n"],"names":["ErrorAlert","JSONEditor","LinksEditor","Controller","forwardRef","QueryCountProvider","useDataQueriesContext","usePlugin","OptionsEditorTabs","MultiQueryEditor","PanelSpecEditor","props","ref","control","panelDefinition","onQueriesChange","onQueryRun","onPluginSpecChange","onJSONChange","kind","spec","plugin","data","isLoading","error","queryResults","Error","panelOptionsEditorComponents","hideQueryEditor","tabs","push","label","content","name","render","field","queryTypes","supportedQueryTypes","queries","onChange","index","query","JSON","stringify","refetch","concat","map","OptionsEditorComponent","value","maxHeight","json","parse","queryCount","length","displayName"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { PluginEditorProps, PluginEditorRef } from './plugin-editor-api';
+import { ReactElement } from 'react';
+import { PluginEditorProps } from './plugin-editor-api';
 /**
  * A combination `PluginKindSelect` and `PluginSpecEditor` component. This is meant for editing the `plugin` property
  * that's common in our JSON specs where a user selects a plugin `kind` and then edits the `spec` via that plugin's
@@ -8,5 +8,5 @@ import { PluginEditorProps, PluginEditorRef } from './plugin-editor-api';
  * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the
  * `usePluginEditor` hook that powers this component.
  */
-export declare const PluginEditor: import("react").ForwardRefExoticComponent<Omit<PluginEditorProps, "ref"> & import("react").RefAttributes<PluginEditorRef>>;
+export declare function PluginEditor(props: PluginEditorProps): ReactElement;
 //# sourceMappingURL=PluginEditor.d.ts.map

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

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