@grafana/plugin-ui 0.10.9 → 0.11.0

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

@@ -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';\n\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { InlineField, Select } from '@grafana/ui';\n\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","React","change"],"mappings":";;;;;;;;;AAYA,MAAM,sCAAyC,GAAA,oCAAA;AAcxC,SAAS,eAAgB,CAAA;AAAA,EAC9B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,mBAAsB,GAAA;AACxB,CAAU,EAAA;AArCV,EAAA,IAAA,EAAA;AAsCE,EAAA,MAAM,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,QAAA,CAKvB,EAAE,CAAA;AAIL,EAAA,MAAM,CAAC,kBAAA,EAAoB,qBAAqB,CAAA,GAAI,SAAS,KAAK,CAAA;AAClE,EAAA,MAAM,CAAC,mBAAA,EAAqB,sBAAsB,CAAA,GAAI,SAAS,KAAK,CAAA;AAEpE,EAAA,MAAM,aAAgB,GAAA,CAAC,QAAW,GAAA,IAAA,CAAK,EAAO,KAAA;AAlDhD,IAAAA,IAAAA,GAAAA;AAmDI,IAAOA,OAAAA,CAAAA,GAAAA,GAAA,SAAU,CAAA,IAAA,CAAK,CAAC,EAAA,KAAO,GAAG,KAAU,KAAA,QAAQ,CAA5C,KAAA,IAAA,GAAA,SAAA,GAAAA,GAA+C,CAAA,YAAA;AAAA,GACxD;AAEA,EAAM,MAAA,0BAAA,GAA6B,CAACC,KAA4B,KAAA;AAC9D,IAAA,IAAIA,KAAM,EAAA;AACR,MAAA,IAAIA,KAAK,CAAA,OAAA,CAAQ,mBAAmB,CAAA,GAAI,CAAG,EAAA;AACzC,QAAOA,OAAAA,KAAAA,CAAK,MAAM,mBAAmB,CAAA;AAAA;AAEvC,MAAA,OAAO,CAACA,KAAI,CAAA;AAAA;AAEd,IAAA,OAAO,EAAC;AAAA,GACV;AAEA,EAAA,MAAM,aAAa,MAAsC;AACvD,IAAM,MAAA,WAAA,GAAc,MAAM,WAAc,GAAA,CAAC,GAAG,KAAM,CAAA,WAAW,IAAI,EAAC;AAClE,IAAA,MAAM,kBAAkB,0BAA2B,CAAA,IAAA,IAAA,IAAA,GAAA,SAAA,GAAA,IAAA,CAAM,KAAK,CAAA,CAAE,IAAI,QAAQ,CAAA;AAG5E,IAAA,OAAO,OAAO,CAAC,GAAG,iBAAiB,GAAG,WAAW,GAAG,OAAO,CAAA;AAAA,GAC7D;AAEA,EAAM,MAAA,aAAA,GAAgB,wBAAyB,CAAA,IAAA,EAAM,KAAK,CAAA;AAC1D,EAAA,MAAM,EAAE,OAAS,EAAA,EAAA,EAAO,GAAA,MAAA,CAAO,IAAI,CAAA;AAEnC,EAAA,uBACGC,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,aAAY,EAAA,6CAAA,EAAA,kBACdA,cAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,KAAO,EAAA,sCAAA,EAAwC,OAAS,EAAA,aAAA,GAAgB,IAAO,GAAA,SAAA,EAAA,+CACzF,UACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAY,EAAA,cAAA;AAAA,MACZ,aAAA,EAAa,SAAU,CAAA,UAAA,CAAW,YAAa,CAAA,WAAA;AAAA,MAC/C,OAAA,EAAS,mDAAmD,EAAE,CAAA,CAAA;AAAA,MAC9D,KAAM,EAAA,MAAA;AAAA,MACN,OAAO,IAAK,CAAA,KAAA,GAAQ,QAAS,CAAA,IAAA,CAAK,KAAK,CAAI,GAAA,IAAA;AAAA,MAC3C,gBAAgB,EAAA,IAAA;AAAA,MAChB,YAAY,YAAY;AACtB,QAAS,QAAA,CAAA,EAAE,mBAAqB,EAAA,IAAA,EAAM,CAAA;AACtC,QAAM,MAAA,UAAA,GAAa,MAAM,eAAA,CAAgB,IAAI,CAAA;AAC7C,QAAA,qBAAA,CAAsB,IAAI,CAAA;AAC1B,QAAA,QAAA,CAAS,EAAE,UAAA,EAAY,mBAAqB,EAAA,SAAA,EAAW,CAAA;AAAA,OACzD;AAAA,MACA,aAAa,MAAM;AACjB,QAAA,qBAAA,CAAsB,KAAK,CAAA;AAAA,OAC7B;AAAA,MACA,MAAQ,EAAA,kBAAA;AAAA,MACR,WAAW,KAAM,CAAA,mBAAA;AAAA,MACjB,SAAS,KAAM,CAAA,UAAA;AAAA,MACf,QAAA,EAAU,CAAC,MAAW,KAAA;AAlGlC,QAAAF,IAAAA,GAAAA;AAmGc,QAAA,IAAI,OAAO,KAAO,EAAA;AAChB,UAAS,QAAA,CAAA;AAAA,YACP,GAAG,IAAA;AAAA,YACH,EAAIA,EAAAA,CAAAA,GAAAA,GAAA,IAAK,CAAA,EAAA,KAAL,OAAAA,GAAW,GAAA,SAAA;AAAA,YACf,OAAO,MAAO,CAAA;AAAA,WACf,CAAA;AAAA;AACH,OACF;AAAA,MACA,SAAS,aAAiB,IAAA;AAAA;AAAA,GAG5B,kBAAAE,cAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAa,SAAU,CAAA,UAAA,CAAW,YAAa,CAAA,mBAAA;AAAA,MAC/C,KAAO,EAAA,QAAA,CAAA,CAAS,EAAK,GAAA,IAAA,CAAA,EAAA,KAAL,YAAW,SAAS,CAAA;AAAA,MACpC,OAAS,EAAA,SAAA;AAAA,MACT,KAAM,EAAA,MAAA;AAAA,MACN,QAAA,EAAU,CAAC,MAAW,KAAA;AACpB,QAAA,IAAI,OAAO,KAAO,EAAA;AAChB,UAAS,QAAA,CAAA;AAAA,YACP,GAAG,IAAA;AAAA,YACH,IAAI,MAAO,CAAA,KAAA;AAAA,YACX,KAAA,EAAO,aAAc,CAAA,MAAA,CAAO,KAAK,CAAA,GAAI,IAAK,CAAA,KAAA,GAAQ,0BAA2B,CAAA,IAAA,IAAA,IAAA,GAAA,SAAA,GAAA,IAAA,CAAM,KAAK,CAAA,CAAE,CAAC;AAAA,WAC5F,CAAA;AAAA;AACH,OACF;AAAA,MACA,OAAS,EAAA;AAAA;AAAA,GAGX,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAY,EAAA,cAAA;AAAA,MACZ,aAAA,EAAa,SAAU,CAAA,UAAA,CAAW,YAAa,CAAA,WAAA;AAAA,MAC/C,OAAA,EAAS,qDAAqD,EAAE,CAAA,CAAA;AAAA,MAChE,KAAM,EAAA,MAAA;AAAA,MACN,OACE,aAAc,EAAA,GACV,0BAA2B,CAAA,IAAA,IAAA,IAAA,GAAA,SAAA,GAAA,IAAA,CAAM,KAAK,CAAE,CAAA,GAAA,CAAI,QAAQ,CAAA,GACpD,2BAA2B,IAAM,IAAA,IAAA,GAAA,SAAA,GAAA,IAAA,CAAA,KAAK,EAAE,GAAI,CAAA,QAAQ,EAAE,CAAC,CAAA;AAAA,MAE7D,gBAAgB,EAAA,IAAA;AAAA,MAChB,YAAY,YAAY;AACtB,QAAS,QAAA,CAAA,EAAE,oBAAsB,EAAA,IAAA,EAAM,CAAA;AACvC,QAAM,MAAA,WAAA,GAAc,MAAM,gBAAA,CAAiB,IAAI,CAAA;AAC/C,QAAS,QAAA,CAAA;AAAA,UACP,GAAG,KAAA;AAAA,UACH,WAAA;AAAA,UACA,oBAAsB,EAAA;AAAA,SACvB,CAAA;AACD,QAAA,sBAAA,CAAuB,IAAI,CAAA;AAAA,OAC7B;AAAA,MACA,aAAa,MAAM;AACjB,QAAA,sBAAA,CAAuB,KAAK,CAAA;AAAA,OAC9B;AAAA,MACA,MAAQ,EAAA,mBAAA;AAAA,MACR,SAAS,aAAc,EAAA;AAAA,MACvB,WAAW,KAAM,CAAA,oBAAA;AAAA,MACjB,SAAS,UAAW,EAAA;AAAA,MACpB,QAAA,EAAU,CAAC,MAAW,KAAA;AA3JlC,QAAA,IAAAF,GAAA,EAAA,EAAA;AA4Jc,QAAA,IAAI,OAAO,KAAO,EAAA;AAChB,UAAS,QAAA,CAAA;AAAA,YACP,GAAG,IAAA;AAAA,YACH,OAAO,MAAO,CAAA,KAAA;AAAA,YACd,EAAIA,EAAAA,CAAAA,GAAAA,GAAA,IAAK,CAAA,EAAA,KAAL,OAAAA,GAAW,GAAA;AAAA,WAChB,CAAA;AAAA,SACI,MAAA;AAEL,UAAA,MAAM,OAAU,GAAA,MAAA,CACb,GAAI,CAAA,CAACG,OAAoC,KAAA;AACxC,YAAA,IAAIA,QAAO,KAAO,EAAA;AAChB,cAAA,OAAOA,OAAO,CAAA,KAAA;AAAA,aACT,MAAA;AACL,cAAO,OAAA,SAAA;AAAA;AACT,WACD,EACA,MAAO,CAAA,CAAC,QAA4B,GAAQ,KAAA,SAAS,CACrD,CAAA,IAAA,CAAK,mBAAmB,CAAA;AAC3B,UAAS,QAAA,CAAA,EAAE,GAAG,IAAA,EAAM,KAAO,EAAA,OAAA,EAAS,KAAI,EAAK,GAAA,IAAA,CAAA,EAAA,KAAL,IAAW,GAAA,EAAA,GAAA,SAAA,EAAW,CAAA;AAAA;AAChE,OACF;AAAA,MACA,SAAS,aAAiB,IAAA;AAAA;AAAA,GAE5B,kBAAAD,cAAA,CAAA,aAAA,CAAC,eAAgB,EAAA,EAAA,YAAA,EAAW,QAAS,EAAA,IAAA,EAAK,OAAQ,EAAA,OAAA,EAAQ,WAAY,EAAA,OAAA,EAAS,QAAU,EAAA,CAC3F,CACF,CACF,CAAA;AAEJ;AAEA,MAAM,SAAY,GAAA;AAAA,EAChB,EAAE,OAAO,GAAK,EAAA,KAAA,EAAO,KAAK,WAAa,EAAA,QAAA,EAAU,cAAc,KAAM,EAAA;AAAA,EACrE,EAAE,OAAO,IAAM,EAAA,KAAA,EAAO,MAAM,WAAa,EAAA,gBAAA,EAAkB,cAAc,KAAM,EAAA;AAAA,EAC/E,EAAE,OAAO,IAAM,EAAA,KAAA,EAAO,MAAM,WAAa,EAAA,eAAA,EAAiB,cAAc,IAAK,EAAA;AAAA,EAC7E,EAAE,OAAO,IAAM,EAAA,KAAA,EAAO,MAAM,WAAa,EAAA,sBAAA,EAAwB,cAAc,IAAK;AACtF,CAAA;AAEgB,SAAA,wBAAA,CACd,UACA,MACS,EAAA;AACT,EAAI,IAAA,CAAC,SAAS,KAAS,IAAA,CAAC,SAAS,EAAM,IAAA,CAAC,SAAS,KAAO,EAAA;AACtD,IAAO,OAAA,KAAA;AAAA;AAGT,EAAI,IAAA,MAAA,CAAO,SAAS,CAAG,EAAA;AACrB,IAAO,OAAA,KAAA;AAAA;AAGT,EAAA,MAAM,sBAAsB,QAAS,CAAA,EAAA,CAAG,QAAS,EAAA,CAAE,WAAW,GAAG,CAAA;AAEjE,EAAA,MAAM,aAAa,MAAO,CAAA,MAAA;AAAA,IACxB,CAAC,KAAA,KAAU,KAAM,CAAA,KAAA,KAAU,QAAS,CAAA,KAAA,IAAS,KAAM,CAAA,KAAA,KAAU,QAAS,CAAA,KAAA,IAAS,KAAM,CAAA,EAAA,KAAO,QAAS,CAAA;AAAA,GACvG;AAEA,EAAA,MAAM,QAAW,GAAA,UAAA,CAAW,IAAK,CAAA,CAAC,SAAc,KAAA;AAnNlD,IAAA,IAAA,EAAA,EAAA,EAAA;AAoNI,IAAA,IAAI,yBAAuB,EAAW,GAAA,SAAA,IAAA,IAAA,GAAA,SAAA,GAAA,SAAA,CAAA,EAAA,KAAX,sBAAe,QAAW,EAAA,CAAA,UAAA,CAAW,UAAS,KAAO,EAAA;AAC9E,MAAO,OAAA,IAAA;AAAA;AAET,IAAA,IAAI,wBAAwB,KAAS,KAAA,CAAA,EAAA,GAAA,SAAA,IAAA,IAAA,GAAA,SAAA,GAAA,SAAA,CAAW,OAAX,IAAe,GAAA,SAAA,GAAA,EAAA,CAAA,QAAA,EAAA,CAAW,WAAW,GAAM,CAAA,CAAA,EAAA;AAC9E,MAAO,OAAA,IAAA;AAAA;AAET,IAAO,OAAA,KAAA;AAAA,GACR,CAAA;AAED,EAAO,OAAA,QAAA;AACT;;;;"}
+{"version":3,"file":"LabelFilterItem.js","sources":["../../../../../src/components/VisualQueryBuilder/components/LabelFilterItem.tsx"],"sourcesContent":["import { uniqBy } from 'lodash';\nimport { useRef, useState } from 'react';\nimport { v4 } from 'uuid';\n\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { InlineField, Select } from '@grafana/ui';\n\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

@@ -1,5 +1,6 @@
+import { jsx } from 'react/jsx-runtime';
 import { isEqual } from 'lodash';
-import React__default, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import '@grafana/data';
 import { EditorField } from '../../QueryEditor/EditorField.js';
 import { EditorFieldGroup } from '../../QueryEditor/EditorFieldGroup.js';
@@ -34,36 +35,36 @@ function LabelFilters({
     }
   };
   const hasLabelFilter = items.some((item) => item.label && item.value);
-  return /* @__PURE__ */ React__default.createElement(EditorFieldGroup, null, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(EditorFieldGroup, { children: /* @__PURE__ */ jsx(
     EditorField,
     {
       label: "Label filters",
       error: MISSING_LABEL_FILTER_ERROR_MESSAGE,
-      invalid: labelFilterRequired && !hasLabelFilter
-    },
-    /* @__PURE__ */ React__default.createElement(
-      EditorList,
-      {
-        items,
-        onChange: onLabelsChange,
-        renderItem: (item, onChangeItem, onDelete) => /* @__PURE__ */ React__default.createElement(
-          LabelFilterItem,
-          {
-            item,
-            items,
-            defaultOp,
-            onChange: onChangeItem,
-            onDelete,
-            onGetLabelNames,
-            onGetLabelValues,
-            invalidLabel: labelFilterRequired && !item.label,
-            invalidValue: labelFilterRequired && !item.value,
-            multiValueSeparator
-          }
-        )
-      }
-    )
-  ));
+      invalid: labelFilterRequired && !hasLabelFilter,
+      children: /* @__PURE__ */ jsx(
+        EditorList,
+        {
+          items,
+          onChange: onLabelsChange,
+          renderItem: (item, onChangeItem, onDelete) => /* @__PURE__ */ jsx(
+            LabelFilterItem,
+            {
+              item,
+              items,
+              defaultOp,
+              onChange: onChangeItem,
+              onDelete,
+              onGetLabelNames,
+              onGetLabelValues,
+              invalidLabel: labelFilterRequired && !item.label,
+              invalidValue: labelFilterRequired && !item.value,
+              multiValueSeparator
+            }
+          )
+        }
+      )
+    }
+  ) });
 }
 
 export { LabelFilters, MISSING_LABEL_FILTER_ERROR_MESSAGE };

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

