npm - @grafana/plugin-ui - Versions diffs - 0.13.1 → 0.14.0 - Mend

@grafana/plugin-ui 0.13.1 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (182) hide show

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

	@@ -1 +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":[],"mappings":"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"}
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 { 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":[],"mappings":";;;;;;;;;;;;;;;;;;AA0CA,MAAM,WAAc,GAAA;AAAA,EAClB,EAAE,KAAA,EAAO,SAAW,EAAA,KAAA,EAAO,WAAW,OAAQ,EAAA;AAAA,EAC9C,EAAE,KAAA,EAAO,MAAQ,EAAA,KAAA,EAAO,WAAW,IAAK;AAC1C,CAAA;AAEO,SAAS,WAAY,CAAA;AAAA,EAC1B,EAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,KAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,MAAA,uBAAa,GAAI,CAAA,CAAC,CAAC,SAAW,EAAA,SAAS,CAAC,CAAC;AAC3C,CAAqB,EAAA;AACnB,EAAM,MAAA,EAAE,YAAe,GAAA,KAAA;AACvB,EAAA,MAAM,CAAC,CAAA,EAAG,eAAe,CAAA,GAAI,kBAAmB,EAAA;AAChD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AACpD,EAAM,MAAA,QAAA,GAAW,YAAY,EAAE,CAAA;AAC/B,EAAA,MAAM,SAAS,KAAM,EAAA;AAIrB,EAAM,MAAA,eAAA,GAAkB,cAAkB,IAAA,IAAA,GAAA,cAAA,GAAA,EAAA,CAAG,eAAoB,KAAA,KAAA;AAIjE,EAAM,MAAA,uBAAA,GAA0B,kBAAkB,IAAO,GAAA,cAAA;AAEzD,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,aAA8B,KAAA;AAC7B,MAAI,IAAA,UAAA,KAAe,WAAW,IAAM,EAAA;AAClC,QAAA,cAAA,CAAe,IAAI,CAAA;AACnB,QAAA;AAAA;AAEF,MAAA,QAAA,CAAS,EAAE,GAAG,KAAO,EAAA,UAAA,EAAY,eAAe,CAAA;AAAA,KAClD;AAAA,IACA,CAAC,UAAY,EAAA,QAAA,EAAU,KAAK;AAAA,GAC9B;AAEA,EAAM,MAAA,cAAA,GAAiB,CAAC,CAAuB,KAAA;AAC7C,IAAM,MAAA,IAAA,GAAO,EAAE,GAAG,KAAO,EAAA,MAAA,EAAQ,CAAE,CAAA,KAAA,KAAU,SAAY,GAAA,CAAA,CAAE,KAAQ,GAAA,WAAA,CAAY,KAAM,EAAA;AACrF,IAAA,QAAA,CAAS,IAAI,CAAA;AAAA,GACf;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,CAAuB,KAAA;AAI9C,IAAM,MAAA,YAAA,GAAe,EAAE,KAAS,IAAA,SAAA;AAChC,IAAI,IAAA,YAAA,KAAiB,MAAM,OAAS,EAAA;AAClC,MAAA;AAAA;AAEF,IAAA,MAAM,IAAiB,GAAA;AAAA,MACrB,GAAG,KAAA;AAAA,MACH,OAAS,EAAA,YAAA;AAAA,MACT,KAAO,EAAA,SAAA;AAAA,MACP,GAAK,EAAA,SAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACV;AACA,IAAA,QAAA,CAAS,IAAI,CAAA;AAAA,GACf;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,OAA2B,KAAA;AAClD,IAAA,MAAM,eAAe,OAAW,IAAA,SAAA;AAChC,IAAI,IAAA,YAAA,KAAiB,MAAM,OAAS,EAAA;AAClC,MAAA;AAAA;AAGF,IAAA,MAAM,IAAiB,GAAA;AAAA,MACrB,GAAG,KAAA;AAAA,MACH,OAAS,EAAA,YAAA;AAAA,MACT,OAAS,EAAA,SAAA;AAAA;AAAA,MACT,KAAO,EAAA,SAAA;AAAA,MACP,GAAK,EAAA,SAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACV;AACA,IAAA,QAAA,CAAS,IAAI,CAAA;AAAA,GACf;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,CAAuB,KAAA;AAC5C,IAAI,IAAA,CAAA,CAAE,KAAU,KAAA,KAAA,CAAM,KAAO,EAAA;AAC3B,MAAA;AAAA;AAGF,IAAA,MAAM,IAAiB,GAAA;AAAA,MACrB,GAAG,KAAA;AAAA,MACH,OAAO,CAAE,CAAA,KAAA;AAAA,MACT,GAAK,EAAA,SAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACV;AACA,IAAA,QAAA,CAAS,IAAI,CAAA;AAAA,GACf;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,YACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,QAAA;AAAA,MACN,OAAO,KAAM,CAAA,MAAA;AAAA,MACb,WAAY,EAAA,eAAA;AAAA,MACZ,gBAAgB,EAAA,IAAA;AAAA,MAChB,QAAU,EAAA,cAAA;AAAA,MACV,OAAS,EAAA;AAAA;AAAA,GAEV,EAAA,UAAA,KAAe,UAAW,CAAA,OAAA,oBAEvB,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,cAAc,MAAM,CAAA,CAAA;AAAA,MACxB,KAAM,EAAA,QAAA;AAAA,MACN,WAAa,EAAA,IAAA;AAAA,MACb,SAAW,EAAA,IAAA;AAAA,MACX,OAAO,cAAe,CAAA,MAAA;AAAA,MACtB,QAAU,EAAA,CAAC,EACT,KAAA,EAAA,CAAG,kBAAkB,gBACrB,IAAA,gBAAA,CAAiB,EAAE,GAAG,cAAgB,EAAA,MAAA,EAAQ,EAAG,CAAA,MAAA,CAAO,SAAS;AAAA;AAAA,GAIrE,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,aAAa,MAAM,CAAA,CAAA;AAAA,MACvB,KAAM,EAAA,OAAA;AAAA,MACN,WAAa,EAAA,IAAA;AAAA,MACb,SAAW,EAAA,IAAA;AAAA,MACX,OAAO,cAAe,CAAA,KAAA;AAAA,MACtB,QAAU,EAAA,CAAC,EACT,KAAA,EAAA,CAAG,kBAAkB,gBACrB,IAAA,gBAAA,CAAiB,EAAE,GAAG,cAAgB,EAAA,KAAA,EAAO,EAAG,CAAA,MAAA,CAAO,SAAS;AAAA;AAAA,GAIpE,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,aAAa,MAAM,CAAA,CAAA;AAAA,MACvB,KAAM,EAAA,OAAA;AAAA,MACN,WAAa,EAAA,IAAA;AAAA,MACb,SAAW,EAAA,IAAA;AAAA,MACX,OAAO,cAAe,CAAA,KAAA;AAAA,MACtB,QAAU,EAAA,CAAC,EACT,KAAA,EAAA,CAAG,kBAAkB,gBACrB,IAAA,gBAAA,CAAiB,EAAE,GAAG,cAAgB,EAAA,KAAA,EAAO,EAAG,CAAA,MAAA,CAAO,SAAS;AAAA;AAAA,GAIpE,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,eAAe,MAAM,CAAA,CAAA;AAAA,MACzB,KAAM,EAAA,SAAA;AAAA,MACN,WAAa,EAAA,IAAA;AAAA,MACb,SAAW,EAAA,IAAA;AAAA,MACX,OAAO,cAAe,CAAA,OAAA;AAAA,MACtB,QAAU,EAAA,CAAC,EACT,KAAA,EAAA,CAAG,kBAAkB,gBACrB,IAAA,gBAAA,CAAiB,EAAE,GAAG,cAAgB,EAAA,OAAA,EAAS,EAAG,CAAA,MAAA,CAAO,SAAS;AAAA;AAAA,GAGxE,CAGF,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,IAAA,EAAM,CAAG,EAAA,CAAA,kBAElB,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,EAAe,YAAc,EAAA,CAAC,eAAiB,EAAA,OAAA,EAAS,MAAM,UAAA,EAAc,EAAA,CAAA,kBAE5E,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,EAAiB,OAAS,EAAA,WAAA,EAAa,IAAK,EAAA,IAAA,EAAK,KAAO,EAAA,UAAA,EAAY,QAAU,EAAA,kBAAA,EAAoB,CAEnG,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,MAAQ,EAAA,WAAA;AAAA,MACR,QAAQ,MAAM;AACZ,QAAA,cAAA,CAAe,KAAK,CAAA;AACpB,QAAA,eAAA,CAAgB,MAAM,MAAO,CAAA;AAC7B,QAAS,QAAA,CAAA;AAAA,UACP,GAAG,KAAA;AAAA,UACH,MAAA,EAAQ,SAAS,KAAK,CAAA;AAAA,UACtB,YAAY,UAAW,CAAA;AAAA,SACxB,CAAA;AAAA,OACH;AAAA,MACA,WAAW,MAAM;AACf,QAAA,cAAA,CAAe,KAAK,CAAA;AACpB,QAAS,QAAA,CAAA;AAAA,UACP,GAAG,KAAA;AAAA,UACH,MAAA,EAAQ,SAAS,KAAK,CAAA;AAAA,UACtB,YAAY,UAAW,CAAA;AAAA,SACxB,CAAA;AAAA,OACH;AAAA,MACA,QAAA,EAAU,MAAM,cAAA,CAAe,KAAK;AAAA;AAAA,GAExC,GAEC,UAAe,KAAA,UAAA,CAAW,2BAEvB,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAM,EAAA,EAAA,CAAA,EAAG,GAAK,EAAA,CAAA,sCAEd,SAEE,EAAA,IAAA,EAAA,eAAA,oBACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,KAAO,EAAA,MAAA,CAAO,IAAI,SAAS,CAAA,IAAK,SAAW,EAAA,KAAA,EAAO,EAC7D,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,OAAA,EAAS,eAAe,MAAM,CAAA,CAAA;AAAA,MAC9B,KAAO,EAAA,KAAA,CAAM,OAAY,KAAA,SAAA,GAAY,OAAO,KAAM,CAAA,OAAA;AAAA,MAClD,QAAU,EAAA;AAAA;AAAA,GAEd,GAID,uBACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,eAAkB,GAAA,MAAA,CAAO,GAAI,CAAA,QAAQ,KAAK,QAAW,GAAA,MAAA,CAAO,GAAI,CAAA,SAAS,CAAK,IAAA,SAAA;AAAA,MACrF,KAAO,EAAA;AAAA,KAAA;AAAA,oBAEP,KAAA,CAAA,aAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAS,eAAkB,GAAA,CAAA,WAAA,EAAc,MAAM,CAAA,CAAA,GAAK,eAAe,MAAM,CAAA,CAAA;AAAA,QACzE,aAAA,EAAa,kBAAkB,iBAAoB,GAAA,kBAAA;AAAA,QACnD,OAAA,EAAS,kBAAkB,SAAY,GAAA,cAAA;AAAA,QACvC,KAAO,EAAA,KAAA,CAAM,OAAY,KAAA,SAAA,GAAY,OAAO,KAAM,CAAA,OAAA;AAAA,QAClD,QAAU,EAAA,eAAA;AAAA,QACV,OAAA,EAAS,eAAkB,GAAA,KAAA,CAAM,OAAU,GAAA;AAAA;AAAA;AAC7C,GACF,kBAID,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,KAAO,EAAA,MAAA,CAAO,IAAI,OAAO,CAAA,IAAK,OAAS,EAAA,KAAA,EAAO,EACzD,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,OAAA,EAAS,aAAa,MAAM,CAAA,CAAA;AAAA,MAC5B,OAAS,EAAA,KAAA,CAAM,OAAY,KAAA,eAAA,GAAkB,SAAY,GAAA,cAAA,CAAA;AAAA,MACzD,OAAA,EAAS,eAAkB,GAAA,KAAA,CAAM,OAAU,GAAA,SAAA;AAAA,MAC3C,KAAA;AAAA,MACA,KAAO,EAAA,KAAA,CAAM,KAAU,KAAA,SAAA,GAAY,OAAO,KAAM,CAAA,KAAA;AAAA,MAChD,QAAU,EAAA,aAAA;AAAA,MACV,cAAgB,EAAA,eAAA;AAAA,MAChB,YAAY,EAAA;AAAA;AAAA,GAEhB,CACF,CACF,CAEJ,CAAA;AAEJ;;;;"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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,CAA0B,KAAA;AACxB,EAAM,MAAA,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAI,IAAA,CAAC,OAAW,IAAA,CAAC,OAAS,EAAA;AACxB,MAAA,OAAO,EAAC;AAAA;AAIV,IAAA,IAAI,cAAmB,KAAA,CAAC,OAAW,IAAA,CAAC,OAAU,CAAA,EAAA;AAC5C,MAAA,OAAO,EAAC;AAAA;AAKV,IAAA,MAAM,MAAS,GAAA,MAAM,EAAG,CAAA,MAAA,CAAO,SAAS,OAAO,CAAA;AAC/C,IAAO,OAAA,MAAA,CAAO,IAAI,QAAQ,CAAA;AAAA,GACzB,EAAA,CAAC,OAAS,EAAA,OAAA,EAAS,cAAc,CAAC,CAAA;AAErC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAW,EAAA,gBAAA;AAAA,MACX,KAAA;AAAA,MACA,SAAS,KAAM,CAAA,KAAA;AAAA,MACf,QAAA;AAAA,MACA,WAAW,KAAM,CAAA,OAAA;AAAA,MACjB,gBAAkB,EAAA,IAAA;AAAA,MAClB,WAAA,EAAa,KAAM,CAAA,OAAA,GAAU,gBAAmB,GAAA;AAAA;AAAA,GAClD;AAEJ;;;;"}
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, 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,CAA0B,KAAA;AACxB,EAAM,MAAA,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAI,IAAA,CAAC,OAAW,IAAA,CAAC,OAAS,EAAA;AACxB,MAAA,OAAO,EAAC;AAAA;AAIV,IAAA,IAAI,cAAmB,KAAA,CAAC,OAAW,IAAA,CAAC,OAAU,CAAA,EAAA;AAC5C,MAAA,OAAO,EAAC;AAAA;AAKV,IAAA,MAAM,MAAS,GAAA,MAAM,EAAG,CAAA,MAAA,CAAO,SAAS,OAAO,CAAA;AAC/C,IAAO,OAAA,MAAA,CAAO,IAAI,QAAQ,CAAA;AAAA,GACzB,EAAA,CAAC,OAAS,EAAA,OAAA,EAAS,cAAc,CAAC,CAAA;AAErC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAW,EAAA,gBAAA;AAAA,MACX,KAAA;AAAA,MACA,SAAS,KAAM,CAAA,KAAA;AAAA,MACf,QAAA;AAAA,MACA,WAAW,KAAM,CAAA,OAAA;AAAA,MACjB,gBAAkB,EAAA,IAAA;AAAA,MAClB,WAAA,EAAa,KAAM,CAAA,OAAA,GAAU,gBAAmB,GAAA;AAAA;AAAA,GAClD;AAEJ;;;;"}

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

	@@ -1 +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,CAAwB,EAAA;AACzD,EAAI,IAAA,UAAA,GAAA,CAAa,CAAG,IAAA,IAAA,GAAA,SAAA,GAAA,CAAA,CAAA,UAAA,KAAc,UAAW,CAAA,OAAA;AAG7C,EAAA,IAAA,CAAI,CAAG,IAAA,IAAA,GAAA,SAAA,GAAA,CAAA,CAAA,UAAA,MAAe,SAAa,IAAA,CAAA,CAAA,IAAA,IAAA,GAAA,SAAA,GAAA,CAAA,CAAG,YAAW,SAAW,EAAA;AAC1D,IAAA,UAAA,GAAa,UAAW,CAAA,IAAA;AAAA;AAG1B,EAAA,MAAM,MAAmB,GAAA;AAAA,IACvB,GAAG,CAAA;AAAA,IACH,KAAA,EAAA,CAAO,0BAAG,KAAS,KAAA,GAAA;AAAA,IACnB,SAAQ,CAAG,IAAA,IAAA,GAAA,SAAA,GAAA,CAAA,CAAA,MAAA,MAAW,SAAY,GAAA,CAAA,CAAE,SAAS,WAAY,CAAA,KAAA;AAAA,IACzD,MAAA,EAAA,CAAQ,0BAAG,MAAU,KAAA,EAAA;AAAA,IACrB,UAAA;AAAA,IACA,GAAA,EAAA,CAAK,0BAAG,GAAO,KAAA;AAAA,MACb,OAAA,EAAS,CAAC,mBAAA,EAAqB,CAAA;AAAA,MAC/B,OAAA,EAAS,CAAC,eAAA,EAAiB,CAAA;AAAA,MAC3B,KAAO,EAAA;AAAA;AACT,GACF;AAEA,EAAO,OAAA,MAAA;AACT;;;;"}
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"],"names":[],"mappings":";;;AAGO,SAAS,mBAAmB,CAAwB,EAAA;AACzD,EAAI,IAAA,UAAA,GAAA,CAAa,CAAG,IAAA,IAAA,GAAA,SAAA,GAAA,CAAA,CAAA,UAAA,KAAc,UAAW,CAAA,OAAA;AAG7C,EAAA,IAAA,CAAI,CAAG,IAAA,IAAA,GAAA,SAAA,GAAA,CAAA,CAAA,UAAA,MAAe,SAAa,IAAA,CAAA,CAAA,IAAA,IAAA,GAAA,SAAA,GAAA,CAAA,CAAG,YAAW,SAAW,EAAA;AAC1D,IAAA,UAAA,GAAa,UAAW,CAAA,IAAA;AAAA;AAG1B,EAAA,MAAM,MAAmB,GAAA;AAAA,IACvB,GAAG,CAAA;AAAA,IACH,KAAA,EAAA,CAAO,0BAAG,KAAS,KAAA,GAAA;AAAA,IACnB,SAAQ,CAAG,IAAA,IAAA,GAAA,SAAA,GAAA,CAAA,CAAA,MAAA,MAAW,SAAY,GAAA,CAAA,CAAE,SAAS,WAAY,CAAA,KAAA;AAAA,IACzD,MAAA,EAAA,CAAQ,0BAAG,MAAU,KAAA,EAAA;AAAA,IACrB,UAAA;AAAA,IACA,GAAA,EAAA,CAAK,0BAAG,GAAO,KAAA;AAAA,MACb,OAAA,EAAS,CAAC,mBAAA,EAAqB,CAAA;AAAA,MAC/B,OAAA,EAAS,CAAC,eAAA,EAAiB,CAAA;AAAA,MAC3B,KAAO,EAAA;AAAA;AACT,GACF;AAEA,EAAO,OAAA,MAAA;AACT;;;;"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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":";;;;;;;;;~~AAgBgB~~,~~SAAA~~,~~cAAA~~,~~CAAe~~,~~EAAE~~,~~QAAU~~,~~EAAA~~,QAAA,~~EAAU~~,~~OAAO~~,~~KAAO~~,~~EAAA~~,MAAA,~~EAAQ~~,~~oBAA6B~~,EAAA;~~AAEtG~~,EAAM,MAAA,QAAA,GAAW,OAAiB,KAAK,CAAA;AACvC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,OAAU,GAAA,KAAA;AAAA,GACrB,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,QAAgB,YAA0B,KAAA;AACzC,MAAA,MAAM,QAAW,GAAA;AAAA,QACf,GAAG,QAAS,CAAA,OAAA;AAAA,QACZ,QAAU,EAAA,IAAA;AAAA,QACV;AAAA,OACF;AACA,MAAA,QAAA,CAAS,UAAU,YAAY,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAO,KAAM,CAAA,MAAA;AAAA,MACb,QAAU,EAAA,gBAAA;AAAA,MACV,~~UAAU~~,EAAE,EAAA,EAAI,KAAO,EAAA,kBAAA,EAAoB,~~WAAW~~,~~SAAU~~;AAAA,KAAA;AAAA,~~IAE/D~~;AAAA,GACH;AAEJ;;;;"}
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';\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,cAAe,CAAA;AAAA,EAC7B,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,kBAAA;AAAA,EACA,QAAW,GAAA;AACb,CAAU,EAAA;AAER,EAAM,MAAA,QAAA,GAAW,OAAiB,KAAK,CAAA;AACvC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,OAAU,GAAA,KAAA;AAAA,GACrB,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,QAAgB,YAA0B,KAAA;AACzC,MAAA,MAAM,QAAW,GAAA;AAAA,QACf,GAAG,QAAS,CAAA,OAAA;AAAA,QACZ,QAAU,EAAA,IAAA;AAAA,QACV;AAAA,OACF;AACA,MAAA,QAAA,CAAS,UAAU,YAAY,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAO,KAAM,CAAA,MAAA;AAAA,MACb,QAAU,EAAA,gBAAA;AAAA,MACV,QAAA,EAAU,EAAE,EAAA,EAAI,KAAO,EAAA,kBAAA,EAAoB,SAAW,EAAA,CAAC,CAAM,KAAA,SAAA,CAAU,CAAG,EAAA,QAAQ,CAAE;AAAA,KAAA;AAAA,IAEnF;AAAA,GACH;AAEJ;;;;"}

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

