@grafana/plugin-ui 0.7.2 → 0.9.0

package/dist/components/VisualQueryBuilder/components/LabelFilterItem.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isConflictingLabelFilter = exports.LabelFilterItem = void 0;
+const tslib_1 = require("tslib");
+const lodash_1 = require("lodash");
+const react_1 = tslib_1.__importStar(require("react"));
+const uuid_1 = require("uuid");
+const data_1 = require("@grafana/data");
+const e2e_selectors_1 = require("@grafana/e2e-selectors");
+const ui_1 = require("@grafana/ui");
+const InputGroup_1 = require("../../QueryEditor/InputGroup");
+const AccessoryButton_1 = require("../../QueryEditor/AccessoryButton");
+const CONFLICTING_LABEL_FILTER_ERROR_MESSAGE = 'You have conflicting label filters';
+function LabelFilterItem({ item, items, defaultOp, onChange, onDelete, onGetLabelNames, onGetLabelValues, invalidLabel, invalidValue, multiValueSeparator = "|", }) {
+    var _a;
+    const [state, setState] = (0, react_1.useState)({});
+    // there's a bug in react-select where the menu doesn't recalculate its position when the options are loaded asynchronously
+    // see https://github.com/grafana/grafana/issues/63558
+    // instead, we explicitly control the menu visibility and prevent showing it until the options have fully loaded
+    const [labelNamesMenuOpen, setLabelNamesMenuOpen] = (0, react_1.useState)(false);
+    const [labelValuesMenuOpen, setLabelValuesMenuOpen] = (0, react_1.useState)(false);
+    const isMultiSelect = (operator = item.op) => {
+        var _a;
+        return (_a = operators.find((op) => op.label === operator)) === null || _a === void 0 ? void 0 : _a.isMultiValue;
+    };
+    const getSelectOptionsFromString = (item) => {
+        if (item) {
+            if (item.indexOf(multiValueSeparator) > 0) {
+                return item.split(multiValueSeparator);
+            }
+            return [item];
+        }
+        return [];
+    };
+    const getOptions = () => {
+        const labelValues = state.labelValues ? [...state.labelValues] : [];
+        const selectedOptions = getSelectOptionsFromString(item === null || item === void 0 ? void 0 : item.value).map(data_1.toOption);
+        // Remove possible duplicated values
+        return (0, lodash_1.uniqBy)([...selectedOptions, ...labelValues], 'value');
+    };
+    const isConflicting = isConflictingLabelFilter(item, items);
+    const { current: id } = (0, react_1.useRef)((0, uuid_1.v4)());
+    return (react_1.default.createElement("div", { "data-testid": "visual-query-builder-dimensions-filter-item" },
+        react_1.default.createElement(ui_1.InlineField, { error: CONFLICTING_LABEL_FILTER_ERROR_MESSAGE, invalid: isConflicting ? true : undefined },
+            react_1.default.createElement(InputGroup_1.InputGroup, null,
+                react_1.default.createElement(ui_1.Select, { placeholder: "Select label", "data-testid": e2e_selectors_1.selectors.components.QueryBuilder.labelSelect, inputId: `visual-query-builder-dimensions-filter-item-key-${id}`, width: "auto", value: item.label ? (0, data_1.toOption)(item.label) : null, allowCustomValue: true, onOpenMenu: () => tslib_1.__awaiter(this, void 0, void 0, function* () {
+                        setState({ isLoadingLabelNames: true });
+                        const labelNames = yield onGetLabelNames(item);
+                        setLabelNamesMenuOpen(true);
+                        setState({ labelNames, isLoadingLabelNames: undefined });
+                    }), onCloseMenu: () => {
+                        setLabelNamesMenuOpen(false);
+                    }, isOpen: labelNamesMenuOpen, isLoading: state.isLoadingLabelNames, options: state.labelNames, onChange: (change) => {
+                        var _a;
+                        if (change.value) {
+                            onChange(Object.assign(Object.assign({}, item), { op: (_a = item.op) !== null && _a !== void 0 ? _a : defaultOp, label: change.value }));
+                        }
+                    }, invalid: isConflicting || invalidLabel }),
+                react_1.default.createElement(ui_1.Select, { "data-testid": e2e_selectors_1.selectors.components.QueryBuilder.matchOperatorSelect, value: (0, data_1.toOption)((_a = item.op) !== null && _a !== void 0 ? _a : defaultOp), options: operators, width: "auto", onChange: (change) => {
+                        if (change.value) {
+                            onChange(Object.assign(Object.assign({}, item), { op: change.value, value: isMultiSelect(change.value) ? item.value : getSelectOptionsFromString(item === null || item === void 0 ? void 0 : item.value)[0] }));
+                        }
+                    }, invalid: isConflicting }),
+                react_1.default.createElement(ui_1.Select, { placeholder: "Select value", "data-testid": e2e_selectors_1.selectors.components.QueryBuilder.valueSelect, inputId: `visual-query-builder-dimensions-filter-item-value-${id}`, width: "auto", value: isMultiSelect()
+                        ? getSelectOptionsFromString(item === null || item === void 0 ? void 0 : item.value).map(data_1.toOption)
+                        : getSelectOptionsFromString(item === null || item === void 0 ? void 0 : item.value).map(data_1.toOption)[0], allowCustomValue: true, onOpenMenu: () => tslib_1.__awaiter(this, void 0, void 0, function* () {
+                        setState({ isLoadingLabelValues: true });
+                        const labelValues = yield onGetLabelValues(item);
+                        setState(Object.assign(Object.assign({}, state), { labelValues, isLoadingLabelValues: undefined }));
+                        setLabelValuesMenuOpen(true);
+                    }), onCloseMenu: () => {
+                        setLabelValuesMenuOpen(false);
+                    }, isOpen: labelValuesMenuOpen, isMulti: isMultiSelect(), isLoading: state.isLoadingLabelValues, options: getOptions(), onChange: (change) => {
+                        var _a, _b;
+                        if (change.value) {
+                            onChange(Object.assign(Object.assign({}, item), { value: change.value, op: (_a = item.op) !== null && _a !== void 0 ? _a : defaultOp }));
+                        }
+                        else {
+                            // otherwise, we're dealing with a multi-value select which is array of options
+                            const changes = change
+                                .map((change) => {
+                                if (change.value) {
+                                    return change.value;
+                                }
+                                else {
+                                    return undefined;
+                                }
+                            })
+                                .filter((val) => val !== undefined)
+                                .join(multiValueSeparator);
+                            onChange(Object.assign(Object.assign({}, item), { value: changes, op: (_b = item.op) !== null && _b !== void 0 ? _b : defaultOp }));
+                        }
+                    }, invalid: isConflicting || invalidValue }),
+                react_1.default.createElement(AccessoryButton_1.AccessoryButton, { "aria-label": "remove", icon: "times", variant: "secondary", onClick: onDelete })))));
+}
+exports.LabelFilterItem = LabelFilterItem;
+const operators = [
+    { label: '=', value: '=', description: 'Equals', isMultiValue: false },
+    { label: '!=', value: '!=', description: 'Does not equal', isMultiValue: false },
+    { label: '=~', value: '=~', description: 'Matches regex', isMultiValue: true },
+    { label: '!~', value: '!~', description: 'Does not match regex', isMultiValue: true },
+];
+function isConflictingLabelFilter(newLabel, labels) {
+    if (!newLabel.label || !newLabel.op || !newLabel.value) {
+        return false;
+    }
+    if (labels.length < 2) {
+        return false;
+    }
+    const operationIsNegative = newLabel.op.toString().startsWith('!');
+    const candidates = labels.filter((label) => label.label === newLabel.label && label.value === newLabel.value && label.op !== newLabel.op);
+    const conflict = candidates.some((candidate) => {
+        var _a, _b;
+        if (operationIsNegative && ((_a = candidate === null || candidate === void 0 ? void 0 : candidate.op) === null || _a === void 0 ? void 0 : _a.toString().startsWith('!')) === false) {
+            return true;
+        }
+        if (operationIsNegative === false && ((_b = candidate === null || candidate === void 0 ? void 0 : candidate.op) === null || _b === void 0 ? void 0 : _b.toString().startsWith('!'))) {
+            return true;
+        }
+        return false;
+    });
+    return conflict;
+}
+exports.isConflictingLabelFilter = isConflictingLabelFilter;
+//# sourceMappingURL=LabelFilterItem.js.map

