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/LabelFilterItem.js CHANGED Viewed

@@ -26,7 +26,7 @@ function LabelFilterItem({
   const [labelValuesMenuOpen, setLabelValuesMenuOpen] = useState(false);
   const isMultiSelect = (operator = item.op) => {
     var _a2;
-    return (_a2 = operators.find((op) => op.label === operator)) == null ? undefined : _a2.isMultiValue;
+    return (_a2 = operators.find((op) => op.label === operator)) == null ? void 0 : _a2.isMultiValue;
   };
   const getSelectOptionsFromString = (item2) => {
     if (item2) {
@@ -39,12 +39,12 @@ function LabelFilterItem({
   };
   const getOptions = () => {
     const labelValues = state.labelValues ? [...state.labelValues] : [];
-    const selectedOptions = getSelectOptionsFromString(item == null ? undefined : item.value).map(toOption);
+    const selectedOptions = getSelectOptionsFromString(item == null ? void 0 : item.value).map(toOption);
     return uniqBy([...selectedOptions, ...labelValues], "value");
   };
   const isConflicting = isConflictingLabelFilter(item, items);
   const { current: id } = useRef(v4());
-  return /* @__PURE__ */ React.createElement("div", { "data-testid": "visual-query-builder-dimensions-filter-item" }, /* @__PURE__ */ React.createElement(InlineField, { error: CONFLICTING_LABEL_FILTER_ERROR_MESSAGE, invalid: isConflicting ? true : undefined }, /* @__PURE__ */ React.createElement(InputGroup, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { "data-testid": "visual-query-builder-dimensions-filter-item" }, /* @__PURE__ */ React.createElement(InlineField, { error: CONFLICTING_LABEL_FILTER_ERROR_MESSAGE, invalid: isConflicting ? true : void 0 }, /* @__PURE__ */ React.createElement(InputGroup, null, /* @__PURE__ */ React.createElement(
     Select,
     {
       placeholder: "Select label",
@@ -57,7 +57,7 @@ function LabelFilterItem({
         setState({ isLoadingLabelNames: true });
         const labelNames = await onGetLabelNames(item);
         setLabelNamesMenuOpen(true);
-        setState({ labelNames, isLoadingLabelNames: undefined });
+        setState({ labelNames, isLoadingLabelNames: void 0 });
       },
       onCloseMenu: () => {
         setLabelNamesMenuOpen(false);
@@ -89,7 +89,7 @@ function LabelFilterItem({
           onChange({
             ...item,
             op: change.value,
-            value: isMultiSelect(change.value) ? item.value : getSelectOptionsFromString(item == null ? undefined : item.value)[0]
+            value: isMultiSelect(change.value) ? item.value : getSelectOptionsFromString(item == null ? void 0 : item.value)[0]
           });
         }
       },
@@ -102,7 +102,7 @@ function LabelFilterItem({
       "data-testid": selectors.components.QueryBuilder.valueSelect,
       inputId: `visual-query-builder-dimensions-filter-item-value-${id}`,
       width: "auto",
-      value: isMultiSelect() ? getSelectOptionsFromString(item == null ? undefined : item.value).map(toOption) : getSelectOptionsFromString(item == null ? undefined : item.value).map(toOption)[0],
+      value: isMultiSelect() ? getSelectOptionsFromString(item == null ? void 0 : item.value).map(toOption) : getSelectOptionsFromString(item == null ? void 0 : item.value).map(toOption)[0],
       allowCustomValue: true,
       onOpenMenu: async () => {
         setState({ isLoadingLabelValues: true });
@@ -110,7 +110,7 @@ function LabelFilterItem({
         setState({
           ...state,
           labelValues,
-          isLoadingLabelValues: undefined
+          isLoadingLabelValues: void 0
         });
         setLabelValuesMenuOpen(true);
       },
@@ -134,9 +134,9 @@ function LabelFilterItem({
             if (change2.value) {
               return change2.value;
             } else {
-              return undefined;
+              return void 0;
             }
-          }).filter((val) => val !== undefined).join(multiValueSeparator);
+          }).filter((val) => val !== void 0).join(multiValueSeparator);
           onChange({ ...item, value: changes, op: (_b = item.op) != null ? _b : defaultOp });
         }
       },
@@ -163,10 +163,10 @@ function isConflictingLabelFilter(newLabel, labels) {
   );
   const conflict = candidates.some((candidate) => {
     var _a, _b;
-    if (operationIsNegative && ((_a = candidate == null ? undefined : candidate.op) == null ? undefined : _a.toString().startsWith("!")) === false) {
+    if (operationIsNegative && ((_a = candidate == null ? void 0 : candidate.op) == null ? void 0 : _a.toString().startsWith("!")) === false) {
       return true;
     }
-    if (operationIsNegative === false && ((_b = candidate == null ? undefined : candidate.op) == null ? undefined : _b.toString().startsWith("!"))) {
+    if (operationIsNegative === false && ((_b = candidate == null ? void 0 : candidate.op) == null ? void 0 : _b.toString().startsWith("!"))) {
       return true;
     }
     return false;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"LabelFilterItem.js","sources":["../../../../../src/components/VisualQueryBuilder/components/LabelFilterItem.tsx"],"sourcesContent":["import { uniqBy } from 'lodash';\nimport React, { useRef, useState } from 'react';\nimport { v4 } from 'uuid';\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { InlineField, Select } from '@grafana/ui';\nimport { type QueryBuilderLabelFilter } from '../types';\nimport { InputGroup } from '../../QueryEditor/InputGroup';\nimport { AccessoryButton } from '../../QueryEditor/AccessoryButton';\n\nconst CONFLICTING_LABEL_FILTER_ERROR_MESSAGE = 'You have conflicting label filters';\ninterface Props {\n defaultOp: string;\n item: Partial<QueryBuilderLabelFilter>;\n items: Array<Partial<QueryBuilderLabelFilter>>;\n onChange: (value: Partial<QueryBuilderLabelFilter>) => void;\n onGetLabelNames: (forLabel: Partial<QueryBuilderLabelFilter>) => Promise<Array<SelectableValue<string>>>;\n onGetLabelValues: (forLabel: Partial<QueryBuilderLabelFilter>) => Promise<Array<SelectableValue<string>>>;\n onDelete: () => void;\n invalidLabel?: boolean;\n invalidValue?: boolean;\n multiValueSeparator?: string;\n}\n\nexport function LabelFilterItem({\n item,\n items,\n defaultOp,\n onChange,\n onDelete,\n onGetLabelNames,\n onGetLabelValues,\n invalidLabel,\n invalidValue,\n multiValueSeparator = '\|',\n}: Props) {\n const [state, setState] = useState<{\n labelNames?: Array<SelectableValue<string>>;\n labelValues?: Array<SelectableValue<string>>;\n isLoadingLabelNames?: boolean;\n isLoadingLabelValues?: boolean;\n }>({});\n // there's a bug in react-select where the menu doesn't recalculate its position when the options are loaded asynchronously\n // see https://github.com/grafana/grafana/issues/63558\n // instead, we explicitly control the menu visibility and prevent showing it until the options have fully loaded\n const [labelNamesMenuOpen, setLabelNamesMenuOpen] = useState(false);\n const [labelValuesMenuOpen, setLabelValuesMenuOpen] = useState(false);\n\n const isMultiSelect = (operator = item.op) => {\n return operators.find((op) => op.label === operator)?.isMultiValue;\n };\n\n const getSelectOptionsFromString = (item?: string): string[] => {\n if (item) {\n if (item.indexOf(multiValueSeparator) > 0) {\n return item.split(multiValueSeparator);\n }\n return [item];\n }\n return [];\n };\n\n const getOptions = (): Array<SelectableValue<string>> => {\n const labelValues = state.labelValues ? [...state.labelValues] : [];\n const selectedOptions = getSelectOptionsFromString(item?.value).map(toOption);\n\n // Remove possible duplicated values\n return uniqBy([...selectedOptions, ...labelValues], 'value');\n };\n\n const isConflicting = isConflictingLabelFilter(item, items);\n const { current: id } = useRef(v4());\n\n return (\n <div data-testid=\"visual-query-builder-dimensions-filter-item\">\n <InlineField error={CONFLICTING_LABEL_FILTER_ERROR_MESSAGE} invalid={isConflicting ? true : undefined}>\n <InputGroup>\n <Select<string>\n placeholder=\"Select label\"\n data-testid={selectors.components.QueryBuilder.labelSelect}\n inputId={`visual-query-builder-dimensions-filter-item-key-${id}`}\n width=\"auto\"\n value={item.label ? toOption(item.label) : null}\n allowCustomValue\n onOpenMenu={async () => {\n setState({ isLoadingLabelNames: true });\n const labelNames = await onGetLabelNames(item);\n setLabelNamesMenuOpen(true);\n setState({ labelNames, isLoadingLabelNames: undefined });\n }}\n onCloseMenu={() => {\n setLabelNamesMenuOpen(false);\n }}\n isOpen={labelNamesMenuOpen}\n isLoading={state.isLoadingLabelNames}\n options={state.labelNames}\n onChange={(change) => {\n if (change.value) {\n onChange({\n ...item,\n op: item.op ?? defaultOp,\n label: change.value,\n });\n }\n }}\n invalid={isConflicting \|\| invalidLabel}\n />\n\n <Select<string>\n data-testid={selectors.components.QueryBuilder.matchOperatorSelect}\n value={toOption(item.op ?? defaultOp)}\n options={operators}\n width=\"auto\"\n onChange={(change) => {\n if (change.value) {\n onChange({\n ...item,\n op: change.value,\n value: isMultiSelect(change.value) ? item.value : getSelectOptionsFromString(item?.value)[0],\n });\n }\n }}\n invalid={isConflicting}\n />\n\n <Select<string>\n placeholder=\"Select value\"\n data-testid={selectors.components.QueryBuilder.valueSelect}\n inputId={`visual-query-builder-dimensions-filter-item-value-${id}`}\n width=\"auto\"\n value={\n isMultiSelect()\n ? getSelectOptionsFromString(item?.value).map(toOption)\n : getSelectOptionsFromString(item?.value).map(toOption)[0]\n }\n allowCustomValue\n onOpenMenu={async () => {\n setState({ isLoadingLabelValues: true });\n const labelValues = await onGetLabelValues(item);\n setState({\n ...state,\n labelValues,\n isLoadingLabelValues: undefined,\n });\n setLabelValuesMenuOpen(true);\n }}\n onCloseMenu={() => {\n setLabelValuesMenuOpen(false);\n }}\n isOpen={labelValuesMenuOpen}\n isMulti={isMultiSelect()}\n isLoading={state.isLoadingLabelValues}\n options={getOptions()}\n onChange={(change) => {\n if (change.value) {\n onChange({\n ...item,\n value: change.value,\n op: item.op ?? defaultOp,\n });\n } else {\n // otherwise, we're dealing with a multi-value select which is array of options\n const changes = change\n .map((change: SelectableValue<string>) => {\n if (change.value) {\n return change.value;\n } else {\n return undefined;\n }\n })\n .filter((val: string \| undefined) => val !== undefined)\n .join(multiValueSeparator);\n onChange({ ...item, value: changes, op: item.op ?? defaultOp });\n }\n }}\n invalid={isConflicting \|\| invalidValue}\n />\n <AccessoryButton aria-label=\"remove\" icon=\"times\" variant=\"secondary\" onClick={onDelete} />\n </InputGroup>\n </InlineField>\n </div>\n );\n}\n\nconst operators = [\n { label: '=', value: '=', description: 'Equals', isMultiValue: false },\n { label: '!=', value: '!=', description: 'Does not equal', isMultiValue: false },\n { label: '=~', value: '=~', description: 'Matches regex', isMultiValue: true },\n { label: '!~', value: '!~', description: 'Does not match regex', isMultiValue: true },\n];\n\nexport function isConflictingLabelFilter(\n newLabel: Partial<QueryBuilderLabelFilter>,\n labels: Array<Partial<QueryBuilderLabelFilter>>\n): boolean {\n if (!newLabel.label \|\| !newLabel.op \|\| !newLabel.value) {\n return false;\n }\n\n if (labels.length < 2) {\n return false;\n }\n\n const operationIsNegative = newLabel.op.toString().startsWith('!');\n\n const candidates = labels.filter(\n (label) => label.label === newLabel.label && label.value === newLabel.value && label.op !== newLabel.op\n );\n\n const conflict = candidates.some((candidate) => {\n if (operationIsNegative && candidate?.op?.toString().startsWith('!') === false) {\n return true;\n }\n if (operationIsNegative === false && candidate?.op?.toString().startsWith('!')) {\n return true;\n }\n return false;\n });\n\n return conflict;\n}\n"],"names":["_a","item","change"],"mappings":"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"}
1	+ {"version":3,"file":"LabelFilterItem.js","sources":["../../../../../src/components/VisualQueryBuilder/components/LabelFilterItem.tsx"],"sourcesContent":["import { uniqBy } from 'lodash';\nimport React, { useRef, useState } from 'react';\nimport { v4 } from 'uuid';\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { InlineField, Select } from '@grafana/ui';\nimport { type QueryBuilderLabelFilter } from '../types';\nimport { InputGroup } from '../../QueryEditor/InputGroup';\nimport { AccessoryButton } from '../../QueryEditor/AccessoryButton';\n\nconst CONFLICTING_LABEL_FILTER_ERROR_MESSAGE = 'You have conflicting label filters';\ninterface Props {\n defaultOp: string;\n item: Partial<QueryBuilderLabelFilter>;\n items: Array<Partial<QueryBuilderLabelFilter>>;\n onChange: (value: Partial<QueryBuilderLabelFilter>) => void;\n onGetLabelNames: (forLabel: Partial<QueryBuilderLabelFilter>) => Promise<Array<SelectableValue<string>>>;\n onGetLabelValues: (forLabel: Partial<QueryBuilderLabelFilter>) => Promise<Array<SelectableValue<string>>>;\n onDelete: () => void;\n invalidLabel?: boolean;\n invalidValue?: boolean;\n multiValueSeparator?: string;\n}\n\nexport function LabelFilterItem({\n item,\n items,\n defaultOp,\n onChange,\n onDelete,\n onGetLabelNames,\n onGetLabelValues,\n invalidLabel,\n invalidValue,\n multiValueSeparator = '\|',\n}: Props) {\n const [state, setState] = useState<{\n labelNames?: Array<SelectableValue<string>>;\n labelValues?: Array<SelectableValue<string>>;\n isLoadingLabelNames?: boolean;\n isLoadingLabelValues?: boolean;\n }>({});\n // there's a bug in react-select where the menu doesn't recalculate its position when the options are loaded asynchronously\n // see https://github.com/grafana/grafana/issues/63558\n // instead, we explicitly control the menu visibility and prevent showing it until the options have fully loaded\n const [labelNamesMenuOpen, setLabelNamesMenuOpen] = useState(false);\n const [labelValuesMenuOpen, setLabelValuesMenuOpen] = useState(false);\n\n const isMultiSelect = (operator = item.op) => {\n return operators.find((op) => op.label === operator)?.isMultiValue;\n };\n\n const getSelectOptionsFromString = (item?: string): string[] => {\n if (item) {\n if (item.indexOf(multiValueSeparator) > 0) {\n return item.split(multiValueSeparator);\n }\n return [item];\n }\n return [];\n };\n\n const getOptions = (): Array<SelectableValue<string>> => {\n const labelValues = state.labelValues ? [...state.labelValues] : [];\n const selectedOptions = getSelectOptionsFromString(item?.value).map(toOption);\n\n // Remove possible duplicated values\n return uniqBy([...selectedOptions, ...labelValues], 'value');\n };\n\n const isConflicting = isConflictingLabelFilter(item, items);\n const { current: id } = useRef(v4());\n\n return (\n <div data-testid=\"visual-query-builder-dimensions-filter-item\">\n <InlineField error={CONFLICTING_LABEL_FILTER_ERROR_MESSAGE} invalid={isConflicting ? true : undefined}>\n <InputGroup>\n <Select<string>\n placeholder=\"Select label\"\n data-testid={selectors.components.QueryBuilder.labelSelect}\n inputId={`visual-query-builder-dimensions-filter-item-key-${id}`}\n width=\"auto\"\n value={item.label ? toOption(item.label) : null}\n allowCustomValue\n onOpenMenu={async () => {\n setState({ isLoadingLabelNames: true });\n const labelNames = await onGetLabelNames(item);\n setLabelNamesMenuOpen(true);\n setState({ labelNames, isLoadingLabelNames: undefined });\n }}\n onCloseMenu={() => {\n setLabelNamesMenuOpen(false);\n }}\n isOpen={labelNamesMenuOpen}\n isLoading={state.isLoadingLabelNames}\n options={state.labelNames}\n onChange={(change) => {\n if (change.value) {\n onChange({\n ...item,\n op: item.op ?? defaultOp,\n label: change.value,\n });\n }\n }}\n invalid={isConflicting \|\| invalidLabel}\n />\n\n <Select<string>\n data-testid={selectors.components.QueryBuilder.matchOperatorSelect}\n value={toOption(item.op ?? defaultOp)}\n options={operators}\n width=\"auto\"\n onChange={(change) => {\n if (change.value) {\n onChange({\n ...item,\n op: change.value,\n value: isMultiSelect(change.value) ? item.value : getSelectOptionsFromString(item?.value)[0],\n });\n }\n }}\n invalid={isConflicting}\n />\n\n <Select<string>\n placeholder=\"Select value\"\n data-testid={selectors.components.QueryBuilder.valueSelect}\n inputId={`visual-query-builder-dimensions-filter-item-value-${id}`}\n width=\"auto\"\n value={\n isMultiSelect()\n ? getSelectOptionsFromString(item?.value).map(toOption)\n : getSelectOptionsFromString(item?.value).map(toOption)[0]\n }\n allowCustomValue\n onOpenMenu={async () => {\n setState({ isLoadingLabelValues: true });\n const labelValues = await onGetLabelValues(item);\n setState({\n ...state,\n labelValues,\n isLoadingLabelValues: undefined,\n });\n setLabelValuesMenuOpen(true);\n }}\n onCloseMenu={() => {\n setLabelValuesMenuOpen(false);\n }}\n isOpen={labelValuesMenuOpen}\n isMulti={isMultiSelect()}\n isLoading={state.isLoadingLabelValues}\n options={getOptions()}\n onChange={(change) => {\n if (change.value) {\n onChange({\n ...item,\n value: change.value,\n op: item.op ?? defaultOp,\n });\n } else {\n // otherwise, we're dealing with a multi-value select which is array of options\n const changes = change\n .map((change: SelectableValue<string>) => {\n if (change.value) {\n return change.value;\n } else {\n return undefined;\n }\n })\n .filter((val: string \| undefined) => val !== undefined)\n .join(multiValueSeparator);\n onChange({ ...item, value: changes, op: item.op ?? defaultOp });\n }\n }}\n invalid={isConflicting \|\| invalidValue}\n />\n <AccessoryButton aria-label=\"remove\" icon=\"times\" variant=\"secondary\" onClick={onDelete} />\n </InputGroup>\n </InlineField>\n </div>\n );\n}\n\nconst operators = [\n { label: '=', value: '=', description: 'Equals', isMultiValue: false },\n { label: '!=', value: '!=', description: 'Does not equal', isMultiValue: false },\n { label: '=~', value: '=~', description: 'Matches regex', isMultiValue: true },\n { label: '!~', value: '!~', description: 'Does not match regex', isMultiValue: true },\n];\n\nexport function isConflictingLabelFilter(\n newLabel: Partial<QueryBuilderLabelFilter>,\n labels: Array<Partial<QueryBuilderLabelFilter>>\n): boolean {\n if (!newLabel.label \|\| !newLabel.op \|\| !newLabel.value) {\n return false;\n }\n\n if (labels.length < 2) {\n return false;\n }\n\n const operationIsNegative = newLabel.op.toString().startsWith('!');\n\n const candidates = labels.filter(\n (label) => label.label === newLabel.label && label.value === newLabel.value && label.op !== newLabel.op\n );\n\n const conflict = candidates.some((candidate) => {\n if (operationIsNegative && candidate?.op?.toString().startsWith('!') === false) {\n return true;\n }\n if (operationIsNegative === false && candidate?.op?.toString().startsWith('!')) {\n return true;\n }\n return false;\n });\n\n return conflict;\n}\n"],"names":["_a","item","change"],"mappings":"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"}

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

@@ -27,7 +27,7 @@ function LabelFilters({
   const onLabelsChange = (newItems) => {
     setItems(newItems);
     const newLabels = newItems.filter(
-      (item) => item.label !== undefined && item.value !== undefined
+      (item) => item.label !== void 0 && item.value !== void 0
     );
     if (!isEqual(newLabels, labelsFilters)) {
       onChange(newLabels);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"LabelFilters.js","sources":["../../../../../src/components/VisualQueryBuilder/components/LabelFilters.tsx"],"sourcesContent":["import { isEqual } from 'lodash';\nimport React, { useEffect, useState } from 'react';\n\nimport { type SelectableValue } from '@grafana/data';\n\nimport { type QueryBuilderLabelFilter } from '../types';\n\nimport { EditorField } from '../../QueryEditor/EditorField';\nimport { EditorFieldGroup } from '../../QueryEditor/EditorFieldGroup';\nimport { EditorList } from '../../QueryEditor/EditorList';\nimport { LabelFilterItem } from './LabelFilterItem';\n\nexport const MISSING_LABEL_FILTER_ERROR_MESSAGE = 'Select at least 1 label filter (label and value)';\n\nexport interface Props {\n labelsFilters: QueryBuilderLabelFilter[];\n onChange: (labelFilters: QueryBuilderLabelFilter[]) => void;\n onGetLabelNames: (forLabel: Partial<QueryBuilderLabelFilter>) => Promise<SelectableValue[]>;\n onGetLabelValues: (forLabel: Partial<QueryBuilderLabelFilter>) => Promise<SelectableValue[]>;\n /** If set to true, component will show error message until at least 1 filter is selected */\n labelFilterRequired?: boolean;\n multiValueSeparator?: string;\n}\n\nexport function LabelFilters({\n labelsFilters,\n onChange,\n onGetLabelNames,\n onGetLabelValues,\n labelFilterRequired,\n multiValueSeparator,\n}: Props) {\n const defaultOp = '=';\n const [items, setItems] = useState<Array<Partial<QueryBuilderLabelFilter>>>([{ op: defaultOp }]);\n\n useEffect(() => {\n if (labelsFilters.length > 0) {\n setItems(labelsFilters);\n } else {\n setItems([{ op: defaultOp }]);\n }\n }, [labelsFilters]);\n\n const onLabelsChange = (newItems: Array<Partial<QueryBuilderLabelFilter>>) => {\n setItems(newItems);\n\n // Extract full label filters with both label & value\n const newLabels = newItems.filter(\n (item): item is QueryBuilderLabelFilter => item.label !== undefined && item.value !== undefined\n );\n if (!isEqual(newLabels, labelsFilters)) {\n onChange(newLabels);\n }\n };\n\n const hasLabelFilter = items.some((item) => item.label && item.value);\n\n return (\n <EditorFieldGroup>\n <EditorField\n label=\"Label filters\"\n error={MISSING_LABEL_FILTER_ERROR_MESSAGE}\n invalid={labelFilterRequired && !hasLabelFilter}\n >\n <EditorList\n items={items}\n onChange={onLabelsChange}\n renderItem={(item: Partial<QueryBuilderLabelFilter>, onChangeItem, onDelete) => (\n <LabelFilterItem\n item={item}\n items={items}\n defaultOp={defaultOp}\n onChange={onChangeItem}\n onDelete={onDelete}\n onGetLabelNames={onGetLabelNames}\n onGetLabelValues={onGetLabelValues}\n invalidLabel={labelFilterRequired && !item.label}\n invalidValue={labelFilterRequired && !item.value}\n multiValueSeparator={multiValueSeparator}\n />\n )}\n />\n </EditorField>\n </EditorFieldGroup>\n );\n}\n"],"names":[],"mappings":";;;;;;;;AAYO,MAAM,~~kCAAqC~~,~~GAAA~~;AAY3C,SAAS,~~YAAa~~,~~CAAA~~;AAAA,EAC3B,aAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,mBAAA;AAAA,EACA;AACF,~~CAAU~~,~~EAAA~~;AACR,EAAA,MAAM,~~SAAY~~,~~GAAA~~,GAAA;AAClB,~~EAAM~~,~~MAAA~~,CAAC,~~KAAO~~,~~EAAA~~,QAAQ,~~CAAI~~,~~GAAA~~,QAAA,CAAkD,CAAC,EAAE,EAAA,EAAI,~~SAAU~~,~~EAAC~~,CAAC,CAAA;AAE/F,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,~~IAAA,~~aAAA,CAAc,SAAS,~~CAAG~~,~~EAAA~~;AAC5B,MAAA,QAAA,CAAS,aAAa,CAAA;AAAA,~~KACjB~~,~~MAAA~~;AACL,MAAA,QAAA,CAAS,CAAC,EAAE,EAAI,~~EAAA,~~SAAA,EAAW,CAAC,CAAA;AAAA;~~AAC9B~~,~~GACF~~,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,~~EAAM~~,~~MAAA~~,cAAA,GAAiB,CAAC,~~QAAsD~~,~~KAAA~~;AAC5E,IAAA,QAAA,CAAS,QAAQ,CAAA;AAGjB,IAAA,MAAM,YAAY,~~QAAS~~,~~CAAA~~,MAAA;AAAA,MACzB,CAAC,~~IAA0C~~,~~KAAA~~,IAAA,CAAK,KAAU,~~KAAA~~,~~SAAA,~~IAAa,KAAK,KAAU~~,KAAA~~;AAAA,KACxF;AACA,IAAA,IAAI,CAAC,OAAA,CAAQ,~~SAAW~~,~~EAAA~~,aAAa,~~CAAG~~,~~EAAA~~;AACtC,MAAA,QAAA,CAAS,SAAS,CAAA;AAAA;~~AACpB~~,~~GACF~~;AAEA,~~EAAM~~,~~MAAA~~,cAAA,GAAiB,MAAM,~~IAAK~~,~~CAAA~~,CAAC,SAAS,~~IAAK~~,~~CAAA~~,KAAA,IAAS,KAAK,KAAK,CAAA;AAEpE,EAAA,2CACG,~~gBACC~~,EAAA,IAAA,~~kBAAA~~,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,~~KAAM~~,~~EAAA~~,eAAA;AAAA,MACN,~~KAAO~~,~~EAAA~~,kCAAA;AAAA,MACP,OAAA,EAAS,uBAAuB,CAAC;AAAA,KAAA;AAAA,oBAEjC,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,KAAA;AAAA,QACA,~~QAAU~~,~~EAAA~~,cAAA;AAAA,QACV,~~UAAY~~,~~EAAA~~,CAAC,~~IAAwC~~,~~EAAA~~,YAAA,EAAc,~~QACjE~~,~~qBAAA~~,KAAA,CAAA,aAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,IAAA;AAAA,YACA,KAAA;AAAA,YACA,SAAA;AAAA,YACA,~~QAAU~~,~~EAAA~~,YAAA;AAAA,YACV,QAAA;AAAA,YACA,eAAA;AAAA,YACA,gBAAA;AAAA,YACA,YAAA,EAAc,~~mBAAuB~~,~~IAAA~~,CAAC,~~IAAK~~,~~CAAA~~,KAAA;AAAA,YAC3C,YAAA,EAAc,~~mBAAuB~~,~~IAAA~~,CAAC,~~IAAK~~,~~CAAA~~,KAAA;AAAA,YAC3C;AAAA;AAAA;AACF;AAAA;AAEJ,GAEJ,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"LabelFilters.js","sources":["../../../../../src/components/VisualQueryBuilder/components/LabelFilters.tsx"],"sourcesContent":["import { isEqual } from 'lodash';\nimport React, { useEffect, useState } from 'react';\n\nimport { type SelectableValue } from '@grafana/data';\n\nimport { type QueryBuilderLabelFilter } from '../types';\n\nimport { EditorField } from '../../QueryEditor/EditorField';\nimport { EditorFieldGroup } from '../../QueryEditor/EditorFieldGroup';\nimport { EditorList } from '../../QueryEditor/EditorList';\nimport { LabelFilterItem } from './LabelFilterItem';\n\nexport const MISSING_LABEL_FILTER_ERROR_MESSAGE = 'Select at least 1 label filter (label and value)';\n\nexport interface Props {\n labelsFilters: QueryBuilderLabelFilter[];\n onChange: (labelFilters: QueryBuilderLabelFilter[]) => void;\n onGetLabelNames: (forLabel: Partial<QueryBuilderLabelFilter>) => Promise<SelectableValue[]>;\n onGetLabelValues: (forLabel: Partial<QueryBuilderLabelFilter>) => Promise<SelectableValue[]>;\n /** If set to true, component will show error message until at least 1 filter is selected */\n labelFilterRequired?: boolean;\n multiValueSeparator?: string;\n}\n\nexport function LabelFilters({\n labelsFilters,\n onChange,\n onGetLabelNames,\n onGetLabelValues,\n labelFilterRequired,\n multiValueSeparator,\n}: Props) {\n const defaultOp = '=';\n const [items, setItems] = useState<Array<Partial<QueryBuilderLabelFilter>>>([{ op: defaultOp }]);\n\n useEffect(() => {\n if (labelsFilters.length > 0) {\n setItems(labelsFilters);\n } else {\n setItems([{ op: defaultOp }]);\n }\n }, [labelsFilters]);\n\n const onLabelsChange = (newItems: Array<Partial<QueryBuilderLabelFilter>>) => {\n setItems(newItems);\n\n // Extract full label filters with both label & value\n const newLabels = newItems.filter(\n (item): item is QueryBuilderLabelFilter => item.label !== undefined && item.value !== undefined\n );\n if (!isEqual(newLabels, labelsFilters)) {\n onChange(newLabels);\n }\n };\n\n const hasLabelFilter = items.some((item) => item.label && item.value);\n\n return (\n <EditorFieldGroup>\n <EditorField\n label=\"Label filters\"\n error={MISSING_LABEL_FILTER_ERROR_MESSAGE}\n invalid={labelFilterRequired && !hasLabelFilter}\n >\n <EditorList\n items={items}\n onChange={onLabelsChange}\n renderItem={(item: Partial<QueryBuilderLabelFilter>, onChangeItem, onDelete) => (\n <LabelFilterItem\n item={item}\n items={items}\n defaultOp={defaultOp}\n onChange={onChangeItem}\n onDelete={onDelete}\n onGetLabelNames={onGetLabelNames}\n onGetLabelValues={onGetLabelValues}\n invalidLabel={labelFilterRequired && !item.label}\n invalidValue={labelFilterRequired && !item.value}\n multiValueSeparator={multiValueSeparator}\n />\n )}\n />\n </EditorField>\n </EditorFieldGroup>\n );\n}\n"],"names":[],"mappings":";;;;;;;;AAYO,MAAM,kCAAA,GAAqC;AAY3C,SAAS,YAAA,CAAa;AAAA,EAC3B,aAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,mBAAA;AAAA,EACA;AACF,CAAA,EAAU;AACR,EAAA,MAAM,SAAA,GAAY,GAAA;AAClB,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,QAAA,CAAkD,CAAC,EAAE,EAAA,EAAI,SAAA,EAAW,CAAC,CAAA;AAE/F,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,aAAA,CAAc,SAAS,CAAA,EAAG;AAC5B,MAAA,QAAA,CAAS,aAAa,CAAA;AAAA,IACxB,CAAA,MAAO;AACL,MAAA,QAAA,CAAS,CAAC,EAAE,EAAA,EAAI,SAAA,EAAW,CAAC,CAAA;AAAA,IAC9B;AAAA,EACF,CAAA,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,EAAA,MAAM,cAAA,GAAiB,CAAC,QAAA,KAAsD;AAC5E,IAAA,QAAA,CAAS,QAAQ,CAAA;AAGjB,IAAA,MAAM,YAAY,QAAA,CAAS,MAAA;AAAA,MACzB,CAAC,IAAA,KAA0C,IAAA,CAAK,KAAA,KAAU,MAAA,IAAa,KAAK,KAAA,KAAU;AAAA,KACxF;AACA,IAAA,IAAI,CAAC,OAAA,CAAQ,SAAA,EAAW,aAAa,CAAA,EAAG;AACtC,MAAA,QAAA,CAAS,SAAS,CAAA;AAAA,IACpB;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,cAAA,GAAiB,MAAM,IAAA,CAAK,CAAC,SAAS,IAAA,CAAK,KAAA,IAAS,KAAK,KAAK,CAAA;AAEpE,EAAA,2CACG,gBAAA,EAAA,IAAA,kBACC,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,eAAA;AAAA,MACN,KAAA,EAAO,kCAAA;AAAA,MACP,OAAA,EAAS,uBAAuB,CAAC;AAAA,KAAA;AAAA,oBAEjC,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,KAAA;AAAA,QACA,QAAA,EAAU,cAAA;AAAA,QACV,UAAA,EAAY,CAAC,IAAA,EAAwC,YAAA,EAAc,QAAA,qBACjE,KAAA,CAAA,aAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,IAAA;AAAA,YACA,KAAA;AAAA,YACA,SAAA;AAAA,YACA,QAAA,EAAU,YAAA;AAAA,YACV,QAAA;AAAA,YACA,eAAA;AAAA,YACA,gBAAA;AAAA,YACA,YAAA,EAAc,mBAAA,IAAuB,CAAC,IAAA,CAAK,KAAA;AAAA,YAC3C,YAAA,EAAc,mBAAA,IAAuB,CAAC,IAAA,CAAK,KAAA;AAAA,YAC3C;AAAA;AAAA;AACF;AAAA;AAEJ,GAEJ,CAAA;AAEJ;;;;"}

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

@@ -23,15 +23,15 @@ function OperationEditor({
   const def = queryModeller.getOperationDefinition(operation.id);
   const theme = useTheme2();
   const isConflicting = isConflictingOperation ? isConflictingOperation(operation, query.operations) : false;
-  const styles = getStyles(theme);
+  const styles = getStyles$6(theme);
   if (!def) {
     return /* @__PURE__ */ React.createElement("span", null, "Operation ", operation.id, " not found");
   }
   const isInvalid = (isDragging) => {
     if (isDragging) {
-      return undefined;
+      return void 0;
     }
-    return isConflicting ? true : undefined;
+    return isConflicting ? true : void 0;
   };
   return /* @__PURE__ */ React.createElement(Draggable, { draggableId: `operation-${index}`, index }, (provided, snapshot) => /* @__PURE__ */ React.createElement(
     InlineField,
@@ -62,7 +62,7 @@ function OperationEditor({
     )
   ));
 }
-const getStyles = (theme, isConflicting) => {
+const getStyles$6 = (theme, isConflicting) => {
   return {
     cardWrapper: css({
       alignItems: "stretch"

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

	@@ -1 +1 @@
1	- {"version":3,"file":"OperationEditor.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationEditor.tsx"],"sourcesContent":["import React from 'react';\nimport { css, cx } from '@emotion/css';\nimport { Draggable } from '@hello-pangea/dnd';\n\nimport { type DataSourceApi, type GrafanaTheme2, type TimeRange } from '@grafana/data';\nimport { InlineField, useTheme2 } from '@grafana/ui';\n\nimport { type QueryBuilderOperation, type VisualQuery, type VisualQueryModeller } from '../types';\nimport { OperationEditorBody } from './OperationEditorBody';\n\ninterface Props<T extends VisualQuery> {\n operation: QueryBuilderOperation;\n index: number;\n query: T;\n datasource: DataSourceApi;\n queryModeller: VisualQueryModeller;\n onChange: (index: number, update: QueryBuilderOperation) => void;\n onRemove: (index: number) => void;\n onToggle: (index: number) => void;\n onRunQuery: () => void;\n flash?: boolean;\n highlight?: boolean;\n timeRange?: TimeRange;\n isConflictingOperation?: (operation: QueryBuilderOperation, otherOperations: QueryBuilderOperation[]) => boolean;\n}\n\nexport function OperationEditor<T extends VisualQuery>({\n operation,\n index,\n onRemove,\n onToggle,\n onChange,\n onRunQuery,\n queryModeller,\n query,\n datasource,\n flash,\n highlight,\n timeRange,\n isConflictingOperation,\n}: Props<T>) {\n const def = queryModeller.getOperationDefinition(operation.id);\n\n const theme = useTheme2();\n const isConflicting = isConflictingOperation ? isConflictingOperation(operation, query.operations) : false;\n const styles = getStyles(theme, isConflicting);\n\n if (!def) {\n return <span>Operation {operation.id} not found</span>;\n }\n\n const isInvalid = (isDragging: boolean) => {\n if (isDragging) {\n return undefined;\n }\n\n return isConflicting ? true : undefined;\n };\n\n return (\n <Draggable draggableId={`operation-${index}`} index={index}>\n {(provided, snapshot) => (\n <InlineField\n error={'You have conflicting label filters'}\n invalid={isInvalid(snapshot.isDragging)}\n className={cx(styles.error, styles.cardWrapper)}\n >\n <OperationEditorBody\n provided={provided}\n flash={flash}\n highlight={highlight}\n isConflicting={isConflicting}\n index={index}\n operation={operation}\n definition={def}\n onChange={onChange}\n onRemove={onRemove}\n onToggle={onToggle}\n queryModeller={queryModeller}\n query={query}\n timeRange={timeRange}\n onRunQuery={onRunQuery}\n datasource={datasource}\n />\n </InlineField>\n )}\n </Draggable>\n );\n}\n\nconst getStyles = (theme: GrafanaTheme2, isConflicting: boolean) => {\n return {\n cardWrapper: css({\n alignItems: 'stretch',\n }),\n error: css({\n marginBottom: theme.spacing(1),\n }),\n };\n};\n"],"names":[],"mappings":";;;;;;;AA0BO,SAAS,~~eAAuC~~,~~CAAA~~;AAAA,EACrD,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,~~CAAa~~,~~EAAA~~;AACX,EAAA,MAAM,GAAM,~~GAAA,~~aAAA,CAAc,~~sBAAuB~~,~~CAAA~~,SAAA,CAAU,EAAE,CAAA;AAE7D,EAAA,MAAM,QAAQ,~~SAAU~~,~~EAAA~~;AACxB,EAAA,MAAM,gBAAgB,~~sBAAyB~~,~~GAAA~~,sBAAA,CAAuB,~~SAAW~~,~~EAAA~~,KAAA,CAAM,UAAU,~~CAAI~~,~~GAAA~~,KAAA;AACrG,~~EAAM~~,~~MAAA~~,MAAA,~~GAAS~~,~~SAAU~~,~~CAAA~~,KAAoB,CAAA;AAE7C,EAAA,IAAI,CAAC,~~GAAK~~,~~EAAA~~;AACR,IAAA,~~uBAAQ~~,KAAA,CAAA,aAAA,~~CAAA~~,MAAA,EAAA,IAAA,EAAK,~~YAAW~~,~~EAAA~~,SAAA,CAAU,IAAG,YAAU,CAAA;AAAA;~~AAGjD~~,~~EAAM~~,~~MAAA~~,SAAA,GAAY,CAAC,~~UAAwB~~,~~KAAA~~;AACzC,IAAA,IAAI,~~UAAY~~,~~EAAA~~;AACd,~~MAAO~~,~~OAAA~~,~~SAAA~~;AAAA;~~AAGT~~,IAAA,OAAO,gBAAgB,~~IAAO~~,~~GAAA~~,~~SAAA~~;AAAA,~~GAChC~~;AAEA,~~EACE~~,~~uBAAA~~,KAAA,CAAA,aAAA,CAAC,aAAU,~~WAAa~~,~~EAAA~~,CAAA,UAAA,EAAa,KAAK,~~CAAI~~,CAAA,~~EAAA~~,KAAA,EAAA,EAC3C,CAAC,QAAA,EAAU,~~QACV~~,~~qBAAA~~,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,~~KAAO~~,~~EAAA~~,oCAAA;AAAA,MACP,OAAA,EAAS,~~SAAU~~,~~CAAA~~,QAAA,CAAS,UAAU,CAAA;AAAA,MACtC,~~SAAW~~,~~EAAA~~,EAAA,CAAG,~~MAAO~~,~~CAAA~~,KAAA,EAAO,OAAO,WAAW;AAAA,KAAA;AAAA,oBAE9C,KAAA,CAAA,aAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,~~UAAY~~,~~EAAA~~,GAAA;AAAA,QACZ,QAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,UAAA;AAAA,QACA;AAAA;AAAA;AACF,GAGN,CAAA;AAEJ;AAEA,~~MAAM~~,~~SAAA~~,GAAY,CAAC,KAAA,EAAsB,~~aAA2B~~,~~KAAA~~;AAClE,~~EAAO~~,~~OAAA~~;AAAA,IACL,aAAa,~~GAAI~~,~~CAAA~~;AAAA,MACf,~~UAAY~~,~~EAAA~~;AAAA,KACb,CAAA;AAAA,IACD,OAAO,~~GAAI~~,~~CAAA~~;AAAA,MACT,YAAA,EAAc,~~KAAM~~,~~CAAA~~,OAAA,CAAQ,CAAC;AAAA,KAC9B;AAAA,GACH;AACF,CAAA;;;;"}
1	+ {"version":3,"file":"OperationEditor.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationEditor.tsx"],"sourcesContent":["import React from 'react';\nimport { css, cx } from '@emotion/css';\nimport { Draggable } from '@hello-pangea/dnd';\n\nimport { type DataSourceApi, type GrafanaTheme2, type TimeRange } from '@grafana/data';\nimport { InlineField, useTheme2 } from '@grafana/ui';\n\nimport { type QueryBuilderOperation, type VisualQuery, type VisualQueryModeller } from '../types';\nimport { OperationEditorBody } from './OperationEditorBody';\n\ninterface Props<T extends VisualQuery> {\n operation: QueryBuilderOperation;\n index: number;\n query: T;\n datasource: DataSourceApi;\n queryModeller: VisualQueryModeller;\n onChange: (index: number, update: QueryBuilderOperation) => void;\n onRemove: (index: number) => void;\n onToggle: (index: number) => void;\n onRunQuery: () => void;\n flash?: boolean;\n highlight?: boolean;\n timeRange?: TimeRange;\n isConflictingOperation?: (operation: QueryBuilderOperation, otherOperations: QueryBuilderOperation[]) => boolean;\n}\n\nexport function OperationEditor<T extends VisualQuery>({\n operation,\n index,\n onRemove,\n onToggle,\n onChange,\n onRunQuery,\n queryModeller,\n query,\n datasource,\n flash,\n highlight,\n timeRange,\n isConflictingOperation,\n}: Props<T>) {\n const def = queryModeller.getOperationDefinition(operation.id);\n\n const theme = useTheme2();\n const isConflicting = isConflictingOperation ? isConflictingOperation(operation, query.operations) : false;\n const styles = getStyles(theme, isConflicting);\n\n if (!def) {\n return <span>Operation {operation.id} not found</span>;\n }\n\n const isInvalid = (isDragging: boolean) => {\n if (isDragging) {\n return undefined;\n }\n\n return isConflicting ? true : undefined;\n };\n\n return (\n <Draggable draggableId={`operation-${index}`} index={index}>\n {(provided, snapshot) => (\n <InlineField\n error={'You have conflicting label filters'}\n invalid={isInvalid(snapshot.isDragging)}\n className={cx(styles.error, styles.cardWrapper)}\n >\n <OperationEditorBody\n provided={provided}\n flash={flash}\n highlight={highlight}\n isConflicting={isConflicting}\n index={index}\n operation={operation}\n definition={def}\n onChange={onChange}\n onRemove={onRemove}\n onToggle={onToggle}\n queryModeller={queryModeller}\n query={query}\n timeRange={timeRange}\n onRunQuery={onRunQuery}\n datasource={datasource}\n />\n </InlineField>\n )}\n </Draggable>\n );\n}\n\nconst getStyles = (theme: GrafanaTheme2, isConflicting: boolean) => {\n return {\n cardWrapper: css({\n alignItems: 'stretch',\n }),\n error: css({\n marginBottom: theme.spacing(1),\n }),\n };\n};\n"],"names":["getStyles"],"mappings":";;;;;;;AA0BO,SAAS,eAAA,CAAuC;AAAA,EACrD,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAa;AACX,EAAA,MAAM,GAAA,GAAM,aAAA,CAAc,sBAAA,CAAuB,SAAA,CAAU,EAAE,CAAA;AAE7D,EAAA,MAAM,QAAQ,SAAA,EAAU;AACxB,EAAA,MAAM,gBAAgB,sBAAA,GAAyB,sBAAA,CAAuB,SAAA,EAAW,KAAA,CAAM,UAAU,CAAA,GAAI,KAAA;AACrG,EAAA,MAAM,MAAA,GAASA,WAAA,CAAU,KAAoB,CAAA;AAE7C,EAAA,IAAI,CAAC,GAAA,EAAK;AACR,IAAA,uBAAO,KAAA,CAAA,aAAA,CAAC,MAAA,EAAA,IAAA,EAAK,YAAA,EAAW,SAAA,CAAU,IAAG,YAAU,CAAA;AAAA,EACjD;AAEA,EAAA,MAAM,SAAA,GAAY,CAAC,UAAA,KAAwB;AACzC,IAAA,IAAI,UAAA,EAAY;AACd,MAAA,OAAO,MAAA;AAAA,IACT;AAEA,IAAA,OAAO,gBAAgB,IAAA,GAAO,MAAA;AAAA,EAChC,CAAA;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA,CAAC,aAAU,WAAA,EAAa,CAAA,UAAA,EAAa,KAAK,CAAA,CAAA,EAAI,KAAA,EAAA,EAC3C,CAAC,QAAA,EAAU,QAAA,qBACV,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,oCAAA;AAAA,MACP,OAAA,EAAS,SAAA,CAAU,QAAA,CAAS,UAAU,CAAA;AAAA,MACtC,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,KAAA,EAAO,OAAO,WAAW;AAAA,KAAA;AAAA,oBAE9C,KAAA,CAAA,aAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,UAAA,EAAY,GAAA;AAAA,QACZ,QAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,UAAA;AAAA,QACA;AAAA;AAAA;AACF,GAGN,CAAA;AAEJ;AAEA,MAAMA,WAAA,GAAY,CAAC,KAAA,EAAsB,aAAA,KAA2B;AAClE,EAAA,OAAO;AAAA,IACL,aAAa,GAAA,CAAI;AAAA,MACf,UAAA,EAAY;AAAA,KACb,CAAA;AAAA,IACD,OAAO,GAAA,CAAI;AAAA,MACT,YAAA,EAAc,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA,KAC9B;AAAA,GACH;AACF,CAAA;;;;"}

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

@@ -13,7 +13,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 '@grafana/runtime';
 import '../../SQLEditor/utils/debugger.js';
@@ -42,7 +42,7 @@ function OperationEditorBody({
   datasource
 }) {
   const theme = useTheme2();
-  const styles = getStyles(theme, isConflicting);
+  const styles = getStyles$7(theme, isConflicting);
   const shouldFlash = useFlash(flash);
   const { current: id } = useRef(v4());
   const onParamValueChanged = (paramIdx, value) => {
@@ -128,7 +128,7 @@ function OperationEditorBody({
     index < query.operations.length - 1 && /* @__PURE__ */ React.createElement("div", { className: styles.arrow }, /* @__PURE__ */ React.createElement("div", { className: styles.arrowLine }), /* @__PURE__ */ React.createElement("div", { className: styles.arrowArrow }))
   );
 }
-const getStyles = (theme, isConflicting) => {
+const getStyles$7 = (theme, isConflicting) => {
   return {
     cardWrapper: css({
       alignItems: "stretch"

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

	@@ -1 +1 @@
1	- {"version":3,"file":"OperationEditorBody.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationEditorBody.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { type DraggableProvided } from '@hello-pangea/dnd';\nimport { Button, Icon, Tooltip, useTheme2 } from '@grafana/ui';\nimport { css, cx } from '@emotion/css';\nimport { type DataSourceApi, type GrafanaTheme2, type TimeRange } from '@grafana/data';\nimport { OperationHeader } from './OperationHeader';\nimport {\n type QueryBuilderOperation,\n type QueryBuilderOperationDefinition,\n type QueryBuilderOperationParamDef,\n type QueryBuilderOperationParamValue,\n type VisualQuery,\n type VisualQueryModeller,\n} from '../types';\nimport { getOperationParamEditor, getOperationParamId } from './OperationParamEditor';\nimport { v4 } from 'uuid';\nimport { EditorStack } from '../../QueryEditor';\n\ntype Props = {\n provided: DraggableProvided;\n isConflicting: boolean;\n index: number;\n operation: QueryBuilderOperation;\n definition: QueryBuilderOperationDefinition;\n queryModeller: VisualQueryModeller;\n query: VisualQuery;\n onChange: (index: number, update: QueryBuilderOperation) => void;\n onRemove: (index: number) => void;\n onToggle: (index: number) => void;\n onRunQuery: () => void;\n datasource: DataSourceApi;\n flash?: boolean;\n highlight?: boolean;\n timeRange?: TimeRange;\n};\n\nexport function OperationEditorBody({\n provided,\n flash,\n isConflicting,\n highlight,\n index,\n queryModeller,\n onChange,\n onRemove,\n onToggle,\n operation,\n definition,\n query,\n timeRange,\n onRunQuery,\n datasource,\n}: Props) {\n const theme = useTheme2();\n const styles = getStyles(theme, isConflicting);\n const shouldFlash = useFlash(flash);\n const { current: id } = useRef(v4());\n\n const onParamValueChanged = (paramIdx: number, value: QueryBuilderOperationParamValue) => {\n const update: QueryBuilderOperation = { ...operation, params: [...operation.params] };\n update.params[paramIdx] = value;\n callParamChangedThenOnChange(definition, update, index, paramIdx, onChange);\n };\n\n const onAddRestParam = () => {\n const update: QueryBuilderOperation = { ...operation, params: [...operation.params, ''] };\n callParamChangedThenOnChange(definition, update, index, operation.params.length, onChange);\n };\n\n const onRemoveRestParam = (paramIdx: number) => {\n const update: QueryBuilderOperation = {\n ...operation,\n params: [...operation.params.slice(0, paramIdx), ...operation.params.slice(paramIdx + 1)],\n };\n callParamChangedThenOnChange(definition, update, index, paramIdx, onChange);\n };\n\n // Handle adding button for rest params\n let restParam: React.ReactNode \| undefined;\n if (definition.params.length > 0) {\n const lastParamDef = definition.params[definition.params.length - 1];\n if (lastParamDef.restParam) {\n restParam = renderAddRestParamButton(lastParamDef, onAddRestParam, index, operation.params.length, styles);\n }\n }\n\n return (\n <div\n className={cx(styles.card, {\n [styles.cardHighlight]: shouldFlash \|\| highlight,\n [styles.cardError]: isConflicting,\n [styles.disabled]: operation.disabled,\n })}\n ref={provided.innerRef}\n {...provided.draggableProps}\n data-testid={`operations.${index}.wrapper`}\n >\n <OperationHeader\n operation={operation}\n dragHandleProps={provided.dragHandleProps}\n definition={definition}\n index={index}\n onChange={onChange}\n onRemove={onRemove}\n onToggle={onToggle}\n queryModeller={queryModeller}\n />\n <div className={styles.body}>\n {operation.params.map((param, paramIndex) => {\n const paramDef = definition.params[Math.min(definition.params.length - 1, paramIndex)];\n const Editor = getOperationParamEditor(paramDef);\n\n return (\n <div className={styles.paramRow} key={`${paramIndex}-1`}>\n {!paramDef.hideName && (\n <div className={styles.paramName}>\n <label htmlFor={getOperationParamId(id, paramIndex)}>{paramDef.name}</label>\n {paramDef.description && (\n <Tooltip placement=\"top\" content={paramDef.description} theme=\"info\">\n <Icon name=\"info-circle\" size=\"sm\" className={styles.infoIcon} />\n </Tooltip>\n )}\n </div>\n )}\n <div className={styles.paramValue}>\n <EditorStack gap={0.5} direction=\"row\" alignItems=\"center\" wrap={false}>\n <Editor\n index={paramIndex}\n paramDef={paramDef}\n value={operation.params[paramIndex]}\n operation={operation}\n operationId={id}\n onChange={onParamValueChanged}\n onRunQuery={onRunQuery}\n query={query}\n datasource={datasource}\n timeRange={timeRange}\n queryModeller={queryModeller}\n />\n {paramDef.restParam && (operation.params.length > definition.params.length \|\| paramDef.optional) && (\n <Button\n data-testid={`operations.${index}.remove-rest-param`}\n size=\"sm\"\n fill=\"text\"\n icon=\"times\"\n variant=\"secondary\"\n title={`Remove ${paramDef.name}`}\n onClick={() => onRemoveRestParam(paramIndex)}\n />\n )}\n </EditorStack>\n </div>\n </div>\n );\n })}\n </div>\n {restParam}\n {index < query.operations.length - 1 && (\n <div className={styles.arrow}>\n <div className={styles.arrowLine} />\n <div className={styles.arrowArrow} />\n </div>\n )}\n </div>\n );\n}\n\nconst getStyles = (theme: GrafanaTheme2, isConflicting: boolean) => {\n return {\n cardWrapper: css({\n alignItems: 'stretch',\n }),\n error: css({\n marginBottom: theme.spacing(1),\n }),\n card: css({\n background: theme.colors.background.primary,\n border: `1px solid ${theme.colors.border.medium}`,\n cursor: 'grab',\n borderRadius: theme.shape.radius.default,\n position: 'relative',\n transition: 'all 0.5s ease-in 0s',\n height: isConflicting ? 'auto' : '100%',\n }),\n disabled: css({\n opacity: 0.5,\n transition: 'none',\n }),\n cardError: css({\n boxShadow: `0px 0px 4px 0px ${theme.colors.warning.main}`,\n border: `1px solid ${theme.colors.warning.main}`,\n }),\n cardHighlight: css({\n boxShadow: `0px 0px 4px 0px ${theme.colors.primary.border}`,\n border: `1px solid ${theme.colors.primary.border}`,\n }),\n infoIcon: css({\n marginLeft: theme.spacing(0.5),\n color: theme.colors.text.secondary,\n ':hover': {\n color: theme.colors.text.primary,\n },\n }),\n body: css({\n margin: theme.spacing(1, 1, 0.5, 1),\n display: 'table',\n }),\n paramRow: css({\n label: 'paramRow',\n display: 'table-row',\n verticalAlign: 'middle',\n }),\n paramName: css({\n display: 'table-cell',\n padding: theme.spacing(0, 1, 0, 0),\n fontSize: theme.typography.bodySmall.fontSize,\n fontWeight: theme.typography.fontWeightMedium,\n verticalAlign: 'middle',\n height: '32px',\n }),\n paramValue: css({\n label: 'paramValue',\n display: 'table-cell',\n verticalAlign: 'middle',\n }),\n restParam: css({\n padding: theme.spacing(0, 1, 1, 1),\n }),\n arrow: css({\n position: 'absolute',\n top: '0',\n right: '-18px',\n display: 'flex',\n }),\n arrowLine: css({\n height: '2px',\n width: '8px',\n backgroundColor: theme.colors.border.strong,\n position: 'relative',\n top: '14px',\n }),\n arrowArrow: css({\n width: 0,\n height: 0,\n borderTop: `5px solid transparent`,\n borderBottom: `5px solid transparent`,\n borderLeft: `7px solid ${theme.colors.border.strong}`,\n position: 'relative',\n top: '10px',\n }),\n };\n};\n\n/*\n When flash is switched on makes sure it is switched of right away, so we just flash the highlight and then fade\n * out.\n * @param flash\n */\nfunction useFlash(flash?: boolean) {\n const [keepFlash, setKeepFlash] = useState(true);\n useEffect(() => {\n let t: ReturnType<typeof setTimeout>;\n if (flash) {\n t = setTimeout(() => {\n setKeepFlash(false);\n }, 1000);\n } else {\n setKeepFlash(true);\n }\n\n return () => clearTimeout(t);\n }, [flash]);\n\n return keepFlash && flash;\n}\n\nfunction callParamChangedThenOnChange(\n def: QueryBuilderOperationDefinition,\n operation: QueryBuilderOperation,\n operationIndex: number,\n paramIndex: number,\n onChange: (index: number, update: QueryBuilderOperation) => void\n) {\n if (def.paramChangedHandler) {\n onChange(operationIndex, def.paramChangedHandler(paramIndex, operation, def));\n } else {\n onChange(operationIndex, operation);\n }\n}\n\nfunction renderAddRestParamButton(\n paramDef: QueryBuilderOperationParamDef,\n onAddRestParam: () => void,\n operationIndex: number,\n paramIndex: number,\n styles: OperationEditorStyles\n) {\n return (\n <div className={styles.restParam} key={`${paramIndex}-2`}>\n <Button\n size=\"sm\"\n icon=\"plus\"\n title={`Add ${paramDef.name}`.trimEnd()}\n variant=\"secondary\"\n onClick={onAddRestParam}\n data-testid={`operations.${operationIndex}.add-rest-param`}\n >\n {paramDef.name}\n </Button>\n </div>\n );\n}\n\ntype OperationEditorStyles = ReturnType<typeof getStyles>;\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"OperationEditorBody.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationEditorBody.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { type DraggableProvided } from '@hello-pangea/dnd';\nimport { Button, Icon, Tooltip, useTheme2 } from '@grafana/ui';\nimport { css, cx } from '@emotion/css';\nimport { type DataSourceApi, type GrafanaTheme2, type TimeRange } from '@grafana/data';\nimport { OperationHeader } from './OperationHeader';\nimport {\n type QueryBuilderOperation,\n type QueryBuilderOperationDefinition,\n type QueryBuilderOperationParamDef,\n type QueryBuilderOperationParamValue,\n type VisualQuery,\n type VisualQueryModeller,\n} from '../types';\nimport { getOperationParamEditor, getOperationParamId } from './OperationParamEditor';\nimport { v4 } from 'uuid';\nimport { EditorStack } from '../../QueryEditor';\n\ntype Props = {\n provided: DraggableProvided;\n isConflicting: boolean;\n index: number;\n operation: QueryBuilderOperation;\n definition: QueryBuilderOperationDefinition;\n queryModeller: VisualQueryModeller;\n query: VisualQuery;\n onChange: (index: number, update: QueryBuilderOperation) => void;\n onRemove: (index: number) => void;\n onToggle: (index: number) => void;\n onRunQuery: () => void;\n datasource: DataSourceApi;\n flash?: boolean;\n highlight?: boolean;\n timeRange?: TimeRange;\n};\n\nexport function OperationEditorBody({\n provided,\n flash,\n isConflicting,\n highlight,\n index,\n queryModeller,\n onChange,\n onRemove,\n onToggle,\n operation,\n definition,\n query,\n timeRange,\n onRunQuery,\n datasource,\n}: Props) {\n const theme = useTheme2();\n const styles = getStyles(theme, isConflicting);\n const shouldFlash = useFlash(flash);\n const { current: id } = useRef(v4());\n\n const onParamValueChanged = (paramIdx: number, value: QueryBuilderOperationParamValue) => {\n const update: QueryBuilderOperation = { ...operation, params: [...operation.params] };\n update.params[paramIdx] = value;\n callParamChangedThenOnChange(definition, update, index, paramIdx, onChange);\n };\n\n const onAddRestParam = () => {\n const update: QueryBuilderOperation = { ...operation, params: [...operation.params, ''] };\n callParamChangedThenOnChange(definition, update, index, operation.params.length, onChange);\n };\n\n const onRemoveRestParam = (paramIdx: number) => {\n const update: QueryBuilderOperation = {\n ...operation,\n params: [...operation.params.slice(0, paramIdx), ...operation.params.slice(paramIdx + 1)],\n };\n callParamChangedThenOnChange(definition, update, index, paramIdx, onChange);\n };\n\n // Handle adding button for rest params\n let restParam: React.ReactNode \| undefined;\n if (definition.params.length > 0) {\n const lastParamDef = definition.params[definition.params.length - 1];\n if (lastParamDef.restParam) {\n restParam = renderAddRestParamButton(lastParamDef, onAddRestParam, index, operation.params.length, styles);\n }\n }\n\n return (\n <div\n className={cx(styles.card, {\n [styles.cardHighlight]: shouldFlash \|\| highlight,\n [styles.cardError]: isConflicting,\n [styles.disabled]: operation.disabled,\n })}\n ref={provided.innerRef}\n {...provided.draggableProps}\n data-testid={`operations.${index}.wrapper`}\n >\n <OperationHeader\n operation={operation}\n dragHandleProps={provided.dragHandleProps}\n definition={definition}\n index={index}\n onChange={onChange}\n onRemove={onRemove}\n onToggle={onToggle}\n queryModeller={queryModeller}\n />\n <div className={styles.body}>\n {operation.params.map((param, paramIndex) => {\n const paramDef = definition.params[Math.min(definition.params.length - 1, paramIndex)];\n const Editor = getOperationParamEditor(paramDef);\n\n return (\n <div className={styles.paramRow} key={`${paramIndex}-1`}>\n {!paramDef.hideName && (\n <div className={styles.paramName}>\n <label htmlFor={getOperationParamId(id, paramIndex)}>{paramDef.name}</label>\n {paramDef.description && (\n <Tooltip placement=\"top\" content={paramDef.description} theme=\"info\">\n <Icon name=\"info-circle\" size=\"sm\" className={styles.infoIcon} />\n </Tooltip>\n )}\n </div>\n )}\n <div className={styles.paramValue}>\n <EditorStack gap={0.5} direction=\"row\" alignItems=\"center\" wrap={false}>\n <Editor\n index={paramIndex}\n paramDef={paramDef}\n value={operation.params[paramIndex]}\n operation={operation}\n operationId={id}\n onChange={onParamValueChanged}\n onRunQuery={onRunQuery}\n query={query}\n datasource={datasource}\n timeRange={timeRange}\n queryModeller={queryModeller}\n />\n {paramDef.restParam && (operation.params.length > definition.params.length \|\| paramDef.optional) && (\n <Button\n data-testid={`operations.${index}.remove-rest-param`}\n size=\"sm\"\n fill=\"text\"\n icon=\"times\"\n variant=\"secondary\"\n title={`Remove ${paramDef.name}`}\n onClick={() => onRemoveRestParam(paramIndex)}\n />\n )}\n </EditorStack>\n </div>\n </div>\n );\n })}\n </div>\n {restParam}\n {index < query.operations.length - 1 && (\n <div className={styles.arrow}>\n <div className={styles.arrowLine} />\n <div className={styles.arrowArrow} />\n </div>\n )}\n </div>\n );\n}\n\nconst getStyles = (theme: GrafanaTheme2, isConflicting: boolean) => {\n return {\n cardWrapper: css({\n alignItems: 'stretch',\n }),\n error: css({\n marginBottom: theme.spacing(1),\n }),\n card: css({\n background: theme.colors.background.primary,\n border: `1px solid ${theme.colors.border.medium}`,\n cursor: 'grab',\n borderRadius: theme.shape.radius.default,\n position: 'relative',\n transition: 'all 0.5s ease-in 0s',\n height: isConflicting ? 'auto' : '100%',\n }),\n disabled: css({\n opacity: 0.5,\n transition: 'none',\n }),\n cardError: css({\n boxShadow: `0px 0px 4px 0px ${theme.colors.warning.main}`,\n border: `1px solid ${theme.colors.warning.main}`,\n }),\n cardHighlight: css({\n boxShadow: `0px 0px 4px 0px ${theme.colors.primary.border}`,\n border: `1px solid ${theme.colors.primary.border}`,\n }),\n infoIcon: css({\n marginLeft: theme.spacing(0.5),\n color: theme.colors.text.secondary,\n ':hover': {\n color: theme.colors.text.primary,\n },\n }),\n body: css({\n margin: theme.spacing(1, 1, 0.5, 1),\n display: 'table',\n }),\n paramRow: css({\n label: 'paramRow',\n display: 'table-row',\n verticalAlign: 'middle',\n }),\n paramName: css({\n display: 'table-cell',\n padding: theme.spacing(0, 1, 0, 0),\n fontSize: theme.typography.bodySmall.fontSize,\n fontWeight: theme.typography.fontWeightMedium,\n verticalAlign: 'middle',\n height: '32px',\n }),\n paramValue: css({\n label: 'paramValue',\n display: 'table-cell',\n verticalAlign: 'middle',\n }),\n restParam: css({\n padding: theme.spacing(0, 1, 1, 1),\n }),\n arrow: css({\n position: 'absolute',\n top: '0',\n right: '-18px',\n display: 'flex',\n }),\n arrowLine: css({\n height: '2px',\n width: '8px',\n backgroundColor: theme.colors.border.strong,\n position: 'relative',\n top: '14px',\n }),\n arrowArrow: css({\n width: 0,\n height: 0,\n borderTop: `5px solid transparent`,\n borderBottom: `5px solid transparent`,\n borderLeft: `7px solid ${theme.colors.border.strong}`,\n position: 'relative',\n top: '10px',\n }),\n };\n};\n\n/*\n When flash is switched on makes sure it is switched of right away, so we just flash the highlight and then fade\n * out.\n * @param flash\n */\nfunction useFlash(flash?: boolean) {\n const [keepFlash, setKeepFlash] = useState(true);\n useEffect(() => {\n let t: ReturnType<typeof setTimeout>;\n if (flash) {\n t = setTimeout(() => {\n setKeepFlash(false);\n }, 1000);\n } else {\n setKeepFlash(true);\n }\n\n return () => clearTimeout(t);\n }, [flash]);\n\n return keepFlash && flash;\n}\n\nfunction callParamChangedThenOnChange(\n def: QueryBuilderOperationDefinition,\n operation: QueryBuilderOperation,\n operationIndex: number,\n paramIndex: number,\n onChange: (index: number, update: QueryBuilderOperation) => void\n) {\n if (def.paramChangedHandler) {\n onChange(operationIndex, def.paramChangedHandler(paramIndex, operation, def));\n } else {\n onChange(operationIndex, operation);\n }\n}\n\nfunction renderAddRestParamButton(\n paramDef: QueryBuilderOperationParamDef,\n onAddRestParam: () => void,\n operationIndex: number,\n paramIndex: number,\n styles: OperationEditorStyles\n) {\n return (\n <div className={styles.restParam} key={`${paramIndex}-2`}>\n <Button\n size=\"sm\"\n icon=\"plus\"\n title={`Add ${paramDef.name}`.trimEnd()}\n variant=\"secondary\"\n onClick={onAddRestParam}\n data-testid={`operations.${operationIndex}.add-rest-param`}\n >\n {paramDef.name}\n </Button>\n </div>\n );\n}\n\ntype OperationEditorStyles = ReturnType<typeof getStyles>;\n"],"names":["getStyles"],"mappings":"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"}

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

@@ -4,10 +4,10 @@ import { renderMarkdown } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
 function OperationExplainedBox({ title, stepNumber, markdown, children }) {
-  const styles = useStyles2(getStyles);
-  return /* @__PURE__ */ React.createElement("div", { className: styles.box }, stepNumber !== undefined && /* @__PURE__ */ React.createElement("div", { className: styles.stepNumber }, stepNumber), /* @__PURE__ */ React.createElement("div", { className: styles.boxInner }, title && /* @__PURE__ */ React.createElement("div", { className: styles.header }, /* @__PURE__ */ React.createElement("span", null, title)), /* @__PURE__ */ React.createElement("div", { className: styles.body }, markdown && /* @__PURE__ */ React.createElement("div", { dangerouslySetInnerHTML: { __html: renderMarkdown(markdown) } }), children)));
+  const styles = useStyles2(getStyles$b);
+  return /* @__PURE__ */ React.createElement("div", { className: styles.box }, stepNumber !== void 0 && /* @__PURE__ */ React.createElement("div", { className: styles.stepNumber }, stepNumber), /* @__PURE__ */ React.createElement("div", { className: styles.boxInner }, title && /* @__PURE__ */ React.createElement("div", { className: styles.header }, /* @__PURE__ */ React.createElement("span", null, title)), /* @__PURE__ */ React.createElement("div", { className: styles.body }, markdown && /* @__PURE__ */ React.createElement("div", { dangerouslySetInnerHTML: { __html: renderMarkdown(markdown) } }), children)));
 }
-const getStyles = (theme) => {
+const getStyles$b = (theme) => {
   return {
     box: css({
       background: theme.colors.background.secondary,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"OperationExplainedBox.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationExplainedBox.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from '@emotion/css';\n\nimport { type GrafanaTheme2, renderMarkdown } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\n\nexport interface Props {\n title?: React.ReactNode;\n markdown?: string;\n stepNumber?: number;\n}\n\nexport function OperationExplainedBox({ title, stepNumber, markdown, children }: React.PropsWithChildren<Props>) {\n const styles = useStyles2(getStyles);\n\n return (\n <div className={styles.box}>\n {stepNumber !== undefined && <div className={styles.stepNumber}>{stepNumber}</div>}\n <div className={styles.boxInner}>\n {title && (\n <div className={styles.header}>\n <span>{title}</span>\n </div>\n )}\n <div className={styles.body}>\n {markdown && <div dangerouslySetInnerHTML={{ __html: renderMarkdown(markdown) }}></div>}\n {children}\n </div>\n </div>\n </div>\n );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n box: css({\n background: theme.colors.background.secondary,\n padding: theme.spacing(1),\n borderRadius: theme.shape.radius.default,\n position: 'relative',\n }),\n boxInner: css({\n marginLeft: theme.spacing(4),\n }),\n stepNumber: css({\n fontWeight: theme.typography.fontWeightMedium,\n background: theme.colors.secondary.main,\n width: '20px',\n height: '20px',\n borderRadius: theme.shape.radius.circle,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'absolute',\n top: '10px',\n left: '11px',\n fontSize: theme.typography.bodySmall.fontSize,\n }),\n header: css({\n paddingBottom: theme.spacing(0.5),\n display: 'flex',\n alignItems: 'center',\n fontFamily: theme.typography.fontFamilyMonospace,\n }),\n body: css({\n color: theme.colors.text.secondary,\n 'p:last-child': {\n margin: 0,\n },\n a: {\n color: theme.colors.text.link,\n textDecoration: 'underline',\n },\n }),\n };\n};\n"],"names":[],"mappings":";;;;;AAYO,SAAS,sBAAsB,EAAE,KAAA,EAAO,~~UAAY~~,~~EAAA~~,QAAA,EAAU,~~UAA4C~~,~~EAAA~~;AAC/G,~~EAAM~~,~~MAAA~~,MAAA,GAAS,~~WAAW~~,~~SAAS~~,CAAA;AAEnC,~~EACE~~,~~uBAAA~~,KAAA,CAAA,aAAA,CAAC,SAAI,~~SAAW~~,~~EAAA~~,MAAA,CAAO,OACpB,~~UAAe~~,~~KAAA~~,~~SAAA~~,~~oBAAc~~,KAAA,CAAA,aAAA,~~CAAA~~,KAAA,EAAA,EAAI,~~SAAW~~,~~EAAA~~,MAAA,CAAO,cAAa,UAAW,CAAA,sCAC3E,~~KAAI~~,EAAA,~~EAAA~~,SAAA,EAAW,OAAO,~~QACpB~~,EAAA,~~EAAA~~,KAAA,~~oBACE~~,KAAA,CAAA,aAAA,~~CAAA~~,KAAA,EAAA,EAAI,~~SAAW~~,~~EAAA~~,MAAA,CAAO,~~0BACpB~~,KAAA,CAAA,aAAA,~~CAAA~~,MAAA,EAAA,IAAA,EAAM,KAAM,CACf,CAAA,sCAED,~~KAAI~~,EAAA,~~EAAA~~,SAAA,EAAW,~~MAAO~~,~~CAAA~~,IAAA,EAAA,EACpB,~~QAAY~~,~~oBAAA~~,KAAA,CAAA,aAAA,CAAC,SAAI,~~uBAAyB~~,~~EAAA~~,EAAE,QAAQ,~~cAAe~~,~~CAAA~~,QAAQ,~~GAAK~~,~~EAAA~~,CAAA,EAChF,QACH,CACF,CACF,CAAA;AAEJ;AAEA,~~MAAM~~,~~SAAA~~,GAAY,CAAC,KAAyB~~,KAAA~~;AAC1C,~~EAAO~~,~~OAAA~~;AAAA,IACL,KAAK,~~GAAI~~,~~CAAA~~;AAAA,MACP,UAAA,EAAY,~~KAAM~~,~~CAAA~~,MAAA,CAAO,~~UAAW~~,~~CAAA~~,SAAA;AAAA,MACpC,OAAA,EAAS,~~KAAM~~,~~CAAA~~,OAAA,CAAQ,CAAC,CAAA;AAAA,MACxB,YAAA,EAAc,~~KAAM~~,~~CAAA~~,KAAA,CAAM,~~MAAO~~,~~CAAA~~,OAAA;AAAA,MACjC,~~QAAU~~,~~EAAA~~;AAAA,KACX,CAAA;AAAA,IACD,UAAU,~~GAAI~~,~~CAAA~~;AAAA,MACZ,UAAA,EAAY,~~KAAM~~,~~CAAA~~,OAAA,CAAQ,CAAC;AAAA,KAC5B,CAAA;AAAA,IACD,YAAY,~~GAAI~~,~~CAAA~~;AAAA,MACd,UAAA,EAAY,MAAM,~~UAAW~~,~~CAAA~~,gBAAA;AAAA,MAC7B,UAAA,EAAY,~~KAAM~~,~~CAAA~~,MAAA,CAAO,~~SAAU~~,~~CAAA~~,IAAA;AAAA,MACnC,~~KAAO~~,~~EAAA~~,MAAA;AAAA,MACP,~~MAAQ~~,~~EAAA~~,MAAA;AAAA,MACR,YAAA,EAAc,~~KAAM~~,~~CAAA~~,KAAA,CAAM,~~MAAO~~,~~CAAA~~,MAAA;AAAA,MACjC,~~OAAS~~,~~EAAA~~,MAAA;AAAA,MACT,~~UAAY~~,~~EAAA~~,QAAA;AAAA,MACZ,~~cAAgB~~,~~EAAA~~,QAAA;AAAA,MAChB,~~QAAU~~,~~EAAA~~,UAAA;AAAA,MACV,~~GAAK~~,~~EAAA~~,MAAA;AAAA,MACL,~~IAAM~~,~~EAAA~~,MAAA;AAAA,MACN,QAAA,EAAU,~~KAAM~~,~~CAAA~~,UAAA,CAAW,~~SAAU~~,~~CAAA~~;AAAA,KACtC,CAAA;AAAA,IACD,QAAQ,~~GAAI~~,~~CAAA~~;AAAA,MACV,aAAA,EAAe,~~KAAM~~,~~CAAA~~,OAAA,CAAQ,GAAG,CAAA;AAAA,MAChC,~~OAAS~~,~~EAAA~~,MAAA;AAAA,MACT,~~UAAY~~,~~EAAA~~,QAAA;AAAA,MACZ,UAAA,EAAY,MAAM,~~UAAW~~,~~CAAA~~;AAAA,KAC9B,CAAA;AAAA,IACD,MAAM,~~GAAI~~,~~CAAA~~;AAAA,MACR,KAAA,EAAO,~~KAAM~~,~~CAAA~~,MAAA,CAAO,~~IAAK~~,~~CAAA~~,SAAA;AAAA,MACzB,~~cAAgB~~,~~EAAA~~;AAAA,QACd,~~MAAQ~~,~~EAAA~~;AAAA,OACV;AAAA,MACA,~~CAAG~~,~~EAAA~~;AAAA,QACD,KAAA,EAAO,~~KAAM~~,~~CAAA~~,MAAA,CAAO,~~IAAK~~,~~CAAA~~,IAAA;AAAA,QACzB,~~cAAgB~~,~~EAAA~~;AAAA;AAClB,KACD;AAAA,GACH;AACF,CAAA;;;;"}
1	+ {"version":3,"file":"OperationExplainedBox.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationExplainedBox.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from '@emotion/css';\n\nimport { type GrafanaTheme2, renderMarkdown } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\n\nexport interface Props {\n title?: React.ReactNode;\n markdown?: string;\n stepNumber?: number;\n}\n\nexport function OperationExplainedBox({ title, stepNumber, markdown, children }: React.PropsWithChildren<Props>) {\n const styles = useStyles2(getStyles);\n\n return (\n <div className={styles.box}>\n {stepNumber !== undefined && <div className={styles.stepNumber}>{stepNumber}</div>}\n <div className={styles.boxInner}>\n {title && (\n <div className={styles.header}>\n <span>{title}</span>\n </div>\n )}\n <div className={styles.body}>\n {markdown && <div dangerouslySetInnerHTML={{ __html: renderMarkdown(markdown) }}></div>}\n {children}\n </div>\n </div>\n </div>\n );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n box: css({\n background: theme.colors.background.secondary,\n padding: theme.spacing(1),\n borderRadius: theme.shape.radius.default,\n position: 'relative',\n }),\n boxInner: css({\n marginLeft: theme.spacing(4),\n }),\n stepNumber: css({\n fontWeight: theme.typography.fontWeightMedium,\n background: theme.colors.secondary.main,\n width: '20px',\n height: '20px',\n borderRadius: theme.shape.radius.circle,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'absolute',\n top: '10px',\n left: '11px',\n fontSize: theme.typography.bodySmall.fontSize,\n }),\n header: css({\n paddingBottom: theme.spacing(0.5),\n display: 'flex',\n alignItems: 'center',\n fontFamily: theme.typography.fontFamilyMonospace,\n }),\n body: css({\n color: theme.colors.text.secondary,\n 'p:last-child': {\n margin: 0,\n },\n a: {\n color: theme.colors.text.link,\n textDecoration: 'underline',\n },\n }),\n };\n};\n"],"names":["getStyles"],"mappings":";;;;;AAYO,SAAS,sBAAsB,EAAE,KAAA,EAAO,UAAA,EAAY,QAAA,EAAU,UAAS,EAAmC;AAC/G,EAAA,MAAM,MAAA,GAAS,WAAWA,WAAS,CAAA;AAEnC,EAAA,uBACE,KAAA,CAAA,aAAA,CAAC,SAAI,SAAA,EAAW,MAAA,CAAO,OACpB,UAAA,KAAe,MAAA,oBAAa,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,cAAa,UAAW,CAAA,sCAC3E,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,QAAA,EAAA,EACpB,KAAA,oBACC,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,0BACrB,KAAA,CAAA,aAAA,CAAC,MAAA,EAAA,IAAA,EAAM,KAAM,CACf,CAAA,sCAED,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,IAAA,EAAA,EACpB,QAAA,oBAAY,KAAA,CAAA,aAAA,CAAC,SAAI,uBAAA,EAAyB,EAAE,QAAQ,cAAA,CAAe,QAAQ,GAAE,EAAG,CAAA,EAChF,QACH,CACF,CACF,CAAA;AAEJ;AAEA,MAAMA,WAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,EAAA,OAAO;AAAA,IACL,KAAK,GAAA,CAAI;AAAA,MACP,UAAA,EAAY,KAAA,CAAM,MAAA,CAAO,UAAA,CAAW,SAAA;AAAA,MACpC,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MACxB,YAAA,EAAc,KAAA,CAAM,KAAA,CAAM,MAAA,CAAO,OAAA;AAAA,MACjC,QAAA,EAAU;AAAA,KACX,CAAA;AAAA,IACD,UAAU,GAAA,CAAI;AAAA,MACZ,UAAA,EAAY,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA,KAC5B,CAAA;AAAA,IACD,YAAY,GAAA,CAAI;AAAA,MACd,UAAA,EAAY,MAAM,UAAA,CAAW,gBAAA;AAAA,MAC7B,UAAA,EAAY,KAAA,CAAM,MAAA,CAAO,SAAA,CAAU,IAAA;AAAA,MACnC,KAAA,EAAO,MAAA;AAAA,MACP,MAAA,EAAQ,MAAA;AAAA,MACR,YAAA,EAAc,KAAA,CAAM,KAAA,CAAM,MAAA,CAAO,MAAA;AAAA,MACjC,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,cAAA,EAAgB,QAAA;AAAA,MAChB,QAAA,EAAU,UAAA;AAAA,MACV,GAAA,EAAK,MAAA;AAAA,MACL,IAAA,EAAM,MAAA;AAAA,MACN,QAAA,EAAU,KAAA,CAAM,UAAA,CAAW,SAAA,CAAU;AAAA,KACtC,CAAA;AAAA,IACD,QAAQ,GAAA,CAAI;AAAA,MACV,aAAA,EAAe,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA;AAAA,MAChC,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,UAAA,EAAY,MAAM,UAAA,CAAW;AAAA,KAC9B,CAAA;AAAA,IACD,MAAM,GAAA,CAAI;AAAA,MACR,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,IAAA,CAAK,SAAA;AAAA,MACzB,cAAA,EAAgB;AAAA,QACd,MAAA,EAAQ;AAAA,OACV;AAAA,MACA,CAAA,EAAG;AAAA,QACD,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,IAAA,CAAK,IAAA;AAAA,QACzB,cAAA,EAAgB;AAAA;AAClB,KACD;AAAA,GACH;AACF,CAAA;;;;"}

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

@@ -9,7 +9,7 @@ import { FlexItem } from '../../QueryEditor/FlexItem.js';
 const OperationHeader = memo(
   ({ operation, definition, index, onChange, onRemove, onToggle, queryModeller, dragHandleProps }) => {
     var _a;
-    const styles = useStyles2(getStyles);
+    const styles = useStyles2(getStyles$9);
     const [state, setState] = useState({});
     const onToggleSwitcher = () => {
       if (state.isOpen) {
@@ -86,7 +86,7 @@ const OperationHeader = memo(
   }
 );
 OperationHeader.displayName = "OperationHeader";
-const getStyles = (theme) => {
+const getStyles$9 = (theme) => {
   return {
     header: css({
       borderBottom: `1px solid ${theme.colors.border.medium}`,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"OperationHeader.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationHeader.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useState, memo } from 'react';\nimport { type DraggableProvided } from '@hello-pangea/dnd';\n\nimport { type GrafanaTheme2, type SelectableValue } from '@grafana/data';\nimport { Button, Select, useStyles2 } from '@grafana/ui';\n\nimport { OperationInfoButton } from './OperationInfoButton';\n\nimport { type VisualQueryModeller, type QueryBuilderOperation, type QueryBuilderOperationDefinition } from '../types';\nimport { FlexItem } from '../../QueryEditor/FlexItem';\n\ninterface Props {\n operation: QueryBuilderOperation;\n definition: QueryBuilderOperationDefinition;\n index: number;\n queryModeller: VisualQueryModeller;\n dragHandleProps?: DraggableProvided['dragHandleProps'];\n onChange: (index: number, update: QueryBuilderOperation) => void;\n onRemove: (index: number) => void;\n onToggle: (index: number) => void;\n}\n\ninterface State {\n isOpen?: boolean;\n disabled?: boolean;\n alternatives?: Array<SelectableValue<QueryBuilderOperationDefinition>>;\n}\n\nexport const OperationHeader = memo<Props>(\n ({ operation, definition, index, onChange, onRemove, onToggle, queryModeller, dragHandleProps }) => {\n const styles = useStyles2(getStyles);\n const [state, setState] = useState<State>({});\n\n const onToggleSwitcher = () => {\n if (state.isOpen) {\n setState({ ...state, isOpen: false });\n } else {\n const alternatives = queryModeller\n .getAlternativeOperations(definition.alternativesKey!)\n .map((alt) => ({ label: alt.name, value: alt }));\n setState({ isOpen: true, alternatives });\n }\n };\n\n return (\n <div className={styles.header}>\n {!state.isOpen && (\n <>\n <div {...dragHandleProps}>{definition.name ?? definition.id}</div>\n <FlexItem grow={1} />\n <div className={`${styles.operationHeaderButtons} operation-header-show-on-hover`}>\n <Button\n icon=\"angle-down\"\n size=\"sm\"\n onClick={onToggleSwitcher}\n fill=\"text\"\n variant=\"secondary\"\n title=\"Click to view alternative operations\"\n />\n <OperationInfoButton\n definition={definition}\n operation={operation}\n innerQueryPlaceholder={queryModeller.innerQueryPlaceholder}\n />\n {definition.toggleable && (\n <Button\n icon={operation.disabled ? 'eye-slash' : 'eye'}\n size=\"sm\"\n onClick={() => onToggle(index)}\n fill=\"text\"\n variant=\"secondary\"\n title={operation.disabled ? 'Enable operation' : 'Disable operation'}\n />\n )}\n <Button\n icon=\"times\"\n size=\"sm\"\n onClick={() => onRemove(index)}\n fill=\"text\"\n variant=\"secondary\"\n title=\"Remove operation\"\n />\n </div>\n </>\n )}\n {state.isOpen && (\n <div className={styles.selectWrapper}>\n <Select\n autoFocus\n openMenuOnFocus\n placeholder=\"Replace with\"\n options={state.alternatives}\n isOpen={true}\n onCloseMenu={onToggleSwitcher}\n onChange={(value) => {\n if (value.value) {\n // Operation should exist if it is selectable\n const newDef = queryModeller.getOperationDefinition(value.value.id)!;\n\n // copy default params, and override with all current params\n const newParams = [...newDef.defaultParams];\n for (let i = 0; i < Math.min(operation.params.length, newParams.length); i++) {\n if (newDef.params[i].type === definition.params[i].type) {\n newParams[i] = operation.params[i];\n }\n }\n\n const changedOp = { ...operation, params: newParams, id: value.value.id };\n onChange(\n index,\n definition.changeTypeHandler ? definition.changeTypeHandler(changedOp, newDef) : changedOp\n );\n }\n }}\n />\n </div>\n )}\n </div>\n );\n }\n);\n\nOperationHeader.displayName = 'OperationHeader';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n header: css({\n borderBottom: `1px solid ${theme.colors.border.medium}`,\n padding: theme.spacing(0.5, 0.5, 0.5, 1),\n display: 'flex',\n alignItems: 'center',\n }),\n operationHeaderButtons: css({\n opacity: 1,\n }),\n selectWrapper: css({\n paddingRight: theme.spacing(2),\n }),\n };\n};\n"],"names":[],"mappings":";;;;;;;;AA6BO,MAAM,~~eAAkB~~,~~GAAA~~,IAAA;AAAA,EAC7B,CAAC,EAAE,SAAA,EAAW,~~UAAY~~,~~EAAA~~,KAAA,EAAO,UAAU,~~QAAU~~,~~EAAA~~,QAAA,EAAU,~~aAAe~~,~~EAAA~~,eAAA,~~EAAsB~~,~~KAAA~~;AA9BtG,IAAA,IAAA,EAAA;AA+BI,~~IAAM~~,~~MAAA~~,MAAA,GAAS,~~WAAW~~,~~SAAS~~,CAAA;AACnC,IAAA,MAAM,CAAC,~~KAAO~~,~~EAAA~~,QAAQ,~~CAAI~~,~~GAAA~~,QAAA,CAAgB,EAAE,CAAA;AAE5C,IAAA,MAAM,mBAAmB,MAAM;AAC7B,MAAA,IAAI,MAAM,~~MAAQ~~,~~EAAA~~;AAChB,QAAA,QAAA,CAAS,EAAE,GAAG,~~KAAO~~,~~EAAA~~,MAAA,EAAQ,OAAO,CAAA;AAAA,~~OAC/B~~,~~MAAA~~;AACL,QAAA,MAAM,~~YAAe~~,~~GAAA~~,aAAA,CAClB,~~wBAAyB~~,~~CAAA~~,UAAA,CAAW,eAAgB,CACpD,~~CAAA,~~GAAA,CAAI,CAAC,GAAA,MAAS,EAAE,~~KAAO~~,~~EAAA~~,GAAA,CAAI,~~IAAM~~,~~EAAA~~,KAAA,EAAO,~~KAAM~~,~~CAAA~~,CAAA;AACjD,QAAA,QAAA,CAAS,EAAE,MAAA,EAAQ,~~IAAM~~,~~EAAA~~,YAAA,EAAc,CAAA;AAAA;~~AACzC~~,~~KACF~~;AAEA,IAAA,~~uBACG~~,KAAA,CAAA,aAAA,~~CAAA~~,KAAA,EAAA,EAAI,~~SAAW~~,~~EAAA~~,MAAA,CAAO,~~MACpB~~,EAAA,~~EAAA~~,CAAC,~~KAAM~~,~~CAAA~~,MAAA,~~oBAEJ~~,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,~~kBAAA~~,KAAA,CAAA,aAAA,CAAC,~~KAAK~~,EAAA,~~EAAA~~,GAAG,oBAAkB,~~EAAW~~,GAAA,UAAA,~~CAAA~~,IAAA,KAAX,~~IAAmB~~,GAAA,EAAA,~~GAAA~~,UAAA,CAAW,EAAG,CAAA,~~kBAC3D~~,KAAA,CAAA,aAAA,~~CAAA~~,QAAA,EAAA,EAAS,~~IAAM~~,~~EAAA~~,CAAA,EAAG,~~CACnB~~,~~kBAAA~~,KAAA,CAAA,aAAA,CAAC,~~KAAI~~,EAAA,~~EAAA~~,SAAA,EAAW,~~CAAG~~,~~EAAA~~,MAAA,CAAO,sBAAsB,~~CAC9C~~,+BAAA,CAAA,EAAA,~~kBAAA~~,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,~~IAAK~~,~~EAAA~~,YAAA;AAAA,QACL,~~IAAK~~,~~EAAA~~,IAAA;AAAA,QACL,~~OAAS~~,~~EAAA~~,gBAAA;AAAA,QACT,~~IAAK~~,~~EAAA~~,MAAA;AAAA,QACL,~~OAAQ~~,~~EAAA~~,WAAA;AAAA,QACR,~~KAAM~~,~~EAAA~~;AAAA;AAAA,~~KAER~~,~~kBAAA~~,KAAA,CAAA,aAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QACC,UAAA;AAAA,QACA,SAAA;AAAA,QACA,uBAAuB,~~aAAc~~,~~CAAA~~;AAAA;AAAA,KACvC,EACC,WAAW,~~UACV~~,~~oBAAA~~,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,~~SAAU~~,~~CAAA~~,QAAA,GAAW,~~WAAc~~,~~GAAA~~,KAAA;AAAA,QACzC,~~IAAK~~,~~EAAA~~,IAAA;AAAA,QACL,OAAA,EAAS,MAAM,QAAA,CAAS,KAAK,CAAA;AAAA,QAC7B,~~IAAK~~,~~EAAA~~,MAAA;AAAA,QACL,~~OAAQ~~,~~EAAA~~,WAAA;AAAA,QACR,KAAA,EAAO,~~SAAU~~,~~CAAA~~,QAAA,GAAW,~~kBAAqB~~,~~GAAA~~;AAAA;AAAA,~~KAGrD~~,~~kBAAA~~,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,~~IAAK~~,~~EAAA~~,OAAA;AAAA,QACL,~~IAAK~~,~~EAAA~~,IAAA;AAAA,QACL,OAAA,EAAS,MAAM,QAAA,CAAS,KAAK,CAAA;AAAA,QAC7B,~~IAAK~~,~~EAAA~~,MAAA;AAAA,QACL,~~OAAQ~~,~~EAAA~~,WAAA;AAAA,QACR,~~KAAM~~,~~EAAA~~;AAAA;AAAA,KAEV,CACF,~~CAED~~,~~EAAA~~,KAAA,CAAM,~~0BACJ~~,KAAA,CAAA,aAAA,~~CAAA~~,KAAA,EAAA,EAAI,~~SAAW~~,~~EAAA~~,MAAA,CAAO,~~aACrB~~,EAAA,~~kBAAA~~,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,~~SAAS~~,~~EAAA~~,IAAA;AAAA,QACT,~~eAAe~~,~~EAAA~~,IAAA;AAAA,QACf,~~WAAY~~,~~EAAA~~,cAAA;AAAA,QACZ,SAAS,~~KAAM~~,~~CAAA~~,YAAA;AAAA,QACf,~~MAAQ~~,~~EAAA~~,IAAA;AAAA,QACR,~~WAAa~~,~~EAAA~~,gBAAA;AAAA,QACb,QAAA,EAAU,CAAC,KAAU~~,KAAA~~;AACnB,UAAA,IAAI,MAAM,~~KAAO~~,~~EAAA~~;AAEf,YAAA,MAAM,~~MAAS~~,~~GAAA~~,aAAA,CAAc,~~sBAAuB~~,~~CAAA~~,KAAA,CAAM,MAAM,EAAE,CAAA;AAGlE,YAAA,MAAM,~~SAAY~~,~~GAAA~~,CAAC,GAAG,MAAA,CAAO,aAAa,CAAA;AAC1C,~~YAAS~~,KAAA,~~IAAA~~,CAAA,GAAI,~~CAAG~~,~~EAAA~~,CAAA,GAAI,~~IAAK~~,~~CAAA~~,GAAA,CAAI,~~SAAU~~,~~CAAA~~,MAAA,CAAO,~~MAAQ~~,~~EAAA~~,SAAA,CAAU,MAAM,CAAA,EAAG,~~CAAK~~,EAAA,~~EAAA~~;AAC5E,~~cAAI~~,~~IAAA~~,MAAA,CAAO,OAAO,CAAC,CAAA,CAAE,SAAS,~~UAAW~~,~~CAAA~~,MAAA,CAAO,CAAC,CAAA,CAAE,~~IAAM~~,~~EAAA~~;AACvD,gBAAA,SAAA,CAAU,CAAC,CAAA,GAAI,~~SAAU~~,~~CAAA~~,MAAA,CAAO,CAAC,CAAA;AAAA;~~AACnC~~;~~AAGF~~,~~YAAM~~,~~MAAA~~,SAAA,GAAY,EAAE,GAAG,SAAA,EAAW,QAAQ,~~SAAW~~,~~EAAA~~,EAAA,EAAI,~~KAAM~~,~~CAAA~~,KAAA,CAAM,EAAG~~,EAAA~~;AACxE,YAAA,QAAA;AAAA,cACE,KAAA;AAAA,cACA,WAAW,~~iBAAoB~~,~~GAAA~~,UAAA,CAAW,~~iBAAkB~~,~~CAAA~~,SAAA,EAAW,MAAM,~~CAAI~~,~~GAAA~~;AAAA,aACnF;AAAA;~~AACF~~;~~AACF~~;AAAA,KAEJ,CAEJ,CAAA;AAAA;~~AAGN~~;AAEA,eAAA,CAAgB,~~WAAc~~,~~GAAA~~,iBAAA;AAE9B,~~MAAM~~,~~SAAA~~,GAAY,CAAC,KAAyB~~,KAAA~~;AAC1C,~~EAAO~~,~~OAAA~~;AAAA,IACL,QAAQ,~~GAAI~~,~~CAAA~~;AAAA,MACV,~~YAAc~~,~~EAAA~~,CAAA,UAAA,EAAa,~~KAAM~~,~~CAAA~~,MAAA,CAAO,OAAO,MAAM,CAAA,CAAA;AAAA,MACrD,SAAS,~~KAAM~~,~~CAAA~~,OAAA,CAAQ,~~GAAK~~,~~EAAA~~,GAAA,EAAK,KAAK,CAAC,CAAA;AAAA,MACvC,~~OAAS~~,~~EAAA~~,MAAA;AAAA,MACT,~~UAAY~~,~~EAAA~~;AAAA,KACb,CAAA;AAAA,IACD,wBAAwB,~~GAAI~~,~~CAAA~~;AAAA,MAC1B,~~OAAS~~,~~EAAA~~;AAAA,KACV,CAAA;AAAA,IACD,eAAe,~~GAAI~~,~~CAAA~~;AAAA,MACjB,YAAA,EAAc,~~KAAM~~,~~CAAA~~,OAAA,CAAQ,CAAC;AAAA,KAC9B;AAAA,GACH;AACF,CAAA;;;;"}
1	+ {"version":3,"file":"OperationHeader.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationHeader.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useState, memo } from 'react';\nimport { type DraggableProvided } from '@hello-pangea/dnd';\n\nimport { type GrafanaTheme2, type SelectableValue } from '@grafana/data';\nimport { Button, Select, useStyles2 } from '@grafana/ui';\n\nimport { OperationInfoButton } from './OperationInfoButton';\n\nimport { type VisualQueryModeller, type QueryBuilderOperation, type QueryBuilderOperationDefinition } from '../types';\nimport { FlexItem } from '../../QueryEditor/FlexItem';\n\ninterface Props {\n operation: QueryBuilderOperation;\n definition: QueryBuilderOperationDefinition;\n index: number;\n queryModeller: VisualQueryModeller;\n dragHandleProps?: DraggableProvided['dragHandleProps'];\n onChange: (index: number, update: QueryBuilderOperation) => void;\n onRemove: (index: number) => void;\n onToggle: (index: number) => void;\n}\n\ninterface State {\n isOpen?: boolean;\n disabled?: boolean;\n alternatives?: Array<SelectableValue<QueryBuilderOperationDefinition>>;\n}\n\nexport const OperationHeader = memo<Props>(\n ({ operation, definition, index, onChange, onRemove, onToggle, queryModeller, dragHandleProps }) => {\n const styles = useStyles2(getStyles);\n const [state, setState] = useState<State>({});\n\n const onToggleSwitcher = () => {\n if (state.isOpen) {\n setState({ ...state, isOpen: false });\n } else {\n const alternatives = queryModeller\n .getAlternativeOperations(definition.alternativesKey!)\n .map((alt) => ({ label: alt.name, value: alt }));\n setState({ isOpen: true, alternatives });\n }\n };\n\n return (\n <div className={styles.header}>\n {!state.isOpen && (\n <>\n <div {...dragHandleProps}>{definition.name ?? definition.id}</div>\n <FlexItem grow={1} />\n <div className={`${styles.operationHeaderButtons} operation-header-show-on-hover`}>\n <Button\n icon=\"angle-down\"\n size=\"sm\"\n onClick={onToggleSwitcher}\n fill=\"text\"\n variant=\"secondary\"\n title=\"Click to view alternative operations\"\n />\n <OperationInfoButton\n definition={definition}\n operation={operation}\n innerQueryPlaceholder={queryModeller.innerQueryPlaceholder}\n />\n {definition.toggleable && (\n <Button\n icon={operation.disabled ? 'eye-slash' : 'eye'}\n size=\"sm\"\n onClick={() => onToggle(index)}\n fill=\"text\"\n variant=\"secondary\"\n title={operation.disabled ? 'Enable operation' : 'Disable operation'}\n />\n )}\n <Button\n icon=\"times\"\n size=\"sm\"\n onClick={() => onRemove(index)}\n fill=\"text\"\n variant=\"secondary\"\n title=\"Remove operation\"\n />\n </div>\n </>\n )}\n {state.isOpen && (\n <div className={styles.selectWrapper}>\n <Select\n autoFocus\n openMenuOnFocus\n placeholder=\"Replace with\"\n options={state.alternatives}\n isOpen={true}\n onCloseMenu={onToggleSwitcher}\n onChange={(value) => {\n if (value.value) {\n // Operation should exist if it is selectable\n const newDef = queryModeller.getOperationDefinition(value.value.id)!;\n\n // copy default params, and override with all current params\n const newParams = [...newDef.defaultParams];\n for (let i = 0; i < Math.min(operation.params.length, newParams.length); i++) {\n if (newDef.params[i].type === definition.params[i].type) {\n newParams[i] = operation.params[i];\n }\n }\n\n const changedOp = { ...operation, params: newParams, id: value.value.id };\n onChange(\n index,\n definition.changeTypeHandler ? definition.changeTypeHandler(changedOp, newDef) : changedOp\n );\n }\n }}\n />\n </div>\n )}\n </div>\n );\n }\n);\n\nOperationHeader.displayName = 'OperationHeader';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n header: css({\n borderBottom: `1px solid ${theme.colors.border.medium}`,\n padding: theme.spacing(0.5, 0.5, 0.5, 1),\n display: 'flex',\n alignItems: 'center',\n }),\n operationHeaderButtons: css({\n opacity: 1,\n }),\n selectWrapper: css({\n paddingRight: theme.spacing(2),\n }),\n };\n};\n"],"names":["getStyles"],"mappings":"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"}

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

@@ -6,7 +6,7 @@ import { useStyles2, Button, Portal } from '@grafana/ui';
 import { FlexItem } from '../../QueryEditor/FlexItem.js';
 const OperationInfoButton = memo(({ definition, operation, innerQueryPlaceholder }) => {
-  const styles = useStyles2(getStyles);
+  const styles = useStyles2(getStyles$a);
   const [show, setShow] = useState(false);
   const { getTooltipProps, setTooltipRef, setTriggerRef, visible } = usePopperTooltip({
     placement: "top",
@@ -44,7 +44,7 @@ const OperationInfoButton = memo(({ definition, operation, innerQueryPlaceholder
   ))));
 });
 OperationInfoButton.displayName = "OperationDocs";
-const getStyles = (theme) => {
+const getStyles$a = (theme) => {
   return {
     docBox: css({
       overflow: "hidden",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"OperationInfoButton.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationInfoButton.tsx"],"sourcesContent":["import React, { useState, memo } from 'react';\nimport { css } from '@emotion/css';\nimport { usePopperTooltip } from 'react-popper-tooltip';\n\nimport { type GrafanaTheme2, renderMarkdown } from '@grafana/data';\nimport { Button, Portal, useStyles2 } from '@grafana/ui';\n\nimport { type QueryBuilderOperation, type QueryBuilderOperationDefinition } from '../types';\nimport { FlexItem } from '../../QueryEditor/FlexItem';\n\ninterface Props {\n operation: QueryBuilderOperation;\n definition: QueryBuilderOperationDefinition;\n innerQueryPlaceholder: string;\n}\n\nexport const OperationInfoButton = memo<Props>(({ definition, operation, innerQueryPlaceholder }) => {\n const styles = useStyles2(getStyles);\n const [show, setShow] = useState(false);\n const { getTooltipProps, setTooltipRef, setTriggerRef, visible } = usePopperTooltip({\n placement: 'top',\n visible: show,\n offset: [0, 16],\n onVisibleChange: setShow,\n interactive: true,\n trigger: ['click'],\n });\n\n return (\n <>\n <Button\n title=\"Click to show description\"\n ref={setTriggerRef}\n icon=\"info-circle\"\n size=\"sm\"\n variant=\"secondary\"\n fill=\"text\"\n />\n {visible && (\n <Portal>\n <div ref={setTooltipRef} {...getTooltipProps()} className={styles.docBox}>\n <div className={styles.docBoxHeader}>\n <span>{definition.renderer(operation, definition, innerQueryPlaceholder)}</span>\n <FlexItem grow={1} />\n <Button\n icon=\"times\"\n onClick={() => setShow(false)}\n fill=\"text\"\n variant=\"secondary\"\n title=\"Remove operation\"\n />\n </div>\n <div\n className={styles.docBoxBody}\n dangerouslySetInnerHTML={{ __html: getOperationDocs(definition, operation) }}\n ></div>\n </div>\n </Portal>\n )}\n </>\n );\n});\n\nOperationInfoButton.displayName = 'OperationDocs';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n docBox: css({\n overflow: 'hidden',\n background: theme.colors.background.primary,\n border: `1px solid ${theme.colors.border.strong}`,\n boxShadow: theme.shadows.z3,\n maxWidth: '600px',\n padding: theme.spacing(1),\n borderRadius: theme.shape.radius.default,\n zIndex: theme.zIndex.tooltip,\n }),\n docBoxHeader: css({\n fontSize: theme.typography.h5.fontSize,\n fontFamily: theme.typography.fontFamilyMonospace,\n paddingBottom: theme.spacing(1),\n display: 'flex',\n alignItems: 'center',\n }),\n docBoxBody: css({\n // The markdown paragraph has a marginBottom this removes it\n marginBottom: theme.spacing(-1),\n color: theme.colors.text.secondary,\n }),\n signature: css({\n fontSize: theme.typography.bodySmall.fontSize,\n fontFamily: theme.typography.fontFamilyMonospace,\n }),\n dropdown: css({\n opacity: 0,\n color: theme.colors.text.secondary,\n }),\n };\n};\nfunction getOperationDocs(def: QueryBuilderOperationDefinition, op: QueryBuilderOperation): string {\n return renderMarkdown(def.explainHandler ? def.explainHandler(op, def) : (def.documentation ?? 'no docs'));\n}\n"],"names":[],"mappings":";;;;;;;AAgBO,MAAM,sBAAsB,~~IAAY~~,~~CAAA~~,CAAC,EAAE,~~UAAY~~,~~EAAA~~,SAAA,EAAW,~~uBAA4B~~,~~KAAA~~;AACnG,~~EAAM~~,~~MAAA~~,MAAA,GAAS,~~WAAW~~,~~SAAS~~,CAAA;AACnC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AACtC,EAAA,MAAM,EAAE,~~eAAiB~~,~~EAAA~~,aAAA,EAAe,~~aAAe~~,~~EAAA~~,OAAA,KAAY,~~gBAAiB~~,~~CAAA~~;AAAA,IAClF,~~SAAW~~,~~EAAA~~,KAAA;AAAA,IACX,~~OAAS~~,~~EAAA~~,IAAA;AAAA,IACT,MAAA,EAAQ,CAAC,CAAA,EAAG,EAAE,CAAA;AAAA,IACd,~~eAAiB~~,~~EAAA~~,OAAA;AAAA,IACjB,~~WAAa~~,~~EAAA~~,IAAA;AAAA,IACb,OAAA,EAAS,CAAC,OAAO;AAAA,GAClB,CAAA;AAED,EAAA,~~uBAEI~~,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,~~kBAAA~~,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,~~KAAM~~,~~EAAA~~,2BAAA;AAAA,MACN,~~GAAK~~,~~EAAA~~,aAAA;AAAA,MACL,~~IAAK~~,~~EAAA~~,aAAA;AAAA,MACL,~~IAAK~~,~~EAAA~~,IAAA;AAAA,MACL,~~OAAQ~~,~~EAAA~~,WAAA;AAAA,MACR,~~IAAK~~,~~EAAA~~;AAAA;AAAA,~~GAEN~~,~~EAAA~~,OAAA,~~oBACE~~,KAAA,CAAA,aAAA,~~CAAA~~,MAAA,EAAA,IAAA,sCACE,~~KAAI~~,EAAA,~~EAAA~~,GAAA,EAAK,~~aAAgB~~,~~EAAA~~,GAAG,~~eAAgB~~,~~EAAA~~,EAAG,~~SAAW~~,~~EAAA~~,MAAA,CAAO,~~0BAC/D~~,KAAA,CAAA,aAAA,~~CAAA~~,KAAA,EAAA,EAAI,~~SAAW~~,~~EAAA~~,MAAA,CAAO,~~YACrB~~,EAAA,~~kBAAA~~,KAAA,CAAA,aAAA,CAAC,~~MAAM~~,EAAA,IAAA,~~EAAA~~,UAAA,CAAW,SAAS,~~SAAW~~,~~EAAA~~,UAAA,EAAY,qBAAqB,CAAE,~~CACzE~~,~~kBAAA~~,KAAA,CAAA,aAAA,CAAC,~~QAAS~~,EAAA,~~EAAA~~,IAAA,EAAM,GAAG,~~CACnB~~,~~kBAAA~~,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,~~IAAK~~,~~EAAA~~,OAAA;AAAA,MACL,OAAA,EAAS,MAAM,OAAA,CAAQ,KAAK,CAAA;AAAA,MAC5B,~~IAAK~~,~~EAAA~~,MAAA;AAAA,MACL,~~OAAQ~~,~~EAAA~~,WAAA;AAAA,MACR,~~KAAM~~,~~EAAA~~;AAAA;AAAA,GAEV,~~CACA~~,~~kBAAA~~,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,~~MAAO~~,~~CAAA~~,UAAA;AAAA,MAClB,yBAAyB,EAAE,MAAA,EAAQ,~~gBAAiB~~,~~CAAA~~,UAAA,EAAY,SAAS,~~CAAE~~;~~AAAA~~;AAAA,GAE/E,CACF,CAEJ,CAAA;AAEJ,CAAC;AAED,mBAAA,CAAoB,~~WAAc~~,~~GAAA~~,eAAA;AAElC,~~MAAM~~,~~SAAA~~,GAAY,CAAC,KAAyB~~,KAAA~~;AAC1C,~~EAAO~~,~~OAAA~~;AAAA,IACL,QAAQ,~~GAAI~~,~~CAAA~~;AAAA,MACV,~~QAAU~~,~~EAAA~~,QAAA;AAAA,MACV,UAAA,EAAY,~~KAAM~~,~~CAAA~~,MAAA,CAAO,~~UAAW~~,~~CAAA~~,OAAA;AAAA,MACpC,~~MAAQ~~,~~EAAA~~,CAAA,UAAA,EAAa,~~KAAM~~,~~CAAA~~,MAAA,CAAO,OAAO,MAAM,CAAA,CAAA;AAAA,MAC/C,SAAA,EAAW,MAAM,~~OAAQ~~,~~CAAA~~,EAAA;AAAA,MACzB,~~QAAU~~,~~EAAA~~,OAAA;AAAA,MACV,OAAA,EAAS,~~KAAM~~,~~CAAA~~,OAAA,CAAQ,CAAC,CAAA;AAAA,MACxB,YAAA,EAAc,~~KAAM~~,~~CAAA~~,KAAA,CAAM,~~MAAO~~,~~CAAA~~,OAAA;AAAA,MACjC,MAAA,EAAQ,MAAM,~~MAAO~~,~~CAAA~~;AAAA,KACtB,CAAA;AAAA,IACD,cAAc,~~GAAI~~,~~CAAA~~;AAAA,MAChB,QAAA,EAAU,~~KAAM~~,~~CAAA~~,UAAA,CAAW,~~EAAG~~,~~CAAA~~,QAAA;AAAA,MAC9B,UAAA,EAAY,MAAM,~~UAAW~~,~~CAAA~~,mBAAA;AAAA,MAC7B,aAAA,EAAe,~~KAAM~~,~~CAAA~~,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC9B,~~OAAS~~,~~EAAA~~,MAAA;AAAA,MACT,~~UAAY~~,~~EAAA~~;AAAA,KACb,CAAA;AAAA,IACD,YAAY,~~GAAI~~,~~CAAA~~;AAAA;AAAA,MAEd,YAAA,EAAc,~~KAAM~~,~~CAAA~~,OAAA,CAAQ,EAAE,CAAA;AAAA,MAC9B,KAAA,EAAO,~~KAAM~~,~~CAAA~~,MAAA,CAAO,~~IAAK~~,~~CAAA~~;AAAA,KAC1B,CAAA;AAAA,IACD,WAAW,~~GAAI~~,~~CAAA~~;AAAA,MACb,QAAA,EAAU,~~KAAM~~,~~CAAA~~,UAAA,CAAW,~~SAAU~~,~~CAAA~~,QAAA;AAAA,MACrC,UAAA,EAAY,MAAM,~~UAAW~~,~~CAAA~~;AAAA,KAC9B,CAAA;AAAA,IACD,UAAU,~~GAAI~~,~~CAAA~~;AAAA,MACZ,~~OAAS~~,~~EAAA~~,CAAA;AAAA,MACT,KAAA,EAAO,~~KAAM~~,~~CAAA~~,MAAA,CAAO,~~IAAK~~,~~CAAA~~;AAAA,KAC1B;AAAA,GACH;AACF,CAAA;AACA,SAAS,gBAAA,CAAiB,KAAsC,EAAmC~~,EAAA~~;AAnGnG,EAAA,IAAA,EAAA;AAoGE,~~EAAO~~,~~OAAA~~,cAAA,CAAe,~~GAAI~~,~~CAAA~~,cAAA,GAAiB,~~GAAI~~,~~CAAA~~,cAAA,CAAe,EAAI,~~EAAA,~~GAAG,~~CAAK~~,GAAA,~~CAAA~~,EAAA,GAAA,GAAA,CAAI,~~aAAJ~~,~~KAAA~~,IAAA,GAAA,EAAA,GAAqB,SAAU,CAAA;AAC3G;;;;"}
1	+ {"version":3,"file":"OperationInfoButton.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationInfoButton.tsx"],"sourcesContent":["import React, { useState, memo } from 'react';\nimport { css } from '@emotion/css';\nimport { usePopperTooltip } from 'react-popper-tooltip';\n\nimport { type GrafanaTheme2, renderMarkdown } from '@grafana/data';\nimport { Button, Portal, useStyles2 } from '@grafana/ui';\n\nimport { type QueryBuilderOperation, type QueryBuilderOperationDefinition } from '../types';\nimport { FlexItem } from '../../QueryEditor/FlexItem';\n\ninterface Props {\n operation: QueryBuilderOperation;\n definition: QueryBuilderOperationDefinition;\n innerQueryPlaceholder: string;\n}\n\nexport const OperationInfoButton = memo<Props>(({ definition, operation, innerQueryPlaceholder }) => {\n const styles = useStyles2(getStyles);\n const [show, setShow] = useState(false);\n const { getTooltipProps, setTooltipRef, setTriggerRef, visible } = usePopperTooltip({\n placement: 'top',\n visible: show,\n offset: [0, 16],\n onVisibleChange: setShow,\n interactive: true,\n trigger: ['click'],\n });\n\n return (\n <>\n <Button\n title=\"Click to show description\"\n ref={setTriggerRef}\n icon=\"info-circle\"\n size=\"sm\"\n variant=\"secondary\"\n fill=\"text\"\n />\n {visible && (\n <Portal>\n <div ref={setTooltipRef} {...getTooltipProps()} className={styles.docBox}>\n <div className={styles.docBoxHeader}>\n <span>{definition.renderer(operation, definition, innerQueryPlaceholder)}</span>\n <FlexItem grow={1} />\n <Button\n icon=\"times\"\n onClick={() => setShow(false)}\n fill=\"text\"\n variant=\"secondary\"\n title=\"Remove operation\"\n />\n </div>\n <div\n className={styles.docBoxBody}\n dangerouslySetInnerHTML={{ __html: getOperationDocs(definition, operation) }}\n ></div>\n </div>\n </Portal>\n )}\n </>\n );\n});\n\nOperationInfoButton.displayName = 'OperationDocs';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n docBox: css({\n overflow: 'hidden',\n background: theme.colors.background.primary,\n border: `1px solid ${theme.colors.border.strong}`,\n boxShadow: theme.shadows.z3,\n maxWidth: '600px',\n padding: theme.spacing(1),\n borderRadius: theme.shape.radius.default,\n zIndex: theme.zIndex.tooltip,\n }),\n docBoxHeader: css({\n fontSize: theme.typography.h5.fontSize,\n fontFamily: theme.typography.fontFamilyMonospace,\n paddingBottom: theme.spacing(1),\n display: 'flex',\n alignItems: 'center',\n }),\n docBoxBody: css({\n // The markdown paragraph has a marginBottom this removes it\n marginBottom: theme.spacing(-1),\n color: theme.colors.text.secondary,\n }),\n signature: css({\n fontSize: theme.typography.bodySmall.fontSize,\n fontFamily: theme.typography.fontFamilyMonospace,\n }),\n dropdown: css({\n opacity: 0,\n color: theme.colors.text.secondary,\n }),\n };\n};\nfunction getOperationDocs(def: QueryBuilderOperationDefinition, op: QueryBuilderOperation): string {\n return renderMarkdown(def.explainHandler ? def.explainHandler(op, def) : (def.documentation ?? 'no docs'));\n}\n"],"names":["getStyles"],"mappings":"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"}

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

@@ -11,7 +11,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 '@grafana/runtime';
@@ -33,7 +33,7 @@ function OperationList({
   timeRange,
   isConflictingOperation
 }) {
-  const styles = useStyles2(getStyles);
+  const styles = useStyles2(getStyles$5);
   const { operations } = query;
   const opsToHighlight = useOperationsHighlight(operations);
   const [cascaderOpen, setCascaderOpen] = useState(false);
@@ -135,7 +135,7 @@ function useOperationsHighlight(operations) {
   } else {
     newOps = operations.map((op, index) => {
       var _a;
-      return !isSameOp(op.id, (_a = prevOperations[index]) == null ? undefined : _a.id);
+      return !isSameOp(op.id, (_a = prevOperations[index]) == null ? void 0 : _a.id);
     });
   }
   return newOps;
@@ -143,7 +143,7 @@ function useOperationsHighlight(operations) {
 function isSameOp(op1, op2) {
   return op1 === op2 || `__${op1}_by` === op2 || op1 === `__${op2}_by`;
 }
-const getStyles = (theme) => {
+const getStyles$5 = (theme) => {
   return {
     heading: css({
       label: "heading",