@grafana/plugin-ui 0.9.5 → 0.10.0

package/dist/esm/components/QueryEditor/query-editor-raw/RawEditor.js

@@ -0,0 +1,96 @@
+import { css } from '@emotion/css';
+import React, { useState, useMemo } from 'react';
+import { useMeasure } from 'react-use';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import '@grafana/data';
+import { useTheme2, useStyles2, Modal } from '@grafana/ui';
+import { QueryEditorRaw } from './QueryEditorRaw.js';
+import { QueryToolbox } from './QueryToolbox.js';
+import '../types.js';
+
+function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidate, range }) {
+  const theme = useTheme2();
+  const styles = useStyles2(getStyles);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [toolboxRef, toolboxMeasure] = useMeasure();
+  const [editorRef, editorMeasure] = useMeasure();
+  const completionProvider = useMemo(() => db.getSqlCompletionProvider(), [db]);
+  const renderQueryEditor = (width, height) => {
+    return /* @__PURE__ */ React.createElement(
+      QueryEditorRaw,
+      {
+        completionProvider,
+        query,
+        width,
+        height: height ? height - toolboxMeasure.height : undefined,
+        onChange
+      },
+      ({ formatQuery }) => {
+        return /* @__PURE__ */ React.createElement("div", { ref: toolboxRef }, /* @__PURE__ */ React.createElement(
+          QueryToolbox,
+          {
+            db,
+            query: queryToValidate,
+            onValidate,
+            onFormatCode: formatQuery,
+            showTools: true,
+            range,
+            onExpand: setIsExpanded,
+            isExpanded
+          }
+        ));
+      }
+    );
+  };
+  const renderEditor = (standalone = false) => {
+    return standalone ? /* @__PURE__ */ React.createElement(AutoSizer, null, ({ width, height }) => {
+      return renderQueryEditor(width, height);
+    }) : /* @__PURE__ */ React.createElement("div", { ref: editorRef }, renderQueryEditor());
+  };
+  const renderPlaceholder = () => {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          width: editorMeasure.width,
+          height: editorMeasure.height,
+          background: theme.colors.background.primary,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        }
+      },
+      "Editing in expanded code editor"
+    );
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, isExpanded ? renderPlaceholder() : renderEditor(), isExpanded && /* @__PURE__ */ React.createElement(
+    Modal,
+    {
+      title: `Query ${query.refId}`,
+      closeOnBackdropClick: false,
+      closeOnEscape: false,
+      className: styles.modal,
+      contentClassName: styles.modalContent,
+      isOpen: isExpanded,
+      onDismiss: () => {
+        setIsExpanded(false);
+      }
+    },
+    renderEditor(true)
+  ));
+}
+function getStyles(theme) {
+  return {
+    modal: css`
+      width: 95vw;
+      height: 95vh;
+    `,
+    modalContent: css`
+      height: 100%;
+      padding-top: 0;
+    `
+  };
+}
+
+export { RawEditor };
+//# sourceMappingURL=RawEditor.js.map

package/dist/esm/components/QueryEditor/query-editor-raw/RawEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RawEditor.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/RawEditor.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useMemo, useState } from 'react';\nimport { useMeasure } from 'react-use';\n// @ts-ignore\nimport AutoSizer from 'react-virtualized-auto-sizer';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Modal, useStyles2, useTheme2 } from '@grafana/ui';\n\nimport { QueryEditorRaw } from './QueryEditorRaw';\nimport { QueryToolbox } from './QueryToolbox';\nimport { type QueryEditorProps, type SQLQuery } from '../types';\n\ninterface RawEditorProps extends Omit<QueryEditorProps, 'onChange'> {\n  onRunQuery: () => void;\n  onChange: (q: SQLQuery, processQuery: boolean) => void;\n  onValidate: (isValid: boolean) => void;\n  queryToValidate: SQLQuery;\n}\n\nexport function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidate, range }: RawEditorProps) {\n  const theme = useTheme2();\n  const styles = useStyles2(getStyles);\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [toolboxRef, toolboxMeasure] = useMeasure<HTMLDivElement>();\n  const [editorRef, editorMeasure] = useMeasure<HTMLDivElement>();\n\n  const completionProvider = useMemo(() => db.getSqlCompletionProvider(), [db]);\n\n  const renderQueryEditor = (width?: number, height?: number) => {\n    return (\n      <QueryEditorRaw\n        completionProvider={completionProvider}\n        query={query}\n        width={width}\n        height={height ? height - toolboxMeasure.height : undefined}\n        onChange={onChange}\n      >\n        {({ formatQuery }) => {\n          return (\n            <div ref={toolboxRef}>\n              <QueryToolbox\n                db={db}\n                query={queryToValidate}\n                onValidate={onValidate}\n                onFormatCode={formatQuery}\n                showTools\n                range={range}\n                onExpand={setIsExpanded}\n                isExpanded={isExpanded}\n              />\n            </div>\n          );\n        }}\n      </QueryEditorRaw>\n    );\n  };\n\n  interface AutoSizerProps {\n    width: number;\n    height: number;\n  }\n\n  const renderEditor = (standalone = false) => {\n    return standalone ? (\n      <AutoSizer>\n        {({ width, height }: AutoSizerProps) => {\n          return renderQueryEditor(width, height);\n        }}\n      </AutoSizer>\n    ) : (\n      <div ref={editorRef}>{renderQueryEditor()}</div>\n    );\n  };\n\n  const renderPlaceholder = () => {\n    return (\n      <div\n        style={{\n          width: editorMeasure.width,\n          height: editorMeasure.height,\n          background: theme.colors.background.primary,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        Editing in expanded code editor\n      </div>\n    );\n  };\n\n  return (\n    <>\n      {isExpanded ? renderPlaceholder() : renderEditor()}\n      {isExpanded && (\n        <Modal\n          title={`Query ${query.refId}`}\n          closeOnBackdropClick={false}\n          closeOnEscape={false}\n          className={styles.modal}\n          contentClassName={styles.modalContent}\n          isOpen={isExpanded}\n          onDismiss={() => {\n            setIsExpanded(false);\n          }}\n        >\n          {renderEditor(true)}\n        </Modal>\n      )}\n    </>\n  );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    modal: css`\n      width: 95vw;\n      height: 95vh;\n    `,\n    modalContent: css`\n      height: 100%;\n      padding-top: 0;\n    `,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/QueryEditor/types.js

