Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Error rendering portal content" accord when using the "Setting": Auto-apply visualization changes #141203

Closed
ninoslavmiskovic opened this issue Sep 21, 2022 · 3 comments · Fixed by #141272
Assignees
Labels
bug Fixes for quality problems that affect the customer experience impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. Team:Visualizations Visualization editors, elastic-charts and infrastructure

Comments

@ninoslavmiskovic
Copy link
Contributor

Kibana version: Production 8.5

Browser: Chrome Version 105.0.5195.125

When setting the "Setting": Auto-apply visualization changes in Lens and using the "Apply changes" after altering a chart a couple of times, then I suddenly got this error: "Error rendering portal content"

OS: macOS Montery
Skærmbillede 2022-09-21 kl  11 24 58

Log:

kbn-ui-shared-deps-npm.dll.js:420 DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. at ys (https://my-deployment-e4d872.kb.us-central1.gcp.cloud.es.io:9243/55434/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:420:86923) at ys (https://my-deployment-e4d872.kb.us-central1.gcp.cloud.es.io:9243/55434/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:420:86996) at bs (https://my-deployment-e4d872.kb.us-central1.gcp.cloud.es.io:9243/55434/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:420:86434) at xu (https://my-deployment-e4d872.kb.us-central1.gcp.cloud.es.io:9243/55434/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:420:101483) at t.unstable_runWithPriority (https://my-deployment-e4d872.kb.us-central1.gcp.cloud.es.io:9243/55434/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:428:3844) at Gi (https://my-deployment-e4d872.kb.us-central1.gcp.cloud.es.io:9243/55434/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:420:45280) at Mu (https://my-deployment-e4d872.kb.us-central1.gcp.cloud.es.io:9243/55434/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:420:99505) at du (https://my-deployment-e4d872.kb.us-central1.gcp.cloud.es.io:9243/55434/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:420:94882) at https://my-deployment-e4d872.kb.us-central1.gcp.cloud.es.io:9243/55434/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:420:45571 at t.unstable_runWithPriority (https://my-deployment-e4d872.kb.us-central1.gcp.cloud.es.io:9243/55434/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:428:3844) us @ kbn-ui-shared-deps-npm.dll.js:420

The error disappeared after I refreshed the page. I tried to reproduce without luck.

@ninoslavmiskovic ninoslavmiskovic added bug Fixes for quality problems that affect the customer experience Team:Visualizations Visualization editors, elastic-charts and infrastructure labels Sep 21, 2022
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-vis-editors @elastic/kibana-vis-editors-external (Team:VisEditors)

@flash1293
Copy link
Contributor

I managed to reproduce. I happens if the top nav tries to render while the settings popover is open.

A way to reproduce it:

  • turn off auto apply with an empty chart
  • Drag in a field
  • Open the settings popover
  • turn on auto apply
  • Chart renders, top nav updates, top nav crashes

This happens because on opening the popover, the actual button dom element is wrapped by a popover anchor element. The react root of the menu doesn't know about it and crashes on trying to update the dom.

A possible quick fix would be to create another dom element that serves as the anchor which doesn't wrap the actual button:

export function toggleSettingsMenuOpen(props: {
  lensStore: Store<LensAppState>;
  anchorElement: HTMLElement;
  theme$: Observable<CoreTheme>;
}) {
  if (isMenuOpen) {
    closeSettingsMenu();
    return;
  }

  isMenuOpen = true;
  document.body.appendChild(container);
  const anchor = document.createElement('span');
  props.anchorElement.appendChild(anchor);

  const element = (
    <Provider store={props.lensStore}>
      <KibanaThemeProvider theme$={props.theme$}>
        <I18nProvider>
          <SettingsMenu
            {...props}
            anchorElement={anchor}
            isOpen={isMenuOpen}
            onClose={closeSettingsMenu}
          />
        </I18nProvider>
      </KibanaThemeProvider>
    </Provider>
  );
  ReactDOM.render(element, container);
}

But that's pretty hacky. A more stable way would be to extend the TopNavMenu to accept popovers for the menu items so it's just a single react root. I can imagine that being a useful in other contexts, too.

@elastic/kibana-app-services what do you think?

@flash1293 flash1293 added impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. Team:AppServicesUx labels Sep 21, 2022
@flash1293
Copy link
Contributor

An even easier approach for right now would be to simply close the popover on setting change - that way we can fix the root cause in a separate PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Fixes for quality problems that affect the customer experience impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. Team:Visualizations Visualization editors, elastic-charts and infrastructure
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants