@grafana/plugin-ui 0.12.0 → 0.13.0

package/dist/esm/components/VisualQueryBuilder/components/OperationParamEditor.js

@@ -1,6 +1,5 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
 import { css } from '@emotion/css';
-import 'react';
 import { toOption } from '@grafana/data';
 import { AutoSizeInput, Checkbox, useStyles2, Button, Select } from '@grafana/ui';
 import '../../QueryEditor/types.js';
@@ -41,7 +40,7 @@ function getOperationParamEditor(paramDef) {
 }
 function SimpleInputParamEditor(props) {
   var _a;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ React.createElement(
     AutoSizeInput,
     {
       id: getOperationParamId(props.operationId, props.index),
@@ -60,7 +59,7 @@ function SimpleInputParamEditor(props) {
   );
 }
 function BoolInputParamEditor(props) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ React.createElement(
     Checkbox,
     {
       id: getOperationParamId(props.operationId, props.index),
@@ -87,44 +86,41 @@ function SelectInputParamEditor({
   }
   let valueOption = (_b = selectOptions.find((x) => x.value === value)) != null ? _b : toOption(value);
   if (!value && paramDef.optional) {
-    return /* @__PURE__ */ jsx("div", { className: styles.optionalParam, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ React.createElement("div", { className: styles.optionalParam }, /* @__PURE__ */ React.createElement(
       Button,
       {
         size: "sm",
         variant: "secondary",
         title: `Add ${paramDef.name}`,
         icon: "plus",
-        onClick: () => onChange(index, selectOptions[0].value),
-        children: paramDef.name
-      }
-    ) });
+        onClick: () => onChange(index, selectOptions[0].value)
+      },
+      paramDef.name
+    ));
   }
-  return /* @__PURE__ */ jsxs(EditorStack, { gap: 0.5, direction: "row", alignItems: "center", children: [
-    /* @__PURE__ */ jsx(
-      Select,
-      {
-        id: getOperationParamId(operationId, index),
-        value: valueOption,
-        options: selectOptions,
-        placeholder: paramDef.placeholder,
-        allowCustomValue: true,
-        onChange: (value2) => onChange(index, value2.value),
-        width: paramDef.minWidth || "auto"
-      }
-    ),
-    paramDef.optional && /* @__PURE__ */ jsx(
-      Button,
-      {
-        "data-testid": `operations.${index}.remove-param`,
-        size: "sm",
-        fill: "text",
-        icon: "times",
-        variant: "secondary",
-        title: `Remove ${paramDef.name}`,
-        onClick: () => onChange(index, "")
-      }
-    )
-  ] });
+  return /* @__PURE__ */ React.createElement(EditorStack, { gap: 0.5, direction: "row", alignItems: "center" }, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      id: getOperationParamId(operationId, index),
+      value: valueOption,
+      options: selectOptions,
+      placeholder: paramDef.placeholder,
+      allowCustomValue: true,
+      onChange: (value2) => onChange(index, value2.value),
+      width: paramDef.minWidth || "auto"
+    }
+  ), paramDef.optional && /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      "data-testid": `operations.${index}.remove-param`,
+      size: "sm",
+      fill: "text",
+      icon: "times",
+      variant: "secondary",
+      title: `Remove ${paramDef.name}`,
+      onClick: () => onChange(index, "")
+    }
+  ));
 }
 const getStyles = (theme) => {
   return {

package/dist/esm/components/VisualQueryBuilder/components/OperationParamEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"OperationParamEditor.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationParamEditor.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { type FunctionComponent } from 'react';\n\nimport { type GrafanaTheme2, type SelectableValue, toOption } from '@grafana/data';\nimport { AutoSizeInput, Button, Checkbox, Select, useStyles2 } from '@grafana/ui';\n\nimport { type QueryBuilderOperationParamDef, type QueryBuilderOperationParamEditorProps } from '../types';\n\nimport { EditorStack } from '../../QueryEditor';\n\nexport function getOperationParamEditor(\n  paramDef: QueryBuilderOperationParamDef\n): FunctionComponent<QueryBuilderOperationParamEditorProps> {\n  if (paramDef.editor) {\n    return paramDef.editor;\n  }\n\n  if (paramDef.options) {\n    return SelectInputParamEditor;\n  }\n\n  switch (paramDef.type) {\n    case 'boolean':\n      return BoolInputParamEditor;\n    case 'number':\n    case 'string':\n    default:\n      return SimpleInputParamEditor;\n  }\n}\n\nfunction SimpleInputParamEditor(props: QueryBuilderOperationParamEditorProps) {\n  return (\n    <AutoSizeInput\n      id={getOperationParamId(props.operationId, props.index)}\n      defaultValue={props.value?.toString()}\n      minWidth={props.paramDef.minWidth}\n      placeholder={props.paramDef.placeholder}\n      title={props.paramDef.description}\n      maxWidth={(props.paramDef.minWidth || 20) * 3}\n      onCommitChange={(evt) => {\n        props.onChange(props.index, evt.currentTarget.value);\n        if (props.paramDef.runQueryOnEnter && evt.type === 'keydown') {\n          props.onRunQuery();\n        }\n      }}\n    />\n  );\n}\n\nfunction BoolInputParamEditor(props: QueryBuilderOperationParamEditorProps) {\n  return (\n    <Checkbox\n      id={getOperationParamId(props.operationId, props.index)}\n      value={Boolean(props.value)}\n      onChange={(evt) => props.onChange(props.index, evt.currentTarget.checked)}\n    />\n  );\n}\n\nfunction SelectInputParamEditor({\n  paramDef,\n  value,\n  index,\n  operationId,\n  onChange,\n}: QueryBuilderOperationParamEditorProps) {\n  const styles = useStyles2(getStyles);\n  let selectOptions = paramDef.options as SelectableValue[];\n\n  if (!selectOptions[0]?.label) {\n    selectOptions = paramDef.options!.map((option) => ({\n      label: option.toString(),\n      value: option,\n    }));\n  }\n\n  let valueOption = selectOptions.find((x) => x.value === value) ?? toOption(value as string);\n\n  // If we have optional options param and don't have value, we want to render button with which we add optional options.\n  // This makes it easier to understand what needs to be selected and what is optional.\n  if (!value && paramDef.optional) {\n    return (\n      <div className={styles.optionalParam}>\n        <Button\n          size=\"sm\"\n          variant=\"secondary\"\n          title={`Add ${paramDef.name}`}\n          icon=\"plus\"\n          onClick={() => onChange(index, selectOptions[0].value)}\n        >\n          {paramDef.name}\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <EditorStack gap={0.5} direction=\"row\" alignItems=\"center\">\n      <Select\n        id={getOperationParamId(operationId, index)}\n        value={valueOption}\n        options={selectOptions}\n        placeholder={paramDef.placeholder}\n        allowCustomValue={true}\n        onChange={(value) => onChange(index, value.value!)}\n        width={paramDef.minWidth || 'auto'}\n      />\n      {paramDef.optional && (\n        <Button\n          data-testid={`operations.${index}.remove-param`}\n          size=\"sm\"\n          fill=\"text\"\n          icon=\"times\"\n          variant=\"secondary\"\n          title={`Remove ${paramDef.name}`}\n          onClick={() => onChange(index, '')}\n        />\n      )}\n    </EditorStack>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    optionalParam: css({\n      marginTop: theme.spacing(1),\n    }),\n  };\n};\n\nexport function getOperationParamId(operationId: string, paramIndex: number) {\n  return `operations.${operationId}.param.${paramIndex}`;\n}\n"],"names":["value"],"mappings":"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"}
+{"version":3,"file":"OperationParamEditor.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationParamEditor.tsx"],"sourcesContent":["import React, { type FunctionComponent } from 'react';\nimport { css } from '@emotion/css';\n\nimport { type GrafanaTheme2, type SelectableValue, toOption } from '@grafana/data';\nimport { AutoSizeInput, Button, Checkbox, Select, useStyles2 } from '@grafana/ui';\n\nimport { type QueryBuilderOperationParamDef, type QueryBuilderOperationParamEditorProps } from '../types';\n\nimport { EditorStack } from '../../QueryEditor';\n\nexport function getOperationParamEditor(\n  paramDef: QueryBuilderOperationParamDef\n): FunctionComponent<QueryBuilderOperationParamEditorProps> {\n  if (paramDef.editor) {\n    return paramDef.editor;\n  }\n\n  if (paramDef.options) {\n    return SelectInputParamEditor;\n  }\n\n  switch (paramDef.type) {\n    case 'boolean':\n      return BoolInputParamEditor;\n    case 'number':\n    case 'string':\n    default:\n      return SimpleInputParamEditor;\n  }\n}\n\nfunction SimpleInputParamEditor(props: QueryBuilderOperationParamEditorProps) {\n  return (\n    <AutoSizeInput\n      id={getOperationParamId(props.operationId, props.index)}\n      defaultValue={props.value?.toString()}\n      minWidth={props.paramDef.minWidth}\n      placeholder={props.paramDef.placeholder}\n      title={props.paramDef.description}\n      maxWidth={(props.paramDef.minWidth || 20) * 3}\n      onCommitChange={(evt) => {\n        props.onChange(props.index, evt.currentTarget.value);\n        if (props.paramDef.runQueryOnEnter && evt.type === 'keydown') {\n          props.onRunQuery();\n        }\n      }}\n    />\n  );\n}\n\nfunction BoolInputParamEditor(props: QueryBuilderOperationParamEditorProps) {\n  return (\n    <Checkbox\n      id={getOperationParamId(props.operationId, props.index)}\n      value={Boolean(props.value)}\n      onChange={(evt) => props.onChange(props.index, evt.currentTarget.checked)}\n    />\n  );\n}\n\nfunction SelectInputParamEditor({\n  paramDef,\n  value,\n  index,\n  operationId,\n  onChange,\n}: QueryBuilderOperationParamEditorProps) {\n  const styles = useStyles2(getStyles);\n  let selectOptions = paramDef.options as SelectableValue[];\n\n  if (!selectOptions[0]?.label) {\n    selectOptions = paramDef.options!.map((option) => ({\n      label: option.toString(),\n      value: option,\n    }));\n  }\n\n  let valueOption = selectOptions.find((x) => x.value === value) ?? toOption(value as string);\n\n  // If we have optional options param and don't have value, we want to render button with which we add optional options.\n  // This makes it easier to understand what needs to be selected and what is optional.\n  if (!value && paramDef.optional) {\n    return (\n      <div className={styles.optionalParam}>\n        <Button\n          size=\"sm\"\n          variant=\"secondary\"\n          title={`Add ${paramDef.name}`}\n          icon=\"plus\"\n          onClick={() => onChange(index, selectOptions[0].value)}\n        >\n          {paramDef.name}\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <EditorStack gap={0.5} direction=\"row\" alignItems=\"center\">\n      <Select\n        id={getOperationParamId(operationId, index)}\n        value={valueOption}\n        options={selectOptions}\n        placeholder={paramDef.placeholder}\n        allowCustomValue={true}\n        onChange={(value) => onChange(index, value.value!)}\n        width={paramDef.minWidth || 'auto'}\n      />\n      {paramDef.optional && (\n        <Button\n          data-testid={`operations.${index}.remove-param`}\n          size=\"sm\"\n          fill=\"text\"\n          icon=\"times\"\n          variant=\"secondary\"\n          title={`Remove ${paramDef.name}`}\n          onClick={() => onChange(index, '')}\n        />\n      )}\n    </EditorStack>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    optionalParam: css({\n      marginTop: theme.spacing(1),\n    }),\n  };\n};\n\nexport function getOperationParamId(operationId: string, paramIndex: number) {\n  return `operations.${operationId}.param.${paramIndex}`;\n}\n"],"names":["value"],"mappings":"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"}

