[Discover][Metrics] Persist flyout state across navigation by lucaslopezf · Pull Request #251637 · elastic/kibana

lucaslopezf · 2026-02-04T11:34:43Z

Summary

This PR implements persistence of the metrics flyout state when duplicating Discover tabs. Previously, when a user duplicated a Discover tab with an open "View details" flyout, the flyout would close in the new tab, forcing the user to find the metric and reopen it.

Demo

Screen.Recording.2026-02-04.at.18.35.26.mov

Manual Testing

Open Discover with metrics data
Click "View details" on any metric to open the flyout
Select the "ES|QL Query" tab in the flyout
Duplicate the Discover tab (right-click tab → Duplicate)
Expected: The new tab opens with the same flyout visible, showing the same metric and the "ES|QL Query" tab selected
Change the tab in the duplicated view to "Overview"
Expected: The original tab remains on "ES|QL Query" (states are independent)

Known Limitations (Out of Scope)

There are edge cases where the flyout may not restore after duplicating a tab. These will be addressed in a follow-up issue after discussing with Miguel:

Metric not available in new tab: Each tab executes its own query. If the metric that was open in the flyout doesn't exist in the new tab's query results (e.g., due to real-time data changes, sampling differences, or timing), the flyout won't render since there's no data to display.
Pagination reset: When the number of metrics differs between tabs, pagination resets to page 1. If the flyout was open for a metric on a different page, it won't render because the lookup only searches within the current page.

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The release_note:breaking label should be applied in these situations.
Flaky Test Runner was used on any tests changed
The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines
Review the backport guidelines and apply applicable backport:* labels.

Identify risks

Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging.

See some risk examples
...

lucaslopezf · 2026-02-04T13:24:23Z

/oblt-deploy

lucaslopezf · 2026-02-04T14:49:30Z

/oblt-deploy

lucaslopezf · 2026-02-04T16:58:50Z

...hared/kbn-unified-chart-section-viewer/src/components/observability/metrics/metrics_grid.tsx

  const chartRefs = useRef<Map<string, HTMLDivElement>>(new Map());
  const { euiTheme } = useEuiTheme();
+  const { flyoutState, onFlyoutStateChange } = useMetricsExperienceState();
+  const fieldsMap = useMemo(() => createMetricFieldsMap(fields), [fields]);


Note for reviewer:

Since we now save the flyout state in Redux and need to retrieve it, we store a unique key (creating a Map for performance with O(1) lookup) to later retrieve the correct data whenever we want to render the flyout.

Key format: {dataViewIndex}::{metricName}

We use this structure because metricName alone is not unique (the same metric can exist in multiple data views).

lucaslopezf · 2026-02-04T17:00:14Z

...orm/plugins/shared/discover/public/application/main/state_management/redux/internal_state.ts

    actionCreator: discardFlyoutsOnTabChange,
    effect: () => {
-      dismissFlyouts([DiscoverFlyouts.lensEdit, DiscoverFlyouts.metricInsights]);
+      dismissFlyouts([DiscoverFlyouts.lensEdit]);


Note for reviewer:

The dismissFlyouts function programmatically clicks the close button of flyouts. When switching between Discover tabs, this was causing the metrics flyout to close and clear its state. Since now the flyout state is now managed per-tab in Redux (tab.uiState.metricsGrid.flyoutState) and each tab has its own independent flyout state we are fine

lucaslopezf · 2026-02-04T17:00:41Z

.../plugins/shared/discover/public/application/main/components/chart/chart_portals_renderer.tsx

  });

  const metricsGridState = useCurrentTabSelector((state) => state.uiState.metricsGrid);