@@ -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 === undefined) {
     style = { height: 0, padding: 0, visibility: "hidden" };
   }
+  const onFormatClick = () => {
+    reportInteraction("grafana_sql_query_editor_format_click");
+    onFormatCode == null ? undefined : 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 CHANGED Viewed

	@@ -1 +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":"~~;;;;;AAegB~~,SAAA,YAAA,CAAa,EAAE,SAAW,EAAA,YAAA,EAAc,UAAU,UAAY,EAAA,GAAG,gBAAqC,EAAA;AACpH,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,QAAkB,EAAA;AAElE,EAAM,MAAA,MAAA,GAAS,QAAQ,MAAM;AAC3B,IAAO,OAAA;AAAA,MACL,SAAW,EAAA,GAAA;AAAA,0BACW,EAAA,KAAA,CAAM,MAAO,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA,iBAAA,EAEnC,MAAM,OAAQ,CAAA,GAAA,EAAK,GAAK,EAAA,GAAA,EAAK,GAAG,CAAC,CAAA;AAAA;AAAA;AAAA;AAAA,mBAI/B,EAAA,KAAA,CAAM,UAAW,CAAA,SAAA,CAAU,QAAQ,CAAA;AAAA,MAAA,CAAA;AAAA,MAElD,KAAO,EAAA,GAAA;AAAA,eACI,EAAA,KAAA,CAAM,MAAO,CAAA,KAAA,CAAM,IAAI,CAAA;AAAA,mBACnB,EAAA,KAAA,CAAM,UAAW,CAAA,SAAA,CAAU,QAAQ,CAAA;AAAA,qBACjC,EAAA,KAAA,CAAM,WAAW,mBAAmB,CAAA;AAAA,MAAA,CAAA;AAAA,MAErD,KAAO,EAAA,GAAA;AAAA,eACI,EAAA,KAAA,CAAM,MAAO,CAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,MAAA,CAAA;AAAA,MAEpC,IAAM,EAAA,GAAA;AAAA,eACK,EAAA,KAAA,CAAM,MAAO,CAAA,IAAA,CAAK,SAAS,CAAA;AAAA,MAAA,CAAA;AAAA,MAEtC,IAAM,EAAA,GAAA;AAAA,eACK,EAAA,KAAA,CAAM,MAAO,CAAA,IAAA,CAAK,QAAQ,CAAA;AAAA;AAAA;AAAA,MAAA;AAAA,KAIvC;AAAA,GACF,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,IAAI,QAAQ,EAAC;AAEb,EAAI,IAAA,CAAC,SAAa,IAAA,gBAAA,KAAqB,SAAW,EAAA;AAChD,IAAA,KAAA,GAAQ,EAAE,MAAQ,EAAA,CAAA,EAAG,OAAS,EAAA,CAAA,EAAG,YAAY,QAAS,EAAA;AAAA;~~AAGxD~~,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,SAAW,EAAA,MAAA,CAAO,WAAW,KAChC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KACE,EAAA,IAAA,EAAA,cAAA,CAAe,UACd,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,UAAA,EAAY,CAAC,MAAoB,KAAA;AAC/B,QAAA,mBAAA,CAAoB,MAAM,CAAA;AAC1B,QAAA,cAAA,CAAe,WAAY,MAAM,CAAA;AAAA;AACnC;AAAA,GAGN,GACC,SACC,oBAAA,KAAA,CAAA,aAAA,CAAC,6BACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,EAAgB,SAAQ,IACtB,EAAA,EAAA,YAAA,wCACE,UAAW,EAAA,EAAA,OAAA,EAAS,~~cAAc~~,IAAK,EAAA,gBAAA,EAAiB,MAAK,IAAK,EAAA,OAAA,EAAQ,cAAe,EAAA,CAAA,~~EAE3F~~,QACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,MAAM,QAAS,CAAA,CAAC,UAAU,CAAA;AAAA,MACnC,IAAA,EAAM,aAAa,UAAa,GAAA,YAAA;AAAA,MAChC,IAAK,EAAA,IAAA;AAAA,MACL,OAAA,EAAS,aAAa,iBAAoB,GAAA;AAAA;AAAA,GAG9C,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,OAAA,EAAQ,sDACd,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,SAAW,EAAA,MAAA,CAAO,MAAM,IAAK,EAAA,UAAA,EAAW,CAChD,CACF,CACF,CAEJ,CAAA;AAEJ;;;;"}
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';\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 CHANGED Viewed

@@ -8,7 +8,16 @@ 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);
   const [isExpanded, setIsExpanded] = useState(false);