package/dist/esm/components/VisualQueryBuilder/components/OperationsEditorRow.js

@@ -1,8 +1,7 @@
-import { jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { css } from '@emotion/css';
 import '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
-import 'react';
 import '../../QueryEditor/types.js';
 import 'lodash';
 import '../../QueryEditor/EditorList.js';
@@ -25,7 +24,7 @@ import 'rxjs/operators';
 
 function OperationsEditorRow({ children }) {
   const styles = useStyles2(getStyles);
-  return /* @__PURE__ */ jsx("div", { className: styles.root, children: /* @__PURE__ */ jsx(EditorStack, { gap: 1, children }) });
+  return /* @__PURE__ */ React.createElement("div", { className: styles.root }, /* @__PURE__ */ React.createElement(EditorStack, { gap: 1 }, children));
 }
 const getStyles = (theme) => {
   return {

package/dist/esm/components/VisualQueryBuilder/components/OperationsEditorRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"OperationsEditorRow.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationsEditorRow.tsx"],"sourcesContent":["import { css } from '@emotion/css';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\n\nimport { EditorStack } from '../../QueryEditor';\n\nexport function OperationsEditorRow({ children }: React.PropsWithChildren<{}>) {\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.root}>\n      <EditorStack gap={1}>{children}</EditorStack>\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    root: css({\n      padding: theme.spacing(1, 1, 0, 1),\n      backgroundColor: theme.colors.background.secondary,\n      borderRadius: theme.shape.radius.default,\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAOgB,SAAA,mBAAA,CAAoB,EAAE,QAAA,EAAyC,EAAA;AAC7E,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,IAAA,EACrB,8BAAC,WAAY,EAAA,EAAA,GAAA,EAAK,CAAI,EAAA,QAAA,EAAS,CACjC,EAAA,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,MAAM,GAAI,CAAA;AAAA,MACR,SAAS,KAAM,CAAA,OAAA,CAAQ,CAAG,EAAA,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,MACjC,eAAA,EAAiB,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,SAAA;AAAA,MACzC,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA;AAAA,KAClC;AAAA,GACH;AACF,CAAA;;;;"}
+{"version":3,"file":"OperationsEditorRow.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationsEditorRow.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from '@emotion/css';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\n\nimport { EditorStack } from '../../QueryEditor';\n\nexport function OperationsEditorRow({ children }: React.PropsWithChildren<{}>) {\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.root}>\n      <EditorStack gap={1}>{children}</EditorStack>\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    root: css({\n      padding: theme.spacing(1, 1, 0, 1),\n      backgroundColor: theme.colors.background.secondary,\n      borderRadius: theme.shape.radius.default,\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAQgB,SAAA,mBAAA,CAAoB,EAAE,QAAA,EAAyC,EAAA;AAC7E,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,IAAA,EAAA,sCACpB,WAAY,EAAA,EAAA,GAAA,EAAK,CAAI,EAAA,EAAA,QAAS,CACjC,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,MAAM,GAAI,CAAA;AAAA,MACR,SAAS,KAAM,CAAA,OAAA,CAAQ,CAAG,EAAA,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,MACjC,eAAA,EAAiB,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,SAAA;AAAA,MACzC,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA;AAAA,KAClC;AAAA,GACH;AACF,CAAA;;;;"}

package/dist/esm/components/VisualQueryBuilder/components/QueryBuilderHints.js

@@ -1,6 +1,5 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { css } from '@emotion/css';
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 import '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';
 import { useStyles2, Tooltip, Button } from '@grafana/ui';
@@ -25,9 +24,9 @@ const QueryBuilderHints = ({
     });
     return hints2 != null ? hints2 : [];
   }, [datasource, visualQuery, data, queryModeller, buildDataQueryFromQueryString]);