package/dist/components/VisualQueryBuilder/components/LabelFilterItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelFilterItem.js","sourceRoot":"","sources":["../../../../src/components/VisualQueryBuilder/components/LabelFilterItem.tsx"],"names":[],"mappings":"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"}

package/dist/components/VisualQueryBuilder/components/LabelFilters.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LabelFilters = exports.MISSING_LABEL_FILTER_ERROR_MESSAGE = void 0;
+const tslib_1 = require("tslib");
+const lodash_1 = require("lodash");
+const react_1 = tslib_1.__importStar(require("react"));
+const EditorField_1 = require("../../QueryEditor/EditorField");
+const EditorFieldGroup_1 = require("../../QueryEditor/EditorFieldGroup");
+const EditorList_1 = require("../../QueryEditor/EditorList");
+const LabelFilterItem_1 = require("./LabelFilterItem");
+exports.MISSING_LABEL_FILTER_ERROR_MESSAGE = 'Select at least 1 label filter (label and value)';
+function LabelFilters({ labelsFilters, onChange, onGetLabelNames, onGetLabelValues, labelFilterRequired, multiValueSeparator, }) {
+    const defaultOp = '=';
+    const [items, setItems] = (0, react_1.useState)([{ op: defaultOp }]);
+    (0, react_1.useEffect)(() => {
+        if (labelsFilters.length > 0) {
+            setItems(labelsFilters);
+        }
+        else {
+            setItems([{ op: defaultOp }]);
+        }
+    }, [labelsFilters]);
+    const onLabelsChange = (newItems) => {
+        setItems(newItems);
+        // Extract full label filters with both label & value
+        const newLabels = newItems.filter((item) => item.label !== undefined && item.value !== undefined);
+        if (!(0, lodash_1.isEqual)(newLabels, labelsFilters)) {
+            onChange(newLabels);
+        }
+    };
+    const hasLabelFilter = items.some((item) => item.label && item.value);
+    return (react_1.default.createElement(EditorFieldGroup_1.EditorFieldGroup, null,
+        react_1.default.createElement(EditorField_1.EditorField, { label: "Label filters", error: exports.MISSING_LABEL_FILTER_ERROR_MESSAGE, invalid: labelFilterRequired && !hasLabelFilter },
+            react_1.default.createElement(EditorList_1.EditorList, { items: items, onChange: onLabelsChange, renderItem: (item, onChangeItem, onDelete) => (react_1.default.createElement(LabelFilterItem_1.LabelFilterItem, { item: item, items: items, defaultOp: defaultOp, onChange: onChangeItem, onDelete: onDelete, onGetLabelNames: onGetLabelNames, onGetLabelValues: onGetLabelValues, invalidLabel: labelFilterRequired && !item.label, invalidValue: labelFilterRequired && !item.value, multiValueSeparator: multiValueSeparator })) }))));
+}
+exports.LabelFilters = LabelFilters;
+//# sourceMappingURL=LabelFilters.js.map