@@ -22,6 +31,7 @@ function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidat
         completionProvider,
         query,
         width,
+        language,
         height: height ? height - toolboxMeasure.height : undefined,
         onChange
       },

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

	@@ -1 +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":[],"mappings":";;;;;;;;;;~~AAkBgB~~,~~SAAA~~,~~SAAA~~,~~CAAU~~,~~EAAE~~,~~EAAI,~~EAAA,KAAA,~~EAAO~~,~~UAAU~~,~~UAAY~~,~~EAAA~~,UAAA,~~EAAY~~,~~eAAiB~~,~~EAAA~~,KAAA,~~EAAyB~~,EAAA;~~AACjH~~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"}
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';\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":[],"mappings":"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"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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;~~AAiDY~~,IAAA,WAAA,qBAAAA,YAAL,KAAA;AACL,EAAAA,YAAA,CAAA,YAAA,CAAA,YAAA,CAAA,GAAA,CAAA,CAAA,GAAA,YAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,aAAA,CAAA,GAAA,CAAA,CAAA,GAAA,aAAA;AALU,EAAAA,OAAAA,YAAAA;AAAA,CAAA,EAAA,WAAA,IAAA,EAAA;AAQA,IAAA,UAAA,qBAAAC,WAAL,KAAA;AACL,EAAAA,YAAA,SAAU,CAAA,GAAA,SAAA;AACV,EAAAA,YAAA,MAAO,CAAA,GAAA,MAAA;AAFG,EAAAA,OAAAA,WAAAA;AAAA,CAAA,EAAA,UAAA,IAAA,EAAA;AAwDL,MAAM,oBAAuB,GAAA;AAAA,EAClC,EAAE,KAAA,EAAO,aAAe,EAAA,KAAA,EAAO,CAAuB,mBAAA;AAAA,EACtD,EAAE,KAAA,EAAO,OAAS,EAAA,KAAA,EAAO,CAAkB;AAC7C;AAEA,MAAM,mBAAmB,CAAC,KAAA,MAAmB,EAAE,KAAA,EAAO,OAAO,KAAM,EAAA,CAAA;AAE5D,MAAM,YAAW,EAAoB,GAAAC,UAAA,KAAA,IAAA,GAAA,EAAA,GAAA;;;;"}
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 {\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;AAgDY,IAAA,WAAA,qBAAAA,YAAL,KAAA;AACL,EAAAA,YAAA,CAAA,YAAA,CAAA,YAAA,CAAA,GAAA,CAAA,CAAA,GAAA,YAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,aAAA,CAAA,GAAA,CAAA,CAAA,GAAA,aAAA;AALU,EAAAA,OAAAA,YAAAA;AAAA,CAAA,EAAA,WAAA,IAAA,EAAA;AAQA,IAAA,UAAA,qBAAAC,WAAL,KAAA;AACL,EAAAA,YAAA,SAAU,CAAA,GAAA,SAAA;AACV,EAAAA,YAAA,MAAO,CAAA,GAAA,MAAA;AAFG,EAAAA,OAAAA,WAAAA;AAAA,CAAA,EAAA,UAAA,IAAA,EAAA;AAwDL,MAAM,oBAAuB,GAAA;AAAA,EAClC,EAAE,KAAA,EAAO,aAAe,EAAA,KAAA,EAAO,CAAuB,mBAAA;AAAA,EACtD,EAAE,KAAA,EAAO,OAAS,EAAA,KAAA,EAAO,CAAkB;AAC7C;AAEA,MAAM,mBAAmB,CAAC,KAAA,MAAmB,EAAE,KAAA,EAAO,OAAO,KAAM,EAAA,CAAA;AAE5D,MAAM,YAAW,EAAoB,GAAAC,UAAA,KAAA,IAAA,GAAA,EAAA,GAAA;;;;"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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~~,CAAW,EAAA~~;AACnC~~,EAAA,~~OAAO~~,~~aAAa~~,~~MAAO~~,~~CAAA~~,~~CAAC~~,~~EAAE~~,~~OAAQ~~,~~CAAA~~,~~iCAAA~~,~~EAAmC~~,~~CAAC~~,~~CAAc~~,~~KAAA~~;~~AACtF~~,~~IAAO~~,~~OAAA~~,~~CAAA~~,~~CAAE~~,~~OAAQ~~,CAAA,~~KAAA~~,~~EAAO~~,~~EAAE~~,CAAA;AAAA,~~GAC3B~~,CAAA;~~AACH~~;;;;"}
1	+ {"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":";;AAQgB,SAAA,SAAA,CAAU,CAAW,EAAA,QAAA,GAAwB,KAAO,EAAA;AAClE,EAAM,MAAA,SAAA,GAAY,OAAO,CAAG,EAAA;AAAA,IAC1B,QAAA;AAAA,IACA,UAAY,EAAA;AAAA,MACV,MAAQ,EAAA;AAAA,QACN;AAAA,UACE,KAAO,EAAA;AAAA;AACT;AACF;AACF,GACD,CAAA;AACD,EAAA,OAAO,SAAU,CAAA,OAAA;AAAA,IAAQ,yDAAA;AAAA,IAA2D,CAAC,CAAA,KACnF,CAAE,CAAA,OAAA,CAAQ,OAAO,EAAE;AAAA,GACrB;AACF;;;;"}

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