-  return /* @__PURE__ */ jsx(Fragment, { children: hints.length > 0 && /* @__PURE__ */ jsx("div", { className: styles.container, children: hints.map((hint) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, hints.length > 0 && /* @__PURE__ */ React.createElement("div", { className: styles.container }, hints.map((hint) => {
     var _a, _b, _c, _d;
-    return /* @__PURE__ */ jsx(Tooltip, { content: `${hint.label} ${(_a = hint.fix) == null ? undefined : _a.label}`, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ React.createElement(Tooltip, { content: `${hint.label} ${(_a = hint.fix) == null ? undefined : _a.label}`, key: hint.type }, /* @__PURE__ */ React.createElement(
       Button,
       {
         onClick: () => {
@@ -49,14 +48,12 @@ const QueryBuilderHints = ({
         },
         fill: "outline",
         size: "sm",
-        className: styles.hint,
-        children: [
-          "hint: ",
-          ((_b = hint.fix) == null ? undefined : _b.title) || ((_d = (_c = hint.fix) == null ? undefined : _c.action) == null ? undefined : _d.type.toLowerCase().replace("_", " "))
-        ]
-      }
-    ) }, hint.type);
-  }) }) });
+        className: styles.hint
+      },
+      "hint: ",
+      ((_b = hint.fix) == null ? undefined : _b.title) || ((_d = (_c = hint.fix) == null ? undefined : _c.action) == null ? undefined : _d.type.toLowerCase().replace("_", " "))
+    ));
+  })));
 };
 QueryBuilderHints.displayName = "QueryBuilderHints";
 const getStyles = (theme) => {

package/dist/esm/components/VisualQueryBuilder/components/QueryBuilderHints.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilderHints.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryBuilderHints.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useMemo } from 'react';\n\nimport { type DataSourceApi, type GrafanaTheme2, type PanelData, type DataQuery } from '@grafana/data';\nimport { reportInteraction } from '@grafana/runtime';\nimport { Button, Tooltip, useStyles2 } from '@grafana/ui';\n\nimport { type VisualQuery, type VisualQueryModeller } from '../types';\n\ninterface Props<TVisualQuery extends VisualQuery, TDataQuery extends DataQuery> {\n  query: TVisualQuery;\n  datasource: DataSourceApi<TDataQuery>;\n  queryModeller: VisualQueryModeller;\n  buildVisualQueryFromString: (queryString: string) => { query: TVisualQuery };\n  buildDataQueryFromQueryString: (queryString: string) => TDataQuery;\n  buildQueryStringFromDataQuery: (dataQuery: TDataQuery) => string;\n  onChange: (update: TVisualQuery) => void;\n  data?: PanelData;\n}\n\nexport const QueryBuilderHints = <TVisualQuery extends VisualQuery, TDataQuery extends DataQuery>({\n  datasource,\n  query: visualQuery,\n  onChange,\n  data,\n  queryModeller,\n  buildVisualQueryFromString,\n  buildDataQueryFromQueryString,\n  buildQueryStringFromDataQuery,\n}: Props<TVisualQuery, TDataQuery>) => {\n  const styles = useStyles2(getStyles);\n\n  const hints = useMemo(() => {\n    const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));\n    // For now show only actionable hints\n    const hints = datasource.getQueryHints?.(dataQuery, data?.series || []).filter((hint) => hint.fix?.action);\n    return hints ?? [];\n  }, [datasource, visualQuery, data, queryModeller, buildDataQueryFromQueryString]);\n\n  return (\n    <>\n      {hints.length > 0 && (\n        <div className={styles.container}>\n          {hints.map((hint) => {\n            return (\n              <Tooltip content={`${hint.label} ${hint.fix?.label}`} key={hint.type}>\n                <Button\n                  onClick={() => {\n                    reportInteraction('grafana_query_builder_hints_clicked', {\n                      hint: hint.type,\n                      datasourceType: datasource.type,\n                    });\n\n                    if (hint?.fix?.action) {\n                      const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));\n                      const newQuery = datasource.modifyQuery?.(dataQuery, hint.fix.action);\n                      if (newQuery) {\n                        const newVisualQuery = buildVisualQueryFromString(\n                          buildQueryStringFromDataQuery(newQuery) ?? ''\n                        );\n                        return onChange(newVisualQuery.query);\n                      }\n                    }\n                  }}\n                  fill=\"outline\"\n                  size=\"sm\"\n                  className={styles.hint}\n                >\n                  hint: {hint.fix?.title || hint.fix?.action?.type.toLowerCase().replace('_', ' ')}\n                </Button>\n              </Tooltip>\n            );\n          })}\n        </div>\n      )}\n    </>\n  );\n};\n\nQueryBuilderHints.displayName = 'QueryBuilderHints';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    container: css`\n      display: flex;\n      align-items: start;\n    `,\n    hint: css`\n      margin-right: ${theme.spacing(1)};\n    `,\n  };\n};\n"],"names":["hints","_a","_b","_c"],"mappings":"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"}
+{"version":3,"file":"QueryBuilderHints.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryBuilderHints.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useMemo } from 'react';\n\nimport { type DataSourceApi, type GrafanaTheme2, type PanelData, type DataQuery } from '@grafana/data';\nimport { reportInteraction } from '@grafana/runtime';\nimport { Button, Tooltip, useStyles2 } from '@grafana/ui';\n\nimport { type VisualQuery, type VisualQueryModeller } from '../types';\n\ninterface Props<TVisualQuery extends VisualQuery, TDataQuery extends DataQuery> {\n  query: TVisualQuery;\n  datasource: DataSourceApi<TDataQuery>;\n  queryModeller: VisualQueryModeller;\n  buildVisualQueryFromString: (queryString: string) => { query: TVisualQuery };\n  buildDataQueryFromQueryString: (queryString: string) => TDataQuery;\n  buildQueryStringFromDataQuery: (dataQuery: TDataQuery) => string;\n  onChange: (update: TVisualQuery) => void;\n  data?: PanelData;\n}\n\nexport const QueryBuilderHints = <TVisualQuery extends VisualQuery, TDataQuery extends DataQuery>({\n  datasource,\n  query: visualQuery,\n  onChange,\n  data,\n  queryModeller,\n  buildVisualQueryFromString,\n  buildDataQueryFromQueryString,\n  buildQueryStringFromDataQuery,\n}: Props<TVisualQuery, TDataQuery>) => {\n  const styles = useStyles2(getStyles);\n\n  const hints = useMemo(() => {\n    const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));\n    // For now show only actionable hints\n    const hints = datasource.getQueryHints?.(dataQuery, data?.series || []).filter((hint) => hint.fix?.action);\n    return hints ?? [];\n  }, [datasource, visualQuery, data, queryModeller, buildDataQueryFromQueryString]);\n\n  return (\n    <>\n      {hints.length > 0 && (\n        <div className={styles.container}>\n          {hints.map((hint) => {\n            return (\n              <Tooltip content={`${hint.label} ${hint.fix?.label}`} key={hint.type}>\n                <Button\n                  onClick={() => {\n                    reportInteraction('grafana_query_builder_hints_clicked', {\n                      hint: hint.type,\n                      datasourceType: datasource.type,\n                    });\n\n                    if (hint?.fix?.action) {\n                      const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));\n                      const newQuery = datasource.modifyQuery?.(dataQuery, hint.fix.action);\n                      if (newQuery) {\n                        const newVisualQuery = buildVisualQueryFromString(\n                          buildQueryStringFromDataQuery(newQuery) ?? ''\n                        );\n                        return onChange(newVisualQuery.query);\n                      }\n                    }\n                  }}\n                  fill=\"outline\"\n                  size=\"sm\"\n                  className={styles.hint}\n                >\n                  hint: {hint.fix?.title || hint.fix?.action?.type.toLowerCase().replace('_', ' ')}\n                </Button>\n              </Tooltip>\n            );\n          })}\n        </div>\n      )}\n    </>\n  );\n};\n\nQueryBuilderHints.displayName = 'QueryBuilderHints';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    container: css`\n      display: flex;\n      align-items: start;\n    `,\n    hint: css`\n      margin-right: ${theme.spacing(1)};\n    `,\n  };\n};\n"],"names":["hints","_a","_b","_c"],"mappings":"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"}

