diff --git a/package.json b/package.json index ce5a8dbd62ece..1322122ef2725 100644 --- a/package.json +++ b/package.json @@ -360,6 +360,7 @@ "@kbn/core-preboot-server": "link:packages/core/preboot/core-preboot-server", "@kbn/core-preboot-server-internal": "link:packages/core/preboot/core-preboot-server-internal", "@kbn/core-provider-plugin": "link:test/plugin_functional/plugins/core_provider_plugin", + "@kbn/core-rendering-browser": "link:packages/core/rendering/core-rendering-browser", "@kbn/core-rendering-browser-internal": "link:packages/core/rendering/core-rendering-browser-internal", "@kbn/core-rendering-server-internal": "link:packages/core/rendering/core-rendering-server-internal", "@kbn/core-root-browser-internal": "link:packages/core/root/core-root-browser-internal", diff --git a/packages/core/rendering/core-rendering-browser-internal/src/rendering_service.tsx b/packages/core/rendering/core-rendering-browser-internal/src/rendering_service.tsx index 700dad544cd2b..12a597ba9318f 100644 --- a/packages/core/rendering/core-rendering-browser-internal/src/rendering_service.tsx +++ b/packages/core/rendering/core-rendering-browser-internal/src/rendering_service.tsx @@ -18,6 +18,7 @@ import type { I18nStart } from '@kbn/core-i18n-browser'; import type { OverlayStart } from '@kbn/core-overlays-browser'; import type { ThemeServiceStart } from '@kbn/core-theme-browser'; import { KibanaRootContextProvider } from '@kbn/react-kibana-context-root'; +import { APP_FIXED_VIEWPORT_ID } from '@kbn/core-rendering-browser'; import { AppWrapper } from './app_containers'; interface StartServices { @@ -68,7 +69,7 @@ export class RenderingService { {/* The App Wrapper outside of the fixed headers that accepts custom class names from apps */} {/* Affixes a div to restrict the position of charts tooltip to the visible viewport minus the header */} -
+
{/* The actual plugin/app */} {appComponent} diff --git a/packages/core/rendering/core-rendering-browser-internal/tsconfig.json b/packages/core/rendering/core-rendering-browser-internal/tsconfig.json index 42c59f96b2471..4b0c009a0a033 100644 --- a/packages/core/rendering/core-rendering-browser-internal/tsconfig.json +++ b/packages/core/rendering/core-rendering-browser-internal/tsconfig.json @@ -26,7 +26,8 @@ "@kbn/core-analytics-browser-mocks", "@kbn/core-analytics-browser", "@kbn/core-i18n-browser", - "@kbn/core-theme-browser" + "@kbn/core-theme-browser", + "@kbn/core-rendering-browser" ], "exclude": [ "target/**/*", diff --git a/packages/core/rendering/core-rendering-browser/README.md b/packages/core/rendering/core-rendering-browser/README.md new file mode 100644 index 0000000000000..40141d7611e72 --- /dev/null +++ b/packages/core/rendering/core-rendering-browser/README.md @@ -0,0 +1,4 @@ +# @kbn/core-rendering-browser + +This package contains the types and implementation for Core's browser-side rendering service. + diff --git a/packages/core/rendering/core-rendering-browser/index.ts b/packages/core/rendering/core-rendering-browser/index.ts new file mode 100644 index 0000000000000..d8ccea264df05 --- /dev/null +++ b/packages/core/rendering/core-rendering-browser/index.ts @@ -0,0 +1,10 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the "Elastic License + * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +export { APP_FIXED_VIEWPORT_ID, useAppFixedViewport } from './src'; diff --git a/packages/core/rendering/core-rendering-browser/jest.config.js b/packages/core/rendering/core-rendering-browser/jest.config.js new file mode 100644 index 0000000000000..13f1819553812 --- /dev/null +++ b/packages/core/rendering/core-rendering-browser/jest.config.js @@ -0,0 +1,14 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the "Elastic License + * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +module.exports = { + preset: '@kbn/test', + rootDir: '../../../..', + roots: ['/packages/core/rendering/core-rendering-browser'], +}; diff --git a/packages/core/rendering/core-rendering-browser/kibana.jsonc b/packages/core/rendering/core-rendering-browser/kibana.jsonc new file mode 100644 index 0000000000000..4b43c11865134 --- /dev/null +++ b/packages/core/rendering/core-rendering-browser/kibana.jsonc @@ -0,0 +1,5 @@ +{ + "type": "shared-browser", + "id": "@kbn/core-rendering-browser", + "owner": "@elastic/kibana-core" +} diff --git a/packages/core/rendering/core-rendering-browser/package.json b/packages/core/rendering/core-rendering-browser/package.json new file mode 100644 index 0000000000000..4f1fa6f68ef01 --- /dev/null +++ b/packages/core/rendering/core-rendering-browser/package.json @@ -0,0 +1,7 @@ +{ + "name": "@kbn/core-rendering-browser", + "private": true, + "version": "1.0.0", + "author": "Kibana Core", + "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0" +} \ No newline at end of file diff --git a/packages/core/rendering/core-rendering-browser/src/index.ts b/packages/core/rendering/core-rendering-browser/src/index.ts new file mode 100644 index 0000000000000..aad756d296561 --- /dev/null +++ b/packages/core/rendering/core-rendering-browser/src/index.ts @@ -0,0 +1,10 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the "Elastic License + * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +export { APP_FIXED_VIEWPORT_ID, useAppFixedViewport } from './use_app_fixed_viewport'; diff --git a/packages/core/rendering/core-rendering-browser/src/use_app_fixed_viewport.ts b/packages/core/rendering/core-rendering-browser/src/use_app_fixed_viewport.ts new file mode 100644 index 0000000000000..ecf44a0018b49 --- /dev/null +++ b/packages/core/rendering/core-rendering-browser/src/use_app_fixed_viewport.ts @@ -0,0 +1,17 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the "Elastic License + * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import { useRef } from 'react'; + +export const APP_FIXED_VIEWPORT_ID = 'app-fixed-viewport'; + +export function useAppFixedViewport() { + const ref = useRef(document.getElementById(APP_FIXED_VIEWPORT_ID) ?? undefined); + return ref.current; +} diff --git a/packages/core/rendering/core-rendering-browser/tsconfig.json b/packages/core/rendering/core-rendering-browser/tsconfig.json new file mode 100644 index 0000000000000..3a932605dfa75 --- /dev/null +++ b/packages/core/rendering/core-rendering-browser/tsconfig.json @@ -0,0 +1,19 @@ +{ + "extends": "../../../../tsconfig.base.json", + "compilerOptions": { + "outDir": "target/types", + "types": [ + "jest", + "node", + "react" + ] + }, + "include": [ + "**/*.ts", + "**/*.tsx", + ], + "kbn_references": [], + "exclude": [ + "target/**/*", + ] +} diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx b/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx index 5baf582877a68..816a10509b425 100644 --- a/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx +++ b/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx @@ -41,6 +41,7 @@ import { } from '@kbn/expressions-plugin/public'; import type { FieldFormat } from '@kbn/field-formats-plugin/common'; import { getOverridesFor } from '@kbn/chart-expressions-common'; +import { useAppFixedViewport } from '@kbn/core-rendering-browser'; import { consolidateMetricColumns } from '../../common/utils'; import { DEFAULT_PERCENT_DECIMALS } from '../../common/constants'; import { @@ -385,7 +386,7 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => { [visType, visParams, containerDimensions, rescaleFactor, hasOpenedOnAggBasedEditor] ); - const fixedViewPort = document.getElementById('app-fixed-viewport'); + const fixedViewPort = useAppFixedViewport(); const legendPosition = visParams.legendPosition ?? Position.Right; diff --git a/src/plugins/chart_expressions/expression_partition_vis/tsconfig.json b/src/plugins/chart_expressions/expression_partition_vis/tsconfig.json index 7669646f40a6b..1d8c4c4098728 100644 --- a/src/plugins/chart_expressions/expression_partition_vis/tsconfig.json +++ b/src/plugins/chart_expressions/expression_partition_vis/tsconfig.json @@ -30,6 +30,7 @@ "@kbn/chart-expressions-common", "@kbn/cell-actions", "@kbn/react-kibana-context-render", + "@kbn/core-rendering-browser", ], "exclude": [ "target/**/*", diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx index e1c428dd15c72..349af46eb101a 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx @@ -55,6 +55,7 @@ import { } from '@kbn/visualizations-plugin/common/constants'; import { PersistedState } from '@kbn/visualizations-plugin/public'; import { getOverridesFor, ChartSizeSpec } from '@kbn/chart-expressions-common'; +import { useAppFixedViewport } from '@kbn/core-rendering-browser'; import type { FilterEvent, BrushEvent, @@ -232,6 +233,7 @@ export function XYChart({ const chartRef = useRef(null); const chartBaseTheme = chartsThemeService.useChartsBaseTheme(); const darkMode = chartsThemeService.useDarkMode(); + const appFixedViewport = useAppFixedViewport(); const filteredLayers = getFilteredLayers(layers); const layersById = filteredLayers.reduce>( (hashMap, layer) => ({ ...hashMap, [layer.layerId]: layer }), @@ -767,7 +769,7 @@ export function XYChart({ > , XYChartSeriesIdentifier> - boundary={document.getElementById('app-fixed-viewport') ?? undefined} + boundary={appFixedViewport} headerFormatter={ !args.detailedTooltip && xAxisColumn ? ({ value }) => ( diff --git a/src/plugins/chart_expressions/expression_xy/tsconfig.json b/src/plugins/chart_expressions/expression_xy/tsconfig.json index efa65a7f28a7d..cd8bd4db90b89 100644 --- a/src/plugins/chart_expressions/expression_xy/tsconfig.json +++ b/src/plugins/chart_expressions/expression_xy/tsconfig.json @@ -35,6 +35,7 @@ "@kbn/es-query", "@kbn/cell-actions", "@kbn/react-kibana-context-render", + "@kbn/core-rendering-browser", ], "exclude": [ "target/**/*", diff --git a/src/plugins/dashboard/public/dashboard_actions/filters_notification_popover.tsx b/src/plugins/dashboard/public/dashboard_actions/filters_notification_popover.tsx index 5f23b21dc9155..5433646e3db8e 100644 --- a/src/plugins/dashboard/public/dashboard_actions/filters_notification_popover.tsx +++ b/src/plugins/dashboard/public/dashboard_actions/filters_notification_popover.tsx @@ -62,8 +62,7 @@ export function FiltersNotificationPopover({ api }: { api: FiltersNotificationAc } }, [api, setDisableEditButton]); - const [hasLockedHoverActions, dataViews, parentViewMode] = useBatchedOptionalPublishingSubjects( - api.hasLockedHoverActions$, + const [dataViews, parentViewMode] = useBatchedOptionalPublishingSubjects( api.parentApi?.dataViews, getViewModeSubject(api ?? undefined) ); @@ -77,7 +76,7 @@ export function FiltersNotificationPopover({ api }: { api: FiltersNotificationAc onClick={() => { setIsPopoverOpen(!isPopoverOpen); if (apiCanLockHoverActions(api)) { - api?.lockHoverActions(!hasLockedHoverActions); + api?.lockHoverActions(!api.hasLockedHoverActions$.value); } }} data-test-subj={`embeddablePanelNotification-${api.uuid}`} diff --git a/src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid.tsx b/src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid.tsx index 0ef976af51eb6..76a545d1ea9fc 100644 --- a/src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid.tsx +++ b/src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid.tsx @@ -18,6 +18,7 @@ import { Layout, Responsive as ResponsiveReactGridLayout } from 'react-grid-layo import { ViewMode } from '@kbn/embeddable-plugin/public'; import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing'; +import { useAppFixedViewport } from '@kbn/core-rendering-browser'; import { DashboardPanelState } from '../../../../common'; import { DashboardGridItem } from './dashboard_grid_item'; import { useDashboardGridSettings } from './use_dashboard_grid_settings'; @@ -25,7 +26,13 @@ import { useDashboardApi } from '../../../dashboard_api/use_dashboard_api'; import { getPanelLayoutsAreEqual } from '../../state/diffing/dashboard_diffing_utils'; import { DASHBOARD_GRID_HEIGHT, DASHBOARD_MARGIN_SIZE } from '../../../dashboard_constants'; -export const DashboardGrid = ({ viewportWidth }: { viewportWidth: number }) => { +export const DashboardGrid = ({ + dashboardContainer, + viewportWidth, +}: { + dashboardContainer?: HTMLElement; + viewportWidth: number; +}) => { const dashboardApi = useDashboardApi(); const [animatePanelTransforms, expandedPanelId, focusedPanelId, panels, useMargins, viewMode] = @@ -51,6 +58,8 @@ export const DashboardGrid = ({ viewportWidth }: { viewportWidth: number }) => { } }, [expandedPanelId]); + const appFixedViewport = useAppFixedViewport(); + const panelsInOrder: string[] = useMemo(() => { return Object.keys(panels).sort((embeddableIdA, embeddableIdB) => { const panelA = panels[embeddableIdA]; @@ -72,6 +81,8 @@ export const DashboardGrid = ({ viewportWidth }: { viewportWidth: number }) => { const type = panels[embeddableId].type; return ( { /> ); }); - }, [expandedPanelId, panels, panelsInOrder, focusedPanelId]); + }, [ + appFixedViewport, + dashboardContainer, + expandedPanelId, + panels, + panelsInOrder, + focusedPanelId, + ]); const onLayoutChange = useCallback( (newLayout: Array) => { diff --git a/src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid_item.tsx b/src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid_item.tsx index 9b5a00c628608..5ad1363e6f8af 100644 --- a/src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid_item.tsx +++ b/src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid_item.tsx @@ -23,6 +23,8 @@ import { embeddableService, presentationUtilService } from '../../../services/ki type DivProps = Pick, 'className' | 'style' | 'children'>; export interface Props extends DivProps { + appFixedViewport?: HTMLElement; + dashboardContainer?: HTMLElement; id: DashboardPanelState['explicitInput']['id']; index?: number; type: DashboardPanelState['type']; @@ -35,6 +37,8 @@ export interface Props extends DivProps { export const Item = React.forwardRef( ( { + appFixedViewport, + dashboardContainer, expandedPanelId, focusedPanelId, id, @@ -92,10 +96,8 @@ export const Item = React.forwardRef( } }, [id, dashboardApi, scrollToPanelId, highlightPanelId, ref, blurPanel]); - const dashboardContainerTopOffset = - (document.querySelector('.dashboardContainer') as HTMLDivElement)?.offsetTop || 0; - const globalNavTopOffset = - (document.querySelector('#app-fixed-viewport') as HTMLDivElement)?.offsetTop || 0; + const dashboardContainerTopOffset = dashboardContainer?.offsetTop || 0; + const globalNavTopOffset = appFixedViewport?.offsetTop || 0; const focusStyles = blurPanel ? css` diff --git a/src/plugins/dashboard/public/dashboard_container/component/viewport/dashboard_viewport.tsx b/src/plugins/dashboard/public/dashboard_container/component/viewport/dashboard_viewport.tsx index 027d2aee62b15..51f414bfcc298 100644 --- a/src/plugins/dashboard/public/dashboard_container/component/viewport/dashboard_viewport.tsx +++ b/src/plugins/dashboard/public/dashboard_container/component/viewport/dashboard_viewport.tsx @@ -41,7 +41,7 @@ export const useDebouncedWidthObserver = (skipDebounce = false, wait = 100) => { return { ref, width }; }; -export const DashboardViewport = () => { +export const DashboardViewport = ({ dashboardContainer }: { dashboardContainer?: HTMLElement }) => { const dashboardApi = useDashboardApi(); const [hasControls, setHasControls] = useState(false); const [ @@ -160,7 +160,9 @@ export const DashboardViewport = () => { otherwise, there is a race condition where the panels can end up being squashed TODO only render when dashboardInitialized */} - {viewportWidth !== 0 && } + {viewportWidth !== 0 && ( + + )}
); diff --git a/src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container.tsx b/src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container.tsx index e21a2f94bfc51..99f4fb7c2fa90 100644 --- a/src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container.tsx +++ b/src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container.tsx @@ -470,7 +470,7 @@ export class DashboardContainer coreStart={{ chrome: coreServices.chrome, customBranding: coreServices.customBranding }} > - + , diff --git a/src/plugins/dashboard/tsconfig.json b/src/plugins/dashboard/tsconfig.json index 3e95675ea64c3..1bf6827433b66 100644 --- a/src/plugins/dashboard/tsconfig.json +++ b/src/plugins/dashboard/tsconfig.json @@ -81,6 +81,7 @@ "@kbn/core-custom-branding-browser-mocks", "@kbn/core-mount-utils-browser", "@kbn/visualization-utils", + "@kbn/core-rendering-browser", ], "exclude": ["target/**/*"] } diff --git a/tsconfig.base.json b/tsconfig.base.json index 48de99923a12b..365f9ea85fd0c 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -542,6 +542,8 @@ "@kbn/core-preboot-server-mocks/*": ["packages/core/preboot/core-preboot-server-mocks/*"], "@kbn/core-provider-plugin": ["test/plugin_functional/plugins/core_provider_plugin"], "@kbn/core-provider-plugin/*": ["test/plugin_functional/plugins/core_provider_plugin/*"], + "@kbn/core-rendering-browser": ["packages/core/rendering/core-rendering-browser"], + "@kbn/core-rendering-browser/*": ["packages/core/rendering/core-rendering-browser/*"], "@kbn/core-rendering-browser-internal": ["packages/core/rendering/core-rendering-browser-internal"], "@kbn/core-rendering-browser-internal/*": ["packages/core/rendering/core-rendering-browser-internal/*"], "@kbn/core-rendering-browser-mocks": ["packages/core/rendering/core-rendering-browser-mocks"], diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_bar_chart.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_bar_chart.tsx index 3f0a80082aec6..cbe7507b3cfdc 100644 --- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_bar_chart.tsx +++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_bar_chart.tsx @@ -22,6 +22,7 @@ import { } from '@elastic/charts'; import { useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import { useAppFixedViewport } from '@kbn/core-rendering-browser'; import { useBaseChartTheme } from '../../../../../../hooks/use_base_chart_theme'; import { BAR_HEIGHT } from './constants'; import { WaterfallChartChartContainer, WaterfallChartTooltip } from './styles'; @@ -86,6 +87,8 @@ export const WaterfallBarChart = ({ const handleProjectionClick = useMemo(() => onProjectionClick, [onProjectionClick]); const memoizedTickFormat = useCallback(tickFormat, [tickFormat]); + const appFixedViewport = useAppFixedViewport(); + return ( onProjectionClick, [onProjectionClick]); const memoizedTickFormat = useCallback(tickFormat, [tickFormat]); + const appFixedViewport = useAppFixedViewport(); + return (