@grafana/scenes 6.39.4--canary.1270.18376571635.0 → 6.39.4

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v6.39.4 (Fri Oct 10 2025)
+
+#### 🐛 Bug Fix
+
+- CustomVariable: Expose query parsing mechanism [#1269](https://github.com/grafana/scenes/pull/1269) ([@bfmatei](https://github.com/bfmatei))
+
+#### Authors: 1
+
+- Bogdan Matei ([@bfmatei](https://github.com/bfmatei))
+
+---
+
 # v6.39.3 (Thu Oct 09 2025)
 
 #### 🐛 Bug Fix

package/dist/esm/variables/variants/CustomVariable.js

@@ -20,11 +20,13 @@ class CustomVariable extends MultiValueVariable {
       statePaths: ["query"]
     });
   }
-  getValueOptions(args) {
+  // We expose this publicly as we also need it outside the variable
+  // The interpolate flag is needed since we don't always want to get the interpolated options
+  transformCsvStringToOptions(str, interpolate = true) {
     var _a;
-    const interpolated = sceneGraph.interpolate(this, this.state.query);
-    const match = (_a = interpolated.match(/(?:\\,|[^,])+/g)) != null ? _a : [];
-    const options = match.map((text) => {
+    str = interpolate ? sceneGraph.interpolate(this, str) : str;
+    const match = (_a = str.match(/(?:\\,|[^,])+/g)) != null ? _a : [];
+    return match.map((text) => {
       var _a2;
       text = text.replace(/\\,/g, ",");
       const textMatch = (_a2 = /^\s*(.+)\s:\s(.+)$/g.exec(text)) != null ? _a2 : [];
@@ -35,6 +37,9 @@ class CustomVariable extends MultiValueVariable {
         return { label: text.trim(), value: text.trim() };
       }
     });
+  }
+  getValueOptions(args) {
+    const options = this.transformCsvStringToOptions(this.state.query);
     if (!options.length) {
       this.skipNextValidation = true;
     }

package/dist/esm/variables/variants/CustomVariable.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomVariable.js","sources":["../../../../src/variables/variants/CustomVariable.tsx"],"sourcesContent":["import { Observable, of } from 'rxjs';\n\nimport { SceneComponentProps } from '../../core/types';\nimport { VariableDependencyConfig } from '../VariableDependencyConfig';\nimport { MultiOrSingleValueSelect } from '../components/VariableValueSelect';\nimport { VariableValueOption } from '../types';\n\nimport { MultiValueVariable, MultiValueVariableState, VariableGetOptionsArgs } from './MultiValueVariable';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport React from 'react';\n\nexport interface CustomVariableState extends MultiValueVariableState {\n  query: string;\n}\n\nexport class CustomVariable extends MultiValueVariable<CustomVariableState> {\n  protected _variableDependency = new VariableDependencyConfig(this, {\n    statePaths: ['query'],\n  });\n\n  public constructor(initialState: Partial<CustomVariableState>) {\n    super({\n      type: 'custom',\n      query: '',\n      value: '',\n      text: '',\n      options: [],\n      name: '',\n      ...initialState,\n    });\n  }\n\n  public getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]> {\n    const interpolated = sceneGraph.interpolate(this, this.state.query);\n    const match = interpolated.match(/(?:\\\\,|[^,])+/g) ?? [];\n\n    const options = match.map((text) => {\n      text = text.replace(/\\\\,/g, ',');\n      const textMatch = /^\\s*(.+)\\s:\\s(.+)$/g.exec(text) ?? [];\n      if (textMatch.length === 3) {\n        const [, key, value] = textMatch;\n        return { label: key.trim(), value: value.trim() };\n      } else {\n        return { label: text.trim(), value: text.trim() };\n      }\n    });\n\n    if (!options.length) {\n      this.skipNextValidation = true;\n    }\n\n    return of(options);\n  }\n\n  public static Component = ({ model }: SceneComponentProps<MultiValueVariable>) => {\n    return <MultiOrSingleValueSelect model={model} />;\n  };\n}\n"],"names":["_a"],"mappings":";;;;;;;AAeO,MAAM,uBAAuB,kBAAwC,CAAA;AAAA,EAKnE,YAAY,YAA4C,EAAA;AAC7D,IAAM,KAAA,CAAA;AAAA,MACJ,IAAM,EAAA,QAAA;AAAA,MACN,KAAO,EAAA,EAAA;AAAA,MACP,KAAO,EAAA,EAAA;AAAA,MACP,IAAM,EAAA,EAAA;AAAA,MACN,SAAS,EAAC;AAAA,MACV,IAAM,EAAA,EAAA;AAAA,MACN,GAAG;AAAA,KACJ,CAAA;AAbH,IAAU,IAAA,CAAA,mBAAA,GAAsB,IAAI,wBAAA,CAAyB,IAAM,EAAA;AAAA,MACjE,UAAA,EAAY,CAAC,OAAO;AAAA,KACrB,CAAA;AAAA;AAYD,EAEO,gBAAgB,IAAiE,EAAA;AAhC1F,IAAA,IAAA,EAAA;AAiCI,IAAA,MAAM,eAAe,UAAW,CAAA,WAAA,CAAY,IAAM,EAAA,IAAA,CAAK,MAAM,KAAK,CAAA;AAClE,IAAA,MAAM,SAAQ,EAAa,GAAA,YAAA,CAAA,KAAA,CAAM,gBAAgB,CAAA,KAAnC,YAAwC,EAAC;AAEvD,IAAA,MAAM,OAAU,GAAA,KAAA,CAAM,GAAI,CAAA,CAAC,IAAS,KAAA;AApCxC,MAAAA,IAAAA,GAAAA;AAqCM,MAAO,IAAA,GAAA,IAAA,CAAK,OAAQ,CAAA,MAAA,EAAQ,GAAG,CAAA;AAC/B,MAAM,MAAA,SAAA,GAAA,CAAYA,MAAA,qBAAsB,CAAA,IAAA,CAAK,IAAI,CAA/B,KAAA,IAAA,GAAAA,MAAoC,EAAC;AACvD,MAAI,IAAA,SAAA,CAAU,WAAW,CAAG,EAAA;AAC1B,QAAA,MAAM,GAAG,GAAK,EAAA,KAAK,CAAI,GAAA,SAAA;AACvB,QAAO,OAAA,EAAE,OAAO,GAAI,CAAA,IAAA,IAAQ,KAAO,EAAA,KAAA,CAAM,MAAO,EAAA;AAAA,OAC3C,MAAA;AACL,QAAO,OAAA,EAAE,OAAO,IAAK,CAAA,IAAA,IAAQ,KAAO,EAAA,IAAA,CAAK,MAAO,EAAA;AAAA;AAClD,KACD,CAAA;AAED,IAAI,IAAA,CAAC,QAAQ,MAAQ,EAAA;AACnB,MAAA,IAAA,CAAK,kBAAqB,GAAA,IAAA;AAAA;AAG5B,IAAA,OAAO,GAAG,OAAO,CAAA;AAAA;AAMrB;AA1Ca,cAAA,CAuCG,SAAY,GAAA,CAAC,EAAE,KAAA,EAAqD,KAAA;AAChF,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,4BAAyB,KAAc,EAAA,CAAA;AACjD,CAAA;;;;"}
+{"version":3,"file":"CustomVariable.js","sources":["../../../../src/variables/variants/CustomVariable.tsx"],"sourcesContent":["import { Observable, of } from 'rxjs';\n\nimport { SceneComponentProps } from '../../core/types';\nimport { VariableDependencyConfig } from '../VariableDependencyConfig';\nimport { MultiOrSingleValueSelect } from '../components/VariableValueSelect';\nimport { VariableValueOption } from '../types';\n\nimport { MultiValueVariable, MultiValueVariableState, VariableGetOptionsArgs } from './MultiValueVariable';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport React from 'react';\n\nexport interface CustomVariableState extends MultiValueVariableState {\n  query: string;\n}\n\nexport class CustomVariable extends MultiValueVariable<CustomVariableState> {\n  protected _variableDependency = new VariableDependencyConfig(this, {\n    statePaths: ['query'],\n  });\n\n  public constructor(initialState: Partial<CustomVariableState>) {\n    super({\n      type: 'custom',\n      query: '',\n      value: '',\n      text: '',\n      options: [],\n      name: '',\n      ...initialState,\n    });\n  }\n\n  // We expose this publicly as we also need it outside the variable\n  // The interpolate flag is needed since we don't always want to get the interpolated options\n  public transformCsvStringToOptions(str: string, interpolate = true): VariableValueOption[] {\n    str = interpolate ? sceneGraph.interpolate(this, str) : str;\n    const match = str.match(/(?:\\\\,|[^,])+/g) ?? [];\n\n    return match.map((text) => {\n      text = text.replace(/\\\\,/g, ',');\n      const textMatch = /^\\s*(.+)\\s:\\s(.+)$/g.exec(text) ?? [];\n      if (textMatch.length === 3) {\n        const [, key, value] = textMatch;\n        return { label: key.trim(), value: value.trim() };\n      } else {\n        return { label: text.trim(), value: text.trim() };\n      }\n    });\n  }\n\n  public getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]> {\n    const options = this.transformCsvStringToOptions(this.state.query);\n\n    if (!options.length) {\n      this.skipNextValidation = true;\n    }\n\n    return of(options);\n  }\n\n  public static Component = ({ model }: SceneComponentProps<MultiValueVariable>) => {\n    return <MultiOrSingleValueSelect model={model} />;\n  };\n}\n"],"names":["_a"],"mappings":";;;;;;;AAeO,MAAM,uBAAuB,kBAAwC,CAAA;AAAA,EAKnE,YAAY,YAA4C,EAAA;AAC7D,IAAM,KAAA,CAAA;AAAA,MACJ,IAAM,EAAA,QAAA;AAAA,MACN,KAAO,EAAA,EAAA;AAAA,MACP,KAAO,EAAA,EAAA;AAAA,MACP,IAAM,EAAA,EAAA;AAAA,MACN,SAAS,EAAC;AAAA,MACV,IAAM,EAAA,EAAA;AAAA,MACN,GAAG;AAAA,KACJ,CAAA;AAbH,IAAU,IAAA,CAAA,mBAAA,GAAsB,IAAI,wBAAA,CAAyB,IAAM,EAAA;AAAA,MACjE,UAAA,EAAY,CAAC,OAAO;AAAA,KACrB,CAAA;AAAA;AAYD;AAAA;AAAA,EAIO,2BAAA,CAA4B,GAAa,EAAA,WAAA,GAAc,IAA6B,EAAA;AAlC7F,IAAA,IAAA,EAAA;AAmCI,IAAA,GAAA,GAAM,WAAc,GAAA,UAAA,CAAW,WAAY,CAAA,IAAA,EAAM,GAAG,CAAI,GAAA,GAAA;AACxD,IAAA,MAAM,SAAQ,EAAI,GAAA,GAAA,CAAA,KAAA,CAAM,gBAAgB,CAAA,KAA1B,YAA+B,EAAC;AAE9C,IAAO,OAAA,KAAA,CAAM,GAAI,CAAA,CAAC,IAAS,KAAA;AAtC/B,MAAAA,IAAAA,GAAAA;AAuCM,MAAO,IAAA,GAAA,IAAA,CAAK,OAAQ,CAAA,MAAA,EAAQ,GAAG,CAAA;AAC/B,MAAM,MAAA,SAAA,GAAA,CAAYA,MAAA,qBAAsB,CAAA,IAAA,CAAK,IAAI,CAA/B,KAAA,IAAA,GAAAA,MAAoC,EAAC;AACvD,MAAI,IAAA,SAAA,CAAU,WAAW,CAAG,EAAA;AAC1B,QAAA,MAAM,GAAG,GAAK,EAAA,KAAK,CAAI,GAAA,SAAA;AACvB,QAAO,OAAA,EAAE,OAAO,GAAI,CAAA,IAAA,IAAQ,KAAO,EAAA,KAAA,CAAM,MAAO,EAAA;AAAA,OAC3C,MAAA;AACL,QAAO,OAAA,EAAE,OAAO,IAAK,CAAA,IAAA,IAAQ,KAAO,EAAA,IAAA,CAAK,MAAO,EAAA;AAAA;AAClD,KACD,CAAA;AAAA;AACH,EAEO,gBAAgB,IAAiE,EAAA;AACtF,IAAA,MAAM,OAAU,GAAA,IAAA,CAAK,2BAA4B,CAAA,IAAA,CAAK,MAAM,KAAK,CAAA;AAEjE,IAAI,IAAA,CAAC,QAAQ,MAAQ,EAAA;AACnB,MAAA,IAAA,CAAK,kBAAqB,GAAA,IAAA;AAAA;AAG5B,IAAA,OAAO,GAAG,OAAO,CAAA;AAAA;AAMrB;AAhDa,cAAA,CA6CG,SAAY,GAAA,CAAC,EAAE,KAAA,EAAqD,KAAA;AAChF,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,4BAAyB,KAAc,EAAA,CAAA;AACjD,CAAA;;;;"}

package/dist/index.d.ts

@@ -1124,6 +1124,7 @@ interface CustomVariableState extends MultiValueVariableState {
 declare class CustomVariable extends MultiValueVariable<CustomVariableState> {
     protected _variableDependency: VariableDependencyConfig<CustomVariableState>;
     constructor(initialState: Partial<CustomVariableState>);
+    transformCsvStringToOptions(str: string, interpolate?: boolean): VariableValueOption[];
     getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]>;
     static Component: ({ model }: SceneComponentProps<MultiValueVariable>) => React__default.JSX.Element;
 }

package/dist/index.js

@@ -11113,11 +11113,13 @@ class CustomVariable extends MultiValueVariable {
       statePaths: ["query"]
     });
   }
-  getValueOptions(args) {
+  // We expose this publicly as we also need it outside the variable
+  // The interpolate flag is needed since we don't always want to get the interpolated options
+  transformCsvStringToOptions(str, interpolate = true) {
     var _a;
-    const interpolated = sceneGraph.interpolate(this, this.state.query);
-    const match = (_a = interpolated.match(/(?:\\,|[^,])+/g)) != null ? _a : [];
-    const options = match.map((text) => {
+    str = interpolate ? sceneGraph.interpolate(this, str) : str;
+    const match = (_a = str.match(/(?:\\,|[^,])+/g)) != null ? _a : [];
+    return match.map((text) => {
       var _a2;
       text = text.replace(/\\,/g, ",");
       const textMatch = (_a2 = /^\s*(.+)\s:\s(.+)$/g.exec(text)) != null ? _a2 : [];
@@ -11128,6 +11130,9 @@ class CustomVariable extends MultiValueVariable {
         return { label: text.trim(), value: text.trim() };
       }
     });
+  }
+  getValueOptions(args) {
+    const options = this.transformCsvStringToOptions(this.state.query);
     if (!options.length) {
       this.skipNextValidation = true;
     }