From 0a5aa19ca2907c70f86269ddd4b67defe08fd0aa Mon Sep 17 00:00:00 2001
From: Kristina <kristina.durivage@grafana.com>
Date: Tue, 27 Sep 2022 08:48:09 -0500
Subject: [PATCH] Explore: Prevent panes from disappearing when resizing window
 in split view (#55696)

---
 public/app/features/explore/Wrapper.tsx | 29 +++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/public/app/features/explore/Wrapper.tsx b/public/app/features/explore/Wrapper.tsx
index 412d62123e5..9a33de82a4d 100644
--- a/public/app/features/explore/Wrapper.tsx
+++ b/public/app/features/explore/Wrapper.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { inRange } from 'lodash';
+import { debounce, inRange } from 'lodash';
 import React, { PureComponent } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
@@ -41,6 +41,7 @@ interface OwnProps {}
 
 interface WrapperState {
   rightPaneWidth?: number;
+  windowWidth?: number;
 }
 
 const mapStateToProps = (state: StoreState) => {
@@ -68,6 +69,7 @@ class WrapperUnconnected extends PureComponent<Props, WrapperState> {
     super(props);
     this.state = {
       rightPaneWidth: undefined,
+      windowWidth: undefined,
     };
   }
 
@@ -82,6 +84,8 @@ class WrapperUnconnected extends PureComponent<Props, WrapperState> {
     if (Boolean(right)) {
       this.props.cleanupPaneAction({ exploreId: ExploreId.right });
     }
+
+    window.removeEventListener('resize', this.windowResizeListener);
   }
 
   componentDidMount() {
@@ -106,6 +110,8 @@ class WrapperUnconnected extends PureComponent<Props, WrapperState> {
     if (searchParams.from || searchParams.to) {
       locationService.partial({ from: undefined, to: undefined }, true);
     }
+
+    window.addEventListener('resize', this.windowResizeListener);
   }
 
   componentDidUpdate() {
@@ -118,6 +124,25 @@ class WrapperUnconnected extends PureComponent<Props, WrapperState> {
     document.title = documentTitle;
   }
 
+  windowResizeListener = debounce(() => {
+    let rightPaneRatio = 0.5;
+    const windowWidth = window.innerWidth;
+    // get the ratio of the previous rightPane to the window width
+    if (this.state.rightPaneWidth && this.state.windowWidth) {
+      rightPaneRatio = this.state.rightPaneWidth / this.state.windowWidth;
+    }
+    let newRightPaneWidth = Math.floor(windowWidth * rightPaneRatio);
+    if (newRightPaneWidth < this.minWidth) {
+      // if right pane is too narrow, make min width
+      newRightPaneWidth = this.minWidth;
+    } else if (windowWidth - newRightPaneWidth < this.minWidth) {
+      // if left pane is too narrow, make right pane = window - minWidth
+      newRightPaneWidth = windowWidth - this.minWidth;
+    }
+
+    this.setState({ windowWidth, rightPaneWidth: newRightPaneWidth });
+  }, 500);
+
   updateSplitSize = (rightPaneWidth: number) => {
     const evenSplitWidth = window.innerWidth / 2;
     const areBothSimilar = inRange(rightPaneWidth, evenSplitWidth - 100, evenSplitWidth + 100);
@@ -129,7 +154,7 @@ class WrapperUnconnected extends PureComponent<Props, WrapperState> {
       });
     }
 
-    this.setState({ rightPaneWidth });
+    this.setState({ ...this.state, rightPaneWidth });
   };
 
   render() {