@grafana/scenes 6.5.0--canary.1062.13949528214.0 → 6.5.0--canary.1062.13950672491.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v6.4.1 (Wed Mar 19 2025)
+
+#### 🐛 Bug Fix
+
+- AdhocVariable: Inject scopes in baseFilters [#1073](https://github.com/grafana/scenes/pull/1073) ([@mdvictor](https://github.com/mdvictor))
+
+#### Authors: 1
+
+- Victor Marin ([@mdvictor](https://github.com/mdvictor))
+
+---
+
+# v6.4.0 (Wed Mar 19 2025)
+
+#### 🚀 Enhancement
+
+- fix: explore button to preserve datasource selection in mixed datasource panels [#1074](https://github.com/grafana/scenes/pull/1074) ([@joannaWebDev](https://github.com/joannaWebDev))
+
+#### Authors: 1
+
+- Joanna ([@joannaWebDev](https://github.com/joannaWebDev))
+
+---
+
 # v6.3.1 (Tue Mar 11 2025)
 
 #### 🐛 Bug Fix

package/dist/esm/components/VizPanel/VizPanelExploreButton.js

@@ -16,10 +16,12 @@ function VizPanelExploreButtonComponent({ model }) {
   const { options } = model.useState();
   const { data } = sceneGraph.getData(model).useState();
   const { from, to } = sceneGraph.getTimeRange(model).useState();
-  const { value: exploreLink } = useAsync(
-    async () => data ? getExploreURL(data, model, { from, to }, options.transform) : "",
-    [data, model, from, to]
-  );
+  const { value: exploreLink } = useAsync(async () => {
+    if (!data) {
+      return "";
+    }
+    return getExploreURL(data, model, { from, to }, options.transform);
+  }, [data, model, from, to]);
   const returnToPrevious = useReturnToPrevious();
   if (exploreLink) {
     return /* @__PURE__ */ React.createElement(LinkButton, {

package/dist/esm/components/VizPanel/VizPanelExploreButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"VizPanelExploreButton.js","sources":["../../../../src/components/VizPanel/VizPanelExploreButton.tsx"],"sourcesContent":["import React from 'react';\n\nimport { LinkButton } from '@grafana/ui';\nimport { DataQuery } from '@grafana/schema';\nimport { useAsync } from 'react-use';\nimport { SceneComponentProps, SceneObjectState } from '../../core/types';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { getExploreURL } from '../../utils/explore';\nimport { useReturnToPrevious } from '@grafana/runtime';\n\nexport interface ExploreButtonOptions {\n  // Callback to hook in tracking / analytics\n  onClick?: () => void;\n\n  // Callback to modify interpolated query before passing it to explore\n  transform?: (query: DataQuery) => DataQuery;\n\n  // Title and href for the return to previous button\n  returnToPrevious?: {\n    title: string;\n    href?: string;\n  };\n}\n\ninterface ExploreButtonState extends SceneObjectState {\n  options: ExploreButtonOptions;\n}\n\nexport class VizPanelExploreButton extends SceneObjectBase<ExploreButtonState> {\n  static Component = VizPanelExploreButtonComponent;\n\n  public constructor(options: ExploreButtonOptions = {}) {\n    super({ options });\n  }\n}\n\nfunction VizPanelExploreButtonComponent({ model }: SceneComponentProps<VizPanelExploreButton>) {\n  const { options } = model.useState();\n\n  const { data } = sceneGraph.getData(model).useState();\n\n  const { from, to } = sceneGraph.getTimeRange(model).useState();\n\n  const { value: exploreLink } = useAsync(\n    async () => (data ? getExploreURL(data, model, { from, to }, options.transform) : ''),\n    [data, model, from, to]\n  );\n\n  const returnToPrevious = useReturnToPrevious();\n\n  if (exploreLink) {\n    return (\n      <LinkButton\n        key=\"explore\"\n        icon=\"compass\"\n        size=\"sm\"\n        variant=\"secondary\"\n        href={exploreLink}\n        onClick={() => {\n          if (options.returnToPrevious) {\n            returnToPrevious(options.returnToPrevious.title, options.returnToPrevious.href);\n          }\n          options.onClick?.();\n        }}\n      >\n        Explore\n      </LinkButton>\n    );\n  }\n  return null;\n}\n"],"names":[],"mappings":";;;;;;;;AA6BO,MAAM,8BAA8B,eAAoC,CAAA;AAAA,EAGtE,WAAA,CAAY,OAAgC,GAAA,EAAI,EAAA;AACrD,IAAM,KAAA,CAAA,EAAE,SAAS,CAAA,CAAA;AAAA,GACnB;AACF,CAAA;AANa,qBAAA,CACJ,SAAY,GAAA,8BAAA,CAAA;AAOrB,SAAS,8BAAA,CAA+B,EAAE,KAAA,EAAqD,EAAA;AAC7F,EAAA,MAAM,EAAE,OAAA,EAAY,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAEnC,EAAA,MAAM,EAAE,IAAK,EAAA,GAAI,WAAW,OAAQ,CAAA,KAAK,EAAE,QAAS,EAAA,CAAA;AAEpD,EAAM,MAAA,EAAE,MAAM,EAAG,EAAA,GAAI,WAAW,YAAa,CAAA,KAAK,EAAE,QAAS,EAAA,CAAA;AAE7D,EAAM,MAAA,EAAE,KAAO,EAAA,WAAA,EAAgB,GAAA,QAAA;AAAA,IAC7B,YAAa,IAAO,GAAA,aAAA,CAAc,IAAM,EAAA,KAAA,EAAO,EAAE,IAAA,EAAM,EAAG,EAAA,EAAG,OAAQ,CAAA,SAAS,CAAI,GAAA,EAAA;AAAA,IAClF,CAAC,IAAA,EAAM,KAAO,EAAA,IAAA,EAAM,EAAE,CAAA;AAAA,GACxB,CAAA;AAEA,EAAA,MAAM,mBAAmB,mBAAoB,EAAA,CAAA;AAE7C,EAAA,IAAI,WAAa,EAAA;AACf,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,MACC,GAAI,EAAA,SAAA;AAAA,MACJ,IAAK,EAAA,SAAA;AAAA,MACL,IAAK,EAAA,IAAA;AAAA,MACL,OAAQ,EAAA,WAAA;AAAA,MACR,IAAM,EAAA,WAAA;AAAA,MACN,SAAS,MAAM;AA3DvB,QAAA,IAAA,EAAA,CAAA;AA4DU,QAAA,IAAI,QAAQ,gBAAkB,EAAA;AAC5B,UAAA,gBAAA,CAAiB,OAAQ,CAAA,gBAAA,CAAiB,KAAO,EAAA,OAAA,CAAQ,iBAAiB,IAAI,CAAA,CAAA;AAAA,SAChF;AACA,QAAA,CAAA,EAAA,GAAA,OAAA,CAAQ,OAAR,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,OAAA,CAAA,CAAA;AAAA,OACF;AAAA,KAAA,EACD,SAED,CAAA,CAAA;AAAA,GAEJ;AACA,EAAO,OAAA,IAAA,CAAA;AACT;;;;"}
+{"version":3,"file":"VizPanelExploreButton.js","sources":["../../../../src/components/VizPanel/VizPanelExploreButton.tsx"],"sourcesContent":["import React from 'react';\n\nimport { LinkButton } from '@grafana/ui';\nimport { DataQuery } from '@grafana/schema';\nimport { useAsync } from 'react-use';\nimport { SceneComponentProps, SceneObjectState } from '../../core/types';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { getExploreURL } from '../../utils/explore';\nimport { useReturnToPrevious } from '@grafana/runtime';\n\nexport interface ExploreButtonOptions {\n  // Callback to hook in tracking / analytics\n  onClick?: () => void;\n\n  // Callback to modify interpolated query before passing it to explore\n  transform?: (query: DataQuery) => DataQuery;\n\n  // Title and href for the return to previous button\n  returnToPrevious?: {\n    title: string;\n    href?: string;\n  };\n}\n\ninterface ExploreButtonState extends SceneObjectState {\n  options: ExploreButtonOptions;\n}\n\nexport class VizPanelExploreButton extends SceneObjectBase<ExploreButtonState> {\n  static Component = VizPanelExploreButtonComponent;\n\n  public constructor(options: ExploreButtonOptions = {}) {\n    super({ options });\n  }\n}\n\nfunction VizPanelExploreButtonComponent({ model }: SceneComponentProps<VizPanelExploreButton>) {\n  const { options } = model.useState();\n\n  const { data } = sceneGraph.getData(model).useState();\n\n  const { from, to } = sceneGraph.getTimeRange(model).useState();\n\n  const { value: exploreLink } = useAsync(async () => {\n    if (!data) {\n      return '';\n    }\n\n    return getExploreURL(data, model, { from, to }, options.transform);\n  }, [data, model, from, to]);\n\n  const returnToPrevious = useReturnToPrevious();\n\n  if (exploreLink) {\n    return (\n      <LinkButton\n        key=\"explore\"\n        icon=\"compass\"\n        size=\"sm\"\n        variant=\"secondary\"\n        href={exploreLink}\n        onClick={() => {\n          if (options.returnToPrevious) {\n            returnToPrevious(options.returnToPrevious.title, options.returnToPrevious.href);\n          }\n          options.onClick?.();\n        }}\n      >\n        Explore\n      </LinkButton>\n    );\n  }\n  return null;\n}\n"],"names":[],"mappings":";;;;;;;;AA6BO,MAAM,8BAA8B,eAAoC,CAAA;AAAA,EAGtE,WAAA,CAAY,OAAgC,GAAA,EAAI,EAAA;AACrD,IAAM,KAAA,CAAA,EAAE,SAAS,CAAA,CAAA;AAAA,GACnB;AACF,CAAA;AANa,qBAAA,CACJ,SAAY,GAAA,8BAAA,CAAA;AAOrB,SAAS,8BAAA,CAA+B,EAAE,KAAA,EAAqD,EAAA;AAC7F,EAAA,MAAM,EAAE,OAAA,EAAY,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAEnC,EAAA,MAAM,EAAE,IAAK,EAAA,GAAI,WAAW,OAAQ,CAAA,KAAK,EAAE,QAAS,EAAA,CAAA;AAEpD,EAAM,MAAA,EAAE,MAAM,EAAG,EAAA,GAAI,WAAW,YAAa,CAAA,KAAK,EAAE,QAAS,EAAA,CAAA;AAE7D,EAAA,MAAM,EAAE,KAAA,EAAO,WAAY,EAAA,GAAI,SAAS,YAAY;AAClD,IAAA,IAAI,CAAC,IAAM,EAAA;AACT,MAAO,OAAA,EAAA,CAAA;AAAA,KACT;AAEA,IAAO,OAAA,aAAA,CAAc,MAAM,KAAO,EAAA,EAAE,MAAM,EAAG,EAAA,EAAG,QAAQ,SAAS,CAAA,CAAA;AAAA,KAChE,CAAC,IAAA,EAAM,KAAO,EAAA,IAAA,EAAM,EAAE,CAAC,CAAA,CAAA;AAE1B,EAAA,MAAM,mBAAmB,mBAAoB,EAAA,CAAA;AAE7C,EAAA,IAAI,WAAa,EAAA;AACf,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,MACC,GAAI,EAAA,SAAA;AAAA,MACJ,IAAK,EAAA,SAAA;AAAA,MACL,IAAK,EAAA,IAAA;AAAA,MACL,OAAQ,EAAA,WAAA;AAAA,MACR,IAAM,EAAA,WAAA;AAAA,MACN,SAAS,MAAM;AA9DvB,QAAA,IAAA,EAAA,CAAA;AA+DU,QAAA,IAAI,QAAQ,gBAAkB,EAAA;AAC5B,UAAA,gBAAA,CAAiB,OAAQ,CAAA,gBAAA,CAAiB,KAAO,EAAA,OAAA,CAAQ,iBAAiB,IAAI,CAAA,CAAA;AAAA,SAChF;AACA,QAAA,CAAA,EAAA,GAAA,OAAA,CAAQ,OAAR,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,OAAA,CAAA,CAAA;AAAA,OACF;AAAA,KAAA,EACD,SAED,CAAA,CAAA;AAAA,GAEJ;AACA,EAAO,OAAA,IAAA,CAAA;AACT;;;;"}

package/dist/esm/utils/explore.js

@@ -23,7 +23,11 @@ async function getExploreURL(data, model, timeRange, transform) {
     return (_a2 = transform == null ? void 0 : transform(q)) != null ? _a2 : q;
   });
   const queries = interpolatedQueries != null ? interpolatedQueries : [];
-  const datasource = (_d = (_c = queries.find((query) => {
+  const hasMixedDatasources = new Set(queries.map((q) => {
+    var _a2;
+    return (_a2 = q.datasource) == null ? void 0 : _a2.uid;
+  })).size > 1;
+  let datasource = hasMixedDatasources ? "-- Mixed --" : (_d = (_c = queries.find((query) => {
     var _a2;
     return !!((_a2 = query.datasource) == null ? void 0 : _a2.uid);
   })) == null ? void 0 : _c.datasource) == null ? void 0 : _d.uid;

package/dist/esm/utils/explore.js.map

@@ -1 +1 @@
-{"version":3,"file":"explore.js","sources":["../../../src/utils/explore.ts"],"sourcesContent":["import { PanelData, RawTimeRange, ScopedVars } from '@grafana/data';\nimport { SceneObject } from '../core/types';\nimport { wrapInSafeSerializableSceneObject } from './wrapInSafeSerializableSceneObject';\nimport { getDataSourceSrv } from '@grafana/runtime';\nimport { DataQuery } from '@grafana/schema';\n\n/**\n * Returns URL to Grafana explore for the queries in the given panel data and time range.\n */\nexport async function getExploreURL(\n  data: PanelData,\n  model: SceneObject,\n  timeRange: RawTimeRange,\n  transform?: (query: DataQuery) => DataQuery\n): Promise<string> {\n  const targets = data.request?.targets;\n  if (!targets) {\n    return '';\n  }\n\n  const { from, to } = timeRange;\n\n  const filters = data.request?.filters;\n\n  const scopedVars: ScopedVars = {\n    __sceneObject: wrapInSafeSerializableSceneObject(model),\n  };\n\n  const interpolatedQueries = (\n    await Promise.allSettled(\n      targets.map(async (q) => {\n        const queryDs = await getDataSourceSrv().get(q.datasource);\n        return queryDs.interpolateVariablesInQueries?.([q], scopedVars ?? {}, filters)[0] || q;\n      })\n    )\n  )\n    .filter((promise): promise is PromiseFulfilledResult<DataQuery> => promise.status === 'fulfilled')\n    .map((q) => q.value)\n    .map((q) => transform?.(q) ?? q);\n\n  const queries: DataQuery[] = interpolatedQueries ?? [];\n\n  const datasource = queries.find((query) => !!query.datasource?.uid)?.datasource?.uid;\n\n  if (queries?.length && datasource && from && to) {\n    const left = encodeURIComponent(\n      JSON.stringify({\n        datasource,\n        queries,\n        range: {\n          from,\n          to,\n        },\n      })\n    );\n\n    return `/explore?left=${left}`;\n  }\n  return '';\n}\n"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"explore.js","sources":["../../../src/utils/explore.ts"],"sourcesContent":["import { PanelData, RawTimeRange, ScopedVars } from '@grafana/data';\nimport { SceneObject } from '../core/types';\nimport { wrapInSafeSerializableSceneObject } from './wrapInSafeSerializableSceneObject';\nimport { getDataSourceSrv } from '@grafana/runtime';\nimport { DataQuery } from '@grafana/schema';\n\n/**\n * Returns URL to Grafana explore for the queries in the given panel data and time range.\n */\nexport async function getExploreURL(\n  data: PanelData,\n  model: SceneObject,\n  timeRange: RawTimeRange,\n  transform?: (query: DataQuery) => DataQuery\n): Promise<string> {\n  const targets = data.request?.targets;\n  if (!targets) {\n    return '';\n  }\n\n  const { from, to } = timeRange;\n  const filters = data.request?.filters;\n\n  const scopedVars: ScopedVars = {\n    __sceneObject: wrapInSafeSerializableSceneObject(model),\n  };\n\n  const interpolatedQueries = (\n    await Promise.allSettled(\n      targets.map(async (q) => {\n        const queryDs = await getDataSourceSrv().get(q.datasource);\n        return queryDs.interpolateVariablesInQueries?.([q], scopedVars ?? {}, filters)[0] || q;\n      })\n    )\n  )\n    .filter((promise): promise is PromiseFulfilledResult<DataQuery> => promise.status === 'fulfilled')\n    .map((q) => q.value)\n    .map((q) => transform?.(q) ?? q);\n\n  const queries: DataQuery[] = interpolatedQueries ?? [];\n\n  // Check if we have mixed datasources (more than one unique datasource)\n  const hasMixedDatasources = new Set(queries.map((q) => q.datasource?.uid)).size > 1;\n\n  // For mixed datasources, mark the datasource as \"-- Mixed --\"\n  let datasource = hasMixedDatasources\n    ? '-- Mixed --'\n    : queries.find((query) => !!query.datasource?.uid)?.datasource?.uid;\n\n  if (queries?.length && datasource && from && to) {\n    const left = encodeURIComponent(\n      JSON.stringify({\n        datasource,\n        queries,\n        range: {\n          from,\n          to,\n        },\n      })\n    );\n\n    return `/explore?left=${left}`;\n  }\n  return '';\n}\n"],"names":["_a"],"mappings":"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"}

package/dist/esm/variables/adhoc/AdHocFiltersCombobox/AdHocFilterPill.js

@@ -115,6 +115,13 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
         e.stopPropagation();
         model.restoreOriginalFilter(filter);
       },
+      onKeyDownCapture: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          e.stopPropagation();
+          model.restoreOriginalFilter(filter);
+        }
+      },
       name: "history",
       size: "md",
       className: styles.pillIcon,

package/dist/esm/variables/adhoc/AdHocFiltersCombobox/AdHocFilterPill.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdHocFilterPill.js","sources":["../../../../../src/variables/adhoc/AdHocFiltersCombobox/AdHocFilterPill.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2, IconButton, Tooltip } from '@grafana/ui';\nimport React, { useState, useRef, useCallback, useEffect } from 'react';\nimport { AdHocCombobox } from './AdHocFiltersCombobox';\nimport { AdHocFilterWithLabels, AdHocFiltersVariable } from '../AdHocFiltersVariable';\n\nconst LABEL_MAX_VISIBLE_LENGTH = 20;\n\ninterface Props {\n  filter: AdHocFilterWithLabels;\n  model: AdHocFiltersVariable;\n  readOnly?: boolean;\n  focusOnWipInputRef?: () => void;\n}\n\nexport function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }: Props) {\n  const styles = useStyles2(getStyles);\n  const [viewMode, setViewMode] = useState(true);\n  const [shouldFocusOnPillWrapper, setShouldFocusOnPillWrapper] = useState(false);\n  const pillWrapperRef = useRef<HTMLDivElement>(null);\n  const [populateInputOnEdit, setPopulateInputOnEdit] = useState(false);\n\n  const keyLabel = filter.keyLabel ?? filter.key;\n  const valueLabel = filter.valueLabels?.join(', ') || filter.values?.join(', ') || filter.value;\n\n  const handleChangeViewMode = useCallback(\n    (event?: React.MouseEvent, shouldFocusOnPillWrapperOverride?: boolean) => {\n      event?.stopPropagation();\n      if (readOnly) {\n        return;\n      }\n\n      setShouldFocusOnPillWrapper(shouldFocusOnPillWrapperOverride ?? !viewMode);\n      setViewMode(!viewMode);\n    },\n    [readOnly, viewMode]\n  );\n\n  useEffect(() => {\n    if (shouldFocusOnPillWrapper) {\n      pillWrapperRef.current?.focus();\n      setShouldFocusOnPillWrapper(false);\n    }\n  }, [shouldFocusOnPillWrapper]);\n\n  // set viewMode to false when filter.forceEdit is defined\n  useEffect(() => {\n    if (filter.forceEdit && viewMode) {\n      setViewMode(false);\n      // immediately set forceEdit back to undefined as a clean up\n      model._updateFilter(filter, { forceEdit: undefined });\n    }\n  }, [filter, model, viewMode]);\n\n  // reset populateInputOnEdit when pill goes into view mode\n  useEffect(() => {\n    if (viewMode) {\n      setPopulateInputOnEdit((prevValue) => (prevValue ? false : prevValue));\n    }\n  }, [viewMode]);\n\n  if (viewMode) {\n    const pillText = (\n      <span className={styles.pillText}>\n        {keyLabel} {filter.operator} {valueLabel}\n      </span>\n    );\n    return (\n      <div\n        className={cx(styles.combinedFilterPill, readOnly && styles.readOnlyCombinedFilter)}\n        onClick={(e) => {\n          e.stopPropagation();\n          setPopulateInputOnEdit(true);\n          handleChangeViewMode();\n        }}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            setPopulateInputOnEdit(true);\n            handleChangeViewMode();\n          }\n        }}\n        role=\"button\"\n        aria-label={`Edit filter with key ${keyLabel}`}\n        tabIndex={0}\n        ref={pillWrapperRef}\n      >\n        {valueLabel.length < LABEL_MAX_VISIBLE_LENGTH ? (\n          pillText\n        ) : (\n          <Tooltip content={<div className={styles.tooltipText}>{valueLabel}</div>} placement=\"top\">\n            {pillText}\n          </Tooltip>\n        )}\n\n        {!readOnly && !filter.origin ? (\n          <IconButton\n            onClick={(e) => {\n              e.stopPropagation();\n              model._removeFilter(filter);\n              setTimeout(() => focusOnWipInputRef?.());\n            }}\n            onKeyDownCapture={(e) => {\n              if (e.key === 'Enter') {\n                e.preventDefault();\n                e.stopPropagation();\n                model._removeFilter(filter);\n                setTimeout(() => focusOnWipInputRef?.());\n              }\n            }}\n            name=\"times\"\n            size=\"md\"\n            className={styles.pillIcon}\n            tooltip={`Remove filter with key ${keyLabel}`}\n          />\n        ) : null}\n\n        {filter.origin && !filter.originalValue && (\n          <IconButton\n            name=\"info-circle\"\n            size=\"md\"\n            className={styles.pillIcon}\n            tooltip={`This is a ${filter.origin} injected filter`}\n          />\n        )}\n\n        {filter.origin && filter.originalValue && (\n          <IconButton\n            onClick={(e) => {\n              e.stopPropagation();\n              model.restoreOriginalFilter(filter);\n            }}\n            name=\"history\"\n            size=\"md\"\n            className={styles.pillIcon}\n            tooltip={`Restore filter to its original value`}\n          />\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <AdHocCombobox\n      filter={filter}\n      model={model}\n      handleChangeViewMode={handleChangeViewMode}\n      focusOnWipInputRef={focusOnWipInputRef}\n      populateInputOnEdit={populateInputOnEdit}\n    />\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  combinedFilterPill: css({\n    display: 'flex',\n    alignItems: 'center',\n    background: theme.colors.action.selected,\n    borderRadius: theme.shape.radius.default,\n    border: `1px solid ${theme.colors.border.weak}`,\n    padding: theme.spacing(0.125, 0, 0.125, 1),\n    color: theme.colors.text.primary,\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n    minHeight: theme.spacing(2.75),\n    ...theme.typography.bodySmall,\n    fontWeight: theme.typography.fontWeightBold,\n    cursor: 'pointer',\n\n    '&:hover': {\n      background: theme.colors.action.hover,\n    },\n  }),\n  readOnlyCombinedFilter: css({\n    paddingRight: theme.spacing(1),\n    cursor: 'text',\n    '&:hover': {\n      background: theme.colors.action.selected,\n    },\n  }),\n  pillIcon: css({\n    marginInline: theme.spacing(0.5),\n    cursor: 'pointer',\n    '&:hover': {\n      color: theme.colors.text.primary,\n    },\n  }),\n  pillText: css({\n    maxWidth: '200px',\n    width: '100%',\n    textOverflow: 'ellipsis',\n    overflow: 'hidden',\n  }),\n  tooltipText: css({\n    textAlign: 'center',\n  }),\n});\n"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"AdHocFilterPill.js","sources":["../../../../../src/variables/adhoc/AdHocFiltersCombobox/AdHocFilterPill.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2, IconButton, Tooltip } from '@grafana/ui';\nimport React, { useState, useRef, useCallback, useEffect } from 'react';\nimport { AdHocCombobox } from './AdHocFiltersCombobox';\nimport { AdHocFilterWithLabels, AdHocFiltersVariable } from '../AdHocFiltersVariable';\n\nconst LABEL_MAX_VISIBLE_LENGTH = 20;\n\ninterface Props {\n  filter: AdHocFilterWithLabels;\n  model: AdHocFiltersVariable;\n  readOnly?: boolean;\n  focusOnWipInputRef?: () => void;\n}\n\nexport function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }: Props) {\n  const styles = useStyles2(getStyles);\n  const [viewMode, setViewMode] = useState(true);\n  const [shouldFocusOnPillWrapper, setShouldFocusOnPillWrapper] = useState(false);\n  const pillWrapperRef = useRef<HTMLDivElement>(null);\n  const [populateInputOnEdit, setPopulateInputOnEdit] = useState(false);\n\n  const keyLabel = filter.keyLabel ?? filter.key;\n  const valueLabel = filter.valueLabels?.join(', ') || filter.values?.join(', ') || filter.value;\n\n  const handleChangeViewMode = useCallback(\n    (event?: React.MouseEvent, shouldFocusOnPillWrapperOverride?: boolean) => {\n      event?.stopPropagation();\n      if (readOnly) {\n        return;\n      }\n\n      setShouldFocusOnPillWrapper(shouldFocusOnPillWrapperOverride ?? !viewMode);\n      setViewMode(!viewMode);\n    },\n    [readOnly, viewMode]\n  );\n\n  useEffect(() => {\n    if (shouldFocusOnPillWrapper) {\n      pillWrapperRef.current?.focus();\n      setShouldFocusOnPillWrapper(false);\n    }\n  }, [shouldFocusOnPillWrapper]);\n\n  // set viewMode to false when filter.forceEdit is defined\n  useEffect(() => {\n    if (filter.forceEdit && viewMode) {\n      setViewMode(false);\n      // immediately set forceEdit back to undefined as a clean up\n      model._updateFilter(filter, { forceEdit: undefined });\n    }\n  }, [filter, model, viewMode]);\n\n  // reset populateInputOnEdit when pill goes into view mode\n  useEffect(() => {\n    if (viewMode) {\n      setPopulateInputOnEdit((prevValue) => (prevValue ? false : prevValue));\n    }\n  }, [viewMode]);\n\n  if (viewMode) {\n    const pillText = (\n      <span className={styles.pillText}>\n        {keyLabel} {filter.operator} {valueLabel}\n      </span>\n    );\n    return (\n      <div\n        className={cx(styles.combinedFilterPill, readOnly && styles.readOnlyCombinedFilter)}\n        onClick={(e) => {\n          e.stopPropagation();\n          setPopulateInputOnEdit(true);\n          handleChangeViewMode();\n        }}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            setPopulateInputOnEdit(true);\n            handleChangeViewMode();\n          }\n        }}\n        role=\"button\"\n        aria-label={`Edit filter with key ${keyLabel}`}\n        tabIndex={0}\n        ref={pillWrapperRef}\n      >\n        {valueLabel.length < LABEL_MAX_VISIBLE_LENGTH ? (\n          pillText\n        ) : (\n          <Tooltip content={<div className={styles.tooltipText}>{valueLabel}</div>} placement=\"top\">\n            {pillText}\n          </Tooltip>\n        )}\n\n        {!readOnly && !filter.origin ? (\n          <IconButton\n            onClick={(e) => {\n              e.stopPropagation();\n              model._removeFilter(filter);\n              setTimeout(() => focusOnWipInputRef?.());\n            }}\n            onKeyDownCapture={(e) => {\n              if (e.key === 'Enter') {\n                e.preventDefault();\n                e.stopPropagation();\n                model._removeFilter(filter);\n                setTimeout(() => focusOnWipInputRef?.());\n              }\n            }}\n            name=\"times\"\n            size=\"md\"\n            className={styles.pillIcon}\n            tooltip={`Remove filter with key ${keyLabel}`}\n          />\n        ) : null}\n\n        {filter.origin && !filter.originalValue && (\n          <IconButton\n            name=\"info-circle\"\n            size=\"md\"\n            className={styles.pillIcon}\n            tooltip={`This is a ${filter.origin} injected filter`}\n          />\n        )}\n\n        {filter.origin && filter.originalValue && (\n          <IconButton\n            onClick={(e) => {\n              e.stopPropagation();\n              model.restoreOriginalFilter(filter);\n            }}\n            onKeyDownCapture={(e) => {\n              if (e.key === 'Enter') {\n                e.preventDefault();\n                e.stopPropagation();\n                model.restoreOriginalFilter(filter);\n              }\n            }}\n            name=\"history\"\n            size=\"md\"\n            className={styles.pillIcon}\n            tooltip={`Restore filter to its original value`}\n          />\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <AdHocCombobox\n      filter={filter}\n      model={model}\n      handleChangeViewMode={handleChangeViewMode}\n      focusOnWipInputRef={focusOnWipInputRef}\n      populateInputOnEdit={populateInputOnEdit}\n    />\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  combinedFilterPill: css({\n    display: 'flex',\n    alignItems: 'center',\n    background: theme.colors.action.selected,\n    borderRadius: theme.shape.radius.default,\n    border: `1px solid ${theme.colors.border.weak}`,\n    padding: theme.spacing(0.125, 0, 0.125, 1),\n    color: theme.colors.text.primary,\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n    minHeight: theme.spacing(2.75),\n    ...theme.typography.bodySmall,\n    fontWeight: theme.typography.fontWeightBold,\n    cursor: 'pointer',\n\n    '&:hover': {\n      background: theme.colors.action.hover,\n    },\n  }),\n  readOnlyCombinedFilter: css({\n    paddingRight: theme.spacing(1),\n    cursor: 'text',\n    '&:hover': {\n      background: theme.colors.action.selected,\n    },\n  }),\n  pillIcon: css({\n    marginInline: theme.spacing(0.5),\n    cursor: 'pointer',\n    '&:hover': {\n      color: theme.colors.text.primary,\n    },\n  }),\n  pillText: css({\n    maxWidth: '200px',\n    width: '100%',\n    textOverflow: 'ellipsis',\n    overflow: 'hidden',\n  }),\n  tooltipText: css({\n    textAlign: 'center',\n  }),\n});\n"],"names":["_a"],"mappings":"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"}

package/dist/index.js

@@ -5265,6 +5265,13 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
         e.stopPropagation();
         model.restoreOriginalFilter(filter);
       },
+      onKeyDownCapture: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          e.stopPropagation();
+          model.restoreOriginalFilter(filter);
+        }
+      },
       name: "history",
       size: "md",
       className: styles.pillIcon,
@@ -10990,7 +10997,11 @@ async function getExploreURL(data, model, timeRange, transform) {
     return (_a2 = transform == null ? void 0 : transform(q)) != null ? _a2 : q;
   });
   const queries = interpolatedQueries != null ? interpolatedQueries : [];
-  const datasource = (_d = (_c = queries.find((query) => {
+  const hasMixedDatasources = new Set(queries.map((q) => {
+    var _a2;
+    return (_a2 = q.datasource) == null ? void 0 : _a2.uid;
+  })).size > 1;
+  let datasource = hasMixedDatasources ? "-- Mixed --" : (_d = (_c = queries.find((query) => {
     var _a2;
     return !!((_a2 = query.datasource) == null ? void 0 : _a2.uid);
   })) == null ? void 0 : _c.datasource) == null ? void 0 : _d.uid;
@@ -11020,10 +11031,12 @@ function VizPanelExploreButtonComponent({ model }) {
   const { options } = model.useState();
   const { data } = sceneGraph.getData(model).useState();
   const { from, to } = sceneGraph.getTimeRange(model).useState();
-  const { value: exploreLink } = reactUse.useAsync(
-    async () => data ? getExploreURL(data, model, { from, to }, options.transform) : "",
-    [data, model, from, to]
-  );
+  const { value: exploreLink } = reactUse.useAsync(async () => {
+    if (!data) {
+      return "";
+    }
+    return getExploreURL(data, model, { from, to }, options.transform);
+  }, [data, model, from, to]);
   const returnToPrevious = runtime.useReturnToPrevious();
   if (exploreLink) {
     return /* @__PURE__ */ React__default["default"].createElement(ui.LinkButton, {