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`
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
const SouthPaneBackground = styled.div`
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: ${({ theme }) => theme.colors.grayscale.light5};
|
||||
background-color: ${({ theme }) => theme.colors.grayscale.light5};
|
||||
z-index: 5;
|
||||
`;
|
||||
|
||||
const TabsWrapper = styled.div<{ contentHeight: number }>`
|
||||
|
@ -78,12 +73,10 @@ export const DataTablesPane = ({
|
|||
queryFormData,
|
||||
tableSectionHeight,
|
||||
onCollapseChange,
|
||||
displayBackground,
|
||||
}: {
|
||||
queryFormData: Record<string, any>;
|
||||
tableSectionHeight: number;
|
||||
onCollapseChange: (openPanelName: string) => void;
|
||||
displayBackground: boolean;
|
||||
}) => {
|
||||
const [data, setData] = useState<{
|
||||
[RESULT_TYPES.results]?: Record<string, any>[];
|
||||
|
@ -229,7 +222,6 @@ export const DataTablesPane = ({
|
|||
|
||||
return (
|
||||
<SouthPane>
|
||||
{displayBackground && <SouthPaneBackground />}
|
||||
<TabsWrapper contentHeight={tableSectionHeight}>
|
||||
<Collapse
|
||||
accordion
|
||||
|
|
|
@ -118,9 +118,6 @@ const ExploreChartPanel = props => {
|
|||
const [tableSectionHeight, setTableSectionHeight] = useState(
|
||||
calcSectionHeight(INITIAL_SIZES[1]),
|
||||
);
|
||||
const [displaySouthPaneBackground, setDisplaySouthPaneBackground] = useState(
|
||||
false,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const calcHeaderSize = debounce(() => {
|
||||
|
@ -137,13 +134,9 @@ const ExploreChartPanel = props => {
|
|||
setTableSectionHeight(calcSectionHeight(southPercent));
|
||||
};
|
||||
|
||||
const onDragStart = () => {
|
||||
setDisplaySouthPaneBackground(true);
|
||||
};
|
||||
|
||||
const onDragEnd = sizes => {
|
||||
setSplitSizes(sizes);
|
||||
recalcPanelSizes(sizes);
|
||||
setDisplaySouthPaneBackground(false);
|
||||
};
|
||||
|
||||
const onCollapseChange = openPanelName => {
|
||||
|
@ -245,7 +238,6 @@ const ExploreChartPanel = props => {
|
|||
minSize={MIN_SIZES}
|
||||
direction="vertical"
|
||||
gutterSize={gutterHeight}
|
||||
onDragStart={onDragStart}
|
||||
onDragEnd={onDragEnd}
|
||||
elementStyle={elementStyle}
|
||||
>
|
||||
|
@ -254,7 +246,6 @@ const ExploreChartPanel = props => {
|
|||
queryFormData={props.chart.latestQueryFormData}
|
||||
tableSectionHeight={tableSectionHeight}
|
||||
onCollapseChange={onCollapseChange}
|
||||
displayBackground={displaySouthPaneBackground}
|
||||
/>
|
||||
</Split>
|
||||
)}
|
||||
|
|
Loading…
Reference in New Issue