package/dist/components/VisualQueryBuilder/components/LabelFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelFilters.js","sourceRoot":"","sources":["../../../../src/components/VisualQueryBuilder/components/LabelFilters.tsx"],"names":[],"mappings":";;;;AAAA,mCAAiC;AACjC,uDAAmD;AAMnD,+DAA6D;AAC7D,yEAAsE;AACtE,6DAA0D;AAC1D,uDAAoD;AAGvC,QAAA,kCAAkC,GAAG,kDAAkD,CAAC;AAYrG,SAAgB,YAAY,CAAC,EAC3B,aAAa,EACb,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,GACb;IACN,MAAM,SAAS,GAAG,GAAG,CAAC;IACtB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAA0C,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC;IAEjG,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;YAC5B,QAAQ,CAAC,aAAa,CAAC,CAAC;SACzB;aAAM;YACL,QAAQ,CAAC,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC;SAC/B;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,cAAc,GAAG,CAAC,QAAiD,EAAE,EAAE;QAC3E,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAEnB,qDAAqD;QACrD,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,EAAoC,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC;QACpI,IAAI,CAAC,IAAA,gBAAO,EAAC,SAAS,EAAE,aAAa,CAAC,EAAE;YACtC,QAAQ,CAAC,SAAS,CAAC,CAAC;SACrB;IACH,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAEtE,OAAO,CACL,8BAAC,mCAAgB;QACf,8BAAC,yBAAW,IACV,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE,0CAAkC,EACzC,OAAO,EAAE,mBAAmB,IAAI,CAAC,cAAc;YAE/C,8BAAC,uBAAU,IACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,cAAc,EACxB,UAAU,EAAE,CAAC,IAAsC,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,CAAC,CAC9E,8BAAC,iCAAe,IACd,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,EAChC,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EAAE,mBAAmB,IAAI,CAAC,IAAI,CAAC,KAAK,EAChD,YAAY,EAAE,mBAAmB,IAAI,CAAC,IAAI,CAAC,KAAK,EAChD,mBAAmB,EAAE,mBAAmB,GACxC,CACH,GACD,CACU,CACG,CACpB,CAAC;AACJ,CAAC;AA3DD,oCA2DC"}

package/dist/components/VisualQueryBuilder/components/OperationEditor.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OperationEditor = void 0;
+const tslib_1 = require("tslib");
+const css_1 = require("@emotion/css");
+const react_1 = tslib_1.__importDefault(require("react"));
+const dnd_1 = require("@hello-pangea/dnd");
+const ui_1 = require("@grafana/ui");
+const OperationEditorBody_1 = require("./OperationEditorBody");
+function OperationEditor({ operation, index, onRemove, onChange, onRunQuery, queryModeller, query, datasource, flash, highlight, timeRange, isConflictingOperation, }) {
+    const def = queryModeller.getOperationDefinition(operation.id);
+    const theme = (0, ui_1.useTheme2)();
+    const isConflicting = isConflictingOperation ? isConflictingOperation(operation, query.operations) : false;
+    const styles = getStyles(theme, isConflicting);
+    if (!def) {
+        return react_1.default.createElement("span", null,
+            "Operation ",
+            operation.id,
+            " not found");
+    }
+    const isInvalid = (isDragging) => {
+        if (isDragging) {
+            return undefined;
+        }
+        return isConflicting ? true : undefined;
+    };
+    return (react_1.default.createElement(dnd_1.Draggable, { draggableId: `operation-${index}`, index: index }, (provided, snapshot) => (react_1.default.createElement(ui_1.InlineField, { error: 'You have conflicting label filters', invalid: isInvalid(snapshot.isDragging), className: (0, css_1.cx)(styles.error, styles.cardWrapper) },
+        react_1.default.createElement(OperationEditorBody_1.OperationEditorBody, { provided: provided, flash: flash, highlight: highlight, isConflicting: isConflicting, index: index, operation: operation, definition: def, onChange: onChange, onRemove: onRemove, queryModeller: queryModeller, query: query, timeRange: timeRange, onRunQuery: onRunQuery, datasource: datasource })))));
+}
+exports.OperationEditor = OperationEditor;
+const getStyles = (theme, isConflicting) => {
+    return {
+        cardWrapper: (0, css_1.css)({
+            alignItems: 'stretch',
+        }),
+        error: (0, css_1.css)({
+            marginBottom: theme.spacing(1),
+        }),
+    };
+};
+//# sourceMappingURL=OperationEditor.js.map

