@grafana/plugin-ui 0.14.0-dev.1 → 0.14.1-dsconfig.4bdebf6

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

@@ -1 +1 @@
-{"version":3,"file":"QueryHeader.js","sources":["../../../../src/components/QueryEditor/QueryHeader.tsx"],"sourcesContent":["import React, { useCallback, useState, useId } from 'react';\nimport { useCopyToClipboard } from 'react-use';\n\nimport { type SelectableValue } from '@grafana/data';\n\nimport { ConfirmModal } from './ConfirmModal';\nimport { DatasetSelector } from './DatasetSelector';\nimport { CatalogSelector } from './CatalogSelector';\nimport { TableSelector } from './TableSelector';\nimport { InlineSwitch, RadioButtonGroup } from '@grafana/ui';\nimport { type QueryWithDefaults } from './defaults';\nimport { EditorField } from './EditorField';\nimport { EditorHeader } from './EditorHeader';\nimport { EditorRow } from './EditorRow';\nimport { FlexItem } from './FlexItem';\nimport { InlineSelect } from './InlineSelect';\nimport { Space } from './Space';\nimport { RunQueryButton } from './RunQueryButton';\nimport { type DB, type SQLQuery, type QueryRowFilter, EditorMode, QueryFormat, QUERY_FORMAT_OPTIONS } from './types';\nimport { getRawSqlFn } from './utils/sql.utils';\n\ninterface QueryHeaderProps {\n  db: DB;\n  defaultDataset: string;\n  enableDatasets: boolean;\n  enableCatalogs?: boolean;\n  query: QueryWithDefaults;\n  onChange: (query: SQLQuery) => void;\n  onRunQuery: () => void;\n  onQueryRowChange: (queryRowFilter: QueryRowFilter) => void;\n  queryRowFilter: QueryRowFilter;\n  isQueryRunnable: boolean;\n  labels?: Map<string, string>;\n}\n\nconst editorModes = [\n  { label: 'Builder', value: EditorMode.Builder },\n  { label: 'Code', value: EditorMode.Code },\n];\n\nexport function QueryHeader({\n  db,\n  defaultDataset,\n  enableDatasets,\n  enableCatalogs,\n  query,\n  queryRowFilter,\n  onChange,\n  onRunQuery,\n  onQueryRowChange,\n  isQueryRunnable,\n  labels = new Map([['dataset', 'Dataset']]),\n}: QueryHeaderProps) {\n  const { editorMode } = query;\n  const [_, copyToClipboard] = useCopyToClipboard();\n  const [showConfirm, setShowConfirm] = useState(false);\n  const toRawSql = getRawSqlFn(db);\n  const htmlId = useId();\n\n  // Derive enableCatalogs from db.disableCatalogs when not explicitly provided\n  // Catalogs are disabled by default (when disableCatalogs is undefined or true)\n  const catalogsEnabled = enableCatalogs ?? db.disableCatalogs === false;\n\n  // When catalogs are enabled, datasets MUST be enabled (they act as schema selector)\n  // This ensures the dataset selector is shown to select schemas\n  const effectiveEnableDatasets = catalogsEnabled ? true : enableDatasets;\n\n  const onEditorModeChange = useCallback(\n    (newEditorMode: EditorMode) => {\n      if (editorMode === EditorMode.Code) {\n        setShowConfirm(true);\n        return;\n      }\n      onChange({ ...query, editorMode: newEditorMode });\n    },\n    [editorMode, onChange, query]\n  );\n\n  const onFormatChange = (e: SelectableValue) => {\n    const next = { ...query, format: e.value !== undefined ? e.value : QueryFormat.Table };\n    onChange(next);\n  };\n\n  const onDatasetChange = (e: SelectableValue) => {\n    // dataset field has dual meaning:\n    // - When catalogs enabled: dataset = schema\n    // - When catalogs disabled: dataset = dataset\n    const datasetValue = e.value || undefined;\n    if (datasetValue === query.dataset) {\n      return;\n    }\n    const next: SQLQuery = {\n      ...query,\n      dataset: datasetValue,\n      table: undefined,\n      sql: undefined,\n      rawSql: '',\n    };\n    onChange(next);\n  };\n\n  const onCatalogChange = (catalog: string | null) => {\n    const catalogValue = catalog || undefined;\n    if (catalogValue === query.catalog) {\n      return;\n    }\n\n    const next: SQLQuery = {\n      ...query,\n      catalog: catalogValue,\n      dataset: undefined, // Reset dataset (which acts as schema when catalog is present)\n      table: undefined,\n      sql: undefined,\n      rawSql: '',\n    };\n    onChange(next);\n  };\n\n  const onTableChange = (e: SelectableValue) => {\n    if (e.value === query.table) {\n      return;\n    }\n\n    const next: SQLQuery = {\n      ...query,\n      table: e.value,\n      sql: undefined,\n      rawSql: '',\n    };\n    onChange(next);\n  };\n\n  return (\n    <>\n      <EditorHeader>\n        <InlineSelect\n          label=\"Format\"\n          value={query.format}\n          placeholder=\"Select format\"\n          menuShouldPortal\n          onChange={onFormatChange}\n          options={QUERY_FORMAT_OPTIONS}\n        />\n        {editorMode === EditorMode.Builder && (\n          <>\n            <InlineSwitch\n              id={`sql-filter-${htmlId}`}\n              label=\"Filter\"\n              transparent={true}\n              showLabel={true}\n              value={queryRowFilter.filter}\n              onChange={(ev) =>\n                ev.target instanceof HTMLInputElement &&\n                onQueryRowChange({ ...queryRowFilter, filter: ev.target.checked })\n              }\n            />\n\n            <InlineSwitch\n              id={`sql-group-${htmlId}`}\n              label=\"Group\"\n              transparent={true}\n              showLabel={true}\n              value={queryRowFilter.group}\n              onChange={(ev) =>\n                ev.target instanceof HTMLInputElement &&\n                onQueryRowChange({ ...queryRowFilter, group: ev.target.checked })\n              }\n            />\n\n            <InlineSwitch\n              id={`sql-order-${htmlId}`}\n              label=\"Order\"\n              transparent={true}\n              showLabel={true}\n              value={queryRowFilter.order}\n              onChange={(ev) =>\n                ev.target instanceof HTMLInputElement &&\n                onQueryRowChange({ ...queryRowFilter, order: ev.target.checked })\n              }\n            />\n\n            <InlineSwitch\n              id={`sql-preview-${htmlId}`}\n              label=\"Preview\"\n              transparent={true}\n              showLabel={true}\n              value={queryRowFilter.preview}\n              onChange={(ev) =>\n                ev.target instanceof HTMLInputElement &&\n                onQueryRowChange({ ...queryRowFilter, preview: ev.target.checked })\n              }\n            />\n          </>\n        )}\n\n        <FlexItem grow={1} />\n\n        <RunQueryButton queryInvalid={!isQueryRunnable} onClick={() => onRunQuery()} />\n\n        <RadioButtonGroup options={editorModes} size=\"sm\" value={editorMode} onChange={onEditorModeChange} />\n\n        <ConfirmModal\n          isOpen={showConfirm}\n          onCopy={() => {\n            setShowConfirm(false);\n            copyToClipboard(query.rawSql!);\n            onChange({\n              ...query,\n              rawSql: toRawSql(query),\n              editorMode: EditorMode.Builder,\n            });\n          }}\n          onDiscard={() => {\n            setShowConfirm(false);\n            onChange({\n              ...query,\n              rawSql: toRawSql(query),\n              editorMode: EditorMode.Builder,\n            });\n          }}\n          onCancel={() => setShowConfirm(false)}\n        />\n      </EditorHeader>\n\n      {editorMode === EditorMode.Builder && (\n        <>\n          <Space v={0.5} />\n\n          <EditorRow>\n            {/* Catalog selector: only when catalogs are not disabled */}\n            {catalogsEnabled && (\n              <EditorField label={labels.get('catalog') || 'Catalog'} width={25}>\n                <CatalogSelector\n                  db={db}\n                  inputId={`sql-catalog-${htmlId}`}\n                  value={query.catalog === undefined ? null : query.catalog}\n                  onChange={onCatalogChange}\n                />\n              </EditorField>\n            )}\n\n            {/* Schema selector when catalogs enabled, dataset selector otherwise */}\n            {effectiveEnableDatasets && (\n              <EditorField\n                label={catalogsEnabled ? labels.get('schema') || 'Schema' : labels.get('dataset') || 'Dataset'}\n                width={25}\n              >\n                <DatasetSelector\n                  db={db}\n                  inputId={catalogsEnabled ? `sql-schema-${htmlId}` : `sql-dataset-${htmlId}`}\n                  data-testid={catalogsEnabled ? 'schema-selector' : 'dataset-selector'}\n                  dataset={catalogsEnabled ? undefined : defaultDataset}\n                  value={query.dataset === undefined ? null : query.dataset}\n                  onChange={onDatasetChange}\n                  catalog={catalogsEnabled ? query.catalog : undefined}\n                />\n              </EditorField>\n            )}\n\n            {/* Table selector: always shown */}\n            <EditorField label={labels.get('table') || 'Table'} width={25}>\n              <TableSelector\n                db={db}\n                inputId={`sql-table-${htmlId}`}\n                dataset={query.dataset || (catalogsEnabled ? undefined : defaultDataset)}\n                catalog={catalogsEnabled ? query.catalog : undefined}\n                query={query}\n                value={query.table === undefined ? null : query.table}\n                onChange={onTableChange}\n                enableCatalogs={catalogsEnabled}\n                applyDefault\n              />\n            </EditorField>\n          </EditorRow>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["editorModes"],"mappings":"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"}
+{"version":3,"file":"QueryHeader.js","sources":["../../../../src/components/QueryEditor/QueryHeader.tsx"],"sourcesContent":["import React, { useCallback, useState, useId } from 'react';\nimport { useCopyToClipboard } from 'react-use';\n\nimport { type SelectableValue } from '@grafana/data';\n\nimport { ConfirmModal } from './ConfirmModal';\nimport { DatasetSelector } from './DatasetSelector';\nimport { CatalogSelector } from './CatalogSelector';\nimport { TableSelector } from './TableSelector';\nimport { InlineSwitch, RadioButtonGroup } from '@grafana/ui';\nimport { EditorField } from './EditorField';\nimport { EditorHeader } from './EditorHeader';\nimport { EditorRow } from './EditorRow';\nimport { FlexItem } from './FlexItem';\nimport { InlineSelect } from './InlineSelect';\nimport { Space } from './Space';\nimport { RunQueryButton } from './RunQueryButton';\nimport {\n  type DB,\n  type SQLQuery,\n  type QueryRowFilter,\n  type QueryWithDefaults,\n  EditorMode,\n  QueryFormat,\n  QUERY_FORMAT_OPTIONS,\n} from './types';\nimport { getRawSqlFn } from './utils/sql.utils';\n\ninterface QueryHeaderProps {\n  db: DB;\n  defaultDataset: string;\n  enableDatasets: boolean;\n  enableCatalogs?: boolean;\n  query: QueryWithDefaults;\n  onChange: (query: SQLQuery) => void;\n  onRunQuery: () => void;\n  onQueryRowChange: (queryRowFilter: QueryRowFilter) => void;\n  queryRowFilter: QueryRowFilter;\n  isQueryRunnable: boolean;\n  labels?: Map<string, string>;\n}\n\nconst editorModes = [\n  { label: 'Builder', value: EditorMode.Builder },\n  { label: 'Code', value: EditorMode.Code },\n];\n\nexport function QueryHeader({\n  db,\n  defaultDataset,\n  enableDatasets,\n  enableCatalogs,\n  query,\n  queryRowFilter,\n  onChange,\n  onRunQuery,\n  onQueryRowChange,\n  isQueryRunnable,\n  labels = new Map([['dataset', 'Dataset']]),\n}: QueryHeaderProps) {\n  const { editorMode } = query;\n  const [_, copyToClipboard] = useCopyToClipboard();\n  const [showConfirm, setShowConfirm] = useState(false);\n  const toRawSql = getRawSqlFn(db);\n  const htmlId = useId();\n\n  // Derive enableCatalogs from db.disableCatalogs when not explicitly provided\n  // Catalogs are disabled by default (when disableCatalogs is undefined or true)\n  const catalogsEnabled = enableCatalogs ?? db.disableCatalogs === false;\n\n  // When catalogs are enabled, datasets MUST be enabled (they act as schema selector)\n  // This ensures the dataset selector is shown to select schemas\n  const effectiveEnableDatasets = catalogsEnabled ? true : enableDatasets;\n\n  const onEditorModeChange = useCallback(\n    (newEditorMode: EditorMode) => {\n      if (editorMode === EditorMode.Code) {\n        setShowConfirm(true);\n        return;\n      }\n      onChange({ ...query, editorMode: newEditorMode });\n    },\n    [editorMode, onChange, query]\n  );\n\n  const onFormatChange = (e: SelectableValue) => {\n    const next = { ...query, format: e.value !== undefined ? e.value : QueryFormat.Table };\n    onChange(next);\n  };\n\n  const onDatasetChange = (e: SelectableValue) => {\n    // dataset field has dual meaning:\n    // - When catalogs enabled: dataset = schema\n    // - When catalogs disabled: dataset = dataset\n    const datasetValue = e.value || undefined;\n    if (datasetValue === query.dataset) {\n      return;\n    }\n    const next: SQLQuery = {\n      ...query,\n      dataset: datasetValue,\n      table: undefined,\n      sql: undefined,\n      rawSql: '',\n    };\n    onChange(next);\n  };\n\n  const onCatalogChange = (catalog: string | null) => {\n    const catalogValue = catalog || undefined;\n    if (catalogValue === query.catalog) {\n      return;\n    }\n\n    const next: SQLQuery = {\n      ...query,\n      catalog: catalogValue,\n      dataset: undefined, // Reset dataset (which acts as schema when catalog is present)\n      table: undefined,\n      sql: undefined,\n      rawSql: '',\n    };\n    onChange(next);\n  };\n\n  const onTableChange = (e: SelectableValue) => {\n    if (e.value === query.table) {\n      return;\n    }\n\n    const next: SQLQuery = {\n      ...query,\n      table: e.value,\n      sql: undefined,\n      rawSql: '',\n    };\n    onChange(next);\n  };\n\n  return (\n    <>\n      <EditorHeader>\n        <InlineSelect\n          label=\"Format\"\n          value={query.format}\n          placeholder=\"Select format\"\n          menuShouldPortal\n          onChange={onFormatChange}\n          options={QUERY_FORMAT_OPTIONS}\n        />\n        {editorMode === EditorMode.Builder && (\n          <>\n            <InlineSwitch\n              id={`sql-filter-${htmlId}`}\n              label=\"Filter\"\n              transparent={true}\n              showLabel={true}\n              value={queryRowFilter.filter}\n              onChange={(ev) =>\n                ev.target instanceof HTMLInputElement &&\n                onQueryRowChange({ ...queryRowFilter, filter: ev.target.checked })\n              }\n            />\n\n            <InlineSwitch\n              id={`sql-group-${htmlId}`}\n              label=\"Group\"\n              transparent={true}\n              showLabel={true}\n              value={queryRowFilter.group}\n              onChange={(ev) =>\n                ev.target instanceof HTMLInputElement &&\n                onQueryRowChange({ ...queryRowFilter, group: ev.target.checked })\n              }\n            />\n\n            <InlineSwitch\n              id={`sql-order-${htmlId}`}\n              label=\"Order\"\n              transparent={true}\n              showLabel={true}\n              value={queryRowFilter.order}\n              onChange={(ev) =>\n                ev.target instanceof HTMLInputElement &&\n                onQueryRowChange({ ...queryRowFilter, order: ev.target.checked })\n              }\n            />\n\n            <InlineSwitch\n              id={`sql-preview-${htmlId}`}\n              label=\"Preview\"\n              transparent={true}\n              showLabel={true}\n              value={queryRowFilter.preview}\n              onChange={(ev) =>\n                ev.target instanceof HTMLInputElement &&\n                onQueryRowChange({ ...queryRowFilter, preview: ev.target.checked })\n              }\n            />\n          </>\n        )}\n\n        <FlexItem grow={1} />\n\n        <RunQueryButton queryInvalid={!isQueryRunnable} onClick={() => onRunQuery()} />\n\n        <RadioButtonGroup options={editorModes} size=\"sm\" value={editorMode} onChange={onEditorModeChange} />\n\n        <ConfirmModal\n          isOpen={showConfirm}\n          onCopy={() => {\n            setShowConfirm(false);\n            copyToClipboard(query.rawSql!);\n            onChange({\n              ...query,\n              rawSql: toRawSql(query),\n              editorMode: EditorMode.Builder,\n            });\n          }}\n          onDiscard={() => {\n            setShowConfirm(false);\n            onChange({\n              ...query,\n              rawSql: toRawSql(query),\n              editorMode: EditorMode.Builder,\n            });\n          }}\n          onCancel={() => setShowConfirm(false)}\n        />\n      </EditorHeader>\n\n      {editorMode === EditorMode.Builder && (\n        <>\n          <Space v={0.5} />\n\n          <EditorRow>\n            {/* Catalog selector: only when catalogs are not disabled */}\n            {catalogsEnabled && (\n              <EditorField label={labels.get('catalog') || 'Catalog'} width={25}>\n                <CatalogSelector\n                  db={db}\n                  inputId={`sql-catalog-${htmlId}`}\n                  value={query.catalog === undefined ? null : query.catalog}\n                  onChange={onCatalogChange}\n                />\n              </EditorField>\n            )}\n\n            {/* Schema selector when catalogs enabled, dataset selector otherwise */}\n            {effectiveEnableDatasets && (\n              <EditorField\n                label={catalogsEnabled ? labels.get('schema') || 'Schema' : labels.get('dataset') || 'Dataset'}\n                width={25}\n              >\n                <DatasetSelector\n                  db={db}\n                  inputId={catalogsEnabled ? `sql-schema-${htmlId}` : `sql-dataset-${htmlId}`}\n                  data-testid={catalogsEnabled ? 'schema-selector' : 'dataset-selector'}\n                  dataset={catalogsEnabled ? undefined : defaultDataset}\n                  value={query.dataset === undefined ? null : query.dataset}\n                  onChange={onDatasetChange}\n                  catalog={catalogsEnabled ? query.catalog : undefined}\n                />\n              </EditorField>\n            )}\n\n            {/* Table selector: always shown */}\n            <EditorField label={labels.get('table') || 'Table'} width={25}>\n              <TableSelector\n                db={db}\n                inputId={`sql-table-${htmlId}`}\n                dataset={query.dataset || (catalogsEnabled ? undefined : defaultDataset)}\n                catalog={catalogsEnabled ? query.catalog : undefined}\n                query={query}\n                value={query.table === undefined ? null : query.table}\n                onChange={onTableChange}\n                enableCatalogs={catalogsEnabled}\n                applyDefault\n              />\n            </EditorField>\n          </EditorRow>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["editorModes"],"mappings":"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"}

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

@@ -4,10 +4,10 @@ import '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
 
 const Space = ({ v = 0, h = 0, layout = "block" }) => {
-  const styles = useStyles2(getStyles$i, v, h, layout);
+  const styles = useStyles2(getStyles$m, v, h, layout);
   return /* @__PURE__ */ React.createElement("span", { className: cx(styles.wrapper) });
 };
-const getStyles$i = (theme, v, h, layout) => ({
+const getStyles$m = (theme, v, h, layout) => ({
   wrapper: css([
     {
       paddingRight: theme.spacing(h != null ? h : 0),

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

@@ -3,7 +3,6 @@ import { useAsync } from 'react-use';
 import { toOption } from '@grafana/data';
 import { Select } from '@grafana/ui';
 import './types.js';
-import 'lodash';
 
 const TableSelector = ({
   db,

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

@@ -1 +1 @@
-{"version":3,"file":"TableSelector.js","sources":["../../../../src/components/QueryEditor/TableSelector.tsx"],"sourcesContent":["import React from 'react';\nimport { useAsync } from 'react-use';\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { Select } from '@grafana/ui';\nimport { type DB, type ResourceSelectorProps } from './types';\nimport { type QueryWithDefaults } from './defaults';\n\ninterface TableSelectorProps extends ResourceSelectorProps {\n  db: DB;\n  dataset?: string; // When catalog is present, this represents the schema. Otherwise, it's the dataset.\n  catalog?: string;\n  value: string | null;\n  query: QueryWithDefaults;\n  onChange: (v: SelectableValue) => void;\n  inputId?: string;\n  enableCatalogs?: boolean;\n}\n\nexport const TableSelector = ({\n  db,\n  dataset,\n  catalog,\n  value,\n  className,\n  onChange,\n  inputId,\n  enableCatalogs,\n}: TableSelectorProps) => {\n  const state = useAsync(async () => {\n    if (!dataset && !catalog) {\n      return [];\n    }\n\n    // When catalogs are enabled, we need both catalog and dataset (acting as schema) to load tables\n    if (enableCatalogs && (!catalog || !dataset)) {\n      return [];\n    }\n\n    // db.tables(dataset, catalog)\n    // dataset acts as schema when catalog is present, otherwise it's the dataset\n    const tables = await db.tables(dataset, catalog);\n    return tables.map(toOption);\n  }, [dataset, catalog, enableCatalogs]);\n\n  return (\n    <Select\n      inputId={inputId}\n      className={className}\n      aria-label=\"Table selector\"\n      value={value}\n      options={state.value}\n      onChange={onChange}\n      isLoading={state.loading}\n      menuShouldPortal={true}\n      placeholder={state.loading ? 'Loading tables' : 'Select table'}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAkBO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,EAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,KAA0B;AACxB,EAAA,MAAM,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAA,IAAI,CAAC,OAAA,IAAW,CAAC,OAAA,EAAS;AACxB,MAAA,OAAO,EAAC;AAAA,IACV;AAGA,IAAA,IAAI,cAAA,KAAmB,CAAC,OAAA,IAAW,CAAC,OAAA,CAAA,EAAU;AAC5C,MAAA,OAAO,EAAC;AAAA,IACV;AAIA,IAAA,MAAM,MAAA,GAAS,MAAM,EAAA,CAAG,MAAA,CAAO,SAAS,OAAO,CAAA;AAC/C,IAAA,OAAO,MAAA,CAAO,IAAI,QAAQ,CAAA;AAAA,EAC5B,CAAA,EAAG,CAAC,OAAA,EAAS,OAAA,EAAS,cAAc,CAAC,CAAA;AAErC,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA,EAAW,gBAAA;AAAA,MACX,KAAA;AAAA,MACA,SAAS,KAAA,CAAM,KAAA;AAAA,MACf,QAAA;AAAA,MACA,WAAW,KAAA,CAAM,OAAA;AAAA,MACjB,gBAAA,EAAkB,IAAA;AAAA,MAClB,WAAA,EAAa,KAAA,CAAM,OAAA,GAAU,gBAAA,GAAmB;AAAA;AAAA,GAClD;AAEJ;;;;"}
+{"version":3,"file":"TableSelector.js","sources":["../../../../src/components/QueryEditor/TableSelector.tsx"],"sourcesContent":["import React from 'react';\nimport { useAsync } from 'react-use';\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { Select } from '@grafana/ui';\nimport { type DB, type ResourceSelectorProps, type QueryWithDefaults } from './types';\n\ninterface TableSelectorProps extends ResourceSelectorProps {\n  db: DB;\n  dataset?: string; // When catalog is present, this represents the schema. Otherwise, it's the dataset.\n  catalog?: string;\n  value: string | null;\n  query: QueryWithDefaults;\n  onChange: (v: SelectableValue) => void;\n  inputId?: string;\n  enableCatalogs?: boolean;\n}\n\nexport const TableSelector = ({\n  db,\n  dataset,\n  catalog,\n  value,\n  className,\n  onChange,\n  inputId,\n  enableCatalogs,\n}: TableSelectorProps) => {\n  const state = useAsync(async () => {\n    if (!dataset && !catalog) {\n      return [];\n    }\n\n    // When catalogs are enabled, we need both catalog and dataset (acting as schema) to load tables\n    if (enableCatalogs && (!catalog || !dataset)) {\n      return [];\n    }\n\n    // db.tables(dataset, catalog)\n    // dataset acts as schema when catalog is present, otherwise it's the dataset\n    const tables = await db.tables(dataset, catalog);\n    return tables.map(toOption);\n  }, [dataset, catalog, enableCatalogs]);\n\n  return (\n    <Select\n      inputId={inputId}\n      className={className}\n      aria-label=\"Table selector\"\n      value={value}\n      options={state.value}\n      onChange={onChange}\n      isLoading={state.loading}\n      menuShouldPortal={true}\n      placeholder={state.loading ? 'Loading tables' : 'Select table'}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAiBO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,EAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,KAA0B;AACxB,EAAA,MAAM,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAA,IAAI,CAAC,OAAA,IAAW,CAAC,OAAA,EAAS;AACxB,MAAA,OAAO,EAAC;AAAA,IACV;AAGA,IAAA,IAAI,cAAA,KAAmB,CAAC,OAAA,IAAW,CAAC,OAAA,CAAA,EAAU;AAC5C,MAAA,OAAO,EAAC;AAAA,IACV;AAIA,IAAA,MAAM,MAAA,GAAS,MAAM,EAAA,CAAG,MAAA,CAAO,SAAS,OAAO,CAAA;AAC/C,IAAA,OAAO,MAAA,CAAO,IAAI,QAAQ,CAAA;AAAA,EAC5B,CAAA,EAAG,CAAC,OAAA,EAAS,OAAA,EAAS,cAAc,CAAC,CAAA;AAErC,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA,EAAW,gBAAA;AAAA,MACX,KAAA;AAAA,MACA,SAAS,KAAA,CAAM,KAAA;AAAA,MACf,QAAA;AAAA,MACA,WAAW,KAAA,CAAM,OAAA;AAAA,MACjB,gBAAA,EAAkB,IAAA;AAAA,MAClB,WAAA,EAAa,KAAA,CAAM,OAAA,GAAU,gBAAA,GAAmB;AAAA;AAAA,GAClD;AAEJ;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"defaults.js","sources":["../../../../src/components/QueryEditor/defaults.ts"],"sourcesContent":["import { EditorMode, QueryFormat, type SQLQuery } from './types';\nimport { createFunctionField, setGroupByField } from './utils/sql.utils';\n\nexport function applyQueryDefaults(q?: SQLQuery): SQLQuery {\n  let editorMode = q?.editorMode || EditorMode.Builder;\n\n  // Switching to code editor if the query was created before visual query builder was introduced.\n  if (q?.editorMode === undefined && q?.rawSql !== undefined) {\n    editorMode = EditorMode.Code;\n  }\n\n  const result: SQLQuery = {\n    ...q,\n    refId: q?.refId || 'A',\n    format: q?.format !== undefined ? q.format : QueryFormat.Table,\n    rawSql: q?.rawSql || '',\n    editorMode,\n    sql: q?.sql || {\n      columns: [createFunctionField()],\n      groupBy: [setGroupByField()],\n      limit: 50,\n    },\n  };\n\n  return result;\n}\n\nexport type QueryWithDefaults = ReturnType<typeof applyQueryDefaults>;\n"],"names":[],"mappings":";;;AAGO,SAAS,mBAAmB,CAAA,EAAwB;AACzD,EAAA,IAAI,UAAA,GAAA,CAAa,CAAA,IAAA,IAAA,GAAA,MAAA,GAAA,CAAA,CAAG,UAAA,KAAc,UAAA,CAAW,OAAA;AAG7C,EAAA,IAAA,CAAI,CAAA,IAAA,IAAA,GAAA,MAAA,GAAA,CAAA,CAAG,UAAA,MAAe,MAAA,IAAA,CAAa,CAAA,IAAA,IAAA,GAAA,MAAA,GAAA,CAAA,CAAG,YAAW,MAAA,EAAW;AAC1D,IAAA,UAAA,GAAa,UAAA,CAAW,IAAA;AAAA,EAC1B;AAEA,EAAA,MAAM,MAAA,GAAmB;AAAA,IACvB,GAAG,CAAA;AAAA,IACH,KAAA,EAAA,CAAO,uBAAG,KAAA,KAAS,GAAA;AAAA,IACnB,SAAQ,CAAA,IAAA,IAAA,GAAA,MAAA,GAAA,CAAA,CAAG,MAAA,MAAW,MAAA,GAAY,CAAA,CAAE,SAAS,WAAA,CAAY,KAAA;AAAA,IACzD,MAAA,EAAA,CAAQ,uBAAG,MAAA,KAAU,EAAA;AAAA,IACrB,UAAA;AAAA,IACA,GAAA,EAAA,CAAK,uBAAG,GAAA,KAAO;AAAA,MACb,OAAA,EAAS,CAAC,mBAAA,EAAqB,CAAA;AAAA,MAC/B,OAAA,EAAS,CAAC,eAAA,EAAiB,CAAA;AAAA,MAC3B,KAAA,EAAO;AAAA;AACT,GACF;AAEA,EAAA,OAAO,MAAA;AACT;;;;"}
+{"version":3,"file":"defaults.js","sources":["../../../../src/components/QueryEditor/defaults.ts"],"sourcesContent":["import { EditorMode, QueryFormat, type SQLQuery } from './types';\nimport { createFunctionField, setGroupByField } from './utils/sql.utils';\n\nexport function applyQueryDefaults(q?: SQLQuery): SQLQuery {\n  let editorMode = q?.editorMode || EditorMode.Builder;\n\n  // Switching to code editor if the query was created before visual query builder was introduced.\n  if (q?.editorMode === undefined && q?.rawSql !== undefined) {\n    editorMode = EditorMode.Code;\n  }\n\n  const result: SQLQuery = {\n    ...q,\n    refId: q?.refId || 'A',\n    format: q?.format !== undefined ? q.format : QueryFormat.Table,\n    rawSql: q?.rawSql || '',\n    editorMode,\n    sql: q?.sql || {\n      columns: [createFunctionField()],\n      groupBy: [setGroupByField()],\n      limit: 50,\n    },\n  };\n\n  return result;\n}\n"],"names":[],"mappings":";;;AAGO,SAAS,mBAAmB,CAAA,EAAwB;AACzD,EAAA,IAAI,UAAA,GAAA,CAAa,CAAA,IAAA,IAAA,GAAA,MAAA,GAAA,CAAA,CAAG,UAAA,KAAc,UAAA,CAAW,OAAA;AAG7C,EAAA,IAAA,CAAI,CAAA,IAAA,IAAA,GAAA,MAAA,GAAA,CAAA,CAAG,UAAA,MAAe,MAAA,IAAA,CAAa,CAAA,IAAA,IAAA,GAAA,MAAA,GAAA,CAAA,CAAG,YAAW,MAAA,EAAW;AAC1D,IAAA,UAAA,GAAa,UAAA,CAAW,IAAA;AAAA,EAC1B;AAEA,EAAA,MAAM,MAAA,GAAmB;AAAA,IACvB,GAAG,CAAA;AAAA,IACH,KAAA,EAAA,CAAO,uBAAG,KAAA,KAAS,GAAA;AAAA,IACnB,SAAQ,CAAA,IAAA,IAAA,GAAA,MAAA,GAAA,CAAA,CAAG,MAAA,MAAW,MAAA,GAAY,CAAA,CAAE,SAAS,WAAA,CAAY,KAAA;AAAA,IACzD,MAAA,EAAA,CAAQ,uBAAG,MAAA,KAAU,EAAA;AAAA,IACrB,UAAA;AAAA,IACA,GAAA,EAAA,CAAK,uBAAG,GAAA,KAAO;AAAA,MACb,OAAA,EAAS,CAAC,mBAAA,EAAqB,CAAA;AAAA,MAC/B,OAAA,EAAS,CAAC,eAAA,EAAiB,CAAA;AAAA,MAC3B,KAAA,EAAO;AAAA;AACT,GACF;AAEA,EAAA,OAAO,MAAA;AACT;;;;"}

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

@@ -7,7 +7,15 @@ import '@grafana/data';
 import '../../SQLEditor/standardSql/language.js';
 import '../../SQLEditor/standardSql/macros.js';
 
-function QueryEditorRaw({ children, onChange, query, width, height, completionProvider }) {
+function QueryEditorRaw({
+  children,
+  onChange,
+  query,
+  width,
+  height,
+  completionProvider,
+  language = "sql"
+}) {
   const queryRef = useRef(query);
   useEffect(() => {
     queryRef.current = query;
@@ -30,7 +38,7 @@ function QueryEditorRaw({ children, onChange, query, width, height, completionPr
       height,
       query: query.rawSql,
       onChange: onRawQueryChange,
-      language: { id: "sql", completionProvider, formatter: formatSQL }
+      language: { id: "sql", completionProvider, formatter: (q) => formatSQL(q, language) }
     },
     children
   );

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

@@ -1 +1 @@
-{"version":3,"file":"QueryEditorRaw.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryEditorRaw.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\n\nimport { type SQLQuery } from '../types';\n\nimport { formatSQL } from '../utils/formatSQL';\nimport { type LanguageCompletionProvider, SQLEditor } from '../../SQLEditor';\n\ntype Props = {\n  query: SQLQuery;\n  onChange: (value: SQLQuery, processQuery: boolean) => void;\n  children?: (props: { formatQuery: () => void }) => React.ReactNode;\n  width?: number;\n  height?: number;\n  completionProvider: LanguageCompletionProvider;\n};\n\nexport function QueryEditorRaw({ children, onChange, query, width, height, completionProvider }: Props) {\n  // We need to pass query via ref to SQLEditor as onChange is executed via monacoEditor.onDidChangeModelContent callback, not onChange property\n  const queryRef = useRef<SQLQuery>(query);\n  useEffect(() => {\n    queryRef.current = query;\n  }, [query]);\n\n  const onRawQueryChange = useCallback(\n    (rawSql: string, processQuery: boolean) => {\n      const newQuery = {\n        ...queryRef.current,\n        rawQuery: true,\n        rawSql,\n      };\n      onChange(newQuery, processQuery);\n    },\n    [onChange]\n  );\n\n  return (\n    <SQLEditor\n      width={width}\n      height={height}\n      query={query.rawSql!}\n      onChange={onRawQueryChange}\n      language={{ id: 'sql', completionProvider, formatter: formatSQL }}\n    >\n      {children}\n    </SQLEditor>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAgBO,SAAS,cAAA,CAAe,EAAE,QAAA,EAAU,QAAA,EAAU,OAAO,KAAA,EAAO,MAAA,EAAQ,oBAAmB,EAAU;AAEtG,EAAA,MAAM,QAAA,GAAW,OAAiB,KAAK,CAAA;AACvC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,OAAA,GAAU,KAAA;AAAA,EACrB,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,gBAAA,GAAmB,WAAA;AAAA,IACvB,CAAC,QAAgB,YAAA,KAA0B;AACzC,MAAA,MAAM,QAAA,GAAW;AAAA,QACf,GAAG,QAAA,CAAS,OAAA;AAAA,QACZ,QAAA,EAAU,IAAA;AAAA,QACV;AAAA,OACF;AACA,MAAA,QAAA,CAAS,UAAU,YAAY,CAAA;AAAA,IACjC,CAAA;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAO,KAAA,CAAM,MAAA;AAAA,MACb,QAAA,EAAU,gBAAA;AAAA,MACV,UAAU,EAAE,EAAA,EAAI,KAAA,EAAO,kBAAA,EAAoB,WAAW,SAAA;AAAU,KAAA;AAAA,IAE/D;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"QueryEditorRaw.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryEditorRaw.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\n\nimport { type SQLQuery } from '../types';\n\nimport { formatSQL } from '../utils/formatSQL';\nimport { type LanguageCompletionProvider, SQLEditor } from '../../SQLEditor';\nimport type { SqlLanguage } from 'sql-formatter';\n\ntype Props = {\n  query: SQLQuery;\n  onChange: (value: SQLQuery, processQuery: boolean) => void;\n  children?: (props: { formatQuery: () => void }) => React.ReactNode;\n  width?: number;\n  height?: number;\n  completionProvider: LanguageCompletionProvider;\n  language?: SqlLanguage;\n};\n\nexport function QueryEditorRaw({\n  children,\n  onChange,\n  query,\n  width,\n  height,\n  completionProvider,\n  language = 'sql',\n}: Props) {\n  // We need to pass query via ref to SQLEditor as onChange is executed via monacoEditor.onDidChangeModelContent callback, not onChange property\n  const queryRef = useRef<SQLQuery>(query);\n  useEffect(() => {\n    queryRef.current = query;\n  }, [query]);\n\n  const onRawQueryChange = useCallback(\n    (rawSql: string, processQuery: boolean) => {\n      const newQuery = {\n        ...queryRef.current,\n        rawQuery: true,\n        rawSql,\n      };\n      onChange(newQuery, processQuery);\n    },\n    [onChange]\n  );\n\n  return (\n    <SQLEditor\n      width={width}\n      height={height}\n      query={query.rawSql!}\n      onChange={onRawQueryChange}\n      language={{ id: 'sql', completionProvider, formatter: (q) => formatSQL(q, language) }}\n    >\n      {children}\n    </SQLEditor>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAkBO,SAAS,cAAA,CAAe;AAAA,EAC7B,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,kBAAA;AAAA,EACA,QAAA,GAAW;AACb,CAAA,EAAU;AAER,EAAA,MAAM,QAAA,GAAW,OAAiB,KAAK,CAAA;AACvC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,OAAA,GAAU,KAAA;AAAA,EACrB,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,gBAAA,GAAmB,WAAA;AAAA,IACvB,CAAC,QAAgB,YAAA,KAA0B;AACzC,MAAA,MAAM,QAAA,GAAW;AAAA,QACf,GAAG,QAAA,CAAS,OAAA;AAAA,QACZ,QAAA,EAAU,IAAA;AAAA,QACV;AAAA,OACF;AACA,MAAA,QAAA,CAAS,UAAU,YAAY,CAAA;AAAA,IACjC,CAAA;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAO,KAAA,CAAM,MAAA;AAAA,MACb,QAAA,EAAU,gBAAA;AAAA,MACV,QAAA,EAAU,EAAE,EAAA,EAAI,KAAA,EAAO,kBAAA,EAAoB,SAAA,EAAW,CAAC,CAAA,KAAM,SAAA,CAAU,CAAA,EAAG,QAAQ,CAAA;AAAE,KAAA;AAAA,IAEnF;AAAA,GACH;AAEJ;;;;"}

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

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import React, { useState, useMemo } from 'react';
 import { useTheme2, HorizontalGroup, IconButton, Tooltip, Icon } from '@grafana/ui';
 import { QueryValidator } from './QueryValidator.js';
+import { reportInteraction } from '@grafana/runtime';
 
 function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...validatorProps }) {
   const theme = useTheme2();
@@ -39,6 +40,10 @@ function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...valida
   if (!showTools && validationResult === void 0) {
     style = { height: 0, padding: 0, visibility: "hidden" };
   }
+  const onFormatClick = () => {
+    reportInteraction("grafana_sql_query_editor_format_click");
+    onFormatCode == null ? void 0 : onFormatCode();
+  };
   return /* @__PURE__ */ React.createElement("div", { className: styles.container, style }, /* @__PURE__ */ React.createElement("div", null, validatorProps.onValidate && /* @__PURE__ */ React.createElement(
     QueryValidator,
     {
@@ -48,7 +53,7 @@ function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...valida
         validatorProps.onValidate(result);
       }
     }
-  )), showTools && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(HorizontalGroup, { spacing: "sm" }, onFormatCode && /* @__PURE__ */ React.createElement(IconButton, { onClick: onFormatCode, name: "brackets-curly", size: "xs", tooltip: "Format query" }), onExpand && /* @__PURE__ */ React.createElement(
+  )), showTools && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(HorizontalGroup, { spacing: "sm" }, onFormatCode && /* @__PURE__ */ React.createElement(IconButton, { onClick: onFormatClick, name: "brackets-curly", size: "xs", tooltip: "Format query" }), onExpand && /* @__PURE__ */ React.createElement(
     IconButton,
     {
       onClick: () => onExpand(!isExpanded),

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

@@ -1 +1 @@
-{"version":3,"file":"QueryToolbox.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryToolbox.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useMemo, useState } from 'react';\n\nimport { HorizontalGroup, Icon, IconButton, Tooltip, useTheme2 } from '@grafana/ui';\n\nimport { QueryValidator, type QueryValidatorProps } from './QueryValidator';\n\ninterface QueryToolboxProps extends Omit<QueryValidatorProps, 'onValidate'> {\n  showTools?: boolean;\n  isExpanded?: boolean;\n  onFormatCode?: () => void;\n  onExpand?: (expand: boolean) => void;\n  onValidate?: (isValid: boolean) => void;\n}\n\nexport function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...validatorProps }: QueryToolboxProps) {\n  const theme = useTheme2();\n  const [validationResult, setValidationResult] = useState<boolean>();\n\n  const styles = useMemo(() => {\n    return {\n      container: css`\n        border: 1px solid ${theme.colors.border.medium};\n        border-top: none;\n        padding: ${theme.spacing(0.5, 0.5, 0.5, 0.5)};\n        display: flex;\n        flex-grow: 1;\n        justify-content: space-between;\n        font-size: ${theme.typography.bodySmall.fontSize};\n      `,\n      error: css`\n        color: ${theme.colors.error.text};\n        font-size: ${theme.typography.bodySmall.fontSize};\n        font-family: ${theme.typography.fontFamilyMonospace};\n      `,\n      valid: css`\n        color: ${theme.colors.success.text};\n      `,\n      info: css`\n        color: ${theme.colors.text.secondary};\n      `,\n      hint: css`\n        color: ${theme.colors.text.disabled};\n        white-space: nowrap;\n        cursor: help;\n      `,\n    };\n  }, [theme]);\n\n  let style = {};\n\n  if (!showTools && validationResult === undefined) {\n    style = { height: 0, padding: 0, visibility: 'hidden' };\n  }\n\n  return (\n    <div className={styles.container} style={style}>\n      <div>\n        {validatorProps.onValidate && (\n          <QueryValidator\n            {...validatorProps}\n            onValidate={(result: boolean) => {\n              setValidationResult(result);\n              validatorProps.onValidate!(result);\n            }}\n          />\n        )}\n      </div>\n      {showTools && (\n        <div>\n          <HorizontalGroup spacing=\"sm\">\n            {onFormatCode && (\n              <IconButton onClick={onFormatCode} name=\"brackets-curly\" size=\"xs\" tooltip=\"Format query\" />\n            )}\n            {onExpand && (\n              <IconButton\n                onClick={() => onExpand(!isExpanded)}\n                name={isExpanded ? 'angle-up' : 'angle-down'}\n                size=\"xs\"\n                tooltip={isExpanded ? 'Collapse editor' : 'Expand editor'}\n              />\n            )}\n            <Tooltip content=\"Hit CTRL/CMD+Return to run query\">\n              <Icon className={styles.hint} name=\"keyboard\" />\n            </Tooltip>\n          </HorizontalGroup>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"QueryToolbox.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryToolbox.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useMemo, useState } from 'react';\n\nimport { HorizontalGroup, Icon, IconButton, Tooltip, useTheme2 } from '@grafana/ui';\n\nimport { QueryValidator, type QueryValidatorProps } from './QueryValidator';\nimport { reportInteraction } from '@grafana/runtime';\n\ninterface QueryToolboxProps extends Omit<QueryValidatorProps, 'onValidate'> {\n  showTools?: boolean;\n  isExpanded?: boolean;\n  onFormatCode?: () => void;\n  onExpand?: (expand: boolean) => void;\n  onValidate?: (isValid: boolean) => void;\n}\n\nexport function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...validatorProps }: QueryToolboxProps) {\n  const theme = useTheme2();\n  const [validationResult, setValidationResult] = useState<boolean>();\n\n  const styles = useMemo(() => {\n    return {\n      container: css`\n        border: 1px solid ${theme.colors.border.medium};\n        border-top: none;\n        padding: ${theme.spacing(0.5, 0.5, 0.5, 0.5)};\n        display: flex;\n        flex-grow: 1;\n        justify-content: space-between;\n        font-size: ${theme.typography.bodySmall.fontSize};\n      `,\n      error: css`\n        color: ${theme.colors.error.text};\n        font-size: ${theme.typography.bodySmall.fontSize};\n        font-family: ${theme.typography.fontFamilyMonospace};\n      `,\n      valid: css`\n        color: ${theme.colors.success.text};\n      `,\n      info: css`\n        color: ${theme.colors.text.secondary};\n      `,\n      hint: css`\n        color: ${theme.colors.text.disabled};\n        white-space: nowrap;\n        cursor: help;\n      `,\n    };\n  }, [theme]);\n\n  let style = {};\n\n  if (!showTools && validationResult === undefined) {\n    style = { height: 0, padding: 0, visibility: 'hidden' };\n  }\n  const onFormatClick = () => {\n    reportInteraction('grafana_sql_query_editor_format_click');\n    onFormatCode?.();\n  };\n\n  return (\n    <div className={styles.container} style={style}>\n      <div>\n        {validatorProps.onValidate && (\n          <QueryValidator\n            {...validatorProps}\n            onValidate={(result: boolean) => {\n              setValidationResult(result);\n              validatorProps.onValidate!(result);\n            }}\n          />\n        )}\n      </div>\n      {showTools && (\n        <div>\n          <HorizontalGroup spacing=\"sm\">\n            {onFormatCode && (\n              <IconButton onClick={onFormatClick} name=\"brackets-curly\" size=\"xs\" tooltip=\"Format query\" />\n            )}\n            {onExpand && (\n              <IconButton\n                onClick={() => onExpand(!isExpanded)}\n                name={isExpanded ? 'angle-up' : 'angle-down'}\n                size=\"xs\"\n                tooltip={isExpanded ? 'Collapse editor' : 'Expand editor'}\n              />\n            )}\n            <Tooltip content=\"Hit CTRL/CMD+Return to run query\">\n              <Icon className={styles.hint} name=\"keyboard\" />\n            </Tooltip>\n          </HorizontalGroup>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -8,9 +8,18 @@ import { QueryEditorRaw } from './QueryEditorRaw.js';
 import { QueryToolbox } from './QueryToolbox.js';
 import '../types.js';
 
-function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidate, range }) {
+function RawEditor({
+  db,
+  query,
+  onChange,
+  onRunQuery,
+  onValidate,
+  queryToValidate,
+  range,
+  language = "sql"
+}) {
   const theme = useTheme2();
-  const styles = useStyles2(getStyles$h);
+  const styles = useStyles2(getStyles$l);
   const [isExpanded, setIsExpanded] = useState(false);
   const [toolboxRef, toolboxMeasure] = useMeasure();
   const [editorRef, editorMeasure] = useMeasure();
@@ -22,6 +31,7 @@ function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidat
         completionProvider,
         query,
         width,
+        language,
         height: height ? height - toolboxMeasure.height : void 0,
         onChange
       },
@@ -79,7 +89,7 @@ function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidat
     renderEditor(true)
   ));
 }
-function getStyles$h(theme) {
+function getStyles$l(theme) {
   return {
     modal: css`
       width: 95vw;

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

@@ -1 +1 @@
-{"version":3,"file":"RawEditor.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/RawEditor.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { css } from '@emotion/css';\nimport { useMeasure } from 'react-use';\n// @ts-ignore\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Modal, useStyles2, useTheme2 } from '@grafana/ui';\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":["getStyles"],"mappings":";;;;;;;;;;AAkBO,SAAS,SAAA,CAAU,EAAE,EAAA,EAAI,KAAA,EAAO,UAAU,UAAA,EAAY,UAAA,EAAY,eAAA,EAAiB,KAAA,EAAM,EAAmB;AACjH,EAAA,MAAM,QAAQ,SAAA,EAAU;AACxB,EAAA,MAAM,MAAA,GAAS,WAAWA,WAAS,CAAA;AACnC,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,UAAA,EAAY,cAAc,CAAA,GAAI,UAAA,EAA2B;AAChE,EAAA,MAAM,CAAC,SAAA,EAAW,aAAa,CAAA,GAAI,UAAA,EAA2B;AAE9D,EAAA,MAAM,kBAAA,GAAqB,QAAQ,MAAM,EAAA,CAAG,0BAAyB,EAAG,CAAC,EAAE,CAAC,CAAA;AAE5E,EAAA,MAAM,iBAAA,GAAoB,CAAC,KAAA,EAAgB,MAAA,KAAoB;AAC7D,IAAA,uBACE,KAAA,CAAA,aAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,kBAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,QACA,MAAA,EAAQ,MAAA,GAAS,MAAA,GAAS,cAAA,CAAe,MAAA,GAAS,MAAA;AAAA,QAClD;AAAA,OAAA;AAAA,MAEC,CAAC,EAAE,WAAA,EAAY,KAAM;AACpB,QAAA,uBACE,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,UAAA,EAAA,kBACR,KAAA,CAAA,aAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,EAAA;AAAA,YACA,KAAA,EAAO,eAAA;AAAA,YACP,UAAA;AAAA,YACA,YAAA,EAAc,WAAA;AAAA,YACd,SAAA,EAAS,IAAA;AAAA,YACT,KAAA;AAAA,YACA,QAAA,EAAU,aAAA;AAAA,YACV;AAAA;AAAA,SAEJ,CAAA;AAAA,MAEJ;AAAA,KACF;AAAA,EAEJ,CAAA;AAOA,EAAA,MAAM,YAAA,GAAe,CAAC,UAAA,GAAa,KAAA,KAAU;AAC3C,IAAA,OAAO,6BACL,KAAA,CAAA,aAAA,CAAC,SAAA,EAAA,IAAA,EACE,CAAC,EAAE,KAAA,EAAO,QAAO,KAAsB;AACtC,MAAA,OAAO,iBAAA,CAAkB,OAAO,MAAM,CAAA;AAAA,IACxC,CACF,CAAA,mBAEA,KAAA,CAAA,aAAA,CAAC,SAAI,GAAA,EAAK,SAAA,EAAA,EAAY,mBAAoB,CAAA;AAAA,EAE9C,CAAA;AAEA,EAAA,MAAM,oBAAoB,MAAM;AAC9B,IAAA,uBACE,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO;AAAA,UACL,OAAO,aAAA,CAAc,KAAA;AAAA,UACrB,QAAQ,aAAA,CAAc,MAAA;AAAA,UACtB,UAAA,EAAY,KAAA,CAAM,MAAA,CAAO,UAAA,CAAW,OAAA;AAAA,UACpC,OAAA,EAAS,MAAA;AAAA,UACT,UAAA,EAAY,QAAA;AAAA,UACZ,cAAA,EAAgB;AAAA;AAClB,OAAA;AAAA,MACD;AAAA,KAED;AAAA,EAEJ,CAAA;AAEA,EAAA,iEAEK,UAAA,GAAa,iBAAA,EAAkB,GAAI,YAAA,IACnC,UAAA,oBACC,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,MAAA,EAAS,KAAA,CAAM,KAAK,CAAA,CAAA;AAAA,MAC3B,oBAAA,EAAsB,KAAA;AAAA,MACtB,aAAA,EAAe,KAAA;AAAA,MACf,WAAW,MAAA,CAAO,KAAA;AAAA,MAClB,kBAAkB,MAAA,CAAO,YAAA;AAAA,MACzB,MAAA,EAAQ,UAAA;AAAA,MACR,WAAW,MAAM;AACf,QAAA,aAAA,CAAc,KAAK,CAAA;AAAA,MACrB;AAAA,KAAA;AAAA,IAEC,aAAa,IAAI;AAAA,GAGxB,CAAA;AAEJ;AAEA,SAASA,YAAU,KAAA,EAAsB;AACvC,EAAA,OAAO;AAAA,IACL,KAAA,EAAO,GAAA;AAAA;AAAA;AAAA,IAAA,CAAA;AAAA,IAIP,YAAA,EAAc,GAAA;AAAA;AAAA;AAAA,IAAA;AAAA,GAIhB;AACF;;;;"}
+{"version":3,"file":"RawEditor.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/RawEditor.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { css } from '@emotion/css';\nimport { useMeasure } from 'react-use';\n// @ts-ignore\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Modal, useStyles2, useTheme2 } from '@grafana/ui';\nimport { QueryEditorRaw } from './QueryEditorRaw';\nimport { QueryToolbox } from './QueryToolbox';\nimport { type QueryEditorProps, type SQLQuery } from '../types';\nimport type { SqlLanguage } from 'sql-formatter';\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  language?: SqlLanguage;\n}\n\nexport function RawEditor({\n  db,\n  query,\n  onChange,\n  onRunQuery,\n  onValidate,\n  queryToValidate,\n  range,\n  language = 'sql',\n}: 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        language={language}\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":["getStyles"],"mappings":"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"}

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

@@ -1,6 +1,5 @@
 import '@react-awesome-query-builder/ui';
 import { toOption as toOption$1 } from '@grafana/data';
-import 'lodash';
 import '@grafana/ui';
 import 'react';
 import '../SQLEditor/standardSql/language.js';

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../src/components/QueryEditor/types.ts"],"sourcesContent":["import { type JsonTree } from '@react-awesome-query-builder/ui';\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; // When catalog is present, dataset represents the schema. Otherwise, it's the dataset.\n  catalog?: 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: (catalog?: string) => Promise<string[]>; // When catalog is provided, returns schemas for that catalog\n  catalogs?: () => Promise<string[]>;\n  tables: (dataset?: string, catalog?: string, schema?: 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  disableCatalogs?: 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;AAiDO,IAAK,WAAA,qBAAAA,YAAAA,KAAL;AACL,EAAAA,YAAAA,CAAAA,YAAAA,CAAA,YAAA,CAAA,GAAA,CAAA,CAAA,GAAA,YAAA;AACA,EAAAA,YAAAA,CAAAA,YAAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA;AACA,EAAAA,YAAAA,CAAAA,YAAAA,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAA;AACA,EAAAA,YAAAA,CAAAA,YAAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA;AACA,EAAAA,YAAAA,CAAAA,YAAAA,CAAA,aAAA,CAAA,GAAA,CAAA,CAAA,GAAA,aAAA;AALU,EAAA,OAAAA,YAAAA;AAAA,CAAA,EAAA,WAAA,IAAA,EAAA;AAQL,IAAK,UAAA,qBAAAC,WAAAA,KAAL;AACL,EAAAA,YAAA,SAAA,CAAA,GAAU,SAAA;AACV,EAAAA,YAAA,MAAA,CAAA,GAAO,MAAA;AAFG,EAAA,OAAAA,WAAAA;AAAA,CAAA,EAAA,UAAA,IAAA,EAAA;AAwDL,MAAM,oBAAA,GAAuB;AAAA,EAClC,EAAE,KAAA,EAAO,aAAA,EAAe,KAAA,EAAO,CAAA,mBAAuB;AAAA,EACtD,EAAE,KAAA,EAAO,OAAA,EAAS,KAAA,EAAO,CAAA;AAC3B;AAEA,MAAM,mBAAmB,CAAC,KAAA,MAAmB,EAAE,KAAA,EAAO,OAAO,KAAA,EAAM,CAAA;AAE5D,MAAM,YAAW,EAAA,GAAAC,UAAA,KAAA,IAAA,GAAA,EAAA,GAAoB;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../src/components/QueryEditor/types.ts"],"sourcesContent":["import { type JsonTree } from '@react-awesome-query-builder/ui';\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 {\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; // When catalog is present, dataset represents the schema. Otherwise, it's the dataset.\n  catalog?: 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: (catalog?: string) => Promise<string[]>; // When catalog is provided, returns schemas for that catalog\n  catalogs?: () => Promise<string[]>;\n  tables: (dataset?: string, catalog?: string, schema?: 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  disableCatalogs?: 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\n/**\n * Represents a query with all default values applied.\n * This is equivalent to SQLQuery since applyQueryDefaults returns SQLQuery.\n */\nexport type QueryWithDefaults = SQLQuery;\n"],"names":["QueryFormat","EditorMode","toOptionFromData"],"mappings":";;;;;;;;;;AAAA,IAAA,EAAA;AAgDO,IAAK,WAAA,qBAAAA,YAAAA,KAAL;AACL,EAAAA,YAAAA,CAAAA,YAAAA,CAAA,YAAA,CAAA,GAAA,CAAA,CAAA,GAAA,YAAA;AACA,EAAAA,YAAAA,CAAAA,YAAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA;AACA,EAAAA,YAAAA,CAAAA,YAAAA,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAA;AACA,EAAAA,YAAAA,CAAAA,YAAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA;AACA,EAAAA,YAAAA,CAAAA,YAAAA,CAAA,aAAA,CAAA,GAAA,CAAA,CAAA,GAAA,aAAA;AALU,EAAA,OAAAA,YAAAA;AAAA,CAAA,EAAA,WAAA,IAAA,EAAA;AAQL,IAAK,UAAA,qBAAAC,WAAAA,KAAL;AACL,EAAAA,YAAA,SAAA,CAAA,GAAU,SAAA;AACV,EAAAA,YAAA,MAAA,CAAA,GAAO,MAAA;AAFG,EAAA,OAAAA,WAAAA;AAAA,CAAA,EAAA,UAAA,IAAA,EAAA;AAwDL,MAAM,oBAAA,GAAuB;AAAA,EAClC,EAAE,KAAA,EAAO,aAAA,EAAe,KAAA,EAAO,CAAA,mBAAuB;AAAA,EACtD,EAAE,KAAA,EAAO,OAAA,EAAS,KAAA,EAAO,CAAA;AAC3B;AAEA,MAAM,mBAAmB,CAAC,KAAA,MAAmB,EAAE,KAAA,EAAO,OAAO,KAAA,EAAM,CAAA;AAE5D,MAAM,YAAW,EAAA,GAAAC,UAAA,KAAA,IAAA,GAAA,EAAA,GAAoB;;;;"}

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

@@ -1,9 +1,20 @@
-import sqlFormatter from 'sql-formatter-plus';
+import { format } from 'sql-formatter';
 
-function formatSQL(q) {
-  return sqlFormatter.format(q).replace(/(\$ \{ .* \})|(\$ __)|(\$ \w+)/g, (m) => {
-    return m.replace(/\s/g, "");
+function formatSQL(q, language = "sql") {
+  const formatted = format(q, {
+    language,
+    paramTypes: {
+      custom: [
+        {
+          regex: "\\$\\s*\\{[^}]*\\}|\\$\\s*__\\w+(?:\\([^)]*\\))?|\\$\\s*\\w+"
+        }
+      ]
+    }
   });
+  return formatted.replace(
+    /(\$\s*\{[^}]*\})|(\$\s*__\w+(?:\([^)]*\))?)|(\$\s*\w+)/g,
+    (m) => m.replace(/\s/g, "")
+  );
 }
 
 export { formatSQL };

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

@@ -1 +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,CAAA,EAAW;AACnC,EAAA,OAAO,aAAa,MAAA,CAAO,CAAC,EAAE,OAAA,CAAQ,iCAAA,EAAmC,CAAC,CAAA,KAAc;AACtF,IAAA,OAAO,CAAA,CAAE,OAAA,CAAQ,KAAA,EAAO,EAAE,CAAA;AAAA,EAC5B,CAAC,CAAA;AACH;;;;"}
+{"version":3,"file":"formatSQL.js","sources":["../../../../../src/components/QueryEditor/utils/formatSQL.ts"],"sourcesContent":["import { format, type SqlLanguage } from 'sql-formatter';\n\n/**\n * Format SQL while preserving Grafana template variable tokens.\n * Treats `${...}`, `$__...`, and `$var` as parameters so the\n * formatter does not split or reflow them, then normalizes any\n * whitespace inside those tokens.\n */\nexport function formatSQL(q: string, language: SqlLanguage = 'sql') {\n  const formatted = format(q, {\n    language,\n    paramTypes: {\n      custom: [\n        {\n          regex: '\\\\$\\\\s*\\\\{[^}]*\\\\}|\\\\$\\\\s*__\\\\w+(?:\\\\([^)]*\\\\))?|\\\\$\\\\s*\\\\w+',\n        },\n      ],\n    },\n  });\n  return formatted.replace(/(\\$\\s*\\{[^}]*\\})|(\\$\\s*__\\w+(?:\\([^)]*\\))?)|(\\$\\s*\\w+)/g, (m: string) =>\n    m.replace(/\\s/g, '')\n  );\n}\n"],"names":[],"mappings":";;AAQO,SAAS,SAAA,CAAU,CAAA,EAAW,QAAA,GAAwB,KAAA,EAAO;AAClE,EAAA,MAAM,SAAA,GAAY,OAAO,CAAA,EAAG;AAAA,IAC1B,QAAA;AAAA,IACA,UAAA,EAAY;AAAA,MACV,MAAA,EAAQ;AAAA,QACN;AAAA,UACE,KAAA,EAAO;AAAA;AACT;AACF;AACF,GACD,CAAA;AACD,EAAA,OAAO,SAAA,CAAU,OAAA;AAAA,IAAQ,yDAAA;AAAA,IAA2D,CAAC,CAAA,KACnF,CAAA,CAAE,OAAA,CAAQ,OAAO,EAAE;AAAA,GACrB;AACF;;;;"}

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

@@ -8,12 +8,12 @@ const EditorField = (props) => {
   var _a;
   const { label, optional, tooltip, children, width, ...fieldProps } = props;
   const theme = useTheme2();
-  const styles = getStyles$d(theme, width);
+  const styles = getStyles$h(theme, width);
   const childInputId = (fieldProps == null ? void 0 : fieldProps.htmlFor) || ((_a = ReactUtils) == null ? void 0 : _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$d = stylesFactory((theme, width) => {
+const getStyles$h = stylesFactory((theme, width) => {
   return {
     root: css({
       minWidth: theme.spacing(width != null ? width : 0)

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

@@ -5,10 +5,10 @@ import { useStyles2 } from '@grafana/ui';
 import { EditorStack } from '../EditorStack.js';
 
 const EditorRow = ({ children }) => {
-  const styles = useStyles2(getStyles$e);
+  const styles = useStyles2(getStyles$i);
   return /* @__PURE__ */ React.createElement("div", { className: styles.root }, /* @__PURE__ */ React.createElement(EditorStack, { gap: 2 }, children));
 };
-const getStyles$e = (theme) => {
+const getStyles$i = (theme) => {
   return {
     root: css({
       padding: theme.spacing(1),

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

@@ -5,23 +5,23 @@ import '@grafana/data';
 import { useStyles2, IconButton, Field, CodeEditor } from '@grafana/ui';
 import { formatSQL } from '../utils/formatSQL.js';
 
-function Preview({ rawSql }) {
+function Preview({ rawSql, language = "sql" }) {
   const [_, copyToClipboard] = useCopyToClipboard();
-  const styles = useStyles2(getStyles$g);
+  const styles = useStyles2(getStyles$k);
   const labelElement = /* @__PURE__ */ React.createElement("div", { className: styles.labelWrapper }, /* @__PURE__ */ React.createElement("label", { className: styles.label }, "Preview"), /* @__PURE__ */ React.createElement(IconButton, { tooltip: "Copy to clipboard", onClick: () => copyToClipboard(rawSql), name: "copy" }));
   return /* @__PURE__ */ React.createElement(Field, { label: labelElement, className: styles.grow }, /* @__PURE__ */ React.createElement(
     CodeEditor,
     {
       language: "sql",
       height: 80,
-      value: formatSQL(rawSql),
+      value: formatSQL(rawSql, language),
       monacoOptions: { scrollbar: { vertical: "hidden" }, scrollBeyondLastLine: false },
       readOnly: true,
       showMiniMap: false
     }
   ));
 }
-function getStyles$g(theme) {
+function getStyles$k(theme) {
   return {
     grow: css({ flexGrow: 1 }),
     label: css({ fontSize: 12, fontWeight: theme.typography.fontWeightMedium }),

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

@@ -1 +1 @@
-{"version":3,"file":"Preview.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/Preview.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from '@emotion/css';\nimport { useCopyToClipboard } from 'react-use';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { CodeEditor, Field, IconButton, useStyles2 } from '@grafana/ui';\n\nimport { formatSQL } from '../utils/formatSQL';\n\ntype PreviewProps = {\n  rawSql: string;\n};\n\nexport function Preview({ rawSql }: PreviewProps) {\n  // TODO: use zero index to give feedback about copy success\n  const [_, copyToClipboard] = useCopyToClipboard();\n  const styles = useStyles2(getStyles);\n\n  const labelElement = (\n    <div className={styles.labelWrapper}>\n      <label className={styles.label}>Preview</label>\n      <IconButton tooltip=\"Copy to clipboard\" onClick={() => copyToClipboard(rawSql)} name=\"copy\" />\n    </div>\n  );\n\n  return (\n    <Field label={labelElement} className={styles.grow}>\n      <CodeEditor\n        language=\"sql\"\n        height={80}\n        value={formatSQL(rawSql)}\n        monacoOptions={{ scrollbar: { vertical: 'hidden' }, scrollBeyondLastLine: false }}\n        readOnly={true}\n        showMiniMap={false}\n      />\n    </Field>\n  );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    grow: css({ flexGrow: 1 }),\n    label: css({ fontSize: 12, fontWeight: theme.typography.fontWeightMedium }),\n    labelWrapper: css({ display: 'flex', justifyContent: 'space-between', paddingBottom: theme.spacing(0.5) }),\n  };\n}\n"],"names":["getStyles"],"mappings":";;;;;;;AAaO,SAAS,OAAA,CAAQ,EAAE,MAAA,EAAO,EAAiB;AAEhD,EAAA,MAAM,CAAC,CAAA,EAAG,eAAe,CAAA,GAAI,kBAAA,EAAmB;AAChD,EAAA,MAAM,MAAA,GAAS,WAAWA,WAAS,CAAA;AAEnC,EAAA,MAAM,YAAA,mBACJ,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,gCACrB,KAAA,CAAA,aAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAW,MAAA,CAAO,KAAA,EAAA,EAAO,SAAO,mBACvC,KAAA,CAAA,aAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,mBAAA,EAAoB,OAAA,EAAS,MAAM,gBAAgB,MAAM,CAAA,EAAG,IAAA,EAAK,MAAA,EAAO,CAC9F,CAAA;AAGF,EAAA,2CACG,KAAA,EAAA,EAAM,KAAA,EAAO,YAAA,EAAc,SAAA,EAAW,OAAO,IAAA,EAAA,kBAC5C,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAS,KAAA;AAAA,MACT,MAAA,EAAQ,EAAA;AAAA,MACR,KAAA,EAAO,UAAU,MAAM,CAAA;AAAA,MACvB,aAAA,EAAe,EAAE,SAAA,EAAW,EAAE,UAAU,QAAA,EAAS,EAAG,sBAAsB,KAAA,EAAM;AAAA,MAChF,QAAA,EAAU,IAAA;AAAA,MACV,WAAA,EAAa;AAAA;AAAA,GAEjB,CAAA;AAEJ;AAEA,SAASA,YAAU,KAAA,EAAsB;AACvC,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,GAAA,CAAI,EAAE,QAAA,EAAU,GAAG,CAAA;AAAA,IACzB,KAAA,EAAO,IAAI,EAAE,QAAA,EAAU,IAAI,UAAA,EAAY,KAAA,CAAM,UAAA,CAAW,gBAAA,EAAkB,CAAA;AAAA,IAC1E,YAAA,EAAc,GAAA,CAAI,EAAE,OAAA,EAAS,MAAA,EAAQ,cAAA,EAAgB,eAAA,EAAiB,aAAA,EAAe,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA,EAAG;AAAA,GAC3G;AACF;;;;"}
+{"version":3,"file":"Preview.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/Preview.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from '@emotion/css';\nimport { useCopyToClipboard } from 'react-use';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { CodeEditor, Field, IconButton, useStyles2 } from '@grafana/ui';\n\nimport { formatSQL } from '../utils/formatSQL';\nimport type { SqlLanguage } from 'sql-formatter';\n\ntype PreviewProps = {\n  rawSql: string;\n  language?: SqlLanguage;\n};\n\nexport function Preview({ rawSql, language = 'sql' }: PreviewProps) {\n  // TODO: use zero index to give feedback about copy success\n  const [_, copyToClipboard] = useCopyToClipboard();\n  const styles = useStyles2(getStyles);\n\n  const labelElement = (\n    <div className={styles.labelWrapper}>\n      <label className={styles.label}>Preview</label>\n      <IconButton tooltip=\"Copy to clipboard\" onClick={() => copyToClipboard(rawSql)} name=\"copy\" />\n    </div>\n  );\n\n  return (\n    <Field label={labelElement} className={styles.grow}>\n      <CodeEditor\n        language=\"sql\"\n        height={80}\n        value={formatSQL(rawSql, language)}\n        monacoOptions={{ scrollbar: { vertical: 'hidden' }, scrollBeyondLastLine: false }}\n        readOnly={true}\n        showMiniMap={false}\n      />\n    </Field>\n  );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    grow: css({ flexGrow: 1 }),\n    label: css({ fontSize: 12, fontWeight: theme.typography.fontWeightMedium }),\n    labelWrapper: css({ display: 'flex', justifyContent: 'space-between', paddingBottom: theme.spacing(0.5) }),\n  };\n}\n"],"names":["getStyles"],"mappings":";;;;;;;AAeO,SAAS,OAAA,CAAQ,EAAE,MAAA,EAAQ,QAAA,GAAW,OAAM,EAAiB;AAElE,EAAA,MAAM,CAAC,CAAA,EAAG,eAAe,CAAA,GAAI,kBAAA,EAAmB;AAChD,EAAA,MAAM,MAAA,GAAS,WAAWA,WAAS,CAAA;AAEnC,EAAA,MAAM,YAAA,mBACJ,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,gCACrB,KAAA,CAAA,aAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAW,MAAA,CAAO,KAAA,EAAA,EAAO,SAAO,mBACvC,KAAA,CAAA,aAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,mBAAA,EAAoB,OAAA,EAAS,MAAM,gBAAgB,MAAM,CAAA,EAAG,IAAA,EAAK,MAAA,EAAO,CAC9F,CAAA;AAGF,EAAA,2CACG,KAAA,EAAA,EAAM,KAAA,EAAO,YAAA,EAAc,SAAA,EAAW,OAAO,IAAA,EAAA,kBAC5C,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAS,KAAA;AAAA,MACT,MAAA,EAAQ,EAAA;AAAA,MACR,KAAA,EAAO,SAAA,CAAU,MAAA,EAAQ,QAAQ,CAAA;AAAA,MACjC,aAAA,EAAe,EAAE,SAAA,EAAW,EAAE,UAAU,QAAA,EAAS,EAAG,sBAAsB,KAAA,EAAM;AAAA,MAChF,QAAA,EAAU,IAAA;AAAA,MACV,WAAA,EAAa;AAAA;AAAA,GAEjB,CAAA;AAEJ;AAEA,SAASA,YAAU,KAAA,EAAsB;AACvC,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,GAAA,CAAI,EAAE,QAAA,EAAU,GAAG,CAAA;AAAA,IACzB,KAAA,EAAO,IAAI,EAAE,QAAA,EAAU,IAAI,UAAA,EAAY,KAAA,CAAM,UAAA,CAAW,gBAAA,EAAkB,CAAA;AAAA,IAC1E,YAAA,EAAc,GAAA,CAAI,EAAE,OAAA,EAAS,MAAA,EAAQ,cAAA,EAAgB,eAAA,EAAiB,aAAA,EAAe,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA,EAAG;AAAA,GAC3G;AACF;;;;"}

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

@@ -2,7 +2,6 @@ import React from 'react';
 import '@grafana/data';
 import { GroupByRow } from './GroupByRow.js';
 import '../types.js';
-import 'lodash';
 import { useSqlChange } from '../utils/useSqlChange.js';
 
 function SQLGroupByRow({ fields, query, onQueryChange, db }) {

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

@@ -1 +1 @@
-{"version":3,"file":"SQLGroupByRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/SQLGroupByRow.tsx"],"sourcesContent":["import React from 'react';\nimport { type SelectableValue } from '@grafana/data';\n\nimport { GroupByRow } from './GroupByRow';\nimport { type QueryWithDefaults } from '../defaults';\nimport { type SQLQuery, type DB } from '../types';\nimport { useSqlChange } from '../utils/useSqlChange';\n\ninterface SQLGroupByRowProps {\n  fields: SelectableValue[];\n  query: QueryWithDefaults;\n  onQueryChange: (query: SQLQuery) => void;\n  db: DB;\n}\n\nexport function SQLGroupByRow({ fields, query, onQueryChange, db }: SQLGroupByRowProps) {\n  const { onSqlChange } = useSqlChange({ query, onQueryChange, db });\n\n  return <GroupByRow columns={fields} sql={query.sql!} onSqlChange={onSqlChange} />;\n}\n"],"names":[],"mappings":";;;;;;;AAeO,SAAS,cAAc,EAAE,MAAA,EAAQ,KAAA,EAAO,aAAA,EAAe,IAAG,EAAuB;AACtF,EAAA,MAAM,EAAE,aAAY,GAAI,YAAA,CAAa,EAAE,KAAA,EAAO,aAAA,EAAe,IAAI,CAAA;AAEjE,EAAA,2CAAQ,UAAA,EAAA,EAAW,OAAA,EAAS,QAAQ,GAAA,EAAK,KAAA,CAAM,KAAM,WAAA,EAA0B,CAAA;AACjF;;;;"}
+{"version":3,"file":"SQLGroupByRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/SQLGroupByRow.tsx"],"sourcesContent":["import React from 'react';\nimport { type SelectableValue } from '@grafana/data';\n\nimport { GroupByRow } from './GroupByRow';\nimport { type SQLQuery, type DB, type QueryWithDefaults } from '../types';\nimport { useSqlChange } from '../utils/useSqlChange';\n\ninterface SQLGroupByRowProps {\n  fields: SelectableValue[];\n  query: QueryWithDefaults;\n  onQueryChange: (query: SQLQuery) => void;\n  db: DB;\n}\n\nexport function SQLGroupByRow({ fields, query, onQueryChange, db }: SQLGroupByRowProps) {\n  const { onSqlChange } = useSqlChange({ query, onQueryChange, db });\n\n  return <GroupByRow columns={fields} sql={query.sql!} onSqlChange={onSqlChange} />;\n}\n"],"names":[],"mappings":";;;;;;AAcO,SAAS,cAAc,EAAE,MAAA,EAAQ,KAAA,EAAO,aAAA,EAAe,IAAG,EAAuB;AACtF,EAAA,MAAM,EAAE,aAAY,GAAI,YAAA,CAAa,EAAE,KAAA,EAAO,aAAA,EAAe,IAAI,CAAA;AAEjE,EAAA,2CAAQ,UAAA,EAAA,EAAW,OAAA,EAAS,QAAQ,GAAA,EAAK,KAAA,CAAM,KAAM,WAAA,EAA0B,CAAA;AACjF;;;;"}

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

@@ -2,7 +2,6 @@ import React from 'react';
 import '@grafana/data';
 import { OrderByRow } from './OrderByRow.js';
 import '../types.js';
-import 'lodash';
 import { useSqlChange } from '../utils/useSqlChange.js';
 
 function SQLOrderByRow({ fields, query, onQueryChange, db }) {

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

@@ -1 +1 @@
-{"version":3,"file":"SQLOrderByRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/SQLOrderByRow.tsx"],"sourcesContent":["import React from 'react';\nimport { type SelectableValue } from '@grafana/data';\nimport { OrderByRow } from './OrderByRow';\nimport { type QueryWithDefaults } from '../defaults';\nimport { type SQLQuery, type DB } from '../types';\nimport { useSqlChange } from '../utils/useSqlChange';\n\ntype SQLOrderByRowProps = {\n  fields: SelectableValue[];\n  query: QueryWithDefaults;\n  onQueryChange: (query: SQLQuery) => void;\n  db: DB;\n};\n\nexport function SQLOrderByRow({ fields, query, onQueryChange, db }: SQLOrderByRowProps) {\n  const { onSqlChange } = useSqlChange({ query, onQueryChange, db });\n  let columnsWithIndices: SelectableValue[] = [];\n\n  if (fields) {\n    const options = query.sql?.columns?.map((c, i) => {\n      const value = c.name ? `${c.name}(${c.parameters?.map((p) => p.name)})` : c.parameters?.map((p) => p.name);\n      return {\n        value,\n        label: `${i + 1} - ${value}`,\n      };\n    });\n    columnsWithIndices = [\n      {\n        value: '',\n        label: 'Selected columns',\n        options,\n        expanded: true,\n      },\n      ...fields,\n    ];\n  }\n\n  return <OrderByRow sql={query.sql!} onSqlChange={onSqlChange} columns={columnsWithIndices} />;\n}\n"],"names":["_a","_b"],"mappings":";;;;;;;AAcO,SAAS,cAAc,EAAE,MAAA,EAAQ,KAAA,EAAO,aAAA,EAAe,IAAG,EAAuB;AAdxF,EAAA,IAAA,EAAA,EAAA,EAAA;AAeE,EAAA,MAAM,EAAE,aAAY,GAAI,YAAA,CAAa,EAAE,KAAA,EAAO,aAAA,EAAe,IAAI,CAAA;AACjE,EAAA,IAAI,qBAAwC,EAAC;AAE7C,EAAA,IAAI,MAAA,EAAQ;AACV,IAAA,MAAM,OAAA,GAAA,CAAU,iBAAM,GAAA,KAAN,IAAA,GAAA,MAAA,GAAA,EAAA,CAAW,YAAX,IAAA,GAAA,MAAA,GAAA,EAAA,CAAoB,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,KAAM;AAnBtD,MAAA,IAAAA,GAAAA,EAAAC,GAAAA;AAoBM,MAAA,MAAM,KAAA,GAAQ,CAAA,CAAE,IAAA,GAAO,CAAA,EAAG,CAAA,CAAE,IAAI,CAAA,CAAA,EAAA,CAAID,GAAAA,GAAA,CAAA,CAAE,UAAA,KAAF,IAAA,GAAA,MAAA,GAAAA,GAAAA,CAAc,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,IAAA,CAAK,CAAA,CAAA,CAAA,GAAA,CAAMC,GAAAA,GAAA,CAAA,CAAE,UAAA,KAAF,IAAA,GAAA,MAAA,GAAAA,GAAAA,CAAc,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,IAAA,CAAA;AACrG,MAAA,OAAO;AAAA,QACL,KAAA;AAAA,QACA,KAAA,EAAO,CAAA,EAAG,CAAA,GAAI,CAAC,MAAM,KAAK,CAAA;AAAA,OAC5B;AAAA,IACF,CAAA,CAAA;AACA,IAAA,kBAAA,GAAqB;AAAA,MACnB;AAAA,QACE,KAAA,EAAO,EAAA;AAAA,QACP,KAAA,EAAO,kBAAA;AAAA,QACP,OAAA;AAAA,QACA,QAAA,EAAU;AAAA,OACZ;AAAA,MACA,GAAG;AAAA,KACL;AAAA,EACF;AAEA,EAAA,2CAAQ,UAAA,EAAA,EAAW,GAAA,EAAK,MAAM,GAAA,EAAM,WAAA,EAA0B,SAAS,kBAAA,EAAoB,CAAA;AAC7F;;;;"}
+{"version":3,"file":"SQLOrderByRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/SQLOrderByRow.tsx"],"sourcesContent":["import React from 'react';\nimport { type SelectableValue } from '@grafana/data';\nimport { OrderByRow } from './OrderByRow';\nimport { type SQLQuery, type DB, type QueryWithDefaults } from '../types';\nimport { useSqlChange } from '../utils/useSqlChange';\n\ntype SQLOrderByRowProps = {\n  fields: SelectableValue[];\n  query: QueryWithDefaults;\n  onQueryChange: (query: SQLQuery) => void;\n  db: DB;\n};\n\nexport function SQLOrderByRow({ fields, query, onQueryChange, db }: SQLOrderByRowProps) {\n  const { onSqlChange } = useSqlChange({ query, onQueryChange, db });\n  let columnsWithIndices: SelectableValue[] = [];\n\n  if (fields) {\n    const options = query.sql?.columns?.map((c, i) => {\n      const value = c.name ? `${c.name}(${c.parameters?.map((p) => p.name)})` : c.parameters?.map((p) => p.name);\n      return {\n        value,\n        label: `${i + 1} - ${value}`,\n      };\n    });\n    columnsWithIndices = [\n      {\n        value: '',\n        label: 'Selected columns',\n        options,\n        expanded: true,\n      },\n      ...fields,\n    ];\n  }\n\n  return <OrderByRow sql={query.sql!} onSqlChange={onSqlChange} columns={columnsWithIndices} />;\n}\n"],"names":["_a","_b"],"mappings":";;;;;;AAaO,SAAS,cAAc,EAAE,MAAA,EAAQ,KAAA,EAAO,aAAA,EAAe,IAAG,EAAuB;AAbxF,EAAA,IAAA,EAAA,EAAA,EAAA;AAcE,EAAA,MAAM,EAAE,aAAY,GAAI,YAAA,CAAa,EAAE,KAAA,EAAO,aAAA,EAAe,IAAI,CAAA;AACjE,EAAA,IAAI,qBAAwC,EAAC;AAE7C,EAAA,IAAI,MAAA,EAAQ;AACV,IAAA,MAAM,OAAA,GAAA,CAAU,iBAAM,GAAA,KAAN,IAAA,GAAA,MAAA,GAAA,EAAA,CAAW,YAAX,IAAA,GAAA,MAAA,GAAA,EAAA,CAAoB,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,KAAM;AAlBtD,MAAA,IAAAA,GAAAA,EAAAC,GAAAA;AAmBM,MAAA,MAAM,KAAA,GAAQ,CAAA,CAAE,IAAA,GAAO,CAAA,EAAG,CAAA,CAAE,IAAI,CAAA,CAAA,EAAA,CAAID,GAAAA,GAAA,CAAA,CAAE,UAAA,KAAF,IAAA,GAAA,MAAA,GAAAA,GAAAA,CAAc,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,IAAA,CAAK,CAAA,CAAA,CAAA,GAAA,CAAMC,GAAAA,GAAA,CAAA,CAAE,UAAA,KAAF,IAAA,GAAA,MAAA,GAAAA,GAAAA,CAAc,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,IAAA,CAAA;AACrG,MAAA,OAAO;AAAA,QACL,KAAA;AAAA,QACA,KAAA,EAAO,CAAA,EAAG,CAAA,GAAI,CAAC,MAAM,KAAK,CAAA;AAAA,OAC5B;AAAA,IACF,CAAA,CAAA;AACA,IAAA,kBAAA,GAAqB;AAAA,MACnB;AAAA,QACE,KAAA,EAAO,EAAA;AAAA,QACP,KAAA,EAAO,kBAAA;AAAA,QACP,OAAA;AAAA,QACA,QAAA,EAAU;AAAA,OACZ;AAAA,MACA,GAAG;AAAA,KACL;AAAA,EACF;AAEA,EAAA,2CAAQ,UAAA,EAAA,EAAW,GAAA,EAAK,MAAM,GAAA,EAAM,WAAA,EAA0B,SAAS,kBAAA,EAAoB,CAAA;AAC7F;;;;"}

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

@@ -3,7 +3,6 @@ import { useAsync } from 'react-use';
 import { toOption } from '@grafana/data';
 import { SelectRow } from './SelectRow.js';
 import '../types.js';
-import 'lodash';
 import { useSqlChange } from '../utils/useSqlChange.js';
 
 function SQLSelectRow({ fields, query, onQueryChange, db }) {

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

@@ -1 +1 @@
-{"version":3,"file":"SQLSelectRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/SQLSelectRow.tsx"],"sourcesContent":["import React from 'react';\nimport { useAsync } from 'react-use';\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { SelectRow } from './SelectRow';\nimport { type QueryWithDefaults } from '../defaults';\nimport { type SQLQuery, type DB } from '../types';\nimport { useSqlChange } from '../utils/useSqlChange';\n\ninterface SQLSelectRowProps {\n  fields: SelectableValue[];\n  query: QueryWithDefaults;\n  onQueryChange: (query: SQLQuery) => void;\n  db: DB;\n}\n\nexport function SQLSelectRow({ fields, query, onQueryChange, db }: SQLSelectRowProps) {\n  const { onSqlChange } = useSqlChange({ query, onQueryChange, db });\n\n  const state = useAsync(async () => {\n    const functions = await db.functions();\n    return functions.map((f) => toOption(f.name));\n  }, [db]);\n\n  return <SelectRow columns={fields} sql={query.sql!} functions={state.value} onSqlChange={onSqlChange} />;\n}\n"],"names":[],"mappings":";;;;;;;;AAeO,SAAS,aAAa,EAAE,MAAA,EAAQ,KAAA,EAAO,aAAA,EAAe,IAAG,EAAsB;AACpF,EAAA,MAAM,EAAE,aAAY,GAAI,YAAA,CAAa,EAAE,KAAA,EAAO,aAAA,EAAe,IAAI,CAAA;AAEjE,EAAA,MAAM,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAA,MAAM,SAAA,GAAY,MAAM,EAAA,CAAG,SAAA,EAAU;AACrC,IAAA,OAAO,UAAU,GAAA,CAAI,CAAC,MAAM,QAAA,CAAS,CAAA,CAAE,IAAI,CAAC,CAAA;AAAA,EAC9C,CAAA,EAAG,CAAC,EAAE,CAAC,CAAA;AAEP,EAAA,uBAAO,KAAA,CAAA,aAAA,CAAC,SAAA,EAAA,EAAU,OAAA,EAAS,MAAA,EAAQ,GAAA,EAAK,MAAM,GAAA,EAAM,SAAA,EAAW,KAAA,CAAM,KAAA,EAAO,WAAA,EAA0B,CAAA;AACxG;;;;"}
+{"version":3,"file":"SQLSelectRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/SQLSelectRow.tsx"],"sourcesContent":["import React from 'react';\nimport { useAsync } from 'react-use';\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { SelectRow } from './SelectRow';\nimport { type SQLQuery, type DB, type QueryWithDefaults } from '../types';\nimport { useSqlChange } from '../utils/useSqlChange';\n\ninterface SQLSelectRowProps {\n  fields: SelectableValue[];\n  query: QueryWithDefaults;\n  onQueryChange: (query: SQLQuery) => void;\n  db: DB;\n}\n\nexport function SQLSelectRow({ fields, query, onQueryChange, db }: SQLSelectRowProps) {\n  const { onSqlChange } = useSqlChange({ query, onQueryChange, db });\n\n  const state = useAsync(async () => {\n    const functions = await db.functions();\n    return functions.map((f) => toOption(f.name));\n  }, [db]);\n\n  return <SelectRow columns={fields} sql={query.sql!} functions={state.value} onSqlChange={onSqlChange} />;\n}\n"],"names":[],"mappings":";;;;;;;AAcO,SAAS,aAAa,EAAE,MAAA,EAAQ,KAAA,EAAO,aAAA,EAAe,IAAG,EAAsB;AACpF,EAAA,MAAM,EAAE,aAAY,GAAI,YAAA,CAAa,EAAE,KAAA,EAAO,aAAA,EAAe,IAAI,CAAA;AAEjE,EAAA,MAAM,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAA,MAAM,SAAA,GAAY,MAAM,EAAA,CAAG,SAAA,EAAU;AACrC,IAAA,OAAO,UAAU,GAAA,CAAI,CAAC,MAAM,QAAA,CAAS,CAAA,CAAE,IAAI,CAAC,CAAA;AAAA,EAC9C,CAAA,EAAG,CAAC,EAAE,CAAC,CAAA;AAEP,EAAA,uBAAO,KAAA,CAAA,aAAA,CAAC,SAAA,EAAA,EAAU,OAAA,EAAS,MAAA,EAAQ,GAAA,EAAK,MAAM,GAAA,EAAM,SAAA,EAAW,KAAA,CAAM,KAAA,EAAO,WAAA,EAA0B,CAAA;AACxG;;;;"}

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

@@ -4,7 +4,6 @@ import '@grafana/data';
 import './AwesomeQueryBuilder.js';
 import { WhereRow } from './WhereRow.js';
 import '../types.js';
-import 'lodash';
 import { useSqlChange } from '../utils/useSqlChange.js';
 
 function SQLWhereRow({ query, fields, onQueryChange, db }) {

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

@@ -1 +1 @@
-{"version":3,"file":"SQLWhereRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/SQLWhereRow.tsx"],"sourcesContent":["import React from 'react';\nimport { useAsync } from 'react-use';\nimport { type SelectableValue } from '@grafana/data';\nimport { type Config } from './AwesomeQueryBuilder';\nimport { WhereRow } from './WhereRow';\nimport { type QueryWithDefaults } from '../defaults';\nimport { type SQLQuery, type DB, type SQLExpression, type SQLSelectableValue } from '../types';\nimport { useSqlChange } from '../utils/useSqlChange';\n\ninterface WhereRowProps {\n  query: QueryWithDefaults;\n  fields: SelectableValue[];\n  onQueryChange: (query: SQLQuery) => void;\n  db: DB;\n}\n\nexport function SQLWhereRow({ query, fields, onQueryChange, db }: WhereRowProps) {\n  const state = useAsync(async () => {\n    return mapFieldsToTypes(fields);\n  }, [fields]);\n\n  const { onSqlChange } = useSqlChange({ query, onQueryChange, db });\n\n  return (\n    <WhereRow\n      // TODO: fix key that's used to force clean render or SQLWhereRow - otherwise it doesn't render operators correctly\n      key={JSON.stringify(state.value)}\n      config={{ fields: state.value || {} }}\n      sql={query.sql!}\n      onSqlChange={(val: SQLExpression) => {\n        onSqlChange(val);\n      }}\n    />\n  );\n}\n\n// needed for awesome query builder\nfunction mapFieldsToTypes(columns: SQLSelectableValue[]) {\n  const fields: Config['fields'] = {};\n  for (const col of columns) {\n    fields[col.value] = {\n      type: col.raqbFieldType || 'text',\n      valueSources: ['value'],\n      mainWidgetProps: { customProps: { icon: col.icon } },\n    };\n  }\n  return fields;\n}\n"],"names":[],"mappings":";;;;;;;;;AAgBO,SAAS,YAAY,EAAE,KAAA,EAAO,MAAA,EAAQ,aAAA,EAAe,IAAG,EAAkB;AAC/E,EAAA,MAAM,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAA,OAAO,iBAAiB,MAAM,CAAA;AAAA,EAChC,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAA,MAAM,EAAE,aAAY,GAAI,YAAA,CAAa,EAAE,KAAA,EAAO,aAAA,EAAe,IAAI,CAAA;AAEjE,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MAEC,GAAA,EAAK,IAAA,CAAK,SAAA,CAAU,KAAA,CAAM,KAAK,CAAA;AAAA,MAC/B,QAAQ,EAAE,MAAA,EAAQ,KAAA,CAAM,KAAA,IAAS,EAAC,EAAE;AAAA,MACpC,KAAK,KAAA,CAAM,GAAA;AAAA,MACX,WAAA,EAAa,CAAC,GAAA,KAAuB;AACnC,QAAA,WAAA,CAAY,GAAG,CAAA;AAAA,MACjB;AAAA;AAAA,GACF;AAEJ;AAGA,SAAS,iBAAiB,OAAA,EAA+B;AACvD,EAAA,MAAM,SAA2B,EAAC;AAClC,EAAA,KAAA,MAAW,OAAO,OAAA,EAAS;AACzB,IAAA,MAAA,CAAO,GAAA,CAAI,KAAK,CAAA,GAAI;AAAA,MAClB,IAAA,EAAM,IAAI,aAAA,IAAiB,MAAA;AAAA,MAC3B,YAAA,EAAc,CAAC,OAAO,CAAA;AAAA,MACtB,iBAAiB,EAAE,WAAA,EAAa,EAAE,IAAA,EAAM,GAAA,CAAI,MAAK;AAAE,KACrD;AAAA,EACF;AACA,EAAA,OAAO,MAAA;AACT;;;;"}
+{"version":3,"file":"SQLWhereRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/SQLWhereRow.tsx"],"sourcesContent":["import React from 'react';\nimport { useAsync } from 'react-use';\nimport { type SelectableValue } from '@grafana/data';\nimport { type Config } from './AwesomeQueryBuilder';\nimport { WhereRow } from './WhereRow';\nimport { type SQLQuery, type DB, type SQLExpression, type SQLSelectableValue, type QueryWithDefaults } from '../types';\nimport { useSqlChange } from '../utils/useSqlChange';\n\ninterface WhereRowProps {\n  query: QueryWithDefaults;\n  fields: SelectableValue[];\n  onQueryChange: (query: SQLQuery) => void;\n  db: DB;\n}\n\nexport function SQLWhereRow({ query, fields, onQueryChange, db }: WhereRowProps) {\n  const state = useAsync(async () => {\n    return mapFieldsToTypes(fields);\n  }, [fields]);\n\n  const { onSqlChange } = useSqlChange({ query, onQueryChange, db });\n\n  return (\n    <WhereRow\n      // TODO: fix key that's used to force clean render or SQLWhereRow - otherwise it doesn't render operators correctly\n      key={JSON.stringify(state.value)}\n      config={{ fields: state.value || {} }}\n      sql={query.sql!}\n      onSqlChange={(val: SQLExpression) => {\n        onSqlChange(val);\n      }}\n    />\n  );\n}\n\n// needed for awesome query builder\nfunction mapFieldsToTypes(columns: SQLSelectableValue[]) {\n  const fields: Config['fields'] = {};\n  for (const col of columns) {\n    fields[col.value] = {\n      type: col.raqbFieldType || 'text',\n      valueSources: ['value'],\n      mainWidgetProps: { customProps: { icon: col.icon } },\n    };\n  }\n  return fields;\n}\n"],"names":[],"mappings":";;;;;;;;AAeO,SAAS,YAAY,EAAE,KAAA,EAAO,MAAA,EAAQ,aAAA,EAAe,IAAG,EAAkB;AAC/E,EAAA,MAAM,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAA,OAAO,iBAAiB,MAAM,CAAA;AAAA,EAChC,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAA,MAAM,EAAE,aAAY,GAAI,YAAA,CAAa,EAAE,KAAA,EAAO,aAAA,EAAe,IAAI,CAAA;AAEjE,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MAEC,GAAA,EAAK,IAAA,CAAK,SAAA,CAAU,KAAA,CAAM,KAAK,CAAA;AAAA,MAC/B,QAAQ,EAAE,MAAA,EAAQ,KAAA,CAAM,KAAA,IAAS,EAAC,EAAE;AAAA,MACpC,KAAK,KAAA,CAAM,GAAA;AAAA,MACX,WAAA,EAAa,CAAC,GAAA,KAAuB;AACnC,QAAA,WAAA,CAAY,GAAG,CAAA;AAAA,MACjB;AAAA;AAAA,GACF;AAEJ;AAGA,SAAS,iBAAiB,OAAA,EAA+B;AACvD,EAAA,MAAM,SAA2B,EAAC;AAClC,EAAA,KAAA,MAAW,OAAO,OAAA,EAAS;AACzB,IAAA,MAAA,CAAO,GAAA,CAAI,KAAK,CAAA,GAAI;AAAA,MAClB,IAAA,EAAM,IAAI,aAAA,IAAiB,MAAA;AAAA,MAC3B,YAAA,EAAc,CAAC,OAAO,CAAA;AAAA,MACtB,iBAAiB,EAAE,WAAA,EAAa,EAAE,IAAA,EAAM,GAAA,CAAI,MAAK;AAAE,KACrD;AAAA,EACF;AACA,EAAA,OAAO,MAAA;AACT;;;;"}

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

@@ -12,7 +12,7 @@ import { EditorStack } from '../EditorStack.js';
 const asteriskValue = { label: "*", value: "*" };
 function SelectRow({ sql, columns, onSqlChange, functions }) {
   var _a;
-  const styles = useStyles2(getStyles$f);
+  const styles = useStyles2(getStyles$j);
   const columnsWithAsterisk = [asteriskValue, ...columns || []];
   const onColumnChange = useCallback(
     (item, index) => (column) => {
@@ -108,7 +108,7 @@ function SelectRow({ sql, columns, onSqlChange, functions }) {
     }
   ));
 }
-const getStyles$f = () => {
+const getStyles$j = () => {
   return { addButton: css({ alignSelf: "flex-start" }) };
 };
 function getColumnValue({ parameters }) {