@grafana/plugin-ui 0.13.0 → 0.14.0-dev.1

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

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

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

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

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

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

@@ -10,7 +10,6 @@ import '../../QueryEditor/types.js';
 import 'lodash';
 import '../../QueryEditor/EditorList.js';
 import { EditorStack } from '../../QueryEditor/EditorStack.js';
-import '../../QueryEditor/Space.js';
 import 'react-use';
 import '../../QueryEditor/QueryHeader.js';
 import 'react-virtualized-auto-sizer';
@@ -43,7 +42,7 @@ function OperationEditorBody({
   datasource
 }) {
   const theme = useTheme2();
-  const styles = getStyles(theme, isConflicting);
+  const styles = getStyles$7(theme, isConflicting);
   const shouldFlash = useFlash(flash);
   const { current: id } = useRef(v4());
   const onParamValueChanged = (paramIdx, value) => {
@@ -129,7 +128,7 @@ function OperationEditorBody({
     index < query.operations.length - 1 && /* @__PURE__ */ React.createElement("div", { className: styles.arrow }, /* @__PURE__ */ React.createElement("div", { className: styles.arrowLine }), /* @__PURE__ */ React.createElement("div", { className: styles.arrowArrow }))
   );
 }
-const getStyles = (theme, isConflicting) => {
+const getStyles$7 = (theme, isConflicting) => {
   return {
     cardWrapper: css({
       alignItems: "stretch"

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"OperationHeader.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationHeader.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useState, memo } from 'react';\nimport { type DraggableProvided } from '@hello-pangea/dnd';\n\nimport { type GrafanaTheme2, type SelectableValue } from '@grafana/data';\nimport { Button, Select, useStyles2 } from '@grafana/ui';\n\nimport { OperationInfoButton } from './OperationInfoButton';\n\nimport { type VisualQueryModeller, type QueryBuilderOperation, type QueryBuilderOperationDefinition } from '../types';\nimport { FlexItem } from '../../QueryEditor/FlexItem';\n\ninterface Props {\n  operation: QueryBuilderOperation;\n  definition: QueryBuilderOperationDefinition;\n  index: number;\n  queryModeller: VisualQueryModeller;\n  dragHandleProps?: DraggableProvided['dragHandleProps'];\n  onChange: (index: number, update: QueryBuilderOperation) => void;\n  onRemove: (index: number) => void;\n  onToggle: (index: number) => void;\n}\n\ninterface State {\n  isOpen?: boolean;\n  disabled?: boolean;\n  alternatives?: Array<SelectableValue<QueryBuilderOperationDefinition>>;\n}\n\nexport const OperationHeader = memo<Props>(\n  ({ operation, definition, index, onChange, onRemove, onToggle, queryModeller, dragHandleProps }) => {\n    const styles = useStyles2(getStyles);\n    const [state, setState] = useState<State>({});\n\n    const onToggleSwitcher = () => {\n      if (state.isOpen) {\n        setState({ ...state, isOpen: false });\n      } else {\n        const alternatives = queryModeller\n          .getAlternativeOperations(definition.alternativesKey!)\n          .map((alt) => ({ label: alt.name, value: alt }));\n        setState({ isOpen: true, alternatives });\n      }\n    };\n\n    return (\n      <div className={styles.header}>\n        {!state.isOpen && (\n          <>\n            <div {...dragHandleProps}>{definition.name ?? definition.id}</div>\n            <FlexItem grow={1} />\n            <div className={`${styles.operationHeaderButtons} operation-header-show-on-hover`}>\n              <Button\n                icon=\"angle-down\"\n                size=\"sm\"\n                onClick={onToggleSwitcher}\n                fill=\"text\"\n                variant=\"secondary\"\n                title=\"Click to view alternative operations\"\n              />\n              <OperationInfoButton\n                definition={definition}\n                operation={operation}\n                innerQueryPlaceholder={queryModeller.innerQueryPlaceholder}\n              />\n              {definition.toggleable && (\n                <Button\n                  icon={operation.disabled ? 'eye-slash' : 'eye'}\n                  size=\"sm\"\n                  onClick={() => onToggle(index)}\n                  fill=\"text\"\n                  variant=\"secondary\"\n                  title={operation.disabled ? 'Enable operation' : 'Disable operation'}\n                />\n              )}\n              <Button\n                icon=\"times\"\n                size=\"sm\"\n                onClick={() => onRemove(index)}\n                fill=\"text\"\n                variant=\"secondary\"\n                title=\"Remove operation\"\n              />\n            </div>\n          </>\n        )}\n        {state.isOpen && (\n          <div className={styles.selectWrapper}>\n            <Select\n              autoFocus\n              openMenuOnFocus\n              placeholder=\"Replace with\"\n              options={state.alternatives}\n              isOpen={true}\n              onCloseMenu={onToggleSwitcher}\n              onChange={(value) => {\n                if (value.value) {\n                  // Operation should exist if it is selectable\n                  const newDef = queryModeller.getOperationDefinition(value.value.id)!;\n\n                  // copy default params, and override with all current params\n                  const newParams = [...newDef.defaultParams];\n                  for (let i = 0; i < Math.min(operation.params.length, newParams.length); i++) {\n                    if (newDef.params[i].type === definition.params[i].type) {\n                      newParams[i] = operation.params[i];\n                    }\n                  }\n\n                  const changedOp = { ...operation, params: newParams, id: value.value.id };\n                  onChange(\n                    index,\n                    definition.changeTypeHandler ? definition.changeTypeHandler(changedOp, newDef) : changedOp\n                  );\n                }\n              }}\n            />\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nOperationHeader.displayName = 'OperationHeader';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    header: css({\n      borderBottom: `1px solid ${theme.colors.border.medium}`,\n      padding: theme.spacing(0.5, 0.5, 0.5, 1),\n      display: 'flex',\n      alignItems: 'center',\n    }),\n    operationHeaderButtons: css({\n      opacity: 1,\n    }),\n    selectWrapper: css({\n      paddingRight: theme.spacing(2),\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"OperationHeader.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationHeader.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useState, memo } from 'react';\nimport { type DraggableProvided } from '@hello-pangea/dnd';\n\nimport { type GrafanaTheme2, type SelectableValue } from '@grafana/data';\nimport { Button, Select, useStyles2 } from '@grafana/ui';\n\nimport { OperationInfoButton } from './OperationInfoButton';\n\nimport { type VisualQueryModeller, type QueryBuilderOperation, type QueryBuilderOperationDefinition } from '../types';\nimport { FlexItem } from '../../QueryEditor/FlexItem';\n\ninterface Props {\n  operation: QueryBuilderOperation;\n  definition: QueryBuilderOperationDefinition;\n  index: number;\n  queryModeller: VisualQueryModeller;\n  dragHandleProps?: DraggableProvided['dragHandleProps'];\n  onChange: (index: number, update: QueryBuilderOperation) => void;\n  onRemove: (index: number) => void;\n  onToggle: (index: number) => void;\n}\n\ninterface State {\n  isOpen?: boolean;\n  disabled?: boolean;\n  alternatives?: Array<SelectableValue<QueryBuilderOperationDefinition>>;\n}\n\nexport const OperationHeader = memo<Props>(\n  ({ operation, definition, index, onChange, onRemove, onToggle, queryModeller, dragHandleProps }) => {\n    const styles = useStyles2(getStyles);\n    const [state, setState] = useState<State>({});\n\n    const onToggleSwitcher = () => {\n      if (state.isOpen) {\n        setState({ ...state, isOpen: false });\n      } else {\n        const alternatives = queryModeller\n          .getAlternativeOperations(definition.alternativesKey!)\n          .map((alt) => ({ label: alt.name, value: alt }));\n        setState({ isOpen: true, alternatives });\n      }\n    };\n\n    return (\n      <div className={styles.header}>\n        {!state.isOpen && (\n          <>\n            <div {...dragHandleProps}>{definition.name ?? definition.id}</div>\n            <FlexItem grow={1} />\n            <div className={`${styles.operationHeaderButtons} operation-header-show-on-hover`}>\n              <Button\n                icon=\"angle-down\"\n                size=\"sm\"\n                onClick={onToggleSwitcher}\n                fill=\"text\"\n                variant=\"secondary\"\n                title=\"Click to view alternative operations\"\n              />\n              <OperationInfoButton\n                definition={definition}\n                operation={operation}\n                innerQueryPlaceholder={queryModeller.innerQueryPlaceholder}\n              />\n              {definition.toggleable && (\n                <Button\n                  icon={operation.disabled ? 'eye-slash' : 'eye'}\n                  size=\"sm\"\n                  onClick={() => onToggle(index)}\n                  fill=\"text\"\n                  variant=\"secondary\"\n                  title={operation.disabled ? 'Enable operation' : 'Disable operation'}\n                />\n              )}\n              <Button\n                icon=\"times\"\n                size=\"sm\"\n                onClick={() => onRemove(index)}\n                fill=\"text\"\n                variant=\"secondary\"\n                title=\"Remove operation\"\n              />\n            </div>\n          </>\n        )}\n        {state.isOpen && (\n          <div className={styles.selectWrapper}>\n            <Select\n              autoFocus\n              openMenuOnFocus\n              placeholder=\"Replace with\"\n              options={state.alternatives}\n              isOpen={true}\n              onCloseMenu={onToggleSwitcher}\n              onChange={(value) => {\n                if (value.value) {\n                  // Operation should exist if it is selectable\n                  const newDef = queryModeller.getOperationDefinition(value.value.id)!;\n\n                  // copy default params, and override with all current params\n                  const newParams = [...newDef.defaultParams];\n                  for (let i = 0; i < Math.min(operation.params.length, newParams.length); i++) {\n                    if (newDef.params[i].type === definition.params[i].type) {\n                      newParams[i] = operation.params[i];\n                    }\n                  }\n\n                  const changedOp = { ...operation, params: newParams, id: value.value.id };\n                  onChange(\n                    index,\n                    definition.changeTypeHandler ? definition.changeTypeHandler(changedOp, newDef) : changedOp\n                  );\n                }\n              }}\n            />\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nOperationHeader.displayName = 'OperationHeader';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    header: css({\n      borderBottom: `1px solid ${theme.colors.border.medium}`,\n      padding: theme.spacing(0.5, 0.5, 0.5, 1),\n      display: 'flex',\n      alignItems: 'center',\n    }),\n    operationHeaderButtons: css({\n      opacity: 1,\n    }),\n    selectWrapper: css({\n      paddingRight: theme.spacing(2),\n    }),\n  };\n};\n"],"names":["getStyles"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"OperationInfoButton.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationInfoButton.tsx"],"sourcesContent":["import React, { useState, memo } from 'react';\nimport { css } from '@emotion/css';\nimport { usePopperTooltip } from 'react-popper-tooltip';\n\nimport { type GrafanaTheme2, renderMarkdown } from '@grafana/data';\nimport { Button, Portal, useStyles2 } from '@grafana/ui';\n\nimport { type QueryBuilderOperation, type QueryBuilderOperationDefinition } from '../types';\nimport { FlexItem } from '../../QueryEditor/FlexItem';\n\ninterface Props {\n  operation: QueryBuilderOperation;\n  definition: QueryBuilderOperationDefinition;\n  innerQueryPlaceholder: string;\n}\n\nexport const OperationInfoButton = memo<Props>(({ definition, operation, innerQueryPlaceholder }) => {\n  const styles = useStyles2(getStyles);\n  const [show, setShow] = useState(false);\n  const { getTooltipProps, setTooltipRef, setTriggerRef, visible } = usePopperTooltip({\n    placement: 'top',\n    visible: show,\n    offset: [0, 16],\n    onVisibleChange: setShow,\n    interactive: true,\n    trigger: ['click'],\n  });\n\n  return (\n    <>\n      <Button\n        title=\"Click to show description\"\n        ref={setTriggerRef}\n        icon=\"info-circle\"\n        size=\"sm\"\n        variant=\"secondary\"\n        fill=\"text\"\n      />\n      {visible && (\n        <Portal>\n          <div ref={setTooltipRef} {...getTooltipProps()} className={styles.docBox}>\n            <div className={styles.docBoxHeader}>\n              <span>{definition.renderer(operation, definition, innerQueryPlaceholder)}</span>\n              <FlexItem grow={1} />\n              <Button\n                icon=\"times\"\n                onClick={() => setShow(false)}\n                fill=\"text\"\n                variant=\"secondary\"\n                title=\"Remove operation\"\n              />\n            </div>\n            <div\n              className={styles.docBoxBody}\n              dangerouslySetInnerHTML={{ __html: getOperationDocs(definition, operation) }}\n            ></div>\n          </div>\n        </Portal>\n      )}\n    </>\n  );\n});\n\nOperationInfoButton.displayName = 'OperationDocs';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    docBox: css({\n      overflow: 'hidden',\n      background: theme.colors.background.primary,\n      border: `1px solid ${theme.colors.border.strong}`,\n      boxShadow: theme.shadows.z3,\n      maxWidth: '600px',\n      padding: theme.spacing(1),\n      borderRadius: theme.shape.radius.default,\n      zIndex: theme.zIndex.tooltip,\n    }),\n    docBoxHeader: css({\n      fontSize: theme.typography.h5.fontSize,\n      fontFamily: theme.typography.fontFamilyMonospace,\n      paddingBottom: theme.spacing(1),\n      display: 'flex',\n      alignItems: 'center',\n    }),\n    docBoxBody: css({\n      // The markdown paragraph has a marginBottom this removes it\n      marginBottom: theme.spacing(-1),\n      color: theme.colors.text.secondary,\n    }),\n    signature: css({\n      fontSize: theme.typography.bodySmall.fontSize,\n      fontFamily: theme.typography.fontFamilyMonospace,\n    }),\n    dropdown: css({\n      opacity: 0,\n      color: theme.colors.text.secondary,\n    }),\n  };\n};\nfunction getOperationDocs(def: QueryBuilderOperationDefinition, op: QueryBuilderOperation): string {\n  return renderMarkdown(def.explainHandler ? def.explainHandler(op, def) : (def.documentation ?? 'no docs'));\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"OperationInfoButton.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationInfoButton.tsx"],"sourcesContent":["import React, { useState, memo } from 'react';\nimport { css } from '@emotion/css';\nimport { usePopperTooltip } from 'react-popper-tooltip';\n\nimport { type GrafanaTheme2, renderMarkdown } from '@grafana/data';\nimport { Button, Portal, useStyles2 } from '@grafana/ui';\n\nimport { type QueryBuilderOperation, type QueryBuilderOperationDefinition } from '../types';\nimport { FlexItem } from '../../QueryEditor/FlexItem';\n\ninterface Props {\n  operation: QueryBuilderOperation;\n  definition: QueryBuilderOperationDefinition;\n  innerQueryPlaceholder: string;\n}\n\nexport const OperationInfoButton = memo<Props>(({ definition, operation, innerQueryPlaceholder }) => {\n  const styles = useStyles2(getStyles);\n  const [show, setShow] = useState(false);\n  const { getTooltipProps, setTooltipRef, setTriggerRef, visible } = usePopperTooltip({\n    placement: 'top',\n    visible: show,\n    offset: [0, 16],\n    onVisibleChange: setShow,\n    interactive: true,\n    trigger: ['click'],\n  });\n\n  return (\n    <>\n      <Button\n        title=\"Click to show description\"\n        ref={setTriggerRef}\n        icon=\"info-circle\"\n        size=\"sm\"\n        variant=\"secondary\"\n        fill=\"text\"\n      />\n      {visible && (\n        <Portal>\n          <div ref={setTooltipRef} {...getTooltipProps()} className={styles.docBox}>\n            <div className={styles.docBoxHeader}>\n              <span>{definition.renderer(operation, definition, innerQueryPlaceholder)}</span>\n              <FlexItem grow={1} />\n              <Button\n                icon=\"times\"\n                onClick={() => setShow(false)}\n                fill=\"text\"\n                variant=\"secondary\"\n                title=\"Remove operation\"\n              />\n            </div>\n            <div\n              className={styles.docBoxBody}\n              dangerouslySetInnerHTML={{ __html: getOperationDocs(definition, operation) }}\n            ></div>\n          </div>\n        </Portal>\n      )}\n    </>\n  );\n});\n\nOperationInfoButton.displayName = 'OperationDocs';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    docBox: css({\n      overflow: 'hidden',\n      background: theme.colors.background.primary,\n      border: `1px solid ${theme.colors.border.strong}`,\n      boxShadow: theme.shadows.z3,\n      maxWidth: '600px',\n      padding: theme.spacing(1),\n      borderRadius: theme.shape.radius.default,\n      zIndex: theme.zIndex.tooltip,\n    }),\n    docBoxHeader: css({\n      fontSize: theme.typography.h5.fontSize,\n      fontFamily: theme.typography.fontFamilyMonospace,\n      paddingBottom: theme.spacing(1),\n      display: 'flex',\n      alignItems: 'center',\n    }),\n    docBoxBody: css({\n      // The markdown paragraph has a marginBottom this removes it\n      marginBottom: theme.spacing(-1),\n      color: theme.colors.text.secondary,\n    }),\n    signature: css({\n      fontSize: theme.typography.bodySmall.fontSize,\n      fontFamily: theme.typography.fontFamilyMonospace,\n    }),\n    dropdown: css({\n      opacity: 0,\n      color: theme.colors.text.secondary,\n    }),\n  };\n};\nfunction getOperationDocs(def: QueryBuilderOperationDefinition, op: QueryBuilderOperation): string {\n  return renderMarkdown(def.explainHandler ? def.explainHandler(op, def) : (def.documentation ?? 'no docs'));\n}\n"],"names":["getStyles"],"mappings":"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"}

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

@@ -9,7 +9,6 @@ import '../../QueryEditor/types.js';
 import 'lodash';
 import '../../QueryEditor/EditorList.js';
 import { EditorStack } from '../../QueryEditor/EditorStack.js';
-import '../../QueryEditor/Space.js';
 import '../../QueryEditor/QueryHeader.js';
 import 'react-virtualized-auto-sizer';
 import 'sql-formatter-plus';
@@ -34,7 +33,7 @@ function OperationList({
   timeRange,
   isConflictingOperation
 }) {
-  const styles = useStyles2(getStyles);
+  const styles = useStyles2(getStyles$5);
   const { operations } = query;
   const opsToHighlight = useOperationsHighlight(operations);
   const [cascaderOpen, setCascaderOpen] = useState(false);
@@ -136,7 +135,7 @@ function useOperationsHighlight(operations) {
   } else {
     newOps = operations.map((op, index) => {
       var _a;
-      return !isSameOp(op.id, (_a = prevOperations[index]) == null ? undefined : _a.id);
+      return !isSameOp(op.id, (_a = prevOperations[index]) == null ? void 0 : _a.id);
     });
   }
   return newOps;
@@ -144,7 +143,7 @@ function useOperationsHighlight(operations) {
 function isSameOp(op1, op2) {
   return op1 === op2 || `__${op1}_by` === op2 || op1 === `__${op2}_by`;
 }
-const getStyles = (theme) => {
+const getStyles$5 = (theme) => {
   return {
     heading: css({
       label: "heading",

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

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

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

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

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

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

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

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