@@ -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":["React"],"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,oDACG,gBACC,EAAA,IAAA,kBAAAA,cAAA,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,oBAEjCA,cAAA,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,qBAAAA,cAAA,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;;;;"}
+{"version":3,"file":"LabelFilters.js","sources":["../../../../../src/components/VisualQueryBuilder/components/LabelFilters.tsx"],"sourcesContent":["import { isEqual } from 'lodash';\nimport { 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,2BACG,gBACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,eAAA;AAAA,MACN,KAAO,EAAA,kCAAA;AAAA,MACP,OAAA,EAAS,uBAAuB,CAAC,cAAA;AAAA,MAEjC,QAAA,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,KAAA;AAAA,UACA,QAAU,EAAA,cAAA;AAAA,UACV,UAAY,EAAA,CAAC,IAAwC,EAAA,YAAA,EAAc,QACjE,qBAAA,GAAA;AAAA,YAAC,eAAA;AAAA,YAAA;AAAA,cACC,IAAA;AAAA,cACA,KAAA;AAAA,cACA,SAAA;AAAA,cACA,QAAU,EAAA,YAAA;AAAA,cACV,QAAA;AAAA,cACA,eAAA;AAAA,cACA,gBAAA;AAAA,cACA,YAAA,EAAc,mBAAuB,IAAA,CAAC,IAAK,CAAA,KAAA;AAAA,cAC3C,YAAA,EAAc,mBAAuB,IAAA,CAAC,IAAK,CAAA,KAAA;AAAA,cAC3C;AAAA;AAAA;AACF;AAAA;AAEJ;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,8 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx, css } from '@emotion/css';
-import React__default from 'react';
 import { Draggable } from '@hello-pangea/dnd';
 import '@grafana/data';
 import { useTheme2, InlineField } from '@grafana/ui';
+import 'react';
 import { OperationEditorBody } from './OperationEditorBody.js';
 
 function OperationEditor({
@@ -25,7 +26,11 @@ function OperationEditor({
   const isConflicting = isConflictingOperation ? isConflictingOperation(operation, query.operations) : false;
   const styles = getStyles(theme);
   if (!def) {
-    return /* @__PURE__ */ React__default.createElement("span", null, "Operation ", operation.id, " not found");
+    return /* @__PURE__ */ jsxs("span", { children: [
+      "Operation ",
+      operation.id,
+      " not found"
+    ] });
   }
   const isInvalid = (isDragging) => {
     if (isDragging) {
@@ -33,34 +38,34 @@ function OperationEditor({
     }
     return isConflicting ? true : undefined;
   };
-  return /* @__PURE__ */ React__default.createElement(Draggable, { draggableId: `operation-${index}`, index }, (provided, snapshot) => /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(Draggable, { draggableId: `operation-${index}`, index, children: (provided, snapshot) => /* @__PURE__ */ jsx(
     InlineField,
     {
       error: "You have conflicting label filters",
       invalid: isInvalid(snapshot.isDragging),
-      className: cx(styles.error, styles.cardWrapper)
-    },
-    /* @__PURE__ */ React__default.createElement(
-      OperationEditorBody,
-      {
-        provided,
-        flash,
-        highlight,
-        isConflicting,
-        index,
-        operation,
-        definition: def,
-        onChange,
-        onRemove,
-        onToggle,
-        queryModeller,
-        query,
-        timeRange,
-        onRunQuery,
-        datasource
-      }
-    )
-  ));
+      className: cx(styles.error, styles.cardWrapper),
+      children: /* @__PURE__ */ jsx(
+        OperationEditorBody,
+        {
+          provided,
+          flash,
+          highlight,
+          isConflicting,
+          index,
+          operation,
+          definition: def,
+          onChange,
+          onRemove,
+          onToggle,
+          queryModeller,
+          query,
+          timeRange,
+          onRunQuery,
+          datasource
+        }
+      )
+    }
+  ) });
 }
 const getStyles = (theme, isConflicting) => {
   return {

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

@@ -1 +1 @@
-{"version":3,"file":"OperationEditor.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationEditor.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport React from 'react';\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":["React"],"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,uBAAQA,cAAA,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,uBAAAA,cAAA,CAAA,aAAA,CAAC,aAAU,WAAa,EAAA,CAAA,UAAA,EAAa,KAAK,CAAI,CAAA,EAAA,KAAA,EAAA,EAC3C,CAAC,QAAA,EAAU,QACV,qBAAAA,cAAA,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,oBAE9CA,cAAA,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;;;;"}
+{"version":3,"file":"OperationEditor.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationEditor.tsx"],"sourcesContent":["import { 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":";;;;;;;;AAyBO,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,4BAAQ,MAAK,EAAA,EAAA,QAAA,EAAA;AAAA,MAAA,YAAA;AAAA,MAAW,SAAU,CAAA,EAAA;AAAA,MAAG;AAAA,KAAU,EAAA,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,GAAA,CAAC,aAAU,WAAa,EAAA,CAAA,UAAA,EAAa,KAAK,CAAI,CAAA,EAAA,KAAA,EAC3C,QAAC,EAAA,CAAA,QAAA,EAAU,QACV,qBAAA,GAAA;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,CAAA;AAAA,MAE9C,QAAA,kBAAA,GAAA;AAAA,QAAC,mBAAA;AAAA,QAAA;AAAA,UACC,QAAA;AAAA,UACA,KAAA;AAAA,UACA,SAAA;AAAA,UACA,aAAA;AAAA,UACA,KAAA;AAAA,UACA,SAAA;AAAA,UACA,UAAY,EAAA,GAAA;AAAA,UACZ,QAAA;AAAA,UACA,QAAA;AAAA,UACA,QAAA;AAAA,UACA,aAAA;AAAA,UACA,KAAA;AAAA,UACA,SAAA;AAAA,UACA,UAAA;AAAA,UACA;AAAA;AAAA;AACF;AAAA,GAGN,EAAA,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;;;;"}

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

@@ -1,4 +1,5 @@
-import React__default, { useRef, useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
 import '@hello-pangea/dnd';
 import { useTheme2, Tooltip, Icon, Button } from '@grafana/ui';
 import { cx, css } from '@emotion/css';
@@ -69,7 +70,7 @@ function OperationEditorBody({
       restParam = renderAddRestParamButton(lastParamDef, onAddRestParam, index, operation.params.length, styles);
     }
   }
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cx(styles.card, {
@@ -79,54 +80,68 @@ function OperationEditorBody({
       }),
       ref: provided.innerRef,
       ...provided.draggableProps,
-      "data-testid": `operations.${index}.wrapper`
-    },
-    /* @__PURE__ */ React__default.createElement(
-      OperationHeader,
-      {
-        operation,
-        dragHandleProps: provided.dragHandleProps,
-        definition,
-        index,
-        onChange,
-        onRemove,
-        onToggle,
-        queryModeller
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement("div", { className: styles.body }, operation.params.map((param, paramIndex) => {
-      const paramDef = definition.params[Math.min(definition.params.length - 1, paramIndex)];
-      const Editor = getOperationParamEditor(paramDef);
-      return /* @__PURE__ */ React__default.createElement("div", { className: styles.paramRow, key: `${paramIndex}-1` }, !paramDef.hideName && /* @__PURE__ */ React__default.createElement("div", { className: styles.paramName }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: getOperationParamId(id, paramIndex) }, paramDef.name), paramDef.description && /* @__PURE__ */ React__default.createElement(Tooltip, { placement: "top", content: paramDef.description, theme: "info" }, /* @__PURE__ */ React__default.createElement(Icon, { name: "info-circle", size: "sm", className: styles.infoIcon }))), /* @__PURE__ */ React__default.createElement("div", { className: styles.paramValue }, /* @__PURE__ */ React__default.createElement(EditorStack, { gap: 0.5, direction: "row", alignItems: "center", wrap: false }, /* @__PURE__ */ React__default.createElement(
-        Editor,
-        {
-          index: paramIndex,
-          paramDef,
-          value: operation.params[paramIndex],
-          operation,
-          operationId: id,
-          onChange: onParamValueChanged,
-          onRunQuery,
-          query,
-          datasource,
-          timeRange,
-          queryModeller
-        }
-      ), paramDef.restParam && (operation.params.length > definition.params.length || paramDef.optional) && /* @__PURE__ */ React__default.createElement(
-        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 && /* @__PURE__ */ React__default.createElement("div", { className: styles.arrow }, /* @__PURE__ */ React__default.createElement("div", { className: styles.arrowLine }), /* @__PURE__ */ React__default.createElement("div", { className: styles.arrowArrow }))
+      "data-testid": `operations.${index}.wrapper`,
+      children: [
+        /* @__PURE__ */ jsx(
+          OperationHeader,
+          {
+            operation,
+            dragHandleProps: provided.dragHandleProps,
+            definition,
+            index,
+            onChange,
+            onRemove,
+            onToggle,
+            queryModeller
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: styles.body, children: operation.params.map((param, paramIndex) => {
+          const paramDef = definition.params[Math.min(definition.params.length - 1, paramIndex)];
+          const Editor = getOperationParamEditor(paramDef);
+          return /* @__PURE__ */ jsxs("div", { className: styles.paramRow, children: [
+            !paramDef.hideName && /* @__PURE__ */ jsxs("div", { className: styles.paramName, children: [
+              /* @__PURE__ */ jsx("label", { htmlFor: getOperationParamId(id, paramIndex), children: paramDef.name }),
+              paramDef.description && /* @__PURE__ */ jsx(Tooltip, { placement: "top", content: paramDef.description, theme: "info", children: /* @__PURE__ */ jsx(Icon, { name: "info-circle", size: "sm", className: styles.infoIcon }) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: styles.paramValue, children: /* @__PURE__ */ jsxs(EditorStack, { gap: 0.5, direction: "row", alignItems: "center", wrap: false, children: [
+              /* @__PURE__ */ jsx(
+                Editor,
+                {
+                  index: paramIndex,
+                  paramDef,
+                  value: operation.params[paramIndex],
+                  operation,
+                  operationId: id,
+                  onChange: onParamValueChanged,
+                  onRunQuery,
+                  query,
+                  datasource,
+                  timeRange,
+                  queryModeller
+                }
+              ),
+              paramDef.restParam && (operation.params.length > definition.params.length || paramDef.optional) && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  "data-testid": `operations.${index}.remove-rest-param`,
+                  size: "sm",
+                  fill: "text",
+                  icon: "times",
+                  variant: "secondary",
+                  title: `Remove ${paramDef.name}`,
+                  onClick: () => onRemoveRestParam(paramIndex)
+                }
+              )
+            ] }) })
+          ] }, `${paramIndex}-1`);
+        }) }),
+        restParam,
+        index < query.operations.length - 1 && /* @__PURE__ */ jsxs("div", { className: styles.arrow, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.arrowLine }),
+          /* @__PURE__ */ jsx("div", { className: styles.arrowArrow })
+        ] })
+      ]
+    }
   );
 }
 const getStyles = (theme, isConflicting) => {
@@ -237,7 +252,7 @@ function callParamChangedThenOnChange(def, operation, operationIndex, paramIndex
   }
 }
 function renderAddRestParamButton(paramDef, onAddRestParam, operationIndex, paramIndex, styles) {
-  return /* @__PURE__ */ React__default.createElement("div", { className: styles.restParam, key: `${paramIndex}-2` }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx("div", { className: styles.restParam, children: /* @__PURE__ */ jsx(
     Button,
     {
       size: "sm",
@@ -245,10 +260,10 @@ function renderAddRestParamButton(paramDef, onAddRestParam, operationIndex, para
       title: `Add ${paramDef.name}`.trimEnd(),
       variant: "secondary",
       onClick: onAddRestParam,
-      "data-testid": `operations.${operationIndex}.add-rest-param`
-    },
-    paramDef.name
-  ));
+      "data-testid": `operations.${operationIndex}.add-rest-param`,
+      children: paramDef.name
+    }
+  ) }, `${paramIndex}-2`);
 }
 
 export { OperationEditorBody };

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

@@ -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":["React"],"mappings":"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"}
+{"version":3,"file":"OperationEditorBody.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationEditorBody.tsx"],"sourcesContent":["import { 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCO,SAAS,mBAAoB,CAAA;AAAA,EAClC,QAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAU,EAAA;AACR,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,KAAA,EAAO,aAAa,CAAA;AAC7C,EAAM,MAAA,WAAA,GAAc,SAAS,KAAK,CAAA;AAClC,EAAA,MAAM,EAAE,OAAS,EAAA,EAAA,EAAO,GAAA,MAAA,CAAO,IAAI,CAAA;AAEnC,EAAM,MAAA,mBAAA,GAAsB,CAAC,QAAA,EAAkB,KAA2C,KAAA;AACxF,IAAM,MAAA,MAAA,GAAgC,EAAE,GAAG,SAAA,EAAW,QAAQ,CAAC,GAAG,SAAU,CAAA,MAAM,CAAE,EAAA;AACpF,IAAO,MAAA,CAAA,MAAA,CAAO,QAAQ,CAAI,GAAA,KAAA;AAC1B,IAAA,4BAAA,CAA6B,UAAY,EAAA,MAAA,EAAQ,KAAO,EAAA,QAAA,EAAU,QAAQ,CAAA;AAAA,GAC5E;AAEA,EAAA,MAAM,iBAAiB,MAAM;AAC3B,IAAM,MAAA,MAAA,GAAgC,EAAE,GAAG,SAAW,EAAA,MAAA,EAAQ,CAAC,GAAG,SAAA,CAAU,MAAQ,EAAA,EAAE,CAAE,EAAA;AACxF,IAAA,4BAAA,CAA6B,YAAY,MAAQ,EAAA,KAAA,EAAO,SAAU,CAAA,MAAA,CAAO,QAAQ,QAAQ,CAAA;AAAA,GAC3F;AAEA,EAAM,MAAA,iBAAA,GAAoB,CAAC,QAAqB,KAAA;AAC9C,IAAA,MAAM,MAAgC,GAAA;AAAA,MACpC,GAAG,SAAA;AAAA,MACH,MAAQ,EAAA,CAAC,GAAG,SAAA,CAAU,OAAO,KAAM,CAAA,CAAA,EAAG,QAAQ,CAAA,EAAG,GAAG,SAAU,CAAA,MAAA,CAAO,KAAM,CAAA,QAAA,GAAW,CAAC,CAAC;AAAA,KAC1F;AACA,IAAA,4BAAA,CAA6B,UAAY,EAAA,MAAA,EAAQ,KAAO,EAAA,QAAA,EAAU,QAAQ,CAAA;AAAA,GAC5E;AAGA,EAAI,IAAA,SAAA;AACJ,EAAI,IAAA,UAAA,CAAW,MAAO,CAAA,MAAA,GAAS,CAAG,EAAA;AAChC,IAAA,MAAM,eAAe,UAAW,CAAA,MAAA,CAAO,UAAW,CAAA,MAAA,CAAO,SAAS,CAAC,CAAA;AACnE,IAAA,IAAI,aAAa,SAAW,EAAA;AAC1B,MAAA,SAAA,GAAY,yBAAyB,YAAc,EAAA,cAAA,EAAgB,OAAO,SAAU,CAAA,MAAA,CAAO,QAAQ,MAAM,CAAA;AAAA;AAC3G;AAGF,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,MAAA,CAAO,IAAM,EAAA;AAAA,QACzB,CAAC,MAAA,CAAO,aAAa,GAAG,WAAe,IAAA,SAAA;AAAA,QACvC,CAAC,MAAO,CAAA,SAAS,GAAG,aAAA;AAAA,QACpB,CAAC,MAAA,CAAO,QAAQ,GAAG,SAAU,CAAA;AAAA,OAC9B,CAAA;AAAA,MACD,KAAK,QAAS,CAAA,QAAA;AAAA,MACb,GAAG,QAAS,CAAA,cAAA;AAAA,MACb,aAAA,EAAa,cAAc,KAAK,CAAA,QAAA,CAAA;AAAA,MAEhC,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,SAAA;AAAA,YACA,iBAAiB,QAAS,CAAA,eAAA;AAAA,YAC1B,UAAA;AAAA,YACA,KAAA;AAAA,YACA,QAAA;AAAA,YACA,QAAA;AAAA,YACA,QAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,wBACA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,IAAA,EACpB,oBAAU,MAAO,CAAA,GAAA,CAAI,CAAC,KAAA,EAAO,UAAe,KAAA;AAC3C,UAAM,MAAA,QAAA,GAAW,UAAW,CAAA,MAAA,CAAO,IAAK,CAAA,GAAA,CAAI,WAAW,MAAO,CAAA,MAAA,GAAS,CAAG,EAAA,UAAU,CAAC,CAAA;AACrF,UAAM,MAAA,MAAA,GAAS,wBAAwB,QAAQ,CAAA;AAE/C,UAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,QACpB,EAAA,QAAA,EAAA;AAAA,YAAA,CAAC,SAAS,QACT,oBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,OAAO,SACrB,EAAA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,WAAM,OAAS,EAAA,mBAAA,CAAoB,IAAI,UAAU,CAAA,EAAI,mBAAS,IAAK,EAAA,CAAA;AAAA,cACnE,QAAA,CAAS,+BACP,GAAA,CAAA,OAAA,EAAA,EAAQ,WAAU,KAAM,EAAA,OAAA,EAAS,SAAS,WAAa,EAAA,KAAA,EAAM,QAC5D,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,MAAK,aAAc,EAAA,IAAA,EAAK,MAAK,SAAW,EAAA,MAAA,CAAO,UAAU,CACjE,EAAA;AAAA,aAEJ,EAAA,CAAA;AAAA,4BAED,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,YACrB,QAAC,kBAAA,IAAA,CAAA,WAAA,EAAA,EAAY,GAAK,EAAA,GAAA,EAAK,SAAU,EAAA,KAAA,EAAM,UAAW,EAAA,QAAA,EAAS,MAAM,KAC/D,EAAA,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,KAAO,EAAA,UAAA;AAAA,kBACP,QAAA;AAAA,kBACA,KAAA,EAAO,SAAU,CAAA,MAAA,CAAO,UAAU,CAAA;AAAA,kBAClC,SAAA;AAAA,kBACA,WAAa,EAAA,EAAA;AAAA,kBACb,QAAU,EAAA,mBAAA;AAAA,kBACV,UAAA;AAAA,kBACA,KAAA;AAAA,kBACA,UAAA;AAAA,kBACA,SAAA;AAAA,kBACA;AAAA;AAAA,eACF;AAAA,cACC,QAAA,CAAS,cAAc,SAAU,CAAA,MAAA,CAAO,SAAS,UAAW,CAAA,MAAA,CAAO,MAAU,IAAA,QAAA,CAAS,QACrF,CAAA,oBAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAa,cAAc,KAAK,CAAA,kBAAA,CAAA;AAAA,kBAChC,IAAK,EAAA,IAAA;AAAA,kBACL,IAAK,EAAA,MAAA;AAAA,kBACL,IAAK,EAAA,OAAA;AAAA,kBACL,OAAQ,EAAA,WAAA;AAAA,kBACR,KAAA,EAAO,CAAU,OAAA,EAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AAAA,kBAC9B,OAAA,EAAS,MAAM,iBAAA,CAAkB,UAAU;AAAA;AAAA;AAC7C,aAAA,EAEJ,CACF,EAAA;AAAA,WAtCoC,EAAA,EAAA,CAAA,EAAG,UAAU,CAuCnD,EAAA,CAAA,CAAA;AAAA,SAEH,CACH,EAAA,CAAA;AAAA,QACC,SAAA;AAAA,QACA,KAAA,GAAQ,MAAM,UAAW,CAAA,MAAA,GAAS,qBAChC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,KACrB,EAAA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,SAAW,EAAA,CAAA;AAAA,0BACjC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,UAAY,EAAA;AAAA,SACrC,EAAA;AAAA;AAAA;AAAA,GAEJ;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,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,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,MAAQ,EAAA,MAAA;AAAA,MACR,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,OAAA;AAAA,MACjC,QAAU,EAAA,UAAA;AAAA,MACV,UAAY,EAAA,qBAAA;AAAA,MACZ,MAAA,EAAQ,gBAAgB,MAAS,GAAA;AAAA,KAClC,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,OAAS,EAAA,GAAA;AAAA,MACT,UAAY,EAAA;AAAA,KACb,CAAA;AAAA,IACD,WAAW,GAAI,CAAA;AAAA,MACb,SAAW,EAAA,CAAA,gBAAA,EAAmB,KAAM,CAAA,MAAA,CAAO,QAAQ,IAAI,CAAA,CAAA;AAAA,MACvD,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,QAAQ,IAAI,CAAA;AAAA,KAC/C,CAAA;AAAA,IACD,eAAe,GAAI,CAAA;AAAA,MACjB,SAAW,EAAA,CAAA,gBAAA,EAAmB,KAAM,CAAA,MAAA,CAAO,QAAQ,MAAM,CAAA,CAAA;AAAA,MACzD,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,QAAQ,MAAM,CAAA;AAAA,KACjD,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,MAC7B,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,QAAU,EAAA;AAAA,QACR,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA;AAC3B,KACD,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,QAAQ,KAAM,CAAA,OAAA,CAAQ,CAAG,EAAA,CAAA,EAAG,KAAK,CAAC,CAAA;AAAA,MAClC,OAAS,EAAA;AAAA,KACV,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,KAAO,EAAA,UAAA;AAAA,MACP,OAAS,EAAA,WAAA;AAAA,MACT,aAAe,EAAA;AAAA,KAChB,CAAA;AAAA,IACD,WAAW,GAAI,CAAA;AAAA,MACb,OAAS,EAAA,YAAA;AAAA,MACT,SAAS,KAAM,CAAA,OAAA,CAAQ,CAAG,EAAA,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,MACjC,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA,QAAA;AAAA,MACrC,UAAA,EAAY,MAAM,UAAW,CAAA,gBAAA;AAAA,MAC7B,aAAe,EAAA,QAAA;AAAA,MACf,MAAQ,EAAA;AAAA,KACT,CAAA;AAAA,IACD,YAAY,GAAI,CAAA;AAAA,MACd,KAAO,EAAA,YAAA;AAAA,MACP,OAAS,EAAA,YAAA;AAAA,MACT,aAAe,EAAA;AAAA,KAChB,CAAA;AAAA,IACD,WAAW,GAAI,CAAA;AAAA,MACb,SAAS,KAAM,CAAA,OAAA,CAAQ,CAAG,EAAA,CAAA,EAAG,GAAG,CAAC;AAAA,KAClC,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,QAAU,EAAA,UAAA;AAAA,MACV,GAAK,EAAA,GAAA;AAAA,MACL,KAAO,EAAA,OAAA;AAAA,MACP,OAAS,EAAA;AAAA,KACV,CAAA;AAAA,IACD,WAAW,GAAI,CAAA;AAAA,MACb,MAAQ,EAAA,KAAA;AAAA,MACR,KAAO,EAAA,KAAA;AAAA,MACP,eAAA,EAAiB,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,MAAA;AAAA,MACrC,QAAU,EAAA,UAAA;AAAA,MACV,GAAK,EAAA;AAAA,KACN,CAAA;AAAA,IACD,YAAY,GAAI,CAAA;AAAA,MACd,KAAO,EAAA,CAAA;AAAA,MACP,MAAQ,EAAA,CAAA;AAAA,MACR,SAAW,EAAA,CAAA,qBAAA,CAAA;AAAA,MACX,YAAc,EAAA,CAAA,qBAAA,CAAA;AAAA,MACd,UAAY,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,OAAO,MAAM,CAAA,CAAA;AAAA,MACnD,QAAU,EAAA,UAAA;AAAA,MACV,GAAK,EAAA;AAAA,KACN;AAAA,GACH;AACF,CAAA;AAOA,SAAS,SAAS,KAAiB,EAAA;AACjC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,IAAI,CAAA;AAC/C,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,CAAA;AACJ,IAAA,IAAI,KAAO,EAAA;AACT,MAAA,CAAA,GAAI,WAAW,MAAM;AACnB,QAAA,YAAA,CAAa,KAAK,CAAA;AAAA,SACjB,GAAI,CAAA;AAAA,KACF,MAAA;AACL,MAAA,YAAA,CAAa,IAAI,CAAA;AAAA;AAGnB,IAAO,OAAA,MAAM,aAAa,CAAC,CAAA;AAAA,GAC7B,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,OAAO,SAAa,IAAA,KAAA;AACtB;AAEA,SAAS,4BACP,CAAA,GAAA,EACA,SACA,EAAA,cAAA,EACA,YACA,QACA,EAAA;AACA,EAAA,IAAI,IAAI,mBAAqB,EAAA;AAC3B,IAAA,QAAA,CAAS,gBAAgB,GAAI,CAAA,mBAAA,CAAoB,UAAY,EAAA,SAAA,EAAW,GAAG,CAAC,CAAA;AAAA,GACvE,MAAA;AACL,IAAA,QAAA,CAAS,gBAAgB,SAAS,CAAA;AAAA;AAEtC;AAEA,SAAS,wBACP,CAAA,QAAA,EACA,cACA,EAAA,cAAA,EACA,YACA,MACA,EAAA;AACA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,SACrB,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,IAAA;AAAA,MACL,IAAK,EAAA,MAAA;AAAA,MACL,KAAO,EAAA,CAAA,IAAA,EAAO,QAAS,CAAA,IAAI,GAAG,OAAQ,EAAA;AAAA,MACtC,OAAQ,EAAA,WAAA;AAAA,MACR,OAAS,EAAA,cAAA;AAAA,MACT,aAAA,EAAa,cAAc,cAAc,CAAA,eAAA,CAAA;AAAA,MAExC,QAAS,EAAA,QAAA,CAAA;AAAA;AAAA,GACZ,EAAA,EAVqC,CAAG,EAAA,UAAU,CAWpD,EAAA,CAAA,CAAA;AAEJ;;;;"}

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

@@ -1,11 +1,20 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { css } from '@emotion/css';
-import React__default from 'react';
 import { renderMarkdown } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
 
 function OperationExplainedBox({ title, stepNumber, markdown, children }) {
   const styles = useStyles2(getStyles);
-  return /* @__PURE__ */ React__default.createElement("div", { className: styles.box }, stepNumber !== undefined && /* @__PURE__ */ React__default.createElement("div", { className: styles.stepNumber }, stepNumber), /* @__PURE__ */ React__default.createElement("div", { className: styles.boxInner }, title && /* @__PURE__ */ React__default.createElement("div", { className: styles.header }, /* @__PURE__ */ React__default.createElement("span", null, title)), /* @__PURE__ */ React__default.createElement("div", { className: styles.body }, markdown && /* @__PURE__ */ React__default.createElement("div", { dangerouslySetInnerHTML: { __html: renderMarkdown(markdown) } }), children)));
+  return /* @__PURE__ */ jsxs("div", { className: styles.box, children: [
+    stepNumber !== undefined && /* @__PURE__ */ jsx("div", { className: styles.stepNumber, children: stepNumber }),
+    /* @__PURE__ */ jsxs("div", { className: styles.boxInner, children: [
+      title && /* @__PURE__ */ jsx("div", { className: styles.header, children: /* @__PURE__ */ jsx("span", { children: title }) }),
+      /* @__PURE__ */ jsxs("div", { className: styles.body, children: [
+        markdown && /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: renderMarkdown(markdown) } }),
+        children
+      ] })
+    ] })
+  ] });
 }
 const getStyles = (theme) => {
   return {

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

@@ -1 +1 @@
-{"version":3,"file":"OperationExplainedBox.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationExplainedBox.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React from 'react';\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":["React"],"mappings":";;;;;AAYO,SAAS,sBAAsB,EAAE,KAAA,EAAO,UAAY,EAAA,QAAA,EAAU,UAA4C,EAAA;AAC/G,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,SAAI,SAAW,EAAA,MAAA,CAAO,OACpB,UAAe,KAAA,SAAA,oBAAcA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,cAAa,UAAW,CAAA,+CAC3E,KAAI,EAAA,EAAA,SAAA,EAAW,OAAO,QACpB,EAAA,EAAA,KAAA,oBACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,0BACpBA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAM,KAAM,CACf,CAAA,+CAED,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,IAAA,EAAA,EACpB,QAAY,oBAAAA,cAAA,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;;;;"}
+{"version":3,"file":"OperationExplainedBox.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationExplainedBox.tsx"],"sourcesContent":["import { 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":";;;;;AAWO,SAAS,sBAAsB,EAAE,KAAA,EAAO,UAAY,EAAA,QAAA,EAAU,UAA4C,EAAA;AAC/G,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,GACpB,EAAA,QAAA,EAAA;AAAA,IAAA,UAAA,KAAe,6BAAc,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,YAAa,QAAW,EAAA,UAAA,EAAA,CAAA;AAAA,oBAC3E,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,QACpB,EAAA,QAAA,EAAA;AAAA,MACC,KAAA,oBAAA,GAAA,CAAC,SAAI,SAAW,EAAA,MAAA,CAAO,QACrB,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA,EAAM,iBAAM,CACf,EAAA,CAAA;AAAA,sBAED,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,IACpB,EAAA,QAAA,EAAA;AAAA,QAAY,QAAA,oBAAA,GAAA,CAAC,SAAI,uBAAyB,EAAA,EAAE,QAAQ,cAAe,CAAA,QAAQ,GAAK,EAAA,CAAA;AAAA,QAChF;AAAA,OACH,EAAA;AAAA,KACF,EAAA;AAAA,GACF,EAAA,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;;;;"}