@@ -5,7 +5,7 @@ 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);
   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" }));
@@ -14,7 +14,7 @@ function Preview({ rawSql }) {
     {
       language: "sql",
       height: 80,
-      value: formatSQL(rawSql),
+      value: formatSQL(rawSql, language),
       monacoOptions: { scrollbar: { vertical: "hidden" }, scrollBeyondLastLine: false },
       readOnly: true,
       showMiniMap: false

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

	@@ -1 +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":[],"mappings":";;;;;;;~~AAagB~~,~~SAAA~~,~~OAAA~~,~~CAAQ~~,EAAE,~~MAAA~~,~~EAAwB~~,EAAA;~~AAEhD~~,EAAA,MAAM,CAAC,CAAA,EAAG,eAAe,CAAA,GAAI,kBAAmB,EAAA;AAChD,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EAAM,MAAA,YAAA,mBACH,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,gCACpB,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAM,SAAW,EAAA,MAAA,CAAO,KAAO,EAAA,EAAA,SAAO,mBACtC,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,mBAAA,EAAoB,OAAS,EAAA,MAAM,gBAAgB,MAAM,CAAA,EAAG,IAAK,EAAA,MAAA,EAAO,CAC9F,CAAA;AAGF,EAAA,2CACG,KAAM,EAAA,EAAA,KAAA,EAAO,YAAc,EAAA,SAAA,EAAW,OAAO,IAC5C,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,QAAS,EAAA,KAAA;AAAA,MACT,MAAQ,EAAA,EAAA;AAAA,MACR,KAAA,EAAO,~~UAAU~~,~~MAAM~~,CAAA;AAAA,~~MACvB~~,aAAA,EAAe,EAAE,SAAW,EAAA,EAAE,UAAU,QAAS,EAAA,EAAG,sBAAsB,KAAM,EAAA;AAAA,MAChF,QAAU,EAAA,IAAA;AAAA,MACV,WAAa,EAAA;AAAA;AAAA,GAEjB,CAAA;AAEJ;AAEA,SAAS,UAAU,KAAsB,EAAA;AACvC,EAAO,OAAA;AAAA,IACL,IAAM,EAAA,GAAA,CAAI,EAAE,QAAA,EAAU,GAAG,CAAA;AAAA,IACzB,KAAA,EAAO,IAAI,EAAE,QAAA,EAAU,IAAI,UAAY,EAAA,KAAA,CAAM,UAAW,CAAA,gBAAA,EAAkB,CAAA;AAAA,IAC1E,YAAc,EAAA,GAAA,CAAI,EAAE,OAAA,EAAS,MAAQ,EAAA,cAAA,EAAgB,eAAiB,EAAA,aAAA,EAAe,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA,EAAG;AAAA,GAC3G;AACF;;;;"}
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';\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":[],"mappings":";;;;;;;AAeO,SAAS,OAAQ,CAAA,EAAE,MAAQ,EAAA,QAAA,GAAW,OAAuB,EAAA;AAElE,EAAA,MAAM,CAAC,CAAA,EAAG,eAAe,CAAA,GAAI,kBAAmB,EAAA;AAChD,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EAAM,MAAA,YAAA,mBACH,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,gCACpB,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAM,SAAW,EAAA,MAAA,CAAO,KAAO,EAAA,EAAA,SAAO,mBACtC,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,mBAAA,EAAoB,OAAS,EAAA,MAAM,gBAAgB,MAAM,CAAA,EAAG,IAAK,EAAA,MAAA,EAAO,CAC9F,CAAA;AAGF,EAAA,2CACG,KAAM,EAAA,EAAA,KAAA,EAAO,YAAc,EAAA,SAAA,EAAW,OAAO,IAC5C,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,QAAS,EAAA,KAAA;AAAA,MACT,MAAQ,EAAA,EAAA;AAAA,MACR,KAAA,EAAO,SAAU,CAAA,MAAA,EAAQ,QAAQ,CAAA;AAAA,MACjC,aAAA,EAAe,EAAE,SAAW,EAAA,EAAE,UAAU,QAAS,EAAA,EAAG,sBAAsB,KAAM,EAAA;AAAA,MAChF,QAAU,EAAA,IAAA;AAAA,MACV,WAAa,EAAA;AAAA;AAAA,GAEjB,CAAA;AAEJ;AAEA,SAAS,UAAU,KAAsB,EAAA;AACvC,EAAO,OAAA;AAAA,IACL,IAAM,EAAA,GAAA,CAAI,EAAE,QAAA,EAAU,GAAG,CAAA;AAAA,IACzB,KAAA,EAAO,IAAI,EAAE,QAAA,EAAU,IAAI,UAAY,EAAA,KAAA,CAAM,UAAW,CAAA,gBAAA,EAAkB,CAAA;AAAA,IAC1E,YAAc,EAAA,GAAA,CAAI,EAAE,OAAA,EAAS,MAAQ,EAAA,cAAA,EAAgB,eAAiB,EAAA,aAAA,EAAe,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA,EAAG;AAAA,GAC3G;AACF;;;;"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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,KAAO,EAAA,aAAA,EAAe,IAA0B,EAAA;AACtF,EAAM,MAAA,EAAE,aAAgB,GAAA,YAAA,CAAa,EAAE,KAAO,EAAA,aAAA,EAAe,IAAI,CAAA;AAEjE,EAAA,2CAAQ,UAAW,EAAA,EAAA,OAAA,EAAS,QAAQ,GAAK,EAAA,KAAA,CAAM,KAAM,WAA0B,EAAA,CAAA;AACjF;;;;"}
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 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,KAAO,EAAA,aAAA,EAAe,IAA0B,EAAA;AACtF,EAAM,MAAA,EAAE,aAAgB,GAAA,YAAA,CAAa,EAAE,KAAO,EAAA,aAAA,EAAe,IAAI,CAAA;AAEjE,EAAA,2CAAQ,UAAW,EAAA,EAAA,OAAA,EAAS,QAAQ,GAAK,EAAA,KAAA,CAAM,KAAM,WAA0B,EAAA,CAAA;AACjF;;;;"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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,KAAO,EAAA,aAAA,EAAe,IAA0B,EAAA;~~AAdxF~~,EAAA,IAAA,EAAA,EAAA,EAAA;~~AAeE~~,EAAM,MAAA,EAAE,aAAgB,GAAA,YAAA,CAAa,EAAE,KAAO,EAAA,aAAA,EAAe,IAAI,CAAA;AACjE,EAAA,IAAI,qBAAwC,EAAC;AAE7C,EAAA,IAAI,MAAQ,EAAA;AACV,IAAM,MAAA,OAAA,GAAA,CAAU,iBAAM,GAAN,KAAA,IAAA,GAAA,SAAA,GAAA,EAAA,CAAW,YAAX,IAAoB,GAAA,SAAA,GAAA,EAAA,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAAM,KAAA;~~AAnBtD~~,MAAA,IAAAA,GAAAC,EAAAA,GAAAA;~~AAoBM~~,MAAM,MAAA,KAAA,GAAQ,CAAE,CAAA,IAAA,GAAO,CAAG,EAAA,CAAA,CAAE,IAAI,CAAA,CAAA,EAAA,CAAID,GAAA,GAAA,CAAA,CAAE,UAAF,KAAA,IAAA,GAAA,SAAA,GAAAA,GAAc,CAAA,GAAA,CAAI,CAAC,CAAM,KAAA,CAAA,CAAE,IAAK,CAAA,CAAA,CAAA,CAAA,GAAA,CAAMC,GAAA,GAAA,CAAA,CAAE,UAAF,KAAA,IAAA,GAAA,SAAA,GAAAA,GAAc,CAAA,GAAA,CAAI,CAAC,CAAA,KAAM,CAAE,CAAA,IAAA,CAAA;AACrG,MAAO,OAAA;AAAA,QACL,KAAA;AAAA,QACA,KAAO,EAAA,CAAA,EAAG,CAAI,GAAA,CAAC,MAAM,KAAK,CAAA;AAAA,OAC5B;AAAA,KACF,CAAA;AACA,IAAqB,kBAAA,GAAA;AAAA,MACnB;AAAA,QACE,KAAO,EAAA,EAAA;AAAA,QACP,KAAO,EAAA,kBAAA;AAAA,QACP,OAAA;AAAA,QACA,QAAU,EAAA;AAAA,OACZ;AAAA,MACA,GAAG;AAAA,KACL;AAAA;AAGF,EAAA,2CAAQ,UAAW,EAAA,EAAA,GAAA,EAAK,MAAM,GAAM,EAAA,WAAA,EAA0B,SAAS,kBAAoB,EAAA,CAAA;AAC7F;;;;"}
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 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,KAAO,EAAA,aAAA,EAAe,IAA0B,EAAA;AAbxF,EAAA,IAAA,EAAA,EAAA,EAAA;AAcE,EAAM,MAAA,EAAE,aAAgB,GAAA,YAAA,CAAa,EAAE,KAAO,EAAA,aAAA,EAAe,IAAI,CAAA;AACjE,EAAA,IAAI,qBAAwC,EAAC;AAE7C,EAAA,IAAI,MAAQ,EAAA;AACV,IAAM,MAAA,OAAA,GAAA,CAAU,iBAAM,GAAN,KAAA,IAAA,GAAA,SAAA,GAAA,EAAA,CAAW,YAAX,IAAoB,GAAA,SAAA,GAAA,EAAA,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAAM,KAAA;AAlBtD,MAAA,IAAAA,GAAAC,EAAAA,GAAAA;AAmBM,MAAM,MAAA,KAAA,GAAQ,CAAE,CAAA,IAAA,GAAO,CAAG,EAAA,CAAA,CAAE,IAAI,CAAA,CAAA,EAAA,CAAID,GAAA,GAAA,CAAA,CAAE,UAAF,KAAA,IAAA,GAAA,SAAA,GAAAA,GAAc,CAAA,GAAA,CAAI,CAAC,CAAM,KAAA,CAAA,CAAE,IAAK,CAAA,CAAA,CAAA,CAAA,GAAA,CAAMC,GAAA,GAAA,CAAA,CAAE,UAAF,KAAA,IAAA,GAAA,SAAA,GAAAA,GAAc,CAAA,GAAA,CAAI,CAAC,CAAA,KAAM,CAAE,CAAA,IAAA,CAAA;AACrG,MAAO,OAAA;AAAA,QACL,KAAA;AAAA,QACA,KAAO,EAAA,CAAA,EAAG,CAAI,GAAA,CAAC,MAAM,KAAK,CAAA;AAAA,OAC5B;AAAA,KACF,CAAA;AACA,IAAqB,kBAAA,GAAA;AAAA,MACnB;AAAA,QACE,KAAO,EAAA,EAAA;AAAA,QACP,KAAO,EAAA,kBAAA;AAAA,QACP,OAAA;AAAA,QACA,QAAU,EAAA;AAAA,OACZ;AAAA,MACA,GAAG;AAAA,KACL;AAAA;AAGF,EAAA,2CAAQ,UAAW,EAAA,EAAA,GAAA,EAAK,MAAM,GAAM,EAAA,WAAA,EAA0B,SAAS,kBAAoB,EAAA,CAAA;AAC7F;;;;"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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,KAAO,EAAA,aAAA,EAAe,IAAyB,EAAA;AACpF,EAAM,MAAA,EAAE,aAAgB,GAAA,YAAA,CAAa,EAAE,KAAO,EAAA,aAAA,EAAe,IAAI,CAAA;AAEjE,EAAM,MAAA,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAM,MAAA,SAAA,GAAY,MAAM,EAAA,CAAG,SAAU,EAAA;AACrC,IAAA,OAAO,UAAU,GAAI,CAAA,CAAC,MAAM,QAAS,CAAA,CAAA,CAAE,IAAI,CAAC,CAAA;AAAA,GAC9C,EAAG,CAAC,EAAE,CAAC,CAAA;AAEP,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAU,EAAA,EAAA,OAAA,EAAS,MAAQ,EAAA,GAAA,EAAK,MAAM,GAAM,EAAA,SAAA,EAAW,KAAM,CAAA,KAAA,EAAO,WAA0B,EAAA,CAAA;AACxG;;;;"}
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 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,KAAO,EAAA,aAAA,EAAe,IAAyB,EAAA;AACpF,EAAM,MAAA,EAAE,aAAgB,GAAA,YAAA,CAAa,EAAE,KAAO,EAAA,aAAA,EAAe,IAAI,CAAA;AAEjE,EAAM,MAAA,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAM,MAAA,SAAA,GAAY,MAAM,EAAA,CAAG,SAAU,EAAA;AACrC,IAAA,OAAO,UAAU,GAAI,CAAA,CAAC,MAAM,QAAS,CAAA,CAAA,CAAE,IAAI,CAAC,CAAA;AAAA,GAC9C,EAAG,CAAC,EAAE,CAAC,CAAA;AAEP,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAU,EAAA,EAAA,OAAA,EAAS,MAAQ,EAAA,GAAA,EAAK,MAAM,GAAM,EAAA,SAAA,EAAW,KAAM,CAAA,KAAA,EAAO,WAA0B,EAAA,CAAA;AACxG;;;;"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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,MAAQ,EAAA,aAAA,EAAe,IAAqB,EAAA;AAC/E,EAAM,MAAA,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAA,OAAO,iBAAiB,MAAM,CAAA;AAAA,GAChC,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAM,MAAA,EAAE,aAAgB,GAAA,YAAA,CAAa,EAAE,KAAO,EAAA,aAAA,EAAe,IAAI,CAAA;AAEjE,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MAEC,GAAK,EAAA,IAAA,CAAK,SAAU,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,MAC/B,QAAQ,EAAE,MAAA,EAAQ,KAAM,CAAA,KAAA,IAAS,EAAG,EAAA;AAAA,MACpC,KAAK,KAAM,CAAA,GAAA;AAAA,MACX,WAAA,EAAa,CAAC,GAAuB,KAAA;AACnC,QAAA,WAAA,CAAY,GAAG,CAAA;AAAA;AACjB;AAAA,GACF;AAEJ;AAGA,SAAS,iBAAiB,OAA+B,EAAA;AACvD,EAAA,MAAM,SAA2B,EAAC;AAClC,EAAA,KAAA,MAAW,OAAO,OAAS,EAAA;AACzB,IAAO,MAAA,CAAA,GAAA,CAAI,KAAK,CAAI,GAAA;AAAA,MAClB,IAAA,EAAM,IAAI,aAAiB,IAAA,MAAA;AAAA,MAC3B,YAAA,EAAc,CAAC,OAAO,CAAA;AAAA,MACtB,iBAAiB,EAAE,WAAA,EAAa,EAAE,IAAM,EAAA,GAAA,CAAI,MAAO;AAAA,KACrD;AAAA;AAEF,EAAO,OAAA,MAAA;AACT;;;;"}
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 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,MAAQ,EAAA,aAAA,EAAe,IAAqB,EAAA;AAC/E,EAAM,MAAA,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAA,OAAO,iBAAiB,MAAM,CAAA;AAAA,GAChC,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAM,MAAA,EAAE,aAAgB,GAAA,YAAA,CAAa,EAAE,KAAO,EAAA,aAAA,EAAe,IAAI,CAAA;AAEjE,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MAEC,GAAK,EAAA,IAAA,CAAK,SAAU,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,MAC/B,QAAQ,EAAE,MAAA,EAAQ,KAAM,CAAA,KAAA,IAAS,EAAG,EAAA;AAAA,MACpC,KAAK,KAAM,CAAA,GAAA;AAAA,MACX,WAAA,EAAa,CAAC,GAAuB,KAAA;AACnC,QAAA,WAAA,CAAY,GAAG,CAAA;AAAA;AACjB;AAAA,GACF;AAEJ;AAGA,SAAS,iBAAiB,OAA+B,EAAA;AACvD,EAAA,MAAM,SAA2B,EAAC;AAClC,EAAA,KAAA,MAAW,OAAO,OAAS,EAAA;AACzB,IAAO,MAAA,CAAA,GAAA,CAAI,KAAK,CAAI,GAAA;AAAA,MAClB,IAAA,EAAM,IAAI,aAAiB,IAAA,MAAA;AAAA,MAC3B,YAAA,EAAc,CAAC,OAAO,CAAA;AAAA,MACtB,iBAAiB,EAAE,WAAA,EAAa,EAAE,IAAM,EAAA,GAAA,CAAI,MAAO;AAAA,KACrD;AAAA;AAEF,EAAO,OAAA,MAAA;AACT;;;;"}