@@ -0,0 +1,33 @@
+import 'react-awesome-query-builder';
+import { toOption as toOption$1 } from '@grafana/data';
+import 'lodash';
+import '@grafana/ui';
+import 'react';
+import 'uuid';
+import '@grafana/runtime';
+import '../SQLEditor/utils/debugger.js';
+import '../SQLEditor/standardSql/macros.js';
+
+var _a;
+var QueryFormat = /* @__PURE__ */ ((QueryFormat2) => {
+  QueryFormat2[QueryFormat2["Timeseries"] = 0] = "Timeseries";
+  QueryFormat2[QueryFormat2["Table"] = 1] = "Table";
+  QueryFormat2[QueryFormat2["Logs"] = 2] = "Logs";
+  QueryFormat2[QueryFormat2["Trace"] = 3] = "Trace";
+  QueryFormat2[QueryFormat2["OptionMulti"] = 4] = "OptionMulti";
+  return QueryFormat2;
+})(QueryFormat || {});
+var EditorMode = /* @__PURE__ */ ((EditorMode2) => {
+  EditorMode2["Builder"] = "builder";
+  EditorMode2["Code"] = "code";
+  return EditorMode2;
+})(EditorMode || {});
+const QUERY_FORMAT_OPTIONS = [
+  { label: "Time series", value: 0 /* Timeseries */ },
+  { label: "Table", value: 1 /* Table */ }
+];
+const backWardToOption = (value) => ({ label: value, value });
+const toOption = (_a = toOption$1) != null ? _a : backWardToOption;
+
+export { EditorMode, QUERY_FORMAT_OPTIONS, QueryFormat, toOption };
+//# sourceMappingURL=types.js.map

package/dist/esm/components/QueryEditor/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../../src/components/QueryEditor/types.ts"],"sourcesContent":["import { type JsonTree } from 'react-awesome-query-builder';\n\nimport {\n  type DataFrame,\n  type DataSourceJsonData,\n  type MetricFindValue,\n  type SelectableValue,\n  type TimeRange,\n  toOption as toOptionFromData,\n} from '@grafana/data';\n\nimport { type DataQuery } from '@grafana/schema';\n\nimport { type QueryWithDefaults } from './defaults';\nimport {\n  type QueryEditorFunctionExpression,\n  type QueryEditorGroupByExpression,\n  type QueryEditorPropertyExpression,\n} from './expressions';\nimport { type CompletionItemKind, type LanguageCompletionProvider } from '../SQLEditor';\n\nexport interface SqlQueryForInterpolation {\n  dataset?: string;\n  alias?: string;\n  format?: QueryFormat;\n  rawSql?: string;\n  refId: string;\n  hide?: boolean;\n}\n\nexport interface SQLConnectionLimits {\n  maxOpenConns: number;\n  maxIdleConns: number;\n  connMaxLifetime: number;\n}\n\nexport interface SQLOptions extends SQLConnectionLimits, DataSourceJsonData {\n  tlsAuth: boolean;\n  tlsAuthWithCACert: boolean;\n  timezone: string;\n  tlsSkipVerify: boolean;\n  user: string;\n  database: string;\n  url: string;\n  timeInterval: string;\n}\n\n// Match the Enums Expected in SqlUtil and SqlDS\n// https://github.com/grafana/grafana-plugin-sdk-go/blob/main/data/sqlutil/query.go#L18-L29\nexport enum QueryFormat {\n  Timeseries,\n  Table,\n  Logs,\n  Trace,\n  OptionMulti,\n}\n\nexport enum EditorMode {\n  Builder = 'builder',\n  Code = 'code',\n}\n\nexport interface SQLQuery extends DataQuery {\n  alias?: string;\n  format?: QueryFormat;\n  rawSql?: string;\n  dataset?: string;\n  table?: string;\n  sql?: SQLExpression;\n  editorMode?: EditorMode;\n  rawQuery?: boolean;\n}\n\nexport interface NameValue {\n  name: string;\n  value: string;\n}\n\nexport type SQLFilters = NameValue[];\n\nexport interface SQLExpression {\n  columns?: QueryEditorFunctionExpression[];\n  whereJsonTree?: JsonTree;\n  whereString?: string;\n  filters?: SQLFilters;\n  groupBy?: QueryEditorGroupByExpression[];\n  orderBy?: QueryEditorPropertyExpression;\n  orderByDirection?: 'ASC' | 'DESC';\n  limit?: number;\n  offset?: number;\n}\n\nexport interface TableSchema {\n  name?: string;\n  schema?: TableFieldSchema[];\n}\n\nexport interface TableFieldSchema {\n  name: string;\n  description?: string;\n  type: string;\n  repeated: boolean;\n  schema: TableFieldSchema[];\n}\n\nexport interface QueryRowFilter {\n  filter: boolean;\n  group: boolean;\n  order: boolean;\n  preview: boolean;\n}\n\nexport const QUERY_FORMAT_OPTIONS = [\n  { label: 'Time series', value: QueryFormat.Timeseries },\n  { label: 'Table', value: QueryFormat.Table },\n];\n\nconst backWardToOption = (value: string) => ({ label: value, value });\n\nexport const toOption = toOptionFromData ?? backWardToOption;\n\nexport interface ResourceSelectorProps {\n  disabled?: boolean;\n  className?: string;\n  applyDefault?: boolean;\n}\n// React Awesome Query builder field types.\n// These are responsible for rendering the correct UI for the field.\nexport type RAQBFieldTypes = 'text' | 'number' | 'boolean' | 'datetime' | 'date' | 'time';\n\nexport interface SQLSelectableValue extends SelectableValue {\n  type?: string;\n  raqbFieldType?: RAQBFieldTypes;\n}\n\nexport interface Aggregate {\n  id: string;\n  name: string;\n  description?: string;\n}\n\nexport interface DB {\n  init?: (datasourceId?: string) => Promise<boolean>;\n  datasets: () => Promise<string[]>;\n  tables: (dataset?: string) => Promise<string[]>;\n  fields: (query: SQLQuery, order?: boolean) => Promise<SQLSelectableValue[]>;\n  validateQuery: (query: SQLQuery, range?: TimeRange) => Promise<ValidationResults>;\n  dsID: () => number;\n  dispose?: (dsID?: string) => void;\n  lookup: (path?: string) => Promise<Array<{ name: string; completion: string }>>;\n  getSqlCompletionProvider: () => LanguageCompletionProvider;\n  toRawSql?: (query: SQLQuery) => string;\n  functions: () => Promise<Aggregate[]>;\n  labels?: Map<'dataset', string>;\n  disableDatasets?: boolean;\n}\n\nexport interface QueryEditorProps {\n  db: DB;\n  query: QueryWithDefaults;\n  onChange: (query: SQLQuery) => void;\n  range?: TimeRange;\n}\n\nexport interface ValidationResults {\n  query: SQLQuery;\n  rawSql?: string;\n  error: string;\n  isError: boolean;\n  isValid: boolean;\n  statistics?: {\n    TotalBytesProcessed: number;\n  } | null;\n}\n\nexport interface SqlQueryModel {\n  interpolate: () => string;\n  quoteLiteral: (v: string) => string;\n}\n\nexport interface ResponseParser {\n  transformMetricFindResponse: (frame: DataFrame) => MetricFindValue[];\n}\n\nexport interface MetaDefinition {\n  name: string;\n  completion?: string;\n  kind: CompletionItemKind;\n}\n"],"names":["QueryFormat","EditorMode","toOptionFromData"],"mappings":";;;;;;;;;;AAAA,IAAA,EAAA;AAiDY,IAAA,WAAA,qBAAAA,YAAL,KAAA;AACL,EAAAA,YAAA,CAAA,YAAA,CAAA,YAAA,CAAA,GAAA,CAAA,CAAA,GAAA,YAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,aAAA,CAAA,GAAA,CAAA,CAAA,GAAA,aAAA;AALU,EAAAA,OAAAA,YAAAA;AAAA,CAAA,EAAA,WAAA,IAAA,EAAA;AAQA,IAAA,UAAA,qBAAAC,WAAL,KAAA;AACL,EAAAA,YAAA,SAAU,CAAA,GAAA,SAAA;AACV,EAAAA,YAAA,MAAO,CAAA,GAAA,MAAA;AAFG,EAAAA,OAAAA,WAAAA;AAAA,CAAA,EAAA,UAAA,IAAA,EAAA;AAuDL,MAAM,oBAAuB,GAAA;AAAA,EAClC,EAAE,KAAA,EAAO,aAAe,EAAA,KAAA,EAAO,CAAuB,mBAAA;AAAA,EACtD,EAAE,KAAA,EAAO,OAAS,EAAA,KAAA,EAAO,CAAkB;AAC7C;AAEA,MAAM,mBAAmB,CAAC,KAAA,MAAmB,EAAE,KAAA,EAAO,OAAO,KAAM,EAAA,CAAA;AAE5D,MAAM,YAAW,EAAoB,GAAAC,UAAA,KAAA,IAAA,GAAA,EAAA,GAAA;;;;"}

