@grafana/plugin-ui 0.10.10 → 0.11.1

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 { css } from '@emotion/css';\nimport React, { useState } from 'react';\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 = React.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":["React"],"mappings":"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"}
+{"version":3,"file":"OperationInfoButton.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationInfoButton.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useState, memo } from 'react';\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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"}

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

@@ -1,5 +1,6 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { css } from '@emotion/css';
-import React__default, { useState } from 'react';
+import { useState } from 'react';
 import { DragDropContext, Droppable } from '@hello-pangea/dnd';
 import { useMountedState, usePrevious } from 'react-use';
 import '@grafana/data';
@@ -82,38 +83,44 @@ function OperationList({
   const onCascaderBlur = () => {
     setCascaderOpen(false);
   };
-  return /* @__PURE__ */ React__default.createElement(EditorStack, { gap: 1, direction: "column" }, /* @__PURE__ */ React__default.createElement(EditorStack, { gap: 1 }, operations.length > 0 && /* @__PURE__ */ React__default.createElement(DragDropContext, { onDragEnd }, /* @__PURE__ */ React__default.createElement(Droppable, { droppableId: "sortable-field-mappings", direction: "horizontal" }, (provided) => /* @__PURE__ */ React__default.createElement("div", { className: styles.operationList, ref: provided.innerRef, ...provided.droppableProps }, operations.map((op, index) => {
-    return /* @__PURE__ */ React__default.createElement(
-      OperationEditor,
+  return /* @__PURE__ */ jsx(EditorStack, { gap: 1, direction: "column", children: /* @__PURE__ */ jsxs(EditorStack, { gap: 1, children: [
+    operations.length > 0 && /* @__PURE__ */ jsx(DragDropContext, { onDragEnd, children: /* @__PURE__ */ jsx(Droppable, { droppableId: "sortable-field-mappings", direction: "horizontal", children: (provided) => /* @__PURE__ */ jsxs("div", { className: styles.operationList, ref: provided.innerRef, ...provided.droppableProps, children: [
+      operations.map((op, index) => {
+        return /* @__PURE__ */ jsx(
+          OperationEditor,
+          {
+            queryModeller,
+            index,
+            operation: op,
+            query,
+            datasource,
+            onChange: onOperationChange,
+            onRemove,
+            onToggle,
+            onRunQuery,
+            flash: opsToHighlight[index],
+            highlight: highlightedOp === op,
+            timeRange,
+            isConflictingOperation
+          },
+          op.id + JSON.stringify(op.params) + index
+        );
+      }),
+      provided.placeholder
+    ] }) }) }),
+    /* @__PURE__ */ jsx("div", { className: styles.addButton, children: cascaderOpen ? /* @__PURE__ */ jsx(
+      Cascader,
       {
-        key: op.id + JSON.stringify(op.params) + index,
-        queryModeller,
-        index,
-        operation: op,
-        query,
-        datasource,
-        onChange: onOperationChange,
-        onRemove,
-        onToggle,
-        onRunQuery,
-        flash: opsToHighlight[index],
-        highlight: highlightedOp === op,
-        timeRange,
-        isConflictingOperation
+        options: addOptions,
+        onSelect: onAddOperation,
+        onBlur: onCascaderBlur,
+        autoFocus: true,
+        alwaysOpen: true,
+        hideActiveLevelLabel: true,
+        placeholder: "Search"
       }
-    );
-  }), provided.placeholder))), /* @__PURE__ */ React__default.createElement("div", { className: styles.addButton }, cascaderOpen ? /* @__PURE__ */ React__default.createElement(
-    Cascader,
-    {
-      options: addOptions,
-      onSelect: onAddOperation,
-      onBlur: onCascaderBlur,
-      autoFocus: true,
-      alwaysOpen: true,
-      hideActiveLevelLabel: true,
-      placeholder: "Search"
-    }
-  ) : /* @__PURE__ */ React__default.createElement(Button, { icon: "plus", variant: "secondary", onClick: () => setCascaderOpen(true), title: "Add operation" }, "Operations"))));
+    ) : /* @__PURE__ */ jsx(Button, { icon: "plus", variant: "secondary", onClick: () => setCascaderOpen(true), title: "Add operation", children: "Operations" }) })
+  ] }) });
 }
 function useOperationsHighlight(operations) {
   const isMounted = useMountedState();

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":["React"],"mappings":"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"}
+{"version":3,"file":"OperationList.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationList.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { 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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"}

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

@@ -1,7 +1,8 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
 import 'prismjs';
-import React__default from 'react';
 import { OperationExplainedBox } from './OperationExplainedBox.js';
 import { RawQuery } from './RawQuery.js';
+import 'react';
 import '@grafana/data';
 
 function OperationListExplained({
@@ -12,7 +13,7 @@ function OperationListExplained({
   onMouseEnter,
   onMouseLeave
 }) {
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, query.operations.map((op, index) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: query.operations.map((op, index) => {
     var _a;
     const def = queryModeller.getOperationDefinition(op.id);
     if (!def) {
@@ -20,23 +21,23 @@ function OperationListExplained({
     }
     const title = def.renderer(op, def, queryModeller.innerQueryPlaceholder);
     const body = def.explainHandler ? def.explainHandler(op, def) : (_a = def.documentation) != null ? _a : "no docs";
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ jsx(
       "div",
       {
-        key: index,
         onMouseEnter: () => onMouseEnter == null ? undefined : onMouseEnter(op, index),
-        onMouseLeave: () => onMouseLeave == null ? undefined : onMouseLeave(op, index)
+        onMouseLeave: () => onMouseLeave == null ? undefined : onMouseLeave(op, index),
+        children: /* @__PURE__ */ jsx(
+          OperationExplainedBox,
+          {
+            stepNumber: index + stepNumber,
+            title: /* @__PURE__ */ jsx(RawQuery, { query: title, language }),
+            markdown: body
+          }
+        )
       },
-      /* @__PURE__ */ React__default.createElement(
-        OperationExplainedBox,
-        {
-          stepNumber: index + stepNumber,
-          title: /* @__PURE__ */ React__default.createElement(RawQuery, { query: title, language }),
-          markdown: body
-        }
-      )
+      index
     );
-  }));
+  }) });
 }
 
 export { OperationListExplained };

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 { type Grammar } from 'prismjs';\nimport React from 'react';\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":["React"],"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,mFAEK,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,uBAAAA,cAAA,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,sBAEvCA,cAAA,CAAA,aAAA;AAAA,QAAC,qBAAA;AAAA,QAAA;AAAA,UACC,YAAY,KAAQ,GAAA,UAAA;AAAA,UACpB,KAAO,kBAAAA,cAAA,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 { 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":";;;;;;;AAmBO,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,uCAEK,QAAM,EAAA,KAAA,CAAA,UAAA,CAAW,GAAI,CAAA,CAAC,IAAI,KAAU,KAAA;AA7B3C,IAAA,IAAA,EAAA;AA8BQ,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,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QAEC,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,CAAA;AAAA,QAEvC,QAAA,kBAAA,GAAA;AAAA,UAAC,qBAAA;AAAA,UAAA;AAAA,YACC,YAAY,KAAQ,GAAA,UAAA;AAAA,YACpB,KAAO,kBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,KAAA,EAAO,OAAO,QAAoB,EAAA,CAAA;AAAA,YACnD,QAAU,EAAA;AAAA;AAAA;AACZ,OAAA;AAAA,MARK;AAAA,KASP;AAAA,GAEH,CACH,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,5 +1,6 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { css } from '@emotion/css';
-import React__default from 'react';
+import 'react';
 import { toOption } from '@grafana/data';
 import { AutoSizeInput, Checkbox, useStyles2, Button, Select } from '@grafana/ui';
 import '../../QueryEditor/types.js';
@@ -40,7 +41,7 @@ function getOperationParamEditor(paramDef) {
 }
 function SimpleInputParamEditor(props) {
   var _a;
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     AutoSizeInput,
     {
       id: getOperationParamId(props.operationId, props.index),
@@ -59,7 +60,7 @@ function SimpleInputParamEditor(props) {
   );
 }
 function BoolInputParamEditor(props) {
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     Checkbox,
     {
       id: getOperationParamId(props.operationId, props.index),
@@ -86,41 +87,44 @@ function SelectInputParamEditor({
   }
   let valueOption = (_b = selectOptions.find((x) => x.value === value)) != null ? _b : toOption(value);
   if (!value && paramDef.optional) {
-    return /* @__PURE__ */ React__default.createElement("div", { className: styles.optionalParam }, /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ jsx("div", { className: styles.optionalParam, children: /* @__PURE__ */ jsx(
       Button,
       {
         size: "sm",
         variant: "secondary",
         title: `Add ${paramDef.name}`,
         icon: "plus",
-        onClick: () => onChange(index, selectOptions[0].value)
-      },
-      paramDef.name
-    ));
+        onClick: () => onChange(index, selectOptions[0].value),
+        children: paramDef.name
+      }
+    ) });
   }
-  return /* @__PURE__ */ React__default.createElement(EditorStack, { gap: 0.5, direction: "row", alignItems: "center" }, /* @__PURE__ */ React__default.createElement(
-    Select,
-    {
-      id: getOperationParamId(operationId, index),
-      value: valueOption,
-      options: selectOptions,
-      placeholder: paramDef.placeholder,
-      allowCustomValue: true,
-      onChange: (value2) => onChange(index, value2.value),
-      width: paramDef.minWidth || "auto"
-    }
-  ), paramDef.optional && /* @__PURE__ */ React__default.createElement(
-    Button,
-    {
-      "data-testid": `operations.${index}.remove-param`,
-      size: "sm",
-      fill: "text",
-      icon: "times",
-      variant: "secondary",
-      title: `Remove ${paramDef.name}`,
-      onClick: () => onChange(index, "")
-    }
-  ));
+  return /* @__PURE__ */ jsxs(EditorStack, { gap: 0.5, direction: "row", alignItems: "center", children: [
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        id: getOperationParamId(operationId, index),
+        value: valueOption,
+        options: selectOptions,
+        placeholder: paramDef.placeholder,
+        allowCustomValue: true,
+        onChange: (value2) => onChange(index, value2.value),
+        width: paramDef.minWidth || "auto"
+      }
+    ),
+    paramDef.optional && /* @__PURE__ */ jsx(
+      Button,
+      {
+        "data-testid": `operations.${index}.remove-param`,
+        size: "sm",
+        fill: "text",
+        icon: "times",
+        variant: "secondary",
+        title: `Remove ${paramDef.name}`,
+        onClick: () => onChange(index, "")
+      }
+    )
+  ] });
 }
 const getStyles = (theme) => {
   return {

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

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

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

@@ -1,7 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
 import { css } from '@emotion/css';
-import React__default from 'react';
 import '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
+import 'react';
 import '../../QueryEditor/types.js';
 import 'lodash';
 import '../../QueryEditor/EditorList.js';
@@ -24,7 +25,7 @@ import 'rxjs/operators';
 
 function OperationsEditorRow({ children }) {
   const styles = useStyles2(getStyles);
-  return /* @__PURE__ */ React__default.createElement("div", { className: styles.root }, /* @__PURE__ */ React__default.createElement(EditorStack, { gap: 1 }, children));
+  return /* @__PURE__ */ jsx("div", { className: styles.root, children: /* @__PURE__ */ jsx(EditorStack, { gap: 1, children }) });
 }
 const getStyles = (theme) => {
   return {

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

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

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

@@ -1,5 +1,6 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { css } from '@emotion/css';
-import React__default, { useMemo } from 'react';
+import { useMemo } from 'react';
 import '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';
 import { useStyles2, Tooltip, Button } from '@grafana/ui';
@@ -24,9 +25,9 @@ const QueryBuilderHints = ({
     });
     return hints2 != null ? hints2 : [];
   }, [datasource, visualQuery, data, queryModeller, buildDataQueryFromQueryString]);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, hints.length > 0 && /* @__PURE__ */ React__default.createElement("div", { className: styles.container }, hints.map((hint) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: hints.length > 0 && /* @__PURE__ */ jsx("div", { className: styles.container, children: hints.map((hint) => {
     var _a, _b, _c, _d;
-    return /* @__PURE__ */ React__default.createElement(Tooltip, { content: `${hint.label} ${(_a = hint.fix) == null ? undefined : _a.label}`, key: hint.type }, /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ jsx(Tooltip, { content: `${hint.label} ${(_a = hint.fix) == null ? undefined : _a.label}`, children: /* @__PURE__ */ jsxs(
       Button,
       {
         onClick: () => {
@@ -48,12 +49,14 @@ const QueryBuilderHints = ({
         },
         fill: "outline",
         size: "sm",
-        className: styles.hint
-      },
-      "hint: ",
-      ((_b = hint.fix) == null ? undefined : _b.title) || ((_d = (_c = hint.fix) == null ? undefined : _c.action) == null ? undefined : _d.type.toLowerCase().replace("_", " "))
-    ));
-  })));
+        className: styles.hint,
+        children: [
+          "hint: ",
+          ((_b = hint.fix) == null ? undefined : _b.title) || ((_d = (_c = hint.fix) == null ? undefined : _c.action) == null ? undefined : _d.type.toLowerCase().replace("_", " "))
+        ]
+      }
+    ) }, hint.type);
+  }) }) });
 };
 QueryBuilderHints.displayName = "QueryBuilderHints";
 const getStyles = (theme) => {

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

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilderHints.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryBuilderHints.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useMemo } from 'react';\n\nimport { type DataSourceApi, type GrafanaTheme2, type PanelData, type DataQuery } from '@grafana/data';\nimport { reportInteraction } from '@grafana/runtime';\nimport { Button, Tooltip, useStyles2 } from '@grafana/ui';\n\nimport { type VisualQuery, type VisualQueryModeller } from '../types';\n\ninterface Props<TVisualQuery extends VisualQuery, TDataQuery extends DataQuery> {\n  query: TVisualQuery;\n  datasource: DataSourceApi<TDataQuery>;\n  queryModeller: VisualQueryModeller;\n  buildVisualQueryFromString: (queryString: string) => { query: TVisualQuery };\n  buildDataQueryFromQueryString: (queryString: string) => TDataQuery;\n  buildQueryStringFromDataQuery: (dataQuery: TDataQuery) => string;\n  onChange: (update: TVisualQuery) => void;\n  data?: PanelData;\n}\n\nexport const QueryBuilderHints = <TVisualQuery extends VisualQuery, TDataQuery extends DataQuery>({\n  datasource,\n  query: visualQuery,\n  onChange,\n  data,\n  queryModeller,\n  buildVisualQueryFromString,\n  buildDataQueryFromQueryString,\n  buildQueryStringFromDataQuery,\n}: Props<TVisualQuery, TDataQuery>) => {\n  const styles = useStyles2(getStyles);\n\n  const hints = useMemo(() => {\n    const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));\n    // For now show only actionable hints\n    const hints = datasource.getQueryHints?.(dataQuery, data?.series || []).filter((hint) => hint.fix?.action);\n    return hints ?? [];\n  }, [datasource, visualQuery, data, queryModeller, buildDataQueryFromQueryString]);\n\n  return (\n    <>\n      {hints.length > 0 && (\n        <div className={styles.container}>\n          {hints.map((hint) => {\n            return (\n              <Tooltip content={`${hint.label} ${hint.fix?.label}`} key={hint.type}>\n                <Button\n                  onClick={() => {\n                    reportInteraction('grafana_query_builder_hints_clicked', {\n                      hint: hint.type,\n                      datasourceType: datasource.type,\n                    });\n\n                    if (hint?.fix?.action) {\n                      const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));\n                      const newQuery = datasource.modifyQuery?.(dataQuery, hint.fix.action);\n                      if (newQuery) {\n                        const newVisualQuery = buildVisualQueryFromString(\n                          buildQueryStringFromDataQuery(newQuery) ?? ''\n                        );\n                        return onChange(newVisualQuery.query);\n                      }\n                    }\n                  }}\n                  fill=\"outline\"\n                  size=\"sm\"\n                  className={styles.hint}\n                >\n                  hint: {hint.fix?.title || hint.fix?.action?.type.toLowerCase().replace('_', ' ')}\n                </Button>\n              </Tooltip>\n            );\n          })}\n        </div>\n      )}\n    </>\n  );\n};\n\nQueryBuilderHints.displayName = 'QueryBuilderHints';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    container: css`\n      display: flex;\n      align-items: start;\n    `,\n    hint: css`\n      margin-right: ${theme.spacing(1)};\n    `,\n  };\n};\n"],"names":["hints","_a","React","_b","_c"],"mappings":"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"}
+{"version":3,"file":"QueryBuilderHints.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryBuilderHints.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useMemo } from 'react';\n\nimport { type DataSourceApi, type GrafanaTheme2, type PanelData, type DataQuery } from '@grafana/data';\nimport { reportInteraction } from '@grafana/runtime';\nimport { Button, Tooltip, useStyles2 } from '@grafana/ui';\n\nimport { type VisualQuery, type VisualQueryModeller } from '../types';\n\ninterface Props<TVisualQuery extends VisualQuery, TDataQuery extends DataQuery> {\n  query: TVisualQuery;\n  datasource: DataSourceApi<TDataQuery>;\n  queryModeller: VisualQueryModeller;\n  buildVisualQueryFromString: (queryString: string) => { query: TVisualQuery };\n  buildDataQueryFromQueryString: (queryString: string) => TDataQuery;\n  buildQueryStringFromDataQuery: (dataQuery: TDataQuery) => string;\n  onChange: (update: TVisualQuery) => void;\n  data?: PanelData;\n}\n\nexport const QueryBuilderHints = <TVisualQuery extends VisualQuery, TDataQuery extends DataQuery>({\n  datasource,\n  query: visualQuery,\n  onChange,\n  data,\n  queryModeller,\n  buildVisualQueryFromString,\n  buildDataQueryFromQueryString,\n  buildQueryStringFromDataQuery,\n}: Props<TVisualQuery, TDataQuery>) => {\n  const styles = useStyles2(getStyles);\n\n  const hints = useMemo(() => {\n    const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));\n    // For now show only actionable hints\n    const hints = datasource.getQueryHints?.(dataQuery, data?.series || []).filter((hint) => hint.fix?.action);\n    return hints ?? [];\n  }, [datasource, visualQuery, data, queryModeller, buildDataQueryFromQueryString]);\n\n  return (\n    <>\n      {hints.length > 0 && (\n        <div className={styles.container}>\n          {hints.map((hint) => {\n            return (\n              <Tooltip content={`${hint.label} ${hint.fix?.label}`} key={hint.type}>\n                <Button\n                  onClick={() => {\n                    reportInteraction('grafana_query_builder_hints_clicked', {\n                      hint: hint.type,\n                      datasourceType: datasource.type,\n                    });\n\n                    if (hint?.fix?.action) {\n                      const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));\n                      const newQuery = datasource.modifyQuery?.(dataQuery, hint.fix.action);\n                      if (newQuery) {\n                        const newVisualQuery = buildVisualQueryFromString(\n                          buildQueryStringFromDataQuery(newQuery) ?? ''\n                        );\n                        return onChange(newVisualQuery.query);\n                      }\n                    }\n                  }}\n                  fill=\"outline\"\n                  size=\"sm\"\n                  className={styles.hint}\n                >\n                  hint: {hint.fix?.title || hint.fix?.action?.type.toLowerCase().replace('_', ' ')}\n                </Button>\n              </Tooltip>\n            );\n          })}\n        </div>\n      )}\n    </>\n  );\n};\n\nQueryBuilderHints.displayName = 'QueryBuilderHints';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    container: css`\n      display: flex;\n      align-items: start;\n    `,\n    hint: css`\n      margin-right: ${theme.spacing(1)};\n    `,\n  };\n};\n"],"names":["hints","_a","_b","_c"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { RadioButtonGroup } from '@grafana/ui';
 import { QueryEditorMode } from '../types.js';
 
@@ -7,7 +7,7 @@ const editorModes = [
   { label: "Code", value: QueryEditorMode.Code }
 ];
 function QueryEditorModeToggle({ mode, onChange }) {
-  return /* @__PURE__ */ React__default.createElement("div", { "data-testid": "QueryEditorModeToggle" }, /* @__PURE__ */ React__default.createElement(RadioButtonGroup, { options: editorModes, size: "sm", value: mode, onChange }));
+  return /* @__PURE__ */ jsx("div", { "data-testid": "QueryEditorModeToggle", children: /* @__PURE__ */ jsx(RadioButtonGroup, { options: editorModes, size: "sm", value: mode, onChange }) });
 }
 
 export { QueryEditorModeToggle };

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

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

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

@@ -1,6 +1,7 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { css } from '@emotion/css';
 import { uniqueId } from 'lodash';
-import React__default, { useRef } from 'react';
+import { useRef } from 'react';
 import '@grafana/data';
 import { useStyles2, Switch } from '@grafana/ui';
 import '../../QueryEditor/types.js';
@@ -26,7 +27,10 @@ function QueryHeaderSwitch({ label, ...inputProps }) {
   const dashedLabel = label.replace(" ", "-");
   const switchIdRef = useRef(uniqueId(`switch-${dashedLabel}`));
   const styles = useStyles2(getStyles);
-  return /* @__PURE__ */ React__default.createElement(EditorStack, { gap: 1 }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: switchIdRef.current, className: styles.switchLabel }, label), /* @__PURE__ */ React__default.createElement(Switch, { ...inputProps, id: switchIdRef.current }));
+  return /* @__PURE__ */ jsxs(EditorStack, { gap: 1, children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: switchIdRef.current, className: styles.switchLabel, children: label }),
+    /* @__PURE__ */ jsx(Switch, { ...inputProps, id: switchIdRef.current })
+  ] });
 }
 const getStyles = (theme) => {
   return {

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

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