Skip to content
  • Davis McPhee's avatar
    d536f850
    [Discover] Support Lens fetches across tabs (#218506) · d536f850
    Davis McPhee authored
    ## Summary
    
    This PR implements support for Lens chart fetches across Discover tabs,
    and restoring chart state when returning to a tab.
    
    The Lens embeddable does not currently support continuing data fetching
    after it's been unmounted, or fully support restoring chart state using
    previously fetched data. The Vis team is aware of this request, but in
    the meantime we're using an alternative approach that keeps Lens charts
    rendered in memory for each tab that's been visited at least once. This
    allows fetches to run in the background and displays the resulting chart
    when switching back to tabs. Doing this involved some refactoring to
    both Discover and Unified Histogram:
    - Create a `ChartPortalsRenderer` wrapper component in Discover to lift
    chart rendering high up in the React tree and render charts into
    [reverse portals](https://github.com/httptoolkit/react-reverse-portal),
    ensuring charts are not remounted when switching tabs and continue to be
    rendered after switching away from a tab.
    - Refactor Unified Histogram from a single "container" component into
    three pieces: a `UnifiedHistogramLayout` component, a
    `UnifiedHistogramChart` component, and a `useUnifiedHistogram` hook to
    tie things together. This approach allows us to render the chart and
    hook separately (in a reverse portal) from the layout, making it
    possible to separate the lifecycle of both components without keeping
    the rest of Discover's components in memory after switching tabs.
    - **Important note:** This change had the side effect of bloating the
    Unified Histogram page load bundle since we're now exporting a static
    hook that isn't dynamically imported. We could have worked around this
    by getting creative with dynamic imports, but doing that seemed hacky.
    Instead I decided now was a good time to split Unified Histogram out
    into a package in order to support tree shaking, which also has the
    added benefits of one fewer plugins to load on startup, and simplifying
    the Discover async bundles.
    
    There is one flaw with this approach: the `useDiscoverHistogram` hook
    currently depends on global services for retrieving the current query
    and filters (including global filters) through the `useQuerySubscriber`
    hook. This means the values can become out of sync in inactive tabs when
    the user modifies them in the current tab. In practice this doesn't seem
    to have an effect in most cases since we don't trigger new fetches in
    inactive tabs, and sync the the current tab values to the global
    services when switching back to a tab. However, we should still fix this
    for the MVP with an approach that doesn't leak state since the current
    approach is brittle. I avoided doing that in this PR since it would
    likely cause more conflicts with #217706, and that PR may introduce a
    solution to the issue anyway (syncing global state to the redux store,
    which we can rely on in the hook instead).
    
    Resolves #216475.
    
    ### Checklist
    
    - [ ] Any text added follows [EUI's writing
    guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
    sentence case text and includes [i18n
    support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
    - [ ]
    [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
    was added for features that require explanation or tutorials
    - [ ] [Unit or functional
    tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
    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](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
    - [x] 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](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
    used on any tests changed
    - [x] The PR description includes the appropriate Release Notes section,
    and the correct `release_note:*` label is applied per the
    [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process
    
    )
    
    ---------
    
    Co-authored-by: default avatarkibanamachine <42973632+kibanamachine@users.noreply.github.com>
    d536f850
    [Discover] Support Lens fetches across tabs (#218506)
    Davis McPhee authored
    ## Summary
    
    This PR implements support for Lens chart fetches across Discover tabs,
    and restoring chart state when returning to a tab.
    
    The Lens embeddable does not currently support continuing data fetching
    after it's been unmounted, or fully support restoring chart state using
    previously fetched data. The Vis team is aware of this request, but in
    the meantime we're using an alternative approach that keeps Lens charts
    rendered in memory for each tab that's been visited at least once. This
    allows fetches to run in the background and displays the resulting chart
    when switching back to tabs. Doing this involved some refactoring to
    both Discover and Unified Histogram:
    - Create a `ChartPortalsRenderer` wrapper component in Discover to lift
    chart rendering high up in the React tree and render charts into
    [reverse portals](https://github.com/httptoolkit/react-reverse-portal),
    ensuring charts are not remounted when switching tabs and continue to be
    rendered after switching away from a tab.
    - Refactor Unified Histogram from a single "container" component into
    three pieces: a `UnifiedHistogramLayout` component, a
    `UnifiedHistogramChart` component, and a `useUnifiedHistogram` hook to
    tie things together. This approach allows us to render the chart and
    hook separately (in a reverse portal) from the layout, making it
    possible to separate the lifecycle of both components without keeping
    the rest of Discover's components in memory after switching tabs.
    - **Important note:** This change had the side effect of bloating the
    Unified Histogram page load bundle since we're now exporting a static
    hook that isn't dynamically imported. We could have worked around this
    by getting creative with dynamic imports, but doing that seemed hacky.
    Instead I decided now was a good time to split Unified Histogram out
    into a package in order to support tree shaking, which also has the
    added benefits of one fewer plugins to load on startup, and simplifying
    the Discover async bundles.
    
    There is one flaw with this approach: the `useDiscoverHistogram` hook
    currently depends on global services for retrieving the current query
    and filters (including global filters) through the `useQuerySubscriber`
    hook. This means the values can become out of sync in inactive tabs when
    the user modifies them in the current tab. In practice this doesn't seem
    to have an effect in most cases since we don't trigger new fetches in
    inactive tabs, and sync the the current tab values to the global
    services when switching back to a tab. However, we should still fix this
    for the MVP with an approach that doesn't leak state since the current
    approach is brittle. I avoided doing that in this PR since it would
    likely cause more conflicts with #217706, and that PR may introduce a
    solution to the issue anyway (syncing global state to the redux store,
    which we can rely on in the hook instead).
    
    Resolves #216475.
    
    ### Checklist
    
    - [ ] Any text added follows [EUI's writing
    guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
    sentence case text and includes [i18n
    support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
    - [ ]
    [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
    was added for features that require explanation or tutorials
    - [ ] [Unit or functional
    tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
    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](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
    - [x] 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](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
    used on any tests changed
    - [x] The PR description includes the appropriate Release Notes section,
    and the correct `release_note:*` label is applied per the
    [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process
    
    )
    
    ---------
    
    Co-authored-by: default avatarkibanamachine <42973632+kibanamachine@users.noreply.github.com>
Loading