mirror of https://github.com/apache/superset.git
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:
parent
f642aea683
commit
77b80c9431
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
)}
|
)}
|
||||||
|
|
Loading…
Reference in New Issue