package/dist/components/VisualQueryBuilder/components/OperationEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationEditor.js","sourceRoot":"","sources":["../../../../src/components/VisualQueryBuilder/components/OperationEditor.tsx"],"names":[],"mappings":";;;;AAAA,sCAAuC;AACvC,0DAA0B;AAC1B,2CAA8C;AAG9C,oCAAqD;AAOrD,+DAA4D;AAiB5D,SAAgB,eAAe,CAAwB,EACrD,SAAS,EACT,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,aAAa,EACb,KAAK,EACL,UAAU,EACV,KAAK,EACL,SAAS,EACT,SAAS,EACT,sBAAsB,GACb;IACT,MAAM,GAAG,GAAG,aAAa,CAAC,sBAAsB,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IAE/D,MAAM,KAAK,GAAG,IAAA,cAAS,GAAE,CAAC;IAC1B,MAAM,aAAa,GAAG,sBAAsB,CAAC,CAAC,CAAC,sBAAsB,CAAC,SAAS,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAC3G,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IAE/C,IAAI,CAAC,GAAG,EAAE;QACR,OAAO;;YAAiB,SAAS,CAAC,EAAE;yBAAkB,CAAC;KACxD;IAGD,MAAM,SAAS,GAAG,CAAC,UAAmB,EAAE,EAAE;QACxC,IAAI,UAAU,EAAE;YACd,OAAO,SAAS,CAAC;SAClB;QAED,OAAO,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAC1C,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,eAAS,IAAC,WAAW,EAAE,aAAa,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,IACvD,CAAC,QAAQ,EAAE,QAAQ,EAAE,EAAE,CAAC,CACvB,8BAAC,gBAAW,IACV,KAAK,EAAE,oCAAoC,EAC3C,OAAO,EAAE,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EACvC,SAAS,EAAE,IAAA,QAAE,EAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,WAAW,CAAC;QAE/C,8BAAC,yCAAmB,IAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,GAAG,EACf,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,GACtB,CACU,CACf,CACS,CACb,CAAC;AACJ,CAAC;AA7DD,0CA6DC;AAGD,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAE,aAAsB,EAAE,EAAE;IACjE,OAAO;QACL,WAAW,EAAE,IAAA,SAAG,EAAC;YACf,UAAU,EAAE,SAAS;SACtB,CAAC;QACF,KAAK,EAAE,IAAA,SAAG,EAAC;YACT,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;SAC/B,CAAC;KACH,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/VisualQueryBuilder/components/OperationEditorBody.js

