@perses-dev/plugin-system 0.0.0-snapshot-scatter-chart-embed-8efdfab → 0.0.0-snapshot-explorer-plugin-c4a7621

package/dist/runtime/trace-queries.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"trace-queries.d.ts","sourceRoot":"","sources":["../../src/runtime/trace-queries.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAKnF,oBAAY,oBAAoB,CAAC,UAAU,GAAG,WAAW,IAAI,eAAe,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;AACvG,eAAO,MAAM,eAAe,eAAe,CAAC;AAE5C,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,iBAAiB;;;EAM5D;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,WAAW,EAAE,oBAAoB,EAAE,mGA0BlE"}
+{"version":3,"file":"trace-queries.d.ts","sourceRoot":"","sources":["../../src/runtime/trace-queries.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC9F,OAAO,EAAc,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAInE,MAAM,MAAM,oBAAoB,CAAC,UAAU,GAAG,WAAW,IAAI,eAAe,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;AACvG,eAAO,MAAM,eAAe,eAAe,CAAC;AAE5C,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAM7F;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,WAAW,EAAE,oBAAoB,EAAE,GAAG,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CA+BrG"}

package/dist/runtime/trace-queries.js

@@ -17,7 +17,7 @@ import { usePluginRegistry } from './plugin-registry';
 import { useTimeRange } from './TimeRangeProvider';
 export const TRACE_QUERY_KEY = 'TraceQuery';
 export function getUnixTimeRange(timeRange) {
-    const { start , end  } = timeRange;
+    const { start, end } = timeRange;
     return {
         start: Math.ceil(getUnixTime(start)),
         end: Math.ceil(getUnixTime(end))
@@ -25,12 +25,12 @@ export function getUnixTimeRange(timeRange) {
 }
 /**
  * Run a trace query using a TraceQuery plugin and return the results
- * @param definition: dashboard defintion for a trace query, written in Trace Query Language (TraceQL)
+ * @param definitions: dashboard defintion for a trace query, written in Trace Query Language (TraceQL)
  * Documentation for TraceQL: https://grafana.com/docs/tempo/latest/traceql/
  */ export function useTraceQueries(definitions) {
-    const { getPlugin  } = usePluginRegistry();
+    const { getPlugin } = usePluginRegistry();
     const datasourceStore = useDatasourceStore();
-    const { absoluteTimeRange  } = useTimeRange();
+    const { absoluteTimeRange } = useTimeRange();
     const context = {
         datasourceStore,
         absoluteTimeRange
@@ -39,20 +39,23 @@ export function getUnixTimeRange(timeRange) {
     // https://tanstack.com/query/v4/docs/react/reference/useQuery
     return useQueries({
         queries: definitions.map((definition)=>{
-            var _definition_spec, _definition_spec_plugin;
             const queryKey = [
                 definition,
                 datasourceStore,
                 absoluteTimeRange
             ]; // `queryKey` watches and reruns `queryFn` if keys in the array change
-            const traceQueryKind = definition === null || definition === void 0 ? void 0 : (_definition_spec = definition.spec) === null || _definition_spec === void 0 ? void 0 : (_definition_spec_plugin = _definition_spec.plugin) === null || _definition_spec_plugin === void 0 ? void 0 : _definition_spec_plugin.kind;
+            const traceQueryKind = definition?.spec?.plugin?.kind;
             return {
                 queryKey: queryKey,
                 queryFn: async ()=>{
                     const plugin = await getPlugin(TRACE_QUERY_KEY, traceQueryKind);
                     const data = await plugin.getTraceData(definition.spec.plugin.spec, context);
                     return data;
-                }
+                },
+                // The data returned by getTraceData() contains circular dependencies (a span has a reference to the parent span, and the parent span has an array of child spans)
+                // Therefore structuralSharing must be turned off, otherwise the query is stuck in the 'fetching' state on re-fetch.
+                // Ref: https://github.com/TanStack/query/issues/6954#issuecomment-1962321426
+                structuralSharing: false
             };
         })
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/runtime/trace-queries.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 { getUnixTime } from 'date-fns';\nimport { QueryDefinition, UnknownSpec, AbsoluteTimeRange } from '@perses-dev/core';\nimport { useQueries } from '@tanstack/react-query';\nimport { useDatasourceStore } from './datasources';\nimport { usePluginRegistry } from './plugin-registry';\nimport { useTimeRange } from './TimeRangeProvider';\nexport type TraceQueryDefinition<PluginSpec = UnknownSpec> = QueryDefinition<'TraceQuery', PluginSpec>;\nexport const TRACE_QUERY_KEY = 'TraceQuery';\n\nexport function getUnixTimeRange(timeRange: AbsoluteTimeRange) {\n  const { start, end } = timeRange;\n  return {\n    start: Math.ceil(getUnixTime(start)),\n    end: Math.ceil(getUnixTime(end)),\n  };\n}\n\n/**\n * Run a trace query using a TraceQuery plugin and return the results\n * @param definition: dashboard defintion for a trace query, written in Trace Query Language (TraceQL)\n * Documentation for TraceQL: https://grafana.com/docs/tempo/latest/traceql/\n */\nexport function useTraceQueries(definitions: TraceQueryDefinition[]) {\n  const { getPlugin } = usePluginRegistry();\n  const datasourceStore = useDatasourceStore();\n  const { absoluteTimeRange } = useTimeRange();\n\n  const context = {\n    datasourceStore,\n    absoluteTimeRange,\n  };\n\n  // useQueries() handles data fetching from query plugins (e.g. traceQL queries, promQL queries)\n  // https://tanstack.com/query/v4/docs/react/reference/useQuery\n  return useQueries({\n    queries: definitions.map((definition) => {\n      const queryKey = [definition, datasourceStore, absoluteTimeRange] as const; // `queryKey` watches and reruns `queryFn` if keys in the array change\n      const traceQueryKind = definition?.spec?.plugin?.kind;\n      return {\n        queryKey: queryKey,\n        queryFn: async () => {\n          const plugin = await getPlugin(TRACE_QUERY_KEY, traceQueryKind);\n          const data = await plugin.getTraceData(definition.spec.plugin.spec, context);\n          return data;\n        },\n      };\n    }),\n  });\n}\n"],"names":["getUnixTime","useQueries","useDatasourceStore","usePluginRegistry","useTimeRange","TRACE_QUERY_KEY","getUnixTimeRange","timeRange","start","end","Math","ceil","useTraceQueries","definitions","getPlugin","datasourceStore","absoluteTimeRange","context","queries","map","definition","queryKey","traceQueryKind","spec","plugin","kind","queryFn","data","getTraceData"],"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,WAAW,QAAQ,WAAW;AAEvC,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,kBAAkB,QAAQ,gBAAgB;AACnD,SAASC,iBAAiB,QAAQ,oBAAoB;AACtD,SAASC,YAAY,QAAQ,sBAAsB;AAEnD,OAAO,MAAMC,kBAAkB,aAAa;AAE5C,OAAO,SAASC,iBAAiBC,SAA4B;IAC3D,MAAM,EAAEC,MAAK,EAAEC,IAAG,EAAE,GAAGF;IACvB,OAAO;QACLC,OAAOE,KAAKC,KAAKX,YAAYQ;QAC7BC,KAAKC,KAAKC,KAAKX,YAAYS;IAC7B;AACF;AAEA;;;;CAIC,GACD,OAAO,SAASG,gBAAgBC,WAAmC;IACjE,MAAM,EAAEC,UAAS,EAAE,GAAGX;IACtB,MAAMY,kBAAkBb;IACxB,MAAM,EAAEc,kBAAiB,EAAE,GAAGZ;IAE9B,MAAMa,UAAU;QACdF;QACAC;IACF;IAEA,+FAA+F;IAC/F,8DAA8D;IAC9D,OAAOf,WAAW;QAChBiB,SAASL,YAAYM,IAAI,CAACC;gBAEDA;YADvB,MAAMC,WAAW;gBAACD;gBAAYL;gBAAiBC;aAAkB,EAAW,sEAAsE;YAClJ,MAAMM,iBAAiBF,uBAAAA,wBAAAA,KAAAA,IAAAA,CAAAA,mBAAAA,WAAYG,kBAAZH,8BAAAA,KAAAA,IAAAA,2BAAAA,iBAAkBI,yDAAlBJ,KAAAA,4BAA0BK;YACjD,OAAO;gBACLJ,UAAUA;gBACVK,SAAS;oBACP,MAAMF,SAAS,MAAMV,UAAUT,iBAAiBiB;oBAChD,MAAMK,OAAO,MAAMH,OAAOI,aAAaR,WAAWG,KAAKC,OAAOD,MAAMN;oBACpE,OAAOU;gBACT;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/runtime/trace-queries.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 { getUnixTime } from 'date-fns';\nimport { QueryDefinition, UnknownSpec, AbsoluteTimeRange, TraceData } from '@perses-dev/core';\nimport { useQueries, UseQueryResult } from '@tanstack/react-query';\nimport { useDatasourceStore } from './datasources';\nimport { usePluginRegistry } from './plugin-registry';\nimport { useTimeRange } from './TimeRangeProvider';\nexport type TraceQueryDefinition<PluginSpec = UnknownSpec> = QueryDefinition<'TraceQuery', PluginSpec>;\nexport const TRACE_QUERY_KEY = 'TraceQuery';\n\nexport function getUnixTimeRange(timeRange: AbsoluteTimeRange): { start: number; end: number } {\n  const { start, end } = timeRange;\n  return {\n    start: Math.ceil(getUnixTime(start)),\n    end: Math.ceil(getUnixTime(end)),\n  };\n}\n\n/**\n * Run a trace query using a TraceQuery plugin and return the results\n * @param definitions: dashboard defintion for a trace query, written in Trace Query Language (TraceQL)\n * Documentation for TraceQL: https://grafana.com/docs/tempo/latest/traceql/\n */\nexport function useTraceQueries(definitions: TraceQueryDefinition[]): Array<UseQueryResult<TraceData>> {\n  const { getPlugin } = usePluginRegistry();\n  const datasourceStore = useDatasourceStore();\n  const { absoluteTimeRange } = useTimeRange();\n\n  const context = {\n    datasourceStore,\n    absoluteTimeRange,\n  };\n\n  // useQueries() handles data fetching from query plugins (e.g. traceQL queries, promQL queries)\n  // https://tanstack.com/query/v4/docs/react/reference/useQuery\n  return useQueries({\n    queries: definitions.map((definition) => {\n      const queryKey = [definition, datasourceStore, absoluteTimeRange] as const; // `queryKey` watches and reruns `queryFn` if keys in the array change\n      const traceQueryKind = definition?.spec?.plugin?.kind;\n      return {\n        queryKey: queryKey,\n        queryFn: async (): Promise<TraceData> => {\n          const plugin = await getPlugin(TRACE_QUERY_KEY, traceQueryKind);\n          const data = await plugin.getTraceData(definition.spec.plugin.spec, context);\n          return data;\n        },\n\n        // The data returned by getTraceData() contains circular dependencies (a span has a reference to the parent span, and the parent span has an array of child spans)\n        // Therefore structuralSharing must be turned off, otherwise the query is stuck in the 'fetching' state on re-fetch.\n        // Ref: https://github.com/TanStack/query/issues/6954#issuecomment-1962321426\n        structuralSharing: false,\n      };\n    }),\n  });\n}\n"],"names":["getUnixTime","useQueries","useDatasourceStore","usePluginRegistry","useTimeRange","TRACE_QUERY_KEY","getUnixTimeRange","timeRange","start","end","Math","ceil","useTraceQueries","definitions","getPlugin","datasourceStore","absoluteTimeRange","context","queries","map","definition","queryKey","traceQueryKind","spec","plugin","kind","queryFn","data","getTraceData","structuralSharing"],"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,WAAW,QAAQ,WAAW;AAEvC,SAASC,UAAU,QAAwB,wBAAwB;AACnE,SAASC,kBAAkB,QAAQ,gBAAgB;AACnD,SAASC,iBAAiB,QAAQ,oBAAoB;AACtD,SAASC,YAAY,QAAQ,sBAAsB;AAEnD,OAAO,MAAMC,kBAAkB,aAAa;AAE5C,OAAO,SAASC,iBAAiBC,SAA4B;IAC3D,MAAM,EAAEC,KAAK,EAAEC,GAAG,EAAE,GAAGF;IACvB,OAAO;QACLC,OAAOE,KAAKC,IAAI,CAACX,YAAYQ;QAC7BC,KAAKC,KAAKC,IAAI,CAACX,YAAYS;IAC7B;AACF;AAEA;;;;CAIC,GACD,OAAO,SAASG,gBAAgBC,WAAmC;IACjE,MAAM,EAAEC,SAAS,EAAE,GAAGX;IACtB,MAAMY,kBAAkBb;IACxB,MAAM,EAAEc,iBAAiB,EAAE,GAAGZ;IAE9B,MAAMa,UAAU;QACdF;QACAC;IACF;IAEA,+FAA+F;IAC/F,8DAA8D;IAC9D,OAAOf,WAAW;QAChBiB,SAASL,YAAYM,GAAG,CAAC,CAACC;YACxB,MAAMC,WAAW;gBAACD;gBAAYL;gBAAiBC;aAAkB,EAAW,sEAAsE;YAClJ,MAAMM,iBAAiBF,YAAYG,MAAMC,QAAQC;YACjD,OAAO;gBACLJ,UAAUA;gBACVK,SAAS;oBACP,MAAMF,SAAS,MAAMV,UAAUT,iBAAiBiB;oBAChD,MAAMK,OAAO,MAAMH,OAAOI,YAAY,CAACR,WAAWG,IAAI,CAACC,MAAM,CAACD,IAAI,EAAEN;oBACpE,OAAOU;gBACT;gBAEA,kKAAkK;gBAClK,oHAAoH;gBACpH,6EAA6E;gBAC7EE,mBAAmB;YACrB;QACF;IACF;AACF"}

package/dist/runtime/{template-variables.d.ts → variables.d.ts}

@@ -2,7 +2,7 @@
 import { VariableValue } from '@perses-dev/core';
 import { immerable } from 'immer';
 import { VariableOption } from '../model';
-export declare type VariableState = {
+export type VariableState = {
     value: VariableValue;
     options?: VariableOption[];
     loading: boolean;
@@ -17,11 +17,11 @@ export declare type VariableState = {
     overridden?: boolean;
     defaultValue?: VariableValue;
 };
-export declare type VariableStateMap = Record<string, VariableState>;
+export type VariableStateMap = Record<string, VariableState>;
 /**
  * Structure used as key in the {@link VariableStoreStateMap}.
  */
-export declare type VariableStateKey = {
+export type VariableStateKey = {
     /**
      * name of the variable we want to access in the state.
      */
@@ -67,11 +67,11 @@ export declare class VariableStoreStateMap {
     private _sourceName;
     private _sourceStatesOrEmpty;
 }
-export declare type TemplateVariableSrv = {
+export type VariableSrv = {
     state: VariableStateMap;
 };
-export declare const TemplateVariableContext: import("react").Context<TemplateVariableSrv | undefined>;
-export declare function useTemplateVariableValues(names?: string[]): VariableStateMap;
+export declare const VariableContext: import("react").Context<VariableSrv | undefined>;
 export declare function useVariableValues(names?: string[]): VariableStateMap;
+export declare function useAllVariableValues(names?: string[]): VariableStateMap;
 export declare function useReplaceVariablesInString(str: string | undefined): string | undefined;
-//# sourceMappingURL=template-variables.d.ts.map
+//# sourceMappingURL=variables.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"variables.d.ts","sourceRoot":"","sources":["../../src/runtime/variables.ts"],"names":[],"mappings":";AAcA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAI1C,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAE7D;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;GAEG;AACH,qBAAa,qBAAqB;IAChC;;;OAGG;IACH,CAAC,SAAS,CAAC,UAAQ;IAEnB,OAAO,CAAC,QAAQ,CAAC,yBAAyB,CAAM;IAChD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAqD;IAE5E;;;OAGG;IACH,GAAG,CAAC,GAAG,EAAE,gBAAgB,GAAG,aAAa,GAAG,SAAS;IAIrD;;;;OAIG;IACH,GAAG,CAAC,GAAG,EAAE,gBAAgB,EAAE,KAAK,EAAE,aAAa,GAAG,aAAa,GAAG,SAAS;IAS3E;;;OAGG;IACH,GAAG,CAAC,GAAG,EAAE,gBAAgB,GAAG,OAAO;IAInC;;;OAGG;IACH,MAAM,CAAC,GAAG,EAAE,gBAAgB,GAAG,OAAO;IAiBtC,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,oBAAoB;CAG7B;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,eAAe,kDAAoD,CAAC;AAUjF,wBAAgB,iBAAiB,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,gBAAgB,CAmBpE;AAGD,wBAAgB,oBAAoB,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,gBAAgB,CAOvE;AAGD,wBAAgB,2BAA2B,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAKvF"}

package/dist/runtime/{template-variables.js → variables.js}

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -10,28 +10,20 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
 import { createContext, useContext, useMemo } from 'react';
 import { immerable } from 'immer';
-import { parseTemplateVariables, replaceTemplateVariables } from '../utils';
+import { parseVariables, replaceVariables } from '../utils';
 import { useBuiltinVariableValues } from './builtin-variables';
-let _immerable = immerable;
 /**
  * A state map with two entry keys, materialized by {@link VariableStateKey} structure.
  */ export class VariableStoreStateMap {
     /**
+   * "Immerable" is mandatory to be able to use this class in an immer context.
+   * Ref: https://docs.pmnd.rs/zustand/integrations/immer-middleware#gotchas
+   */ [immerable] = true;
+    DEFAULT_LOCAL_SOURCE_NAME = '';
+    _state = {};
+    /**
    * Get variable state by key.
    * @param key
    */ get(key) {
@@ -59,7 +51,6 @@ let _immerable = immerable;
    * Delete variable state by key.
    * @param key
    */ delete(key) {
-        var _Object_keys;
         const result = this.has(key);
         const sourceName = this._sourceName(key.source);
         const sourceStates = this._state[sourceName];
@@ -68,40 +59,31 @@ let _immerable = immerable;
             delete sourceStates[key.name];
         }
         // Delete source state from state if empty
-        if (((_Object_keys = Object.keys(sourceStates !== null && sourceStates !== void 0 ? sourceStates : {})) === null || _Object_keys === void 0 ? void 0 : _Object_keys.length) === 0) {
+        if (Object.keys(sourceStates ?? {})?.length === 0) {
             delete this._state[sourceName];
         }
         return result;
     }
     _sourceName(source) {
-        return source !== null && source !== void 0 ? source : this.DEFAULT_LOCAL_SOURCE_NAME;
+        return source ?? this.DEFAULT_LOCAL_SOURCE_NAME;
     }
     _sourceStatesOrEmpty(source) {
-        var _this__state_this__sourceName;
-        return (_this__state_this__sourceName = this._state[this._sourceName(source)]) !== null && _this__state_this__sourceName !== void 0 ? _this__state_this__sourceName : {};
-    }
-    constructor(){
-        /**
-   * "Immerable" is mandatory to be able to use this class in an immer context.
-   * Ref: https://docs.pmnd.rs/zustand/integrations/immer-middleware#gotchas
-   */ _define_property(this, _immerable, true);
-        _define_property(this, "DEFAULT_LOCAL_SOURCE_NAME", '');
-        _define_property(this, "_state", {});
+        return this._state[this._sourceName(source)] ?? {};
     }
 }
-export const TemplateVariableContext = createContext(undefined);
-function useTemplateVariableContext() {
-    const ctx = useContext(TemplateVariableContext);
+export const VariableContext = createContext(undefined);
+function useVariableContext() {
+    const ctx = useContext(VariableContext);
     if (ctx === undefined) {
-        throw new Error('No TemplateVariableContext found. Did you forget a Provider?');
+        throw new Error('No VariableContext found. Did you forget a Provider?');
     }
     return ctx;
 }
-export function useTemplateVariableValues(names) {
-    const { state  } = useTemplateVariableContext();
+export function useVariableValues(names) {
+    const { state } = useVariableContext();
     const values = useMemo(()=>{
         const values = {};
-        names === null || names === void 0 ? void 0 : names.forEach((name)=>{
+        names?.forEach((name)=>{
             const s = state[name];
             if (s) {
                 values[name] = s;
@@ -117,17 +99,26 @@ export function useTemplateVariableValues(names) {
     }
     return values;
 }
-export function useVariableValues(names) {
-    const templateVariableValues = useTemplateVariableValues(names);
+// useAllVariableValues wraps user-defined variables with built-in variables
+export function useAllVariableValues(names) {
+    const variableValues = useVariableValues(names);
     const builtinVariableValues = useBuiltinVariableValues(names);
-    return Object.assign(templateVariableValues, builtinVariableValues);
+    return useMemo(()=>{
+        return {
+            ...variableValues,
+            ...builtinVariableValues
+        };
+    }, [
+        variableValues,
+        builtinVariableValues
+    ]);
 }
-// Convenience hook for replacing template variables in a string
+// Convenience hook for replacing variables in a string
 export function useReplaceVariablesInString(str) {
-    const variablesInString = str ? parseTemplateVariables(str) : [];
-    const variableValues = useVariableValues(variablesInString);
+    const variablesInString = str ? parseVariables(str) : [];
+    const variableValues = useAllVariableValues(variablesInString);
     if (!str) return undefined;
-    return replaceTemplateVariables(str, variableValues);
+    return replaceVariables(str, variableValues);
 }
 
-//# sourceMappingURL=template-variables.js.map
+//# sourceMappingURL=variables.js.map

package/dist/runtime/variables.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/runtime/variables.ts"],"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 { createContext, useContext, useMemo } from 'react';\nimport { VariableValue } from '@perses-dev/core';\nimport { immerable } from 'immer';\nimport { VariableOption } from '../model';\nimport { parseVariables, replaceVariables } from '../utils';\nimport { useBuiltinVariableValues } from './builtin-variables';\n\nexport type VariableState = {\n  value: VariableValue;\n  options?: VariableOption[];\n  loading: boolean;\n  error?: Error;\n  /**\n   * If a local variable is overriding an external variable, local var will have the flag ``overriding=true``.\n   */\n  overriding?: boolean;\n  /**\n   * If a local variable is overriding an external variable, external var will have the flag ``overridden=true``.\n   */\n  overridden?: boolean;\n  defaultValue?: VariableValue;\n};\n\nexport type VariableStateMap = Record<string, VariableState>;\n\n/**\n * Structure used as key in the {@link VariableStoreStateMap}.\n */\nexport type VariableStateKey = {\n  /**\n   * name of the variable we want to access in the state.\n   */\n  name: string;\n  /**\n   * source of the variable we want to access in the state.\n   * Defined only for external variables.\n   */\n  source?: string;\n};\n\n/**\n * A state map with two entry keys, materialized by {@link VariableStateKey} structure.\n */\nexport class VariableStoreStateMap {\n  /**\n   * \"Immerable\" is mandatory to be able to use this class in an immer context.\n   * Ref: https://docs.pmnd.rs/zustand/integrations/immer-middleware#gotchas\n   */\n  [immerable] = true;\n\n  private readonly DEFAULT_LOCAL_SOURCE_NAME = '';\n  private readonly _state: Record<string, Record<string, VariableState>> = {};\n\n  /**\n   * Get variable state by key.\n   * @param key\n   */\n  get(key: VariableStateKey): VariableState | undefined {\n    return this._sourceStatesOrEmpty(key.source)[key.name];\n  }\n\n  /**\n   * Set variable state by key.\n   * @param key\n   * @param value\n   */\n  set(key: VariableStateKey, value: VariableState): VariableState | undefined {\n    const sourceName = this._sourceName(key.source);\n    if (!this._state[sourceName]) {\n      this._state[sourceName] = {};\n    }\n    this._sourceStatesOrEmpty(key.source)[key.name] = value;\n    return value;\n  }\n\n  /**\n   * Check presence of variable state by key.\n   * @param key\n   */\n  has(key: VariableStateKey): boolean {\n    return this._sourceStatesOrEmpty(key.source)[key.name] !== undefined;\n  }\n\n  /**\n   * Delete variable state by key.\n   * @param key\n   */\n  delete(key: VariableStateKey): boolean {\n    const result = this.has(key);\n    const sourceName = this._sourceName(key.source);\n    const sourceStates = this._state[sourceName];\n\n    // Delete var from source state\n    if (sourceStates) {\n      delete sourceStates[key.name];\n    }\n\n    // Delete source state from state if empty\n    if (Object.keys(sourceStates ?? {})?.length === 0) {\n      delete this._state[sourceName];\n    }\n    return result;\n  }\n\n  private _sourceName(source: string | undefined): string {\n    return source ?? this.DEFAULT_LOCAL_SOURCE_NAME;\n  }\n\n  private _sourceStatesOrEmpty(source: string | undefined): Record<string, VariableState> {\n    return this._state[this._sourceName(source)] ?? {};\n  }\n}\n\nexport type VariableSrv = {\n  state: VariableStateMap;\n};\n\nexport const VariableContext = createContext<VariableSrv | undefined>(undefined);\n\nfunction useVariableContext(): VariableSrv {\n  const ctx = useContext(VariableContext);\n  if (ctx === undefined) {\n    throw new Error('No VariableContext found. Did you forget a Provider?');\n  }\n  return ctx;\n}\n\nexport function useVariableValues(names?: string[]): VariableStateMap {\n  const { state } = useVariableContext();\n\n  const values = useMemo(() => {\n    const values: VariableStateMap = {};\n    names?.forEach((name) => {\n      const s = state[name];\n      if (s) {\n        values[name] = s;\n      }\n    });\n    return values;\n  }, [state, names]);\n\n  if (names === undefined) {\n    return state;\n  }\n\n  return values;\n}\n\n// useAllVariableValues wraps user-defined variables with built-in variables\nexport function useAllVariableValues(names?: string[]): VariableStateMap {\n  const variableValues = useVariableValues(names);\n  const builtinVariableValues = useBuiltinVariableValues(names);\n\n  return useMemo(() => {\n    return { ...variableValues, ...builtinVariableValues } as VariableStateMap;\n  }, [variableValues, builtinVariableValues]);\n}\n\n// Convenience hook for replacing variables in a string\nexport function useReplaceVariablesInString(str: string | undefined): string | undefined {\n  const variablesInString = str ? parseVariables(str) : [];\n  const variableValues = useAllVariableValues(variablesInString);\n  if (!str) return undefined;\n  return replaceVariables(str, variableValues);\n}\n"],"names":["createContext","useContext","useMemo","immerable","parseVariables","replaceVariables","useBuiltinVariableValues","VariableStoreStateMap","DEFAULT_LOCAL_SOURCE_NAME","_state","get","key","_sourceStatesOrEmpty","source","name","set","value","sourceName","_sourceName","has","undefined","delete","result","sourceStates","Object","keys","length","VariableContext","useVariableContext","ctx","Error","useVariableValues","names","state","values","forEach","s","useAllVariableValues","variableValues","builtinVariableValues","useReplaceVariablesInString","str","variablesInString"],"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,aAAa,EAAEC,UAAU,EAAEC,OAAO,QAAQ,QAAQ;AAE3D,SAASC,SAAS,QAAQ,QAAQ;AAElC,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,WAAW;AAC5D,SAASC,wBAAwB,QAAQ,sBAAsB;AAmC/D;;CAEC,GACD,OAAO,MAAMC;IACX;;;GAGC,GACD,CAACJ,UAAU,GAAG,KAAK;IAEFK,4BAA4B,GAAG;IAC/BC,SAAwD,CAAC,EAAE;IAE5E;;;GAGC,GACDC,IAAIC,GAAqB,EAA6B;QACpD,OAAO,IAAI,CAACC,oBAAoB,CAACD,IAAIE,MAAM,CAAC,CAACF,IAAIG,IAAI,CAAC;IACxD;IAEA;;;;GAIC,GACDC,IAAIJ,GAAqB,EAAEK,KAAoB,EAA6B;QAC1E,MAAMC,aAAa,IAAI,CAACC,WAAW,CAACP,IAAIE,MAAM;QAC9C,IAAI,CAAC,IAAI,CAACJ,MAAM,CAACQ,WAAW,EAAE;YAC5B,IAAI,CAACR,MAAM,CAACQ,WAAW,GAAG,CAAC;QAC7B;QACA,IAAI,CAACL,oBAAoB,CAACD,IAAIE,MAAM,CAAC,CAACF,IAAIG,IAAI,CAAC,GAAGE;QAClD,OAAOA;IACT;IAEA;;;GAGC,GACDG,IAAIR,GAAqB,EAAW;QAClC,OAAO,IAAI,CAACC,oBAAoB,CAACD,IAAIE,MAAM,CAAC,CAACF,IAAIG,IAAI,CAAC,KAAKM;IAC7D;IAEA;;;GAGC,GACDC,OAAOV,GAAqB,EAAW;QACrC,MAAMW,SAAS,IAAI,CAACH,GAAG,CAACR;QACxB,MAAMM,aAAa,IAAI,CAACC,WAAW,CAACP,IAAIE,MAAM;QAC9C,MAAMU,eAAe,IAAI,CAACd,MAAM,CAACQ,WAAW;QAE5C,+BAA+B;QAC/B,IAAIM,cAAc;YAChB,OAAOA,YAAY,CAACZ,IAAIG,IAAI,CAAC;QAC/B;QAEA,0CAA0C;QAC1C,IAAIU,OAAOC,IAAI,CAACF,gBAAgB,CAAC,IAAIG,WAAW,GAAG;YACjD,OAAO,IAAI,CAACjB,MAAM,CAACQ,WAAW;QAChC;QACA,OAAOK;IACT;IAEQJ,YAAYL,MAA0B,EAAU;QACtD,OAAOA,UAAU,IAAI,CAACL,yBAAyB;IACjD;IAEQI,qBAAqBC,MAA0B,EAAiC;QACtF,OAAO,IAAI,CAACJ,MAAM,CAAC,IAAI,CAACS,WAAW,CAACL,QAAQ,IAAI,CAAC;IACnD;AACF;AAMA,OAAO,MAAMc,kBAAkB3B,cAAuCoB,WAAW;AAEjF,SAASQ;IACP,MAAMC,MAAM5B,WAAW0B;IACvB,IAAIE,QAAQT,WAAW;QACrB,MAAM,IAAIU,MAAM;IAClB;IACA,OAAOD;AACT;AAEA,OAAO,SAASE,kBAAkBC,KAAgB;IAChD,MAAM,EAAEC,KAAK,EAAE,GAAGL;IAElB,MAAMM,SAAShC,QAAQ;QACrB,MAAMgC,SAA2B,CAAC;QAClCF,OAAOG,QAAQ,CAACrB;YACd,MAAMsB,IAAIH,KAAK,CAACnB,KAAK;YACrB,IAAIsB,GAAG;gBACLF,MAAM,CAACpB,KAAK,GAAGsB;YACjB;QACF;QACA,OAAOF;IACT,GAAG;QAACD;QAAOD;KAAM;IAEjB,IAAIA,UAAUZ,WAAW;QACvB,OAAOa;IACT;IAEA,OAAOC;AACT;AAEA,4EAA4E;AAC5E,OAAO,SAASG,qBAAqBL,KAAgB;IACnD,MAAMM,iBAAiBP,kBAAkBC;IACzC,MAAMO,wBAAwBjC,yBAAyB0B;IAEvD,OAAO9B,QAAQ;QACb,OAAO;YAAE,GAAGoC,cAAc;YAAE,GAAGC,qBAAqB;QAAC;IACvD,GAAG;QAACD;QAAgBC;KAAsB;AAC5C;AAEA,uDAAuD;AACvD,OAAO,SAASC,4BAA4BC,GAAuB;IACjE,MAAMC,oBAAoBD,MAAMrC,eAAeqC,OAAO,EAAE;IACxD,MAAMH,iBAAiBD,qBAAqBK;IAC5C,IAAI,CAACD,KAAK,OAAOrB;IACjB,OAAOf,iBAAiBoC,KAAKH;AAC/B"}

package/dist/stories/shared-utils/decorators/WithDataQueries.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
 import { DataQueriesProviderProps } from '@perses-dev/plugin-system';
 import { StoryFn, StoryContext } from '@storybook/react';
+import { ReactElement } from 'react';
 declare module '@storybook/react' {
     interface Parameters {
         withDataQueries?: WithDataQueriesProvideParameter;
     }
 }
-export declare type WithDataQueriesProvideParameter = {
+export type WithDataQueriesProvideParameter = {
     props: DataQueriesProviderProps;
 };
-export declare const WithDataQueries: (Story: StoryFn, context: StoryContext<unknown>) => JSX.Element;
+export declare const WithDataQueries: (Story: StoryFn, context: StoryContext<unknown>) => ReactElement;
 //# sourceMappingURL=WithDataQueries.d.ts.map

package/dist/stories/shared-utils/decorators/WithDataQueries.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WithDataQueries.d.ts","sourceRoot":"","sources":["../../../../src/stories/shared-utils/decorators/WithDataQueries.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAuB,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAC1F,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,QAAQ,kBAAkB,CAAC;IAChC,UAAU,UAAU;QAClB,eAAe,CAAC,EAAE,+BAA+B,CAAC;KACnD;CACF;AAED,oBAAY,+BAA+B,GAAG;IAC5C,KAAK,EAAE,wBAAwB,CAAC;CACjC,CAAC;AASF,eAAO,MAAM,eAAe,UAAW,OAAO,WAAW,aAAa,OAAO,CAAC,gBAY7E,CAAC"}
+{"version":3,"file":"WithDataQueries.d.ts","sourceRoot":"","sources":["../../../../src/stories/shared-utils/decorators/WithDataQueries.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAuB,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAC1F,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,QAAQ,kBAAkB,CAAC;IAChC,UAAU,UAAU;QAClB,eAAe,CAAC,EAAE,+BAA+B,CAAC;KACnD;CACF;AAED,MAAM,MAAM,+BAA+B,GAAG;IAC5C,KAAK,EAAE,wBAAwB,CAAC;CACjC,CAAC;AASF,eAAO,MAAM,eAAe,UAAW,OAAO,WAAW,aAAa,OAAO,CAAC,KAAG,YAYhF,CAAC"}

package/dist/stories/shared-utils/decorators/WithDataQueries.js

@@ -23,7 +23,7 @@ export const WithDataQueries = (Story, context)=>{
             definitions: []
         }
     };
-    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
+    const props = parameter?.props;
     return /*#__PURE__*/ _jsx(DataQueriesProvider, {
         ...props,
         children: /*#__PURE__*/ _jsx(Story, {})

package/dist/stories/shared-utils/decorators/WithDataQueries.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/stories/shared-utils/decorators/WithDataQueries.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 { Definition, UnknownSpec } from '@perses-dev/core';\nimport { DataQueriesProvider, DataQueriesProviderProps } from '@perses-dev/plugin-system';\nimport { StoryFn, StoryContext } from '@storybook/react';\n\ndeclare module '@storybook/react' {\n  interface Parameters {\n    withDataQueries?: WithDataQueriesProvideParameter;\n  }\n}\n\nexport type WithDataQueriesProvideParameter = {\n  props: DataQueriesProviderProps;\n};\n\n// Type guard because storybook types parameters as `any`\nfunction isWithDataQueriesParameter(\n  parameter: unknown | WithDataQueriesProvideParameter\n): parameter is WithDataQueriesProvideParameter {\n  return !!parameter && typeof parameter === 'object' && 'props' in parameter;\n}\n\nexport const WithDataQueries = (Story: StoryFn, context: StoryContext<unknown>) => {\n  const initParameter = context.parameters.withDataQueries;\n  const parameter = isWithDataQueriesParameter(initParameter)\n    ? initParameter\n    : { props: { definitions: [] as Array<Definition<UnknownSpec>> } };\n  const props = parameter?.props;\n\n  return (\n    <DataQueriesProvider {...props}>\n      <Story />\n    </DataQueriesProvider>\n  );\n};\n"],"names":["DataQueriesProvider","isWithDataQueriesParameter","parameter","WithDataQueries","Story","context","initParameter","parameters","withDataQueries","props","definitions"],"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;;AAGjC,SAASA,mBAAmB,QAAkC,4BAA4B;AAa1F,yDAAyD;AACzD,SAASC,2BACPC,SAAoD;IAEpD,OAAO,CAAC,CAACA,aAAa,OAAOA,cAAc,YAAY,WAAWA;AACpE;AAEA,OAAO,MAAMC,kBAAkB,CAACC,OAAgBC;IAC9C,MAAMC,gBAAgBD,QAAQE,WAAWC;IACzC,MAAMN,YAAYD,2BAA2BK,iBACzCA,gBACA;QAAEG,OAAO;YAAEC,aAAa,EAAE;QAAmC;IAAE;IACnE,MAAMD,QAAQP,sBAAAA,uBAAAA,KAAAA,IAAAA,UAAWO;IAEzB,qBACE,KAACT;QAAqB,GAAGS,KAAK;kBAC5B,cAAA,KAACL;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/stories/shared-utils/decorators/WithDataQueries.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 { Definition, UnknownSpec } from '@perses-dev/core';\nimport { DataQueriesProvider, DataQueriesProviderProps } from '@perses-dev/plugin-system';\nimport { StoryFn, StoryContext } from '@storybook/react';\nimport { ReactElement } from 'react';\n\ndeclare module '@storybook/react' {\n  interface Parameters {\n    withDataQueries?: WithDataQueriesProvideParameter;\n  }\n}\n\nexport type WithDataQueriesProvideParameter = {\n  props: DataQueriesProviderProps;\n};\n\n// Type guard because storybook types parameters as `any`\nfunction isWithDataQueriesParameter(\n  parameter: unknown | WithDataQueriesProvideParameter\n): parameter is WithDataQueriesProvideParameter {\n  return !!parameter && typeof parameter === 'object' && 'props' in parameter;\n}\n\nexport const WithDataQueries = (Story: StoryFn, context: StoryContext<unknown>): ReactElement => {\n  const initParameter = context.parameters.withDataQueries;\n  const parameter = isWithDataQueriesParameter(initParameter)\n    ? initParameter\n    : { props: { definitions: [] as Array<Definition<UnknownSpec>> } };\n  const props = parameter?.props;\n\n  return (\n    <DataQueriesProvider {...props}>\n      <Story />\n    </DataQueriesProvider>\n  );\n};\n"],"names":["DataQueriesProvider","isWithDataQueriesParameter","parameter","WithDataQueries","Story","context","initParameter","parameters","withDataQueries","props","definitions"],"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;;AAGjC,SAASA,mBAAmB,QAAkC,4BAA4B;AAc1F,yDAAyD;AACzD,SAASC,2BACPC,SAAoD;IAEpD,OAAO,CAAC,CAACA,aAAa,OAAOA,cAAc,YAAY,WAAWA;AACpE;AAEA,OAAO,MAAMC,kBAAkB,CAACC,OAAgBC;IAC9C,MAAMC,gBAAgBD,QAAQE,UAAU,CAACC,eAAe;IACxD,MAAMN,YAAYD,2BAA2BK,iBACzCA,gBACA;QAAEG,OAAO;YAAEC,aAAa,EAAE;QAAmC;IAAE;IACnE,MAAMD,QAAQP,WAAWO;IAEzB,qBACE,KAACT;QAAqB,GAAGS,KAAK;kBAC5B,cAAA,KAACL;;AAGP,EAAE"}

package/dist/stories/shared-utils/decorators/WithPluginRegistry.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
 import { StoryFn } from '@storybook/react';
-export declare const WithPluginRegistry: (Story: StoryFn) => JSX.Element;
+import { ReactElement } from 'react';
+export declare const WithPluginRegistry: (Story: StoryFn) => ReactElement;
 //# sourceMappingURL=WithPluginRegistry.d.ts.map

package/dist/stories/shared-utils/decorators/WithPluginRegistry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WithPluginRegistry.d.ts","sourceRoot":"","sources":["../../../../src/stories/shared-utils/decorators/WithPluginRegistry.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AA8B3C,eAAO,MAAM,kBAAkB,UAAW,OAAO,gBAYhD,CAAC"}
+{"version":3,"file":"WithPluginRegistry.d.ts","sourceRoot":"","sources":["../../../../src/stories/shared-utils/decorators/WithPluginRegistry.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,eAAO,MAAM,kBAAkB,UAAW,OAAO,KAAG,YAYnD,CAAC"}

package/dist/stories/shared-utils/decorators/WithPluginRegistry.js

@@ -11,30 +11,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PluginRegistry, dynamicImportPluginLoader } from '@perses-dev/plugin-system';
-import prometheusResource from '@perses-dev/prometheus-plugin/plugin.json';
-import panelsResource from '@perses-dev/panels-plugin/plugin.json';
-const bundledPluginLoader = dynamicImportPluginLoader([
-    {
-        resource: prometheusResource,
-        // This throws an error in CI (but not locally for some reason), likely because
-        // this package isn't a dependency for dashboards. We probably do not want to
-        // make it one solely for type-checking in storybook.
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        importPlugin: ()=>import('@perses-dev/prometheus-plugin')
-    },
-    {
-        resource: panelsResource,
-        // Same comment as above.
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        importPlugin: ()=>import('@perses-dev/panels-plugin')
-    }
-]);
+import { PluginRegistry, remotePluginLoader } from '@perses-dev/plugin-system';
 export const WithPluginRegistry = (Story)=>{
     return /*#__PURE__*/ _jsx(PluginRegistry, {
-        pluginLoader: bundledPluginLoader,
+        pluginLoader: remotePluginLoader(),
         defaultPluginKinds: {
             TimeSeriesQuery: 'PrometheusTimeSeriesQuery',
             TraceQuery: 'TempoTraceQuery'

package/dist/stories/shared-utils/decorators/WithPluginRegistry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/stories/shared-utils/decorators/WithPluginRegistry.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 { StoryFn } from '@storybook/react';\nimport {\n  PluginRegistry,\n  PluginLoader,\n  PluginModuleResource,\n  dynamicImportPluginLoader,\n} from '@perses-dev/plugin-system';\n\nimport prometheusResource from '@perses-dev/prometheus-plugin/plugin.json';\nimport panelsResource from '@perses-dev/panels-plugin/plugin.json';\n\nconst bundledPluginLoader: PluginLoader = dynamicImportPluginLoader([\n  {\n    resource: prometheusResource as PluginModuleResource,\n    // This throws an error in CI (but not locally for some reason), likely because\n    // this package isn't a dependency for dashboards. We probably do not want to\n    // make it one solely for type-checking in storybook.\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    importPlugin: () => import('@perses-dev/prometheus-plugin'),\n  },\n  {\n    resource: panelsResource as PluginModuleResource,\n    // Same comment as above.\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    importPlugin: () => import('@perses-dev/panels-plugin'),\n  },\n]);\n\nexport const WithPluginRegistry = (Story: StoryFn) => {\n  return (\n    <PluginRegistry\n      pluginLoader={bundledPluginLoader}\n      defaultPluginKinds={{\n        TimeSeriesQuery: 'PrometheusTimeSeriesQuery',\n        TraceQuery: 'TempoTraceQuery',\n      }}\n    >\n      <Story />\n    </PluginRegistry>\n  );\n};\n"],"names":["PluginRegistry","dynamicImportPluginLoader","prometheusResource","panelsResource","bundledPluginLoader","resource","importPlugin","WithPluginRegistry","Story","pluginLoader","defaultPluginKinds","TimeSeriesQuery","TraceQuery"],"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;;AAGjC,SACEA,cAAc,EAGdC,yBAAyB,QACpB,4BAA4B;AAEnC,OAAOC,wBAAwB,4CAA4C;AAC3E,OAAOC,oBAAoB,wCAAwC;AAEnE,MAAMC,sBAAoCH,0BAA0B;IAClE;QACEI,UAAUH;QACV,+EAA+E;QAC/E,6EAA6E;QAC7E,qDAAqD;QACrD,6DAA6D;QAC7D,aAAa;QACbI,cAAc,IAAM,MAAM,CAAC;IAC7B;IACA;QACED,UAAUF;QACV,yBAAyB;QACzB,6DAA6D;QAC7D,aAAa;QACbG,cAAc,IAAM,MAAM,CAAC;IAC7B;CACD;AAED,OAAO,MAAMC,qBAAqB,CAACC;IACjC,qBACE,KAACR;QACCS,cAAcL;QACdM,oBAAoB;YAClBC,iBAAiB;YACjBC,YAAY;QACd;kBAEA,cAAA,KAACJ;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/stories/shared-utils/decorators/WithPluginRegistry.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 { PluginRegistry, remotePluginLoader } from '@perses-dev/plugin-system';\nimport { StoryFn } from '@storybook/react';\n\nimport { ReactElement } from 'react';\n\nexport const WithPluginRegistry = (Story: StoryFn): ReactElement => {\n  return (\n    <PluginRegistry\n      pluginLoader={remotePluginLoader()}\n      defaultPluginKinds={{\n        TimeSeriesQuery: 'PrometheusTimeSeriesQuery',\n        TraceQuery: 'TempoTraceQuery',\n      }}\n    >\n      <Story />\n    </PluginRegistry>\n  );\n};\n"],"names":["PluginRegistry","remotePluginLoader","WithPluginRegistry","Story","pluginLoader","defaultPluginKinds","TimeSeriesQuery","TraceQuery"],"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,cAAc,EAAEC,kBAAkB,QAAQ,4BAA4B;AAK/E,OAAO,MAAMC,qBAAqB,CAACC;IACjC,qBACE,KAACH;QACCI,cAAcH;QACdI,oBAAoB;YAClBC,iBAAiB;YACjBC,YAAY;QACd;kBAEA,cAAA,KAACJ;;AAGP,EAAE"}

package/dist/stories/shared-utils/decorators/WithPluginSystemBuiltinVariables.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
 import { StoryFn, StoryContext } from '@storybook/react';
+import { ReactElement } from 'react';
 import { BuiltinVariableSrv } from '../../../runtime';
 declare module '@storybook/react' {
     interface Parameters {
         withPluginSystemBuiltinVariables?: WithPluginSystemBuiltinVariableParameter;
     }
 }
-export declare type WithPluginSystemBuiltinVariableParameter = {
+export type WithPluginSystemBuiltinVariableParameter = {
     props: BuiltinVariableSrv;
 };
-export declare const WithPluginSystemBuiltinVariables: (Story: StoryFn, context: StoryContext<unknown>) => JSX.Element;
+export declare const WithPluginSystemBuiltinVariables: (Story: StoryFn, context: StoryContext<unknown>) => ReactElement;
 //# sourceMappingURL=WithPluginSystemBuiltinVariables.d.ts.map

package/dist/stories/shared-utils/decorators/WithPluginSystemBuiltinVariables.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WithPluginSystemBuiltinVariables.d.ts","sourceRoot":"","sources":["../../../../src/stories/shared-utils/decorators/WithPluginSystemBuiltinVariables.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAA0B,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE9E,OAAO,QAAQ,kBAAkB,CAAC;IAChC,UAAU,UAAU;QAClB,gCAAgC,CAAC,EAAE,wCAAwC,CAAC;KAC7E;CACF;AAED,oBAAY,wCAAwC,GAAG;IACrD,KAAK,EAAE,kBAAkB,CAAC;CAC3B,CAAC;AAcF,eAAO,MAAM,gCAAgC,UAAW,OAAO,WAAW,aAAa,OAAO,CAAC,gBAc9F,CAAC"}
+{"version":3,"file":"WithPluginSystemBuiltinVariables.d.ts","sourceRoot":"","sources":["../../../../src/stories/shared-utils/decorators/WithPluginSystemBuiltinVariables.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAA0B,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE9E,OAAO,QAAQ,kBAAkB,CAAC;IAChC,UAAU,UAAU;QAClB,gCAAgC,CAAC,EAAE,wCAAwC,CAAC;KAC7E;CACF;AAED,MAAM,MAAM,wCAAwC,GAAG;IACrD,KAAK,EAAE,kBAAkB,CAAC;CAC3B,CAAC;AAcF,eAAO,MAAM,gCAAgC,UAAW,OAAO,WAAW,aAAa,OAAO,CAAC,KAAG,YAcjG,CAAC"}

package/dist/stories/shared-utils/decorators/WithPluginSystemBuiltinVariables.js

@@ -29,7 +29,7 @@ export const WithPluginSystemBuiltinVariables = (Story, context)=>{
     const parameter = isWithBuiltinVariableParameter(initParameter) ? initParameter : {
         props: defaultValue
     };
-    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
+    const props = parameter?.props;
     return /*#__PURE__*/ _jsx(BuiltinVariableContext.Provider, {
         value: props,
         children: /*#__PURE__*/ _jsx(Story, {})

package/dist/stories/shared-utils/decorators/WithPluginSystemBuiltinVariables.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/stories/shared-utils/decorators/WithPluginSystemBuiltinVariables.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 { StoryFn, StoryContext } from '@storybook/react';\nimport { BuiltinVariableContext, BuiltinVariableSrv } from '../../../runtime';\n\ndeclare module '@storybook/react' {\n  interface Parameters {\n    withPluginSystemBuiltinVariables?: WithPluginSystemBuiltinVariableParameter;\n  }\n}\n\nexport type WithPluginSystemBuiltinVariableParameter = {\n  props: BuiltinVariableSrv;\n};\n\n// Type guard because storybook types parameters as `any`\nfunction isWithBuiltinVariableParameter(\n  parameter: unknown | WithPluginSystemBuiltinVariableParameter\n): parameter is WithPluginSystemBuiltinVariableParameter {\n  return !!parameter && Array.isArray(parameter);\n}\n\n// This decorator is used for non-dashboards package Builtin variable needs.\n// Use the more specific decorator in the dashboards package when working with\n// dashboards.\n// This decorator includes \"PluginSystem\" in the name to differentiate it from\n// the datasource store decorator in the `dashboards` package.\nexport const WithPluginSystemBuiltinVariables = (Story: StoryFn, context: StoryContext<unknown>) => {\n  const initParameter = context.parameters.withPluginSystemBuiltinVariables;\n  const defaultValue: BuiltinVariableSrv = {\n    variables: [],\n  };\n  const parameter = isWithBuiltinVariableParameter(initParameter) ? initParameter : { props: defaultValue };\n\n  const props = parameter?.props;\n\n  return (\n    <BuiltinVariableContext.Provider value={props}>\n      <Story />\n    </BuiltinVariableContext.Provider>\n  );\n};\n"],"names":["BuiltinVariableContext","isWithBuiltinVariableParameter","parameter","Array","isArray","WithPluginSystemBuiltinVariables","Story","context","initParameter","parameters","withPluginSystemBuiltinVariables","defaultValue","variables","props","Provider","value"],"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;;AAGjC,SAASA,sBAAsB,QAA4B,mBAAmB;AAY9E,yDAAyD;AACzD,SAASC,+BACPC,SAA6D;IAE7D,OAAO,CAAC,CAACA,aAAaC,MAAMC,QAAQF;AACtC;AAEA,4EAA4E;AAC5E,8EAA8E;AAC9E,cAAc;AACd,8EAA8E;AAC9E,8DAA8D;AAC9D,OAAO,MAAMG,mCAAmC,CAACC,OAAgBC;IAC/D,MAAMC,gBAAgBD,QAAQE,WAAWC;IACzC,MAAMC,eAAmC;QACvCC,WAAW,EAAE;IACf;IACA,MAAMV,YAAYD,+BAA+BO,iBAAiBA,gBAAgB;QAAEK,OAAOF;IAAa;IAExG,MAAME,QAAQX,sBAAAA,uBAAAA,KAAAA,IAAAA,UAAWW;IAEzB,qBACE,KAACb,uBAAuBc;QAASC,OAAOF;kBACtC,cAAA,KAACP;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/stories/shared-utils/decorators/WithPluginSystemBuiltinVariables.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 { StoryFn, StoryContext } from '@storybook/react';\nimport { ReactElement } from 'react';\nimport { BuiltinVariableContext, BuiltinVariableSrv } from '../../../runtime';\n\ndeclare module '@storybook/react' {\n  interface Parameters {\n    withPluginSystemBuiltinVariables?: WithPluginSystemBuiltinVariableParameter;\n  }\n}\n\nexport type WithPluginSystemBuiltinVariableParameter = {\n  props: BuiltinVariableSrv;\n};\n\n// Type guard because storybook types parameters as `any`\nfunction isWithBuiltinVariableParameter(\n  parameter: unknown | WithPluginSystemBuiltinVariableParameter\n): parameter is WithPluginSystemBuiltinVariableParameter {\n  return !!parameter && Array.isArray(parameter);\n}\n\n// This decorator is used for non-dashboards package Builtin variable needs.\n// Use the more specific decorator in the dashboards package when working with\n// dashboards.\n// This decorator includes \"PluginSystem\" in the name to differentiate it from\n// the datasource store decorator in the `dashboards` package.\nexport const WithPluginSystemBuiltinVariables = (Story: StoryFn, context: StoryContext<unknown>): ReactElement => {\n  const initParameter = context.parameters.withPluginSystemBuiltinVariables;\n  const defaultValue: BuiltinVariableSrv = {\n    variables: [],\n  };\n  const parameter = isWithBuiltinVariableParameter(initParameter) ? initParameter : { props: defaultValue };\n\n  const props = parameter?.props;\n\n  return (\n    <BuiltinVariableContext.Provider value={props}>\n      <Story />\n    </BuiltinVariableContext.Provider>\n  );\n};\n"],"names":["BuiltinVariableContext","isWithBuiltinVariableParameter","parameter","Array","isArray","WithPluginSystemBuiltinVariables","Story","context","initParameter","parameters","withPluginSystemBuiltinVariables","defaultValue","variables","props","Provider","value"],"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;;AAIjC,SAASA,sBAAsB,QAA4B,mBAAmB;AAY9E,yDAAyD;AACzD,SAASC,+BACPC,SAA6D;IAE7D,OAAO,CAAC,CAACA,aAAaC,MAAMC,OAAO,CAACF;AACtC;AAEA,4EAA4E;AAC5E,8EAA8E;AAC9E,cAAc;AACd,8EAA8E;AAC9E,8DAA8D;AAC9D,OAAO,MAAMG,mCAAmC,CAACC,OAAgBC;IAC/D,MAAMC,gBAAgBD,QAAQE,UAAU,CAACC,gCAAgC;IACzE,MAAMC,eAAmC;QACvCC,WAAW,EAAE;IACf;IACA,MAAMV,YAAYD,+BAA+BO,iBAAiBA,gBAAgB;QAAEK,OAAOF;IAAa;IAExG,MAAME,QAAQX,WAAWW;IAEzB,qBACE,KAACb,uBAAuBc,QAAQ;QAACC,OAAOF;kBACtC,cAAA,KAACP;;AAGP,EAAE"}

package/dist/stories/shared-utils/decorators/WithPluginSystemDatasourceStore.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
 import { DatasourceStore } from '@perses-dev/plugin-system';
 import { StoryFn, StoryContext } from '@storybook/react';
+import { ReactElement } from 'react';
 declare module '@storybook/react' {
     interface Parameters {
         withPluginSystemDatasourceStore?: WithPluginSystemDatasourceStoreParameter;
     }
 }
-export declare type WithPluginSystemDatasourceStoreParameter = {
+export type WithPluginSystemDatasourceStoreParameter = {
     props: DatasourceStore;
 };
-export declare const WithPluginSystemDatasourceStore: (Story: StoryFn, context: StoryContext<unknown>) => JSX.Element;
+export declare const WithPluginSystemDatasourceStore: (Story: StoryFn, context: StoryContext<unknown>) => ReactElement;
 //# sourceMappingURL=WithPluginSystemDatasourceStore.d.ts.map

package/dist/stories/shared-utils/decorators/WithPluginSystemDatasourceStore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WithPluginSystemDatasourceStore.d.ts","sourceRoot":"","sources":["../../../../src/stories/shared-utils/decorators/WithPluginSystemDatasourceStore.tsx"],"names":[],"mappings":";AAcA,OAAO,EAEL,eAAe,EAGhB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,QAAQ,kBAAkB,CAAC;IAChC,UAAU,UAAU;QAClB,+BAA+B,CAAC,EAAE,wCAAwC,CAAC;KAC5E;CACF;AAED,oBAAY,wCAAwC,GAAG;IACrD,KAAK,EAAE,eAAe,CAAC;CACxB,CAAC;AAaF,eAAO,MAAM,+BAA+B,UAAW,OAAO,WAAW,aAAa,OAAO,CAAC,gBAoE7F,CAAC"}
+{"version":3,"file":"WithPluginSystemDatasourceStore.d.ts","sourceRoot":"","sources":["../../../../src/stories/shared-utils/decorators/WithPluginSystemDatasourceStore.tsx"],"names":[],"mappings":"AAcA,OAAO,EAEL,eAAe,EAGhB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,QAAQ,kBAAkB,CAAC;IAChC,UAAU,UAAU;QAClB,+BAA+B,CAAC,EAAE,wCAAwC,CAAC;KAC5E;CACF;AAED,MAAM,MAAM,wCAAwC,GAAG;IACrD,KAAK,EAAE,eAAe,CAAC;CACxB,CAAC;AAaF,eAAO,MAAM,+BAA+B,UAAW,OAAO,WAAW,aAAa,OAAO,CAAC,KAAG,YAoEhG,CAAC"}

package/dist/stories/shared-utils/decorators/WithPluginSystemDatasourceStore.js

@@ -20,7 +20,7 @@ function isWithDatastoreStoreParameter(parameter) {
 // This decorator includes "PluginSystem" in the name to differentiate it from
 // the datasource store decorator in the `dashboards` package.
 export const WithPluginSystemDatasourceStore = (Story, context)=>{
-    const { getPlugin  } = usePluginRegistry();
+    const { getPlugin } = usePluginRegistry();
     const initParameter = context.parameters.withPluginSystemDatasourceStore;
     // This currently provides a very simplified default to enable use in some
     // basic stories. It likely will need expanding in the future.
@@ -52,8 +52,8 @@ export const WithPluginSystemDatasourceStore = (Story, context)=>{
             }
             throw new Error(`WithDatasourceStore is not configured to support kind: ${selector.kind}`);
         },
-        listDatasourceSelectItems: async (datasourcePluginKind)=>{
-            if (datasourcePluginKind === 'PrometheusDatasource') {
+        listDatasourceSelectItems: async (datasourcePluginName)=>{
+            if (datasourcePluginName === 'PrometheusDatasource') {
                 return Promise.resolve([
                     {
                         items: [
@@ -67,7 +67,7 @@ export const WithPluginSystemDatasourceStore = (Story, context)=>{
                     }
                 ]);
             }
-            throw new Error(`WithDatasourceStore is not configured to support kind: ${datasourcePluginKind}`);
+            throw new Error(`WithDatasourceStore is not configured to support kind: ${datasourcePluginName}`);
         },
         getSavedDatasources: ()=>{
             return {};
@@ -85,7 +85,7 @@ export const WithPluginSystemDatasourceStore = (Story, context)=>{
     const parameter = isWithDatastoreStoreParameter(initParameter) ? initParameter : {
         props: defaultValue
     };
-    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
+    const props = parameter?.props;
     return /*#__PURE__*/ _jsx(DatasourceStoreContext.Provider, {
         value: props,
         children: /*#__PURE__*/ _jsx(Story, {})

package/dist/stories/shared-utils/decorators/WithPluginSystemDatasourceStore.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/stories/shared-utils/decorators/WithPluginSystemDatasourceStore.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 { DatasourceSelector, DatasourceSpec } from '@perses-dev/core';\nimport {\n  DatasourceStoreContext,\n  DatasourceStore,\n  usePluginRegistry,\n  DatasourceSelectItemGroup,\n} from '@perses-dev/plugin-system';\nimport { StoryFn, StoryContext } from '@storybook/react';\n\ndeclare module '@storybook/react' {\n  interface Parameters {\n    withPluginSystemDatasourceStore?: WithPluginSystemDatasourceStoreParameter;\n  }\n}\n\nexport type WithPluginSystemDatasourceStoreParameter = {\n  props: DatasourceStore;\n};\n\nconst prometheusDemoUrl = 'https://prometheus.demo.do.prometheus.io';\n\n// Type guard because storybook types parameters as `any`\nfunction isWithDatastoreStoreParameter(\n  parameter: unknown | WithPluginSystemDatasourceStoreParameter\n): parameter is WithPluginSystemDatasourceStoreParameter {\n  return !!parameter && typeof parameter === 'object' && 'props' in parameter;\n}\n\n// This decorator includes \"PluginSystem\" in the name to differentiate it from\n// the datasource store decorator in the `dashboards` package.\nexport const WithPluginSystemDatasourceStore = (Story: StoryFn, context: StoryContext<unknown>) => {\n  const { getPlugin } = usePluginRegistry();\n\n  const initParameter = context.parameters.withPluginSystemDatasourceStore;\n\n  // This currently provides a very simplified default to enable use in some\n  // basic stories. It likely will need expanding in the future.\n  // In general, `plugin-system` would probably benefit from a provider wrapper\n  // for `DatasourceStoreContext` that is more generic than the one available\n  // in the `dashboard` package for non-dashboard use cases.\n  const defaultValue: DatasourceStore = {\n    getDatasource: (selector) => {\n      if (selector.kind === 'PrometheusDatasource') {\n        return Promise.resolve({\n          default: true,\n          plugin: {\n            kind: 'PrometheusDatasource',\n            spec: {},\n          },\n        });\n      }\n      throw new Error(`WithDatasourceStore is not configured to support kind: ${selector.kind}`);\n    },\n    getDatasourceClient: async <Client,>(selector: DatasourceSelector) => {\n      if (selector.kind === 'PrometheusDatasource') {\n        const plugin = await getPlugin('Datasource', 'PrometheusDatasource');\n        const client = plugin.createClient({ directUrl: prometheusDemoUrl }, { proxyUrl: prometheusDemoUrl }) as Client;\n        return client;\n      }\n      throw new Error(`WithDatasourceStore is not configured to support kind: ${selector.kind}`);\n    },\n    listDatasourceSelectItems: async (datasourcePluginKind): Promise<DatasourceSelectItemGroup[]> => {\n      if (datasourcePluginKind === 'PrometheusDatasource') {\n        return Promise.resolve([\n          {\n            items: [\n              {\n                name: 'PrometheusDatasource',\n                selector: { kind: 'PrometheusDatasource' },\n              },\n            ],\n          },\n        ]);\n      }\n      throw new Error(`WithDatasourceStore is not configured to support kind: ${datasourcePluginKind}`);\n    },\n    getSavedDatasources: (): Record<string, DatasourceSpec> => {\n      return {};\n    },\n    setSavedDatasources: (datasources: Record<string, DatasourceSpec>) => {\n      return datasources;\n    },\n    getLocalDatasources: (): Record<string, DatasourceSpec> => {\n      return {};\n    },\n    setLocalDatasources: (datasources: Record<string, DatasourceSpec>) => {\n      return datasources;\n    },\n  };\n\n  const parameter = isWithDatastoreStoreParameter(initParameter) ? initParameter : { props: defaultValue };\n  const props = parameter?.props;\n\n  return (\n    <DatasourceStoreContext.Provider value={props}>\n      <Story />\n    </DatasourceStoreContext.Provider>\n  );\n};\n"],"names":["DatasourceStoreContext","usePluginRegistry","prometheusDemoUrl","isWithDatastoreStoreParameter","parameter","WithPluginSystemDatasourceStore","Story","context","getPlugin","initParameter","parameters","withPluginSystemDatasourceStore","defaultValue","getDatasource","selector","kind","Promise","resolve","default","plugin","spec","Error","getDatasourceClient","client","createClient","directUrl","proxyUrl","listDatasourceSelectItems","datasourcePluginKind","items","name","getSavedDatasources","setSavedDatasources","datasources","getLocalDatasources","setLocalDatasources","props","Provider","value"],"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;;AAGjC,SACEA,sBAAsB,EAEtBC,iBAAiB,QAEZ,4BAA4B;AAanC,MAAMC,oBAAoB;AAE1B,yDAAyD;AACzD,SAASC,8BACPC,SAA6D;IAE7D,OAAO,CAAC,CAACA,aAAa,OAAOA,cAAc,YAAY,WAAWA;AACpE;AAEA,8EAA8E;AAC9E,8DAA8D;AAC9D,OAAO,MAAMC,kCAAkC,CAACC,OAAgBC;IAC9D,MAAM,EAAEC,UAAS,EAAE,GAAGP;IAEtB,MAAMQ,gBAAgBF,QAAQG,WAAWC;IAEzC,0EAA0E;IAC1E,8DAA8D;IAC9D,6EAA6E;IAC7E,2EAA2E;IAC3E,0DAA0D;IAC1D,MAAMC,eAAgC;QACpCC,eAAe,CAACC;YACd,IAAIA,SAASC,SAAS,wBAAwB;gBAC5C,OAAOC,QAAQC,QAAQ;oBACrBC,SAAS;oBACTC,QAAQ;wBACNJ,MAAM;wBACNK,MAAM,CAAC;oBACT;gBACF;YACF;YACA,MAAM,IAAIC,MAAM,CAAC,uDAAuD,EAAEP,SAASC,KAAK,CAAC;QAC3F;QACAO,qBAAqB,OAAgBR;YACnC,IAAIA,SAASC,SAAS,wBAAwB;gBAC5C,MAAMI,SAAS,MAAMX,UAAU,cAAc;gBAC7C,MAAMe,SAASJ,OAAOK,aAAa;oBAAEC,WAAWvB;gBAAkB,GAAG;oBAAEwB,UAAUxB;gBAAkB;gBACnG,OAAOqB;YACT;YACA,MAAM,IAAIF,MAAM,CAAC,uDAAuD,EAAEP,SAASC,KAAK,CAAC;QAC3F;QACAY,2BAA2B,OAAOC;YAChC,IAAIA,yBAAyB,wBAAwB;gBACnD,OAAOZ,QAAQC,QAAQ;oBACrB;wBACEY,OAAO;4BACL;gCACEC,MAAM;gCACNhB,UAAU;oCAAEC,MAAM;gCAAuB;4BAC3C;yBACD;oBACH;iBACD;YACH;YACA,MAAM,IAAIM,MAAM,CAAC,uDAAuD,EAAEO,qBAAqB,CAAC;QAClG;QACAG,qBAAqB;YACnB,OAAO,CAAC;QACV;QACAC,qBAAqB,CAACC;YACpB,OAAOA;QACT;QACAC,qBAAqB;YACnB,OAAO,CAAC;QACV;QACAC,qBAAqB,CAACF;YACpB,OAAOA;QACT;IACF;IAEA,MAAM7B,YAAYD,8BAA8BM,iBAAiBA,gBAAgB;QAAE2B,OAAOxB;IAAa;IACvG,MAAMwB,QAAQhC,sBAAAA,uBAAAA,KAAAA,IAAAA,UAAWgC;IAEzB,qBACE,KAACpC,uBAAuBqC;QAASC,OAAOF;kBACtC,cAAA,KAAC9B;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/stories/shared-utils/decorators/WithPluginSystemDatasourceStore.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 { DatasourceSelector, DatasourceSpec } from '@perses-dev/core';\nimport {\n  DatasourceStoreContext,\n  DatasourceStore,\n  usePluginRegistry,\n  DatasourceSelectItemGroup,\n} from '@perses-dev/plugin-system';\nimport { StoryFn, StoryContext } from '@storybook/react';\nimport { ReactElement } from 'react';\n\ndeclare module '@storybook/react' {\n  interface Parameters {\n    withPluginSystemDatasourceStore?: WithPluginSystemDatasourceStoreParameter;\n  }\n}\n\nexport type WithPluginSystemDatasourceStoreParameter = {\n  props: DatasourceStore;\n};\n\nconst prometheusDemoUrl = 'https://prometheus.demo.do.prometheus.io';\n\n// Type guard because storybook types parameters as `any`\nfunction isWithDatastoreStoreParameter(\n  parameter: unknown | WithPluginSystemDatasourceStoreParameter\n): parameter is WithPluginSystemDatasourceStoreParameter {\n  return !!parameter && typeof parameter === 'object' && 'props' in parameter;\n}\n\n// This decorator includes \"PluginSystem\" in the name to differentiate it from\n// the datasource store decorator in the `dashboards` package.\nexport const WithPluginSystemDatasourceStore = (Story: StoryFn, context: StoryContext<unknown>): ReactElement => {\n  const { getPlugin } = usePluginRegistry();\n\n  const initParameter = context.parameters.withPluginSystemDatasourceStore;\n\n  // This currently provides a very simplified default to enable use in some\n  // basic stories. It likely will need expanding in the future.\n  // In general, `plugin-system` would probably benefit from a provider wrapper\n  // for `DatasourceStoreContext` that is more generic than the one available\n  // in the `dashboard` package for non-dashboard use cases.\n  const defaultValue: DatasourceStore = {\n    getDatasource: (selector) => {\n      if (selector.kind === 'PrometheusDatasource') {\n        return Promise.resolve({\n          default: true,\n          plugin: {\n            kind: 'PrometheusDatasource',\n            spec: {},\n          },\n        });\n      }\n      throw new Error(`WithDatasourceStore is not configured to support kind: ${selector.kind}`);\n    },\n    getDatasourceClient: async <Client,>(selector: DatasourceSelector) => {\n      if (selector.kind === 'PrometheusDatasource') {\n        const plugin = await getPlugin('Datasource', 'PrometheusDatasource');\n        const client = plugin.createClient({ directUrl: prometheusDemoUrl }, { proxyUrl: prometheusDemoUrl }) as Client;\n        return client;\n      }\n      throw new Error(`WithDatasourceStore is not configured to support kind: ${selector.kind}`);\n    },\n    listDatasourceSelectItems: async (datasourcePluginName): Promise<DatasourceSelectItemGroup[]> => {\n      if (datasourcePluginName === 'PrometheusDatasource') {\n        return Promise.resolve([\n          {\n            items: [\n              {\n                name: 'PrometheusDatasource',\n                selector: { kind: 'PrometheusDatasource' },\n              },\n            ],\n          },\n        ]);\n      }\n      throw new Error(`WithDatasourceStore is not configured to support kind: ${datasourcePluginName}`);\n    },\n    getSavedDatasources: (): Record<string, DatasourceSpec> => {\n      return {};\n    },\n    setSavedDatasources: (datasources: Record<string, DatasourceSpec>) => {\n      return datasources;\n    },\n    getLocalDatasources: (): Record<string, DatasourceSpec> => {\n      return {};\n    },\n    setLocalDatasources: (datasources: Record<string, DatasourceSpec>) => {\n      return datasources;\n    },\n  };\n\n  const parameter = isWithDatastoreStoreParameter(initParameter) ? initParameter : { props: defaultValue };\n  const props = parameter?.props;\n\n  return (\n    <DatasourceStoreContext.Provider value={props}>\n      <Story />\n    </DatasourceStoreContext.Provider>\n  );\n};\n"],"names":["DatasourceStoreContext","usePluginRegistry","prometheusDemoUrl","isWithDatastoreStoreParameter","parameter","WithPluginSystemDatasourceStore","Story","context","getPlugin","initParameter","parameters","withPluginSystemDatasourceStore","defaultValue","getDatasource","selector","kind","Promise","resolve","default","plugin","spec","Error","getDatasourceClient","client","createClient","directUrl","proxyUrl","listDatasourceSelectItems","datasourcePluginName","items","name","getSavedDatasources","setSavedDatasources","datasources","getLocalDatasources","setLocalDatasources","props","Provider","value"],"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;;AAGjC,SACEA,sBAAsB,EAEtBC,iBAAiB,QAEZ,4BAA4B;AAcnC,MAAMC,oBAAoB;AAE1B,yDAAyD;AACzD,SAASC,8BACPC,SAA6D;IAE7D,OAAO,CAAC,CAACA,aAAa,OAAOA,cAAc,YAAY,WAAWA;AACpE;AAEA,8EAA8E;AAC9E,8DAA8D;AAC9D,OAAO,MAAMC,kCAAkC,CAACC,OAAgBC;IAC9D,MAAM,EAAEC,SAAS,EAAE,GAAGP;IAEtB,MAAMQ,gBAAgBF,QAAQG,UAAU,CAACC,+BAA+B;IAExE,0EAA0E;IAC1E,8DAA8D;IAC9D,6EAA6E;IAC7E,2EAA2E;IAC3E,0DAA0D;IAC1D,MAAMC,eAAgC;QACpCC,eAAe,CAACC;YACd,IAAIA,SAASC,IAAI,KAAK,wBAAwB;gBAC5C,OAAOC,QAAQC,OAAO,CAAC;oBACrBC,SAAS;oBACTC,QAAQ;wBACNJ,MAAM;wBACNK,MAAM,CAAC;oBACT;gBACF;YACF;YACA,MAAM,IAAIC,MAAM,CAAC,uDAAuD,EAAEP,SAASC,IAAI,CAAC,CAAC;QAC3F;QACAO,qBAAqB,OAAgBR;YACnC,IAAIA,SAASC,IAAI,KAAK,wBAAwB;gBAC5C,MAAMI,SAAS,MAAMX,UAAU,cAAc;gBAC7C,MAAMe,SAASJ,OAAOK,YAAY,CAAC;oBAAEC,WAAWvB;gBAAkB,GAAG;oBAAEwB,UAAUxB;gBAAkB;gBACnG,OAAOqB;YACT;YACA,MAAM,IAAIF,MAAM,CAAC,uDAAuD,EAAEP,SAASC,IAAI,CAAC,CAAC;QAC3F;QACAY,2BAA2B,OAAOC;YAChC,IAAIA,yBAAyB,wBAAwB;gBACnD,OAAOZ,QAAQC,OAAO,CAAC;oBACrB;wBACEY,OAAO;4BACL;gCACEC,MAAM;gCACNhB,UAAU;oCAAEC,MAAM;gCAAuB;4BAC3C;yBACD;oBACH;iBACD;YACH;YACA,MAAM,IAAIM,MAAM,CAAC,uDAAuD,EAAEO,qBAAqB,CAAC;QAClG;QACAG,qBAAqB;YACnB,OAAO,CAAC;QACV;QACAC,qBAAqB,CAACC;YACpB,OAAOA;QACT;QACAC,qBAAqB;YACnB,OAAO,CAAC;QACV;QACAC,qBAAqB,CAACF;YACpB,OAAOA;QACT;IACF;IAEA,MAAM7B,YAAYD,8BAA8BM,iBAAiBA,gBAAgB;QAAE2B,OAAOxB;IAAa;IACvG,MAAMwB,QAAQhC,WAAWgC;IAEzB,qBACE,KAACpC,uBAAuBqC,QAAQ;QAACC,OAAOF;kBACtC,cAAA,KAAC9B;;AAGP,EAAE"}

package/dist/stories/shared-utils/decorators/WithPluginSystemVariables.d.ts

@@ -0,0 +1,13 @@
+import { StoryFn, StoryContext } from '@storybook/react';
+import { ReactElement } from 'react';
+import { VariableSrv } from '../../../runtime';
+declare module '@storybook/react' {
+    interface Parameters {
+        withPluginSystemVariables?: WithPluginSystemVariableParameter;
+    }
+}
+export type WithPluginSystemVariableParameter = {
+    props: VariableSrv;
+};
+export declare const WithPluginSystemVariables: (Story: StoryFn, context: StoryContext<unknown>) => ReactElement;
+//# sourceMappingURL=WithPluginSystemVariables.d.ts.map

package/dist/stories/shared-utils/decorators/WithPluginSystemVariables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WithPluginSystemVariables.d.ts","sourceRoot":"","sources":["../../../../src/stories/shared-utils/decorators/WithPluginSystemVariables.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAmB,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEhE,OAAO,QAAQ,kBAAkB,CAAC;IAChC,UAAU,UAAU;QAClB,yBAAyB,CAAC,EAAE,iCAAiC,CAAC;KAC/D;CACF;AAED,MAAM,MAAM,iCAAiC,GAAG;IAC9C,KAAK,EAAE,WAAW,CAAC;CACpB,CAAC;AAcF,eAAO,MAAM,yBAAyB,UAAW,OAAO,WAAW,aAAa,OAAO,CAAC,KAAG,YAc1F,CAAC"}