package/dist/esm/components/QueryEditor/utils/formatSQL.js

@@ -0,0 +1,10 @@
+import sqlFormatter from 'sql-formatter-plus';
+
+function formatSQL(q) {
+  return sqlFormatter.format(q).replace(/(\$ \{ .* \})|(\$ __)|(\$ \w+)/g, (m) => {
+    return m.replace(/\s/g, "");
+  });
+}
+
+export { formatSQL };
+//# sourceMappingURL=formatSQL.js.map

package/dist/esm/components/QueryEditor/utils/formatSQL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatSQL.js","sources":["../../../../../src/components/QueryEditor/utils/formatSQL.ts"],"sourcesContent":["// @ts-ignore\nimport sqlFormatter from 'sql-formatter-plus';\n\nexport function formatSQL(q: string) {\n  return sqlFormatter.format(q).replace(/(\\$ \\{ .* \\})|(\\$ __)|(\\$ \\w+)/g, (m: string) => {\n    return m.replace(/\\s/g, '');\n  });\n}\n"],"names":[],"mappings":";;AAGO,SAAS,UAAU,CAAW,EAAA;AACnC,EAAA,OAAO,aAAa,MAAO,CAAA,CAAC,EAAE,OAAQ,CAAA,iCAAA,EAAmC,CAAC,CAAc,KAAA;AACtF,IAAO,OAAA,CAAA,CAAE,OAAQ,CAAA,KAAA,EAAO,EAAE,CAAA;AAAA,GAC3B,CAAA;AACH;;;;"}

package/dist/esm/components/QueryEditor/utils/sql.utils.js

@@ -0,0 +1,93 @@
+import { isEmpty } from 'lodash';
+import { QueryEditorExpressionType, QueryEditorPropertyType } from '../expressions.js';
+import '../types.js';
+
+function getRawSqlFn(db) {
+  return db.toRawSql ? db.toRawSql : (query) => toRawSql(query, Boolean(db.disableDatasets));
+}
+function toRawSql({ sql, dataset, table }, disableDatasets) {
+  var _a, _b, _c, _d;
+  let rawQuery = "";
+  if (!sql || !haveColumns(sql.columns)) {
+    return rawQuery;
+  }
+  rawQuery += createSelectClause(sql.columns);
+  if (disableDatasets) {
+    if (table) {
+      rawQuery += `FROM ${table} `;
+    }
+  } else {
+    if (dataset && table) {
+      rawQuery += `FROM ${dataset}.${table} `;
+    }
+  }
+  if (sql.whereString) {
+    rawQuery += `WHERE ${sql.whereString} `;
+  }
+  if ((_b = (_a = sql.groupBy) == null ? undefined : _a[0]) == null ? undefined : _b.property.name) {
+    const groupBy = sql.groupBy.map((g) => g.property.name).filter((g) => !isEmpty(g));
+    rawQuery += `GROUP BY ${groupBy.join(", ")} `;
+  }
+  if ((_c = sql.orderBy) == null ? undefined : _c.property.name) {
+    rawQuery += `ORDER BY ${sql.orderBy.property.name} `;
+  }
+  if (((_d = sql.orderBy) == null ? undefined : _d.property.name) && sql.orderByDirection) {
+    rawQuery += `${sql.orderByDirection} `;
+  }
+  if (sql.limit !== undefined && sql.limit >= 0) {
+    rawQuery += `LIMIT ${sql.limit} `;
+  }
+  return rawQuery;
+}
+function createSelectClause(sqlColumns) {
+  const columns = sqlColumns.map((c) => {
+    var _a, _b;
+    let rawColumn = "";
+    if (c.name) {
+      rawColumn += `${c.name}(${(_a = c.parameters) == null ? undefined : _a.map((p) => `${p.name}`)})`;
+    } else {
+      rawColumn += `${(_b = c.parameters) == null ? undefined : _b.map((p) => `${p.name}`)}`;
+    }
+    return rawColumn;
+  });
+  return `SELECT ${columns.join(", ")} `;
+}
+function haveColumns(columns) {
+  if (!columns) {
+    return false;
+  }
+  const haveColumn = columns.some((c) => {
+    var _a, _b;
+    return ((_a = c.parameters) == null ? undefined : _a.length) || ((_b = c.parameters) == null ? undefined : _b.some((p) => p.name));
+  });
+  const haveFunction = columns.some((c) => c.name);
+  return haveColumn || haveFunction;
+}
+function setGroupByField(field) {
+  return {
+    type: QueryEditorExpressionType.GroupBy,
+    property: {
+      type: QueryEditorPropertyType.String,
+      name: field
+    }
+  };
+}
+function setPropertyField(field) {
+  return {
+    type: QueryEditorExpressionType.Property,
+    property: {
+      type: QueryEditorPropertyType.String,
+      name: field
+    }
+  };
+}
+function createFunctionField(functionName) {
+  return {
+    type: QueryEditorExpressionType.Function,
+    name: functionName,
+    parameters: []
+  };
+}
+
+export { createFunctionField, getRawSqlFn, haveColumns, setGroupByField, setPropertyField, toRawSql };
+//# sourceMappingURL=sql.utils.js.map