@@ -0,0 +1,173 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OperationEditorBody = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const ui_1 = require("@grafana/ui");
+const css_1 = require("@emotion/css");
+const OperationHeader_1 = require("./OperationHeader");
+const OperationParamEditor_1 = require("./OperationParamEditor");
+const uuid_1 = require("uuid");
+const QueryEditor_1 = require("../../QueryEditor");
+function OperationEditorBody({ provided, flash, isConflicting, highlight, index, queryModeller, onChange, onRemove, operation, definition, query, timeRange, onRunQuery, datasource, }) {
+    const theme = (0, ui_1.useTheme2)();
+    const styles = getStyles(theme, isConflicting);
+    const shouldFlash = useFlash(flash);
+    const { current: id } = (0, react_1.useRef)((0, uuid_1.v4)());
+    const onParamValueChanged = (paramIdx, value) => {
+        const update = Object.assign(Object.assign({}, operation), { params: [...operation.params] });
+        update.params[paramIdx] = value;
+        callParamChangedThenOnChange(definition, update, index, paramIdx, onChange);
+    };
+    const onAddRestParam = () => {
+        const update = Object.assign(Object.assign({}, operation), { params: [...operation.params, ''] });
+        callParamChangedThenOnChange(definition, update, index, operation.params.length, onChange);
+    };
+    const onRemoveRestParam = (paramIdx) => {
+        const update = Object.assign(Object.assign({}, operation), { params: [...operation.params.slice(0, paramIdx), ...operation.params.slice(paramIdx + 1)] });
+        callParamChangedThenOnChange(definition, update, index, paramIdx, onChange);
+    };
+    // Handle adding button for rest params
+    let restParam;
+    if (definition.params.length > 0) {
+        const lastParamDef = definition.params[definition.params.length - 1];
+        if (lastParamDef.restParam) {
+            restParam = renderAddRestParamButton(lastParamDef, onAddRestParam, index, operation.params.length, styles);
+        }
+    }
+    return (react_1.default.createElement("div", Object.assign({ className: (0, css_1.cx)(styles.card, (shouldFlash || highlight) && styles.cardHighlight, isConflicting && styles.cardError), ref: provided.innerRef }, provided.draggableProps, { "data-testid": `operations.${index}.wrapper` }),
+        react_1.default.createElement(OperationHeader_1.OperationHeader, { operation: operation, dragHandleProps: provided.dragHandleProps, definition: definition, index: index, onChange: onChange, onRemove: onRemove, queryModeller: queryModeller }),
+        react_1.default.createElement("div", { className: styles.body }, operation.params.map((param, paramIndex) => {
+            const paramDef = definition.params[Math.min(definition.params.length - 1, paramIndex)];
+            const Editor = (0, OperationParamEditor_1.getOperationParamEditor)(paramDef);
+            return (react_1.default.createElement("div", { className: styles.paramRow, key: `${paramIndex}-1` },
+                !paramDef.hideName && (react_1.default.createElement("div", { className: styles.paramName },
+                    react_1.default.createElement("label", { htmlFor: (0, OperationParamEditor_1.getOperationParamId)(id, paramIndex) }, paramDef.name),
+                    paramDef.description && (react_1.default.createElement(ui_1.Tooltip, { placement: "top", content: paramDef.description, theme: "info" },
+                        react_1.default.createElement(ui_1.Icon, { name: "info-circle", size: "sm", className: styles.infoIcon }))))),
+                react_1.default.createElement("div", { className: styles.paramValue },
+                    react_1.default.createElement(QueryEditor_1.EditorStack, { gap: 0.5, direction: "row", alignItems: "center", wrap: false },
+                        react_1.default.createElement(Editor, { index: paramIndex, paramDef: paramDef, value: operation.params[paramIndex], operation: operation, operationId: id, onChange: onParamValueChanged, onRunQuery: onRunQuery, query: query, datasource: datasource, timeRange: timeRange, queryModeller: queryModeller }),
+                        paramDef.restParam && (operation.params.length > definition.params.length || paramDef.optional) && (react_1.default.createElement(ui_1.Button, { "data-testid": `operations.${index}.remove-rest-param`, size: "sm", fill: "text", icon: "times", variant: "secondary", title: `Remove ${paramDef.name}`, onClick: () => onRemoveRestParam(paramIndex) }))))));
+        })),
+        restParam,
+        index < query.operations.length - 1 && (react_1.default.createElement("div", { className: styles.arrow },
+            react_1.default.createElement("div", { className: styles.arrowLine }),
+            react_1.default.createElement("div", { className: styles.arrowArrow })))));
+}
+exports.OperationEditorBody = OperationEditorBody;
+const getStyles = (theme, isConflicting) => {
+    return {
+        cardWrapper: (0, css_1.css)({
+            alignItems: 'stretch',
+        }),
+        error: (0, css_1.css)({
+            marginBottom: theme.spacing(1),
+        }),
+        card: (0, css_1.css)({
+            background: theme.colors.background.primary,
+            border: `1px solid ${theme.colors.border.medium}`,
+            cursor: 'grab',
+            borderRadius: theme.shape.radius.default,
+            position: 'relative',
+            transition: 'all 0.5s ease-in 0s',
+            height: isConflicting ? 'auto' : '100%',
+        }),
+        cardError: (0, css_1.css)({
+            boxShadow: `0px 0px 4px 0px ${theme.colors.warning.main}`,
+            border: `1px solid ${theme.colors.warning.main}`,
+        }),
+        cardHighlight: (0, css_1.css)({
+            boxShadow: `0px 0px 4px 0px ${theme.colors.primary.border}`,
+            border: `1px solid ${theme.colors.primary.border}`,
+        }),
+        infoIcon: (0, css_1.css)({
+            marginLeft: theme.spacing(0.5),
+            color: theme.colors.text.secondary,
+            ':hover': {
+                color: theme.colors.text.primary,
+            },
+        }),
+        body: (0, css_1.css)({
+            margin: theme.spacing(1, 1, 0.5, 1),
+            display: 'table',
+        }),
+        paramRow: (0, css_1.css)({
+            label: 'paramRow',
+            display: 'table-row',
+            verticalAlign: 'middle',
+        }),
+        paramName: (0, css_1.css)({
+            display: 'table-cell',
+            padding: theme.spacing(0, 1, 0, 0),
+            fontSize: theme.typography.bodySmall.fontSize,
+            fontWeight: theme.typography.fontWeightMedium,
+            verticalAlign: 'middle',
+            height: '32px',
+        }),
+        paramValue: (0, css_1.css)({
+            label: 'paramValue',
+            display: 'table-cell',
+            verticalAlign: 'middle',
+        }),
+        restParam: (0, css_1.css)({
+            padding: theme.spacing(0, 1, 1, 1),
+        }),
+        arrow: (0, css_1.css)({
+            position: 'absolute',
+            top: '0',
+            right: '-18px',
+            display: 'flex',
+        }),
+        arrowLine: (0, css_1.css)({
+            height: '2px',
+            width: '8px',
+            backgroundColor: theme.colors.border.strong,
+            position: 'relative',
+            top: '14px',
+        }),
+        arrowArrow: (0, css_1.css)({
+            width: 0,
+            height: 0,
+            borderTop: `5px solid transparent`,
+            borderBottom: `5px solid transparent`,
+            borderLeft: `7px solid ${theme.colors.border.strong}`,
+            position: 'relative',
+            top: '10px',
+        }),
+    };
+};
+/**
+ * When flash is switched on makes sure it is switched of right away, so we just flash the highlight and then fade
+ * out.
+ * @param flash
+ */
+function useFlash(flash) {
+    const [keepFlash, setKeepFlash] = (0, react_1.useState)(true);
+    (0, react_1.useEffect)(() => {
+        let t;
+        if (flash) {
+            t = setTimeout(() => {
+                setKeepFlash(false);
+            }, 1000);
+        }
+        else {
+            setKeepFlash(true);
+        }
+        return () => clearTimeout(t);
+    }, [flash]);
+    return keepFlash && flash;
+}
+function callParamChangedThenOnChange(def, operation, operationIndex, paramIndex, onChange) {
+    if (def.paramChangedHandler) {
+        onChange(operationIndex, def.paramChangedHandler(paramIndex, operation, def));
+    }
+    else {
+        onChange(operationIndex, operation);
+    }
+}
+function renderAddRestParamButton(paramDef, onAddRestParam, operationIndex, paramIndex, styles) {
+    return (react_1.default.createElement("div", { className: styles.restParam, key: `${paramIndex}-2` },
+        react_1.default.createElement(ui_1.Button, { size: "sm", icon: "plus", title: `Add ${paramDef.name}`.trimEnd(), variant: "secondary", onClick: onAddRestParam, "data-testid": `operations.${operationIndex}.add-rest-param` }, paramDef.name)));
+}
+//# sourceMappingURL=OperationEditorBody.js.map

