npm - @grafana/plugin-ui - Versions diffs - 0.15.0 → 0.16.0-dsconfig.a155abe - Mend

@grafana/plugin-ui 0.15.0 → 0.16.0-dsconfig.a155abe

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (240) hide show

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

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

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

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import { css } from '@emotion/css';
 import { renderMarkdown } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';

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

@@ -1,16 +1,16 @@
 import { css } from '@emotion/css';
-import React, { r as reactExports } from '../../../_virtual/index.js';
+import React, { memo, useState } from 'react';
 import '@hello-pangea/dnd';
 import '@grafana/data';
 import { useStyles2, Button, Select } from '@grafana/ui';
 import { OperationInfoButton } from './OperationInfoButton.js';
 import { FlexItem } from '../../QueryEditor/FlexItem.js';
-const OperationHeader = reactExports.memo(
+const OperationHeader = memo(
   ({ operation, definition, index, onChange, onRemove, onToggle, queryModeller, dragHandleProps }) => {
     var _a;
     const styles = useStyles2(getStyles);
-    const [state, setState] = reactExports.useState({});
+    const [state, setState] = useState({});
     const onToggleSwitcher = () => {
       if (state.isOpen) {
         setState({ ...state, isOpen: false });

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

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

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

@@ -1,13 +1,13 @@
-import React, { r as reactExports } from '../../../_virtual/index.js';
+import React, { memo, useState } from 'react';
 import { css } from '@emotion/css';
 import { usePopperTooltip } from 'react-popper-tooltip';
 import { renderMarkdown } from '@grafana/data';
 import { useStyles2, Button, Portal } from '@grafana/ui';
 import { FlexItem } from '../../QueryEditor/FlexItem.js';
-const OperationInfoButton = reactExports.memo(({ definition, operation, innerQueryPlaceholder }) => {
+const OperationInfoButton = memo(({ definition, operation, innerQueryPlaceholder }) => {
   const styles = useStyles2(getStyles);
-  const [show, setShow] = reactExports.useState(false);
+  const [show, setShow] = useState(false);
   const { getTooltipProps, setTooltipRef, setTriggerRef, visible } = usePopperTooltip({
     placement: "top",
     visible: show,

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

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

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { r as reactExports } from '../../../_virtual/index.js';
+import React, { useState } from 'react';
 import { DragDropContext, Droppable } from '@hello-pangea/dnd';
 import { useMountedState, usePrevious } from 'react-use';
 import '@grafana/data';
@@ -34,7 +34,7 @@ function OperationList({
   const styles = useStyles2(getStyles);
   const { operations } = query;
   const opsToHighlight = useOperationsHighlight(operations);
-  const [cascaderOpen, setCascaderOpen] = reactExports.useState(false);
+  const [cascaderOpen, setCascaderOpen] = useState(false);
   const onOperationChange = (index, update) => {
     const updatedList = [...operations];
     updatedList.splice(index, 1, update);

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

	@@ -1 +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":["useState"],"mappings":"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"}
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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"}

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

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import 'prismjs';
 import { OperationExplainedBox } from './OperationExplainedBox.js';
 import { RawQuery } from './RawQuery.js';

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

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import { css } from '@emotion/css';
 import { toOption } from '@grafana/data';
 import { AutoSizeInput, Checkbox, useStyles2, Button, Select } from '@grafana/ui';

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

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import { css } from '@emotion/css';
 import '@grafana/data';
 import { useStyles2 } from '@grafana/ui';

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { r as reactExports } from '../../../_virtual/index.js';
+import React, { useMemo } from 'react';
 import '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';
 import { useStyles2, Tooltip, Button } from '@grafana/ui';
@@ -15,7 +15,7 @@ const QueryBuilderHints = ({
   buildQueryStringFromDataQuery
 }) => {
   const styles = useStyles2(getStyles);
-  const hints = reactExports.useMemo(() => {
+  const hints = useMemo(() => {
     var _a;
     const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));
     const hints2 = (_a = datasource.getQueryHints) == null ? undefined : _a.call(datasource, dataQuery, (data == null ? undefined : data.series) || []).filter((hint) => {

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

	@@ -1 +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":["~~useMemo","~~hints","_a","_b","_c"],"mappings":";;;;;;AAoBO,MAAM,oBAAoB,CAAiE;AAAA,EAChG,UAAA;AAAA,EACA,KAAO,EAAA,WAAA;AAAA,EACP,QAAA;AAAA,EACA,IAAA;AAAA,EACA,aAAA;AAAA,EACA,0BAAA;AAAA,EACA,6BAAA;AAAA,EACA;AACF,CAAuC,KAAA;AACrC,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EAAM,MAAA,KAAA,~~GAAQA~~,~~qBAAQ~~,MAAM;AAhC9B,IAAA,IAAA,EAAA;AAiCI,IAAA,MAAM,SAAY,GAAA,6BAAA,CAA8B,aAAc,CAAA,WAAA,CAAY,WAAW,CAAC,CAAA;AAEtF,~~IAAMC~~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"}
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","_b","_c"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import { RadioButtonGroup } from '@grafana/ui';
 import { QueryEditorMode } from '../types.js';

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { uniqueId } from 'lodash';
-import React, { r as reactExports } from '../../../_virtual/index.js';
+import React, { useRef } from 'react';
 import '@grafana/data';
 import { useStyles2, Switch } from '@grafana/ui';
 import '../../QueryEditor/types.js';
@@ -21,7 +21,7 @@ import '../../QueryEditor/visual-query-builder/EditorField.js';
 function QueryHeaderSwitch({ label, ...inputProps }) {
   const dashedLabel = label.replace(" ", "-");
-  const switchIdRef = reactExports.useRef(uniqueId(`switch-${dashedLabel}`));
+  const switchIdRef = useRef(uniqueId(`switch-${dashedLabel}`));
   const styles = useStyles2(getStyles);
   return /* @__PURE__ */ React.createElement(EditorStack, { gap: 1 }, /* @__PURE__ */ React.createElement("label", { htmlFor: switchIdRef.current, className: styles.switchLabel }, label), /* @__PURE__ */ React.createElement(Switch, { ...inputProps, id: switchIdRef.current }));
 }

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

	@@ -1 +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":[~~"useRef"~~],"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,~~cAAcA~~,~~mBAAO~~,CAAA,QAAA,CAAS,CAAU,OAAA,EAAA,WAAW,EAAE,CAAC,CAAA;AAC5D,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,eAAY,GAAK,EAAA,CAAA,EAAA,sCACf,OAAM,EAAA,EAAA,OAAA,EAAS,YAAY,OAAS,EAAA,SAAA,EAAW,OAAO,WACpD,EAAA,EAAA,KACH,mBACC,KAAA,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;;;;"}
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":[],"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,KAAA,CAAA,aAAA,CAAC,eAAY,GAAK,EAAA,CAAA,EAAA,sCACf,OAAM,EAAA,EAAA,OAAA,EAAS,YAAY,OAAS,EAAA,SAAA,EAAW,OAAO,WACpD,EAAA,EAAA,KACH,mBACC,KAAA,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;;;;"}

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

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import { css } from '@emotion/css';
 import { useToggle } from 'react-use';
 import { getValueFormat } from '@grafana/data';

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

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import { cx, css } from '@emotion/css';
 import Prism from 'prismjs';
 import { textUtil } from '@grafana/data';

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

@@ -1,4 +1,4 @@
-import '../../_virtual/index.js';
+import 'react';
 import '@grafana/data';
 var QueryEditorMode = /* @__PURE__ */ ((QueryEditorMode2) => {

package/dist/esm/hooks/useDebounce.js CHANGED Viewed

@@ -1,9 +1,9 @@
-import { r as reactExports } from '../_virtual/index.js';
+import { useState, useEffect } from 'react';
 const DEFAULT_DELAY = 275;
 const useDebounce = (value, delay = DEFAULT_DELAY) => {
-  const [debouncedValue, setDebouncedValue] = reactExports.useState(value);
-  reactExports.useEffect(() => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
     const handler = setTimeout(() => {
       setDebouncedValue(value);
     }, delay);

package/dist/esm/hooks/useDebounce.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useDebounce.js","sources":["../../../src/hooks/useDebounce.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nexport const DEFAULT_DELAY = 275;\n\nexport const useDebounce = <T>(value: T, delay: number = DEFAULT_DELAY) => {\n const [debouncedValue, setDebouncedValue] = useState(value);\n\n useEffect(() => {\n const handler = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n\n return () => {\n clearTimeout(handler);\n };\n // TODO: We should fix this\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [value]);\n\n return debouncedValue;\n};\n"],"names":[~~"useState","useEffect"~~],"mappings":";;AAEO,MAAM,aAAgB,GAAA;AAEtB,MAAM,WAAc,GAAA,CAAI,KAAU,EAAA,KAAA,GAAgB,aAAkB,KAAA;AACzE,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,~~GAAIA~~,~~sBAAS~~,KAAK,CAAA;AAE1D,~~EAAAC~~,~~sBAAA~~,CAAU,MAAM;AACd,IAAM,MAAA,OAAA,GAAU,WAAW,MAAM;AAC/B,MAAA,iBAAA,CAAkB,KAAK,CAAA;AAAA,OACtB,KAAK,CAAA;AAER,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,OAAO,CAAA;AAAA,KACtB;AAAA,GAGF,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAO,OAAA,cAAA;AACT;;;;"}
1	+ {"version":3,"file":"useDebounce.js","sources":["../../../src/hooks/useDebounce.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nexport const DEFAULT_DELAY = 275;\n\nexport const useDebounce = <T>(value: T, delay: number = DEFAULT_DELAY) => {\n const [debouncedValue, setDebouncedValue] = useState(value);\n\n useEffect(() => {\n const handler = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n\n return () => {\n clearTimeout(handler);\n };\n // TODO: We should fix this\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [value]);\n\n return debouncedValue;\n};\n"],"names":[],"mappings":";;AAEO,MAAM,aAAgB,GAAA;AAEtB,MAAM,WAAc,GAAA,CAAI,KAAU,EAAA,KAAA,GAAgB,aAAkB,KAAA;AACzE,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAS,KAAK,CAAA;AAE1D,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,OAAA,GAAU,WAAW,MAAM;AAC/B,MAAA,iBAAA,CAAkB,KAAK,CAAA;AAAA,OACtB,KAAK,CAAA;AAER,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,OAAO,CAAA;AAAA,KACtB;AAAA,GAGF,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAO,OAAA,cAAA;AACT;;;;"}