Hackfest to emit window resize events everytime div sizes change (sidebar toggles, route conditional panels, etc.) to cause Plotly to re-render its graphs.

Author: Oliver Flasch

dash_coreui_components/dash_coreui_components.dev.js

@@ -82,6 +82,8 @@ class appasidetoggler extends Component {
   asideToggle(e) {
     e.preventDefault();
     this.toggle()
+    // TODO HACK: Create a synthetic window resize event to cause Plotly graphs to re-render after the transition finishes.
+    window.setTimeout(() => window.dispatchEvent(new Event('resize')), 150);
   }
 
   render() {

dash_coreui_components/dash_coreui_components.min.js

@@ -49,6 +49,8 @@ class approuteconditional extends Component {
     const listener = () => {
       return () => {
         this.forceUpdate(); // force render()
+        // TODO HACK: Create a synthetic window resize event to cause Plotly graphs to re-render.
+        window.dispatchEvent(new Event('resize'));
       };
     };
     window.addEventListener('onpopstate', listener());

src/lib/components/appasidetoggler.react.js

@@ -74,6 +74,8 @@ class appsidebarminimizer extends Component {
   handleClick(e) {
     this.sidebarMinimize(e)
     this.brandMinimize(e)
+    // TODO HACK: Create a synthetic window resize event to cause Plotly graphs to re-render after the transition finishes.
+    window.setTimeout(() => window.dispatchEvent(new Event('resize')), 150);
   }
 
   render() {

src/lib/components/approuteconditional.react.js

@@ -61,6 +61,8 @@ class appsidebartoggler extends Component {
   sidebarToggle(e) {
     e.preventDefault();
     this.toggle();
+    // TODO HACK: Create a synthetic window resize event to cause Plotly graphs to re-render after the transition finishes.
+    window.setTimeout(() => window.dispatchEvent(new Event('resize')), 150);
   }
 
   toggle(force) {