package/dist/components/VisualQueryBuilder/components/OperationEditorBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationEditorBody.js","sourceRoot":"","sources":["../../../../src/components/VisualQueryBuilder/components/OperationEditorBody.tsx"],"names":[],"mappings":"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"}

package/dist/components/VisualQueryBuilder/components/OperationExplainedBox.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OperationExplainedBox = void 0;
+const tslib_1 = require("tslib");
+const css_1 = require("@emotion/css");
+const react_1 = tslib_1.__importDefault(require("react"));
+const data_1 = require("@grafana/data");
+const ui_1 = require("@grafana/ui");
+function OperationExplainedBox({ title, stepNumber, markdown, children }) {
+    const styles = (0, ui_1.useStyles2)(getStyles);
+    return (react_1.default.createElement("div", { className: styles.box },
+        stepNumber !== undefined && react_1.default.createElement("div", { className: styles.stepNumber }, stepNumber),
+        react_1.default.createElement("div", { className: styles.boxInner },
+            title && (react_1.default.createElement("div", { className: styles.header },
+                react_1.default.createElement("span", null, title))),
+            react_1.default.createElement("div", { className: styles.body },
+                markdown && react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: (0, data_1.renderMarkdown)(markdown) } }),
+                children))));
+}
+exports.OperationExplainedBox = OperationExplainedBox;
+const getStyles = (theme) => {
+    return {
+        box: (0, css_1.css)({
+            background: theme.colors.background.secondary,
+            padding: theme.spacing(1),
+            borderRadius: theme.shape.radius.default,
+            position: 'relative',
+        }),
+        boxInner: (0, css_1.css)({
+            marginLeft: theme.spacing(4),
+        }),
+        stepNumber: (0, css_1.css)({
+            fontWeight: theme.typography.fontWeightMedium,
+            background: theme.colors.secondary.main,
+            width: '20px',
+            height: '20px',
+            borderRadius: theme.shape.radius.circle,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            position: 'absolute',
+            top: '10px',
+            left: '11px',
+            fontSize: theme.typography.bodySmall.fontSize,
+        }),
+        header: (0, css_1.css)({
+            paddingBottom: theme.spacing(0.5),
+            display: 'flex',
+            alignItems: 'center',
+            fontFamily: theme.typography.fontFamilyMonospace,
+        }),
+        body: (0, css_1.css)({
+            color: theme.colors.text.secondary,
+            'p:last-child': {
+                margin: 0,
+            },
+            a: {
+                color: theme.colors.text.link,
+                textDecoration: 'underline',
+            },
+        }),
+    };
+};
+//# sourceMappingURL=OperationExplainedBox.js.map