+  const isTabSelected = useInternalStateSelector(


Note for reviewer:

This solves a rendering conflict when multiple Discover tabs have flyouts open.

The problem: (using Metrics as example but is generic)

Each Discover tab renders its own MetricsGrid component

When a flyout is open, it uses EuiPortal to render to document.body

If Tab 1 and Tab 2 both have flyout state, both would render flyouts to document.body

This causes visual overlap and event capture issues (clicking in Tab 2's flyout could affect Tab 1's state)

The solution:

Compare the current tab's ID (currentTabId from CurrentTabContext) with the active tab ID (state.tabs.unsafeCurrentId)

Pass isTabSelected to child components

Only render the flyout when isTabSelected === true

This ensures only the active tab renders its flyout, while inactive tabs preserve their flyout state in Redux for when they become active again.

Yeah kinda an unfortunate consequence of not unmounting the chart section when switching tabs (to preserve Lens state) that the flyout isn't unmounted. But I think what you've got here is probably the best we can do atm.

lucaslopezf · 2026-02-04T17:21:36Z

...hared/kbn-unified-chart-section-viewer/src/components/observability/metrics/metrics_grid.tsx

        </EuiFlexGrid>
      </A11yGridWrapper>
-      {expandedMetric && (
+      {flyoutData && isTabSelected && (


We only render the flyout when isTabSelected is true to prevent multiple flyouts from overlapping.

More details here

lucaslopezf · 2026-02-04T17:51:25Z

/ci

lucaslopezf · 2026-02-04T17:51:36Z

/oblt-deploy

elasticmachine · 2026-02-05T08:48:39Z

Pinging @elastic/obs-exploration-team (Team:obs-exploration)

davismcphee

Data Discover changes LGTM 👍 Gave it a quick test locally, works well!

davismcphee · 2026-02-06T01:11:22Z

.../plugins/shared/discover/public/application/main/components/chart/chart_portals_renderer.tsx

  });

  const metricsGridState = useCurrentTabSelector((state) => state.uiState.metricsGrid);
+  const isTabSelected = useInternalStateSelector(


Yeah kinda an unfortunate consequence of not unmounting the chart section when switching tabs (to preserve Lens state) that the flyout isn't unmounted. But I think what you've got here is probably the best we can do atm.

.../plugins/shared/discover/public/application/main/components/chart/chart_portals_renderer.tsx

kpatticha

Regarding:

Pagination reset:
https://github.com/user-attachments/assets/576f4797-bc51-4baf-814f-61d64658eb16

can we know in advance if the pagination is different so we won't open the flyout and close it immediately? How could we solve it in the future?

lucaslopezf · 2026-02-06T13:02:12Z

Regarding:

Pagination reset: https://github.com/user-attachments/assets/576f4797-bc51-4baf-814f-61d64658eb16

How could we solve it in the future?

I created issue 5190 in observability-dev. After talking with Miguel, he’ll close it and add more context, since the problem should be solved once metrics_info is in place (I haven’t looked into it, just relaying his explanation).
Right now, the main issue is that we don’t have consistency between queries on each refresh. If the time range is relative, that’s somewhat understandable, but this is also happening with absolute time ranges. Because of that, it’s currently impossible something like the next scenario:

1- go to page 4,
2- open a flyout,
3- duplicate the Discover tab
4- expect the flyout to still be open.

This should be automatically fixed once we have consistent query results.

can we know in advance if the pagination is different so we won't open the flyout and close it immediately?

I didn't notice this before your comment! It doesn't seem to happen consistently (at least in my case) but I'll take a look and see if we can fix in this PR! Thanks for catching this!!

...ckages/shared/kbn-unified-chart-section-viewer/src/common/utils/metric_key/get_metric_key.ts

...hared/kbn-unified-chart-section-viewer/src/components/observability/metrics/metrics_grid.tsx

lucaslopezf · 2026-02-09T10:03:03Z

/oblt-deploy

lucaslopezf · 2026-02-09T10:43:24Z

/oblt-deploy

lucaslopezf · 2026-02-09T10:58:37Z

/oblt-deploy

lucaslopezf · 2026-03-09T10:04:34Z

/oblt-deploy

…vigation

lucaslopezf · 2026-03-09T11:13:29Z

/oblt-deploy

lucaslopezf · 2026-03-09T11:47:52Z

/oblt-deploy

lucaslopezf · 2026-03-09T12:22:32Z

/oblt-deploy

…vigation

lucaslopezf · 2026-03-09T13:35:32Z

/oblt-deploy

…vigation

lucaslopezf · 2026-03-10T14:33:37Z

/ci

lucaslopezf · 2026-03-10T14:34:28Z

/flaky scoutConfig:src/platform/plugins/shared/discover/test/scout/ui/parallel.playwright.config.ts:50

kibanamachine · 2026-03-10T14:34:47Z

Flaky Test Runner

✅ Build triggered - kibana-flaky-test-suite-runner#11039

src/platform/plugins/shared/discover/test/scout/ui/parallel.playwright.config.ts x50

lucaslopezf · 2026-03-10T14:36:49Z

/oblt-deploy

lucaslopezf · 2026-03-10T15:10:04Z

@kpatticha I’m testing this PR before merging it, but I’m wondering if merging it could interfere with your metrics_info work.
Would you prefer to merge the metrics_info PR first and then I can rebase this one? Since metrics_info is more important

kibanamachine · 2026-03-10T16:00:34Z

Flaky Test Runner Stats

🎉 All tests passed! - kibana-flaky-test-suite-runner#11039

[✅] src/platform/plugins/shared/discover/test/scout/ui/parallel.playwright.config.ts: 50/50 tests passed.

see run history

lucaslopezf · 2026-03-11T08:26:36Z

Everything working as expected after EUI fix, but since this PR touches a lot of files, I’d prefer to wait for metrics_info PR to be to avoid creating extra rebase work on the work in progress. After that, I'll rebase and move forward. I've already mark the task as blocked by

…255036) ## Summary Related to elastic/observability-dev#5219. Implements Tier 2 E2E coverage for Discover Metrics journeys, aligned with the existing metrics_experience test architecture and config pattern. Adds two new parallel Scout specs in metrics_experience: - `query_kickstart.spec.ts`: validates recommended-query kickstart behavior from the ES|QL help flow, with environment-aware handling when Search all metrics is unavailable and Search all fields is shown. - `breakdown_by_dimension.spec.ts`: validates that selecting “Breakdown by dimension” from the field list is reflected in the metrics toolbar and preserves metrics grid rendering. This patch introduces coverage for the two unblocked journeys, but does not yet implement the "switch between tabs" third journey, which is blocked by #251637. ## Test Plan Validated via Scout metrics parallel config: ``` node scripts/scout.js run-tests --arch stateful --domain classic --config src/platform/plugins/shared/discover/test/scout/ui/metrics_experience_parallel.playwright.config.ts ``` Result on latest run: ``` All tests pass: 36 passed, 8 skipped, 0 failed. Exit code 0. ``` --------- Co-authored-by: Lucas Francisco López <lucaslopezf@gmail.com>

…lastic#255036) ## Summary Related to elastic/observability-dev#5219. Implements Tier 2 E2E coverage for Discover Metrics journeys, aligned with the existing metrics_experience test architecture and config pattern. Adds two new parallel Scout specs in metrics_experience: - `query_kickstart.spec.ts`: validates recommended-query kickstart behavior from the ES|QL help flow, with environment-aware handling when Search all metrics is unavailable and Search all fields is shown. - `breakdown_by_dimension.spec.ts`: validates that selecting “Breakdown by dimension” from the field list is reflected in the metrics toolbar and preserves metrics grid rendering. This patch introduces coverage for the two unblocked journeys, but does not yet implement the "switch between tabs" third journey, which is blocked by elastic#251637. ## Test Plan Validated via Scout metrics parallel config: ``` node scripts/scout.js run-tests --arch stateful --domain classic --config src/platform/plugins/shared/discover/test/scout/ui/metrics_experience_parallel.playwright.config.ts ``` Result on latest run: ``` All tests pass: 36 passed, 8 skipped, 0 failed. Exit code 0. ``` --------- Co-authored-by: Lucas Francisco López <lucaslopezf@gmail.com>

lucaslopezf changed the title ~~Discover(metrics): Persist flyout state across navigation~~ [Discover][Metrics]: Persist flyout state across navigation Feb 4, 2026

lucaslopezf changed the title ~~[Discover][Metrics]: Persist flyout state across navigation~~ [Discover][Metrics] Persist flyout state across navigation Feb 4, 2026

lucaslopezf added release_note:enhancement backport:skip This PR does not require backporting Team:obs-exploration Observability Exploration team v9.4.0 labels Feb 4, 2026

lucaslopezf commented Feb 4, 2026

View reviewed changes

lucaslopezf marked this pull request as ready for review February 5, 2026 08:48

lucaslopezf requested review from a team as code owners February 5, 2026 08:48

akowalska622 requested a review from davismcphee February 5, 2026 10:20

lucaslopezf added the Feature:Metrics in Discover label Feb 5, 2026

davismcphee approved these changes Feb 6, 2026

View reviewed changes

kpatticha reviewed Feb 6, 2026

View reviewed changes

...ckages/shared/kbn-unified-chart-section-viewer/src/common/utils/metric_key/get_metric_key.ts Outdated Show resolved Hide resolved

kpatticha reviewed Feb 6, 2026

View reviewed changes

...hared/kbn-unified-chart-section-viewer/src/components/observability/metrics/metrics_grid.tsx Outdated Show resolved Hide resolved

lucaslopezf force-pushed the 235834-persist-view-flyout-details-across-navigation branch from e4996ee to a8d2a33 Compare February 9, 2026 10:42

lucaslopezf force-pushed the 235834-persist-view-flyout-details-across-navigation branch from a5baff4 to e2c01fb Compare February 9, 2026 14:20

lucaslopezf added 10 commits March 9, 2026 10:58

clean up

d7e74b8

linting issues

dfaad75

linting issues

1aa94ef

rename metricData constant

e1c72fe

clean up flyoutstate to avoid inconsistencies

62f92d0

Add ownFocus=false

495667d

react-reverse-portal workaround

4f05c62

Wrap MetricFlyout to avoid react-reverse-portal error

8caee65

set ownFocus default behavior

5bc1efd

Add ownFocus workaround

0cbea55

lucaslopezf force-pushed the 235834-persist-view-flyout-details-across-navigation branch from b43c150 to 0cbea55 Compare March 9, 2026 09:59

Merge branch 'main' into 235834-persist-view-flyout-details-across-na…

46d0c48

…vigation

linting issues

cb6e7b3

Merge branch 'main' into 235834-persist-view-flyout-details-across-na…

f5217f9

…vigation

Merge branch 'main' into 235834-persist-view-flyout-details-across-na…

b384fee

…vigation

Conversation

lucaslopezf commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Demo

Manual Testing

Known Limitations (Out of Scope)

Checklist

Identify risks

Uh oh!

lucaslopezf commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lucaslopezf commented Feb 4, 2026

Uh oh!

lucaslopezf Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lucaslopezf Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lucaslopezf Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

davismcphee Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

lucaslopezf Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

lucaslopezf commented Feb 4, 2026

Uh oh!

lucaslopezf commented Feb 4, 2026

Uh oh!

elasticmachine commented Feb 5, 2026

Uh oh!

davismcphee left a comment

Choose a reason for hiding this comment

Uh oh!

davismcphee Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kpatticha left a comment

Choose a reason for hiding this comment

Uh oh!

lucaslopezf commented Feb 6, 2026

Uh oh!

Uh oh!

Uh oh!

lucaslopezf commented Feb 9, 2026

Uh oh!

lucaslopezf commented Feb 9, 2026

Uh oh!

lucaslopezf commented Feb 9, 2026

Uh oh!

lucaslopezf commented Mar 9, 2026

Uh oh!

lucaslopezf commented Mar 9, 2026

Uh oh!

lucaslopezf commented Mar 9, 2026

Uh oh!

lucaslopezf commented Mar 9, 2026

Uh oh!

lucaslopezf commented Mar 9, 2026

Uh oh!

lucaslopezf commented Mar 10, 2026

Uh oh!

lucaslopezf commented Mar 10, 2026

Uh oh!

kibanamachine commented Mar 10, 2026

Flaky Test Runner

✅ Build triggered - kibana-flaky-test-suite-runner#11039

Uh oh!

lucaslopezf commented Mar 10, 2026

Uh oh!

lucaslopezf commented Mar 10, 2026

lucaslopezf commented Feb 4, 2026 •

edited

Loading

lucaslopezf commented Feb 4, 2026 •

edited

Loading

lucaslopezf Feb 4, 2026 •

edited

Loading

lucaslopezf Feb 4, 2026 •

edited

Loading

lucaslopezf Feb 4, 2026 •

edited

Loading

lucaslopezf commented Mar 11, 2026 •

edited

Loading