npm - @grafana/plugin-ui - Versions diffs - 0.13.1 → 0.14.1-dsconfig.032cfc4 - Mend

@grafana/plugin-ui 0.13.1 → 0.14.1-dsconfig.032cfc4

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 (440) hide show

package/dist/esm/components/VisualQueryBuilder/components/OperationList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OperationList.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationList.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useState } from 'react';\nimport { DragDropContext, Droppable, type DropResult } from '@hello-pangea/dnd';\nimport { useMountedState, usePrevious } from 'react-use';\n\nimport { type DataSourceApi, type GrafanaTheme2, type TimeRange } from '@grafana/data';\nimport { Button, Cascader, type CascaderOption, useStyles2 } from '@grafana/ui';\n\nimport { OperationEditor } from './OperationEditor';\nimport { type QueryBuilderOperation, type VisualQuery, type VisualQueryModeller } from '../types';\nimport { EditorStack } from '../../QueryEditor';\n\nexport interface Props<T extends VisualQuery> {\n query: T;\n datasource: DataSourceApi;\n onChange: (query: T) => void;\n onRunQuery: () => void;\n queryModeller: VisualQueryModeller;\n explainMode?: boolean;\n highlightedOp?: QueryBuilderOperation;\n timeRange?: TimeRange;\n isConflictingOperation?: (operation: QueryBuilderOperation, otherOperations: QueryBuilderOperation[]) => boolean;\n}\n\nexport function OperationList<T extends VisualQuery>({\n query,\n datasource,\n queryModeller,\n onChange,\n onRunQuery,\n highlightedOp,\n timeRange,\n isConflictingOperation,\n}: Props<T>) {\n const styles = useStyles2(getStyles);\n const { operations } = query;\n\n const opsToHighlight = useOperationsHighlight(operations);\n\n const [cascaderOpen, setCascaderOpen] = useState(false);\n\n const onOperationChange = (index: number, update: QueryBuilderOperation) => {\n const updatedList = [...operations];\n updatedList.splice(index, 1, update);\n onChange({ ...query, operations: updatedList });\n };\n\n const onRemove = (index: number) => {\n const updatedList = [...operations.slice(0, index), ...operations.slice(index + 1)];\n onChange({ ...query, operations: updatedList });\n };\n\n const onToggle = (index: number) => {\n onOperationChange(index, { ...operations[index], disabled: !operations[index].disabled });\n };\n\n const addOptions: CascaderOption[] = queryModeller.getCategories().map((category) => {\n return {\n value: category,\n label: category,\n items: queryModeller.getOperationsForCategory(category).map((operation) => ({\n value: operation.id,\n label: operation.name,\n isLeaf: true,\n })),\n };\n });\n\n const onAddOperation = (value: string) => {\n const operationDef = queryModeller.getOperationDefinition(value);\n if (!operationDef) {\n return;\n }\n onChange(operationDef.addOperationHandler(operationDef, query, queryModeller));\n setCascaderOpen(false);\n };\n\n const onDragEnd = (result: DropResult) => {\n if (!result.destination) {\n return;\n }\n\n const updatedList = [...operations];\n const element = updatedList[result.source.index];\n updatedList.splice(result.source.index, 1);\n updatedList.splice(result.destination.index, 0, element);\n onChange({ ...query, operations: updatedList });\n };\n\n const onCascaderBlur = () => {\n setCascaderOpen(false);\n };\n\n return (\n <EditorStack gap={1} direction=\"column\">\n <EditorStack gap={1}>\n {operations.length > 0 && (\n <DragDropContext onDragEnd={onDragEnd}>\n <Droppable droppableId=\"sortable-field-mappings\" direction=\"horizontal\">\n {(provided) => (\n <div className={styles.operationList} ref={provided.innerRef} {...provided.droppableProps}>\n {operations.map((op, index) => {\n return (\n <OperationEditor\n key={op.id + JSON.stringify(op.params) + index}\n queryModeller={queryModeller}\n index={index}\n operation={op}\n query={query}\n datasource={datasource}\n onChange={onOperationChange}\n onRemove={onRemove}\n onToggle={onToggle}\n onRunQuery={onRunQuery}\n flash={opsToHighlight[index]}\n highlight={highlightedOp === op}\n timeRange={timeRange}\n isConflictingOperation={isConflictingOperation}\n />\n );\n })}\n {provided.placeholder}\n </div>\n )}\n </Droppable>\n </DragDropContext>\n )}\n <div className={styles.addButton}>\n {cascaderOpen ? (\n <Cascader\n options={addOptions}\n onSelect={onAddOperation}\n onBlur={onCascaderBlur}\n autoFocus={true}\n alwaysOpen={true}\n hideActiveLevelLabel={true}\n placeholder={'Search'}\n />\n ) : (\n <Button icon={'plus'} variant={'secondary'} onClick={() => setCascaderOpen(true)} title={'Add operation'}>\n Operations\n </Button>\n )}\n </div>\n </EditorStack>\n </EditorStack>\n );\n}\n\n/*\n Returns indexes of operations that should be highlighted. We check the diff of operations added but at the same time\n * we want to highlight operations only after the initial render, so we check for mounted state and calculate the diff\n * only after.\n * @param operations\n */\nfunction useOperationsHighlight(operations: QueryBuilderOperation[]) {\n const isMounted = useMountedState();\n const prevOperations = usePrevious(operations);\n\n if (!isMounted()) {\n return operations.map(() => false);\n }\n\n if (!prevOperations) {\n return operations.map(() => true);\n }\n\n let newOps: boolean[] = [];\n\n if (prevOperations.length - 1 === operations.length && operations.every((op) => prevOperations.includes(op))) {\n // In case we remove one op and does not change any ops then don't highlight anything.\n return operations.map(() => false);\n }\n if (prevOperations.length + 1 === operations.length && prevOperations.every((op) => operations.includes(op))) {\n // If we add a single op just find it and highlight just that.\n const newOp = operations.find((op) => !prevOperations.includes(op));\n newOps = operations.map((op) => {\n return op === newOp;\n });\n } else {\n // Default diff of all ops.\n newOps = operations.map((op, index) => {\n return !isSameOp(op.id, prevOperations[index]?.id);\n });\n }\n return newOps;\n}\n\nfunction isSameOp(op1?: string, op2?: string) {\n return op1 === op2 \|\| `__${op1}_by` === op2 \|\| op1 === `__${op2}_by`;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n heading: css({\n label: 'heading',\n fontSize: 12,\n fontWeight: theme.typography.fontWeightMedium,\n marginBottom: 0,\n }),\n operationList: css({\n label: 'operationList',\n display: 'flex',\n flexWrap: 'wrap',\n gap: theme.spacing(2),\n }),\n addButton: css({\n label: 'addButton',\n width: 126,\n paddingBottom: theme.spacing(1),\n }),\n };\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"OperationList.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationList.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useState } from 'react';\nimport { DragDropContext, Droppable, type DropResult } from '@hello-pangea/dnd';\nimport { useMountedState, usePrevious } from 'react-use';\n\nimport { type DataSourceApi, type GrafanaTheme2, type TimeRange } from '@grafana/data';\nimport { Button, Cascader, type CascaderOption, useStyles2 } from '@grafana/ui';\n\nimport { OperationEditor } from './OperationEditor';\nimport { type QueryBuilderOperation, type VisualQuery, type VisualQueryModeller } from '../types';\nimport { EditorStack } from '../../QueryEditor';\n\nexport interface Props<T extends VisualQuery> {\n query: T;\n datasource: DataSourceApi;\n onChange: (query: T) => void;\n onRunQuery: () => void;\n queryModeller: VisualQueryModeller;\n explainMode?: boolean;\n highlightedOp?: QueryBuilderOperation;\n timeRange?: TimeRange;\n isConflictingOperation?: (operation: QueryBuilderOperation, otherOperations: QueryBuilderOperation[]) => boolean;\n}\n\nexport function OperationList<T extends VisualQuery>({\n query,\n datasource,\n queryModeller,\n onChange,\n onRunQuery,\n highlightedOp,\n timeRange,\n isConflictingOperation,\n}: Props<T>) {\n const styles = useStyles2(getStyles);\n const { operations } = query;\n\n const opsToHighlight = useOperationsHighlight(operations);\n\n const [cascaderOpen, setCascaderOpen] = useState(false);\n\n const onOperationChange = (index: number, update: QueryBuilderOperation) => {\n const updatedList = [...operations];\n updatedList.splice(index, 1, update);\n onChange({ ...query, operations: updatedList });\n };\n\n const onRemove = (index: number) => {\n const updatedList = [...operations.slice(0, index), ...operations.slice(index + 1)];\n onChange({ ...query, operations: updatedList });\n };\n\n const onToggle = (index: number) => {\n onOperationChange(index, { ...operations[index], disabled: !operations[index].disabled });\n };\n\n const addOptions: CascaderOption[] = queryModeller.getCategories().map((category) => {\n return {\n value: category,\n label: category,\n items: queryModeller.getOperationsForCategory(category).map((operation) => ({\n value: operation.id,\n label: operation.name,\n isLeaf: true,\n })),\n };\n });\n\n const onAddOperation = (value: string) => {\n const operationDef = queryModeller.getOperationDefinition(value);\n if (!operationDef) {\n return;\n }\n onChange(operationDef.addOperationHandler(operationDef, query, queryModeller));\n setCascaderOpen(false);\n };\n\n const onDragEnd = (result: DropResult) => {\n if (!result.destination) {\n return;\n }\n\n const updatedList = [...operations];\n const element = updatedList[result.source.index];\n updatedList.splice(result.source.index, 1);\n updatedList.splice(result.destination.index, 0, element);\n onChange({ ...query, operations: updatedList });\n };\n\n const onCascaderBlur = () => {\n setCascaderOpen(false);\n };\n\n return (\n <EditorStack gap={1} direction=\"column\">\n <EditorStack gap={1}>\n {operations.length > 0 && (\n <DragDropContext onDragEnd={onDragEnd}>\n <Droppable droppableId=\"sortable-field-mappings\" direction=\"horizontal\">\n {(provided) => (\n <div className={styles.operationList} ref={provided.innerRef} {...provided.droppableProps}>\n {operations.map((op, index) => {\n return (\n <OperationEditor\n key={op.id + JSON.stringify(op.params) + index}\n queryModeller={queryModeller}\n index={index}\n operation={op}\n query={query}\n datasource={datasource}\n onChange={onOperationChange}\n onRemove={onRemove}\n onToggle={onToggle}\n onRunQuery={onRunQuery}\n flash={opsToHighlight[index]}\n highlight={highlightedOp === op}\n timeRange={timeRange}\n isConflictingOperation={isConflictingOperation}\n />\n );\n })}\n {provided.placeholder}\n </div>\n )}\n </Droppable>\n </DragDropContext>\n )}\n <div className={styles.addButton}>\n {cascaderOpen ? (\n <Cascader\n options={addOptions}\n onSelect={onAddOperation}\n onBlur={onCascaderBlur}\n autoFocus={true}\n alwaysOpen={true}\n hideActiveLevelLabel={true}\n placeholder={'Search'}\n />\n ) : (\n <Button icon={'plus'} variant={'secondary'} onClick={() => setCascaderOpen(true)} title={'Add operation'}>\n Operations\n </Button>\n )}\n </div>\n </EditorStack>\n </EditorStack>\n );\n}\n\n/*\n Returns indexes of operations that should be highlighted. We check the diff of operations added but at the same time\n * we want to highlight operations only after the initial render, so we check for mounted state and calculate the diff\n * only after.\n * @param operations\n */\nfunction useOperationsHighlight(operations: QueryBuilderOperation[]) {\n const isMounted = useMountedState();\n const prevOperations = usePrevious(operations);\n\n if (!isMounted()) {\n return operations.map(() => false);\n }\n\n if (!prevOperations) {\n return operations.map(() => true);\n }\n\n let newOps: boolean[] = [];\n\n if (prevOperations.length - 1 === operations.length && operations.every((op) => prevOperations.includes(op))) {\n // In case we remove one op and does not change any ops then don't highlight anything.\n return operations.map(() => false);\n }\n if (prevOperations.length + 1 === operations.length && prevOperations.every((op) => operations.includes(op))) {\n // If we add a single op just find it and highlight just that.\n const newOp = operations.find((op) => !prevOperations.includes(op));\n newOps = operations.map((op) => {\n return op === newOp;\n });\n } else {\n // Default diff of all ops.\n newOps = operations.map((op, index) => {\n return !isSameOp(op.id, prevOperations[index]?.id);\n });\n }\n return newOps;\n}\n\nfunction isSameOp(op1?: string, op2?: string) {\n return op1 === op2 \|\| `__${op1}_by` === op2 \|\| op1 === `__${op2}_by`;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n heading: css({\n label: 'heading',\n fontSize: 12,\n fontWeight: theme.typography.fontWeightMedium,\n marginBottom: 0,\n }),\n operationList: css({\n label: 'operationList',\n display: 'flex',\n flexWrap: 'wrap',\n gap: theme.spacing(2),\n }),\n addButton: css({\n label: 'addButton',\n width: 126,\n paddingBottom: theme.spacing(1),\n }),\n };\n};\n"],"names":["getStyles"],"mappings":"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"}

package/dist/esm/components/VisualQueryBuilder/components/OperationListExplained.js CHANGED Viewed

@@ -24,8 +24,8 @@ function OperationListExplained({
       "div",
       {
         key: index,
-        onMouseEnter: () => onMouseEnter == null ? undefined : onMouseEnter(op, index),
-        onMouseLeave: () => onMouseLeave == null ? undefined : onMouseLeave(op, index)
+        onMouseEnter: () => onMouseEnter == null ? void 0 : onMouseEnter(op, index),
+        onMouseLeave: () => onMouseLeave == null ? void 0 : onMouseLeave(op, index)
       },
       /* @__PURE__ */ React.createElement(
         OperationExplainedBox,

package/dist/esm/components/VisualQueryBuilder/components/OperationListExplained.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OperationListExplained.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationListExplained.tsx"],"sourcesContent":["import React from 'react';\nimport { type Grammar } from 'prismjs';\n\nimport { OperationExplainedBox } from './OperationExplainedBox';\nimport { RawQuery } from './RawQuery';\nimport { type QueryBuilderOperation, type VisualQuery, type VisualQueryModeller } from '../types';\n\ninterface Props<T extends VisualQuery> {\n query: T;\n queryModeller: VisualQueryModeller;\n explainMode?: boolean;\n stepNumber: number;\n language: {\n grammar: Grammar;\n name: string;\n };\n onMouseEnter?: (op: QueryBuilderOperation, index: number) => void;\n onMouseLeave?: (op: QueryBuilderOperation, index: number) => void;\n}\n\nexport function OperationListExplained<T extends VisualQuery>({\n query,\n queryModeller,\n stepNumber,\n language,\n onMouseEnter,\n onMouseLeave,\n}: Props<T>) {\n return (\n <>\n {query.operations.map((op, index) => {\n const def = queryModeller.getOperationDefinition(op.id);\n if (!def) {\n return `Operation ${op.id} not found`;\n }\n const title = def.renderer(op, def, queryModeller.innerQueryPlaceholder);\n const body = def.explainHandler ? def.explainHandler(op, def) : (def.documentation ?? 'no docs');\n\n return (\n <div\n key={index}\n onMouseEnter={() => onMouseEnter?.(op, index)}\n onMouseLeave={() => onMouseLeave?.(op, index)}\n >\n <OperationExplainedBox\n stepNumber={index + stepNumber}\n title={<RawQuery query={title} language={language} />}\n markdown={body}\n />\n </div>\n );\n })}\n </>\n );\n}\n"],"names":[],"mappings":";;;;;;AAoBO,SAAS,~~sBAA8C~~,~~CAAA~~;AAAA,EAC5D,KAAA;AAAA,EACA,aAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,~~CAAa~~,~~EAAA~~;AACX,EAAA,iEAEK,~~KAAM~~,~~CAAA~~,UAAA,CAAW,~~GAAI~~,~~CAAA~~,CAAC,IAAI,KAAU~~,KAAA~~;AA9B3C,IAAA,IAAA,EAAA;AA+BQ,IAAA,MAAM,GAAM,~~GAAA,~~aAAA,CAAc,~~sBAAuB~~,~~CAAA~~,EAAA,CAAG,EAAE,CAAA;AACtD,IAAA,IAAI,CAAC,~~GAAK~~,~~EAAA~~;AACR,~~MAAO~~,~~OAAA~~,CAAA,UAAA,EAAa,GAAG,EAAE,CAAA,UAAA,CAAA;AAAA;~~AAE3B~~,IAAA,MAAM,QAAQ,~~GAAI~~,~~CAAA~~,QAAA,CAAS,EAAI,~~EAAA,~~GAAA,EAAK,cAAc,qBAAqB,CAAA;AACvE,~~IAAM~~,~~MAAA~~,IAAA,GAAO,~~GAAI~~,~~CAAA~~,cAAA,GAAiB,~~GAAI~~,~~CAAA~~,cAAA,CAAe,IAAI,GAAG,CAAA,GAAA,CAAK,~~EAAI~~,GAAA,GAAA,~~CAAA~~,aAAA,KAAJ,~~IAAqB~~,GAAA,EAAA,~~GAAA~~,SAAA;AAEtF,~~IACE~~,~~uBAAA~~,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,~~GAAK~~,~~EAAA~~,KAAA;AAAA,QACL,YAAA,EAAc,MAAM,YAAA,IAAA,IAAA,GAAA,~~SAAA~~,GAAA,YAAA,CAAe,EAAI,~~EAAA,~~KAAA,CAAA;AAAA,QACvC,YAAA,EAAc,MAAM,YAAA,IAAA,IAAA,GAAA,~~SAAA~~,GAAA,YAAA,CAAe,EAAI,~~EAAA,~~KAAA;AAAA,OAAA;AAAA,sBAEvC,KAAA,CAAA,aAAA;AAAA,QAAC,qBAAA;AAAA,QAAA;AAAA,UACC,YAAY,~~KAAQ~~,~~GAAA~~,UAAA;AAAA,UACpB,~~KAAO~~,~~kBAAA~~,KAAA,CAAA,aAAA,CAAC,~~QAAS~~,EAAA,~~EAAA~~,KAAA,EAAO,OAAO,~~QAAoB~~,~~EAAA~~,CAAA;AAAA,UACnD,~~QAAU~~,~~EAAA~~;AAAA;AAAA;AACZ,KACF;AAAA,~~GAEH~~,CACH,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"OperationListExplained.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationListExplained.tsx"],"sourcesContent":["import React from 'react';\nimport { type Grammar } from 'prismjs';\n\nimport { OperationExplainedBox } from './OperationExplainedBox';\nimport { RawQuery } from './RawQuery';\nimport { type QueryBuilderOperation, type VisualQuery, type VisualQueryModeller } from '../types';\n\ninterface Props<T extends VisualQuery> {\n query: T;\n queryModeller: VisualQueryModeller;\n explainMode?: boolean;\n stepNumber: number;\n language: {\n grammar: Grammar;\n name: string;\n };\n onMouseEnter?: (op: QueryBuilderOperation, index: number) => void;\n onMouseLeave?: (op: QueryBuilderOperation, index: number) => void;\n}\n\nexport function OperationListExplained<T extends VisualQuery>({\n query,\n queryModeller,\n stepNumber,\n language,\n onMouseEnter,\n onMouseLeave,\n}: Props<T>) {\n return (\n <>\n {query.operations.map((op, index) => {\n const def = queryModeller.getOperationDefinition(op.id);\n if (!def) {\n return `Operation ${op.id} not found`;\n }\n const title = def.renderer(op, def, queryModeller.innerQueryPlaceholder);\n const body = def.explainHandler ? def.explainHandler(op, def) : (def.documentation ?? 'no docs');\n\n return (\n <div\n key={index}\n onMouseEnter={() => onMouseEnter?.(op, index)}\n onMouseLeave={() => onMouseLeave?.(op, index)}\n >\n <OperationExplainedBox\n stepNumber={index + stepNumber}\n title={<RawQuery query={title} language={language} />}\n markdown={body}\n />\n </div>\n );\n })}\n </>\n );\n}\n"],"names":[],"mappings":";;;;;;AAoBO,SAAS,sBAAA,CAA8C;AAAA,EAC5D,KAAA;AAAA,EACA,aAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EAAa;AACX,EAAA,iEAEK,KAAA,CAAM,UAAA,CAAW,GAAA,CAAI,CAAC,IAAI,KAAA,KAAU;AA9B3C,IAAA,IAAA,EAAA;AA+BQ,IAAA,MAAM,GAAA,GAAM,aAAA,CAAc,sBAAA,CAAuB,EAAA,CAAG,EAAE,CAAA;AACtD,IAAA,IAAI,CAAC,GAAA,EAAK;AACR,MAAA,OAAO,CAAA,UAAA,EAAa,GAAG,EAAE,CAAA,UAAA,CAAA;AAAA,IAC3B;AACA,IAAA,MAAM,QAAQ,GAAA,CAAI,QAAA,CAAS,EAAA,EAAI,GAAA,EAAK,cAAc,qBAAqB,CAAA;AACvE,IAAA,MAAM,IAAA,GAAO,GAAA,CAAI,cAAA,GAAiB,GAAA,CAAI,cAAA,CAAe,IAAI,GAAG,CAAA,GAAA,CAAK,EAAA,GAAA,GAAA,CAAI,aAAA,KAAJ,IAAA,GAAA,EAAA,GAAqB,SAAA;AAEtF,IAAA,uBACE,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,KAAA;AAAA,QACL,YAAA,EAAc,MAAM,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAe,EAAA,EAAI,KAAA,CAAA;AAAA,QACvC,YAAA,EAAc,MAAM,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAe,EAAA,EAAI,KAAA;AAAA,OAAA;AAAA,sBAEvC,KAAA,CAAA,aAAA;AAAA,QAAC,qBAAA;AAAA,QAAA;AAAA,UACC,YAAY,KAAA,GAAQ,UAAA;AAAA,UACpB,KAAA,kBAAO,KAAA,CAAA,aAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAO,OAAO,QAAA,EAAoB,CAAA;AAAA,UACnD,QAAA,EAAU;AAAA;AAAA;AACZ,KACF;AAAA,EAEJ,CAAC,CACH,CAAA;AAEJ;;;;"}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { css } from '@emotion/css';
 import { toOption } from '@grafana/data';
-import { AutoSizeInput, Checkbox, useStyles2, Button, Select } from '@grafana/ui';
+import { useStyles2, Button, Select, AutoSizeInput, Checkbox } from '@grafana/ui';
 import '../../QueryEditor/types.js';
 import 'lodash';
 import '../../QueryEditor/EditorList.js';
@@ -9,7 +9,7 @@ import { EditorStack } from '../../QueryEditor/EditorStack.js';
 import 'react-use';
 import '../../QueryEditor/QueryHeader.js';
 import 'react-virtualized-auto-sizer';
-import 'sql-formatter-plus';
+import 'sql-formatter';
 import '../../SQLEditor/standardSql/language.js';
 import 'uuid';
 import '@grafana/runtime';
@@ -43,7 +43,7 @@ function SimpleInputParamEditor(props) {
     AutoSizeInput,
     {
       id: getOperationParamId(props.operationId, props.index),
-      defaultValue: (_a = props.value) == null ? undefined : _a.toString(),
+      defaultValue: (_a = props.value) == null ? void 0 : _a.toString(),
       minWidth: props.paramDef.minWidth,
       placeholder: props.paramDef.placeholder,
       title: props.paramDef.description,
@@ -75,9 +75,9 @@ function SelectInputParamEditor({
   onChange
 }) {
   var _a, _b;
-  const styles = useStyles2(getStyles);
+  const styles = useStyles2(getStyles$8);
   let selectOptions = paramDef.options;
-  if (!((_a = selectOptions[0]) == null ? undefined : _a.label)) {
+  if (!((_a = selectOptions[0]) == null ? void 0 : _a.label)) {
     selectOptions = paramDef.options.map((option) => ({
       label: option.toString(),
       value: option
@@ -121,7 +121,7 @@ function SelectInputParamEditor({
     }
   ));
 }
-const getStyles = (theme) => {
+const getStyles$8 = (theme) => {
   return {
     optionalParam: css({
       marginTop: theme.spacing(1)

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

	@@ -1 +1 @@
1	- {"version":3,"file":"OperationParamEditor.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationParamEditor.tsx"],"sourcesContent":["import React, { type FunctionComponent } from 'react';\nimport { css } from '@emotion/css';\n\nimport { type GrafanaTheme2, type SelectableValue, toOption } from '@grafana/data';\nimport { AutoSizeInput, Button, Checkbox, Select, useStyles2 } from '@grafana/ui';\n\nimport { type QueryBuilderOperationParamDef, type QueryBuilderOperationParamEditorProps } from '../types';\n\nimport { EditorStack } from '../../QueryEditor';\n\nexport function getOperationParamEditor(\n paramDef: QueryBuilderOperationParamDef\n): FunctionComponent<QueryBuilderOperationParamEditorProps> {\n if (paramDef.editor) {\n return paramDef.editor;\n }\n\n if (paramDef.options) {\n return SelectInputParamEditor;\n }\n\n switch (paramDef.type) {\n case 'boolean':\n return BoolInputParamEditor;\n case 'number':\n case 'string':\n default:\n return SimpleInputParamEditor;\n }\n}\n\nfunction SimpleInputParamEditor(props: QueryBuilderOperationParamEditorProps) {\n return (\n <AutoSizeInput\n id={getOperationParamId(props.operationId, props.index)}\n defaultValue={props.value?.toString()}\n minWidth={props.paramDef.minWidth}\n placeholder={props.paramDef.placeholder}\n title={props.paramDef.description}\n maxWidth={(props.paramDef.minWidth \|\| 20) * 3}\n onCommitChange={(evt) => {\n props.onChange(props.index, evt.currentTarget.value);\n if (props.paramDef.runQueryOnEnter && evt.type === 'keydown') {\n props.onRunQuery();\n }\n }}\n />\n );\n}\n\nfunction BoolInputParamEditor(props: QueryBuilderOperationParamEditorProps) {\n return (\n <Checkbox\n id={getOperationParamId(props.operationId, props.index)}\n value={Boolean(props.value)}\n onChange={(evt) => props.onChange(props.index, evt.currentTarget.checked)}\n />\n );\n}\n\nfunction SelectInputParamEditor({\n paramDef,\n value,\n index,\n operationId,\n onChange,\n}: QueryBuilderOperationParamEditorProps) {\n const styles = useStyles2(getStyles);\n let selectOptions = paramDef.options as SelectableValue[];\n\n if (!selectOptions[0]?.label) {\n selectOptions = paramDef.options!.map((option) => ({\n label: option.toString(),\n value: option,\n }));\n }\n\n let valueOption = selectOptions.find((x) => x.value === value) ?? toOption(value as string);\n\n // If we have optional options param and don't have value, we want to render button with which we add optional options.\n // This makes it easier to understand what needs to be selected and what is optional.\n if (!value && paramDef.optional) {\n return (\n <div className={styles.optionalParam}>\n <Button\n size=\"sm\"\n variant=\"secondary\"\n title={`Add ${paramDef.name}`}\n icon=\"plus\"\n onClick={() => onChange(index, selectOptions[0].value)}\n >\n {paramDef.name}\n </Button>\n </div>\n );\n }\n\n return (\n <EditorStack gap={0.5} direction=\"row\" alignItems=\"center\">\n <Select\n id={getOperationParamId(operationId, index)}\n value={valueOption}\n options={selectOptions}\n placeholder={paramDef.placeholder}\n allowCustomValue={true}\n onChange={(value) => onChange(index, value.value!)}\n width={paramDef.minWidth \|\| 'auto'}\n />\n {paramDef.optional && (\n <Button\n data-testid={`operations.${index}.remove-param`}\n size=\"sm\"\n fill=\"text\"\n icon=\"times\"\n variant=\"secondary\"\n title={`Remove ${paramDef.name}`}\n onClick={() => onChange(index, '')}\n />\n )}\n </EditorStack>\n );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n optionalParam: css({\n marginTop: theme.spacing(1),\n }),\n };\n};\n\nexport function getOperationParamId(operationId: string, paramIndex: number) {\n return `operations.${operationId}.param.${paramIndex}`;\n}\n"],"names":["value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAUO,SAAS,wBACd,~~QAC0D~~,~~EAAA~~;AAC1D,EAAA,IAAI,SAAS,~~MAAQ~~,~~EAAA~~;AACnB,IAAA,OAAO,~~QAAS~~,~~CAAA~~,MAAA;AAAA;~~AAGlB~~,EAAA,IAAI,SAAS,~~OAAS~~,~~EAAA~~;AACpB,~~IAAO~~,~~OAAA~~,sBAAA;AAAA;~~AAGT~~,EAAA,QAAQ,SAAS,~~IAAM~~;~~AAAA~~,IACrB,KAAK,SAAA;AACH,~~MAAO~~,~~OAAA~~,oBAAA;AAAA,IACT,KAAK,QAAA;AAAA,IACL,KAAK,QAAA;AAAA,IACL;AACE,~~MAAO~~,~~OAAA~~,sBAAA;AAAA;AAEb;AAEA,SAAS,uBAAuB,~~KAA8C~~,~~EAAA~~;AA/B9E,EAAA,IAAA,EAAA;AAgCE,~~EACE~~,~~uBAAA~~,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,EAAI,~~EAAA,~~mBAAA,CAAoB,~~KAAM~~,~~CAAA~~,WAAA,EAAa,MAAM,KAAK,CAAA;AAAA,MACtD,YAAA,EAAA,CAAc,~~EAAM~~,GAAA,KAAA,~~CAAA~~,KAAA,KAAN,~~IAAa~~,GAAA,~~SAAA~~,GAAA,EAAA,~~CAAA~~,QAAA,EAAA;AAAA,MAC3B,QAAA,EAAU,MAAM,~~QAAS~~,~~CAAA~~,QAAA;AAAA,MACzB,WAAA,EAAa,MAAM,~~QAAS~~,~~CAAA~~,WAAA;AAAA,MAC5B,KAAA,EAAO,MAAM,~~QAAS~~,~~CAAA~~,WAAA;AAAA,MACtB,~~QAAW~~,EAAA,~~CAAA~~,KAAA,CAAM,~~QAAS~~,~~CAAA~~,QAAA,IAAY,~~EAAM~~,~~IAAA~~,CAAA;AAAA,MAC5C,cAAA,EAAgB,CAAC,~~GAAQ~~,~~KAAA~~;AACvB,QAAA,KAAA,CAAM,~~QAAS~~,~~CAAA~~,KAAA,CAAM,~~KAAO~~,~~EAAA~~,GAAA,CAAI,cAAc,KAAK,CAAA;AACnD,QAAA,IAAI,~~KAAM~~,~~CAAA~~,QAAA,CAAS,~~eAAmB~~,~~IAAA~~,GAAA,CAAI,SAAS,~~SAAW~~,~~EAAA~~;AAC5D,UAAA,KAAA,CAAM,~~UAAW~~,~~EAAA~~;AAAA;~~AACnB~~;~~AACF~~;AAAA,GACF;AAEJ;AAEA,SAAS,qBAAqB,~~KAA8C~~,~~EAAA~~;AAC1E,~~EACE~~,~~uBAAA~~,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,EAAI,~~EAAA,~~mBAAA,CAAoB,~~KAAM~~,~~CAAA~~,WAAA,EAAa,MAAM,KAAK,CAAA;AAAA,MACtD,KAAA,EAAO,~~OAAQ~~,~~CAAA~~,KAAA,CAAM,KAAK,CAAA;AAAA,MAC1B,QAAA,EAAU,CAAC,~~GAAQ~~,~~KAAA~~,KAAA,CAAM,SAAS,~~KAAM~~,~~CAAA~~,KAAA,EAAO,~~GAAI~~,~~CAAA~~,aAAA,CAAc,OAAO;AAAA;AAAA,GAC1E;AAEJ;AAEA,SAAS,~~sBAAuB~~,~~CAAA~~;AAAA,EAC9B,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,~~CAA0C~~,~~EAAA~~;AAlE1C,EAAA,IAAA,EAAA,EAAA,EAAA;AAmEE,~~EAAM~~,~~MAAA~~,MAAA,GAAS,~~WAAW~~,~~SAAS~~,CAAA;AACnC,EAAA,IAAI,gBAAgB,~~QAAS~~,~~CAAA~~,OAAA;AAE7B,EAAA,IAAI,~~EAAC~~,~~CAAA~~,EAAA,GAAA,aAAA,CAAc,CAAC,CAAA,KAAf,~~sBAAkB~~,~~KAAO~~,CAAA,~~EAAA~~;AAC5B,IAAA,aAAA,GAAgB,~~QAAS~~,~~CAAA~~,OAAA,CAAS,~~GAAI~~,~~CAAA~~,CAAC,MAAY~~,MAAA~~;AAAA,MACjD,KAAA,EAAO,OAAO,~~QAAS~~,~~EAAA~~;AAAA,MACvB,~~KAAO~~,~~EAAA~~;AAAA,~~KACP~~,~~CAAA~~,CAAA;AAAA;~~AAGJ~~,~~EAAI~~,~~IAAA~~,WAAA,GAAA,CAAc,~~EAAc~~,GAAA,aAAA,~~CAAA~~,IAAA,CAAK,CAAC,CAAA,KAAM,CAAE,~~CAAA,~~KAAA,KAAU,KAAK,CAAA,KAA3C,~~IAAgD~~,GAAA,EAAA,~~GAAA~~,QAAA,CAAS,KAAe,CAAA;AAI1F,~~EAAI~~,~~IAAA~~,CAAC,~~KAAS~~,~~IAAA~~,QAAA,CAAS,~~QAAU~~,~~EAAA~~;AAC/B,IAAA,~~uBACG~~,KAAA,CAAA,aAAA,~~CAAA~~,KAAA,EAAA,EAAI,~~SAAW~~,~~EAAA~~,MAAA,CAAO,~~aACrB~~,EAAA,~~kBAAA~~,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,~~IAAK~~,~~EAAA~~,IAAA;AAAA,QACL,~~OAAQ~~,~~EAAA~~,WAAA;AAAA,QACR,KAAA,EAAO,~~CAAO~~,IAAA,~~EAAA~~,QAAA,CAAS,IAAI,CAAA,CAAA;AAAA,QAC3B,~~IAAK~~,~~EAAA~~,MAAA;AAAA,QACL,SAAS,MAAM,QAAA,CAAS,OAAO,~~aAAc~~,~~CAAA~~,CAAC,EAAE,KAAK;AAAA,OAAA;AAAA,MAEpD,~~QAAS~~,~~CAAA~~;AAAA,KAEd,CAAA;AAAA;~~AAIJ~~,EAAA,2CACG,~~WAAY~~,EAAA,~~EAAA~~,GAAA,EAAK,KAAK,~~SAAU~~,~~EAAA~~,KAAA,EAAM,YAAW,~~QAChD~~,EAAA,~~kBAAA~~,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,~~mBAAoB~~,~~CAAA~~,WAAA,EAAa,KAAK,CAAA;AAAA,MAC1C,~~KAAO~~,~~EAAA~~,WAAA;AAAA,MACP,~~OAAS~~,~~EAAA~~,aAAA;AAAA,MACT,aAAa,~~QAAS~~,~~CAAA~~,WAAA;AAAA,MACtB,~~gBAAkB~~,~~EAAA~~,IAAA;AAAA,MAClB,UAAU,~~CAACA~~,MAAAA,KAAU,~~QAAS~~,~~CAAA~~,KAAA,EAAOA,OAAM,KAAM,CAAA;AAAA,MACjD,KAAA,EAAO,SAAS,~~QAAY~~,~~IAAA~~;AAAA;AAAA,GAC9B,EACC,SAAS,~~QACR~~,~~oBAAA~~,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAa,cAAc,KAAK,CAAA,aAAA,CAAA;AAAA,MAChC,~~IAAK~~,~~EAAA~~,IAAA;AAAA,MACL,~~IAAK~~,~~EAAA~~,MAAA;AAAA,MACL,~~IAAK~~,~~EAAA~~,OAAA;AAAA,MACL,~~OAAQ~~,~~EAAA~~,WAAA;AAAA,MACR,KAAA,EAAO,~~CAAU~~,OAAA,~~EAAA~~,QAAA,CAAS,IAAI,CAAA,CAAA;AAAA,MAC9B,~~OAAS~~,~~EAAA~~,MAAM,~~QAAS~~,~~CAAA~~,KAAA,EAAO,EAAE;AAAA;AAAA,GAGvC,CAAA;AAEJ;AAEA,~~MAAM~~,~~SAAA~~,GAAY,CAAC,KAAyB~~,KAAA~~;AAC1C,~~EAAO~~,~~OAAA~~;AAAA,IACL,eAAe,~~GAAI~~,~~CAAA~~;AAAA,MACjB,SAAA,EAAW,~~KAAM~~,~~CAAA~~,OAAA,CAAQ,CAAC;AAAA,KAC3B;AAAA,GACH;AACF,CAAA;~~AAEgB~~,~~SAAA~~,mBAAA,CAAoB,aAAqB,~~UAAoB~~,~~EAAA~~;AAC3E,~~EAAO~~,~~OAAA~~,CAAA,WAAA,EAAc,WAAW,CAAA,OAAA,EAAU,UAAU,CAAA,CAAA;AACtD;;;;"}
1	+ {"version":3,"file":"OperationParamEditor.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationParamEditor.tsx"],"sourcesContent":["import React, { type FunctionComponent } from 'react';\nimport { css } from '@emotion/css';\n\nimport { type GrafanaTheme2, type SelectableValue, toOption } from '@grafana/data';\nimport { AutoSizeInput, Button, Checkbox, Select, useStyles2 } from '@grafana/ui';\n\nimport { type QueryBuilderOperationParamDef, type QueryBuilderOperationParamEditorProps } from '../types';\n\nimport { EditorStack } from '../../QueryEditor';\n\nexport function getOperationParamEditor(\n paramDef: QueryBuilderOperationParamDef\n): FunctionComponent<QueryBuilderOperationParamEditorProps> {\n if (paramDef.editor) {\n return paramDef.editor;\n }\n\n if (paramDef.options) {\n return SelectInputParamEditor;\n }\n\n switch (paramDef.type) {\n case 'boolean':\n return BoolInputParamEditor;\n case 'number':\n case 'string':\n default:\n return SimpleInputParamEditor;\n }\n}\n\nfunction SimpleInputParamEditor(props: QueryBuilderOperationParamEditorProps) {\n return (\n <AutoSizeInput\n id={getOperationParamId(props.operationId, props.index)}\n defaultValue={props.value?.toString()}\n minWidth={props.paramDef.minWidth}\n placeholder={props.paramDef.placeholder}\n title={props.paramDef.description}\n maxWidth={(props.paramDef.minWidth \|\| 20) * 3}\n onCommitChange={(evt) => {\n props.onChange(props.index, evt.currentTarget.value);\n if (props.paramDef.runQueryOnEnter && evt.type === 'keydown') {\n props.onRunQuery();\n }\n }}\n />\n );\n}\n\nfunction BoolInputParamEditor(props: QueryBuilderOperationParamEditorProps) {\n return (\n <Checkbox\n id={getOperationParamId(props.operationId, props.index)}\n value={Boolean(props.value)}\n onChange={(evt) => props.onChange(props.index, evt.currentTarget.checked)}\n />\n );\n}\n\nfunction SelectInputParamEditor({\n paramDef,\n value,\n index,\n operationId,\n onChange,\n}: QueryBuilderOperationParamEditorProps) {\n const styles = useStyles2(getStyles);\n let selectOptions = paramDef.options as SelectableValue[];\n\n if (!selectOptions[0]?.label) {\n selectOptions = paramDef.options!.map((option) => ({\n label: option.toString(),\n value: option,\n }));\n }\n\n let valueOption = selectOptions.find((x) => x.value === value) ?? toOption(value as string);\n\n // If we have optional options param and don't have value, we want to render button with which we add optional options.\n // This makes it easier to understand what needs to be selected and what is optional.\n if (!value && paramDef.optional) {\n return (\n <div className={styles.optionalParam}>\n <Button\n size=\"sm\"\n variant=\"secondary\"\n title={`Add ${paramDef.name}`}\n icon=\"plus\"\n onClick={() => onChange(index, selectOptions[0].value)}\n >\n {paramDef.name}\n </Button>\n </div>\n );\n }\n\n return (\n <EditorStack gap={0.5} direction=\"row\" alignItems=\"center\">\n <Select\n id={getOperationParamId(operationId, index)}\n value={valueOption}\n options={selectOptions}\n placeholder={paramDef.placeholder}\n allowCustomValue={true}\n onChange={(value) => onChange(index, value.value!)}\n width={paramDef.minWidth \|\| 'auto'}\n />\n {paramDef.optional && (\n <Button\n data-testid={`operations.${index}.remove-param`}\n size=\"sm\"\n fill=\"text\"\n icon=\"times\"\n variant=\"secondary\"\n title={`Remove ${paramDef.name}`}\n onClick={() => onChange(index, '')}\n />\n )}\n </EditorStack>\n );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n optionalParam: css({\n marginTop: theme.spacing(1),\n }),\n };\n};\n\nexport function getOperationParamId(operationId: string, paramIndex: number) {\n return `operations.${operationId}.param.${paramIndex}`;\n}\n"],"names":["getStyles","value"],"mappings":"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"}

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

@@ -9,7 +9,7 @@ import { EditorStack } from '../../QueryEditor/EditorStack.js';
 import 'react-use';
 import '../../QueryEditor/QueryHeader.js';
 import 'react-virtualized-auto-sizer';
-import 'sql-formatter-plus';
+import 'sql-formatter';
 import '../../SQLEditor/standardSql/language.js';
 import 'uuid';
 import '@grafana/runtime';
@@ -22,10 +22,10 @@ import 'rxjs';
 import 'rxjs/operators';
 function OperationsEditorRow({ children }) {
-  const styles = useStyles2(getStyles);
+  const styles = useStyles2(getStyles$3);
   return /* @__PURE__ */ React.createElement("div", { className: styles.root }, /* @__PURE__ */ React.createElement(EditorStack, { gap: 1 }, children));
 }
-const getStyles = (theme) => {
+const getStyles$3 = (theme) => {
   return {
     root: css({
       padding: theme.spacing(1, 1, 0, 1),

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

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

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

@@ -14,19 +14,19 @@ const QueryBuilderHints = ({
   buildDataQueryFromQueryString,
   buildQueryStringFromDataQuery
 }) => {
-  const styles = useStyles2(getStyles);
+  const styles = useStyles2(getStyles$2);
   const hints = useMemo(() => {
     var _a;
     const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));
-    const hints2 = (_a = datasource.getQueryHints) == null ? undefined : _a.call(datasource, dataQuery, (data == null ? undefined : data.series) || []).filter((hint) => {
+    const hints2 = (_a = datasource.getQueryHints) == null ? void 0 : _a.call(datasource, dataQuery, (data == null ? void 0 : data.series) || []).filter((hint) => {
       var _a2;
-      return (_a2 = hint.fix) == null ? undefined : _a2.action;
+      return (_a2 = hint.fix) == null ? void 0 : _a2.action;
     });
     return hints2 != null ? hints2 : [];
   }, [datasource, visualQuery, data, queryModeller, buildDataQueryFromQueryString]);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, hints.length > 0 && /* @__PURE__ */ React.createElement("div", { className: styles.container }, hints.map((hint) => {
     var _a, _b, _c, _d;
-    return /* @__PURE__ */ React.createElement(Tooltip, { content: `${hint.label} ${(_a = hint.fix) == null ? undefined : _a.label}`, key: hint.type }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(Tooltip, { content: `${hint.label} ${(_a = hint.fix) == null ? void 0 : _a.label}`, key: hint.type }, /* @__PURE__ */ React.createElement(
       Button,
       {
         onClick: () => {
@@ -35,9 +35,9 @@ const QueryBuilderHints = ({
             hint: hint.type,
             datasourceType: datasource.type
           });
-          if ((_a2 = hint == null ? undefined : hint.fix) == null ? undefined : _a2.action) {
+          if ((_a2 = hint == null ? void 0 : hint.fix) == null ? void 0 : _a2.action) {
             const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));
-            const newQuery = (_b2 = datasource.modifyQuery) == null ? undefined : _b2.call(datasource, dataQuery, hint.fix.action);
+            const newQuery = (_b2 = datasource.modifyQuery) == null ? void 0 : _b2.call(datasource, dataQuery, hint.fix.action);
             if (newQuery) {
               const newVisualQuery = buildVisualQueryFromString(
                 (_c2 = buildQueryStringFromDataQuery(newQuery)) != null ? _c2 : ""
@@ -51,12 +51,12 @@ const QueryBuilderHints = ({
         className: styles.hint
       },
       "hint: ",
-      ((_b = hint.fix) == null ? undefined : _b.title) || ((_d = (_c = hint.fix) == null ? undefined : _c.action) == null ? undefined : _d.type.toLowerCase().replace("_", " "))
+      ((_b = hint.fix) == null ? void 0 : _b.title) || ((_d = (_c = hint.fix) == null ? void 0 : _c.action) == null ? void 0 : _d.type.toLowerCase().replace("_", " "))
     ));
   })));
 };
 QueryBuilderHints.displayName = "QueryBuilderHints";
-const getStyles = (theme) => {
+const getStyles$2 = (theme) => {
   return {
     container: css`
       display: flex;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"QueryBuilderHints.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryBuilderHints.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useMemo } from 'react';\n\nimport { type DataSourceApi, type GrafanaTheme2, type PanelData, type DataQuery } from '@grafana/data';\nimport { reportInteraction } from '@grafana/runtime';\nimport { Button, Tooltip, useStyles2 } from '@grafana/ui';\n\nimport { type VisualQuery, type VisualQueryModeller } from '../types';\n\ninterface Props<TVisualQuery extends VisualQuery, TDataQuery extends DataQuery> {\n query: TVisualQuery;\n datasource: DataSourceApi<TDataQuery>;\n queryModeller: VisualQueryModeller;\n buildVisualQueryFromString: (queryString: string) => { query: TVisualQuery };\n buildDataQueryFromQueryString: (queryString: string) => TDataQuery;\n buildQueryStringFromDataQuery: (dataQuery: TDataQuery) => string;\n onChange: (update: TVisualQuery) => void;\n data?: PanelData;\n}\n\nexport const QueryBuilderHints = <TVisualQuery extends VisualQuery, TDataQuery extends DataQuery>({\n datasource,\n query: visualQuery,\n onChange,\n data,\n queryModeller,\n buildVisualQueryFromString,\n buildDataQueryFromQueryString,\n buildQueryStringFromDataQuery,\n}: Props<TVisualQuery, TDataQuery>) => {\n const styles = useStyles2(getStyles);\n\n const hints = useMemo(() => {\n const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));\n // For now show only actionable hints\n const hints = datasource.getQueryHints?.(dataQuery, data?.series \|\| []).filter((hint) => hint.fix?.action);\n return hints ?? [];\n }, [datasource, visualQuery, data, queryModeller, buildDataQueryFromQueryString]);\n\n return (\n <>\n {hints.length > 0 && (\n <div className={styles.container}>\n {hints.map((hint) => {\n return (\n <Tooltip content={`${hint.label} ${hint.fix?.label}`} key={hint.type}>\n <Button\n onClick={() => {\n reportInteraction('grafana_query_builder_hints_clicked', {\n hint: hint.type,\n datasourceType: datasource.type,\n });\n\n if (hint?.fix?.action) {\n const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));\n const newQuery = datasource.modifyQuery?.(dataQuery, hint.fix.action);\n if (newQuery) {\n const newVisualQuery = buildVisualQueryFromString(\n buildQueryStringFromDataQuery(newQuery) ?? ''\n );\n return onChange(newVisualQuery.query);\n }\n }\n }}\n fill=\"outline\"\n size=\"sm\"\n className={styles.hint}\n >\n hint: {hint.fix?.title \|\| hint.fix?.action?.type.toLowerCase().replace('_', ' ')}\n </Button>\n </Tooltip>\n );\n })}\n </div>\n )}\n </>\n );\n};\n\nQueryBuilderHints.displayName = 'QueryBuilderHints';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n container: css`\n display: flex;\n align-items: start;\n `,\n hint: css`\n margin-right: ${theme.spacing(1)};\n `,\n };\n};\n"],"names":["hints","_a","_b","_c"],"mappings":";;;;;;AAoBO,MAAM,oBAAoB,CAAiE;AAAA,EAChG,UAAA;AAAA,EACA,~~KAAO~~,~~EAAA~~,WAAA;AAAA,EACP,QAAA;AAAA,EACA,IAAA;AAAA,EACA,aAAA;AAAA,EACA,0BAAA;AAAA,EACA,6BAAA;AAAA,EACA;AACF,~~CAAuC~~,~~KAAA~~;AACrC,~~EAAM~~,~~MAAA~~,MAAA,GAAS,~~WAAW~~,~~SAAS~~,CAAA;AAEnC,~~EAAM~~,~~MAAA~~,KAAA,GAAQ,QAAQ,MAAM;AAhC9B,IAAA,IAAA,EAAA;AAiCI,IAAA,MAAM,~~SAAY~~,~~GAAA~~,6BAAA,CAA8B,~~aAAc~~,~~CAAA~~,WAAA,CAAY,WAAW,CAAC,CAAA;AAEtF,~~IAAMA~~,~~MAAAA~~,MAAAA,GAAAA,CAAQ,~~EAAW~~,GAAA,UAAA,~~CAAA~~,aAAA,KAAX,~~IAA2B~~,GAAA,~~SAAA~~,GAAA,EAAA,CAAA,IAAA,CAAA,UAAA,~~EAAA~~,SAAA,EAAA,CAAW,~~IAAM~~,IAAA,IAAA,GAAA,~~SAAA~~,GAAA,IAAA,~~CAAA~~,MAAA,KAAU,EAAC,CAAA,CAAG,~~MAAO~~,~~CAAA~~,CAAC,~~IAAM~~,~~KAAA~~;AAnC1F,~~MAAAC~~,~~IAAAA~~,GAAAA;AAmC6F,MAAA,OAAA,CAAAA,~~GAAA~~,GAAA,IAAA,CAAK,~~GAAL~~,~~KAAA~~,IAAA,GAAA,~~SAAA~~,GAAAA,~~GAAU~~,~~CAAA~~,MAAA;AAAA,~~KAAA~~,CAAA;AACnG,~~IAAOD~~,~~OAAAA~~,MAAAA,IAAA,~~IAAAA~~,GAAAA,MAAAA,GAAS,EAAC;AAAA,~~KAChB~~,CAAC,UAAA,EAAY,aAAa,~~IAAM~~,~~EAAA~~,aAAA,EAAe,6BAA6B,CAAC,CAAA;AAEhF,EAAA,~~uBAEK~~,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,~~EAAA~~,KAAA,CAAM,~~MAAS~~,~~GAAA~~,CAAA,~~oBACb~~,KAAA,CAAA,aAAA,~~CAAA~~,KAAA,EAAA,EAAI,~~SAAW~~,~~EAAA~~,MAAA,CAAO,~~SACpB~~,EAAA,~~EAAA~~,KAAA,CAAM,~~GAAI~~,~~CAAA~~,CAAC,~~IAAS~~,~~KAAA~~;AA3C/B,IAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AA4CY,IAAA,~~uBACG~~,KAAA,CAAA,aAAA,~~CAAA~~,OAAA,EAAA,EAAQ,~~OAAS~~,~~EAAA~~,CAAA,EAAG,KAAK,KAAK,CAAA,CAAA,EAAA,CAAI,~~EAAK~~,GAAA,IAAA,~~CAAA~~,GAAA,KAAL,~~IAAU~~,GAAA,~~SAAA~~,GAAA,EAAA,~~CAAA~~,KAAK,~~CAAI~~,CAAA,~~EAAA~~,GAAA,EAAK,KAAK,~~IAC9D~~,EAAA,~~kBAAA~~,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAS,MAAM;AA/CjC,UAAA,IAAAC,KAAAC,~~GAAAC~~,~~EAAAA~~,GAAAA;AAgDoB,UAAA,iBAAA,CAAkB,~~qCAAuC~~,~~EAAA~~;AAAA,YACvD,MAAM,~~IAAK~~,~~CAAA~~,IAAA;AAAA,YACX,gBAAgB,~~UAAW~~,~~CAAA~~;AAAA,WAC5B,CAAA;AAED,UAAA,IAAA,CAAIF,~~GAAA~~,GAAA,IAAA,IAAA,IAAA,GAAA,~~SAAA~~,GAAA,IAAA,CAAM,~~GAAN~~,~~KAAA~~,IAAA,GAAA,~~SAAA~~,GAAAA,IAAW,~~MAAQ~~,~~EAAA~~;AACrB,YAAA,MAAM,~~SAAY~~,~~GAAA~~,6BAAA,CAA8B,~~aAAc~~,~~CAAA~~,WAAA,CAAY,WAAW,CAAC,CAAA;AACtF,~~YAAM~~,~~MAAA~~,QAAA,GAAA,CAAWC,MAAA,~~UAAW~~,~~CAAA~~,WAAA,KAAX,~~mBAAAA~~,~~GAAA~~,CAAA,IAAA,CAAA,UAAA,EAAyB,~~SAAW~~,~~EAAA~~,IAAA,CAAK,~~GAAI~~,~~CAAA~~,MAAA,CAAA;AAC9D,YAAA,IAAI,~~QAAU~~,~~EAAA~~;AACZ,cAAA,MAAM,~~cAAiB~~,~~GAAA~~,0BAAA;AAAA,gBAAA,CACrBC,~~GAAA~~,GAAA,6BAAA,CAA8B,QAAQ,CAAA,KAAtC,OAAAA,GAA2C~~,GAAA~~;AAAA,eAC7C;AACA,~~cAAO~~,~~OAAA~~,QAAA,CAAS,eAAe,KAAK,CAAA;AAAA;~~AACtC~~;~~AACF~~,~~SACF~~;AAAA,QACA,~~IAAK~~,~~EAAA~~,SAAA;AAAA,QACL,~~IAAK~~,~~EAAA~~,IAAA;AAAA,QACL,WAAW,~~MAAO~~,~~CAAA~~;AAAA,OAAA;AAAA,MACnB,QAAA;AAAA,MAAA,CAAA,CACQ,~~EAAK~~,GAAA,IAAA,~~CAAA~~,GAAA,KAAL,~~IAAU~~,GAAA,~~SAAA~~,GAAA,EAAA,~~CAAA~~,KAAA,MAAA,CAAS,~~EAAK~~,GAAA,CAAA,EAAA,GAAA,IAAA,~~CAAA~~,GAAA,KAAL,~~IAAU~~,GAAA,~~SAAA~~,GAAA,EAAA,~~CAAA~~,MAAA,KAAV,~~IAAkB~~,GAAA,~~SAAA~~,GAAA,EAAA,~~CAAA~~,IAAA,CAAK,~~WAAc~~,EAAA,~~CAAA~~,OAAA,CAAQ,~~GAAK~~,~~EAAA~~,GAAA,CAAA;AAAA,KAEhF,CAAA;AAAA,~~GAEH~~,CACH,CAEJ,CAAA;AAEJ;AAEA,iBAAA,CAAkB,~~WAAc~~,~~GAAA~~,mBAAA;AAEhC,~~MAAM~~,~~SAAA~~,GAAY,CAAC,KAAyB~~,KAAA~~;AAC1C,~~EAAO~~,~~OAAA~~;AAAA,IACL,~~SAAW~~,~~EAAA~~,GAAA;AAAA;AAAA;AAAA,IAAA,CAAA;AAAA,IAIX,~~IAAM~~,~~EAAA~~,GAAA;AAAA,~~oBACY~~,~~EAAA~~,KAAA,CAAM,~~OAAQ~~,~~CAAA~~,CAAC,CAAC,CAAA;AAAA,IAAA;AAAA,GAEpC;AACF,CAAA;;;;"}
1	+ {"version":3,"file":"QueryBuilderHints.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryBuilderHints.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useMemo } from 'react';\n\nimport { type DataSourceApi, type GrafanaTheme2, type PanelData, type DataQuery } from '@grafana/data';\nimport { reportInteraction } from '@grafana/runtime';\nimport { Button, Tooltip, useStyles2 } from '@grafana/ui';\n\nimport { type VisualQuery, type VisualQueryModeller } from '../types';\n\ninterface Props<TVisualQuery extends VisualQuery, TDataQuery extends DataQuery> {\n query: TVisualQuery;\n datasource: DataSourceApi<TDataQuery>;\n queryModeller: VisualQueryModeller;\n buildVisualQueryFromString: (queryString: string) => { query: TVisualQuery };\n buildDataQueryFromQueryString: (queryString: string) => TDataQuery;\n buildQueryStringFromDataQuery: (dataQuery: TDataQuery) => string;\n onChange: (update: TVisualQuery) => void;\n data?: PanelData;\n}\n\nexport const QueryBuilderHints = <TVisualQuery extends VisualQuery, TDataQuery extends DataQuery>({\n datasource,\n query: visualQuery,\n onChange,\n data,\n queryModeller,\n buildVisualQueryFromString,\n buildDataQueryFromQueryString,\n buildQueryStringFromDataQuery,\n}: Props<TVisualQuery, TDataQuery>) => {\n const styles = useStyles2(getStyles);\n\n const hints = useMemo(() => {\n const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));\n // For now show only actionable hints\n const hints = datasource.getQueryHints?.(dataQuery, data?.series \|\| []).filter((hint) => hint.fix?.action);\n return hints ?? [];\n }, [datasource, visualQuery, data, queryModeller, buildDataQueryFromQueryString]);\n\n return (\n <>\n {hints.length > 0 && (\n <div className={styles.container}>\n {hints.map((hint) => {\n return (\n <Tooltip content={`${hint.label} ${hint.fix?.label}`} key={hint.type}>\n <Button\n onClick={() => {\n reportInteraction('grafana_query_builder_hints_clicked', {\n hint: hint.type,\n datasourceType: datasource.type,\n });\n\n if (hint?.fix?.action) {\n const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));\n const newQuery = datasource.modifyQuery?.(dataQuery, hint.fix.action);\n if (newQuery) {\n const newVisualQuery = buildVisualQueryFromString(\n buildQueryStringFromDataQuery(newQuery) ?? ''\n );\n return onChange(newVisualQuery.query);\n }\n }\n }}\n fill=\"outline\"\n size=\"sm\"\n className={styles.hint}\n >\n hint: {hint.fix?.title \|\| hint.fix?.action?.type.toLowerCase().replace('_', ' ')}\n </Button>\n </Tooltip>\n );\n })}\n </div>\n )}\n </>\n );\n};\n\nQueryBuilderHints.displayName = 'QueryBuilderHints';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n container: css`\n display: flex;\n align-items: start;\n `,\n hint: css`\n margin-right: ${theme.spacing(1)};\n `,\n };\n};\n"],"names":["getStyles","hints","_a","_b","_c"],"mappings":"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"}

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

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

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

@@ -9,7 +9,7 @@ import { EditorStack } from '../../QueryEditor/EditorStack.js';
 import 'react-use';
 import '../../QueryEditor/QueryHeader.js';
 import 'react-virtualized-auto-sizer';
-import 'sql-formatter-plus';
+import 'sql-formatter';
 import '../../SQLEditor/standardSql/language.js';
 import 'uuid';
 import '@grafana/runtime';
@@ -24,10 +24,10 @@ import 'rxjs/operators';
 function QueryHeaderSwitch({ label, ...inputProps }) {
   const dashedLabel = label.replace(" ", "-");
   const switchIdRef = useRef(uniqueId(`switch-${dashedLabel}`));
-  const styles = useStyles2(getStyles);
+  const styles = useStyles2(getStyles$1);
   return /* @__PURE__ */ React.createElement(EditorStack, { gap: 1 }, /* @__PURE__ */ React.createElement("label", { htmlFor: switchIdRef.current, className: styles.switchLabel }, label), /* @__PURE__ */ React.createElement(Switch, { ...inputProps, id: switchIdRef.current }));
 }
-const getStyles = (theme) => {
+const getStyles$1 = (theme) => {
   return {
     switchLabel: css({
       color: theme.colors.text.secondary,

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

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

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

@@ -10,7 +10,7 @@ import '../../QueryEditor/EditorList.js';
 import { EditorStack } from '../../QueryEditor/EditorStack.js';
 import '../../QueryEditor/QueryHeader.js';
 import 'react-virtualized-auto-sizer';
-import 'sql-formatter-plus';
+import 'sql-formatter';
 import '../../SQLEditor/standardSql/language.js';
 import 'uuid';
 import '../../SQLEditor/utils/debugger.js';

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

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

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

@@ -6,7 +6,7 @@ import { useTheme2 } from '@grafana/ui';
 function RawQuery({ query, language, className }) {
   const theme = useTheme2();
-  const styles = getStyles(theme);
+  const styles = getStyles$4(theme);
   const highlighted = Prism.highlight(query, language.grammar, language.name);
   return /* @__PURE__ */ React.createElement(
     "div",
@@ -17,7 +17,7 @@ function RawQuery({ query, language, className }) {
     }
   );
 }
-const getStyles = (theme) => {
+const getStyles$4 = (theme) => {
   return {
     editorField: css({
       fontFamily: theme.typography.fontFamilyMonospace,

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

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

package/dist/esm/components/VisualQueryBuilder/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sources":["../../../../src/components/VisualQueryBuilder/types.ts"],"sourcesContent":["import { type FunctionComponent } from 'react';\n\nimport { type DataSourceApi, type RegistryItem, type SelectableValue, type TimeRange } from '@grafana/data';\n\nexport interface QueryBuilderLabelFilter {\n label: string;\n op: string;\n value: string;\n}\n\nexport interface QueryBuilderOperation {\n id: string;\n params: QueryBuilderOperationParamValue[];\n disabled?: boolean;\n}\n\nexport interface QueryBuilderOperationDefinition<T = any> extends RegistryItem {\n documentation?: string;\n params: QueryBuilderOperationParamDef[];\n defaultParams: QueryBuilderOperationParamValue[];\n category: string;\n hideFromList?: boolean;\n alternativesKey?: string;\n /** Can be used to control operation placement when adding a new operations, lower are placed first /\n orderRank?: number;\n renderer: QueryBuilderOperationRenderer;\n addOperationHandler: QueryBuilderAddOperationHandler<T>;\n paramChangedHandler?: QueryBuilderOnParamChangedHandler;\n explainHandler?: QueryBuilderExplainOperationHandler;\n changeTypeHandler?: (op: QueryBuilderOperation, newDef: QueryBuilderOperationDefinition<T>) => QueryBuilderOperation;\n toggleable?: boolean;\n}\n\ntype QueryBuilderAddOperationHandler<T> = (\n def: QueryBuilderOperationDefinition,\n query: T,\n modeller: VisualQueryModeller\n) => T;\n\ntype QueryBuilderExplainOperationHandler = (op: QueryBuilderOperation, def?: QueryBuilderOperationDefinition) => string;\n\ntype QueryBuilderOnParamChangedHandler = (\n index: number,\n operation: QueryBuilderOperation,\n operationDef: QueryBuilderOperationDefinition\n) => QueryBuilderOperation;\n\ntype QueryBuilderOperationRenderer = (\n model: QueryBuilderOperation,\n def: QueryBuilderOperationDefinition,\n innerQuery: string\n) => string;\n\nexport type QueryBuilderOperationParamValue = string \| number \| boolean;\n\nexport interface QueryBuilderOperationParamDef {\n name: string;\n type: 'string' \| 'number' \| 'boolean';\n options?: string[] \| number[] \| Array<SelectableValue<string>>;\n hideName?: boolean;\n restParam?: boolean;\n optional?: boolean;\n placeholder?: string;\n description?: string;\n minWidth?: number;\n editor?: FunctionComponent<QueryBuilderOperationParamEditorProps>;\n runQueryOnEnter?: boolean;\n}\n\nexport interface QueryBuilderOperationParamEditorProps {\n value?: QueryBuilderOperationParamValue;\n paramDef: QueryBuilderOperationParamDef;\n /* Parameter index */\n index: number;\n operation: QueryBuilderOperation;\n operationId: string;\n query: any;\n datasource: DataSourceApi;\n timeRange?: TimeRange;\n onChange: (index: number, value: QueryBuilderOperationParamValue) => void;\n onRunQuery: () => void;\n queryModeller: VisualQueryModeller;\n}\n\nexport enum QueryEditorMode {\n Code = 'code',\n Builder = 'builder',\n}\n\nexport type QueryStats = {\n bytes: number;\n // The error message displayed in the UI when we cant estimate the size of the query.\n message?: string;\n};\n\nexport interface VisualQueryModeller {\n getOperationsForCategory(category: string): QueryBuilderOperationDefinition[];\n getAlternativeOperations(key: string): QueryBuilderOperationDefinition[];\n getCategories(): string[];\n getOperationDefinition(id: string): QueryBuilderOperationDefinition \| undefined;\n renderQuery(query: VisualQuery, nested?: boolean): string;\n renderLabels(labels: QueryBuilderLabelFilter[]): string;\n innerQueryPlaceholder: string;\n}\n\nexport interface VisualQueryBinary<T> {\n operator: string;\n vectorMatchesType?: 'on' \| 'ignoring';\n vectorMatches?: string;\n query: T;\n}\n\nexport const BINARY_OPERATIONS_KEY = 'Binary operations';\n\nexport interface VisualQuery {\n metric?: string;\n labels: QueryBuilderLabelFilter[];\n operations: QueryBuilderOperation[];\n binaryQueries?: Array<VisualQueryBinary<VisualQuery>>;\n}\n"],"names":["QueryEditorMode"],"mappings":";;;~~AAoFY~~,~~IAAA~~,eAAA,qBAAAA,~~gBAAL~~,~~KAAA~~;AACL,EAAAA,iBAAA,~~MAAO~~,CAAA,~~GAAA~~,MAAA;AACP,EAAAA,iBAAA,~~SAAU~~,CAAA,~~GAAA~~,SAAA;AAFA,~~EAAAA~~,OAAAA,gBAAAA;AAAA,CAAA,EAAA,eAAA,IAAA,EAAA;AA4BL,MAAM,~~qBAAwB~~,~~GAAA~~;;;;"}
1	+ {"version":3,"file":"types.js","sources":["../../../../src/components/VisualQueryBuilder/types.ts"],"sourcesContent":["import { type FunctionComponent } from 'react';\n\nimport { type DataSourceApi, type RegistryItem, type SelectableValue, type TimeRange } from '@grafana/data';\n\nexport interface QueryBuilderLabelFilter {\n label: string;\n op: string;\n value: string;\n}\n\nexport interface QueryBuilderOperation {\n id: string;\n params: QueryBuilderOperationParamValue[];\n disabled?: boolean;\n}\n\nexport interface QueryBuilderOperationDefinition<T = any> extends RegistryItem {\n documentation?: string;\n params: QueryBuilderOperationParamDef[];\n defaultParams: QueryBuilderOperationParamValue[];\n category: string;\n hideFromList?: boolean;\n alternativesKey?: string;\n /** Can be used to control operation placement when adding a new operations, lower are placed first /\n orderRank?: number;\n renderer: QueryBuilderOperationRenderer;\n addOperationHandler: QueryBuilderAddOperationHandler<T>;\n paramChangedHandler?: QueryBuilderOnParamChangedHandler;\n explainHandler?: QueryBuilderExplainOperationHandler;\n changeTypeHandler?: (op: QueryBuilderOperation, newDef: QueryBuilderOperationDefinition<T>) => QueryBuilderOperation;\n toggleable?: boolean;\n}\n\ntype QueryBuilderAddOperationHandler<T> = (\n def: QueryBuilderOperationDefinition,\n query: T,\n modeller: VisualQueryModeller\n) => T;\n\ntype QueryBuilderExplainOperationHandler = (op: QueryBuilderOperation, def?: QueryBuilderOperationDefinition) => string;\n\ntype QueryBuilderOnParamChangedHandler = (\n index: number,\n operation: QueryBuilderOperation,\n operationDef: QueryBuilderOperationDefinition\n) => QueryBuilderOperation;\n\ntype QueryBuilderOperationRenderer = (\n model: QueryBuilderOperation,\n def: QueryBuilderOperationDefinition,\n innerQuery: string\n) => string;\n\nexport type QueryBuilderOperationParamValue = string \| number \| boolean;\n\nexport interface QueryBuilderOperationParamDef {\n name: string;\n type: 'string' \| 'number' \| 'boolean';\n options?: string[] \| number[] \| Array<SelectableValue<string>>;\n hideName?: boolean;\n restParam?: boolean;\n optional?: boolean;\n placeholder?: string;\n description?: string;\n minWidth?: number;\n editor?: FunctionComponent<QueryBuilderOperationParamEditorProps>;\n runQueryOnEnter?: boolean;\n}\n\nexport interface QueryBuilderOperationParamEditorProps {\n value?: QueryBuilderOperationParamValue;\n paramDef: QueryBuilderOperationParamDef;\n /* Parameter index */\n index: number;\n operation: QueryBuilderOperation;\n operationId: string;\n query: any;\n datasource: DataSourceApi;\n timeRange?: TimeRange;\n onChange: (index: number, value: QueryBuilderOperationParamValue) => void;\n onRunQuery: () => void;\n queryModeller: VisualQueryModeller;\n}\n\nexport enum QueryEditorMode {\n Code = 'code',\n Builder = 'builder',\n}\n\nexport type QueryStats = {\n bytes: number;\n // The error message displayed in the UI when we cant estimate the size of the query.\n message?: string;\n};\n\nexport interface VisualQueryModeller {\n getOperationsForCategory(category: string): QueryBuilderOperationDefinition[];\n getAlternativeOperations(key: string): QueryBuilderOperationDefinition[];\n getCategories(): string[];\n getOperationDefinition(id: string): QueryBuilderOperationDefinition \| undefined;\n renderQuery(query: VisualQuery, nested?: boolean): string;\n renderLabels(labels: QueryBuilderLabelFilter[]): string;\n innerQueryPlaceholder: string;\n}\n\nexport interface VisualQueryBinary<T> {\n operator: string;\n vectorMatchesType?: 'on' \| 'ignoring';\n vectorMatches?: string;\n query: T;\n}\n\nexport const BINARY_OPERATIONS_KEY = 'Binary operations';\n\nexport interface VisualQuery {\n metric?: string;\n labels: QueryBuilderLabelFilter[];\n operations: QueryBuilderOperation[];\n binaryQueries?: Array<VisualQueryBinary<VisualQuery>>;\n}\n"],"names":["QueryEditorMode"],"mappings":";;;AAoFO,IAAK,eAAA,qBAAAA,gBAAAA,KAAL;AACL,EAAAA,iBAAA,MAAA,CAAA,GAAO,MAAA;AACP,EAAAA,iBAAA,SAAA,CAAA,GAAU,SAAA;AAFA,EAAA,OAAAA,gBAAAA;AAAA,CAAA,EAAA,eAAA,IAAA,EAAA;AA4BL,MAAM,qBAAA,GAAwB;;;;"}

package/dist/esm/datasource/SqlDatasource.js CHANGED Viewed

@@ -5,20 +5,20 @@ import { DataSourceWithBackend, getTemplateSrv, getBackendSrv, toDataQueryRespon
 import { MACRO_NAMES } from './constants.js';
 import { QueryFormat } from '../components/QueryEditor/types.js';
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
 class SqlDatasource extends DataSourceWithBackend {
   constructor(instanceSettings, templateSrv = getTemplateSrv()) {
     super(instanceSettings);
     this.templateSrv = templateSrv;
-    __publicField(this, "id");
-    __publicField(this, "name");
-    __publicField(this, "interval");
-    __publicField(this, "db");
-    __publicField(this, "dataset");
-    __publicField(this, "annotations", {});
-    __publicField(this, "interpolateVariable", (value, variable) => {
+    __publicField$3(this, "id");
+    __publicField$3(this, "name");
+    __publicField$3(this, "interval");
+    __publicField$3(this, "db");
+    __publicField$3(this, "dataset");
+    __publicField$3(this, "annotations", {});
+    __publicField$3(this, "interpolateVariable", (value, variable) => {
       if (typeof value === "string") {
         if (variable.multi || variable.includeAll) {
           const result = this.getQueryModel().quoteLiteral(value);
@@ -89,7 +89,7 @@ class SqlDatasource extends DataSourceWithBackend {
     return this.getResponseParser().transformMetricFindResponse(response);
   }
   async runSql(query, options) {
-    const frame = await this.runMetaQuery({ rawSql: query, format: QueryFormat.Table, refId: options == null ? undefined : options.refId }, options);
+    const frame = await this.runMetaQuery({ rawSql: query, format: QueryFormat.Table, refId: options == null ? void 0 : options.refId }, options);
     return new DataFrameView(frame);
   }
   runMetaQuery(request, options) {
@@ -101,8 +101,8 @@ class SqlDatasource extends DataSourceWithBackend {
         url: "/api/ds/query",
         method: "POST",
         data: {
-          from: (_a = options == null ? undefined : options.range) == null ? undefined : _a.from.valueOf().toString(),
-          to: (_b = options == null ? undefined : options.range) == null ? undefined : _b.to.valueOf().toString(),
+          from: (_a = options == null ? void 0 : options.range) == null ? void 0 : _a.from.valueOf().toString(),
+          to: (_b = options == null ? void 0 : options.range) == null ? void 0 : _b.to.valueOf().toString(),
           queries
         },
         requestId: refId
@@ -145,7 +145,7 @@ class SqlDatasource extends DataSourceWithBackend {
   targetContainsTemplate(target) {
     let queryWithoutMacros = target.rawSql;
     MACRO_NAMES.forEach((value) => {
-      queryWithoutMacros = (queryWithoutMacros == null ? undefined : queryWithoutMacros.replace(value, "")) || "";
+      queryWithoutMacros = (queryWithoutMacros == null ? void 0 : queryWithoutMacros.replace(value, "")) || "";
     });
     return this.templateSrv.containsTemplate(queryWithoutMacros);
   }