package/dist/esm/components/VisualQueryBuilder/components/QueryEditorModeToggle.js

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { RadioButtonGroup } from '@grafana/ui';
 import { QueryEditorMode } from '../types.js';
 
@@ -7,7 +7,7 @@ const editorModes = [
   { label: "Code", value: QueryEditorMode.Code }
 ];
 function QueryEditorModeToggle({ mode, onChange }) {
-  return /* @__PURE__ */ jsx("div", { "data-testid": "QueryEditorModeToggle", children: /* @__PURE__ */ jsx(RadioButtonGroup, { options: editorModes, size: "sm", value: mode, onChange }) });
+  return /* @__PURE__ */ React.createElement("div", { "data-testid": "QueryEditorModeToggle" }, /* @__PURE__ */ React.createElement(RadioButtonGroup, { options: editorModes, size: "sm", value: mode, onChange }));
 }
 
 export { QueryEditorModeToggle };

package/dist/esm/components/VisualQueryBuilder/components/QueryEditorModeToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryEditorModeToggle.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryEditorModeToggle.tsx"],"sourcesContent":["import { RadioButtonGroup } from '@grafana/ui';\n\nimport { QueryEditorMode } from '../types';\n\ninterface Props {\n  mode: QueryEditorMode;\n  onChange: (mode: QueryEditorMode) => void;\n}\n\nconst editorModes = [\n  { label: 'Builder', value: QueryEditorMode.Builder },\n  { label: 'Code', value: QueryEditorMode.Code },\n];\n\nexport function QueryEditorModeToggle({ mode, onChange }: Props) {\n  return (\n    <div data-testid={'QueryEditorModeToggle'}>\n      <RadioButtonGroup options={editorModes} size=\"sm\" value={mode} onChange={onChange} />\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AASA,MAAM,WAAc,GAAA;AAAA,EAClB,EAAE,KAAA,EAAO,SAAW,EAAA,KAAA,EAAO,gBAAgB,OAAQ,EAAA;AAAA,EACnD,EAAE,KAAA,EAAO,MAAQ,EAAA,KAAA,EAAO,gBAAgB,IAAK;AAC/C,CAAA;AAEO,SAAS,qBAAsB,CAAA,EAAE,IAAM,EAAA,QAAA,EAAmB,EAAA;AAC/D,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA,EAAI,aAAa,EAAA,uBAAA,EAChB,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA,EAAiB,OAAS,EAAA,WAAA,EAAa,IAAK,EAAA,IAAA,EAAK,KAAO,EAAA,IAAA,EAAM,UAAoB,CACrF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"QueryEditorModeToggle.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryEditorModeToggle.tsx"],"sourcesContent":["import React from 'react';\nimport { RadioButtonGroup } from '@grafana/ui';\nimport { QueryEditorMode } from '../types';\n\ninterface Props {\n  mode: QueryEditorMode;\n  onChange: (mode: QueryEditorMode) => void;\n}\n\nconst editorModes = [\n  { label: 'Builder', value: QueryEditorMode.Builder },\n  { label: 'Code', value: QueryEditorMode.Code },\n];\n\nexport function QueryEditorModeToggle({ mode, onChange }: Props) {\n  return (\n    <div data-testid={'QueryEditorModeToggle'}>\n      <RadioButtonGroup options={editorModes} size=\"sm\" value={mode} onChange={onChange} />\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AASA,MAAM,WAAc,GAAA;AAAA,EAClB,EAAE,KAAA,EAAO,SAAW,EAAA,KAAA,EAAO,gBAAgB,OAAQ,EAAA;AAAA,EACnD,EAAE,KAAA,EAAO,MAAQ,EAAA,KAAA,EAAO,gBAAgB,IAAK;AAC/C,CAAA;AAEO,SAAS,qBAAsB,CAAA,EAAE,IAAM,EAAA,QAAA,EAAmB,EAAA;AAC/D,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,aAAa,EAAA,uBAAA,EAAA,kBACf,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,EAAiB,OAAS,EAAA,WAAA,EAAa,IAAK,EAAA,IAAA,EAAK,KAAO,EAAA,IAAA,EAAM,UAAoB,CACrF,CAAA;AAEJ;;;;"}

package/dist/esm/components/VisualQueryBuilder/components/QueryHeaderSwitch.js

@@ -1,7 +1,6 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
 import { css } from '@emotion/css';
 import { uniqueId } from 'lodash';
-import { useRef } from 'react';
+import React, { useRef } from 'react';
 import '@grafana/data';
 import { useStyles2, Switch } from '@grafana/ui';
 import '../../QueryEditor/types.js';
@@ -27,10 +26,7 @@ function QueryHeaderSwitch({ label, ...inputProps }) {
   const dashedLabel = label.replace(" ", "-");
   const switchIdRef = useRef(uniqueId(`switch-${dashedLabel}`));
   const styles = useStyles2(getStyles);
-  return /* @__PURE__ */ jsxs(EditorStack, { gap: 1, children: [
-    /* @__PURE__ */ jsx("label", { htmlFor: switchIdRef.current, className: styles.switchLabel, children: label }),
-    /* @__PURE__ */ jsx(Switch, { ...inputProps, id: switchIdRef.current })
-  ] });
+  return /* @__PURE__ */ React.createElement(EditorStack, { gap: 1 }, /* @__PURE__ */ React.createElement("label", { htmlFor: switchIdRef.current, className: styles.switchLabel }, label), /* @__PURE__ */ React.createElement(Switch, { ...inputProps, id: switchIdRef.current }));
 }
 const getStyles = (theme) => {
   return {

package/dist/esm/components/VisualQueryBuilder/components/QueryHeaderSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryHeaderSwitch.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryHeaderSwitch.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { uniqueId } from 'lodash';\nimport { type HTMLProps, useRef } from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Switch, useStyles2 } from '@grafana/ui';\n\nimport { EditorStack } from '../../QueryEditor';\n\ninterface Props extends Omit<HTMLProps<HTMLInputElement>, 'value' | 'ref'> {\n  value?: boolean;\n  label: string;\n}\n\nexport function QueryHeaderSwitch({ label, ...inputProps }: Props) {\n  const dashedLabel = label.replace(' ', '-');\n  const switchIdRef = useRef(uniqueId(`switch-${dashedLabel}`));\n  const styles = useStyles2(getStyles);\n\n  return (\n    <EditorStack gap={1}>\n      <label htmlFor={switchIdRef.current} className={styles.switchLabel}>\n        {label}\n      </label>\n      <Switch {...inputProps} id={switchIdRef.current} />\n    </EditorStack>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    switchLabel: css({\n      color: theme.colors.text.secondary,\n      cursor: 'pointer',\n      fontSize: theme.typography.bodySmall.fontSize,\n      '&:hover': {\n        color: theme.colors.text.primary,\n      },\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAcO,SAAS,iBAAkB,CAAA,EAAE,KAAO,EAAA,GAAG,YAAqB,EAAA;AACjE,EAAA,MAAM,WAAc,GAAA,KAAA,CAAM,OAAQ,CAAA,GAAA,EAAK,GAAG,CAAA;AAC1C,EAAA,MAAM,cAAc,MAAO,CAAA,QAAA,CAAS,CAAU,OAAA,EAAA,WAAW,EAAE,CAAC,CAAA;AAC5D,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EACE,uBAAA,IAAA,CAAC,WAAY,EAAA,EAAA,GAAA,EAAK,CAChB,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAAM,OAAS,EAAA,WAAA,CAAY,SAAS,SAAW,EAAA,MAAA,CAAO,aACpD,QACH,EAAA,KAAA,EAAA,CAAA;AAAA,wBACC,MAAQ,EAAA,EAAA,GAAG,UAAY,EAAA,EAAA,EAAI,YAAY,OAAS,EAAA;AAAA,GACnD,EAAA,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,aAAa,GAAI,CAAA;AAAA,MACf,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,MAAQ,EAAA,SAAA;AAAA,MACR,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA,QAAA;AAAA,MACrC,SAAW,EAAA;AAAA,QACT,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA;AAC3B,KACD;AAAA,GACH;AACF,CAAA;;;;"}
+{"version":3,"file":"QueryHeaderSwitch.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryHeaderSwitch.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { uniqueId } from 'lodash';\nimport React, { type HTMLProps, useRef } from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Switch, useStyles2 } from '@grafana/ui';\n\nimport { EditorStack } from '../../QueryEditor';\n\ninterface Props extends Omit<HTMLProps<HTMLInputElement>, 'value' | 'ref'> {\n  value?: boolean;\n  label: string;\n}\n\nexport function QueryHeaderSwitch({ label, ...inputProps }: Props) {\n  const dashedLabel = label.replace(' ', '-');\n  const switchIdRef = useRef(uniqueId(`switch-${dashedLabel}`));\n  const styles = useStyles2(getStyles);\n\n  return (\n    <EditorStack gap={1}>\n      <label htmlFor={switchIdRef.current} className={styles.switchLabel}>\n        {label}\n      </label>\n      <Switch {...inputProps} id={switchIdRef.current} />\n    </EditorStack>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    switchLabel: css({\n      color: theme.colors.text.secondary,\n      cursor: 'pointer',\n      fontSize: theme.typography.bodySmall.fontSize,\n      '&:hover': {\n        color: theme.colors.text.primary,\n      },\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAcO,SAAS,iBAAkB,CAAA,EAAE,KAAO,EAAA,GAAG,YAAqB,EAAA;AACjE,EAAA,MAAM,WAAc,GAAA,KAAA,CAAM,OAAQ,CAAA,GAAA,EAAK,GAAG,CAAA;AAC1C,EAAA,MAAM,cAAc,MAAO,CAAA,QAAA,CAAS,CAAU,OAAA,EAAA,WAAW,EAAE,CAAC,CAAA;AAC5D,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,eAAY,GAAK,EAAA,CAAA,EAAA,sCACf,OAAM,EAAA,EAAA,OAAA,EAAS,YAAY,OAAS,EAAA,SAAA,EAAW,OAAO,WACpD,EAAA,EAAA,KACH,mBACC,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAQ,GAAG,UAAY,EAAA,EAAA,EAAI,WAAY,CAAA,OAAA,EAAS,CACnD,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,aAAa,GAAI,CAAA;AAAA,MACf,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,MAAQ,EAAA,SAAA;AAAA,MACR,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA,QAAA;AAAA,MACrC,SAAW,EAAA;AAAA,QACT,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA;AAC3B,KACD;AAAA,GACH;AACF,CAAA;;;;"}

package/dist/esm/components/VisualQueryBuilder/components/QueryOptionGroup.js

@@ -1,10 +1,9 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { css } from '@emotion/css';
 import { useToggle } from 'react-use';
 import { getValueFormat } from '@grafana/data';
 import { config } from '@grafana/runtime';
 import { useStyles2, Collapse, Tooltip, Icon } from '@grafana/ui';
-import 'react';
 import '../../QueryEditor/types.js';
 import 'lodash';
 import '../../QueryEditor/EditorList.js';
@@ -26,26 +25,17 @@ import 'rxjs/operators';
 function QueryOptionGroup({ title, children, collapsedInfo, queryStats }) {
   const [isOpen, toggleOpen] = useToggle(false);
   const styles = useStyles2(getStyles);
-  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
-    /* @__PURE__ */ jsx(
-      Collapse,
-      {
-        className: styles.collapse,
-        collapsible: true,
-        isOpen,
-        onToggle: toggleOpen,
-        label: /* @__PURE__ */ jsxs(EditorStack, { gap: 0, children: [
-          /* @__PURE__ */ jsx("h6", { className: styles.title, children: title }),
-          !isOpen && /* @__PURE__ */ jsx("div", { className: styles.description, children: collapsedInfo.map((x, i) => /* @__PURE__ */ jsx("span", { children: x }, i)) })
-        ] }),
-        children: /* @__PURE__ */ jsx("div", { className: styles.body, children })
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: styles.queryStatsWrap, children: [
-      queryStats && config.featureToggles.lokiQuerySplitting && /* @__PURE__ */ jsx(Tooltip, { content: "Note: the query will be split into multiple parts and executed in sequence. Query limits will only apply each individual part.", children: /* @__PURE__ */ jsx(Icon, { tabIndex: 0, name: "info-circle", className: styles.tooltip, size: "sm" }) }),
-      queryStats && /* @__PURE__ */ jsx("p", { className: styles.stats, children: generateQueryStats(queryStats) })
-    ] })
-  ] });
+  return /* @__PURE__ */ React.createElement("div", { className: styles.wrapper }, /* @__PURE__ */ React.createElement(
+    Collapse,
+    {
+      className: styles.collapse,
+      collapsible: true,
+      isOpen,
+      onToggle: toggleOpen,
+      label: /* @__PURE__ */ React.createElement(EditorStack, { gap: 0 }, /* @__PURE__ */ React.createElement("h6", { className: styles.title }, title), !isOpen && /* @__PURE__ */ React.createElement("div", { className: styles.description }, collapsedInfo.map((x, i) => /* @__PURE__ */ React.createElement("span", { key: i }, x))))
+    },
+    /* @__PURE__ */ React.createElement("div", { className: styles.body }, children)
+  ), /* @__PURE__ */ React.createElement("div", { className: styles.queryStatsWrap }, queryStats && config.featureToggles.lokiQuerySplitting && /* @__PURE__ */ React.createElement(Tooltip, { content: "Note: the query will be split into multiple parts and executed in sequence. Query limits will only apply each individual part." }, /* @__PURE__ */ React.createElement(Icon, { tabIndex: 0, name: "info-circle", className: styles.tooltip, size: "sm" })), queryStats && /* @__PURE__ */ React.createElement("p", { className: styles.stats }, generateQueryStats(queryStats))));
 }
 const getStyles = (theme) => {
   return {

package/dist/esm/components/VisualQueryBuilder/components/QueryOptionGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryOptionGroup.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryOptionGroup.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useToggle } from 'react-use';\n\nimport { getValueFormat, type GrafanaTheme2 } from '@grafana/data';\nimport { config } from '@grafana/runtime';\nimport { Collapse, Icon, Tooltip, useStyles2 } from '@grafana/ui';\n\nimport { type QueryStats } from '../types';\nimport { EditorStack } from '../../QueryEditor';\n\ninterface Props {\n  title: string;\n  collapsedInfo: string[];\n  queryStats?: QueryStats | null;\n}\n\nexport function QueryOptionGroup({ title, children, collapsedInfo, queryStats }: React.PropsWithChildren<Props>) {\n  const [isOpen, toggleOpen] = useToggle(false);\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.wrapper}>\n      <Collapse\n        className={styles.collapse}\n        collapsible\n        isOpen={isOpen}\n        onToggle={toggleOpen}\n        label={\n          <EditorStack gap={0}>\n            <h6 className={styles.title}>{title}</h6>\n            {!isOpen && (\n              <div className={styles.description}>\n                {collapsedInfo.map((x, i) => (\n                  <span key={i}>{x}</span>\n                ))}\n              </div>\n            )}\n          </EditorStack>\n        }\n      >\n        <div className={styles.body}>{children}</div>\n      </Collapse>\n      <div className={styles.queryStatsWrap}>\n        {/**TODO: This is Loki logic that should eventually be moved to Loki */}\n        {queryStats && config.featureToggles.lokiQuerySplitting && (\n          <Tooltip content=\"Note: the query will be split into multiple parts and executed in sequence. Query limits will only apply each individual part.\">\n            <Icon tabIndex={0} name=\"info-circle\" className={styles.tooltip} size=\"sm\" />\n          </Tooltip>\n        )}\n\n        {queryStats && <p className={styles.stats}>{generateQueryStats(queryStats)}</p>}\n      </div>\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    collapse: css({\n      backgroundColor: 'unset',\n      border: 'unset',\n      marginBottom: 0,\n\n      ['> button']: {\n        padding: theme.spacing(0, 1),\n      },\n    }),\n    wrapper: css({\n      width: '100%',\n      display: 'flex',\n      justifyContent: 'space-between',\n      alignItems: 'baseline',\n    }),\n    title: css({\n      flexGrow: 1,\n      overflow: 'hidden',\n      fontSize: theme.typography.bodySmall.fontSize,\n      fontWeight: theme.typography.fontWeightMedium,\n      margin: 0,\n    }),\n    description: css({\n      color: theme.colors.text.secondary,\n      fontSize: theme.typography.bodySmall.fontSize,\n      fontWeight: theme.typography.bodySmall.fontWeight,\n      paddingLeft: theme.spacing(2),\n      gap: theme.spacing(2),\n      display: 'flex',\n    }),\n    body: css({\n      display: 'flex',\n      gap: theme.spacing(2),\n      flexWrap: 'wrap',\n    }),\n    queryStatsWrap: css({\n      display: 'flex',\n      alignItems: 'center',\n      alignSelf: 'flex-start',\n      label: 'query-stats-wrap',\n      padding: theme.spacing(1),\n    }),\n    stats: css({\n      margin: '0px',\n      color: theme.colors.text.secondary,\n      fontSize: theme.typography.bodySmall.fontSize,\n    }),\n    tooltip: css({\n      marginRight: theme.spacing(0.25),\n    }),\n  };\n};\n\nconst generateQueryStats = (queryStats: QueryStats) => {\n  if (queryStats.message) {\n    return queryStats.message;\n  }\n\n  return `This query will process approximately ${convertUnits(queryStats)}.`;\n};\n\nconst convertUnits = (queryStats: QueryStats): string => {\n  const { text, suffix } = getValueFormat('bytes')(queryStats.bytes, 1);\n  return text + suffix;\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,SAAS,iBAAiB,EAAE,KAAA,EAAO,QAAU,EAAA,aAAA,EAAe,YAA8C,EAAA;AAC/G,EAAA,MAAM,CAAC,MAAA,EAAQ,UAAU,CAAA,GAAI,UAAU,KAAK,CAAA;AAC5C,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,OACrB,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAO,CAAA,QAAA;AAAA,QAClB,WAAW,EAAA,IAAA;AAAA,QACX,MAAA;AAAA,QACA,QAAU,EAAA,UAAA;AAAA,QACV,KACE,kBAAA,IAAA,CAAC,WAAY,EAAA,EAAA,GAAA,EAAK,CAChB,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAG,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,KAAA,EAAQ,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,UACnC,CAAC,MACA,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,OAAO,WACpB,EAAA,QAAA,EAAA,aAAA,CAAc,GAAI,CAAA,CAAC,GAAG,CACrB,qBAAA,GAAA,CAAC,UAAc,QAAJ,EAAA,CAAA,EAAA,EAAA,CAAM,CAClB,CACH,EAAA;AAAA,SAEJ,EAAA,CAAA;AAAA,QAGF,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,MAAO,QAAS,EAAA;AAAA;AAAA,KACzC;AAAA,oBACC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,cAEpB,EAAA,QAAA,EAAA;AAAA,MAAA,UAAA,IAAc,OAAO,cAAe,CAAA,kBAAA,wBAClC,OAAQ,EAAA,EAAA,OAAA,EAAQ,kIACf,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,QAAU,EAAA,CAAA,EAAG,MAAK,aAAc,EAAA,SAAA,EAAW,OAAO,OAAS,EAAA,IAAA,EAAK,MAAK,CAC7E,EAAA,CAAA;AAAA,MAGD,UAAA,wBAAe,GAAE,EAAA,EAAA,SAAA,EAAW,OAAO,KAAQ,EAAA,QAAA,EAAA,kBAAA,CAAmB,UAAU,CAAE,EAAA;AAAA,KAC7E,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,UAAU,GAAI,CAAA;AAAA,MACZ,eAAiB,EAAA,OAAA;AAAA,MACjB,MAAQ,EAAA,OAAA;AAAA,MACR,YAAc,EAAA,CAAA;AAAA,MAEd,CAAC,UAAU,GAAG;AAAA,QACZ,OAAS,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,CAAC;AAAA;AAC7B,KACD,CAAA;AAAA,IACD,SAAS,GAAI,CAAA;AAAA,MACX,KAAO,EAAA,MAAA;AAAA,MACP,OAAS,EAAA,MAAA;AAAA,MACT,cAAgB,EAAA,eAAA;AAAA,MAChB,UAAY,EAAA;AAAA,KACb,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,QAAU,EAAA,CAAA;AAAA,MACV,QAAU,EAAA,QAAA;AAAA,MACV,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA,QAAA;AAAA,MACrC,UAAA,EAAY,MAAM,UAAW,CAAA,gBAAA;AAAA,MAC7B,MAAQ,EAAA;AAAA,KACT,CAAA;AAAA,IACD,aAAa,GAAI,CAAA;AAAA,MACf,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA,QAAA;AAAA,MACrC,UAAA,EAAY,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA,UAAA;AAAA,MACvC,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC5B,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACpB,OAAS,EAAA;AAAA,KACV,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,OAAS,EAAA,MAAA;AAAA,MACT,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACpB,QAAU,EAAA;AAAA,KACX,CAAA;AAAA,IACD,gBAAgB,GAAI,CAAA;AAAA,MAClB,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,SAAW,EAAA,YAAA;AAAA,MACX,KAAO,EAAA,kBAAA;AAAA,MACP,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,KACzB,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,MAAQ,EAAA,KAAA;AAAA,MACR,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA;AAAA,KACtC,CAAA;AAAA,IACD,SAAS,GAAI,CAAA;AAAA,MACX,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,IAAI;AAAA,KAChC;AAAA,GACH;AACF,CAAA;AAEA,MAAM,kBAAA,GAAqB,CAAC,UAA2B,KAAA;AACrD,EAAA,IAAI,WAAW,OAAS,EAAA;AACtB,IAAA,OAAO,UAAW,CAAA,OAAA;AAAA;AAGpB,EAAO,OAAA,CAAA,sCAAA,EAAyC,YAAa,CAAA,UAAU,CAAC,CAAA,CAAA,CAAA;AAC1E,CAAA;AAEA,MAAM,YAAA,GAAe,CAAC,UAAmC,KAAA;AACvD,EAAM,MAAA,EAAE,MAAM,MAAO,EAAA,GAAI,eAAe,OAAO,CAAA,CAAE,UAAW,CAAA,KAAA,EAAO,CAAC,CAAA;AACpE,EAAA,OAAO,IAAO,GAAA,MAAA;AAChB,CAAA;;;;"}
+{"version":3,"file":"QueryOptionGroup.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryOptionGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from '@emotion/css';\nimport { useToggle } from 'react-use';\n\nimport { getValueFormat, type GrafanaTheme2 } from '@grafana/data';\nimport { config } from '@grafana/runtime';\nimport { Collapse, Icon, Tooltip, useStyles2 } from '@grafana/ui';\n\nimport { type QueryStats } from '../types';\nimport { EditorStack } from '../../QueryEditor';\n\ninterface Props {\n  title: string;\n  collapsedInfo: string[];\n  queryStats?: QueryStats | null;\n}\n\nexport function QueryOptionGroup({ title, children, collapsedInfo, queryStats }: React.PropsWithChildren<Props>) {\n  const [isOpen, toggleOpen] = useToggle(false);\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.wrapper}>\n      <Collapse\n        className={styles.collapse}\n        collapsible\n        isOpen={isOpen}\n        onToggle={toggleOpen}\n        label={\n          <EditorStack gap={0}>\n            <h6 className={styles.title}>{title}</h6>\n            {!isOpen && (\n              <div className={styles.description}>\n                {collapsedInfo.map((x, i) => (\n                  <span key={i}>{x}</span>\n                ))}\n              </div>\n            )}\n          </EditorStack>\n        }\n      >\n        <div className={styles.body}>{children}</div>\n      </Collapse>\n      <div className={styles.queryStatsWrap}>\n        {/**TODO: This is Loki logic that should eventually be moved to Loki */}\n        {queryStats && config.featureToggles.lokiQuerySplitting && (\n          <Tooltip content=\"Note: the query will be split into multiple parts and executed in sequence. Query limits will only apply each individual part.\">\n            <Icon tabIndex={0} name=\"info-circle\" className={styles.tooltip} size=\"sm\" />\n          </Tooltip>\n        )}\n\n        {queryStats && <p className={styles.stats}>{generateQueryStats(queryStats)}</p>}\n      </div>\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    collapse: css({\n      backgroundColor: 'unset',\n      border: 'unset',\n      marginBottom: 0,\n\n      ['> button']: {\n        padding: theme.spacing(0, 1),\n      },\n    }),\n    wrapper: css({\n      width: '100%',\n      display: 'flex',\n      justifyContent: 'space-between',\n      alignItems: 'baseline',\n    }),\n    title: css({\n      flexGrow: 1,\n      overflow: 'hidden',\n      fontSize: theme.typography.bodySmall.fontSize,\n      fontWeight: theme.typography.fontWeightMedium,\n      margin: 0,\n    }),\n    description: css({\n      color: theme.colors.text.secondary,\n      fontSize: theme.typography.bodySmall.fontSize,\n      fontWeight: theme.typography.bodySmall.fontWeight,\n      paddingLeft: theme.spacing(2),\n      gap: theme.spacing(2),\n      display: 'flex',\n    }),\n    body: css({\n      display: 'flex',\n      gap: theme.spacing(2),\n      flexWrap: 'wrap',\n    }),\n    queryStatsWrap: css({\n      display: 'flex',\n      alignItems: 'center',\n      alignSelf: 'flex-start',\n      label: 'query-stats-wrap',\n      padding: theme.spacing(1),\n    }),\n    stats: css({\n      margin: '0px',\n      color: theme.colors.text.secondary,\n      fontSize: theme.typography.bodySmall.fontSize,\n    }),\n    tooltip: css({\n      marginRight: theme.spacing(0.25),\n    }),\n  };\n};\n\nconst generateQueryStats = (queryStats: QueryStats) => {\n  if (queryStats.message) {\n    return queryStats.message;\n  }\n\n  return `This query will process approximately ${convertUnits(queryStats)}.`;\n};\n\nconst convertUnits = (queryStats: QueryStats): string => {\n  const { text, suffix } = getValueFormat('bytes')(queryStats.bytes, 1);\n  return text + suffix;\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/components/VisualQueryBuilder/components/RawQuery.js

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { cx, css } from '@emotion/css';
 import Prism from 'prismjs';
 import { textUtil } from '@grafana/data';
@@ -8,7 +8,7 @@ function RawQuery({ query, language, className }) {
   const theme = useTheme2();
   const styles = getStyles(theme);
   const highlighted = Prism.highlight(query, language.grammar, language.name);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cx(styles.editorField, "prism-syntax-highlight", className),

package/dist/esm/components/VisualQueryBuilder/components/RawQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"RawQuery.js","sources":["../../../../../src/components/VisualQueryBuilder/components/RawQuery.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport Prism, { type Grammar } from 'prismjs';\n\nimport { type GrafanaTheme2, textUtil } from '@grafana/data';\nimport { useTheme2 } from '@grafana/ui';\n\ninterface Props {\n  query: string;\n  language: {\n    grammar: Grammar;\n    name: string;\n  };\n  className?: string;\n}\nexport function RawQuery({ query, language, className }: Props) {\n  const theme = useTheme2();\n  const styles = getStyles(theme);\n  const highlighted = Prism.highlight(query, language.grammar, language.name);\n\n  return (\n    <div\n      className={cx(styles.editorField, 'prism-syntax-highlight', className)}\n      aria-label=\"selector\"\n      dangerouslySetInnerHTML={{ __html: textUtil.sanitize(highlighted) }}\n    />\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    editorField: css({\n      fontFamily: theme.typography.fontFamilyMonospace,\n      fontSize: theme.typography.bodySmall.fontSize,\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;AAcO,SAAS,QAAS,CAAA,EAAE,KAAO,EAAA,QAAA,EAAU,WAAoB,EAAA;AAC9D,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,UAAU,KAAK,CAAA;AAC9B,EAAA,MAAM,cAAc,KAAM,CAAA,SAAA,CAAU,OAAO,QAAS,CAAA,OAAA,EAAS,SAAS,IAAI,CAAA;AAE1E,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,EAAA,CAAG,MAAO,CAAA,WAAA,EAAa,0BAA0B,SAAS,CAAA;AAAA,MACrE,YAAW,EAAA,UAAA;AAAA,MACX,yBAAyB,EAAE,MAAA,EAAQ,QAAS,CAAA,QAAA,CAAS,WAAW,CAAE;AAAA;AAAA,GACpE;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,aAAa,GAAI,CAAA;AAAA,MACf,UAAA,EAAY,MAAM,UAAW,CAAA,mBAAA;AAAA,MAC7B,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA;AAAA,KACtC;AAAA,GACH;AACF,CAAA;;;;"}
+{"version":3,"file":"RawQuery.js","sources":["../../../../../src/components/VisualQueryBuilder/components/RawQuery.tsx"],"sourcesContent":["import React from 'react';\nimport { css, cx } from '@emotion/css';\nimport Prism, { type Grammar } from 'prismjs';\n\nimport { type GrafanaTheme2, textUtil } from '@grafana/data';\nimport { useTheme2 } from '@grafana/ui';\n\ninterface Props {\n  query: string;\n  language: {\n    grammar: Grammar;\n    name: string;\n  };\n  className?: string;\n}\nexport function RawQuery({ query, language, className }: Props) {\n  const theme = useTheme2();\n  const styles = getStyles(theme);\n  const highlighted = Prism.highlight(query, language.grammar, language.name);\n\n  return (\n    <div\n      className={cx(styles.editorField, 'prism-syntax-highlight', className)}\n      aria-label=\"selector\"\n      dangerouslySetInnerHTML={{ __html: textUtil.sanitize(highlighted) }}\n    />\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    editorField: css({\n      fontFamily: theme.typography.fontFamilyMonospace,\n      fontSize: theme.typography.bodySmall.fontSize,\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;AAeO,SAAS,QAAS,CAAA,EAAE,KAAO,EAAA,QAAA,EAAU,WAAoB,EAAA;AAC9D,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,UAAU,KAAK,CAAA;AAC9B,EAAA,MAAM,cAAc,KAAM,CAAA,SAAA,CAAU,OAAO,QAAS,CAAA,OAAA,EAAS,SAAS,IAAI,CAAA;AAE1E,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,EAAA,CAAG,MAAO,CAAA,WAAA,EAAa,0BAA0B,SAAS,CAAA;AAAA,MACrE,YAAW,EAAA,UAAA;AAAA,MACX,yBAAyB,EAAE,MAAA,EAAQ,QAAS,CAAA,QAAA,CAAS,WAAW,CAAE;AAAA;AAAA,GACpE;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,aAAa,GAAI,CAAA;AAAA,MACf,UAAA,EAAY,MAAM,UAAW,CAAA,mBAAA;AAAA,MAC7B,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA;AAAA,KACtC;AAAA,GACH;AACF,CAAA;;;;"}