package/dist/esm/components/QueryEditor/visual-query-builder/VisualEditor.js CHANGED Viewed

@@ -12,12 +12,20 @@ import { EditorRow } from './EditorRow.js';
 import { EditorField } from './EditorField.js';
 import { EditorRows } from './EditorRows.js';
-const VisualEditor = ({ query, db, queryRowFilter, onChange, onValidate, range }) => {
+const VisualEditor = ({
+  query,
+  db,
+  queryRowFilter,
+  onChange,
+  onValidate,
+  language = "sql",
+  range
+}) => {
   const state = useAsync(async () => {
     const fields = await db.fields(query);
     return fields;
   }, [db, query.dataset, query.table]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(EditorRows, null, /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(SQLSelectRow, { fields: state.value || [], query, onQueryChange: onChange, db })), queryRowFilter.filter && /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(EditorField, { label: "Filter by column value", optional: true }, /* @__PURE__ */ React.createElement(SQLWhereRow, { fields: state.value || [], query, onQueryChange: onChange, db }))), queryRowFilter.group && /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(EditorField, { label: "Group by column" }, /* @__PURE__ */ React.createElement(SQLGroupByRow, { fields: state.value || [], query, onQueryChange: onChange, db }))), queryRowFilter.order && /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(SQLOrderByRow, { fields: state.value || [], query, onQueryChange: onChange, db })), queryRowFilter.preview && query.rawSql && /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(Preview, { rawSql: query.rawSql }))), /* @__PURE__ */ React.createElement(QueryToolbox, { db, query, onValidate, range }));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(EditorRows, null, /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(SQLSelectRow, { fields: state.value || [], query, onQueryChange: onChange, db })), queryRowFilter.filter && /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(EditorField, { label: "Filter by column value", optional: true }, /* @__PURE__ */ React.createElement(SQLWhereRow, { fields: state.value || [], query, onQueryChange: onChange, db }))), queryRowFilter.group && /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(EditorField, { label: "Group by column" }, /* @__PURE__ */ React.createElement(SQLGroupByRow, { fields: state.value || [], query, onQueryChange: onChange, db }))), queryRowFilter.order && /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(SQLOrderByRow, { fields: state.value || [], query, onQueryChange: onChange, db })), queryRowFilter.preview && query.rawSql && /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(Preview, { rawSql: query.rawSql, language }))), /* @__PURE__ */ React.createElement(QueryToolbox, { db, query, onValidate, range }));
 };
 export { VisualEditor };