package/dist/esm/components/QueryEditor/utils/sql.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sql.utils.js","sources":["../../../../../src/components/QueryEditor/utils/sql.utils.ts"],"sourcesContent":["import { isEmpty } from 'lodash';\n\nimport {\n  QueryEditorExpressionType,\n  type QueryEditorFunctionExpression,\n  type QueryEditorGroupByExpression,\n  type QueryEditorPropertyExpression,\n  QueryEditorPropertyType,\n} from '../expressions';\nimport { type SQLQuery, type SQLExpression, type DB } from '../types';\n\nexport function getRawSqlFn(db: DB) {\n  return db.toRawSql ? db.toRawSql : (query: SQLQuery) => toRawSql(query, Boolean(db.disableDatasets));\n}\n\nexport function toRawSql({ sql, dataset, table }: SQLQuery, disableDatasets: boolean): string {\n  let rawQuery = '';\n\n  if (!sql || !haveColumns(sql.columns)) {\n    return rawQuery;\n  }\n\n  rawQuery += createSelectClause(sql.columns);\n\n  if (disableDatasets) {\n    if (table) {\n      rawQuery += `FROM ${table} `;\n    }\n  } else {\n    if (dataset && table) {\n      rawQuery += `FROM ${dataset}.${table} `;\n    }\n  }\n\n  if (sql.whereString) {\n    rawQuery += `WHERE ${sql.whereString} `;\n  }\n\n  if (sql.groupBy?.[0]?.property.name) {\n    const groupBy = sql.groupBy.map((g) => g.property.name).filter((g) => !isEmpty(g));\n    rawQuery += `GROUP BY ${groupBy.join(', ')} `;\n  }\n\n  if (sql.orderBy?.property.name) {\n    rawQuery += `ORDER BY ${sql.orderBy.property.name} `;\n  }\n\n  if (sql.orderBy?.property.name && sql.orderByDirection) {\n    rawQuery += `${sql.orderByDirection} `;\n  }\n\n  if (sql.limit !== undefined && sql.limit >= 0) {\n    rawQuery += `LIMIT ${sql.limit} `;\n  }\n  return rawQuery;\n}\n\nfunction createSelectClause(sqlColumns: NonNullable<SQLExpression['columns']>): string {\n  const columns = sqlColumns.map((c) => {\n    let rawColumn = '';\n    if (c.name) {\n      rawColumn += `${c.name}(${c.parameters?.map((p) => `${p.name}`)})`;\n    } else {\n      rawColumn += `${c.parameters?.map((p) => `${p.name}`)}`;\n    }\n    return rawColumn;\n  });\n  return `SELECT ${columns.join(', ')} `;\n}\n\nexport function haveColumns(columns: SQLExpression['columns']): columns is NonNullable<SQLExpression['columns']> {\n  if (!columns) {\n    return false;\n  }\n\n  const haveColumn = columns.some((c) => c.parameters?.length || c.parameters?.some((p) => p.name));\n  const haveFunction = columns.some((c) => c.name);\n  return haveColumn || haveFunction;\n}\n\n/**\n * Creates a GroupByExpression for a specified field\n */\nexport function setGroupByField(field?: string): QueryEditorGroupByExpression {\n  return {\n    type: QueryEditorExpressionType.GroupBy,\n    property: {\n      type: QueryEditorPropertyType.String,\n      name: field,\n    },\n  };\n}\n\n/**\n * Creates a PropertyExpression for a specified field\n */\nexport function setPropertyField(field?: string): QueryEditorPropertyExpression {\n  return {\n    type: QueryEditorExpressionType.Property,\n    property: {\n      type: QueryEditorPropertyType.String,\n      name: field,\n    },\n  };\n}\n\nexport function createFunctionField(functionName?: string): QueryEditorFunctionExpression {\n  return {\n    type: QueryEditorExpressionType.Function,\n    name: functionName,\n    parameters: [],\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/QueryEditor/utils/useSqlChange.js

@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+import '../types.js';
+import { getRawSqlFn } from './sql.utils.js';
+
+function useSqlChange({ query, onQueryChange, db }) {
+  const onSqlChange = useCallback(
+    (sql) => {
+      const toRawSql = getRawSqlFn(db);
+      const rawSql = toRawSql({ sql, dataset: query.dataset, table: query.table, refId: query.refId });
+      const newQuery = { ...query, sql, rawSql };
+      onQueryChange(newQuery);
+    },
+    [db, onQueryChange, query]
+  );
+  return { onSqlChange };
+}
+
+export { useSqlChange };
+//# sourceMappingURL=useSqlChange.js.map

package/dist/esm/components/QueryEditor/utils/useSqlChange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSqlChange.js","sources":["../../../../../src/components/QueryEditor/utils/useSqlChange.ts"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { type DB, type SQLExpression, type SQLQuery } from '../types';\n\nimport { getRawSqlFn } from './sql.utils';\n\ninterface UseSqlChange {\n  db: DB;\n  query: SQLQuery;\n  onQueryChange: (query: SQLQuery) => void;\n}\n\nexport function useSqlChange({ query, onQueryChange, db }: UseSqlChange) {\n  const onSqlChange = useCallback(\n    (sql: SQLExpression) => {\n      const toRawSql = getRawSqlFn(db);\n      const rawSql = toRawSql({ sql, dataset: query.dataset, table: query.table, refId: query.refId });\n      const newQuery: SQLQuery = { ...query, sql, rawSql };\n      onQueryChange(newQuery);\n    },\n    [db, onQueryChange, query]\n  );\n\n  return { onSqlChange };\n}\n"],"names":[],"mappings":";;;;AAYO,SAAS,YAAa,CAAA,EAAE,KAAO,EAAA,aAAA,EAAe,IAAoB,EAAA;AACvE,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,GAAuB,KAAA;AACtB,MAAM,MAAA,QAAA,GAAW,YAAY,EAAE,CAAA;AAC/B,MAAA,MAAM,MAAS,GAAA,QAAA,CAAS,EAAE,GAAA,EAAK,OAAS,EAAA,KAAA,CAAM,OAAS,EAAA,KAAA,EAAO,KAAM,CAAA,KAAA,EAAO,KAAO,EAAA,KAAA,CAAM,OAAO,CAAA;AAC/F,MAAA,MAAM,QAAqB,GAAA,EAAE,GAAG,KAAA,EAAO,KAAK,MAAO,EAAA;AACnD,MAAA,aAAA,CAAc,QAAQ,CAAA;AAAA,KACxB;AAAA,IACA,CAAC,EAAI,EAAA,aAAA,EAAe,KAAK;AAAA,GAC3B;AAEA,EAAA,OAAO,EAAE,WAAY,EAAA;AACvB;;;;"}

