iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: Keeps context menu in viewport (#21212)

This commit is contained in:
Michael S. Molina 2022-08-29 08:14:22 -03:00 committed by GitHub
parent f017f98b88
commit 77f54585de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
superset-frontend/src/components/Chart/ChartContextMenu.tsx
View File

@ -27,6 +27,9 @@ import { QueryObjectFilterClause, t, styled } from '@superset-ui/core';
import { Menu } from 'src/components/Menu';
import { AntdDropdown as Dropdown } from 'src/components';
const MENU_ITEM_HEIGHT = 32;
const MENU_VERTICAL_SPACING = 32;
export interface ChartContextMenuProps {
id: string;
onSelection: (filters: QueryObjectFilterClause[]) => void;
@ -82,7 +85,19 @@ const ChartContextMenu = (
const open = useCallback(
(filters: QueryObjectFilterClause[], clientX: number, clientY: number) => {
setState({ filters, clientX, clientY });
// Viewport height
const vh = Math.max(
document.documentElement.clientHeight || 0,
window.innerHeight || 0,
);
// +1 for automatically added options such as 'All' and 'Drill to detail'
const itemsCount = filters.length + 1;
const menuHeight = MENU_ITEM_HEIGHT * itemsCount + MENU_VERTICAL_SPACING;
// Always show the context menu inside the viewport
const adjustedY = vh - clientY < menuHeight ? vh - menuHeight : clientY;
setState({ filters, clientX, clientY: adjustedY });
// Since Ant Design's Dropdown does not offer an imperative API
// and we can't attach event triggers to charts SVG elements, we