IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-10 23:55:47 -06:00
Code Issues Packages Projects Releases Wiki Activity

Explore: Prevent panes from disappearing when resizing window in split view (#55696)

Browse Source
This commit is contained in:
Kristina 2022-09-27 08:48:09 -05:00 committed by GitHub
parent 56cfe02ca2
commit 0a5aa19ca2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
public/app/features/explore/Wrapper.tsx
View File

@ -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() {