package/dist/esm/components/QueryEditor/visual-query-builder/AwesomeQueryBuilder.js

@@ -0,0 +1,216 @@
+import { isString } from 'lodash';
+import React from 'react';
+import { Utils, BasicConfig } from 'react-awesome-query-builder';
+import { dateTime, toOption } from '@grafana/data';
+import { Input, DateTimePicker, Select, Button } from '@grafana/ui';
+
+const buttonLabels = {
+  add: "Add",
+  remove: "Remove"
+};
+({
+  id: Utils.uuid(),
+  type: "group",
+  children1: {
+    [Utils.uuid()]: {
+      type: "rule",
+      properties: {
+        field: null,
+        operator: null,
+        value: [],
+        valueSrc: []
+      }
+    }
+  }
+});
+const emptyInitTree = {
+  id: Utils.uuid(),
+  type: "group",
+  children1: {
+    [Utils.uuid()]: {
+      type: "rule",
+      properties: {
+        field: null,
+        operator: null,
+        value: [],
+        valueSrc: []
+      }
+    }
+  }
+};
+const widgets = {
+  ...BasicConfig.widgets,
+  text: {
+    ...BasicConfig.widgets.text,
+    factory: function TextInput(props) {
+      return /* @__PURE__ */ React.createElement(
+        Input,
+        {
+          value: (props == null ? undefined : props.value) || "",
+          placeholder: props == null ? undefined : props.placeholder,
+          onChange: (e) => props == null ? undefined : props.setValue(e.currentTarget.value)
+        }
+      );
+    }
+  },
+  number: {
+    ...BasicConfig.widgets.number,
+    factory: function NumberInput(props) {
+      return /* @__PURE__ */ React.createElement(
+        Input,
+        {
+          value: props == null ? undefined : props.value,
+          placeholder: props == null ? undefined : props.placeholder,
+          type: "number",
+          onChange: (e) => props == null ? undefined : props.setValue(Number.parseInt(e.currentTarget.value, 10))
+        }
+      );
+    }
+  },
+  datetime: {
+    ...BasicConfig.widgets.datetime,
+    factory: function DateTimeInput(props) {
+      return /* @__PURE__ */ React.createElement(
+        DateTimePicker,
+        {
+          onChange: (e) => {
+            props == null ? undefined : props.setValue(e == null ? undefined : e.format(BasicConfig.widgets.datetime.valueFormat));
+          },
+          date: dateTime(props == null ? undefined : props.value).utc()
+        }
+      );
+    }
+  }
+};
+const settings = {
+  ...BasicConfig.settings,
+  canRegroup: false,
+  maxNesting: 1,
+  canReorder: false,
+  showNot: false,
+  addRuleLabel: buttonLabels.add,
+  deleteLabel: buttonLabels.remove,
+  renderConjs: function Conjunctions(conjProps) {
+    return /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        id: conjProps == null ? undefined : conjProps.id,
+        "aria-label": "Conjunction",
+        menuShouldPortal: true,
+        options: (conjProps == null ? undefined : conjProps.conjunctionOptions) ? Object.keys(conjProps == null ? undefined : conjProps.conjunctionOptions).map(toOption) : undefined,
+        value: conjProps == null ? undefined : conjProps.selectedConjunction,
+        onChange: (val) => conjProps == null ? undefined : conjProps.setConjunction(val.value)
+      }
+    );
+  },
+  renderField: function Field(fieldProps) {
+    var _a;
+    const fields = ((_a = fieldProps == null ? undefined : fieldProps.config) == null ? undefined : _a.fields) || {};
+    return /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        id: fieldProps == null ? undefined : fieldProps.id,
+        width: 25,
+        "aria-label": "Field",
+        menuShouldPortal: true,
+        options: fieldProps == null ? undefined : fieldProps.items.map((f) => {
+          var _a2, _b;
+          const icon = (_b = (_a2 = fields[f.key].mainWidgetProps) == null ? undefined : _a2.customProps) == null ? undefined : _b.icon;
+          return {
+            label: f.label,
+            value: f.key,
+            icon
+          };
+        }),
+        value: fieldProps == null ? undefined : fieldProps.selectedKey,
+        onChange: (val) => {
+          fieldProps == null ? undefined : fieldProps.setField(val.label);
+        }
+      }
+    );
+  },
+  renderButton: function RAQBButton(buttonProps) {
+    return /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        title: `${buttonProps == null ? undefined : buttonProps.label} filter`,
+        onClick: buttonProps == null ? undefined : buttonProps.onClick,
+        variant: "secondary",
+        size: "md",
+        icon: (buttonProps == null ? undefined : buttonProps.label) === buttonLabels.add ? "plus" : "times"
+      }
+    );
+  },
+  renderOperator: function Operator(operatorProps) {
+    return /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        options: operatorProps == null ? undefined : operatorProps.items.map((op) => ({ label: op.label, value: op.key })),
+        "aria-label": "Operator",
+        menuShouldPortal: true,
+        value: operatorProps == null ? undefined : operatorProps.selectedKey,
+        onChange: (val) => {
+          operatorProps == null ? undefined : operatorProps.setField(val.value || "");
+        }
+      }
+    );
+  }
+};
+const customOperators = getCustomOperators(BasicConfig);
+const textWidget = BasicConfig.types.text.widgets.text;
+const opers = [...textWidget.operators || [], "select_any_in" /* IN */, "select_not_any_in" /* NOT_IN */];
+const customTextWidget = {
+  ...textWidget,
+  operators: opers
+};
+const customTypes = {
+  ...BasicConfig.types,
+  text: {
+    ...BasicConfig.types.text,
+    widgets: {
+      ...BasicConfig.types.text.widgets,
+      text: customTextWidget
+    }
+  }
+};
+const raqbConfig = {
+  ...BasicConfig,
+  widgets,
+  settings,
+  operators: customOperators,
+  types: customTypes
+};
+function getCustomOperators(config) {
+  const { ...supportedOperators } = config.operators;
+  const noop = () => "";
+  const sqlFormatInOp = supportedOperators["select_any_in" /* IN */].sqlFormatOp || noop;
+  const customSqlInFormatter = (field, op, value, valueSrc, valueType, opDef, operatorOptions, fieldDef) => {
+    return sqlFormatInOp(field, op, splitIfString(value), valueSrc, valueType, opDef, operatorOptions, fieldDef);
+  };
+  const sqlFormatNotInOp = supportedOperators["select_not_any_in" /* NOT_IN */].sqlFormatOp || noop;
+  const customSqlNotInFormatter = (field, op, value, valueSrc, valueType, opDef, operatorOptions, fieldDef) => {
+    return sqlFormatNotInOp(field, op, splitIfString(value), valueSrc, valueType, opDef, operatorOptions, fieldDef);
+  };
+  const customOperators2 = {
+    ...supportedOperators,
+    ["select_any_in" /* IN */]: {
+      ...supportedOperators["select_any_in" /* IN */],
+      sqlFormatOp: customSqlInFormatter
+    },
+    ["select_not_any_in" /* NOT_IN */]: {
+      ...supportedOperators["select_not_any_in" /* NOT_IN */],
+      sqlFormatOp: customSqlNotInFormatter
+    }
+  };
+  return customOperators2;
+}
+function splitIfString(value) {
+  if (isString(value)) {
+    return value.split(",");
+  }
+  return value;
+}
+
+export { emptyInitTree, raqbConfig, settings, widgets };
+//# sourceMappingURL=AwesomeQueryBuilder.js.map

