pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: Fix chart resizing when using split view (#12362) 

* Fix chart resizing when using split view

* Fix z-index issues
This commit is contained in:
Kamil Gabryjelski 2021-01-09 00:20:51 +01:00 committed by GitHub
parent f642aea683
commit 77b80c9431
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
superset-frontend/src/explore/components/DataTablesPane.tsx
View File

@ -55,13 +55,8 @@ const TableControlsWrapper = styled.div`
const SouthPane = styled.div` const SouthPane = styled.div`
position: relative; position: relative;
`; background-color: ${({ theme }) => theme.colors.grayscale.light5};
z-index: 5;
const SouthPaneBackground = styled.div`
position: absolute;
height: 100%;
width: 100%;
background: ${({ theme }) => theme.colors.grayscale.light5};
`; `;
const TabsWrapper = styled.div<{ contentHeight: number }>` const TabsWrapper = styled.div<{ contentHeight: number }>`
@ -78,12 +73,10 @@ export const DataTablesPane = ({
queryFormData, queryFormData,
tableSectionHeight, tableSectionHeight,
onCollapseChange, onCollapseChange,
displayBackground,
}: { }: {
queryFormData: Record<string, any>; queryFormData: Record<string, any>;
tableSectionHeight: number; tableSectionHeight: number;
onCollapseChange: (openPanelName: string) => void; onCollapseChange: (openPanelName: string) => void;
displayBackground: boolean;
}) => { }) => {
const [data, setData] = useState<{ const [data, setData] = useState<{
[RESULT_TYPES.results]?: Record<string, any>[]; [RESULT_TYPES.results]?: Record<string, any>[];
@ -229,7 +222,6 @@ export const DataTablesPane = ({
return ( return (
<SouthPane> <SouthPane>
{displayBackground && <SouthPaneBackground />}
<TabsWrapper contentHeight={tableSectionHeight}> <TabsWrapper contentHeight={tableSectionHeight}>
<Collapse <Collapse
accordion accordion

11
superset-frontend/src/explore/components/ExploreChartPanel.jsx
View File

@ -118,9 +118,6 @@ const ExploreChartPanel = props => {
const [tableSectionHeight, setTableSectionHeight] = useState( const [tableSectionHeight, setTableSectionHeight] = useState(
calcSectionHeight(INITIAL_SIZES[1]), calcSectionHeight(INITIAL_SIZES[1]),
); );
const [displaySouthPaneBackground, setDisplaySouthPaneBackground] = useState(
false,
);
useEffect(() => { useEffect(() => {
const calcHeaderSize = debounce(() => { const calcHeaderSize = debounce(() => {
@ -137,13 +134,9 @@ const ExploreChartPanel = props => {
setTableSectionHeight(calcSectionHeight(southPercent)); setTableSectionHeight(calcSectionHeight(southPercent));
}; };
const onDragStart = () => {
setDisplaySouthPaneBackground(true);
};
const onDragEnd = sizes => { const onDragEnd = sizes => {
setSplitSizes(sizes);
recalcPanelSizes(sizes); recalcPanelSizes(sizes);
setDisplaySouthPaneBackground(false);
}; };
const onCollapseChange = openPanelName => { const onCollapseChange = openPanelName => {
@ -245,7 +238,6 @@ const ExploreChartPanel = props => {
minSize={MIN_SIZES} minSize={MIN_SIZES}
direction="vertical" direction="vertical"
gutterSize={gutterHeight} gutterSize={gutterHeight}
onDragStart={onDragStart}
onDragEnd={onDragEnd} onDragEnd={onDragEnd}
elementStyle={elementStyle} elementStyle={elementStyle}
> >
@ -254,7 +246,6 @@ const ExploreChartPanel = props => {
queryFormData={props.chart.latestQueryFormData} queryFormData={props.chart.latestQueryFormData}
tableSectionHeight={tableSectionHeight} tableSectionHeight={tableSectionHeight}
onCollapseChange={onCollapseChange} onCollapseChange={onCollapseChange}
displayBackground={displaySouthPaneBackground}
/> />
</Split> </Split>
)} )}