package/dist/esm/components/QueryEditor/visual-query-builder/VisualEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VisualEditor.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/VisualEditor.tsx"],"sourcesContent":["import React from 'react';\nimport { useAsync } from 'react-use';\nimport { type DB, type QueryEditorProps, type QueryRowFilter, type SQLQuery } from '../types';\nimport { QueryToolbox } from '../query-editor-raw/QueryToolbox';\nimport { Preview } from './Preview';\nimport { SQLGroupByRow } from './SQLGroupByRow';\nimport { SQLOrderByRow } from './SQLOrderByRow';\nimport { SQLSelectRow } from './SQLSelectRow';\nimport { SQLWhereRow } from './SQLWhereRow';\nimport { type TimeRange } from '@grafana/data';\nimport { EditorRow } from './EditorRow';\nimport { EditorField } from './EditorField';\nimport { EditorRows } from './EditorRows';\n\ninterface VisualEditorProps extends QueryEditorProps {\n query: SQLQuery;\n db: DB;\n queryRowFilter: QueryRowFilter;\n onChange: (q: SQLQuery) => void;\n onValidate: (isValid: boolean) => void;\n range?: TimeRange;\n}\n\nexport const VisualEditor = ({ query, db, queryRowFilter, onChange, onValidate, range }: VisualEditorProps) => {\n const state = useAsync(async () => {\n const fields = await db.fields(query);\n return fields;\n }, [db, query.dataset, query.table]);\n\n return (\n <>\n <EditorRows>\n <EditorRow>\n <SQLSelectRow fields={state.value \|\| []} query={query} onQueryChange={onChange} db={db} />\n </EditorRow>\n {queryRowFilter.filter && (\n <EditorRow>\n <EditorField label=\"Filter by column value\" optional>\n <SQLWhereRow fields={state.value \|\| []} query={query} onQueryChange={onChange} db={db} />\n </EditorField>\n </EditorRow>\n )}\n {queryRowFilter.group && (\n <EditorRow>\n <EditorField label=\"Group by column\">\n <SQLGroupByRow fields={state.value \|\| []} query={query} onQueryChange={onChange} db={db} />\n </EditorField>\n </EditorRow>\n )}\n {queryRowFilter.order && (\n <EditorRow>\n <SQLOrderByRow fields={state.value \|\| []} query={query} onQueryChange={onChange} db={db} />\n </EditorRow>\n )}\n {queryRowFilter.preview && query.rawSql && (\n <EditorRow>\n <Preview rawSql={query.rawSql} />\n </EditorRow>\n )}\n </EditorRows>\n <QueryToolbox db={db} query={query} onValidate={onValidate} range={range} />\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;~~AAuBa~~,~~MAAA~~,~~YAAA~~,~~GAAe,~~CAAC,~~EAAE~~,KAAA,~~EAAO~~,~~IAAI~~,~~cAAgB~~,~~EAAA~~,QAAA,~~EAAU~~,~~UAAY~~,~~EAAA~~,KAAA,~~EAA+B~~,KAAA;~~AAC7G~~,EAAM,MAAA,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAA,MAAM,MAAS,GAAA,MAAM,EAAG,CAAA,MAAA,CAAO,KAAK,CAAA;AACpC,IAAO,OAAA,MAAA;AAAA,KACN,CAAC,EAAA,EAAI,MAAM,OAAS,EAAA,KAAA,CAAM,KAAK,CAAC,CAAA;AAEnC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,UACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,iCACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,MAAQ,EAAA,KAAA,CAAM,KAAS,IAAA,IAAI,KAAc,EAAA,aAAA,EAAe,UAAU,EAAQ,EAAA,CAC1F,GACC,cAAe,CAAA,MAAA,oBACb,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,OAAM,wBAAyB,EAAA,QAAA,EAAQ,wBACjD,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,QAAQ,KAAM,CAAA,KAAA,IAAS,EAAC,EAAG,KAAc,EAAA,aAAA,EAAe,UAAU,EAAQ,EAAA,CACzF,CACF,~~CAED~~,~~EAAA~~,~~cAAA~~,~~CAAe~~,~~yBACb,~~KAAA,~~CAAA~~,~~aAAA~~,~~CAAA,SAAA,~~EAAA,IAAA,~~kBACE~~,KAAA,CAAA,aAAA,~~CAAA~~,~~WAAA~~,EAAA,~~EAAY~~,~~KAAM~~,~~EAAA~~,~~iBAAA~~,EAAA,~~sCAChB~~,~~aAAc~~,~~EAAA~~,~~EAAA~~,~~MAAA~~,~~EAAQ~~,~~MAAM~~,~~KAAS~~,~~IAAA~~,~~IAAI~~,~~KAAc~~,~~EAAA~~,~~aAAA~~,~~EAAe~~,~~QAAU~~,EAAA,~~EAAA~~,EAAQ,CAC3F,CACF,~~GAED~~,~~cAAe~~,~~CAAA~~,KAAA,~~wCACb~~,~~SACC~~,~~EAAA~~,~~IAAA~~,~~kBAAA,~~KAAA,CAAA,aAAA,~~CAAC~~,~~iBAAc~~,~~MAAQ,~~EAAA,KAAA,~~CAAM~~,~~KAAS~~,~~IAAA~~,~~EAAI~~,EAAA,~~KAAA~~,~~EAAc~~,~~eAAe~~,~~QAAU~~,EAAA,~~EAAA,EAAQ,~~CAC3F,~~CAED~~,~~EAAA~~,~~cAAA~~,~~CAAe~~,~~WAAW~~,~~KAAM~~,~~CAAA~~,~~MAAA~~,~~oBAC9B,~~KAAA,CAAA,aAAA,~~CAAA~~,~~SAAA~~,EAAA,IAAA,~~kBACE~~,KAAA,CAAA,aAAA,~~CAAA~~,~~OAAA~~,EAAA,EAAQ,~~QAAQ~~,~~KAAM~~,~~CAAA~~,~~MAAA~~,~~EAAQ~~,~~CACjC~~,CAEJ,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,gBAAa,EAAQ,EAAA,KAAA,EAAc,UAAwB,EAAA,KAAA,EAAc,CAC5E,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"VisualEditor.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/VisualEditor.tsx"],"sourcesContent":["import React from 'react';\nimport { useAsync } from 'react-use';\nimport { type DB, type QueryEditorProps, type QueryRowFilter, type SQLQuery } from '../types';\nimport { QueryToolbox } from '../query-editor-raw/QueryToolbox';\nimport { Preview } from './Preview';\nimport { SQLGroupByRow } from './SQLGroupByRow';\nimport { SQLOrderByRow } from './SQLOrderByRow';\nimport { SQLSelectRow } from './SQLSelectRow';\nimport { SQLWhereRow } from './SQLWhereRow';\nimport { type TimeRange } from '@grafana/data';\nimport { EditorRow } from './EditorRow';\nimport { EditorField } from './EditorField';\nimport { EditorRows } from './EditorRows';\nimport type { SqlLanguage } from 'sql-formatter';\n\ninterface VisualEditorProps extends QueryEditorProps {\n query: SQLQuery;\n db: DB;\n queryRowFilter: QueryRowFilter;\n onChange: (q: SQLQuery) => void;\n onValidate: (isValid: boolean) => void;\n language?: SqlLanguage;\n range?: TimeRange;\n}\n\nexport const VisualEditor = ({\n query,\n db,\n queryRowFilter,\n onChange,\n onValidate,\n language = 'sql',\n range,\n}: VisualEditorProps) => {\n const state = useAsync(async () => {\n const fields = await db.fields(query);\n return fields;\n }, [db, query.dataset, query.table]);\n\n return (\n <>\n <EditorRows>\n <EditorRow>\n <SQLSelectRow fields={state.value \|\| []} query={query} onQueryChange={onChange} db={db} />\n </EditorRow>\n {queryRowFilter.filter && (\n <EditorRow>\n <EditorField label=\"Filter by column value\" optional>\n <SQLWhereRow fields={state.value \|\| []} query={query} onQueryChange={onChange} db={db} />\n </EditorField>\n </EditorRow>\n )}\n {queryRowFilter.group && (\n <EditorRow>\n <EditorField label=\"Group by column\">\n <SQLGroupByRow fields={state.value \|\| []} query={query} onQueryChange={onChange} db={db} />\n </EditorField>\n </EditorRow>\n )}\n {queryRowFilter.order && (\n <EditorRow>\n <SQLOrderByRow fields={state.value \|\| []} query={query} onQueryChange={onChange} db={db} />\n </EditorRow>\n )}\n {queryRowFilter.preview && query.rawSql && (\n <EditorRow>\n <Preview rawSql={query.rawSql} language={language} />\n </EditorRow>\n )}\n </EditorRows>\n <QueryToolbox db={db} query={query} onValidate={onValidate} range={range} />\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAyBO,MAAM,eAAe,CAAC;AAAA,EAC3B,KAAA;AAAA,EACA,EAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX;AACF,CAAyB,KAAA;AACvB,EAAM,MAAA,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAA,MAAM,MAAS,GAAA,MAAM,EAAG,CAAA,MAAA,CAAO,KAAK,CAAA;AACpC,IAAO,OAAA,MAAA;AAAA,KACN,CAAC,EAAA,EAAI,MAAM,OAAS,EAAA,KAAA,CAAM,KAAK,CAAC,CAAA;AAEnC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,UACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,iCACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,MAAQ,EAAA,KAAA,CAAM,KAAS,IAAA,IAAI,KAAc,EAAA,aAAA,EAAe,UAAU,EAAQ,EAAA,CAC1F,GACC,cAAe,CAAA,MAAA,oBACb,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,OAAM,wBAAyB,EAAA,QAAA,EAAQ,wBACjD,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,QAAQ,KAAM,CAAA,KAAA,IAAS,EAAC,EAAG,KAAc,EAAA,aAAA,EAAe,UAAU,EAAQ,EAAA,CACzF,CACF,CAAA,EAED,cAAe,CAAA,KAAA,wCACb,SACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAY,EAAA,EAAA,KAAA,EAAM,iBACjB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,iBAAc,MAAQ,EAAA,KAAA,CAAM,SAAS,EAAC,EAAG,OAAc,aAAe,EAAA,QAAA,EAAU,EAAQ,EAAA,CAC3F,CACF,CAAA,EAED,eAAe,KACd,oBAAA,KAAA,CAAA,aAAA,CAAC,iCACE,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA,EAAc,QAAQ,KAAM,CAAA,KAAA,IAAS,EAAC,EAAG,KAAc,EAAA,aAAA,EAAe,UAAU,EAAQ,EAAA,CAC3F,GAED,cAAe,CAAA,OAAA,IAAW,MAAM,MAC/B,oBAAA,KAAA,CAAA,aAAA,CAAC,SACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,MAAA,EAAQ,MAAM,MAAQ,EAAA,QAAA,EAAoB,CACrD,CAEJ,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,gBAAa,EAAQ,EAAA,KAAA,EAAc,UAAwB,EAAA,KAAA,EAAc,CAC5E,CAAA;AAEJ;;;;"}