package/dist/esm/components/QueryEditor/visual-query-builder/AwesomeQueryBuilder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AwesomeQueryBuilder.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/AwesomeQueryBuilder.tsx"],"sourcesContent":["import { type List } from 'immutable';\nimport { isString } from 'lodash';\nimport React from 'react';\nimport {\n  BasicConfig,\n  type Config,\n  type JsonItem,\n  type JsonTree,\n  type Operator,\n  type Settings,\n  type SimpleField,\n  Utils,\n  type ValueSource,\n  type Widgets,\n} from 'react-awesome-query-builder';\n\nimport { dateTime, toOption } from '@grafana/data';\nimport { Button, DateTimePicker, Input, Select } from '@grafana/ui';\n\nconst buttonLabels = {\n  add: 'Add',\n  remove: 'Remove',\n};\n\nexport const emptyInitValue: JsonItem = {\n  id: Utils.uuid(),\n  type: 'group' as const,\n  children1: {\n    [Utils.uuid()]: {\n      type: 'rule',\n      properties: {\n        field: null,\n        operator: null,\n        value: [],\n        valueSrc: [],\n      },\n    },\n  },\n};\n\nexport const emptyInitTree: JsonTree = {\n  id: Utils.uuid(),\n  type: 'group' as const,\n  children1: {\n    [Utils.uuid()]: {\n      type: 'rule',\n      properties: {\n        field: null,\n        operator: null,\n        value: [],\n        valueSrc: [],\n      },\n    },\n  },\n};\n\nexport const widgets: Widgets = {\n  ...BasicConfig.widgets,\n  text: {\n    ...BasicConfig.widgets.text,\n    factory: function TextInput(props) {\n      return (\n        <Input\n          value={props?.value || ''}\n          placeholder={props?.placeholder}\n          onChange={(e) => props?.setValue(e.currentTarget.value)}\n        />\n      );\n    },\n  },\n  number: {\n    ...BasicConfig.widgets.number,\n    factory: function NumberInput(props) {\n      return (\n        <Input\n          value={props?.value}\n          placeholder={props?.placeholder}\n          type=\"number\"\n          onChange={(e) => props?.setValue(Number.parseInt(e.currentTarget.value, 10))}\n        />\n      );\n    },\n  },\n  datetime: {\n    ...BasicConfig.widgets.datetime,\n    factory: function DateTimeInput(props) {\n      return (\n        <DateTimePicker\n          onChange={(e) => {\n            props?.setValue(e?.format(BasicConfig.widgets.datetime.valueFormat));\n          }}\n          date={dateTime(props?.value).utc()}\n        />\n      );\n    },\n  },\n};\n\nexport const settings: Settings = {\n  ...BasicConfig.settings,\n  canRegroup: false,\n  maxNesting: 1,\n  canReorder: false,\n  showNot: false,\n  addRuleLabel: buttonLabels.add,\n  deleteLabel: buttonLabels.remove,\n  renderConjs: function Conjunctions(conjProps) {\n    return (\n      <Select\n        id={conjProps?.id}\n        aria-label=\"Conjunction\"\n        menuShouldPortal\n        options={conjProps?.conjunctionOptions ? Object.keys(conjProps?.conjunctionOptions).map(toOption) : undefined}\n        value={conjProps?.selectedConjunction}\n        onChange={(val) => conjProps?.setConjunction(val.value!)}\n      />\n    );\n  },\n  renderField: function Field(fieldProps) {\n    const fields = fieldProps?.config?.fields || {};\n    return (\n      <Select\n        id={fieldProps?.id}\n        width={25}\n        aria-label=\"Field\"\n        menuShouldPortal\n        options={fieldProps?.items.map((f) => {\n          // @ts-ignore\n          const icon = fields[f.key].mainWidgetProps?.customProps?.icon;\n          return {\n            label: f.label,\n            value: f.key,\n            icon,\n          };\n        })}\n        value={fieldProps?.selectedKey}\n        onChange={(val) => {\n          fieldProps?.setField(val.label!);\n        }}\n      />\n    );\n  },\n  renderButton: function RAQBButton(buttonProps) {\n    return (\n      <Button\n        type=\"button\"\n        title={`${buttonProps?.label} filter`}\n        onClick={buttonProps?.onClick}\n        variant=\"secondary\"\n        size=\"md\"\n        icon={buttonProps?.label === buttonLabels.add ? 'plus' : 'times'}\n      />\n    );\n  },\n  renderOperator: function Operator(operatorProps) {\n    return (\n      <Select\n        options={operatorProps?.items.map((op) => ({ label: op.label, value: op.key }))}\n        aria-label=\"Operator\"\n        menuShouldPortal\n        value={operatorProps?.selectedKey}\n        onChange={(val) => {\n          operatorProps?.setField(val.value || '');\n        }}\n      />\n    );\n  },\n};\n\n// add IN / NOT IN operators to text to support multi-value variables\nconst enum Op {\n  IN = 'select_any_in',\n  NOT_IN = 'select_not_any_in',\n}\n// eslint-ignore\nconst customOperators = getCustomOperators(BasicConfig) as typeof BasicConfig.operators;\nconst textWidget = BasicConfig.types.text.widgets.text;\nconst opers = [...(textWidget.operators || []), Op.IN, Op.NOT_IN];\nconst customTextWidget = {\n  ...textWidget,\n  operators: opers,\n};\n\nconst customTypes = {\n  ...BasicConfig.types,\n  text: {\n    ...BasicConfig.types.text,\n    widgets: {\n      ...BasicConfig.types.text.widgets,\n      text: customTextWidget,\n    },\n  },\n};\n\nexport const raqbConfig: Config = {\n  ...BasicConfig,\n  widgets,\n  settings,\n  operators: customOperators as typeof BasicConfig.operators,\n  types: customTypes,\n};\n\nexport type { Config };\n\nfunction getCustomOperators(config: BasicConfig) {\n  const { ...supportedOperators } = config.operators;\n  const noop = () => '';\n  // IN operator expects array, override IN formatter for multi-value variables\n  const sqlFormatInOp = supportedOperators[Op.IN].sqlFormatOp || noop;\n  const customSqlInFormatter = (\n    field: string,\n    op: string,\n    value: string | List<string>,\n    valueSrc: ValueSource,\n    valueType: string,\n    opDef: Operator,\n    operatorOptions: object,\n    fieldDef: SimpleField\n  ) => {\n    return sqlFormatInOp(field, op, splitIfString(value), valueSrc, valueType, opDef, operatorOptions, fieldDef);\n  };\n  // NOT IN operator expects array, override NOT IN formatter for multi-value variables\n  const sqlFormatNotInOp = supportedOperators[Op.NOT_IN].sqlFormatOp || noop;\n  const customSqlNotInFormatter = (\n    field: string,\n    op: string,\n    value: string | List<string>,\n    valueSrc: ValueSource,\n    valueType: string,\n    opDef: Operator,\n    operatorOptions: object,\n    fieldDef: SimpleField\n  ) => {\n    return sqlFormatNotInOp(field, op, splitIfString(value), valueSrc, valueType, opDef, operatorOptions, fieldDef);\n  };\n\n  const customOperators = {\n    ...supportedOperators,\n    [Op.IN]: {\n      ...supportedOperators[Op.IN],\n      sqlFormatOp: customSqlInFormatter,\n    },\n    [Op.NOT_IN]: {\n      ...supportedOperators[Op.NOT_IN],\n      sqlFormatOp: customSqlNotInFormatter,\n    },\n  };\n\n  return customOperators;\n}\n\n// value: string | List<string> but AQB uses a different version of Immutable\n// eslint-ignore\nfunction splitIfString(value: any) {\n  if (isString(value)) {\n    return value.split(',');\n  }\n  return value;\n}\n"],"names":["_a","customOperators"],"mappings":"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"}

package/dist/esm/components/QueryEditor/visual-query-builder/EditorField.js

@@ -0,0 +1,44 @@
+import { css } from '@emotion/css';
+import React from 'react';
+import '@grafana/data';
+import { stylesFactory, useTheme2, ReactUtils, Tooltip, Icon, Field } from '@grafana/ui';
+import { Space } from '../Space.js';
+
+const EditorField = (props) => {
+  var _a;
+  const { label, optional, tooltip, children, width, ...fieldProps } = props;
+  const theme = useTheme2();
+  const styles = getStyles(theme, width);
+  const childInputId = (fieldProps == null ? undefined : fieldProps.htmlFor) || ((_a = ReactUtils) == null ? undefined : _a.getChildId(children));
+  const labelEl = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("label", { className: styles.label, htmlFor: childInputId }, label, optional && /* @__PURE__ */ React.createElement("span", { className: styles.optional }, " - optional"), tooltip && /* @__PURE__ */ React.createElement(Tooltip, { placement: "top", content: tooltip, theme: "info" }, /* @__PURE__ */ React.createElement(Icon, { name: "info-circle", size: "sm", className: styles.icon }))), /* @__PURE__ */ React.createElement(Space, { v: 0.5 }));
+  return /* @__PURE__ */ React.createElement("div", { className: styles.root }, /* @__PURE__ */ React.createElement(Field, { className: styles.field, label: labelEl, ...fieldProps }, children));
+};
+const getStyles = stylesFactory((theme, width) => {
+  return {
+    root: css({
+      minWidth: theme.spacing(width != null ? width : 0)
+    }),
+    label: css({
+      fontSize: 12,
+      fontWeight: theme.typography.fontWeightMedium
+    }),
+    optional: css({
+      fontStyle: "italic",
+      color: theme.colors.text.secondary
+    }),
+    field: css({
+      marginBottom: 0
+      // GrafanaUI/Field has a bottom margin which we must remove
+    }),
+    icon: css({
+      color: theme.colors.text.secondary,
+      marginLeft: theme.spacing(1),
+      ":hover": {
+        color: theme.colors.text.primary
+      }
+    })
+  };
+});
+
+export { EditorField };
+//# sourceMappingURL=EditorField.js.map

package/dist/esm/components/QueryEditor/visual-query-builder/EditorField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorField.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/EditorField.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { type ComponentProps } from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Field, type PopoverContent, useTheme2, ReactUtils, Tooltip, Icon, stylesFactory } from '@grafana/ui';\nimport { Space } from '../Space';\n\ninterface EditorFieldProps extends ComponentProps<typeof Field> {\n  label: string;\n  children: React.ReactElement;\n  width?: number | string;\n  optional?: boolean;\n  tooltip?: PopoverContent;\n}\n\nexport const EditorField = (props: EditorFieldProps) => {\n  const { label, optional, tooltip, children, width, ...fieldProps } = props;\n\n  const theme = useTheme2();\n  const styles = getStyles(theme, width);\n\n  // Null check for backward compatibility\n  const childInputId = fieldProps?.htmlFor || ReactUtils?.getChildId(children);\n\n  const labelEl = (\n    <>\n      <label className={styles.label} htmlFor={childInputId}>\n        {label}\n        {optional && <span className={styles.optional}> - optional</span>}\n        {tooltip && (\n          <Tooltip placement=\"top\" content={tooltip} theme=\"info\">\n            <Icon name=\"info-circle\" size=\"sm\" className={styles.icon} />\n          </Tooltip>\n        )}\n      </label>\n      <Space v={0.5} />\n    </>\n  );\n\n  return (\n    <div className={styles.root}>\n      <Field className={styles.field} label={labelEl} {...fieldProps}>\n        {children}\n      </Field>\n    </div>\n  );\n};\n\nconst getStyles = stylesFactory((theme: GrafanaTheme2, width?: number | string) => {\n  return {\n    root: css({\n      minWidth: theme.spacing(width ?? 0),\n    }),\n    label: css({\n      fontSize: 12,\n      fontWeight: theme.typography.fontWeightMedium,\n    }),\n    optional: css({\n      fontStyle: 'italic',\n      color: theme.colors.text.secondary,\n    }),\n    field: css({\n      marginBottom: 0, // GrafanaUI/Field has a bottom margin which we must remove\n    }),\n    icon: css({\n      color: theme.colors.text.secondary,\n      marginLeft: theme.spacing(1),\n      ':hover': {\n        color: theme.colors.text.primary,\n      },\n    }),\n  };\n});\n"],"names":[],"mappings":";;;;;;AAea,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AAfxD,EAAA,IAAA,EAAA;AAgBE,EAAM,MAAA,EAAE,OAAO,QAAU,EAAA,OAAA,EAAS,UAAU,KAAO,EAAA,GAAG,YAAe,GAAA,KAAA;AAErE,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,KAAA,EAAO,KAAK,CAAA;AAGrC,EAAA,MAAM,YAAe,GAAA,CAAA,UAAA,IAAA,IAAA,GAAA,SAAA,GAAA,UAAA,CAAY,OAAW,MAAA,CAAA,EAAA,GAAA,UAAA,KAAA,IAAA,GAAA,SAAA,GAAA,EAAA,CAAY,UAAW,CAAA,QAAA,CAAA,CAAA;AAEnE,EAAA,MAAM,0BAEF,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAM,SAAW,EAAA,MAAA,CAAO,OAAO,OAAS,EAAA,YAAA,EAAA,EACtC,OACA,QAAY,oBAAA,KAAA,CAAA,aAAA,CAAC,UAAK,SAAW,EAAA,MAAA,CAAO,YAAU,aAAW,CAAA,EACzD,2BACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,WAAU,KAAM,EAAA,OAAA,EAAS,SAAS,KAAM,EAAA,MAAA,EAAA,sCAC9C,IAAK,EAAA,EAAA,IAAA,EAAK,eAAc,IAAK,EAAA,IAAA,EAAK,WAAW,MAAO,CAAA,IAAA,EAAM,CAC7D,CAEJ,CAAA,sCACC,KAAM,EAAA,EAAA,CAAA,EAAG,KAAK,CACjB,CAAA;AAGF,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,wBACpB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,SAAW,EAAA,MAAA,CAAO,OAAO,KAAO,EAAA,OAAA,EAAU,GAAG,UAAA,EAAA,EACjD,QACH,CACF,CAAA;AAEJ;AAEA,MAAM,SAAY,GAAA,aAAA,CAAc,CAAC,KAAA,EAAsB,KAA4B,KAAA;AACjF,EAAO,OAAA;AAAA,IACL,MAAM,GAAI,CAAA;AAAA,MACR,QAAU,EAAA,KAAA,CAAM,OAAQ,CAAA,KAAA,IAAA,IAAA,GAAA,KAAA,GAAS,CAAC;AAAA,KACnC,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,QAAU,EAAA,EAAA;AAAA,MACV,UAAA,EAAY,MAAM,UAAW,CAAA;AAAA,KAC9B,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,SAAW,EAAA,QAAA;AAAA,MACX,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA,KAC1B,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,YAAc,EAAA;AAAA;AAAA,KACf,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC3B,QAAU,EAAA;AAAA,QACR,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA;AAC3B,KACD;AAAA,GACH;AACF,CAAC,CAAA;;;;"}

package/dist/esm/components/QueryEditor/visual-query-builder/EditorRow.js

@@ -0,0 +1,22 @@
+import { css } from '@emotion/css';
+import React from 'react';
+import '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
+import { EditorStack } from '../EditorStack.js';
+
+const EditorRow = ({ children }) => {
+  const styles = useStyles2(getStyles);
+  return /* @__PURE__ */ React.createElement("div", { className: styles.root }, /* @__PURE__ */ React.createElement(EditorStack, { gap: 2 }, children));
+};
+const getStyles = (theme) => {
+  return {
+    root: css({
+      padding: theme.spacing(1),
+      backgroundColor: theme.colors.background.secondary,
+      borderRadius: theme.shape.borderRadius(1)
+    })
+  };
+};
+
+export { EditorRow };
+//# sourceMappingURL=EditorRow.js.map

package/dist/esm/components/QueryEditor/visual-query-builder/EditorRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/EditorRow.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '@grafana/ui';\nimport { EditorStack } from '../EditorStack';\n\ninterface EditorRowProps {\n  children?: React.ReactNode;\n}\n\nexport const EditorRow = ({ children }: EditorRowProps) => {\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.root}>\n      <EditorStack gap={2}>{children}</EditorStack>\n    </div>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    root: css({\n      padding: theme.spacing(1),\n      backgroundColor: theme.colors.background.secondary,\n      borderRadius: theme.shape.borderRadius(1),\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;AAYO,MAAM,SAAY,GAAA,CAAC,EAAE,QAAA,EAA+B,KAAA;AACzD,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,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACxB,eAAA,EAAiB,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,SAAA;AAAA,MACzC,YAAc,EAAA,KAAA,CAAM,KAAM,CAAA,YAAA,CAAa,CAAC;AAAA,KACzC;AAAA,GACH;AACF,CAAA;;;;"}

package/dist/esm/components/QueryEditor/visual-query-builder/EditorRows.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { EditorStack } from '../EditorStack.js';
+
+const EditorRows = ({ children }) => {
+  return /* @__PURE__ */ React.createElement(EditorStack, { gap: 0.5, direction: "column" }, children);
+};
+
+export { EditorRows };
+//# sourceMappingURL=EditorRows.js.map