package/dist/components/VisualQueryBuilder/components/OperationExplainedBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationExplainedBox.js","sourceRoot":"","sources":["../../../../src/components/VisualQueryBuilder/components/OperationExplainedBox.tsx"],"names":[],"mappings":";;;;AAAA,sCAAmC;AACnC,0DAA0B;AAE1B,wCAA8D;AAC9D,oCAAyC;AAQzC,SAAgB,qBAAqB,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAkC;IAC7G,MAAM,MAAM,GAAG,IAAA,eAAU,EAAC,SAAS,CAAC,CAAC;IAErC,OAAO,CACL,uCAAK,SAAS,EAAE,MAAM,CAAC,GAAG;QACvB,UAAU,KAAK,SAAS,IAAI,uCAAK,SAAS,EAAE,MAAM,CAAC,UAAU,IAAG,UAAU,CAAO;QAClF,uCAAK,SAAS,EAAE,MAAM,CAAC,QAAQ;YAC5B,KAAK,IAAI,CACR,uCAAK,SAAS,EAAE,MAAM,CAAC,MAAM;gBAC3B,4CAAO,KAAK,CAAQ,CAChB,CACP;YACD,uCAAK,SAAS,EAAE,MAAM,CAAC,IAAI;gBACxB,QAAQ,IAAI,uCAAK,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAA,qBAAc,EAAC,QAAQ,CAAC,EAAE,GAAQ;gBACtF,QAAQ,CACL,CACF,CACF,CACP,CAAC;AACJ,CAAC;AAnBD,sDAmBC;AAED,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAE,EAAE;IACzC,OAAO;QACL,GAAG,EAAE,IAAA,SAAG,EAAC;YACP,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,SAAS;YAC7C,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;YACzB,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;YACxC,QAAQ,EAAE,UAAU;SACrB,CAAC;QACF,QAAQ,EAAE,IAAA,SAAG,EAAC;YACZ,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;SAC7B,CAAC;QACF,UAAU,EAAE,IAAA,SAAG,EAAC;YACd,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB;YAC7C,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI;YACvC,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;YACvC,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,MAAM;YACX,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,QAAQ;SAC9C,CAAC;QACF,MAAM,EAAE,IAAA,SAAG,EAAC;YACV,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;YACjC,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB;SACjD,CAAC;QACF,IAAI,EAAE,IAAA,SAAG,EAAC;YACR,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS;YAClC,cAAc,EAAE;gBACd,MAAM,EAAE,CAAC;aACV;YACD,CAAC,EAAE;gBACD,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI;gBAC7B,cAAc,EAAE,WAAW;aAC5B;SACF,CAAC;KACH,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/VisualQueryBuilder/components/OperationHeader.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OperationHeader = void 0;
+const tslib_1 = require("tslib");
+const css_1 = require("@emotion/css");
+const react_1 = tslib_1.__importStar(require("react"));
+const ui_1 = require("@grafana/ui");
+const OperationInfoButton_1 = require("./OperationInfoButton");
+const FlexItem_1 = require("../../QueryEditor/FlexItem");
+exports.OperationHeader = react_1.default.memo(({ operation, definition, index, onChange, onRemove, queryModeller, dragHandleProps }) => {
+    var _a;
+    const styles = (0, ui_1.useStyles2)(getStyles);
+    const [state, setState] = (0, react_1.useState)({});
+    const onToggleSwitcher = () => {
+        if (state.isOpen) {
+            setState(Object.assign(Object.assign({}, state), { isOpen: false }));
+        }
+        else {
+            const alternatives = queryModeller
+                .getAlternativeOperations(definition.alternativesKey)
+                .map((alt) => ({ label: alt.name, value: alt }));
+            setState({ isOpen: true, alternatives });
+        }
+    };
+    return (react_1.default.createElement("div", { className: styles.header },
+        !state.isOpen && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", Object.assign({}, dragHandleProps), (_a = definition.name) !== null && _a !== void 0 ? _a : definition.id),
+            react_1.default.createElement(FlexItem_1.FlexItem, { grow: 1 }),
+            react_1.default.createElement("div", { className: `${styles.operationHeaderButtons} operation-header-show-on-hover` },
+                react_1.default.createElement(ui_1.Button, { icon: "angle-down", size: "sm", onClick: onToggleSwitcher, fill: "text", variant: "secondary", title: "Click to view alternative operations" }),
+                react_1.default.createElement(OperationInfoButton_1.OperationInfoButton, { definition: definition, operation: operation, innerQueryPlaceholder: queryModeller.innerQueryPlaceholder }),
+                react_1.default.createElement(ui_1.Button, { icon: "times", size: "sm", onClick: () => onRemove(index), fill: "text", variant: "secondary", title: "Remove operation" })))),
+        state.isOpen && (react_1.default.createElement("div", { className: styles.selectWrapper },
+            react_1.default.createElement(ui_1.Select, { autoFocus: true, openMenuOnFocus: true, placeholder: "Replace with", options: state.alternatives, isOpen: true, onCloseMenu: onToggleSwitcher, onChange: (value) => {
+                    if (value.value) {
+                        // Operation should exist if it is selectable
+                        const newDef = queryModeller.getOperationDefinition(value.value.id);
+                        // copy default params, and override with all current params
+                        const newParams = [...newDef.defaultParams];
+                        for (let i = 0; i < Math.min(operation.params.length, newParams.length); i++) {
+                            if (newDef.params[i].type === definition.params[i].type) {
+                                newParams[i] = operation.params[i];
+                            }
+                        }
+                        const changedOp = Object.assign(Object.assign({}, operation), { params: newParams, id: value.value.id });
+                        onChange(index, definition.changeTypeHandler ? definition.changeTypeHandler(changedOp, newDef) : changedOp);
+                    }
+                } })))));
+});
+exports.OperationHeader.displayName = 'OperationHeader';
+const getStyles = (theme) => {
+    return {
+        header: (0, css_1.css)({
+            borderBottom: `1px solid ${theme.colors.border.medium}`,
+            padding: theme.spacing(0.5, 0.5, 0.5, 1),
+            display: 'flex',
+            alignItems: 'center',
+        }),
+        operationHeaderButtons: (0, css_1.css)({
+            opacity: 1,
+        }),
+        selectWrapper: (0, css_1.css)({
+            paddingRight: theme.spacing(2),
+        }),
+    };
+};
+//# sourceMappingURL=OperationHeader.js.map

package/dist/components/VisualQueryBuilder/components/OperationHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationHeader.js","sourceRoot":"","sources":["../../../../src/components/VisualQueryBuilder/components/OperationHeader.tsx"],"names":[],"mappings":";;;;AAAA,sCAAmC;AACnC,uDAAwC;AAIxC,oCAAyD;AAEzD,+DAA4D;AAG5D,yDAAsD;AAiBzC,QAAA,eAAe,GAAG,eAAK,CAAC,IAAI,CACvC,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,EAAE;;IACvF,MAAM,MAAM,GAAG,IAAA,eAAU,EAAC,SAAS,CAAC,CAAC;IACrC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAQ,EAAE,CAAC,CAAC;IAE9C,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,KAAK,CAAC,MAAM,EAAE;YAChB,QAAQ,iCAAM,KAAK,KAAE,MAAM,EAAE,KAAK,IAAG,CAAC;SACvC;aAAM;YACL,MAAM,YAAY,GAAG,aAAa;iBAC/B,wBAAwB,CAAC,UAAU,CAAC,eAAgB,CAAC;iBACrD,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;YACnD,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC;SAC1C;IACH,CAAC,CAAC;IAEF,OAAO,CACL,uCAAK,SAAS,EAAE,MAAM,CAAC,MAAM;QAC1B,CAAC,KAAK,CAAC,MAAM,IAAI,CAChB;YACE,uDAAS,eAAe,GAAG,MAAA,UAAU,CAAC,IAAI,mCAAI,UAAU,CAAC,EAAE,CAAO;YAClE,8BAAC,mBAAQ,IAAC,IAAI,EAAE,CAAC,GAAI;YACrB,uCAAK,SAAS,EAAE,GAAG,MAAM,CAAC,sBAAsB,iCAAiC;gBAC/E,8BAAC,WAAM,IACL,IAAI,EAAC,YAAY,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,gBAAgB,EACzB,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,sCAAsC,GAC5C;gBACF,8BAAC,yCAAmB,IAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,qBAAqB,EAAE,aAAa,CAAC,qBAAqB,GAAI;gBACjI,8BAAC,WAAM,IACL,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC9B,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,kBAAkB,GACxB,CACE,CACL,CACJ;QACA,KAAK,CAAC,MAAM,IAAI,CACf,uCAAK,SAAS,EAAE,MAAM,CAAC,aAAa;YAClC,8BAAC,WAAM,IACL,SAAS,QACT,eAAe,QACf,WAAW,EAAC,cAAc,EAC1B,OAAO,EAAE,KAAK,CAAC,YAAY,EAC3B,MAAM,EAAE,IAAI,EACZ,WAAW,EAAE,gBAAgB,EAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAClB,IAAI,KAAK,CAAC,KAAK,EAAE;wBACf,6CAA6C;wBAC7C,MAAM,MAAM,GAAG,aAAa,CAAC,sBAAsB,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAE,CAAC;wBAErE,4DAA4D;wBAC5D,MAAM,SAAS,GAAG,CAAC,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;wBAC5C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE;4BAC5E,IAAI,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE;gCACvD,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;6BACpC;yBACF;wBAED,MAAM,SAAS,mCAAQ,SAAS,KAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,GAAE,CAAC;wBAC1E,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,UAAU,CAAC,iBAAiB,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;qBAC7G;gBACH,CAAC,GACD,CACE,CACP,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,uBAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAEhD,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAE,EAAE;IACzC,OAAO;QACL,MAAM,EAAE,IAAA,SAAG,EAAC;YACV,YAAY,EAAE,aAAa,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE;YACvD,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;YACxC,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;SACrB,CAAC;QACF,sBAAsB,EAAE,IAAA,SAAG,EAAC;YAC1B,OAAO,EAAE,CAAC;SACX,CAAC;QACF,aAAa,EAAE,IAAA,SAAG,EAAC;YACjB,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;SAC/B,CAAC;KACH,CAAC;AACJ,CAAC,CAAC"}